body {
	font-family: Ebony, Montserrat, sans-serif;
	color: #404041;
}

.italic {
	font-style: italic;
	font-weight: 300;
}

.row {
	margin: 0 auto;
	width: 100%;
	max-width: 74rem;
}

.logo {
	height: 3.5em;
	width: 3.5em;
	margin: 0 auto;
	display: block;
	fill: #404041; }

.logo-nav {
	height: 7em;
	width: 13.750em;
	/*margin:.75em 0 .75em 1.5em ;*/
	fill: #404041;
}

.logo-nav:hover {
		fill: #1DB4FF; }

p {
	font-weight: 300;
}

h1 {
    font-size: 3rem; 
}

h2 {
    font-size: 2.3125rem; 
}

h3 {
    font-size: 2rem; 
}

h4 {
    font-size: 1.6875rem; 
}

h5 {
    font-size: 1.125rem; 
    font-weight: 500;
}

h6 {
    font-size: 1rem; 
}

h1, h2, h3, h4, h5, h6 {
	color: #404041;
}

h1, h2, h3 {
	margin-bottom: 1rem;
	margin-top: 1.5rem;
	line-height: 1.2em;
}

.subheader {
	font-weight: 300;
}

input[type=text], input[type=email], input[type=number], textarea {
	border-color: #404041;
	border-width: .2em;
}

form {
	padding:3em 1em 5em 1em; }
	form h4 {
		text-align: left;
		font-weight: 500; }

textarea {
	height: 6em;
}

select {
	height: 4em;
	padding: 1em 2em;
	font-weight: 300;
	border-color: #404041;
	border-width: .2em;
	color: #404041;
	font-weight: 400;
}

input[type="submit"] {
	font-weight: 700;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
}

input[type=text]:focus, input[type=number]:focus, textarea:focus, select:focus, option:focus, input[type="submit"]:focus {
	box-shadow: none;
	outline: none;
	border: solid .2em #1a72b5; 
	font-weight: 300;
}

.button {
	font-weight: 700;
}

.button:hover, button:hover, select:hover {
	color: #1a72b5;
	border-color: #1a72b5;
	background-color: transparent; } 
		.button:focus, button:focus, div:focus {
			box-shadow: none;
			outline: none; }

/* 
==================================================================================================================== 
	NAVIGATION
==================================================================================================================== 
*/

.top-bar {
	background-color: #dbdbdb;
	padding: 0 2em 0 0;
	letter-spacing: 1.5px;
	height: 3.5rem; }
	.top-bar.expanded {
		height: 3.5rem;
		background: #f2f2f2;}
	.top-bar ul {
		margin: 0;
		padding: 0;}
	.top-bar li {
		margin: 0;
		padding: 0;
		display: inline; }
	.top-bar a {
		color: #404041;
		font-weight: bold;
		 }

.top-bar-section ul li {
	background-color: #f2f2f2;
}

.right-off-canvas-menu a {
	color: #f2f2f2;
}

.right-off-canvas-menu ul {
	margin: 0 2em;
	font-size: 1.2rem;
	list-style-type: none;
	text-decoration: none;
}

.top-bar-section li:not(.has-form) a:not(.button) {
	font-weight: 500;
	background: transparent;
}

.top-bar-section li:not(.has-form) .button a {
	background: transparent;
}
.top-bar-section li:not(.has-form) .button a:hover {
	color: #1a72b5;
}
.header-logo {
	background-image: url(../img/logo-nav.png);
	height: 1.4em;
	width: 1.4em;
}

.header-logo:hover {
	background-image: url(../img/logo-nav-h.png);
	height: 1.4em;
	width: 1.4em;
}

a:hover {
	color: #1a72b5;
}

p a:hover {
	text-decoration: underline;

}

.top-bar-section ul li > a:hover {
	background-color: #f2f2f2;
	color: #1DB4FF;
}

.top-bar-section li:not(.has-form) a:not(.button):hover {
	background: transparent;
}

.transitions {
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;	}

.vertical-center {
	top: 50%;
	position: absolute;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%); }

.vertical-align {
	display: table-cell;
	vertical-align: middle;
}

.full-width {	
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}

#feature {
	z-index: 150;
	padding: 14em 0 7.5em 0;
/*	background-image: linear-gradient(to top right, rgba(29, 180, 255, .5), rgba(220, 66, 37, .5)), url(../img/hipster-desk.jpeg);*/
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .3) 100%), url(../img/modern-desk.jpeg); 
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right center;
	height: 45em;}
	#feature img {
		height: 4em;
		width: 4em; }
		#feature img:hover {
			color: #1DB4FF;
		}

/* 
==================================================================================================================== 
	MODAL
==================================================================================================================== 
*/

.modal-container {
	position: absolute;
	/*overflow: hidden;*/
	margin:0 0 5em 0 ;
	background-color: #FFFFFF;
	left: 50%;
	top: 5em;
	width: 85%;
	max-width: 1200px;
	transform: translate(-50%, -200%);
	-webkit-transform: translate(-50%, -200%);
	-moz-transform: translate(-50%, -200%);
	-ms-transform: translate(-50%, -200%); }

.modal-bg:before {
	z-index: 900;
	content: "";
	position: fixed;
	display: none;
	background-color: rgba(0,0,0,.7);
	top: 0;
	left: 0;
	height: 100%;
	width: 100%; }

.modal-bg:target:before {
	display: block; }

.modal-bg:target .modal-container {
	z-index: 1000;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	-webkit-transition: all 0.40s ease-in-out;
	-moz-transition: all 0.40s ease-in-out;
	-ms-transition: all 0.40s ease-in-out;
	-o-transition: all 0.40s ease-in-out;	}

.close-button {
	float: right;
	height: 2.250em;
	width: 2.250em; 
	border: solid .2rem #404041;
	padding: .4em;
	fill:#404041;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.close-button:hover {
	fill: #1DB4FF;
	border-color: #1DB4FF;
}

.form-errors {
	border-color: #EA5757;
	border-style: solid;
	border-width: .3rem;
}

/* 
==================================================================================================================== 
	FORM HIDE/SHOW
==================================================================================================================== 
*/
.hide-show {
	display: none;
}
/* This covers the document and useds JS to simulate content fading in on load (y)*/
#coverall {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: absolute;
	background-color: #FFFFFF;
	z-index: 99999;
}

/* 
==================================================================================================================== 
	SERVICES
==================================================================================================================== 
*/

 .square-image {
	position: relative;
	display: inline-block;
	top: 3.5em;
	width: 6em;
	height: 6em;
	margin: .5em;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease; 
} 

.square h5 {
	position: relative;
	margin: 0 auto;
	width: 90%;
	top: 3.5em;
	font-weight: 500;
	-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 
} 

.square p {
	position: relative;
	width: 85%;
	font-size: 90%;
    margin: 0 auto;
    opacity: 0;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

.square:hover {
	border: .2em solid #1a72b5;
} .square:hover .square-image {
	top: -3.75em;
} .square:hover h5 {
	top: -2em;
} .square:hover p {
	opacity: 1;
	-webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.square {
	width: 100%;
	min-height: 19em;
	margin: 4em auto;
	background: transparent;
	border: .2em solid #ffffff;
	text-align: center;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
}	

#services {
	background: #1a72b5;
	color:#FFFFFF;
	padding: 5em 0 8em 0;
} #services h2, h5 {
	color:#FFFFFF;
}

/* 
==================================================================================================================== 
	OUR PROCESS
==================================================================================================================== 
*/

.section-default {
	padding: 2em; }
	.section-default h2 {
		color: #1a72b5;
		margin-bottom:1.5em; }

.section-spacing {
	margin: 13em 0;
}

#process {
	padding: 3em 0 6em 0;
	background: #f2f2f2;
}

#process h4 {
	text-align: justify;
}

#process img {
	display: block;
	max-width: 850px;
	max-height: 350px;
	margin: 0 auto 3em auto;
}

.image-process {
	padding: 4em 0;
	height: 40em} 
		.image-process img {
			width: 30em;
			height: 30em;} 

.dim {
	background: #f2f2f2;
}

/* 
==================================================================================================================== 
	WHO WE ARE
==================================================================================================================== 
*/

#who-we-are {
	margin-bottom: 6em; 
}

.overlay {
	background: transparent;
	border-radius: 30em;
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
}

.profile-photo {
	margin: 2em 0;
	max-width: 25em;
	border-radius: 30em;
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em; }
	.profile-photo:hover img {
		-webkit-translate:-100;
		-moz-translate:-100;
		translate:-100;
	}

/* 
==================================================================================================================== 
	VIDEO
==================================================================================================================== 
*/

.video-bg {
	position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

/* 
==================================================================================================================== 
	FOOTER
==================================================================================================================== 
*/

footer {
	background: #f2f2f2;
	height: 8em;
	padding-top: 6em;

}

/* 
==================================================================================================================== 
	TABLET
==================================================================================================================== 
*/

@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
	.image-process {
		padding: 2em 0 5em 0; }
		.image-process img {
			height:20em;
			width: 20em;
			padding: 2.5em 0 0 0;
		}

	.top-bar-section li:not(.has-form) a:not(.button) {
		font-size: 80%;
		padding: 0 1rem;
		background: transparent;
	}

	#process-icons {
		padding: 0 1em; }


	.profile-photo {
		max-width: 15em;
	}

}
/* 
==================================================================================================================== 
	MOBILE
==================================================================================================================== 
*/

@media only screen and (max-width: 40em) {
	h1 {
	    font-size: 2.3125rem; 
	}

	h2 {
	    font-size: 2rem; 
	}

	h3 {
	    font-size: 1.6875rem; 
	}

	h4 {
	    font-size: 1.5rem; 
	}

	h5 {
	    font-size: 1.5rem; 
	}

	h6 {
	    font-size: .8rem; 
	}

	.section-spacing {
		margin: 6em 0;
	}
	.image-process {
		height: 47em; }
		.image-process img {
			height: 30em;
			padding: 1em 0 0 0; }

	.square {
		border: .2em solid #1a72b5;
	} .square-image {
		top: -3.75em;
	} .square h5 {
		top: -2em;
	} .square p {
		opacity: 1;
		-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	    transform: scale(1);
	}

	#process-icons {
		padding: 0 1em; } 	
		#process-icons img {
			height: 17em;
			width: 17em; }	
		#process-icons p {
			text-align: center;
			padding: 0 0 1em 0;
			font-size: 95%; }	

	#feature {
		padding:4em 0;
		background-size: cover no-repeat;
		background-position: center center;
		height: 28em; }

	form {
		padding:1.5em .25em;
	}

	.button {
		font-size: .7rem; } 
		strong.close-button {
			font-size: .8rem;
			margin: 0 0 2em 0; }

	.profile-photo {
		max-width: 15em;
	}
}