/*
Theme Name: WP Bootstrap
Theme URI: http://theklotzdesign.com
Description: Theme Built for TheKlotzDesign.
Author: Jesse Klotz
Author URI: http://theklotzdesign.com/
Version: 1.0
Tags: responsive, oshkosh, front-end, flash, html5, css3 developer, 

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

This simple theme was built using the example Bootstrap theme "Basic marketing site" found on the Bootstrap web site http://twitter.github.com/bootstrap/examples/hero.html
*/



@import url('bootstrap/css/bootstrap.css'); 
@import url('bootstrap/css/bootstrap-responsive.css'); 


@font-face {
    font-family: 'impact';
    src: url('impact.eot');
    src: url('https://theklotzdesign.com/fonts/impact.eot?#iefix') format('embedded-opentype'),
         url('https://theklotzdesign.com/fonts/impact.woff2') format('woff2'),
         url('https://theklotzdesign.com/fonts/impact.woff') format('woff'),
         url('https://theklotzdesign.com/fonts/impact.ttf') format('truetype'),
         url('https://theklotzdesign.com/fonts/impact.svg#impactregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'geosans';
    src: url('https://theklotzdesign.com/fonts/geosanslight-webfont.eot');
    src: url('https://theklotzdesign.com/fonts/geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://theklotzdesign.com/fonts/geosanslight-webfont.woff2') format('woff2'),
         url('https://theklotzdesign.com/fonts/geosanslight-webfont.woff') format('woff'),
         url('https://theklotzdesign.com/fonts/geosanslight-webfont.ttf') format('truetype'),
         url('https://theklotzdesign.com/fonts/geosanslight-webfont.svg#geosanslightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'expressway';
    src: url('https://theklotzdesign.com/fonts/exprswy_free-webfont.eot');
    src: url('https://theklotzdesign.com/fonts/exprswy_free-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://theklotzdesign.com/fonts/exprswy_free-webfont.woff2') format('woff2'),
         url('https://theklotzdesign.com/fonts/exprswy_free-webfont.woff') format('woff'),
         url('https://theklotzdesign.com/fonts/exprswy_free-webfont.ttf') format('truetype'),
         url('https://theklotzdesign.com/fonts/exprswy_free-webfont.svg#expressway_freeregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
.navWrap{display:none;}
p{margin:0; padding:0;}
p.p{padding:0 0 10px;}
/*Default Styles*/
.center{
	text-align:center;
}
.justified{
	text-align:justify;
}
.padTop{
	background:#194000;
}
.imgCenter{
	margin:0 auto;
}
.center .img-responsive{
	display:inline;
}
.custom-btn{
width:auto;
float:left;
color:#fff;
font-weight:bold;
background: #365c11; /* Old browsers */
background: -moz-linear-gradient(top,  #365c11 0%, #1e4600 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#365c11), color-stop(100%,#1e4600)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #365c11 0%,#1e4600 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #365c11 0%,#1e4600 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #365c11 0%,#1e4600 100%); /* IE10+ */
background: linear-gradient(to bottom,  #365c11 0%,#1e4600 100%); /* W3C */
}
.custom-btn:hover{
background: #1e4600; /* Old browsers */
background: -moz-linear-gradient(top,  #1e4600 0%, #103801 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e4600), color-stop(99%,#103801)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e4600 0%,#103801 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e4600 0%,#103801 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e4600 0%,#103801 99%); /* IE10+ */
background: linear-gradient(to bottom,  #1e4600 0%,#103801 99%); /* W3C */
color:#EFEFEF;
}
#bodyWrap{
	background:#fff;
}
/*Header*/
.noPad{padding:0;}
.header{
	width:100%;
	margin:0 auto;
	position:fixed;
	z-index:5;
	top:0;

}


.header .gray{
	background:url('../images/gradient.png') repeat-x 0 bottom transparent;
	background-size:contain;
}

.midSlide{
	margin:8% 0 0;
}
.midShowcase{
	background:url('http://theklotzdesign.com/wp-content/uploads/2014/10/parallax.png') no-repeat left center #3f5a5a;
	background-attachment:fixed;
	margin-top:4%;
}
.midShowcase .container{
	padding:3% 15px 2%;
	color:#EBEBEB;
	text-shadow: 0 0 4px #000000;
}
.midShowcase h2{
	
}

h2.name{
	font-size:34px;
	color:#9a9a9a;
	font-family: 'impact';
    text-transform:uppercase;
    letter-spacing: 3px;
}
.justified h1{
    color: #c8c8c8;
    font-family: "impact";
    font-size: 20px;
    letter-spacing: 4px;
    text-transform: uppercase;
	text-align:left;
}

/*Page Schtuff*/

.bar{
	width:100%;
	background:#fff;
	text-align:center;
	background: #f8f7f8; /* Old browsers */
	background: -moz-linear-gradient(top,  #f8f7f8 0%, #ebebeb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f7f8), color-stop(100%,#ebebeb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f8f7f8 0%,#ebebeb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f8f7f8 0%,#ebebeb 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f8f7f8 0%,#ebebeb 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f8f7f8 0%,#ebebeb 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f7f8', endColorstr='#ebebeb',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);
	box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);
    display: block;
}
.bar h3{
	color:#9a9a9a;
	margin:0;
	padding:10px 0 10px;
	font-family: 'expressway';
}


#aboutWrap{
	background:url('http://theklotzdesign.com/wp-content/uploads/2014/10/bottomBg.jpg') fixed repeat #121212;
}
#aboutWrap img{
padding: 5% 0 8%
}
#aboutWrap p{
	color:#ebebeb;
	font-weight:bold;
	font-size:16px;
	padding:3% 0 3%;
	font-family:"expressway",Arial,sans-serif;
}
#aboutWrap .row.cont{padding:4% 0 5%;}
/*Footer*/
#footerWrap{
	color:#fff;
	background:#393939;
	
	position:fixed;
	bottom:0;
	z-index:-1;
	width:100%;
}
#footerWrap .container{
padding:2% 15px 1%;
}
#footerWrap .right p{
	font-size: 22px;
    font-weight: bold;
    margin-right: 18px;
    margin-top: 43px;
	float:right;
}
#footerWrap .right img{
	float:right;
}

.redShadow{
	background:#ff4848;
}


#htmlSection{
    background:url('http://theklotzdesign.com/wp-content/uploads/2014/10/swirl_pattern.png') repeat fixed transparent;
}
#htmlSection .container{padding: 4% 15px 6%;}
#htmlSection ul{padding:0;}
#htmlSection ul li{list-style: none;}


#gamesWrap{
    background: url('http://theklotzdesign.com/wp-content/uploads/2014/10/escheresque_ste.png') repeat fixed transparent;
	padding-bottom:4%;
}
#gamesWrap .container{padding: 6% 15px 3%;}
#gamesWrap h2.sheepsTitle{
	font-size:34px;
	color:#9a9a9a;
	font-family: 'impact';
	text-transform:uppercase;
	text-align:center;
}
#gamesWrap p{
	color:#ebebeb;
	font-size:18px;
	margin-bottom:2%;
	font-family:"geosans",Arial,sans-serif;
}
#contactWrap{
    background:url('http://theklotzdesign.com/wp-content/uploads/2014/10/squared_metal.png') repeat fixed transparent;
    padding-bottom:3%;
}
#contactWrap h3{
	font-family: "expressway",Arial,sans-serif;
}
#contactWrap .container{padding:6% 15px 3%;}
#contactWrap form{
	margin-top:2%;
}
#contactWrap textarea,
#contactWrap input{
	width:100%;
	margin-bottom:6px;
	border-radius:4px;
	padding:7px;
	font-size:16px;
	font-family: "geosans",Arial,sans-serif;
}
#contactWrap input.btn{font-family: "expressway",Arial,sans-serif;}
#contactWrap .bearTrap{
display:none;
}

/*Sweeet Button CSS */
.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
    max-width: 400px;
    max-height: 400px;
    margin: 3% auto 2%;
}
.ch-info-wrap{
    position: absolute;
    /*width: 180px;height: 180px;*/
    width:100%;
    height:100%;
    border-radius: 50%;
    perspective: 800px;
    transition: all 0.4s ease-in-out, width 0s;
    top: 20px;
    left: 20px;
    
    box-shadow:
        0 0 0 20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch-info{
    position: absolute;
    /*width: 180px;
    height: 180px;*/
    height:100%;
    width:100%;
    border-radius: 50%;
    transition: all 0.4s ease-in-out, width 0s;
    transform-style: preserve-3d;
}
.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    backface-visibility: hidden;
}
.ch-info .ch-info-back {
    transform: rotate3d(0,1,0,180deg);
}
.ch-img-1 {
    background: url(http://theklotzdesign.com/wp-content/uploads/2014/10/html-m34t.jpg) center center;
}
 
.ch-img-2 {
    background: url(http://theklotzdesign.com/wp-content/uploads/2017/05/psd.jpg) center center;
}
 
.ch-img-3 {
    background: url(http://theklotzdesign.com/wp-content/uploads/2017/05/cranks.jpg) center center;
}

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    padding: 25% 0 0 0;
    font-family: 'geosans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
    text-align: center;
}
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
    text-align:center;
}
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}
.ch-item:hover .ch-info-wrap {
    box-shadow:
        0 0 0 0 rgba(255,255,255,0.8),
        inset 0 0 3px rgba(115,114, 23, 0.8);
    background: rgba(0,0,0,.8);
}
 
.ch-item:hover .ch-info {
    transform: rotate3d(0,1,0,-180deg);
}
/*Done with Custom Buttons*/


#aboutWrap,
    #htmlSection,
    #gamesWrap,
    #contactWrap{
        -webkit-box-shadow:inset 0 -4px 20px 0px rgba(0,0,0,1);
        box-shadow:inset 0 -4px 20px 0px rgba(0,0,0,1);
    }
footer{
    text-align: center;
    padding:3% 20px 2%;
    background:url('http://theklotzdesign.com/wp-content/uploads/2014/10/moulin.png') repeat fixed transparent;
    color:#ccc;
    font-weight:bold;
    position:fixed;
    bottom:0;
    width:100%;
    z-index:-1;
}

@media (max-width: 980px){
	.mobileGreen{
		background: rgba(63, 90, 90, 0.8); 
		float:left;
		margin: 5% 0 0;
		padding-bottom:1%;
		-webkit-box-shadow: 2px -2px 4px 2px rgba(0,0,0,.5);
        box-shadow: 2px -2px 4px 2px rgba(0,0,0,.5);
        width:100%;
	}
	.midShowcase .container{
		padding-bottom:0;	
	}
	#footerWrap .left{
		text-align:center;	
	}
	#footerWrap .right img{
		margin:0 auto;
		float:none;
	}	
   .ch-info p a {
    color: rgba(255,242,34, 0.8);
	}
	.ch-item .ch-info-wrap {
		box-shadow:
			0 0 0 0 rgba(255,255,255,0.8),
			inset 0 0 3px rgba(115,114, 23, 0.8);
		background: rgba(0,0,0,.8);
	}
	 
	.ch-item .ch-info {
		transform: rotate3d(0,1,0,-180deg);
	}
	#gamesWrap img{
		margin-bottom:3%;
	}

}
@media (min-width: 980px){
     h2.name{
        font-size:64px;
        letter-spacing: 3px;
    }
    .justified h1{
        font-size: 22px;
    }
	#gamesWrap h2.sheepsTitle{
		font-size:78px;
	}
    #aboutWrap,
    #htmlSection,
    #gamesWrap,
    #contactWrap{
        -webkit-box-shadow:inset 0 -10px 60px 6px rgba(0,0,0,1);
        box-shadow:inset 0 -10px 60px 6px rgba(0,0,0,1);
    }
	#htmlSection li.html-wrap{
		bottom:-150px;
		opacity:0;
		margin-bottom:0;
	}
	#htmlSection li.html-wrap.open{
		bottom:0;
		opacity:1;
		transition:bottom .5s, opacity .5s, margin-bottom .5s, bottom .5s;
	}
	
	#htmlSection li.html-wrap:nth-child(1){transition:bottom .3s, opacity .3s, margin-bottom .3s, bottom .3s;}
	#htmlSection li.html-wrap:nth-child(2){transition:bottom .5s, opacity .5s, margin-bottom .5s, bottom .5s;}
	#htmlSection li.html-wrap:nth-child(3){transition:bottom .7s, opacity .7s, margin-bottom .7s, bottom .7s;}
}
@media (min-width: 1200px){
    h2.name{
        font-size:110px;
        letter-spacing: 3px;
    }
    .justified h1{
        font-size: 41px;
    }
	#gamesWrap h2.sheepsTitle{
		font-size:100px;
	}
}