html{
width:100%;
margin:10%;
/*border:1px dashed blue;*/
margin:auto;
text-align: center;
background-image:url(../img/backgroundgraphic.png);
background-position: 100% 100%;
background-size:400px;
background-repeat: no-repeat;
/*font-family:'trebuchet', 'helvetica', 'sans-serif' ;*/
font-family: SegoeUI;
line-height:18px;

}
.error{
    color:red;
}
h1{
font-size:2em;
font-family: 'Operator Mono';
/*font-family: 'josefin_slabbold';*/
/*color:red;*/
font-weight:bold;
}


h2{
font-size:1.8em;
}
i{
color:gray;
font-style:italic;
font-size:.9em;
}
header{
text-align: left;
position: relative;
/*border:1px dashed blue;*/
}
header img, header a, .link {
width:100px;
padding:2%;
text-align: left;
vertical-align: middle;
font-size:18px;
/*font-family: 'josefin_slabbold';*/
font-family: 'Operator Mono';
color:#d12229;
text-decoration: underline;
text-decoration-color: black;
}


header a:hover, .link:hover{
text-decoration: underline;
text-decoration-color: red;
color:black;
}



.project{
width:400px;
/*margin:2%;*/
height:400px;
border:1px solid #474747;
display: inline-block;
overflow:hidden;
object-position: 0px 50%;
}
.project a:hover{
opacity:.5;
}

.buy{
margin: 0px auto;
color: white;
padding: 10px;
padding-left: 35px;
padding-right: 35px;
background-color: #00b300;
/*text-transform: uppercase;*/
font-weight: bold;
border: none;
border-radius: 5px;
line-height: 1;
text-decoration:none;
}

.buy:hover{
background-color:#016001;
}
 .description p, .description h1, .description b, .description a, .blog {
width:80%;
margin:0px auto;
margin-top: 20px;
}

.description h1{
    margin-bottom:20px;
    color:#f58020;
}
.description h3{
    color:#626366;
    font-weight:bold;
    font-style:italic;
    display:inline;
}
.description p{
    line-height:20px;
}
.description{
width:80%;
/*min-height:500px;*/
/*border-top:1px solid #474747;*/
margin: 0px auto;
}

#about{
text-align:left;
margin:0px auto;
width:50%;
margin-bottom:20px;

}
#about h1{
text-align:center;
}
#about img{
    clear:both;
text-align:center;
width:150px;
height:150px;
}
#contact{
margin-bottom:30px;
}
#contact label{
/*width:450px;*/
display: block;
margin: 0 auto;
text-align:center;
/*float:left;*/
}

#contact input, textarea{
  padding:15px;
  width:300px;
  display:block;
  margin: 0 auto;
  margin-bottom:30px;
  border-radius:5px;
  border:1px solid grey;
}

input[type=submit] {
    /*width:100%;*/
    background-color:#ba2929;
    border-radius:25px;
    border:2px solid #380000;
    color:white;
    font-weight:bold;
    text-align:center;
    display:block;
    margin:0px auto;
    letter-spacing:5px;
}
input[type=submit]:hover{
    background-color:red;
    cursor:pointer;
}

#contact img{
width:100px;
/*display: inline-block;*/
/*padding: 2.5%;*/
}

.thumb{
width:400px;
}

.banner{
    text-align:left;
    padding-top:42px;
    padding-left:20px;
   float:left;
   /*background-image:url(/img/blog/Banners/banner1.jpg);*/
   }
.banner h1{
    padding-bottom:15px;
}
.blog p{
    clear:both;
    text-align:left;
    padding-top:10px;
    padding-bottom:10px;
    width:80%;
}
.blog img{
    width:70%;
}
.pointer{
    /*width:150px;*/
    /*height:150px;*/
    background-color:#ba2929;
    /*border:2px solid #380000;*/
    color:white;
    float:left;
    padding:50px;
    width:80px;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    /*left:50%;*/
}
.arrow-left {
  /*margin-top:25px;*/
  width: 0;
  height: 0;
  border-top: 58px solid transparent;
  border-bottom: 58px solid transparent;
  border-left:30px solid #ba2929;
  float:left;
}


/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

/*wireframe image slider*/
.container{
width:80%;
/*height:600px;*/
display:block;
overflow:hidden;
z-index:6;
margin:0 auto;
position:relative;
margin-bottom:25px;
}

.container img, .container video{
width:75%;
border:1px solid #a3a3a3;
}

/*.innercontainer1 img{*/
/*    width:80%;*/
/*}*/
.innercontainer2 img{
    width:200%;
}
.innercontainer1{
width:100%;
float:left;
position:relative;
z-index:-1;
}

.innercontainer2{
width:37.5%;
float:left;
position:absolute;
/*transform: translate(-50%, -50%);*/
transform: translate(31%, 0%);
z-index:1;
overflow:hidden;
border-right:5px solid red;
}

.rendercontainer{
    width:80%;
    margin:0px auto;
    border:1px solid #e9e9e9;
    margin-bottom:25px;
}

hr{
border:1px solid rgba(0,0,0,0.1);
margin-top:25px;
margin-bottom:25px;

}

.woocommerce-ordering{
}

.tools{
    height:35px;
    border:0px !important;
    /*margin-top:15px;*/
    width:auto !important;
}

/*mobile view*/
@media only screen and (max-width: 600px) {
header img, header a{
 width:80px;
 font-size:14px;
}

.container{
    width:95%;
}

.project{
    width:95%;
    height:auto;
    display:block;
    margin:2.5%;
    overflow:hidden;
}
.project img{
    width:100%;
    height:auto;
}
.arrow-left {
  /*margin-top:25px;*/
  width: 0;
  height: 0;
  margin-left:160px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #ba2929;
  border-bottom: 20px solid transparent;
  /*float:left;*/
  clear:both;
  margin-bottom:-25px;
  }
  .banner{
      clear:both;
      margin-left:50px;
      margin-top:0px;
  }
.pointer{
    padding:15%;
    width:70%;
    border-radius:5px;
}
#about{
    width:80%;
}

.container img, .container video{
    width:100%;
}
/*}*/
.innercontainer2 img{
    width:226%;
}
.innercontainer1{
width:90%;
float:left;
position:relative;
z-index:-1;
}

.innercontainer2{
width:36%;
height:100%;
float:left;
position:absolute;
/*transform: translate(-50%, -50%);*/
transform: translate(11%, 0%);
z-index:1;
overflow:hidden;
border-right:5px solid red;
}
.rendercontainer{
    width:100%;
}
.description p{
    width:100%;
}
}
/*end mobile view */


/*flipbook*/
#magazine{
	width:1650px;
	height:1275px;
}
#magazine .turn-page{
	background-color:#ccc;
	background-size:100% 100%;
}

.g-recaptcha{
display: table;
margin: 0px auto;
}