/*
Theme Name: Formal Sweatpants
Theme URI: http://www.formalsweatpants.com
Author: Mike Royer
Author URI: http://www.mikeroyerdesign.com
Description: Custom Theme for Formal Sweatpants
Version: 1.0
License: GNU General Public License
*/

/*-----------------------------------------------------------------------------------*/
/* TEMPORARY
/*-----------------------------------------------------------------------------------*/
.temporary{
position: absolute;
position: fixed;
background: red;
color: #FFF;
left: 10px;
padding: 4px 12px;
box-shadow: 0 1px 1px #000;
z-index: 9999;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
font-size: 12px;
font-weight: lighter;
letter-spacing: 1px;
display: none;
}

/*-----------------------------------------------------------------------------------*/
/* GLOBAL STYLES
/*-----------------------------------------------------------------------------------*/
body{
}
.container{
max-width: 970px;
}

/*-----------------------------------------------------------------------------------*/
/* HEADER
/*-----------------------------------------------------------------------------------*/
#header{
background: url('images/header-background.jpg');
height: 250px;
}
@media (max-width: 767px) {
	#header{border-bottom: 6px solid #000; height: 150px; background-position: center center;}
}
.logo{
text-align: center;
}
.logo img{
width: 100%;
height: auto;
margin-top: 30px;
}
@media (max-width: 991px) {
	.logo img{margin-top: 50px;}
}
@media (max-width: 767px) {
	.logo{text-align: left;}
	.logo img{width: 240px; margin-top: 20px;}
}
.social-buttons{
margin-top: 100px;
}
#facebook, #twitter, #instagram{
color: #FFF;
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 40px;
border-radius: 4px;
}

#facebook{
background: #44619d; box-shadow: 0 3px 0 #1c366e;
}
#facebook:hover{
text-decoration: none; box-shadow: 0 2px 0 #1c366e; position: relative; top:1px;
}
#twitter{
background: #6eb6eb; box-shadow: 0 3px 0 #3c81b4;
}
#twitter:hover{
text-decoration: none; box-shadow: 0 2px 0 #3c81b4; position: relative; top:1px;
}
#instagram{
background: #416f96; box-shadow: 0 3px 0 #234a6b;
}
#instagram:hover{
text-decoration: none; box-shadow: 0 2px 0 #234a6b; position: relative; top:1px;
}

@media (max-width: 991px) {
	#facebook, #twitter, #instagram{
	width: 45px;
	height: 45px;
	line-height: 45px;
	font-size: 25px;
	}
	.social-buttons{margin-top: 110px;}
}

/*-----------------------------------------------------------------------------------*/
/* NAVIGATION
/*-----------------------------------------------------------------------------------*/
#navigation{
background: #000;
text-align: center;
}

#navigation ul{
margin: 0;
padding: 0;
list-style: none;
}

#navigation li{
display: inline-block;
height: 54px;
padding: 0;
margin: 2px 0 2px 0;
}

#navigation li a{
display: inline-block;
height: 54px;
background-image: url('images/navigation-sprite.png');
text-indent: -9999px;
}

/* START NAVIGATION SPRITE */
.navigation-about a{
width: 118px; background-position: 0px 0px;
}
.navigation-about a:hover{
background-position: 0px 54px;
}
.navigation-contact a{
width: 160px; background-position: -120px 0px;
}
.navigation-contact a:hover{
background-position: -120px 54px;
}
.navigation-old a{
width: 106px; background-position: -284px 0px;
}
.navigation-old a:hover{
background-position: -284px 54px;
}
.navigation-popular a{
width: 158px; background-position: -392px 0px;
}
.navigation-popular a:hover{
background-position: -392px 54px;
}
.navigation-sketchbook a{
width: 200px; background-position: -554px 0px;
}
.navigation-sketchbook a:hover{
background-position: -554px 54px;
}
.navigation-store a{
width: 178px; background-position: -762px 0px;
}
.navigation-store a:hover{
background-position: -762px 54px;
}
/* END NAVIGATION SPRITE */

.menuBtn{
display: none;
float: right;
margin-top: 50px;
}
.menuBtn i{
cursor: pointer;
background: #e93a30;
color: #FFF;
text-align: center;
font-size: 25px;
width: 45px;
height: 45px;
line-height: 45px;
display: inline-block;
border-radius: 4px;
box-shadow: 0 3px 0 #941912;
}
.menuBtn i:hover{
position: relative;
top:1px;
box-shadow: 0 2px 0 #941912;
}
.mobile-navigation{
display: none;
background: #000;
}
.mobile-navigation ul{
margin: 0;
padding: 10px 0;
list-style: none;
text-align: center;
}
.mobile-navigation li{
margin: 0;
padding: 0;;
}
.mobile-navigation li a{
font-family: 'Amatic SC', sans-serif;
color: #FFF;
font-size: 30px;
display: block;
width: 100%;
font-weight: 700;
}
.mobile-navigation li a:hover{
text-decoration: none;
background: #ffE500;
color: #000;
}
@media (max-width: 767px) {
	.menuBtn{display: inline-block;}
	#navigation{display: none;}
	.social-buttons{display: none;}
	.navigation-popular a:before{content: "\f005"; font-family: FontAwesome; margin-right: 10px; font-size: 24px; vertical-align:middle; color:#ffE500;}
	.navigation-popular a:after{content: "\f005"; font-family: FontAwesome; margin-left: 10px; font-size: 24px; vertical-align:middle; color:#ffE500;}
}

/*-----------------------------------------------------------------------------------*/
/* JETPACK SHARE BUTTONS
/*-----------------------------------------------------------------------------------*/
.sharedaddy{
display: none;
}

.jetpack-share-buttons .sharedaddy{
display: inline-block;
}

.jetpack-share-buttons h3{
font-family: 'Amatic SC', sans-serif;
font-weight: bold;
font-size: 30px;
display: inline-block;
vertical-align: bottom;
}


/*-----------------------------------------------------------------------------------*/
/* FRONT PAGE
/*-----------------------------------------------------------------------------------*/
.frontpage-content{
margin-top: 20px;
text-align: center;
}

.frontpage-thumbnail-container{
text-align: center;
}

@media (max-width: 767px) {
	.frontpage-thumbnail-container{max-width: 300px; margin: 0 auto;}
}

.frontpage-thumbnail-container img{
width: 100%;
height: auto;
border: 3px solid #333;
border-radius: 6px;
margin-bottom: 15px;
transition: all 0.2s ease;
}

.frontpage-thumbnail-container img:hover{
border: 3px solid #ee281d;
}

.frontpage-thumbnail-container h2{
font-size: 28px;
font-family: 'Amatic SC', sans-serif;
font-weight: 700;
margin: 0;
padding: 8px 0 8px 0;
}

/* STYLE FIRST THUMBNAIL ON HOMEPAGE */
.frontpage-content div:first-of-type h2{
color: #FFF;
background: #ee281d;
border-top-left-radius:6px;
border-top-right-radius:6px;
}
.frontpage-content div:first-of-type h2:before{
content: 'Newest: ';
}
.frontpage-content div:first-of-type img{
border-top-left-radius:0px;
border-top-right-radius:0px;
border-color:#ee281d;
}

/* REMOVE STYLE ON FIRST THUMBNAIL OUTSIDE HOMEPAGE */
.paged .frontpage-content div:first-of-type h2{
color: #000;
background: none;
border-top-left-radius:none;
border-top-right-radius:none;
}
.paged .frontpage-content div:first-of-type h2:before{
content: '';
}
.paged .frontpage-content div:first-of-type img{
border-top-left-radius:6px;
border-top-right-radius:6px;
border-color:#000;
}

/*-----------------------------------------------------------------------------------*/
/* ARCHIVE PAGE
/*-----------------------------------------------------------------------------------*/
.archive .title{
font-family: 'Amatic SC', sans-serif;
font-weight: bold;
font-size: 40px;
text-transform: uppercase;
}

/*-----------------------------------------------------------------------------------*/
/* JUST PAGE
/*-----------------------------------------------------------------------------------*/
.just-page .title{
font-family: 'Amatic SC', sans-serif;
font-weight: bold;
font-size: 48px;
text-transform: uppercase;
text-align: center;
margin-bottom: 20px;
}

.just-page .the-content{
font-size: 18px;
text-align: justify;
font-weight: 300;
}


/*-----------------------------------------------------------------------------------*/
/* SINGLE
/*-----------------------------------------------------------------------------------*/
.single .title{
font-family: 'Amatic SC', sans-serif;
font-weight: bold;
font-size: 40px;
}

.single .the-content{
font-size: 18px;
text-align: justify;
font-weight: 300;
}

/*-----------------------------------------------------------------------------------*/
/* COMICS SINGLE PAGE
/*-----------------------------------------------------------------------------------*/
.single-comic .title{
font-family: 'Amatic SC', sans-serif;
font-weight: bold;
font-size: 40px;
}

@media (max-width: 767px) {
	.single-comic .title{text-align: center;}
}

.note{
background-image: url('images/note-background.svg');
background-size: cover;
font-size: 18px;
text-align: center;
font-weight: 300;
padding: 30px;
}

.more-pants{
margin-top: 40px;
}

.more-pants .col-sm-3{
max-width: 300px;
margin: 0 auto;
}

.more-pants-title{
font-family: 'Amatic SC', sans-serif;
font-weight: bold;
font-size: 40px;
padding: 15px 0 15px 15px;
margin-bottom: 20px;
background-image: url('images/more-pants-background.svg');
background-size: cover;
}

.more-pants .post-link img{
width: 100%;
height: auto;
border: 2px solid #333;
border-radius: 6px;
margin-bottom: 20px;
transition: all 0.3s ease;
}

.more-pants .post-link img:hover{
border: 2px solid #FFD200;
}

.facebook-morepants{
position: absolute;
left: 5px;
}

.subscribe-link img{
width: 100%;
height: auto;
}

/*-----------------------------------------------------------------------------------*/
/* SKETCHBOOK PAGE
/*-----------------------------------------------------------------------------------*/
.sketchbook .title a{
color: #000;
font-family: 'Amatic SC', sans-serif;
font-weight: bold;
font-size: 48px;
transition: all 0.3s ease;
}

.sketchbook .title a:hover{
text-decoration: none;
color: #ee281d;
}

.sketchbook .the-content{
margin-bottom: 20px;
font-size: 18px;
text-align: justify;
font-weight: 300;
}

.view-post{
color: #000;
display: inline-block;
padding: 2px 15px;
text-align: center;
font-size: 30px;
border-radius: 4px;
background: #e8e075;
font-family: 'Amatic SC', sans-serif;
box-shadow: 0 3px 0 #ada750;
margin-bottom: 10px;
font-weight: 400;
}
.view-post:hover{
color: #000;
text-decoration: none;
box-shadow: 0 2px 0 #ada750;
position: relative;
top:1px;
}

/*-----------------------------------------------------------------------------------*/
/* POPULAR PANTS PAGE
/*-----------------------------------------------------------------------------------*/
.popular .title{
color: #000;
font-family: 'Amatic SC', sans-serif;
font-weight: bold;
font-size: 48px;
text-align: center;
margin-bottom: 20px;
}
.popular .title:before{
content: "\f005"; 
font-family: FontAwesome; 
margin-right: 10px; 
font-size: 24px; 
vertical-align:middle; 
color:#000;
}
.popular .title:after{
content: "\f005"; 
font-family: FontAwesome; 
margin-left: 10px; 
font-size: 24px; 
vertical-align:middle; 
color:#000;
}

/*-----------------------------------------------------------------------------------*/
/* OLD PANTS PAGE
/*-----------------------------------------------------------------------------------*/
.old .title{
color: #000;
font-family: 'Amatic SC', sans-serif;
font-weight: bold;
font-size: 48px;
text-align: center;
margin-bottom: 20px;
}

.oldpants-link{
text-align: center;
}

.oldpants-link a{
font-size: 16px;
font-weight: 200;
color: #FFF;
background: #545454;
display: block;
width: 100%;
margin: 0 0 15px 0;
padding: 10px 20px;
border-radius: 4px;
box-shadow: 0 4px 0 #000;
position: relative;
}

.oldpants-link a:hover{
text-decoration: none;
color: #FFF;
box-shadow: 0 3px 0 #000;
top:1px;
}

@media (max-width: 767px) {
	.oldpants-link a{
	width: 80%;
	margin: 0 auto 15px auto;
	}
}


/*-----------------------------------------------------------------------------------*/
/* CONTACT PAGE
/*-----------------------------------------------------------------------------------*/
.contact-page-form input, .contact-page-form textarea{
width: 100% !important;
box-sizing: border-box;
max-width: 100% !important;
border: 1px solid #DDDDDD;
border-radius: 3px;
padding: 4px 12px !important;
font-size: 28px !important;
color: #333333 !important;
font-weight: 100;
}

.contact-page-form input[type=submit]{
font-family: 'Amatic SC', sans-serif;
font-size: 40px;
border-radius: 4px;
padding: 0 30px;
color: #FFF !important;
text-align: center;
background: #ee281d;
box-shadow: 0 3px 0 #992119;
border: none !important;
}
.contact-page-form input[type=submit]:hover{
color: #FFF;
text-decoration: none;
position: relative;
top: 1px;
box-shadow: 0 2px 0 #992119;
}

/*-----------------------------------------------------------------------------------*/
/* SPONSORS
/*-----------------------------------------------------------------------------------*/
#sponsors{
background: #DDD;
padding: 20px 0;
margin-top: 20px;
}
#sponsors img{
border: 1px solid #000;
display: block;
width: 100%;
height: auto;
}
.sponsor-1, .sponsor-2{
overflow: hidden;
}

#mobile-sponsors{
text-align: center;
}

/*-----------------------------------------------------------------------------------*/
/* SIDEBAR
/*-----------------------------------------------------------------------------------*/
.sidebar{
margin-top: 30px;
margin-bottom: 30px;
text-align: right;
}

.fsp-widget-title{
font-size: 20px;
}

@media (max-width: 767px) {
	.sidebar{
	text-align: center;
	}
}


/*-----------------------------------------------------------------------------------*/
/* PAGINATION FRONT PAGE
/*-----------------------------------------------------------------------------------*/
.paging{ text-align: center; margin: 20px 0; }

.prev a, .random a, .next a{
font-family: 'Amatic SC', sans-serif;
font-size: 40px;
border-radius: 4px;
padding: 0 30px;
color: #FFF;
text-align: center;
}
.prev a:hover, .random a:hover, .next a:hover{
color: #FFF;
text-decoration: none;
position: relative;
top: 1px;
}

.prev a, .next a{ background: #B1B1B1; box-shadow: 0 3px 0 #737373; }
.random a{ background: #ee281d; box-shadow: 0 3px 0 #992119; }

.prev a:hover, .next a:hover{ box-shadow: 0 2px 0 #737373; }
.random a:hover{ box-shadow: 0 2px 0 #992119; }

.prev a:before{
content: "\f053";
font-family: FontAwesome;
font-size: 24px;
margin-right: 10px;
vertical-align: middle;
}

.next a:after{
content: "\f054";
font-family: FontAwesome;
font-size: 24px;
margin-left: 10px;
vertical-align: middle;
}

/*PAGINATION ON HOMEPAGE*/
.homepage .prev a, .homepage .random a, .homepage .next a{margin: 0 5px;}

/*PAGINATION ON POPULAR*/
.popular .prev a, .popular .random a, .popular .next a{margin: 0 5px;}

/*PAGINATION ON SINGLE COMIC*/
.single-comic .prev a, .single-comic .random a, .single-comic .next a{display: block; padding: 0;}

/*PAGINATION SMALL*/
.small-paging{text-align: right; margin-top: 20px;}
.small-paging .prev a, .small-paging .random a, .small-paging .next a{
display: inline-block !important;
height: 40px;
min-width: 40px;
line-height: 40px;
vertical-align: middle;
padding: 0 10px;
}
.small-paging .random a{font-size: 30px;}
.small-paging .prev a:before{margin-right: 0px; position: relative; top: 2px;}
.small-paging .next a:after{margin-left: 0px; position: relative; top: 2px;}

/*PAGINATION ON SKETCHBOOK*/
.sketchbook .prev a, .sketchbook .next a{display: block; padding: 0;}

/*PAGINATION ON SKETCHBOOK*/
.single .prev a, .single .next a{display: block; padding: 0;}


/*MEDIA QUERY*/
@media (max-width: 767px) {
	.homepage .prev a, .homepage .random a, .homepage .next a{display: block; margin-bottom: 10px;}
	.single-comic .prev a, .single-comic .random a, .single-comic .next a{margin-bottom: 10px;}
	.sketchbook .prev a, .sketchbook .next a{margin-bottom: 10px;}
	.single .prev a, .single .next a{margin-bottom: 10px;}
	.small-paging{text-align: center; margin-top: 10px; margin-bottom: 10px;}
}


/*-----------------------------------------------------------------------------------*/
/* FOOTER
/*-----------------------------------------------------------------------------------*/
#footer{
background: url('images/footer-background.jpg');
min-height: 270px;
padding: 60px 0;
}
.footer-navigation ul{
margin: 5px 0 0 0;
padding: 0;
list-style: none;
}
.footer-navigation li{
display: inline-block;
margin-right: 20px;
width: 100px;
}
.footer-navigation a{
color: #FFF;
font-weight: lighter;
font-size: 13px;
transition: all 0.3s ease;
}
.footer-navigation a:hover{
color: #ffE500;
text-decoration: none;
}
.facebook-footer{
display: inline-block;
position: relative;
margin: 0 0 0 -5px;
}
.twitter-footer{
display: inline-block;
position: relative;
vertical-align: top;
margin: 12px 0 0 0;
}
.twitter-footer h3{
color: #FFF;
margin: 0 0 4px 0;
font-size: 13px;
}
.twitter-footer h3 a{
color: #FFF;
font-weight: bold;
}
.twitter-footer h3 a:hover{
color: #FFF;
}

.copyright{
text-align: center;
color: #FFF;
font-size: 13px;
font-weight: lighter;
}
.copyright hr{
border-top: 1px solid #FFF;
opacity: 0.2;
}

.mike-royer-design a{
color: #FFF;
opacity: 0.3;
transition: all 0.3s ease;
}
.mike-royer-design a:hover{
color: #ffE500;
opacity: 1.0;
text-decoration: none;
}

@media (max-width: 767px) {
	#footer{padding: 20px 0;}
	.footer-navigation li{width: 25%;}
	.facebook-footer, .twitter-footer{display: block;}
	.footer-navigation ul{margin: 0 0 15px 0; text-align: center;}
	.footer-navigation li{display: inline-block; margin-right: 5px; margin-left: 5px; width: 45%; text-align: center;}
	.footer-navigation li a{
		background: #000;
		width: 100%;
		display: block;
		margin-bottom: 10px;
		padding: 10px 0;
		border-radius: 4px;
		font-family: 'Amatic SC', sans-serif;
		font-weight: 700;
		font-size: 24px;
	}
	.footer-navigation li a:hover{
		text-decoration: none; 
		background:#ffE500; 
		color: #000;
	}
}





/*-----------------------------------------------------------------------------------*/
/* MEDIA QUERIES AND IMAGE HANDLERS
/*-----------------------------------------------------------------------------------*/
.img-xl{
width: 100%;
height: auto;
}

@media (max-width: 992px) {
	.sketchbook .the-content img, .single .the-content img{
	width: 100%;
	height: auto;
	}
}

@media (max-width: 768px) {
	.single-comic .the-content img{
	width: 100%;
	height: auto;
	}
}

/*-----------------------------------------------------------------------------------*/
/* CORE WORDPRESS CSS
/*-----------------------------------------------------------------------------------*/
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.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.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.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: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
/* clear fix */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}