/*

00. FONT FACE & GENERAL SETTINGS
01. NAVIGATION
02. HEADER
03. INTRO
04. WORK
05. SKILLS
06. LOGOS
07. CLIENTS
08. CALL-TO-ACTION
09. CONNECT
10. CONTACT
11. FOOTER
12. MEDIA QUERIES

*/

/* 00. FONT FACE ================================================== */

@font-face {
    font-family: 'latoregular';
    src: url('../fonts/lato/lato-reg-webfont.eot');
    src: url('../fonts/lato/lato-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato/lato-reg-webfont.woff') format('woff'),
         url('../fonts/lato/lato-reg-webfont.ttf') format('truetype'),
         url('../fonts/lato/lato-reg-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: 'latolight';
    src: url('../fonts/lato/lato-lig-webfont.eot');
    src: url('../fonts/lato/lato-lig-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato/lato-lig-webfont.woff') format('woff'),
         url('../fonts/lato/lato-lig-webfont.ttf') format('truetype'),
         url('../fonts/lato/lato-lig-webfont.svg#latolight') format('svg');
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: 'latobold';
    src: url('../fonts/lato/lato-bol-webfont.eot');
    src: url('../fonts/lato/lato-bol-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato/lato-bol-webfont.woff') format('woff'),
         url('../fonts/lato/lato-bol-webfont.ttf') format('truetype'),
         url('../fonts/lato/lato-bol-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
	}

/* Selected Text Color */

::-moz-selection {
	background: #FFF; /*#F7F9FA*/
	color: #333
	}
	
::selection {
	background: #FFF; /*#F7F9FA*/
	color: #333
	}

.clear {
	padding: 10px 0;
	}
	
b { 
	font-family: 'latoregular', sans-serif;
	}
	
strong { 
	font-family: 'latobold', sans-serif; 
	}
	
h1 {
	font-size: 60px; /* 36px */
	color: #333;
	font-family: 'latolight', sans-serif; 
	padding: 0 0 45px 0;
  	/*margin: 0.75em 0.75em 0.25em;*/
	}
	
h2 {
	font-size: 36px;
	color: #333;
  	font-family: 'latolight', sans-serif;
	line-height: 1.3em;
  	margin-top: 0.33em;
	}
	 
h3 {    
	font-size: 30px;
	color: #333;
	/*line-height: 1.3em;*/
	padding: 0; /* 0 0 10px 0; */
  	font-family: 'latolight', sans-serif;
	}	
	
h4 {    
	font-size: 24px;
	line-height: 1.3em;
  	font-family: 'latolight', sans-serif;
	padding: 0 0 15px 0;
	}

h6 { 
	font-size: 18px; 
	font-family: 'lato', sans-serif;
	/* letter-spacing: .5px; */
	color: #000; /* #666 */
	margin-bottom: 30px; }



/* h2 on dark background */
	
.light {
	color: #FFF; 
	}


/* Link */

a {
  	color: #333;
  	text-decoration: none;
	}
	
a:hover {
	color: #777;}  
	
	
/* Paragrah */

p {
	font-family: 'latolight', sans-serif;
	color: #555;
	}
	
p a {
	border-bottom: 1px dashed #777;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	}
p a:hover {
	border-bottom: 1px dashed #4babc1;
	}


/* Hidden for elements */

.hidden {
	display: none !important;
	}


/* Preloading Page */

#preloader {
    background-color: #333; /*#FFFFFF*/
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
	}
	
#loading-animation {
    background-image: url("../img/loader_grey.gif");
    background-position: center center;
    background-repeat: no-repeat;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -100px;
    position: absolute;
    top: 50%;
    width: 200px;
	}


/* 01. NAVIGATION ================================================== */


nav #navLogo {
	float: left;
	z-index: 999;
	}
		
nav>ul {
	float: right;
	}

/* The main navigation bar */

#nav>li {
	float: left;
	position: relative;
	padding: 10px 0;
	}

/* The main navigation links */

#nav>li>a {
	/* Layout */
	display: block;
	padding: 0 0 0 30px;
	/* Typography */
	font-family: 'latoregular', sans-serif;
	letter-spacing: 1px;
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
	}
	
#nav>li>a:hover {
	color: #777;
	}
	
.cbp-af-header {
	position: fixed;
	background: rgba(255, 255, 255, 0);
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10000;
	height: 120px;
	overflow: hidden;
	-webkit-transition: all 0.4s ease 0.0s;
	-moz-transition: all 0.4s ease 0.0s;
	transition: all 0.4s ease 0.0s;
	}

/* For reducing the height of the Navigation */

.cbp-af-header #navLogo {
	padding: 15px 30px 0 0; 
	width: 80px;
	display: none;
	}
	
.cbp-af-header #nav a {
	line-height: 100px;
	color: #FFF;
	}
	
.cbp-af-header.cbp-af-header-shrink #navLogo { 
	padding: 15px 30px 0 0; 
	width: 80px;
	display: block;
	}


/* Transitions and class for reduced height */

.cbp-af-header #navLogo,
.cbp-af-header #nav a {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	}
	
.cbp-af-header.cbp-af-header-shrink {
	height: 80px;
	background: rgba(255, 255, 255, 1);
	-webkit-box-shadow:  1px 1px 6px 1px rgba(0, 0, 0, 0.1);
    box-shadow:  1px 1px 6px 1px rgba(0, 0, 0, 0.1);
	}
	
.cbp-af-header.cbp-af-header-shrink #nav a {
	line-height: 60px;
	color: #999;
	}

	
/* The hover state of the links */

.cbp-af-header.cbp-af-header-shrink #nav li .selected, .cbp-af-header.cbp-af-header-shrink #nav li a:hover {
	color: #000;
	}


/* MOBILE MENU */

.mobile-menu {
	display: none;
	}
	
.mobile-menu {
	display: none;
	background: #fff;
	width: 100%;
	z-index: 99999999;
	position: fixed;
	top: 0;
	-webkit-box-shadow:  1px 1px 6px 1px rgba(0, 0, 0, 0.1);
    box-shadow:  1px 1px 6px 1px rgba(0, 0, 0, 0.1);
	}
		
.mobile-menu .row {  /*when open*/
	background: #222;
	padding-top: 10px;
	padding-bottom: 10px;
	}
	
.mobile-menu-inner .nav-mobile li {
	color: #fff;
	background: #333;
	display: block;
	width: 100%;
	cursor: pointer;
	margin-top: 2%;
	padding: 6px 20px 5px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;	
	}
		
.mobile-menu-inner .nav-mobile li:hover {
	background-color: #fff;	
	}
		
.mobile-menu-inner .nav-mobile li:hover a {
	color: #000;	
	}
		
.mobile-menu-inner .nav-mobile li a {
	display: block;
	width: 100%;
	color: #fff;
	font-family: 'latoregular', sans-serif;
	font-size: 0.8rem;
	text-transform:uppercase;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;	
	}
		
#collapse {
	display:none;
	}
	
.mobile-menu h3 {  /*when closed*/
	font-family: 'latoregular', sans-serif;
	font-size: 0.8rem;
	letter-spacing: 2px;
	padding-bottom: 15px;
	padding-top: 15px;
	text-align: center;
	text-transform: uppercase;
	}


/* 02. HEADER ================================================== */

#header {
	width: 100%;
	height: 100%;
	color: #FFF;
	background: #333 ; 
    z-index: 9;
    position: relative;
	}
	  
#impressionFader {
	margin: 0;
    position: absolute;
    top: 33%; /* 33% */
    width: 960px;
    text-align: left;
    z-index: 9999;
	}
	
#impressionFader .Impressions {
    opacity: 1;
    position: absolute;
    width: 100%;
	}
	
#impressionFader .Head {
    color: #FFF;
    display: block;
    font-family: 'latobold', sans-serif;
	text-transform: uppercase;
    font-size: 60px;
    letter-spacing: -3;
    text-align: left;
	line-height: 1;
	}
	
#impressionFader .Sub {
    color: rgba(255,255, 255, 1);
    display: block;
    font-family: 'latolight', sans-serif;
    text-transform: uppercase;
    font-size: 50px;
	letter-spacing: -2;    
    text-align: left;
    position: relative;
	line-height: 1;
	}
	
#impressionFader .Sub2 {
    color: rgba(255,255, 255, 1);
    display: block;
    font-family: 'latolight', sans-serif;
	font-size: 30px;
    text-align: left;
    position: relative;
	/*margin-top: 10px;*/
	line-height: 1;
	}
	
#impressionFader .Sub2 a {
    color: #FFF;
    border-bottom: 1px solid #FFF;
	}
	
#impressionFader .Sub2 a:hover {
    color: #777; /* #EDE734 */
	border-bottom: 1px solid #777; /* #EDE734 */
	}
	
#impressionFader .Continue {
    display: block;
    margin: 0 auto;
    width: 264px;
	}
	
#impressionFader .Continue a {
    color: #FFF;
    display: inline-block;
    font-family: 'latolight', sans-serif;
    font-size: 14px;
    margin: 0 15px;
    text-decoration: none;
    transition: color 0.2s linear 0s;
	}
	
#impressionFader .Continue a:hover {
    color: rgba(0, 0, 0, 0.7);
	}
	
#impressionFader .Last {
    text-align: left;
	}
		
.down-arrow {
    position: absolute;
	width: 61px;
	height: 61px;
	right: 0;
	left: 0;
	bottom: 0;
	text-decoration: none;
    padding: 10px 10px 0 10px;
	margin: 0 auto;
    display: block;
    z-index: 99;
	}
	
.down-arrow:hover {
	padding: 10px 10px 0 10px;
	background: #777;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-ms-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	}


/* 03a. INTRO ====================================================== */

#intro {
	padding: 75px 0; /* 60px 0 */
	}
	
ul.keywords {
	text-align: left;
	float: left;
	}
	
.keywords li {
	position: relative;
	display: inline-block;
	list-style-type: none;
	border: 1px solid #EEE; /* 1px solid #CCC */
	border-radius: 30px; /* new */
	font-family: 'latolight', sans-serif;
	font-size: inherit;
	color: #666;  /* #777 */
	background: #EEE;  /* none */
	padding: 5px 15px; /* 1px 9px */
	margin: 15px 10px 0 0; /* 10px 8px 0 0 */
	}
			
.subSection {
	margin-bottom: 40px;
	}


/* 03b. ARCHIVES INTRO ====================================================== */

#archivesintro {
	padding: 60px 0;
	}


/* 04a. WORK ================================================== */

#work {
	padding: 0;
	background: #333;
	}
	
.grid {
	background: #eaeaea;
  	margin: 0px auto 0px;
  	font-size: 0;
  	text-align: left;
	}
	
.item {
  	height: auto;
  	display: inline-block; 
  	vertical-align: top;
  	position: relative; 
  	overflow: hidden;
  	line-height: 0;
  	-webkit-transition: -webkit-transform 0.2s ease-out;
	-moz-transition: -moz-transform 0.2s ease-out;
	-o-transition: -o-transform 0.2s ease-out;
	transition: transform 0.2s ease-out;
	}
	
.item img {
  	position: relative;
  	z-index: 4;
  	width: 100%;
  	-webkit-transform-origin: 50% 50%;
  	-moz-transform-origin: 50% 50%;
  	-ms-transform-origin: 50% 50%;
  	-o-transform-origin: 50% 50%;
  	transform-origin: 50% 50%;
  	
  	/* This is what was making it slow! booooooo */
  
  	-webkit-transition: opacity 3s ease-out, -webkit-transform 1s ease-in;
  	-moz-transition: opacity 3s ease-out, -moz-transform 1s ease-in;
  	-o-transition: opacity 3s ease-out, -o-transform 1s ease-in;
  	transition: opacity 3s ease-out, transform 1s ease-in;
	}
	
.item .link {
  	display: block;
  	height: 100%;
	}
	
.hovercontent {
  	position: absolute;
  	z-index: 999;
  	font-family: 'latoregular', sans-serif;
  	text-align: center;
  	width: 100%;
  	height: 100%;
  	background: #222;
  	background: rgba(0,0,0,0.5);
  	cursor: pointer;
  	opacity: 0;
  	line-height: 24px;
  	filter: alpha(opacity=0);
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  	-moz-transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);
  	-o-transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);
  	-webkit-transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);
  	transform: scale3d(1.3, 1.3, 1) translate3d(0,10%,0);
  	-webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-in-out;
  	-moz-transition: opacity 0.2s ease-out, -moz-transform 0.2s ease-in-out;
  	-o-transition: opacity 0.2s ease-out, -o-transform 0.2s ease-in-out;
  	transition: opacity 0.2s ease-out, transform 0.2s ease-in-out;
	}
	
.hovercontent h1 {
  	color: #FFF;
  	font-size: 24px;
  	margin-top:25%;
  	font-family: 'latolight', sans-serif;
	}
	  	
.hovercontent h4 {
  	color: #fff;
  	font-family: 'latolight', sans-serif;
  	font-size: 18px;
  	font-weight: 200;
	} 
		
.item .link:hover .hovercontent {
  	opacity: 1;
  	filter: alpha(opacity=100);
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  	-moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  	-o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  	-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  	transform: scale3d(1, 1, 1) translate3d(0,0,0);
	}
	
.translate(@x: 0, @y: 0) {
	-webkit-transform: translate(@x, @y);
  	-moz-transform: translate(@x, @y);
  	-ms-transform: translate(@x, @y);
  	-o-transform: translate(@x, @y);
  	transform: translate(@x, @y); 
	}
	
.shift_grid(@down, @right: 0) {
  .translate(@right * 50%, @down * 50%);
}

ul.tags {
	text-align: left;
	float: left;
	}
	
.tags li {
	position: relative;
	display: inline-block;
	list-style-type: none;
	border-radius: 30px; /* new */
	font-family: 'latolight', sans-serif;
	font-size: inherit;
	color: #DDD;  /* #666 */
	background: #444;  /* bkgd 333 */
	padding: 5px 15px; /* 1px 9px */
	margin: 15px 10px 0 0; /* 10px 8px 0 0 */
	}

ul.credits {
	text-align: center;
	float: center;
	margin: 16px 0 0 0;
	}
	
.credits li {
    position: relative;
    display: list-item;
    list-style-type: none;
    font-family: 'latolight', sans-serif;
    font-size: 14px;
	line-height: 24px;
    color: #999; /* #555 inherent from Body */
    padding: 0;
	}


#work .spacer10 {
	margin-bottom: 10px;
	color: #333;
	}

/* 2-GRID */
@media screen and (min-width: 600px) {
  .item {
    width: 50%;
    max-height: none;
    > a { height: 50%; }
    &.tall {
      margin-bottom: -25.1%;
      &.shift1 { .shift_grid(0.6666666); }
      &.shift2 { .shift_grid(1.3333333); }
      &.shift3 { .shift_grid(2); }
      &.shift4 { .shift_grid(2.6666666); }
      &.shift5 { .shift_grid(3.3333333); }
    }
    &.shift1 { .shift_grid(1); }
    &.shift2 { .shift_grid(2); }
    &.shift3 { .shift_grid(3); }
    &.shift4 { .shift_grid(4); }
    &.shift5 { .shift_grid(5); }
  }
}

/* 3-GRID */
@media screen and (min-width: 900px) {
	.item {
		width: 33.33332%;
		> a { height: 50%; }
	&.tall {
      margin-bottom: -16.7%;
    }
  }
}

/* 4-GRID */
@media screen and (min-width: 1200px) {
	.item {
		width: 25%;
    	> a { height: 25%; }
    &.tall {
		margin-bottom: -12.6%;
    }
  }
}


/* Expander of the Work Settings */

.slide_portfolio {
	text-align: center;
	display: none;
	padding: 10px 0 60px 0;
	background: #333; /* Old browsers */
	/*background: -moz-linear-gradient(left,  #333333 0%, #444444 50%, #333333 100%); /* FF3.6+ */
	/*background: -webkit-gradient(linear, left top, right top, color-stop(0%,#333333), color-stop(50%,#444444), color-stop(100%,#333333)); /* Chrome,Safari4+ */
	/*background: -webkit-linear-gradient(left,  #333333 0%,#444444 50%,#333333 100%); /* Chrome10+,Safari5.1+ */
	/*background: -o-linear-gradient(left,  #333333 0%,#444444 50%,#333333 100%); /* Opera 11.10+ */
	/*background: -ms-linear-gradient(left,  #333333 0%,#444444 50%,#333333 100%); /* IE10+ */
	/*background: linear-gradient(to right,  #333333 0%,#444444 50%,#333333 100%); /* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=1 ); /* IE6-9 */
	}
	
.slide_portfolio h3 {
	color: #FFF;
	padding: 42px 0 42px 0;
	/* padding-bottom: 20px;*/
	text-align: left;
	}		
.slide_portfolio p {
	color:#FFF;
	text-align: left;
	}


/* Space between img */

.slide_portfolio img {
	padding: 20px 0;
	}


/* Close Icon */

.slide_portfolio .closeit {
	cursor: pointer;
	margin-top: 100px;
	margin-bottom: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	}
	
.slide_portfolio .closeit:hover {
	opacity: 0.4;
	}


/* Top Icon */

.slide_portfolio .back-to-top {
    cursor: pointer;
	margin-top: 100px;
	margin-bottom: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	}
	
.slide_portfolio .back-to-top:hover {
	opacity: 0.4;
	}

.slide_portfolio .btn {
	position: relative;
	}
	
.slide_portfolio .btn a {
	border: 1px solid #FFF;
	border-radius: 30px; /* new */
	font-family: 'latoregular', sans-serif;
	font-size: inherit;
	text-transform: uppercase;
	color: #FFF;
	letter-spacing: 1px;
	display: inline-block;
	cursor: pointer;
	background-color: none;
	margin: 30px 0 30px 0;
	padding: 12px 30px;
    text-decoration: none;
	}

.slide_portfolio .btn a:hover {
	color: #333;
	background: #FFF;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	}	


/* 04b. ARCHIVES-work ================================================== */

#archiveswork {
	padding: 0;
	background: #333;
	}
	

/* 05. SKILLS ============================================ */

#process {
	background: #FFF;
	padding: 90px 0; /* 60px 0 */
	}


/* 06. LOGOS ============================================ */

#logo {
	background: url('../img/bkgd_abstract-blur-effects-no-024.jpg'); /* Parallax Background polygon-bkgd-26677.jpg*/     
    background-size: cover;
    background-attachment: fixed;
	padding: 75px 0; /* 60px 0 */
	}
	
#logos .item_logo {
    padding: 30px 0;
    margin: 10px;
    color: #FFF;
    text-align: center;
	}


/* 07. CLIENTS ============================================ */

#clients {
	background: #666;    
	padding: 75px 0; /* 60px 0 */
	}
	
#clients h2 {
	text-align: left;
	color: #FFF;
	/*margin-bottom: 20px;*/
	}
		
#clients ul {
	font-family: 'latolight', sans-serif;
	text-align: left;
	color: #fff;
	list-style-type: none;
	}

	
/* 08. CALL-TO-ACTION ============================================ */

#action {
	background: #333;
	padding: 75px 0; /* 60px 0 */
	color: #FFF;
	}
	
#action h2 {
	text-align: center;
	color: #FFF;
	}
	
#action p {
	color: #FFF;
	}

/* General button style (reset) */

#action .btn {
	border: 1px solid #FFF;
	border-radius: 30px; /* new */
	font-family: 'latoregular', sans-serif;
	font-size: inherit;
	color: #FFF;
	background: none;
	cursor: pointer;
	padding: 12px 30px;
	display: inline-block;
	margin: 20px 30px 0 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	/*font-weight: 700;*/
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	}

#action .btn:hover {
	border: 1px solid #FFF;
	background: #FFF; /* #EDE734*/
	color: #333;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	}	

#action .btn>a {
	color: #FFF;
	}
	
/*.btn a:hover {
	color: #333;
}*/

		
	
/* 09. CONNECT ============================================ */

#connect {
	/*background: url('../img/bkgd_abstract-blur-effects-no-024.jpg'); /* Parallax Background */  
	/* background-size: cover;
    background-attachment: fixed; */
	background: #FFF;
	padding: 75px 0; /* 60px 0 */
	}
	
#connect h2 {
	text-align: left;
	color: #FFF;
	}
	
.links>ul {
	text-align: left; /* center */
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
	
.links>li {
	position: relative;
	display: inline-block;
    margin: 0 30px 30px 0; /* 0 15px 0 0*/
    height: 60px;
    width: 60px;
    cursor: pointer;
	}
		
.links>li:hover {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	filter: invert(41%) sepia(0%) saturate(3703%) hue-rotate(193deg) brightness(92%) contrast(83%);
	}
	
.links>li>a {
	text-decoration: none;
	}

#connect .spacer10 {
	margin-bottom: 10px;
	color: #FFF;
	}
	

/* 10. CONTECT AND FORM ============================================ */

#contact {
	background-color: #FFF;
	padding: 75px 0; /* 60px 0 */
	}

#contact .row .eight.columns {
	width: 65.95745%;
	padding: 0 3% 0 0;
	display: inline-block;
	vertical-align: text-top;
	text-align: left;
	}
	
#contact .row .four.columns {
	/*width: 31.91489%;*/
	display: inline-block;
	vertical-align: text-top;
	text-align: left;
	}
	
/*
#contact input[type="text"], 
#contact input[type="tel"],
#contact input[type="email"], 
#contact textarea {
	width: 100%;
	height: 30px;
	padding: 5px 10px;
	font-family:'latolight', serif;
	font-size: 1rem;
	color: #555;
	background-color: #FFF;
	border: 1px solid #000;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 15px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	}
	
#contact input[type="text"]:focus, 
#contact input[type="tel"]:focus, 
#contact input[type="email"]:focus, 
#contact textarea:focus {
    background: none repeat scroll 0 0 #FCFCFC;
	}
	
#contact input[type="text"],
#contact input[type="tel"], 
#contact input[type="email"] {
    width: 100%;
	height: 30px;
	}
	
#contact textarea {
    resize: vertical;
	height: 100px;;
	}
*/	



/* New Contact form with Captcha - Dec 2020 */


#frmContact .label {
	margin: 2px 0;
	}
#frmContact .field {
	margin: 0 0 15px 0; /* 0 0 20px 0 */
	}
div#central {
	margin: 40px 0px 100px 0px;
	}
#frmContact input, #frmContact textarea {
	width: 100%;
	padding: 15px 20px;  /* 15px */
	font-size: 1em;  /* input text */
	background-color: #EEE;
	border: 1px solid #EEE;  /* #A1A1A1 - grey*/
	border-radius: 30px; /* new */
    box-sizing: border-box;
	}
#frmContact button {
	min-width: 25%;
	padding: 15px 15px 15px 15px; /* 5px 20px 5px 20px */
	background-color: #000;
	font-family: 'latolight', serif;
	font-size: 18px;  /* 16px */
	color: #FFF;
	margin-top: 15px 20px;  /* 20px */
	display: block;
	border: 1px solid #000;
	border-radius: 30px; /* new */
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	cursor: pointer;
	}
#frmContact button:hover {
    color: #666;
	border: 1px solid #000;
	background-color: #FFF;
	cursor: pointer;
	}
	
#message {
	padding: 30px; /*30px*/
	background: #fff;
	}
#mail-status {
	padding: 15px 30px; /* 12px 20px */
	width: 100%;
	display: none;
	font-size: 10em; /*1em  - don't see this*/
	font-family: 'latolight', serif;
	color: rgb(40, 40, 40);
	}
.error {
	background-color: #FF81D4;  /* pink */
	margin-bottom: 30px; /* 40px */
	}
.success {
	background-color: #FF81D4;  /* pink */
	}
.g-recaptcha {
	margin: 0 0 30px 0; /* 0 0 25px 0 */
	}





#demo-content {
    padding: 0px 0px 100px 0px;
	}
#demo-content table.tutorial-table {
    table-layout: auto;
	}
.tutorial-back a {
    background:#09f;
    padding: 10px 10px 10px 20px;
    margin: 20px 40px 20px 0;
    color: #fff;
    display: inline-block;
    width: 155px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    position:relative;
	}
.tutorial-back a:before {
    background: url(https://phppot.com/wp-content/themes/solandra/images/sprite.png) no-repeat 0px 0px;
    height: 24px;
    width: 24px;
    display: inline-flex;
    content: '';
    position:absolute;
    top: 10px;
    left: 15px;
	}
.tutorial-back a:hover {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.50);
	}




/* Previous Contact form with Captcha

label {
    color: #333;
	}

.help-block.with-errors {
    color: #ff5050;
    margin-top: 0px;
	}

.btn-send {
    min-width: 25%;
	padding: 5px 20px 5px 20px;
	background-color: #000;
	font-family: 'latolight', serif;
	font-size: 18px;
	color: #FFF;
	margin-top: 20px;
	display: block;
	border: 1px solid #000;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	}
	
.btn-send:hover {
    color: #666;
	border: 1px solid #000;
	background-color: #FFF;
	cursor: pointer;
	}
	
p.text-muted {
	margin-top: 20px;
}
 */

	
/*
.btn-success{color:#fff;background-color:#000;border-color:#000}
.btn-success:hover{color:#fff;background-color:#666;border-color:#000}
.btn-success.focus,.btn-success:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}
.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#28a745;border-color:#28a745}
.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#1e7e34;border-color:#1c7430}
.btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}
*/


/* 11. FOOTER  ============================================ */

#footer {
	background: #000;
	padding: 0;
	}

#footer .copyright {
	float: left;
	z-index: 999;
	padding: 20px 0 7px 0 ;
	}

.copyright p {
	font-size: 12px;
	color: #fff;
	}

#footer .back-to-home {
    position: relative;
    /*margin-top: 0;*/
    text-decoration: none;
    background: #000;
    padding: 10px 10px 0 10px;
    display: block;
    z-index: 99;
	}

#footer .back-to-home:hover {
	padding: 10px 10px 0 10px;
	background: #888;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	}


/* 12. MEDIA QUERIES  ============================================ */

/* iPhone X (Landscape) ----------- */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { 
/* Display the mobile menu */
	.mobile-menu {display: block;}
	/* Not Showing the Navigation */
	.cbp-af-header {display: none;}
#impressionFader {position:relative; text-align:left; margin-top:15%; transform:scale(0.6);}
}

/* iPhone X (Portrait) ----------- */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) { 
/* Display the mobile menu */
	.mobile-menu {display: block;}
	/* Not Showing the Navigation */
	.cbp-af-header {display: none;}
	
	#impressionFader {position:relative; text-align:left; margin-top:55%; transform:scale(0.6);} 
}

/* iPhone XR (Landscape) ----------- */
@media only screen 
and (device-width : 896px) 
and (device-height : 414px) 
and (-webkit-device-pixel-ratio : 2)
and (orientation : landscape) { 
/* Display the mobile menu */
	.mobile-menu {display: block;}
	/* Not Showing the Navigation */
	.cbp-af-header {display: none;}
#impressionFader {position:relative; text-align:left; margin-top:15%; transform:scale(0.6);}
}

/* iPhone 6, 7, 8 (Landscape) ----------- */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 740px) 
and (orientation : landscape) {
	/* Display the mobile menu */
	.mobile-menu {display: block;}
	/* Not Showing the Navigation */
	.cbp-af-header {display: none;}
	
	#impressionFader {position:relative; text-align: left;margin-top:18%; transform:scale(0.6);}
	
	.item {
    width: 50%;
    max-height: none;
    > a { height: 50%; }
    &.tall {
		margin-bottom: -25.1%;
		&.shift1 { .shift_grid(0.6666666); }
		&.shift2 { .shift_grid(1.3333333); }
      	&.shift3 { .shift_grid(2); }
      	&.shift4 { .shift_grid(2.6666666); }
      	&.shift5 { .shift_grid(3.3333333); }
    	}
    &.shift1 { .shift_grid(1); }
    &.shift2 { .shift_grid(2); }
    &.shift3 { .shift_grid(3); }
    &.shift4 { .shift_grid(4); }
    &.shift5 { .shift_grid(5); }
	}
}


/* iPhone 6, 7, 8 (Portraits) ----------- */
@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 667px) 
and (orientation : portrait) { 
	
	/* Display the mobile menu */
	.mobile-menu {display: block;}
	/* Not Showing the Navigation */
	.cbp-af-header {display: none;}
	
	#impressionFader {position:relative; text-align:left; margin-top:70%; transform:scale(0.6);}
	#header .twelve columns .down-arrow {left: 0; right: 0; !important;}
}


/* Tablet / iPad (Landscape) ----------- */
@media only screen 
and (device-width: 1024px) 
and (device-height: 768px) 
and (orientation : landscape) {
	/* Display the mobile menu */
	.mobile-menu {display: block;}
	/* Not Showing the Navigation */
	.cbp-af-header {display: none;}
	
	#impressionFader {position:relative; text-align:left; margin-top:30%; transform:scale(0.8)}
	#header .twelve columns .down-arrow {left: 0; right: 0; !important;}	       
}


/* Tablet / iPad (Portraits) ----------- */
@media only screen 
and (device-width: 768px) 
and (device-height: 1024px) 
and (orientation : portrait) {
	/* Display the mobile menu */
	.mobile-menu {display: block;}
	/* Not Showing the Navigation */
	.cbp-af-header {display: none;}
	
	#impressionFader {position:relative; text-align:left; margin-top:55%; transform:scale(0.8);}
}	

/* Tablet / Kindle (Portraits) ----------- */
@media only screen 
and (device-width: 800px) 
and (device-height: 1280px) 
and (orientation : portrait) {
	/* Display the mobile menu */
	.mobile-menu {display: block;}
	/* Not Showing the Navigation */
	.cbp-af-header {display: none;}
	
	#impressionFader {position:relative; text-align:left; margin-top:55%; transform:scale(0.8);}
}	


/* Applies to all mobile */
@media screen and (max-width: 768px) {

	#intersection, #client, #contact_intersection {background-size: auto; background-origin: content-box ;}
	/*.separator { border-top: 1px solid #EEEEEE; margin: 40px auto 10px auto; width: 10%;}*/
	.slide_portfolio {padding: 20px;}
	#contact , #contact p {text-align: left;}
	#footer p {text-align: left;}	       
}