*{ margin:0; padding:0; border:0; outline:0;}
table { border-collapse:collapse; border-spacing:0; }
ol,ul,menu { list-style:none; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }

a{color: #fff; text-decoration: none;}
a:link {color: #fff;}
a:visited {color: #fff}
a:active {color: #fff}

body {
    font-family: 'Sintony', 'sans-serif';
    color: #6a7d87;
    font-size: 15px;
    height: 100%;
    min-height: 100%;
    position: relative;
}

html, body {
    height: 100%;
}

.top-part{
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -100px;
}

.top-part:after {
    content: "";
    display: block;
}

.footer, .top-part:after {
    height: 100px;
}

.wrap{
    width: 1020px;
    margin: 0 auto;
}

.content{
    float: left;
    width: 100%;
}

.header{
    float: left;
    width: 100%;
    padding-top: 67px;
}


.top{
    background: url("images/bg.svg") no-repeat 213px 55px;
    min-height: 500px;
}

.no-svg .top{
    background: url("images/bg.png") no-repeat center 15px;
}

.middle{
    float: left;
    width: 100%;
    margin-top: 55px;
    margin-bottom: 50px;
}

.middle h1{
    font-size: 60px;
    color: #fff;
    font-family: 'Exo2ExtraBold';
}

.middle h1 span{
    font-family: 'GreatVibesRegular';
    font-size: 82px;
}

.middle h2{
    font-size: 40px;
    color: #fff;
    font-family: 'Exo2Light';
    margin-top: -15px;
}

.box{
    width: 47.058823529411764%;
    float: left;
    padding-top: 15px;
    border-top: 1px solid #fff;
    margin-bottom: 65px;
    color: #fff;
    font-size: 20px;
    font-family: 'Exo2Light';
}

.box p{
    line-height: 30px;
}

.box  strong{
    font-family: 'Exo2ExtraBold';
}

.box a{
    font-family: 'Exo2LightItalic';
    text-decoration: underline;
}

.box .contact{
    width: 100%;
    text-align: center;
    padding: 50px 0;
    background: url("images/contact-bg-normal.png");
    font-size: 28px;
    font-family: 'Exo2Light';
    float: left;
    border: 1px solid #fff;
    margin-top: 30px;
    text-decoration: none;
}

.box .contact:hover{
    width: 100%;
    text-align: center;
    background: url("images/contact-bg.png");
}

.box-right{
    float: right;
}

.footer{
    float: left;
    width: 100%;
    background: url("images/footer-bg.png");
    min-height: 100px;
}

.footer-logos{
    float: left;
    width: 33.82352941176471%;
}

.logo{
    float: left;
    text-indent: -99999px;
    margin-top: 27px;
    background-position:  center top;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.logo1{
    width: 42px;
    height: 42px;
    background: url("images/linkedin.svg");
    margin-left: 11.884057971014493%;
}

.logo2{
    width: 42px;
    height: 42px;
    background: url("images/maill.svg");
    margin-left: 4.3478260869565216%;
}

.logo3{
    width: 155px;
    height: 37px;
    background: url("images/logo-footer.svg");
    margin-left: 6.666666666666667%;
    margin-top: 30px;
}

.no-svg .logo1{
    width: 42px;
    height: 42px;
    background: url("images/linkedin.png");
    margin-left: 11.884057971014493%;
}

.no-svg .logo2{
    width: 42px;
    height: 42px;
    background: url("images/mail.png");
    margin-left: 4.3478260869565216%;
}

.no-svg .logo3{
    width: 155px;
    height: 35px;
    background: url("images/logo-footer.png");
    margin-left: 6.666666666666667%;
    margin-top: 30px;
}

.logo:hover{
    background-position: center bottom;
}

.footer-line{
    float: left;
    width: 32.84313725490196%;;
    background: #fff;
    height: 1px;
    margin-top: 47px;
}

.rights{
    float: right;
}

/************Responsive*************/

@media only screen and (max-width: 1020px){
    .wrap{
        width: 98%;
    }

    .logo1, .logo2, .logo3{
        margin-left: 20px;
    }

    .footer-logos{
        width: 320px;
    }
}

@media only screen and (max-width: 960px){
    .footer-line{
        width: 30%;
    }

    .middle{
        text-align: center;
    }
}

@media only screen and (max-width: 800px){
    .top{
        background-position: center;
    }

    .header{
        text-align: center;
    }

    .middle{
        text-align: center;
    }


    .footer-line{
        width: 29%;
    }
    .box .contact{
        font-size: 24px;
        padding: 25px 0;
    }
}

@media only screen and (max-width: 768px){

    .footer-line{
        width: 25%;
    }

    .box .contact{
        font-size: 24px;
        padding: 30px 0px;
    }
}

@media only screen and (max-width: 690px){
    .middle h1{
        font-size: 50px;
    }

    .middle h2{
        font-size: 35px;
    }

    .box .contact{
        font-size: 23px;
        padding: 25px 0;
    }
}

@media only screen and (max-width: 650px){
    .box .contact{
        font-size: 21px;
        padding: 25px 0;
    }
}

@media only screen and (max-width: 640px){
    .header{
        padding-top: 25px;
    }

    .middle{
        margin-top: 20px;
    }

    .middle h1{
        font-size: 40px;
    }

    .middle h2{
        font-size: 30px;
    }

    .logo1{
        margin-left: 4%;
    }

    .top{
        background-size: 100% auto;
    }
}

@media only screen and (max-width: 550px){
    .middle h1 span{
        font-size: 52px;
    }

    .footer-line{
        display: none;
    }


    .footer-logos {
        width: 317px;
        float: none;
        margin: 0 auto;
    }

}

@media only screen and (max-width: 480px){

    .middle h1 {
        font-size: 30px;
    }

    .middle h2 {
        font-size: 25px;
        margin-top: 0;
    }

    .box{
        width: 90%;
        margin: 0 5%;
        padding-bottom: 30px;
    }

    .footer-logos {
        margin: 0 auto;
        float: none;
    }

    .footer-line {
        width: 15%;
    }

    .middle{
        margin-bottom: 20px;
    }

    .top {
        background-position: center 100px;
    }
}

@media only screen and (max-width: 380px){
    .middle h2 {
        font-size: 22px;
        margin-top: 0;
    }
    .middle h1 {
        font-size: 28px;
    }
}

@media only screen and (max-width: 360px){
    .middle h1 span{
        font-size: 45px;
    }

    .middle h2{
        font-size: 20px;
    }

    .box .contact {
        font-size: 20px;
        padding: 20px 0;
    }

    .footer-line{
        display: none;
    }

}

@media only screen and (max-width: 340px){
    .middle h1 {
        font-size: 20px;
    }

    .middle h2 {
        font-size: 18px;
    }

    .box p {
        line-height: auto;
    }

    .box{
        font-size: 17px;
    }
}