/* NOTE:
 * Grid/Flex layout stuff starts at line 187. 
 * The stuff before is just boring old CSS to make content look not crappy.
 */


/*--------------------------------------------------------------
CSS Reset
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
}

.img_iso {

	border: 0;
	width: 100%;
	height: auto;
}



/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #404040;
	font-family: 'Helvetica', Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

h1,
h2,
h3 {
	text-align: center;
	margin: 0;
	padding: 1em 0;
}

p {
	margin: 0;
	padding: 1em 0;
}




/* Promo section */

.logo,
.site-title {
	text-align: center;
}

.logo {
	font-size: 8em;
}

.site-title {
	margin-top: -1em;
	margin-bottom: 3em;
}

/* Splash section */

.splash {
	background: #4CAF50;
	padding-bottom: 2em;
	color: #fff;
}

.splash-content {
	padding: 1.5em;
}

@media screen and (min-width: 600px) {
	.splash-text {
		columns: 2;
		column-gap: 2em;
	}

	.splash-text p {
		padding-top: 0;
	}
	
}

/* Buckets section */

.buckets {
	padding: 2.5em 1em 1.5em;
	background: #3E454C;
}

.buckets ul {
	margin: 0;
	padding: 0;
}

.buckets li {
	margin-bottom: 1em;
	background: white;
	list-style-type: none;
	border-radius: 6px;
}

.bucket {
	padding: 0.4em;
}

/* More section */

.more {
	padding: 2em;
}

/* Twins section */

.twin1 {
	padding: 2em;
	background: #4CAF50;
	color: white;
}

.twin2 {
		padding: 2em;
	background: #3B9E40;
		color: white;
}


.twiny1 {
	padding: 2em;
	background: #4CAF50;
	color: white;
}

.twiny2 {
		padding: 2em;
	background: #3B9E40;
		color: white;
}

.twin_video {
	padding: 1em;
	background: #4CAF50;
	color: white;
}

.triple_stats {
	padding: 1em;
	color: black;
}


/* Colophon section */
.colophon {
	padding: 2em;
	background: #292c2f;
	color: white;
	text-align: center;
}

.colophon a {
	color: white;
}

.colophon a:hover,
.colophon a:focus {
	border-bottom: 1px solid white;
}

/*--------------------------------------------------------------
If no grid support, limit width to 50em and center align
--------------------------------------------------------------*/
@supports not (display: grid) {
	.grid {
		max-width: 50em;
		margin: 0 auto;
	}
	
	
}

/*--------------------------------------------------------------
Use flex to create a three-bucket layout 
--------------------------------------------------------------*/

@media screen and (min-width: 700px) {
	@supports (display: flex) {

		.buckets ul {
			display: flex;
						/* justify-content: space-around;*/
						justify-content: center;

		}

		.buckets li {
			width: 31%;
			margin-left: 1%;
			margin-right: 1%;
		}

	  	.bucket {
	padding: 0.95em;
}

	}
}

/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/

@media screen and (min-width: 670px) {
	/* Layout with CSS Grid */
	@supports (display: grid) {

		/* Four-column layout. Two center columns have a total max width of 50em: */
		.grid {

			display: grid;
			grid-template-columns: 1fr repeat(2, minmax(auto, 40em)) 1fr;
		}
		.grid_triple_stats {

			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr;
		}


		/* Center items by placing them in the two center columns: */
		.splash-content,
		.more-content,
		.buckets ul {
			grid-column: 2/4;
		}

		/* Use automatic grid placement + span to let each item span two columns:
		

		*/
		
				.twin1, .twin2, .twin_etusivu1, .twin_etusivu2, .twiny1, .twiny2,
		.colophon aside {
			grid-column: span 2;
		}
		
		
		.mik {
			grid-column: 1/5;	
		}
			
			
		.twin1 {
		  grid-column: 3/5;
		  grid-row: 1;
		}
		.twin2 {
		  grid-column: 1/3;
		  grid-row: 1;
		}
		
		.twin_etusivu1 {
		  grid-column: 3/5;
		  grid-row: 1;
		}
		.twin_etusivu2 {
		  grid-column: 1/3;
		  grid-row: 1;
		}
		
		.twin_video {
		  grid-column: span 2;
		}


		.triple_stats {

		  
		}


	}
}