@import url("userpicks.css"); 
@import url("base/default.css"); 
@import url("base/templates.css"); 

@font-face { font-family: 'type2';      src: url('fonts/Acrom-Regular.ttf'); }	
body {  font-family: 'type2'; } 
h1 { font-size: var(--font3); font-weight: bold; }
h2 { font-size: var(--font2); font-weight:normal;}
h3 { font-size: var(--font3); }
form input, form select 	{ height: 36px; background-color:var(--white); color: var(--black); border: 0px; border-color: #fff solid transparent;  /* width: 320px; */  outline: none; }
form select:after {
	position: absolute;  outline: none; 
	content: "";
	top: 14px;
	right: 10px;
	width: 0;
	height: 0;
	border: 0px solid transparent;
	border-color: #fff transparent transparent transparent;
  }
form label 	{display: none;}
figure img { /* position: absolute; */ width: 100%;}
footer {color: #fff;}
footer button 	{ border:0px; padding: var(--space2) var(--space4); margin: 0px var(--space2) var(--space2);}
.grid06sub section>article header { text-align:center;}
.grid06sub section>article header, .grid06sub section>article main { align-self: center; }
/*===Navigation===*/
.head {position:sticky;top: 0vh; margin-top: 0px; background:#fff; /* background: url('../../media/cover/cover1.jpg') no-repeat center fixed; background-size: cover;  */opacity: 1; -webkit-animation: fadein 2s;  animation: fadein 2s;}
.head>nav{position: relative;}
.head nav ul li a { font-weight: bold;}
/*===Landing===*/
/* #landing 			{ padding: 100px 0px;  min-height: 100vh; position: absolute; left:0px; right: 0px; top: 0px;}
#landing figure		{ display: grid; justify-content: start; align-items: center; grid-gap: 0px 4vw; grid-template-columns:  33vw 22vw 33vw 22vw 33vw 22vw 33vw;  padding:0px 0px 0px; position:relative; overflow-x: hidden;}
#landing .illustrations	{ position:absolute; top:0px; order: 1; left: 0px; right: 0px; margin-top: 0px;}
#landing .illustrations img:nth-of-type(1) { width: 240px; margin: auto; position: absolute; top: 50px; left: 0px; right: 0px; opacity: 1; -webkit-animation: fadein 6s;  animation: fadein 6s;}
#landing .illustrations img:nth-of-type(2) { width: 60px; margin: auto; position: absolute; top: 150px; left: 20vw;animation: spin 6s linear; animation-iteration-count: 1; }
#landing .illustrations img:nth-of-type(3) { width: 40px; margin: auto; position: absolute; top: 50px;  right: 24vw; animation: spin 5s linear; animation-iteration-count: 1; }
#landing .illustrations img:nth-of-type(4) { width: 30px; margin: auto; position: absolute; top: 40px; right: 46vw; animation: spin 7s linear; animation-iteration-count: 1;}
#landing .illustrations img:nth-of-type(5) { width: 80px; margin: auto; position: absolute; top: 300px; right: 8vw;animation: spin 13s linear; animation-iteration-count: 2; }
#landing p 		{ color: var(--medium); padding: var(--space3) 0px;   }
#landing button:nth-child(1){ background-color: var(--primary); color: var(--white); border:0px; border-radius: var(--space2); }
#landing button:nth-child(2){ background-color: var(--secondary); color: var(--white);}
#landing button:hover { background-color: var(--secondary);}
#landing>article { z-index: 1; position: absolute; left:0px; right:0px;}
#landing>article header { position: absolute; top: 500px; left: 0px; right: 0px;}
#landing>article footer { position: absolut e; top: 550px; left: 0px; right: 0px;}*/
#landing form { padding: 20px 0px;}
/*===About===*/
#about { padding:var(--space6) 0px; text-align: center; background: url('../../media/cover/cover3.jpg') no-repeat center fixed; background-size: cover;  }
#about article {padding: var(--space2) var(--space3) var(--wh02); }
#about figure { position: relative; width: var(--wh04); margin: var(--centered); }
#about figure img { border-radius: var(--wh02); margin-top: var(--space4); filter: grayscale(20%);}
#about header img { width: var(--wh04); }
#about header { background:rgba(255,255,255,0.8); padding:var(--space4) 0px; border-top-left-radius: var(--space3); border-top-right-radius: var(--space3); }
#about main { background:rgba(255,255,255,0.8); padding:var(--space3); border-bottom-left-radius: var(--space3); border-bottom-right-radius: var(--space3); }
/*===Shop & Writing ===*/
.dark, #writing>div h1 { background-color: var(--primary); color: var(--white);}
#shop, #writing { margin-top: calc(-1*var(--wh01)); padding: var(--wh01) 0px;}
#shop>p { width: var(--wh06); margin: var(--centered);}
#shop>div {  margin: var(--centered); display: grid; justify-content: center; grid-gap: 0px var(--gap);  grid-template-columns: var(--wh03)  var(--wh03) var(--wh03); padding: var(--space4) var(--space2); }
#writing { margin-top:20vh; padding:var(--space6) 0px; }
#writing::before { content: url('../../media/brand/icon-flower-up.png'); margin:auto; }
#writing::after { content: url('../../media/brand/icon-flower-down.png'); margin:auto; }
#writing article>header>h1 { color: #999; padding:0px var(--space6);}
#writing>div {  margin: var(--centered); display: grid; justify-content: center; grid-gap: 0px calc(3*var(--gap));  grid-template-columns: var(--wh03)  var(--wh03) var(--wh03); padding: var(--space4) var(--space2); }
#writing>div h2 { font-size: var(--font2); font-family: var(--type3); font-weight: bold; font-style: italic; height: var(--wh01); margin-bottom: var(--space4); }
#writing>div span { font-size: var(--font4); line-height: var(--line4);}
#writing li { text-align: left;}
#writing section main { 
	overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  text-align:center;
}
#writing #articles h2 { font-size: 12px; color: var(--tetiary);}
/*===Contact ===*/
#contact { padding: var(--space4) 0px; width: var(--wh07); border-radius: var(--space3);  margin: -60px auto 120px; /*  background: url('../../media/cover/cover3.webp') no-repeat center fixed; background-size: cover;  */}
#contact h2 { font-size: var(--font4);}
#contact form label { display: block; }
#contact article { width: var(--wh07); margin:auto;}
#contact form>main {  margin:auto; display: grid; justify-content: center; grid-gap: 0px var(--gap);  grid-template-columns: var(--wh03)  var(--wh03) ; padding: var(--space4) var(--space2);    text-align: center;
	grid-template-areas:"input1 input2" 
						"input3 input4"  
						"input5 input5"
						"input6 input6";
}
#contact label  	{ line-height: var(--line3); padding: var(--space3) 0px 0px;}
#contact input 		{ border:0px solid var(--black); width: 100%; }
#contact textarea 	{ width: 100%; min-height: 100px; }
#contact form>main>div:nth-child(1) { grid-area: input1; }
#contact form main>div:nth-child(2) { grid-area: input2; }
#contact form main>div:nth-child(3) { grid-area: input3; }
#contact form main>div:nth-child(4) { grid-area: input4; }
#contact form main>div:nth-child(5) { grid-area: input5; }
#contact form button { width: var(--wh06); line-height: var(--line3);  margin:auto; }
#contact form>button{ background-color: var(--secondary); color: var(--white); border:0px; line-height:var(--line3); margin-top: var(--space3);}
body>.footer{ background-color: var(--secondary);}
body>.footer header { font-weight:bold; }
body>.footer main a  { color: var(--neutral); }
body>.footer main a:hover  { color: var(--white); }

#landing img 	{ position: relative; left:-3vw; width:34vw;}


#projects 		{ vertical-align: top; text-align: center;}
#projects h2 	{ font-size:var(--font4); font-weight: bold;}
#projects ul 	{ text-align:left;}
#projects img 	{ position: relative; top:-7vw; width:25vw;}

#didyouknow h2 	{ font-size:var(--font4); font-weight: bold; color:var(--secondary); }
#didyouknow ol  { max-width: 480px; text-align: left; margin:0px auto; }

#volunteer img 	{ width:40vw;}
#volunteer h2 	{ font-size:var(--font4); font-weight: bold; text-align:right; position:relative; top:-10vw; color:var(--primary); }


#training {padding:0px 0px 20vw; }
#training figure img 	{display:none; }
#training h2 	{ font-size:var(--font4); font-weight: bold; color:var(--secondary); }

.layme001>article, .layme001alt>article {
	grid-template-areas:"media media head head"
"media media body body"
"media media feet feet"
"media media  tray  tray"
"media media sider sider"
"media media price price"
"draw  draw  draw  draw";
}

/*===Mobile ===*/
@media screen and (max-width: 768px) {
	#contact { padding: 30px 0px var(--wh02); width: auto;         
	}
	#contact form { grid-template-columns: var(--wh02)  var(--wh02) ; }
	#contact form>button { width: var(--wh04); line-height: var(--line3);  }
	#landing {text-align: center;}
	.head { background: transparent;}
	#about article { text-align: center;}
	#writing>div h3 {height: auto; padding: var(--space3) var(--space1); }
	#shop>div, #writing>div { grid-template-columns: var(--wh04); padding: var(--space3) var(--space1); }
	#about figure img { margin-top: 0;}
	section { overflow-x: hidden;}	

	#projects h2, #didyouknow h2, #volunteer h2, #training h2, #contact h2 {font-size:var(--font3);}
	#contact article { width: auto; }
	#contact form>main {  margin:auto; display: grid; justify-content: center; grid-gap: 0px var(--gap);  grid-template-columns: var(--wh02)  var(--wh02) ; }
	.layme001>article, .layme001alt>article {
		grid-template-areas:"media media media media" 
		"head head head head"
	"body body body body"
	"feet feet feet feet"
	"tray  tray  tray  tray"
	"sider sider sider sider"
	"price price price price"
	"draw  draw  draw  draw";
	}
	body>.footer { width: 100vw;  flex-wrap: wrap; text-align:center; }
}



.reveal {
	position: relative;
	opacity: 0;
  }
  
  .reveal.active {
	opacity: 1;
  }
  .active.fade-bottom {
	animation: fade-bottom 1s ease-in;
  }
  .active.fade-left {
	animation: fade-left 1s ease-in;
  }
  .active.fade-right {
	animation: fade-right 1s ease-in;
  }
  @keyframes fade-bottom {
	0% {
	  transform: translateY(50px);
	  opacity: 0;
	}
	100% {
	  transform: translateY(0);
	  opacity: 1;
	}
  }
  @keyframes fade-left {
	0% {
	  transform: translateX(-100px);
	  opacity: 0;
	}
	100% {
	  transform: translateX(0);
	  opacity: 1;
	}
  }
  
  @keyframes fade-right {
	0% {
	  transform: translateX(100px);
	  opacity: 0;
	}
	100% {
	  transform: translateX(0);
	  opacity: 1;
	}
  }

  .fromleft 	{   position: relative; left: 0px; -webkit-animation: moveright 4s;  animation: moveright 4s;}
.fromright 	{   position: relative; right: 0px; -webkit-animation: moveleft 4s;  animation: moveleft 4s;}
.fromtop 	{   position: relative; top: 0px; -webkit-animation: movedown 4s;  animation: movedown 4s;}
.frombottom {   position: relative; bottom: 0px; -webkit-animation: moveup 4s;  animation: moveup 4s;}
.fadein 	{   opacity: 1; -webkit-animation: fadein 4s;  animation: fadein 4s;}
.shake:hover{ animation: shake 0.5s;  animation-iteration-count: infinite; }
.zoomin, .zoomout 	{ transition: transform 1s ease; }
.zoomin:hover 		{ transform: scale(1.3); } 		
.zoomout:hover 		{ transform: scale(0.8); }
.spin 				{ animation: spin 4s linear; animation-iteration-count: infinite; }
@-webkit-keyframes moveright {  from {left: -100vw;}  to {left: 0px;}}@keyframes moveright { from {left: -100vw;}  to {left: 0px;}}
@-webkit-keyframes moveleft {  from {right: -100vw;}  to {right: 0px;}}@keyframes moveleft { from {right: -100vw;}  to {right: 0px;}}
@-webkit-keyframes movedown {  from {top: -100vh;}  to {top: 0px;}}@keyframes movedown { from {top: -100vh;}  to {top: 0px;}}
@-webkit-keyframes moveup {  from {bottom: -100vh;}  to {bottom: 0px;}}@keyframes moveup { from {bottom: -100vh;}  to {bottom: 0px;}}
@-webkit-keyframes fadein {  from {opacity: 0;}  to {opacity: 1;}} @keyframes fadein { from {opacity: 0;}  to {opacity: 1;}}
@keyframes shake {  0% { transform: translate(1px, 1px) rotate(0deg); }  10% { transform: translate(-1px, -2px) rotate(-1deg); }  20% { transform: translate(-3px, 0px) rotate(1deg); }  30% { transform: translate(3px, 2px) rotate(0deg); }  40% { transform: translate(1px, -1px) rotate(1deg); }  50% { transform: translate(-1px, 2px) rotate(-1deg); }  60% { transform: translate(-3px, 1px) rotate(0deg); }  70% { transform: translate(3px, 1px) rotate(-1deg); }  80% { transform: translate(-1px, -1px) rotate(1deg); }  90% { transform: translate(1px, 2px) rotate(0deg); }  100% { transform: translate(1px, -2px) rotate(-1deg); }}
@-webkit-keyframes spin {    from { -webkit-transform: rotate(0deg); }    to { -webkit-transform: rotate(360deg); }}
@keyframes spin {  from {transform:rotate(0deg);}    to {transform:rotate(360deg);}}
@-webkit-keyframes slider {  20% {margin-left: 0px;}  30% {margin-left: -100%;}  50% {margin-left: -100%;}  60% {margin-left: -200%;}  70% {margin-left: -200%;}  80% {margin-left: -300%;}  90% {margin-left: -300%;} }
@keyframes slider {  20% {margin-left: 0px;}  30% {margin-left: -100%;}  50% {margin-left: -100%;}  60% {margin-left: -200%;}  70% {margin-left: -200%;}  80% {margin-left: -300%;}  90% {margin-left: -300%;} }