/* ---------- Default CSS ---------- */
*{margin:0;padding:0}
body{font-family: 'Open Sans', sans-serif;font-size:13px;font-weight:400;background:#fff}
a, a:hover{text-decoration:none}
ul li{list-style:none}
html,body{height:100%}
.container{width:700px;margin:0 auto}
.widecontainer{width:1000px;margin:0 auto}
.slidercontainer{width:1000px;margin:0 auto;height:100%}
.clearfix:before, .clearfix:after{content:"";display:table}
.clearfix:after{clear:both}
.section-padding{padding:20px 0;}
.section-padding-top{padding-top:50px}
.section-padding-bottom{padding-bottom:30px}
.title h1 span{display:block;}
.title h1{font-weight:200;font-size:50px;color:#00C8DC;padding:30px 0;line-height:45px}
p{color:#00C8DC}
h1{font-family:'Kanit', sans-serif;}


/* ---------- Header CSS ------------ */
.header-area{position:absolute;z-index:3;width:100%;color:#fff;}
.menu-aera{position:relative;}
.menu-area .logo {float:left;}


.topnav{float:right;margin-top:5px}
.topnav a{color:#fff;padding-right:20px;display:inline-block;}
.topnav a:hover , .footer-area ul li a:hover{color:#74ebd5;}
.topnav a.active {color:#74ebd5}
.topnav a.icon{display:none}



/* ---------- Slider CSS ------------ */
.slider-area{background:url(images/night-sky-bg.jpg) no-repeat scroll center center / Cover;height:100%;position:relative}
.slider-area:before{content:"";background: #74ebd5;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ACB6E5, #63AFE2, #74ebd5);  /* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(right, #ACB6E5, #63AFE2, #74ebd5);
background: linear-gradient(to left, #ACB6E5, #63AFE2, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
position:absolute;top:0;left:0;height:100%;width:100%;opacity:.90;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"}

.slider-content{color:#fff;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;}
.slider-content .slider-text{width:40%;float:left;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.slider-text h1{color:#fff;text-transform:uppercase;font-size:75px;line-height:85px;font-weight:300}
.phone{width:50%;position:absolute;right:0;bottom:-50px;}
.phone img{width:360px;height:auto}


/* ---------- How IT Works CSS ------------ */

.how-it-works-area{}
.three-column-area{margin-left:-100px}
.single-column{width:calc(33.3333% - 100px);float:left;margin-left:100px}
.single-column p{font-size:13px;font-weight:500}
.single-column span{font-weight:300;font-size:200px;border-bottom:4px solid #00C8DC;display:block;text-align:center;color:#00C8DC;}
.single-column h2{font-family: 'Open Sans', sans-serif;font-size:30px;color:#00C8DC;padding:30px 0;line-height:45px}

/* ---------- Map Area CSS ------------ */
.map{text-align:center;margin:70px 0}
.map img{width:80%;height:auto}

/* ---------- Meet Area CSS ------------ */
.meet-area{background:#5E90E3}
.meet-area h1{color:#fff}
.single-content{position:relative}
.meet-contents {width:80%;margin:0 auto;}
.single-content .icon{width:150px;height:132px;float:left;background:url(images/polygon.png) no-repeat;box-sizing:border-box;text-align:center}
.single-content .icon img{margin-top:30%}



.single-content  .text{width:60%;float:right;}
.single-content .text h2{margin-bottom:35px;color:#fff;text-transform:uppercase;font-weight:400}
.single-content .text p{color:#fff;margin-bottom:40px}


/* ---------- Client Area CSS ------------ */
.client-area .container h1, .request-demo-area .container h1{color:#5E90E3;font-weight:200;font-size:50px;padding:30px 0;line-height:45px}
.client-area .container h1 span, .request-demo-area .container h1 span{display:block}
.client-gallery{width:80%;margin:0 auto}
.single-images{float:left;padding:0 30px}
.single-images img{width:120px;height:auto;opacity:.80;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"}

/* ---------- Stay In Touch Area CSS ------------ */
.stay-in-touch-area{background:#00C8DC;min-height:350px}
.stay-in-touch-content{margin-top:40px}
.stay-in-touch-area .container .title h1{color:#fff}
.stay-in-touch-content .single-stay-content:last-child ul{border:none}
.single-stay-content{float:left;width:33.3333%;}
.single-stay-content ul {border-right:2px solid #fff;margin:0 20px;color:#fff}


/* ---------- Request Demo Area CSS ------------ */
.request-demo-area{}
.request-demo-content{}
.request-demo-area .container h1 {color:#00C7DC}
.request-demo-area .request-demo-content .text {width:30%;float:left}
.request-demo-area .request-demo-content .form {width:60%;float:right}
.request-demo-area .request-demo-content .form input{border:2px solid #00C7DC;border-radius:3px;margin-bottom:5px}
.request-demo-area .request-demo-content .form input[type="email"]{width:100%;padding:5px}
.request-demo-area .request-demo-content .form input[type="text"]{width:100%;padding:40px 5px;size:200}
.request-demo-area .request-demo-content .form input[type="submit"]{width:50px;padding:4px;background:#00C8DC;}
.request-demo-area .request-demo-content .form input[type="submit"]:hover{background:#D3F0F3;}

/* ---------- Footer Area CSS ------------ */
.footer-area{background:#00D2D4;color:#fff}
.footer-area .column{width:calc(25% - 30px); margin-right:30px;float:left;border-top:3px solid #fff}
.footer-area .container div:first-child.column{border:none}
.column h3{margin:30px 0}
.footer-area .logo{float:left;margin-top:-15px}

.footer-area .logo h2{font-size:20px;margin:4px 0 0 40px;font-weight:200}
.footer-area ul {margin:0;padding:0}
.footer-area ul li {line-height:40px}
.footer-area ul li a{color:#fff}

.footer-area .address ul li {line-height:30px}
.footer-area .column .social ul li{display:inline-block}








