/* Theme Name: Cyrstals Theme URI: http://crystals.co.uk Author: the WinMedia Team Author URI: https://wordpress.org/ Description: Kareplus Main Branch Theme */ @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800,900'); body{ background-color: #fff; line-height: 18px;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; -webkit-font-smoothing: antialiased;} .container{ } .container.pr{ position: relative;} .col-centered{ float: none; margin: 0 auto;} .padding_top_20{ padding-top: 30px;} a{ color: #000; transition: background-color 300ms ease-out;} .underline{text-decoration: underline;} #wpadminbar{ display: none!important;} .clear{ clear: both;} img{ max-width: 100%; max-height: 100%;} a{ text-decoration: none;} a:hover{ text-decoration: underline; color: #333;} a:active{ text-decoration: none;} .page_left{ position: relative; margin-left: 0px;} .page_left .shadow{ position: absolute; top: 0px; right: 14px;} .page_right{ position: relative;} .page_right .shadow{ position: absolute; top: 0px; left: 15px;} @media (max-width: 1200px){ } @media (max-width: 992px){ .page_right{ display: none;} } @media (max-width: 768px){ body{ padding-top: 0px;} } .convert_mm_to_inches{ position: absolute; z-index: 9; top: 10px; right: 10px; background-color: #000; border-radius: 100px; color: #fff; padding: 5px 10px;} .video_player{ position: absolute; z-index: 9; top: 46px; right: 10px; width: 157px;} @media (max-width: 1200px){ } @media (max-width: 992px){ } @media (max-width: 768px){ .video_player{ /*display: none;*/ position: relative;margin:0 auto;top:0px;width:200px;} } #new_header_options{ background-color: #EDEDED; padding: 10px; margin-bottom: 15px; } #new_header_options .cart_button{ float: right; border-radius: 100px; font-weight: bold; background-color: #fff; padding: 5px 15px; color: #000; text-decoration: none; margin-left: 15px; } #new_header_options .cart_button:hover{ opacity: 0.9;} #new_header_options .vat_button{ padding-top: 4px; float: left; } #new_header_options .vat_button span{ float: left; font-size: 12px; font-weight: bold; padding-top: 3px;} #new_header_options .vat_button .toggler{ overflow: hidden; cursor: pointer; float: left; width: 40px; background-color: #042c5a; border-radius: 100px; height: 20px; overflow: hidden; margin: 0 10px;} #new_header_options .vat_button .toggler .tg{ background-color: #ff0000; height: 20px; width: 20px; border-radius: 100px; } #new_header_options .vat_button .toggler.ex .tg{ float: right; } @media (max-width: 1200px){ } @media (max-width: 992px){ .page_right{ display: none;} } @media (max-width: 768px){ #new_header_options a:first-child { margin-left: 0;} #new_header_options .container{ padding: 0; } } .bottom_message{ display: none; /*position: fixed;*/position: static; top: 0px; left: 0px; right: 0px; background-color: #f21118; color: #fff; padding: 20px; text-align: center; z-index: 2000;} .bottom_message .container{} .modal_text{ font-size: 15px; line-height: 24px;} .modal_text p{ margin-bottom: 20px;} .modal-footer .btn{ padding: 0.438em 1em!important; background-color: #61c600; color: #fff; font-size: 16px; line-height: 16px; font-weight: bold; color: #fff; border: none; text-transform: none; border-radius: 15px; height: 30px; } .form-control{ border-radius: 0px; margin-bottom: 10px;} .form-control.ssb{ margin-bottom: 20px;} .page_title{ font-weight: 300; margin-top: 0px; margin-bottom: 30px;} .entry-title{ background-color: #dedede; padding: 30px 30px; font-size: 24px; text-transform: uppercase; font-weight: bold; margin-bottom: 40px;} .page_form .label{ font-size: 12px; padding: 0px; margin: 0px; color: #333; font-weight: normal;} .page_text .page_form .label{ font-size: 13px;margin-bottom: 5px;} .page_text .page_form textarea{ height: 100px;} .page_text p{ line-height: 24px; margin-bottom: 20px;} .page_text h3{ margin-bottom: 20px;} img{ max-width: 100%;} h1,h2,h3,h4{} .btn{ padding: 20px 30px!important; font-size: 24px; color: #fff;} .btn.btn-default{ border: none; background-color: #333231; color: #fff; padding: 0.438em 1em!important; color: #fff; font-size: 16px; line-height: 16px; font-weight: bold; color: #fff; border: none; text-transform: none; border-radius: 15px; margin-top: 30px; height: 30px;} .btn.btn-primary{ border: none; background-color: #61c600; color: #fff; padding: 0.438em 1em!important; color: #fff; font-size: 16px; line-height: 16px; font-weight: bold; color: #fff; border: none; text-transform: none; border-radius: 15px; margin-top: 30px; height: 30px;} .btn.btn-success{background-color: #61c600; } .configurator_info{ display: none; /*font-size: 13px;*/ font-weight: 300; text-align: left;} .cookies_bar{ position: relative; background-color: #3c3c3c; color: #fff;padding-bottom: 15px;} .cookies_bar .container{ position: relative; } .cookies_bar a{ color: #fff; text-decoration: underline; } .cookies_bar p{ margin: 0px; padding-right: 80px; padding-top: 15px;} .cookies_bar .btn{ position: absolute; top: 10px; right: 0px; margin: 0px; text-decoration: none;} @media (max-width: 768px){ .cookies_bar{ text-align: center; } .cookies_bar p{ padding: 0px; } .cookies_bar .btn{ position: relative; top: 0px; right: 0px; margin: 0px; margin-top: 15px;} } .step{ display: none;} .loading_text{ padding: 30px 0px; text-align: center; color: #999;} #loading_configurator{ padding-top: 300px; padding-bottom: 600px; text-align: center; color: #999; font-size: 14px;} .glass_bkg{ display: inline-block; height: 412px; background-color: #eef1f2; padding: 12px; padding-bottom: 0px; border: solid 1px #d6d5d4; border-bottom: none;} .glass_bkg.np{ background-color: transparent; border: none; padding: 0px;} .glass_bkg.np .glass_main_pic{ margin-top: 12px; margin-left: 0px;} .glass_bkg.np .frame_main_pic{ left: 0px; margin-top: 12px;} .door_frame{} .frame_main_pic{ max-width: 100%; max-height: 100%;} #top_steps_wrap{ display: none;} .top_steps .process_step{ display: none; position: absolute; top: -30px; font-size: 16px; } .top_steps{ position: relative; border-left: solid 1px #cacaca; background-color: #ededed; margin-top: 40px; margin-bottom: 50px;} .top_steps.cart_steps{ margin-bottom: 0px;} .top_steps.cart_steps .box{ cursor: pointer; width: 16.6666%;position: relative;} .top_steps .box{ color: #333; float: left; width: 25%; /*background-image: url(assets/top_box_normal.jpg); background-position: center right; background-repeat: no-repeat;*/} .top_steps.cart_steps .box:after{background-image: url(assets/top_box_normal.jpg);background-position: center right;background-repeat: no-repeat;content: " ";height: 86px;width: 50px;float: left;position: absolute;right: 0px;top: 0px;} .ng-hide{ display: none;} .top_steps .box.active{ color: #fff; /*background-image: url(assets/top_box_active2.png);*/ background-color: #606060;} .top_steps.cart_steps .box.active:after{background-image: url(assets/top_box_active2.png);} .top_steps.cart_steps .box.last:after{display: none;} .top_steps .box.back{/*background-image: url(assets/top_box_active_back.png);*/} .top_steps.cart_steps .box.back:after{background-image: url(assets/top_box_active_back.png);width: 52px;} .top_steps .box.dark{/*background-image: url(assets/top_box_dark.png);*/} .top_steps .box.last{ background-image: none;} .top_steps .box .title{ padding: 33px 13px; font-size: 14px; font-weight: bold;position:relative;border: solid 1px #cacaca;border-left: 0px;} .top_steps .box .title img.green{ float: right; width: 60px;position: absolute;top: -34px;left: 40px;} .top_steps .box .title img.tooltip-info{width: 16px;} .top_steps .box .title .tooltip.bottom .tooltip-arrow{border-bottom-color:#fffcde;top:-2px;border-width:0px 9px 9px;} .top_steps .box .title .tooltip-inner{background-color:#fffcde;color:#696969;font-weight:normal;padding:7px 9px;border-radius:3px;border:1px solid #cfcec7;} .top_steps .box .title .tooltip.in{opacity: 1;} .top_steps .box .numbered{ font-weight: bold; font-size: 17px; padding: 18px 15px; text-align: center;position: absolute;top: -30px;left: 17%;font-family: 'Montserrat', sans-serif;font-size: 39px;font-weight: 900; border-radius:50px;border:1px solid #898989;background-color:#606060;color:#aeaeae;} .top_steps .box.back .numbered{background-color:#e9ad3a;color:#fff;} .top_steps .box .numbered.green{display: none;} @media (max-width: 1200px){ .top_steps .box .title{ padding-left: 10px; font-size: 13px; } } @media (max-width: 768px){ .top_steps .process_step{ display: block;} .top_steps .box .numbered{ display: inline-block;} .top_steps .box{ text-align: center; } .top_steps .box .title{ display: none;} } @media (max-width: 992px){ .top_steps .box .title{ font-size: 9px; padding-left: 10px;} .top_steps .box .title img{ width: 20px; } } .bkg_types_wrap{ position: absolute; left: 0px; top: 0px; background-color: #fff; padding: 10px; padding-right: 0px; z-index: 9; } .bkg_types_wrap.door_canvas{ bottom: 0px; right: 0px; top: auto; left: auto; } .bkg_types_wrap .title{ text-align: center; padding-bottom: 10px; font-size: 12px;} .bkg_types_wrap .bkg_type{ background-position: center bottom; background-size: cover; cursor: pointer; float: left; width: 40px; height:25px; background-color: #e1e1e1; margin-right: 10px;} @media (max-width: 768px){ .bkg_types_wrap{ display: none; } } .top_header_title{} .top_header_title h4{ clear: both; } .top_header_title h3{ cursor: pointer; font-size: 31px;} .top_header_title h3 a{ color: #333;} .top_header_title p{ font-size: 16px; font-weight: normal;} /* =Top Nav #1 ----------------------------------------------- */ #top_nav1{ display: none; position: relative; border: solid 1px #e1e1e1; margin-top: 30px; padding: 30px; border-radius: 5px; margin-bottom: 50px;} #top_nav1 .btn{ position: absolute; top: 22px; font-size: 18px; font-weight: bold; color: #fff; border: none; text-transform: uppercase; } #top_nav1 .btn:hover{ opacity: 0.9;} #top_nav1 .back{ background-color: #333231; left: 30px;} #top_nav1 .next{ background-color: #34ac5b; right: 30px} #top_nav1 h3{ font-family: 'Nothing You Could Do', cursive; text-align: center; margin: 0px; margin-bottom: 10px; font-weight: 300; font-size: 34px;} #windows_step_1{margin-bottom: 30px; } #windows_step_1 .type_tabs{ border: solid 1px #e1e1e1; width: 300px; margin: 0px auto; margin-top: 25px; margin-bottom: 10px; } #windows_step_1 .type_tabs .trg{ width: 50%; margin: 0px; padding: 15px 5px; float: left; color: #333; font-size: 18px; text-align: center; cursor: pointer; } #windows_step_1 .type_tabs .trg.active{ background-color: #e1e1e1 } #windows_step_1 .doors_btn{ border-left: solid 1px #e1e1e1; } #windows_step_1 .box{ text-align: center; display: inline-block; /*width:33.3%;*/ float: left; padding: 0px 2%px; /*margin-bottom: 50px;*/ min-height: 272px;} #windows_step_1 .box .pic{ /*border: solid 3px #fff;*/ cursor: pointer; background-size: cover; /*padding: 10px;*/ display: block; margin: 0px auto;margin-bottom:10px;} #windows_step_1 .box .pic.active{/*border: solid 3px #61c600;*/ border-radius: 5px;} #windows_step_1 .box .pic1.pvcu_windows:hover:after,#windows_step_1 .box .pic1.pvcu_windows.active:after{content: " ";display: block;position: absolute;width: 100%;height: 100%;top: 0px;background: rgba(134,154,142,0.9);-webkit-transform: scaleY(1);transform: scaleY(1);z-index: 2;} #windows_step_1 .box .pic1.pvcu_windows:hover .info,#windows_step_1 .box .pic1.pvcu_windows.active .info{background-color: transparent;} #windows_step_1 .box .pic1.pvcu_windows:after {content: " ";-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;} #windows_step_1 .box .pic2.vertical_sliding_windows:hover:after,#windows_step_1 .box .pic2.vertical_sliding_windows.active:after{content: " ";display: block;position: absolute;width: 100%;height: 100%;top: 0px;background: rgba(255,255,255,0.9);-webkit-transform: scaleY(1);transform: scaleY(1);z-index: 2;} #windows_step_1 .box .pic2.vertical_sliding_windows:hover .info,#windows_step_1 .box .pic2.vertical_sliding_windows.active .info{background-color: transparent;} #windows_step_1 .box .pic2.vertical_sliding_windows:after {content: " ";-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;} #windows_step_1 .box .pic1.composite_doors:hover:after,#windows_step_1 .box .pic1.composite_doors.active:after{content: " ";display: block;position: absolute;width: 100%;height: 100%;top: 0px;background: rgba(95,129,162,0.9);-webkit-transform: scaleY(1);transform: scaleY(1);z-index: 2;} #windows_step_1 .box .pic1.composite_doors:hover .info,#windows_step_1 .box .pic1.composite_doors.active .info{background-color: transparent;} #windows_step_1 .box .pic1.composite_doors:after {content: " ";-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;} #windows_step_1 .box .pic1.lantern_roof:hover:after,#windows_step_1 .box .pic1.lantern_roof.active:after{content: " ";display: block;position: absolute;width: 100%;height: 100%;top: 0px;background: rgba(255,255,255,0.9);-webkit-transform: scaleY(1);transform: scaleY(1);z-index: 2;} #windows_step_1 .box .pic1.lantern_roof:hover .info,#windows_step_1 .box .pic1.lantern_roof.active .info{background-color: transparent;} #windows_step_1 .box .pic1.lantern_roof:after {content: " ";-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;} #windows_step_1 .box .pic1.aluminium_pvcu_bi_fold_doors:hover:after,#windows_step_1 .box .pic1.aluminium_pvcu_bi_fold_doors.active:after{content: " ";display: block;position: absolute;width: 100%;height: 100%;top: 0px;background: rgb(139,168,183);-webkit-transform: scaleY(1);transform: scaleY(1);z-index: 2;} #windows_step_1 .box .pic1.aluminium_pvcu_bi_fold_doors:hover .info,#windows_step_1 .box .pic1.aluminium_pvcu_bi_fold_doors.active .info{background-color: transparent;} #windows_step_1 .box .pic1.aluminium_pvcu_bi_fold_doors:after {content: " ";-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;} #windows_step_1 .box .pic1.pvc_panel_doors:hover:after,#windows_step_1 .box .pic1.pvc_panel_doors.active:after{content: " ";display: block;position: absolute;width: 100%;height: 100%;top: 0px;background: rgba(255,255,255,0.9);-webkit-transform: scaleY(1);transform: scaleY(1);z-index: 2;} #windows_step_1 .box .pic1.pvc_panel_doors:hover .info,#windows_step_1 .box .pic1.pvc_panel_doors.active .info{background-color: transparent;} #windows_step_1 .box .pic1.pvc_panel_doors:after {content: " ";-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;} #windows_step_1 .box .pic1.french_doors:hover:after,#windows_step_1 .box .pic1.french_doors.active:after{content: " ";display: block;position: absolute;width: 100%;height: 100%;top: 0px;background: rgba(167,190,11,0.9);-webkit-transform: scaleY(1);transform: scaleY(1);z-index: 2;} #windows_step_1 .box .pic1.french_doors:hover .info,#windows_step_1 .box .pic1.french_doors.active .info{background-color: transparent;} #windows_step_1 .box .pic1.french_doors:after {content: " ";-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;} #windows_step_1 .box .pic1.pvc_doors:hover:after,#windows_step_1 .box .pic1.pvc_doors.active:after{content: " ";display: block;position: absolute;width: 100%;height: 100%;top: 0px;background: rgba(162,95,114,0.9);-webkit-transform: scaleY(1);transform: scaleY(1);z-index: 2;} #windows_step_1 .box .pic1.pvc_doors:hover .info,#windows_step_1 .box .pic1.pvc_doors.active .info{background-color: transparent;} #windows_step_1 .box .pic1.pvc_doors:after {content: " ";-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;} #windows_step_1 .box .pic1.patio_doors:hover:after,#windows_step_1 .box .pic1.patio_doors.active:after{content: " ";display: block;position: absolute;width: 100%;height: 100%;top: 0px;background: rgba(141,151,153,0.9);-webkit-transform: scaleY(1);transform: scaleY(1);z-index: 2;} #windows_step_1 .box .pic1.patio_doors:hover .info,#windows_step_1 .box .pic1.patio_doors.active .info{background-color: transparent;} #windows_step_1 .box .pic1.patio_doors:after {content: " ";-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;} #windows_step_1 .box1.bi-fold-door .pic1{position: relative;} #windows_step_1 .box1.bi-fold-door:hover .pic1:after,#windows_step_1 .box1.bi-fold-door.active .pic1:after{content: " ";display: block;position: absolute;width: 100%;height: 100%;top: 0px;background: rgba(128,196,181,0.9);-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);z-index: 2;-webkit-transform: scaleX(1);transform: scaleX(1);} #windows_step_1 .box1.bi-fold-door .pic1:after {content: " ";-webkit-transform: scaleX(0);transform: scaleX(0);-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;} /*#windows_step_1 .box1.bi-fold-door:hover .info button,#windows_step_1 .box1.bi-fold-door.active .info button{background-color: transparent;}*/ #windows_step_1 .box2.aluminium_pvcu_doors_and_fixed_panels .pic1{position: relative;} #windows_step_1 .box2.aluminium_pvcu_doors_and_fixed_panels:hover .pic1:after,#windows_step_1 .box2.aluminium_pvcu_doors_and_fixed_panels.active .pic1:after{content: " ";display: block;position: absolute;width: 100%;height: 100%;top: 0px;background: rgba(63,63,63,0.9);-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);z-index: 2;-webkit-transform: scaleX(1);transform: scaleX(1);} #windows_step_1 .box2.aluminium_pvcu_doors_and_fixed_panels .pic1:after {content: " ";-webkit-transform: scaleX(0);transform: scaleX(0);-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;} #windows_step_1 .box .pic .text{ color: #fff; font-size: 34px; font-weight: bold; line-height: 35px; padding-top: 50px; text-align: center;} #windows_step_1 .box .pic .real_pic{ border-radius: 5px; -webkit-box-shadow: 1px 0 10px 0 #333; box-shadow: 1px 0 10px 0 #333;} #windows_step_1 .box .pic1 .text{ padding-top: 120px;} #windows_step_1 .box .pic2 .text{ padding-top: 80px;} #windows_step_1 .box .info{} #windows_step_1 .box .info p{ color: #777;} #windows_step_1 .box .info h3{ font-size: 16px; font-weight: bold; min-height: 35px;} #windows_step_1 .box .info .btn{ padding: 0.438em 1em!important; background-color: #888; color: #fff; font-size: 16px; line-height: 16px; font-weight: bold; color: #fff; border: none; text-transform: none; border-radius: 15px; margin-top: 30px; height: 30px; } #windows_step_1 .box .info .btn:hover{ opacity: .7;} .bottom_partners{ margin: 0px auto; text-align: center; clear: both; border:none; border-radius: 15px; padding: 30px 0px; margin-bottom: 30px;} .bottom_partners h3{ margin: 0px; margin-bottom: 20px; font-size: 16px; text-align: left; font-weight: 300;} @media (max-width: 992px){ #windows_step_1 .box .info .btn{ font-size: 12px; } } @media (max-width: 768px){ #windows_step_1 .box .pic{ height: 120px; } #windows_step_1 .box .info{ min-height: 77px; } #windows_step_1 .box .info .btn{ margin: 15px 10px; font-size: 14px; } #windows_step_1 .box{ width: 50%; min-height: 122px; margin-bottom: 20px;} #windows_step_1 .box .info .btn{ white-space: normal; height: auto; } } .bottom_buttons{ float: left; clear: both; width: 100%; background-color: #e1e1e1; border-radius: 5px; padding: 15px; text-align: right;} .bottom_buttons .back_btn{ margin: 0px!important; float: left; } .bottom_buttons .next_btn{ margin: 0px!important; } @media (max-width: 768px){ .bottom_buttons{ text-align: center; } .bottom_buttons .back_btn{ float: none; } .bottom_buttons .btn{ margin: 0 10px!important; } } #windows_step_2{ text-align: center; padding-top: 50px;} #windows_step_2 .box .btn:hover{ opacity: .7;} #windows_step_2 .box .pic{ background-size: cover; background-position: center center; display: block; width: 300px; height: 300px; border: solid 15px #919191; background-color: #fff; margin: 0px auto; border-radius: 450px;} #windows_step_2 .box .pic:hover{border-color: #34ac5b;} #windows_step_2 .box .pic.pic1{ background-image: url(assets/windows_profile_type_1.jpg);} #windows_step_2 .box .pic.pic2{ background-image: url(assets/windows_profile_type_2.jpg);} #windows_step_2 .box .pic.pic3{ background-image: url(assets/windows_profile_type_3.jpg);} #windows_step_2 .bottom{ margin: 0px auto; margin-top: 50px; width: 75%; text-align: center; clear: both; border: solid 1px #e1e1e1; border-radius: 15px; padding: 30px; margin-bottom: 30px;} #windows_step_2 .bottom h3{font-family: 'Nothing You Could Do', cursive; margin: 0px; margin-bottom: 20px; text-align: center; font-weight: 300;} #windows_step_3{ text-align: center;} #windows_step_3 .box{ margin-bottom: 30px;} #windows_step_3 .box .pic{ cursor: pointer; display: block; height: 200px; border: solid 2px #fff; background-color: #fff; margin: 0px auto; margin-bottom: 30px; border-radius: 6px; padding: 30px;} #windows_step_3 .box .pic:hover{border: 3px solid #34ac5b;} .simple_frame{ height: 400px; position: relative; display: inline-block; background-size: cover; background-position: center center;} .simple_frame .glass_main_pic{ position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 2;} .simple_frame .frame_main_pic{position: absolute; top: 0px; left: 0px; height: 100%; z-index: 3;} .simple_frame .glass_placeholder{ opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0.5; position: relative; top: auto; bottom: auto; left: auto; right: auto;} #windows_step_4{ text-align: center; padding-top: 50px;} #windows_step_4 .bottom_buttons{ margin-bottom: 20px; } #windows_step_4 .box{ margin-bottom: 30px; min-height: 300px;} #windows_step_4 .box.active .pic{ border: 3px solid #61c600; } #windows_step_4 .box.active .btn{ background-color: #61c600; } #windows_step_4 .box .pic{ cursor: pointer; display: block; height: 200px; border: solid 2px #fff; background-color: #fff; margin: 0px auto; margin-bottom: 15px; border-radius: 6px; padding: 30px;} #windows_step_4 .box .pic:hover{border: 3px solid #61c600;} #windows_step_4 .box.selected .pic{border: 3px solid #34ac5b;} #windows_step_4 .box .price_from{ font-weight: bold; color: #61c600; } #windows_step_4 .box .description{ display: inline-block; padding: 0.438em 1em!important; color: #fff; font-size: 16px; line-height: 16px; font-weight: bold; color: #fff; border: none; text-transform: none; border-radius: 15px; margin-top: 6px; height: 30px;} #windows_step_4 .box:hover .description{ background-color: #61c600!important; } @media (max-width: 768px){ #windows_step_4 .box{ min-height: 236px; margin-bottom: 0; } #windows_step_4 .box .pic{ height: 116px; padding: 0; } } #windows_step_5{ padding-top: 30px;} #windows_step_5 .main{ height: 619px; background-color: #e1e1e1; margin-bottom: 30px; background-image: url(assets/window_canvas_bkg.jpg); background-size: cover; border-radius: 5px;} #windows_step_5 .box{ margin-bottom: 10px; min-height: 210px;} #windows_step_5 .box.round{ border-radius: 6px; overflow: hidden;} #windows_step_5 .box h3{ text-align: left; border-bottom: solid 1px #e1e1e1; margin: 0px; padding: 20px 0px; font-size: 16px;} #windows_step_5 .box .info{ padding: 20px 0px;} #design_help_note { width: 100%; font-size: 14px; margin: 0px auto; line-height: 23px;} #windows_step_5 .box .info .help_link{color: #333; text-decoration: underline; text-align: left;} #windows_step_5 .box .info ul{ margin: 0px; list-style: none; padding: 0px;} #windows_step_5 .box .info ul li{ margin: 0px; padding: 0px; margin-bottom: 15px;} #windows_step_5 .box .info ul.small li{ font-size: 12px; color: #666!important;} #windows_step_5 .box .info ul li .name{ float: left; font-weight: normal;} #windows_step_5 .box .info ul li .full_name{ font-weight: bold;} #windows_step_5 .box .info ul li .value{ float: right;} #windows_step_5 .box .info ul li .full_value{ clear: both;} #windows_step_5 .box.end .btn{ padding: 9px 39px!important; display: block; font-size: 18px; width: 100%; border: none; border-radius: 0px; margin-bottom: 15px;} #windows_step_5 .box.end .btn:hover{ opacity: .9;} #windows_step_5 .box.end .next_btn{ margin-bottom: 15px!important; float: none; } #windows_step_5 .box.end p{ text-align: center; padding: 20px; font-size: 12px; color: #999;} #windows_step_5 .help_box a{ position: relative; display: grid; padding: 23px; color: #fff; font-size: 16px; margin-bottom: 30px; padding-left: 80px; min-height: 69px; line-height: 19px;min-height:84px;font-weight: bold;align-content:center;} #windows_step_5 .help_box a img{ position: absolute; top: 20px; left: 20px; margin-right: 9px; } #windows_step_5 .help_box a.h1{ /*background-color: #f5f5f5; border: solid 1px #d7d7d7; color: #333;*/background:url("assets/info_icon.png") no-repeat;background-size: 100% 100%;} #windows_step_5 .help_box a.h2{ /*background-color: #49acc1; border: solid 1px #2c8b9f;*/background:url("assets/info_icon2.png") no-repeat;background-size: 100% 100%;} #windows_step_5 .help_box a.h3{ /*background-color: #4a8bc2; border: solid 1px #2a6698;*/background:url("assets/info_icon3.png") no-repeat;background-size: 100% 100%;} #windows_step_5 .btn{ border-radius: 50px!important; font-size: 18px; padding: 9px 39px!important; margin-right: 30px; line-height: 9px;} .footer-info {background-color: #e0e5ef;border: 1px solid #a0a0a0;border-radius: 2px;padding:25px 70px 25px 120px;background:url("assets/exclamation-mark.png") no-repeat #e0e5ef;background-position:35px 50%;color:#7e7d7d;margin-left:-15px;margin-right:-15px;} .footer-info.footer-home{margin-left: 0px;margin-right:23px;} @media (max-width: 992px){ #windows_step_5 .help_box a{ font-size: 12px; line-height: 15px; } } @media (max-width: 768px){ #windows_step_5 .help_box a{ line-height: 29px; } #windows_step_5 .btn{ margin-right: 0px; } #windows_step_5 .box{ min-height: 0px; } #design_help_note { width: 100%;} } .show_outside_door_colours.active,.show_inside_door_colours.active{ color: #000;} #windows_step_6{} #windows_step_6 .bottom_buttons{ margin-bottom: 20px; } #windows_step_6 .tabs{ height: 49px; width: 100%; display: table; border-radius: 0px; margin-bottom: 15px; margin-top: 20px;border-bottom: solid 1px #d0cbc5; } #windows_step_6 .tabs a{ min-width: 120px; display: inline-block; background-color: #f3efec; border: solid 1px #d0cbc5; padding: 15px; color: #333; margin-right: 5px; border-bottom: none; text-align: center;} #windows_step_6 .tabs a span{ font-weight: bold; color: #ff0000; } #windows_step_6 .tabs a:hover{ background-color: #f1f1f1;} #windows_step_6 .tabs a.active{ background-color: #fff; color: #333; margin-bottom: -1px; border-bottom: solid 1px #fff;} #windows_step_6 .flip{ cursor: pointer; color: #333; display: inline-block; width: 100%; line-height: 37px;} #windows_step_6 .zoom{ cursor: pointer; color: #333; display: inline-block; width: 100%;} #windows_step_6 .flip:hover{ opacity: 0.5;} #windows_step_6 .zoom:hover{ opacity: 0.5;} #windows_step_6 .flip img, #windows_step_6 .zoom img{ margin-right: 15px; margin-bottom: 20px; float: left;} .color_list{ margin: 0px; padding: 0px; margin-right: -15px; margin-left: -15px; padding-top: 0px;} .color_list li{position: relative; width: 20%; float: left;list-style: none; padding-right: 15px; padding-left: 15px;} .color_list.extras_list li{min-height: 200px;} .color_list li .box{ background-size: cover; cursor: pointer; height: 80px; border-radius: 5px; border: solid 1px #e1e1e1; margin-bottom: 15px; background-size: cover; background-position: center center; text-align: center;} .color_list li .bigger_picture{ display: none; position: absolute; top: -30px; left: 210px; z-index: 100; height:300px;} .color_list li .bigger_picture img{ height: 300px; max-height: 300px; width: 121px; max-width: 121px; text-align: left; box-shadow: 2px 2px 4px 3px rgba(0,0,0,0.1);} .color_list li:hover .bigger_picture{ display: block; } .color_list li .box img{ max-width: 100%!important; max-height: 100%!important;} .color_list li.selected .box{ border: solid 5px #999;} .color_list li .title_b{ min-height: 60px; font-size: 12px;} .color_list li .box.white{ background-color: #fff; background-image: url(assets/color1.jpg);} .color_list li .box.red{ background-color: #a91212; background-image: url(assets/color2.jpg);} .color_list li .box.green{ background-color: #0b6e41; background-image: url(assets/color3.jpg);} .color_list li .box.blue{ background-color: #25567d; background-image: url(assets/color4.jpg);} .color_list li .box.yellow{ background-color: #f8e167; background-image: url(assets/color5.jpg);} .color_list li .box.walnut{ background-color: #382713; background-image: url(assets/color6.jpg);} .color_list li .box.mahogany{ background-color: #5d2424; background-image: url(assets/color7.jpg);} .color_list li .box.light_oak{ background-color: #54522d; background-image: url(assets/color8.jpg);} .color_list li .box.cream{ background-color: #beb799; background-image: url(assets/color9.jpg);} .color_list li .box.black{ background-color: #000000; background-image: url(assets/color10.jpg);} .color_list.full li .box img{width: 100%; height: 100%;} #windows_step_6 .btn{ border-radius: 50px!important; font-size: 18px; padding: 9px 39px!important; margin-right: 30px; line-height: 8px;} @media (max-width: 992px){ .color_list li .box{ height: 56px; } #windows_step_6 .tabs a{ min-width: 82px; } } @media (max-width: 768px){ #windows_step_6 .btn{ margin: 0px; } #windows_step_6 .tabs a{ min-width: 1px; padding: 15px 4px; } .color_list li{width: 33.3%;} } #windows_step_7 .cart_table{ border: solid 1px #e1e1e1; margin-bottom: 50px; border-radius: 0px;} #windows_step_7 .cart_table a{ color: #333; text-decoration: underline; } #windows_step_7 .cart_table .more_info{ display: none;} #windows_step_7 .cart_table .row{ margin: 0px; display: table; width: 100%;} #windows_step_7 .cart_table .head{ clear: both;color: #fff;} #windows_step_7 .cart_table .head .th{ background-color: #323231; border-color: #323231;} #windows_step_7 .cart_table .item{ border-bottom: solid 1px #e1e1e1; clear: both;} #windows_step_7 .cart_table .item:last-child{ border-bottom: none; } #windows_step_7 .cart_table .th,#windows_step_7 .cart_table .td{ border-right: solid 1px #fff; padding: 20px 15px; text-align: center; } #windows_step_7 .cart_table .th:last-child,#windows_step_7 .cart_table .td:last-child{ border-right: none!important;} #windows_step_7 .cart_table .th:first-child,#windows_step_7 .cart_table .td:first-child{ padding-left: 30px;} #windows_step_7 .cart_table .td{ min-height: 130px;font-weight: normal; padding-bottom: 30px;} #windows_step_7 .cart_table .td img{ max-height: 95px;} #windows_step_7 .cart_table .td.price{ font-size: 20px; } #windows_step_7 .cart_table .th{ border-bottom: solid 1px #e1e1e1; padding-top: 20px; padding-bottom: 20px;} #windows_step_7 .cart_table .bottom{ background-color: #f5f2f1; padding: 15px; border-top: solid 1px #e1e1e1; text-align: right; } #windows_step_7 .cart_table .bottom .print_cirlce{ text-align: center; width: 30px; height: 30px; display: inline-block; background-color: #000; border-radius: 90px;} #windows_step_7 .cart_table .bottom .print_cirlce .glyphicon{ margin: 0px; font-size: 16px; color: #fff; margin-top: 6px;} #windows_step_7 .cart_table .bottom a{ float: right; color: #333; text-decoration: none;} #windows_step_7 .cart_table .bottom a span.glyphicon{ margin-left: 15px; font-size: 30px; color: #61c600; } #windows_step_7 .cart_table .bottom a span.text{ font-size: 16px; padding-top: 0px; margin-top: 10px; float: left;} #windows_step_7 .total_box{ width: 460px;} #windows_step_7 .message_box{ float: left; width: 415px;} .quantity_update{ width: 94px; margin: 0px auto; } .quantity_update .button{ cursor: pointer; float: left; border: solid 1px #e1e1e1; width: 30px; height: 30px; padding-top: 6px; color: #999; } .quantity_update .button.left{ border-radius: 5px 0px 0px 5px; } .quantity_update .button.right{ border-radius: 0px 5px 5px 0px; } .quantity_update .button:hover{ color: #000; background-color: #f1f1f1; } .quantity_update .form-control{ float: left; border: solid 1px #e1e1e1; border-left: none; border-right: none; width: 30px; height: 30px; padding: 0px; text-align: center; line-height: 29px;} .quantity_update .form-control:focus{ border: solid 1px #e1e1e1; border-left: none; border-right: none; outline: none; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } @media (max-width: 768px) { /* Make the links clickable on mobile: */ .quantity_update { min-height: 28px; } } .total_box{margin-bottom: 30px; float: right; } .total_box .left{ border-bottom: solid 1px #e1e1e1; padding-bottom: 20px; margin-bottom: 30px; } .total_box .left h3{ float: left; margin: 0px; margin-right: 20px; margin-top: 5px;} .total_box .left .price{ float: right; font-size: 29px; font-weight: bold; margin-top: 6px;} .total_box .right{} .total_box .right p{ margin-bottom: 30px;} .total_box .right .price{ float: left; margin-top: 23px; margin-right: 20px;} .total_box .right .or{ display: none; float: left; margin: 0px 20px; margin-top: 24px;} .total_box .right .btn{ border-radius: 50px!important; float: left;padding: 0.438em 1em!important; color: #fff; font-size: 16px; line-height: 16px; font-weight: bold; color: #fff; border: none; text-transform: none; border-radius: 15px; height: 30px; margin-right: 20px;} .total_box .right .btn:last-child{ margin-right: 0px;} .breakdown_table{} .breakdown_table .val{ width: 120px; } @media (max-width: 992px){ #windows_step_7 .message_box{ width: 255px;} } @media (max-width: 768px){ .total_box .left .price{ float: left; } #windows_step_7 .message_box{ width: 100%;} #windows_step_7 .total_box{ width: auto;} #windows_step_7 .cart_table .head{ display: none;} #windows_step_7 .cart_table .td{ margin-bottom: 0px; min-height: 0px;} #windows_step_7 .cart_table .th, #windows_step_7 .cart_table .td{ padding: 10px;} #windows_step_7 .cart_table .th:first-child, #windows_step_7 .cart_table .td:first-child{ padding-left: 0px; padding-bottom: 0px;} } #windows_step_8 {} #windows_step_8 .box{ border-radius: 5px; padding: 0px; margin-bottom: 50px;} #windows_step_8 .box h3{ margin: 0px; margin-bottom: 20px; color: #000;} #windows_step_8 .box form{} #windows_step_8 .box form label{} #doors_canvas{ height: 619px; background-color: #e1e1e1; margin-bottom: 30px; background-image: url(assets/window_canvas_bkg.jpg); background-size: cover; border-radius: 5px; position: relative;} .selected_product_description{ background-color: #e1e1e1; margin-bottom: 30px; color: #333; text-align: center; padding: 10px;} #windows_canvas{ height: 619px; background-color: #e1e1e1; background-size: cover; border-radius: 0px; position: relative; margin-top: 30px;} #windows_canvas.outside{background-image: url(assets/window_canvas_bkg.jpg);} #windows_canvas.outside.grey{ background-image: url('assets/greymat.jpg'); background-size: cover;} #windows_canvas.inside{background-image: url(assets/window_canvas_bkg2.jpg);} #windows_canvas.door_canvas{ height: 650px;} #windows_canvas .guide_btn{ z-index: 4; width: 59px; height: 63px; background-image: url(assets/guide_btn.png); bottom: 20px; left: 20px; cursor: pointer; position: absolute; } #windows_canvas .overlay{ z-index: 4; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: #000; opacity: .6;} #windows_canvas .measurement{ z-index: 5; position: absolute; font-size: 13px; padding:3px; width: 250px; background-color: #fff; border-radius: 5px; border:solid 1px #e1e1e1; text-align: center;} #windows_canvas .measurement .mm_text{ position: absolute; bottom: 12px; right: 60px; font-size: 16px; font-weight: bold; } #windows_canvas .measurement input{ color: #61c600; border: none; width: 100%; height: 40px; text-align: center; font-size: 24px;} #windows_canvas .measurement .input-group{ margin: 10px; margin-top: 0px; } #windows_canvas .measurement .input-group input{ height: 30px; border: solid 1px #e1e1e1; border-right:none; border-radius: 50px 0 0 50px; } #windows_canvas .measurement .input-group-btn button{ margin-top: 0px; } #windows_canvas .measurement input.red{ color: #f21118; } #windows_canvas .measurement label{ font-weight: normal;} #windows_canvas .measurement.width{ left: 50%; margin-left: -125px; top: 10px;z-index: 6;} #windows_canvas .measurement.height{ top: 50%; margin-left: -50px; right: 30px;} #windows_canvas .measurement.door_height_field{ margin-left: -125px; left: 50%; top: 16%;} #windows_canvas .measurement.door_height_field.door{ right: 153px; top: 16%;} #windows_canvas .measurement.sec_option{ left: 50%!important; margin-left: -125px;} #windows_canvas .sec_option.width{ top: 20%; } #windows_canvas .sec_option.height{ top: 40%; } #windows_canvas .item{ text-align: center; width: 80%; margin-left: 10%; height: 400px; position: absolute; top: 140px;} #windows_canvas .item.door{bottom: 12px; top: auto;} #windows_canvas .item.door .glass_bkg{ position: relative;} #windows_canvas .item.door .glass_bkg .glass_main_pic{ width: 168px; height: 400px; } #windows_canvas .item.door .glass_bkg .frame_main_pic{ position: absolute; bottom: 0px; left: 0px; width: 168px; height: 400px;} #windows_canvas .buttons{ z-index: 5; color: #fff; text-align: center; position: absolute; bottom: 100px; left: 0px; right: 0px;} #windows_canvas .buttons h3{ font-family: 'Nothing You Could Do', cursive; padding-bottom: 20px; font-size: 30px;} #windows_canvas .top_text{ z-index: 5; color: #fff; text-align: center; position: absolute; top: 70px; left: 0px; right: 0px; font-family: 'Nothing You Could Do', cursive; font-size: 30px;} #windows_canvas .buttons .btn{ padding: 20px 30px!important; font-size: 24px; color: #fff; margin: 0 5px;} #windows_canvas .door_opening_btn{ border: none;} #windows_canvas .door_opening_btn.active{ border: solid 3px #fff;} @media (max-width: 1200px){ #windows_canvas .measurement.door_height_field.door{ right: 103px;} } @media (max-width: 992px){ #windows_canvas .measurement.door_height_field.door{ right: 49px; } #windows_canvas .measurement.door_height_field{ right: 15px; } } @media (max-width: 768px){ #windows_canvas .measurement.door_height_field.door{ top: 0px;} #windows_canvas{ padding-top: 2px; height: 649px;} #windows_canvas .measurement{ width: 100%; margin: 5px;} #windows_canvas .measurement.width,#windows_canvas .measurement.height{position: relative; left: 0%; margin: 15px; top: 0px; right: auto; width: auto;} #windows_canvas .item { top: 250px; /* gogi */ } } #footer{ background-color: #EDEDED; padding: 20px 0px; padding-bottom: 60px;} #footer .links{ padding-bottom: 20px;} #footer .links a{ color: #444;} #footer .links a:hover{ text-decoration: underline;} #footer .links span{ padding: 0px 10px;} #footer .terms{ font-size: 12px;} #site_header{ padding-top: 30px; padding-bottom: 30px;} #site_header .top_links{padding-top: 10px; color: #ccc;} #site_header .top_links a{ color: #f90;} #site_header h3{ font-weight: 300; font-size: 18px; padding-top: 20px;} .header_cart_wrap{} .header_cart_wrap .item{ text-decoration: none; border-radius: 999px; padding: 5px 15px; background-color: #ccc; display: inline-block; margin-top: 10px;} .account_wrap{ padding-top: 40px;} .account_buttons{ margin-bottom: 10px;} .account_buttons .btn{ border-radius: 50px; padding: 8px 40px!important; font-size: 18px;} .account_buttons .btn:hover{ opacity: .8;} #windows_step_1 .box .pic{position:relative;} .portfolio{bottom:0px;opacity: 0.9;position: absolute;padding:20px;/*margin: 0 10px;*/margin-left: 0px;z-index: 999;} .portfolio button{background: none;border: none;font-size: 40px;color: #fff;text-transform: uppercase;line-height: 40px;text-align: left;font-family: 'Montserrat', sans-serif;margin-bottom:20px;font-weight:bold;} .portfolio span{font-family: 'Montserrat', sans-serif;font-size:14px;color:#fff;text-transform:uppercase;font-weight:bold;} .portfolio1{background-color:#869a8e;} .portfolio2 button{color:#7e7d7d !important;} .portfolio2 span{color:#7e7d7d;} .portfolio3{background-color:#5f81a2;} .portfolio4 button{color:#368596 !important;} .portfolio4 span{color:#368596;} .portfolio5{background-color:#a7be0b;} .portfolio5 button{font-size:39px;} .portfolio7{background-color:#8ba8b7;} .portfolio8{background-color:#8ba8b7;} #windows_step_1 .box1{width:65.5%;min-height:auto;float:left;margin-top:9px;overflow: hidden;} #windows_step_1 .box1 img{ /*margin-left: 13px;*/} #windows_step_1 .box1 .pic1{float:left;} #windows_step_1 .box1 .info{/*float:right;margin-left:-10px;*/} #windows_step_1 .box1 .info button{background: #80c4b5;border: none;font-size: 40px;color: #fff;text-transform: uppercase;line-height: 40px;text-align: left;font-family: 'Montserrat', sans-serif;font-weight:bold;padding: 24px 12px !important;border-radius: unset;width:340px;height:177px;} #windows_step_1 .box1 .info button span{font-size:14px;} #windows_step_1 .box2{width:100%;min-height:auto;/*padding-left: 3px;*/padding-right: 23px;margin-top: 10px;} #windows_step_1 .box2 .pic1{float:left;} #windows_step_1 .box2 .info button{background: #3f3f3f;border: none;font-size: 40px;color: #fff;text-transform: uppercase;line-height: 40px;text-align: left;font-family: 'Montserrat', sans-serif;font-weight:bold;padding: 24px 30px !important;height:178px;} #windows_step_1 .box2 .info button span{font-size:14px;} #windows_step_1 .box2 .info{background: #3f3f3f;} .portfolio7{background-color:#a25f72} .column1, .column2, .column3{width:33.3%;float:left;} #scroll_for_more{z-index:11111;} @media (max-width: 375px){ .column1, .column2, .column3{width: 100%;float: none;} .portfolio button{font-size: 30px;line-height: 30px;} #windows_step_1 .column1 .box,#windows_step_1 .column2 .box,#windows_step_1 .column3 .box{width: 100%;} #windows_step_1 .column1 .box .pic,#windows_step_1 .column2 .box .pic,#windows_step_1 .column3 .box .pic{height: auto;} #windows_step_1 .box1{width: 100%;} #windows_step_1 .box1 .info button{width: 100%;} #windows_step_1 .box2{padding-right: 0px;} #windows_step_1 .box2 .info button{font-size: 20px;line-height: 20px;} #windows_step_1 .box2 .info button span{font-size: 13px;} #windows_step_1 .box2 .info button{height: 108px;} .top_steps.cart_steps{display: none;} .footer-info.footer-home{margin-right: 0px;padding: 20px 20px 20px 115px;} .footer-info{padding: 20px 20px 20px 115px;} } @media (min-width: 376px) and (max-width: 768px){ .column1, .column2, .column3{width: 354px;float: none;margin:0 auto;} .portfolio button{font-size: 30px;line-height: 30px;} #windows_step_1 .column1 .box,#windows_step_1 .column2 .box,#windows_step_1 .column3 .box{width: 354px;} #windows_step_1 .column1 .box .pic,#windows_step_1 .column2 .box .pic,#windows_step_1 .column3 .box .pic{height: auto;} #windows_step_1 .box1{width: 354px;margin:0 auto;float: none;} #windows_step_1 .box1 .info button{width: 100%;} #windows_step_1 .box2{padding-right: 0px;width:354px;float: none;margin: 0 auto;margin-top:30px;} #windows_step_1 .box2 .info button{font-size: 20px;line-height: 20px;} #windows_step_1 .box2 .info button span{font-size: 13px;} #windows_step_1 .box2 .info button{height: 108px;} .top_steps.cart_steps{display: none;} .footer-info.footer-home{margin-right: 0px;padding: 20px 20px 20px 115px;} .footer-info{padding: 20px 20px 20px 115px;} } @media (min-width: 769px) and (max-width: 1200px){ .portfolio{padding:10px;} .portfolio button{font-size:26px;line-height:26px;margin-bottom:0px;} .portfolio span{font-size:11px;} #windows_step_1 .box{margin-right:10px;} #windows_step_1 .box1{margin-top:5px;} #windows_step_1 .box1 .info button{ font-size: 26px;line-height: 26px;width: 217px; height: 177px;} #windows_step_1 .box1 .info button span {font-size:9px;} #windows_step_1 .box{min-height:241px;} #windows_step_1 .box2 .info button{font-size:26px;line-height:26px;} } @media (min-width: 769px) and (max-width: 992px){ #windows_step_1 .box1 .pic1 {width:53%;} #windows_step_1 .box1 .info button {width: 219px;height: 112px;} #windows_step_1 .box2 .info{float:right;} #windows_step_1 .box2 .info button {font-size: 20px;line-height: 23px; padding: 24px 18px !important;} #windows_step_1 .box2 .info button span {font-size: 12px;} } /*.masonry { margin: 1.5em 0; padding: 0; -moz-column-gap: 1.5em; -webkit-column-gap: 1.5em; column-gap: 1.5em; font-size: .85em; } .box,.box1,.box2 { display: inline-block; background: #fff; padding: 1.5em; margin: 0 0 1.5em; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.18); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } */ .vector-section{margin-bottom: 60px;position: relative;} .vector-image{position: relative;} .vector-image img.vector_pic{width: 100%;} .vector-details{width: 100%;background: #eaeaea;text-align: center;padding: 50px 10px 55px;} .vector-details h2,.vector-details h2 a{font-family: "Arial";font-size: 35px;line-height: 40px;color: #595959;font-weight: bold;margin: 0px;} .vector-details span, .vector-details span a{font-family: "Arial";font-size: 14px;color: #595959;line-height: 25px;letter-spacing: 0.05px;display: block;} .vector-go-button{position: absolute;width: 100%;text-align: center;bottom: -30px;/*padding-right:30px;*/} .vector-go-button button{font-family: "Arial";font-size: 25.38px;line-height: 25.38px;color: #ffffff;font-weight: bold;width: 70px;height: 70px;text-align: center;line-height: 60px;background: #3f8e00;border-radius: 35px;border: 5px solid #fff;} .vector-image-icon{ position: absolute; text-align: center; margin: 0 auto; width: 100px; bottom: -50px; background: #eaeaea; border-top-left-radius: 50px; border-top-right-radius: 50px; height: 100px; left: calc(50% - 50px); } .type_tabs{background: #f1f1f1;margin-top: -15px;padding: 20px 0px 0;margin-bottom: 40px;} .type_tabs ul{list-style: none;padding: 0px;} .type_tabs ul li{float: left;margin-right: 20px;padding: 8px 23px;background: #e0dfdf;font-size: 22px;font-weight: bold;color: #000;border-radius: 33px;min-height: 56px;margin-bottom: 20px} .type_tabs ul li:last-child{margin-right:0px;} .type_tabs ul li img{margin-right: 20px;} .type_tabs ul li span{vertical-align: -4px;} .type_tabs .trg{cursor: pointer;} @media (max-width: 768px){ .type_tabs{margin-bottom: 25px;padding: 10px 0px 0;} .vector-section{margin-bottom: 30px;} .type_tabs ul{padding: 0 10px;} .type_tabs ul li{font-size: 10px;min-height: 28px;width: 46%;padding: 3px 5px;margin-bottom: 10px;} .type_tabs ul li:nth-child(2n){margin-right: 0px;} .type_tabs .trg{text-align: center;} .type_tabs ul li span{vertical-align: -2px;} .type_tabs ul li img{max-height: 15px;margin-right: 10px;} .vector-details{padding: 27px 10px 27px;} .vector-details h2,.vector-details h2 a{font-size: 17px;line-height: 19px;} .vector-details span,.vector-details span a{font-size: 7px;line-height: 12px;} .vector-image-icon{width: 40px;bottom: -20px;border-top-left-radius: 20px;border-top-right-radius: 20px;height: 40px;left: calc(50% - 20px);} .vector-image-icon img{margin-top: 9px !important;} .vector-go-button{bottom: -17px;} .vector-go-button button{font-size: 12px;line-height: 12px;padding: 0px;width: 34px;height: 34px;border-radius: 34px;} }