/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

p {margin:0; padding-bottom:20px;}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

.textleft {
	text-align:left;
}

.textright {
	text-align:right;
}


/* ===== ScrollMagic Class ==============================================
   Author: Petr Tichy - ihatetomatoes.net
   
   box-shadow: 0 0 0 15px white inset;
   
   ========================================================================== */


body {
    font: 16px/1.5 Helvetica, Helvetica Neue, Arial;
}

.wrapper {
    width: 90%;
    margin: 0 5%;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* =Main */
#intro {
    height: 100vh;
	background-image:url(../img/intro-img-bg.jpg); background-size:cover;
	background-color:#333;
/* background: radial-gradient(circle, #74A6EE 0%, #485CB2 100%);*/
    text-align: center;
    color: #fff;
}
.wrapper {
	margin:0 auto;
	width:85%;
	height:100%;
	text-align:center;

}

/* The Overlay (background) */
.nav-overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 100%;
    width: 0%;
    position: fixed; /* Stay in place */
    z-index: 201; /* Sit on top */
    left: 0;
    top: 0;
	opacity:1;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.nav-overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
	margin:0 auto;
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.nav-overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
	font-family: 'CenturyGothicBold';
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.nav-overlay a:hover, .overlay a:focus {
    color: #aad048;
}

/* Position the close button (top right corner) */
.nav-overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
	.nav-overlay-content {top:10%; margin-top:0px;  }
    .nav-overlay a {font-size: 20px; line-height:21px;}
    .nav-overlay .closebtn {
        font-size: 48px;
        top: 10px;
        right: 35px;
    }
}

#site-details-wrap {
	position: relative;
	height:auto;
	width:100%;
	top: 10%;
	display:block;
}

.type-text-wrap {
	position: relative;
	height:auto;
	width:480px;
	float:left;
	display:block;
	text-align:left;
	font-size:12px;
	line-height:14px;
}

.sitedetails {
	position: absolute;
	z-index:2;
	height:auto;
	width:260px;
	float:left;
	display:block;
	text-align:left;
	line-height:20px;
	opacity:1;
	transition: all 0.5s ease-in;

}

.opactiy-none {
	opacity:0;
}



.start-nav {
	position: absolute;
	height:auto;
	width:85%;overflow:hidden;
	float:right;
	display:block;
	text-align:right;
	font-size:14px;
	font-family: 'CenturyGothicRegular';
	color:#eeeeee;
    transition: all 0.5s ease-in;	
	opacity: 1;
	top:10%;
	z-index:2;

}
.start-nav-link {
	
	font-size:14px;
	font-family: 'CenturyGothicRegular';
	color:#eeeeee;
    transition: all 0.2s ease-in;	
	
}
a.start-nav-link:link { color:#eeeeee; text-decoration:none;}
a.start-nav-link:visited { color:#eeeeee; text-decoration:none;}
a.start-nav-link:hover { color:#aad048; text-decoration:underline;}
a.start-nav-link:active { color:#aad048; text-decoration:underline;}

.start-nav.fadeup {
	top:7%;
    opacity: 0;
    /*transform: translateY(0);*/
	transition: all 0.2s ease-in-out;
}

.clicker { cursor: pointer;}

.sitedetails p {
	margin: 0;
	padding: 0;
}

.sitedetailsbold {
	font-weight:bold;	
}

.sitedetailsbold a {
	color:#aad048;
	text-decoration:underline;
}

#intro .content {
    position: absolute;
	width:85%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	
}

#top-logo { margin:0 auto; width:27%; visibility:hidden;}
#top-design {margin:0 auto; width:100%; visibility:hidden;}

.designs-container {
	position: absolute;
	width:95%;
	top: 600px;
    left: 50%;
    transform: translate(-50%, -50%);
}
.fixed-ratio-resize { /* basic responsive img */
	max-width: 100%;
	height: auto;
	width: auto\9; /* IE8 */
}

#nav-holder {
	position:fixed;
	background-color:#333;
	height: 80px;
	width: 100%;
	z-index: 200;
	opacity: 0.5;
	top: -80px;
    /*transform: translateY(50px);*/
    transition: all 0.5s ease-in;	
	box-shadow: 0px 2px 10px #222222;
}

#nav-holder.dropin {
	top:0px;
    opacity: 1;
    /*transform: translateY(0);*/
	transition: all 0.5s ease-in-out;
}

.nav-wrap {
	width:85%;
	margin:0 auto;
	position:relative;
}

.nav-logo {
	float:left;
	width:200px;
}

.nav-links {
	vertical-align: middle;
	line-height: 80px;
	width:auto;overflow:hidden;
	text-align:right;
	color:#fff;
	font-size:14px;
	display:block;
	font-family: 'CenturyGothicRegular';
}

.nav-icon {
	width:auto;overflow:hidden;
	text-align:right;
	line-height:80px;
	display:none;
}

#cta {
	background-color:#f2f2f2;
	position:relative;
	padding-top:20px;
	padding-bottom:20px;
	min-height: 580px;
}

.cta-img {width:243px;	/*height:290px;*/	margin:0 auto;}


#cta-splitter {position:relative; float:left; width:50%;}

.cta-wrap { position:relative; width:50%; float:left; min-height:580px; text-align:center; padding-top:35px;}
.cta-wrap:hover { background-color: rgba(178, 208, 72, 0.3);}

.cta-link {position:absolute; width:100%; height:100%;  top:0; left:0; z-index:2; display:none;}
.cta-wrap:hover .cta-link {display:block;}



.cta-img-wrap {width:243px; height:243px; position:relative; margin:0 auto; opacity:0; top:20px; /*transform: translateY(50px);*/ transition: all 0.3s ease-in; padding-bottom:10px;}

.cta-web-off { position:absolute; width:100%; z-index:0;}
.cta-web-on { position:absolute; width:100%; z-index:1; opacity: 0;
	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;}
.cta-wrap:hover .cta-web-on {opacity: 1;}

.cta-graphics-off { position:absolute; width:100%; z-index:0;}
.cta-graphics-on { position:absolute; width:100%; z-index:1; opacity: 0;
	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;}
.cta-wrap:hover .cta-graphics-on {opacity: 1;}

.cta-more-off { position:absolute; width:100%; z-index:0;}
.cta-more-on { position:absolute; width:100%; z-index:1; opacity: 0;
	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;}
.cta-wrap:hover .cta-more-on {opacity: 1;}

.cta-text {
	position:relative;
	width:85%;
	margin:0 auto;
	padding-top:15px;
	padding-bottom:35px;
	text-align:left;
	color: #333333;
}

.cta-text:hover .cta-link {display:block;}

.cta-heading { position:relative; margin: 0; padding: 0; font-size: 42px; letter-spacing:0px; color: #333333; font-family: 'CenturyGothicRegular'; }

#dyk {
	background-color:#333333;
	background-image:url(../img/magazine-layout-bg.jpg);
	background-position:center;
	background-size:cover;
	position:relative;
	height:400px;
	padding-top:20px;
	padding-bottom:20px;
	color:#ffffff;
	text-align:center;
}

.dyk-heading { margin: 0; padding: 0; font-size: 28px; letter-spacing:0px; color: #ffffff; font-family: 'CenturyGothicRegular'; }
.dyk-heading-bold { margin: 0; padding: 0; font-size: 28px; letter-spacing:0px; color: #ffffff; font-family: 'CenturyGothicBold'; }
.dyk-heading-bold a {
	text-decoration:underline;
	color:#ffffff;
}

#dyk-red {
	background-color:#f13434;
	background-image:url(../img/office-bg.jpg);
	background-position:center;
	background-size:cover;
	position:relative;
	height:400px;
	padding-top:20px;
	padding-bottom:20px;
	color:#ffffff;
	text-align:center;
}

.dyk-heading { margin: 0; padding: 0; font-size: 28px; letter-spacing:0px; color: #ffffff; font-family: 'CenturyGothicRegular'; }
.dyk-heading-bold { margin: 0; padding: 0; font-size: 28px; letter-spacing:0px; color: #ffffff; font-family: 'CenturyGothicBold'; }
.dyk-heading-bold a {
	text-decoration:underline;
	color:#ffffff;
}

#subpage {
	background-color:#ffffff;
	position:relative;
	padding-top:50px;
	padding-bottom:50px;
}

.sub-wrap {
	width:80%; margin:0 auto;
	
}


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

.content100 {
	width:100%;
	float:left;
	padding:15px;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

.content75 {
	width:75%;
	float:left;
	padding:15px;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

.content60 {
	width:60%;
	float:left;
	padding:15px;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
	
.content50 {
	width:50%;
	float:left;
	padding:15px;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

.content40 {
	width:40%;
	float:left;
	padding:15px;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

.content33 {
	width:33.3333%;
	float:left;
	padding:15px;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
	
.content25 {
	width:25%;
	float:left;
	padding:15px;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

.content-header1 { margin: 0; padding-bottom: 10px; font-size: 70px; line-height:70px; letter-spacing:0px; color: #333333; font-family: 'CenturyGothicBold'; }
.content-header2 { margin: 0; padding-top: 10px; padding-bottom:18px; font-size: 30px; line-height:35px; letter-spacing:0px; color: #333333; font-family: 'CenturyGothicRegular'; }
.content-header3 { margin: 0; padding: 0; font-size: 20px; letter-spacing:0px; color: #333333; font-family: 'CenturyGothicRegular'; }

h1 { margin: 0; padding-bottom: 10px; font-size: 70px; line-height:70px; letter-spacing:0px; color: #333333; font-family: 'CenturyGothicBold'; }
h2 { margin: 0; padding-top: 10px; padding-bottom:18px; font-size: 30px; line-height:35px; letter-spacing:0px; color: #333333; font-family: 'CenturyGothicRegular'; }
h3 { margin: 0; padding: 0; font-size: 20px; letter-spacing:0px; color: #333333; font-family: 'CenturyGothicRegular'; }

#subpageheader {
	background-color:#ffffff;
	background-image:url(../img/canvas-bg.jpg); 
	background-position:center;
	background-size:cover;
	position:relative;
	height:150px;
	text-align:center;
}

.subpageheader-1 { margin: 0; padding: 0; font-size: 90px; line-height:200px; letter-spacing:0px; color: #333333; font-family: 'CenturyGothicRegular'; }

.link-out {
	width:100px; height:100px; padding-bottom:15px;
}

a.default:link {color: #666; text-decoration:underline;}
a.default:visited { color: #666; text-decoration:underline;}
a.default:hover {color: #000; text-decoration:underline;}
a.default:active { color: #000; text-decoration:underline;}

#graphics {
	background-color:#ffffff;
	background-image:url(../img/canvas-bg.jpg); 
	background-position:center;
	background-size:cover;
	position:relative;
	padding-top:70px;
	padding-bottom:90px;
}

#website {
	background-color:#ffffff;
	background-image:url(../img/websites-bg.png);
	position:relative;
	padding-top:70px;
	padding-bottom:90px;
}

#contact {
	background-image:url(../img/contact-bg.jpg); background-size:cover;
	position:relative;
	padding-top:70px;
	padding-bottom:60px;
	text-align:center;
}

#contact-line {
	width:80%; margin:0 auto;
	height:1px;
	margin-top:70px;
	margin-bottom:20px;
	background-color:#333;
}

#footer {
	background-color:#333;
	position:relative;
	padding-top:10px;
	padding-bottom:10px;
}

.footer-wrap {
	width:80%; margin:0 auto;
	font-size:12px;
}

.footer-details-75 {
	color:#fff;
	width:75%;
	float:left;
	padding:10px;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

.footer-link {
	
	font-size:12px;
	color:#fff;
    transition: all 0.2s ease-in;	
	
}

a.footer-link:link {font-size:12px; color: #fff; text-decoration:none;}
a.footer-link:visited { font-size:12px; color: #fff; text-decoration:none;}
a.footer-link:hover {font-size:12px; color: #aad048; text-decoration:underline;}
a.footer-link:active { font-size:12px; color: #aad048; text-decoration:underline;}

a.general-link:link { color: #222;text-decoration:none;}
a.general-link:visited { color: #222;text-decoration:none;}
a.general-link:hover { color: #222;text-decoration:underline;}
a.general-link:active { color: #222; text-decoration:underline;}

.footer-details-25 {
	color:#fff;
	width:25%;
	float:left;
	padding:10px;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}



.contact-footer-wrap {
	width:80%; margin:0 auto;
}

.contact-footer-details {
	width:33.3333%;
	float:left;
	padding:5px;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}




#form-outer {
	width:600px;
	margin:0 auto;
	padding-top:15px;
}

.form-group {
	width:100%;
	padding-bottom:20px;
	text-align:left;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

.button {
	width:100%;
	height:40px;
	background-color:#ffffff;
	color:#333;
	font-weight:bold;
	padding:10px;
	border-radius:3px;
	border:none;
	text-align:center;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
	transition:  .25s ease-in-out;
   -moz-transition:  .25s ease-in-out;
   -webkit-transition:  .25s ease-in-out;
}

.button:hover {
	background-color:#ccc;
	border:#666 solid 1px;


}

/*.form-errors {
	display:block;
	width:100%;
	color:#C00;
	font-size:12px;
	margin-bottom:10px;
	margin-top:2px;
	border:0px;
	box-sizing:border-box;
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box;
} */

form .error {
	color:#ff0000;

	
}

.form-style {
	width:100%;
	height:40px;
	
	background-color:#333;
	color:#fff;
	border-radius:3px;
	border:0px;
	padding-left:10px;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

.form-style-textarea {
	width:100%;
	height:80px;
	background-color:#333;
	color:#fff;
	border-radius:3px;
	border:0px;
	padding:10px;
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #999;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #999;
}

.heading-1 { margin: 0; padding: 0; font-size: 80px; line-height:90px; letter-spacing:0px; color: #333333; font-family: 'CenturyGothicRegular'; }
.heading-2 { margin: 0; padding: 0; font-size: 80px; line-height:90px; letter-spacing:0px; color: #aad048; font-family: 'CenturyGothicRegular'; }
.heading-3 { margin: 0; padding: 0; font-size: 38px; letter-spacing:0px; color: #333333; font-family: 'CenturyGothicRegular'; }
.heading-4 { margin: 0; padding: 0; font-size: 38px; letter-spacing:0px; line-height:38px; color: #aad048; font-family: 'CenturyGothicRegular'; }
.heading-5 { margin: 0; padding: 0; font-size: 30px; letter-spacing:0px; color: #333333; font-family: 'CenturyGothicBold'; }
.footer-text {font-size:15px; color: #333333;}

a.footer-text:link {font-size:15px; color: #333333; text-decoration:none;}
a.footer-text:visited { font-size:15px; color: #333333; text-decoration:none;}
a.footer-text:hover {font-size:15px; color: #333333; text-decoration:underline;}
a.footer-text:active { font-size:15px; color: #333333; text-decoration:underline;}

.samples-link { color: #ffffff; font-family: 'CenturyGothicBold'; text-decoration:none; }

.samples-wrap {width:100%; position:relative; padding-top:25px; padding-bottom:15px;}
.samples {width:33.33333%; position:relative; height:310px; float:left; padding:4px; 
	box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */}
.samples-content {width:100%; height:100%; position:relative;}
.overlay {position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; background-color:#333333; transition: opacity .25s ease-in-out;}
.samples-text {font-size: 16px; color: #fff; width:90%; position: absolute; top: 50%; left: 50%; opacity: 0; transition: opacity .25s ease-in-out; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center;}
.samples-category {font-size: 12px;}
.samples-linkbox {
	margin:0 auto;
	padding-top:10px; 
  	width: 50px;
 	height: 50px;}



.samples:hover .overlay { opacity:0.95; }
.samples:hover .samples-text { opacity:1; }

.cta-img-wrap.fade-in {
    opacity: 1;
	top:0px;
    /*transform: translateY(0);*/
}

.project {
    text-align: center;
    padding: 200px 0;
    border-bottom: 1px #ebebeb solid;
    opacity: 0;
    /*transform: translateY(50px);*/
    transition: all 1s ease-out;
}
.project.fade-in {
    opacity: 1;
    /*transform: translateY(0);*/
}
.project img {
    width: 180px;
    height: 180px;
}
.project p {
    max-width: 300px;
    margin: 0 auto;
    color: #294D67;
}
#project01 h2 {
    color: #3DB3CE;
}
#project02 h2 {
    color: #75C695;
}
#project03 h2 {
    color: #F5876F;
}
#main {
    position: relative;
    background-color: #FFF;
}
.bcg-parallax {
    background: url('../img/img_background_4.jpg') no-repeat;
    background-size: cover;
	background-position:center;
	padding-top:30px;
	width:100%;
	max-width:100%;
	max-height:350px;
    color: #fff;
    background-color: #000;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bcg {
    background: url('../img/latest-work-01.png') no-repeat;
    background-size: cover;
	background-position:center;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    z-index: 1;
    opacity: 1;
}

#nav-starter {width:100%;}

#bg {
  position: relative;  
  width: 100%; 
  max-width: 100%;
  max-height:500px;
  background-color:#333;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100%;
  
}
#cycler{position:relative;width:100%;max-width:100%;max-height:572px; overflow:hidden;}
#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}

/*#latest-work-PBPC {
  position: relative;  
  width: 100%; 
  height:572px;
  background-color:#c61818;
  background-image:url(../img/latest-work-PBPC.jpg);
  background-size: cover;
  background-position:center;
  background-repeat:no-repeat;
}*/

#latest-work {
  position: relative;  
  width: 100%; 
  height:572px;
  background-color:#5a2f7e;
  background-image:url(../img/latest-work-HHHH.jpg);
  background-size: cover;
  background-position:center;
  background-repeat:no-repeat;
}

.latest-work-wrapper {
	margin:0 auto;
	width:85%;
	height:100%;
}
.latest-work-text {width:550px; position: relative; top: 50%; transform: translateY(-50%); }

.lw-heading-1 { margin: 0; padding: 0; font-size: 33px; line-height:33px; letter-spacing:0px; color: #ffffff; font-family: 'CenturyGothicRegular'; }
.lw-heading-2 { margin: 0; padding: 0; font-size: 67px; line-height:67px; letter-spacing:0px; color: #ffffff; font-family: 'CenturyGothicBold'; }
.lw-text {font-size:20px; color: #ffffff; line-height:24px; padding-top:10px;}
.lw-text-italic {font-size:14px; color: #ffffff; font-style:italic; padding-top:10px;}
.lw-icon {width:90px; height:90px; padding-top:10px;}

.white-heading { margin: 0; padding: 0; font-size: 40px; line-height:50px; letter-spacing:0px; color: #ffffff; font-family: 'CenturyGothicRegular'; }
.hmmm {
	font-family: 'Kalam';
	font-size:160px;
	line-height:170px;
	color:#ffffff;
	text-align:center;
}

.hmmcontent {
    position: absolute;
	width:85%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	
}

.content-wrapper {
    width: 90%;
    margin: 0 auto;
    max-width: 1140px;
    position: relative;
    z-index: 2;
}


/* =Footer */
.footer-container {
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    background-color: #06060d; 
}
.footer-container .wrapper {
    width: 80%;
    max-width: none;
    margin: 0 10%; 
}
.footer-container h3 {
    margin: 0;
    padding: 20px 0;
    font-weight: normal; 
}
.footer-container a {
    color: rgba(255, 255, 255, 0.5); 
}


.social-container {
	width:80px;
	height:80px;
}

.facebook-logo {
	width:60px;
	height:60px;
	margin:10px;
	background-image:url(../img/facebook-logo.svg);
	background-size:contain;
	opacity: 0.8;
	transition: all .15s ease-in-out;
   -moz-transition: all .15s ease-in-out;
   -webkit-transition: all .15s ease-in-out;
}
.facebook-logo:hover {
	opacity: 1;
	width:70px;
	height:70px;
	margin:5px;
}

.twitter-logo {
	width:60px;
	height:60px;
	margin:10px;
	background-image:url(../img/twitter-logo.svg);
	background-size:contain;
	opacity: 0.8;
	transition: all .15s ease-in-out;
   -moz-transition: all .15s ease-in-out;
   -webkit-transition: all .15s ease-in-out;
}
.twitter-logo:hover {
	opacity: 1;
	width:70px;
	height:70px;
	margin:5px;
}

.youtube-logo {
	width:60px;
	height:60px;
	margin:10px;
	background-image:url(../img/youtube-logo.svg);
	background-size:contain;
	opacity: 0.8;
	transition: all .15s ease-in-out;
   -moz-transition: all .15s ease-in-out;
   -webkit-transition: all .15s ease-in-out;
}
.youtube-logo:hover {
	opacity: 1;
	width:70px;
	height:70px;
	margin:5px;
}



/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (max-width: 1600px) {
#latest-work { height:450px; background-position:50px;}	
}
   
   
@media only screen and (max-width: 1400px) {
	
.samples {width:50%;}
.cta-wrap { width:50%; min-height:480px;}
#cta-splitter {width:100%;}
#dyk-red { background-image:url(../img/office-bg-middle.jpg); }
#latest-work { height:450px; }

}

@media only screen and (max-width: 1200px) {
	
#latest-work { height:400px; background-size: cover; background-position: left; background-repeat:no-repeat; }
.lw-heading-1 { font-size: 28px; line-height:28px;}
.lw-heading-2 { font-size: 63px; line-height:63px; }
.lw-text {font-size:15px; line-height:19px; width:450px;}
.lw-text-italic {font-size:12px; }
.lw-icon {width:70px; height:70px; padding-top:10px;}
.content33 {width:50%;}
}


@media only screen and (max-width: 959px) {
.nav-links {display:none;}
.start-nav {display:none;}
.nav-icon { display:block; }
#nav-holder {top: 0px; opacity:1;}
.contact-footer-details { width:100%; text-align:center;}

#site-details-wrap { text-align:center; margin:0 auto; padding-top:40px;}
.sitedetails {width:100%; margin:0 auto;}
.sitedetails p { margin: 0 auto; text-align:center;}
.sitedetailsbold { text-align:center;}
.logo-spacing {margin-top:20px;}
#intro .content {top: 58%;}
.jph-logo{width:50%; margin-bottom:10px;}
#top-logo { width:50%; margin-bottom:10px;}
.480-footer {width:50%;}
#dyk { background-image:url(../img/magazine-layout-bg-small.jpg); }
#latest-work { height:350px; background-size: cover; background-position: left; background-repeat:no-repeat;}	

.content75 {width:100%;}

.content60 {width:100%;}
	
.content50 {width:100%;}

.content40 {width:100%;}


	
.content25 {width:100%;}

.content-header1 { font-size: 70px; line-height:70px; }
.content-header2 { font-size: 30px; line-height:35px; }
.content-header3 { font-size: 18px; }

h1 { font-size: 70px; line-height:70px; }
h2 { font-size: 30px; line-height:35px; }
h3 { font-size: 18px; }

}

@media only screen and (max-width: 767px) {

.samples {width:100%;}	
.cta-wrap { width:100%; min-height:480px;}
#form-outer { width:80%;}	
.dyk-heading { font-size: 20px; }
.dyk-heading-bold { font-size: 20px; }
.heading-1 { font-size: 40px; line-height:40px; }
.heading-2 { font-size: 40px; line-height:40px; }
.heading-3 { font-size: 26px; }

.latest-work-text {width:100%;}
.lw-heading-1 { font-size: 24px; line-height:24px;}
.lw-heading-2 { font-size: 50px; line-height:50px; }
.lw-text {font-size:14px; line-height:18px; width:80%;}
.lw-text-italic {font-size:12px; }
.lw-icon {width:70px; height:70px; padding-top:10px;}
.content33 {width:100%;}
.white-heading {font-size: 30px; line-height:40px;}
.hmmm {font-size:110px;line-height:120px;}
}


@media only screen and (max-width: 480px) {

.contact-footer-details { width:100%; text-align:center;}
#intro .content{ top:75%;}
.samples {height:210px;}
.heading-3 { font-size: 26px; }
.heading-4 { font-size: 24px; line-height:24px; }	
.nav-overlay a { font-size: 24px; }
.samples-linkbox {width:30px; height:30px;}
.cta-img-wrap {width:185px; height:185px;}
#dyk-red { height:225px;}
.dyk-heading { font-size: 18px; line-height:18px; }
.dyk-heading-bold { font-size: 18px; line-height:18px; }
#bg { display:none;}

.lw-heading-1 { font-size: 20px; line-height:20px;}
.lw-heading-2 { font-size: 40px; line-height:40px; }
.lw-text {font-size:12px; line-height:16px; width:100%;}
.content-header1 { font-size: 50px; line-height:50px; }
.content-header2 { font-size: 25px; line-height:30px; }
.link-out {	width:60px; height:60px; padding-bottom:15px;}
.hmmm {font-size:90px;line-height:100px;}
.white-heading {font-size: 20px; line-height:30px;}

h1 { font-size: 50px; line-height:50px; }
h2 { font-size: 25px; line-height:30px; }
}

@media screen and (max-height: 450px) {

#intro .content{ display:none;}
#site-details-wrap { padding-top:90px;}	
#top-logo {display:none;}
#top-design {display:none;}
}

@media only screen and (min-width: 768px) {
    /* =General */
	

    /* =Header */

    /* =Footer */
}

@media only screen and (min-width: 1140px) {
    /* =General */
	
	

    /* =Header */

    /* =Footer */
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}