/*
Theme Name: Storque2016
Theme URI: http://www.etsy.com/
Description: The updated 2016 Etsy blog theme.
Author: Etsy.com
Version: 1
Text Domain: storque
 */

@import "https://www.etsy.com/ac/primary/css/common/web-toolkit.20160517173025.css";

/*New CSS*/

body {
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background: #F8F6F2;
}

img#blogping {
	display: none;
}

.etsy-logo {
    text-indent: 82px;
    background-size: 75px;
    width: 100%;
}

a.site-title {
    font-size: 27px;
    padding-top: 2px;
    width: 100%;
    margin: 0;
}

a {
    color: #E55400;
}

.svg {
    width: 24px;
    height: 24px;
    fill: #E55400;
}

.input {
     background-color: #F6F6F6;
     -webkit-box-shadow: none;
}

.search-btn {
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    width: 50px;
    background: url("images/search.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;
}

.search-svg {
    position: absolute;
    top: 7px;
    left: 12px;
}

.input:focus, .textarea:focus, input-group-btn:focus, .btn-secondary:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #777;
}

button.svg-menu {
	fill: #f56400;
	height: 24px;
	border: 0;
	background: none;
}

.dropdown-nav .dropdown-button.btn-link {
    padding-right: 26px;
}

.dropdown-nav .btn-link {
    display: inline-block;
}

.btn-link {
    color: #444;
    border-radius: 0;
}

.btn-link:hover {
	-webkit-box-shadow: 0px -4px 0px #F56400 inset;
	-ms-box-shadow: 0px -4px 0px #F56400 inset;
	-moz-box-shadow: 0px -4px 0px #F56400 inset;
	-o-box-shadow: 0px -4px 0px #F56400 inset;
	box-shadow: 0px -4px 0px #F56400 inset;
	text-decoration: none;
	color: #222;
}

.dropdown .list-nav-item:not(:hover) {
    color: #444;
}

.list-nav-item:hover {
    background-color: #F6F6F6;
    color: #222222;
    text-decoration: none;
}

.homepage-featured img {
	width: 100%;
}

.post-card {
     height: 600px;
}

.post-card-img img {
    width: 100%;
    overflow: hidden;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.post-card-img img:hover, .post-card-img-large img:hover {
    opacity: .8;
}

.homepage-block {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.simple-share .btn-small {
    padding-left: 8px;
    padding-right: 8px;
}

.header-image {
    width: 100%;
    max-width: 1200px;
    margin-bottom: -5px;
    margin-left: auto;
    margin-right: auto;
}

h1, h2, h3, h4, h5, h6 {
    text-align: left;
    font-family: "Graphik Web", "Arial", "Helvetica", sans-serif;
    margin-bottom: 24px;
    margin-top: 24px;
}

h1, h2 {
    font-size: 32px;
}

h3 {
    font-size: 26px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
    line-height: 1.7;
}

h6 {
    background-color: #FFEFE8;
    text-transform: none;
    font-size: 14px;
    font-weight: 300;
    padding: 12px;
    color: #444444;
    letter-spacing: normal;
    margin-top: -12px;
}

.h4-display {
    letter-spacing: -0.5px;
}

blockquote {
    border-left: none;
    padding: 0;
}

.entry-content blockquote p {
    color: #f56400;
    font-size: 42px;
    font-family: "Guardian-EgypTT", serif;
    line-height: 1.2;
    font-style: normal;
    width: 120%;
    font-weight: 300;
    text-align: center;
    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: -10%;
}

.wp-caption.alignnone,.wp-caption {
    padding: 0;
    margin: 0;
    width: 100% !important;
}

.entry-content p.wp-caption-text {
	text-align: right;
	color: #777;
	font-size: 12px;
	margin-top: -12px;
}

.entry-content img, img.size-full {
    width: 110%;
    margin: 24px 0 24px -5%;
    height: inherit;
}

.pull-quote p {
    width: 120%;
    margin-left: -10%;
}

.entry-content p {
    font-size: 18px;
    line-height: 1.7;
    text-align: left;
    margin-bottom: 24px;
    margin-top: 24px;
    color: #444;
}

.entry-content ul, .entry-content ol {
	margin-left: 4%;
}

.entry-content ul li, .entry-content ol li {
	font-size: 18px;
    line-height: 1.7;
    text-align: left;
	margin: 12px 0;
    color: #444;
}

p.photo-by, p.wp-credits {
    font-size: 12px;
    color: #777;
    text-align: right;
    display: block;
    margin-top: 6px;
}

.card-img-wrap {
	margin: 0;
}

ul.other-editions, ul.share {
    list-style: none;
    margin-top: 36px;
    margin-bottom: 18px;
}

ul.other-editions li, ul.share li {
    display: inline-block;
    margin-right: 12px;
}

ul.other-editions li a {
    display: block;
    color: #222;
    margin-bottom: 12px;
}

a:focus, .btn-link:focus, .svg-menu:focus {
    outline: 1px dotted #9a9a9a;
}

em.facebook {
    background: url("images/facebook.png");
    background-size: 24px;
    background-position: center;
    height: 24px;
    width: 24px;
    display: block;
}

em.twitter {
    background: url("images/twitter.png");
    background-size: 24px;
    background-position: center;
    height: 24px;
    width: 24px;
    display: block;
}

em.instagram {
    background: url("images/instagram.png");
    background-size: 24px;
    background-position: center;
    height: 24px;
    width: 24px;
    display: block;
}

em.gplus {
    background: url("images/google.png");
    background-size: 24px;
    background-position: center;
    height: 24px;
    width: 24px;
    display: block;
}

em.pinterest {
    background: url("images/pinterest.png");
    background-size: 24px;
    background-position: center;
    height: 24px;
    width: 24px;
    display: block;
}

em.tumblr {
    background: url("images/tumblr.png");
    background-size: 24px;
    background-position: center;
    height: 24px;
    width: 24px;
    display: block;
}

em.youtube {
    background: url("images/youtube.png");
    background-size: 24px;
    background-position: center;
    height: 24px;
    width: 24px;
    display: block;
}

em.facebook:hover, em.twitter:hover, em.instagram:hover, em.gplus:hover, em.pinterest:hover, em.tumblr:hover, em.youtube:hover {
    opacity: .8;
}

.author-avatar img {
    width: 75px;
    height: 75px;
}

.image-404 {
    width: 100%;
    height: 500px;
    background: url("images/three-arm-sweater.png") no-repeat top center;
    background-size: 100%;
}

.overlay-body .list-nav {
    margin-left: 0;
	margin-right: 0;
}

.overlay-body ul li span {
	text-align: center;
	color: #222;
	font-size: 20px;
	font-weight: 500;
	margin: 24px 0 6px;
	display: block;
}

.overlay-body a.list-nav-item {
	text-align: center;
	color: #444;
	font-size: 16px;
}

/*COMMENTS*/

ul.comments {
    padding: 0;
}

ul.comments li img {
    border-radius: 200px;
    display: table-cell;
    vertical-align: middle;
    margin-right: 12px;
    width: 75px;
    height: 75px;
}

ul.comments li {
    display: table;
    width: 100%;
    margin: 36px 0;
}

.comment {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    text-align: left;
}

span.admin {
	color: #777;
	padding-top: 6px;
	font-size: 12px;
}


@media screen and (max-width: 1200px) and (orientation: portrait), screen and (max-height: 1200px) and (orientation: landscape) {
	body, .h2-display, .h4-display, .h5-display, .h6-display {
	    font-family: "Graphik Web", "Arial", "Helvetica", sans-serif;
	}
	
	.h1-display, .h3-display, .entry-content blockquote p {
	    font-family: "Guardian-EgypTT", serif;
	}

}

/*Pagination*/

.pager .btn-group-item {
	margin-left: -1px;
}

.pager .overflow-hidden {
	padding-left: 1px;
}


/*Large and down*/
@media only screen and (max-width: 1199px) {
	.entry-content img, img.size-full {
    	width: 100%;
    	margin: 30px 0 30px 0;
    	height: inherit;
	}
	
	.flag-img {
    	vertical-align: top;
    }
}

/*Medium down*/
@media only screen and (max-width: 899px) {
    
    .pull-quote p {
        width: 100%;
        margin-left: 0;
    }

    .entry-content blockquote p {
        font-size: 32px;
        width: 100%;
        margin-left: 0;
        text-align: left;
        line-height: 1.2;
        margin-bottom: 18px;
        margin-top: 18px;
    }

	.entry-content p {
	    font-size: 16px;
	    line-height: 1.7;
	    text-align: left;
	    margin-bottom: 18px;
	    margin-top: 18px;
	    color: #444;
	}
	
	.entry-content ul li, .entry-content ol li {
		font-size: 16px;
    	line-height: 1.7;
    	text-align: left;
		margin: 12px 0;
    	color: #444;
	}
    
    .homepage-block {
         position: relative;
         top: 0;
         -webkit-transform: translateY(0);
         -ms-transform: translateY(0);
         -moz-transform: translateY(0);
         -o-transform: translateY(0);
         transform: translateY(0);
    }
    
  	.entry-content img, img.size-full {
    	width: 100%;
    	margin: 18px 0 18px 0;
    	height: inherit;
	}
	
	h1, h2, h3, h4, h5 {
    	margin-bottom: 18px;
    	margin-top: 18px;
	}
	
	h6 {
		margin-top: -12px;
	}
    
    h1, h2 {
        font-size: 26px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }

    h5 {
        font-size: 16px;
    }
}

/*X-Small to Large*/
@media only screen and (min-width: 480px) and (max-width: 899px) {
    .post-card {
        height: 530px;
    }
}

/*Small to X-Small*/
@media only screen and (min-width: 0px) and (max-width: 639px) {
    
    .post-card {
        height: auto;
    }
}

/*X-Small only*/
@media only screen and (min-width: 0px) and (max-width: 479px) {
    
    .etsy-logo {
    	text-indent: 62px;
    	background-size: 58px;
    	width: 100%;
    	height: 28px;
	}

	a.site-title {
	    font-size: 20px;
	    padding-top: 2px;
	    width: 100%;
	    margin: 0;
	}

    .entry-content blockquote p {
        font-size: 26px;
        width: 100%;
        margin-left: 0;
        text-align: left;
        line-height: 1.2;
    }

    ul.comments li img {
        border-radius: 200px;
        display: table-cell;
        vertical-align: middle;
        margin-right: 12px;
        width: 50px;
        height: 50px;
    }
    
    .pager .btn {
    	padding: 8px;
    }
}

.screen-reader-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*End new CSS*/