/*

1 Reset Css #res
2 Font Face #face 
3 Inputs #input
4 Global Styles #glob
5 Wrappers #wrap
6 Custom CSS #custom
7 Media Query #media

*/

/*================================= 1 Reset Css ( #res ) =================================*/
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,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{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{text-decoration:none;outline:0;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:#006db7;transition:all 0.5s ease 0s;}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ababab;margin:50px auto; padding:0}

img {-ms-interpolation-mode: bicubic; border: 0; height: auto; vertical-align: middle; transition:all 0.5s ease 0s;}
.ie8 img {height: auto; width: auto\9;}
.ie8 img.size-large {max-width: 60%; width: auto;}


ul{list-style:none; margin:0; padding:0;}
li{list-style:none;}

#wp-toolbar ul:after{content:none}


.last_li , .last{margin-right:0 !important; padding-right:0 !important}
.first_li, .first{margin-left:0 !important; padding-left:0 !important}

.clearfix:after , ul:after , ol:after ,  .full_row:after , .glazing_band li:after  , .accordion-section-content:after
{content:"";display:block;clear:both;visibility:hidden;line-height:0;height:0}html[xmlns] .clearfix{display:block}* html .clearfix{height:1%}

/*================================= 2 Font Face ( #face ) =================================*/
/* TypoGraphy */
/*

font-family: 'Roboto', sans-serif;

font-family: 'Font Awesome 5 Free'

*/

.custom-tabdropdown {
    background-color: #f8f7f7;
    width: 130px;
    border: none;
    border: 1px solid #81a9a7;
    border-radius: 5px;
    float: right;
    padding: 8px;
}

.selectLabel {
    padding-top: 10px;
}

.hide-control {
	display: none !important;	
}

#set_size_band_radio {
	display: none;
	visibility: hidden;
}



/*================================= 3  Inputs ( #input ) =================================*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0;}
::-webkit-input-placeholder {color:#343434; font-style:normal;}
:-moz-placeholder {color:#343434; font-style:normal;}
::-moz-placeholder {color:#343434; font-style:normal;}
:-ms-input-placeholder {color: #343434; font-style:normal;}

button::-moz-focus-inner {border: 0}
:focus {outline:none;}
::-moz-focus-inner {border:0;}

input[type=number] {-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0}

input[type=submit]{padding:12px 20px;font-weight:normal; color:#fff; display:block; margin:0 auto}
input[type=submit] , input[type=button]{cursor:pointer; border:0}
input:focus{outline:none;}
/* body textarea{resize:none; height:270px; font-size:18px; font-style:italic; color:#656565; line-height:31px; padding:15px 0 0 25px; border-color:#b7b7b7; } */
body textarea { resize: none; height: 70px; max-width: 100%; width: 100%; }

input[type="text"], input[type="tel"], input[type="password"], input[type="date"], input[type="email"], input[type="number"], textarea{background:#f8f7f7; border: 1px solid #d6d5d2; border-radius:0; color: #343434; font-size: 21px; font-weight: 400; line-height: 26px; width:100%; height:50px; padding:5px 15px; box-shadow:none; -webkit-appearance:none}

input[type="text"]:focus, input[type="tel"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="email"]:focus, input[type="number"]:focus, textarea:focus {
background:#f3f3f3}


.form_row{padding-bottom:25px}
.form_row.msg_row{padding-bottom:10px}
.form_row.submitrow{padding-bottom:0}

input:required{box-shadow:none}

/*input:required:focus{background-color: rgba(223, 73, 73, 0.2); border: 1px solid #df4949; box-shadow:none} */

*{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

/*================================= 4 Global Styles (#glob) =================================*/

/* Gobal #GAB */
.x:before 
{position:absolute; content:''}

/* Vertical Middle */
.x:before /*Parent Before*/
{content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em}

.x /* Child class */
{display: inline-block; vertical-align: middle}


/* HR Rules */
hr{}

/* Image Alignment */
.alignnone , a img.alignnone {margin: 5px 0 50px}
.aligncenter, div.aligncenter {display: block; margin: 5px auto 60px auto}
.alignright , a img.alignright{float:right; margin: 5px 0 60px 60px}
.alignleft , a img.alignleft {float: left; margin: 5px 60px 60px 0}
a img.aligncenter {display: block;  margin-left: auto; margin-right: auto}


h1 , h2 , h3 , h4 , h5 , h6{}

h1{font-size:35px; font-weight: 300; color: #fff; margin-bottom: 20px;}
h2{font-size: 30px; line-height: 32px; font-weight: 300; color: #000; margin-bottom: 30px; display: block; text-align: center;}
h3{}
h4{}
h5{}
h6{}

p , .content_row ul li, .content_row ol li{color: #343434; font-size: 15px; font-weight: 300; line-height: 22px; margin-bottom:10px}

p:last-child{margin-bottom:0}
p.intro{color: #666; font-size: 24px; font-weight: 300; line-height: 34px; margin-bottom:20px}

p a{color:#006db7; font-weight:bold}
p strong{font-weight:700;}
p em{font-style:italic}

p a:hover{text-decoration:underline}

.content_row ul , .content_row ol{padding-bottom:10px}
.content_row ul li, .content_row ol li{margin-bottom:5px; position:relative; color:#343434}

.content_row ul li{padding-left:20px}
.content_row ul li:before {color: #cccccc; content: "•"; font-weight: bold; left: 0; position: absolute; font-size:16px;}

.content_row ul ul , .content_row ol ul , .content_row ol ol{padding:5px 0}

.content_row ol{counter-reset: section}
.content_row ol li{padding-left:40px}

.content_row ol > li:before {color:#343434; content:counter(section, decimal) "."; counter-increment:section; padding-right:5px; font-size:18px; position:absolute; left:0}

.content_row ol ul li{padding-left:20px}
.content_row ol ol li{list-style:lower-alpha outside; padding-left:30px; margin-left:20px}

.content_row ol ol li:before{content:none}
.content_row ol ol li{padding-left:10px}

a:focus, a:hover{outline:none; text-decoration:none;}

.visible_tab{display:none}


/* ================================= 5 Wrappers #wrap ================================= */	

body{background:#ffffff; font-family: 'Roboto', sans-serif; line-height: 1; color:#000000; font-size: 16px; font-weight: 400}

.container{max-width:1266px; width:100%;}
.full_row{width:100%; float:none; margin:0 auto}
.small_container{max-width:920px; margin:0 auto; float:none; padding-left: 15px; padding-right: 15px;}
.site_full{max-width:1690px; margin:0 auto; position:relative}

.band_spacer{padding-top: 48px; padding-bottom: 0px;}
footer .band_spacer { padding-top: 20px; padding-bottom: 30px;}
/* ================================= 6 Custom CSS #custome ================================= */	
.main_header{background-color: #fff; padding:16px 100px; border-bottom: 1px solid #e4e4e4; width: 100%; position: relative; z-index: 99;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-between;
    }

.main_header img{ max-width: 290px; max-height: 48px;}
.main_header ul{align-self: center; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap;}
.main_header ul li{padding: 0 7px;}
.main_header ul li:last-child{padding-right: 0}
.main_header ul li a{color: #3a8ccf}
.main_header ul li a:hover{color:#155e9a}

.hero_cover{background-color: #58585a;position: relative;}
.hero_cover:before{position: absolute; height: 100%;  width: 100%; background-color: rgba(0,0,0,0.40); left: 0; top: 0; z-index: 0; content: ""; pointer-events: none; z-index: 9}
.hero_banner{height:calc(100vh - 145px); display: flex; background-image: url('../img/banner.jpg'); background-repeat: no-repeat; background-size: cover; margin:0 auto; background-position: center center;     flex-direction: column; justify-content: center; align-items: center;  position: relative}

.banner_content{text-align: center; position: relative; z-index: 9}
.banner_content strong{font-size:20px; color: #fff; font-weight: 700; display: block; text-align: center;}
.banner_content b{display: block;}
.banner_content b a{font-weight: 700; display: inline-block; text-align: center; color: #fff;}
.banner_content b a:hover{color:#0082cf }
.banner_content p { color: white; max-width: 710px; margin: 30px 15px; font-size: 18px; text-shadow: black 1px 1px 4px; font-size: 22px; line-height: 26px;}

.bc_btn{background-color:#18b4af; color:#fff; font-size: 15px; display: inline-block; padding:15px 25px; border-radius: 40px; margin-bottom: 25px; transition: all 0.3s linear 0s}
.bc_btn:hover{background-color:#00cfc8; color: #fff}
.bc_btn.arrow i{font-weight: 900; margin-left: 7px; display: inline-block; line-height: normal;}
.bc_btn.trans , #cboxClose , .mfp-close{background-color: transparent; color: #0082cf; letter-spacing: 0.02em; font-size: 13px; padding:7px 12px; border-radius: 100px; margin-bottom: 0;outline: none !important;}
.bc_btn.trans:hover , #cboxClose:hover , .mfp-close:hover , #cboxPrevious:hover , #cboxNext:hover , .mfp-arrow-left:hover , .mfp-arrow-right:hover{background-color: #00cfc8 !important; color: #fff; }


#getStarted.disabled { opacity: 0.5;}
#getStarted .fa-spinner{ display: none}
#getStarted.disabled .fa-spinner {
    display: inline-block;
}
#getStarted.disabled .fa-arrow-right { 
    display: none;
    
}
#getStarted .fa-arrow-right {
    display: inline-block;
}


#cboxNext:hover:before, .mfp-arrow-right:hover:before , #cboxPrevious:hover:before, .mfp-arrow-left:hover:before , #cboxClose:hover:before , .mfp-close:hover:before{color: #fff;}
.mfp-arrow{opacity: 1;}

.bc_btn.trans i{color:#00cfc8; margin-right: 3px; transition: all 0.3s linear 0s}
.bc_btn.trans:hover i{color: #fff ; pointer-events: none}
.fa_b{font-weight: 900}

input[type=radio]{ position: absolute; visibility: hidden;}

input[type=radio] ~ label{cursor: pointer}
input[type=radio] ~ label:hover img {-moz-box-shadow: 0 5px 10px rgba(0,0,0,.15);-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.15);box-shadow: 0 5px 10px rgba(0,0,0,.15);}
input[type=radio]:disabled ~ label img{box-shadow: none;}
input[type=radio] ~ label span{font-size: 16px; color: #0082cf; font-weight: 900; letter-spacing: 0.02em; margin-bottom: 20px; display: inline-block; color: #000; transition: all 0.3s linear 0s}
input[type=radio] ~ label span:before{content: "\f111"; font-family: 'Font Awesome 5 Free'; margin-right: 9px; font-weight: 400; color: #00cfc8; font-size: 17px;}
input[type=radio] ~ label span:after{content: "(Selected)"; font-style: italic; color: #000; font-weight: 500; margin-left: 5px; opacity: 0; transition: all 0.3s linear 0s ;display: inline-block;display: none;}

input[type=radio] ~ label:hover span{color: #0082cf;}
input[type=radio]:checked ~ label span{color:#0082cf}
input[type=radio]:checked ~ label span:before{content: "\f058"; font-weight: 900; color: #0082cf}
input[type=radio]:checked ~ label span:after{opacity: 1 ;display: inline-block;}

input[type=radio]:disabled ~ label{cursor: auto}
input[type=radio]:disabled ~ label:hover span{color: #000   }

.type_band input[type=radio] ~ label img{max-width: 100%; transition: all 0.3s linear 0s; margin-bottom: 26px;}
.type_band input[type=radio]:checked ~ label img{-moz-box-shadow: 0 5px 10px rgba(0,0,0,.15); -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.15); box-shadow: 0 5px 10px rgba(0,0,0,.15);}
.type_band .row{margin-left: -47px; margin-right: -47px}
.type_band [class^="col-md"]{padding-left: 47px; padding-right: 47px}
.type_band .col-md-4{border-right: 1px solid #e4e4e4 }
.type_band .col-md-4:last-child{border-right: 0}

#colorbox{z-index:9999999;}

#cboxOverlay{background-color: rgba(0, 0, 0, 1); position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 99;}
.content_pop#colorbox{ height: 100vh !important; overflow-y:scroll !important; transition: left 0s linear;left: 0 !important ;right: 0 !important; margin:0 auto !important; top: 0 !important ;}

.pop_cover{max-width: 410px; margin:0 auto; padding-bottom: 80px;}
.pop_cover:after{background-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 75%);content: ""; height: 140px; width: 100%;
    bottom: 0; left: 0; position: fixed; max-width: 100%; right: 0; margin:auto; pointer-events: none ;}
.pop_cover img{margin-bottom: 20px; max-width: 100%;}
.pop_cover p.intro{color: #cccccc; font-size: 16px; line-height: 22px; letter-spacing: 0.02em; margin-bottom: 10px;}
.pop_cover p ,.pop_cover.content_row li{color: #cccccc}
.pop_cover p strong{text-transform: uppercase; font-size: 13px; color: #fff}


/* #colorbox , #cboxWrapper , #cboxContent{width:100%!important; height: 100% !important; left: 0 !important; right: 0 !important;  pointer-events:none}
.pop_cover{pointer-events: auto !important; max-width: 480px;} */


.content_pop #cboxContent{padding-top: 60px;}
/* #cboxLoadedContent{order: 2} */
.content_pop #cboxClose , .mfp-close{top: 20px;}
#cboxClose , .mfp-close{border: 1px solid #00cfc8; outline: none; margin:0 auto; color: #fff; transition: all 0.3s linear 0s; margin-bottom: 20px; display: block;width: 77px;margin: 20px auto;top: -80px !important;}
#cboxClose:before , .mfp-close:before{color: #00cfc8;display: inline-block; content: "\f00d";  font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right:7px;}
.pop_cover h3{font-size: 16px; color: #fff; font-weight: 700; margin-bottom: 18px;}
.color_open{overflow:hidden}
.mfp-title{top: -30px; font-weight: 700;}
#colorbox::-webkit-scrollbar {display: none;}
.hidden{display: none}

#cboxPrevious , .mfp-arrow-left{position: absolute; left:0; top: 50%; transform:translateY(-50%) translateX(calc(-100% - 60px)); border: 1px solid #00cfc8; height: 31px; width: 55px; border-radius:15px; background-color: transparent !important; font-size: 0;outline: none !important; transition: all 0.5s ease 0s;}  
#cboxNext , .mfp-arrow-right{position: absolute; right: 0; top: 50%; transform:translateY(-50%) translateX(calc(100% + 60px));  border: 1px solid #00cfc8;  height: 31px; width: 55px; border-radius:15px; background-color: transparent !important; font-size: 0; outline: none !important; transition: all 0.5s ease 0s;}   

#cboxPrevious:before , .mfp-arrow-left:before{content: "\f30a"; font-family: 'Font Awesome 5 Free'; font-size: 13px; color: #00cfc8; font-weight: 900;}
#cboxNext:before , .mfp-arrow-right:before{content: "\f30b"; font-family: 'Font Awesome 5 Free'; font-size: 13px; color: #00cfc8; font-weight: 900;}

#cboxCurrent{position: absolute; top: 0; transform: translateY(calc(-100% - 6px));right: 0; color: #fff}

.button_band{display: inline-block; vertical-align: middle}

.glazing_band label{float:left}
.glazing_band .button_band , .style_band .button_band{float: right}


/*----- Accordion -----*/ 
.radio_list li{ margin-bottom:12px; border-bottom: 1px solid #e4e4e4;}

.accordion-section-content{ display: none }
.accordion-section-content {clear: left; border-top: 1px solid #e4e4e4; padding-top: 25px; padding-bottom:20px;}
.accordion-section-content p{color:#000;font-size: 16px;font-weight: 400;line-height: 24px;}
.accordion-section-title.active{position: relative; background-color: #00cfc8; color: #fff;}
.accordion-section-title.active i{color: #fff}
/*.accordion-section-title.active:before{content: ""; position: absolute; top: calc(100% + 10px); border-style: solid; border-width: 0 8.5px 9px 8.5px; border-color: transparent transparent #e4e4e4 transparent; width: 17px; left: 0; right: 0; margin:auto;}*/
/*.accordion-section-title.active:after {content: "\f057";position: absolute;top: calc(100% + 23px);left: auto;right: -80px;margin: auto;font-family: "Font Awesome 5 Brands" , "Font Awesome 5 free";color: #00cfc8;font-weight: 900;font-size: 16px;}*/



.img_block img{max-width: 100%; max-height: 295px;}
.img_block img{display: none}


ul.tabs {padding-left: 10px; position: relative; z-index: 8}
ul.tabs li:before {content: "\f111"; font-family: 'Font Awesome 5 Free'; margin-right: 9px; font-weight: 400;  color: #e4e4e4; font-size: 17px;}
ul.tabs li.active:before{content: "\f058"; font-weight: 900; color: #0082cf;}
ul.tabs li { font-weight: 700; color: #000; font-size: 16px; display: inline-block; padding: 11px 15px 11px; list-style: none; cursor: pointer; float: left; border:1px solid #e4e4e4; border-radius: 10px 10px 0 0; border-bottom:none; width: 49%;}



.tab_last { border-right: 1px solid #333; }
ul.tabs li{transition: all 0.3s ease 0s;}
ul.tabs li:hover {background-color: #eeeeee; color: #0082cf;}
ul.tabs li.active {background-color: #fff; color: #0082cf; border-bottom: 1px solid #fff; display: block;transition: border 0s linear 0s}
.tab_container{border-top:  1px solid #e4e4e4; padding:15px 0 15px 0; position: relative; top: -1px; z-index: 2}

.tab_content { padding: 0px; background-color: #fff; clear: left; position: relative; top: -1px; z-index: -1; }
.tab_drawer_heading{display: none}


/*
@media screen and (max-width: 480px) { .tabs { display: none;}
.tab_drawer_heading { background-color: #ccc; color: #fff;  border-top: 1px solid #333; margin: 0; padding: 5px 20px;
        display: block;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    


    .tab_drawer_heading{background-color: #fff;color: #000;font-weight: 700;    color: #0082cf;    font-size: 16px;    display: inline-block;    padding: 11px 15px 11px;    list-style: none;    cursor: pointer;    float: left;    border: 1px solid #e4e4e4;    border-radius: 10px 10px 0 0;    border-bottom: none;}

    ul.tabs li.active {    background-color: #fff;    color: #333;    border-bottom: 1px solid #fff;    display: block;    transition: border 0s linear 0s;}

}
*/


.customSelect {position: relative; float: right; max-width: 136px; font-size: 13px}

.customSelect.select-open .selectedValue{-webkit-border-radius: 20px 20px  10px 10px; -moz-border-radius: 20px 20px  10px 10px; border-radius: 20px 20px  10px 10px; }

.customSelect.select-open .selectedValue:before {content: ""; border-top: 1px solid #ccc; width: calc(100% - 20px);  position: absolute; left: 0;margin: auto; right: 0; z-index: 999; bottom: 1px;}

.customSelect .selectedValue {padding:5px 15px; margin-bottom: 0; line-height: 1.2; color: #333333; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  cursor: pointer; position: relative;
  background-color: #fff;
  border: 1px solid #24d2cc;
  -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
          border-radius: 20px;
}
.customSelect .selectList {z-index: 100; position: absolute; left: -999em; top: -999em; padding: 5px 0; list-style: none;
    background-color: #ffffff; border: 1px solid #24d2cc; border-bottom: 0;  overflow: hidden;

  -webkit-border-radius: 0px 0px 20px 20px;
     -moz-border-radius: 0px 0px 20px 20px;
          border-radius: 0px 0px 20px 20px;

  -webkit-box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);

  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.customSelect.select-open .selectList {left: 0 !important; top:20px !important; border-top: 0;}
.customSelect .selectList dl { background: #fff; max-width: 134px;}
.customSelect .selectList dl.defaultScrollbar { overflow-x: hidden;overflow-y: scroll; }
.customSelect dl, .customSelect dd {margin: 0;}
.customSelect dd { zoom: 1; cursor: pointer;}
.customSelect .disabled {color: #999; cursor: default;}
.customSelect .selectList dd.hovered {background: #eee; color: #000;}
.customSelect .selectList dd.disabled.hovered {background: none; color: #999;}

.customSelect dt {font-weight: bold; font-style: italic; padding: 2px 10px 2px 6px;} 
.customSelect dd {padding: 5px 10px 5px 15px;} 

.hasJS select.custom {position: absolute; left: -999em;}
.hasJS select.custom.use-default { position: absolute; left: auto; height: auto; width: 100%; appearance:none; -moz-appearance:none;
    -webkit-appearance:none; opacity: 0; font-size: 16px;}

/*.customSelect.focused .selectedValue {box-shadow: 0 0 2px #00aedb;}*/
.customSelect.disabled .selectedValue { border: 1px solid #ccc; color: #ccc; cursor: default;}
.customSelect .caret {display: inline-block; width: 0; height: 0; vertical-align: top; border-top: 4px solid #000000;  border-right: 4px solid transparent;
    border-left: 4px solid transparent; content: "";}

.customSelect .selectValueWrap .caret {position: absolute; top: 12px; right: 10px; cursor: pointer; pointer-events: none}
.customSelect .jspPane {overflow-x: hidden;}
.customSelect .jspVerticalBar {background: none;width: 8px;}
.customSelect .jspHorizontalBar {height: 0; overflow: hidden;}
.customSelect .jspTrack {background: none;right: 5px;border-radius: 5px;}
.customSelect .jspDrag {border-radius: 5px; color: #ffffff; opacity: .5; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #363636;
    *background-color: #222222;
    background-image: -moz-linear-gradient(top, #444444, #222222);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
    background-image: -webkit-linear-gradient(top, #444444, #222222);
    background-image: -o-linear-gradient(top, #444444, #222222);
    background-image: linear-gradient(to bottom, #444444, #222222);
    background-repeat: repeat-x;
    border-color: #222222 #222222 #000000;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.jspContainer{overflow: hidden; position: relative;}
.jspPane{position: absolute;}
.jspVerticalBar{position: absolute; top: 0; right: 0; width: 16px; height: 100%; background: red;}
.jspHorizontalBar{position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; background: red;}
.jspVerticalBar *,
.jspHorizontalBar *{margin: 0;padding: 0;}
.jspCap{display: none;}
.jspHorizontalBar .jspCap{    float: left;}
.jspTrack{background: #dde; position: relative;}
.jspDrag{background: #bbd; position: relative; top: 0; left: 0;  cursor: pointer;}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag{float: left; height: 100%;}
.jspArrow{background: #50506d; text-indent: -20000px; display: block; cursor: pointer;}
.jspArrow.jspDisabled{cursor: default; background: #80808d;}
.jspVerticalBar .jspArrow{height: 16px;}
.jspHorizontalBar .jspArrow{width: 16px; float: left; height: 100%;}
.jspVerticalBar .jspArrow:focus{ outline: none;}
.jspCorner{background: #eeeef4; float: left; height: 100%;}


#example-1 .customSelect { clear: both; margin-bottom: 10px; }
#example-2 .cities dd { padding: 0 5px; }

/* COUNTRY SELECTBOX */
/* This should be a sprite... but this is quicker for examples sake */
dd span, .selectedValue span {
    position: relative;
    top: 2px;
    display: block;
    height: 12px;
    width: 20px;
    float: left;
    clear: right;
}
dd span.usa, .selectedValue span.usa {
    background: url("../img/us.png") no-repeat;
}
dd span.germany, .selectedValue span.germany {
    background: url("../img/de.png") no-repeat;
}
dd span.france, .selectedValue span.france {
    background: url("../img/fr.png") no-repeat;
}
dd span.italy, .selectedValue span.italy {
    background: url("../img/it.png") no-repeat;
}

.tab_content span{display: inline-block;}


.glazing_band .accordion .label_check{      display: table; max-width: 230px;line-height: 25px;}
input[type=radio] ~ label span:before{display: table-cell;padding-right: 10px;}
input[type=radio] ~ label span{display: table;}
.colour_band .colour_band_box li{box-shadow: 0 0 0 rgba(0,0,0,0.5); transition: all 250ms ease; cursor: pointer; display: inline-block;    padding-top: 50px;    min-width: 90px;    text-align: center;    border: 2px solid #e4e4e4;    border-radius: 10px;margin-right:12px; overflow: hidden;}
.colour_band .colour_band_box li.active {box-shadow: 0 0 10px rgba(0,0,0,0.5)}
.colour_band .colour_band_box li span{display: block;    background-color: #f7f6f6;    padding: 7px 7px;     font-weight: 700;    font-size: 12px;}
.colour_band .colour_band_box li.green_box {background-color:#174840;  color: #174840; }
.colour_band .colour_band_box li.brown_box {color: #41393c ;background-color: #41393c;}
.colour_band .colour_band_box li.white_box {color: #000;background-color: #fff;}
.colour_band .colour_band_box strong{font-size: 16px;    line-height: 22px;    color: #000; font-weight: 700;}
.colour_band select{float: right;}
.colour_band ul.colour_band_box{padding: 18px 0; border-bottom:2px solid #e4e4e4;}
.colour_band input[type="text"]{  float: right;     width: calc(100% - 200px);max-width: 100%;}
.colour_band input[type=radio] ~ label span{margin-bottom: 0;}
.colour_band .colour_band_color li {padding:18px 0;  border-bottom: 2px solid #e4e4e4;}

/* Disable the drop down boxes or at least hide them */
.colorselect { display: none} 
.colour_band .select-main {
    display: none!important;
} 

input[type="text"], input[type="tel"], input[type="password"], input[type="date"], input[type="email"], input[type="number"], textarea{height: 25px;font-size: 14px;font-weight: 400;line-height: 18px;color: #000;     max-width:145px;  border-bottom: 1px solid #00cfc8;    padding: 3px 5px;}
h4{font-size: 20px ; line-height:26px;color: #000; text-transform: uppercase;font-weight: 700;margin-bottom: 5px;}
.price { margin-bottom: 10px; color: #8f8f8f;}
.price span{font-size: 20px;color: #3a8ccf;line-height: 26px;font-weight: 300;margin-bottom: 10px;display: inline-block; }
.price span.currency { font-size: 12px; display: inline; line-height: 1em; }
div.mobile {    display: none; }
a.button.small { background-color: #18b4af; color: #fff; font-size: 12px; display: inline-block; padding: 8px 16px; border-radius: 40px; margin-bottom: 10px; transition: all 0.3s linear 0s;}
.close_btn { color: #18b4af; display: inline-block; position: absolute; top: 3px; right: 0px;}
.full_btn { margin-bottom: 20px!important;padding: 4px 7px!important; border: #18b4af; color: #18b4af; background-color: #fff; border: 1px solid #18b4af; text-align: center; display: block;}
.full_btn:hover { background-color: #18b4af; color: #fff;}

.price.mobile { border-bottom: 1px solid #e4e4e4; margin-bottom: 20px; padding-bottom: 20px;}
.start_over {
    border: 1px solid #18b4af;
    background-color: #fff;
    color: #18b4af;
}
@media (max-width: 767px) {
 
    .mobile-flex .col-md-8 { 
        margin-bottom: 20px;
    }

    div.desktop {
        display: none
    }

    div.mobile {
        display: block;
    }
    .start_over { display: block; text-align: center; padding: 12px 20px!important}

}

.finish_band .estimate strong { display: block; color: #8f8f8f; font-weight: 400; line-height: 22px; font-size: 18px;}
.finish_band strong{font-size: 15px; font-weight: 700;color: #000;line-height: 20px;}
.finish_band ul {padding-bottom: 15px;}
.finish_band ul li{font-size: 15px;line-height: 20px;color: #8f8f8f;font-weight: 400;    padding-left: 15px;margin-bottom: 0;}
.finish_band ul li:before{color: #8f8f8f;}
.finish_band ul.checkmark li:before{color: #18b4af;font-family: 'Font Awesome 5 Free';content:'\f00c';}
.finish_band ul.checkmark li {padding-left: 20px;color:#18b4af;}

.finish_band .col-md-6 .col-md-8{padding-left: 55px;}
.finish_band .input_group{text-align: right;width: 100%;padding-bottom: 10px;}
.finish_band .input_group .error { border: 1px solid #f00}
.finish_band #error { border: 1px solid #f00; background-color: #fee; color :#f00; padding: 8px; margin-bottom: 5px; display: none; font-size: 12px; }
.finish_band .input_group strong{float: left;}
.finish_band .input_group.zip input[type="text"]{max-width: 100px; -webkit-appearance: none;    -moz-appearance: none;    appearance: none;}
.finish_band .input_group.also-send {text-align:left; line-height: 22px;padding-bottom: 15px;}
.finish_band .input_group.also-send strong {float:none;}
.finish_band .note p{font-size: 13px;line-height: 15px;}
.finish_band .note p:last-child{font-size: 13px;line-height: 20px;}
.finish_band sup{position: relative;top: -3px;color: #ff0000;}
.finish_band input[type=submit]{width: 100%; box-shadow: 0px 5px 10px 0px rgba(23, 146, 142, 0.3);}
.finish_band .submit{position: relative;margin-top: 30px;}
.finish_band .submit:after{content: "\f1d8";font-family: 'Font Awesome 5 Free' ; font-size: 16px;color: #fff; position: absolute;left: 65px;right: 0;text-align:center;top: 10px;pointer-events: none;font-weight: 900;}

.coupon_band{text-align: center;}
.coupon_band h2{margin-bottom: 30px;}
.coupon_band strong{font-size: 15px; font-weight: 700;color: #000;line-height: 26px;}
.finish_band p{font-size: 15px;line-height: 22px;color: #8f8f8f;font-weight: 400;}
.finish_band p.disclaimer { font-size: 12px; text-align: center; padding-top: 30px; font-style: italic;}

.footer .footer_logo{text-align: center;position: relative;}
.footer .footer_logo:after{content: ""; border-top:2px solid #e4e4e4;position: absolute; left: 0;width: 100%;top: 50%;z-index: -1;}
.footer .footer_logo a {    background-color: #fff;   z-index: 99;    display: inline-block;    padding: 0 20px;}
.footer .footer_logo a img {max-height: 68px;}
.footer .footer_logo a:after{content: "";border-top: 2px solid #569240;position: absolute;top: 50%;z-index: 9;right: 0;max-width: 100px;width: 100%;}
.footer .footer_logo a:before{content: "";border-top: 2px solid #569240;position: absolute;top: 50%;z-index: 9;left: 0; max-width: 100px;width: 100%}
.footer p{display: block;    text-align: center;    margin-top: 25px;    font-size: 12px;    line-height: 16px;    color: #868686;    letter-spacing: 0.02em;}
.footer a{color: #0082cf; font-weight: 400;}
.footer a:hover{text-decoration: none;    color: #18b4af;}


.size_band .note , .colour_band .note{font-size: 13px;line-height: 16px;color: #000;font-weight: 400;margin-top: 10px;}
.size_band .note strong , .colour_band .note strong{font-size: 13px;line-height: 16px;color: #b1b1b1;font-weight: 700;}

.tab_container{    padding: 15px 0 22px 0;}
.tab_content hr{    border-top: 2px solid #e4e4e4;    margin: 22px auto 13px;}
.tab_content > span{margin-top: 5px;}
#tab2 > ul > li{border-bottom: 2px solid #e4e4e4;  padding: 15px 0 15px 0;float: left;width: 50%;}
#tab2 li input[type="text"]{    width: calc(100% - 100px);max-width: 100%;}
#tab2 label{max-width: 60px;width: 100%;}

#tab1 #size_band_radio{opacity: 0;position: absolute;}
input[type=checkbox]:checked ~ label span:before {    content: "\f058";    font-weight: 900;    color: #0082cf;}
input[type=checkbox] ~ label span:before {    content: "\f111";    font-family: 'Font Awesome 5 Free';    margin-right: 9px;    font-weight: 400;    color: #00cfc8;    font-size: 17px;}
.size_band img , .band_spacer img, .finish_band img{max-width: 100%;}

.customSelect .caret{border:none;}
.customSelect .caret:before{content:"\f078"; font-family: 'Font Awesome 5 Free'; color: #24d2cc;font-weight: 900;position: absolute;    top: -3px;    right: 5px;}
.colour_band strong{font-size: 16px;line-height: 22px;color: #000;font-weight: 700;}

.bottom_img{text-align: center;margin-top: -45px;}
.bottom_img .right_img{display: inline-block; vertical-align: middle; margin-left: 30px;position: relative; border:3px solid #fff;border-radius: 8px;}
.bottom_img .right_img span{position: absolute;left: 0;bottom: 0;right: 0;margin: 0 auto;background-color: #f8f8f8; font-size: 13px; font-weight: 400;padding: 6px 0;    border-radius: 0px 0px 5px 5px;}
.bottom_img .right_img .img_colour {overflow: hidden; border-radius: 5px;border:none; width:116px; height: 82px;}

.bottom_img .glazing_img, .bottom_img .img_colour {max-width: 125px; border:3px solid #fff;    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);}
.finish_band .col-md-6 .col-md-8 > strong{ margin-bottom: 10px;  display: inline-block;}
.social_media{display: none;}

.btn_holder { padding-top: 20px; text-align: center;}

.mo_style_band{display: none;}
.mo_glazing_band{display: none;}


input[type=radio]{ position: absolute; visibility: visible ; opacity: 0;}

.sticky_footer {background-color: #3a8ccf; width: 100%; position: fixed; bottom: 0; z-index: 9;}
.sticky_footer .container{ max-width: 1385px; display: flex; justify-content: space-between; align-items: center}
.sticky_footer .bc_btn{margin-bottom: 0; background-color: #ffffff; color: #000; white-space: nowrap;}
.sticky_footer .bc_btn:hover{background-color: #00cfc8; color: #fff;}
.sticky_footer .bc_btn i{margin-right: 3px; color:#00cfc8; transition: all 0.3s linear 0s}
.sticky_footer .bc_btn:hover i{color: #fff }
.sticky_footer .bc_btn.disabled{background-color: #579fda; color: rgba(255,255,255,0.4); pointer-events: none} 
.sticky_footer ul.band_list{padding:24px 0}
.sticky_footer ul.band_list li{display: inline-block; padding: 0 20px 0;}
.sticky_footer ul.band_list li a{font-size: 15px; color: rgba(255,255,255,0.4); padding:24px 0; position: relative}
.sticky_footer ul.band_list li.completed a{ color: rgba(255,255,255,1) ;}
.sticky_footer ul.band_list li.completed a:before{ content: "\f058"; font-weight: 900 ; color: #00cfc8}

.sticky_footer ul.band_list li.completed a:after {content: ""; border-bottom: 1px solid #fff; width: 100%; width: calc(100% - 22px);display: block; float: right;}
.sticky_footer ul.band_list li.active a:after{content: ""; position: absolute; top: 0; border-top:4px solid #00cfc8; width: 100%; left: 0;}
.sticky_footer ul.band_list li.active a:before{content: "\f111";font-weight: 900; color: #fff}
.sticky_footer ul.band_list li.active a{color: rgba(255,255,255,1)}



.sticky_footer ul li a:before{content: "\f111"; font-family: 'Font Awesome 5 Free' ; margin-right: 7px; }
.sticky_footer .pre_btn{width:54px; height:45px; position: relative; background-color: #fff; display: inline-block; vertical-align: middle; margin-right: 10px;}

.sticky_footer .pre_btn:hover{background-color: }
.sticky_footer .pre_btn:before{content: ""; background-image: url('../img/pre_btn.png'); position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-repeat: no-repeat; background-position: center center; opacity: 0; transition: all 0.3s linear 0s}
.sticky_footer .pre_btn:after{content: ""; background-image: url('../img/back_btn.png'); position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-repeat: no-repeat; background-position: center center; opacity: 1; transition: all 0.3s linear 0s}

.sticky_footer .pre_btn:hover:before{ opacity: 1 }
.sticky_footer .pre_btn:hover:after{opacity: 0}
.sticky_footer .pre_btn.disabled{background-color: #579fda }
.sticky_footer .pre_btn.disabled:after{background-image: url('../img/pre_btn.png'); opacity: 0.4}
.sticky_footer .pre_btn.disabled:before{ background-image: url('../img/back_btn.png');}

@-webkit-keyframes wiggle {
    0% {
        -webkit-transform: rotate(10deg);
    }

    25% {
        -webkit-transform: rotate(-10deg);
    }

    50% {
        -webkit-transform: rotate(20deg);
    }

    75% {
        -webkit-transform: rotate(-5deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-ms-keyframes wiggle {
    0% {
        -ms-transform: rotate(1deg);
    }

    25% {
        -ms-transform: rotate(-1deg);
    }

    50% {
        -ms-transform: rotate(1.5deg);
    }

    75% {
        -ms-transform: rotate(-5deg);
    }

    100% {
        -ms-transform: rotate(0deg);
    }
}

@keyframes wiggle {
    0% {
        transform: rotate(10deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(20deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes shadow-pulse {
        0% {
            box-shadow: 0 0 0 0px rgba(255,255,255,1);
            background-color: #fff;
            color: #18b4af;
            transform: scale(1,1);
            
        }
        25% {
            background-color: #18b4af;
            color: #fff;
        }
        50% {
            background-color: #fff;
            color: #18b4af;
            transform: scale(0.8, 0.8);
        }

        75% {
            background-color: #18b4af;
            color: #fff;
            
        }
        100% {
            box-shadow: 0 0 0 10px rgba(255,255,255,0);
            background-color: #fff;
            color: #18b4af;
            transform: scale(1,1);
            left: 0px;
        }
}

.next_btn.animate {
    animation: shadow-pulse 1s 3;
    transition: all ease-in-out 500ms;
   
}

.sticky_footer .next_btn {
    display: inline-block;
    vertical-align: middle;
    color: rgba(255, 255, 255, 1.0);
    background-color: #18b4af;
    transition: all 250ms ease;
    position: relative;
}
.sticky_footer .next_btn i {
    color: inherit!important;
    transition: all 250ms ease;
}
.sticky_footer .next_btn.disabled{background-color: #18b4af; color: rgba(255,255,255,0.4);}
.sticky_footer .next_btn.disabled i{ color: #fff; margin-left: 5px; color: rgba(255,255,255,0.4);}

.sticky_top{background-color: #0082cf;padding-top: 23px; overflow: hidden; position: fixed; bottom: 0; width:100%; z-index: 999; transform: translateY(100%); transition: all 0.3s linear 0s;} 

footer .open_footer.sticky_top{ transform: translateY(0) }
.sticky_top .container{max-width: 1385px;}
.sticky_top h3{color: #fff; display: block; padding-bottom: 20px; position: relative; margin-bottom: 30px; font-size: 19px; font-weight: 900;} 
.sticky_top h3:after , .sticky_top .bc_btn:after{content: ""; width: 100%; border-bottom: 1px solid #40a1db; position: absolute; bottom: 0; left: 0; width: 9999px}
.sticky_top h3:before , .sticky_top .bc_btn:before{content: ""; width: 100%; border-bottom: 1px solid #40a1db; position: absolute; bottom: 0; right: -100%; width: 9999px}
.sticky_top .bc_btn:before , .sticky_top .bc_btn:after{top: -9px; bottom: auto}
.sticky_top h3 i{margin-right: 15px;}
.sticky_top h4 { color: #fff; margin-bottom: 4px;}

.sticky_top .content_row ul{padding-bottom: 4px}
.sticky_top .content_row li{color: #fff; }
.sticky_top .content_row li.disabled{color:rgba(255,255,255,0.2);}
.sticky_top .content_row li:before{color:#fff ;}
.sticky_top .content_row li.custom_value:before{ content: "\f111"; color:rgba(255,255,225,0.2); font-weight: 300; font-family: 'Font Awesome 5 Free'; left: -3px}
.sticky_top .content_row li.custom_value{color:rgba(255,255,225,0.2);}
.sticky_top .content_row li{}
.sticky_top .row .col:last-child {border-right: 0}

.sticky_top .col {padding-bottom: 42px; border-right: 1px solid rgba(255,255,255,0.25); padding-left: 50px;margin-bottom: 27px;}
.sticky_top .col a{color:#00cfc8; font-size: 15px;line-height: 20px;}
.sticky_top .col a:before{content: "\f044"; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px;}

.sticky_top .col:after {content: "";height: 15px;width: 4px;position: absolute;background: #00cfc8;right: -5px;top: 0;}
.sticky_top .col:last-child:after{display: none;}
    
.sticky_top .bc_btn{margin-bottom: 7px; width: 208px; text-align: center; position: relative; margin-top: 9px;}

.sticky_top .bc_btn i{margin-right: 8px}


.sticky_top .col a.disabled{color:rgba(255,255,255,0.2); pointer-events: none}
footer{margin-bottom: 65px;}

.sticky_footer .bc_btn.mo_review_btn{display: none;}
.sticky_footer .bc_btn.hidden{display: block !important;}

.step { color: #fff;    font-size: 15px;    text-align: center;    width: 100%;    max-width: 300px;    padding: 30px;}
/* .sticky_top .row .col:last-child ul li{    color: rgba(255,255,255,0.2);  }
.sticky_top .row .col:last-child ul li:before {   color: rgba(255,255,255,0.2);} */

.sticky_footer .bc_btn.disabled i{     color: rgba(255,255,255,0.4);}

.coupon_band p{font-weight: 400;color: #8f8f8f;}
.coupon_band p.small { font-size: 12px; line-height: 16px;}

#cboxTitle{color: #fff;    font-size: 16px;    line-height: 20px;    font-weight: 900;    position: absolute;    top: -30px;}


.accordion-section-content.open{position: relative;}
.accordion-section-content.open:before{content: "";    position: absolute;    top:-10px;   border-style: solid;    border-width: 0 8.5px 9px 8.5px;    border-color: transparent transparent #e4e4e4 transparent;    width: 17px;   right:130px;    margin: auto;}
.accordion-finish .accordion-section-content.open:before { right: auto; left: 20px;}
.accordion-finish .accordion-section-content { margin-top: 20px; border-bottom: 1px solid #e4e4e4}

.customSelect.focused .selectList {top: 25px;left: 0;width: 100%;}
.customSelect.focused .selectList {    top: 26px;    left: 0;    width: 100%;    padding-top: 30px;    padding: 5px 0;    list-style: none;    background-color: #ffffff;    border: 1px solid #24d2cc;    border-bottom: 0;border-top: 0;     box-shadow: 0 0 1px #00aedb;}
.customSelect.focused .selectedValue{border-radius: 20px 20px 0px 0px;    border-bottom: 0; transition: none;}
.customSelect.focused .selectedValue:before {    content: "";    border-top: 1px solid #ccc;    width: calc(100% - 20px);    position: absolute;    left: 0;    margin: auto;    right: 0;    z-index: 999;    bottom: 1px;}
.customSelect.focused{z-index: 999 !important;}

.colour_band .customSelect{z-index: 9 !important;} 
.colour_band .customSelect.focused{z-index: 9 !important;} 


div.select-main { background-color: #FFFFFF;border: 1px solid #2DB2FF;box-shadow: 0 0 2px #2DB2FF;border-radius: 5px;font-size: 1.7em;height: 40px;position: relative;width: 200px;-webkit-user-select: none; / webkit (safari, chrome) browsers /-moz-user-select: none; / mozilla browsers /-khtml-user-select: none; / webkit (konqueror) browsers /-ms-user-select: none; / IE10+ /}

div.select-main.z-index {z-index: 10;}

div.select-main.disabled {cursor: default;filter: alpha(opacity=50);opacity: 0.5;zoom: 1;}

div.select-main.disabled div.select-set {cursor: default;}

div.select-main.disabled div.select-arrow {cursor: default;}

div.select-set {background-color: #FFFFFF;border-radius: 5px;color: #333333;cursor: pointer;height: 40px;line-height: 40px;overflow: hidden;position: relative;padding: 0 35px 0 15px;text-overflow: ellipsis;white-space: nowrap;width: 150px;z-index: 5;}

div.select-arrow {border-top: 7px solid #2DB2FF;border-left: 7px solid transparent;border-right: 7px solid transparent;cursor: pointer;height: 0px;position: absolute;top: 18px;right: 10px;width: 0px;z-index: 7;}

div.select-arrow.reverse {border-top: 7px solid transparent;border-bottom: 7px solid #2DB2FF;top: 10px;}

div.select-block {background-color: #FFFFFF;border-left: 1px solid #2DB2FF;border-right: 1px solid #2DB2FF;border-bottom: 1px solid #2DB2FF;border-radius: 5px;box-shadow: 0 0 2px #2DB2FF;left: -1px;line-height: 20px;position: absolute;top: 32px;width: 200px;}

ul.select-list {cursor: pointer;margin: 15px 0 7px;}

/ Scroll view /

ul.select-list::-webkit-scrollbar {width: 12px;}

ul.select-list::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;}

ul.select-list::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}

ul.select-list {scrollbar-face-color: #AEB1B1;scrollbar-shadow-color: #C7CACA;scrollbar-highlight-color: #CED1D1;scrollbar-3dlight-color: #CED1D1;scrollbar-darkshadow-color: #C7CACA;scrollbar-track-color: #CED1D1;scrollbar-arrow-color: #FFFFFF;}

/ End scroll view /

li.select-items { color: #333333;padding: 7px 15px;}

li.select-items:hover,li.select-items.active {background-color: #2DB2FF;color: #FFFFFF;}

div.select-main {    background-color: #FFFFFF;    border: 1px solid #24d2cc;    border-radius: 50px;    font-size: 13px;    height: auto;    position: relative;    width: 135px;float: right;}
div.select-set {    background-color: #FFFFFF;    border-radius: 50px;    color: #000;    cursor: pointer;    height: 25px;    line-height: 25px;    position: relative;    padding: 0 35px 0 15px;    width: auto;    z-index: 5;}
div.select-arrow{border:none;}
div.select-arrow:before{content:"\f078"; font-family: 'Font Awesome 5 Free'; color: #24d2cc;font-weight: 900;position: absolute;    top: -17px;    right: 5px;}
div.select-block {    background-color: #FFFFFF;    border-left: 1px solid #24d2cc;    border-right: 1px solid #24d2cc;    border-bottom: 1px solid #24d2cc;    border-radius: 0px 0px 20px 20px;    box-shadow: 0 0 2px #24d2cc;    left: -1px;    line-height: 20px;    position: absolute;    top: 14px;    width: 135px;    padding-left: 0;overflow: hidden;}
div.select-block .select-list .select-items{padding-left: 15px;}
li.select-items:hover, li.select-items.active {    background-color: #eee;    color: #000;}
.colour_band div.select-main.z-index {    z-index: 0;}


.accordion-section-content{position: relative !important;}
.accordion .bc_btn.acc_close{background-color: transparent !important;position: absolute!important;top: 5px !important;right: 0 !important;}
.acc_close:hover{background-color: transparent !important;}
.accordion .bc_btn.acc_close:after {content: "\f057";position: absolute;top: 0;right: 0px;margin: auto;font-family: "Font Awesome 5 Brands" , "Font Awesome 5 free";color: #00cfc8;font-weight: 900;font-size: 16px;}

.mfp-counter{font-size: 13px;top: -30px;}
.size_band_radio input[type=radio] ~ label span{margin-bottom: 0 !important}

.tab_content hr {    border-top: 2px solid #e4e4e4;    margin: 16px auto 13px;}
.tab_content hr:last-child{    margin: 12px auto 13px;}

.modal_open{overflow: hidden;}
.mfp-wrap{overflow: scroll;}

.colour_band_color label{display: block;}
.colour_band_color input[type=radio] ~ label span { display: block; }
.colour_band_color input[type=radio] ~ label span:before {    display:inline-block;}

.colour_band_color input[type=radio] ~ label input{pointer-events: none;}
.colour_band_color input[type=radio]:checked ~ label input{ pointer-events:auto; }


@media all and (max-width: 500px) {
.cboxPhoto{max-width:300px !important; height: auto !important; width:100% !important;}
}

/* ================================= 7 Media Query #media ================================= */	
/********************************* Mobile Potrait #MP ********************************/
@media screen and (max-width: 320px) and (orientation: portrait) {}

/********************************* Mobile Potrait ********************************/
@media screen and (max-width: 480px) and (orientation: portrait) {}

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

/* ================================= Common For All mobile definitions #mx ================================= */
@media all and (max-width: 767px) {

html * {max-height:1000000px}	

.x
{display:none}
/*
h1{font-size:25px; line-height:32px;}
h2{font-size:26px}
h3{font-size:20px}
h4{font-size:18px}*/
/*p, .content_row ul li, .content_row ol li{font-size:18px; line-height:24px}*/
p.intro{font-size:20px; line-height:30px}

/* Image Alignment */
.alignnone , a img.alignnone , .aligncenter, div.aligncenter ,  .alignright , a img.alignright , .alignleft , a img.alignleft{margin: 30px auto; float:none}
	
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {-ms-flex: 0 0 100%; flex: 0 0 100%;
max-width: 100%;}

.main_header{padding:6px 0; display: block; text-align: center;}
.main_header img{max-width: 165px; display: inline-block;}
.main_header ul{display: none}	

.hero_banner {height: calc(100vh - 105px);}

.banner_content strong{font-size: 13px; margin-bottom: 15px; }

ul.resp-tabs-list { display: none; }
h2.resp-accordion { display: block; }

.resp-vtabs .resp-tab-content { border: 1px solid #C1C1C1; }
.resp-vtabs .resp-tabs-container {border: none; float: none; width: 100%; min-height: initial; clear: none;}
.resp-accordion-closed { display: none !important; }
.resp-vtabs .resp-tab-content:last-child { border-bottom: 1px solid #c1c1c1 !important; }

#cboxPrevious , .mfp-arrow-left{display: block;    top: auto;    transform: none;    left: 20px;    bottom: -50px; }
#cboxNext , .mfp-arrow-right{display: block;    top: auto;    transform: none;    right: 20px;    bottom: -50px; left: auto;}

.cboxPhoto{max-width:420px; height: auto !important; width:100%;}
input[type=radio] ~ label span {    font-size: 15px;}
input[type=radio] ~ label span:after { font-size: 13px !important;}

.type_band .container .row .col-md-4:after{content: "";border-bottom: 1px solid #e4e4e4; margin: 45px 0 20px; display: block;}

.line{border-bottom: 1px solid #e4e4e4;margin: 0 15px;}
.type_band .col-md-4 {    max-width: 450px;    margin: 0 auto;    border-right: 0;}

.type_band .row {    margin: 0 -15px !important;}
.type_band [class^="col-md"]{ padding-left: 15px; padding-right: 15px;}
.type_band .col-md-4 { max-width: 380px; }

.img_block{margin-bottom: 15px;}
.style_img .button_band{float: none;margin-bottom: 15px;}

.bc_btn.trans:not(.acc_close){ border: 1px solid #00cfc8;     padding: 7px 30px;}

.style_band .col-md-6{max-width: 380px; margin: 0 auto;}
.style_band img{margin-bottom: 15px;}
.style_band label{display: block;}
.style_band label span{margin-bottom: 15px !important;}
.style_band .button_band{width: 100%;}

.glazing_band .col-md-6{max-width: 380px;margin: 0 auto;}
.glazing_band img{margin-bottom: 15px;}
.glazing_band label{display: block;}
.glazing_band label span{margin-bottom: 15px !important;}

.type_band input[type=radio] ~ label img{margin-bottom: 10px; width: 100%;}

.hero_cover{margin-bottom: 30px;}
.band_spacer { padding: 20px 0 20px ;border-bottom: none;}

/*.style_band .button_band .bc_btn.trans {float: right;}*/
.style_band .button_band .bc_btn.accordion-section-title{float: left;}
.style_band li { border-bottom: 1px solid #e4e4e4;}

.glazing_img .button_band{float: none;margin-bottom: 15px;}
.glazing_band .button_band{width: 100%;}
.glazing_band .button_band .bc_btn.trans {float: right;}
.glazing_band .button_band .bc_btn.cboxElement{float: left;}
.glazing_band .button_band .bc_btn.accordion-section-title{float: left;}
.glazing_band .accordion .label_check{ max-width: 100%;line-height: 15px;}




.size_band .note, .colour_band .note{display: none;}
.size_band img, .band_spacer img, .finish_band img{margin-bottom: 10px;}
.tab_content > span{display:inline-block;}
.size_band .customSelect{margin-top: 10px;float: none; max-width: 100%; width: 100% !important;}
.tab_content hr{display: none;}

#tab1 select{width: 100%;margin: 8px 0 15px;}


#tab1 ul{    padding: 15px 0;    border-top: 1px solid #ededed;    border-bottom: 1px solid #ededed;    margin-top: 15px;}
.colour_band .colour_band_box li{min-width: 80px;}
ul.tabs li{    padding: 11px 12px 11px;}
h2{font-size: 20px;line-height: 25px;margin-bottom: 20px;}
.colour_band strong{font-size: 15px;line-height: 26px;}
.colour_band input[type="text"] {    float: none;    margin-top: 10px;    max-width: 100%;}
input[type=radio] ~ label {    display: inline-block;}


.mo_glazing_band input[type=radio] ~ label , .mo_style_band input[type=radio] ~ label{ width: 100% !important;}
.colour_band input[type="text"]{ max-width: calc(100% - 145px);    float: right; margin-top: 0;}
.bottom_img .right_img{margin-left: 10px;}
.bottom_img{margin-top: -30px;margin-bottom: 20px;    padding-bottom: 15px; border-bottom: 1px solid #e4e4e4;}
.finish_band{padding: 20px 0 20px;}
.finish_band .col-md-6 .col-md-8 {    padding-left: 15px;}
.finish_band .input_group.zip input[type="text"] {       max-width: calc(100% - 140px);}
.footer .footer_logo a:before{content: none;}
.footer .footer_logo a:after{content: none;}
.footer .footer_logo:after{content: none;}

.summary > div {column-count: 2;}
.summary_content {    vertical-align: top;    display: inline-block;    width: 100%;}
h4 {    font-size: 18px;line-height: 26px;}
.price span {    font-size: 22px;margin-bottom: 20px;}
.price span strong { display: block; color: #8f8f8f; font-weight: 400; line-height: 22px; }
.price{text-align: center;}

.summary{border-bottom: 1px solid #e4e4e4;padding-bottom: 5px;margin-bottom: 20px;}
.finish_band .col-md-6 .col-md-8 > strong{text-transform: uppercase;}
.accordion-finish .accordion-section-content { border-bottom: 0px;}
.accordion-section-title.active:after { display: none}
.accordion-finish .accordion-section-content.open:before { left: 50%; right: auto; margin: 0 auto; position: absolute}

.input_group.name:first-of-type{margin-top: 15px;}
.finish_band .note p{margin-bottom: 3px;}
.finish_band .submit{margin-top: 18px;}


.footer{padding-bottom: 30px;}
.footer a{display: block;}
.social_media{display:block;text-align: center;    margin: 20px 0 0px;}
.social_media li{display: inline-block !important;margin: 0 7px;}
.social_media li i{color: #009fde;}
.social_media li i:hover{color: #0082cf;}
.mo_style_band{display: block; padding-bottom: 0;}
.style_band{display: none;}
.glazing_band{display: none;}
.mo_glazing_band{display: block; margin-bottom:0;}

.button_band {    display: block;}
.mo_style_band.type_band .container .row .col-md-4:after{    margin: 15px 0 20px;}
.mo_glazing_band.type_band .container .row .col-md-4:after{content: none;}
.size_band .col-md-6 , .finish_band .col-md-6 , .colour_band .col-md-6{max-width: 380px;margin: 0 auto;width: 100%;}
.accordion-section-title.active:before { top: calc(100% + 7px);}

.sticky_footer .bc_btn.mo_review_btn{display: block;}
.sticky_footer .bc_btn.review_btn{display: none;}
.sticky_footer ul.band_list{display: none;}

.sticky_footer .bc_btn.hidden{display:none !important;}
.sticky_footer .bc_btn.mo_review_btn{display: block;     color: #18b4af;}
.sticky_footer .bc_btn{font-size: 13px;    line-height: 15px;    padding: 13px 20px; }
.sticky_footer {padding: 10px 0;  box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.1);    }

.col {    -ms-flex-preferred-size: 0;    flex-basis: auto;    -ms-flex-positive: 1;    flex-grow: 1; }
.sticky_top h3{font-size: 15px;line-height: 20px;padding-bottom: 10px;margin-bottom: 10px;}
.sticky_top .col {  border-bottom: 1px solid rgba(255,255,255,0.25);    padding-left: 20px;    margin-bottom: 10px; padding-bottom: 0; min-height: 56px;}
.sticky_top .col a {    position: absolute;    top: 0;    right: 20px;    font-size: 0 !important;    background-color: #fff;    padding: 10px 20px;    border-radius: 50px;}
.sticky_top .col a:before{font-size: 13px;}
.sticky_top .col a:after {    content: "Edit";    font-size: 13px;    line-height: 15px;    position: relative;    color: #00cfc8;    top: 0;    right: 0;}
.sticky_top .col a.disabled{     color: rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.2);  }
.sticky_top .col a.disabled:after{     color: rgba(255,255,255,0.2); }
.sticky_top .col:last-child{border-bottom: none;}
.sticky_top .bc_btn:before{ border-bottom: none !important; }
.sticky_top .bc_btn:after{ border-bottom: none !important; }
.sticky_top .bc_btn{width: 115px; margin-top: 70px;}

.sticky_top h4{    font-size: 15px;    line-height: 20px;}
.sticky_top.open_footer ul li{font-size: 13px; font-weight: 400;}
.sticky_top .col:after{content: none;}

footer .open_footer.sticky_top{height: 100%;  }
.sticky_top .container {    max-width: 1385px;    height: 100%;   padding-bottom: 70px;}
.sticky_top .bc_btn.close_btn{position: absolute;bottom: 15px;left: 15px; top: auto;}
.sticky_top .col a{line-height: 0;}

.customSelect.focused .selectList {top: 25px;left: 0;width: 100%;}
.customSelect.focused .selectList {    top: 26px;    left: 0;    width: 100%;    padding-top: 30px;    padding: 5px 0;    list-style: none;    background-color: #ffffff;    border: 1px solid #24d2cc;    border-bottom: 0;border-top: 0;     box-shadow: 0 0 1px #00aedb;}
.customSelect.focused .selectedValue{border-radius: 10px 10px 0px 0px;    border-bottom: 0; transition: none;}
.customSelect.focused .selectedValue:before {    content: "";    border-top: 1px solid #ccc;    width: calc(100% - 20px);    position: absolute;    left: 0;    margin: auto;    right: 0;    z-index: 999;    bottom: 1px;}
.customSelect.focused{z-index: 999 !important;}

.colour_band .customSelect .selectedValue {    padding: 9px 15px !important;}

input[type="text"], input[type="tel"],  input[type="email"]{    max-width: calc(100% - 90px);}

div.select-main{float: none!important ; width: 100%;margin-top: 8px;}
div.select-block{    width: calc(100% + 2px);}
.colour_band_box{text-align: center;}
.colour_band_box li:last-child{margin-right: 0;}
.bottom_img .right_img div{margin-bottom: 0;}

.colour_band div.select-main {    width: calc(100% - 170px);   float: right !important; margin-top: 0 !important}
.colour_band div.select-set{height: 35px;line-height: 35px;}
.colour_band div.select-arrow:before{top: -6px;}
.colour_band div.select-block{top: 22px;}

.accordion-section-title.active:after {content: "\f057";position: absolute;top: calc(100% + 23px);left: auto;right: -80px;margin: auto;font-family: "Font Awesome 5 Brands" , "Font Awesome 5 free";color: #00cfc8;font-weight: 900;font-size: 16px;z-index: 99;}
.accordion-section-title.active {     position:static;}
.accordion-section-title.active:after{right: 0;}
.glazing_img .button_band{position: relative;} 
.coupon_band h2 {    margin-bottom: 5px;}

.accordion-section-content.open:before{right: auto;left: 65px;}

#tab2 li{float:none;width: 100%;}
#tab2 li input[type="text"]{    width: calc(100% - 70px);max-width: 100%;}
.colour_band .colour_band_color li {    padding: 12px 0 16px; border-bottom: 1px solid #e4e4e4;}

.colour_band ul.colour_band_box {border-bottom: 1px solid #e4e4e4;}
.type_band.band_spacer{padding-bottom: 0;}
.mo_glazing_band .band_spacer{ padding:  0 0 10px; }

h1 {    font-size: 25px;    font-weight: 300;line-height: 32px;}
.bc_btn{font-size: 13px;line-height: 17px;}
.banner_content b a{font-size: 15px;line-height: 22px;}
.colour_band_color input[type=radio] ~ label {     display: block; }

}




/********************************* ipad portrait #ip ********************************/
@media only screen and (min-width : 768px) and (max-width: 1000px) {
/*h1{font-size:38px}
h2{font-size:28px}
h3{font-size:22px}
h4{font-size:21px}
p, .content_row ul li, .content_row ol li{font-size:15px}*/
p.intro{font-size:20px}

.hidden-tab
{display:none}

/* Image Alignment */
.alignnone , a img.alignnone , .aligncenter, div.aligncenter ,  .alignright , a img.alignright , .alignleft , a img.alignleft{margin: 30px auto; float:none}

.main_header{padding:30px;}
.type_band .row { margin: 0 -15px !important;}
.type_band [class^="col-md"]{ padding-left: 15px; padding-right: 15px;}



.glazing_band .button_band, .style_band .button_band { margin-bottom: 10px;}
.customSelect{margin-top: 10px;float: none;}
.colour_band input[type="text"] {     float:right;    max-width: 55% !important; }
.colour_band_color input[type=radio] ~ label {     display:inline-block; }
.finish_band .input_group {    text-align:left;}
.finish_band .input_group strong {     float: none; }
input[type="text"], input[type="tel"], input[type="password"], input[type="date"], input[type="email"], input[type="number"], textarea{max-width: 100% !important;}
.finish_band .input_group strong{line-height: 26px;}
.sticky_footer ul.band_list {    padding: 15px 0 10px;text-align: center;}
.sticky_footer ul.band_list li a{padding: 15px 0 20px; display: inline-block;}
.sticky_footer .right_btn{text-align: right;}
div.select-main{width: 115px;}
div.select-block{width: 115px;}
.finish_band .col-md-6 .col-md-8 {    padding-left: 40px;}

.hero_banner {    height: calc(100vh - 180px); }
.colour_band_color input[type=radio] ~ label {     display: block; }

}

/********************************* ipad landscape #il ********************************/
@media only screen and (min-width : 1001px) and (max-width: 1024px) {
    .sticky_footer ul.band_list {    padding: 15px 0 10px;text-align: center;}
    .sticky_footer ul.band_list li a{padding: 15px 0 20px; display: inline-block;}
    .sticky_footer .pre_btn{margin-bottom: 0px;}
    .sticky_footer .right_btn{text-align: right;}
    .sticky_footer ul.band_list li{    padding: 0 8px 0;}
}
@media only screen and (min-width : 768px) and (max-width: 1100px) {
    .band_list{display: none;}
    .sticky_footer .step.hidden{display: block !important;}
}

@media only screen and (min-width : 1025px) and (max-width: 1200px) {
    .sticky_footer ul.band_list li{    padding: 0 10px 0;}
}

@media only screen and (min-width : 1001px) and (max-width: 1350px) {
    .type_band .row {    margin-left: -15px;    margin-right: -15px;}
    .type_band [class^="col-md"] {    padding-left:15px;    padding-right: 15px;}
}


/* ================================= Small Computer #Sc ================================= */
@media only screen and (min-width : 1300px) {
	
.first_col , .first_li{padding-left:0 !important; margin-left:0 !important}
.last_col , .last_li{padding-right:0 !important; margin-right:0 !important}

}



/* ================================= Large Computer #lc ================================= */
@media screen and (min-width: 1450px) {}

/* IE10 Only CSs */
@media screen and (min-width:0\0) {}

/* ie10, ie11+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}


@media all and (max-height: 400px) {
    .sticky_top .container{height: auto;position: relative;}
    footer .open_footer.sticky_top{overflow-y: scroll;}
}