#slogan {
    margin-top: 15px;
}

#picOfMe {
    margin-top: 15px;
    margin-bottom: 5px;
    width: 100%;
}

.langbox {
    margin: auto;
    margin-top: 30px;
    height: 180px;
    position: relative;
}


/*#firstThreeLangBox1, #firstThreeLangBox2, #firstThreeLangBox3{
    margin-top: 3px;
}*/

.langbox p {
    font-size: 25px;
    font-weight: 400;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

.footer {
    height: auto;
    background-color: black;
    color: white;
    margin-top: 20px;
}

.col-lg-12#footer {
    text-align: center;
}

.socialIcon {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 15px;
}

#elegooCar {
    padding-left: 10px;
}

.animationBox {
    height: 240px;
    position: relative;
}

.animationBox p {
    font-size: 25px;
    font-weight: 500;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

.blogArticle p {
    font-size: 18px;
}

.mainBody {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.contactForm {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

#messageTxtArea {
    width: 100%;
    height: 105px;
}

@media screen and (max-width: 1024px) {
    .mainBody {
        width: 97%;
    }
}


/*@media screen and (max-width: 991px) {
    #firstThreeLangBox1, #firstThreeLangBox2, #firstThreeLangBox3{
    margin-bottom: 27px;

}
}*/

@media screen and (max-width: 768px) {
    .contactForm {
        width: 100%;
    }
}


/*logo animation*/

@keyframes titleAnimation {
    from {
        font-size: 18px;
    }
    to {
        font-size: 35px;
        letter-spacing: 10px;
        font-weight: 400;
    }
}

#titleAnimation {
    position: relative;
    animation-name: titleAnimation;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

@keyframes one {
    from {
        left: -33%;
    }
    to {
        left: 0%;
    }
}

#one {
    position: relative;
    animation-name: one;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

@keyframes two {
    from {
        left: 0%;
    }
    to {
        left: 33%;
    }
}

#two {
    position: relative;
    animation-name: two;
    animation-delay: 1.5s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

@keyframes three {
    from {
        left: 34%;
    }
    to {
        left: 67%;
    }
}

#three {
    position: relative;
    animation-name: three;
    animation-delay: 3s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}