/*
Theme Name: Art To Self
Author: Matt Giovanisci
Version: 1.0
*/

/* CSS Reset */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, code,del, dfn, em, img, q, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0;padding: 0;border: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}
body { line-height: 1.7; margin:1.5em 0; }
/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight:400; }
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; }


/* GLOBAL */
html,body{font-family: Arial; color: #666; font-size: 18px; margin:0; width: 100%; padding:0; overflow-x: hidden; background: url('images/bg.png'); text-rendering: optimizelegibility; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga";}
a{color: #00bf8f; text-decoration: none; outline: none; transition:0.2s ease;}
a:hover{color: #000;}
strong{font-weight: bold;}
em{font-style: italic;}
blockquote {padding:0px 40px;color:#999;background-image:url('images/blockquote.gif');background-repeat:no-repeat;background-position:top left; margin-bottom:30px; font-size: 25px; font-family: "adelle","droid serif",georgia,serif; line-height: 35px;}
.clearfix{clear: both;}
.container{max-width:1000px; width:90%; margin: 0 auto -10px auto; position: relative;}
main { margin: 20px auto; max-width: 1000px; }
p{margin: 0 0 40px 0;}
code {font-family: monospace; padding: 20px; background: #F8F8F8; border: 1px solid #CCC; color: #999; width: 100%; display: block;}
@font-face {
  font-family: "art-to-self";
  src:url("fonts/art-to-self.eot");
  src:url("fonts/art-to-self.eot?#iefix") format("embedded-opentype"),
    url("fonts/art-to-self.woff") format("woff"),
    url("fonts/art-to-self.ttf") format("truetype"),
    url("fonts/art-to-self.svg#art-to-self") format("svg");
  font-weight: normal;
  font-style: normal;
}



@font-face {
    font-family: 'art-to-self-v2';
    src: url('fonts/art-to-self-v2.eot');
    src: url('fonts/art-to-self-v2.eot?#iefix') format('embedded-opentype'),
         url('fonts/art-to-self-v2.woff2') format('woff2'),
         url('fonts/art-to-self-v2.woff') format('woff'),
         url('fonts/art-to-self-v2.ttf') format('truetype'),
         url('fonts/art-to-self-v2.svg#art_to_self_fontregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



/* HOMEPAGE */
.feature{background: url('images/feature-bg.jpg'); margin: 0; position: relative; padding: 100px 0; border-bottom: 10px solid #000; text-align: center;}
.feature-overlay{background-color: rgba(255, 255, 255, 0.7); position: absolute; top:0; right:0; bottom:0; left:0;}
.feature .container{max-width:1200px; width:90%; margin: 0 auto -10px auto; position: relative;}
.feature .logo{display:block; float: left; margin: 0 40px 0 0; max-width: 300px; width: 25%;}
.feature-content{float: right; width: 70%;}
.feature h1{font-family: "art-to-self-v2"; color: #000; font-size: 65px; line-height: 55px; margin: 0 0 10px 0; font-weight: 800; text-transform: uppercase; letter-spacing: -1px;}
.feature p{display: block; color: #000; font-size: 20px; margin: 10px auto; text-align: center; position: relative; width: 60%;}
.arrow-left{position: absolute; bottom:-25px; left: -45px;}
.arrow-right{position: absolute; bottom:-25px; right: -45px;}
.feature-subscribe{margin: 40px 0;}
.feature-subscribe .input_text{width: 40%;   margin: 0 0.5%; padding: 10px; font-size: 18px; border: 2px solid #000;}
.feature-subscribe .submit{display: block; margin: 30px auto; background: url('images/submit-bg.png') no-repeat center left transparent; width: 300px; border: none; color: #FFF; padding: 10px 20px; font-family: "art-to-self-v2"; font-size: 32px; cursor: pointer; text-transform: uppercase;}
.proof{background: #FFF; margin: 0; position: relative; padding: 50px 0; width: 100%;}
.proof .container{max-width:1200px; width:90%; margin: 0 auto -10px auto; position: relative;}
.proof h2{font-family: "art-to-self-v2"; font-size: 35px; text-align: center; text-transform: uppercase; margin: 0 0 10px 0; color: #000;}
.press{float: left; width: 30%;}
.press ul{list-style: none; margin: 0; padding: 0; text-align: center;}
.press li{display: inline; margin: 0 5%;}
.press li img{width: 35%; opacity: 0.25;}
.testimonials{float: right; width: 60%;}
.testy{margin: 0 0 50px 0;}
.testy img{float: right; border-radius: 50em; margin: 0 0 10px 20px; width: 15%; border: 2px solid #000;}
.testy p{margin: 0; text-align: left; font-style: italic; font-family: georgia, serif; font-size: 24px; padding: 0 0 0 50px; background:url('images/blockquote.gif') no-repeat top left;}
.testy small{font-weight: bold; display: block; opacity: 0.5; padding: 0 0 0 50px;}
.steph{background: #ECECEC; font-family: georgia, serif; font-size: 28px; color: #999; padding: 80px 0;  box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.25);}
.steph .container{max-width:1200px; width:90%; margin: 0 auto -10px auto; position: relative;}
.steph img{display: block; width: 15%; border-radius: 50em; float: right; margin: 0 0 20px 40px;}
.steph p{text-align: left; margin: 0; padding: 0 0 0 50px; background:url('images/blockquote.gif') no-repeat top left;}



/* HEADER */
header{background: #FFF; border-bottom: 4px solid #000; position: fixed; width: 100%; height: 4em; z-index: 1000;}
header .container{max-width:1200px; width:90%; margin: 0 auto -10px auto; position: relative;}
header .logo{float: left; max-width: 120px; margin: 10px 0; display: block;}
nav{float: right; font-family: "art-to-self-v2"; color: #000; font-size: 25px; line-height: 3em; text-transform: uppercase; text-align: right; width: 83%;}
nav li{list-style: none; margin: 0 0 0 25px; display: inline;}
nav a{color: #000; text-decoration: none; transition:0.4s ease;}
nav a:hover{color: #3399CC;}
nav .subscribe{margin: 0 auto; background: url('images/submit-bg.png') no-repeat center left transparent; width: 300px; border: none; color: #FFF; padding: 2px 20px; font-family: "art-to-self-v2"; cursor: pointer;}
nav .subscribe:hover{color: #FFF;}



/* MAIN CONTENT */
content{display: block; width: 85%; max-width: 800px; margin: 120px auto;}
content h1{font-family: "art-to-self-v2"; color: #000; font-size: 60px; line-height: 0.9em; text-transform: uppercase; margin: 0 0 20px 0; font-weight: 800;}
article{margin: 0 0 40px 0;}
article h1{font-family: "art-to-self-v2"; color: #000; font-size: 60px; line-height: 0.9em; text-transform: uppercase; margin: 0 0 20px 0; font-weight: 800;}
article h2{font-family: "art-to-self-v2"; color: #000; font-size: 50px; line-height: 1.0em; text-transform: uppercase; margin: 0 0 10px 0;}
article h3{font-family: "art-to-self-v2"; color: #000; font-size: 40px; line-height: 1.2em; text-transform: uppercase; margin: 0 0 10px 0;}
article h1 a{color: #000; text-decoration: none;}
article h1 a:hover{color: #3399CC;}
article .dear{font-family: "art-to-self-v2"; font-size: 24px; line-height: 1.5em; display: block; text-transform: none;}
article h4{padding: 0 0 40px 120px; font-family: "art-to-self-v2"; line-height: 40px; min-height: 100px; /*font-family: Georgia serif; */ font-size: 25px; color: #999; background: url('images/inspired.png') no-repeat top left; text-transform: none;}
article ul, article ol{padding: 0 0 0 40px; margin: 0 0 40px 0;}
.date{border-radius: 50%; width: 50px; height: 50px; background: #000; float: right; color: #FFF; padding: 12px; text-align: center; font-family: "art-to-self"; font-size: 10px; text-transform: uppercase; margin: 0 0 0 20px;}
.previous-post{font-family: "art-to-self-v2"; font-size: 30px; text-transform: uppercase; display: block; text-align: center; padding: 0 0 20px 0;}
.subscribe{margin: 40px auto; width: 97%; max-width: 800px; padding: 40px 0; text-align: center; background: url('images/feature-bg.jpg'); border: 5px solid #000; text-align: center; position: relative;}
.subscribe-overlay{background-color: rgba(255, 255, 255, 0.7); position: absolute; top:0; right:0; bottom:0; left:0;}
.subscribe .container{width:90%; margin: 0 auto -10px auto; position: relative;}
.subscribe p{display: block; color: #000; font-size: 22px; margin: 0 auto 40px; text-align: center; position: relative; width: 85%; font-weight: bold;}
.subscribe .input_text{width: 40%; margin: 0 0.5%; padding: 10px; font-size: 18px; border: 2px solid #000;}
.subscribe .submit{display: block; margin: 30px auto 0; background: url('images/submit-bg.png') no-repeat center left transparent; width: 300px; border: none; color: #FFF; padding: 10px 20px; font-family: "art-to-self-v2"; text-transform: uppercase; font-size: 30px; cursor: pointer;}


/* NOTES */
#notes{display: block; width: 85%; max-width: 1200px; margin: 120px auto; text-align: center;}
#notes h1{font-family: "art-to-self-v2"; color: #000; font-size: 75px; line-height: 1em; text-transform: uppercase; margin: 0 0 10px 0; text-align: center;}
#notes ul{list-style: none; margin: 0; padding: 0;}
#notes li{display: inline-block; margin: 20px; padding: 0; max-width: 250px; width: 25%;}
#notes li img{width: 100%; height: 100%; border: 3px solid black; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);}
.image{position:relative;}
.image img{width:100%; vertical-align:top;}
.image:after{content:'\A'; position:absolute; width:102%; height:100%; top:0; left:0; background:url('images/read.jpg'); background-size: cover; background-position: center center; opacity:0; transition: all 0.4s;}
.image:hover:after{opacity:0.9;}


/* STORIES */
.story{border: 5px solid black; border-radius: 5px; margin: 0 0 50px 0; text-align: center; box-sizing: border-box; padding: 30px 30px 0 30px; display: block;}
.story:hover{transform: translateY(10px); opacity: 0.8;}
.story h2{display: none;}
.story img{display: block; margin: 0 auto 30px auto;}
.story p{color: #333;}


/* STORE */
.store{text-align: center;}
.store h1{font-family: "art-to-self-v2"; color: #000; font-size: 60px; line-height: 0.9em; text-transform: uppercase; margin: 0 0 20px 0; font-weight: 800;}
.sale-banner{border: 5px solid #00bf8f; width: 90%; padding: 40px; border-radius: 10px; margin: 0 auto 40px auto; font-family: "art-to-self-v2"; color: #000; font-size: 24px; line-height: 30px;}
.sale-banner p{margin: 0;}
.product{display: inline-block; width: 30%; text-align: center; margin: 0 1%; vertical-align: top; padding: 4% 0;}
.product-image{min-height: 250px;}
.product-image img{width: 100%;}
.product h3{font-family: "art-to-self-v2"; color: #000; font-size: 28px; line-height: 30px; margin: 0 0 5px 0; font-weight: 800; letter-spacing: -1px;}
.product p{font-size: 15px; line-height: 20px; margin: 0 0 5px 0;}
.product .buy-button{display: block; margin: 10px auto; background: url('images/submit-bg.png') no-repeat center left transparent; width: 80%; border: none; color: #FFF; padding: 10px 20px; font-family: "art-to-self-v2"; text-transform: uppercase; font-size: 20px; cursor: pointer;}
.product .buy-button:hover{opacity: 0.7;}


/* SALES */
.landing-header{padding: 60px 0; width: 100%; color: #000; margin: 0; background: url('images/feature-bg.jpg') #fff; text-align: center; border-bottom: 2px solid #333;  position: relative;}
.landing-header-overlay{background-color: rgba(255, 255, 255, 0.7); position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.landing-container{max-width: 1100px; width: 90%; margin:0 auto; position: relative;}
.landing-container .heading-60{font-size: 60px; line-height: 60px;}
.thin-container{max-width: 900px;}
.landing-header h1{font-family: "art-to-self-v2"; font-weight: 800; font-size: 65px; line-height: 65px; margin: 0 0 25px 0; color: #000; letter-spacing: -1px; text-transform: uppercase;}
.landing-container .center-image{display: block; width: 75%; margin: 0 auto 30px;}
.landing-container .center-image img{width: 100%;}
.landing-header .subheading{font-size: 25px; line-height: 35px; margin: 0 0 30px 0; font-weight: normal; color: #333; font-style: italic;}
.landing-header .landing-headline{float:right; width: 65%;}
.landing-guide{float:left; width:29%; display: block;}
.landing-guide img{width: 100%;}
.landing-button{border-radius: 5px; margin: 10px; font-size: 30px; line-height: 40px; color: #fff; cursor:pointer; border: 3px solid rgba(0,0,0,0.1); display: inline-block; color: #FFF; font-family: Helvetica, Arial, sans-serif; padding: 10px 20px; text-decoration: none; text-shadow: 0px 1px 0px #8f7f24; transition: 0.5s ease; text-align: center; font-weight: 800;}
.landing-button:hover{color: #fff; opacity: 0.7;}
.landing-buy{background: #00bf8f;}
.landing-learn{background: #f8931d;}
.landing-payments{padding: 20px 0 0 0; width:40%; display: block; margin: auto;}
.video-container {position: relative; padding-bottom: 56%; height: 0; overflow: hidden; max-width: 100%; margin: 0 0 10px 0; border: 2px solid #333;}
.video-container iframe, .video-container object, .video-container embed{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.landing-block{padding: 100px 0; color: #333; font-size: 18px; line-height: 30px; position: relative;}
.landing-block h2{font-family: "art-to-self-v2", Helvetica, Arial, sans-serif; margin: 0 0 20px 0; font-size: 2.5em; line-height: 1.2em; font-weight: 800; text-transform: uppercase;}
.landing-block h3{font-family: "art-to-self-v2", Helvetica, Arial, sans-serif; margin: 0 0 20px 0; font-size: 2em; line-height: 1em;}
.landing-block ul{padding: 0 0 0 40px; margin: 0 0 30px 0; text-align: left;}
.landing-left{text-align: left;}
.landing-right{text-align: right;}
.landing-center{text-align: center;}
.landing-white{background: #fff;}
.landing-blue{background:#27aae2; color: #fff;}
.landing-image-center{display: block; width: 100%; margin: 0 auto 30px;}
.landing-image-left{display: block; width: 35%; float: left; margin: 0 5% 2.5% 0;}
.landing-image-right{display: block; width: 35%; float: right; margin: 0 0 2.5% 5%;}
.landing-image-cirlce{display: block; width: 35%; float: right; border-radius: 50em; margin: 0 0 2.5% 5%;}
.it-block{list-style: none; display: inline-block; width: 30%; margin: 0 1.5%; vertical-align: top;}
.it-block img{width: 80%; display: block; margin: 0 auto 20px;}
.it-block p{margin: 0;}
.products{margin: 0 auto 100px auto !important; text-align: center; list-style: none; padding: 0 !important;}
.products li{width: 28%; display: inline-block; margin: 2.5%; min-height: 300px; vertical-align: top; text-align: left;}
.products li img{width: 85%; height: auto; margin: auto; display: block;}
.products li h3{font-size: 25px; margin: 30px 0 10px; font-weight: 800; text-align: center;}
.products li p{font-size: 16px; line-height: 22px; margin: 0 0 20px 0;}
.product-breakdown{width: 46%; list-style: none; float: left; padding: 0 2%; margin: 0; min-height: 600px;}
.product-breakdown li{display: inline-block; width: 45%; padding: 0 4% 0 0; vertical-align: top;}
.product-breakdown img{float: right; width: 15%; padding: 50px 20px 0 10px; display: block;}
.product-breakdown h3{font-size: 30px; margin: 50px 0 20px; font-weight: 700; min-height: 80px; text-transform: uppercase;}
.product-breakdown h4{font-size: 20px; line-height: 25px; margin: 0 0 10px; font-weight: 700;}
.product-breakdown p{font-size: 15px; line-height: 20px;}
.section {clear: both; padding: 0px; margin: 0px;}
.col {display: block; float:left; margin: 1% 0 1% 5%;}
.col3 {display: block; float:left; margin: 1% 0 1% 2.5%;}
.col:first-child, .col3:first-child { margin-left: 0; }
.group:before, .group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
.span_2_of_2 {width: 100%;}
.span_1_of_2 {width: 47.5%;}
.span_1_of_3 {width: 31.5%;}
.testy{background: #FFF; border-radius:5px; padding: 40px; margin: 0 0 40px 0; text-align: left; color: #999;}
.testy img{border-radius: 50em; width: 125px; float: right; margin: 0 0 5px 10px;}
.landing-gallery{margin: auto; text-align: center; list-style: none;}
.landing-gallery li{width: 30%; display: inline-block; margin: 1.5%;}
.landing-gallery img {width: 100%;}
.landing-package{background: #FFF; color: #666; border-radius: 10px; padding: 50px;}
.landing-package img{width:30%; margin: 0 20px 0 0; display: block; float: left;}
.package-content{padding: 0 40px 40px; float: left; width: 50%; text-align: left;}
.package-content ul{margin: 0; padding: 0 0 0 20px;}
.package-content li{line-height: 24px; margin: 0 0 10px 0;}
.landing-faq h2{font-size: 70px; line-height: 70px;}
.landing-faq strong{font-size: 28px; line-height: 30px; display: block; margin: 0 0 20px 0; padding: 20px 0 0 0; color: #27aae2;}


/* WORDPRESS CORE */
.alignnone, .aligncenter, div.aligncenter {margin: 5px auto; width: auto; height: auto; max-width: 640px; display: block;}
.alignright {float:right;margin: 5px 0 20px 20px;}
.alignleft {float:left;margin: 5px 20px 20px 0;}
.aligncenter {display: block;margin: 5px auto 5px auto;}
a img.alignnone {padding: 0px; max-width:100%; width:auto; height:auto; margin: auto; display: block;}
a img.aligncenter {display: block;margin-left: auto;margin-right: auto;padding: 5px;}
a img.alignright {float:right; margin: 5px 0 20px 20px;padding: 5px;}
a img.alignleft {float:left;margin: 5px 20px 20px 0;padding: 5px;}
.wp-caption {background: none; border:none; max-width: 630px; /* Image does not overflow the content area */ padding: 0; text-align: center; width: auto;}
.wp-caption.alignleft {margin: 5px 20px 20px 0;}
.wp-caption.alignright {margin: 5px 0 20px 20px;}
.wp-caption img {border: 0 none; height: auto; margin: 0; max-width: 100%; padding:0; width: auto; border: none;}
.wp-caption p.wp-caption-text{padding:0; color:#999; margin:0px !important; text-align: center;}


/* SHORTCODES */
.social{list-style: none; margin: 0 0 40px 0; padding: 0; text-align: center;}
.social li{display: inline-block; margin: 0 1%;}


/* Footer */
footer{width: 100%; clear: both; background: #000; color: #FFF; padding: 40px 0; text-align: center;}
footer li{display: inline; list-style: none; margin: 0 0.5%;}
footer a{color: #FFF; text-decoration: none;}
footer a:hover{color: #00bf8f;}



/* RESPONSIVE CSS */
@media only screen and (max-width: 990px){
	.feature{padding: 5% 0;}
	.feature .logo{float: none; margin: 0 auto 20px; width: 25%; min-width: 150px;}
	.feature-content{float: none; width: 100%; margin: auto;}
}


@media only screen and (max-width: 800px){
	header{height: auto; padding: 0 0 30px 0; position: static;}
	header .logo{float: none; max-width: 100px; margin: 10px auto 0; display: block;}
	nav{float: none; font-size: 14px; line-height: 3em; text-transform: uppercase; text-align: center; width: 100%;}
	nav li{list-style: none; margin: 0 5px; display: inline;}
	content{margin-top: 50px;}
	.date{display: none;}
	.alignnone, .aligncenter, div.aligncenter {margin: 5px auto; width: 100%; height: auto; max-width: 640px; display: block;}
	.press{float: none; width: 100%; margin: 0 0 50px 0;}
	.press li img{width: 12%;}
	.testimonials{float: none; width: 100%;}
	.steph img{float: none; margin: 0 auto 20px; width: 50%;}
	.steph p{text-align: center; padding: 0;}
  .landing-header .landing-headline{float:none; width: 100%;}
  .landing-guide{float:none; width: 80%; margin: 0 auto 30px;}
  .landing-header h1{font-size: 45px; line-height: 50px;}
  .landing-payments{width:80%;}
  .it-block{width: 80%; margin: 0 auto 40px; vertical-align: top; display: block;}
  .landing-gallery li{width: 80%; display: block; margin: 0 auto 40px;}
  .products{margin: 0 0 50px 0; list-style: none; padding: 0;}
	.products li{width: 80%; display: list-item; margin: 10% auto; text-align: center;}
	.product-breakdown{width: 90%; float: none; min-height: 300px; padding: 0 5% !important; margin: auto !important;}
  .product-breakdown h3{min-height: 40px;}
  .product-breakdown img{display: none;}
  .landing-package img{width: 100%; margin: 0 auto 40px; float: none;}
  .package-content{float: none; width: 100%; text-align: center; padding: 0;}
  .package-content ul{padding: 0 0 30px 40px; text-align: left;}
  .package-content li{line-height: 24px; margin: 0 0 10px 0;}

}

@media only screen and (max-width: 600px){
	.subscribe .input_text{display: block; width: 80%; margin: 0 auto 10px;}
	.subscribe .submit{font-size: 15px; width: 260px;}
	.arrow-left, .arrow-right{display: none;}
  .landing-block{padding: 60px 0; text-align: center;}
  .landing-image-left{width: 60%; float: none; margin: 0 auto 40px}
  .landing-image-right{width: 60%; float: none; margin: 0 auto 40px;}
  .landing-image-cirlce{width: 60%; float: none; margin: 0 auto 40px;}
  .product-breakdown li{display: block; width: 100%;}
}