/*................................reset...........................................*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
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:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*................................clearfix...........................................*/
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix {
	display: inline-block;
}

body{ 
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  /*font-family: 'Raleway', sans-serif;*/
}
header{
  position: absolute;
  width: 100%;
  padding-top: 50px;
}
#banner{
  background: url(../img/banner.jpg) no-repeat center center;  
  background-size: cover;       
  text-align: center;
  padding: 200px 0 160px;
}
.social{
  float: right;
}
.social i{
 background-color: #fff;
 width: 26px;
 height: 26px;
 border-radius:50%; 
 color: #081217;
 border:1px solid #fff;
 text-align: center;
 line-height: 25px;
 margin-left: 5px;
 cursor: pointer;
}
.social i:hover{color:#fff; transition: all 0.5s;background-color:#081217;border:1px solid #fff;}
h1{
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 45px;
  color: #fff;
  line-height: 100px;
}
span{
 font-size: 45px;
 font-weight: 700;
 color: #0199e6;
}
span.bus{ 
 color: #fff;
}
p{
 font-size: 20px;
 color: #fff;
 line-height: 28px;
}
.register{
  padding: 27px;
  background-color: #020709;
  margin: 70px 70px 0;
}
input{
  background: transparent; 
  border:1px solid #0199e6; 
  border-left:4px solid #0199e6; 
  border-radius: 3px;
  height: 55px;
  margin-right: 15px;
  width: 24%;
  padding-left: 15px;
  color: #fff;
}
input:focus{
 border-color: #fff;
 box-shadow: 0 0 3px #fff;
}
button{
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  border:1px solid #0199e6; 
  background-color: #0199e6;
  border-radius: 3px;
  color: #fff;
  height: 55px;
  width: 20%;
}
button:hover{
 border: 1px solid #0199e6;
 background:#fff;
 color: #0199e6;
 transition: all 0.5s;
}
.innerregister{
  font-size: 15px;
  text-align: right;
  padding: 15px 200px 0;
}
#explore,#product,#features,#video,#screenshot,#trusted{
  padding: 100px 0;
}
#pricing{
  padding: 60px 0 100px;
}
img.innerimg{
  width: 100%;
  display: block;
}
h2{
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size:35px; 
}
h3{
 font-family: 'Raleway', sans-serif;
 font-weight: 700;
 font-size:16px;
 padding-bottom: 15px;
}
.aside p,#features p,#pricing p,#video p,#screenshot p,#trusted p{
  font-size: 16px;
  color:#7b7b7b;
  line-height: 25px;
  padding-bottom: 40px;
}
.innerleft{
  width: 10%;
  float: left;
  min-height: 70px;
}
.line{
  margin: 30px 0;
  display: block;  
  width: 70px;
  height: 1px;
  background: #0199e6;
}
#features,#pricing,#video,#screenshot,#trusted,footer{
  text-align: center;
}
#features p.titlep, #pricing p.titlep,#video p.titlep,#screenshot p.titlep,#trusted p.titlep{
  font-size: 17px;
}
#features .line,#pricing .line,#video .line,#screenshot .line,#trusted .line{
  margin: 20px auto;
}
#features h3,#pricing h3,footer h3{
  font-size: 20px;
  font-weight: 600;
  padding: 35px 0 20px;
}
article{
  padding-top: 60px;
}
.basic{
  background-color: #323232;
  padding: 25px 0;
}
#pricing .basic h3{
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  padding: 0 0 10px;
}
#pricing .innersubmit h3{
  font-size: 24px;
  font-weight: 600;
  color: #323232;
  padding: 0;
}
#pricing .basic p.innerbasic{
 color: #fff;
 padding: 0;
}
#pricing .basic span{  
  font-size: 16px;
  color: #0199e6;
}
#pricing .innerinfo span{  
  font-size: 16px;
  color: #323232;
  float: right;
}
#pricing .innerinfo p.infop{
 color: #696969;
 padding: 0;
 text-align: left;
 padding: 15px 25px;
 border-bottom: 1px dotted #e5e5e5;
}
#pricing .innerinfo p.p-signup{
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #323232;
  line-height: 38px;
}
#pricing .innerinfo{
  border:1px solid #e5e5e5; 
}
button.signup{
 font-family: 'Raleway', sans-serif;
 float: right;
 height: 40px;
 width: 33%;
 font-weight: 700;
 font-size: 16px;
 background-color: #fff;
 color: #727272;
 border: 1px solid #727272;
}
#pricing article:hover button{
  border: 1px solid #0199e6;
  background:#0199e6;
  color: #fff;
  transition: all 0.5s;
}
#pricing article:hover .basic{
  background:#0199e6;
  color: #fff;
  transition: all 0.5s;
}
#pricing article:hover .basic span{
 color: #fff;
 transition: all 0.5s;
}
#video h3{
  font-size: 18px;
}
#video h3 i{
  color: #0199e6;
  padding-right: 10px;
}
#video iframe{
  width:1000px; 
  height:532px;
  padding: 50px 0;
}
#trusted img{
  display: inline-block;
  margin: 0 20px;
}
#trusted p{
  padding-bottom: 75px;
}
#trusted article p{
  font-style: italic;
  padding: 30px 0;
}
#trusted article {
  padding-top: 80px;
}
.bubble {
  position: relative;
  width: 100%;
  height: 10px;
  padding: 0px;
  background: #FFFFFF;
  border-bottom: #e5e5e5 solid 2px;
}
.bubble:after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 165px;
  border-style: solid;
  border-width: 17px 20px 0;
  border-color: #FFFFFF transparent;
  display: block;
  width: 0;
  z-index: 1;
}
.bubble:before {
  content: "";
  position: absolute;
  top: 9px;
  left: 165px;
  border-style: solid;
  border-width: 17px 20px 0;
  border-color: #e5e5e5 transparent;
  display: block;
  width: 0;
  z-index: 0;
}
#trusted a{
  text-decoration: none;
}
h4{
  font-size: 16px;
  font-weight: 700;
  color: #0199e6;
  padding-top: 30px;
}
#trusted p.innerblog{
  font-size: 13px;
  font-weight: 400;
  font-style: initial;
  padding: 0;
}
#contact{
  background: url(../img/contact.jpg) no-repeat center center;  
  background-size: cover;       
  text-align: center;
  padding: 130px 0 120px;
}
#contact h3{
  font-family: 'Raleway', sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  padding-bottom: 0;
}
#contact h4{
  font-family: 'Raleway', sans-serif;
  color: #fff;
  font-size: 35px;
  font-weight: 700;
  padding-bottom: 50px;
}
#contact button i{
  margin-left: 10px;
  font-size:17px;   
}
#contact button{
  width: 185px;
  height: 50px;
}
footer{
  padding: 50px 0 80px;
}
footer h3{
  font-size: 24px;
}
footer h4{
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding: 0;
  line-height: 25px;
}
footer h4 i{
  margin-right:5px;
}
footer img{
  padding: 150px 0 15px;
}
footer p.copy{
  font-size: 16px;
  color: #919191;
}
.footersocial i{
 background-color: #919191;
 width: 26px;
 height: 26px;
 border-radius:6px; 
 color: #fff;
 border:1px solid #fff;
 text-align: center;
 line-height: 25px;
 margin-left: 5px;
 cursor: pointer;
}
.footersocial i:hover{color:#008ed6; transition: all 0.5s;background-color:#fff;border:1px solid #008ed6;}
.footersocial{
  padding: 20px 0 0;
}
footer a{
  text-decoration: none;
  color: #919191;
}
footer .copy a:hover{
  color:#008ed6; 
  transition: all 0.5s;
}
.btn-scroll-to-top {
  background-color: transparent;
  display: none;
  color:#fff;
  position: fixed;
  background:#0199e6;
  bottom: 25px;
  right: 25px;
  height:50px;
  width:50px;
  border-radius:5px;
  padding: 5px;
  font-size: 32px;
  text-align: center;
  text-decoration: none;
  border: 2px solid #0199e6;
}
.btn-scroll-to-top:hover{
  background-color: #fff;
  color:#0199e6;
  border: 2px solid #0199e6;
  transition: all 0.5s;
}

/*EFFECT*/
.os-animation {
  opacity: 0;
}
.os-animation.animated {
  opacity: 1;
}
.staggered-animation {
  opacity: 0;
}
.staggered-animation.animated {
  opacity: 1;
}

/*LOADER EFFECT*/
/*Paste this css to your style sheet file or under head tag*/
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #0199e6;
}
.cssload-loader{
  position: relative;
  width: 12px;
  height: 12px;
  left: 46%;
  top: 50%;
  left: calc(50% - 6px);
    left: -o-calc(50% - 6px);
    left: -ms-calc(50% - 6px);
    left: -webkit-calc(50% - 6px);
    left: -moz-calc(50% - 6px);
  
  border-radius: 12px;
  background-color: rgb(255,255,255);
  transform-origin: 50% 50%;
    -o-transform-origin:  50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin:  50% 50%;
  animation: cssload-loader 1.15s ease-in-out infinite;
    -o-animation: cssload-loader 1.15s ease-in-out infinite;
    -ms-animation: cssload-loader 1.15s ease-in-out infinite;
    -webkit-animation: cssload-loader 1.15s ease-in-out infinite;
    -moz-animation: cssload-loader 1.15s ease-in-out infinite;
}

.cssload-loader:before{
  content: "";
  position: absolute;
  background-color: rgb(0,124,229);
  top: 0px;
  left: -24px;
  height: 12px;
  width: 12px;
  border-radius: 12px;
}

.cssload-loader:after{
  content: "";
  position: absolute;
  background-color: rgb(0,124,229);
  top: 0px;
  left: 24px;
  height: 12px;
  width: 12px;
  border-radius: 12px;
}




@keyframes cssload-loader{
    0%{transform:rotate(0deg);}
    50%{transform:rotate(180deg);}
    100%{transform:rotate(180deg);}
}

@-o-keyframes cssload-loader{
    0%{-o-transform:rotate(0deg);}
    50%{-o-transform:rotate(180deg);}
    100%{-o-transform:rotate(180deg);}
}

@-ms-keyframes cssload-loader{
    0%{-ms-transform:rotate(0deg);}
    50%{-ms-transform:rotate(180deg);}
    100%{-ms-transform:rotate(180deg);}
}

@-webkit-keyframes cssload-loader{
    0%{-webkit-transform:rotate(0deg);}
    50%{-webkit-transform:rotate(180deg);}
    100%{-webkit-transform:rotate(180deg);}
}

@-moz-keyframes cssload-loader{
    0%{-moz-transform:rotate(0deg);}
    50%{-moz-transform:rotate(180deg);}
    100%{-moz-transform:rotate(180deg);}
}