/*
Theme Name: Cyrstals
Theme URI: http://crystals.co.uk
Author: the WinMedia Team
Author URI: https://wordpress.org/
Description: Kareplus Main Branch Theme
*/


body{ background-color: #fff; line-height: 18px;font-family: 'Montserrat', sans-serif;}
.container{ }
.container.pr{ position: relative;}
.col-centered{ float: none; margin: 0 auto;}

.padding_top_20{ padding-top: 30px;}

a{ transition: background-color 300ms ease-out;}

#wpadminbar{ display: none!important;}

.clear{ clear: both;}
img{ max-width: 100%; max-height: 100%;}
a{ text-decoration: none;}
a:hover{ text-decoration: none;}
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;}
}

.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{font-family: 'Montserrat', sans-serif;}

.btn{ padding: 20px 30px!important; font-size: 24px; color: #fff;}
.btn.btn-default{ border: none; background-color: #333231; color: #fff; padding: 10px 20px;}
.btn.btn-primary{ border: none; background-color: #ff6600; color: #fff; padding: 10px 20px;}
.btn.btn-success{background-color: #ff6600; }


.configurator_info{ display: none; font-size: 11px; font-weight: 300; text-align: center;}


.step{ display: none;}

#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: 12px;}
.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{ border: solid 1px #e1e1e1; background-color: #f3efec; margin-top: 20px; margin-bottom: 50px;}
.top_steps.cart_steps{ margin-bottom: 0px;}
.top_steps.cart_steps .box{ width: 25%;}

.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;}
 .ng-hide{ display: none;}
.top_steps .box.active{ color: #fff; background-image: url(assets/top_box_active2.png); background-color: #333231;}
.top_steps .box.back{background-image: url(assets/top_box_active_back.png);}
.top_steps .box.dark{background-image: url(assets/top_box_dark.png);}
.top_steps .box.last{ background-image: none;}
.top_steps .box .title{ padding: 23px; font-size: 14px; font-weight: bold;}
.top_steps .box .title img{ float: right;}


.top_header_title{}
.top_header_title h3{ 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{ padding-top: 50px;}
#windows_step_1 .box{ text-align: center; width:33.3%; float: left; padding: 0px 2%px;  margin-bottom: 50px; min-height: 272px;}
#windows_step_1 .box .pic{ cursor: pointer; background-size: cover; display: block;  height: 180px; margin: 0px auto;}
#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 .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: 5px 10px!important; background-color: #ff6600; color: #fff; font-size: 13px; font-weight: normal; color: #fff; border: none; text-transform: none; border-radius: 90px; margin-top: 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; margin-bottom: 30px;}
.bottom_partners h3{  margin: 0px; margin-bottom: 20px; font-size: 16px; text-align: left; font-weight: 300;}


#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;}


#windows_step_4{ text-align: center; padding-top: 50px;}
#windows_step_4 .box{ margin-bottom: 30px;}
#windows_step_4 .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_4 .box .pic:hover{border: 3px solid #34ac5b;}
#windows_step_4 .box.selected .pic{border: 3px solid #34ac5b;} 


#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;}
#windows_step_5 .box .info .help_link{ font-size: 11px;}
#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: bold;}
#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 p{ text-align: center; padding: 20px; font-size: 12px; color: #999;}
#windows_step_5 .help_box a{ display: block; padding: 20px; color: #fff; font-size: 12px; border-radius: 5px; margin-bottom: 30px;}
#windows_step_5 .help_box a.h1{ background-color: #f5f5f5; border: solid 1px #d7d7d7; color: #333;}
#windows_step_5 .help_box a.h2{ background-color: #49acc1; border: solid 1px #2c8b9f;}
#windows_step_5 .help_box a.h3{ background-color: #4a8bc2; border: solid 1px #2a6698;}
#windows_step_5 .btn{ border-radius: 50px!important; font-size: 18px; padding: 9px 39px!important; margin-right: 30px;}


.show_outside_door_colours.active,.show_inside_door_colours.active{ color: #000;}

#windows_step_6{}
#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: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{width: 20%;  float: left;list-style: none; padding-right: 15px; padding-left: 15px;}
.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.selected .box{ border: solid 5px #e1e1e1;}
.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);}
#windows_step_6 .btn{ border-radius: 50px!important; font-size: 18px; padding: 9px 39px!important; margin-right: 30px;}


#windows_step_7 .cart_table{ border: solid 1px #e1e1e1; margin-bottom: 50px; border-radius: 0px;}
#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 a{ float: right; color: #333;}
#windows_step_7 .cart_table .bottom a span.glyphicon{ margin-left: 15px; font-size: 30px; color: #ff6600; }
#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: 400px;}
.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; font-size: 18px; padding: 9px 39px!important; margin-right: 30px;}
.total_box .right .btn:last-child{ margin-right: 0px;}


#windows_step_8 {}
#windows_step_8 .box{ border: solid 1px #e1e1e1; border-radius: 5px; padding: 40px 30px; margin-bottom: 50px;}
#windows_step_8 .box h3{ margin: 0px; margin-bottom: 20px; color: #b8383b;}
#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;}


#windows_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; margin-top: 30px;}
#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: 10px; width: 250px; background-color: #fff; border-radius: 5px; border:solid 1px #e1e1e1; text-align: center;}
#windows_canvas .measurement input{ color: #ff0000; border: none; width: 100%; height: 40px; text-align: center; font-size: 24px;}
#windows_canvas .measurement label{ font-weight: normal;}
#windows_canvas .measurement.width{ left: 50%; margin-left: -125px; top: 30px;}
#windows_canvas .measurement.height{ top: 50%; margin-left: -50px; right: 30px;}
#windows_canvas .measurement.door_height_field{ right: 106px; top: 20%;}
#windows_canvas .measurement.door_height_field.door{ right: 152px; top: 20%;}
#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: 12px; 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;}


.bottom_message{ display: none; position: fixed; bottom: 0px; left: 0px; right: 0px; background-color: #f21118; color: #fff; padding: 20px; text-align: center; z-index: 2000;}
.bottom_message .container{}



#footer{ background-color: #f3efec; padding: 50px 0px;}
#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 h3{ padding-top: 30px; font-weight: 300; font-size: 18px;}

.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;}