@import url(https://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
  font-style: normal;
  font-weight: normal;
}

input#Title { display: none; }

.gpu {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

html, body{

-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; text-align: center;
  padding:0; margin: 0;
}
body{
  text-align: center; background: #CCC no-repeat fixed; height:100%; padding:0; margin: 0;
  background-image: url('/template/left-bg.jpg'), url('/template/right-bg.jpg');
  background-position: left top, right top;


}
body,h1,h2,h3,div,.wall,.blk,.button, span{
    font-family: 'Bell Gothic';
    font-weight: 900;
    font-style: normal;
    line-height: 1.1em;
  }
  
  input {
    border-radius: 0;
    -webkit-appearance: none;
}

#home-wrap{top:10px; right: 80px; position: absolute; z-index: 500;}
#home-icon{width: 70px; height: 70px; border-radius: 35px; text-align: center; position: fixed; }
#home-icon img{width: 60px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -moz-user-select: none; -webkit-user-select: none; user-select: none;}

.std{font-family: 'Bell Gothic Std'; font-weight: bold; font-style: normal;}
  
 .wall{background-image: url('/template/wall-texture.jpg'); min-height: 300px; text-transform: none; font-size: 22px}
.huge{font-size: 64pt;}
.big{font-size: 36pt}
.med{font-size: 26pt;}
.body{font-size: 20pt}
.vpad{padding: 30px 0}
.vmore{padding: 120px 0}
.nopad{padding: 0}
.nomargin{margin:0}
.tleft{text-align: left;}

#social li a{text-decoration: none}


h1{ line-height: 1em; margin: 0 0 0.2em 0; padding:0}
h2{ margin: 0; padding:0}
.white{color: #FFF}
.tash,.ttash{max-width: 20%; margin: 15px 0}
.logo{max-width: 60%; margin-top: 20%}
#footer .logo{margin-top: 0}
.content h3 *{font-size: 34px}
.content h2 *{font-size: 42px}
.pen, .content h3 *, .content h2 *, .content h4 *, .content h3, .content h2, .content strong{
  font-family: 'Permanent Marker';
  font-weight: normal;
  font-style: normal;
}
.center{margin:0 auto; max-width: 1920px; background: #666; overflow-x: hidden; position: relative}
.upper{text-transform: uppercase}

.hero{padding:3%; margin: 0; display: block; background-image: url('/template/hero.jpg'); background-size: cover}
#menu{background-color: rgba(230,8,129,0.6); background-image: url('/template/pattern1.png'); padding: 50px 15px; }
#menu .buttons, #nav .buttons{padding: 0 5%; position: relative;}
.buttons{font-size: 18pt}
.buttons .med{font-size: 20pt}
#menu .button, #nav .button,.button{line-height: 110px; display: block; border: 2px solid white; margin: 2%; padding:0; position: relative; color: inherit; text-decoration: none}
#menu .button span, #nav .button span,.button{line-height: 1em; display: inline-block; vertical-align: middle; font-size: 24pt;}
.img-fill{display: block;}

.hover,.body,.purple{color:#4C3041}

.box{position: relative;}
.box .badge{background-image: url('/template/pattern1-30.png');}
.box .hover{position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index: 10; font-size: 30pt; display: none;}

.button .badge{font-size: 2.5vw; padding: 0 20%; line-height: 0.9em; display: none;}
.button:hover .badge{display: flex}

.yellow{background-color: rgba(255,198,41,0.8) !important}
.orange{background-color: rgba(255,77,0,0.8) !important}
.blue{background-color: rgba(84,192,232,0.8) !important}
.green{background-color: rgba(175,202,11,0.8) !important}
.pink{background-color: rgba(230,8,129,0.8) !important}
.light{background-color: rgba(255,255,255,0.8) !important}
.purple-bg{background-color: #4c3041}

.shadow{  
	-moz-box-shadow: 0 0 12px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 12px rgba(0,0,0,0.5);
box-shadow: 0 0 12px rgba(0,0,0,0.5);
}

.yellow .fold{background: #FFE7AF;}
.orange .fold{background: #FFDECC;}
.blue .fold{background: #D1EBF8}
.green .fold{background: #E3EDC6}
.pink .fold{background: #F8CAE0}
.light .fold{background: #FFF}
.purple-bg .fold{background:#c5bbc0}

.fold{position: absolute; left:0; bottom:0; right:0; top:0; clip-path: polygon(100% 65%, 92% 100%, 90% 80%); -webkit-clip-path: polygon(100% 65%, 92% 100%, 90% 80%)}
.tall .fold{clip-path: polygon(100% 40%, 92% 100%, 87% 90%); -webkit-clip-path: polygon(100% 40%, 92% 100%, 87% 90%)}

.pattern{
  background-position: center -110%;
  -webkit-background-size: 25%;
  -moz-background-size:  25%;
  -o-background-size: 25%;
  background-size:  25%;
}
.full{
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}
.zoom{transition: background-size 0.3s}
.zoom:hover{
  -webkit-background-size: 120%;
  -moz-background-size: 120%;
  -o-background-size: 120%;
  background-size: 120%;
}
.zoom:hover .hover{display: block;}
.zoom:hover span{opacity:0.5}
.box{padding-top: 56.25%;  width:100%; position: relative; text-align: center;
  -webkit-background-size:  105%;
  -moz-background-size: 105%;
  -o-background-size:  105%;
  background-size: 105%;
  background-position: center center

}
.badge{position: absolute; top:50%; left:50%; width: 65%; height:35%; transform: translate(-50%,-50%);
  background-size: auto 100%;
  display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
   font-size: 32pt;
}
.button .badge{left:0; top:0; transform: none; right:0; bottom: 0; width:auto; height: auto;}
.badge.short{clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 92% 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 92% 100%, 0% 100%);}



.badge span{ padding: 0 15%; line-height: 0.9em; width: 70%;}
.badge.tall{clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 92% 100%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 92% 100%, 0% 100%);}

#footer{background-color: #4C3041; background-image: url('/template/pattern1.png'); padding: 3% 3% 50px 3%; font-size: 14pt}
#footer .tash{max-width:25%}
#footer h2{color:#FEB0C0} 

#nav{position: fixed; max-width: 1660px; left:3%; top:-60px; height:60px; right:3%; background: rgba(230,8,129,0.85); z-index: 200; transition: top 0.3s, height 0.3s; overflow-y: hidden; max-height: 100%; }
#nav .buttons{display: none}
#nav .ttash{max-width:30%}
#nav .tash, #social li{opacity: 0.6; transition: opacity 0.3s; cursor: pointer;}
#social{padding:0; margin: 0 0 0 15%; list-style: none;}
#social li{display:inline-block; line-height: 56px; width:50px; height: 50px; font-size: 22px;}
#social li:hover, #nav .tash:hover{opacity: 1;}

#nav.sticky{top: 0}


.field,.btn{background: rgba(255,255,255,0.8); height: 80px; line-height: 80px; text-align: center; font-size: 20px; border: none; outline: none}
  .btn{color: #FFF; background-color: #ffc629; width: 100%; border: 2px solid #FFF; cursor: pointer;}
 .btn .on{display: none}
 .btn:hover{background: #4c3041; color: #ffc629}
 .blue .btn:hover{ color: #4C3041}
 .btn:hover .on{display:inline-block}
 .btn:hover .off{display:none}
.search .field{ width: 100%; margin-bottom:20px; padding:0}
.small.btn{font-size: 24px; height: 45px; line-height: 42px; width: 170px; }

.yellow-full{background-color:#ffc629}
.green-full{background-color:#afca0b}
.pink-full{background-color:#feb0c0}
.blue-full, .blue .search .btn{background-color:#54c0e8}
.purple-full{background-color:#4C3041}


.orange-full{background-color:#ff4d00}
.orange-txt{color:#ff4d00 !important}
.yellow-txt{color:#ffc629}
.pink-txt{color:#e60881}

textarea{resize: vertical;}


.txt figure iframe{width: 100% !important; height: 400px !important}

.rail{  background: url('/template/wire.png') repeat-x; background-size: auto 120px; overflow:visible; position: relative; min-height: 250px}
.rail .pin,  .label, .label.entry{position: absolute; top:0; height:120px; left:50%; transform: translateX(-50%); z-index: 50}
.label,.label.entry{z-index: 20; color: #FFF; width: 240px; padding: 30px 20px 20px 20px; top:86px; height: auto; font-size: 28px}
.label.entry{position: relative; transform: none; color:#4C3041; width: auto; font-size: 32px; left:0; top:auto; margin: 0 20px -20px 20px }
.rail .pic, .rail .vid{width: 95%; margin: 90px 0 30px 0}
.rail .vid{padding-top: 53.485%; background-size: cover; background-position: center center; display: inline-block}
.personal .label{top:-10px}

.label.entry{position: relative; margin-bottom: 30px}


#nav .button,.button{border: 2px solid white;  display: block; margin:5px; line-height: 1em; padding: 10px 0; cursor: pointer}
#nav .button:hover{background-color: #feb0c0}

#nav .field{color:#4c3041}
#nav .button span{font-size: 16px}
#nav .search .btn{background-color: #feb0c0}
#nav .btn:hover{background: #4c3041; color: #fff}

#nav.open{overflow-y:auto; height: auto}
#nav.open .buttons{display:block}
#nav.open .btash{visibility: hidden; pointer-events: none}

#body .content{max-width: 1500px; margin: 0 auto; position: relative}
#body .content .txt{margin:0 5%;}
#body .content .slide{width:100%; height: auto; }
#body .content .video{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56%;
}
#body .content .video iframe{width:100%; height:100%; position: absolute; top:0; left:0; border: none}
.feature .btn{background: rgba(255,255,255,0.6); display: inline-block; padding: 15px 25px; width: auto; text-align: center; border: 2px solid #ff4d00; color: #ff4d00}


#body .paper, .feature{ width: auto; position: relative; }
#body .paper .white{background: rgba(255,255,255,0.9); padding: 20px;}
#body .paper .white *, #body .content .txt *{line-height: 1.4em}
.clip{position: absolute; top: 0; left: 50%; transform: translate(-50%,-70%); width: 110px}
.personal .clip{z-index: 50}
.paper .edge{width:100%}
.feature img{position: absolute; right:10%; top: -10px; width:30%; transform: rotate(10deg)}

.book {transform: rotate(10deg); width: 50%}
.feature h3{margin:15px 0 0 0}

.pure-u-1{position: relative}
.disc{width:130px; height: 130px; border-radius: 65px; position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); border-color: #FFF; border-width: 2px; border-style: solid; color: #FFF; font-size: 14px}
.disc .big{margin-top: 17px; display: inline-block}
.bookpic{margin-right: 0}

.gallery{margin: 40px 5%}
.personal{margin: 40px 3%}


::placeholder{color: #ffc629; font-family: 'Bell Gothic';
    font-weight: 900;
 }
 textarea{font-size: 16px; width:96%; padding: 2%; border: none; height: 80px; margin-bottom: 20px}
 .orange-txt::placeholder{color:#ff4d00 !important}
 #nav ::placeholder{color: #feb0c0;}
.blue ::placeholder{color:#54c0e8;}
.green ::placeholder{color:#95c11f;}
 
 .button .badge{font-size: 18px}
 .txt a, .white a{color: inherit}
 
 #article p{padding: 0 5%}
 
 .medium, .lastbit p:first-child{font-size: 26px} 
 .btn.medium{font-size: 26px; margin-bottom: 60px}
 
 #body .logo{width: 60%; margin-top: 12%;}
 
 .about .feature{margin-top: 40px}
 .about .feature .btn{line-height: 1em; height: auto; width: 40%; font-size: 32px; margin-right: 4rem}
 .about .feature img{width:20%}
 .about .feature h3{margin-right:4vw; font-size:5vw;}
.end .tash{margin: 40px 0 !important}
.btn{text-decoration:  none; color: inherit}
.form{max-width: 740px; padding: 0 }
.form .badge{width: 90%}
.field.small{font-size: 24px; line-height: 62px; height: 62px; width: 94%; margin: 10px auto; text-align: left; padding: 0 3% }


.videoContainer {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				display: none;
				}
				
				.videoContainer__video {
					position: absolute;
					width:130%;
					height: 140%;
					top:-20%; left:-15%;
					
				
				}
				
				@media screen and (min-width:1280px){
					.videoContainer {display: block}
					
					
					}



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



	

	
	.end .tash{width: 30% !important}
	.about .feature {position:absolute; left:-4vw; top: 0}
	 .about .feature h3{margin-right:6vw; font-size:1.5vw;}
	 .about .feature .btn{font-size:1.5vw; margin-right:6vw;  width: auto}
	.about .feature img{width:30%}
	  .foot{margin:-120px 5% 70px 5% !important}
	
	 #body .logo{float: right}
	 .medium, .lastbit p:first-child{font-size: 32px; line-height: 1em}
	 .btn.medium{ margin-bottom: 0}
	.gallery{margin: 40px 20%}
	.personal{margin: 60px 15%}
	.bookpic{margin-right: -50%}
	.disc{width:170px; height: 170px; border-radius: 85px}
	.disc .big{margin-top: 30px}
	 #article p{padding: 0 18%}
	 .button .badge{font-size: 24px}
	#body .content .tash{ width: 10%}
	.label.entry{left:40px;   width: 460px; font-size: 42px; margin-bottom: -15px}
		.search .field{ width: 70%; margin-bottom: 0}
	  .btn{width:20%}
	  .btn.sign{width: 240px;}
	  .field,.btn{ font-size: 32px}
	  #nav.open{bottom:auto}
	  #nav .ttash{max-width:10%}
	  #body .content .txt{margin-left: 5%;  }
	  .about .txt{margin-left:0}
	 
	  #body .paper{margin:-836px -20px 0 0 }
	  #body .paper .white{padding: 40px}
	  

	  
	#home-wrap{top:20px; right: 120px;}
	#home-icon{width: 100px; height: 100px; border-radius: 50px; text-align: center; position: fixed; }
	#home-icon img{width: 70px; }
	 
}
  

@supports (-ms-ime-align: auto) {
  .badge .fold {
      display: none !important
  }
}