@import url('https://fonts.googleapis.com/css?family=Open+Sans|Raleway');

/* Eric Meyer Reset CSS */ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* End of Reset CSS */

body{
 font-size: 0;
 background-color: #11087B;
 background-image: url(../../images/bg_landingpage.jpg);
 background-position: bottom center;
 background-size: contain;
 background-repeat: no-repeat;
 padding-bottom: 20vh;
 padding-top: 40px;
 min-height: calc(80vh - 40px);
}

body,input,textarea,button{
 font-family: 'Raleway', sans-serif;
}
i:not(.icon),
nav > div > a:hover{
 color: #00D6BC;
}



main{
 position: relative;
 display: block;
 width: 88%;
 max-width: 900px;
 margin-left: 10%;
 text-align: left;
}
@media (max-width: 1100px) {
 main{
  width: 100%;
  margin: 0 auto;
 }
}
main > a{
 position: relative;
 display: block;
 margin: 0 0 40px 8%;
 text-decoration-line: none;
 width: 220px;
}
main > a > span{
 position: relative;
 display: inline-block;
 background-color: #FFF;
 border-radius: 50%;
 width: 50px;
 height: 50px;
 line-height: 46px;
 vertical-align: middle;
 text-align: center;
 font-size: 32px;
 font-family: monospace,arial;
 margin-right: 12px;  
}
main > a > i{
 position: relative;
 display: inline-block;
 font-size: 13px;
 line-height: 1.8;
 font-weight: 100;
 vertical-align: middle;
}

main > form{
 position: relative;
 display: block;
 background-color: #FFF;
 padding: 30px 0;
}
main > form > label{
 position: relative;
 display: block;
 margin: 25px 0 25px 7%;
}
main > form > label > span{
 position: relative;
 display: inline-block;
 width: 130px;
 font-size: 14px;
 text-transform: uppercase;
 color: #000;
 margin-right: 20px;
 vertical-align: middle;
 text-align: right;
}
@media (max-width: 479px) {
 main > form > label > span{
  text-align: left;
 }
}
main > form > label > input{
 position: relative;
 display: inline-block;
 border: 0;
 border-bottom: 1px solid #999;
 min-width: 280px;
 width: calc(98% - 150px);
 max-width: 500px;
 font-size: 18px;
 line-height: 1.2;
 vertical-align: middle;
 margin: 10px 0;
}
main > form > button{
 position: relative;
 display: inline-block;
 background-color: #00D6BC;
 color: #FFF;
 text-transform: uppercase;
 font-size: 13px;
 line-height: 1.6;
 padding: 20px 30px;
 width: 160px;
 text-align: left;
 margin-left: calc(100% - 200px);
 left: 5vw;
 border: 0;
 cursor: pointer;
}
main > form > button > span{
 position: absolute;
 display: block;
 margin: auto 0;
 right: 30px;
 top: 0;
 bottom: 0;
 width: 32px;
 height: 32px;
 line-height: 30px;
 font-size: 26px;
 text-align: right;
}