#contacts {
    padding-bottom: 0;
    padding-top: 10vh;
}

#contacts .description {
    float: left;
    width: 45%;
    padding-top: 2.5%;
    padding-left: 3.68vw;
    padding-right: 1.84vw;
}

#contacts .content {
    float: left;
    width: 55%;
}

@media (max-width:1023px) { 
    #contacts .description {
        width: 100%;
        height: auto;
    }
    
    #contacts .content {
        width: 100%;
        height: auto;
    }
} 

#contacts #contacts-description-panel {
    /*border: 1px solid blue;*/
    position: relative;
}

#contacts #contacts-description-panel h1{
    position: relative;
    font-size: 2.76vw;
    text-align: center;
    text-align: left;
    font-weight: 600;
    line-height: 3.68vw;
    background-color: rgba(0,0,0,0);
    /*border: 1px solid black;*/
    z-index: 2;
    padding: 1.84vw;
    padding-bottom: 0;
    margin-bottom: 4.6vh;
    transition: 1s ease-out;
    opacity: 0;
    left: -10vw;
}

#contacts-description-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 65%;
    background-color: #FBE604;
    transition: 1s ease-out;
}

#contacts-description-text {
    position: relative;
    padding-left: 0.92vw;
    padding-right: 0.92vw;
    margin-top: 0vh;
    font-size: 1.564vw;
    text-align: justify;
    font-weight: 350;
    line-height: 2.3vw;
    transition: 1s ease-out;
    opacity: 0;
    left: -10vw;
}

#contacts #contacts-panel {
    /*border: 1px solid blue;*/
    position: relative;
    transition: 1s ease-out;
    left: 30vw;
    opacity: 0;
    padding-top: 5%; 
}

#contacts-panel h2{
    margin-bottom: 0;
    position: relative;
}



#contacts-navbar {
    height: auto;
    margin-top: 2.76vh;
    padding-bottom: 4.6vh;
    list-style-type: none;
    box-sizing: border-box;
}

#contacts-navbar .contacts-navbar-element {
    position: relative;
    /*border: 2px solid brown;*/
    padding-top: 2.76vh;
    padding-bottom: 2.76vh;
    width: 50%;
    list-style: none;
    box-sizing: border-box;
    margin: 0 auto;
    float: left;
    font-size: 1.38vw;
    font-weight: 600;
    text-align: center;
    z-index: 2;
    background-color: rgba(0,0,0,0);
    transition: 1s ease-out;
}

#contacts-navbar .contacts-navbar-element:hover {
    cursor: pointer;
    transform: scale(1.1);
}

#contacts-navbar #contacts-bg {
    position: absolute;
    z-index: 1;
    background-color: #FBE604;
    width: 22.54vw;
    height: 9.2vh;
    transition: 0.5s ease-out;
    left: 100vw;
}

#contacts-forms-container {
    /*border: 1px solid orange;*/
    position: relative;
    height: 46vh;
    margin-top: 4.6vh;
    padding-bottom: 0;
    box-sizing: border-box;
    list-style-type: none;
}

.contacts-form {
    /*position: absolute;*/
    position: relative;
    box-sizing: border-box;
    list-style: none;
    float: left;
    padding-top: 2.76vh;
    padding-bottom: 2.76vh;
    margin: 0 auto;
    font-size: 1.38vw;
    font-weight: 600;
    text-align: center;
    z-index: 2;
    background-color: rgba(0,0,0,0);
    transition: 1s ease-out;
    left: 0;
    top: 0;
    height: 46vh;
    overflow: hidden;
    width: 0;
}

#call-form {
    width: 100%;
    /*background-color: aqua;*/
}

#write-form {
    width: 0%;
    /*background-color: bisque;*/
}

.phones-list h2 {
    position: relative;
    font-size: 1.84vw;
    font-weight: 500;
    text-align: left;
    left: 1.84vw;
    margin-top: 0.92vh;
    margin-bottom: 0;
    overflow: hidden;
    min-width: 23vw;
}

.phones-list hr {
    position: relative;
    border: 0.1vw solid #FBE604;
    background-color: #FBE604;
    left: 1.84vw;
    padding-left: 0;
    margin-left: 0;
    margin-top: 0.46vh;
    margin-bottom: 3.68vh;
}

.phones-list-line {
    width: 17.48vw;
}

.messangers-list-line {
    width: 20.24vw;
    /*left: 1vw;*/
}


#call-form .phones-list {
    position: relative;
    width: 50%;
    box-sizing: border-box;
    float: left;
}

.phone {
    position: relative;
    box-sizing: border-box;
    height: auto;
    left: 1.84vw;
    margin-top: 0.92vh;
    margin-bottom: 0.92vh;
    /*border: 1px solid green;*/
}

#messengers-list h2 {
    left: 1.84vw;
}

#messengers-list .phone {
    left: 1.84vw;
}

.phone .phone-icon {
    position: relative;
    /*border: 1px solid blue;*/
    width: 2.116vw;
    height: 2.116vw;
    box-sizing: border-box;
    float: left;
    top: 1vh;
}

.phone .phone-number {
    position: relative;
    /*border: 1px solid green;*/
    min-width: 12.88vw;
    height: 2.76vw;
    text-align: left;
    margin-left: 2.76vw;
    top: 1.38vh;
    box-sizing: border-box;
}

#lifecell .phone-icon{
    background: url(../images/logos/lifecell.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

#kyivstar .phone-icon{
    background: url(../images/logos/kyivstar.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

#vodafone .phone-icon{
    background: url(../images/logos/vodafone.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

#telegram .phone-icon{
    background: url(../images/logos/telegram.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

#viber .phone-icon{
    background: url(../images/logos/viber.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

#whatsapp .phone-icon{
    background: url(../images/logos/whatsapp.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

#email .phone-icon{
    background: url(../images/logos/email.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

#telegram:hover .link, #viber:hover .link, #whatsapp:hover .link, #email:hover .link{
    cursor: pointer;
    text-decoration: underline;
}