@import url("http://fonts.googleapis.com/css?family=Rajdhani:500,700&display=swap");
*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    -webkit-box-align: center;
    align-items: center;
    background: hsl(0, 10%, 94%);
    background-color: #42378f;
    background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%);
    display: -webkit-box;
    display: flex;
    font-family: "Rajdhani", sans-serif;
    height: 100vh;
    -webkit-box-pack: center;
    justify-content: center;
}

.contact-wrapper {
    background: #fff;
    box-shadow: 3px 3px 5px rgb(0, 0, 0, 0.15);
    border-radius: .75em;
    padding: 4em 2em;
    width: 60em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.left_side,
.right_side {
    width: 50%;
    padding: 0 3em;
}

.right_side>h2 {
    color: #3e3f5e;
    font-size: 1.75em;
    text-align: center;
}

form {
    margin: 2em 0;
}

form>.form-row {
    display: -webkit-box;
    display: flex;
    margin: .75em 0;
    position: relative;
}

form>.form-row>span {
    background: #fff;
    color: gray;
    display: inline-block;
    font-weight: 400;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

form>.form-row>input,
form>.form-row>button {
    border-radius: .5em;
    padding: 1em .5em;
    width: 100%;
    font-family: inherit;
}

form>.form-row>input {
    font-weight: bold;
    -webkit-transition: 100ms ease all;
    transition: 100ms ease all;
    width: 100%;
}

form>.form-row>input[ type=text],
form>.form-row>input[type=password] {
    border: .075em solid #ddd;
}

form>.form-row>input:valid+span {
    top: 0;
    font-size: .90rem;
}

form>.form-row>input:focus+span {
    top: 0;
    color: #4158D0;
    font-weight: 600;
}

form>.form-row>input:required {
    box-shadow: none;
}

form>.form-row>input:focus {
    border-color: #4158D0;
    outline: none;
}

form>.form-row>input:focus:invalid {
    box-shadow: none;
    top: 50%;
}

form>.form-row>input:focus:valid {
    top: 0;
}

form>.form-row>button {
    background-image: linear-gradient(315deg, #29539b 0%, #1e3b70 74%);
    border: 0.0em solid gray;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    transition: all 300ms ease;
}

form>.form-row>button:focus {
    border: 0.1em solid #80ff72;
    outline: none;
}

form>.form-row>button:hover {
    background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%);
}

.socials-wrapper>h2 {
    background: #fff;
    color: #3e3f5e;
    font-size: 1rem;
    position: relative;
    text-align: center;
    z-index: 10;
}

.socials-wrapper>h2:before,
.socials-wrapper>h2:after {
    background: #d3d3e2;
    content: '';
    display: block;
    height: .10em;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 17.5%;
}

.socials-wrapper>h2:before {
    left: 0;
}

.socials-wrapper>h2:after {
    right: 0;
}

.socials-wrapper>ul {
    display: -webkit-box;
    display: flex;
    list-style: none;
    justify-content: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 0;
}

.socials-wrapper>ul>li {
    margin: .5em;
}

.socials-wrapper>ul>li>a {
    -webkit-box-align: center;
    align-items: center;
    border-radius: 0.9em;
    color: #fff;
    display: -webkit-box;
    height: 2em;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    width: 2em;
}

.socials-wrapper>ul>li>a.facebook {
    background: #3763d2;
}

.socials-wrapper>ul>li>a.linkedin {
    background: rgb(58, 72, 134);
}

.socials-wrapper>ul>li>a.instagram {
    background: linear-gradient(38deg, rgb(237, 19, 19) .00%, rgb(250, 170, 0) 0.00%, rgb(191, 3, 249) 100.00%);
}

.socials-wrapper>ul>li>a.youtube {
    background: #ff0000;
}

.socials-wrapper>ul>li>a:hover {
    -webkit-transform: translateY(-0.50em);
    transform: translateY(-0.50em);
}

@media(max-width:992px) {
    .socials-wrapper>h2:after,
    .socials-wrapper>h2:before {
        width: 10.5%;
    }
}

@media(max-width:767px) {
    .contact-wrapper {
        flex-direction: column;
    }
    .left_side,
    .right_side {
        width: 100%;
        padding: 0 3em;
    }
    .socials-wrapper>h2:after,
    .socials-wrapper>h2:before {
        width: 10.5%;
    }
}