/* элементы формы --------------------------------------------------------------
взаимосвязанные стили:
- input height       = input min-height
- input padding-left = .label margin-left = .form-error margin-left
- input margin-top   = .label margin-top  = .label.active line-height = .form-error line-height
- .label.active font-size = .form-error font-size
line-height в input не работает, имеет смысл только для textarea */
form                            { margin: 0; padding: 0; position: relative }

input,                          
textarea,
select,
.select,
.select-group,
.options-group                  { font-family: Font, Verdana, sans-serif; margin: 5px 0 5px }

input,                          
textarea                        { font-size: 18px; line-height: 22px; padding: 14px 15px; box-sizing: border-box; font-weight: normal; color: #000; margin-top: 35px; border: none; border-radius: 8px; background: #FFF; width: 100%; box-shadow: 0px 27px 22px -19px rgb(0 0 0 / .2) }
input                           { height: 50px }
textarea                        { resize: none; overflow: hidden }

input:focus,                    
textarea:focus,
select:focus                    { outline: none }

input:disabled                  { background: #F4F4F4; color: #BBB }
input[type=text]                { -webkit-appearance: none; -moz-appearance: none; appearance: none }

input::-moz-placeholder          { color: #999; font-weight: normal }
input::-webkit-input-placeholder { color: #999; font-weight: normal }
input:-ms-input-placeholder      { color: #999; font-weight: normal }
input::-ms-input-placeholder     { color: #999; font-weight: normal }
input::placeholder               { color: #999; font-weight: normal } 

input.error,                    
textarea.error                   { border-color: #E9323C; background: #FEF5F5 }

/* применение ошибки к любому блоку */
form div.error:not(.radio-group) { border: 1px solid #E9323C; background: #FEF5F5 }

/* чтобы в яндекс-картах поле поиска не ехало */
ymaps input                     { min-height: 0 }
    
p.label                         { font-size: 18px; line-height: 18px; color: #999; position: absolute; /*white-space: nowrap; width: 100%;*/ margin: 50px 0 0 15px !important; transition: all 0.2s; box-sizing: border-box }
p.label span                    { color: #BBB; font-size: 15px; font-weight: normal; margin-left: 30px }
p.label.active                  { font-size: 15px; line-height: 20px; font-weight: bold; color: #000; margin-top: 8px !important; margin-left: 0 }
p.label.active span             { color: #999 }
p.error                         { font-size: 14px; line-height: 14px; margin: 0 0 5px 15px; color: #E9323C; text-align: left !important }

/* валидация */
.success-mark,  
.fail-mark                      { width: 80px; margin: 0 auto; margin-bottom: 20px }
.success-mark:before,   
.fail-mark:before               { font-family: themify; content: "\e64c"; font-size: 80px; line-height: 80px; color: #008E3B }
.fail-mark:before               { content: "\e6c5"; color: #E9323C }

button                          { cursor: pointer }
button:focus                    { outline: none }

select,
.select                         { display: inline-block; white-space: nowrap; font-size: 18px; line-height: 28px; color: #000; font-weight: normal; text-align: left; padding: 0 32px 0 10px; box-sizing: border-box; appearance: none; border: 0; background: #FFF url(/media/icons/angle-down.svg) no-repeat right 10px center; background-size: 14px; border: solid #DDD 1px; border-radius: 15px; cursor: default }
select::-ms-expand              { display: none } /* remove default arrow in IE 10 and 11 */
@media screen and (min-width:0\0) { select { background: none\9; padding: 5px\9 }} /* target Internet Explorer 9 to undo the custom arrow */
select:hover,
.select:hover                   {  }

/* выпадающий список селекта */
.select .placeholder            { overflow: hidden }
.options                        { position: absolute; z-index: 98; margin-top: 15px; margin-left: -9px; background: #FFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); padding: 10px 0; display: none; visibility: hidden; pointer-events: none; opacity: 0 }
.options > div                  { padding: 0 15px; white-space: nowrap; text-align: left }
.options > div:hover            { color: #0041A5 }
.options > div.selected         { background: #EEE }
.options.multiple > div[data-value] { padding-left: 45px }
.options.active                 { margin-top: 30px; visibility: visible; pointer-events: auto; opacity: 1 }

.selected-options-num           { position: absolute; display: none; background: #F00; color: #FFF; font-size: 11px; line-height: 11px; font-weight: bold; padding: 4px; border-radius: 10px; min-width: 11px; text-align: center; margin: -15px 0 0 35px; -ms-transform: translateX(-12px); -webkit-transform: translateX(-12px); -o-transform: translateX(-12px); -moz-transform: translateX(-12px); transform: translateX(-12px) }
.select-group select,
.select-group .select           { margin: 5px 0 }

/* checkbox */
.checkbox-option                { font-size: 18px; line-height: 26px; padding-left: 30px; color: #333; cursor: default }
.checkbox                       { position: absolute; margin: 5px 0 0 -30px; display: block; width: 18px; height: 18px; margin-right: 12px; border: 1px solid #CCC; background: #FFF; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
.checked .checkbox              { border: none; background: #FFDE5A }
.checked .checkbox:before       { font-family: themify; content: "\e64c"; position: absolute; color: #000; margin: -4px 0 0 2px; font-size: 18px; line-height: 18px; font-weight: bold }

/* объединённая группа опций */
.options-group                              { display: inline-block; font-size: 0; line-height: 0; margin: 20px 0 15px 0 }
.options-group > div,
.options-group > a                          { display: inline-block; font-size: 18px; line-height: 28px; font-weight: bold; color: #0041A5; padding: 5px 20px; margin-bottom: 5px; background: #FFF; border: 1px solid #BBB; text-align: center; white-space: nowrap; /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);*/ text-shadow: none; transition: all 0.1s; cursor: pointer }
.options-group > div:not(.active):not(.disabled):hover,
.options-group > a:not(.active):not(.disabled):hover { /*box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);*/ background: #0041A5; color: #FFF }
.options-group > div:first-child,
.options-group > a:first-child              { border-radius: 22px 0 0 22px; border-right: none }
.options-group > div:last-child,
.options-group > a:last-child               { border-radius: 0 22px 22px 0 }
.options-group > div:first-child:last-child,
.options-group > a:first-child:last-child   { border-radius: 5px }
.options-group > div [class^="ti-"],
.options-group > a [class^="ti-"]           { color: #333; font-size: 20px; line-height: 20px; position: relative; top: -2px; margin-right: 10px }
.options-group > div.active,
.options-group > a.active                   { background: #FFF; color: #000; cursor: default }
.options-group > div.active,
.options-group > a.active [class^="ti-"]    { color: #000 }
.options-group > div.disabled,
.options-group > a.disabled                 { background: #F4F4F4; color: #BBB }
.options-group > div.disabled [class^="ti-"],
.options-group > a.disabled [class^="ti-"]  { color: #BBB }
.options-group > div.disabled.active,
.options-group > a.disabled.active          { background: #F8ECBE }

.input2                         { font-size: 16px; line-height: 28px; height: 44px; color: #333; font-weight: normal; padding: 8px 12px; border: 0; background: #FFF; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) }
.input2:not(:disabled):hover    { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3) }

/* radio-кнопки */              
.radio-group                                            { margin: 15px 0 5px 0; box-sizing: border-box; /*overflow: hidden*/ }
.radio-group > div > div:first-child                    { padding: 5px 10px 5px 50px; box-sizing: border-box; border-width: 0; border-style: solid; border-color: #E9323C; cursor: pointer }
.radio-group.error > div > div:first-child              { background: #FEF5F5 }
.radio-group.error > div > div                          { border-left-width: 1px; border-right-width: 1px }
.radio-group.error > div:first-child > div:first-child  { border-radius: 20px 20px 0 0; border-top-width: 1px }
.radio-group.error > div:last-child > div:first-child   { border-radius: 0 0 20px 20px; border-bottom-width: 1px }
.radio-group > div > div:first-child:before             { content: ""; position: absolute; margin: 5px 0 0 -35px; width: 20px; height: 20px; border-radius: 10px; background: #FFF; border: 1px solid #BBB; box-sizing: border-box; transition: all 0.2s; cursor: pointer }
.radio-group > div > div:first-child:not(.disabled):hover:before { border-color: #999 }
.radio-group > div.active > div:first-child:before      { background: radial-gradient(circle, #0041A5 5px, white 6px); border: 1px solid #0041A5 }
.radio-group > div.active > div:first-child:hover:before { border: 1px solid #0041A5 }
.radio-group > div.disabled > div:first-child           { color: #BBB; cursor: default }
.radio-group > div.disabled > div:first-child:before    { border-color: #DDD; cursor: default }
.radio-group > div.disabled.active > div:first-child:before { background: radial-gradient(circle, #F8ECBE 5px, white 6px) }

/* защита от спамеров */        
.name-email, [name="name-email"] { display: none }

form p.privacy-note                       { margin-top: 30px }

/* /элементы формы ---------------------------------------------------------- */

@media screen and (max-width: 479px) {
    input,                          
    textarea                        { font-size: 18px; line-height: 22px; height: 40px; min-height: 40px; padding: 5px 10px; margin-top: 30px }

    p.label                         { font-size: 18px; line-height: 18px; margin: 40px 0 0 10px !important }
    p.label span                    { font-size: 14px; margin-left: 20px }
    p.label.active                  { font-size: 14px; line-height: 18px; margin-top: 8px !important }
    p.error                         { font-size: 14px; line-height: 18px; margin: 0 0 10px 10px }

    .radio-group > div > div:first-child { padding: 5px 10px 5px 45px }

    form p.privacy-note                  { margin-top: 20px }    
}




/* кнопки --------------------------------------------------------------------*/
.btn,
.btn-smaller,
.btn-small,
.btn-big,
.btn-bigger                 { font-size: 15px; line-height: 50px; height: 50px; padding: 0 18px; margin-top: 25px; border-radius: 8px; display: inline-block; border: none; font-family: Font, Verdana, sans-serif; font-weight: 600; text-transform: uppercase; color: #FFF; text-align: center; background-color: #3D4040; text-decoration: none; white-space: nowrap; cursor: pointer; outline: none; box-shadow: 0px 13px 30px -13px rgb(0 0 0 / .8); transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s }

.btn-smaller                { font-size: 10px; line-height: 25px; height: 25px; padding: 0 10px }
.btn-small                  { font-size: 12px; line-height: 45px; height: 45px; padding: 0 15px }
.btn-big                    { font-size: 22px; line-height: 80px; height: 80px; padding: 0 30px; margin-top: 35px }
.btn-bigger                 { font-size: 24px; line-height: 65px; height: 65px; padding: 0 25px }

/* <button class="btn-big btn-icon"><span class="ti-download"></span>Скачать каталог</button> */
.btn.btn-icon span:before,
.btn-smaller.btn-icon span:before,
.btn-small.btn-icon span:before,
.btn-big.btn-icon span:before,
.btn-bigger.btn-icon span:before { text-shadow: none; transition: color 0.2s, text-shadow 0.2s }

.btn.btn-icon:hover span:before,
.btn-smaller.btn-icon:hover span:before,
.btn-small.btn-icon:hover span:before,
.btn-big.btn-icon:hover span:before,
.btn-bigger.btn-icon:hover span:before { color: #F69C00; text-shadow: 0 0 20px #F69C00 }

.btn.btn-icon             { padding-left: 50px }
.btn.btn-icon span        { position: absolute; color: #FFBB94; margin-left: -35px; margin-top: 12px }
.btn.btn-icon span.ti-comment-alt { margin-top: 14px }
.btn.btn-icon span:before { font-size: 25px; line-height: 25px }

.btn-big.btn-icon               { padding-left: 75px }
.btn-big.btn-icon span          { position: absolute; color: #FFBB94; margin-left: -50px; margin-top: 22px }
.btn-big.btn-icon span.ti-comment-alt { margin-top: 25px }
.btn-big.btn-icon span:before   { font-size: 35px; line-height: 35px }

.btn-bigger.btn-icon            { padding-left: 75px }
.btn-bigger.btn-icon span       { position: absolute; color: #FFBB94; margin-left: -50px; margin-top: 22px }
.btn-bigger.btn-icon span:before { font-size: 35px; line-height: 35px }

.btn:not(.waiting):hover,
.btn-smaller:not(.waiting):hover,
.btn-small:not(.waiting):hover,
.btn-big:not(.waiting):hover,
.btn-bigger:not(.waiting):hover { background-color: #1F2324; color: #FFF; transform: translateY(-2px); box-shadow: 0px 17px 30px -16px rgb(0 0 0 / .9) }

.btn.disabled,
.btn-smaller.disabled,
.btn-small.disabled,
.btn-big.disabled,
.btn-bigger.disabled            { background: #BBB; color: #333; cursor: default }

.btn.waiting,
.btn-smaller.waiting,
.btn-small.waiting,
.btn-big.waiting,
.btn-bigger.waiting             { background: #BBB url(/media/icons/preloader.svg) no-repeat center center; background-size: 30px; color: transparent; cursor: default; position: relative }
.btn.waiting.btn-icon span,
.btn-smaller.waiting.btn-icon span,
.btn-small.waiting.btn-icon span,
.btn-big.waiting.btn-icon span,
.btn-bigger.waiting.btn-icon span { visibility: hidden }

/* иконка вначале кнопки */
.btn:before,
.btn-smaller:before,
.btn-small:before,
.btn-big:before,
.btn-bigger:before          { font-size: 22px; line-height: 45px; margin-right: 7px; margin-top: -3px; float: left; font-weight: bold }

.btn-smaller:before         { font-size: 14px; line-height: 24px; margin-right: 5px }
.btn-small:before           { font-size: 14px; line-height: 30px; margin-right: 5px; margin-top: 0 }
.btn-big:before             { font-size: 20px; line-height: 54px; margin-right: 9px }
.btn-bigger:before          { font-size: 25px; line-height: 60px; margin-right: 12px }

@media screen and (max-width: 1023px) {
    .btn-smaller                { font-size: 12px; line-height: 20px; height: 20px; padding: 0 8px }
    .btn-small                  { font-size: 13px; line-height: 25px; height: 25px; padding: 0 10px }
    .btn                        { font-size: 14px; line-height: 45px; height: 45px; padding: 0 15px }
    .btn-big                    { font-size: 20px; line-height: 65px; height: 65px; padding: 0 18px }
    .btn-bigger                 { font-size: 22px; line-height: 85px; height: 85px; padding: 0 20px }

    .btn.btn-icon             { padding-left: 45px }
    .btn.btn-icon span        { margin-top: 12px; margin-left: -32px }
    .btn.btn-icon span.ti-comment-alt { margin-top: 14px }
    .btn.btn-icon span:before   { font-size: 22px; line-height: 22px }
    
    .btn-big.btn-icon               { padding-left: 60px }
    .btn-big.btn-icon span          { margin-top: 18px; margin-left: -40px }
    .btn-big.btn-icon span.ti-comment-alt { margin-top: 21px }
    .btn-big.btn-icon span:before   { font-size: 28px; line-height: 28px }
    
    .btn-bigger.btn-icon span       { margin-top: 16px }    
}

@media screen and (max-width: 479px) {
    .btn-smaller                { font-size: 10px; line-height: 17px; height: 17px; padding: 0 6px }
    .btn-small                  { font-size: 11px; line-height: 22px; height: 22px; padding: 0 8px }
    .btn                        { font-size: 13px; line-height: 42px; height: 42px; padding: 0 12px }
    .btn-big                    { font-size: 18px; line-height: 60px; height: 60px; padding: 0 16px }
    .btn-bigger                 { font-size: 20px; line-height: 80px; height: 80px; padding: 0 18px }

    .btn.btn-icon             { padding-left: 44px }
    .btn.btn-icon span        { margin-top: 11px; margin-left: -30px }
    .btn.btn-icon span.ti-comment-alt { margin-top: 12px }
    .btn.btn-icon span:before   { font-size: 20px; line-height: 20px }
    
    .btn-big.btn-icon               { padding-left: 55px }
    .btn-big.btn-icon span          { margin-left: -38px; margin-top: 18px }
    .btn-big.btn-icon span.ti-comment-alt { margin-top: 18px }
    .btn-big.btn-icon span:before   { font-size: 25px; line-height: 25px }
    
    .btn-bigger.btn-icon span       { margin-top: 14px }
}
/* /кнопки -------------------------------------------------------------------*/