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


	h1 {font-family: 'roboto', sans-serif; color:#fff; line-height:1.3em; text-shadow:#000 1px 1px; font-weight:900; font-size:52px !important;}
	h2 {font-family: 'roboto', sans-serif; font-size:36px; color: #fff; margin-bottom:20px; font-weight:400; line-height:1.4em; }
	.subhead {font-size:26px !important;}
	h3 {font-size:38px;  font-weight:600; font-family: 'roboto', sans-serif;  }
	.allcaps {font-family: 'roboto', sans-serif; font-weight:600; color:#000; font-size:32px; text-transform:uppercase;}
	p, li {font-family: 'nunito sans', sans-serif; font-weight: 400; font-size: 18px; line-height:1.5em;}
ul {margin-top:30px; margin-bottom:30px; }
.navigation  {margin-top:0px; margin-bottom:0px; }
li {font-weight:600;}
.nav-link {color:#fff !important; font-family: roboto; font-weight:600; font-size:17px !important;}

.btn {color:#fff !important; font-family: roboto; font-weight:400; font-size:20px !important;}
 a.nav-link:hover {color:#f1c40f !important;}
 a {color:#f0f0f0;}
  a.highlight {color:#000;}
 a.highlight:hover {color:#fff;}
 a:hover { text-decoration:none; color:#f1c40f;}
.black {background-color:#000; padding:10px 20px 10px 20px;}
.footer {font-size: 18px;}
.logo {height:75px;}
.image {max-width:90%; text-align:center;}
.navbar {padding-top:20px !important; padding-bottom:20px !important;}
.buttonlink {color:#fff !important; font-size:18px !important; padding:10px; text-align:left !important;}
.boybackground {background-image:url(boy_smoke.jpg); background-repeat: no-repeat; background-size: cover; } 
.boy2 {background-image:url(boy3.jpg); background-repeat: no-repeat; background-size: cover; } 
.intro {background-image:url(hero-juul.png); background-repeat: no-repeat; background-size: cover; height:540px; position: top center;}
.intro2 {background-image:url(hero-menthol.png); background-repeat: no-repeat; background-size: cover; height:540px; position: top center;}
.intro3 {background-image:url(hero-flavors.png); background-repeat: no-repeat; background-size: cover; height:540px; position: top center;}
.intro4 {background-image:url(hero-teen.png); background-repeat: no-repeat; background-size: cover; height:540px; position: top center;}
.hero {width:40%;}
	.partner {text-align:center; padding:20px;}
.nav-link {text-align:right;  }
header {
  position: relative;
  height: 75vh;
  min-height: 50rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 3;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
 
 background-color:#000;
 opacity: 0.6; /* Standard compliant browsers */
   -moz-opacity: 0.6; /* Firefox and Mozilla browsers */
   -webkit-opacity: 0.6; /* WebKit browser e.g. Safari */
   filter: alpha(opacity=60); /* For IE8 and earlier */
  z-index: 1;
}
/* 
 ##Device = Low Resolution Tablets, Mobiles (Landscape)
 ##Screen = B/w 481px to 767px
*/
	
	
	@media (min-width: 768px) and (max-width: 2000px) {
	
			.mobile {display:none;}
		
		}
	
	@media (min-width: 481px) and (max-width: 767px) {
		.image {
			max-width: 75% !important;
		}
		
		
			.hero {width:100%;}
			h1 {font-size:40px !important;}
			h2 {font-size:30px !important;}
			h3 {font-size:32px !important;}
			.logo {width:60%;}
			.desktop {display:none;}
		}
	
	/* 
 ##Device = Most of the Smartphones Mobiles (Portrait)
 ##Screen = B/w 320px to 479px
*/
	
	@media (min-width: 300px) and (max-width: 480px) {
		.image {
			max-width: 75% !important;
		}
			h1 {font-size:40px !important;}
			h2 {font-size:30px !important;}
		h3 {font-size:32px !important;}
		.hero {width:100%;}

		
			.logo {width:75%;}
			.desktop {display:none;}
	}