#customer_service h1, #customer_service h2, #customer_service h3, #customer_service h4, #customer_service h5, #customer_service h6, #customer_service li, #customer_service p, #customer_service ul { margin: 0; padding: 0; font-weight: normal; line-height: 1; } #customer_service a { text-decoration: none; } #customer_service button { cursor: pointer; } * { box-sizing: border-box; font-family: 'Titillium Web', Arial, sans-serif; outline: none; -webkit-tap-highlight-color: transparent; } html { font-size: 10px; } html.zoom2 { font-size: 12px; } html.zoom4 { font-size: 14px; } body { margin: 0; } #customer_service ul { list-style: none; } #customer_service img { max-width: 100%; border: none; } #customer_service textarea { resize: none; } #customer_service .s_btn { display: inline-block; width: 100%; max-width: 300px; padding: 13px 5px; background-color: #E2007A; color: #FFF; font-size: 20px; font-weight: 600; text-align: center; border: none; border-radius: 4px; } #customer_service .s_btn:hover { background-color: #AA036C; } #customer_service .s_btn.s_white_btn { background-color: #FFF; color: #E2007A; } #customer_service .s_btn.s_white_btn:hover { background-color: #F6F6F6; } #customer_service .p_f0 { font-size: 1.4rem; } #customer_service .c_f1 { font-size: 1.5rem; } #customer_service .c_f2 { font-size: 1.7rem; } #customer_service .c_f3 { font-size: 2.2rem; } #customer_service .c_f4 { font-size: 2.3rem; } #customer_service .c_f5 { font-size: 2.4rem; } #customer_service .c_f6 { font-size: 4.2rem; } #customer_service .p_f0 { font-size: 1.5rem; } #customer_service .p_f1 { font-size: 1.8rem; } #customer_service .p_f2 { font-size: 2.0rem; } #customer_service .p_f3 { font-size: 2.2rem; } #customer_service .p_f30 { font-size: 3.0rem; } #customer_service .p_f4 { font-size: 3.6rem; } #customer_service .p_textL { text-align: left; } #customer_service .p_textC { text-align: center; } #customer_service .p_textR { text-align: right; } #customer_service .c_semibold { font-weight: 600; } #customer_service .semibold { font-weight: 600; } #customer_service .c_bold { font-weight: bold; } #customer_service .c_uppercase { text-transform: uppercase; } #customer_service .c_page { width: 100%; max-width: 1430px; margin: 0 auto; padding: 0 15px; } #customer_service .service_content { position: relative; display: none; background-color: #FFF; } #customer_service .service_content.c_active { display: block; min-height: 80vh; padding-bottom: 10px; } #customer_service .c_headbar { z-index: 5; } #m_main { overflow: hidden; } #m_main .m_baner { height: 400px; } #m_main .m_baner .m_slider_element { height: 400px; background-position: center; background-size: cover; background-repeat: no-repeat; } #m_main .m_baner .m_slider_element .m_slider_text { padding-top: 80px; } #m_main .m_baner .m_slider_element .m_slider_text .m_baner_main { margin-bottom: 10px; color: #FFF; } #m_main .m_baner .m_slider_element .m_slider_text p { margin-bottom: 10px; color: #FFF; } #m_main .m_baner .m_slider_element .m_slider_text a { display: block; max-width: 245px; margin-top: 55px; } /*#m_main .m_baner .m_slider_element.m_slider_1 { background-image: url(/-/media/Additional/smart/img/main_animation/updated_slider_2.jpg); }*/ #m_main .m_baner .m_slider_element.m_slider_2 { background-image: url(/-/media/Additional/smart/img/main_animation/new_slider_1.jpg); } #m_main .m_baner .m_slider_element.m_slider_3 { background-image: url(/-/media/Additional/smart/img/main_animation/new_img_slider_1_desktop.jpg); } /*#m_main .m_baner .m_slider_element.m_slider_4 { background-image: url(/-/media/Additional/smart/img/main_animation/new_slider_4.jpg); }*/ /*#m_main .m_baner .m_slider_element.m_slider_5 { background-image: url(/-/media/4c20a9bcce0148699d0ab6cb3ade8f6c.ashx); }*/ #m_main .m_baner .m_slider_element.m_slider_6 { background-image: url(/-/media/bb1aa77ac85a492698cf22701a962122.ashx); } #m_main .m_baner .m_slider_element.m_slider_7 { background-image: url(/-/media/9715d3053e6b44a580cf38dbf0ebd9ae.ashx); } #m_main .m_baner .m_slider_element.m_slider_1 { background-image: url(/-/media/Additional/smart/img/main_new_layout_msp_v2/msp_new_slide_3_desktop.webp);} #m_main .m_baner .m_slider_element.m_slider_4 { background-image: url(/-/media/Additional/smart/img/main_new_layout_msp_v2/msp_new_slide_2_desktop.webp);} #m_main .m_baner .m_slider_element.m_slider_5 { background-image: url(/-/media/Additional/smart/img/main_new_layout_msp_v2/msp_new_slide_1_desktop.webp);} #m_main .m_uppercase { text-transform: uppercase; } #m_main .m_light { font-weight: 200; } #m_main .m_semibold { font-weight: 600; } #m_main .m_bold { font-weight: bold; } #m_main .m_text_right { text-align: right; } #m_main .m_text_center { text-align: center; } #m_main .m_text_left { text-align: left; } #m_main .m_baner { position: relative; z-index: 3; } #m_main .m_baner .owl-dots { position: absolute; bottom: -45px; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; width: 100%; max-width: 1400px; margin: auto; background-color: #FFF; box-shadow: 0 10px 24px 0 rgb(33 33 33 / 10%); } #m_main .m_baner .owl-dots .owl-dot { overflow: hidden; flex-basis: 50%; height: 100px; padding: 10px 5px; font-size: 24px; text-align: center; } #m_main .m_baner .owl-dots .owl-dot button { position: relative; display: block; width: 100%; height: 100%; background-color: transparent; color: #000; font-size: 24px; border: none; outline: none; } #m_main .m_baner .owl-dots .owl-dot button.m_middle_dot { padding: 0 5px; border-width: 0 0 0 1px; border-color: #C3C3C3; border-style: solid; } #m_main .m_baner .owl-dots .owl-dot button:before { content: ''; position: absolute; top: -60px; left: 0; right: 0; z-index: -1; transform: scale(.5); display: block; width: 130px; height: 130px; margin: auto; opacity: 0; background-color: #D6E2FA; border-radius: 50%; transition: 300ms; } #m_main .m_baner .owl-dots .owl-dot button:hover:before { transform: scale(1); opacity: 1; } #m_main .m_baner .owl-dots .owl-dot.active button:before { transform: scale(1); opacity: 1; } #m_main .m_second_box { padding-top: 70px; } #m_main .m_second_slider { position: relative; z-index: 3; } #m_main .m_second_slider .owl-dots { position: absolute; top: auto; bottom: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; width: 100%; max-width: 700px; margin: auto; background-color: transparent; box-shadow: none; } #m_main .m_second_slider .owl-dots .owl-dot { flex-basis: 48%; height: 80px; padding: 0; text-align: left; } #m_main .m_second_slider .owl-dots .owl-dot button.m_slider_btn { position: relative; display: block; width: 100%; height: auto; padding-top: 25px; opacity: .4; background-color: transparent; color: #000; font-size: 16px; text-align: left; border: none; border-top: 1px solid #000; outline: none; } #m_main .m_second_slider .owl-dots .owl-dot button.m_slider_btn:before { content: none; } #m_main .m_second_slider .owl-dots .owl-dot.active button.m_slider_btn { opacity: 1; } #m_main .m_second_slider .owl-dots .owl-dot button.m_slider_btn span { font-size: 20px; } #m_main .m_second_slider .m_second_element { width: 100%; max-width: 1430px; height: 681px; margin: 20px auto 110px; padding: 0 15px; background-position: center; background-repeat: no-repeat; } #m_main .m_second_slider .owl-dots .owl-dot button.m_second_slider_btn { display: block; background-color: transparent; color: #000; font-size: 16px; font-weight: 600; text-align: left; text-transform: uppercase; border: none; outline: none; } #m_main .m_second_slider .owl-dots .owl-dot.active { position: relative; } #m_main .m_second_slider .owl-dots .owl-dot.active .m_second_slider_progress { position: absolute; top: -4px; left: 0; display: block; width: 100%; max-width: 100%; height: 4px; background: #306EE8; } #m_main .m_second_slider .owl-dots .owl-dot.active .m_second_slider_progress.m_fake_progress { animation: bar2 .1s linear alternate 1 forwards; } .m_circle_container { position: absolute; top: 130px; right: -310px; z-index: 5; transform: rotate(180deg); width: 100%; max-width: 550px; padding: 0; } .m_slider_progress { position: absolute; top: 130px; right: -310px; z-index: 5; transform: rotate(180deg); width: 100%; max-width: 550px; padding: 0; } .m_circle_container .path { animation: dash 10s linear alternate 1; stroke-dasharray: 1340; stroke-dashoffset: 20; } .m_slider_progress .path { animation: dash 10s linear alternate 1; stroke-dasharray: 1340; stroke-dashoffset: 20; } #m_main .m_second_slider .m_second_element .m_slider_flex { display: flex; justify-content: space-between; width: 100%; height: 100%; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_width_33 { flex-basis: 33%; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_width_66 { flex-basis: 65%; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column { display: flex; flex-wrap: wrap; justify-content: space-between; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 35px; box-shadow: 0 10px 24px 0 rgb(33 33 33 / 10%); border: 2px solid transparent; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element.m_with_border > a { border-color: #306EE8; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a:hover { opacity: .6; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_with_arrow:after { transition: 250ms ease; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_with_arrow:hover:after { right: 15px; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element.m_with_circle > a { position: relative; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element.m_with_circle > a .m_ab_img { position: absolute; top: 0; left: 0; z-index: 0; width: auto; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_width_100 { flex-basis: 100%; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_width_60 { flex-basis: 59%; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_width_50 { flex-basis: 49%; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_width_40 { flex-basis: 39%; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_height_100 { height: 100%; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_height_60 { height: 59%; margin-bottom: 2%; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_height_40 { height: 38%; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_with_arrow:after { content: ''; position: absolute; bottom: 20px; right: 20px; display: block; width: 25px; height: 18px; background-image: url(/-/media/Additional/smart/img/main_animation/m_slider_arrow.png); background-position: top; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a .m_slider_element_image img { display: block; width: auto; height: auto; margin: 0 auto; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a .m_slider_element_text { color: #000; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a .m_slider_element_text .m_subtitle, #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a .m_slider_element_text h6 { margin-bottom: 15px; font-size: 23px; line-height: 1.2; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a .m_slider_element_text p { font-size: 18px; line-height: 1.2; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_column_flex { flex-direction: column; justify-content: center; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_column_flex .m_slider_element_image { z-index: 1; flex-basis: auto; width: 100%; height: 300px; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_column_flex .m_slider_element_text { flex-basis: auto; width: 100%; height: auto; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .slider-change-space .m_width_50 {flex-basis: 65%;} #m_main .m_third_box { padding-top: 30px; padding-bottom: 80px; background-image: url(/-/media/Additional/smart/img/main_animation/third_box_bg.png); background-position: center bottom; background-repeat: no-repeat; } #m_main .m_third_slider { position: relative; z-index: 3; } #m_main .m_third_box h2, #m_main .m_third_box h5 { text-align: center; line-height: 1.2; } #m_main .m_third_box h5 p { font-weight: normal; } #m_main .m_third_slider .owl-dots { position: relative; top: auto; bottom: auto; left: auto; right: auto; z-index: 10; display: flex; justify-content: space-around; width: 100%; max-width: 1400px; margin: auto; background-color: transparent; box-shadow: none; } #m_main .m_third_slider .owl-dots .owl-dot { flex-basis: 30%; height: 80px; padding: 0; text-align: left; } #m_main .m_third_slider .owl-dots .owl-dot button.m_slider_btn { position: relative; display: block; width: 100%; height: auto; padding-top: 25px; opacity: .4; background-color: transparent; color: #000; font-size: 16px; text-align: left; border: none; border-top: 1px solid #000; outline: none; } #m_main .m_third_slider .owl-dots .owl-dot button.m_slider_btn:before { content: none; } #m_main .m_third_slider .owl-dots .owl-dot.active button.m_slider_btn { opacity: 1; } #m_main .m_third_slider .owl-dots .owl-dot button.m_slider_btn span { font-size: 20px; } .zoom-x2 #m_main .m_third_slider .owl-dots .owl-dot button.m_slider_btn {padding-top: 8px;} .zoom-x4 #m_main .m_third_slider .owl-dots .owl-dot button.m_slider_btn {padding-top: 8px;} #m_main .m_third_slider .m_third_element { position: relative; width: 100%; max-width: 1464px; height: 681px; margin: 40px auto 20px; background-position: center; background-repeat: no-repeat; } #m_main .m_third_slider .owl-dots .owl-dot button.m_second_slider_btn { display: block; background-color: transparent; color: #000; font-size: 16px; font-weight: 600; text-align: left; text-transform: uppercase; border: none; outline: none; } #m_main .m_third_slider .m_third_element > .m_offert_box { position: absolute; top: 100px; bottom: auto; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; width: 490px; max-width: 100%; min-height: 410px; margin: auto; opacity: 0; transition: 250ms; } #m_main .m_third_slider .m_third_element > .m_offert_box .m_single_offert_benefit { display: flex; align-items: center; justify-content: space-between; width: 100%; } #m_main .m_third_slider .m_third_element > .m_offert_box .m_single_offert_benefit span { display: block; flex-basis: 105px; text-align: center; } #m_main .m_third_slider .m_third_element > .m_offert_box .m_single_offert_benefit span img { display: block; width: auto; height: auto; margin: 0 auto; } #m_main .m_third_slider .m_third_element > .m_offert_box .m_single_offert_benefit P { flex-basis: calc(100% - 110px); font-size: 18px; line-height: 1.1; } #m_main .m_third_slider .m_third_element > .m_image_left { left: auto; right: 460px; } #m_main .m_third_slider .m_third_element > .m_image_right { left: 460px; right: auto; } #m_main .m_third_slider .m_third_element.m_active > .m_image_left { animation: toRight 1.5s .5s forwards linear; } #m_main .m_third_slider .m_third_element.m_active > .m_image_right { animation: toLeft 1.5s .5s forwards linear; } #m_main .m_third_slider .owl-dots .owl-dot.active { position: relative; } #m_main .m_third_slider .owl-dots .owl-dot.active .m_third_slider_progress { position: absolute; top: -4px; left: 0; display: block; width: 100%; max-width: 100%; height: 4px; background: #306EE8; } #m_main .m_third_slider .owl-dots .owl-dot.active .m_third_slider_progress.m_fake_progress { animation: bar2 .1s linear alternate 1 forwards; } #m_main .m_third_slider .m_third_element .m_third_slider_image { position: relative; left: 0; right: 0; width: 100%; max-width: 450px; margin: auto; } #m_main .m_third_slider .m_third_element .m_third_slider_image .m_offert_box { display: block; margin: 0 auto; opacity: 0; } #m_main .m_third_slider .m_third_element.m_active .m_third_slider_image .m_offert_box { animation: show .5s forwards linear; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a:after { transition: 250ms ease; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a { position: relative; display: block; width: 100%; height: 620px; padding: 35px; opacity: 0; background-color: #FFF; box-shadow: 0 10px 24px 0 rgb(33 33 33 / 10%); } #m_main .m_third_slider .m_third_element .m_third_slider_image > a:hover .m_slider_main_image { opacity: .6; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a:hover .m_slider_description { opacity: .6; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a:hover:after { right: 15px; } #m_main .m_third_slider .m_third_element.m_active .m_third_slider_image > a { animation: show .5s forwards linear; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a:after { content: ''; position: absolute; bottom: 20px; right: 20px; display: block; width: 25px; height: 18px; background-image: url(/-/media/Additional/smart/img/main_animation/m_slider_arrow.png); background-position: top; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a .m_slider_main_image { display: flex; align-items: center; justify-content: center; min-height: 265px; text-align: center; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a .m_slider_main_image img { display: block; width: auto; height: auto; margin: 0 auto; max-height: 165px; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a .m_slider_description { color: #000; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a .m_slider_description .m_text_1 { font-size: 16px; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a .m_slider_description .m_text_2 { margin: 15px 0 30px; font-size: 25px; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a .m_slider_description .m_text_3 { font-size: 18px; text-align: center; line-height: 1.2; } #m_main .m_third_slider .m_third_element.m_active .m_third_slider_image > a:after { transition: 250ms ease; } #m_main .m_third_slider .m_third_element.m_active .m_third_slider_image > a:hover:after { right: 15px; } #m_main .m_config .m_config_flex .m_config_body .m_calculator_space { box-shadow: 0 10px 24px 0 rgb(33 33 33 / 10%); } #m_main .m_config .m_config_flex .m_config_body .m_calculator_box { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 25px; } #m_main .m_config .m_config_flex .m_config_body .m_calculator_box > p { flex-basis: 100%; margin-bottom: 20px; font-size: 18px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device { position: relative; display: flex; flex-basis: 49%; align-items: center; justify-content: space-between; margin: 10px 0; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device label { display: block; padding-left: 55px; color: #000; font-size: 18px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device [type='checkbox']:checked, #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device [type='checkbox']:not(:checked) { position: absolute; left: -9999px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device [type='checkbox']:checked + label, #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device [type='checkbox']:not(:checked) + label { cursor: pointer; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device [type='checkbox']:checked + label:before, #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device [type='checkbox']:not(:checked) + label:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35px; height: 35px; margin: auto; background: #FFF; border: 1px solid #919191; border-radius: 50%; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device [type='checkbox']:checked + label:after, #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device [type='checkbox']:not(:checked) + label:after { content: ''; position: absolute; top: 17px; bottom: auto; left: 10px; width: 18px; height: 18px; margin: auto; background-color: #E2007A; border-radius: 50%; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device [type='checkbox']:not(:checked) + label:after { transform: scale(0); opacity: 0; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device [type='checkbox']:checked + label:before { transform: scale(1); opacity: 1; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device .m_checkbox { flex-basis: calc(100% - 155px); } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device .m_energy_box { flex-basis: 150px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device .m_energy_box p { width: 100%; font-size: 18px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device .m_energy_box input { width: 80px; height: 50px; padding: 5px; font-size: 18px; border: 1px solid #B7B7B7; border-radius: 5px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device .m_energy_box .m_unit { display: inline-block; margin-left: 10px; font-size: 18px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_calculator_summary { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 25px; background-color: #DCF3F4; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_calculator_summary .m_summary_column { display: flex; flex-basis: 49%; align-items: center; justify-content: space-between; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_calculator_summary .m_summary_column span { flex-basis: 55px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_calculator_summary .m_summary_column span img { width: auto; height: auto; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_calculator_summary .m_summary_column p { flex-basis: calc(100% - 60px); font-size: 25px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_summary_disclaimer { flex-basis: 100%; margin-top: 15px; color: #555; font-size: 14px; line-height: 1.2; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_top { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 60px 35px; background-color: #DCF3F4; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_bottom { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 45px 35px; background-color: #FFF; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_top .m_energy_per_house_label { flex-basis: 60%; padding-right: 10px; font-size: 30px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_top .m_energy_per_house_label span { display: block; font-size: 18px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_top .m_energy_per_house { flex-basis: 40%; font-size: 25px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_top .m_energy_per_house span { font-size: 36px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_bottom .m_consumption_label { margin-bottom: 25px; font-size: 18px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_bottom .m_single_consumption { display: flex; flex-basis: 48%; align-items: center; justify-content: space-between; margin: 15px 0; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_bottom .m_single_consumption .m_consumption_name { display: flex; flex-basis: calc(100% - 120px); align-items: center; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_bottom .m_single_consumption .m_consumption_name span { flex-basis: 45px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_bottom .m_single_consumption .m_consumption_name p { flex-basis: calc(100% - 50px); font-size: 18px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_bottom .m_single_consumption .m_consumption_value { font-size: 18px; font-weight: 600; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_bottom .m_summary_disclaimer { margin-top: 45px; } #m_main .m_config { padding-top: 30px; padding-bottom: 60px; } #m_main .m_config h2, #m_main .m_config h5 { text-align: center; line-height: 1.2; } #m_main .m_config h5 p { font-weight: normal; } #m_main .m_config .m_config_flex { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 45px; } #m_main .m_config .m_config_flex .m_config_switcher { position: relative; display: flex; flex-basis: 340px; flex-direction: column; align-items: flex-start; justify-content: space-between; height: 730px; margin-top: 20px; padding-left: 30px; background-position: 30px center; background-repeat: no-repeat; } #m_main .m_config .m_config_flex .m_config_body { position: relative; flex-basis: calc(100% - 340px); } #m_main .m_config .m_config_flex .m_config_body .m_config_element { position: relative; top: 0; left: 0; display: none; width: 100%; min-height: 801px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element.m_active { display: block; } #m_main .m_config .m_config_flex .m_config_switcher[data-step='1'] { background-image: url(/-/media/Additional/smart/img/main_animation/circle_1.png); } #m_main .m_config .m_config_flex .m_config_switcher[data-step='2'] { background-image: url(/-/media/Additional/smart/img/main_animation/circle_2.png); } #m_main .m_config .m_config_flex .m_config_switcher .m_switcher_step { position: relative; z-index: 5; display: flex; flex-basis: 50%; color: #000; cursor: pointer; } #m_main .m_config .m_config_flex .m_config_switcher .m_switcher_step p { opacity: .3; } #m_main .m_config .m_config_flex .m_config_switcher .m_switcher_step span { position: relative; display: inline-block; margin-bottom: 10px; color: #ABABAB; font-size: 51px; font-weight: bold; line-height: 1; } #m_main .m_config .m_config_flex .m_config_switcher .m_switcher_step span:after { content: ''; position: absolute; top: -5px; right: -11px; z-index: -1; display: block; width: 30px; height: 30px; background-color: #DCF3F4; border-radius: 50%; } #m_main .m_config .m_config_flex .m_config_switcher .m_switcher_step p { font-size: 25px; } #m_main .m_config .m_config_flex .m_config_switcher .m_switcher_step.m_active p { opacity: 1; } #m_main .m_config .m_config_flex .m_config_switcher .m_switcher_step.m_bottom_step { align-items: flex-end; } #m_main .m_config .m_config_flex .m_config_switcher .m_switch_circle { position: absolute; top: 170px; left: -170px; transform: rotate(-90deg); width: 400px; height: 400px; transition: 250ms; } #m_main .m_config .m_config_flex .m_config_switcher .m_switch_circle svg { overflow: visible; position: absolute; inset: -2.5%; transform: rotate(10deg); width: calc(105%); height: calc(105%); } #m_main .m_config .m_config_flex .m_config_switcher .m_switch_circle.m_bottom_step { transform: rotate(0); } #m_main .m_question { padding-top: 30px;} #m_main .m_question h2, #m_main .m_question h5 { text-align: center; line-height: 1.2; } #m_main .m_question h5 p { font-weight: normal; } #m_main .m_question .m_question_flex { display: flex; gap: 24px; position: relative; z-index: 3; justify-content: space-between; } #m_main .m_question .m_question_image { display: inline-block; flex-basis: 49%; margin-top: 35px; } #m_main .m_question .m_question_image img { display: block; margin: 0 auto; } #m_main .m_question .m_question_image .m_question_icon { min-height: 95px; } #m_main .m_question .m_question_image > a { position: relative; display: block; padding: 45px 30px 30px; overflow: hidden; box-shadow: 0 1px 20px 0 rgb(31 31 31 / 24%); background-color: #FFF; } #m_main .m_question .m_question_image > a:hover { opacity: 1; } #m_main .m_question .m_question_image > a:hover::before {content: ''; width: 100%; height: 100%; position: absolute; z-index: 2; top: 0; bottom: 0; right: 0; left: 0; background-color: #FFF; opacity: .6;} .contrast #m_main .m_question .m_question_image > a:hover::before {background-color: #000;} #m_main .m_question .m_question_image > a p { color: #000; font-size: 32px; text-align: center; } #m_main .m_question .m_question_image > a p:after { content: ''; display: inline-block; width: 25px; height: 18px; margin-left: 15px; background-image: url(/-/media/Additional/smart/img/main_animation/m_slider_arrow.png); background-position: top; transition: 250ms ease; } #m_main .m_question .m_question_image > a:hover p:after { margin-left: 25px; } #m_main .m_need_fix { position: absolute; left: 0; height: 150px; right: 0; bottom: 0; padding: 45px 0; background-color: #D6E2FA; } #m_main .m_need_fix > img { position: absolute; top: 20px; bottom: auto; right: 0; margin: auto; } #m_main .m_need_fix .m_report_box { width: 100%; margin-top: -70px; padding: 30px; background-color: #FFF; box-shadow: 0 10px 24px 0 rgb(33 33 33 / 10%); } #m_main .m_need_fix .m_report_box h2 { margin-bottom: 20px; font-size: 32px; } #m_main .m_need_fix .m_report_box p { position: relative; padding-right: 180px; color: #000; font-size: 24px; } #m_main .m_need_fix .m_report_box p a { position: absolute; top: 0; bottom: 0; right: 0; display: block; margin: auto; color: #E2007E; } #m_main .m_need_fix .m_report_box p a img { display: inline-block; margin-right: 5px; vertical-align: 4px; } #m_main .m_need_fix .m_report_box p a:hover { text-decoration: underline; } #m_config_box { opacity: 0; transition: 250ms ease; } #m_question { opacity: 0; transition: 250ms ease; } #m_need_fix { opacity: 0; transition: 250ms ease; } #m_question .m_question_image { opacity: 0; transition: 250ms ease; } #m_third_box #m_third_head { opacity: 0; transition: 250ms ease; } #m_third_box #m_third_slider { opacity: 0; transition: 250ms ease; } #m_need_fix .m_fix_image { opacity: 0; transition: 250ms ease; } #m_config_box.m_show { animation: show 1s forwards linear; } #m_question.m_show { animation: show 1s forwards linear; } #m_need_fix.m_show { animation: show 1s forwards linear; } #m_third_box #m_third_head.m_show { animation: show 1s forwards linear; } #m_third_box #m_third_slider.m_show { animation: show 1s 500ms forwards linear; } #m_config_box .m_config_switcher { opacity: 0; transition: 250ms ease; } #m_config_box.m_show .m_config_switcher .m_switcher_step { transform: translate(-260px, 0); opacity: 0; transition: 250ms ease; } #m_config_box .m_config_body { opacity: 0; transition: 250ms ease; } #m_config_box.m_show .m_config_switcher { animation: show 1s .5s forwards linear; } #m_config_box.m_show .m_config_body { animation: show 1s 1.5s forwards linear; } #m_config_box.m_show .m_config_switcher .m_switcher_step { animation: moveLeft 1s 0.5s forwards linear; } #m_question.m_show .m_question_image.m_question_1 { animation: moveRight 1s 0.5s forwards linear; } #m_question.m_show .m_question_image.m_question_2 { animation: moveRight 1s 0.5s forwards linear; } #m_question.m_show .m_question_image.m_question_3 { animation: moveRight 1s 0.5s forwards linear; } #m_question.m_show .m_question_image { animation: show 1s 0.5s forwards linear; } #m_need_fix.m_show .m_fix_image { animation: moveLeft 1s 0.5s forwards linear; } #m_main .m_baner .m_slider_element .m_slider_text p { opacity: 0; } #m_main .m_baner .m_slider_element .m_slider_text .m_baner_main { opacity: 0; } #m_main .m_baner .m_slider_element .m_slider_text.m_active p { animation: show 1s forwards linear; } #m_main .m_baner .m_slider_element .m_slider_text.m_active .m_baner_main { animation: show 1s forwards linear; } #m_main .m_baner .m_slider_element .m_slider_text.m_active a { overflow: hidden; position: relative; } #m_main .m_baner .m_slider_element .m_slider_text.m_active a:after { content: ''; display: none; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0, rgba(226, 0, 126, 0.1) 70%, rgba(255, 255, 255, 0.05) 100%); transition: none !important; animation: buttonBar 5s linear; } #circle_1 { stroke-dasharray: 321; } #circle_1.m_grow { animation: grow 2s 2s forwards linear; } #m_main .m_16 { font-size: 1.6rem !important; } #m_main .m_18 { font-size: 1.8rem !important; } #m_main .m_20 { font-size: 2.0rem !important; } #m_main .m_23 { font-size: 2.3rem !important; } #m_main .m_24 { font-size: 2.4rem !important; } #m_main .m_25 { font-size: 2.5rem !important; } #m_main .m_30 { font-size: 3.0rem !important; } #m_main .m_32 { font-size: 3.2rem !important; } #m_main .m_36 { font-size: 3.6rem !important; } #m_main .m_51 { font-size: 3.6rem !important; } .zoom-x2 #m_main .m_question .m_question_image > a p {font-size: 33px!important;} .zoom-x4 #m_main .m_question .m_question_image > a p {font-size: 34px!important;} @keyframes buttonBar { 0% { left: -100%; } 100% { left: 0; } } @keyframes dash { from { stroke-dashoffset: 1340; } to { stroke-dashoffset: 0; } } @keyframes bar { from { width: 0; } to { width: 100%; } } @keyframes bar2 { from { height: 0; } to { height: 4px; } } @keyframes show { from { opacity: 0; } to { opacity: 1; } } @keyframes rotateM { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes moveLeft { from { opacity: 0; transform: translate(-200px, 0); } to { opacity: 1; transform: translate(0, 0); } } @keyframes moveRight { from { opacity: 0; transform: translate(200px, 0); } to { opacity: 1; transform: translate(0, 0); } } @keyframes grow { from { stroke-dasharray: 321; } to { stroke-dasharray: 268; } } #m_main .m_baner .owl-dots .owl-dot button { line-height: 1; } #customer_service .c_loader { position: absolute; top: -10px; left: 0; z-index: 100000; width: 100%; height: calc(100% + 10px); background-color: #FFF; } #customer_service .m_loader_image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; height: 175px; margin: auto; } #customer_service .m_loader_image img { display: block; margin: 5px auto; } #m_main .m_third_box { min-height: 920px; padding-bottom: 20px; } #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device .m_energy_box input:focus { border: 2px dotted #E2007A !important; } #m_main .m_question .m_question_image > a:focus { border: 2px dotted #E2007A !important; } #m_main .m_need_fix .m_report_box p a:focus { border: 2px dotted #E2007A !important; } #m_main .m_baner .m_slider_element .m_slider_text a:focus { border: 2px dotted #E2007A !important; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a:focus { border: 2px dotted #E2007A !important; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a:focus { border: 2px dotted #E2007A !important; } #m_main.msp_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device .m_energy_box input:focus { border: 2px dotted #2A64D8 !important; } #m_main.msp_main .m_question .m_question_image > a:focus { border: 2px dotted #2A64D8 !important; } #m_main.msp_main .m_need_fix .m_report_box p a:focus { border: 2px dotted #2A64D8 !important; } #m_main.msp_main .m_baner .m_slider_element .m_slider_text a:focus { border: 2px dotted #2A64D8 !important; } #m_main.msp_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a:focus { border: 2px dotted #2A64D8 !important; } #m_main.msp_main .m_third_slider .m_third_element .m_third_slider_image > a:focus { border: 2px dotted #2A64D8 !important; } body { overflow: hidden; } body.m_visible { overflow: visible; } body.contrast * { color: #FFF !important; } body.contrast { background-color: #000; } body.contrast #m_main #m_second_box { background-color: #000 !important; } body.contrast #m_main #m_third_box { background-color: #000 !important; } body.contrast #m_main #m_config_box { background-color: #000 !important; } body.contrast #m_main #m_question { background-color: #000 !important; } body.contrast #m_main #m_need_fix { background-color: #000 !important; } body.contrast #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_top { background-color: #000 !important; } body.contrast #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_example_energy_bottom { background-color: #000 !important; } body.contrast #m_main .m_need_fix .m_report_box { background-color: #000 !important; border-color: #FFF; } body.contrast #m_main .m_third_slider .m_third_element .m_third_slider_image > a { background-color: #000 !important; } body.contrast #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_calculator_summary { background-color: #000 !important; } body.contrast #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_single_device .m_energy_box input { color: #000 !important; } body.contrast #m_main .m_config .m_config_flex .m_config_body .m_config_element .m_calculator_summary .m_summary_column span img { background-color: #FFF; } body.contrast #m_main .m_third_slider .m_third_element .m_third_slider_image > a:after { background-color: #000 !important; background-position: bottom; } body.contrast #m_main .m_question .m_question_image > a p:after { background-color: #000; background-position: bottom; } body.contrast #m_main * { color: #FFF; } body.contrast #m_main .m_baner .m_slider_element .m_slider_text { background-color: transparent !important; } body.contrast #m_main .m_baner .c_page { background-color: transparent !important; } body.contrast #m_main .m_baner * { background-color: transparent !important; } body.contrast #m_main .m_baner .owl-dots, body.contrast #m_main .m_question .m_question_image > a { background-color: #000 !important; border: 2px solid #FFF; } body.contrast #m_main .m_baner .s_white_btn { background-color: #FFE800 !important; color: #000 !important; } body.contrast #m_main .m_baner .owl-dots .owl-dot button:before { background-color: #FFE800 !important; } body.contrast #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a { box-shadow: none; border-color: #FFF; } body.contrast #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a:hover { border-color: #6AE2E5; } body.contrast #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_with_arrow:after { background-color: #000 !important; background-position: bottom; } body.contrast #m_main .m_second_slider .owl-dots .owl-dot.active .m_second_slider_progress { background-color: #FFE800 !important; } body.contrast #m_main .m_third_slider .owl-dots .owl-dot.active .m_third_slider_progress { background-color: #FFE800 !important; } body.contrast #m_main .m_third_slider .m_third_element .m_third_slider_image > a { border: 2px solid #FFF; } body.contrast #m_main .m_third_box { background-image: none; } body.contrast #m_main .m_config .m_config_flex .m_config_body .m_calculator_space { box-shadow: none; border: 2px solid #FFF; } body.contrast #m_main .m_config .m_config_flex .m_config_switcher .m_switcher_step span:after { content: none; } html.zoom-x2 { font-size: 12px; } html.zoom-x4 { font-size: 14px; } html.zoom-x2 #m_main .m_baner .m_slider_element .m_slider_text { max-width: 640px; } html.zoom-x4 #m_main .m_baner .m_slider_element .m_slider_text { max-width: 640px; } html.zoom-x2 #m_main .m_config .m_config_flex .m_config_switcher .m_switcher_step p { padding-right: 5px; } html.zoom-x4 #m_main .m_baner .owl-dots { bottom: -75px; } html.zoom-x4 #m_main .m_third_slider .owl-dots .owl-dot button span { line-height: 1; } html.zoom-x4 #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element.m_width_50 > a .m_slider_element_image { flex-basis: 35%; } html.zoom-x4 #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element.m_width_50 > a .m_slider_element_text { flex-basis: 65%; } html.zoom-x4 #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a .m_slider_element_text h6 { line-height: 1; } #main-content .sc-richtext { width: 100%; } footer.container--bggrey { margin-top: -5px; } #m_main .m_baner .m_slider_element .m_magenta_box { position: absolute; top: 0; left: 0; display: block; width: 50%; height: 100%; background-image: url(/-/media/Additional/smart/img/main_animation/navy_box.png); background-size: cover; background-repeat: no-repeat; } #m_main .m_second_slider .owl-dots .owl-dot.active:hover { opacity: .7; } #m_main .empty_btn { position: absolute; transform: scale(0); height: 0; margin: 0; padding: 0; opacity: 0; line-height: 0; } @media all and (max-width: 1600px) { #m_main .m_16 { font-size: 1.4rem !important; } #m_main .m_18 { font-size: 1.6rem !important; } #m_main .m_20 { font-size: 1.6rem !important; } #m_main .m_23 { font-size: 1.8rem !important; } #m_main .m_24 { font-size: 2.0rem !important; } #m_main .m_25 { font-size: 2.2rem !important; } #m_main .m_30 { font-size: 2.4rem !important; } #m_main .m_32 { font-size: 2.6rem !important; } #m_main .m_36 { font-size: 3.2rem !important; } #m_main .m_51 { font-size: 4.0rem !important; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a {padding: 16px;} #m_main .m_second_slider .m_second_element .m_slider_flex .m_width_33 {flex-basis: 29%;} #m_main .m_second_slider .m_second_element .m_slider_flex .m_width_66 {flex-basis: 70%;} .zoom-x2 #m_main .m_question .m_question_image > a p {font-size: 27px!important;} .zoom-x4 #m_main .m_question .m_question_image > a p {font-size: 28px!important;} } @media all and (max-width: 1450px) { #m_main .m_baner .owl-dots { max-width: 90%; } #m_main .m_third_slider .m_third_element .m_third_slider_image { max-width: 360px; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a { height: 530px; padding: 25px 15px 45px; } #m_main .m_third_slider .m_third_element { max-width: 1200px; height: 560px; } #m_main .m_third_box { min-height: 820px; padding-bottom: 10px; } #m_main .m_third_slider .m_third_element > .m_offert_box { top: 50px; } #m_main .m_third_slider .m_third_element > .m_offert_box { width: 430px; } #m_main .m_third_slider .owl-dots { max-width: 1430px; padding: 0 15px; } #m_main .m_baner .c_page { height: 100%; } html.zoom-x2 #m_main .m_baner .m_slider_element .m_slider_text { display: flex; flex-direction: column; justify-content: center; max-width: 550px; height: 100%; padding: 0; } html.zoom-x2 #m_main .m_baner .m_slider_element .m_slider_text a { margin-top: 25px; } #m_main .m_third_box { background-position: center 115%; } #m_main .m_baner .m_slider_element .m_magenta_box { width: 760px; background-size: cover; } } @media all and (max-width: 1350px) { #m_main .m_third_box { min-height: 1px; } } @media all and (max-width: 1300px) { html.zoom-x4 #m_main .m_baner .m_slider_element .m_slider_text { max-width: 560px; } } @media all and (max-width: 1200px) { #m_main .m_baner .c_page { height: 100%; } /*slider_1_m*/ #m_main .m_baner .m_slider_element.m_slider_2 { background-image: url(/-/media/Additional/smart/img/main_animation/new_slider_1_m.jpg); background-position: right top; } /*slider_2_m*/ #m_main .m_baner .m_slider_element.m_slider_3 { background-image: url(/-/media/Additional/smart/img/main_animation/new_img_slider_1_laptop.jpg); background-position: right top; } /*slider_5_m*/ #m_main .m_baner .m_slider_element.m_slider_6 { background-image: url(/-/media/88bc48bdb2fa496c93d7117aae3a8b3a.ashx); background-position: right top; } /*slider_6_m*/ #m_main .m_baner .m_slider_element.m_slider_7 { background-image: url(/-/media/a2c9cda3093040b29b81d04d1d4b9d86.ashx); background-position: right top; } #m_main .m_baner .m_slider_element.m_slider_1 { background-image: url(/-/media/Additional/smart/img/main_new_layout_msp_v2/msp_new_slide_3_laptop.webp); background-position: right top; } #m_main .m_baner .m_slider_element.m_slider_4 { background-image: url(/-/media/Additional/smart/img/main_new_layout_msp_v2/msp_new_slide_2_laptop.webp); background-position: right top; } #m_main .m_baner .m_slider_element.m_slider_5 { background-image: url(/-/media/Additional/smart/img/main_new_layout_msp_v2/msp_new_slide_1_laptop.webp); background-position: right top; } /*slider_7_m*/ #m_main .m_baner { height: 275px; } #m_main .m_baner .m_slider_element { height: 275px; } #m_main .m_baner .m_slider_element .m_slider_text { display: flex; flex-direction: column; justify-content: center; max-width: 500px; height: 100%; padding: 0; } #m_main .m_baner .m_slider_element .m_slider_text a { margin-top: 25px; } #m_main .m_baner .owl-dots { max-width: 98%; } #m_main .m_16 { font-size: 1.4rem !important; } #m_main .m_18 { font-size: 1.6rem !important; } #m_main .m_20 { font-size: 1.6rem !important; } #m_main .m_23 { font-size: 1.8rem !important; } #m_main .m_24 { font-size: 2.0rem !important; } #m_main .m_25 { font-size: 2.2rem !important; } #m_main .m_30 { font-size: 2.4rem !important; } #m_main .m_32 { font-size: 2.6rem !important; } #m_main .m_36 { font-size: 3.2rem !important; } #m_main .m_51 { font-size: 4.0rem !important; } #m_main .m_baner .owl-dots { bottom: -105px; align-items: center; max-height: 80px; } #m_main .m_baner .owl-dots .owl-dot button:before { content: none; } #m_main .m_second_box { padding-top: 110px; } #m_main .m_second_slider .m_second_element { height: 520px; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_column_flex .m_slider_element_image { height: 240px; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a { padding: 10px; } #m_main .m_third_slider .m_third_element > .m_offert_box .m_single_offert_benefit p { flex-basis: calc(100% - 90px); } #m_main .m_third_slider .m_third_element > .m_offert_box { width: 350px; } #m_main .m_third_slider .m_third_element > .m_offert_box .m_single_offert_benefit span { flex-basis: 90px; } #m_main .m_config .m_config_flex .m_config_switcher { flex-basis: 300px; } #m_main .m_config .m_config_flex .m_config_body { flex-basis: calc(100% - 300px); } #m_main .m_baner .m_slider_element .m_magenta_box { width: 560px; height: 275px; } html.zoom-x2 #m_main .m_baner .m_slider_element .m_slider_text { max-width: 500px; } html.zoom-x4 #m_main .m_baner .owl-dots { bottom: -100px; } html.zoom-x4 #m_main .m_baner .m_slider_element .m_slider_text a { margin-top: 10px; } html.zoom-x4 #m_main .m_baner .m_slider_element .m_slider_text { max-width: 530px; } html.zoom-x4 #m_main .m_question .m_question_image > a p:after { content: none; } html.zoom-x4 #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_with_arrow:after { bottom: 5px; right: 5px; width: 20px; height: 10px; background-size: contain; background-repeat: no-repeat; } #m_main .m_baner .m_slider_element .m_slider_text .m_baner_main br { display: none; } } @media all and (max-width: 1030px) { #m_main .m_baner .m_slider_element .m_slider_text { max-width: 460px; } #m_main .m_baner .m_slider_element.m_slider_1 { background-size: cover; } #m_main .m_baner .m_slider_element.m_slider_2 { background-size: cover; } #m_main .m_baner .m_slider_element.m_slider_3 { background-size: cover; } #m_main .m_baner .m_slider_element.m_slider_4 { background-size: cover; } #m_main .m_baner .m_slider_element.m_slider_5 { background-size: cover; } #m_main .m_baner .m_slider_element.m_slider_6 { background-size: cover; } #m_main .m_baner .m_slider_element.m_slider_7 { background-size: cover; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_width_33 { flex-basis: 100%; margin-bottom: 10px; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_width_66 { flex-basis: 100%; } #m_main .m_second_slider .m_second_element .m_slider_flex { flex-wrap: wrap; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_column_flex { flex-direction: row; justify-content: space-between; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_column_flex .m_slider_element_image { height: auto; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_column_flex .m_slider_element_image { flex-basis: 39%; width: auto; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_column_flex .m_slider_element_text { flex-basis: 59%; width: auto; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a .m_slider_element_image img { max-height: 200px; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_height_40, #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_height_60 { height: auto; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_height_60 { margin-bottom: 10px; } #m_main .m_second_slider .m_second_element { height: 630px; } #m_main .m_second_slider .owl-dots .owl-dot { height: auto; font-size: 0 !important; } #m_main .m_second_slider .owl-dots .owl-dot .m_second_slider_progress { display: none; } #m_main .m_second_slider .owl-dots .owl-dot.active .m_second_slider_progress { display: none; } #m_main .m_second_slider .owl-dots .owl-dot * { font-size: 0 !important; } #m_main .m_second_slider .owl-dots .owl-dot button.m_slider_btn { width: 100%; height: 5px; background-color: #DDD; border: none; } #m_main .m_second_slider .owl-dots .owl-dot { flex-basis: 50px; margin: 0 7px; } #m_main .m_second_slider .owl-dots { position: relative; bottom: auto; justify-content: center; } #m_main .m_second_slider .m_second_element { margin-bottom: 50px; } #m_main .m_second_slider .owl-dots .owl-dot.active button { width: 100%; height: 5px; background-color: #6AE2E5; border: none; } #m_main .m_third_slider .m_third_element .m_third_slider_image { max-width: 330px; } #m_main .m_third_slider .m_third_element > .m_offert_box { width: 310px; } #m_main .m_config { display: none; } #m_main .m_second_slider .owl-dots .owl-dot button.m_second_slider_btn { display: none; } #m_main .m_third_slider .owl-dots .owl-dot button.m_second_slider_btn { display: none; } #m_main .m_second_slider .owl-dots .owl-dot button.m_slider_btn { padding-top: 5px; border-top: none; } #m_main .m_third_slider .owl-dots .owl-dot button.m_slider_btn { padding-top: 5px; border-top: none; } #m_main .m_third_slider .owl-dots .owl-dot button.m_slider_btn { width: 100%; height: 5px; background-color: #DDD; border: none; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element.m_with_circle > a .m_ab_img { display: none; } #m_main .m_baner .m_slider_element .m_magenta_box { width: 500px; } html.zoom-x2 #m_main .m_baner .m_slider_element .m_slider_text { max-width: 460px; } html.zoom-x2 #m_main .m_question .m_question_image { flex-basis: 100%; margin: 10px 0; } html.zoom-x2 #m_main .m_question .m_question_flex { flex-wrap: wrap; } html.zoom-x2 #m_main .m_question .m_question_image > a p { text-align: left; } html.zoom-x2 #m_main .m_question .m_question_image > a { padding: 20px 15px 20px 45px; } html.zoom-x2 #m_main .m_question .m_question_flex { margin-top: 20px; } html.zoom-x2 #m_main .m_question .m_question_image img { margin-right: auto; margin-left: 0; } html.zoom-x4 #m_main .m_question .m_question_image { flex-basis: 100%; margin: 10px 0; } html.zoom-x4 #m_main .m_question .m_question_flex { flex-wrap: wrap; } html.zoom-x4 #m_main .m_question .m_question_image > a p { text-align: left; } html.zoom-x4 #m_main .m_question .m_question_image > a { padding: 20px 15px 20px 45px; } html.zoom-x4 #m_main .m_question .m_question_flex { margin-top: 20px; } html.zoom-x4 #m_main .m_question .m_question_image img { margin-right: auto; margin-left: 0; } html.zoom-x4 #m_main .m_baner .owl-dots .owl-dot button.m_24 { font-size: 1.8rem !important; } html.zoom-x4 #m_main .m_third_slider .m_third_element .m_third_slider_image > a .m_slider_main_image { min-height: 205px; } html.zoom-x4 #m_main .m_third_slider .m_third_element .m_third_slider_image > a .m_slider_main_image img { max-height: 150px; } } @media all and (max-width: 950px) { #m_main .m_third_slider .m_third_element > .m_offert_box { width: 30%; } #m_main .m_third_slider .m_third_element > .m_offert_box .m_single_offert_benefit span { flex-basis: 100%; margin-bottom: 10px; } #m_main .m_third_slider .m_third_element > .m_offert_box .m_single_offert_benefit p { flex-basis: 100%; order: 2; text-align: center; } #m_main .m_third_slider .m_third_element > .m_offert_box .m_single_offert_benefit { flex-wrap: wrap; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a { height: 480px; } #m_main .m_third_slider .m_third_element { height: 500px; } #m_main .m_third_slider .m_third_element > .m_offert_box { top: 30px; } #m_main .m_third_box { background-position: center 590px; } } @media all and (max-width: 850px) { #m_main .m_16 { font-size: 1.3rem !important; } #m_main .m_18 { font-size: 1.4rem !important; } #m_main .m_20 { font-size: 1.6rem !important; } #m_main .m_23 { font-size: 1.8rem !important; } #m_main .m_24 { font-size: 2.0rem !important; } #m_main .m_25 { font-size: 2.0rem !important; } #m_main .m_30 { font-size: 2.4rem !important; } #m_main .m_32 { font-size: 2.6rem !important; } #m_main .m_36 { font-size: 3.0rem !important; } #m_main .m_51 { font-size: 3.6rem !important; } #m_main .m_baner .m_slider_element .m_slider_text { max-width: 400px; } #m_main .m_baner .owl-dots .owl-dot button { padding: 0; line-height: 1; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a .m_slider_element_image img { max-height: 110px; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_height_100 > a { height: auto; } #m_main .m_second_slider .m_second_element { height: auto; } #m_main .m_second_slider .m_second_element { margin-bottom: 20px; } #m_main .m_baner .owl-dots { width: calc(100% - 30px); max-width: 100%; } #m_main .m_third_slider .m_third_element > .m_offert_box .m_single_offert_benefit p { display: none; } #m_main .m_third_slider .m_third_element > .m_offert_box { width: 25%; } #m_main .m_third_slider .owl-dots .owl-dot button * { font-size: 0 !important; } #m_main .m_third_slider .owl-dots .owl-dot button { width: 100%; height: 5px; background-color: #DDD; font-size: 0 !important; border: none; } #m_main .m_third_slider .owl-dots .owl-dot.active button { background-color: #6AE2E5; } #m_main .m_third_slider .owl-dots .owl-dot .m_third_slider_progress { display: none; } #m_main .m_third_slider .owl-dots .owl-dot.active .m_third_slider_progress { display: none; } #m_main .m_third_slider .owl-dots { justify-content: center; } #m_main .m_third_slider .owl-dots .owl-dot { flex-basis: 45px; height: auto; margin: 0 7px; } #m_main .m_question .m_question_image { flex-basis: 100%; margin: 10px 0; } #m_main .m_question .m_question_flex { flex-wrap: wrap; } #m_main .m_question .m_question_image > a p { text-align: left; } #m_main .m_question .m_question_image > a { padding: 20px 15px 20px 45px; } #m_main .m_question .m_question_flex { margin-top: 20px; } #m_main .m_question .m_question_image img { margin-right: auto; margin-left: 0; } html.zoom-x4 #m_main .m_baner .m_slider_element .m_slider_text { max-width: 400px; } #m_main .m_third_slider .m_third_element > .m_offert_box { top: 70px; min-height: 340px; } #m_main .m_baner .m_slider_element .m_magenta_box { width: 450px; } .zoom-x2 #m_main .m_question .m_question_image > a p {font-size: 27px!important;} .zoom-x4 #m_main .m_question .m_question_image > a p {font-size: 28px!important;} } @media all and (max-width: 750px) { #m_main .m_baner .m_slider_element { background-position: 0 top !important; } html.zoom-x2 #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_with_arrow:after { bottom: 5px; right: 5px; width: 20px; height: 10px; background-size: contain; background-repeat: no-repeat; } } @media all and (max-width: 600px) { #m_main .m_baner .m_slider_element { background-position: center !important; } /*#m_main .m_baner .m_slider_element.m_slider_1 { background-image: url(/-/media/Additional/smart/img/main_animation/updated_slider_2_mobile.jpg); }*/ /*slider_1_mobile*/ #m_main .m_baner .m_slider_element.m_slider_2 { background-image: url(/-/media/Additional/smart/img/main_animation/new_slider_1_mobile.jpg); } /*slider_2_mobile*/ #m_main .m_baner .m_slider_element.m_slider_3 { background-image: url(/-/media/Additional/smart/img/main_animation/new_img_slider_1_mobile.jpg); } /*slider_3_mobile*/ /*#m_main .m_baner .m_slider_element.m_slider_4 { background-image: url(/-/media/Additional/smart/img/main_animation/new_slider_4_mobile.jpg); }*/ /*slider_4_mobile*/ /*#m_main .m_baner .m_slider_element.m_slider_5 { background-image: url(/-/media/3bb22a15c52c4849af0a8fe2a1b75dbf.ashx); }*/ /*slider_5_mobile*/ #m_main .m_baner .m_slider_element.m_slider_6 { background-image: url(/-/media/60b20059cfd34f5595ebec0cef31e811.ashx); } /*slider_6_mobile*/ #m_main .m_baner .m_slider_element.m_slider_7 { background-image: url(/-/media/ee13f2b93ea74bc3bd1f5506b8115759.ashx); } /*slider_7_mobile*/ #m_main .m_baner .m_slider_element.m_slider_1 { background-image: url(/-/media/Additional/smart/img/main_new_layout_msp_v2/msp_new_slide_3_mobile.webp);} #m_main .m_baner .m_slider_element.m_slider_4 { background-image: url(/-/media/Additional/smart/img/main_new_layout_msp_v2/msp_new_slide_2_mobile.webp);} #m_main .m_baner .m_slider_element.m_slider_5 { background-image: url(/-/media/Additional/smart/img/main_new_layout_msp_v2/msp_new_slide_1_mobile.webp);} #m_main .m_baner .m_slider_element .m_slider_text br { display: none; } #m_main .m_baner .m_slider_element .m_slider_text p.m_36 { font-size: 2.4rem !important; } #m_main .m_baner .m_slider_element .m_slider_text .m_baner_main.m_36 { font-size: 2.4rem !important; } #m_main .m_baner .m_slider_element .m_slider_text p.m_24 { font-size: 1.5rem !important; } #m_main .m_baner .m_slider_element .m_slider_text a { max-width: 200px; margin-top: 15px; padding: 10px; font-size: 1.5rem; } #m_main .m_baner .m_slider_element .m_slider_text { align-items: center; justify-content: flex-end; max-width: 100%; padding-bottom: 50px; text-align: center; } #m_main .m_baner .m_slider_element { height: 380px; } #m_main .m_baner .owl-dots .owl-dot { flex-basis: 45px; height: 5px; margin: 0 7px; padding: 0; background-color: #FFF; font-size: 0; border: none; } #m_main .m_baner .owl-dots .owl-dot.active { background-color: #6AE2E5; } #m_main .m_baner .owl-dots .owl-dot button.m_middle_dot { border: none; } #m_main .m_baner .owl-dots { bottom: 17px; justify-content: center; background-color: transparent; box-shadow: none; } #m_main .m_second_box { padding-top: 0; } #m_main .m_baner .owl-dots .owl-dot button { font-size: 0 !important; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_height_40 { order: 1; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_height_40 .m_slider_element_image { display: none; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_height_40 .m_slider_element_text { flex-basis: 100%; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_height_60 {margin-bottom: 10px; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_with_arrow:after { bottom: 5px; right: 5px; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a { padding: 20px 10px; } #m_main .m_third_slider .m_third_element > .m_offert_box { width: 100px; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a .m_slider_main_image { align-items: flex-start; min-height: 230px; } #m_main .m_need_fix .m_report_box p { flex-basis: 100%; padding: 0; } #m_main .m_need_fix .m_report_box p a { position: relative; left: auto; right: auto; display: block; margin-top: 15px; } #m_main .m_need_fix .m_report_box { padding: 15px; } #m_main .m_baner { height: 380px; } #m_main .m_baner .m_slider_element .m_magenta_box { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 225px; margin: auto; opacity: .9; background-image: url(/-/media/Additional/smart/img/main_animation/magenta_box_m_msp.png); background-position: center; } html.zoom-x2 #m_main .m_baner { height: 400px; } html.zoom-x2 #m_main .m_baner .m_slider_element .m_slider_text { justify-content: flex-end; max-width: 100%; padding-bottom: 30px; } html.zoom-x2 #m_main .m_baner .m_slider_element .m_slider_text a { margin-top: 0; padding: 5px; } html.zoom-x4 #m_main .m_baner .m_slider_element .m_slider_text { max-width: 100%; padding-bottom: 25px; } html.zoom-x4 #m_main .m_baner .owl-dots { bottom: 7px; } html.zoom-x4 #m_main .m_baner .owl-dots .owl-dot button.m_24 { font-size: 0 !important; } html.zoom-x4 #m_main .m_baner .m_slider_element { height: 420px; } html.zoom-x4 #m_main .m_baner { height: 420px; } #m_main .m_baner .m_slider_element .m_slider_text .m_baner_main { font-size: 18px !important; } #m_main .m_baner .m_slider_element .m_slider_text p { font-size: 16px !important; } #m_main .m_baner .owl-dots .owl-dot button.m_middle_dot { font-size: 0 !important; } } @media all and (max-width: 500px) { #m_main .m_third_slider .m_third_element .m_third_slider_image { position: relative; top: auto; bottom: auto; max-width: 260px; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a .m_slider_main_image { min-height: 200px; } #m_main .m_third_slider .m_third_element .m_third_slider_image > a { height: auto; } #m_main .m_third_box { position: relative; background-image: none; } #m_main .m_third_box:after { content: ''; position: absolute; bottom: 0; left: 0; z-index: 0; width: 100%; height: 75px; background-color: #D6E2FA; } #m_main .m_third_slider .m_third_element { height: auto; } #m_main .m_third_slider .m_third_element { margin: 20px 0; } #m_main .m_third_slider .m_third_element > .m_offert_box { top: 15%; min-height: 1px; height: 70%; } #m_main .m_third_slider .m_third_element > .m_offert_box { width: 60px; } #m_main .m_third_slider .m_third_element > .m_offert_box .m_single_offert_benefit span img { transform: scale(.7); } #m_main .m_question .m_question_image > a { padding: 20px; } #m_main .m_question .m_question_image .m_question_icon { min-height: 70px; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_column_flex .m_slider_element_image, #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_width_40 { flex-basis: 30%; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a.m_column_flex .m_slider_element_text, #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_width_60 { flex-basis: 69%; } html.zoom-x2 #m_main .m_baner .m_slider_element { height: 400px; } html.zoom-x2 #m_main .m_question .m_question_image > a { padding: 20px; } html.zoom-x2 #m_main .m_question .m_question_image > a p:after { content: none; } html.zoom-x4 #m_main .m_baner .m_slider_element { height: 440px; } html.zoom-x4 #m_main .m_baner { height: 440px; } html.zoom-x4 #m_main .m_third_slider .m_third_element .m_third_slider_image > a .m_slider_main_image { min-height: 145px; } #m_main .m_question .m_question_image > a p { font-size: 2.0rem !important; } #m_main .m_need_fix .m_report_box h5 { font-size: 2.0rem !important; } #m_main .m_need_fix .m_report_box p { font-size: 1.4rem !important; } #m_main .m_need_fix .m_report_box p a { font-size: 1.4rem !important; } #m_main .m_question .m_question_image img { max-height: 45px; } #m_main .m_question .m_question_image .m_question_icon { min-height: 65px; } #m_main .m_need_fix > img { display: none; } #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .slider-change-space .m_width_50 {flex-basis: 100%;} } @media all and (max-width: 450px) { html.zoom-x4 #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a .m_slider_element_image { display: none; } html.zoom-x4 #m_main .m_second_slider .m_second_element .m_slider_flex .m_slider_column .m_slider_element > a .m_slider_element_text { flex-basis: 100%; } #m_main .m_baner .m_slider_element .m_slider_text.m_active p br { display: none; } #m_main .m_baner .m_slider_element .m_slider_text p { margin-bottom: 5px; } } @media all and (max-width: 400px) { #m_main .m_baner .m_slider_element .m_slider_text p.m_36 { font-size: 2.2rem !important; } #m_main .m_baner .m_slider_element .m_slider_text .m_baner_main.m_36 { font-size: 2.2rem !important; } #m_main .m_baner .m_slider_element .m_slider_text a { margin-top: 5px; } #m_main .m_30 { font-size: 2.2rem !important; } #m_main .m_32 { font-size: 2.4rem !important; } #m_main .m_36 { font-size: 2.8rem !important; } #m_main .m_51 { font-size: 3.2rem !important; } #m_main .m_third_box { min-height: 60px; margin: 20px 0; padding: 0; background-image: none; } #m_main .m_third_box:after { content: none; } .zoom-x2 #m_main .m_question .m_question_image > a p {font-size: 25px!important;} .zoom-x4 #m_main .m_question .m_question_image > a p {font-size: 26px!important;} } @media all and (max-width: 390px) { #m_main .m_third_slider .m_third_element > .m_offert_box .m_single_offert_benefit { display: none; } #m_main .m_third_slider .m_third_element .m_third_slider_image { width: calc(100% - 30px); max-width: 100%; } } @keyframes toRight { 0% {left: -460px; right: unset; opacity: 0;} 100% {left: 50px; right: unset; opacity: 1;} } @keyframes toLeft { 0% {right: -460px; left: unset; opacity: 0;} 100% {right: 50px; left: unset; opacity: 1;} }