body { font-family: "Open Sans", sans-serif; font-size:16px; }
img { max-width:100%; }

#notification { background: #fff; color: #666; line-height: 1; padding: 7px 0 9px 0; font-size:14px;}
	#notification p{ margin:0; }
header { text-align:center; margin-bottom:10px; background:#171B20; padding:145px 0 125px 0; }
	.logo { margin:0px auto 0px auto; }
	header i { margin:0 10px; font-family: Georgia, "Times New Roman", Times, Baskerville, serif; font-size:1.4em; position: relative; top:2px; color:#637387; }
	.tagline { font-size:15px; font-size:1.5rem; line-height: 1.4em; color:rgba(215, 225, 255, 0.5); margin-top:0px; margin-bottom: 47px; font-family: "Open Sans", Helvetica, Arial; font-weight: 300;  }
	.tagline.vivid { color:rgba(215, 225, 255, 0.9); }
.home header { background:#EEE url(../images/bg_head.jpg) no-repeat top center;  }
	.home header i { color:#999; }
	.home .tagline { color:#a5a5a5; }

.pro #notification { display: none; }
.pro header { margin-bottom:0; padding:35px 0 33px 0; text-align: left;}
	.pro header .logo { margin:0px; position:relative; left:-4px; }
	.pro header .tagline { margin:0; }
	.pro header .tagline.vivid { color:rgba(215, 225, 255, 0.9); }

.free header { margin-bottom:0; padding:35px 0 33px 0; text-align: left;}
	.free header .logo { margin:0px; position:relative; left:-4px; }
	.free header .tagline { margin:0; }
	.free header .tagline.vivid { color:rgba(215, 225, 255, 0.9); }

/* Typography */
h2, h3, h4, h5 { font-family: "Open sans", Arial, "Helvetica Neue", Helvetica, sans-serif; }
h2 { font-weight: 300; margin:30px 0 30px 0;}
h3 { font-weight: 300; margin:30px 0 15px 0;}
h4 { font-weight: 300; margin:30px 0 15px 0;}

p { line-height: 1.5; margin-bottom:25px; }

li { margin-bottom:7px; }

a:hover, a:active { color:#E41919; }

.pagetitle { background:#f2f4f5; padding:25px 0; border-bottom:1px solid #e2e4e5; }
	.pagetitle h1 { font-family: "Open sans", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:22px; margin:0; color:#666; font-weight: bold; }
		.pagetitle h1 b { color:#000; }

.lead { font-size:1.45em; }

.section { margin:40px 0; }
.section.dark { background:#202A35; color: #eee; padding-top: 65px; padding-bottom: 40px; margin-bottom: 0; }

.topspace-none { margin-top:0; }

.template { padding-top:60px; padding-bottom:60px; }
.tpl-odd { }
	.tpl-thumb { width:430px; height:347px; float:left; background:url(../images/bg_thumb.png); position:relative; }
		.tpl-thumb div { position: absolute; top:16px; left:14px; width:402px; height:222px; overflow: hidden; }
	.tpl-desc { float:right; width: 380px; text-align: right; }
	.tpl-title { text-transform: uppercase; font-weight: 300; font-size:40px; /*text-shadow: 1px 1px 1px #ccc; */color:#A8AAAC; margin:20px 0 10px; }
	.tpl-excerpt { margin-bottom:45px; }
	.tpl-actions { }
		.tpl-actions .btn { margin:0 2px;}

.tpl-even { background:#F2F4F5; }
	.tpl-even .tpl-title { color:#939597; }
	.tpl-even .tpl-thumb { float:right; }
	.tpl-even .tpl-desc { float:left; text-align: left; }

main { padding-bottom:45px; }

.btn, .btn-info, .btn-success, .btn-primary { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border:0 none; padding:11px 18px;}
.btn-primary { background:#00A1E4; }
	.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
	.btn-ghost:hover, .btn-ghost:focus, .btn-ghost:active { background:#00B1FD; color:#fff; }
.btn-info { background:#556270; }
	.btn-info:hover, .btn-info:focus, .btn-info:active { background:#5E6B7B; }
.btn-success { background:#22272F; }
	.btn-success:hover, .btn-success:focus, .btn-success:active { background:#293850; }
.btn-lg { padding: 15px 40px; font-size:16px; }
.btn-lg.btn-ghost { padding: 13px 40px; font-size:16px; }
.btn-ghost { border:2px solid #00A1E4; color:#00A1E4; padding:9px 18px; }

.top-space { margin-top:40px; display: inline-block; }

.fa{ font-size: 1.8em; margin:0 9px 0 0; position:relative; top:4px; color: #00A1E4;}


/* PANELS */
.panel-default {  }
.panel-title a { text-decoration: none; }
.panel-title a:hover, .panel-title a:active { color:#E41919; }
.panel-body ol{ padding-left: 20px; }

.licenses { }
	.licenses .panel-heading { padding:10px 0;  }
	.licenses .panel-title { font-weight: 600; }
	.licenses .panel-body{ font-size: 13px; padding:10px 0; }
	.licenses a { text-decoration: none; }
	.licenses .panel-heading+.panel-collapse .panel-body { border-top: 0; }

.box-preview { background:#F2F4F5; margin:0 0 20px 0;}
	.box-preview .img { margin:0; border-bottom:1px solid #b3b4b5;}
	.box-preview .box-body { padding: 20px 20px 20px 20px; border-top:4px solid #fff;}

/*************************************************
                    FOOTER
**************************************************/
#footer { text-align: center; padding: 30px 0 120px 0; line-height: 2em; color: #808080; background: #333537; font-size:14px; }
	#footer a { color: #bbb; }
	#footer .copyright { font-size: 0.85em; line-height:1.3;}
 	.addthis_toolbox { width: 323px; margin: 0 auto; padding:10px 0 10px 30px; }


/*************************************************
                    SIDEBAR
**************************************************/

.st-container, .st-pusher, .st-content { height: 100%; }

.side-page { display:none; font-size: 14px; }

.st-content { overflow-y: auto;}
.st-content, .st-content-inner { position: relative; }
.st-container { position: relative; overflow: hidden; }
.st-pusher { position: relative; left: 0; z-index: 99; height: 100%; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; background: white; }

.st-pusher::after { position: absolute; top: 0; right: 0; width: 0; height: 0; background: rgba(0,0,0,0.2); content: ''; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; }
.sidebar-open .st-pusher::after { width: 100%; height: 100%; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.sidebar { position: fixed; top: 0; left: 0; z-index: 100; visibility: hidden; width: 300px; height: 100%; background: white; -webkit-transition: all 0.5s; transition: all 0.5s; padding:1em; }
.sidebar::after { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); content: ''; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.sidebar-open .sidebar::after { width: 0; height: 0; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; }

/* content style */
.sidebar h2 {  text-shadow: 0 0 1px rgba(0,0,0,0.1); font-weight: 300; font-size: 2em; margin:0 0 40px 0; }
.sidebar p, .sidebar ul  { font-size:13px; font-weight:normal; margin:0 0 20px 0; }
.sidebar li { margin-bottom:0.7em;}


/* Sidebar Effect: Slide along */
.sidebar-open .st-pusher { -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); }
.sidebar { z-index: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
.sidebar-open .sidebar { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.sidebar::after { display: none; }


/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
.no-csstransforms3d .st-pusher, .no-js .st-pusher { /* padding-left: 300px; */ }

/* Forms */
.indicates-required { margin-bottom:15px; }
.form-control { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.msg-form .form-control { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; padding-left: 0; border:0 none; border-bottom:1px solid #999; box-shadow: none; }
.error { background:#FFE8E8; }
.hideme { display: none; }

/* CHEF */
.chef { background: #333537; padding:20px; color:white; color:rgba(255,255,255,.6);}
.chef a { color:#fff; }

/** PRICING **/
/* Pricing Specific */
#pricing .price-plan { position: relative; background: #1f1f1f; }
	#pricing .price-plan.most-popular { background: #00A1E4; }
	#pricing .price-plan h2 { font-size: 22px; color: #fff; font-weight: 200; text-transform: uppercase; letter-spacing: 4px; text-align: center; padding: 1em 0; margin: 0; }
	#pricing .price-plan h2:after { content: ' '; display: block; width: 222px; margin: 20px auto 0; height: 2px; background: white; }
	#pricing .price-plan p, #pricing .price-plan s { color:#fff; color:rgba(255,255,255,.7); text-align: center; }
	#pricing .price-plan .large { font-size: 27px; }
	#pricing .price-plan .price { padding: 8px 0 30px 0; }
		#pricing .price-plan .price .inside { font-weight: 100; color: white; text-align: center; line-height: 100px; height: 100px; }
			#pricing .price-plan .price .inside .super { font-size: 24px; position: relative; top: -60px; left: -7px; }
			#pricing .price-plan .price .inside .amt { letter-spacing: -6px; font-size: 114px; margin-right: 6px; font-weight: 300; margin-left: -5px; }
			#pricing .price-plan .price .inside .sub { text-transform: uppercase; font-size: 17px; letter-spacing: 2px; margin-left: -5px; }

	#pricing .price-plan .info { text-align: center; }
		#pricing .price-plan .info p { font-size: 12px; }
		#pricing .price-plan .info ul { margin: 0; padding: 0; list-style: none; text-align: left; }
			#pricing .price-plan .info ul li { font-size: 15px; color: #696969; background: #f7f7f7; border-bottom: solid 1px #e9e9e9; padding:20px; margin:0; }
			#pricing .price-plan .info ul li.details { line-height: 1.4em; min-height:7em; }
				#pricing .price-plan .info ul li .free {display: inline-block; width: 40px; height: 40px; -moz-border-radius: 30px; border-radius: 30px; background: #57ca8e; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; line-height: 40px; text-align: center; color: white; font-weight: 500; margin-left: 10px; position: relative; top: -2px; }

				#pricing .price-plan .info ul li.feature-pages,
				#pricing .price-plan .info ul li.feature-bandwidth,
				#pricing .price-plan .info ul li.feature-storage,
				#pricing .price-plan .info ul li.feature-contributors { font-weight: bold; color: #222; }
				#pricing .price-plan .info ul li:first-child {}
				#pricing .price-plan .info ul li:last-child {}

#pricing .price-plan-standard { margin-left: 0; }
	#pricing .price-plan-standard .bubble .inside { text-indent: 12px; }
	#pricing .price-plan-standard .bubble .inside .amt { margin-left: 3px; }
	#pricing .price-plan-unlimited { margin-left: 30px; }
		#pricing .price-plan-unlimited .bubble .inside { text-indent: 8px; }
	#pricing .get-started { padding-left: 60px; padding-top: 115px; }
		#pricing .get-started h2,
		#pricing .get-started p { font-size: 26px; font-weight: 300; line-height: 1.5em; margin: 0; }
		#pricing .get-started h2 { color: #1d1d1d; }
		#pricing .get-started p { color: #888; }
		#pricing .get-started a.get-started-button { margin-top: 88px; background-color: #F5E78B; -webkit-transition: background-color 0.1s ease-out, color 0.1s ease-out; -moz-transition: background-color 0.1s ease-out, color 0.1s ease-out; -o-transition: background-color 0.1s ease-out, color 0.1s ease-out; transition: background-color 0.1s ease-out, color 0.1s ease-out; padding: 12px 40px 11px; color: black; text-transform: uppercase; font-size: 15px; font-weight: 600; -moz-border-radius: 50px; border-radius: 50px; }
		#pricing .get-started a.get-started-button:hover { background-color: #f2e9ad; }

#pricing .questions { padding: 90px 0 0 0; clear: both; }
	#pricing .questions .header h2 { background: #1d1d1d; padding: 30px 20px; color: white; font-weight: 100; font-size: 36px; display: block; width: auto; display: inline-block; }
	#pricing .questions h3 { color: #222; font-size: 16px; margin-top: 2em; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; line-height: 24px; border-bottom: 2px solid; padding-bottom: 10px; margin-bottom: 0; display: inline-block; }
	#pricing .questions p { font-size: 14px; line-height: 24px; color: #777; }
	#pricing .questions .column { width: 450px; float: left; }
	#pricing .questions .column-first { margin-right: 60px; }


.inverted { background:#fff; padding:40px 0 30px 0; border:solid #ddd; border-width:1px 0; }


/*************************************************
                 RESPONSIVENESS
**************************************************/
@media (max-width: 479px) {

header i { display:block; width:20%; text-align: center; margin:0 auto 5px auto; }
.home header .btn-ghost { width: 70%; }
.template { padding-top:25px; padding-bottom:60px; }
	.tpl-thumb, .tpl-even .tpl-thumb { width:100%; height:auto; float:none; background:none; position:inherit; }
		.tpl-thumb div { position: inherit; top:0px; left:0px; width:100%; height:auto; }
	.tpl-desc, .tpl-even .tpl-desc { float:none; width: 100%; text-align: center; }
	.tpl-title { text-transform: uppercase; font-weight: normal; font-size:23px; /*text-shadow: 1px 1px 1px #ccc; */color:#A8AAAC; }
	.tpl-excerpt { margin-bottom:45px; }
	.tpl-actions .btn { margin-bottom:5px; min-width:140px;}
	.addthis_toolbox { width: auto; }
}

@media (min-width: 480px) and (max-width: 767px) {
	.home header i { display:block; width:20%; text-align: center; margin:0 auto 5px auto; }
	.logo { margin-top:155px; }
	.tagline{ margin-bottom:56px;}
.tpl-thumb, .tpl-even .tpl-thumb { margin:0 auto; float:none;}
	.tpl-desc, .tpl-even .tpl-desc { width:100%; text-align:center;  }
	.tpl-excerpt { margin-bottom:26px;}
  	.template { padding-bottom: 40px; overflow-x: hidden; }
  	.tpl-actions .btn { margin-bottom:5px; min-width:140px;}
}


@media (min-width: 768px) and (max-width: 991px) {
	.logo { margin-top:155px; }
	.tagline{ margin-bottom:56px;}
	.tpl-thumb { margin-left:-13%;}
	.tpl-desc { width:50%; }
	.tpl-even .tpl-thumb { margin-right:-13%;}
	.container { width:auto;}
  	.template { overflow-x: hidden;}
}

@media (min-width: 1200px) {
  .container { width: 970px; }
}

.wp-themes { text-decoration: none;color: inherit; display: block; opacity: .9;}
.wp-themes:hover { text-decoration: none; color: #fff; opacity: 1;}
