/*
Theme Name: Geosho
Author: Geosho
Author URI: http://www.geosho.com/
Version: 1
*/

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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}

html, body {
	margin: 0;
	padding: 0;
	font-family: "futura-pt",sans-serif;
	font-size: 1em;
	line-height: 1.6em;
	background: #fff !important;
	width: 100%;
	min-height: 100%;
	color: #333333;
}

* {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

a {
	-o-transition:.5s;
	  -ms-transition:.5s;
	  -moz-transition:.5s;
	  -webkit-transition:.5s;
	  /* ...and now for the proper property */
	  transition:.5s;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "futura-pt", sans-serif;
	font-weight: 300;
}

h1 {
	font-size: 3.2em;
	letter-spacing: -1px;
	line-height: 1em;
	font-family: "futura-pt", sans-serif;
	font-weight: 600;
}

h1 span {
	font-weight: 700;
}

p {
	margin-bottom: 15px;
}

/*h1.intro-strap {
	font-size: 2.75em;
	margin-top: 55px;
	margin-bottom: 15px;
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
}

.orange-span {
	color: #fff;
	opacity: 0.4;
	font-weight: normal;
	font-style: italic;
	font-size: 1em;
}*/

h1 {
	font-size: 3.6em;
	margin-top: 20%;
	margin-bottom: 80px;
	font-weight: 300 !important;
	text-transform: ;
	font-family: 'futura-pt';
	line-height: 1.1em;
}


h1.intro-title {
	font-size: 3.6em;
	margin-top: 20%;
	margin-bottom: 80px;
	font-weight: 300 !important;
	text-align: center;
	text-transform: ;
	font-family: 'futura-pt';
	letter-spacing: 2px;
	line-height: 1.1em;
}

h2 {
	font-size: 2em;
}

#intro-sentence {
	max-width: 670px;
	width: 90%;
	margin-top: 215px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.3em;
	font-weight: 500;
}

p {
	font-size: 1.2em;
}

#content a {
	color: #29BBD6;
}

#main {
	max-width: 960px;
	width: 85%;
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
}

#main img {
	max-width: 960px;
	width: 100%;
	height: auto;
}

div.blog-single {
	padding-top: 80px !important;
}

div.blog-single a {
	color: #29BBD6;
}

div.blog-single h1 a {
	color: #fff !important;
	text-decoration: none;
	margin-top: 50px;
}

div.blog-single .wp-post-image {
	margin-bottom: 30px;
	margin-top: 30px;
}

.author {
	font-size: 1.4em;
}

a.back-button {
	background: #555555;
	color: #fff !important;
	text-decoration: none;
	padding: 8px 14px;
	font-size: 1.2em;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	margin-top: 20px;
}

a.back-button:hover {
	background: #E62E1B;
}



body.category h2.entry-title a {
	line-height: 1em;
	text-decoration: none !important;
	margin-bottom: 20px;
}

body.category div.entry-meta {
	margin: 10px 0 10px 0;
}

body.category div.entry-footer {
	margin-top: -30px;
}


#product-wrap {
	float: left;
	padding-top: 50px;
	background: #f1f1f1;
	background-size: 1700px auto;
	background-attachment: fixed;
}

#product {
	width: 90%;
}


#product-wrap ul {
	width: 100%;
}

#product-wrap ul li {
	float: left;
	max-width: 48%;
	min-width: 300px;
	width: 90%;
	margin-bottom: 50px;
	margin-top: 30px;
	background: #fff;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	color: #666666;
	overflow: hidden;
}

#product-wrap ul li:first-child, #product-wrap ul li:nth-child(3) {
	margin-right: 25px;
}

#product-wrap ul li h3 {
	font-size: 2.4em;
	color: #E62E1B;
	font-weight: 300;
	line-height: 1em;
	padding: 20px;
	margin-left: 0px;
}

#product-wrap ul li .product-image {
	width: 100%;
	min-height: 300px;
	background-size: 672px auto;
	margin-bottom: 30px;
	-webkit-transition: background-size 0.5s ease-in-out;
	-moz-transition: background-size 0.5s ease-in-out;
	-o-transition: background-size 0.5s ease-in-out;
	transition: background-size 0.5s ease-in-out;

}

#product-wrap ul li .product-image:hover {
	background-size: 700px auto;
}

#product-wrap ul li .product-text {
	padding: 20px 20px 30px 20px;
}

#product-wrap ul li .product-text a {
	color: #29BBD6;
}

#product-wrap ul li a.button {
	color: #fff;
}

#product-wrap ul li a.button:hover {
	background: #444444;
	color: #fff;
}


/* RE-USABLE */

div.width1000 {
	width: 90%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

div.page-wrapper {
	margin: 20px;
}

div.wrapper {
	width: 100%;
	height: 100%;
	float: left;
	padding: 0;
}

div#wrapper {
	height: 100%;
	padding: 0;
}

div#container {
	width: 100%;
	height: 100%;
	float: left;
	padding: 0;
}

div.left-pane, div.right-pane {
	max-width: 48%;
	min-width: 300px;
	width: 90%;
	height: 100%;
}

div.left-pane {
	float: left;
	text-align: left;
}

div.right-pane {
	float: right;
	text-align: right;
}

div.flush {
	margin-bottom: 0;
	padding-bottom: 0;
}

div.no-flush {
}

div.left-pane img, div.right-pane img {
	width: 90%;
	max-width: 90%;
	display: block;
}

.text-right {
	text-align: right;
}

div#blog {

}

div.blog {
	width: 50%;
}

div#blog ul {
	float: left;
	width: 50%;
	min-width: 320px;
	float: left;
	min-height: 500px;
	background-size: 1px 600px, 1000px auto;
	background-repeat: repeat-x, repeat-x;
	background-position: left bottom, center center;
	color: #fff;
}

div#blog ul li {
	padding: 40px;
}

div#blog ul li h1 a {
	color: #fff;
	text-decoration: none;
}


a.button {
	padding: 12px 24px 12px 24px;
	background: #0fb2ca;
	color: #fff;
	text-decoration: none;
	font-size: 1.2em;
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	font-family: "futura-pt", sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
}

a.button:hover {
	background: #fff;
	color: #555555;
}

a.learn-more {
	margin-left: auto;
	margin-bottom: auto;
}


/* HEADER */

div#header-wrap {
	overflow: hidden;
	width: 100%;
	height: 70px;
	background: #fff;
	top: 0px;
	left: 0;
	position: fixed;
	z-index: 9999;
}

div#logo {
	width: 25%;
	float: left;
}

div#logo img {
	width: 160px;
	margin-left: 40px;
	margin-top: 12px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottom-right: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

div#head {
	width: 75%;
	float: right;
}

div#header-wrap nav {
	padding-top: 22px;
}

div#header-wrap nav ul {
	display: inline-block;
	float: right;
	margin-right: 30px;
}

div#header-wrap nav ul li {
	list-style: none;
	float: left;
	position: relative;
}

div#header-wrap nav ul a {
	/* background: #29bbd6; */
	color: #444444;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.1em;
	font-weight: 300;
	margin: 15px 15px 15px 15px;
	padding-bottom: 3px;
	border-bottom: 3px solid transparent;
}

div#header-wrap nav ul a.orange {
	background: #f24523;
	color: #fff;
	padding: 5px 7px 2px 7px !important;
	float: left;
	margin-top: -13px;
}

div#header-wrap nav ul a.orange:hover {
	background: #444444;
	opacity: 1;
}

nav img {
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	-o-transition-duration: 0.8s;
	transition-duration: 0.8s;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;
}

nav img:hover {
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
}

div#header-wrap nav ul a:hover {
	/*background: #19adc8;*/
	color: #24B3D0;
}

/* SUB */


ul#lang {
	float: right;
	margin-right: 0 !important;
}

div#header-wrap nav ul ul {
	left:-9999px;
	list-style:none;
	position:absolute;
	margin-top: 38px;
}

div#header-wrap nav ul ul li {
	float: none;
	padding-top: 1px;
	width: 180px !important;
	background: #fff;
	padding: 15px;

	-o-transition:.5s;
	  -ms-transition:.5s;
	  -moz-transition:.5s;
	  -webkit-transition:.5s;
	  /* ...and now for the proper property */
	  transition:.5s;
}

div#header-wrap nav ul ul li:hover {
	background: #eaeaea;
}

div#header-wrap nav ul ul li a {
	width: 200px !important;
	background: transparent;
	color: #c0c0c0;
	text-shadow: none !important;
}

div#header-wrap nav ul ul li a:hover {
	color: #f24523;
	background: transparent;
	opacity: 1;
}

div#header-wrap nav ul a {

}

div#header-wrap nav li:hover ul {
	left: -160px;
}

/* SECTIONS */


div.section-wrap {
	min-height: 500px;
	float: left;
	padding: 80px 0 50px 0;
	position: relative;
	height: 100%;
}

div.section {
	position: relative;
	color: #fff;
}



#welcome-wrap {
	background: #29BBD6 url('./img/bg-dock.jpg') repeat-x center -80px;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	height: 100vh;
}

#whatwedo-wrap {
	background: #fff;
}

#whatwedo-wrap h1 {
	color: #444444;
}

#whatwedo-wrap p {
	color: #999999;
}

#whoweare-wrap {
	background: #2F2F2F;
}

#formobile-wrap {
	background: #2f2f2f;
}

#forweb-wrap {
	background: #a7a7a7;
}

#blog-wrap {
	background: #484848;
	padding: 0;
}

div.blog-item {
	width: 50%;
	min-width: 320px;
}

#contact-wrap {
	background: #23465B;
}

#contact h2 {
	margin-bottom: 40px;
	margin-top: 50px;
}

#contact img {
	max-height: 70px;
	width: auto;
}

#contact img:hover {
	opacity: 0.4;
}

#contact ul.reasons {
	overflow: hidden;
	padding-bottom: 0px !important;
	list-style: square !important;
}

#contact ul.reasons li {
	list-style: square !important;
	float: left;
	padding: 0px 0px 0px 8px !important;
	margin-bottom: 10px;
	border-left: 4px solid #fff;
}

#contact ul.icons li {
	list-style: none;
	float: left;
	margin-right: 35px;
}

#footer-wrap {
	background: #;
	background-size: 600px auto;
	background-position: center center;
	color: #333333;
	float: left;
	padding: 40px 0 40px 0;
}

#footer a {
	color: #24B3D0;
}

#footer a:hover {
	opacity: 0.6;
}

.footer-left, .footer-right {
	width: 50%;
	float: left;
}

.footer-right {
	text-align: right;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

div.contact-form form {
	position: relative;
}

div.contact-form input {
	padding: 10px;
	border: 0;
	margin-bottom: 0px;
	color: #999999;
	width: 90%;
	max-width: 450px;
}

div.contact-form textarea {
	color: #999999;
	padding: 11px;
	border: 0;
	width: 90%;
	max-width: 450px;
}

div.contact-form input.wpcf7-submit {
	color: #fff;
	position: relative;
	max-width: 120px;
	background: #24B3D0 url('http://wordpress.geosho.com/wp-content/themes/geosho/img/send.png') no-repeat 10px center;
	background-size: 20px auto;
	padding-left: 35px;
	border-radius: 100px;
}

.wpcf7-recaptcha {
	float: right;
	width: 100%;
}

.wpcf7-recaptcha div {
	float: right;
	margin-bottom: 20px;
}


#message-wrap {
	margin-top: 60px;
	margin-bottom: 100px;
}

#message-wrap img {
margin-left: 30px;
	width: 250px;
	-webkit-transition-duration: 0.8s;
	    -moz-transition-duration: 0.8s;
	    -o-transition-duration: 0.8s;
	    transition-duration: 0.8s;

	    -webkit-transition-property: -webkit-transform;
	    -moz-transition-property: -moz-transform;
	    -o-transition-property: -o-transform;
	    transition-property: transform;

	    overflow:hidden;
}

#message-wrap img:hover {
	width: 250px;
	-webkit-transform:rotate(360deg);
	    -moz-transform:rotate(360deg);
	    -o-transform:rotate(360deg);
}

#message-wrap li {
list-style: none;
}

#message-wrap h2 {
	font-size: 1.8em;
}

#message-wrap a:link, #message-wrap a:visited {
	color: #2E2E2E;
}



body.error404 div#container {
	background: #43B7D1 url('http://wordpress.geosho.com/wp-content/themes/geosho/img/404.jpg') repeat center center;
	background-size: 1440px auto;
	background-attachment: fixed;
	overflow: hidden !important;
}


/*
#popupClose - this is referring to the anchor tag inside the popup conatainer.
We'll absolute position and style it here
*/
#popupClose{
    font-size:24px;
    line-height:20px;
    position:absolute;
    rightright:6px;
    top:-5px;
    right: -5px;
    font-weight:700;
    display:block;
    color: #fff;
    background: #444444;
  	padding: 4px 9px 8px 11px;
  	border-radius: 150px;
  	cursor: pointer;
}

#popupClose:hover{
    background: #E62E1B;
}

/*
#bgPopup - this is referring to the element that will cover the whole page
behind the popup and above the rest of the page.
NOTE: if you are using z-index on the same level in the DOM -
    #bgPopup z-index needs to have the second highest value (behind #Popup)
*/
#bgPopup{
    display:none;
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background:#3dbbd2;
    z-index:1;
}

/*
#Popup - The popup container
NOTE: if you are using z-index on the same level in the DOM -
    #Popup z-index needs to have the highest value.
*/
#Popup{
    display:none;
    position:fixed;
    background:#FFFFFF;
    z-index:2;
    padding:12px 12px 6px 12px;
    font-size: 1.2em;
    color: #666666;
}

/*
#myButton - The Button....  make it have Button-like properties
*/
#myButton{

}


ol {
list-style-type: decimal;
margin-top: 20px;
margin-bottom: 20px;
background: #555555;
padding: 30px 30px 30px 60px;
}

ol li {
margin-bottom: 10px;
}














@media (max-width: 480px) {
	body, html {
		max-width: 480px;
	}

	div#logo {
		float: left;
		padding: 0px 0px 0px 0px;
		text-align: center;
		width: 100%;
		max-width: 480px;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	div#logo img {
		width: 200px;
		height: auto;
	}

	div#blog ul li {
		padding: 10px;
	}

	div#wrapper {
		max-width: 480px;
	}

	#welcome-wrap {
		background: #29BBD6 url('./img/bg-dock.jpg') repeat-x center -80px;
		background-size: cover;
		background-position: right center;
		height: 100vh;
	}

	#product-wrap ul li {
		float: left;
		width: 90% !important;
		max-width: 480px;
	}

	#product-wrap ul li:first-child, #product-wrap ul li:nth-child(3) {
		margin-right: 0px;
	}

	div.blog-single {
		padding-top: 20px !important;
	}

	div.blog-single h1 a {
		font-size: 0.8em;
		line-height: 0.6em !important;
		color: #fff;
	}

	.footer-left, .footer-right {
		width: 90%;
		float: left;
	}

	.footer-right {
		text-align: left;
	}

	#welcome h1.intro-title {
		margin-top: 50%;
	}

	.mean-bar {
		z-index: 99999999999;
		position: fixed;
	}

}

@media (min-width: 320px) and (max-width: 768px) {
	/* code for tablets only */

	#product-wrap ul li {
		float: left;
		min-width: 250px;
	}

	#product-wrap ul li:first-child, #product-wrap ul li:nth-child(3) {
		margin-right: 25px;
	}
}