/* CSS Document for Screens */

@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:300,400,500');

body { font-family: 'Fira Sans Condensed', sans-serif; font-size: 16px; font-weight: 300; color: #555; margin: 0; padding: 0;
		background: #f4f4f4; background-image: url(../images/tausta.jpg); background-repeat: repeat-x; }

/* rajoita kaikki sivun tavarat tiettyyn leveyteen */

#page { max-width: 810px; margin: 0 auto; position: relative; }


/* text */

h1 { margin: 0 0 1em 8px; font-size: 1.6em; font-weight: 500; line-height: 52px; }
h2 { margin: 0 0 .5em 0; font-size: .8em; font-weight: 500; line-height: 40px; }
h3 { margin: 0 0 .5em 0; font-size: .8em; font-weight: 500; line-height: 40px; }
h4 { margin: .3em 0 .3em 0; font-size: 2em; font-weight: 500; }
h5 { margin: 0 0 .3em 0; font-size: 1.6em; font-weight: 500; }
h6 { margin: .3em 0 .3em 0; font-size: 2em; font-weight: 500; }


p { margin: 0 0 .5em 0; line-height: 1.3em; }
a { color: #555; }
a:visited { color: #555; }



/* header */
header { height: 52px; position: relative; margin: auto;
	display: block;
	height: 52px; }

header div.logo { 
	float: left;
	height: 52px;
	}
	
/* nav */

nav h3 { background-color: #e6e6e6; letter-spacing: .03em; }
nav h2 { background-color: #f6ca28; letter-spacing: .03em; }

ul.topnav {
	list-style-type: none;
	margin: 0 10px 0 0 ;
	padding: 0;
	overflow: hidden;
	float: right;
	}
	
ul.topnav li {float: left;}

ul.topnav li a {
	display: inline-block;
	color: #555;
	text-align: center;
	padding: 0 16px;
	text-decoration: none;
	transition: 0.3s;
	}

ul.topnav li h3:hover { background-color: rgba(0,0,0,.2); }

ul.topnav li.icon { display: none; }


/* atmos */

section.atmos { position: relative; }

section div.phere { margin: 0 10px;	display: block;	}

section.atmos { margin-top: 75px; margin-bottom: 30px; padding: 0 10px; text-align: center;}

section.atmos h4 { color: #6db8e1; }
section.atmos h6 { color: #990000; }
section.atmos h1 { color: #000000; margin: .3em 0 .3em 0; font-size: 2em; font-weight: 500; line-height: 40px;}

/* main one */

section::after { content: ''; display: block; clear: both; }

section.mainone { position: relative; }

section.mainone aside { width: 48%; float: left; padding: 1%; }

section.mainone aside .info { background-color: #fff; border: 1px solid #ccc; padding: 10px 10px 10px 10px; }

section.mainone aside .info img { display: block; margin-bottom: 15px; width: 100%; }

/* main two*/

section::after { content: ''; display: block; clear: both; }

section.maintwo { position: relative; }

section.maintwo aside { width: 48%; float: left; padding: 1%; }

section.maintwo aside .info { background-color: #fff; border: 1px solid #ccc; padding: 10px 10px 10px 10px; }

section.maintwo aside .info img { display: block; margin-bottom: 15px; width: 100%; }

/* main single */

section::after { content: ''; display: block; clear: both; }

section.mainsingleone { 
	position: relative; 
	width: 95%; 
	margin: 9px auto; 
	padding: 0; 
	background-color: #fff; 
	border: 1px solid #ccc; 
	padding: 10px 10px 10px 10px;
	}
section.mainsingleone aside .responsiveMap { position: relative; padding-bottom: 25%; height: 0; overflow: hidden; }
section.mainsingleone aside .responsiveMap iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
section.mainsingleone aside .text {
	display: block;
	float: left;
	width: 30%;
	}

section.mainsingletwo { 
	position: relative; 
	width: 95%; 
	margin: 16px auto;  
	padding: 0; 
	background-color: #fff; 
	border: 1px solid #ccc; 
	padding: 10px 10px 10px 10px;
	}
section.mainsingletwo aside .responsiveCal { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; }
section.mainsingletwo aside .responsiveCal iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
section.mainsingletwo aside .text {
	display: block;
	float: left;
	width: 30%;
	}


/* footer */

footer { margin-top: 30px; margin-bottom: 30px; padding: 0; width: 100%; text-align: center;}

footer p { font-size: 1em; }


@media screen and (max-width: 650px) {
	
	h1 { margin: 0 0 0 1.5em; }
	
	section.atmos { padding: 0 20px; }
	
	section.mainone { position: relative; }
	section.mainone aside { margin: auto; width: 86%; float: none; text-align: left; }
	section.mainone aside .info { background-color: #fff; border: 1px solid #ccc; padding: 10px 10px 10px 10px; }
	section.mainone aside .info img { display: block; margin-bottom: 15px; width: 100%; }
	
	section.maintwo { position: relative; }	
	section.maintwo aside { margin: auto; width: 86%; float: none; text-align: left; }
	section.maintwo aside .info { background-color: #fff; border: 1px solid #ccc; padding: 10px 10px 10px 10px; }
	section.maintwo aside .info img { display: block; margin-bottom: 15px; width: 100%; }
	
	section.mainsingleone { 
	position: none; 
	width: 82%; 
	margin: 9px auto; 
	padding: 0; 
	background-color: #fff; 
	border: 1px solid #ccc; 
	padding: 10px 10px 10px 10px;
	}
	
	section.mainsingletwo{ 
	position: none; 
	width: 82%; 
	margin: 16px auto; 
	padding: 0; 
	background-color: #fff; 
	border: 1px solid #ccc; 
	padding: 10px 10px 10px 10px;
	}
	
	section.mainsingleone aside .text { float: none; width: 100%; }
	section.mainsingletwo aside .text { float: none; width: 100%; }
}

@media screen and (max-width:496px) {
	
	header h1 { margin: 0 0 0 .9em; }
	
	h2 { margin: .3em 0 0 0; font-size: .8em; font-weight: 500; line-height: 40px; }
	h3 { margin: .3em 0 0 0; font-size: .8em; font-weight: 500; line-height: 40px; }
	
	section.atmos { margin-top: 35px; }
	
	ul.topnav { float: none; margin: auto; }
	
	ul.topnav li { display: none; float: left; }
	ul.topnav li a { padding-left: 25px; }
	ul.topnav li.icon { float: right; display: inline-block; }
	ul.topnav li.icon span { font-size: 1.8em; }
	ul.topnav.responsive {position: relative;}
	ul.topnav.responsive li.icon { position: absolute; top: 0; right: 0; }
	ul.topnav.responsive li { float: none; display: inline; }
	ul.topnav.responsive li a { display: block; text-align: left; }
}