@import url('https://fonts.cdnfonts.com/css/times-new-roman');

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
    -webkit-box-align: center;
    align-items: center;
    background: #614385;
    background: -webkit-linear-gradient(to right, #516395, #614385);
    background: linear-gradient(to right, #516395, #614385);

    display: -webkit-box;
    display: flex;
    font-family: 'Times New Roman', sans-serif;
    height: 100vh;
    -webkit-box-pack: center;
    justify-content: center;
}
.contact-wrapper {
    /*background: url(/images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;*/

    box-shadow: 3px 3px 2px rgba(255, 253, 253, 0.15);
    border-radius: .75em;
    padding: 4em 2em;
    width: 50em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.title_company {
    color: #fff;
    font-size: xx-large;
}
.title_company_des {
    color: #fff;
    font-size: xx-large;
}
.bg {
    /* The image used */
    background: url(/images/bg.jpg) no-repeat center center;
   /* -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;*/
   /* background-size: 100% 100%;*/

    /* Full height */
    height: 100%;
	 width: 100%;
    /* Center and scale the image nicely */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.left_side,
.right_side{
  width:60%;
  padding:0 3em;
  display: block;
  justify-content: center;
  align-items:center;
  text-align: center;
}
.left_side img{
    position:relative;
    border-radius: .5em;
    color:#fff;
    height:80%;
    transition:all 300ms ease-in-out;
    width:80%;
    top: 10px;
    bottom: 10px;
    transform: rotateY(0deg);
    animation: animationLogo 2s linear infinite;
}

@keyframes animationLogo {
    50%{
        bottom:30px;
        top:-10px;
    }
}

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

.right_side > h3 {
    color: #fff;
    font-size: 1.17em;
    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: #2A3585;
        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;
        border-radius: 5px;
    }
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;
        background: #fff;
        color: #2A3585;
    }
form > .form-row > input:valid + span{
  top:0;
  font-size: .90rem;
}
    form > .form-row > input:focus + span {
        top: 0;
        color: #2A3585;
        font-weight: 600;
    }
form > .form-row > input:required{
  box-shadow: none;
}
    form > .form-row > input:focus {
        border-color: #2A3585;
        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-color: #fff;
        border: .10em solid #FBA824;
        color: #2A3585;
        cursor: pointer;
        font-weight: bold;
        transition: all 300ms ease;
    }
        form > .form-row > button:focus {
            border: 0.1em solid #FBA824; outline:none;
        }
        form > .form-row > button:hover {
            background: #FBA824;
        }
.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;
  -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: .5em;
  color:#fff;
  display:-webkit-box;
  height:2em;
  -webkit-box-pack: center;
  justify-content:center;
  text-align: center;
  text-decoration: none;
  -webkkit-transition:all 300ms ease;
  transition:all 300ms ease;
  width:2em;
}
.socials-wrapper > ul > li > a.facebook{
  background:#3763d2;
}
.socials-wrapper > ul > li > a.twitter{
  background:#1abcff;
}
.socials-wrapper > ul > li > a.instagram{
  background:#ff00aa;
}
.socials-wrapper > ul > li > a.youtube{
  background:#fd434f;
}
.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%
  }

    .right_side > h3 {
        font-size: 0.75rem;
    }
}
@media (max-width:767px){
  .contact-wrapper{
    flex-direction: column;
  }
  .left_side,
  .right_side{
    width:100%;
    padding:0 0.2em;
  }

    .right_side > h3 {
        font-size: 0.5rem;
    }

  .socials-wrapper > h2:after,
  .socials-wrapper > h2:before{
    width:10.5%
  }
}

@media screen and (max-width: 1024px) { 
    .right_side > h3 {
        font-size: 1.5rem;
    }
}