* {
    padding: 0;
    margin: 0;
}
body{
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: 'Lato', sans-serif;
    background: rgba(246, 246, 233, 0.5);
}
.wrapper{
    height:100%;
    text-align: center;
    position: relative;
}
.sidebar {
    background-image: url('../UI-elements/background.png');
    background-size: cover;
    width:0%;
    height: 100%;
    display: none;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.main{
    width:100%;
    height: 100%;
}
.main-body{
    padding:.5em;
    height:100%;
    width: 80%;
    text-align: center;
}
.main-body .title{
    padding: .8rem;
    height: fit-content;
    /* background: rgba(180, 29, 87, .8); */
    margin: 1em auto 0;
    width:fit-content;
    border-radius: .5em;
}
.main-body .title p{
    color: rgba(199, 138, 97, .8);
    font-weight: 600;
    font-size: 1.5rem;
}
.loader{
    background-image: url('../UI-elements/loader.gif');
    background-size: cover;
    background-repeat: no-repeat;
    width:80px;
    height:50px;
    margin:0 auto;
}
.logo{
    background-image: url('../UI-elements/logo.png');
    background-size: cover;
    background-repeat: no-repeat;
    width:200px;
    height:150px;
    margin:2em auto;
}
.pic{
    background-image: url('../UI-elements/email.png');
    background-size: cover;
    background-repeat: no-repeat;
    width:250px;
    height:200px;
    margin:9em auto 1em;
    text-align: center;
}
.form-hd{
    height: fit-content;
    width: 100%;
    margin: .3rem auto .5rem;
}
.btnresp{
    height: 5%;
}
.form-hd .input-group{
    margin:0 auto;
    text-align: center;
    transition: .5s all ease-in;
}
.form-hd .input-group.show{
    margin:0 auto .5em;
}
.form-hd .input-sub-group{
    width: 100%;
}
.form-hd .input-sub-group:nth-child(1), .form-hd .input-sub-group:nth-child(4){
    margin-bottom: 0;
    transition: .5s all ease-in;
}
.form-hd .input-sub-group.show:nth-child(1), .form-hd .input-sub-group.show:nth-child(4){
    margin-bottom: .5rem;
}
.form-hd .input-group label{
    font-size: .8rem;
    color: rgba(0, 0, 0, 0.5);
    display: inline-block;
    font-weight: 600;
    /* padding-bottom: .8em; */
    opacity: 0;
    padding-bottom: -1.5em;
}
.form-hd .input-group.show label, .form-hd .input-sub-group.show label{
    padding: 1rem 0 .5em;
    opacity: 1;
    color: rgba(40, 202, 94, 0.9);
    font-weight: 600;
}
.form-hd .input-group input{
    width:100%;
    text-align:center;
    font-size: .8rem;
    border-radius: 2em;
    border-color: transparent;
    background: rgba(0,0,0, .1);
    margin:0 auto;
}
.main-body .btnresp button{
    background: rgba(73, 192, 112, 0.9);
    color:rgba(255,255,255,.9);
    font-size: 1.1rem;
    border-radius: 1em;
    width:35%;
    margin-top: .7rem; 
    padding:.5rem .7em;
}
.main-body .btnresp button:hover{
    background: rgba(43, 129, 71, 0.9);
}
.main-body .btnresp p{
    margin-top: .9em;
    font-size: .9rem;
    color: rgba(0, 0, 0, .5);
    margin-bottom: 2.5em;
}
.main-body .btnresp p a{
    color: rgba(179, 114, 71, 0.8);
}
.resp{
    margin:1.5rem auto 3rem;
    color: rgba(0, 0, 0, .5);
    font-size: 1.1rem;
}
@media (min-width: 576px) {
    .form-hd .input-group input{
        font-size: .8rem;
        padding: .7rem
    }
    .btnresp{
        height: 20%;
    }
    .form-hd .input-group.show, .form-hd .input-group {
        margin-bottom: .8rem;
    }
    .form-hd .input-sub-group.show:nth-child(1), .form-hd .input-sub-group.show:nth-child(4){
        margin-bottom: 0;
    }
    .form-hd .input-group.show label, .form-hd .input-sub-group.show label{
        padding: 0;
    }
    .form-hd{
        width:100%;
        margin: 1em auto;
    }
    .main-body button{
        width:25%;
        font-size: 1.2rem;
    }
    .form-hd .input-sub-group{
        width: 47%;
    }
    .form-hd .input-sub-group:nth-child(1), .form-hd .input-sub-group:nth-child(4){
        margin-bottom: 0;
    }
    .form-hd .input-group label{
        padding-bottom: .8em;
        opacity: 1;
    }
    .form-hd .input-group.show label, .form-hd .input-sub-group.show label{
        color: rgba(40, 202, 94, 0.9);
        padding-bottom: .8em;
    }
    .form-hd .input-group input::placeholder {
        opacity: 0 !important; 
    }
    .form-hd .input-group #email.inputs::placeholder {
        opacity: 1 !important; 
    }
}
@media (min-width: 768px) {
    .form-hd{
        width:80%;
    }
}
@media (min-width: 992px) {
    .main{
        width:70%;
    }
    .sidebar{
        width: 30%;
        display: block;
    }
    .form-hd{
        width:90%;
    }
}