@charset "utf-8";
/* CSS Document */
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 9, 2018 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
/*font-family: 'Montserrat', sans-serif;*/

.font-300{font-weight: 300}
.font-400{font-weight: 400}
.font-500{font-weight: 500}
.font-600{font-weight: 600}
.font-700{font-weight: 700}
.font-800{font-weight: 800}

:root{
    
    --yellow:#fbb216;
    --blue:#373280;
    --black:#000000;
   
}
.bg-blue{background: var(--blue)}
.bg-light-blue{background:#f2f2f2}
.bg-yellow{background: var(--yellow)}

.text-blue{color: var(--blue)}
.text-black{color: var(--black)}
.text-yellow{color: var(--yellow)}

.btn-blue{background: var(--blue);color: #ffffff;}
.btn-blue:hover{background: var(--yellow);color: #ffffff;}
.btn:focus, .button:focus,button:focus,a:focus{outline:none}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, hr small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	
	border: 0;
	outline: 0;
	
	vertical-align: baseline;

}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,div{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
}
a{
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}
.ease{
	transition:all ease .4s ;
	-moz-transition:all ease .4s ;
	-webkit-transition:all ease .4s ;
	-o-transition:all ease .4ms ;
}
body{font-family: 'Montserrat', sans-serif;font-weight: 400}
img{height: auto;max-width: 100%}
a:hover{text-decoration: none}
html {
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;overflow-x:hidden;
}
/*  Clearfix
------------------------------------------------------------------------------*/
.clearfix:after,
section:after,
aside:after,
article:after,
footer:after,
header:after,
div:after,
ul:after {
	content: "";
	display: table;
	clear: both;
}
.clearfix:before,
section:before,
aside:before,
article:before,
footer:before,
header:before,
div:before,
ul:before {
	content: "";
	display: table;
}

.clearfix,
section,
aside,
article,
footer,
header,
div,
ul 
 {
	zoom: 1;
}
.clear {
	clear:both;
	height:0;
}
li{list-style: none}
a, button{
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  transition: 0.25s;
}

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

img{max-width: 100%}
.overflow-hidden{overflow: hidden}
#preloader {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#373280;
/*
	background-image:url(../img/logo.png);
	background-repeat:no-repeat;
	background-position:center center;
*/
	width:100%;
	height:100%;
	z-index:9999;
    
}
#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%;
	top:50%;
	
	margin:-100px 0 0 -100px;
}
/**/
main.home header .navbar-nav .nav-item.home a{background: var(--yellow);color: #ffffff} 
main.lenses header .navbar-nav .nav-item.lenses a{background: var(--yellow);color: #ffffff} 

header {padding: 30px 0 0}
header ul.quick-contact{}
header ul.quick-contact li{position: relative;padding: 6px 10px 0 65px}
header ul.quick-contact li i{position: absolute;left: 0; top:0;width: 50px; height: 50px;border-radius: 50px;background:var(--yellow);text-align: center;font-size:30px;color: #ffffff;padding: 10px;}

header .navbar-nav{}
header .navbar-nav .nav-item.active{background: var(--yellow)}
header .navbar-expand-md .navbar-nav .nav-link{color: #ffffff;padding: 21px 35px}
header .navbar-expand-md .navbar-nav .Reimbursement .nav-link{color: #ffffff;padding:9px 35px 9px 70px;position: relative}
header .navbar-expand-md .navbar-nav .Reimbursement .nav-link i{position: absolute;left:10px;top:8px;}
header .navbar-expand-md .navbar-nav .nav-link:hover{background: var(--yellow);}
/*about*/
.HM-about{background:url(../img/about-bg.jpg) no-repeat 10% bottom;padding: 200px 0 200px 50%;color: #04003d }
.HM-about h2{font-size: 36px;}
.HM-about div{width: 570px}
.HM-about .btn-blue{padding: 10px 35px}

.sub-hed{padding: 0 0 20px}
.sub-hed h4{color:var(--yellow);position: relative;padding: 0 0 0px 65px;font-size: 15px;line-height: 15px }
.sub-hed h4::before{background:var(--yellow);height: 5px; width: 50px;display: block; content:"";position: absolute;bottom:3px;left: 0}
/**/
.type-lense figcaption{position: relative;padding:26px 75px 26px 36px;color: #ffffff;font-size: 22px }
.type-lense a figure img{
    transform:scale(1);
    -webkit-transform:scale(1) ;
    -moz-transform: scale(1);
    -o-transform:scale(1) ;
    -ms-transform: scale(1) ;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
}
.type-lense a:hover figure img{
    transform:scale(1.2);
    -webkit-transform:scale(1.2) ;
    -moz-transform: scale(1.2);
    -o-transform:scale(1.2) ;
    -ms-transform: scale(1.2) ;

}
.type-lense a:hover{text-decoration: none}
.type-lense figcaption i{position: absolute; right: 29px; top: 20px;border-radius: 10px;text-align: center;border: 2px solid #ffffff;padding: 10px}
.strip{background: var(--yellow);height: 5px;margin: 0 auto; width: 80px}

footer .list-inline-item a{color: #000000}
footer .list-inline-item a{padding: 0 20px;}
footer .social .list-inline-item a{padding:3px;border: 1px solid #000000; width: 30px; height: 30px;border-radius: 30px;display: inline-block;text-align: center;}
footer .social .list-inline-item a:hover{background:#373280;color: #ffffff }

.lense{}
.lense .lense-quality{font-size: 13px}
.lense .lense-quality img{border-radius:20px;border: 1px solid #d3d3d3;margin-bottom: 20px }
.lense .lense-focals{font-size: 14px}
.lense .lense-focals .rounded{border-radius: 20px!important;}
.lense .main-title{text-align: center;border-radius:26px;font-size:40px}
.lense .lense-type {font-size: 14px}
.lense .lense-type .colum{border-radius:32px;padding:55px 20px 40px;}
.lense .lense-type .colum h4{font-size: 20px;font-weight:600}

/**/
.main-pop,
.main-pop-poly,
.main-pop-Trivex,
.main-pop-HighIndex,
.main-pop-Photochromic
{background:#ffffff;width: 100%;height:100%;display: none;left:0;position:fixed; top:0;z-index:99 }
.main-pop .close-btn,
.main-pop-poly .close-btn,
.main-pop-Trivex .close-btn,
.main-pop-HighIndex .close-btn,
.main-pop-Photochromic .close-btn
{  font-size:45px; 
            -webkit-transition:.5s;
            -moz-transition:.5s;
            -o-transition:.5s;
            -ms-transition:.5s;
            transition:.5s;
             transform:scale(.8);
            -webkit-transform:scale(.8) ;
            -moz-transform: scale(.8);
            -o-transform:scale(.8) ;
                -ms-transform: scale(.8) ;opacity: 0;position: absolute;right: 20px; top: 20px;z-index: 99 
}
.main-pop.active .close-btn,
.main-pop-poly.active .close-btn,
.main-pop-Trivex.active .close-btn,
.main-pop-HighIndex.active .close-btn,
.main-pop-Photochromic.active .close-btn
{
             transform:scale(1);
            -webkit-transform:scale(1) ;
            -moz-transform: scale(1);
            -o-transform:scale(1) ;
            -ms-transform: scale(1) ;opacity:1;transition-delay: 800ms;
}
.main-pop .bg
{background:url(../img/visiondetail-bg.jpg) center top no-repeat;background-size: cover; }
.main-pop-poly .bg
{background:url(../img/polycarbonate2.jpg) center top no-repeat;background-size: cover; }
.main-pop-Trivex .bg
{background:url(../img/trivex2.jpg) center top no-repeat;background-size: cover; }
.main-pop-HighIndex .bg
{background:url(../img/high-index.jpg) center top no-repeat;background-size: cover; }
.main-pop-Photochromic .bg
{background:url(../img/photochromic2.jpg) center top no-repeat;background-size: cover; }

.main-pop .content-area,
.main-pop-poly .content-area,
.main-pop-Trivex .content-area,
.main-pop-HighIndex .content-area,
.main-pop-Photochromic .content-area
{width: 55vw; -webkit-transition:.5s;position:absolute;margin-left: -50px;
            -moz-transition:.5s;
            -o-transition:.5s;
            -ms-transition:.5s;
            transition:.5s;opacity: 0;overflow: auto;height: 95%;overflow: auto;}

.main-pop.active .content-area,
.main-pop-poly.active .content-area,
.main-pop-Trivex.active .content-area,
.main-pop-HighIndex.active .content-area,
.main-pop-Photochromic.active .content-area
{transition-delay: 700ms;margin-left:0px;opacity: 1;}


.cms ol li{list-style: decimal;list-style-type: decimal;padding: 0 0 0 10px}
/*contact-form*/
.contact-form{}
.contact-form .from-control{height: 40px}
.contact-form textarea.from-control{height: 80px}
.contact-form .btn{padding: 10px 45px}

.frame-banner{margin: 50px 0 20px}
.frame-banner img{border-radius: 20px; width: 100%; height: auto;}
.sort{}
.sort .select-box{position: relative}
.sort .select-box select{-webkit-appearance:none;padding-right: 30px;font-size: 12px}
.sort .select-box select::focus{box-shadow:none;outline:none}
.sort .select-box::after{position: relative;position: absolute; right:13px; top: 10px;width: 10px;pointer-events: none; height: 10px; border-bottom: 1px solid #000000;border-right: 1px solid #000000;transform: rotate(45deg);display: block;content: "";z-index: 5}
.sort .la-filter{width: 40px; padding: 5px;text-align: center;font-size: 23px;position: relative;top: 5px;} 
.frame-list figure{padding: 0 0 15px;}
.frame-list figcaption{font-weight: 600;font-size: 18px;height: 40px;color: #000000}
.frame-list .color{margin: 0 0 45px;height: 60px}
.frame-list .color img{display: inline-block;border-radius: 50px;margin: 0 2px}
.frame-list a figcaption{color: #000000}

.frame-detail{padding: 40px 0}
.frame-detail h1{font-size:30px;font-weight: 500;margin: 0 0 5px }
.frame-detail .modal-nm{font-size:14px;font-weight: 600;margin: 0 20px 0 0 }

.frame-detail .category{font-size:14px;font-weight: 300;color: #cccccc}
.frame-detail .instock,.frame-detail .nostock{display: inline-block;padding: 3px 15px; font-size: 13px; font-weight: 600;color: #ffffff;border-radius: 20px}
.frame-detail .instock{background: green;}
.frame-detail .nostock{background: red;}
.frame-detail .color{padding: 0 0 20px}
.frame-detail .color h6{font-size: 13px;}
.frame-detail .color img{border-radius: 50px;border:1px solid #ffffff;padding: 2px}
.frame-detail .color img.selected{border:1px solid #000000;padding: 2px }
.frame-detail .choose-size{padding: 0 0 20px;display: block}
.frame-detail .choose-size h6{font-size: 13px;}
.frame-detail .choose-size a.selectors{width: 40px; height: 40px; border-radius: 4px;text-align: center;font-size:18px;display: inline-block;margin: 0 5px 0 0;border: 1px solid #eeeeee;color: #000000;padding: 6px}
.frame-detail .choose-size a.selectors.selected{background: var(--blue);color: #ffffff;border-color: var(--blue)}
.frame-detail .placeorder{background:var(--yellow);color: #ffffff;border-radius: 4px;border: 1px solid var(--yellow);padding: 12px 55px;display: inline-block;font-size: 20px}
/**/

.prduct-detail_custom.nav-pills .nav-link.active,
.prduct-detail_custom.nav-pills .show > .nav-link{background: transparent;color:#000000;position: relative}
.prduct-detail_custom.nav-pills .nav-link{padding:20px 25px;font-size: 20px;display: inline-block;}
.prduct-detail_custom.nav-pills .nav-link.active::after{position: absolute;left:0;bottom: 0; width:100%;height: 4px;background:#000000;display: block;content:"";pointer-events: none}
.prduct-detail_custom.nav-pills {text-align: center;display: block}
.frame-dimension{padding:36px 0 81px}
.frame-dimension .front{ padding:0 50px}
.prduct-detail_custom.nav-pills {text-align: center;display: block}
.frame-dimension{padding:36px 0 81px}
.frame-dimension .front{ padding:0 50px}


.frame-dimension .front .Mid{position: absolute;left:45%;width: 10%;top: -28px;height:15px;border-left: 1px solid #000000;border-right: 1px solid #000000;padding:7px 0;  }
.frame-dimension .front .Mid .line{height: 1px;background:#000000;display: block;position: relative}
.frame-dimension .front .Mid .line::before{position: absolute;left:1px;top:-3px; width: 8px; height: 8px;transform: rotate(45deg);border-left: 1px solid #000000;border-bottom: 1px solid #000000;content:"";display: block}
.frame-dimension .front .Mid .line::after{position: absolute;right:1px;top:-3px; width: 8px; height: 8px;transform: rotate(-45deg);border-right: 1px solid #000000;border-bottom: 1px solid #000000;content:"";display: block}

.frame-dimension .front .Mid .value{left: 0;width: 100%;color:#000000;position: absolute;bottom: 10px; text-align: center;}

.frame-dimension .front .lense{position: absolute;left:55%;width:36%;top:-28px;height:15px;border-left: 1px solid #000000;border-right: 1px solid #000000;padding:7px 0;  }
.frame-dimension .front .lense .line{height: 1px;background:#000000;display: block;position: relative}
.frame-dimension .front .lense .line::before{position: absolute;left:1px;top:-3px; width: 8px; height: 8px;transform: rotate(45deg);border-left: 1px solid #000000;border-bottom: 1px solid #000000;content:"";display: block}
.frame-dimension .front .lense .line::after{position: absolute;right:1px;top:-3px; width: 8px; height: 8px;transform: rotate(-45deg);border-right: 1px solid #000000;border-bottom: 1px solid #000000;content:"";display: block}
.frame-dimension .front .lense .value{left: 0;width: 100%;color:#000000;position: absolute;bottom: 10px; text-align: center;}

.frame-dimension .front .fullwidth{position: absolute;left:10%;width:79%;bottom:-36px;height:15px;border-left: 1px solid #000000;border-right: 1px solid #000000;padding:7px 0;  }
.frame-dimension .front .fullwidth .line{height: 1px;background:#000000;display: block;position: relative}
.frame-dimension .front .fullwidth .line::before{position: absolute;left:1px;top:-3px; width: 8px; height: 8px;transform: rotate(45deg);border-left: 1px solid #000000;border-bottom: 1px solid #000000;content:"";display: block}
.frame-dimension .front .fullwidth .line::after{position: absolute;right:1px;top:-3px; width: 8px; height:8px;transform: rotate(-45deg);border-right: 1px solid #000000;border-bottom: 1px solid #000000;content:"";display: block}
.frame-dimension .front .fullwidth .value{left: 0;width: 100%;color:#000000;position: absolute;bottom: 10px; text-align: center;}

.frame-dimension .front .height{position: absolute;right:19px;width:15px;bottom:-2px;height:142px;border-bottom: 1px solid #000000;border-top: 1px solid #000000;padding:0 7px;  }
.frame-dimension .front .height .line{width: 1px;background:#000000;display: block;position: relative;height: 100%}
.frame-dimension .front .height .line::before{position: absolute;left:-3px;top:3px; width: 8px; height: 8px;transform: rotate(135deg);border-left: 1px solid #000000;border-bottom: 1px solid #000000;content:"";display: block}
.frame-dimension .front .height .line::after{position: absolute;right:-3px;bottom:2px; width: 8px; height: 8px;transform: rotate(45deg);border-right: 1px solid #000000;border-bottom: 1px solid #000000;content:"";display: block}
.frame-dimension .front .height .value{left: -13px;top:44%; color:#000000;position: absolute;bottom: 10px; text-align: center;transform: rotate(-90deg);height: 20px;}
.frame-dimension .side{padding: 0 50px}
.frame-dimension .side .fullwidth{position: absolute;left:10%;width:79%;bottom: 0px;height:15px;border-left: 1px solid #000000;border-right: 1px solid #000000;padding:7px 0;  }
.frame-dimension .side .fullwidth .line{height: 1px;background:#000000;display: block;position: relative}
.frame-dimension .side .fullwidth .line::before{position: absolute;left:1px;top:-3px; width: 8px; height: 8px;transform: rotate(45deg);border-left: 1px solid #000000;border-bottom: 1px solid #000000;content:"";display: block}
.frame-dimension .side .fullwidth .line::after{position: absolute;right:1px;top:-3px; width: 8px; height: 8px;transform: rotate(-45deg);border-right: 1px solid #000000;border-bottom: 1px solid #000000;content:"";display: block}
.frame-dimension .side .fullwidth .value{left: 0;width: 100%;color:#000000;position: absolute;bottom: 10px; text-align: center;}

.FrameDescription ul.list-group li{margin: 0;padding: 0 0 8px;}
.mesurement .tab-pane {padding: 40px 0}
.mesurement .tab-pane .list-group-item{background: transparent}
.mesurement .nav-link{color: #000000}

.unit-switch .switch {
  position: relative;
  display: inline-block;
  width: 53px;
  height: 26px;margin: 15px 0 0
}

.unit-switch .switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.unit-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  -webkit-transition: .4s;
  transition: .4s;border: 1px solid #c8c8c8;
}

.unit-switch .slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;border: 1px solid #c8c8c8;top: 2px;
}

.unit-switch input:checked + .slider {
  background-color:#ffffff;border: 1px solid #c8c8c8;
}

.unit-switch input:focus + .slider {
  box-shadow: 0 0 1px #EAEAEA;
}

.unit-switch input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.unit-switch .slider.round {
  border-radius: 34px;
}

.unit-switch .slider.round:before {
  border-radius: 50%;
}
/**/
.product-slide .carousel-indicators{position: static;padding-top: 30px;}
.product-slide .carousel-indicators li{width:80px;height:46px;text-indent: 0;border: 1px solid #eee;padding: 10px;cursor: pointer}
.product-slide .carousel-indicators li.active{opacity: .3;pointer-events: none}
.product-slide .carousel-control-prev,
.product-slide .carousel-control-next{top: auto;bottom: 15px;width: 40px;height: 40px;border: 1px solid #ccc;text-align: center;padding: 10px;color: #000;border-radius:50px}
}
.product-slide .carousel-control-prev{}
.product-slide .carousel-control-next{}

/**/
@media screen and (min-width: 1600px){
    .container{max-width: 1500px}
}
@media screen and (min-width: 2000px){
    .container{max-width: 1800px}
}
@media screen and (max-width: 1400px){
    header{padding: 20px 0 0;}
    header .logo{width:175px }
    header ul.quick-contact li i{font-size: 20px;width: 38px;height: 38px;}
    header ul.quick-contact li{padding: 6px 10px 0 44px;font-size: 12px;}
    header ul.quick-contact li h6{font-size: 12px;font-weight: 600}
    header .main-nav{margin-top: 10px}
    header .navbar-expand-md .navbar-nav .nav-link{padding: 15px 30px;}
}
@media screen and (max-width: 1199px){
    header .logo{max-width:150px;display: block}
    header{padding: 16px 0 0;}
    header .navbar-expand-md .navbar-nav .nav-link{padding: 18px 35px;font-size: 12px;}
    .HM-about{padding: 25px 20px 246px;background-position: center bottom;background-size: 300px}
    .HM-about div{width: auto}
    .type-lense figcaption{padding: 15px 42px 15px 16px;font-size: 16px;}
    .type-lense figcaption i{border-radius: 4px;padding: 2px;right: 13px;top: 16px;}
    header .navbar-expand-md .navbar-nav .Reimbursement .nav-link i img{font-size: 31px;}
    header .navbar-expand-md .navbar-nav .Reimbursement .nav-link{padding: 9px 20px 9px 53px;}
    .HM-about h2{font-size: 31px;}
    footer {font-size: 12px}
    footer .list-inline-item a{padding: 0 10px}
    body{font-size: 14px}
    
}

@media screen and (max-width:991px){
 
   
}
@media screen and (max-width:800px){
    .lense .main-title{font-size: 30px;}
}

@media screen and (max-width:767px){
    header .navbar-toggler{position: absolute; right: 20px; top: -60px;border: 1px solid var(--blue);padding:6px 5px 9px}
    header .navbar-toggler .navbar-toggler-icon{border-top: 1px solid var(--blue);border-bottom: 1px solid var(--blue);height: 15px}
    header nav .container{width:100%;max-width: 100%}
    .type-lense figcaption{font-size: 12px;}
    .HM-about h2,h2{font-size: 26px;}
    .frame-detail{text-align: center}
    .prduct-detail_custom.nav-pills .nav-link{font-size: 16px}
    .frame-dimension{padding: 63px 0 20px;}
    .frame-dimension .side{padding: 58px 50px 0;}
 
    
}
@media screen and (max-width:640px){
     .lense .main-title{font-size: 20px;}
     .lense .sub-title h3{font-size: 18px;}
}

@media screen and (max-width:480px){
 
}