@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700|Julee|Bitter:400,400italic,700|Courgette);

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

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

/* ==================================================================
   base styles
   ============================================================= */

* {margin: 0; padding: 0;}
body {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 100%;
    line-height: 1.4em;
    background: url(../images/bkgd_xsmall.jpg) no-repeat center 0px;
    background-color: #000;
}
img {max-width: 100%; height: auto;}
#wrapper {margin: 0 auto; max-width: 1000px; height: auto; position: relative;}
header {width: 100%;}
header img {float: left; margin: 2.5% .5em 0 3%;}
#bd {float: left; width: 48%; margin: 4% 0 0 0;}
#bd a {text-decoration: none;}
#bd h3 {font-weight: 700; font-size: 1.75em; color: #fff; line-height: 1em;}
#bd p {font-size: .8em; color: #4bc; margin-top: 0; letter-spacing: .14em; line-height: 1.2em;}

nav {position: absolute; top: 450px; left: 0px; width: 100%; display: inline-block; margin: 0; text-align: left;}
nav a {
    width: 80%;
    display: block;
    font-size: 1.05em; 
    color: #0072bc; 
    text-decoration: none; 
    margin: 5% 10% 5% 7%;
    padding: 9px;
    border: 1px solid #4bc;
    background: rgba(80,80,150,.3) url(../images/mobile_arrow.png) no-repeat right center;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;}

nav a:hover {color: #fff; background-color: rgba(255,255,255,.15);}

article {float: left; width: 76%; font-family: 'Julee', cursive; font-size: 1.25em; color: #0072bc; line-height: 1.25em; margin: 35% 12% 0 12%;}
    
.testa {clear: both; font: .9em "Bitter", serif; list-style: none; text-align: justify;}
.testa li {margin-bottom: 10%;}
.testa h4 {font: 1.25em "Courgette", serif; text-align: right; margin-top: 1%;}

h2 {font-size: 125%; color: #4bc;}

main {width: 100%;}

a.fadeIn {
    opacity:0;
        -webkit-animation:fadeIn ease-in 1;
        -moz-animation:fadeIn ease-in 1;
        -o-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
        -o-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
}

a.fadeIn-3s {
        -webkit-animation-duration:3s;
        -moz-animation-duration:3s;
        -o-animation-duration:3s;
        animation-duration:3s;
}

a.fadeIn-Delay-1s {
        -webkit-animation-delay:1s;
        -moz-animation-delay:1s;
        -o-animation-delay:1s;
        animation-delay:1s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

li.active {color: #fff;}

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

@media screen and (min-width: 305px) {
    #bd {width: 74%;}
}

@media screen and (min-width: 321px) {
    body {background: url(../images/bkgd_small.jpg) no-repeat center 0px; background-color: #000;}
    header img {margin-left: 3%;}
    #bd h3 {font-size: 1.75em;}
    #bd p {font-size: .8em; letter-spacing: .14em;}
    article {width: 60%; margin: 15% 0 0 35%;}
}

@media screen and (min-width: 351px) {
    #bd {width: 75%;}
    #bd h3 {font-size: 2em;}
    #bd p {font-size: .9em; letter-spacing: .16em;}
}    

@media screen and (min-width: 362px) {
    #bd h3 {font-size: 2em;}
    #bd p {font-size: .9em; letter-spacing: .16em;}
}
    
@media screen and (min-width: 401px) {
    header img {margin-left: 5%;}
    #bd {width: 74%;}
    article {margin-left: 38%;}
}

@media screen and (min-width: 481px) {
    body {background: url(../images/bkgd_med.jpg) no-repeat center 0px; background-color: #000;}
}

@media screen and (min-width: 501px) {
    header img {margin-left: 2.5%;}
    #bd {width: 24%;  margin: 3% 0 0 4px;}
    #bd h3 {font-size: 1.75em; line-height: 1em;}
    #bd p {font-size: .8em; letter-spacing: .14em; margin-top: 1.5%; line-height: 1.2em;}
    nav {top: 36px; left: 38%; width: 56%; display: inline-block; margin-right: 0; text-align: right;}
    nav a {float: left; width: 4em; font-size: 1.15em; color: #4bc; margin: 0 0 0 6%; padding: 0px; border: none; background: none; border-radius: 0;}
    nav a:hover {color: #0ff; background: none;}
    article {margin-left: 35%;}
}

@media screen and (min-width: 538px) {
    #bd {width: 24%;}
    nav {left: 42%;}
}

@media screen and (min-width: 580px) {
    article {width: 45%; margin: 10% 0 0 40%;}
}

@media screen and (min-width: 597px) {
    #bd {width: 20%;}
    nav {left: 42%;}
}

@media screen and (min-width: 660px) {
    nav {left: 48%;}
}

@media screen and (min-width: 731px) {
    #bd {width: 16em;}
    article {width: 45%; margin: 12% 0 0 30%;}
}

@media screen and (min-width: 801px) {
    body {background: url(../images/bkgd_hd.jpg) no-repeat center 0px; background-color: #000;}
    header img {margin-left: 5%;}
    #bd h3 {font-size: 2em;}
    #bd p {font-size: .9em; letter-spacing: .16em;}
    nav {left: 58%;}
    nav a {font-size: 1.05em;}
    article {width: 35%;}
}

@media screen and (min-width: 880px) {
    #bd {width: 20em;}
    #bd h3 {font-size: 2.2em;}
    #bd p {font-size: .95em; letter-spacing: .18em; margin-top: 2px;}
    nav a {font-size: 1.05em;}
}

@media screen and (min-width: 960px) {
    nav {top: 40px; left: 55%; width: 48%; margin-right: 10%; text-align: right;}
    nav a {font-size: 1.35em; margin-left: 8%;}
}