html{height:100%;}
body{text-align: center; font-family: 'Lato', arial, sans-serif; margin: 0; color:#333; -webkit-font-smoothing: antialiased!important; font-smoothing: antialiased; height:100%;}

.clear{clear:both;}

@font-face {
    font-family: 'aleoregular';
    src: url('../type/Aleo-Regular-webfont.eot');
    src: url('../type/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../type/Aleo-Regular-webfont.woff') format('woff'),
         url('../type/Aleo-Regular-webfont.ttf') format('truetype'),
         url('../type/Aleo-Regular-webfont.svg#aleoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*MEDIA*/
img, embed, object, video, iframe{max-width:100%; margin:0 0 1.5em 0;}	
img a{border:none;}
.modal{display: none;}

/*TYPE*/
p{clear:left; font-size: 1.1em; line-height: 1.6em; margin:1em 0;}
ul{clear:left; font-size: 1.1em; line-height: 1.6em; list-style-type: none; padding:0;}
br{clear:both;}
h1, h2, h3{margin:0; font-family: 'aleoregular', Georgia, serif; font-weight: normal;}
h1{text-transform: capitalize;}
p.s-print{font-size: 90%;}
p.l-print{font-size: 140%; margin-top:0.3em;}
a{text-decoration: none; color:#2ca089;}
a:hover{text-decoration: underline;}

a.btn{background: #ff6600; color:#fff; padding:10px; border-radius:5px; text-transform: uppercase; font-size: 0.9em; border:1px solid #ff6600;}
a.btn:hover{background:#ff9955; text-decoration: none;}

a.btn.lrg{font-size: 1.4em; padding:10px 20px;}

a.btn.sbtl{border:1px solid #ff6600; background: #fff; color:#ff6600;}
a.btn.sbtl:hover{background:#fff1eb;}

/*HOME PAGE*/
section, header, footer{width:100%; padding:0; text-align: center; float: left; border-bottom: 1px solid #e6e6e6;}
section:last-child{margin-bottom: 0;}
section h1{margin:0; font-size: 2em;}
.container{width:90%; margin:0 auto; max-width: 940px;}

/*header*/
header{padding:1em 0;}
header img{float:left; margin:0;}
nav{float: right; margin:0.25em 0 0 0; font-size: 0.9em;}
nav ul{margin:0;}
nav ul li{float: left; text-transform: uppercase; margin:0 0 0 2em;}
nav ul li a{color:#333;}
nav ul li a:hover{text-decoration: none; color:#ff6600;}

/*intro*/
section.intro{background-color:#f1f5f5; padding:45px 0;}
.intro p.s-print{margin-bottom: 0;}

/*steps*/
section.steps{background-color:#fff; padding:65px 0 100px 0;}
section.steps h1{margin:0 0 70px 0;}
.third{float:left; width:33.333333%; text-align: center; margin:0 0 0 0; padding:90px 0 0 0;}
.third.step-one{background: url(../i/icon-1.png) top center no-repeat;}
.third.step-two{background: url(../i/icon-2.png) top center no-repeat;}
.third.step-three{background: url(../i/icon-3.png) top center no-repeat;}
.third h2{color:#2ca089;}
.third p{margin:0.5em 10% 0 10%; width:80%;}


/*tabs*/
section.features{background-color:#f1f5f5; padding:45px 0 45px 0;}
section.features h1{margin-bottom: 2em;}

#tabs ul li a{background-position-x: 5px; background-position-y: 50%; background-repeat: no-repeat; text-align: left; display: block; padding:25px 0 25px 90px;}
#tabs ul li a.simple{background-image: url(../i/icon-simple.png);}
#tabs ul li a.templates{background-image: url(../i/icon-templates.png);}
#tabs ul li a.mobile{background-image: url(../i/icon-mobile.png);}
#tabs ul li a.social{background-image: url(../i/icon-social.png);}
#tabs ul li a.analytics{background-image: url(../i/icon-analytics.png);}

h2.resp-accordion {cursor: pointer; display: none; text-align: left;}
.resp-tab-content {display: none; background-color:#f1f5f5;}
.resp-tab-active {background:#2ca089 url(../i/bg-arrow-active.png) center right no-repeat;}
.resp-tab-active a{color:#fff; display: block;}

.resp-vtabs ul.resp-tabs-list {float: left; width: 38%; margin:0 5% 0 0;}
.resp-vtabs .resp-tabs-list li {display: block; padding:0; margin:0 0 10px 0; cursor: pointer; float: none;}
.resp-vtabs .resp-tab-content {padding:0; float: right; width: 57%; text-align: left; margin:0;}
.resp-vtabs li.resp-tab-active a{text-decoration: none;}

.resp-vtabs .resp-tab-content img{margin-left:20px; border:1px solid #ececec;}
.resp-vtabs .resp-tab-content img:first-child{margin-left:0;}


.resp-arrow {
    width: 0;
    height: 0;
    float: right;
    margin-top: 3px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 12px solid #2ca089;
}

h2.resp-tab-active span.resp-arrow {
    border: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid #2ca089;
}

/*samples*/
section.testimony{padding:45px 0 75px 0;}
.customer{float:left; width:80%; margin:45px 10% 0 10%;}
.customer img{float:left; margin-bottom: 0;}
.customer p{float: left; clear: none; margin:15px 0 0 40px; width: 70%; text-align: left;}
img.devices{margin:50px 0 30px 0;}

.three{float:left; width:27%; margin:0;}
.quote{margin:0 0 0 4%;}
.quote p{margin-bottom: 0;}

hr{display: block; height: 1px; border: 0; border-top: 1px solid #ececec; margin: 50px 0; padding: 0; }

/*pricing*/
.pricing{padding:45px 0; background-color:#f1f5f5;}

.plan{float:left; width:35%; margin:30px 0 60px 5%; background: #95cfc4; color:#333;}
.plan p{font-size:1em; margin-top:0;}
.plan p.s-print{font-size: 90%; margin-bottom: 1.8em;}
.plan ul {margin:0; font-size: 1em;}
.plan ul li{border-bottom:1px solid #ececec; padding:0.8em 0;}

.plan:first-child{margin-left: 12.5%;}

.plan .desc{width:50%; padding:5% 10%; margin:0 15% 3em 15%; background: #fff; border-radius:3px;}
.plan .desc p{margin-bottom: 0;}

.price{width:150px; background: #2ca089; margin:-30px auto 1.8em auto; padding:1em 0;}
.price p{color: #fff; text-transform: uppercase; font-size: 2em; margin:0;}
.price p.aside{font-size:0.8em;}

/*footer*/
footer p{float: left; clear: none; margin-right: 20px; font-size: 0.8em; padding:20px 0;}
footer p.social { float: right; }
footer p.social a { text-indent: -999em; margin-left: 1em; background: transparent; width: 32px; height: 32px; display: inline-block; background-position: center center; background-repeat: non-repeat; background-size: cover; border: 3px solid transparent; }
p.social a:hover { border: 3px solid #f60; }
p.social a { -webkit-transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear; }
p.social a.twitter { background-image: url(/assets/i/social-twitter.png); }
p.social a.facebook { background-image: url(/assets/i/social-facebook.png); background-repeat: no-repeat; border: 3px solid #3b5998;}
p.social a.facebook:hover{ border: 3px solid #f60;}
p.social a.youtube { background-image: url(/assets/i/social-youtube.png); }
p.social a.blog { background-image: url(/assets/i/social-blog.png); }


/*BLOG*/
#main-blog{float:right; width:51%; padding:2em 10%; background: #fff; margin:0; text-align: left; min-height: 100%;}
.entry{width:100%; border-bottom:1px solid #ccc; margin:0 0 2em 0;}
#sidebar{float:left; width:25%; text-align: center; padding:2em 2% 2em 2%; position: fixed; background: #2ca089; min-height:100%;}
#sidebar img{max-width: 90%;}
#sidebar p{margin-bottom: 1em; color:#4c3d0f;}
#sidebar ul{list-style: none; padding:0; margin:0;}

#sidebar a{color:#4c3d0f; text-decoration: none;}

#main-blog h1{font-size:2em; line-height: 1em; margin:1em 0; border:none; padding:0; font-weight: normal; color:#2ca089;}
#main-blog h2{font-size:1.7em; line-height:1.3em; margin:2em 0 1em 0; font-weight: normal; color:#2ca089;}
#main-blog h3{font-size:1.5em; line-height:1.3em; margin:2em 0 1em 0; font-weight: normal; color:#2ca089;}
#main-blog h4{font-size:1.4em; line-height:1.3em; margin:2em 0 1em 0; font-weight: normal; color:#2ca089;}
#main-blog h5{font-size:1.3em; line-height:1.3em; margin:2em 0 1em 0; font-weight: normal; color:#2ca089;}
#main-blog p{font-size: 1.18em; line-height: 1.6em; margin:0 0 2em 0; color:#333; font-weight: normal;}
#main-blog ul, ol{font-size: 1.2em; margin:0 0 2em 0;}
#main-blog li{margin:0 0 0.8em 0; line-height: 1.4em;}
#main-blog ol{list-style-type: decimal;}
#main-blog ul{list-style-type: disc;}
#main-blog blockquote{width:100%; border-top:1px solid #2ca089; border-bottom:1px solid #2ca089; padding-top:2em; margin-left:0; margin-bottom: 2em; background: #fffae4;}
#main-blog blockquote p{font-style: italic; margin-bottom: 1.5em; font-size: 1.3em; width: 90%; margin-left: 5%;}
#main-blog table{margin: 0 0 30px 0; max-width: 100%;}
#main-blog p a{text-decoration:none; background-color: #2ca089; font-size: 0.9em; padding:0.15em 0.5em; color:#4d3e0f;}
#main-blog p a:hover{background-color:#4d3e0f; color:#2ca089;}

.center{text-align: center;}
.left{text-align: left;}
.italic{font-style: italic;}

p.date{font-size: 1em; margin:0 0 1em 0;}

/*FORM*/

.capture form label{display:block; width:100%; font-size:0.8em; margin:0 0 5px 0; font-family: 'Roboto', arial, sans-serif; font-weight: 300;}
.capture form input{border:none; width:100%; padding:10px 0; font-size: 1em; color:#808080; text-indent:10px;}
.capture form .row{margin:0 0 1em 0;}
.capture form input[type="submit"]{background:#d40000; border:none; color:#fff; border-radius: 3px; font-size: 1.3em; padding:10px 25px; border-bottom:5px solid #800000; font-family: 'Roboto', arial, sans-serif; font-weight: 300; cursor: pointer;}
.capture form input[type="submit"]:hover{background-color:#aa0000;}
.capture form .terms input{float:left; width:20px; margin-top:0;}
.capture form a{color:#333; border-bottom: 1px solid }

#sidebar form{text-align: center;}

#sidebar input[type="text"],
	#sidebar input[type="password"],
	#sidebar input[type="email"],
	#sidebar textarea,
	#sidebar select {
	margin:0 auto 1em auto; float:none; width:90% !important;}
	
	#sidebar input[type="submit"]{
	margin:0 auto 1em auto; float:none; width:auto;}

p.note, div.error {clear: both; background: red; padding:1em; font-style: normal; font-family: Arial, sans-serif; color:#fff;}
div.error { margin-bottom: 3em; }
p.note a{text-decoration: underline; background-color: red; color:#fff; font-size: 100%; padding:0;}
p.note a:hover{color:#000;}

/*Signup*/

#main-blog form#signup input[type="email"], form#signup input[type="text"], form#signup input[type="password"]{width:500px; border:1px solid #ccc; clear: both; }

form#signup label {display: block; float:left; overflow: auto; width: auto; height: auto; font-family: arial, sans-serif;}

form#signup .row{float:left; width:100%; clear: both;}
form#signup .half{float:left; width:240px; margin:0 20px 0 0;}
form#signup .half:last-child{margin:0;}
form#signup .half input{width:100%;}

form#signup input[type="submit"]{float:left;}

/*REGISTER*/
#register{background: #f9f9f9; color:#4d4d4;}
#registration{float:left; width:100%; text-align: center; margin-top: 2em;}
#registration form{background: #fff; border:1px solid #e6e6e6; text-align: left; width:50%; margin:0 auto 4em auto; padding:5%;}

#registration form label{display:inline block; width:40%; text-align: left; font-size:1em; margin:0 0 10px 0; font-family: 'Roboto', arial, sans-serif; font-weight: 300; padding:0; float: left;}
#registration form p{float:right; text-align: right; width:50%; margin:0; font-size:0.8em; color:#2ca089;}
#registration form input{border:none; width:100%; padding:10px 0; font-size: 1em; color:#808080; text-indent:10px; border:1px solid #ccc;}
#registration form .row{margin:0 0 1em 0;}
#registration form input[type="submit"]{width:auto; background:#d40000; border:none; color:#fff; border-radius: 3px; font-size: 1.3em; padding:10px 25px; border-bottom:5px solid #800000; font-family: 'Roboto', arial, sans-serif; font-weight: 300; cursor: pointer; text-align: left;}
#registration form input[type="submit"]:hover{background-color:#aa0000;}
#registration form .terms input{float:left; width:20px; margin-top:3px;}
#registration form .terms label{float:left; width:80%;}
#registration form a{color:#333; border-bottom: 1px solid }

#registration form .error{background:#fff; padding:0; color:red;}
#registration form .error input{border-color:red;}

#registration .submit{margin:15px 0 0 0;}

/*=============TABLETS - PORTRAIT ==========*/
@media only screen and (min-width: 569px) and (max-width: 959px) {
/*HOME PAGE */

/*REGISTER*/
#registration form{width:70%; margin:0 10%; padding:5%;}
#registration form label{width:100%;}
#registration form p{float:left; width:100%; text-align: left; margin-bottom:10px;}

}


/*=============PHONES==========*/
@media only screen and (max-width: 568px) {


/*HOME PAGE */
section.intro p.l-print{margin-bottom: 45px;}

section.steps h1{margin-bottom: 40px;}
section.steps{padding:40px 0;}
.third{width:100%;}
.third h2{margin:0 0 0 65px;}
.third p{margin:0 0 0 65px; width: auto;}
.third.step-one{background: url(../i/icon-1-small.png) top left no-repeat; padding:0 0 50px 0; text-align: left;}
.third.step-two{background: url(../i/icon-2-small.png) top left no-repeat; padding:0 0 50px 0; text-align: left;}
.third.step-three{background: url(../i/icon-3-small.png) top left no-repeat; padding:0 0 0 0; text-align: left;}

.customer{float:left; width:100%; margin:45px 0 0 0; text-align: center;}
.customer img{float:none;}
.customer p{float: none; clear: none; margin:15px 0 0 0; width: 100%; text-align: center;}

section.testimony{padding-bottom: 30px;}
.three{width:100%; margin:0 0 30px 0;}
.quote{margin:0 0 30px 0; padding:0 0 30px 0; border-bottom: 1px solid #ececec;}
.quote:last-child{border:none; padding-bottom: 0; margin-bottom:0;}

h2.resp-tab-active a{ color: #2ca089;}
.resp-tab-active {background-image:none; background-color:#f1f5f5;}
.resp-easy-accordion  h2.resp-accordion {display: block;}
.resp-jfit {width: 100%; margin: 0px;}
.resp-tab-content-active{display: block; }
.resp-tab-active {display: block; border:none;}
.resp-vtabs .resp-tabs-list li {display: block; cursor: pointer; float: none;}
ul.resp-tabs-list {display: none;}
h2.resp-accordion {display: block; border-bottom: 1px solid #2ca089; padding:10px 0 10px 0; margin:10px 0 10px 0; }
h2.resp-accordion.resp-tab-active{border:none;}

.resp-vtabs .resp-tabs-container {width: 100%; min-height: initial;}
.resp-accordion-closed {display:none !important;}
.resp-vtabs .resp-tab-content {width: 100%;}

.resp-vtabs .resp-tab-content img{border:1px solid #ececec; width:45%; margin:0 0 0 5%;}
.resp-vtabs .resp-tab-content img:first-child{margin-left:0;}

.plan{width:100%; margin: 0 0 25px 0;}
.plan:first-child{margin-left: 0%;}
.price{width:100%; margin:0 0 25px 0;}

/*REGISTER*/
#registration form{width:80%; margin:0 5%; padding:5%;}
#registration form label{width:100%;}
#registration form p{float:left; width:100%; text-align: left; margin-bottom:10px;}
}