/*
Theme Name: Creative Forager
Author: Janet Bower
Author URI: http://www.onlinesunshine.co.uk

*/

/* RESET */

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, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/*-----------------------------------Layout Styles-------------------------------------*/

html {
	height:100%;
	}

body {
	font-family: 'Questrial', sans-serif;
	background:#ececec;
	padding:20px;
	margin:0px;
	font-size:0.8em;
	height:100%;
	color:#666666;
	line-height:1.4em;
}

a {
	color:#666666;
}

p {
	margin:0px 0px 10px 0px;
}

.caps {
	text-transform:uppercase;
}

#navigation {
	list-style:none;
	text-transform:uppercase;
	font-size:120%;
	padding-bottom:20px;
	margin-bottom:10px;
	line-height:2em;
	font-weight: 400; 
}

#navigation li {
	display:inline-block;
}

#navigation li a {
	text-decoration:none;
	color:#191919;
	margin:0px 10px;
	padding:0px 0px 4px 0px;
}


#navigation li a:hover, #navigation li a.On {
	border-bottom:2px solid black;
}

.assistive-text {
	display:none;
}

#wrapper {
	text-align:center;
	width:100%;
	max-width:1200px;
	margin:0px auto;
	position:relative;
}

#images img {
	width:100%;
}

#images {
	text-align:left;
	height:100%;
}

#images .spacer {
	height:24px;
	clear:both;
}

#images .short-spacer {
	height:12px;
	clear:both;
}

#images .med-spacer {
	height:20px;
	clear:both;
}

.logo {
	display:block;
	position:relative;
	z-index:200;
	margin-bottom:20px;
	background:url(../images/creative-forager-logo.svg) no-repeat;
	background-size:contain;
	width:204px;
	height:105px;
	margin:0px auto;
}

.socialHolder {
	position:absolute;
	top:0px;
	right:0px;
	width:105px;
}

#socialHolderMob {
	display:none;
}

.socialHolder .twitter, .socialHolder .instagram, .socialHolder .vine, .socialHolder .youtube, .socialHolder .tumblr, .socialHolder .pintrest, .socialHolder .googleplus, .socialHolder .vimeo {
	width:22px;
	height:22px;
	margin-left:4px;
	background-position:0px 0px;
	background-size: 100%;
	display:block;
	float:left;
	background-repeat:no-repeat;
}

.socialHolder .twitter {
	background-image:url(../images/twitter-icon.png);
}
.socialHolder .instagram {
	background-image:url(../images/instagram-icon.png);
}
.socialHolder .vine {
	background-image:url(../images/vine-icon.png);
}
.socialHolder .youtube {
	background-image:url(../images/youtube-icon.png);
}
.socialHolder .tumblr {
	background-image:url(../images/tumblr-icon.png);
}
.socialHolder .pintrest {
	background-image:url(../images/pintrest-icon.png);
}
.socialHolder .googleplus {
	background-image:url(../images/googleplus-icon.png);
}
.socialHolder .vimeo {
	background-image:url(../images/vimeo-icon.png);
}

.socialHolder .twitter:hover, .socialHolder .instagram:hover, .socialHolder .vine:hover, .socialHolder .youtube:hover, .socialHolder .tumblr:hover, .socialHolder .pintrest:hover, .socialHolder .googleplus:hover, .socialHolder .vimeo:hover {
	background-position:0px -22px;
}

.twitterBox {
	width:31%;
	display: table-cell;
	vertical-align:top;
}

footer {
	padding:10px 0px 20px 0px;
	text-align:center;
	border-top:2px solid black;
	margin-top:20px;
}

.whiteCols {
	background:white;
	 padding:10px; 
	 display: flex;
	 flex-direction: row;
	 flex-grow: 4
}

.whiteCols div {
	align-self:flex-end;
	padding:10px;
}
@media only screen and (max-width: 1173px) {
.whiteCols {	
	 display:block;	 
}

.whiteCols div {
	display: inline-block;
	 width:49%;
	 padding:5px;
}
}
@media only screen and (max-width: 750px) {

.whiteCols div {
	width:100%;
}
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}

/*------------------------- sliding captions------------------------------------*/

h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }
			
.boxgrid{ 
	width: 325px; 
	height: 260px;
	margin:10px; 
	float:left; 
	background:#161613; 
	border: solid 2px #8399AF; 
	overflow: hidden; 
	position: relative; 
}

.boxgrid img{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	border: 0; 
}

.boxgrid p{ 
	padding: 0 10px; 
	color:#afafaf; 
	font-weight:bold; 
	font:10pt "Lucida Grande", Arial, sans-serif; 
}
				
.boxcaption{ 
	float: left; 
	position: absolute; 
	background: #000; 
	height: 100px; 
	width: 100%; 
	opacity: .8; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.captionfull .boxcaption {
	top: 260;
	left: 0;
}

.caption .boxcaption {
	top: 220;
	left: 0;
 }
/*-----------------------END sliding captions--------------------------------------------*/

h1, h2.project {
	border-bottom:2px solid black;
	text-transform:uppercase;
	padding:0px 0px 8px 0px;
	font-size:110%;
	margin-bottom:10px;
	
	font-weight: 700; 
}

h2 {
	text-transform:uppercase;
	padding:0px 0px 4px 0px;
	font-size:100%;	
	font-weight: 700;
}

.infoNoScroll {
	width:24.2%;
	float:right;
	max-height:412px;	
}

.infoNoDrop {
	width:24.95%;
	float:right;
}

.info2 {
	width:22.5%;
	float:right;
}

.titlePic, .titlePicNoDrop {
	width:73.7%;
	float:left;
}

.titlePic2 {
	width:75.5%; 
	float:left;
}

.profileLeft {
	float:left;
	width:80%;
}

.profilePic {
	width:30%;
	float:left;
}

.profileSide {
	width:17%;
	float:right;
	padding-top:50px;
}

.FL {
	float:left;
	position:relative;
}

.FR {
	float:right;
	position:relative;
}

.leftHalf, .projectHalf {	
	float:left;
	width:49%;
	position:relative;
}

.rightHalf {	
	float:right;
	width:49%;
	text-align:left;
}

.projectHalf {	
	padding:10px 0 20px 0;
	text-align:left;
}

.leftHalf .rightHalf, .leftHalf .leftHalf, .rightHalf .rightHalf, .rightHalf .leftHalf {	
	width:49%;
}

.contact {
	max-width:220px;
	margin:0px auto;
}

.contact p {
	line-height:1.6em;
}

.video_container {
 position: relative;
 padding-bottom: 56.25%;
 width:100%;
	float:left;
}

.video_container iframe, 
.video_container object, 
.video_container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.e-entry-content {
	color:black;
}

.innerTable, .innerTableStay {
	display: table-cell; 
	width:2%;
}

.malibu {
	 width:67%;
	 float:right;
}

.paddingBottom {
	padding-bottom:10px;
	text-align:left;
}

.autoHigh {
	height:auto;
}

.clearBoth {
	clear:both;
}

.kscope1, .kscope2, .kscope3, .kscope4, .kscope5, .kscope6 {
	display:table-cell;
}

.kscope1 {
	width:22.1%;
}

.kscope2 {
	width:37.9%;
}

.kscope3 {
	width:36%;
}

.kscope4 {
	width:38.2%;
}

.kscope5 {
	width:22%;
}

.kscope6 {
	width:35.9%;
}

.paddingB {
	padding-bottom:20px;
}

#twitter-widget-0 {
	width:1200px;
	color:black!important;
}

.introEarlyWide {
		width:32.3%;
}
.titlePicEarlyWide {
		width:66.1%;
	}
@media all and (max-width: 900px) {
	.introEarlyWide, .titlePicEarlyWide {
		width:100%;
	}
}

/*-------new css for CF-------*/


/*-----------------------main homepage portfolio responsive slider----------------------------*/
.slider {
  width: 100%;
  max-width:1200px;
  height:auto;
}
.slider img {
	width:100%;
	position:relative;
}
.slider .image {
  width: 100%;
	height:0;
	opacity: 0;
  -webkit-background-size: 100%;
  background-size:100%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background-repeat:no-repeat;
  background-position:center center;
  position:relative;
  z-index:0;
}
.slider .image.active {
  height: auto;
  opacity: 1;
  z-index:1;
}


@media only screen and (max-width: 800px) {
	.slider .image1 {
		background-image: url('../images/work/creative-forager-portfolio-header1-mob.jpg')!important;
}
	.slider .image2 {
		background-image: url('../images/work/creative-forager-portfolio-header2-mob.jpg')!important;
}
	.slider .image3 {
		background-image: url('../images/work/creative-forager-portfolio-header3-mob.jpg')!important;
}

}
/*-----------------------END main homepage portfolio responsive slider----------------------------*/


.produce-top-marg {
	margin-top:38px;
}
@media all and (max-width: 1259px) {
	.produce-top-marg {
	margin-top:0px;
}
}

.about-text {	
	display:table-cell; 
	width:50%; 
	vertical-align:top;
}

.grey {
	background:#dad9da;
	padding:10px;
	margin-bottom:20px;
	position:relative;
}

.footermushroom {
	width: 82px!important;
	height: 104px;
	position: absolute;
	bottom: -6em;
	right: -40px;
	margin-bottom:10px;
}

.clientbox {
	border:1px solid black;
	background:white;
	width:32%;
	float:left;
	display:table-cell;
}

.boxspace {
	width:2%;
	float:left;
	display:table-cell;
	height:10px;
}


/*royal slider*/
.royalSlider {
    width: 50%;
	 margin:0; padding:0;
    
}
.royalSlider img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  margin: auto;
}




@media all and (max-width: 300px) {
.clientbox {
	width:100%;
}
}

.videoLeft {
	display:inline-block;
	vertical-align:baseline;
	width:55%
}
.videoRight {
	display:inline-block;
	margin-left:1.9%;
	width:42.6%
}
@media all and (max-width: 900px) {
	.videoLeft {
	width:100%
}
.videoRight {
	margin-left:0;
	margin-top:10px;
	width:100%
}
}

/*--Image fades--*/
.cycler {position:relative;width:100%;max-width:100%;}
.cycler img {position:absolute;z-index:1;background-color:white;width:100%;height:100%;left:0;top:0;display:none}
.cycler img.active {z-index:3}
.cycler img.base {z-index:-1;position:static;display:block}


.about p {
	margin-bottom:9px;
	text-indent:0;
}

.grid figure figcaption.shakespeare {
	height:80px;
}

.grid figure figcaption {
	z-index:4000!important;}

@media all and (max-width: 1000px) {
.grid figure figcaption.shakespeare {
	font-size:80%;
}
}

.narrowImgPortfolio {
	display:none!important;
}

/*--------------------share buttons------------------------------------*/
.share {
	padding-left:40px;
	float:left;
	text-align:left;
	margin-top:10px;
}

.share-title {
	display:block;}

ul.share-buttons{
  list-style: none;
  padding: 0;
  float:left;
}

ul.share-buttons li{
  display: inline;
}

ul.share-buttons .sr-only {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

ul.share-buttons .nav-toggle {
	font-size:25px;
	margin-right:3px;
	margin-left:3px;
	color:#b1b1b1;
	cursor:pointer;
}

.center-wrapper {position:relative!important;}