/*
BBT Digital Custom Media Query
*/

/*
Mobile Global
All Mobile device under 1023px
*/
@media screen  and (max-width:1023px) {
	#custom-menu.navbar-default .navbar-nav>li:before { content: ''; display: none; }
	#logo { max-width: 330px; width: 100%; }
	#custom-menu.navbar-default .navbar-toggle { border-color: transparent; margin-right: 0; padding: 7px; }
	#custom-menu.navbar-default .navbar-toggle:hover, #custom-menu.navbar-default .navbar-toggle:focus { background-color: transparent; }
	#custom-menu.navbar-default .navbar-brand { padding: 0; display: inline-block; width: 80% }
	.sidenav { display: none; }
	.item { opacity: 1; }
	.fitme { width: 100% }
	.red-border { width: 100% }
	#header { margin-bottom: 50px }
	#AboutSection0 br, .trials  br, .Applicator .Section1 br { display: none; }
	.About #AboutSection1 { background-image: none; }
	.About #AboutSection0 .subtitle { margin-bottom: 25px; }
	.About #AboutSection1 { margin-bottom: 0 }
	.About #AboutSection1 .hide { display: inline-block !important; visibility: visible; opacity: 1 }
	.About #AboutSection2 { padding-top: 30px; padding-bottom: 30px; }
	.Applicator .containme { width: 100% }
	.Syringe #SyringeSection2 { margin-bottom: 30px; }
	.home .containme { max-width: 100% !important; width: 100% !important; margin: 0 !important }
	.wow { visibility: visible !important; animation-delay: 0s !important; animation-name: none !important; }
	#SyringeSection1, .Applicator .Section1 { margin-top: 60px }
	.Syringe #SyringeSection1 .floating1, .Syringe #SyringeSection1 .floating2, .Syringe #SyringeSection1 .floating3, .Syringe #SyringeSection1 .floating4, .Syringe #SyringeSection1 .floating5 { position: relative; left: 0 !important; top: 0 !important; margin: 0 15px 15px }
	.Syringe #SyringeSection1 .floating1 .pointer, .Syringe #SyringeSection1 .floating2 .pointer, .Syringe #SyringeSection1 .floating3 .pointertop, .Syringe #SyringeSection1 .floating4 .pointertop, .Syringe #SyringeSection1 .floating5 .pointertop { display: none }
	.Syringe .mainitem { margin-top: 30px; margin-bottom: 30px; width: 100% }
	.Applicator .Section0 .image img, .Applicator .Section1 .mainitem { width: 100% }
	.Applicator .Section1 .pull-left, .Applicator .Section1 .pull-right { float: none !important; }
	.Applicator .Section1 .floating1, .Applicator .Section1 .floating2, .Applicator .Section1 .floating3, .Applicator .Section1 .floating4, .Applicator .Section1 .floating5 { position: relative; left: 0 !important; top: 0; width: 95%; display: block; margin: 0 15px 15px; right: auto; }
	.Applicator .Section1 .pointerleft, .Applicator .Section1 .pointerright { display: none }
	.trials .SectionContainer2 h3 { margin-top: 30px }
	.trials #Banner .button div.cl-effect-12 { float: none !important; }
	.trials #Banner .button .first { border-right: none }
	.Syringe #SyringeSection2 .subtitle, .About #AboutSection2 .subtitle { font-size: 55px; }
	#Contact .left { margin-left: 0; margin-bottom: 15px }
	#Footer .icon-container, #Footer .top, #Footer .bottom { border-right: none; border-left: none; }
	#Footer .content { text-align: center; border-top: 0; }
	.trials .radial { max-width: 250px; margin: 0 auto }
	.trials .SectionContainer2 .containme, .trials .SectionContainer1 .containme, .trials .SectionContainer3 .containme, .trials .SectionContainer4 .containme, .trials #Banner .containme { max-width: 100%; margin-right: 15px; margin-left: 15px; }
	.trials .SectionContainer1 .bargraph h3 { font-size: 18px }
	.trials .SectionContainer1 .bargraph .col-md-6 { margin-bottom: 50px }
	.trials .SectionContainer1 .bargraph { margin-top: 30px; margin-bottom: 30px; }
	.trials .SectionContainer3 .bargraph img.pull-right { float: none !important }
	.trials .SectionContainer3 .bargraph h3 { padding-left: 0 !important }
	.Applicator .Section2 .wow { margin-bottom: 25px }
	#main-slider { overflow: initial }
	#Footer .top, #Footer .bottom, #Footer .copyright { padding-left: 30px; padding-right: 30px }
	.Syringe #SyringeSection1 .floating1 { width: auto }
}

/*Mobile Portrait Orientation*/
@media screen and (orientation:portrait) and (max-width:667px) { }

/*Mobile Landscape Orientation*/
@media screen and (orientation:landscape) and (max-width:667px) { }

/***********************************************************************************************/

/*Tablet Portrait*/
@media screen and (min-width:768px) and (max-width:1199px) {
	.Syringe #SyringeSection1 .floating1 { left: 270px; width: auto }
	.Syringe #SyringeSection1 .floating2 { right: 208px; top: 60px; }
	.Syringe #SyringeSection1 .floating3 { left: 200px }
	.Syringe #SyringeSection1 .floating5 { right: 157px; }
	.Syringe #SyringeSection1 .floating4 { left: 432px; }
	#main-slider { overflow: initial }
	.trials .radial { max-width: 50%; margin: 0 auto }
}
@media screen and (orientation:portrait) and (min-width:768px) and (max-width:1199px) {
	#logo { width: 100%; margin-top: 14px; }
	.About #AboutSection1 { background-image: url('../../images/rule.jpg'); }
}

/*Tablet Landscape orientation Orientation*/
@media screen and (orientation:landscape) and (min-width:768px)  and (max-width:1199px) {
	#logo { max-width: 260px; width: 100%; }
	.About #AboutSection1 { background-image: url('../images/rule.jpg'); padding-bottom: 0; margin-bottom: 75px; background-size: auto 60% }
	.trials .SectionContainer1 .containme, .trials .SectionContainer3 .containme { max-width: 80% }
	.trials #Banner .containme { max-width: 80% }
	#logo { width: 100%; margin-top: 15px }
	.About #AboutSection1 { background-image: url('../../images/rule.jpg'); }
	.Applicator .Section1 .floating1, .Applicator .Section1 .floating2 { left: 40px !important; }
	.Applicator .Section1 .floating3, .Applicator .Section1 .floating4, .Applicator .Section1 .floating5 { right: 35px !important }
}

/*For DESKTOP ONLY*/
@media (min-width:1200px) {
	#main-slider { min-height: 560px; height: 100% }
	.video-js { margin-bottom: -7%; margin-top: -3%; }
}

/*For EXTRA LARGE SCREENS*/
@media (min-width:1560px) {
	#main-slider { min-height: 800px;height: 100% }
	.VideoOverlay { bottom: -3px }
	#Footer { min-height: 400px; padding-top: 15%; }
	.video-js { margin-bottom: -7%; margin-top: -3%; }
}

/*super small screen*/
@media screen and (max-width:425px) {
	#logo { width: 100%; margin-top: 14px; }
	.About #AboutSection1 .left .containme, .About #AboutSection1 .right .containme { float: none !important; text-align: left; margin: 0 }
	.trials .SectionContainer1 .counter-text span, .trials #Section3 .counter-text span { font-size: 100px }
	#Footer .top, #Footer .bottom, #Footer .copyright { padding-left: 30px; padding-right: 30px }
}
@supports (-webkit-appearance:none) {
	#Footer .bottom { font-size: 10pt; }
}