/* topnav styles - last edited on 1-29-15
----------------------------------------------- */

#banner { background: #5b3249; text-align: center; height: 500px; width: 100%; min-width: 980px; float: left; clear: both; margin: 0; padding: 0; position: relative; }
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7 { background: #acc201; /* background: #fff; */ text-align: center; height: 350px; width: 100%; min-width: 980px; float: left; clear: both; margin: 32px 0 0 0; padding: 0; position: relative; }

.banner-purple { background: #6b3e58 !important; }

.slides  { color: #fff; text-align: center; height: 500px; width: 100%; min-width: 980px; }
.slides h1, .slides h2 { text-transform: uppercase; text-align: left; padding-left: 7px; text-shadow: #333 1px 1px 2px; }

.slides h2 { font-size: 22px; margin-top: 10px; }
.slides h1, .slides h2.heading { font-size: 50px; line-height: 115%; padding-top: 60px; margin-top: 25px; float: left; clear: both; max-width: 95%; white-space: nowrap;  }


#home-banner { background: url(../home-images/top-b.jpg) no-repeat center 0; margin-top: 0; height: 500px; float: left; }
#who-banner { background: url(../home-images/who-b.jpg) no-repeat center bottom; margin-top: 0; height: 350px; float: left; }
#products-banner { background: url(../home-images/products-b.jpg) no-repeat center bottom; margin-top: 0; height: 350px; float: left; }
#events-banner { background: url(../home-images/events-b.jpg) no-repeat center bottom; margin-top: 0; height: 350px; float: left; }
#buy-banner { background: url(../home-images/buy-b.jpg) no-repeat center bottom; margin-top: 0; height: 350px; float: left; }
#host-banner { background: url(../home-images/host-b.jpg) no-repeat center bottom; margin-top: 0; height: 350px; float: left; }
#contact-banner { background: url(../home-images/contact-b.jpg) no-repeat center bottom; margin-top: 0; height: 350px; float: left; }



/* #banner .slides { display: none; } */
#banner .slides { height: 500px !important; margin: 0px !important; padding: 0px !important; }
#banner-2 .slides, #banner-3 .slides, #banner-4 .slides, #banner-5 .slides, #banner-6 .slides, #banner-7 .slides
{ height: 350px; margin: 0 !important; padding: 0 !important; }

#banner .slides div { width: 980px; height: 500px; margin: 0 auto; padding-right: 10px; padding-left: 10px; }
#banner .slides div, #banner-2 .slides div, #banner-3 .slides div, #banner-4 .slides div, #banner-5 .slides div, #banner-6 .slides div, #banner-7 .slides div
{ width: 980px; height: 350px; margin: 0 auto; padding-right: 10px; padding-left: 10px; }

#banner .slides div.home { }
#banner .slides div.home h1 { color: #fff; font: 700 55px/63px 'Open Sans', Arial, sans-serif; text-shadow: #333 1px 1px 2px; text-transform: uppercase; margin-top: 95px; }


#banner .slides a:link, #banner .slides a:visited { }
#banner .slides a:hover, #banner .slides a:active { }

.navbar { overflow: hidden }


/*
Responsive ----------------------------------- */

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

}

@media only screen and (max-width: 980px) {
 
}

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

#banner, #home-banner, .slides { height: 365px; width: 100%; min-width: 980px; 
 -webkit-background-size: 160%; -moz-background-size: 160%; -o-background-size: 160%; background-size: 160%; }
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 340px; width: 100%; min-width: 980px;
 -webkit-background-size: 155%; -moz-background-size: 155%; -o-background-size: 155%; background-size: 153%; background-position: top; }  

#home-banner h1 { font: 700 53px/59px 'Open Sans', Arial, sans-serif !important; padding-top: 10px !important; margin-top: 55px !important; }
.slides h1, .slides h2.heading { font-size: 48px; padding-top: 60px; margin-top: 25px; white-space: normal !important; }

}


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

#banner, #home-banner { height: 321px; min-width: 890px; 
 -webkit-background-size: 154%; -moz-background-size: 154%; -o-background-size: 154%; background-size: 154%; }
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 310px; min-width: 890px; } 

.slides h1, .slides h2.heading { font-size: 45px; padding-top: 50px; margin-top: 20px; max-width: 870px; }
 
}

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

#banner, #home-banner { height: 310px; min-width: 860px; }
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 300px; min-width: 860px; } 
 
}


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

#banner, #home-banner { height: 295px; min-width: 820px; max-width: 800px; }
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 285px; min-width: 820px; } 

#home-banner h1 { font: 700 52px/58px 'Open Sans', Arial, sans-serif !important; }
.slides h1, .slides h2.heading { font-size: 44px; padding-top: 45px; margin-top: 10px; max-width: 800px; }
 
}

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

#banner, #home-banner { height: 285px; min-width: 800px; }
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 280px; min-width: 800px; } 

.slides h1, .slides h2.heading { margin-top: 15px;  max-width: 780px; }
 
}

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

#banner, #home-banner { height: 275px; min-width: 768px; }
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 268px; min-width: 768px; } 

#home-banner h1 { font: 700 51px/57px 'Open Sans', Arial, sans-serif !important; padding-top: 5px !important; margin-top: 50px !important; }

.slides h1, .slides h2.heading { font-size: 43px; margin-top: 10px; max-width: 748px; }
 
}

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

#banner, #home-banner { height: 270px; min-width: 759px; }
#banner { padding-top: 100px;  }
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 260px; min-width: 759px; } 

.slides h1, .slides h2.heading { font-size: 42px; max-width: 730px; }
 
}

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

#banner, #home-banner { height: 255px; min-width: 720px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { max-height: 250px; height: 250px; min-width: 720px; } 
.slides h1, .slides h2.heading { font-size: 39px; padding-top: 35px; margin-top: 10px; max-width: 690px; }
 
}

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

#banner, #home-banner { height: 240px; min-width: 680px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 235px; min-width: 680px; } 

#home-banner h1 { font: 700 49px/55px 'Open Sans', Arial, sans-serif !important; margin-top: 40px !important; }
.slides h1, .slides h2.heading { font-size: 37px; padding-top: 30px;  max-width: 650px; }
 
.buy, .events { height: auto !important; }
 
}

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

#banner, #home-banner { height: 233px; min-width: 650px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 225px; min-width: 650px; } 

#home-banner h1 { font: 700 47px/53px 'Open Sans', Arial, sans-serif !important; margin-top: 35px !important; }
.slides h1, .slides h2.heading { font-size: 35px; padding-top: 25px; max-width: 620px; } 

}

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

#banner, #home-banner { height: 230px; min-width: 640px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 223px; min-width: 640px; } 
 .slides h1, .slides h2.heading { max-width: 620px; }
}

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

#banner, #home-banner { height: 220px; min-width: 620px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 210px; min-width: 620px; } 
 
#home-banner h1 { font: 700 46px/52px 'Open Sans', Arial, sans-serif !important; margin-top: 35px !important; }
.slides h1, .slides h2.heading { font-size: 33px; padding-top: 20px; max-width: 600px; } 
 
}

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

#banner, #home-banner { height: 215px; min-width: 600px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 210px; min-width: 600px; } 
.slides h1, .slides h2.heading { max-width: 580px; }  

}

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

#banner, #home-banner { height: 207px; min-width: 580px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 200px; min-width: 580px; } 

#home-banner h1 { font: 700 46px/52px 'Open Sans', Arial, sans-serif !important; margin-top: 30px !important; }
.slides h1, .slides h2.heading { font-size: 32px; padding-top: 13px; max-width: 560px; } 
 
}

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

#banner, #home-banner { height: 202px; min-width: 560px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 195px; min-width: 560px; } 

#home-banner h1 { margin-top: 20px !important; }
.slides h2 { font-size: 20px; }
.slides h1, .slides h2.heading { font-size: 29px; padding-top: 10px; max-width: 530px; } 
 
}

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

#banner, #home-banner { height: 195px; min-width: 540px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 189px; min-width: 540px; } 

#home-banner { max-height: auto !important; }
#home-banner h1 { font: 700 43px/49px 'Open Sans', Arial, sans-serif !important; }

#banner .slides div.home { max-height: 150px !important; }
.slides h1, .slides h2.heading { max-width: 490px; } 
 
}

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

#banner, #home-banner { height: 185px; min-width: 520px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 179px; min-width: 520px; } 

#home-banner h1 { font: 700 40px/45px 'Open Sans', Arial, sans-serif !important; margin-top: 19px !important; }

.slides h2 { font-size: 18px; }
.slides h1, .slides h2.heading { font-size: 27px; padding-top: 8px; max-width: 460px; } 
}

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

#banner, #home-banner { height: 170px; min-width: 480px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 160px; min-width: 480px; } 

#home-banner h1 { margin-top: 17px !important; }
.slides h2 { font-size: 18px; margin-top: 3px; }
.slides h1, .slides h2.heading { font-size: 26px; padding-top: 0px; max-width: 450px; } 
}

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

#banner, #home-banner { height: 140px; min-width: 400px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 133px; min-width: 400px; } 

#home-banner h1 { font: 700 35px/39px 'Open Sans', Arial, sans-serif !important; margin-top: 12px !important; }
.slides h1, .slides h2.heading { font-size: 24px; padding-top: 0px; margin-top: 0px; max-width: 380px; }   
}

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

#banner, #home-banner { height: 130px; min-width: 360px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 123px; min-width: 360px; } 

.slides h2 { font-size: 16px; margin-top: 0px; }
.slides h1, .slides h2.heading { font-size: 23px; padding-top: 0px; max-width: 340px; }  

#home-banner h1 { font: 700 30px/34px 'Open Sans', Arial, sans-serif !important; margin-top: 10px !important; }
 
}

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

#banner, #home-banner { height: 116px; min-width: 320px; } 
#banner-2, #banner-3, #banner-4, #banner-5, #banner-6, #banner-7, #who-banner, #products-banner, #events-banner, #buy-banner, #host-banner, #contact-banner { height: 112px; min-width: 320px; } 

.slides h1, .slides h2.heading { margin-top: -5px; max-width: 300px; }  
#home-banner h1 { font: 700 27px/31px 'Open Sans', Arial, sans-serif !important; margin-top: 8px !important; }
 
}


/*
END ----------------------------------- */



