@charset "UTF-8";
/* CSS Document */


/************************************************************** viewport >1401 **************************************************************/
@media only screen and (min-width: 1400px) {
.wrapper {width:1380px; margin:0 auto;}
.container {width:100%;}

.prod-feature {height: 550px}
.banner {position: relative; height: 700px; overflow: hidden;}
.banner h1 {font-size: 3em!important}
    
.text-zero {font-size: 3em; line-height: 1em; font-weight: bold}

}




/************************************************************** viewport 1301 to 1399 **************************************************************/
@media only screen and (min-width: 1301px) and (max-width:1399px) {
.wrapper {width:1280px; margin:0 auto; }
.container {width:100%;}

.prod-feature {height: 550px}
.banner {position: relative; height: 650px; overflow: hidden;}
.banner h1 {font-size: 2.2em!important}

.text-zero {font-size: 3em; line-height: 1em; font-weight: bold}

}




/************************************************************** viewport 1201 to 1300 **************************************************************/
@media only screen and (min-width: 1201px) and (max-width:1300px) {
.wrapper {width:1180px; margin:0 auto; }
.container {width:100%;}
    
.prod-feature {height: 550px}
.banner {position: relative; height: 600px; overflow: hidden;}
.banner h1 {font-size: 2.2em!important}
    
.text-zero {font-size: 3em; line-height: 1em; font-weight: bold}


}



/************************************************************** viewport 980 to 1200 **************************************************************/
@media only screen and (min-width: 980px) and (max-width:1200px) {
.wrapper {width:980px; margin:0 auto;}
.container {width:100%}


.banner {position: relative; height: 650px; overflow: hidden;}
.banner h1 {font-size: 2.5em!important}
#youtube-player {width: 120%; height: 120%;}
    
.text-zero {font-size: 3em; line-height: 1em; font-weight: bold}
    

}



/************************************************************** viewport 980 to 992 - ac **************************************************************/
@media only screen and (min-width: 980px) and (max-width:992px) {

.navbar-collapse {margin-top:10px;}
.navbar-collapse li a  {background:rgba(184,212,51,.2)!important; padding:10px 10px; border: solid 1px #fff}
.navbar-collapse li a:hover  {background:rgba(184,212,51,.6)!important;}
    
.banner {position: relative; height: 700px; overflow: hidden}
.banner h1 {font-size: 2.2em!important}
#youtube-player {width: 150%; height: 150%;}
    
.text-zero {font-size: 3em; line-height: 1em; font-weight: bold}

}



/************************************************************** viewport 941 to 979 **************************************************************/
@media only screen and (min-width: 941px) and (max-width: 979px) {
.wrapper {width:100%;}
.container {width:100%}


.navbar-collapse {margin-top:10px;}
.navbar-collapse li a  {background:rgba(184,212,51,.2)!important; padding:10px 10px; border: solid 1px #fff}
.navbar-collapse li a:hover  {background:rgba(184,212,51,.6)!important;}
    
    

.banner {position: relative; height: 700px; overflow: hidden;}
.banner h1 {font-size: 2.2em!important}
#youtube-player {width: 150%; height: 150%;}
    
.text-zero {font-size: 3em; line-height: 1em; font-weight: bold}
	
}



/************************************************************** viewport 768 to 940 **************************************************************/
@media only screen and (min-width: 768px) and (max-width: 940px) {
.wrapper {width:100%;}
.container {width:100%}

.navbar-collapse {margin-top:10px;}
.navbar-collapse li a  {background:rgba(184,212,51,.2)!important; padding:10px 10px; border: solid 1px #fff}
.navbar-collapse li a:hover  {background:rgba(184,212,51,.6)!important;}

.banner {position: relative; height: 700px; overflow: hidden;}
.banner h1 {font-size: 2.2em!important}
#youtube-player {width: 180%; height: 180%;}

.text-zero {font-size: 3em; line-height: 1em; font-weight: bold}


}
	
	

/************************************************************** viewport 480 to 767 **************************************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.wrapper {width:100%;}
.xs-padding {margin-top:10px}

.logo {width:160px; height: auto}
.logo-footer {width:250px; height: auto}

	
.navbar-collapse {margin-top:10px;}
.navbar-collapse li a  {background:rgba(184,212,51,.2)!important; padding:10px 10px; border: solid 1px #fff}
.navbar-collapse li a:hover  {background:rgba(184,212,51,.6)!important;}
	
    
.banner {position: relative; height: 900px; overflow: hidden;}
.banner h1 {font-size: 2.2em!important}
#youtube-player {width: 350%; height: 350%;}
.blur-background {background: rgba(0, 0, 0, 0.5);}
    
.text-zero {font-size: 3em; line-height: 1em; font-weight: bold}

}



/************************************************************** viewport 321 to 479 **************************************************************/
@media only screen and (min-width: 321px) and (max-width: 479px) {
.wrapper {width:100%;}
.xs-padding {margin-top:10px}

.logo {width:160px; height: auto}
.logo-footer {width:250px; height: auto}
    
.navbar-collapse {margin-top:10px;}
.navbar-collapse li a  {background:rgba(184,212,51,.2)!important; padding:10px 10px; border: solid 1px #fff}
.navbar-collapse li a:hover  {background:rgba(184,212,51,.6)!important;}
    
.banner {position: relative; height: 700px; overflow: hidden;}
.banner h1 {font-size: 1.8em!important}
#youtube-player {width: 450%; height: 450%;}
.blur-background {background: rgba(0, 0, 0, 0.5);}
    
.text-zero {font-size: 2em; line-height: 1em; font-weight: bold}
	
}


/************************************************************** viewport <320 **************************************************************/

@media only screen and (max-width: 320px) {
.wrapper {width:100%}
.xs-padding {margin-top:10px}
	
.logo {width:160px; height: auto}
.logo-footer {width:250px; height: auto}
	
.navbar-collapse {margin-top:10px;}
.navbar-collapse li a  {background:rgba(184,212,51,.2)!important; padding:10px 10px; border: solid 1px #fff}
.navbar-collapse li a:hover  {background:rgba(184,212,51,.6)!important;}

.banner {position: relative; height: 700px; overflow: hidden;}
.banner h1 {font-size: 1.8em!important}
#youtube-player {width: 450%; height: 450%;}
.blur-background {background: rgba(0, 0, 0, 0.5);}
    
.text-zero {font-size: 2em; line-height: 1em; font-weight: bold}



}