/*
Theme Name: Charley Peters Custom
Theme URI: http://charleypeters.com/
Description: Custom Wordpress Template for Charley Peters
Author: Robert Pentha
Author URI: http://www.ptplondon.com
*/






 /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/



/*FONTS IMPORT*/


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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;

}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
   padding:0;
  margin: 0;  
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
  padding:0;
  margin: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

body,html
{


}




body
{
-moz-font-feature-settings: "liga", "kern";
-moz-font-feature-settings:"liga=1, kern=1";
-ms-font-feature-settings:"liga", "kern";
-o-font-feature-settings:"liga", "kern";
-webkit-font-feature-settings:"liga", "kern";
font-feature-settings: "liga", "kern";

-webkit-font-smoothing: antialiased;


font-size: 10.7px;
font-family: 'Nunito', Tahoma, Calibri, Helvetica Neue, san-serif;
color: #424242;
line-height: 2.0em;
font-weight:100;


}


#megaheader {
  background: #ffffff none repeat scroll 0 0;
  height: 38px;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5;
  overflow-x: hidden;
  overflow-y: hidden;
}

.innermegaheader {
  /* margin-left: 30px; */
  margin-top: 10px;
  position: relative;
  float: left;
  width: 100%;
}

.innermegaheader h1 {
    font-size: 12.5px;
    margin-bottom: 1em;
    font-weight: 100;
    position: relative;
    float: left;
    margin-left: 16px;
    letter-spacing: 0.02em;
}
.innermegaheader h1 a {
  color: #000000;
  text-transform: lowercase;
}
.innermegaheader ul {
  /* width: 800px; */
  float: right;
  position: relative;
  margin-right: 20px;
}

.innermegaheader ul li {
  float: left;
  margin-left: 10px;
}

#megascroll {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 3;
  /* float: left; */
  -webkit-overflow-scrolling: touch;
  max-width: 1000px;
  margin: 60px auto;
  /* display: inline; */
}


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

.sectioneader {
  font-weight: bold;
  margin-top: 0px;
  display: inline-block;
}
.dividerone
{
  height: 20px;
}

h1, h2 {
  font-size: 12px;
  margin-bottom: 1em;
  font-weight: 200;
}

h2 {

}
p, a {
text-decoration: none;
color: #424242;
}

.singlepagecontent p a
{
  text-decoration: underline;
}

a:hover {text-decoration: underline;}



p {
	margin-bottom: 15px;
}

strong {
  font-weight: 700;
}

/*HOMEPAGE*/

.homeimage {
  width: 70%;
  height: auto;
  position: relative;
  padding: 20px 15%;
}

.homeimage img {
  width: 100%;
  height: auto;
}

/*Work Page*/

.worksblockwrap {
  width: 90%;
  padding: 0 5%;
  margin-top: 40px;
  position: relative;
  float: left;
  overflow-y: auto;
  height: 100%;
}

.worksblock {
  width: 24%;
  position: relative;
  float: left;
  margin-right: 1%;
  margin-bottom: 10px;
}

.worksblock a {
  width: 100%;
  display: inline-block;
}

.imageblock {
  position: relative;
  width: 100%;
  padding-bottom: 56.6%;
  overflow: hidden;
}

.worksblock img {
  width:auto;
  height: 100%;
}

.worksblock p {
  width: 90%;
  overflow: hidden;
  height: 40px;
  text-align: center;
  line-height: 12px;
  margin-top: 5px;
  padding: 0 5%;
}

/*Works Single*/

.firstsingle {
  min-width: 400px;
  /* position: relative; */
  /* float: left; */
  display: table-cell;
  height: auto;
  vertical-align: top;
  /* margin-right: 30px; */
  padding-right: 30px;
}

.secondsingle {
	/* width: 300px; */
	/* position: relative; */
	/* float: left; */
	display: table-cell;
	width: auto;
	height: 70vh;
	padding-right: 128px;
}
.secondsingle p {
  line-height: 15px;
  text-transform: lowercase;
}

.secondsingle img {
  width: auto;
  height: 100%;
}

.singleblockwrap {
  position: relative;
  float: left;
  margin-top: 35px;
  margin-left: 30px;
}

.singlepagecontent {
  width: 100%;
  height: auto;
  max-width: 700px;
  position: relative;
  float: left;
  margin-bottom: 80px;
}

.burgerone {
  position: absolute;
  right: 20px;
  top: -7px;
  width: 35px;
  height: 35px;
  display: none;
}

.burgerone img, .closeone img
{
  width: 100%;
  height: auto;
}

.closeone {
  position: absolute;
  right: 20px;
  top: -7px;
  width: 35px;
  height: 35px;
  display: none;
}

.singlepagecontent h1 {
  text-transform: lowercase;
  font-size: 16px;
}

.current-menu-item a {
  font-weight: 400;
  color: black;
}
.imagefront-wide {
  display: block;
}

.imagefront-tall {
  display: none;
}

.fullscreenimager {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}




.imagefront-wide img, .imagefront-tall img {
  width: 100%;
  height: auto;

}

.imagefront-wide p, .imagefront-tall p {
  text-transform: lowercase;
  color: #424242;
  position: absolute;
  background-color: white;
  z-index: 100;
  bottom: 0px;
  left: 0;
  /* padding: 0 3%; */
  width: 100%;
  margin-bottom: 0;
  text-align: center;
}

.social
{
  width: 13px;
  height:13px;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  margin-top:3px;
  opacity:0.4;
}

.face
{
  background-image: url(svg/facebook-icon.svg);
  background-size: 13px 13px;
}

.twit
{
  background-image: url(svg/twitter-icon.svg);
 background-size: 13px 13px;
}

.insta
{
  background-image: url(svg/intagram-icon.svg);
 background-size: 13px 13px;
}

.overlayer {
  z-index: 100;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  display: none;
}

.greyback
{
    background-color: rgba(255,255,255,0.9);
      width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.themailbox {
  width: 220px;
  /* height: 300px; */
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 1px 1px 8px #cbcbcb;
  max-height: 70vh;
}

.EMAIL-label > span {
  display: none;
}

.mailthing {
  width: 90%;
  height: 30px;
  border: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 5%;
  border-style: none;
  box-shadow: none;
}

.dasbutton {
  border: none;
  padding: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  margin-top: 20px;
  background-color: #e1e1e1;
}

.closer {
  width: 50px;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

/*FULLSCREEN COde*/





.edit-link {display: none;}

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


.social {
    text-align: left;
    float: right;
    margin-left: 5px;
}

.imagefront-wide {display: none;}
.imagefront-tall {display: block;}

.burgerone {display: block;}

#megaheader {
  height: 40px;
  width: 100%;
  z-index: 5;
  overflow-x: hidden;
  overflow-y: hidden;
}

.innermegaheader {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
}

.worksblockwrap {width: 100%;padding: 0;height: auto;margin-top: 60px;}

.worksblock {margin-right: 1%;}

#megascroll {

margin: 20px auto;

}

.homeimage {

}

.singleblockwrap {
  margin-top: 60px;
  margin-left: 0px;
  width: 94%;
  padding: 0 3%;
}

.firstsingle {
  min-width: 100%;
  display: block;
  height: auto;
  vertical-align: top;
  padding-right: 0;
margin-bottom: 40px;
}

.secondsingle {
  display: block;
  width: 100%;
  height: auto;
  padding-right: 0;
  margin-bottom: 40px;
}

.secondsingle img {
  width: 100%;
  height: auto;
}

.singlepagecontent {
  width: 94%;
  padding: 0 3%;
}

.innermegaheader ul {
  margin-top: 40px;
}

.innermegaheader ul li {
  float: none;
  margin-left: 0;
  text-align: right;
  margin-right: 10px;
}

.innermegaheader h1 {

margin-left: 0px;
}

}






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


.worksblock {width: 45%;}

}



/* CONTACT FORM POPUP */

.popclicker {
	font-weight: 700;
	display: inline-block;
	padding: 0px 30px;
	border: 1px solid #d9d9d9;
	border-radius: 2px;
	text-transform: uppercase;
	font-size: 9px;
	color: #808080;
}

#emmailpopper
{
  position: fixed;
  width: 100%;
  height: 100vh;
  top:0;
  left:0;
  background-color: rgba(128,128,128,0.8);
  z-index: 999;
  display: none;
}

#themainform {
	background-color: white;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 90%;
	max-width: 550px;
/*	height: 570px; */
}

#closebutton1 {
	position: absolute;
	top: 40px;
	right: 40px;
	z-index: 100;
}

#mainform {
	width: 100%;
	/* margin-left: 20px; */
	/* margin-top: 40px; */
	box-sizing: border-box;
	padding: 40px 40px;
}

#mainform > h2 {
	margin-bottom: 40px;
} 

#things {
	width: 20%;
}

#content {
	width: 70%;
	margin-left: 20px;
}

.titelz {
	font-weight: 700;
}


#things img  {
	width: 100%;
}
.flexo {
	width: 100%;
	display: flex;
	/* flex-direction: row-reverse; */
	/* justify-content: inherit; */
	align-items: end;
}

.actualform {
	margin-top: 0px;
}

.actualform label {
	width: 100%;
	display: inline-block;
}

.actualform input,.actualform textarea   {
	width: 100%;
	padding: 17px;
	box-sizing: border-box;
	/* color: grey; */
	background-color: #F2F2F2;
	border: none;
  margin-bottom: 10px;
  font-family: 'Nunito', Tahoma, Calibri, Helvetica Neue, san-serif;
  font-size: 10.7px;
}

.wpcf7-submit {
	font-weight: 700;
	display: inline-block;
	padding: 5px 30px !important;
	border: 1px solid #d9d9d9 !important;
	border-radius: 2px !important;
	text-transform: uppercase;
	font-size: 9px !important;
	color: #808080;
	line-height: 10.7px !important;
	width: auto !important;
	background-color: white !important;
}

.responsemesage {
  display:none;
  text-align: center;
}
.responsemesage svg
{
  width:55px;
  margin-bottom: 60px;
  margin-top: 60px;
}
#emailbackground
{
  position: absolute;
  width: 100%;
  height: 100vh;
  top:0;
  left:0;
}