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


	h1 {font-family: 'roboto', sans-serif; color:#fff; line-height:1.1em; text-shadow: 1px 1px #000; font-weight:900; letter-spacing:1px; font-size:48px !important;}
	h2 {font-family: 'roboto', sans-serif; font-size:32px; color: #000; margin-bottom:20px; font-weight:900; line-height:1.7em; }
		h3 {font-family: 'roboto', sans-serif; font-size:36px; color: #000; margin-bottom:20px; font-weight:900; line-height:1.7em; }
	.fact {font-size:60px;}
	.logo {width:40%;}
	.larger {font-family: 'roboto', sans-serif; font-weight:600; color:#000; font-size:26px;}
	p, li {font-family: 'Nunito Sans', sans-serif; font-size: 18px; line-height:1.6em;}

.nav-link, .btn {color:#fff !important; font-size:15px !important;}
.footer {font-size: 18px;}

.image {max-width:100%; text-align:center;}
.navbar {padding-top:20px !important; padding-bottom:20px !important;}
.buttonlink {color:#fff !important; font-weight: bold; font-family: nunito sans; font-size:22px !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(menthol.jpg); background-repeat: no-repeat; background-size: cover; } 
.hero {width:40%;}
	.partner {text-align:center; padding:10px;}
.nav-link {text-align:right;}

/* 
 ##Device = Low Resolution Tablets, Mobiles (Landscape)
 ##Screen = B/w 481px to 767px
*/
	
	@media (min-width: 481px) and (max-width: 767px) {
		.image {
			max-width: 75% !important;
		}
		
			.hero {width:100%;}
			h1 {font-size:40px;}
			
			.logo {width:60%; margin-top:10px;}
		}
	
	/* 
 ##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;
		}
		
	
		.hero {width:100%;}
		h1 {font-size:40px;}
		
			.logo {width:75%; margin-top:10px;}
	}