@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

li.left {
    float: left;
    width: 40%;
    max-width: 300px;
    margin-right: 100px;
}


li.right {
    float: right;
    width: 40%;
    max-width: 300px;
    margin-right: 250px;
}

#product-work li {
    list-style-type: none;
    /* margin: 0px; */
    /* padding: 0px; */
    text-align: center;
float:left;
margin-right:20px;
margin-bottom:20px;
max-width:30%;
}

#product-work img {
 width:100%;
border: solid 0px #f2f2f2;
}


.clear
{
clear:both;
padding:20px;
}




*
{
	margin:0;
	padding:0;
}

a{
	
	color:#000000;
}

.site
{

	font-size:14px;
}

.site a {
    background-color: #F1F1F1;
    display: block;
    margin: 40px auto;
    padding: 20px 30px 20px 20px;
    text-decoration: none;
    width: 20%;
}

.site a:hover
{
	background-color:#fce45c;
	
}

@font-face {
    font-family: "open_sansregular";
    font-style: normal;
    font-weight: normal;
    src:url(../fonts/OpenSans-Regular-webfont.eot) format("embedded-opentype"), url(../fonts/OpenSans-Regular-webfont.woff) format("woff"), url(../fonts/OpenSans-Regular-webfont.ttf) format("truetype"), url(../fonts/OpenSans-Regular-webfont.svg) format("svg");
}


@font-face {
    font-family: "open_bold";
    font-style: normal;
    font-weight: normal;
    src:url(../fonts/OpenSans-Bold-webfont.eot) format("embedded-opentype"), url(../fonts/OpenSans-Bold-webfont.woff) format("woff"), url(../fonts/OpenSans-Bold-webfont.ttf) format("truetype"), url(../fonts/OpenSans-Bold-webfont.svg) format("svg");
}


#header {
	
	max-width: 1140px;
	margin: 0 auto;

}
.logo {
	float: left;
	padding-top:23px;
	
}
#logo
{
	display:none;
}

.section {
	width: 100%;
	
	z-index: 10;
	position: relative;
	margin: 0 auto;
	padding: 0 0 140px 0;
		font-size:40px;
	font-family: 'Open Sans', sans-serif;
}


.inner {

	margin: 0 auto;
	position: relative;
	min-height: 50px;
	padding:30px 0;
	font-size:40px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	padding:0px 0;
		max-width:1140px;
	
}

/* This is the selector i used for my menu, it needs to be set as position:absolute; */
.subMenu {
	position: absolute;
	top: 0px;
	
	z-index: 1000;
	width: 100%;
	
	background-image:url(../images/bodybg2.png);
	
	margin: 0 auto;

	left: auto;
	right: auto;
}

.subMenu .inner {
	padding:0;
	font-weight: 400;
}





.subNavBtn {
	display: block;
	
	float: right;
	text-decoration: none;
	font-size: 14px;
	text-align: center;
;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 55px;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0;
}

a.subNavBtn
{
	text-decoration: none;
	display: block;
	padding: 20px 30px;
	background-color: #FFFFFF;
	color: #000;
	margin-top: 59px;
	margin-right: 0px;
	}

a:hover.subNavBtn

{
	background-color:#fce45c;
}


.end {
	margin: 0;
}

.nav {
	float: right;
	width: 40%;
}

.nav ul
{
	float:right;
}
.nav ul li
{
	float:left;
	
	display:block;
	font-size:12px;
}

.nav ul li a
{
	text-decoration:none;
display:block;
	padding:20px 30px;
	}

.nav ul li a:hover
{
	background-color:#fce45c;
}

div
{
	margin:0;
	padding:0;
	overflow:hidden;
}

body {
font-family: 'Open Sans', sans-serif;
	font-weight:normal;
	overflow:hidden;
}



/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../images/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

#container {
	width: 100%;
	margin:0;
}

.sTop #main-content
{
	margin:140px auto 0 auto;
	height:100%;

}



.s1 #main-content
{
	margin:140px auto 0 auto;
	min-height:500px;

}

.s2 #main-content
{
	margin:140px auto 0 auto;
	min-height:500px;

}

.main
{
	max-width:1100px;
	margin:0 auto;
	
}

#sidebar
{
	clear: both;
	margin-bottom: 20px;
	padding-top: 40px;	
}

h2.portfolio-type, p.work-desc 
{
    font-size: 40px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    /* width: 75%; */
    margin: 0 auto;
    font-size: 26px;
    margin-top: 30px;
margin-bottom:30px;
}

h2 {
    font-size: 40px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    /* width: 75%; */
    margin: 0 auto;
    font-size: 40px;
}

/*
.extrabig, .aboutme1
{
		font-size:40px;
	font-weight:bold;
	font-family: 'open_bold', sans-serif;
}

*/


@import url('demo.css');

.mi-slider {
	position: relative;
	margin-top: 30px;
	height: 750px;
}

.mi-slider ul {
	list-style-type: none;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 140px;
	overflow: hidden;
	text-align: center;
	pointer-events: none;
}

.no-js .mi-slider ul {
	position: relative;
	left: auto;
	bottom: auto;
	margin: 0;
	overflow: visible;
}

.mi-slider ul.mi-current {
	pointer-events: auto;
}

.mi-slider ul li {
	display: inline-block;
	padding-bottom:30px;
	width: 32.2%;
	max-width: 336px;
	-webkit-transform: translateX(600%);
	transform: translateX(600%);
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}

.mi-slider ul li.first
{
	padding-left:0px;
	padding-right:40px;
}

.mi-slider ul li.last
{
	padding-right:0px;
	padding-left:40px;
}

.no-js .mi-slider ul li {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.mi-slider ul li a,
.mi-slider ul li img {
	display: block;
	margin: 0 auto;
}

.mi-slider ul li a {
	outline: none;
	cursor: pointer;
}

.mi-slider ul li img {
	max-width: 100%;
	border: none;
}

.mi-slider ul li h4 {
	display: inline-block;
	
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	padding: 20px 10px 0;
}

.mi-slider ul li:hover {
	opacity: 0.7;
} 

.mi-slider nav {
	position: relative;
	top: 610px;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
	border-top: 5px solid #333;
}

.no-js nav {
	display: none;
}

.mi-slider nav a {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 5px;
	padding: 40px 30px 30px 34px;
	position: relative;
	color: #888;
	outline: none;
	-webkit-transition: color 0.2s linear;
	transition: color 0.2s linear;
}

.mi-slider nav a:hover,
.mi-slider nav a.mi-selected {
	color: #000;
}

.mi-slider nav a.mi-selected:after,
.mi-slider nav a.mi-selected:before {
	content: '';
	position: absolute;
	top: -5px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.mi-slider nav a.mi-selected:after {
	border-color: transparent;
	border-top-color: #fff;
	border-width: 20px;
	left: 50%;
	margin-left: -20px;
}

.mi-slider nav a.mi-selected:before {
	border-color: transparent;
	border-top-color: #333;
	border-width: 27px;
	left: 50%;
	margin-left: -27px;
}

/* Move classes and animations */

.mi-slider ul:first-child li,
.no-js .mi-slider ul li {
	-webkit-animation: scaleUp 350ms ease-in-out both;
	animation: scaleUp 350ms ease-in-out both;
}

@-webkit-keyframes scaleUp {
	0% { -webkit-transform: translateX(0) scale(0); }
	100% { -webkit-transform: translateX(0) scale(1); }
}

@keyframes scaleUp {
	0% { transform: translateX(0) scale(0); }
	100% { transform: translateX(0) scale(1); }
}

.mi-slider ul:first-child li:first-child {
	-webkit-animation-delay: 90ms;
	animation-delay: 90ms;
}

.mi-slider ul:first-child li:nth-child(2) {
	-webkit-animation-delay: 180ms;
	animation-delay: 180ms;
}

.mi-slider ul:first-child li:nth-child(3) {
	-webkit-animation-delay: 270ms;
	animation-delay: 270ms;
}

.mi-slider ul:first-child li:nth-child(4) {
	-webkit-animation-delay: 360ms;
	animation-delay: 360ms;
}

/* moveFromRight */

.mi-slider ul.mi-moveFromRight li {
	-webkit-animation: moveFromRight 350ms ease-in-out both;
	animation: moveFromRight 350ms ease-in-out both;
}

/* moveFromLeft */

.mi-slider ul.mi-moveFromLeft li {
	-webkit-animation: moveFromLeft 350ms ease-in-out both;
	animation: moveFromLeft 350ms ease-in-out both;
}

/* moveToRight */

.mi-slider ul.mi-moveToRight li {
	-webkit-animation: moveToRight 350ms ease-in-out both;
	animation: moveToRight 350ms ease-in-out both;
}

/* moveToLeft */

.mi-slider ul.mi-moveToLeft li {
	-webkit-animation: moveToLeft 350ms ease-in-out both;
	animation: moveToLeft 350ms ease-in-out both;
}

/* Animation Delays */

.mi-slider ul.mi-moveToLeft li:first-child,
.mi-slider ul.mi-moveFromRight li:first-child,
.mi-slider ul.mi-moveToRight li:nth-child(4),
.mi-slider ul.mi-moveFromLeft li:nth-child(4) {
	-webkit-animation-delay: 0ms;
	animation-delay: 0ms;
}

.mi-slider ul.mi-moveToLeft li:nth-child(2),
.mi-slider ul.mi-moveFromRight li:nth-child(2),
.mi-slider ul.mi-moveToRight li:nth-child(3),
.mi-slider ul.mi-moveFromLeft li:nth-child(3) {
	-webkit-animation-delay: 90ms;
	animation-delay: 90ms;
}

.mi-slider ul.mi-moveToLeft li:nth-child(3),
.mi-slider ul.mi-moveFromRight li:nth-child(3),
.mi-slider ul.mi-moveToRight li:nth-child(2),
.mi-slider ul.mi-moveFromLeft li:nth-child(2) {
	-webkit-animation-delay: 180ms;
	animation-delay: 180ms;
}

.mi-slider ul.mi-moveToLeft li:nth-child(4),
.mi-slider ul.mi-moveFromRight li:nth-child(4),
.mi-slider ul.mi-moveToRight li:first-child,
.mi-slider ul.mi-moveFromLeft li:first-child  {
	-webkit-animation-delay: 270ms;
	animation-delay: 270ms;
}

/* Animations */

@-webkit-keyframes moveFromRight {
	0% { -webkit-transform: translateX(600%); }
	100% { -webkit-transform: translateX(0%); }
}

@-webkit-keyframes moveFromLeft {
	0% { -webkit-transform: translateX(-600%); }
	100% { -webkit-transform: translateX(0%); }
}

@-webkit-keyframes moveToRight {
	0% { -webkit-transform: translateX(0%); }
	100% { -webkit-transform: translateX(600%); }
}

@-webkit-keyframes moveToLeft {
	0% { -webkit-transform: translateX(0%); }
	100% { -webkit-transform: translateX(-600%); }
}

@keyframes moveFromRight {
	0% { transform: translateX(600%); }
	100% { transform: translateX(0); }
}

@keyframes moveFromLeft {
	0% { transform: translateX(-600%); }
	100% { transform: translateX(0); }
}

@keyframes moveToRight {
	0% { transform: translateX(0%); }
	100% { transform: translateX(600%); }
}

@keyframes moveToLeft {
	0% { transform: translateX(0%); }
	100% { transform: translateX(-600%); }
}

.mi-slider {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Media Queries */





/* SECTIONS */
.sTop {
	min-height: 630px;

text-align:center;
	color:#3d3d3d;
	
}

#sTop
{
	background-color:#fffFFF;
	color:#000000;
}

#s1
{
		background-color:#fce45c;
color:#ffffff;
}

#s2
{
		background-color:#000000;
		color:#ffffff;

}
.sLogo {
	min-height: 630px;
	background:#e5e5e5;
	color:#3d3d3d;
	
}

.sTop {

	height:100%;
	
}

.s1 {

	height:100%;
	background-color:#fce45c;

text-align:center;
}


.s2 {
	
	background-color: #000000;
	
text-align:center;
}


.s3 {
	min-height: 500px;
	background: #504f4f;
}


.s4 {
	min-height: 500px;
	background: #6e87a1;
	color: white;
}

.s5 {
	min-height: 500px;
	background: #293b4d;
	color: white;
}


.s2 .content-main
{
color:#ffffff;
}













.cbp-fwslider {
    position: relative;
    margin: 0 0 10px;
    overflow: hidden;
    padding: 0px 0 60px;
}
 
.cbp-fwslider ul {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    list-style-type: none;
}
 
.cbp-fwslider ul li {
    transform: translateZ(0);
    float: left;
    display: block;
    margin: 0;
    padding: 0;
}
 
.cbp-fwslider ul li > a,
.cbp-fwslider ul li > div {
    display: block;
    text-align: center;
    outline: none;
}
 
.cbp-fwslider ul li > a img {
    border: none;
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
 
.cbp-fwslider nav span {
	position: absolute;
	top: 50%;
	color: #000;
	text-align: center;
	margin-top: -170px;
	cursor: pointer;
	font-weight: normal;
	padding: 5px 20px;
	border-radius: 100%;
	background-color: #FCE45C;
	color:#fff;
	
}
 
 
	
.cbp-fwslider nav span:hover {
	background-color:#000;
}
 
.cbp-fwslider nav span.cbp-fwnext {
	right: 0px;
	
}
 
 .cbp-fwslider nav span.cbp-fwnext a
 {
	padding: 5px 20px;
	border-radius: 100%;
	background-color: #FCE45C;
	color:#fff;
 }
 
  .cbp-fwslider nav span.cbp-fwnext a:hover
 {
	background-color: #000000;
 }
.cbp-fwslider nav span.cbp-fwprev {
    left: 0px;

}
 
.cbp-fwdots {
    position: absolute;
    bottom: 0px;
    white-space: nowrap;
    text-align: center;
    width: 100%;
		
	
}
 
.cbp-fwdots span {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #ddd;
    margin: 4px;
    border-radius: 50%;
    cursor: pointer;
}
 
.cbp-fwdots span:hover {
    background:#FCE45C;
}
 
.cbp-fwdots span.cbp-fwcurrent {

  
    transition: box-shadow 0.2s ease-in-out;
	 background:#FCE45C;
}










#content-left
{
	float:left;
	width:25%;
}

#content-right
{
	float:right;
	width:70%;
}

.content1
{

width:70%;	
}
.content
{

width:50%;	
}

@media all and (max-width: 600px) and (min-width: 50px)
{
	

#product-work li
{
max-width:100%;
}
	
	#main-content
	{
		padding:0 40px;
	}
	
	.content
{

width:70%;	
}

	
	.logo
	{
		display:none;
	}
	
	 #logo
{
	display:block;
	text-align:center;
}

a.subNavBtn
{
	margin-top:8px;
	padding:20px 0px;
	width:33.3%;
}


.site a {
    background-color: #F1F1F1;
    display: block;
    margin: 40px auto;
    padding: 20px 30px 20px 20px;
    text-decoration: none;
    width: 70%;
}

.subNavBtn
{
	width:100%;
}


.social {
list-style: none;
margin: 30px auto;
max-width: 235px;
text-align: center;
}

h2
	{
		width:100%;
	}
	
	
	.cbp-fwslider nav span
		{
			display:none;
		}
		
		
		.s1 {
	min-height: 500px;
	height:100%;
	background-color:#fce45c;

text-align:center;
}
.cbp-fwdots
	{
		bottom:0;
	}
	
	
.cbp-fwprev {
display: none !important;
}

.cbp-fwnext {
display: none !important;
}

.sTop #main-content
{
	
}
}

@media all and (max-width: 700px) and (min-width: 601px){
   
#product-work li
{
max-width:27%
}
}

@media all and (max-width: 1000px) and (min-width: 601px)
{
	
	
	#main-content
	{
		padding:0 40px;
	}
	
	h2
	{
		width:100%;
	}
	
	
	.cbp-fwslider nav span
	{
	margin-top:-100px;	
	}
	
	.cbp-fwdots
	{
		bottom:0;
	}
	
	
}





/* SOCIAL ICONS - GENERAL */
.social { list-style:none; margin:30px auto; width:475px; text-align:center; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:105px; height:101px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
 text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
 -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); display:none;
}



.work { list-style:none; margin:30px auto; width:100%; text-align:center; }
.work li { display:inline; float:left; background-repeat:no-repeat; }
.work li a { display:block; width:200px; height:200px; padding-right:10px; position:relative; text-decoration:none; }
.work li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
 text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
 -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); display:none;
}




li.delicious { background-image:url("../images/delicious.png"); }
li.digg { background-image:url("../images/digg.png"); }
li.facebook { background-image:url("../images/facebook.png"); }
li.flickr { background-image:url("../images/flickr.png"); }
li.linkedin { background-image:url("../images/linkedin.png"); }
li.reddit { background-image:url("../images/reddit.png"); }
li.rss { background-image:url("../images/rss.png"); }
li.twitter { background-image:url("../images/twitter.png"); }



/* SOCIAL ICONS - CSS3 */
#css3:hover li { opacity:0.2; }

#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
 -moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#css3 li a strong { opacity:0;
 -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
 -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }

#css3 li:hover { opacity:1; }
#css3 li:hover a strong { opacity:1; top:-10px; }





li.kraft{ background-image:url("../images/kraft-icon.png"); }
li.artscouncil { background-image:url("../images/arts-council-icon.png"); }
li.gatwick { background-image:url("../images/gatwick-icon.png"); }
li.postoffice { background-image:url("../images/postoffice-icon.png"); }
li.edf { background-image:url("../images/edf-icon.png"); }
li.amazon { background-image:url("../images/amazon-icon.png"); }
li.marquin { background-image:url("../images/marquin-icon.png"); }
li.staples { background-image:url("../images/staples-icon.png"); }
li.atom { background-image:url("../images/atom-icon.png"); }
li.martha { background-image:url("../images/martha-icon.png"); }