body {
  padding-top: 50px;
  font-family: 'Catamaran', sans-serif;
}

.intro{
	font-size:25px;
	line-height:2.0;
	font-weight:100;
	letter-spacing:normal;
	text-align:center;
	margin-top:20px;
}

.strong{ font-weight: bold; }

h2,h3,h4,p{ font-weight:200; }

.center{ text-align: center; 
		 font-family: 'Catamaran', sans-serif;
		 line-height:95px;
}
.full-width{ width: 100%; }

.img-center{ margin: 0 auto; display: block; }

.btn-default{
	color:#337ab7;
	background-color:#fff;
	border-color:#337ab7;
	margin-top:20px;
	border-width: 1px;
}

.btn-default:hover{
	color:#337ab7;
	background-color:#fff;
	border-color:#fff;
}
.many-more{ clear: both; font-size: 20px; text-align: center; }

.honeypot{ display: none !important;}

.container{ overflow: hidden; }

button:focus,
a:focus {outline:0;}

/* Scale Image */
.scaleImage{ overflow: hidden; }
.scaleImage img{
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}
.scaleImage:hover img{
  -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 transform: scale(1.1);
}

/* Header */
.header { min-height: 160px; padding: 0;  background-color: rgb(23, 136, 195); color: #fff;}
.header .container h1{ padding-top: 20px; }

.front .header{ 
min-height: auto; 
background:url("../img/mask-guard/maskguardbg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
/*background-color: #f5f5f5; previously was video used for this*/

}
.front .header .container,
.front-nasal .header .container{  color: rgba(255, 255, 255, 0.8); position: relative; z-index: 999; }

p{ line-height:1.415; font-size:1.2em; } 

/* Navigation */
.front #navbar li.home a,
.front-nasal #navbar li.nasal a,
.page-what #navbar li.what a,
.page-mask-guard #navbar li.mask-guard a,
.page-where #navbar li.where a,
.page-faq #navbar li.faq a,
.page-contact #navbar li.contact a,
.page-distributor #navbar li.distributor a{
 background-color: #e7e7e7;
}

/* Google Translator */
#google_translate_element{ margin-top: 12px; margin-right: 10px; }

/* Front page caption */

.banner-caption, 
.banner-caption-mask{
 margin-top: 40px;
 color: #000;
 background-color:rgba(255,255,255,0.75)!important;
}
.banner-caption, 
.banner-caption-mask h1{ font-weight:200; }

.banner-caption, 
.banner-caption-mask h1{
margin-top:10px;
}

.banner-caption, 
.banner-caption-mask p{
margin:20px 0;
}

.banner-caption, 
.banner-caption-mask h2{
margin:20px 0;
}

.banner-caption, 
.banner-caption-mask hr{
margin-top:50px;
}

.banner-caption, 
.banner-caption-mask p{
font-size:1.6em;
font-weight:200;
}


/* Content Top */
.content-top{ overflow: hidden;}
.content-top img{ margin-bottom: 15px; }

/* Content Middle */
.content-middle{ padding: 30px 0; margin: 60px 0 30px;  background-color: #f5f5f5; }
.content-middle h1,
.content-middle h4,
.content-middle .col{ text-align: center;}
.content-middle .col h4{ padding-bottom:50px;}

.content-middle .glyphicon{ font-size: 111px; color: rgb(23, 136, 195); }
.content-middle p{ margin-bottom:50px; }

/* Main Content Area */
.main-content .container{ padding-top: 30px; padding-bottom: 30px; }

/* Distributors */
.dist{overflow: hidden;}
.dist img{ max-height: 180px; margin: 30px auto 30px; }
.dist header{ text-align: center;}
.dist .btn{ margin-bottom: 10px; }
.page-where .dist img { max-height: none; height: 150px; }
.page-where .main-content h1{font-size: 3em;}


/* Content bottom */
.content-bottom .well{ text-align: center; }
.content-bottom .glyphicon{ font-size: 111px; color: rgb(23, 136, 195);}

.front .content-bottom .inner,
.front-nasal .content-bottom .inner{
  text-align: center;  
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
}
.position{ margin-bottom: 50px;  }
.position header{ text-align: center; margin-bottom: 30px; }
.position .wrapper{ overflow: hidden; margin: 0 auto; }
.position .col{ margin-bottom: 10px; }
.position img{ margin: 0 auto; }

.position2{ margin-bottom: 50px;  }
.position2 header{ margin-bottom: 30px; }
.position2 .wrapper{ overflow: hidden; margin: 0 auto; }
.position2 .col{ margin-bottom: 10px; }
.position2 img{ margin: 0 auto; }

.position3 figure{ min-height: 176px; font-size: 20px; text-align: center;}
.position3 figure img{ margin: 0 auto; display: block; }



/* Featured */
.featured{ margin-bottom: 50px; /*background: url(../img/Serene-Music-Academy-bg.png) bottom center no-repeat; */ }
.featured img{ margin: 0 auto; }
.featured h1{ margin-top: 0; }
.featured h3{ margin-bottom: 30px; }
.featured header{ text-align: center; }
.featured  .col-right{ margin-top: 28px; }

/* Accordion */
.panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a{ display: block; }

/* Youtube video */
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* FAQ */
.page-faq .panel-heading{ } 
.page-faq .panel-heading a{ text-decoration: none; }
.page-faq .panel-heading a:hover{ /*background-color: #e7e7e7;*/ }

/* What is NOSK */
.filter-types img{ margin: 0 auto;  border: 5px solid #eee; }
.page-what .embed-responsive{ margin-bottom: 15px; border: 1px solid #ddd; }
.page-what .slider{ margin-top: 30px; margin-bottom: 30px; }
.page-what .slider .carousel-control.left,
.page-what .slider .carousel-control.right{ background: none;}
.page-what .gallery{ margin-bottom: 20px; display: block;}


/* Contact Us */
.page-contact .col-left label{ display: none; }
.page-contact .col-right{ font-size: 19px; }
.MsgBox{ 
 margin-bottom: 20px; 
 width: 100%; 
 font-size: 18px;
 text-align: center;  
 color: #fff;
 background-color: #5cb85c;
 border-color: #4cae4c;
 padding: 20px; 
}


/* Footer */
footer{  overflow: hidden; padding-top: 30px; padding: 30px; background-color: #424243; color: #fff;  }
footer p{ margin: 0; }


/* Social icons */
.social-icon{ font-size: 36px; }


/*Tab Styling*/
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #1788C3;
  color:white;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 6px;
  border: 1px solid #ccc;
  border-top: none;
}



/*  Media Queries
-----------------------------------------------*/
@media (max-width: 1199px){}
@media (max-width: 991px) {
	
	/* Navigation */
	.nav>li>a{ padding: 10px 14px; }
	
	/* Content Top */
	.front .content-top img,
	.front-nasal .content-top img { width: 100%; }
	
}
@media (max-width: 767px) {
  /* Front: Banner caption */
 .banner-caption, .banner-caption-mask hr{ margin-top: auto; }
 .banner-caption, .banner-caption-mask h2{ font-size: 23px; }
 .banner-caption, .banner-caption-mask p{ font-size: 1.2em; }
 .award{ display: none; }
 
 /* Colorbox */
.gallery img{ width: 100%; }

}
@media (max-width: 550px) {
  /* Front: Banner caption */
  .banner-caption{ display: none; } 
 
 .banner-caption-mask h1{ font-size: 17px; }
 .banner-caption-mask h2{ font-size: 14px; }
 .banner-caption-mask p{ font-size: 1.0em; }
 .embed-responsive {height: 500px}
 .btn{font-size:11px;}
 
	.front .header-mask{
		background:url("../img/mask-guard/maskguardbgmobile.jpg") no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		height:370px;
	}
}


@media (max-width: 479px) {
	
	/* Frontpage banner */
	.banner-caption{ clear: both; }
	
	.front .header-mask{
		background:url("../img/mask-guard/maskguardbgmobile.jpg") no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		width:100%;
	}
}


@media (min-width: 480px) {}
@media (min-width: 768px) {
	
	 /* Common */
	 h1{
		font-size:4em;
		line-height:1.084;
		letter-spacing:-1px;
		font-weight:200;
		margin-top:20px;
	 }
	
		
		/* Distributor  */
		.front .dist-logo > div,
		.front-nasal .dist-logo > div{ min-height: 245px; }
		
		/* Where to buy - Distributors */
		.page-where table .tel{ width: 250px; }
		.page-where table .web{ width: 200px; }
		.page-where table strong{ margin-bottom: 5px; display: inline-block; }	 
	}

@media (min-width: 768px) and (max-width: 991px) {

	/* Header Social icons */
	.social-icon{    
    position: absolute;
    right: 5px;
    top: 56px;
    background-color: rgba(0, 0, 0, 0.45);
    padding: 0px 10px;
    border-radius: 0;
    height: 50px;
   }
   .social-icon a{ color: #fff; }
   
	/* Navigation */
	.nav>li>a{ padding: 15px 12px; }
	.translated-ltr .nav>li>a{ padding: 15px 8px; font-size: 13px; }    
   
  /* Google Translate */
  #google_translate_element{ 
  	margin: 0;
    position: absolute;
    right: 56px;
    background-color: rgba(0, 0, 0, 0.45);
    padding: 12px 0px 10px 12px;
    top: 56px;
    height: 50px;} 
  
  /* Frontpage Content bottom */   
  .position2 .col{ height: 108px; }
  	
}
@media (min-width: 992px) {
	/* Front page banner caption */
	.banner-caption, 
	.banner-caption-mask{ width: 485px;  margin-top: 100px; }	
}	
@media (min-width: 992px) and (max-width: 1199px) {
	
	/* Content Bottom */
	.content-bottom .inner{ min-height: 350px; }
	
}
@media (min-width: 1200px) {
	
	/* Distributor  */
	.front .dist-logo > div,
	.front-nasal .dist-logo >div{
	  min-height: 253px;
	}
	
  /* Content bottom */
  .position2 .wrapper{ width: 70%; }	
}


/*Flyer Button Big*/
.flyer-button{
	font-size:35px;
	border:1px solid #337ab7;
	padding:10px;
	width:392px;
	border-radius:5px;
	text-align:center;
}


/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Add a red background color to navigation links on hover */
/*.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: red;
}*/

/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  /*background-color: red;*/
  width: 100%;
  z-index: 1;
}

/* Style the subnav links */
.subnav-content a {
  float: left;
  color: white;
  text-decoration: none;
}

/* Add a grey background color on hover */
.subnav-content a:hover {
  background-color: #eee;
  color: black;
}

/* When you move the mouse over the subnav container, open the subnav content */
.subnav:hover .subnav-content {
  display: block;
}