html{
    scroll-behavior: smooth;
}
@keyframes popup {
    0% {
        transform: translateX(0px);
    }
    50%{
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0px);
    }
}
.top-menu-phone__arrow {
    transform: translateY(150px);
    animation: popup 1s 0s ease-in-out infinite;
  }

@keyframes animatedBackground {
    0% {
        background-position: left 0
    }
    100% {
        background-position: right 0px /* анимируем свойство background-position */
    }
}

.arrow-right{

	animation: animatedBackground 2s ease-out 1 normal forwards;
	-moz-animation: animatedBackground 2s ease-out 1 normal forwards;
	-webkit-animation: animatedBackground 2s ease-out 1 normal forwards;
 	-o-animation: animatedBackground 2s ease-out 1 normal forwards;
	/* так же, как и с @keyframes, префикс -ms тут ни к чему */
}

@keyframes animatedBackgroundLeft {
    0% {
        background-position: right 0
    }
    100% {
        background-position: left 0px /* анимируем свойство background-position */
    }
}

.arrow-left{

	animation: animatedBackgroundLeft 2s ease-out 1 normal forwards;
	-moz-animation: animatedBackgroundLeft 2s ease-out 1 normal forwards;
	-webkit-animation: animatedBackgroundLeft 2s ease-out 1 normal forwards;
 	-o-animation: animatedBackgroundLeft 2s ease-out 1 normal forwards;
	/* так же, как и с @keyframes, префикс -ms тут ни к чему */
}

.dark-gray {
    color: #2e2e2e;
}

.light-blue{
    color:#bf730a;
}

.bg-dark-gray {
    background-color: #2e2e2e;
}

.bg-turquoise {
    background-color: #313131;
}
.b--dark-gray{
    color: #2e2e2e;
}

.b--turquoise{
    border-color: #313131;
}

.turquoise{
    color: #313131;
}

.hover-turquoise:hover{
    color: #313131;
}

.montserrat{
    font-family: 'Montserrat', sans-serif;
}

.f1{
    font-size: 3.125rem;
}
.f2{
    font-size: 2.5rem;
}
.f1_5{
    font-size: 2rem;
}
.f3{
    font-size: 1.875rem;
}
.f3_5{
    font-size: 1.375rem;
}
.f4-c { font-size: 1.125rem; }

.f6{
    font-size: 0.8125rem;
}

.hover-z-10:hover{
    z-index:10;
}

.grow-texture:hover{
    transform: scale(1.0625)
}

.grow-texture:hover .bg-white-50{
    background-color:hsla(0,0%,100%,1);
}


.grow-texture:hover .dark-gray{
    color:#313131;
}
.grow-texture{
    transition: -webkit-transform .25s ease-out;
    transition: transform .25s ease-out;
    transition: transform .25s ease-out,-webkit-transform .25s ease-out;
}


.pa05 { padding: 0.125rem }
.pl05 { padding-left: 0.125rem }
.pr05 { padding-right: 0.125rem }
.pb05 { padding-bottom: 0.125rem }
.pt05 { padding-top: 0.125rem }
.pv05 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}
.ph3_5{
    padding-left: 3.125rem;
    padding-right: 3.125rem;
}


.ph05 {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
}

.ma05 { margin: 0.125rem }
.ml05 { margin-left: 0.125rem }
.mr05 { margin-right: 0.125rem }
.mb05 { margin-bottom: 0.125rem }
.mt05 { margin-top: 0.125rem }
.mv05 {
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
}
.mh05 {
    margin-left: 0.125rem;
    margin-right: 0.125rem;
}




.lh-title{
    line-height: 1.3;
}

.lh-copy{
    line-height: 1.4;
}

.lh-quote{
    line-height: 1.5;
}
.mw3_5{
    max-width: 6.25rem;
}

.mw5-c{
    max-width: 32.5rem;
}
.mw5_5-c{
    max-width: 35.75rem;
}
.mw6-c{
    max-width:45.125rem;
}
.mw7-c{
    max-width: 51.5rem;
}
.mw9-c{
    max-width:78.25rem;
}
.mw12{
    max-width: 120rem;
}


.w5-c{
    width:17.5rem;
}
.w6-c{
    width:21.25rem;
}
.w7-c{
    width: 29.8125rem;
}

.height-540{
    height:540px;
}

.max-height-132{
    max-height:132px;
}


.page{
    word-wrap:break-word;
}

.main-screen__inner{
    width:1008px;
}


header{
    min-height:120px;
}

/* Header */

.expand ~ div{
    max-height:0;
    transition: all 0.25s ease-in;
}
.expand:checked ~ div
{
    max-height:300px;
}
.menu:checked ~ div
{
    overflow:hidden;
}
.hide-details{
    display:none;
}
.expand:checked  ~ label .hide-details{
    display:block!important;
}
.expand:checked ~ label .show-details{
    display:none;
}



.top-menu{
    margin-right: 90px;
}


.top-menu a{
    margin-right:50px;

}

.top-menu a:last-child{
    margin-right:0;
}

/* Main screen */

.main-screen{
    background-image: url(/img/main-screen.png);
    height: 350px;
}
.main-screen_inner{
    padding: 66px 16px;
}

/* Section 2*/

.section2{
    padding-top:54px;
    padding-bottom:72px;
}

.button-padding{
    padding:12px 40px;
}

.get-selection-form input {
    border-radius: 18px;
}
.height-270{
    height:270px;
}

@media screen and (min-width: 30em) {
    .height-270-ns{
        height:270px;
    }
    .height-540-ns{
        height:540px;
    }
    .max-height-132-ns{
        max-height:132px;
    }
    .mw9-c-ns{
        max-width:78.25rem;
    }
    .w5-c-ns{
        width:17.5rem;
    }
    .f1-ns{
        font-size: 3.125rem;
    }
    .f2-ns{
        font-size: 2.5rem;
    }
    .f1_5-ns{
        font-size: 2rem;
    }
    .f3-ns{
        font-size: 1.875rem;
    }
    .f3_5-ns{
        font-size: 1.375rem;
    }
    .f4-c-ns { font-size: 1.125rem; }

    .f6-ns{
        font-size: 0.8125rem;
    }

}

@media screen and (min-width: 30em) and (max-width: 60em) {
    .f1-m{
        font-size: 3.125rem;
    }
    .f2-m{
        font-size: 2.5rem;
    }
    .f1_5-m{
        font-size: 2rem;
    }
    .f3-m{
        font-size: 1.875rem;
    }
    .f3_5-m{
        font-size: 1.375rem;
    }
    .f4-c-m { font-size: 1.125rem; }

    .f6-m{
        font-size: 0.8125rem;
    }
    .height-270-m{
        height:270px;
    }
    .height-540-m{
        height:540px;
    }
    .max-height-132-m{
        max-height:132px;
    }
    .w5-c-m{
        width:17.5rem;
    }
    .mw9-c-m{
        max-width:78.25rem;
    }
}

@media screen and (min-width: 60em) {
    .f1-l{
        font-size: 3.125rem;
    }
    .f2-l{
        font-size: 2.5rem;
    }
    .f1_5-l{
        font-size: 2rem;
    }
    .f3-l{
        font-size: 1.875rem;
    }
    .f3_5-l{
        font-size: 1.375rem;
    }
    .f4-c-l { font-size: 1.125rem; }

    .f6-l{
        font-size: 0.8125rem;
    }
    .height-270-l{
        height:270px;
    }
    .height-540-l{
        height:540px;
    }
    .main-screen{
        height:959px;
    }
    .top-menu{
        margin-right: 0px;
    }


    .top-menu a{
        margin-right:32px;

    }
    .max-height-132-l{
        max-height:132px;
    }
    .w5-c-l{
        width:17.5rem;
    }
    .mw9-c-l{
        max-width:78.25rem;
    }
    .expand ~ div
    {
        max-height:300px;
    }
}

@media screen and (min-width: 110em) {
    .f1-xl{
        font-size: 3.125rem;
    }
    .f2-xl{
        font-size: 2.5rem;
    }
    .f1_5-xl{
        font-size: 2rem;
    }
    .f3-xl{
        font-size: 1.875rem;
    }
    .f3_5-xl{
        font-size: 1.375rem;
    }
    .f4-c-xl { font-size: 1.125rem; }

    .f6-xl{
        font-size: 0.8125rem;
    }
    .height-270-xl{
        height:270px;
    }
    .height-540-xl{
        height:540px;
    }
    .top-menu{
        margin-right: 90px;
    }
    .max-height-132-xl{
        max-height:132px;
    }
    .w5-c-xl{
        width:17.5rem;
    }
    .mw9-c-xl{
        max-width:78.25rem;
    }


}

@media screen and (min-width: 135em) {

    .f1-xxl{
        font-size: 3.125rem;
    }
    .f2-xxl{
        font-size: 2.5rem;
    }
    .f1_5-xxl{
        font-size: 2rem;
    }
    .f3-xxl{
        font-size: 1.875rem;
    }
    .f3_5-xxl{
        font-size: 1.375rem;
    }
    .f4-c-xxl { font-size: 1.125rem; }

    .f6-xxl{
        font-size: 0.8125rem;
    }
    .height-270-xxl{
        height:270px;
    }
    .height-540-xxl{
        height:540px;
    }
    .w5-c-xxl{
        width:17.5rem;
    }
    .mw9-c-xxl{
        max-width:78.25rem;
    }

}