/*
	Theme Name: Mighty Atom 2018 Theme
	Theme URI: http://twobytwo.co.uk
	Description: Bespoke theme by Two By Two Design Consultants, using HTML5 Blank WordPress Theme v1.5 by Todd Motto as a starting point
	Version: 0.2
	Author: Peter Hardy-vanDoorn
	Author URI: http://twobytwo.co.uk
	Tags: Blank, HTML5, CSS3, Custom
	
	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*
	font-family:'Neue Helvetica W01';
	font-weight: 300; // Light
	font-weight: 400; // Regular
	font-weight: 700; // Bold
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*, *:after, *:before {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:focus { outline: 0; }

/* html element 62.5% font-size for REM use */
html {
	font-size: 62.5%;
}
body {
	font: 300 17px/1.4 'Neue Helvetica W01', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #000;
}
/* clear */
.clear:before, .clear:after {
	content: ' ';
	display: table;
}
.clear:after {
	clear: both;
}
.clear {
 *zoom:1;
}
img {
	max-width: 100%;
	width: 100%;
	vertical-align: bottom;
	height: auto;
}
a {
	color: #00008e;
	text-decoration: none;
}
a:hover {
	color: #00008e;
}
a:focus {
	outline: 0;
}
a:hover, a:active {
	outline: 0;
}
input:focus {
	outline: 0;
	border: none;
}
/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* wrapper */
.wrapper {
	max-width: 1260px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding: 40px;
}
/* header */
.header { display: block; position: absolute; width: 100%; left: 0; top: 0; padding: 0; text-align: left; z-index: 10; background-color: transparent; transition: 1s ease; }

/* logo */
.logo {
	width: 252px;
	display: block;
	z-index: 102;
	position: relative;
}

nav .logo { opacity: 0; margin-bottom: 40px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }

nav .logo g {
	fill: #fff;
}

.overlay-open nav .logo { opacity: 1; }

.overlay-open header { opacity: 0; }

/* Columns */

.col-container {
	margin-right: -20px;
}
.col {
	padding-right: 20px;
	float: left;
}
.col:before, .col:after, .col-container:before, .col-container:after {
	content: ' ';
	display: table;
}
.col:after, .col-container:after {
	clear: both;
}
.col-container.css {
	margin-right: 0;
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	column-gap: 20px;
}
.col-container.css.x2 {
	-webkit-columns: 2;
	-moz-columns: 2;
	columns: 2;
}
.col-container.css.x3 {
	-webkit-columns: 3;
	-moz-columns: 3;
	columns: 3;
}
.col-container.css.x4 {
	-webkit-columns: 4;
	-moz-columns: 4;
	columns: 4;
}
.col-container.x4 .col.x1 {
	width: 25%;
}
.col-container.x4 .col.x2 {
	width: 50%;
}
.col-container.x4 .col.x3 {
	width: 75%;
}
.col-container.x4 .col.x4 {
	width: 100%;
}
.col-container.x3 .col.x1 {
	width: 33.3333%;
}
.col-container.x3 .col.x2 {
	width: 66.6666%;
}
.col-container.x3 .col.x3 {
	width: 100%;
}
.col-container.x2 .col.x1 {
	width: 50%;
}
.col-container.x2 .col.x2 {
	width: 100%;
}


/*------------------------------------*\
    NAVIGATION 
\*------------------------------------*/

/* Main Nav */

nav { position: fixed; left: 0; top: 0; width: 100%; padding: 0; z-index: 100; background-color: transparent; }

nav button#hamburger { position: absolute; right: 40px; top: 48px; z-index: 110; }

.overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.75); z-index: 101; -webkit-perspective: 1200px; perspective: 1200px; background-blend-mode: multiply; }

.overlay .wrapper { padding-top: 40px; }


/* Menu style */
.overlay .menu { text-align: left; position: relative; top: 0; height: 100%; padding-top: 168px; font-size: 20px; }
.overlay ul { list-style: none; padding: 0; margin: 0 4em 0; display: block; height: 100%; position: relative; }
.overlay ul li { display: block; }
.overlay ul li a { font-weight: 700; font-size: 50px; line-height: 1; display: block; width: 100%; padding: 0.3em 0; color: rgba(255,215,0,1); -webkit-transition: color 0.5s ease; transition: color 0.5s ease; }
.overlay ul li a:hover, .overlay ul li a:focus { color: rgba(255,215,0,.7); text-decoration: none; }

.overlay ul li ul a { font-weight: 500; font-size: 24px; }

.overlay ul li ul a:before { content: "•"; margin-right: 8px; }

/* Effects */
.overlay-open { overflow: hidden; }
.overlay { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s ease, visibility 0s 0.5s; transition: opacity 0.5s ease, visibility 0s 0.5s ease; overflow: auto; }
.overlay-open .overlay { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; }
.overlay ul { opacity: 0.4; -webkit-transform: translateY(0%) rotateY(-75deg); transform: translateY(0%) rotateY(-75deg); -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; transition: transform 0.5s ease, opacity 0.5s ease; -transform-origin: left center; transform-origin: left center; }
.overlay-open .overlay ul { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }

/*
.overlay ul { opacity: 0.4; -webkit-transform: translateY(-25%) rotateX(35deg); transform: translateY(-25%) rotateX(35deg); -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; transition: transform 0.5s ease, opacity 0.5s ease; }

.overlay-open .overlay ul { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
*/
.overlay-open .hamburger-inner, .overlay-open .hamburger-inner::before, .overlay-open .hamburger-inner::after { background-color: rgba(255,215,0,1); }

/* Scroll to top */

#scrollup { 
	width: 32px; 
	height: 32px; 
	position: fixed; 
	bottom: 40px; 
	right: 40px; 
	opacity: 0; 
	cursor: pointer; 
	-webkit-transition: all .25s ease; 
	transition: all .25s ease; 
	background-color: rgba( 0,0,0,.1 );
	text-align: center;
	border-radius: 16px;
}

#scrollup .fa-lg { vertical-align: -35%; }

body.show-scrollup #scrollup { opacity: 1; }

#scrollup:hover { 
	background-color: rgba( 0,0,0,.2 );
	color: white;
}


/*------------------------------------*\
    PAGES
\*------------------------------------*/

/* Common */

.thePage { 
	position: relative; 
	width: 100%; 
	min-height: 100vh; 
	background: none; 
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.thePage :not(header) .wrapper {
	padding: 0;
}

.thePage figure.page-image {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

.thePage .inner-wrapper {
	padding: 200px 40px 40px;
} 

.thePage .textblock {
	position: relative;
	display: block;
	top: 0;
	left: 3%;
	width: 100%;
	max-width: 44%;
	height: auto;
}

.thePage h1,
h1.page-header,
.thePage h2,
h2.page-header {
	font-size: 25px;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: .12em;
	margin-top: 0;
}

.thePage figure.page-image .figure-wrapper {
	
	padding: 0;

}

.iphone-image { display: none; }



/* Individual Pages */

/* Consulting pages */

.thePage.consulting .inner-wrapper {
	padding: 42% 0 40px;
} 

/* Work */

#work .inner-wrapper {
	padding-top: 30%;
}

#work .textblock {
	max-width: 40%;
}

/* Testimonials */

#testimonials .textblock {
	position: relative;
	display: block;
	top: 0;
	left: 0;
	max-width: 100%;
}

#testimonials .swiper-slide {
	padding-bottom: 40px;
	font-size: 22px;
	font-weight: bold;
	color: #a9a09a;
}

#testimonials .swiper-slide .attribution {
	font-size: 14px;
	font-weight: bold;
	color: #000;
}

/* Clients */

#clients {
	background-color: #f6f6f6;
}

#clients .textblock {
	position: relative;
	display: block;
	top: 0;
	left: 0;
	max-width: 100%;
}


#clients .clients-container {
	display: flex;
	position: relative;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	margin-bottom: 32px;
	padding: 0;
}

#clients .client-item {
	background-color: transparent;
	display: flex;
	position: relative;
	height: 200px;
	margin: 0;
	padding: 50px;
	justify-content: center;
	flex-basis: 25%;
	-webkit-transition: all .5s ease; transition: all .5s ease;
	filter: saturate(0);
}

html.no-flexbox #clients .clients-container {
	display: block;
	overflow: hidden;
}


html.no-flexbox #clients .client-item {
	display: block;
	width: 25%;
	float: left;
}

html.no-flexbox #clients .client-item img {
	display: block;
	max-width: 100%;
	max-height: 100%;
}


#clients .client-item:hover {
	filter: saturate(100%);
}

#clients .client-item img { width: 100%; }

/* About */

#about .inner-wrapper {
	padding-top: 25%;
}

#about .textblock {
	position: relative;
	display: block;
	top: 0;
	left: 50%;
}

#about .logo g {
	fill: #fff;
}

#about header { 

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	
}
/* Contact */

#contact {
	background-color: #f6f6f6;
}

#contact .textblock {
	position: relative;
	display: block;
	top: 0;
	left: 0;
	max-width: 100%;
	font-size: 24px;
}

#contact .textblock .phones {
	font-size: 20px;
}

#contact h1 { 
	font-size: 62px;
	text-transform: none;
	letter-spacing: 0.02em; 
}

/* Normal Pages */

body:not(.home) .inner-wrapper {
	padding: 130px 0 40px;
} 



/*------------------------------------*\
    IMAGES
\*------------------------------------*/



/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

/*------------------------------------*\
    ANIMATIONS
\*------------------------------------*/

html.cssanimations .animate-me { opacity: 0; transition: all 2s ease 0.25s; transform: translateY(5vh); }

.animate-me:nth-child(1) { transition-delay: 0.5s; }
.animate-me:nth-child(2) { transition-delay: 0.75s; }
.animate-me:nth-child(3) { transition-delay: 1s; }
.animate-me:nth-child(4) { transition-delay: 1.25s; }
.animate-me:nth-child(5) { transition-delay: 1.5s; }
.animate-me:nth-child(6) { transition-delay: 1.75s; }
.animate-me:nth-child(7) { transition-delay: 2s; }
.animate-me:nth-child(8) { transition-delay: 2.25s; }
.animate-me:nth-child(9) { transition-delay: 2.5s; }
.animate-me:nth-child(10) { transition-delay: 2.75s; }
.animate-me:nth-child(11) { transition-delay: 3s; }
.animate-me:nth-child(12) { transition-delay: 3.25s; }
.animate-me:nth-child(13) { transition-delay: 3.5s; }
.animate-me:nth-child(14) { transition-delay: 3.75s; }
.animate-me:nth-child(15) { transition-delay: 4s; }

html.csstransitions .active .animate-me { opacity: 1; transform: translateY(0); }

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (max-device-width : 479px) {
	
	
	body { font-size: 16px; }
	
	.wrapper {
		padding: 20px;
	}
	
	nav button#hamburger {
		top: 20px;
		right: 20px; 
	}
	
	#scrollup { 
		bottom: 20px; 
		right: 20px; 
	}
	.logo {
		width: 216px;
	}
	
	.overlay .wrapper {
		padding-top: 20px;
	}
	
	.overlay ul {
		margin: 0;
	}
	
	.overlay ul li ul {
		margin-left: 20px;
	}
	
	.overlay ul li a {
		font-size: 24px;
	}
	
	.overlay ul li ul a {
		font-weight: 500;
		font-size: 18px;
	}
	
	/* cols */
	
	.col { float: none; width: 100%; }
	
	.col-container.x4 .col.x1,
	.col-container.x4 .col.x2,
	.col-container.x4 .col.x3,
	.col-container.x4 .col.x4,
	.col-container.x3 .col.x1,
	.col-container.x3 .col.x2,
	.col-container.x3 .col.x3,
	.col-container.x2 .col.x1,
	.col-container.x2 .col.x2 { width: 100%; }
	
	.col-container.css,
	.col-container.css.x2, 
	.col-container.css.x3,
	.col-container.css.x4 {
		-webkit-columns: 1;
		-moz-columns: 1;
		columns: 1;
	}

	.thePage h1, .thePage h2, .thePage h3, .thePage p {
		margin-top: 0;
		margin-bottom: 8px;
	}
	
	.thePage figure.page-image {
		position: relative;
		padding: 80px 20px 0;
	}
	
	.iphone-image + .main-image { display: none; }
	
	.iphone-image { display: block; }

	.thePage .inner-wrapper {
		padding: 120px 20px 20px;
	}
	
	.thePage.consulting .inner-wrapper {
		padding: 0 20px 20px;
	}
	
	#work .inner-wrapper {
		padding-top: 0; 
	}
	
	#about {
		background-size: contain;
		background-position: bottom;
		background-color: #97b7c6;
	}
	
	#about .inner-wrapper {
		padding-top: 120px; 
		padding-bottom: 240px;
	}
	
	.thePage .textblock {
		left: 0px !important;
		max-width: 100% !important;
	}
	
	#clients .client-item {
		flex-basis: 50%;
		height: auto;
		padding: 20px;
	}
	
	#contact .textblock,
	#contact .textblock .phones {
		font-size: initial;
	}

	#contact h1 { 
		font-size: 24px;
	}

	:not(figure).animate-me { opacity: 1; transform: translateY(0); }
	
	figure.animate-me { transform: translateY(-5vh); }

}

@media only screen and (min-device-width : 320px) and (max-device-width : 360px) {

	body { font-size: 14px; }
	
	#work figure.page-image {
		padding-top: 75px;
		padding-bottom: 25px;
	}
	
}

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

	body { font-size: 16px; }
	
	.thePage {
		background-position-x: 44%;
	}
	
	#work figure.page-image {
		padding-top: 10%;
	}
	
	#work .inner-wrapper {
		padding-top: 40%;
	}
	
	#work .textblock {
		max-width: 70%;
	}

	#about .inner-wrapper {
		padding-top: 40%;
	}

	
}

@media only screen and (min-device-width : 1024px) and (max-device-width : 1279px) {

	.thePage:not(#work) figure.page-image {
		top: -5%;
	}
	
	.thePage.consulting { overflow: hidden; }
	
	.thePage.consulting .inner-wrapper {
		padding-top: 37%;
	}
	
	.thePage .textblock {
		max-width: 45%;
	}

	#work .textblock {
		max-width: 50%;
	}

	#work .inner-wrapper {
		padding-top: 31%;
	}
	

}

	
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:144dpi) {
}
/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background: #04A4CC;
	color: #FFF;
	text-shadow: none;
}
::-webkit-selection {
 background:#04A4CC;
 color:#FFF;
 text-shadow:none;
}
::-moz-selection {
 background:#04A4CC;
 color:#FFF;
 text-shadow:none;
}

/*
Text meant only for screen readers.
@see https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/
***********************************/
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute ! important;
	width: 1px;
	word-wrap: normal ! important;
}

a.post-edit-link { display: block; position: absolute; left: 0; top: 0; padding: 8px; opacity: .5; background: white; color: black; z-index: 100; transition: .5s; }

a.post-edit-link:hover { opacity: 1; }

.ie6notice { font-style: italic; font-size: 8pt; line-height: 1.1; display: none; left: 0; top: 0; width: 100%; background-color: red; color: white; padding: 10px; }

.ie6notice a, .ie6notice a:visited { color: white; text-decoration: underline; }

span.nobreak { display: inline-block; }

a[href*="linkedin"] .fa-circle { -webkit-transition: all .5s ease; transition: all .5s ease; }
a[href*="linkedin"]:hover .fa-circle { color: #0077b5; }

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin: 5px 20px 20px 0;
}
.aligncenter, div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}
.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}
.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}
a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}
a img.alignnone {
	margin: 5px 20px 20px 0;
}
a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}
a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption {
	background: #FFF;
	border: 1px solid #F0F0F0;
	max-width: 96%;
	padding: 5px 3px 10px;
	text-align: center;
}
.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}
.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	max-width: 98.5%;
	padding: 0;
	width: auto;
}
.wp-caption .wp-caption-text, .gallery-caption {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}
.sticky {
}
.bypostauthor {
}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@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;
}
}