/*
Theme Name: Azeem.me
Theme Description: TODO
*/

body {background-color: #fff; margin:0; font-family: Arial; font-size: 13px; border:8px solid #51D2B7;}
#container {width:1200px; margin: 120px auto}
a {color:#3b6ea5; text-decoration: none}
a:hover {color:#27AE60}

/* - HEADER
--------------------------------------------*/
#header {padding: 15px 0 0; margin:0px 1.5% 130px; }
#header a {color: #333; text-decoration: none}
#header a:hover {color: #51D2B7;}
#nav {margin: 10px 1% 0 0; padding: 0; float: right; position: relative;}
#nav li {margin: 0 0 0 12px; padding: 0; list-style-type: none; text-transform: uppercase; display: inline; font-family: "Lato"}

#logo {float: left;}
#logo h1 {line-height: 33px; font-weight: 700; font-family:"Lato", Tahoma, Arial, sans-serif; font-size: 24px; margin:0;}
#logo a {text-decoration: none; color: #333; display: block; text-transform: uppercase; font-weight: 300}
#logo #logo-hover {color:#27AE60}

#nav-twitter a{color: #00acee;}
#nav-facebook a{color: #3b5998;}
#nav-instagram a{color: #c13584;}
.nav-spacer {margin:0 10px;}
.subnav {display: none; position: absolute; left: 0; top: 0; width: 200px;margin: 24px 68px;}
.subnav li {display: block; line-height: 22px}

/* - POST
--------------------------------------------*/
.post {margin: 0 auto 100px; clear: both;}
.meta {width: 98%; clear: both}

.post p {font-size:17px; line-height: 24px; color:#333;}
.post img {border:1px solid #cacaca; width: 100%; min-height: 100px; height: auto}
.post img:hover {box-shadow: 0 8px 28px rgba(0 ,0,0,0.55), 0 10px 10px rgba(0,0,0,0.30);}

.week-of-post p {width:64%; margin: 16px auto;}
.week-of-post img {margin: 1% auto;}
.week-of-post img {width:47%; margin: 1% 2% 1% 0; /*float: left;*/}
.single .week-of-post img {width:100%; margin-right: 0%;}

.portrait-post img {max-height: none !important}

.meta .post-title {font-size: 16px; line-height: 28px; display: inline; padding: 4px 0px; font-weight: bold; color: #444; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
.meta .post-title-big {font-size: 36px; line-height: 44px; font-family: 'Merriweather'; color: #222; text-align: center; display: block; margin: 20px 0 10px 0;}
.meta .post-date {color: #cacaca;display: block;}
.meta .post-date-big {color: #cacaca; display: block; text-align: center; font-size: 15px; margin-bottom: 20px}

.post-frame {position: relative;}

.actions {margin-top:16px; float: left; width:100%;}
.actions .fa-share {font-size: 16px; color: #999; float: right; cursor: pointer;}
.actions .buy-print {float: left; text-transform: uppercase; margin-left: 2px; font-weight: bold; color: #51D2B7}
.post-favorite {color: #999; margin-left:6px; cursor: pointer}
.favorited i{color:#BD2F5C;}
.admin-links {position: absolute; bottom: 0; right:0; margin:0 4px 10px 0; font-size: 11px; display: none}
.admin-links .edit {float:left; text-transform: uppercase; color:#fff;}

.single-post .post img {border:none; margin-bottom: 3%}
.col2, .col3 {clear: both}
.col2 img {width:48.5%; float: left;}
.col2 img:nth-child(odd) {margin-right: 3%}
.col3 img {width:31.3%; float: left; margin-right: 3%}
.col3 img:nth-child(3) {margin-right: 0%}


/* - TYPOGRAPHY
--------------------------------------------*/
h2.page-title {color: #333; margin: 0 0 20px; line-height: 24px; font-size: 24px;font-family: 'Bitter', Arial, sans-serif; text-align: center;}
.section-header {clear:both; text-align: center; text-transform: uppercase; font-size:16px; color:#8E44AD; margin:0 0 30px; font-family:'Lato', Arial, sans-serif}
.section-header a {color:#8E44AD}

.page-template-shop .post {width: 47%; margin-right:3%; float: left; margin-bottom: 50px;}
.page-template-shop .post-image {background-color: #F3F3F3; padding: 10%; display: inline-block; width: 80%}
.page-template-shop .post-image img {border: 8px solid white; margin-left: -8px}
.page-template-shop .post .actions, .page-template-shop .post .post-date {display: none}

/* - MODAL
--------------------------------------------*/
.modal {background-color: white; padding:20px 20px; width:160px; border:8px solid #cacaca}
.modal header {font-weight:bold; color:#777; text-transform: uppercase; font-size: 13px; text-align: center; border-bottom: 1px solid #cacaca; padding-bottom: 10px; margin-bottom: 10px; margin-top:0;}
.modal h3 {text-align: center;}

.share-modal ul {margin:0; padding:0; text-align: center}
.share-modal li {margin:0; padding:4px 6px; list-style-type:none; display: block}
.share-modal a {text-decoration: none; display: block}
.share-modal .button {width: 110px; float:none; margin: 12px auto; background-color: transparent}
.share-modal .fa {padding-right:6px}
.share-modal .twitter a{color: #00acee}
.share-modal .facebook a{color: #3b5998}
.share-modal input {width:132px; border:1px solid #999; padding:8px 4px;}


/* - NAVIGATION
--------------------------------------------*/
.navlinks, .browse-more-photos {margin:0 auto; padding:10px 0 20px; width:100%; text-align: center; clear: both}
.navlinks li{margin:0; list-style-type: none; display: inline}
.navlinks li a, .browse-more-photos a {display:inline; border: 4px solid #51D2B7; background-color: #51D2B7; color:white; font-weight: bold; padding: 8px 12px; text-transform: uppercase; -moz-border-radius: 3px; -webkit-border-radius: 3px; text-decoration:none; margin:0 auto}
.navlinks li a:hover, .browse-more-photos a:hover {border:4px solid #8E44AD; background-color:#8E44AD}
.navlinks #older {margin-right:10px}

/* - PAGE
--------------------------------------------*/
#page {margin-top:30%; min-height: 150px}
#page .page-title {font-family: "Bitter"; font-weight: normal; color: white; background-color: #333; display: inline; padding: 4px 5px}
#page .post{font-size: 15px; line-height: 21px}
#page-intro {width: 64%; margin:0 auto 40px}
#page-intro p {font-size: 16px; line-height: 26px}
#thanks {width:64%; margin: 0 auto}

#intro-365 ul {margin-top:10px; float:left; width: 25%; padding-bottom: 30px}
#intro-365 li {font-size: 15px; line-height: 24px}
#intro-365 strong {display: block; font-size: 15px; line-height: 24px; font-family: "Lato", Arial, sans-serif; color:#27AE60; text-transform: uppercase}

.intro-text {margin:0px auto 50px; clear: both; font-family:'Lato', Arial, sans-serif; width:64%;}
.intro-text h1{color: #000; margin:0 0 30px; font-size: 44px;}
.intro-text h2 {color: #999; font-size: 18px; font-weight: normal; line-height: 32px; margin: 20px 0px;}


#home-stats {margin:0 0 30px; padding:0; text-align: center;}
#home-stats li {margin:0 10px; padding:0; list-style-type: none; color: #999; font-family: "Lato"; font-weight: 500; display: inline-block; text-transform: uppercase;}

.navlinks {margin:0 auto 100px; padding:10px 0 20px; width:100%; text-align: center; clear: both}
.navlinks li{margin:0; list-style-type: none; display: inline}
.navlinks li a {display:inline; border: 4px solid #51D2B7; background-color: #51D2B7; color:white; font-weight: bold; padding: 8px 12px; text-transform: uppercase; -moz-border-radius: 3px; -webkit-border-radius: 3px; text-decoration:none; margin:0 auto}
.navlinks li a:hover {border:4px solid #c0392b; background-color:#c0392b}
.navlinks #newer {margin-left:10px}

#footer {clear:both; background:url(img/aana.gif) no-repeat 50% 100%;}
#footer-social {text-align: center; margin:200px 0 0; height: 120px;}
#footer-social a {font-size: 20px; border-radius: 30px; padding: 10px; width: 20px; display: inline-block; color:#51D2B7;; margin:0 4px;}
#footer-social a:hover {background-color: #51D2B7; color: white;}


/* - HOME
--------------------------------------------*/
#home-stories {float: left; width: 100%; margin-bottom: 80px}
#home-stories .post {width: 47%; float: left; margin: 1% 1.5% 1% 1.5%}

#stories-preview {margin-top:10px; position: relative;}
#stories-preview .post {width:48%; margin:14px 1%; float: left; clear: none}
#stories-preview .meta {width:90%; text-align: left;}
#stories-preview .meta a {font-size: 16px}

#stories-preview .meta .post-title {overflow: hidden; display: block; max-height: 22px; margin-bottom: 2px}

.home .section-header {text-align: left; margin-bottom: 10px}

.home #stories-preview .post {width:23%; margin:0 2% 0 0; clear: none}
.home #stories-preview .post a {width: 100%; margin: 0px 1%; float: left; position: relative; height: 428px; overflow: hidden;}
.home #stories-preview .post img {border: 1px solid #cacaca; width: 100%; min-height: 100px; position: absolute; height: 100%; }
.home #stories-preview .browse-more-photos {margin:30px 20px 60px 0; text-align: right; float: right;}

/* - BLOG
--------------------------------------------*/
.blog-post .content {text-align: center}
.blog-post .content p{font-size: 16px; margin: 25px 0; line-height: 24px}
.blog-post .post-date {text-align: center; margin:20px 0 0;}
.blog-title {text-align: center; font-family: "Lato"}
.blog-title a {color: #333}

/* - SINGLE
--------------------------------------------*/
.single .post {margin-bottom: 70px}
.single .excerpt {clear: both; margin:30px auto 0; width:80%; text-align: center;}

.single .stories-post p {width:64%; margin:0px auto 30px; line-height: 27px}

/*#stories-container h2,  #stories-container h3{font-family: "Lato"; font-size: 28px; text-align: center; margin: 60px 0 10px; line-height: 40px; color: #444; }
#stories-container p {font-size: 17px; line-height: 26px; width: 80%; float: none; margin: 10px auto 20px;}
#stories-container img {margin: 0px 0 20px}*/

#stats-block {float: left; width: 100%; margin:50px 0;}
#stats-block .block {width: 25%; float: left; font-size: 24px; text-transform: uppercase; text-align: center;}
#stats-block .block .num {display: block; padding: 12px 0}
#stats-block .block .type {font-size: 14px; font-family: "Lato"}


#related-wrapper {margin:0 auto 30px; overflow: hidden; text-align: center; clear:both; width:80%}
#related-wrapper h3 {margin-bottom: 14px;}
#related {margin:0; padding:0}
#related li {float:left; margin:0; padding:0; list-style-type: none; width:33%; position: relative}
#related img {width:100%; height: auto}
#related span {display: none; position: absolute; bottom: 0; left: 0; color:white; background-color: #333; padding: 4px; margin:8px}
#related span:hover {display: block}

#exif {margin:16px 0 100px; padding:0; width: 100%; float: left; color: #999; font-family: "Lato"; font-weight: 500; text-align: center; line-height: 27px}
#exif li{margin:0; padding:0 10px; list-style-type:none; display:inline; text-align: center;}
#exif li a {color: #999}

#tags {margin-top:80px; text-align: center;}
#tags .tag {background-color: #eee; color:#999; padding: 5px; margin: 0 5px}
#tags .tag a {color: #999}
#tags .tag:hover {background-color:#e8f2f9;}

/* - CART
------------------------------------------------------------------*/
#cart input {width: 100%}
#cart textarea {width: 100%; height: 100px}
#cart .wpcf7-submit {width: auto}

#cart-post-info {float: left; width: 65%; margin:0 0 100px;}
#cart-post-info h3 {font-family: "Lato"; margin: 30px 0 0; padding: 0px 0px; color: #3b6ea5; font-size: 22px}
#cart-post-info img {width: 80%; box-shadow: 8px 8px 10px #aaa; border: 6px solid #555; padding: 5%; height: auto}
#cart-post-info p {color: #777; padding: 0; line-height: 21px}
#cart-post-info strong {color: #000;}
#cart-form {float: right; width: 34%;}
#cart-form p {margin-top:0;}
#cart-form input, #cart-form textarea {padding:6px 3px; font-size: 14px; margin-bottom: 6px}
#photo-id {display: none}
#cart .error {width: 64%; margin: 0 auto; font-size: 17px}

/* - ABOUT
------------------------------------------------------------------*/
#about .post p, #about .post ul {font-size:15px; line-height:23px; width: 80%; margin:0 auto 20px; text-align: center;}
#about .post ul {margin:0; padding: 0; list-style-type: none; width: 100%}
#about .post li {margin:0 0 10px;}
#about .section-header {margin:30px 0 14px}

#me-photo {width:100%; max-width: 400px; text-align: center; border:none; box-shadow: none; margin:30px 0;}

#about #about-legal {border-top:1px solid #cacaca; width:80%; margin: 50px auto 0; padding-top:10px;}
#about #about-legal p {font-size:11px; width: 100%; margin-bottom:4px;}

/* - ALGOLIA
--------------------------------------------*/
#search-stats {font-size: 16px; color:#777; margin-top:6px;}
.ais-header {font-size: 16px; color: #bc0000; font-weight: bold; margin-bottom: 4px}
#search-input {width: 100%; margin: 0 0 40px; font-size: 14px; padding: 8px 4px;}

#pagination-container .ais-pagination--item__disabled {display: none}
#pagination-container {width:100%; margin: 0 auto 70px; clear:both; display: block; padding: 0 0 70px; text-align: center; border-bottom: 1px solid #cacaca;}
#pagination-container ul {margin:0; padding: 0; list-style-type: none}
#pagination-container li {display: inline-block; padding: 0 4px; line-height: 50px}
#pagination-container a {color:#333; text-decoration: none; border:1px solid #cacaca; border-bottom:3px solid #cacaca; padding:10px 16px; background-color: white}
#pagination-container .ais-pagination--item__active a{border-bottom: 3px solid #bc0000}

#search .page-title {padding:0 0 10px; font-size: 24px; font-weight: bold; color: #bc0000;}

.no-results {font-weight: bold; font-size: 14px; text-align: center}
.page-template-search #container { width: 700px; margin: 80px auto 0}
.ais-refinement-list--item {margin-bottom: 4px}

#search-left {float:left;width:25%;}
#search-right {float:right; width:70%;}
#search-right .post {margin-bottom: 60px; min-height: 300px}
#search .count {color: #999}
#search .count:before {content:"(";}
#search .count:after {content:")";}

/* - RESPONSIVE
--------------------------------------------*/
@media screen and (min-width:200px) and (max-width:1180px) {
    #container {width: 90%}
	#header {width: 100%; text-align: center; margin:30px 0 0px;}
	#header ul {line-height: 24px}
    #logo, #nav {float: none}
    #nav {line-height: 30px}

    #nav .subnav {width: 100%; margin: 0; position: static; float: left}

    #container {margin-top:80px;}
    .post {margin-bottom: 100px; clear: both}
    .meta {clear: both}
    .reading-post {margin-bottom: 50px}

    #page-intro {width: 100%;}
	#search-left {float:left;width:100%;}
	#search-right {float:left; width:100%;}

    /*HOME*/
    .intro-text {width:100%;}    
    .home #stories-preview .post {width:100%; margin:0 0 30px}
    .home #stories-preview .post a {margin:0; height: auto;}
    .home #stories-preview .post img {width:100%; position: static; margin-left: 0; height: auto;}
    .home #stories-preview .browse-more-photos {margin-top:0;}
    .week-of-post img {width:100%; margin-right: 0}
}