/*
Theme Name: Easyspace Single Page Theme
Theme URI: http://www.easyspace.com
Description: A simple single page styled theme to get you online.
Author: Neil Milliken for Easyspace
Version: 1.0
*/


/* GLOBAL
-------------------------------------------------------------------------------*/
/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {font: 13px "Open Sans", sans-serif; background:#fff;}
body, select, input, textarea {color: #333;}
*, *:before, *:after {
  box-sizing: border-box;
}
a {color: #03f;}
a:hover {color: #69f;}

h1 { font-size:3em;}

h1:after {
	width:50px;
	height:5px;
	content:"";
	display:block;
	background:#ccc;
	bottom:0;
	margin:14px auto;
}

h2 a { font-size:2em; color:#2f2f2f; text-decoration: none; line-height:1.7em;}


/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }



ul, li { padding: 0; margin:0;}

.wrapper  {
	width: 90%; 
	margin: 0px auto;
}

nav {
	display: none;
}

article, section {
    display: block;
    width: 100%;
	overflow:hidden; 
}

article { 
	padding-top: 168px;
}

section p {
	font-size:15px;
	line-height:25px;
}

section:after,
footer .wrapper:after {
  content: "";
  display: table;
  clear: both;
}

blockquote { background: #f2f3f4; padding: 20px; border-left:5px solid #ccc; margin:20px 0}

@media screen and (min-width: 480px) {
	article { 
		padding-top: 160px;
	}	
}

@media screen and (min-width: 768px) {
	.wrapper  {
		width: 768px; 
		margin: 20px auto;
	}
	article { padding-top: 100px;}
}

@media screen and (min-width: 960px) {
	.wrapper  {
		width: 960px; 
	}
}


/* HEADER
-------------------------------------------------------------------------------*/

header {
	display: block;
	width:100%;
	position:absolute;
	background:#fff;
	top:0;
	z-index:2;
}

header .wrapper {
		top:0;
	z-index:3;
	
	width:100%;
}

.addshadow {
	top:-68px!important;
	position:fixed;
	background:#fff;
}

.addshadow:after {
	content:"";
	width:100%;
	height: 7px;
	position:absolute;
	bottom:0px;
	display:block;
	box-shadow: 0px 4px 5px rgba(0,0,0,0.14);
	animation-name: addshadow;
	animation-duration: 0.27s;	
	animation-timing-function: ease-in-out;		
	visibility: visible !important;	
}

@media screen and (min-width: 768px) {
.addshadow {
	top:0!important;
	position:fixed;
	background:#fff;
}
}


@keyframes addshadow {
	0% {
		opacity: 0;		
	}
	100% {
		opacity: 1;	
	}		
}

header .very-top {
		background:#efefef;
		color:#787878;
	}

header .very-top .wrapper {
		padding:8px 20px;
		color:#787878;
		text-align:center;
		font-size:1.1em;
	}

header a.logo {
	display:block;
	font-size:20px;
	text-align:center;
	width:100%;
	padding:0; 
	text-decoration:none;
	color:#333;
	
}

header a.logo img {
	margin:12px 0 0 17px;
	height:40px;
}

header p a.logo {
	padding:17px 17px;
}

#page-navigation {
	display: block;
	width:100%;
	background:#fff;
	padding:10px 0 0;
	overflow:auto;
	z-index:4;
	-webkit-transform: translateZ(0);
}

#page-navigation ul{
	overflow:auto;
}

#page-navigation li {
	padding:0;
	font-size:16px;
	list-style: none;
	float:left;	
	text-align:center;
	position:relative;
	width:33.33%;
}

#page-navigation li:after {
	content:"|";
	position:absolute;
	top: 10px;
	right:0;
	color:#ddd;
}

#page-navigation li:last-child:after {
	content:"";
}

#page-navigation li a {
	color:#333;
	text-decoration: none;
	padding:10px 0 17px;
	width:95%;
	text-align:center;
	display: block;
}



#page-navigation li a.nav-active {
    color:#ccc;
	position:relative;
	border-bottom: 3px solid #787878;
}


@media screen and (min-width: 768px) {
header .very-top .wrapper {
		text-align:right;
	}
	
	
	header .wrapper {
		padding:1px 0;
		margin:0 auto;
		width:100%;
	}
	
	header a.logo  {
		text-align:left;
		width:50%;
		display:inline-block;
		float:left;
		}
	#page-navigation {
		display: inline-block;
		width:49.9%;
		float:right;
	}
	
	#page-navigation li {
		padding:0px 0;
		font-size:16px;
		list-style: none;
		text-align:center;
	}

}
@media screen and (min-width: 1002px) {
	#page-navigation {
		width:400px;
	}
}

/* TOP BANNER
-------------------------------------------------------------------------------*/
#image_header { 
	background-color:#232323; 
	width:100%; 
	min-height:100px;
	display:block;
	height:auto;
	text-align:center;
	padding:20px;
}

#image_header .wrapper {
	padding: 30px 0px;
}

#image_header .wrapper.cat {padding:40px 0 40px; color:#fff!important;}
#image_header .wrapper.cat h2 { font-size:20px;}

#image_header h1 {
	font-size:3.4em;
	line-height:1em;
	visibility:hidden;
	position:relative;
}

#image_header h1:after {
	display:none;
}


#image_header p {
	font-size:1.42em;
	font-weight:300;
	line-height:1.3em;
	padding:20px 0;
		visibility:hidden;
}

#image_header a.contact-link {
	padding:12px 20px;
	border: 2px solid #fff;
	margin-top:12px;
	min-width:100px;
	text-align:center;
	display:inline-block;
	text-decoration: none;
	visibility:hidden;
}

#image_header a.contact-link:hover {
	opacity:0.6;
}

@media screen and (max-width: 768px) {
	#image_header {
		background-image:none!important;
		padding: 160px 20px 15px;
	}
	#image_header h1,
	#image_header p,
	#image_header a.contact-link {
		text-align:center;
		margin-left: 30px;
		margin-right:30px;
		display:block;
	}
	
}


@media screen and (min-width: 768px) {
	#image_header .wrapper {
		padding: 140px 0px 60px;
	}
	
	#image_header .width-400 h1, #image_header .width-400 p {
	max-width:400px
	}

	
#image_header .wrapper.cat {padding:110px 0 40px; color:#fff!important;}
}
@media screen and (min-width: 1024px) {
	#image_header .wrapper {
		padding: 160px 0px 120px;
	}
}

/* ABOUT US
-------------------------------------------------------------------------------*/
#about-us { 
	background-color:#fff; 
	width:100%; 
	min-height:100px;
	display:block;
	height:auto;
	text-align:center;
	padding:20px;
}

#about-us h1 {
	text-align:center;
	position:relative;
}

p.summary {
	text-align:center;
	margin:0 auto;
	max-width:640px;
	font-size:1.4em;
	color:#a9a9a9;
}

#about-us p {
	padding-bottom:20px;
}

#about-us .left-half, #about-us .right-half {
	display:block;
	width: 100%;
	padding:30px 0 0;
	float:left;
}

#about-us .left-half {
	display: none;
	visibility:hidden;
}

 #about-us .right-half{
	font-size:15px;
	line-height:25px;
	padding-bottom:30px;
 }

@media screen and (min-width: 768px) {
#about-us { 
	text-align:left;
	padding:20px;
	visibility: hidden;
}

#about-us .left-half, #about-us .right-half {
	width:30%;
	padding:30px;
	text-align:left;
	display:inline-block;
	float:left;
	
}

#about-us .left-half {
	background-color:#c8c8c8;
	background-size:cover;
	display:inline-block;
	color:#fff;
	text-align:center;
	margin:20px 0px 20px 0px;
	height:auto;
	min-height:300px;
}

 #about-us .right-half{
	width:67%;
	float:right;
	padding-bottom:20px;
 }
}

/* CONTACT US
-------------------------------------------------------------------------------*/
#contact-us { 
	background: #efefef;
	width:100%; 
	min-height:100px;
	display:block;
	height:auto;
	text-align:left;
	padding:20px;
	visibility:hidden;
}

#contact-us h1 {
	text-align:center;
}

#contact-us p {
	padding-bottom:0px;
}

#contact-us .left-half, #contact-us .right-half {
	display:block;
	width: 100%;
	padding:20px 0 0;
	float:left;
}

#contact-us .left-half p {
	padding-bottom:20px;
	color:#a7a7a7;
}

#contact-us .left-half p:active,
#contact-us .left-half p:focus,
#contact-us .left-half p:hover {
		color:#787878;
}
 

#contact-us .right-half > div {
	 padding-bottom: 20px;
	 margin-top:20px;
	 border-bottom: 2px dotted rgba(0,0,0,0.11)
}

#contact-us .right-half h3 {
		color:#a7a7a7;
}


#contact-us p.success,
#contact-us p.success:hover,
#contact-us p.fail,
#contact-us p.fail:hover {
 background: #4fbb75;
 color:#fff;
 font-size:16px;
 padding:20px
}

#contact-us p.fail,
#contact-us p.fail:hover {
	background: #d86259;
}

#contact-us p.bad,
#contact-us p.bad:hover {
	color:#521c18;
}

@media screen and (min-width: 768px) {
#contact-us { 
	padding:20px;
}

#contact-us .left-half, #contact-us .right-half {
	width:70%;
	padding:30px;
	text-align:left;
	display:inline-block;
	float:left;
	
}

 #contact-us .right-half{
	width:30%;
	float:right;
	padding-top:46px;
 }
}

/*-- FORM  --*/

form .contact-form{
	position:relative;
}

form .contact-form label {
	padding-bottom:20px;
	display:block;
	color:#a7a7a7;
}

form .contact-form label:active,
form .contact-form label:focus,
form .contact-form label:hover {
		color:#787878;
}
 

form .contact-form input, form .contact-form textarea  {
	display:block;
	width:100%;
	border: none;
	border-radius:2px;
	padding:10px;
}

form .contact-form input[type=submit] {
		background: #a9d04d;
		color: #fff;
		text-align:center;	
}

form .contact-form input[type=submit]:hover {
	opacity:0.75;
}

.ajax-loader {
	position: absolute;
	bottom:20px;
	width:36px;
	height: 36px;
	left:50%;
	margin-left:-19px!important;
	background: #a9d04d;
	padding:10px;	
}

form .contact-form p {
	position:relative;
}

@media screen and (min-width: 768px) {
	form .contact-form input[type=submit] {
		width:200px;
	}
	form .contact-form p:last-of-type {
		width:200px;
	}
}

/* MAP
-------------------------------------------------------------------------------*/
.map {
	width:100%;
	height: 600px;
	background:#dfdfdf;
	visibility:hidden;
}


.map iframe{
    pointer-events: none;
}

@media screen and (min-width: 768px) {
	.map {
		height: 900px;
	}
}

/* BLOG PAGES
-------------------------------------------------------------------------------*/
.single-post, .archive, .blog  { background:#efefef;}

#content-container {
	background:#fff;
	width:100%;
}

#posts { 
	background-color:#fff; 
	width:100%; 
	min-height:100px;
	display:block;
	height:auto;
	text-align:center;
	padding:0px;
	margin:0px auto;
	overflow:auto;
	position:relative;
}

.poster {
	width:100px;
	height:auto;
	display:none;
	top:52px;
	left:-100px;
	position:absolute;
	}

#posts .wrapper { width:100%; padding:40px; position:relative; overflow:visible;}

#posts h1 {
	text-align:left;
	position:relative;
}

#posts h1::after {
	display: none;
}

#posts h2 {
    color: #b2b2b3;
	text-align:left;
    }

#posts h5,
#posts h5 a { color:#F09216; font-style:italic; text-decoration:none; text-align:left; padding-bottom:26px;}
#posts h5:after {
	width:50px;
	height:5px;
	content:"";
	display:block;
	background:#ccc;
	bottom:0;
	margin:30px auto 0 0;
}

#posts article { 
	padding:0px;
	overflow:visible;
}

#posts .entry-content,
#posts .entry
 {
	text-align:left;
	margin:0 auto;
	font-size:1.2em;
	color:#a9a9a9;
}



#thecomments {
	background:#f8f8f8;
	padding:40px;
	text-align:center;
	margin:0 40px 0 40px;
}

.navigation {
	display:table;
	width:100%;
	padding:30px 20px;
}

.navigation .nav-links {
	display: table;
	width:100%;}

.navigation h2 { display: none;}

.navigation .nav-previous,
.navigation .nav-next { display: table-cell; text-align:left; width:50%; position:relative; }
.navigation .nav-next { text-align:right;}
.navigation .nav-next:after {}

.navigation .nav-next .navigation,
.navigation .nav-previous .navigation {
	padding:0;
}

.navigation a {
	color:#2f2f2f;
	text-decoration:none;
	background:#efefef;
	padding:8px 10px;
}

.navigation a:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(239, 239, 239, 0);
	border-right-color: #efefef;
	border-width: 20px;
	margin-top: -20px;
}

.navigation .nav-next a:after  {
left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(239, 239, 239, 0);
	border-left-color: #efefef;
	border-width: 20px;
	margin-top: -20px;
}


.navigation .nav-previous a:hover,
.navigation .nav-next a:hover,
.navigation .nav-previous a:focus,
.navigation .nav-next a:focus {
	background: #2f2f2f;
	color:#fff;
	
}
.navigation a:hover:after  {
	border-color: rgba(47, 47, 47, 0);
	border-left-color: #2f2f2f;
}

.navigation a:hover:after,
.navigation a:focus:after
  {
	border-color: rgba(47, 47, 47, 0);
	border-right-color: #2f2f2f;
}

.navigation .nav-next a:hover:after,
.navigation .nav-next a:focus:after
 {
	border-left-color: #2f2f2f;
	border-right: none;
	
}

.postmetadata {
	padding: 20px 0;
	text-align:left;
	}
	
.postmetadata a {
	color:#a9a9a9;}
	
.postmetadata a:hover {
	color:#787878;}


@media screen and (min-width: 768px) {
#content-container {
	background:#fff;
	width:75%;
	display:inline-block;
	float:left;
}	

.poster {
	display:block;
}
#posts article {
	width:75%;
		display:inline-block;
		margin-left:25%;
		background:#fff;
}

#posts .wrapper {padding:40px 80px 40px 40px;}

	
	#posts h1,
	#posts h2,
	#posts h2 a,
	#posts h5,
	#posts .entry-content,
	#posts .entry,
	#thecomments { 
		text-align:left;
	}
	
	#thecomments {
	margin:0 80px 0 40px;
}

.navigation {
	padding:40px 100px 40px 60px;
}
}

/* Sidebar
-------------------------------------------------------------------------------*/
#sidebar { 
display:inline-block;
 width:100%; 
 background:#efefef;
 padding:30px;
 }
 
#sidebar h3.widget-title { 
text-transform:uppercase;
color:#b2b2b3;
border-bottom: 2px dotted rgba(0, 0, 0, 0.11);
padding-bottom:5px; 
margin-bottom:5px;}

#sidebar ul { display:block; width:100%;}

#sidebar li a { color:#1f1f1f; text-decoration:none; font-size:18px; }

#sidebar div {
	padding:14px 0;
}

#sidebar #searchform { position:relative;}
#sidebar #searchform div {padding:0;}
#sidebar #searchform input[type="search"] { height: 42px; line-height:42px; width:100%; padding: 5px 10px; border:1px solid #fff;}
#sidebar #searchform input[type="search"]:hover,
#sidebar #searchform input[type="search"]:focus { 
border-color:#dfdfdf;
}
#sidebar #searchform #searchsubmit { 
	background:url(images/search.png) no-repeat;
	background-size:30px 31px; 
	border: none;
	text-indent:-9999em;
	height:32px;
	width: 32px;
	position:absolute;
	top:6px;
	right:6px;
}

#sidebar #searchform #searchsubmit:hover,
#sidebar #searchform #searchsubmit:focus {
	opacity:0.7;
}
 
@media screen and (min-width: 768px) {
#sidebar { display:inline-block;
 width:25%; 
 float:right;
 }
}

/* BLOG COMMENTS
-------------------------------------------------------------------------------*/

#commentform label {
	padding-top:16px;
}

#commentform label,
#commentform input[type="text"],
#commentform textarea{
	width:100%;
	max-width:500px;
	display:block;
	text-align:left;
}

#commentform input[type="text"]{ 
height: 42px; 
line-height:42px; 
width:100%; 
padding: 5px 10px; 
border:1px solid #d3d3d3;
}
#commentform input[type="text"]:hover,
#commentform input[type="text"]:focus,
#commentform  textarea#comment:hover,
#commentform  textarea#comment:focus  { 
border-color:#b4b4b4;
}

#commentform  textarea#comment { 
width:100%;
max-width:100%;
margin-bottom:16px;
border:1px solid #d3d3d3;}

/* FOOTER
-------------------------------------------------------------------------------*/
footer {
	display: block;
	width:100%;
    background: #fff;
    color: #b7b7b7;
	overflow:auto;
}

footer .wrapper {
	padding:10px;
}

footer small {
	float:left;
}

footer small:last-child {
	float:right;
}


/* Print styles!
-------------------------------------------------------------------------------*/
@media print {

}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Always do mobile-first, and consider using em units: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw

@media screen and (min-width: 480px) {

} */