/*
Theme Name: 	The Galleon Agency
Theme URI: 		http://viewportindustries.com/products/starkers
Description: 	Developed for The Galleon Agency based of starkers
Version: 		4.0
Author: 		*
Author URI: 	http://viewportindustries.com
Tags: 			starkers, naked, clean, basic
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#ededed;
						padding: 0;
						margin: 0;
						height: 100%; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/



body,
input,
textarea 			{ font-family: 'Open Sans', sans-serif;
/* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

h1 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);

@font-face
{
font-family: Justus;
src: url(images/Justus-Versalitas.ttf);
}

@font-face
{
font-family: Avenir;
src: url(images/Avenir_Next.ttf);
}

header {
	position: fixed;
	display: inline-block;
	background: black;
	width: 100%;
	z-index: 2;
}

a {
	text-decoration: none;
	color: #d7be51;
}

/* NAVIGATIONAL ****************************************/
.menu {
	float: right;
}


.menu li {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	display: inline-block;
	padding-left: 1.2em;
	padding-top: .5em;
}

.menu a {
	text-decoration: none;
	font-size: 1em;
	vertical-align: middle;
	color: white;
}

.menu a:hover {
	color: #d7be51; 
}

.logo {
	display: inline-block;
	float:left;
	/*padding: .1em;*/
}

.logo img {
	width: 45px;
}

/* NAVIGATIONAL END */
.empty { /* for intro image to scale right */
	height: 75px;
}

.white_container {
	max-width: 1200px;
	margin: 0 auto;
	background-color: white;
	top: -40px;
	border-top: solid 15px #00c0ff;
	padding-bottom: 20px;
}

#intro {
	text-align: center;
	background-image: url('images/backgroundPhotos_justinprymowicz.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
}

#intro img {
	display: block;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

hr {
    float: left;
    height: 1px;
    width: 100%;
    border: 0;
    border-top: 2px dotted #ccc;
    margin-bottom: 0;
}

footer {
	font-family: 'Open Sans', sans-serif;
	color: #4e4e56;
	padding: 20px 0;
	display: block;
	width: 100%;
	overflow: auto;

}

footer p {
	float:left;
	line-height: 100px;
}

.social {
	float: right;
	line-height: 100px;
}

.social img {
	padding-left: 10px;
}

.wrap {
	max-width: 1150px;
	margin: 0 auto;
	padding: 0 20px 0;
}

.definition {
	font-family: 'Open Sans', sans-serif;
	color: black;
	font-weight: 300;
	line-height: 1.8em;
	font-size: 1.2em;
	margin: 0 auto;
	padding-top: 2em;
}

.definition p span {
	font-size: 60px;
	line-height: 60px;
	font-weight: 600;
	color: black;
}

.empty_2 {
	height: 50px;
	width: 100%;
}

.tittle {
	border-top: solid 1px black;
	text-align: center;
}

.tittle p {
	display: inline-block;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 25px;
	padding: 5px 10px;
	color: #00c0ff;
	background-color: black;
}

/* this has to come after tittle's text-align */
.left {
	text-align: left;
}

.center {
	text-align: center;
}

.center p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 1em;
	line-height: 1.6em;
	text-align: center;
	padding: 15px 0;
}


/* CLIENT LOGOs ******************************************/
.clients {
	overflow: hidden;
	padding-top: 25px;
}

.clients .box {
	display: inline-block;
	float: left;
	height: 200px;
	line-height: 200px;
	width: 33.3%;
	text-align: center;	
}


.clients .box img {
	max-width: 100%;
	max-height: 100%;	
}

.clients ul li{
	display: inline-block;
	width: 33.3%;
	text-align: center;
}

/* DAIMOND SVG GRID **************************************/

.svg_container {
	top: -120px;
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 150%;
	vertical-align: middle;
	overflow: hidden;
}

/* DAIMOND GRID END **************************************/


.about_us {
	padding: 20px 0;
	margin-top: 4px;
	margin-bottom: 35px;
}

.about_us p /*.post_text p*/ {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	text-align: center;
	color: black;
	font-size: 1em;
	line-height: 1.6em;
	padding: 15px 25px;
}

.leadership {
	overflow: auto;
	max-width: 600px;
	margin: 0 auto;
}

.leader {
	overflow: hidden;
	padding-top: 20px;
}

.name {
	display: inline-block;
	font-size: 1.2em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	text-align: center;
	color: black;
	padding: 5px 10px;
	border: solid 2px #d7be51;
}


.bio {
	/*max-width: 500px;*/
	/*float: left;*/
}

.bio p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	color: black;
	font-size: 1em;
	line-height: 1.6em;
	padding-bottom: 8px;
}

.leader img {
	max-width: 100%;
	/*float: right;*/
	text-align: center;
	border-radius: 150px;
}

/* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
* https://github.com/christophery/pushy/
* by Christopher Yee */
.pushy {
	position:fixed;
	width:200px;
	height:100%;
	top:0;
	right:0;
	z-index:9999;
	background:#333332;
	font-size:0.9em;
	font-weight:bold;
	-webkit-box-shadow:inset 10px 0 6px -9px rgba(0,0,0,0.7);
	-moz-box-shadow:inset 10px 0 6px -9px rgba(0,0,0,0.7);
	box-shadow:inset 10px 0 6px -9px rgba(0,0,0,0.7);
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}

.pushy ul {
	padding:0;
	list-style:none
}

.pushy a {
	display:block;
	color:#b3b3b1;
	padding:15px 30px;
	border-bottom:1px solid rgba(0,0,0,0.1);
	border-top:1px solid rgba(255,255,255,0.1);
	text-decoration:none
}

.pushy a:hover {
	/*background:#d7be51;*/
	color:#eee
}

.pushy-left {
	-webkit-transform:translate3d(-200px, 0, 0);
	-moz-transform:translate3d(-200px, 0, 0);
	-ms-transform:translate3d(-200px, 0, 0);
	-o-transform:translate3d(-200px, 0, 0);
	transform:translate3d(-200px, 0, 0)
}

.pushy-right {
	-webkit-transform:translate3d(200px, 0, 0);
	-moz-transform:translate3d(200px, 0, 0);
	-ms-transform:translate3d(200px, 0, 0);
	-o-transform:translate3d(200px, 0, 0);
	transform:translate3d(200px, 0, 0)
}

.pushy-open {
	-webkit-transform:translate3d(0, 0, 0);
	-moz-transform:translate3d(0, 0, 0);
	-ms-transform:translate3d(0, 0, 0);
	-o-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0)
} 

.container-push,.push-push {
	webkit-transform:translate3d(-200px, 0, 0);
	-moz-transform:translate3d(-200px, 0, 0);
	-ms-transform:translate3d(-200px, 0, 0);
	-o-transform:translate3d(-200px, 0, 0);
	transform:translate3d(-200px, 0, 0)
}

/* Menu Transitions */

.pushy,#container,.push {
	-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
	-moz-transition:-moz-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
	-o-transition:-o-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
	transition:transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99)
}

.site-overlay {
	display:none
}

.pushy-active .site-overlay {
	display:block;
	position:fixed;
	top:0;
	right:200px;
	bottom:0;
	left:0px;
	z-index:9999
}



/* SINGLE.PHP **************************************************************************/

.single_description {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2em;
	line-height: 1.8em;
	color: black;
	text-align: center;
	padding: 15px 0 25px;
}

.single_content {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 1.2em;
	line-height: 1.8em;
	text-align: center;
	color: black;
}

iframe, .single_content img{
	max-width: 100%;
}




/* RESPONSIVE **************************************************************************/

@media screen and (max-width: 1000px){
	.menu-btn {
		font-family: 'Open Sans', sans-serif;
		float: right;
		font-size: 1em;
		font-weight: 400;
		vertical-align: middle;
		color: white;
		border: none;
		padding: 0.6em;
	}

	iframe {
		height: 315px;
	}

}

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

	.tittle p {
		font-size: 25px;
	}

	.clients .box {
		height: 150px;
		line-height: 150px;
		width: 50%;
	}

}

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

	.empty_2 {
		height: 25px;
	}
	.svg_container {
		top: -80px;
	}

	.tittle p {
		font-size: 25px;
		
	}

	.definition {
		line-height: 1.6em;
		font-size: 1em;
	}

	.definition p span {
		font-size: 30px;
		line-height: 30px;
	}

	.center p {
		line-height: 1.6em;
		font-size: 1em;
	}

	.clients .box {
		width: 100%;
	}

	.about_us p {
		font-size: 1em;
		line-height: 1.6em;
	}

	footer {
		text-align: center;
	}

	footer p {
		float:none;
		line-height: normal;
	}

	.social {
		float: none;
		line-height: normal;
		padding: 10px;
	}

	hr {
		margin-bottom: 1em;
	}

	iframe {
		height: 367px;
	}

	.single_description {
		font-size: 1em;
		line-height: 1.6em;
	}

	.single_content {
		font-size: 1em;
		line-height: 1.6em;
	}

}

@media screen and (max-width: 490px){
	.svg_container {
		top: -30px;
	}

	.tittle p {
		font-size: 25px;
	}

	.clients .box {
		width: 100%;
	}

	iframe {
		height: 245px;
	}

	.white_container {
		/*top: -20px;*/
	}

}

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

	iframe {
		height: 194px;
	}

}

/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1000px){
	.hide {
		display: none;
	}
}

/* 400 and up */
@media screen and (min-width:1001px) {

	.pushy, .menu-btn {
		display: none;
	}

}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {

					{ /* Place your styles here for all 'Retina' screens */ }

}