/*
Theme Name: F-Stop
Theme URI: http://www.fstopmagazine.com
Description: F-Stop Magazine blog theme
Author: ckarpinski
Version: 11
Tags: responsive, white
*/
/* ==========================================================================
   Site wide
   ========================================================================== */
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}

html, body {height: 100%;}

body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	background-color:#2d2a31; /*#f2ff58 #52057B  eee 181818 202020 0a4436 c62b0f*/
	font-size:1em;
	line-height: 1.42857143;
	}

img {max-width:100%;height:auto;}

hr {
	border:0;
	border-top: 1px solid #939499;
	margin-top:20px;
	margin-bottom:20px;
}

blockquote {margin-left:2em;font-style:italic;}

#wrap {
     background-color:#ffffff;
     margin:0 auto;
	padding:.25em 1.25em 1em;
}

header {
     position:relative;
	border-bottom: 1px solid #939499;
}

ul, ol {margin-bottom: 0.625em;}
li {margin-left:3em;}

ul.social {
	position:absolute;
	top:5em;
	left:0;
}
.social li {
	display:inline-block;
	margin:0;
}

.social li a {padding:1em 1em 1em 0;}

footer {
	font-size: .9em;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 30px;
	}

.addthis_sharing_toolbox {
	margin:10px 0 4em 0;
	}

.blog-page .addthis_sharing_toolbox {
	margin:10px 0 0 0;
	}

.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: none;
}

.back-to-top.btn {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .3rem;
    color: #fff;
    background-color: #f8f9fa;
    background-color:rgba(0,0,0,0.74);
    border-color: #f8f9fa;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    transition: color .15s
}

.fancybox-caption {border-top:0px;}

/* ==========================================================================
   Site wide links
   ========================================================================== */
a, .fancybox-caption a {
	text-decoration:underline;
	color:#df1e17;/*blue 1979C8 df1e17*/
}
a:hover, .fancybox-caption a:hover {
	color:#ae1712;/*darker version of a link color, darker blue 11548c, darker red ae1712*/
	text-decoration: underline!important;
}

div.nav-posts a:hover {
	background-color:#ae1712;/*UPDATE to darker shade of link color*/
	text-decoration: underline;
}


.social .fa {font-size:1.75em;}
.social>li>a {color:#666666;}
.social>li>a:visited {color:#666666;}

.social .fa-facebook:hover {color: #4060A5;}
.social .fa-twitter:hover {color: #54b2cc;}
.social .fa-envelope-o:hover {color: purple;}
.social .fa-instagram:hover {color: #dc2c74;}
.social .fa-store:hover {color: #54b2cc;}



.home-specials a, .bookbox a, .interviewbox a {text-decoration:none;}

.fancybox-share__links a {color:white;}

/* button colors - update to link color*/
input#searchsubmit, input#submit, div.nav-posts a {
	background-color: #df1e17;/*UPDATE to link color*/
     color: white;
	border:none;
	padding:.5em;
}

/* ==========================================================================
   Navigation Menu
   ========================================================================== */
.topnav {
  overflow: hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
   margin-top:.75em;
}

.topnav a {
	display: none;
	padding: 14px 15px 9px 15px;
	text-decoration: none;
	font-size: 1em;
	border-bottom: 5px solid #fff;
}

.topnav a:hover {
	/*border-bottom: 5px solid #1B998B;*/
	color: #df1e17;border-bottom: 5px solid #1979C8;/*UPDATE to link color 087fce 1979C8 0880A1*/
	text-decoration:none!important;
}

/* highlight the current page */
.topnav a.active {
	color:black;
	border-bottom: 5px solid #df1e17;/*UPDATE to link color 087fce 1979C8 0880A1*/
}

.topnav .icon {
    display: block;
    align-self:flex-end;
  }

 .topnav.responsive {
	 position: relative;
	 border-top:1px solid #e7e7e7;
	 margin-top:3em;
 }

 .topnav.responsive a.icon {
	position: absolute;
	right: 0;
	top: 0;
 }
 .topnav.responsive a {
	display: block;
 }

 .fa.fa-bars{font-size:2em;}




/* ==========================================================================
   Site wide text
   ========================================================================== */

.italic {font-style:italic;}
.bold {font-weight:800;}
.indent {text-indent:3em;}

h1, h2, h3, h4, h5, h6 {
	font-weight:500;
}

h2 {font-size:1.872em;}
h3 {font-size:24px;}

p {margin: 0 0 16px;}

h4.headings {
	font-family: Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 5px 0 10px 0;
	margin-top:10px;
	}

h4.headings, h1.smheading  {font-size:2em;}

.large-bold {
	font-size:1.2em;
	font-weight:800;
	text-transform:uppercase;
	margin:0;
}
/* ==========================================================================
   Grid
   ========================================================================== */
.row {
	display:flex;
	flex-wrap:wrap;
}

.col-xs-3 {
	flex:0 0 auto;
	width:25%;
	padding: 0 .5em;
}
/* ==========================================================================
   Site wide form
   ========================================================================== */
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

input[type="text" i] {
    padding: 1px 2px;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}

input#searchsubmit {
	margin-top:.25em;
}

/* ==========================================================================
   Index page
   ========================================================================== */
.outer {height:100%;}

.cover {
	margin-bottom: 10px;
	margin-top: 2%;
	text-align: center;
	width: 100%;
	height: 80%;
	padding-bottom:.5em;
	}

.cover img {
	border: 1px solid #000;
	max-height: 100%;
	margin-bottom:.5em;
}


.update, .cover p {
	color: #000000;
	text-align: center;
}

.update {padding-top:1em;}

/* ==========================================================================
   Home page
   ========================================================================== */

.img-two, .img-three, .img-four, .img-six, .img-seven, .img-eight  {display:none;}

h2.homeheadings {
	font-family: Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 20px;
    	margin-bottom: 10px;
}

.third h2.homeheadings, .fourth h2.homeheadings {margin-top:0;}

.home-specials {
	font-family: Helvetica, sans-serif;
	font-size: 23px;
	letter-spacing: 2px;
	padding: 5px 0 0 0;
	text-align: center;
}

p.home-specials {margin-bottom:0;}

.home-ads .col-lg-6{margin-bottom:10px;}

.home-ads {justify-content:center;}

.three h2 {margin-top:0;}

.fourth iframe {margin-left:5px; overflow:hidden;}

.news h6 {
	font-weight:600;
	font-size:.9em;
	margin-bottom:.2em;
	}

.news a {word-break: break-all;}

.border {
	border:none!important;
	border-bottom: 1px solid #d6d6d6!important;
	padding-bottom:10px;
	margin-bottom:10px;
}

.bookbox, .featuredbox {
	padding-bottom:20px;
	margin-bottom:20px;
	border-bottom: 1px solid #939499;
}

.featuredbox {
	margin-bottom:0;
}

#instafeed .col-sm-2 {margin-bottom:20px;}

.article-author {
	font-family: Helvetica, sans-serif;
	font-size:12px;
	letter-spacing:2px;
}

.article-title {
	font-family: Helvetica, sans-serif;
	font-size:18px;
	letter-spacing:1px;
	line-height:1em;
}

.smtitle2 {line-height: 1.25em;}

/*rss feed*/
.rss-item-image {padding-bottom:1em;}
.rss-item-date {
	font-style:italic;
	font-size:.75em;
}

#rss article {
	margin-bottom:2em;
	word-break: break-all;
	}

#rss h4 {
	font-size:1.1em;
	line-height: 1.2;
	font-weight: bold;
}

#rss h4 a {
    color: black;
    text-decoration: none;
}

#rss h4 a:hover {text-decoration:underline;}


/* ==========================================================================
	Portfolio issue
   ========================================================================== */


/* ==========================================================================
   Featured artist page
   ========================================================================== */
/* ---- grid with masonry---- */
.grid .col-sm-2 {
	padding-left:0px;
	padding-right: 0px;
}

.grid img {padding:5%;}


.featuredtext div {padding:0 1.5em;}

.regular {padding-bottom:20px;}

.fancybox-caption {border-top:0px;}


/* ==========================================================================
   Group exhibition page
   ========================================================================== */

.groupexhibit {
	padding: 0 0px 20px 0px;
	text-align: center;
}

h1.smheading {
	padding: 5px 0 10px 0;
	}

.justified-gallery img {padding:5%;}

.groupexhibit.justified-gallery {clear:both;}



 /* ==========================================================================
   Submissions page
   ========================================================================== */
 h3.grey {
	background-color: #CCC;
	padding: 2px 0 2px 4px;
	font-size: 1.1em;
	margin-top:0;
}

.issue {
	margin: 0px 10px 10px 10px;
	padding: 15px;
	border-style: solid;
	border-width: 1px;
}
.issue p {
	padding-left:4px;
	margin-bottom:.5em;
}

.instructions {
	letter-spacing:1px;
	margin-bottom:0.1875em;
}

.subad {text-align:center;}

/* ==========================================================================
   Archive page
   ========================================================================== */

   img.archive {margin: 5px 0px;}


   .archive-issue {
		padding-bottom:1em;
		}

/* ==========================================================================
   Links page
   ========================================================================== */
.links p {margin:0; padding:0;line-height: 1.5em;}

.links-headings {
	font-size:1.3em;
	/*font-family: Helvetica, Verdana, Arial, "sans serif";*/
	text-transform: capitalize;
	line-height: 1.25em;
	margin:0 0 2px 0;
	}

.links .col-sm-6 {padding-left:2%;}

/* ==========================================================================
   Blog
   ========================================================================== */

.blog-page .blog .tlw-list li {
    margin-bottom: 0;
}
/*columns and space under a post*/
.blog .col-sm-9 {
	padding-left:10px;
	padding-right:10px;
	border-right: 1px solid #d6d6d6;
}

.blog .col-sm-3 {
	padding-left:10px;
	}

.hentry {
	margin-bottom:2em;
	}

/*general text*/
.blog h4.headings {
	padding-bottom:0px;
	margin-bottom:0px;
	}

h4.headings a:link, h4.headings a:visited {
	color:#000000;
	text-decoration:none;
	}
h4.headings a:hover {text-decoration:underline;}

h3.entry-title {
	font-weight:normal;
	font-family: Helvetica;
	font-size:1.8em;
	color:#000000;
	margin-top:.5em;
	line-height:1.2;
	}

.blog-home h3.entry-title {
	font-size:1.4em;
	line-height: 1.2;
	margin-top:0;
	font-weight: bold;
    letter-spacing: normal;
}

h3.entry-title a:link, h3.entry-title a:visited {
	color: #000;
	text-decoration:none;
	}

h3.entry-title a:active, h3.entry-title a:hover {
	color:#df1e17;/*entry title hover color changes with each issue*/
	text-decoration:underline;
	}

.blog-home hr {margin-bottom:.5em;}

.blog-page .blog li {
    margin-bottom: 0.5em;
}

/*used on tag, category, author pages*/
.blog-sub-headings {
	color:#000000;
	font-weight:bold;
	font-size: 14px;
	padding-top:.25em;
	padding-bottom:1em;
	}
.blog-sub-headings span {
	color:#333;
	font-size: 1em;
	font-style:italic;
	font-weight:normal
}

.blog .col-sm-3 h3 {
	font-size: 18px;
	margin-top: 20px;
    margin-bottom: 0.3125em
}

.blog .col-sm-3 label.screen-reader-text {display:none;}


.blog h2 {
	font-size:1.6em;
	max-width:675px;
	margin-left:auto;
	margin-right:auto;
	}

.blog .single h2 {
	font-size:1.6em;
	max-width:100%;
	margin-left:0;
	}

.blog-preview h2 {
	font-size: 1em;
	font-weight:normal;
}

.blog-home .col-sm-9.row {margin-top:1.25em;}

.blog .row .col-sm-9 .hentry p.entry-meta {
	font-size:12px;
	color:#777777;
	margin-left:0;
	margin-right:0;
	}

.blog-sub-headings span a:link {color:#777;}
.blog-sub-headings span a:visited {color:#777;}


/* navigation for previous and next posts*/
.nav-posts .nav-previous a:before {
	content: '\2190\00a0';
}
.nav-posts .nav-next a:after, a.moretag:after  {
	content: '\00a0\2192';
}

a.moretag {
	text-decoration:none;
	padding: 1em 1em 1em 0;
	display: inline-block;
}
a.moretag:hover {
	text-decoration:underline;
}

.nav-posts {
	padding:20px 0px;
	font-size:1em;
	margin-bottom:2em;
	}
.nav-posts a:link, .nav-posts a:visited, .nav-posts a:active {
	text-decoration: none;
}

.nav-previous {
	float: left;
	width: 50%;
}
.nav-next {
	float: right;
	text-align: right;
	width: 50%;
}
.nav-next:after {
  content: "";
  display: table;
  clear: both;
}

/* Images & Image Captions*/
.entry-content img,
.comment-content img,
.widget img {
    max-width: 100%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width >attributes are scaled correctly */
}
img.size-full {
    max-width: 100%;
    width: auto; /* Prevent stretching of full-size images with height and >>width attributes in IE8 */
}
  .wp-caption {
    /* Force the box to be 100% */
    width: 100% !important;
    text-align:center;
  }


.blog img {padding:10px 0px 5px 0px;}

.blog form input#s {
    width: 100%;
}

.wp-caption-text {
	color: #888;
    font-size: 14px;
    margin-bottom:30px;
    padding-left:0px;
    padding-right:0px;
    text-align:center;
    }

.blog .row .col-sm-9 .hentry p {
	max-width:675px;
	margin-left:auto;
	margin-right:auto;
	}

.blog .row .col-sm-9 .hentry p.wp-caption-text {
	max-width:100%;
	}

/*author profile section on blog posts*/
#entry-author-info {
	border-top: 4px solid #000;
	line-height: 20px;
	margin: 0 0 1em 0;
	overflow: hidden;
	padding: 18px 20px;
}
#entry-author-info #author-avatar {
	background: #fff;
	float: left;
	height: 60px;
	margin: 0 -104px 0 0;
	padding: 0px;
}
#entry-author-info #author-description {
	float: left;
	margin: 0 0 0 75px;
}
#entry-author-info h2 {
	color: #000;
	font-size: 100%;
	font-weight: bold;
	margin-bottom: 0;
}
.blog #author-avatar img {padding:0;}

/*comment form*/
p.comment-form-comment textarea#comment{
	width:100%;
	}

/*widgets and widgets area*/
select#cat {width:100%;}

.blog .col-sm-3 ul {list-style-type:none;}
.blog .col-sm-3 ul {padding-left:0;}
.blog .col-sm-3 form div {text-align:right;}

#taxonomy_list_widget_list_2 {font-size:1.3em;}
#taxonomy_list_widget_list_3 {font-size:.9em;}
.tlw-list li {margin-left:0}
.tlw-list li a {text-decoration:none;}
div.nav-posts {width:100%;}


/*share tools at bottom of post*/
#content div.sharedaddy, #main div.sharedaddy, div.sharedaddy {margin-top:20px;}

/* hide share tools on index excerpts */
.blog-preview .sharedaddy {display:none;}

/*twitter widget*/
.timeline-Footer {display:none;}

p.entry-meta {font-size:.85em;}

/* ==========================================================================
   About page
   ========================================================================== */
.about-text {max-width:625px; margin-left:15px;}
.about-text p {margin:0; padding:0;}
.about-text h3 {margin-top:1.5em;}
.list {
	margin-top:10px;
	list-style: disc;
	}

ul.people {
	list-style-type:none;
	padding-left:0em;
}
.people li {margin-bottom:.1em;}

.about-text h3 {
	letter-spacing:.5px;
	}


 /* ==========================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 576px){
	.col-sm-6 {
		flex: 0 0 auto;
		width: 50%;
		padding: 0 .5em;
	}

}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

	#wrap {
		max-width:750px;
	}
	ul.social {
		position:absolute;
		top:.75em;
		right:1em;
		left:auto;
	}

	.social li a {padding:1em 0 1em 1em;}

	.topnav{flex-direction:row;margin-top:0;}
	.topnav a {display:block; font-size:0.875em;}
	.topnav a.icon {display:none;}
	.topnav.responsive {border-top:0px;}
	

	.Twentyth-intro::after {
  		content: "";
  		clear: both;
  		display: table;
		}

	.float-left{float:left;}
	.Twentyth-icon {width:20%;}
	.Twentyth-icon img {padding:0;}
	.Twentyth-text {width:75%;padding-left:5%;}

/* ==========================================================================
   Grid
   ========================================================================== */

	.col-sm-3 {
		flex:0 0 auto;
		width:25%;
		padding: 0 .5em;
	}

	.col-md-3 {
		flex:0 0 auto;
		width:25%;
		padding: 0 .5em;
	}

	.col-sm-9 {
		flex:0 0 auto;
		width:75%;
		padding: 0 .5em;
	}

	.col-md-12 {
		flex: 0 0 auto;
		width: 100%;
	}

	.col-sm-2 {
		flex: 0 0 auto;
		width: 16.6666666667%;
		padding: 0 .5em;
	}

	.col-sm-6 {
		flex:0 0 auto;
		width:50%;
		padding: 0 .5em;
	}

	/*blog*/
	.blog .col-sm-9 {
		padding-right:30px;
		}

	.blog .col-sm-9 .post {
		width: 50%;
    		flex: 0 0 auto;
    		padding: 0 1em;
		}
	.blog .col-sm-9.cats .post {
		width: 100%;
		display:flex;
		padding:0;
		}

	.blog .col-sm-9.cats .post div {
		flex-basis:66.666666%;
		}
	.blog .col-sm-9.cats .post div.post-thumb {
		flex-basis:33.333333%;
		padding-right:2em;
		}


	.img-two, .img-three, .img-four, .img-six, .img-seven, .img-eight {display:block;}

	ul.people {padding-left:4em;}

	/*Featured page used for Portfolio issues - 6 portfolios*/
	.featured .row .col-sm-4 {
		margin-bottom:25px;
		font-size:1.3em;
		line-height:1.1em;
	}

	.featured span.bold {
		font-size:1.2em;
		}

	img.featured {padding-bottom:5px;}

	/*Group Exhibition*/
	h1.smheading {
		float:right;
		margin-top:10px;
	}

	.group h4.headings {float:left;}

	/* Archive page */

		.archive-issue {
			flex-basis:25%;
			display:flex;
			flex-direction:column;
			padding-left:1%;
			padding-right:1%;
		}


	}



 @media (min-width: 992px) {

	 #wrap{max-width:970px;}

	.topnav a {font-size:1em;}
/* ==========================================================================
   Grid
   ========================================================================== */
	.col-lg-6 {
		flex:0 0 auto;
		width:50%;
		padding: 0 .5em;
	}

	.blog .col-sm-3 {
		padding-left:25px;
		}


 	.bookbox, .featuredbox {
		padding-bottom:0em;
		margin-bottom:0px;
		border-bottom: 0px solid #d6d6d6;
		padding-right:.75em;
	}

	.interviewbox, .groupbox {
		padding-left:.75em;
	}

	.home ads {text-align:left;}
	.subad {text-align:left;}

	.news::-webkit-scrollbar, #rss::-webkit-scrollbar {
		width: 10px;
		height:30px;
	}
	.news::-webkit-scrollbar-thumb, #rss::-webkit-scrollbar-thumb {
		border-radius: 1px;
		background-color: rgba(0, 0, 0, .3);
		-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
		height:100px;
		}
	 
	/* blog post 2 across grid */ 
	 
	 .flex-parent{
		 display:flex; 
		 flex-direction:row;
	 }
	 
	 .grid-50 {
		 flex-basis:50%;
		 padding:.5em;
	 }
	 
	 
/*rss feed*/
	#rss {
		max-height: 350px;
		overflow: auto;
		overflow-y: scroll;
		overflow-x:hidden;
		}

	.rss-item-image {
		padding-bottom:0em;
		float: left;
    		width: 30%;
    		padding-right: .5em;
		}

	#rss article::after{
  		content: "";
  		clear: both;
  		display: table;
		}

	.news {
		max-height: 350px;
		overflow: auto;
		overflow-y: scroll;
		overflow-x:hidden;
		}

}
 @media (min-width: 1200px) {
	 #wrap {max-width:1170px;}

 }