@import url('https://fonts.cdnfonts.com/css/isidora');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
*{
    margin:0;
    padding: 0;
    box-sizing:border-box;
    font-family:'isidora' , sans-serif;
}


a,button{
    cursor:pointer;
    text-decoration:none;
    color:#3a3032
}


.slideout{
    position:absolute;
    right:50px;
    width:250px;
}


.navigation{
    position: fixed;
    right:-500px;
    width:350px;
    height:100%;
    background-color:#ffc44f;
    transition: 0.5s;
    z-index: 9999;
   
}


.navigation ul li{
    color:#3a3032;
    text-align:right;
    text-transform:uppercase;
    list-style-type:none;
    font-size:1.5em;
    padding: 20px 30px;
    border-bottom: 1pt solid;
    font-weight:bold;


}


.hamburger, .bar{
    position:fixed;
}
.hamburger{
    display:block;
    left:2%;
    width: 30px;
    height:30px;
    transform: translateY(50%);
    border:0;
    background:0 0;
}


.bar{
    top:3px;
    background: #000;
    width: 100%;
    height: 4px;
    transition: all .3s ease-in;


}


#bar2{
    top: 11px
}


#bar3{
    top: 19px
}


.navigation.active{
    left:0;
}


.hamburger.open #bar1{
    background-color:#3a3032;
    transform: rotate(45deg) translate(6px, 5px);


}


.hamburger.open #bar2{
    background-color: transparent
}


.hamburger.open #bar3{
    background-color:#3a3032;
    transform: rotate(-45deg) translate(6px, -5px);
}
.navitem{
    display:inline-block;
    padding:0 25px;
}
.navmenu{
    z-index:8500;
}


#primarynav{
   padding:12px;
   text-align:right;
   background-color:white;


}
.navitem a{
    font-family:'isidora sans';
    font-weight:550;
    font-size:1.5em;
    color:#ffa285;
    transition: all 0.3s ease 0s;
}


.navitem a:hover{
    color:#e23838
} 

.hero{
    background: url(contact_background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
    position:absolute;
    z-index:-1;
    display:flex;
    align-items:center;
    justify-content:center;
}
form{
    width:90%;
    max-width:600px;

}

.input-group{
    margin-bottom: 30px;
    position:relative;
}

input, textarea{
    width: 100%;
    padding: 10px;
    outline: 0;
    border: 1px solid #fff;
    color: #ffa185;
    background:transparent;
    font-size: 15px;
}

label{
    height:100%;
    position:absolute;
    left:0;
    top:0;
    padding:10px;
    color:#ffa185;
    cursor:text;
    transition:0.2s;
}
button{
    padding: 10px 0;
    color: #ffa185;
    outline:none;
    background:transparent;
    border: 1px solid #fff;
    width: 100%;
    cursor:pointer;
}
input:focus~label,
input:valid~label,
textarea:focus~label,
textarea:valid~label{
    top:-35px;
    font-size:14px;
}
.row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.row .input-group{
    flex-basis: 48%;
}