@font-face { font-family: 'AvantGardeC'; src: url("../fonts/AvantGardeGothicC-Book.woff") format("woff"), url("../fonts/AvantGardeGothicC-Book.woff2") format("woff2"), url("../fonts/AvantGardeGothicC-Book.ttf") format("ttf"), url("../fonts/AvantGardeGothicC-Book.eot") format("eot"), url("../fonts/AvantGardeGothicC-Book.svg") format("svg"); font-weight: normal; font-style: normal; } .container_ultra_calculator{ max-width: 910px; width: 100%; margin: 0 auto; position: relative; } .container_result { position: absolute; top: 50px; left: 130px; text-align: center; } .container_result .result_text { font-size: 30px; line-height: 35px; } .container_result span { font-family: AvantGardeC; font-style: normal; font-weight: normal; font-size: 100px; line-height: 140px; color: #6a448f; } .bg_images { background: url("../images/Group.png"); background-repeat: no-repeat; background-size: 100%; max-width: 910px; width: 100%; height: 370px; margin-left: auto; margin-right: auto; position: relative; } .sliders_container { position: absolute; top: 200px; right: 0; left: 500px; } .slider_range label, .slider_range input, .slider_range span, .slider_range_two label, .slider_range_two input, .slider_range_two span { font-family: AvantGardeC; font-style: normal; font-weight: normal !important; font-size: 20px; line-height: 26px; color: #000000 !important; } .slider_range input, .slider_range_two input { border: 0 !important; font-size: 30px; line-height: 35px !important; width: 70px; margin-left: 65px; padding: 0 !important; } input[type=text]:focus{ border: 0 !important; } .slider_range span, .slider_range_two span { font-size: 30px; line-height: 35px; } .slider_range_two { margin-top: 0px; } .slider_range_two input { max-width: 50px; } .ui-slider { /*основание ползунка */ max-width: 330px; height: 35px; background: #ffffff; border-radius: 30px; } .ui-widget-header { border-radius: 30px; background: #fed500; border: 3px solid white !important; height: 29px !important; max-width: 324px; min-width: 30px; } .ui-slider-handle { /*сама кнопка*/ opacity: 0; height: 50px !important; } .ui-widget.ui-widget-content { border: 2px solid #7a848b; } @media (min-width: 890px ) and (max-width: 960px ) { .container_result{ left: 95px; top: 50px; } .container_result span{ font-size: 80px; line-height: normal; } .sliders_container { position: absolute; top: 120px; right: 0; left: 374px; } } @media (max-width: 890px) { .sliders_container { top: 120px; left: 375px; } .container_result{ left: 95px; top: 50px; } .container_result span{ font-size: 80px; line-height: normal; } } @media (max-width: 767px) { .ui-slider { max-width: 230px; height: 16px; background: #ffffff; border-radius: 30px; } .ui-widget-header { border-radius: 30px; background: #fed500; border: 1px solid white !important; height: 14px !important; max-width: 170px; min-width: 10px; } .bg_images{ width: 80%; height: 300px; } .sliders_container{ top: 75px; left: 300px; width: 180px; } .slider_range label, .slider_range input, .slider_range span, .slider_range_two label, .slider_range_two input, .slider_range_two span{ font-size: 14px; } .slider_range input, .slider_range_two input{ font-size: 16px; margin-left: 0px; width: 50px; text-align: center; } .slider_range span, .slider_range_two span{ font-size: 16px; } .slider_range_two{ margin-top: 0px; } .container_result{ top: 34px; left: 125px; } .container_result span{ font-size: 55px; } } @media (min-width: 500px) and (max-width: 639px){ .bg_images { width: 100%; height: 300px; } .container_result{ top: 35px; left: 62px; } .container_result span{ font-size: 45px; } .sliders_container{ left: 255px; top: 56px; width: 185px; } .slider_range label, .slider_range input, .slider_range span, .slider_range_two label, .slider_range_two input, .slider_range_two span{ font-size: 10px; margin-left: 10px; } .slider_range input, .slider_range_two input{ margin-left: 30px; } .slider_range span, .slider_range_two span{ font-size: 10px; margin-left: 0; } .slider_range_two{ margin-top: 0px; } } @media (min-width: 480px) and (max-width: 499px){ .sliders_container{ top: 48px; left: 250px; width: 190px; } .slider_range label, .slider_range input, .slider_range span, .slider_range_two label, .slider_range_two input, .slider_range_two span{ font-size: 11px; } .slider_range label,.slider_range_two label{ margin-left: 10px; } .slider_range input, .slider_range_two input{ font-size: 11px; margin-left: 0; height: 20px; width: 30px; } .slider_range span, .slider_range_two span{ font-size: 11px; line-height: 0; } .ui-slider{ height: 20px; } .ui-widget-header{ min-width: 15px; max-width: 140px; height: 15px !important; } .slider_range_two{ margin-top: 20px; } .container_result{ top: 34px; left: 68px; } .container_result span{ font-size: 46px; } .container_result .result_text{ font-size: 14px; line-height: normal; } .bg_images{ width: 100%; } } @media (min-width: 380px) and (max-width: 479px){ .sliders_container{ top: 30px; left: 165px; width: 130px; } .slider_range label, .slider_range input, .slider_range span, .slider_range_two label, .slider_range_two input, .slider_range_two span{ font-size: 11px; } .slider_range label,.slider_range_two label{ margin-left: 5px; } .slider_range input, .slider_range_two input{ font-size: 11px; margin-left: 0; height: 20px; width: 30px; } .slider_range span, .slider_range_two span{ font-size: 11px; line-height: 0; } .ui-slider{ height: 20px; } .ui-widget-header{ min-width: 15px; max-width: 140px; height: 15px !important; } .slider_range_two{ margin-top: 0px; } .container_result{ top: 20px; left: 44px; } .container_result span{ font-size: 35px; } .container_result .result_text{ font-size: 14px; line-height: normal; } .bg_images{ width: 100%; height: 125px } } @media (min-width: 320px) and (max-width: 379px){ .sliders_container{ top: 18px; left: 150px; width: 130px; } .slider_range label, .slider_range input, .slider_range span, .slider_range_two label, .slider_range_two input, .slider_range_two span{ font-size: 11px; } .slider_range label,.slider_range_two label{ margin-left: 5px; } .slider_range input, .slider_range_two input{ font-size: 11px; margin-left: 0; height: 20px; width: 30px; } .slider_range span, .slider_range_two span{ font-size: 11px; line-height: 0; } .ui-slider{ height: 17px; } .ui-widget-header{ min-width: 15px; max-width: 140px; height: 15px !important; } .slider_range_two{ margin-top: 0px; } .container_result{ top: 20px; left: 44px; } .container_result span{ font-size: 25px; } .container_result .result_text{ font-size: 14px; line-height: normal; } .bg_images{ width: 100%; height: 125px } }