/*
Simple Responsive Template. One-pager tutorial


primary styles 
   Author: www.prowebdesign.ro
   Add your own styles to customize the project.



BASE (MOBILE) SIZE
	These are the mobile styles. It's what people see on their phones.
	Remember, keep it light: Speed is Important.
*/


/* NAMING CONVENTION
***Component Rules ***
.component-name
.component-name--modifier-name
.component-name__sub-object
.component-name__sub-object--modifier-name
*/

/********* BASE *********
***************************/
body{
	font-family:"Arvo","Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size:1em;
	line-height:1.4em; 
	font-weight:normal;
	margin-top:0px;
	background:#454545; 
}
h1, h2, h3, h4, h5, h6{
	font-weight:600;
	font-family:"Dosis", Arial, Helvetica, sans-serif; 
	line-height:1.5em;
	margin:.45em 0;
	padding:0;
} 
h1 {font-size:2.3em;}
@font-face {
    font-family: 'MeteoconsRegular';
    src: url('../meteocons-font/meteocons-webfont.eot');
    src: url('../meteocons-font/meteocons-webfont.eot?#iefix') format('embedded-opentype'),
         url('../meteocons-font/meteocons-webfont.woff') format('woff'),
         url('../meteocons-font/meteocons-webfont.ttf') format('truetype'),
         url('../meteocons-font/meteocons-webfont.svg#MeteoconsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.icon:before {
	font-family: 'MeteoconsRegular';
	content: attr(data-icon);
}
p{ margin:0 0 1.5em;}



/********* LAYOUT *********
***************************/
.background_color{
	background: #F0F0F0 ;
	max-width: 1000px; 
	margin: 0 auto;
	position:relative;
}

.wrapper{
	max-width: 1000px;
	margin: 0 auto;
	position:relative;
}




header{ 
	background: #333;
	color: #ccc;
	padding:15px 0;
	width: 100%; 
	max-width: 1000px;
	margin: 0 auto;
	position:absolute;
	top:0;
	height:80px;
	z-index:100;
	border-bottom: 0px;
}
#banner{ float:left;}


footer{
	background:#333;
	color:#ccc;
	font-size:80%;
	padding:20px 0;
}
/*Grid*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-bottom:40px;
}






.wallpapers-teaser{	display:none;}


/********* THEME*********
***************************/

.background-grey{ background:#2b2d34;}
.background-lightgrey{ background:#999;}
.background-black{ background:#000}
.background-green{ background:#295E06}
.background-green2{ background:#128D5A}
.background-green3{ background:#0C4F00}.
text-shadow: rgb(230, 177, 95) 1px 1px,
    rgb(230, 177, 95) 2px 2px,
    rgb(230, 177, 95) 3px 3px,
    rgb(230, 177, 95) 4px 4px,
    rgb(230, 177, 95) 5px 5px,
    rgb(230, 177, 95) 6px 6px,
    rgb(230, 177, 95) 7px 7px,
    rgb(230, 177, 95) 8px 8px,
    rgb(230, 177, 95) 9px 9px,
    rgb(230, 177, 95) 10px 10px,
    rgb(230, 177, 95) 11px 11px,
    rgb(230, 177, 95) 12px 12px,
    rgb(231, 178, 95) 13px 13px,
    rgb(232, 179, 96) 14px 14px,
    rgb(234, 180, 96) 15px 15px,
    rgb(235, 181, 97) 16px 16px,
    rgb(236, 182, 98) 17px 17px,
    rgb(238, 183, 98) 18px 18px,
    rgb(239, 184, 99) 19px 19px,
    rgb(241, 185, 99) 20px 20px,
    rgb(242, 187, 100) 21px 21px,
    rgb(243, 188, 101) 22px 22px,
    rgb(245, 189, 101) 23px 23px,
    rgb(246, 190, 102) 24px 24px,
    rgb(248, 191, 102) 25px 25px,
    rgb(249, 192, 103) 26px 26px,
    rgb(250, 193, 104) 27px 27px,
    rgb(252, 194, 104) 28px 28px,
    rgb(253, 195, 105) 29px 29px,
    rgb(255, 197, 106) 30px 30px;
}

.handwriting{
	font-family:"La Belle Aurore", Arial, Sans;
	font-size:22px;
}


/****************************************
*****************************************
MEDIAQUERIES
*****************************************
****************************************/

/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px) {

} 

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 1000px) {
body:after {
		content: 'large';
		display: none;
}
.wrapper{
	max-width: 1000px; 
}
#about .wrapper{
	max-width:700px;
}
/*Grid*/
.grid_1 { width: 5%; }
.grid_2 { width: 13.333333333333%; }
.grid_3 { width: 21.666666666667%; }
.grid_4 { width: 30%; }
.grid_5 { width: 38.333333333333%; }
.grid_6 { width: 46.666666666667%; }
.grid_7 { width: 55%; }
.grid_8 { width: 63.333333333333%; }
.grid_9 { width: 71.666666666667%; }
.grid_10 { width: 80%; }
.grid_11 { width: 88.333333333333%; }
.grid_12 { width: 96.666666666667%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-left: 1.6666666666667%;
	margin-right: 1.6666666666667%;
	float: left;
	margin-bottom:0px;
}
.alpha{margin-left:0px;}
.omega{margin-right:0px;}
.rightfloat{float:right;}

/*** Main menu ***/
.menu-toggle{display:none;}
#menu-main-navigation{display:block;}

.srt-menu{
	margin:			0;
	padding:		0;
	list-style:		none;
}
.srt-menu li {
	float:			left;
	position:		relative;
	margin-left:1px;
	height:25px;
}
.srt-menu a {
	display:		block;
	position:		relative;
}
/*** One-pager skin ***/
#topnav, .srt-menu {
	float:right;
	margin: 0;
}
.srt-menu a {
	text-decoration:none;
}
.srt-menu li a{
	background:#9A7032;
	color:#666;
	margin:0; 
	padding:10px 20px;
	border-bottom:none;
}
.srt-menu a, .srt-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#666;	
}
.srt-menu li:hover > a,
.srt-menu li.current a{ 
	color:#9A7032;
}
.srt-menu li.li-weather-form{background:none; padding:0 0 0 10px;}

.wallpapers-teaser{
	display:block;
	width:auto;
	position:absolute;
	bottom:-130px;
	right:0;
	text-align:right;
	padding:0 0 10px 40px;
	background:url(../images/onepage-arrow.png) bottom left no-repeat;
}

.flex-control-nav {bottom: 10px;}

}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1024px) {

} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {

} 

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {


} 

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 

  
}

/*
PRINT STYLESHEET
*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}