html, body{
background-color: #ffffff;
color: #687689;
font: normal 16px/1.5 Lato, helvetica, arial, sans-serif;
margin: 0;
padding: 0;
border: 0;
}

h1{
font-size: 2em;
font-family: Comfortaa, helvetica, arial, sans-serif;
font-weight: 700;
color: #5874DB;
margin: 0.2em 0 0 0;
}

h2{
font-size: 1.5em;
font-weight: 400;
color: #9BD3F9;
}

a{
text-decoration: none;
}

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

#main{
background: #4A65BC url(img/background.svg) no-repeat;
background-position: 50% 50%;
background-size: auto 100%;
color: #fff;
}

.container{
display: block;
margin: 0 auto;
width: 60em;
}

#logo{
width: 110px;
float: left;
margin: 45px 0 0 0;
}

#logo img{
float: left;
width: 100%;
}

#nav{
float: right;
margin: 50px 0 0 0;
padding: 0;
}

#nav li{
float: left;
font-family: Comfortaa, helvetica, arial, sans-serif;
font-size: 1em;
list-style: none;
}

#nav li a{
color: #fff;
margin: 0 1em;
}

#nav li a:hover{
border-bottom: 1px solid #fff;
}

#nav li a.button{
background-color: #faad4d;
padding: 0.6em 1.2em;
border-radius: 2em;
font-size: 0.9em;
}

#nav li a.button:hover{
background-color: #ffbf5f;
text-decoration: none;
border: 0;
}

#intro{
float: left;
text-align: center;
width: 100%;
}

#intro h1{
font-size: 2.65em;
margin: 3.5em 0 0 0;
padding: 0;
line-height: 1.2em;
color: #fff;
}

#intro h2{
margin: 0 0 1em 0;
padding: 0;
font-weight: 300;
}

#intro input.text{
background-color: #fff;
color: #4A65BC;
border: 2px solid #4052BC;
box-sizing: border-box;
display: inline-block;
width: 24em;
padding: 0 1.5em;
height: 3em;
font-size: 1.1em;
border-radius: 0.5em;
font-family: Lato, helvetica, arial, sans-serif;
}

#intro .button{
background-color: #263A8E;
color: #fff;
display: inline-block;
height: 3em;
border-radius: 0.5em;
padding: 0 2em;
line-height: 3em;
font-size: 1.1em;
margin-left: 0.5em;
cursor: pointer;
border: none;
font-family: Lato, helvetica, arial, sans-serif;
}

#intro .button:hover{
background-color: #051A7F;
}

#features{
float: left;
width: 100%;
margin-top: 9em;
padding-bottom: 6em;
}

#features h3{
font-size: 1.1em;
margin: 0;
padding: 0;
font-weight: 400;
display: inline;
vertical-align: middle;
margin-left: 0.5em;
}

#features img{
width: 2em;
display: inline-block;
vertical-align: middle;
}

#features p{
font-size: 0.875em;
margin: 0.5em 0 0 0;
padding: 0;
font-weight: 300;
line-height: 1.4;
color: #9BD3F9;
padding-left: 3.1em;
}

.feature{
width: 33%;
float: left;
box-sizing: border-box;
}

.feature1{
width: 32%;
padding-right: 3%;
}

.feature2{
width: 36%;
padding: 0 4.5%;
border-left: 1px solid #6D97C9;
border-right: 1px solid #6D97C9;
}

.feature3{
width: 32%;
padding-left: 3%;
}

#logos{
background: #D1E1ED url(img/background2.svg) no-repeat;
background-position: 50% 50%;
background-size: 100% auto;
}

#logos .col{
float: left;
width: 40%;
margin: 6em 0;
}

#logos img{
float: right;
width: 60%;
margin: -4em -4em -5em 0;
-webkit-filter: drop-shadow( 1px 3px 5px #D1E1ED ); 
filter: drop-shadow( 1px 3px 5px #D1E1ED );
}

#ai{
padding-bottom: 5em;
}

#ai .col{
width: 50%;
float: right;
margin-right: 16%;
margin-top: 7em;
}

#ai img{
width: 70%;
float: left;
margin-left: 9%;
margin-top: -15%;
}

#mail{
text-align: center;
padding-bottom: 8em;
}

#mail hr{
width: 5em;
border: 0;
border-top: 3px solid #D3D3D3;
display: inline-block;
margin: 3em 0;
}

#mail h1, #mail .col{
width: 60%;
display: inline-block;
}

#email-input{
    color: #181818;
    border: 2px solid #4A65BC;
    padding: 0.5em 1em;
    font-size: 1em;
    border-radius: 0.5em;
    margin-top: 1em;
}

#mail .btn{
    background-color: #F75497;
    color: #fff;
    font-size: 1em;
    padding: 0.5em 1em;
    border: 0;
    margin-top: 1em;
    border-radius: 0.5em;
}

#mail .btn:hover{
    background-color: #F964A7;
}

.promo{
box-sizing: border-box;
width: 46%;
margin: 2%;
padding: 0 4em;
background-color: #000;
float: left;
min-height: 20em;
cursor: pointer;
border-radius: 1em;
font-size: 0.9em;
text-align: center;
}

.promo img{
width: 70%;
display: block;
margin: 2em auto;
}

.promo:hover{
opacity: 0.8;
box-shadow: 1px 1px 5px rgba(0,0,0,0.2)
}

@media only screen and (max-width : 1090px) {
    .container{
    width: 50em;
    }
}

@media only screen and (max-width : 950px) {
    .container{
    width: 100%;
    padding: 0 3em;
    box-sizing: border-box;
    }
    #logos{
    background-size: cover;
    }
    #logos img{
    float: right;
    width: 60%;
    margin: 2em -2em -5em 0;
    }
}

@media only screen and (max-width : 768px) {
    #logos .col, #mail .col{
    width: 100%;
    margin-top: 3em;
    margin-bottom: 1em;
    }
    #logos h1{
    text-align: center;
    }
    #logos img{
    float: left;
    clear: both;
    width: 80%;
    margin: 0 0 2em 10%;
    }
    #features{
    margin-top: 3em;
    }
    #features .feature{
    width: 50%;
    border: 0;
    padding: 0 2em;
    margin-top: 3em;
    }
    #mail h1{
    width: 100%;
    }
    .promo{
    width: 100%;
    margin: 2em 0 0 0;
    min-height: 0;
    padding-bottom: 2em;
    }

    .promo img{
    width: 50%;
    }
}

@media only screen and (max-width : 720px) {
    #logo, #nav{
    float: none;
    display: block;
    margin: 1.5em auto;
    }
    #nav li{
    width: 100%;
    margin: 1em 0 0 0;
    padding: 0;
    text-align: center;
    }
    #intro h1{
    font-size: 2em;
    }
    h2{
    font-size: 1.2em;
    }
    #intro input{
    margin-top: 1em;
    }
    #features .feature{
    width: 100%;
    padding: 0;
    margin-top: 2em;
    }
    #ai .col{
    width: 100%;
    margin: 3em 0 1em 0;
    }
    #ai h1{
    text-align: center;
    }
    #ai img{
    width: 100%;
    margin: 0;
    }
    
    .promo img{
    width: 60%;
    }
}

@media only screen and (max-width : 570px) {
    #intro h1{
    font-size: 1.5em;
    }
    h2{
    font-size: 1em;
    }
    #intro input.text{
    width: 100%;
    }
    .promo img{
    width: 90%;
    }
}

@media only screen and (max-width : 480px) {
    .container{
        padding-left: 1em;
        padding-right: 1em;
    }
}