
@charset "utf-8";
/* CSS Document */


	h1 {font-family: 'Roboto', sans-serif; color:#fff; line-height:1.1em; font-weight:900; font-size:56px; }
	.shadow {text-shadow: 1px 1px #000; }
	h2 {font-family: 'Roboto', sans-serif; font-size:36px; color: #000; margin-bottom:30px;  line-height:1.4em; font-weight:900;}
h3 {font-family: 'Roboto', sans-serif; font-size:26px;  margin-bottom:30px;  line-height:1.4em; }
.logotext {font-family: 'Roboto', sans-serif;  font-size:22px; color: #000; font-weight:900 !important; margin-top:30px;  line-height:1em; } 
.blue {font-weight:900;  color:#000; font-family: 'Roboto', sans-serif; }

		.orange {font-family: 'Roboto', sans-serif;  color: #000; margin-bottom:30px; font-weight:900; line-height:1.3em; }
		.orange2 {font-family: 'Roboto', sans-serif; font-size:26px; color: #08b5b5; margin-bottom:30px; font-weight:900; line-height:1.3em; }
		.orangecolor {color: #08b5b5; font-weight:800;}

	p, li {font-family: 'montserrat', sans-serif; font-size: 18px; color:#000; font-weight:400; line-height:1.8em; }
.smaller {font-size:16px;}

.footer {font-size: 14px;}
.footer a {color:#dd0e0e;}

.btn {color:#fff !important;  font-weight:400; font-family: montserrat; font-size:16px !important;}
.buttonlink {color:#fff !important; font-size:16px !important; padding:10px; text-align:left !important;}
.boybackground {background-image:url(boy_smoke.jpg); background-repeat: no-repeat; background-size: cover; } 


.intro {background-image:url(''); background-repeat: no-repeat; background-position: top right; } 
.hero {width:45%;}
.slide { padding: 20px;}
.slidetext {font-size:16px;}
.slide img {width:90%;  }

.icon {font-style: normal; float:left;margin:0 20px 40px 0px; color:#011c50;}

.navbar {padding-top:20px !important; padding-bottom:20px !important;}
.nav-link {color:#000 !important; font-size:15px !important; font-weight:600 !important; text-align: right !important;}
.navbar-toggler {color:#ccc !important;}
.nav-item {line-height:1.3em !important;}


a.nav-link:hover {color:#08b5b5 !important;}


.btn-danger {background-color: #dd0e0e;}
.btn-danger:hover  {background-color: #f56725;}

.quote2 {margin-left:10px; font-size:16px; }

a {color:#dd0e0e;}
a:hover {color:#08b5b5;}
.quote::before {
		content: "";
		width: 20%;
		height: 10px;
		background: orange;
	display:block;
		margin: 0 10px 20px 0;
	}
.quote {font-size:22px; font-weight:300; font-family: 'roboto', sans-serif;}





.quote2::before {
content: '\201C';
background: transparent;
position:relative;
top:30px;
left:-10px;
float:left;
color: #f3c000;
font-size: 200px;
z-index: 9;
font-family:georgia;}


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: 1101px) and (max-width: 2000px) {
		
			
			.mobile {display:none;}
		
		}


@media (min-width: 768px) and (max-width: 1100px) {
		
			.hero {width:75%;}
			
			.mobile {display:none;}
		
		}


	@media (min-width: 481px) and (max-width: 767px) {
		
		.hide {display:none;}
			.hero {width:100%;}
			h1 {font-size:44px !important;}
			.desktop {display:none;}
				.orange2 {font-size:22px;}
				.mobilereport {padding-top:40px;}
		.social {display:none;}
		.reportcover {display:none;}
		}
	
	/* 
 ##Device = Most of the Smartphones Mobiles (Portrait)
 ##Screen = B/w 320px to 479px
*/
	
	@media (min-width: 300px) and (max-width: 480px) {
	
		.hide {display:none;}
	.desktop {display:none;}
		.hero {width:100%;}
	h1 {font-size:44px !important;}
		.orange2 {font-size:22px;}
			.mobilereport {padding-top:40px;}
		.social {display:none;}
		.reportcover {display:none;}
	}

	