/*
Theme Name: 	Fritid Österlen
Theme URI: 	http://fritidosterlen.se/
Description: 	Fritid Osterlen Responsive theme
Version: 	1.0
Author: 	Hillside Peak
Author URI: 	http://hillsidepeak.com/
*/
/*
===========================
CONTENTS:
01 Sensible defaults
02 Typography
03 Structure
04 Menu related
05 Misc
06 Media queries
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";
div,
article,
section,
header,
footer,
nav,
li			{ position:relative; margin:auto; }

.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
::-moz-selection 	{ background:#49caea; color:#333; }
::selection 		{ background:#49caea; color:#333; }



/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*
14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)
*/
/*
   font-family: 'Open Sans Condensed', sans-serif;
   font-family: 'Open Sans', sans-serif;
   font-family: 'EB Garamond', serif;
*/

body				{ text-align:center; font-family:"Open Sans", Arial, Helvetica, sans-serif; color:#333; font-weight:300; }
h1, h2, h3, h4, h5, h6 		{ color:#5D8DA3; font-weight:300; text-transform:uppercase; font-family: 'EB Garamond', serif; }
h1				{ font-size:3.5em; margin-bottom:0.5em; padding:0.3em 0 0.3em 0; text-align:center; letter-spacing:4px; color:#FFF; background:#5D8DA3; }
h2				{ font-size:2.3em; margin-bottom:0.2em; }
h3				{ font-size:1.5em; }

a				{ color:#000; text-decoration:none;
				  -webkit-transition: color 250ms ease-in-out;
				  -moz-transition: color 250ms ease-in-out;
				  -o-transition: color 250ms ease-in-out;
				  -ms-transition: color 250ms ease-in-out;
				  transition: color 250ms ease-in-out;}

header nav a			{ text-transform:uppercase; font-size:0.75em; letter-spacing:0.10em; font-weight:400; }
#bannerText			{ text-transform:uppercase; text-align:center; text-shadow:1px 1px 3px rgba(0, 0, 0, 0.7);
				  color:#FFF; font-size:6em; }
#bannerText .upper		{ font-size:0.5em; letter-spacing:0.2em; font-family: 'EB Garamond', serif; }
#bannerText .lower, .cf-fields,
.cf-message, .cf-submit		{ font-family:'Open Sans Condensed'; }
#start .rightColumn h2		{ color:#FFF; background:#5D8DA3; padding:0.05em 0.5em; margin-bottom:0.5em; }

ol#households li h2		{ font-size:1.8em; color:#333; }


/* ---------------------------------------------------------------------------------------------------------- 
03 Header & Nav ---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
header				{ width:100%; min-height:4.375em; height:auto; position:fixed; z-index:9000; background-color:#FFF; box-shadow:0 1px 4px rgba(0,0,0,0.5); }
header div.section		{ max-width:68.75em; }
header #logo			{ width:12em; height:3.2em; float:left; margin-top:0.5em; background:url(images/logo.png) no-repeat; background-size:100% auto; }
header #google_translate_element{ position:absolute; right:0.5em; top:0.5em; float:right; border:0; }

header nav			{ float:right; margin-left:1em; }
header nav li a			{ text-align:left; padding:2.25em 0.9375em; display:block; margin:0; transition-property:background-color; }
header nav li a:hover		{ background-color:#EDEDED; }
header nav li a:focus		{ outline:none; }
header nav li			{ display:inline-block; border-left:1px solid #CCC; }
header nav li:last-child{ border-right:1px solid #CCC; }
header nav li ul li:last-child { border:0; }

header nav li.current-menu-item,
header nav li.current_page_parent,
header nav li:hover		 {  }

header nav li:hover > ul li a	{  }
header nav ul ul		{ display:none; position:absolute; left:0; border:1px solid #CCC; }
header nav li:hover > ul	{ display:block; }
header nav li ul		{ width:15em; max-width:62.5em; position:absolute; top:4.3em; text-align:left; background:#FFF; }
header nav li ul li		{ display:block; border:0; margin:0; }
header nav li ul li a		{ /*position:relative;*/ display:block; font-size:0.7em; padding:1.2em; }
header nav li ul li a:hover	{ padding-left:1.8em; }

header nav li a:first-child:nth-last-child(2):after { content:"▼"; font-size:0.875em; margin-left:0.5em; top:-0.1em; position:relative; }



/* ---------------------------------------------------------------------------------------------------------- 
04 Content & Structure --------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
html				{ height:100%; }
body				{ height:100%; /*background:#342f2a;*/ }
section				{ width:100%; }

div.section, article		{ width:96%; max-width:62.5em; padding-left:2%; padding-right:2%; z-index:1000; }
article				{ padding:1.5% 1.5% 5% 1.5%; line-height:1.75; text-align:left; background-color:#FFF; }
article img			{ max-width:100%; height:auto; }

.parallax-window		{ min-height:80vh; background: transparent; }
#bannerText			{ max-width:60%; width:50em; height:auto; z-index:100; position:absolute; left:20%; right:20%; top:30%; bottom:20%; }

#slideshow			{ min-height:80vh; overflow:hidden; background:#FFF; }
div.slideshowTop div		{ min-height:80vh; width:100%; position:absolute; left:0; top:0px; background-size:cover; background-position:center; background-attachment:fixed; }

#container			{ border-top:8px solid #333; padding-bottom:2%; /*background:url(images/bgWood2.jpg) repeat;*/ margin-bottom:-1.5625em !important; }
#container article		{ top:-3em; }

#pageHeadingImage		{ width:69em; left:-3.3em; height:12.5em; background-size:100% auto; background-position:center; }
#content			{ margin-top:1em; }
article .leftColumn ul		{ border:1px solid #999; border-radius:3px; padding:1em; }
article .leftColumn ul li	{ list-style-type:disc; margin-left:0.8em; font-size:0.85em; }

#start .leftColumn		{ width:60%; }
#start .rightColumn		{ width:38%; }

.alignLeft			{ left:0; }
.alignRight			{ right:0; }

.leftColumn			{ width:50%; text-align:left; float:left; }
.rightColumn			{ width:48%; text-align:left; float:right; margin-left:2%; }

footer				{ width:100%; padding:2em 0 2em 0; background:#FFF; }
footer p			{  }

ol#households			{ width:100%; max-width:62.5em; margin:auto; }
ol#households li		{ width:48%; float:left; margin-bottom:0.5em; margin-right:2%; }
ol#households li article	{ height:13.75em; border:1px solid #999; padding:1em; overflow:hidden; }
.postThumbnail			{ width:48%; float:left; max-height:10em; overflow:hidden; }
.postThumbnail img		{ width:100%; height:auto; }
.postContent			{ width:48%; float:right; margin-left:2%; }

#contactForm li			{ margin-top:0px; margin-bottom:0.625em; }
#contactForm .leftColumn li	{ margin-bottom:1.25em; }
#contactForm .cf-fields,
#contactForm .cf-message	{ max-width:12.1875em; }

.blueBG				{ background-image:linear-gradient(to bottom, #689eb7 0%, #5d8da3 100%); background-color:#5d8da3; border:1px solid #437d98; background-repeat: repeat-x; color:#FFF; }
.blueBG:hover			{ background-image:none; }
.cf-fields, .cf-message,
.cf-submit			{ padding:0.3125em 0.625em 0.3125em 0.625em; display:block; margin:auto; border:0; text-align:center; font-size:1.2em; }
.cf-fields, .cf-message		{ background:#FFF; border:#CCC 1px solid; margin-bottom:0.3125em; width:98% !important; max-width:10.5em !important; }
.cf-fields			{ height:1.25em; }
.cf-message			{ height:8.125em; }
.cf-submit			{ height:3.125em; margin-top:0.625em; width:100%; }



/* ---------------------------------------------------------------------------------------------------------- 
05 Misc -----------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.clear				{ clear:both; margin:0; padding:0; }
.boxshadow			{ box-shadow:0px 0px 8px rgba(0, 0, 0, 0.5); }

header nav li a			{ -webkit-transition:250ms ease-in-out; -moz-transition:250ms ease-in-out; -o-transition:250ms ease-in-out; -ms-transition:250ms ease-in-out;
				  transition:250ms ease-in-out; }
.fadeIn				{ animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s;
				  animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; }

@keyframes fadeIn {
	0% {
		transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		transform: scale(1.1);	
	}
	80% {
		transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		-webkit-transform: scale(1.1);
	}
	80% {
		-webkit-transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}

::-webkit-input-placeholder	{ color:#FFF; }
:-moz-placeholder		{ color:#FFF; }
::-moz-placeholder		{ color:#FFF; }
:-ms-input-placeholder		{ color:#FFF; }



/* ---------------------------------------------------------------------------------------------------------- 
06 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1680px)	{  }
@media screen and (max-width: 1280px)	{ header #google_translate_element { display:none;} }
@media screen and (max-width: 1150px)	{ body	{ font-size:0.8em; } }
@media screen and (max-width: 950px)	{
		body 				{ font-size:0.6em; }
		div#colorbox, div#cboxOverlay	{ display:none !important; }
		header nav li a			{ padding:2em 0.8em 1.9em 0.8em; }
		#slideshow			{ min-height:60vh; }
		div.slideshowTop div		{ min-height:60vh; background-size:cover; background-attachment:scroll; }
}
@media screen and (max-width: 660px)	{
		body				{ font-size:0.8em; }
		h1				{ font-size:2em; }
		h2				{ font-size:1.9em; }
		.mobileHide			{ display:none !important; }
		header				{ background-color:#5d8da3; box-shadow:none; }
		header #logo			{ background:url(images/logo_White.png) no-repeat; background-size:100% auto; }
		header nav			{  }
		header nav ul		{ display:block; min-width:35px; min-height:30px; height:auto; margin:auto; position:absolute; top:15px; right:0em; z-index:9001;
							  background:url(images/menu.png) no-repeat; background-position:97% 0px; }
		header nav ul li			{ display:none; background:#FFF; border-left:1px solid #CCC; border-right:1px solid #CCC; }
		header nav ul li:last-child	{ border-bottom:1px solid #CCC; }
		header nav ul li.visible	{ display:block; }
		header nav ul li ul		{ position:absolute; top:0; z-index:9002; }
		header nav ul ul		{ display:none; left:-50vw; }

		#slideshow			{ min-height:60vh; }
		div.slideshowTop div		{ min-height:60vh; background-attachment:scroll; }

		#bannerText .upper		{ font-size:0.5em; letter-spacing:0.2em; font-family: 'EB Garamond', serif; }
		#bannerText			{ font-size:3.5em; max-width:80%; left:10%; right:10%; top:35%; bottom:10%; }

		#container			{ padding-top:8em; }
		#container article		{ top:0; }
		#content			{ margin-top:3em; }

		ol#households li h2		{ font-size:1.2em; }
		ol#households li		{ width:45%; float:left; margin:1% 2% 1% 2%; }
		ol#households li article	{ height:auto; padding:0.5em; overflow:hidden; }
		.postThumbnail			{ width:100%; float:left; }
		.postThumbnail img		{ width:100%; height:auto; }
		.postContent			{ width:100%; float:left; }

		.leftColumn, #start .leftColumn	{ width:100%; margin-bottom:3em; }
		.rightColumn, #start .rightColumn { width:100%; float:left; margin-left:0; }

		#contactForm .leftColumn	{ display:none; }
		.cf-fields, .cf-message		{ max-width:94% !important; }

		::-webkit-input-placeholder	{ color:#999; }
		:-moz-placeholder		{ color:#999; }
		::-moz-placeholder		{ color:#999; }
		:-ms-input-placeholder		{ color:#999; }
}
@media screen and (max-width: 320px)	{
		header nav ul			{ font-size:0.8em; }
		header nav ul ul		{ font-size:1.1em; }
}