/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
@import url(http://fonts.googleapis.com/css?family=Playfair+Display:700|Playfair+Display+SC:700);
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/* ==========================================================================
   Browse Happy prompt
========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==================================================================
   Author's custom styles ================================================================== */
* {margin: 0; padding: 0;}
body {background-color: #f2e7c7; font-family: "Times New Roman", Times, serif;}
img {max-width: 100%; height: auto;}

#outer_wrap {margin: 0 auto; width: 100%; height: 730px; max-width: 1000px; position: relative; background-image: url(../img/IT-bg-500-2.jpg); background-position: top; background-size: contain; background-repeat: no-repeat;}

header {width: 100%;
    height: 0;
    padding-top: 38%;
}

#menu {
    display: block;
    position: absolute;
    top: 1%;
    right: 2%;
    width: 24%;
    cursor: pointer;
}

nav {
    display: none;
    position: absolute;
    top: 17%;
    right: 1%;
    width: 90%;
    height: 11%;
    font-size: 1.1em;
    text-align: center;
    margin-top: -25%;
    margin-right: 3.6%;
    background-color: #d3ce93;
    border: 1px solid #614e04;
    transition: .5s margin-right ease;
}
nav ul {width: 96%; list-style-type: none; margin: 1% 0 0 1%; padding-left: 0;}
nav ul li {display: inline; padding: 0 .75%;}
nav a {text-decoration: none; color: #615e04;}
nav a:hover {color: #6eaa22;}
nav li.current {font-weight: bold; color: #6a7428; text-shadow: 0 0 12px #fefe7e;}
#outer_wrap.active nav {display: inline-block;}

main {margin-top: -5%;}
#outer_wrap.active main {margin-top: 38%;}
#flower {width: 92%; margin: 0 4%;}
.anything {width: 94%; margin: 4% 3% 0 3%;}
main p {width: 92%; line-height: 1.2em; margin: 4% 4% 0 4%;}
#grow {margin-bottom: 14%;}
#grow h1 {width: 65%; font: bold 1.5em arial, san-serif; color: #6a7428; margin: -8% 0 0 4%; line-height: 1em;}
#butterfly {width: 96%; height: 0; background-image: url(../img/butterfly.png); background-repeat: no-repeat; background-position: center; background-size: contain; margin: 1% 2%; padding-top: 18.1%;}
#organic {width: 90%; height: 0; margin: 5%; padding-top: 56.1%; background-image: url(../img/organic3.jpg); background-repeat: no-repeat; background-size: contain;}
#grow h3 {width: 10em; height: 1.5em; text-align: center; font: bold .95em arial, san-serif; background-color: #6a7428; border-radius: 20px; margin: -5% auto 0 auto; padding: .5em .1em .1em .1em;}
#grow h3 a {color: #d3ce93; text-decoration: none;}
#grow h3 a:hover {color: #fcfc6d;}

aside {width: 90%; margin: -8% 5% 0 5%; background-color: #d3ce93; padding: 2% 0;}
aside p {width: 86%; color: #614e04; line-height: 1.2em; margin: 3% auto;}
#right_top {border-bottom:  2px solid #f0efca;}
aside h2 {font: 1.75em/1em 'Playfair Display SC', serif; color: #fff; text-align: center; margin: 2% 4% 0 4%;}
#right_top h2 span {font-size: .65em; display: block; line-height: 1.05em; margin-top: 2%;}
#right_top h2:hover,#right_bottom h2:hover {color: #fcfc6d;}
.peace {font-size: 1.5em; line-height: 1.1em;}
#right_top p span {color: #fff; display: inline;}
#right_top p span:hover {color: #fcfc6d;}
#right_bottom {margin-top: 4%; padding-bottom: 0; text-align: center;}
#right_bottom h2 {width: 90%; color: #fff; margin: 5%; font-family: 'Playfair Display', serif;}
#right_top a, #right_bottom a {display: block; text-decoration: none;}
#right_bottom p {line-height: 1em; margin: 3% 8%;}
#right_bottom img {width: 132px; margin: 2% 8% 3% 8%;}

#garden a {text-decoration: none;}
.shadow:hover {
    -moz-box-shadow:    0 0 8px 2px #bed787;
    -webkit-box-shadow: 0 0 8px 2px #bed787;
    box-shadow:         0 0 8px 2px #bed787;
}
#garden p {margin-top: 6%; color: #522d05;}
#garden p:hover {color: #648b29;}


footer {margin-top: -2%; font-size: .85em; text-align: center;}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media screen and (min-width: 250px) {
    nav {margin-top: -20%;}
    #outer_wrap.active main {margin-top: 35%;}
}

@media screen and (min-width: 275px) {
    nav {height: 8%; margin-top: -16%;}
    nav ul {margin: 2% auto;}
    #outer_wrap.active main {margin-top: 22%;}
    #organic {background-image: url(../img/o-hare.jpg); background-repeat: no-repeat; background-size: contain;}
    #grow h3 {margin-top: -5%;}
    .peace {font-size: 1.75em;}
}

@media screen and (min-width: 300px) {
    nav {margin-top: -10%;}
    #grow h1 {width: 60%;}
}

@media screen and (min-width: 320px) {
    img {max-width: 100%;}
    header {padding-top: 32%;}
    nav {margin-top: -8%;}
    nav ul {width: 86%; margin: 1% auto;}
    #outer_wrap.active main {margin-top: 26%;}
    #flower {float: left; width: 25%; margin: 0 3% .25em 3%;}
    .anything {float: left; width: 60%; margin: -.5% 0 1.5% 0;}
}

@media screen and (min-width: 350px) {
    nav {margin-top: -7%;}
    #outer_wrap.active main {margin-top: 20%;}
}

@media screen and (min-width: 375px) {
    nav {margin-top: -4%;}
    nav ul {width: 80%;}
}

@media screen and (min-width: 400px) {
    nav {margin-top: -1%;}
    nav ul {width: 70%;}
    #grow h1 {width: 90%;}
}

@media screen and (min-width: 450px) {
    #outer_wrap {background-image: url(../img/IT-bg-500.jpg); background-position: top; background-repeat: no-repeat;}
    #menu {display: none;}
    #outer_wrap.active nav {margin-right: 0;}
    #outer_wrap.active main {margin-top: 8%;}

    nav {width: 98%; height: 4%; top: 18%; right: .75%; margin: 0 0 0 0; font-size: 1em; display: inline-block;}
    nav ul {width: 100%; margin-top: .75%;}
    main {margin-top: 8%;}
}

@media screen and (min-width: 480px) {
    nav {top: 19.5%;}
}

@media screen and (min-width: 520px) {
    nav {top: 22%;}
    #grow {margin-top: -1%;}
    aside {float: left; width: 94%; margin: -9% 3% 1% 3%;}
    aside h2 {font-size: 1.5em}
    aside p {width: 84%;}
    #right_top {float: left; width: 49%; margin-top: .5%; border-right: 2px solid #f0efca; border-bottom: none;}
    #right_top p {margin: 5% 1.25em;}
    .peace {font-size: 1.5em;}
    #right_bottom {float: right; width: 49%; margin-top: 4%; padding-bottom: 0;}
    #right_bottom h2 {width: 60%; margin: 5% 20% 5% 18%; font-size: 1.75em;}
    footer {clear: both;}
}

@media screen and (min-width: 570px) {
    nav {top: 23%; height: 5%; font-size: 1.25em}
    #grow {margin-bottom: 0;}
    #butterfly {width: 90%; margin: -1% 5% 0 5%;}  
    #grow p {float: left; width: 60%;}
    #organic {float: right; width: 25%; background-image: url(../img/organic.jpg); background-repeat: no-repeat; margin: 4% 4% 0 0;}
    #grow h3 {float: left; margin: 2% 21%;}
    aside {clear: both; margin-top: -16%}
}

@media screen and (min-width: 610px) {
    nav {top: 24%;}
    #grow h3 {margin: 0 21%;}
    aside {margin-top: -20%}    
}
    
@media screen and (min-width: 615px) {
    #grow h3 {margin-top: 2%;}
}

@media screen and (min-width: 640px) {
    nav {top: 26%;}
    nav ul li {margin-left: 1%;}
    aside {margin-top: -21%}
}
    
@media screen and (min-width: 684px) {
    nav {top: 28%;}
    #butterfly {width: 80%; margin: -1% 10% 0 10%;}  
    aside {margin-top: -26%}
}

@media screen and (min-width: 700px) {
    #outer_wrap {background-image: url(../img/IT-bg.jpg); background-position: top; background-repeat: no-repeat;}
    header {background-image: url(../img/IT-header.png); background-repeat: no-repeat; background-position: top; padding-top: 22.6%;}
    nav {width: 74%; height: 2.6%; top: 9%; background-color: transparent; border: 0; font-size: 1.1em; margin: 0 14%; text-align: center;}
    nav ul li {margin-left: .5%;}
    main {margin-top: -3.5%;}
    #grow h1 {margin-top: -6%;}
}

@media screen and (min-width: 750px) {
    header {background-position: top;}
    nav ul li {padding: 0 .4%;}
    main {float:left; font-size: 95%; width: 48%; margin: 0 0 0 12%;}
    #flower {width: 35%; margin: 0 .7em .1em 0;}
    .anything {width: 61%;}    
    main p {line-height: 1.25em; margin-left: 0;}
    #grow {float: left;}
    #grow h1 {font-size: 1.5em; margin-left: 0;}
    #grow p {width: 64%; margin: 1% 1.5% 0 0;}
    #butterfly {width: 100%; margin: -2% 0;}
    #organic {width: 33%; margin: 8% 1.5% 0 0;}
    #grow h3 {margin-left: 10%;}

/*---------------------RIGHT COLUMN--------------------------*/
    aside {clear: none;  width: 24%; margin: 0 0 0 .8%; padding-top: 0;}
    aside p {font-size: .75em;}
    #right_top {float: none; width: 100%; border-right: 0; border-bottom: 1px solid #f0efca; padding-top: 6px;}
    aside h2 {font-size: 1.4em;}
    #right_top p {margin: 5% 1.25em; letter-spacing: .04em;}
    .peace {font-size: 1.25em; line-height: 1.1em;}
    #right_bottom {float: none; width: 100%;}
    #right_bottom h2 {width: 95%; margin: 2% auto; font-size: 1.2em;}
#right_bottom p {width: 100%; margin: 2% 0 0 0;}
#right_bottom img {width: 54%; margin: 5% 23%;}
#right_top a, #right_bottom a {display: block; text-decoration: none;}

/*------------------------FOOTER-----------------------------*/
footer {width: 100%; float: left; color: #614e04; margin-top: -2%;}
}

@media screen and (min-width: 770px) {
    nav ul {padding-left: 1%;}
    main {margin-top: -3.5%;}
    aside {margin-top: -3.5%;}
}

@media screen and (min-width: 810px) {
    #grow h3 {margin-top: -2%; margin-left: 15%;}
    #butterfly {margin-top: 0;}  
}

@media screen and (min-width: 840px) {
    #grow h3 {margin-top: -4%;}
}

@media screen and (min-width: 860px) {
    #grow h3 {margin-top: -8%;}
}
    
@media screen and (min-width: 880px) {
    main {margin-top: -6%;}
    #organic {margin-top: 4%;}
    aside {margin-top: -6%;}
    #grow h3 {margin-top: -12%;}
}

@media screen and (min-width: 960px) {
    main {margin-top: -8%;}
    aside {margin-top: -8%;}
    #grow h3 {margin-top: -17%;}
}





/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    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;
    }
}