@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,600;1,300;1,400&display=swap');
html{
    height:100%;
    box-sizing: border-box;
}
*, ::before, ::after{
    box-sizing: inherit;
}
html, body{
    padding: 0;
    margin:0;
    font-family: 'Montserrat', sans-serif;
    font-size:16px;
}
body { 
    height:100%;
    overflow-x: hidden;
}

*:focus {
  outline: none
}

h1, h2, h3, h4{
    padding:0;
    margin:0;
}
h1{
    font-weight: 200;
    font-size: 2.4rem;
}

a{
    color:#0078B6;
}

.hidden-el{
	position:absolute;
	left:-1000rem;
	top:-1000rem;
	clip: rect(0,0,0,0);
}
.page{
    width: 100%;
    min-height:100vh;
    overflow:hidden;
}
.page:nth-child(odd){
     background-color:rgba(55,45,50,1.00);
}
.page:nth-child(even){
     background-color:#fff;
}
.landscape{
    display:flex;
    justify-content: center;
    align-items:center;
}
.portrait{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
}
.page.contact-page{
    background-color:#E3E3E3;
}

.cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-auto-flow: dense;
    place-items:center;
    place-content:center;
    
}
.text-card{
    color:#ebebeb;
    padding:0 3rem;
    background-color:rgba(55,45,50,1.00);
}
.text-card-centered{
    text-align: center;
    padding: 0 2rem;
}

.image-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.image-card p{
    text-align: center;
    padding:0 2rem;
}
.local-header,
.local-footer{
    display:flex;
    justify-content: center;
    align-items:center;
    gap:1rem;
    
}
.local-header{
    padding:1rem 3rem 5rem 3rem;
}
.local-footer{
    padding:5rem 3rem 1rem 3rem;
}

.img-container{
    position:relative;
    background-image:url("../images/splash-image.jpg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
}
.img-container img{
    width:130%;
    height:130%;
    object-fit:cover;
}

.img-container .message-card{
    width:480px;
    padding:4rem;
    position:absolute;
    top:50%;
    right:10%;
    z-index:2;
    transform: translateY(-50%);
    background-color: rgba(255,255,255,0.85);
    color:black;
}



.arrow-down,
.arrow-down-white,
.arrow-up,
.arrow-up-white,
.arrow-right,
.arrow-left{
    display:inline-block;
    width:40px;
    height:40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor:pointer;
}
.arrow-down{
    background-image: url("../images/icons/arrow-down.svg");
}
.arrow-down-white{
    background-image: url("../images/icons/arrow-down-white.svg");
}
.arrow-up{
    background-image: url("../images/icons/arrow-up.svg");
}
.arrow-up-white{
    background-image: url("../images/icons/arrow-up-white.svg");
}
.arrow-right{
    background-image: url("../images/icons/arrow-right.svg");
}
.arrow-left{
    background-image: url("../images/icons/arrow-left.svg");
}


.facebook{
    display:inline-block;
    width:48px;
    height:48px;
    background-image:url("../images/facebook-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

footer{
    display:flex;
    justify-content:space-between;
    padding:2rem;
    background-color: #fff;
}

/* -------- форма ---------*/
.form-card{
    width:30rem;
}
.form-row{
    display:flex;
    flex-direction:column;
    padding:0.5rem 0;
}
label{
    display:block;
    padding-bottom:0.4rem;
}
input, textarea{
    width:inherit;
    border:0 none;
    /*box-shadow: 0 0 8rem rgba(0,0,0,0.1);*/
}
input, textarea, button{
    padding:0.6rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}
.form-buttons-row{
    display:flex;
    justify-content: center;
    align-items:center;
    padding:1rem 0;
}
.form-buttons-row button{
    width:50%;
    padding:0.4rem 0.8rem;
    border-radius:3px;
    background-color: #065EB8;
    border:0 none;
    color:#ebebeb;
}

.success-message{
    height:0;
    overflow:hidden;
    transition: height 0.5s ease-out;
    
}
.success-message.active{
   height:3rem; 
}
.error-message{
    color:red;
    height:0;
    overflow:hidden;
    transition: height 0.5s ease-out, padding 0.5s ease-out;
}
.error + .error-message{
    height:2.4rem;
    padding:0.5rem;
    background-color: #fff;
    /*border-top:1px solid #000;*/
}
@media (max-width: 600px) {
    html, body{
    font-size:20px;
    }
  .img-container .message-card,
    .form-card{
        width:80%;
    }
    .local-header,
    .local-footer{
        display:none;
    }
    .text-card, .text-card-centered{
        padding:5rem 3rem;
    }
    
}
@media (max-width: 480px) {
  .img-container .message-card{
    width:100%;
    right:0;
    }
    .text-card, 
    .text-card-centered,
    .img-container .message-card{
        padding:3rem 2rem;
    }
}