*{
    --font-12: 0.63vw;
    --font-14: 0.73vw;
    --font-16: 0.83vw;
    --font-24: 1.25vw;
    --value-1: 0.05vw;
    --value-10: 0.52vw;
    --value-30: 1.56vw;
    --value-60: 3.125vw;
    --orange-color:#BD9972;
}

body{
    margin:0;
    -webkit-tap-highlight-color:  transparent;  
    overflow-x:hidden; 
    color: #fff;
    text-transform: uppercase;
    font-family: 'Jost', sans-serif;
    font-size: var(--font-14);    
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 100vh;
    background-size: cover;
    background-image: url(img/main-bg.jpg);
    background-position: center;
    background-repeat: no-repeat
}

p{
    line-height: 160%;
    margin: 0 0 var(--value-10);
}

body.active{
    overflow: hidden;
}

a{
    outline: inherit!important;
    line-height: 160%;
}

img{
    max-width:100%;
    height:auto;
}

ul,
ol{    
    line-height: 160%;
}

.grid-box{
    display: grid;
    grid-gap:var(--value-30);
    grid-auto-rows: min-content;
}

.container{
    padding:0 var(--value-60);
    max-width: 100%;
    width:100%;
    margin:0 auto;
}

header{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    padding:var(--value-60) 0;
    transform: translateY(0);
    transition: transform 0.2s ease-in-out;
    -moz-transition: transform 0.2s ease-in-out;
    -webkit-transition: transform 0.2s ease-in-out;
}

header.scroll{
    transform: translateY(-100%);
}

header .columns{
    grid-template-columns: auto auto;
    justify-content: space-between;
}

header .logo-box{
    max-width:6.82vw;
}

header .info{
    grid-gap:12.4vw;
    grid-template-columns: auto auto;
    font-size:var(--font-12);
    letter-spacing: 0.01em;
    line-height: 1;
}

header .info span{
    display: block;
    margin-bottom:var(--value-10);
}

header .info a{
    color:var(--orange-color);
    text-decoration: inherit;
    outline: initial;
}

.main-wrap{
    padding: 11.3vw 0 4vw;
}

.main-wrap>.container{
    height: 100%;
}

.content-box{
    height: 100%;
    grid-gap:4.16vw;
    align-content: center;
    justify-content: center;
    text-align: center;
}

.content-box .title{
    font-weight: 300;
    font-size: 8.33vw;
    margin: 0;
    line-height: 1;
}

.content-box .descr{
    color:var(--orange-color);
    margin: 0 auto;
}

.content-box .descr p:last-child{
    margin-bottom: 0;
}

.content-box form{
    display: grid;
    grid-gap: 3.4vw;
    grid-auto-rows: min-content;
}

.content-box form input[type="text"],
.content-box form input[type="email"],
.content-box form input[type="tel"]{
    border:none;
    border-bottom: var(--value-1) solid #fff;
    background-color:transparent;
    outline: inherit;
    font-size: var(--value-60);
    text-transform: uppercase;
    color:#fff;
    text-align: center;
    padding: 1.2vw 0.5vw;
    width:100%;
    max-width: 41vw;
    line-height: 1;
}

.content-box form input::-webkit-input-placeholder{
    color:#fff;
}
.content-box form input::-moz-placeholder{
    color:#fff;
}
.content-box form input:-moz-placeholder{
    color:#fff;
}
.content-box form input:-ms-input-placeholder {
    color:#fff;
}

.content-box form input[type="submit"]{
    border:var(--value-1) solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size:var(--font-24);
    color:#fff;
    outline: inherit;
    width:100%;
    max-width: 21.8vw;
    padding:1.2vw 2.4vw;
    background-color: transparent;
    margin:0 auto;
    text-transform: uppercase;
    transition: background-color 0.2s, border-color 0.2s;
    cursor: pointer;
    text-align: center;
}

.content-box form input[type="submit"]:hover{
    background-color: var(--orange-color);
    border-color: var(--orange-color);
}

.tape-box{
    font-size: var(--font-16);
    padding: var(--value-30) 0;
    z-index: 1;
    overflow: hidden;
    width:100vw;
}

.marquee {
  overflow: hidden;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  font-weight: 300;
  letter-spacing: 1.4px;
}

.marquee__inner {
  white-space: nowrap;
  display: inline-block;
}

.form-box{
    position: relative;
}

.form-box form,
.form-box .message{
    transition: opacity 0.2s, visibility 0.2s;
}

.form-box form.hidden,
.form-box .message.hidden{
    opacity: 0;
    visibility: hidden;
}

.form-box .message{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.form-box .message span{
    display: inline-block;
    padding:1vw 2vw;
    background-color: rgb(0 128 0 / 25%);

}

.form-box .message.error span{
    background-color: rgb(255 0 0 / 25%);
}

input:-webkit-autofill{
    -webkit-box-shadow: inset 0 0 0 50px #000;
    -webkit-text-fill-color: #fff;
}