/*
Theme Name: ColorSnap
Theme URI: http://thememags.com/colorsnap/
Description: Instantly change the entire color scheme to any color you can imagine with just one simple setting! Also, easily set your own custom logo/header and background. Also responsive! Simply set your favorite color under Appearance > Theme Color in your WP admin and save. Thank you. - Official Support Forum: bryanhadaway.com/forum/projects
Author: ThemeMags
Author URI: http://thememags.com/
Version: 1.1.1
Tags: black, blue, brown, gray, green, orange, pink, purple, red, silver, tan, white, yellow, dark, light, two-columns, right-sidebar, fluid-layout, fixed-layout, custom-header, custom-background, custom-colors, custom-menu, featured-images, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html

ColorSnap WordPress Theme © 2013-2015 ThemeMags.com
ColorSnap is distributed under the terms of the GNU GPL
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
th, td{padding:2px}big{font-size:125%}small, sup, sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd, tt{font-family:courier;font-size:80%}ins{text-decoration:underline}del, strike, s{text-decoration:line-through}

body{font-family:georgia,'times new roman',times,serif;color:#fff;margin:3% 0 4%;background:#09f}
#container{color:#333}
p{margin:20px 0}
.entry-content p:first-of-type{margin-top:0}
.entry-content p:last-of-type, .entry-content:last-child{margin-bottom:0}
#content, .widget-container{font-size:87.5%}
a, h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{color:#09f;text-decoration:none}
a:hover{text-decoration:underline}
h1, h2, h3, h4, h5, h6{helvetica,arial,sans-serif;font-weight:normal;margin-top:20px;margin-bottom:5px;clear:both}
h1{font-size:175%}
h2{font-size:155%}
h3{font-size:135%}
h4{font-size:125%}
h5{font-size:115%}
h6{font-size:105%}
strong, dt{font-weight:bold}
em, address, cite, var{font-style:italic}
code{font-family:'courier new',courier,serif;color:#09f}
pre{overflow-x:auto;white-space:pre-wrap}
hr{height:1px;color:#ccc;border:0 none;margin:30px 0;background-color:#ccc}
.entry-content ul, .entry-content ol, .comment-content ul, .comment-content ol{font-family:helvetica,arial,sans-serif;margin-left:20px !important}
.entry-content li:before, .comment-content li:before{content:"- "}
ol li:before{content:"" !important}
#container ol, .comment-content ol{list-style:decimal inside}
#sidebar .widget-container ul{display:block;margin-left:10px}
blockquote{padding:15px;border:4px double #09f;margin:10px 2%;background:#f6f6f6}
input, textarea{font-family:arial,sans-serif;font-size:70%;color:#666;padding:5px;border:1px solid #09f;outline:none;background:#f6f6f6}
#container input, #container textarea{font-size:90%}
input[type="submit"], input[type="reset"]{cursor:pointer}
#content input[type="submit"], #content input[type="reset"], #container #searchsubmit, .button{font-size:100% !important;color:#fff;padding:8px 10px;border:1px solid #09f;background-color:#09f;background-image:url(images/trans.png);opacity:0.8}
#content input[type="submit"]:hover, #content input[type="reset"]:hover, #container #searchsubmit:hover, .button:hover{opacity:1}
.clear{clear:both}
a img, input[type="image"]{border:0 none}
img, video{max-width:100% !important;height:auto}
#content img, #content figure{max-width:640px !important;height:auto}
#sidebar img, #sidebar figure{max-width:300px !important;height:auto}

#wrapper{min-width:320px;max-width:1200px;margin:0 auto}
header{padding-bottom:20px;clear:both}
#branding{margin-bottom:10px;float:left}
#logo{width:100%}
#container{padding-bottom:20px;background:#fff;}
#content{width:64%;padding:0 2%;float:left}
#sidebar{width:30%;margin-right:2%;float:right}
footer{clear:both}


header a{outline:none}
#content, #sidebar{color:#333;line-height:140%}
.entry-content{text-align:justify;margin:20px 0}
.entry-meta, .entry-footer, .comment-meta, #copyright{font-size:90%}
#site-title a, #site-title h1 a, #site-title h1{font-family:helvetica,arial,sans-serif;font-size:40px;font-weight:bold;color:#fff;padding:0;margin:0}
#site-title a:hover, #site-title h1 a:hover{text-decoration:none}
#site-description{font-size:112.50%;color:#fff}
.entry-meta, .entry-footer, .comment-meta, #form-allowed-tags code{color:#aaa}
#sidebar ul{display:inline;padding:0;margin:0}
.widget-title{font-size:125%;padding-bottom:1px;border-bottom:1px solid #ccc;margin-bottom:5px}
#respond h3{clear:left}
footer a{color:#fff}
#copyright{color:#fff;text-align:center;padding:2%}


#sidebar #searchform{padding:20px 0 30px 0;float:none}



#container #searchsubmit{padding:0}
.error404 #content #searchform, .search #content #searchform{margin-top:55px;float:left}

.post{padding-bottom:30px;border-bottom:1px dashed #ccc;margin-bottom:30px}
.entry-title{margin-bottom:15px}
.single .entry-title{text-align:left;line-height:30px;margin-top:12px;margin-bottom:10px}
.entry-title a{font-size:25px}
.nav-previous{text-align:left;float:left}
.nav-next{text-align:right;float:right}
.attachment .nav-previous{float:left}
.attachment .nav-next{float:right}
.comments ul{padding:0;margin:0}
.comment, .trackback, .pingback{padding:10px;margin:10px 0 10px 0}
.odd{background:#f6f6f6}
#form-allowed-tags code{font-size:12px}
#respond input{width:40%;display:block}
#respond input:focus, #respond textarea:focus{background:#fff}
#respond textarea{width:98.125%;height:100px;overflow:auto}
#respond #submit{width:auto;font-weight:bold}
.avatar{width:32px;height:32px;margin:0 5px 5px 0;float:left}

.sticky{padding:0.01px 15px 15px 15px;margin-top:20px;background:#f6f6f6}
.sticky .entry-title{padding-top:20px;margin-top:0}
.bypostauthor{background:#f6f6f6}
.wp-caption{margin:20px 0}
.wp-caption-text{}
.alignleft, .aligncenter, .alignright{text-align:center}
.gallery-caption{border:#ccc 1px solid}
.alignleft{margin:15px 15px 15px 0;float:left}
.alignright{margin:15px 0 15px 15px;float:right}
.aligncenter{display:block;margin:15px auto;clear:both}
.size-thumbnail{margin:5px}
#wp-calendar{width:100%}
#wp-calendar td{text-align:center}
#wp-calendar #prev{text-align:left}
#wp-calendar #next{text-align:right}
.page-link, .entry-footer, .edit-link{clear:both}
.page-link, .entry-footer, .page .edit-link{display:block;margin-top:20px}


/* -------------------------------------------------------------------------------- */
/*	3.	Top Navigation
/* -------------------------------------------------------------------------------- */


.top-nav { background: #26272B; }


/* primary Menu ------------------------------------ */

.mobile-menu {display:none;}
.primary-menu {
	float: left;
	font-size: 0.9rem;
}

.primary-menu li { position: relative; }

.primary-menu > li { float: left; }

.primary-menu > li > a {
	display: block;
	padding: 21px 15px;
	color: #999;
}

.primary-menu > li.menu-item-has-children > a { padding-right: 30px; }
.primary-menu > li.menu-item-has-children > a:after {
	content: "";
	display: block;
	border: 4px solid transparent;
	border-top-color: #777;
	position: absolute;
	top: 50%;
	margin-top: -1px;
	right: 15px;
}

.primary-menu > li:hover > a,
.primary-menu li.current-menu-item > a { color: #fff; }
.primary-menu > li:hover > a { background: #1D1D20; }
.primary-menu > li.menu-item-has-children:hover > a:after { border-top-color: #fff; }


/* Sub Menus --------------------------------------- */


.primary-menu ul {
	display: block;
	opacity: 0;
	position: absolute;
	z-index: 999;
	left: -9999px;
	top: 50px;
	-webkit-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
	 -moz-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
	 -ms-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
	 -o-transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
	 transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
}

.primary-menu ul .menu-item-has-children::after {
	content: "";
	display: block;
	border: 4px solid transparent;
	border-left-color: #666;
	position: absolute;
	z-index: 1001;
	right: 6px;
	top: 50%;
	margin-top: -4px;
}

.primary-menu ul li { 	
	width: 200px; 
	background: #1D1D20;
}

.primary-menu ul li + li { border-top: 1px solid #333; }

.primary-menu ul a {
	display: block;
	padding: 15px;
	line-height: 130%;
	color: #999;
}

.primary-menu ul li:hover > a { color: #fff; }

.primary-menu ul .menu-item-has-children:hover::after { border-left-color: #fff; }

.primary-menu > li:hover > ul {
	opacity: 1;
	left: 0px;
	top: 55px;
}


/* Deep Down --------------------------------------- */


.primary-menu ul ul { 
	padding-top: 0;
	top: 5px;
}

.primary-menu li > ul > li:hover > ul {
	opacity: 1;
	left: 200px;
	top: 0;
	margin-left: 0;
}


/* Social Menu --------------------------------------- */


.social-menu { 
	float: right; 
	padding: 10px 0;
}

.social-menu li { 
	float: left;
	margin-left: 10px; 
	position: relative;
}

.social-menu li:first-child { margin-left: 0; }

.screen-reader-text {
	position: absolute;
	top: -9999em;
	left: -9999em;
}

.social-menu a {
	display: block;
	width: 36px;
	height: 36px;
	border: 2px solid #33363B;
	color: #fff;
	border-radius: 999px;
	position: relative;
}

.social-menu a:hover,
.social-menu a.active { 
	border-color: #fff;
	color: #fff;
}

.social-menu li a::before {
	content: '\f408';
	display: inline-block;
	font-family: 'FontAwesome';
	font-size: 16px;
	text-align: center;
	position: absolute;
	top: 50%;
	margin-top: -8px;
	left: 0;
	right: 0;
}

.social-menu li a[href*="codepen.io"]::before { content: '\f1cb'; }
.social-menu li a[href*="dribbble.com"]::before { content: '\f17d'; }
.social-menu li a[href*="facebook.com"]::before { content: '\f09a'; }
.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }
.social-menu li a[href*="github.com"]::before { content: '\f09b'; }
.social-menu li a[href*="instagram.com"]::before { content: '\f16d'; }
.social-menu li a[href*="linkedin.com"]::before { content: '\f0e1'; }
.social-menu li a[href*="pinterest.com"]::before { content: '\f0d2'; }
.social-menu li a[href*="plus.google.com"]::before { content: '\f0d5'; }
.social-menu li a[href*="tumblr.com"]::before { content: '\f173'; }
.social-menu li a[href*="twitter.com"]::before { content: '\f099'; }
.social-menu li a[href*="vimeo.com"]::before { content: '\f194'; }
.social-menu li a[href*="wordpress.org"]::before,
.social-menu li a[href*="wordpress.com"]::before { content: '\f19a'; }
.social-menu li a[href*="youtube.com"]::before { content: '\f167'; }
.social-menu li a[href*="mailto"]::before { content: '\f0e0'; }
.social-menu li a.search-toggle::before { 
	content: '\f002'; 
	margin-top: -9px;
}

.no-js .social-menu li:last-child { display: none; } /* hide the search toggle icon if there's no javascript support */

.social-menu .active:after {
	content: "";
	display: block;
	border: 6px solid transparent;
	border-bottom-color: #fff;
	position: absolute;
	bottom: -13px;
	right: 10px;
}

/* -------------------------------------------------------------------------------- */
/*	4.	Search Container
/* -------------------------------------------------------------------------------- */


.search-container { 
	display: none;
	background: #fff; 
}

.search-container .section-inner { position: relative; }

.search-container .search-field {
	display: block;
	border: none;
	background: none;
	width: 100%;
	padding: 35px 92px 35px 0;
	margin-right: 50px;
	font-family: 'Lato', sans-serif;
	font-size: 1.5em;
	font-style: italic;
	color: #222;
}

.search-container .search-field:focus { outline: none; }

.search-container .search-button {
	display: block;
	background: none;
	position: absolute;
	top: 50%;
	margin-top: -21px;
	right: 0; border:none;
}

.search-container .search-button .fa { font-size: 40px; }

.search-container .search-button:hover {
	cursor: pointer;
	color: #2c94f2;
}
/* -------------------------------------------------------------------------------- */
/*	5.	Header
/* -------------------------------------------------------------------------------- */


/* Header ----------------------------------------- */


.header-wrapper { }

.header { padding: 50px 0; padding-top:10px; }

.blog-title {
	font-size: 1.5em;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-shadow: 0 1px 0 #111;
}

.blog-title a { color: #fff; }
.blog-title a:hover { color: #2c94f2; }

.blog-description {
	margin: 11px 0 0 0;
	font-family: 'Merriweather', Georgia, serif;
	font-size: 0.9em;
	line-height: 115%;
	font-style: italic;
	color: #999;
}

.blog-logo,
.blog-logo img {
	display: block;
}

@media (max-width:850px){

#sidebar #s{width:96%;border-right:1px solid #ccc}#sidebar #searchsubmit{display:none}

/* Top Nav --------------------------------------- */
	
	
	.top-nav { display: none; }
	
	
	/* Search Container ----------------------------- */
	
	
	.search-container .search-field {
		padding: 30px 64px 30px 0;
		font-size: 1.25em;
		font-weight: 400;
	}
	
	.search-container .search-button { margin-top: -17px; }
	
	.search-container .search-button .fa { font-size: 32px; }
		
	
	/* Header --------------------------------------- */
	
	
	.header { 
		padding: 25px 0; 
		border-top: 8px solid #26272B;
	}
	
	.blog-title,
	.blog-description {
		margin-right: 60px;
	}

/* Nav Toggle */
	
	.header .section-inner { position: relative; }
	
	.nav-toggle {
		display: block;
		width: 40px;
		height: 40px;
		background: #2c94f2;
		border-radius: 99px;
		position: absolute;
		top: 50%;
		margin-top: -20px;
		right: 0;
		box-shadow: 0 2px 0 rgba(0,0,0,0.1);
	}
	
	.nav-toggle .bar {
		width: 20px;
		height: 2px;
		background: #fff;
		border-radius: 1px;
		box-shadow: 0 1px 0 rgba(0,0,0,0.1);
		position: absolute;
		left: 50%;
		margin-left: -10px;
		top: 50%;
		-webkit-transition: opacity 0.2s linear 0.2s, margin 0.2s linear 0.2s, -webkit-transform 0.2s linear 0s;
		-moz-transition: opacity 0.2s linear 0.2s, margin 0.2s linear 0.2s, -moz-transform 0.2s linear 0s;
		-o-transition: opacity 0.2s linear 0.2s, margin 0.2s linear 0.2s, -o-transform 0.2s linear 0s;
		transition: opacity 0.2s linear 0.2s, margin 0.2s linear 0.2s, transform 0.2s linear 0s;
	}
	
	.nav-toggle .bar:nth-child(1) { margin-top: -7px; }
	.nav-toggle .bar:nth-child(2) { margin-top: -1px; }
	.nav-toggle .bar:nth-child(3) { margin-top: 5px; }
	
	.nav-toggle:hover { cursor: pointer; }
	
	.nav-toggle.active .bar { 
		background: #fff; 
		-webkit-transition: opacity 0.2s linear 0s, margin 0.2s linear 0s, -webkit-transform 0.2s linear 0.2s;
		-moz-transition: opacity 0.2s linear 0s, margin 0.2s linear 0s, -moz-transform 0.2s linear 0.2s;
		-o-transition: opacity 0.2s linear 0s, margin 0.2s linear 0s, -o-transform 0.2s linear 0.2s;
		transition: opacity 0.2s linear 0s, margin 0.2s linear 0s, transform 0.2s linear 0.2s;
	}
	
	.nav-toggle.active .bar:nth-child(1),
	.nav-toggle.active .bar:nth-child(3) { margin-top: -1px; }
	
	.nav-toggle.active .bar:nth-child(1) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	.nav-toggle.active .bar:nth-child(2) { 
		-webkit-opacity: 0;
		-moz-opacity: 0;
		opacity: 0; 
	}
	
	.nav-toggle.active .bar:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
	/* Mobile Menu */
	
	.mobile-menu { background: #2c94f2; }
	
	.mobile-menu li a { 
		border-top: 1px solid rgba(255,255,255,0.1); 
		border-bottom: 1px solid rgba(0,0,0,0.1); 
	}
		
	.mobile-menu a {
		display: block;
		padding: 20px 6%;
		font-size: 0.8rem;
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #fff;
		text-shadow: 0 1px 0 rgba(0,0,0,0.1);
	}
	
	.mobile-menu ul a { padding-left: 12%; }
	.mobile-menu ul ul a { padding-left: 18%; }
	.mobile-menu ul ul ul a { padding-left: 24%; }
	.mobile-menu ul ul ul ul a { padding-left: 30%; }
	.mobile-menu ul ul ul ul ul a { padding-left: 36%; }
	.mobile-menu ul ul ul ul ul ul a { padding-left: 42%; }
	
	.mobile-menu a:hover { color: #fff; }

}
@media all and (max-width:768px){}
@media all and (max-width:480px){}
@media all and (max-width:320px){header, nav #s, #content, #sidebar, footer{width:310px;max-width:310px;text-align:left;margin-left:auto;margin-right:auto}nav ul.menu{padding-left:0}nav .sub-menu, nav .children{display:none !important}nav ul li a, nav ul li a:hover{width:279px;max-width:279px;border:0;margin-left:0 !important}nav #s{width:286px !important;margin-bottom:5px}.entry-content{text-align:left}}

#nav-above, #comment-notes, .form-allowed-tags{display:none}
.attachment #nav-above{display:block}