/*
Theme Name: Drake Creative
Theme URI: http://betterbug.com/
Description: Custom theme for Drake Creative
Version: 1.0
Author: Keith Solomon
Author URL: http://solowebdesigns.net

	Unless otherwise noted, all code in this theme complies with the GNU GPL 2.0 license.
	For a copy, please refer to the following link: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url('css/reset.css');
@import url('css/wp.css');

/** Base variables */
	:root {
		--white: #fff;
		--DkGray: #333;
		--MedGray: #666;
		--LtGray: #ccc;
		--pink: #be1c7b;
		--tol: #ff5a00;
		--proj: #0085cf;
		--work: #ffd600;
	}

body {
	background: #ccc;
	background: var(--LtGray);
	color: #666;
	color: var(--MedGray);
	font: 20px/28px 'ITC Franklin Gothic W01', sans-serif;
	text-align: left;
}

#wrapper {
	background: #fff;
	margin: 0 auto;
	max-width: 1307px;
	padding: 0 35px;
	width: 100%;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

/** MISCELLANEOUS */
	.clear {
		clear: both;
		line-height: 1;
		margin: 0;
		padding: 0;
	}

	.left {
		display: inline;
		float: left;
	}

	.right {
		display: inline;
		float: right;
	}

	.feed {
		background: url(images/icon-feed.png) no-repeat 0 50%;
		padding: 1px 0 1px 15px;
	}

	strong.search-excerpt {
		background: yellow;
		padding: .2em .3em;
	}

	abbr {
		border-bottom: 1px dashed #000;
	}

	/** LINKS */
		a:link, a:visited, a:active {
			color: #be1c7b;
			color: var(--pink);
			text-decoration: none;
		}

		a:hover {
			color: #000;
		}

		a.retlink:link, a.retlink:visited, a.retlink:active {
			color: #666;
			color: var(--MedGray);
			text-decoration: none;
		}

		a.retlink:hover {
			color: #be1c7b;
			color: var(--pink);
		}

		a.more-link {
			display: block;
			margin-top: 1.5em;
		}
	/* /LINKS **/
/* /MISCELLANEOUS **/

/** HEADER */
	#header {
		float: left;
		margin: 35px 0 60px;
		-webkit-flex: 0 1 100%;
		-ms-flex: 0 1 100%;
		flex: 0 1 100%;
		width: 100%;
	}

	h2#site-description {
		color: #666;
		font-size: 38px;
		font-weight: normal;
		margin-top: 80px;
	}

	/** LOGO */
		/*
		#logo {
			color: #be1c7b;
			color: var(--pink);
			float: left;
			font-size: 20px;
			margin-bottom: 0;
			text-align: right;
			width: 462px;
		}

		#logo h1 a:link, #logo h1 a:visited, #logo h1 a:active {
			border-bottom: 22px solid #be1c7b;
			border-bottom: 22px solid var(--pink);
			color: #333;
			display: block;
			font-size: 30px;
			font-weight: bold;
			letter-spacing: 4px;
			padding-bottom: 5px;
			text-align: left;
			text-decoration: none;
			text-transform: uppercase;
			width: 100%;
		}
		*/

		#logo {
			float: left;
			width: 462px;
		}

		#logo h1 a:link, #logo h1 a:visited, #logo h1 a:active {
			background: transparent url(images/logo.png) no-repeat;
			display: block;
			float: left;
			line-height: 79px; /* height of the image */
			margin: 0;
			text-indent: -1000em;
			overflow: hidden;
			width: 380px; /* width of the image */
		}

		#logo h1 a:hover {

		}
	/* /LOGO **/

	/** NAVIGATION */
		#st-trigger-effects {
			display: none;
		}

		#nav {
			float: right;
			width: 45%;
		}

		#nav ul {
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-justify-content: space-around;
			-ms-flex-pack: space-around;
			justify-content: space-around;
			font-size: 22px;
			margin: 30px 0 1em;
			overflow: hidden;
			padding: 0;
		}

		#nav li a:link, #nav li a:visited, #nav li a:active {
			align-items: flex-start;
			color: #333;
			font-weight: normal;
			padding: 0 10px;
			text-align: center;
			text-decoration: none;
		}

		#nav li a:hover, #nav li.current_page_item a, #nav li.current_menu_item a, #nav li.current-page-ancestor a, #nav li.current_page_parent a {
			color: #be1c7b;
			color: var(--pink);
		}
	/* /NAVIGATION **/
/* /HEADER **/

/** CONTENT */
	/** HOMEPAGE CONTENT */
		#homecontent {
			-webkit-flex: 0 1 100%;
			-ms-flex: 0 1 100%;
			flex: 0 1 100%;
		}

		a.proj-block-wide {
			display: block;
			height: 553px;
			overflow: hidden;
			/*padding-bottom: 45%;*/
			position: relative;
			width: 100%;
		}

		a.proj-block {
			display: block;
			height: 593px;
			float: left;
			overflow: hidden;
			/*padding-bottom: 45%;*/
			position: relative;
			width: 50%;
		}

		.project-content, .link-text {
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		.project-content {
			text-align: left;
			width: 100%;
		}

		.bgimg {
			height: 100% !important;
			width: 100% !important;
			background-size: cover !important;
			background-repeat: no-repeat !important;
			-webkit-transition: all 16s;
			-moz-transition: all 16s;
			-o-transition: all 16s;
			transition: all 16s;
		}

		.project-content:hover .bgimg, .project-content:focus .bgimg {
			-ms-transform: scale(1.5);
			-moz-transform: scale(1.5);
			-webkit-transform: scale(1.5);
			-o-transform: scale(1.5);
			transform: scale(1.5);
		}

		a.proj-block-wide .link-text, a.proj-block .link-text {
			color: #fff;
			font: 40px Georgia;
			padding: 75px 0 0 43px;
		}

		a.proj-block-wide .link-text h3, a.proj-block .link-text h3 {
			color: #fff;
			font-size: 30px;
			font-weight: normal;
			margin: 0 0 50px;
		}

		a.proj-block-wide .link-text p, a.proj-block .link-text p {
			margin: 0;
			padding: 0;
		}

		a.proj-block-wide:hover .link-text h3, a.proj-block-wide:hover .link-text p,
		a.proj-block:hover .link-text h3, a.proj-block:hover .link-text p {
			text-decoration: underline;
		}

		#featured {
			margin: 85px 0 70px;
		}

		#featured .client {
			float: left;
			font: 0/0 a;
			height: 115px;
			margin-bottom: 90px;
			text-align: center;
			width: 25%;
		}

		.client:before {    /* create a full-height inline block pseudo-element */
			content: ' ';
			display: inline-block;
			height: 100%;
			vertical-align: middle;  /* vertical alignment of the inline element */
		}

		#featured .client img {
			display: inline-block;
			vertical-align: middle;  /* vertical alignment of the inline element */
			font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
		}

		#latest {

		}

		#latest .news-img {
			float: left;
			width: 46%;
		}

		#latest .news-img img {
			height: auto;
			width: 100%;
		}

		#latest .news-summary {
			float: right;
			width: 46%;
		}

		#latest .news-meta {
			margin-bottom: 32px;
		}

	#content {
		-webkit-flex: 0 1 50%;
		-ms-flex: 0 1 50%;
		flex: 0 1 50%;
	}

	#content-wide {
		-webkit-flex: 0 1 100%;
		-ms-flex: 0 1 100%;
		flex: 0 1 100%;
	}

	.content .post {
		margin-bottom: 1.5em;
	}

	.navigation {
		float: left;
		padding: 1em;
		width: 100%;
	}

	.content p {
		margin-bottom: 1.5em;
	}

	#work-head {
		float: left;
		margin-bottom: 0;
		width: 100%;
	}

	#work-menu {
		float: right;
		margin: 0;
		padding: 0;
		width: 44%;
	}

	#work-menu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	#work-menu ul li {
		color: #be1c7b;
		color: var(--pink);
		display: inline-block;
		float: left;
		font-size: 20px;
		font-weight: bold;
		letter-spacing: 1px;
		margin-right: 10px;
		text-transform: uppercase;
	}

	#work-menu ul li:after {
		content: '/';
	}

	#work-menu ul li:last-child:after {
		content: '';
		margin-right: 0;
	}

	#work-menu ul li:nth-child(even) {
		/*margin-right: 0;*/
	}

	#work-menu ul li a {
		color: #be1c7b;
		color: var(--pink);
		padding-right: 10px;
	}

	#work-menu ul li a:hover, #work-menu ul li.current-menu-item a {
		color: #000;
	}

	#proj-head {
		float: left;
		margin-bottom: 40px;
		width: 100%;
	}

	#proj-info {
		float: left;
		width: 40%;
	}

	#proj-tagline {
		color: #333;
		color: var(--DkGray);
		float: right;
		font: 30px/42px Georgia;
		margin: 0;
		padding: 0;
		width: 40%;
	}

	.half {
		margin: 0 0 1.5em;
		width: 50%;
	}

	#related {
		margin-top: 64px;
	}

	.skill {
		border-bottom: 1px solid #333;
		float: left;
		margin-bottom: 10px;
		padding-bottom: 10px;
		width: 100%;
	}

	.spark {
		max-width: 300px;
		width: 100%;
	}

	.post {
		border-top: 1px solid #ccc;
		padding: 40px 0 0;
	}

	.post.single {
		border-top: none;
	}

	input.wpcf7-form-control {
		height: 24px;
	}

	input.wpcf7-submit {
		background: #be1c7b !important;
		background: var(--pink) !important;
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		width: auto;
		height: 42px;
		line-height: 42px;
		background: #ed7070;
		color: #fff;
		border: none;
		border-radius: 3px;
		margin: 0 0 4px;
		padding: 0 20px;
		display: inline-block;
		position: relative;
		-webkit-transition: padding .25s ease-in-out,width .25s ease-in-out;
		transition: padding .25s ease-in-out,width .25s ease-in-out;
		text-align: center;
		text-decoration: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		cursor: pointer;
	}

	/** WORK PAGE GRID STYLES */
		#work {
			clear: both;
			/*float: left;*/
			width: 100%;
		}

		a.proj-grid {
			display: block;
			height: 598px;
			float: left;
			width: 50%;
		}

		a.proj-grid {
			background-repeat: no-repeat !important;
			background-size: cover !important;
			color: #fff;
			font: 34px Georgia;
			padding: 52px 0 0 43px;
		}

		a.proj-grid:before,
		a.proj-grid:after {
		    content: " "; /* 1 */
		    display: table; /* 2 */
		}

		a.proj-grid:after {
		    clear: both;
		}

		a.proj-grid h3 {
			color: #fff;
			font-size: 25px;
			font-weight: normal;
			margin: 0 0 42px;
		}

		a.proj-grid p {
			margin: 0;
			padding: 0;
		}

		a.proj-grid:hover h3, a.proj-grid:hover p {
			text-decoration: underline;
		}

		.alm-reveal { /*overflow: hidden;*/ }

		.alm-btn-wrap .alm-load-more-btn {
			background: #be1c7b !important;
			background: var(--pink) !important;
			color: #fff;
		}

		.alm-load-more-btn.done {
			display: none !important;
		}

		.post .news-img {
			float: left;
			width: 46%;
		}

		.post .news-img img {
			height: auto;
			width: 100%;
		}

		.post .news-summary {
			float: right;
			width: 46%;
		}

		.post .news-meta {
			margin-bottom: 32px;
		}

	/** GALLERY STYLES */
		.content img.attachment-thumbnail {
			border: none;
			height: 92px;
			margin: 0;
			padding: 0;
			width: 92px;
		}

		.gallery {
			margin: auto;
			/* gallery clearing*/
			overflow: hidden;
			width: 100%;
		}

		.gallery .gallery-item {
			float: left;
			margin-top: 10px;
			text-align: center;
		}

		.gallery img {
			border: 2px solid #cfcfcf;
		}

		.gallery .gallery-caption {
			margin-left: 0;
		}

		.gallery br { clear: both }

		/* Available Columns */
		.col-2 { width: 50% }
		.col-3 { width: 33.333% }
		.col-4 { width: 25% }
		.col-5 { width: 20% }
		.col-6 { width: 16.666% }
		.col-7 { width: 14.285% }
		.col-8 { width: 12.5% }
		.col-9 { width: 11.111% }
	/* /GALLERY **/

	/** PAGE BAR NAV STYLING */
		.pb-nav {
			clear: both;
		}

		.pb-nav a, .pb-nav span {
			text-decoration: none;
			border: 1px solid #BFBFBF;
			padding: 3px 5px;
			margin: 2px;
		}

		.pb-nav a:hover, .pb-nav span.current {
			border-color: #000;
		}

		.pb-nav span.current {
			font-weight: bold;
		}
	/* /PAGE BAR **/

	/** HEADING STYLES */
		h1, h2, h3, h4, h5, h6 {

		}

		.content h1 {
			font-size: 2rem;
		}

		.content h2 {
			font-size: 1.8rem;
		}

		.content h2.pagetitle {
			color: #666;
			color: var(--MedGray);
			font-size: 38px;
			font-weight: normal;
			margin-bottom: 100px;
		}

		.content h2.pagetitle a:link, .content h2.pagetitle a:visited, .content h2.pagetitle a:active {
			text-decoration: none;
		}

		.content h2.pagetitle a:hover {

		}

		.content h2.posttitle {
			color: #333;
			color: var(--DkGray);
			font: 30px/42px Georgia;
			font-weight: normal;
			margin-bottom: 25px;
		}

		.content h2.projtitle {
			color: #666;
			color: var(--MedGray);
			font: 20px/28px Georgia;
			font-weight: normal;
			margin-bottom: 0;
		}

		.content h3 {
			font-size: 1.5rem;
			font-weight: bold;
		}

		.content h3.feat {
			border-bottom: 1px solid #be1c7b;
			border-bottom: 1px solid var(--pink);
			color: #be1c7b;
			color: var(--pink);
			font-size: 36px;
			font-weight: normal;
			margin: 0 0 65px;
			padding: 0 0 20px;
		}

		.content h3.proj-detail {
			color: #999;
			/*color: var(--LtGray);*/
			font: 20px/28px Georgia;
			font-weight: normal;
			margin-bottom: 0;
		}

		.content h4 {
			font-size: 1.4rem;
			font-weight: bold;
		}

		.content h4.news-title, .content h4.news-title a {
			color: #333;
			font: 30px/42px Georgia;
			font-weight: normal;
			margin-bottom: 32px;
		}

		.content h5 {
			font-size: 1.3rem;
			font-weight: bold;
		}

		.content h6 {
			font-size: 1.2rem;
			font-weight: bold;
		}
	/* /HEADINGS **/

	/** QUOTES & LISTS */
		.content blockquote {
			font-style: italic;
			line-height: 1.4em;
			margin-bottom: 1.8em;
			padding: 0 1.5em;
		}

		.content ul, .content ol {
			margin: 0 0 1.5em 3em;
		}

		.content li {
			font-size: 1rem;
			line-height: 1.4em;
			margin-bottom: .5em;
		}

		.content ul li {
			list-style-type: disc;
		}

		.content ol li {
			list-style-type: decimal;
		}

		.content li ul {
			margin-bottom: 0;
		}

		.content li li {
			font-size: 1em;
		}
	/* /QUOTES & LISTS **/
/* /CONTENT **/

/** SIDEBAR */
	#sidebar {
		-webkit-flex: 0 1 40%;
		-ms-flex: 0 1 40%;
		flex: 0 1 40%;
		padding: 65px 0 0;
	}

	.sidebar a:link, .sidebar a:visited, .sidebar a:active {
		text-decoration: none;
	}

	.sidebar a:hover {

	}

	.sidebar .widgetblock {
		margin-bottom: 1.5em;
	}

	.sidebar h3 {
		font-size: 30px;
		font-weight: normal;
		margin-bottom: 10px;
	}

	.sidebar ul, .sidebar ol {
		margin: 0 0 1.5em;
	}

	.sidebar li {
		font-size: 1rem;
		line-height: 1.4em;
		margin-bottom: .5em;
	}

	.sidebar ul li {
		list-style-type: none;
	}

	.sidebar ol li {
		list-style-type: decimal;
	}

	.sidebar li ul {
		margin-bottom: 0;
	}

	.sidebar li li {
		font-size: 1rem;
	}
/* /SIDEBAR **/

/** FOOTER */
	#footer {
		border-top: 32px solid #be1c7b;
		border-top: 32px solid var(--pink);
		font-size: 18px;
		line-height: 24px;
		margin-top: 3em;
		padding-top: 40px;
		-webkit-flex: 0 1 100%;
		-ms-flex: 0 1 100%;
		flex: 0 1 100%;
	}

	#footer #social {
		float: left;
		margin-bottom: 32px;
		width: 100%;
	}

	#footer #social a.soc-link {
		display: block;
		float: left;
		font-size: 24px;
		line-height: 28px; /* height of the image */
		margin: 0;
		width: 16.6667%; /* fallback for non-calc() browsers */
		width: calc(100% / 6);
	}

	#social a.soc-link#fb {
		background: transparent url(images/fb-icon.png) no-repeat;
		padding-left: 35px;
		/*width: px;*/ /* width of the image */
	}

	#social a.soc-link#tw {
		background: transparent url(images/tw-icon.png) no-repeat;
		padding-left: 36px;
		/*width: px;*/ /* width of the image */
	}

	#social a.soc-link#ig {
		background: transparent url(images/ig-icon.png) no-repeat;
		padding-left: 37px;
		/*width: px;*/ /* width of the image */
	}

	#social a.soc-link#vi {
		background: transparent url(images/vi-icon.png) no-repeat;
		padding-left: 36px;
		/*width: px;*/ /* width of the image */
	}

	#social a.soc-link#pn {
		background: transparent url(images/pn-icon.png) no-repeat;
		padding-left: 32px;
		/*width: px;*/ /* width of the image */
	}

	#social a.soc-link#bh {
		background: transparent url(images/bh-icon.png) no-repeat;
		padding-left: 52px;
		/*width: px;*/ /* width of the image */
	}

	#footer-credits {
		margin: 32px 0;
		width: 100%;
	}

	#footer a:link, #footer a:visited, #footer a:active {
		color: #666;
		color: var(--MedGray);
		text-decoration: none;
	}

	#footer a:hover {
		color: #be1c7b;
		color: var(--pink);
	}

	#footer p {

	}
/* /FOOTER **/

/** Single-column for anything smaller than portrait tablet */
@media (max-width: 30em) {
	#content, #sidebar {
		-webkit-flex: 0 1 100%;
		-ms-flex: 0 1 100%;
		flex: 0 1 100%;
		margin-bottom: 10px;
	}

	#sidebar {
		border: none;
		border-top: 1px solid #333;
		padding-top: 35px;
	}
}