/**************Style*************/
html, body{
background-color: #ffffff;
color: #000;
font: normal 16px/1.5 Helvetica, Arial, sans-serif;
font-family: Verdana;
font-weight: 500;
margin: 0;
padding: 0;
border: 0;
}

h1{
font-size: 2em;
font-weight: 500;
color: #000090;
margin: 0.2em 0 0 0;
}

h2{
font-size: 1.5em;
font-weight: 500;
color: #bBD3F9;
}

a{
text-decoration: none;
}

.section{
float: left;
width: 100%;
background: #f0fffd;
}

#main{
background: #000060;
background-position: 50% 50%;
background-size: auto 100%;
color: #fff;
}

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

#logo{
width: 200px;
float: left;
margin: 27px 0 0 0;
}

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

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

#nav li{
float: left;
font-size: 1em;
list-style: none;
}

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

#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;
font-weight: 500;
}

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

#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;
}

#intro .button{
background-color: #0c7ecc;
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;
}

#intro .button:hover{
background-color: #00c919;
}

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

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

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

#features p{
font-size: 0.95em;
margin: 0.5em 0 0 0;
padding: 0;
font-weight: 400;
line-height: 1.4;
color: #bBD3F9;
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;
padding: 0 0 5em 0;
}

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

#logos img{
float: right;
width: 55%;
height: auto;
margin: 4em 0 0 0;
border-radius: 15px;
-webkit-filter: drop-shadow( 1px 3px 5px #D1E1ED ); 
filter: drop-shadow( 1px 3px 5px #D1E1ED );
}

#ai{
padding: 5% 0 10% 0;
background: #f0fffd;
}

#ai .col{
width: 45%;
float: right;
margin: 2% 0 0 0;
}

#ai img{
width: 45%;
height: auto;
float: left;
margin: 2% -5em 0 0;
border-radius: 15px;
}

.promo{
box-sizing: border-box;
width: 50%;
margin: 2% 0 5% 25%;
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%;
height: auto;
display: block;
margin: 2em auto;
}

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

#footer{
background: #f0fffd;
}

@media only screen and (max-width : 1090px) {
    .container{
    width: 95%;
	padding: 0 2%;
    }
	.feature{
	width: 32%;
}
	#logos .col{
	width: 40%;
	margin: 4em 0 2em 2em;
}
	#logos img{
	width: 50%;	
    margin: 5em 2em 0 0;
    }
	#ai .col{
	width: 45%;
	margin: 2% 3% 0 0;
	}

	#ai img{
	width: 45%;
	margin: 2% 0 0 3%;
	}
}

@media only screen and (max-width : 950px) {
    .container{
    width: 100%;
    padding: 0 2%;
    box-sizing: border-box;
    }
	.promo{
    width: 65%;
	margin: 2% 20%;
	}
	#logos .col, #ai .col{
	width: 90%;
	float: none;
	margin: 4% 0 0 5%;
	}
	#logos img{
	width: 75%;
	float: none;
	margin: 4% 0 0 12%;
	}
	#ai img{
	width: 60%;
	float: none;
	margin: 4% 0 0 20%;
	}
	#features{
    margin-top: 3em;
	}
	#features .feature{
    width: 50%;
    border: 0;
    padding: 0 1em;
    margin-top: 2em;
    }
}

@media only screen and (max-width : 768px) {
	#logos .col, #ai .col{
	width: 90%;
	float: none;
	margin: 4% 0 0 5%;
	}
	#logos img{
	width: 75%;
	float: none;
	margin: 4% 0 0 12%;
	}
	#ai img{
	width: 60%;
	float: none;
	margin: 4% 0 0 20%;
	}
    #logos h1{
    text-align: center;
    }
    #mail h1{
    width: 100%;
    }
    .promo{
    width: 70%;
    margin: 2% 2% 2% 15%;
    min-height: 0;
    padding-bottom: 2em;
    }
	.promo img{
    width: 50%;
    }
}	

@media only screen and (max-width : 720px) {
	html, body{
	font: normal 15px/1.5 Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	}
    #logo, #nav{
    float: none;
    display: block;
    margin: 1.5em auto;
    }
	#nav{
	display: none;
	}
    #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 h1{
    text-align: center;
    }
	#logos .col, #ai .col{
	width: 90%;
	float: none;
	margin: 4% 0 0 5%;
	}
	#logos img{
	width: 90%;
	float: none;
	margin: 4% 0 0 6%;
	}
	#ai img{
	width: 70%;
	float: none;
	margin: 4% 0 0 15%;
	}
	.promo{
    width: 80%;
    margin: 2% 2% 2% 10%;
	padding: 3% 2%;
    }
	.promo img{
    width: 70%;
    }
}

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

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