/* Reset Styles */

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}

/*===================*/
/*=== Main Styles ===*/
/*===================*/


a, a:visited {
	color:#999;
	text-decoration:none;
}
a:hover, a:active {
	color:#000;
	text-decoration:none;
}



ul, li { list-style:none;}

/* Tools */
body { font-family: 'Droid Sans', sans-serif;}

.clear {
	clear:both;
}
.fr { float:right;}
.fl { float:left;}
.innershadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}
h2 { font-size:18px; color:#999999; margin-bottom:20px;}
h2.devidertitle { font-size:14px; text-transform:uppercase; text-align:center; border-top:1px solid #e9e9e9; margin-bottom:40px;}
.devidertitlecontainer { padding-top:10px; padding-bottom:10px; width:150px; margin-left:auto; margin-right:auto; border-left:1px solid #e9e9e9; border-right:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9;}


.required { font-size:12px; color:#666;}
#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(themes/default/arrowshover.png);
}
#preload1
{
    width: 0px;
    height: 0px;
    display: inline;
    background: url(images/mailhover.png) no-repeat -9999px -9999px;
}
#preload2
{
    width: 0px;
    height: 0px;
    display: inline;
    background: url(images/facebookhover.png) no-repeat -9999px -9999px;
}
#preload3
{
    width: 0px;
    height: 0px;
    display: inline;
    background: url(images/formhover.png) no-repeat -9999px -9999px;
}
#preload4
{
    width: 0px;
    height: 0px;
    display: inline;
    background: url(images/backtotophover.png) no-repeat -9999px -9999px;
}
#preload5
{
    width: 0px;
    height: 0px;
    display: inline;
    background: url(images/rightarrowhover.png) no-repeat -9999px -9999px;
}
#preload6
{
    width: 0px;
    height: 0px;
    display: inline;
    background: url(images/leftarrowhover.png) no-repeat -9999px -9999px;
}
#preload7
{
    width: 0px;
    height: 0px;
    display: inline;
    background: url(images/backtoourworkhover.png) no-repeat -9999px -9999px;
}
	

* { box-sizing: border-box;}

/* Header */

#header { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95); height: 150px; position: relative; width: 100%; z-index: 99; box-sizing:border-box; height:auto; }
#header.shadow {
    box-shadow: none;
}
#headercontainer { max-width: 1140px; margin:auto; width:100%; padding: 0 10px; padding-bottom:0;}
#logo { float:none; margin-top:20px; transition: opacity 0.15s linear 0s; text-align:center;}
#logo:hover { opacity:0.8;}
#logo a { display: block; }
#logo a img { width:100%; max-width: 376px; }

@media all and (min-width:700px){
	#headercontainer { padding-bottom:20px;}
	#logo { float:left;}
	#logo a { display: inline-block; }
	}	

@media all and (min-width:800px){
	#header { position: fixed; z-index: 99; top:0; left: 0; }	
	#header.shadow {
		box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
	}
	}




/* Mobile Navigation */
#mobile-nav-switch { cursor:pointer; padding:10px;}
#mobile-nav-switch img { display:block;}

#mobile-nav { display:none; background-color:#FFF;}
#mobile-nav ul li { display:block; list-style:none; text-align:center; border-bottom:1px solid #E3E3E3;}
#mobile-nav ul li:first-child { border-top:1px solid #E3E3E3;}
#mobile-nav ul li a { display:block; font-size:14px; padding:12px;}

#mobile-nav ul li.current-menu-item a, #mobile-nav ul li.current_page_item a { background-color:#e3e3e3;}

#mobile-nav ul li:last-child {}
#mobile-nav ul li.current {}
#mobile-nav ul li.current a {}
#mobile-nav ul li a:hover {color: #0594be;}

#mobile-nav ul li ul { display:none;}
#mobile-nav ul li ul li { background-color:#CACACA; text-indent:10px;}


@media all and (min-width:700px) {
	
#mobile-nav-switch { display:none;}
#mobile-nav { display:none !important;}
#caption-container p { display:block;}
}


/* Navigation */



#nav { display:none;}

@media all and (min-width:700px){
	
	#nav { text-align:right; float:right; margin-top:100px; display:block;}
}

#nav li { display: inline; padding-left:5px;}
#nav a { color:#B3B3AF; text-transform:uppercase; font-size:14px; letter-spacing:1px; -webkit-transition:all ease-in-out .3s; -moz-transition:all ease-in-out .3s; -o-transition:all ease-in-out .3s; transition:all ease-in-out .3s; }
#nav a:hover { color:#222;}
.current_page_item a { color:#222 !important;}


/* TPL Home */

#page-wrap { max-width: 1140px; box-sizing: border-box; margin:auto; padding:10px; width:100%;}
@media all and (min-width:800px){
	#page-wrap { padding:160px 10px 0;}
	}

#banner { margin-bottom:40px; }
#home-banner-container { position:relative;}
.loading { background: url(images/loadingblack.gif) no-repeat center center;}

#welcome { padding-top:40px; border-top: 1px solid #e9e9e9;}



#welcome h1 { max-width:800px; text-align:center; font-size:18px; margin-bottom:40px; margin-left:auto; margin-right:auto; line-height:24px; color:#999999; font-family: 'Source Sans Pro', sans-serif; font-weight:300;}

/* Portfolio */

#thumbnails { padding-bottom: 35px; float: left; clear: both; }
#thumbnails li { width: 314px; height: 236px; float: left; margin-right:21px; margin-bottom:21px; }
#thumbnails li, #thumbnails a { line-height: 0; position: relative; }
#thumbnails a, #thumbnails a:visited { width: 314px; height: 236px; display: block; position: relative;z-index: 1; -webkit-transition: box-shadow 0.095s linear; -moz-transition: box-shadow 0.065s linear; -o-transition: box-shadow 0.065s linear; -ms-transition: box-shadow 0.065s linear; transition: box-shadow 0.065s linear; }
/* #thumbnails a:hover { margin: -10px; width: 266px; height: 266px; position: absolute;z-index: 3; -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3); } */
#thumbnails img { width: 100%; height: 100%; float: left; }
.thirdpost_class { margin-right:0px !important;}

#view-more-work { color:#999; float:none; font-size:14px; margin: 15px 0 20px; width:100%; text-align:center;}
#view-more-work a:hover { border:1px solid #222;}
#view-more-work a { border:1px solid #E9E9E9; padding:10px 20px 10px 20px; display:block;}

@media all and (min-width:480px){
	#view-more-work { width:auto !important; float:right;  }
	}


#sayhello { text-align:center; color:#FFF; font-size:55px; margin-bottom:30px;}
#sayhello_message { text-align:center; width:680px; margin-left:auto; margin-right:auto; color:#FFF; font-size:14px; letter-spacing:1px; line-height:24px; margin-bottom:40px;}

#sayhello_icons { width: 366px; margin-left:auto; margin-right:auto;}
#sayhello_facebook { width:82px; height:82px; margin-right:60px; margin-bottom:20px; background-image:url(images/facebook.png);}
#sayhello_mail { width:82px; height:82px; margin-right:60px; background-image:url(images/mail.png);}
#sayhello_form {}

#sayhello_mail:hover {background-image:url(images/mailhover.png);}
#sayhello_facebook:hover {background-image:url(images/facebookhover.png);}



.accordian3link { display: block;
    float: right;
    height: 82px;
    width: 82px; background-image:url(images/form.png);}
.accordian3link:hover { background-image:url(images/formhover.png); }

#accordian3content { color:#FFF;}


#copyright { text-align: right; font-size:12px; padding-bottom:30px;}
#copyrightcontainer { width:984px; margin-left:auto; margin-right:auto; position:relative;}
#copyrighttext { width:984px; float:left;}

#fancybox-title-over a { color:#fff; text-decoration:underline;}
#fancybox-title-over a:hover { color:#0594BE;}

#portfolio { text-align:right; color:#CCC; font-size:14px; background-image:url(images/featuredwork.jpg); height:17px; width:960px; margin-bottom:25px;}

.ui-accordion-content { padding-top:10px; padding-bottom:20px; }
#accordion { border-bottom:1px solid #ccc;}
#accordion h3 {  padding-bottom:10px; font-size:11px;}
#accordion h3 a { color:#999;}
#accordion h3 a:hover { color:#636363;}
#accordion img { border:2px solid #666;}
#accordion img:hover { border:2px solid #222;}


#whoweare { padding-top:40px; width:960px; padding-bottom:20px;}

#whoweare_imagecontainer { margin-left:auto; margin-right:auto; width:567px;}

#aboutuscontent { color: #666666; font-size: 12px; line-height: 24px; width:567px; margin-left:auto; margin-right:auto; padding-top:30px;}
#accordian4content { padding-bottom:0px;}

#morework { border-bottom:1px solid #EDEDED; padding-bottom:20px;}
#morework img { border:2px solid #666;}

#moreworkheader { text-align:right; font-size:12px;}
#moreworkheader a { color:#CCC;}



#process { height:auto !important;}
#processtopbar { padding-bottom:20px;}
#processbarcontent { padding-bottom:0px; }
.processbarcolumn { width:100%; padding-top:20px; color:#999; margin-right:0; }
.processbarcolumn:last-of-type { margin-right:0;}
.processbar-number {
    border: 2px solid #999;
    border-radius: 50%;
    box-sizing: content-box;
    color: #999;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin-right: 5px;
    padding: 3px;
    text-align: center;
    width: 20px;
}
.processbarcolumn h2 { margin-bottom:10px; font-size:18px; color:#0594BE;}
.processbarcolumn h2 span { display:inline-block;}

.processbarcolumn p { line-height:22px; font-size:16px; font-family: 'Source Sans Pro', sans-serif; font-weight:300;}


@media all and (min-width:680px){
	.processbarcolumn { float:left; width:24%; padding-top:20px; color:#999; margin-right:1.333%; }
	#processbarcontent { padding-bottom:40px; }
	.processbarcolumn h2 span { display:none;}
	}

@media all and (min-width:900px){
	.processbarcolumn h2 span { display:inline-block;}
	}


/* Single Page */

.project-container { position:relative; margin-bottom:40px;}
.project-entry { float:none;}
.project-entry img { width:100% !important; height:auto !important;}
.project-details { width: 100%;
transition-property:margin-top;
transition-duration:0.5s;
-webkit-transition-property:margin-top;
-webkit-transition-duration:0.5s; float:left;
}
.project-details.fixed {  position: relative; margin-top:0;}
.project-details.absolute {  position: relative; bottom:-5px;}

.project-details h2 { font-size:24px; color:#0594BE;}
.project-details-disciplines { font-size:12px; margin-bottom:20px; font-family: 'Source Sans Pro', sans-serif; font-weight:300;}
.project-details-description { font-size:16px; margin-bottom:20px; font-family: 'Source Sans Pro', sans-serif; font-weight:300; letter-spacing:0.5px;}
.project-details-websitelink a { color:#0594BE; font-size:12px; font-family: 'Source Sans Pro', sans-serif; font-weight:300;}

@media all and (min-width:700px){
	.project-details { width:28%;}
	.project-entry { width:70%; float:right;}
	
	.project-details.fixed {  position:relative; margin-top:5px; float:left;}
	.project-details.absolute {  position: relative; bottom:-5px;}
	}
@media all and (min-width:800px){
	<!-- .project-details.fixed {  position:fixed; margin-top:5px;} -->
	<!-- .project-details.absolute {  position: absolute; bottom:-5px;} -->
	}	

#backtotop { transition: opacity 0.4s linear 0s; opacity:0; cursor:pointer;}
#backtotop.visible { opacity:1;}

#project-navigation {
    padding-top: 40px;
    border-top: 1px solid #e9e9e9;
    position: relative;
    text-align: center;
}
#project-navigation-previous {
    position: absolute;
    left: 0;
    top: 40px;
}
#project-navigation-next {
    position: absolute;
    right: 0;
    top: 40px;
}
#project-navigation-previous a { height:34px; width:20px; background-image:url(images/leftarrow.png); display:block;}
#project-navigation-previous a:hover { background-image:url(images/leftarrowhover.png);}
#project-navigation-next a { height:34px; width:20px; background-image:url(images/rightarrow.png); display:block;}
#project-navigation-next a:hover { background-image:url(images/rightarrowhover.png);}

#backtoourwork { display:inline-block; }
#backtoourwork a { display:block; width:37px; height:35px; background-image:url(images/backtoourwork.png);}
#backtoourwork a:hover { background-image:url(images/backtoourworkhover.png);}

.project-details-websitelink { margin-bottom:20px;}

/* Contact Page */

#contactpage-getintouch { text-align:center; margin-bottom:20px; font-family: 'Roboto Slab', serif; font-weight:bold; font-size:20px; text-transform:uppercase;}
#quickcontactform { margin-top:20px; margin-bottom:0; max-width:600px; margin-left:auto; margin-right:auto; text-align:center;}
#contactpage-contactdetails { margin-top:20px; width:300px;}
#contactcolumn1 {}
#contactcolumn2 { }
div.wpcf7-validation-errors { }
p.wysija-paragraph label { margin-bottom:5px; color:#999;}


#name input { color:#999; border-left:none; border-right:none; border-top:none; border-bottom:1px solid #999; width:100%; height:35px; margin-bottom:15px; font-family: 'Source Sans Pro', sans-serif; font-weight:300; font-size: 16px; }
#email input { color:#999; border-left:none; border-right:none; border-top:none; border-bottom:1px solid #999; width:100%; height:35px; margin-bottom:15px; font-family: 'Source Sans Pro', sans-serif; font-weight:300; font-size: 16px; }
#messageheader { margin-bottom:7px; font-size:18px; text-align:left; font-family: 'Roboto Slab', serif;}
#message textarea { margin-top: 0; color:#999; border:1px solid #999; width:100%; height:203px; min-height:203px; margin-bottom:20px; resize: none; padding:5px; font-family: 'Source Sans Pro', sans-serif; font-weight:300; font-size: 16px; }
#send {}
#send input { border:1px solid #999; padding: 5px 10px 5px 10px; font-size:18px; color:#222; background-color: transparent; float:right;}

#send input:hover {
	cursor:pointer;
	-moz-box-shadow: -3px -3px 0 0px #E0E2E2;
  	-webkit-box-shadow: -3px -3px 0 0px #E0E2E2;
  	box-shadow: -3px -3px 0 0px #E0E2E2;
	}


/* Footer */

#footer { padding-top:40px; padding-bottom:40px; color:#999; margin-top:40px; max-width:1140px; width:100%; margin-left:auto; margin-right:auto; border-top: 1px solid #e9e9e9;}
#footercontainer { width:984px; margin-left:auto; margin-right:auto; background-position: right bottom; background-repeat:no-repeat; }
.footercolumn {
    color: #fff;
    float: left;
    line-height: 20px;
    padding: 0 20px;
    width: 50%;
}

#footer-copyright { width:100%; padding-top:20px;}
#footer-logo { display: none;}

#footer-details { height:100px; border-right:1px solid #e9e9e9; }
#footer-socialmedia { height:100px; border-right:none; }
#footer-socialmedia img { margin-right:10px;}
#footer h2 { color:#404040; margin-bottom:10px;}


@media all and (min-width:680px){
	.footercolumn { width: 25%;}
	#footer-copyright { width: 25%; padding-top:0;}
	#footer-logo { display: inline-block;}
	
	#footer-socialmedia { height:100px; border-right:1px solid #e9e9e9; }
	}



a#ubdmail { background-image: url(images/ubdmail.png); display:block; height:25px; width:25px; margin-right:10px; opacity:0.5;} 
a#ubdmail:hover { opacity:1;} 
a#ubdfacebook { background-image: url(images/ubdfacebookhover.png); display:block; height:25px; width:25px; margin-right:10px; opacity:0.5;} 
a#ubdfacebook:hover { opacity:1;} 
a#ubdinstagram { background-image: url(images/ubdinstagramhover.png); display:block; height:25px; width:25px; margin-right:10px; opacity:0.5;} 
a#ubdinstagram:hover { opacity:1;} 
a#ubdlinkedin { background-image: url(images/ubdlinkedinhover.png); display:block; height:25px; width:25px; margin-right:10px; opacity:0.5;} 
a#ubdlinkedin:hover { opacity:1;} 

/* Our Work */

#ourwork-intro { text-align:center; margin-bottom:30px;}
#ourwork-intro-header { margin-bottom:20px; font-size:20px; color: #222222; text-align:center; text-transform:uppercase; font-family: 'Roboto Slab', serif; font-weight:bold;}
#ourwork-intro-content { max-width:700px; font-size:16px; color:#999; margin-left:auto; margin-right:auto; line-height:26px; font-family: 'Source Sans Pro', sans-serif; font-weight:300;}

/* Blog */

#sidebar { float:right; width:100%;}
.widget_search { margin-bottom:30px;}
.blog-container { float:none; width:100%;}
.blog-entry { margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid #e3e3e3;}
.blog-entry img {  width:100% !important; height:auto !important;}
.blog-entry p { margin-bottom:20px; color:#999; font-size:14px; line-height:24px;}
.blog-entry p a { color:#222;}
.blog-entry p a:hover { color:#0594BE;}
.post p { margin-bottom:20px; color:#999; font-size:14px; line-height:24px;}

@media all and (min-width:700px){
	.blog-container { float:left; width:69%;}
	#sidebar { float:right; width:29%;}
	}

h2.blog-entry-header { font-size:24px;}
#breadcrumbs { float:left; margin-bottom:20px; font-size:14px;}
#breadcrumbs a:hover { color:#C30;}
#meta-date { float:right; height:38px; border-left:1px solid #e7e6e6; padding-left:10px;}
#meta-date-month { float:left; margin-right:5px; padding-top:12px; font-size:12px;}
#meta-date-day { float:right; font-size:30px;}

#searchform { position:relative;}
#search-container { border:1px solid #e7e6e6; margin-bottom:40px;}
#search-container input#s { border:none; outline:none; width:100%; background-color:transparent; height: 28px; padding-left:5px; padding-right:30px; box-sizing:border-box;}
#search-container input#searchsubmit { border:none; background-color:transparent; background-image:url(images/search.png); height:30px; width:30px; position:absolute; right:0px; top:0px;}
#search-container input#searchsubmit:hover { cursor:pointer; background-color:#ebeb;}

#menu-categories li{ margin-bottom:10px; font-size:14px;}
.widget h2 { margin-bottom:20px; border-bottom:1px solid #e3e3e3; padding-bottom:20px; color:#222; text-transform:uppercase; }
.widget { margin-bottom:20px;}

h2.archive { font-size:32px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #e3e3e3; color:#0594BE; font-family: 'Roboto Slab', serif; font-weight:bold; }

a.more-link { color:#222;}
a.more-link:hover { color:#0594BE;}

.wysija-input { border: 1px solid #E3E3E3; font-size: 16px; margin-bottom: 20px; padding: 5px; max-width: 228px;}
.wysija-submit {border:none; cursor:pointer; padding: 5px 10px 5px 10px; background-color:#1E82A4; font-size:18px; color:#FFF; margin-left: 4px;
  -moz-box-shadow:    -3px -3px 0 0px #E0E2E2;
  -webkit-box-shadow: -3px -3px 0 0px #E0E2E2;
  box-shadow:         -3px -3px 0 0px #E0E2E2;
  }
.formError { z-index:1;}

.postmetadata { font-size:12px; line-height:24px;}


/* COMMENTS */

.commentlist { margin-bottom:40px;}
.comment-author { float:left;}
.comment-right { float:right; width:510px;}

.comment { padding:20px 0px; border-bottom: 1px solid #e3e3e3; }
.comment:first-child { border-top: 1px solid #e3e3e3;}

.comment-avatar {}
.comment-name { color: #0594BE;}

.comment-meta { font-size:12px; margin-bottom:20px; color:#999;}

/* Search Results*/

.search-results-header {}
.search-results-query {
	border-bottom: 1px solid #E3E3E3;
    color: #0594BE;
    font-family: 'Roboto Slab',serif;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 20px;
	}

/* Comments */

#commentform { width:500px;}
.font {
	color: #222222 !important;
    font-family: 'Roboto Slab',serif !important;
    font-size: 18px !important;
	}
input#author { color:#999; border-left:none; border-right:none; border-top:none; border-bottom:1px solid #999; width:400px; height:35px; margin-bottom:15px; font-family: 'Source Sans Pro', sans-serif; font-weight:300; font-size: 16px;}
input#email { color:#999; border-left:none; border-right:none; border-top:none; border-bottom:1px solid #999; width:400px; height:35px; margin-bottom:15px; font-family: 'Source Sans Pro', sans-serif; font-weight:300; font-size: 16px;}
#comment { margin-top: 0; color:#999; border:1px solid #999; width:488px; height:203px; min-height:203px; margin-bottom:20px; resize: none; padding:5px; font-family: 'Source Sans Pro', sans-serif; font-weight:300; font-size: 16px; }
#submit{ border:1px solid #999; padding: 5px 10px 5px 10px; font-size:18px; color:#222; background-color: transparent; float:right;}

#submit:hover {
	cursor:pointer;
	-moz-box-shadow: -3px -3px 0 0px #E0E2E2;
  	-webkit-box-shadow: -3px -3px 0 0px #E0E2E2;
  	box-shadow: -3px -3px 0 0px #E0E2E2;
	}

/* Image hover effect */
#main { }


.block {
    background-image: url("images/loader.gif");
    background-position: center center;
    background-repeat: no-repeat;
    float: left;
    height: auto;
	margin-right:0;
    margin-bottom: 2%;
    position: relative;
    width: 100%;
}

.block:nth-child(2n) { 
	margin-right:0;
}
.block:nth-child(3n) { 
    margin-right:0;
}

@media all and (min-width:480px){
	.block { width:49.5%; margin-right: 1%; margin-bottom:1%;}
	.block:nth-child(3n) {
		margin-right:1%;
	}
	.block:nth-child(2n) {
		margin-right:0;
	}
}

@media all and (min-width:700px){
	.block { width:33%; margin-right: 0.5%; margin-bottom:0.5%;}
	
	.block:nth-child(2n) {
		margin-right:0.5%;
	}
	.block:nth-child(3n) {
		margin-right:0;
	}
}


a.zoom { display:block; }
.block img { width:100%; height:auto; display:block;}
.zoomOverlay { position:absolute; background-color:#222222; background-image:url(images/ubdzoom.png); background-position:center; background-repeat:no-repeat; top:0px; opacity:0; display:none; width:100%; height:100%; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; }
.zoomOverlay:hover { opacity:0.7; }  



/* NAV ICON ANIMATION */

#nav-icon3 {
  width: 50px;
  height: 40px;
  position: relative;
  margin: 5px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 6px;
  width: 100%;
  background: #222;
  
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 16px;
}

#nav-icon3 span:nth-child(4) {
  top: 32px;
}

#nav-icon3.open span:nth-child(1) {
  top: 16px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 16px;
  width: 0%;
  left: 50%;
}