/* CSS Document for Screens */
 @import  url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,300,700);
 body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #555;
    margin: 0;
    padding: 0;
}
#page {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
/* Text */
 h1 {
    margin: 0 0 1em 0;
    font-size: 2.8em;
    font-weight: 700;
}
h2 {
    margin: 0 0 .5em 0;
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.1em;
}
h3 {
    margin: 0 0 .5em 0;
    font-size: 1.3em;
    font-weight: 700;
}
h4 {
    margin: 0 0 1.5em 0;
    font-size: 1em;
    font-weight: 700;
}
p {
    margin: 0 0 1em 0;
}
.customClass {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
/* Header */
 header {
    height: 499px;
    background: url(../images/labo-dendro-800.jpg) no-repeat center bottom;
    position: relative;
    padding:10px;
}

section.main {
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 0;
}
section.main aside {
    width: 33%;
    float: left;
    text-align: center;
}
section.main .content {
    margin: 15px;
    background: no-repeat center top;
    background-size: 75px 75px;
    padding-top: 85px;
}

section.main aside { width: 33%; float: left; text-align: center; }


section.main aside h3 a { color: #000; text-decoration: none; }
section.main aside h3 a:hover { text-decoration: underline; }

section.main aside .content.trending { background-image: url(../images/icon_star.svg); }
section.main aside .content.find-it { background-image: url(../images/icon_marker.svg); }
section.main aside .content.tools { background-image: url(../images/icon_gear.svg); }




	/* Section - Atmosphere */
	section.atmosphere article { padding: 10px; background-size: 300px auto; background-color:#FFF;}

/* Clearfix */
 .clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/* Basic Styles */
 body {
    background-color: #ece8e5;
}
img_header {
    width:980px;
}
	img{max-width:100%; margin: auto;display:block}
nav {
    height: auto;
    width: 100%;
    background: #455868;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #283744;
}
nav ul {
    padding: 0;
    margin: 0 auto;
    width: 800px;
    height: 40px;

	
}
nav li {
    display: inline;
    float: left;
}
nav a {
    color: #fff;
    display: inline-block;
    width: auto;
	padding:10px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    text-shadow: 1px 1px 0px #283744;
    -moz-text-shadow: 1px 1px 0px #283744;
    -webkit-text-shadow: 1px 1px 0px #283744;
}
nav li a {
    border: 1px solid #576979;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: #8c99a4;
}
nav a#pull {
    display: none;
}

	ul {
		font-size:1.1em
	}

@media screen and (max-width: 825px) {

	h1 { font-size: 2.2em; }

	/* Header */
	header { height: 368px; background-image: url(../images/labo-dendro-600.jpg); }
	header div.hero { top: 120px; left: 48%; }
	
	/* Section - Main */
	section.main { margin-top: 10px; margin-bottom: 10px; }
	section.main aside div.content { background-size: 55px 55px; padding-top: 60px; }

	/* Section - Atmosphere */
	section.atmosphere article { padding-left: 10px; background-size: 300px auto; }

	/* Section - How To */
	section.how-to blockquote p.quote { font-size: 1.1em; line-height: 1.2em; }
	section.how-to blockquote p.credit { font-size: .85em; }

	nav {
    font-size: 1.2em;
    border-bottom: 2px solid #283744;
}

}

/*Styles for screen 600px and lower*/
 @media screen and (max-width: 600px) {
        header {
    height: 259px;
    background: url(../images/labo-dendro-400.jpg) no-repeat center bottom;
    position: relative;
    padding:10px;
}

/* Section - Main  */

	section.main aside { width: 100%; float: none; text-align: left; }
section.main aside div.content {
		margin: 8px 20px 8px 0;
		padding: 5px 0px 10px 85px;
		background-size: 50px 50px;
		background-position: 20px 5px;
	}

	
	nav {
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}
/*Styles for screen 515px and lower*/
 @media only screen and (max-width : 480px) {
	header {
    height: 200px;
    background: url(../images/labo-dendro-320.jpg) no-repeat center bottom;
    position: relative;
    padding:10px;
}


	nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: #283744;
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content:"";
        background: url('../images/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }

}
/*Smartphone*/
 @media only screen and (max-width : 320px) {
    
	header {
    height: 190px;
    background: url(../images/labo-dendro-285.jpg) no-repeat center bottom;
    position: relative;
    padding:5px;
}

	nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}