@charset "UTF-8";

html,body{  
	font-size:17px;
	font-weight:600;
	font-family:'Noto Sans TC','Arial', sans-serif; /*'Helvetica'*/
	
	color:#000; 
	background:#fff;
	
 	width:100%; height:100%; margin:0;
	
	text-size-adjust:none;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}


img{ border:none; padding:0; margin:0;  }
a{ font-size:inherit; color:inherit; text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0);  }
body, html, div, select, input, textarea, img, span{  -webkit-tap-highlight-color:rgba(0,0,0,0); }

h1,h2,h3,h4{ font-family:inherit; font-weight:inherit; font-size:inherit; line-height:inherit; margin:0; padding:0; display:inherit; }
p{ margin:0 0 1em 0; line-height:1.5 }
p:first-child{ margin-bottom:1em; }
p:last-child{ margin-bottom:0; }
div:nth-child(2) > p:first-child{ margin-top:.5em; }
.panel-container-inner  a{ text-decoration:underline}

input{ background-color:transparent; border:none; color:inherit; font-size:inherit  }
input:focus, textarea:focus{ outline:none; color:inherit;   }
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
    background:transparent; -webkit-box-shadow:inset 0 0 0px 9999px #111; box-shadow:inset 0 0 0px 9999px #111; color:inherit; -webkit-text-fill-color:#000!important;
}

ul, li{  padding:0; margin-left:0.8em; list-style-type: decimal; }
ol, ol li{ margin-left:0; padding-left:0; }
ol{ margin-left:0em; margin-top:0; }
ol li{ margin-bottom:0em; list-style-position:inside;  }

button{ padding:0; margin:0; border:none; background-color:transparent; font-family:inherit; font-size:inherit; font-weight:inherit; color:inherit; line-height:1; cursor:pointer; }

.clear{ clear:both; }
 
/* text style */
.txt-simchiese{ font-family:'Noto Sans SC','Arial', sans-serif; }
.txt-zh{ font-size:.9em; transform:translateY(-9%)}
.txt-white{ color:#fff; }
.txt-black{ color:#000; }
.txt-red{ color: #ed1b2e!important}

.txt-giant{ font-size:5.5rem; }
.txt-subhead{ font-size:3rem; line-height:1.2 }
.txt-large  { font-size:1.5rem;}
.txt-middle  { font-size:1.2rem;}
.txt-normal { font-size:1rem;  }
.txt-tiny  { font-size:0.66rem;}

.txt-wide{ letter-spacing:0.1em;}
.txt-bold   { font-weight:800;}

.txt-shadow{ /*text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px  1px 0 #fff, 1px  1px 0 #fff;*/ }

.txt-writterine{font-family: 'Writterine Demo'!important;}
.txt-brewery{ font-family:'Local Brewery'!important; }

.txt-outline{  -webkit-text-stroke-width:1px;  -webkit-text-stroke-color:black;}
.clip-txt{ clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%); -webkit-clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 0%); }
/* text style */



/* General */
.bg-default{ background-repeat:no-repeat; background-size:cover; background-position:center; }
.bg-contain{ background-repeat:no-repeat; background-size:contain; background-position:center; }

.site-container{position:relative; width:100%; height:100%; overflow:hidden; min-height:900px }

#canvas-wave{ position:absolute; width:100%; height:100%; transform:translate(-50%,-50%); top:50%; left:50%; opacity:.4 }
.canvas-container{ top:0%; left:0%; position:absolute; width:100%; height:100%; pointer-events:none; background-image:url("../img/bg.jpg")  }

.generic-button{  border-radius:1000px; padding:.5em 1em; min-width:7em; font-weight:800; color:#fff; letter-spacing:.1em; box-shadow:.1em .1em .4em 0em rgba(0,0,0,.4); pointer-events:all; /*background:rgba(200,200,200,1);*/ background:rgba(237,27,46,1);  }
.generic-button.active{ pointer-events:all;  }
.generic-button.hover{ color:rgba(237,27,46,1); background:#fff }


.alert-container{ position:fixed; width:100%; height:100%;  top:0%; left:-1000%; background:rgba(255,255,255,.5); backdrop-filter:blur(.5em); -webkit-backdrop-filter:blur(.5em); display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; z-index:10; }
.alert-container.active{ left:0;} 
.alert-container-inner > div:nth-child(1){ margin-bottom:1em; text-align:center; width:100%; white-space:nowrap  }
.alert-container-inner > div:nth-child(2){ margin:2em auto; text-align:left; width:90%; max-width:640px; display:none}
.alert-container-inner > div:nth-child(3){ margin:auto; text-align:center}

.alert-container-inner ol{ font-size:0.9em; font-weight:400;}
ol > li{ margin-bottom:.75em }
ul > li{ list-style-type:lower-roman  }
ol > li > ul{ margin-top:.5em }
/* General */


.logo-container{ position:absolute; top:0; right:0; width:10em; z-index:2;}
.core-container{ position:absolute; width:100%; min-height:100%; display:flex; justify-content:center; align-items:center;  }

.lang-container{ position:absolute; top:1em; left:1em;  display:flex; z-index:1;  }

.lang-container > a {border-radius:1000px; width:2em; height:1em; padding:.5em 0;   color:#000;  background:#fff; text-align: center;box-shadow:.01em .01em .04em 0em rgba(0,0,0,.4); margin-right:.5em; align-items:center; display:flex; justify-content:center; line-height:1}
.lang-container > a.active, .lang-container > a.hover{color:#fff;  background:rgba(237,27,46,1);}



/* panel */
.panels-container{ width:70%; max-width:1200px; padding:5em 0; min-height:calc(100% - 10em); position:relative; overflow:auto; display:flex; justify-content:center; align-items:center;  margin:auto; }
.panels-container-inner{ width:100%; padding-bottom:60%; position:relative;  }
.panels-container.home{ overflow:visible; }

.page-container{ position:absolute; width:100%; height:100%; top:0; left:-10000vw; }

.panel-container{ border-radius:2em; position:absolute; backdrop-filter:blur(.3em); -webkit-backdrop-filter:blur(.3em); display:flex; align-items:center   }
.panel-container.white{ background:rgba(245,245,245,0.5); box-shadow:0px 0px .6em .1em rgba(255,255,255,.8);}
.panel-container.red{ background:rgba(237,27,46,0.5); box-shadow:0px 0px .5em .1em rgba(255,255,255,.8); backdrop-filter:blur(.5em); -webkit-backdrop-filter:blur(.5em);}
.panel-container.empty{ background:rgba(237,27,46,0); box-shadow:none; backdrop-filter:blur(.0em); -webkit-backdrop-filter:blur(0em);}

.panel-container.square{ width:calc(56% - 2em); height:calc(70% - .5em); top:0; left:1em;  }
.panel-container.rect{ width:calc(56% - 2em); height:calc(48% - .5em); top:0; left:1em;  }
.panel-container.question{ width:calc(100% - 2em); height:calc(40% - 1em); top:calc(48% + 1em); left:1em;  }
.panel-container.banner{ width:calc(56% - 2em); height:calc(30% - .5em); top:calc(70% + .5em); left:1em; z-index:1  }
.panel-container.portrait{ width:calc(44% - 2em); height:100%; top:0; right:1em; background:rgba(255,255,255,0);  }
.panel-container.hints{ width:calc(56% - 2em); height:calc(40% - .5em); top:calc(48% + .5em); left:1em;  }
.panel-container.photo{ width:calc(44% - 2em); height:calc(88% - 0em); top:0; right:1em; background:rgba(245,245,245,0.75); }
.panel-container.full{ width:calc(100% - 2em); left:1em; height:100%; top:0;  }
.panel-container.question-empty{ display:block; }

.panel-container.major{ width:calc(100% - 2em); height:6em; top:-3.5em; left:1em;  }
.panel-container.major p{ margin-top:.25em}
.panel-container.major br{ display:none}
/*
.page-container:nth-child(1) .square, .page-container:nth-child(1) .portrait{ top:3.5em}
.page-container:nth-child(1) .banner{ top:calc(70% + 4em);}

.banner .panel-slide-container{ position:absolute; width:100%; height:100%; display:flex }
.panel-slide-container.second{ display:none}
*/
.panel-container-inner{ width:calc(100% - 4em); margin: auto;  }

.panel-container.question-empty .panel-container-inner {  width:100% }
.panel-container.hints .panel-container-inner, .panel-container.photo .panel-container-inner{ display:flex; align-items:center; justify-content:space-between; width:calc(100% - 8em); max-width:480px; letter-spacing:.1em  }
.panel-container.photo .panel-container-inner{  justify-content:center; text-align:center}

.panel-container{ clip-path:polygon(-5% -5%, -5% -5%, -5% 100%, -5% 100%);   }
.clip-top{ clip-path:polygon(-5% -5%, 105% -5%, 105% -5%, -5% -5%);  }
.clip-right{ clip-path:polygon(105% -5%, 105% -5%, 105% 105%, 105% 105%);  }
.clip-default{ transition:clip-path 0s cubic-bezier(0,.68,.54,1)!important; }

.page-container.active{ left:0;  }
.page-container.active .panel-container{ clip-path:polygon(-5% -5%, 105% -5%, 105% 105%, -5% 105%); transition:clip-path .4s cubic-bezier(0,.68,.54,1);   }
.page-container.active .panel-container:nth-child(2){ transition-delay:.2s}
.page-container.active .panel-container:nth-child(3){ transition-delay:.5s}

.page-container.active .panel-container.full{ transition:clip-path .8s cubic-bezier(0,.68,.54,1);   }

/* panel */


/* typewriter */
.typewriter{ position:relative; width:100%}
.typewriter > h1{ opacity:0; }
.typewriter > div{ position:absolute; top:0; left:0;  }
.typed-cursor{ font-weight:400; color:rgba(0,0,0,0.6)}
/* typewriter */


/* home */
.page-container.active .staff-card{ transform:translateZ(0em) rotateY(11deg); transition:transform .5s .5s cubic-bezier(0,.68,.54,1);  }
.page-container.active .staff-card.added{ transition:transform .5s cubic-bezier(0,.68,.54,1);  }
.page-container.active .staff-card.next{ transform:translateZ(0em) rotateY(-11deg);  }

.button-container{ position:absolute; bottom:2em; right:2em}

.tnc-container{ position:absolute; left:2em; bottom:2.5em; display:flex; align-items:center; letter-spacing:.5px}
.tnc-container > button{ height:1em; width:1em; border:1px solid #000; margin-right: .5em; position:relative}
.tnc-container.active > button:after{ content:''; position:absolute; border:2px solid #000; border-top:0; border-right:0;  width:80%; height:40%; top:45%; left:50%; transform:translate(-50%,-50%) rotate(-55deg)}
.tnc-container.error{ color:#ff0000}
.tnc-container.error > button{ border-color:#ff0000}


.icons-container{ display:flex; height:5em; width:100%; margin:.5em  0 3.5em 0; justify-content:flex-start  }
.icons-container > div {margin-right: .8em;  width:6em}
.icon-pic{position: relative; width:100%;left:0%; height:100%; text-align:center;  }
.icon-pic > img{ height:100%; width:auto}
.icon-info{text-align: center}


.mc-container{ background-position:top right; width:48%; height:90%; background-image:url("../img/mc.png"); position:absolute; top:10%; right:.4em;  }
.panel-container.banner .panel-container-inner p > br:nth-child(2){ display:none}

.lens-flare{ position:absolute;  width:2.5em; height:100%; top:50%; right:0em; transform:translate(50%,-50%); background-image:url("../img/lens-flare.svg");}

.card-job-title-container{ background:#fff; border-radius:1000px; width:calc(100% - 3em - 1.5em); height:auto; margin:1.25em auto; padding:.5em .75em; position:relative}
.card-job-icon-container{ background:rgba(237,27,46,1); width:2em; height:2em; border-radius:1000px }
.card-job-label-container{ position:absolute; left:3.5em; top:50%; transform:translateY(-50%); letter-spacing:.1em;}

.card-job-sample-container{ position:relative; width:calc(100% - 3em); margin:auto; height:calc(100% - 7em); filter:url('#flt_tag');  }
.card-job-sample-container > div{ position:absolute; top:0; left:0; width:100%; height:100%; clip-path:polygon(0% 0%, 80% 0%, 100% 20%, 100% 100%, 20% 100%, 0% 80%);   }
.card-job-sample-container > div > div{ position:absolute;  width:100%; height:100%; top:0; left:0;  }

.card-job-sample-container > div > div:nth-child(1){ opacity:1; box-shadow:inset 0 0 .8em .1em rgba(0,0,0,.8); }
.card-job-sample-container > div > div:nth-child(2){ opacity:1; box-shadow:inset 0 0 .8em .1em rgba(0,0,0,.8);}
.card-job-sample-container > div > div:nth-child(1):after, .card-job-sample-container > div > div:nth-child(2):after{ content:''; position:absolute; background:rgba(0,0,0,.3); height:23%; top:81%; width:.8em; left:-.4em; transform:rotate(-34deg); transform-origin:top center; filter:blur(.1em)  }
.card-job-sample-container > div > div:nth-child(1):before, .card-job-sample-container > div > div:nth-child(2):before{ content:''; position:absolute; background:rgba(0,0,0,.3); height:23%; top:.5%; width:.8em; left:calc(80% - 0em); transform:rotate(-34deg); transform-origin:top center; filter:blur(.1em)  }

.card-job-sample-container > div > div:nth-child(3){  transform:translate(0.4%,0.2%) scale(1); /*animation:glitch-offset-ani 4s steps(2) infinite;*/ transform-origin:left center; display:none }
.card-job-sample-container > div > div:nth-child(4){ transform:translateX(3%); opacity:1;}
.card-job-sample-container > div > div:nth-child(5){ transform:translateX(-2%); opacity:1; }
.card-job-sample-container > div > div:nth-child(6){ transform:translateX(-4%); opacity:1; }

.page-container.result .card-job-sample-container > div > div{ background-position:center 33%}

.page-container.active .mc-container:last-child{ /*animation:glitch-anim-building-out 5000ms infinite linear forwards;*/ }

@keyframes glitch-anim-building {
	0% { clip-path:polygon(0 0%, 100% 0%, 100% 100%, 0 100%);  }
	2%, 8%{ clip-path:polygon(0 80%, 100% 80%, 100% 86%, 0% 86% ); transform:translate(-2%, 0%); }
	6%{ clip-path:polygon(0 80%, 100% 80%, 100% 86%, 0% 86% ); transform:translate(1%, 1%);}
	9%{ clip-path:polygon(0 80%, 100% 80%, 100% 86%, 0% 86% ); transform:translate(-1%,1%); }
	
	10%{ clip-path:polygon(0 47%, 100% 47%, 100% 50%, 0% 50%); transform:translate(8%, -2%); }
	13%{ clip-path:polygon(0 47%, 100% 47%, 100% 50%, 0% 50%); transform:translate(-1%,-1%); }
	
	14%,21%{ clip-path:polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0); transform:translate(5%, 0%); }
	
	25% { clip-path:polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0); transform:translate(5%, 0%);  }
	30% { clip-path:polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0)  }
	
	35%,45%{ clip-path:polygon(0 30%, 100% 30%, 100% 32%, 0% 32%); transform:translate(-2%, 1%); }
	40%{ clip-path:polygon(0 30%, 100% 30%, 100% 32%, 0% 32%); transform:translate(0%, 1%); }
	50%{ clip-path:polygon(0 30%, 100% 30%, 100% 33%, 0% 33%); transform:translate(3%,1%);}
   
	55% {  clip-path:polygon(0 63%, 100% 63%, 100% 66%, 0% 66%); transform:translate(-3%, 0%); }
	60% {  clip-path:polygon(0 63%, 100% 63%, 100% 66%, 0% 66%); transform:translate(0%,-1%); }
	
	69% {  clip-path:polygon(0 5%, 100% 5%, 100% 10%, 0% 10%); transform:translate(-3%, 0%); }
	72% {  clip-path:polygon(0 5%, 100% 5%, 100% 10%, 0% 10%); transform:translate(0%,0%); }
	
	31%,61%{ clip-path:polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0) }
	100%{ clip-path:polygon(0 0, 0% 0, 0% 0, 0% 0) }
} 
@keyframes glitch-anim-building-out {
	0% { clip-path:polygon(0 0%, 100% 0%, 100% 100%, 0 100%);  }
	1%, 4%{ clip-path:polygon(0 80%, 100% 80%, 100% 86%, 0% 86% ); transform:translate(-2%, 0%); }
	3%{ clip-path:polygon(0 80%, 100% 80%, 100% 86%, 0% 86% ); transform:translate(1%, 1%);}
	4.5%{ clip-path:polygon(0 80%, 100% 80%, 100% 86%, 0% 86% ); transform:translate(-12%,1%); }
	
	5%{ clip-path:polygon(0 47%, 100% 47%, 100% 50%, 0% 50%); transform:translate(8%, -2%); }
	6.5%{ clip-path:polygon(0 47%, 100% 47%, 100% 50%, 0% 50%); transform:translate(-1%,-1%); }
	
	7%,10.5%{ clip-path:polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0); transform:translate(5%, 0%); }
	
	12.5% { clip-path:polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0); transform:translate(5%, 0%);  }
	15% { clip-path:polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0)  }
	
	17.5%,25.5%{ clip-path:polygon(0 30%, 100% 30%, 100% 32%, 0% 32%); transform:translate(-2%, 1%); }
	20%{ clip-path:polygon(0 30%, 100% 30%, 100% 32%, 0% 32%); transform:translate(0%, 1%); }
	21%{ clip-path:polygon(0 30%, 100% 30%, 100% 33%, 0% 33%); transform:translate(10%,1%);}
   
	25.5% {  clip-path:polygon(0 63%, 100% 63%, 100% 66%, 0% 66%); transform:translate(-3%, 0%); }
	30% {  clip-path:polygon(0 63%, 100% 63%, 100% 66%, 0% 66%); transform:translate(0%,-1%); }
	
	34.5% {  clip-path:polygon(0 5%, 100% 5%, 100% 10%, 0% 10%); transform:translate(-13%, 0%); }
	36% {  clip-path:polygon(0 5%, 100% 5%, 100% 10%, 0% 10%); transform:translate(0%,0%); }
	
	15.5%,30.5%{ clip-path:polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0) }
	100%{ clip-path:polygon(0 0, 0% 0, 0% 0, 0% 0) }
} 


.glitch-effect{ 
	clip-path:polygon(0 5%, 100% 5%, 100% 8%, 0 8%, 0 50%, 100% 50%, 100% 58%, 0 58%)
}
/*
.effect-b{ clip-path:polygon(0 15%, 100% 15%, 100% 20%, 0 20%, 0 65%, 100% 65%, 100% 68%, 0 68%); }
.effect-c{  clip-path:polygon(20% 85%, 100% 85%, 100% 88%, 20% 88% ); }
.page-container.active .effect-a{ animation:glitch-anim-horizontal-a 1100ms infinite linear alternate-reverse;  }
.page-container.active .effect-b{ animation:glitch-anim-horizontal-b 1300ms infinite linear alternate; animation-delay:100ms;  }
.page-container.active .effect-c{ animation:glitch-anim-horizontal-c 1200ms infinite linear alternate;  } 
*/d
@keyframes glitch-offset-ani{
	0%{ opacity:0; }
	1%{ opacity:1; }
	2%{ opacity:0; }
	100%{ opacity:0; }
}

@keyframes glitch-anim-opacity {
	 0% { opacity:1;  } 
	 40% { opacity:1;  }
	 42% { opacity:0;  }
	 43% { opacity:1;  } 
	 100% { opacity:1;  }
}

@keyframes glitch-anim-horizontal-x {
	0% { opacity:0 }
	100% { opacity:1 }
}

@keyframes glitch-anim-horizontal-a {
	0% { clip-path:polygon(0 4%, 100% 4%, 100% 6%, 0 6%, 0 50%, 100% 50%, 100% 51%, 0 51%); }
	2%{ clip-path:polygon(0 10%, 100% 10%, 100% 11%, 0 11%, 0 40%, 100% 40%, 100% 39%, 0 39%); }
	3%{ clip-path:polygon(0 11%, 100% 11%, 100% 11%, 0 11%, 0 39%, 100% 39%, 100% 39%, 0 39%); }
	50%{ clip-path:polygon(0 11%, 100% 11%, 100% 11%, 0 11%, 0 39%, 100% 39%, 100% 39%, 0 39%); }
	
	60% {
        clip-path:polygon(0 15%, 100% 15%, 100% 18%, 0 18%)
    }
    62% {
        clip-path:polygon(0 14%, 100% 14%, 100% 14%, 0 14%)
    }
	68% {
        clip-path:polygon(0 17%, 100% 17%, 100% 17%, 0 17%)
    }
	100% {
        clip-path:polygon(0 17%, 100% 17%, 100% 17%, 0 17%)
    }
}

@keyframes glitch-anim-horizontal-b {
	0% { clip-path:polygon(10% 35%, 100% 35%, 100% 36%, 10% 36%, 10% 70%, 100% 70%, 100% 71%, 10% 71%); }
	4%{ clip-path:polygon(10% 40%, 100% 40%, 100% 41%, 10% 41%, 10% 70%, 100% 70%, 100% 69%, 10% 69%); }
	8%{ clip-path:polygon(10% 41%, 100% 41%, 100% 41%, 10% 41%, 10% 69%, 100% 69%, 100% 69%, 10% 69%); }
	60%{ clip-path:polygon(10% 41%, 100% 41%, 100% 41%, 10% 41%, 10% 69%, 100% 69%, 100% 69%, 10% 69%); }
	
	61% {
        clip-path:polygon(0 70%, 90% 70%, 90% 65%, 0 65%)
    }

    63% {
        clip-path:polygon(0 65%, 90% 65%, 90% 68%, 0 68%)
    }
	65% {
        clip-path:polygon(0 65%, 90% 65%, 90% 65%, 0 65%)
    }
	100% {
        clip-path:polygon(0 65%, 90% 65%, 90% 65%, 0 65%)
    }
}
@keyframes glitch-anim-horizontal-c {
	0% { clip-path:polygon(20% 45%, 100% 45%, 100% 48%, 20% 48% ); }
	2%{  clip-path:polygon(20% 48%, 100% 48%, 100% 50%, 20% 50% ); }
	6%{  clip-path:polygon(20% 52%, 100% 52%, 100% 52%, 20% 52% ); }
	40%{ clip-path:polygon(20% 52%, 100% 52%, 100% 52%, 20% 52% ); }
	
	60%{ clip-path:polygon(0% 82%, 80% 82%, 80% 82%, 0% 82% ); }
	64%{ clip-path:polygon(0% 82%, 70% 82%, 70% 85%, 0% 85% ); }
	66%{ clip-path:polygon(0% 84%, 70% 84%, 70% 84%, 0% 84% ); }
	
	100%{ clip-path:polygon(0% 84%, 70% 84%, 70% 84%, 0% 84% ); }
}
/* home */



.page-indicator-container{ position:absolute; left:1em; top:calc(100% - 0.62em); width:20em; height:1.25em; display:flex; align-items:center}
.page-dot{ background:#ed1b2e; border-radius:100px; width:1.25em; height:1.25em; opacity:0.5}
.page-dot.active{ opacity:1;}
.page-sep{ margin:0 .4em; width:1em; height:.25em; background:#fff}

.questions-button-container{ position:absolute; right:1em; bottom:0; transform:translateY(50%)}
.questions-button-container > button:nth-child(2){ margin-left:.75em}
 
.form-name input{ width:100%!important; text-align:center;  letter-spacing:.1em;  padding:0!important}
input::placeholder { 
  opacity: 1;
  color: inherit;
}

.question-container{ margin:.75em 0 .75em 0}
.question-container h3{ display:inline-block}
.answer-container{   }
.answer-container button{ border:.2em rgba(255,255,255,0) solid; border-radius:1000px; background:rgba(255,255,255,0.6); line-height:1; padding:.6em 0; text-align:center; width:calc(20% - 1em); letter-spacing:.1em; margin-top:.75em; margin-left:calc(1.25em - 0.2em) }
.answer-container button.hover{ border-color:#ed1b2e}
.answer-container button.active{ border-color:#ed1b2e;  background:rgba(255,255,255,1);}
.answer-container button:nth-child(5n+1){ margin-left:0}


.canvas-upload-container{ position:absolute; width:1600px; height:1600px; left:-1000vw; pointer-events:none }

.hints-container{ width:40%;}
.panel-container.photo .panel-container-inner > div{ position:relative; letter-spacing:.1em }
.panel-container.photo .panel-container-inner > .bg-contain{ position:absolute; width:calc(100% - 4em); height:calc(100% - 4em); left:2em; top:2em; }
#input-image{ width:100%; opacity:0; cursor:pointer;  height:100%; position:absolute; top:0; left:0;  }


.panel-container.full .txt-subhead.typewriter{ margin-bottom:.25em}
.panel-container.full .panel-container-inner{ display:block; margin-top:1.5em }
.panel-container.full{ display:block;  }
.generating-container{ position:absolute; top:calc(50% - 1em); }

.generating-visual-container{ position:absolute; top:50%; transform:translate(-50%,-50%) scale(1); left:66%; width:30%; }

.generating-visual-container-inner{ position:relative; width:103%; padding-bottom:103%;  border-radius:10000px; background:radial-gradient(circle,rgba(255, 255, 255, 1) 31%, rgba(227, 227, 227, 1) 100%); box-shadow:1em .25em 1.75em .5em rgba(255,115,130,.75); transform:scale(0); }
.generating-visual-container-inner > div:nth-child(1){ position:absolute; width:96%; height:96%; left:2%; top:2%; border-radius:10000px; background:radial-gradient(circle,rgba(255, 255, 255, 1) 31%, rgba(227, 227, 227, 1) 100%); }
.pic-container{ position:absolute; top:calc(50% - 1em); transform:translate(-50%,-50%); left:50%; border-radius:2em; width:55%; height:55%; text-align:center; background-color:white;    } 
.pic-container > div{ position:absolute; top:100%; width:130%; left:50%; transform:translate(-50%,.25em); }

.gear-container{ position:absolute; width:170%; height:170%; top:-35%; left:-35%; opacity:.5; transform:scale(0)  }


.gear-container > div{  position:absolute; width:100%; height:100%; top:0%; left:0%; }
.page-container.active .gear-container:nth-child(1) > div{ background-image:url("../img/gear-006.svg"); animation:anim-gear-c 4600ms infinite linear alternate;  }
.page-container.active .gear-container:nth-child(2) > div{ background-image:url("../img/gear-005.svg"); animation:anim-gear-c 3800ms infinite linear alternate-reverse; }
.page-container.active .gear-container:nth-child(3) > div{ background-image:url("../img/gear-004.svg"); animation:anim-gear-a 3200ms infinite linear alternate; }
.page-container.active .gear-container:nth-child(4) > div{ background-image:url("../img/gear-003.svg"); animation:anim-gear-b 4500ms infinite linear alternate-reverse; }
.page-container.active .gear-container:nth-child(5) > div{ background-image:url("../img/gear-002.svg"); animation:anim-gear-b 3300ms infinite linear alternate; }
.page-container.active .gear-container:nth-child(6) > div{ background-image:url("../img/gear-001.svg"); animation:anim-gear-a 3500ms infinite linear alternate-reverse; }

@keyframes anim-gear-a {
	0%{ transform:rotate(0deg) }
	40%{ transform:rotate(100deg) }
	70%{ transform:rotate(-40deg) }
	100%{ transform:rotate(140deg) }
}
@keyframes anim-gear-b {
	0%{ transform:rotate(0deg) }
	30%{ transform:rotate(120deg) }
	80%{ transform:rotate(50deg) }
	100%{ transform:rotate(-180deg) }
}
@keyframes anim-gear-c {
	0%{ transform:rotate(0deg) }
	25%{ transform:rotate(-40deg) }
	66%{ transform:rotate(110deg) }
	100%{ transform:rotate(-70deg) }
}

.page-container.active .balls-container{ position:absolute;  width:100%; height:100%; top:0%; left:0%; animation:anim-balls 36000ms infinite linear; opacity:0 }
@keyframes anim-balls {
	0%{ transform:rotate(0deg) }
	100%{ transform:rotate(-360deg) }
}
.balls-container > div{ position:absolute; background:#ed1b2e; opacity:0.7; width:6%; height:6%; top:50%; left:50%; border-radius:100px;}
.page-container.active .balls-container > div:nth-child(1){  animation:anim-balls-a 3600ms infinite linear; }
@keyframes anim-balls-a {
	0%{ transform:translate(-50%,-50%) scale(0); opacity:0  }
	10%{ transform:translate(55%,-50%); opacity:.7  }
	100%{ transform:translate(1000%, -50%); opacity:0 }
}
.page-container.active .balls-container > div:nth-child(2){  animation:anim-balls-b 3400ms 50ms infinite linear; }
@keyframes anim-balls-b {
	0%{ transform:translate(-50%,-50%);  opacity:0 }
	10%{ transform:translate(-155%,55%); opacity:.7  }
	100%{ transform:translate(-1000%, 1000%); opacity:0 }
}
.page-container.active .balls-container > div:nth-child(3){  animation:anim-balls-c 3000ms 100ms infinite linear; }
@keyframes anim-balls-c {
	0%{ transform:translate(-50%,-50%); opacity:0 }
	10%{ transform:translate(-135%,-155%);opacity:0.7  }
	100%{ transform:translate(-900%, -1000%); opacity:0 }
}

@keyframes anim-balls-d {
	0%{ transform:translate(-50%,-50%) scale(0); opacity:0  }
	10%{ transform:translate(5%,-50%); opacity:.7  }
	100%{ transform:translate(500%, -50%); opacity:0 }
}
@keyframes anim-balls-e {
	0%{ transform:translate(-50%,-50%);  opacity:0 }
	10%{ transform:translate(-105%,5%); opacity:.7  }
	100%{ transform:translate(-500%, 500%); opacity:0 }
}
@keyframes anim-balls-f {
	0%{ transform:translate(-50%,-50%); opacity:0 }
	10%{ transform:translate(-100%,-105%);opacity:0.7  }
	100%{ transform:translate(-450%, -500%); opacity:0 }
}

.page-container.active .balls-container:nth-child(even){ animation-delay:5s; }
.balls-container:nth-child(even) > div{ width:15%; height:15%; }
.page-container.active .balls-container:nth-child(even) > div:nth-child(1){  animation:anim-balls-d 3000ms infinite linear; }
.page-container.active .balls-container:nth-child(even) > div:nth-child(2){  animation:anim-balls-e 3000ms infinite linear; }
.page-container.active .balls-container:nth-child(even) > div:nth-child(3){  animation:anim-balls-f 3000ms infinite linear; }



.bubble-container{ position:absolute; width:40%; height:40%;  opacity:0; transform:scale(0)}
.generating-visual-container.active .bubble-container{ opacity:1; transform:scale(1); transition:opacity 500ms 1s linear,  transform 1000ms 1s cubic-bezier(0,.81,.37,1.2) }
.page-container.active .bubble-container > div{  animation:anim-bubble 1000ms 0s infinite linear alternate; background-color:rgba(237,27,46, 0.6);  width:100%; height:100%; border-radius:1000px; display:flex; align-items:center; justify-content:center; }
@keyframes anim-bubble {
	0%{ transform:translateY(0); }
	100%{ transform:translateY(-5%);  }
}

.bubble-container > div > div{ margin:auto; width:90%; text-align:center; }

.bubble-container:nth-child(6){ left:88%; top:88%; width:43%; height:43%; }
.bubble-container:nth-child(7){ left:8%; top:-40%; width:42%; height:42%; }
.bubble-container:nth-child(8){ left:-40%; top:75%; width:42%; height:42%; }

.bubble-container:nth-child(9){ left:110%; top:10%; width:25%; height:25%; }
.bubble-container:nth-child(10){ left:60%; top:-45%; width:28%; height:28% }
.bubble-container:nth-child(11){ left:-60%; top:35%; width:32%; height:32%; }

.page-container.active .bubble-container.empty  > div{ background-color:rgba(237,27,46, 0); animation-name:none  }

.goo-container{
  filter: url('#goo'); opacity: 0.6; position:absolute; width:100%; height:100%; 
} 

.bubbless-container{  filter: url('#goo'); }

.bubbless-container:nth-child(1),.bubbless-container:nth-child(2) {
  position: absolute;
  left:-40%; top:75%; width:40%; height:40%;
  background-color:rgba(237,27,46, 1);
  border-radius: 1000px; 
}
.bubbless-container:nth-child(1){ left:1%; top:88%; height:28%; width:28%; opacity:0; }
.bubbless-container:nth-child(2){  left:1%; top:88%; height:28%; width:28%; transform:scale(0)  }

.generating-visual-container.active .goo-container{ /*opacity: 0.7;  transition:opacity 1000ms 11s linear*/ } 
.generating-visual-container.active .bubbless-container:nth-child(1){ left:-40%; top:75%; width:40%; height:40%; opacity:1; transition:left 1s 12s, top 1s 12s, width 1s 12s, height 1s 12s, opacity 0s 11.5s }
.generating-visual-container.active .bubbless-container:nth-child(2){ transform:scale(1); transition:transform 1s 11s}



.generating-visual-container.active .bubble-container:nth-child(10){ transition-delay:11.2s }
.generating-visual-container.active .bubble-container:nth-child(6){ transition-delay:11.3s }
.generating-visual-container.active .bubble-container:nth-child(7){ transition-delay:11.5s }
.generating-visual-container.active .bubble-container:nth-child(9){ transition-delay:12.8s }
.generating-visual-container.active .bubble-container:nth-child(8){ transition-delay:13.4s }
.generating-visual-container.active .bubble-container:nth-child(11){ transition-delay:14s }
  
.generating-visual-container.active .gear-container{  transform:scale(1); transition:transform 500ms cubic-bezier(0,.68,.49,1) }
.generating-visual-container.active .generating-visual-container-inner{  transform:scale(1); transition:transform 600ms 9.5s cubic-bezier(0,.68,.49,1)  }

.balls-container{ opacity:0!important; }
.page-container.active .generating-visual-container.active .balls-container{ opacity:1!important;  transition:opacity 1000ms 10s linear }

.generating-visual-container.active .gear-container:nth-child(1){ transition-delay:10.4s}
.generating-visual-container.active .gear-container:nth-child(2){ transition-delay:10.1s}
.generating-visual-container.active .gear-container:nth-child(3){ transition-delay:9.8s}
.generating-visual-container.active .gear-container:nth-child(4){ transition-delay:9.7s}
.generating-visual-container.active .gear-container:nth-child(5){ transition-delay:9.6s}
.generating-visual-container.active .gear-container:nth-child(6){ transition-delay:9.5s}




/* scroll plane */
.scrollbar-inner{ width:100%; text-align:left; /*max-height:35em;*/ overflow:auto; -ms-overflow-style: none; -webkit-overflow-style: none;  scrollbar-width: none; }
.scrollbar-inner::-webkit-scrollbar { display: none; }
.scrollbar-inner > .scrollbar-inner-inner{ padding-right:1.5em;  }
.side-body-container .scrollbar-inner{  /*height:5.4em;*/ height:3.3em;  }
.side-body-container{ position:absolute; width:100%; overflow:auto;}
/* scroll plane */


.page-container.result .card-job-sample-container{ height:calc(100% - 12em); filter:url('#flt_tag'); margin-top:1em  }
.page-container.result .card-job-sample-container > div{ clip-path:polygon(0% 0%, 80% 0%, 100% 20%, 100% 100%, 80% 100%, 75% 90%, 0% 90%);   }
.page-container.result .card-job-sample-container > div > div:nth-child(1):after, .card-job-sample-container > div > div:nth-child(2):after{ display:none }
.page-container.result .card-job-sample-container > div > div:nth-child(1):before, .card-job-sample-container > div > div:nth-child(2):before{ content:''; position:absolute; background:rgba(0,0,0,.3); height:23%; top:.5%; width:.8em; left:calc(80% - 0em); transform:rotate(-40deg); transform-origin:top center; filter:blur(.1em)  }

.page-container.result .card-job-title-container{ background:transparent;  width:calc(80% - 3em - 0em); height:auto; margin:auto; padding:.5em 0em; position:absolute; left:1.4em;  top:calc(100% - 7.25em)} 
.page-container.result .card-job-label-container{ left:2.5em;  }
.card-rtb{ color:#414042; text-align:center; position:absolute; bottom:.75em; width:100%; letter-spacing:.1em }

.card-staff-name{   text-align:center; position:absolute; bottom:2.5em; width:100%; transform:translateY(50%)}
.card-header-container{ margin:.75em auto; width:100%; height:6em; background-image:url("../img/card-header.png") }

.page-container.result .panel-container.square{ background:rgba(0,0,0,0); box-shadow:none; backdrop-filter:blur(0em); -webkit-backdrop-filter:blur(0em); overflow:hidden}
.panel-tab-nav-container{ width:100%; height:3em;  position:absolute; top:0; display:flex}

.panel-tab-nav-container button{ display:flex; align-items:center; justify-content:center; line-height:1; width:15em;  height:100%; text-align:center; background-image:url("../img/tab-red.svg");  margin-left:-5em; letter-spacing:.1em; color:#fff;}

.panel-tab-nav-container button:nth-child(1){ margin-left:-3.5em}
.panel-tab-nav-container button.active, .panel-tab-nav-container button.hover{ z-index:1; background-image:url("../img/tab-white.svg"); color:#ed1b2e }

.panel-tab-content-container{ background:#fff; position:absolute; top:3em; left:0; height:calc(100% - 3em); width:100%; border-radius:2em; border-top-left-radius:0 }
.panel-tab-content-container > div{ position:absolute; width:calc(100% - 4em); height:calc(100% - 2em); left:-2222vw; top:2em}
.panel-tab-content-container > div.active{ left:2em; }

.panel-tab-content-container > div > div:nth-child(1){ margin-bottom:1em }
.panel-tab-content-container > div:nth-child(1)  .generic-button{ position:absolute; right:8em; bottom:2em}
.panel-tab-content-container > div:nth-child(1)  .generic-button:nth-child(even){ position:absolute; right:0; bottom:2em}

.panel-tab-content-container .txt-middle{ line-height:1.6}
.panel-tab-content-container a, .txt-body a{ text-decoration:underline }

.panel-tab-content-container > div:nth-child(2) > div:last-child{ position:absolute; left:0; bottom:2em}

@media only screen and (min-width:0px)  and (max-width:768px) { 
	.txt-subhead{ font-size:1.9rem; line-height:1.1 }
	.txt-large  { font-size:1.4rem;}
	
	.logo-container img{ display:none} 
	.logo-container{ background-image:url("../img/logo-m.png"); background-repeat:no-repeat; background-position:left top; background-size:contain; height:9.4vw; left:5%;  width:40vw; max-width:12em; top:4vw; transform:translateX(0%)}
	
	.lang-container {width:90%; left:auto; right:5%; top:5vw; justify-content:flex-end }
	
	.panels-container{ width:95%; padding:5.5em 0 3em 0; min-height:calc(100% - 8.5em); }
	.panels-container.home{  padding:5.5em 0 9em 0; min-height:calc(100% - 14.5em); }
	.panels-container-inner{   padding-bottom:145%;   }
	
	.panel-container.square{ width:calc(100% - 2em); height:auto; /*min-height:calc(40% - 1em);*/ top:calc(54% + 1em); padding-bottom:3.5em }
	.panel-container.banner, .panel-container.rect{ display:none; }
	.panel-container.portrait{ width:calc(100% - 2em); height:calc(54% + 1em); top:-.5em   }
	 
	.page-container:nth-child(1) .panel-container.square{ padding-bottom:4em}
	
	.page-container:nth-child(1) .txt-subhead br{  display:none}
	
	
	.page-container:nth-child(1) .panel-container.square > div > div:nth-child(2), #typewriter_c{ font-size:1.2rem; }
	.panel-container.banner .panel-container-inner{ font-size:1.2rem; }
	.panel-container.banner .panel-container-inner p{ width:14.5em }
	
	
	.mc-container{ background-position:bottom right; width:calc(100% - 14.5em); top:5%!important; height:95%; right:-.5em; background-size:contain!important;  }
	/*
	.page-container:nth-child(1) .square{ top:calc(54% + 1em); }
	.page-container:nth-child(1) .portrait{ top:-.5em}
	.page-container:nth-child(1) .banner{ top:auto}
	.panel-container.major{ display:none}
	*/
	.panel-container.banner{ display:block; position:fixed; width:100%; left:0; height:auto; bottom:0; top:auto; border-radius:2em 2em 0 0;}
	.panel-container.banner .panel-container-inner{ width:calc(90% - 1em); margin:1em auto}
	.panel-container.banner .panel-container-inner p > br:nth-child(2){ display:none}
	.panel-container.banner .panel-container-inner p{ margin-bottom:0.5em}
	
	.panel-container.square .panel-container-inner{ margin:1.1em auto }
	
	.panel-container.question{  height:calc(25% - 0em); top:calc(37.5% - 1.5em); }
	.panel-container.question-empty{  height:calc(80% - 0em); top:calc(10% - 1.5em); width:100%; left:auto}
	
	.panel-container.hints{ width:calc(100% - 2em); height:calc(22.5% - .5em); top:calc(12.5% - 1.5em);   }
	.panel-container.photo{ width:calc(100% - 2em); height:calc(55% - .5em); top:calc(35% - .5em);  }
	
	.panel-container-inner{ width:calc(100% - 3em); margin:1.25em auto}
	.panel-container.question-empty .panel-container-inner{ width:calc(100% - 1em); max-width:480px }
	
	.page-container.active .panel-container:nth-child(1){ transition-delay:.4s}
	.page-container.active .panel-container:nth-child(3){ transition-delay:.1s}
	
	.button-container{ bottom:1.25em; right:1.5em}
	.tnc-container{  left:1.5em; bottom:1.75em; } 
	.icons-container{ height:5em;  margin:1em 0 3em 0; display:none }
	
	
	.card-job-title-container{ margin:.75em auto .75em auto; padding:.4em .75em; }
	.card-job-sample-container{   height:calc(100% - 5.25em);  }
	.card-job-sample-container > div > div{ background-position:center 12.5%}
	.card-job-sample-container > div > div:nth-child(1):after, .card-job-sample-container > div > div:nth-child(2):after{ height:31%; transform:rotate(-54deg);   }
	.card-job-sample-container > div > div:nth-child(1):before, .card-job-sample-container > div > div:nth-child(2):before{ height:31%; transform:rotate(-54deg);   }
	
	
	.page-container.result .card-job-sample-container > div > div{ background-position:center 33%}
	
	.page-indicator-container{ left:0em; top:calc(0% - 0em); width:100%; height:1em; justify-content:center   }
	.page-dot{  width:1em; height:1em; } 
	.page-sep{ margin:0 .4em; width:1em; height:.2em;  }
	
	.question-container{ text-align:center}
	.question-container h3{ display:block}
	.questions-button-container{ right:0em; bottom:0; transform:translateY(0%); display:flex; justify-content:center; width:100%}
	
	
	.answer-container button{ border-radius:1em; height:calc(33vw - 1em - .75em); max-height:calc(160px - .75em);   padding:0em 0;  width:calc(33% - .5em);  margin-top:1em; margin-left:calc(.75em - 0.2em) }

	.answer-container button:nth-child(5n+1){ margin-left:calc(.75em - 0.2em)}
	.answer-container button:nth-child(3n+1){ margin-left:0}
	
	.panel-container.hints .panel-container-inner{ width:calc(100% - 4em);  }
	.hints-container{ width:30%;}
	
	.generating-visual-container{ top:56%; transform:translate(-50%,-50%) scale(1); left:50%; width:50%; }
	.generating-container{ top:calc(100% - 4em); text-align:center;  width:calc(100% - 2em); }
	
	.panel-container.full .typewriter:nth-child(2) br{ display:none}
	
	 .bubbless-container:nth-child(2) { left:4%; }
	.generating-visual-container.active .bubbless-container:nth-child(1){ left:-45%; top:75%; width:49%; height:49%;  }
	
	
	.bubble-container:nth-child(6){ left:88%; top:88%; width:42%; height:42%; }
	.bubble-container:nth-child(7){ left:8%; top:-35%; }
	.bubble-container:nth-child(8){ left:-45%; top:75%; width:49%; height:49%; }

	.bubble-container:nth-child(9){ left:110%; top:15%; width:25%; height:25%; }
	.bubble-container:nth-child(10){ left:75%; top:-15%; width:28%; height:28% }
	.bubble-container:nth-child(11){ left:-55%; top:35%; width:42%; height:42%; }
	
	.bubble-container.txt-middle{ font-size:1.1rem}
	
	.card-header-container{  width:calc(100% - 2em);  }
	
	.page-container.result{ top:-99999vh}
	.page-container.result.active{ top:0}
	.page-container.result .panel-container.portrait{   /*height:calc(90vh - 5em); max-*/height:145vw   }	
	.page-container.result .card-job-title-container{ top:calc(90% - 6em + 3em)} 
	
	.page-container.result .panel-container.portrait{ position:relative; top:auto; left:auto; right:.5em; margin:0em auto;  }
	.page-container.result .panel-container.square{ position:relative; top:auto; left:auto; right:auto; margin:1em auto; width:calc(100% - 2em);}
	
	.panels-container.result{ width:100%; height:auto; display:block;   padding:5em 0 0 0;  } 
	.panels-container.result .panels-container-inner{  height:auto; position:relative; display:block; padding:0}
	.panels-container.result .page-container.result{  position:relative; height:auto}
	 /*
	.page-container.result{ width:100%; margin-top:5em}
	.page-container.result .panel-container.portrait{ width:calc(100% - 2em); position:relative; margin:auto; left:auto; right:auto;  } 
	.page-container.result .panel-container.square{ position:relative; top:auto; left:auto; right:auto; margin:1em auto; width:calc(100% - 2em);}
	
	*/ 
	.panel-container.banner{ padding:0em 0 1em 0;    } 
	
	.page-container.result .panel-container.banner{ position:relative ; padding:.5em 0; overflow:hidden; width:100%;     } 
	.page-container.result .mc-container{ height:100%}
	
	.page-container.result .panel-container.square{ height:22em}
	/*
	.panel-container.banner{ display:block; }
	.panel-container.banner .panel-slide-container{ position:relative; height:100%; opacity:0 }
	.panel-slide-container.second{ display:block; position:absolute!important; top:0; opacity:0; pointer-events:none;  }
	 
	.panel-slide-container.active{ opacity:1!important; transition:opacity 500ms}
	
	.panel-slide-container .mc-container{ bottom:-1em; top:auto}
	
	.panel-slide-nav-container{ position:absolute; bottom:.8em; width:100%; display:flex; justify-content:center}
	.panel-slide-nav-container button{ border-radius:100px; width:.6em; height:.6em; margin:0 .4em; background:#fff}
	.panel-slide-nav-container button.active, .panel-slide-nav-container button.hover{ background:#ed1b2e}
	
	.panel-slide-container.second{ display:flex; align-items:center}
	.panel-slide-container.second br{ display:none} 
	.panel-slide-container.second > div{ padding-bottom:.5em}
	
	.panel-slide-container > div > p:nth-child(1){ margin-top:.5em }
	.panel-slide-container > div > div:nth-child(2){ margin-bottom:1em;  }
	*/
	.panel-container.square > .panel-container-inner > div:nth-child(2) > p br{ display:none }
	
	.panel-container.full .txt-subhead br{ display:none}
	
	.card-rtb.txt-tiny{ font-size:0.8rem }
	.page-container.result .card-job-label-container .txt-middle{ font-size:1.2rem; }
} 
 

@media only screen and (min-width:0px) and (max-width:374px) {
	html,body{  font-size:12px; }
	
	.icons-container{  height:0px}
	.page-container:nth-child(1) .txt-subhead, .panel-container.full .txt-subhead{ font-size:1rem  }
}

@media only screen and (min-width:375px) and (max-width:480px) {
	html,body{  font-size:13px; }
	.icons-container{ height:0px}
	.page-container:nth-child(1) .txt-subhead, .panel-container.full .txt-subhead{ font-size:1.5rem  }
}

@media only screen and (min-width:481px) and (max-width:640px) {
	html,body{  font-size:14px; }
	.page-container:nth-child(1) .txt-subhead, .panel-container.full .txt-subhead{ font-size:1.8rem  }
}

@media only screen and (min-width:641px) and (max-width:768px) {
	html,body{  font-size:15px; }
}

@media only screen and (min-width:769px) and (max-width:1023px) { 
	html,body{  font-size:15px; }
	.txt-middle{ font-size:1.1rem}
	.txt-subhead{ font-size:2rem; line-height:1.1 }
	.txt-large  { font-size:1.25rem;}
	.panels-container{ width:90%; max-width:800px  }
	.panel-container-inner{ margin:1.25em auto; width:calc(100% - 3em) }
	.button-container{ bottom:1.5em; right:1.5em}
	
	.tnc-container{  left:1.5em; bottom:2em; }
	.icons-container{ height:0em;  margin:1em 0 3em 0;  }
	.icons-container > div{ display:none}
	
	.question-container{ margin:0em 0 .25em 0}
	.answer-container button{  padding:.5em 0; width:calc(20% - 1.05em);  margin-top:.6em;  }
	
	.panel-container.hints .panel-container-inner{ width:calc(100% - 4em);    }
	.panel-container.banner .panel-container-inner p > br:nth-child(2){ display:block}
	
	.panel-container.major br{ display:block}
	
	.panel-container.square > .panel-container-inner > div:nth-child(2) > p br{ display:none }
}

@media only screen and (min-width:1024px) and (max-width:1279px) {
	html,body{  font-size:15px; }
	.txt-large  { font-size:1.3rem;}
	.panels-container{ width:80%; }
	
	.answer-container button{   width:calc(20% - 1.05em);   }
	
	.icons-container{ height:3.5em;  margin:1em 0 4em 0;  } 
	.icons-container > div {  width:4.5em}
	
	.panel-container.square > .panel-container-inner > div:nth-child(2) > p br{ display:none }
}

@media only screen and (min-width:1280px) and (max-width:1599px) {
	html,body{  font-size:16px; }
	.txt-large  { font-size:1.35rem;}
	.answer-container button{   width:calc(20% - 1.05em);   }
	
	.icons-container{ height:3.5em;  margin:1em 0 4em 0;  } 
	.icons-container > div {  width:4.5em}
	
	.panel-container.square > .panel-container-inner > div:nth-child(2) > p br{ display:none }
} 


/* card */
.staff-card-container{  width:100%; height:100%; position:absolute; border-radius:inherit; top:0; left:0;  perspective:200em;  }
.staff-card{ position:absolute; width:100%; height:100%; border-radius: inherit; transform: rotateY(0deg); box-shadow:.25em 0px .5em .1em rgba(237,27,46,.75); transform-style: preserve-3d;   }

.staff-card section {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.staff-card .face {  width:100%; height:calc(100% - 2px);  border-radius: inherit; backface-visibility:visible;  background:rgba(245,245,245,0.8); border:1px solid rgba(237,27,46,1); }

.staff-card .back {  position: absolute; inset: 0; transform:translateZ(1px)}


.right, .left {
  inset-block:2em;
  height: calc(100% - 4em);
} .top, .bottom {
  inset-inline:2em;
  width: calc(100% - 4em);
}

.corner {
  position: absolute;
  transform-style: preserve-3d;
}
.corner > * {
	background:rgba(237,27,46,0.8);
  position: absolute;
  inset-block-end: 0;
  width:1em;
  height: calc(4em * sin(45deg / 4) + 0px);
  transform-origin: bottom center;
  
  transform:
    translateZ(calc(2em * cos(var(--i) * 90deg / 4)))
    translateY(calc(-1 * 2em * sin(var(--i) * 90deg / 4)))
    rotateX(calc(45deg * (2 * var(--i) + 1) / 4));
}

.top-right {
  inset-block-start: 0;
  inset-inline-end: 0;

  transform:
    rotateY(90deg)
    translateZ(calc(-1 * 2em))
    translateY(2em);
} 
.bottom-right {
  inset-block-end: 0;
  inset-inline-end: 0;

  transform:
    rotateY(90deg)
    rotateX(270deg)
    translateZ(calc(-1 * 2em))
    translateY(2em);
} 
.bottom-left {
  inset-block-end: 0;
  inset-inline-start: 0;

  transform:
    rotateY(90deg)
    rotateX(180deg)
    translateZ(calc(-1 * 2em))
    translateY(2em);
} 
.top-left {
  inset-block-start: 0;
  inset-inline-start: 0;

  transform:
    rotateY(90deg)
    rotateX(90deg)
    translateZ(calc(-1 * 2em))
    translateY(2em);
}

.edge {
  position: absolute;
  /*background:rgba(237,27,46,0.8)!important;*/
	
background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 10%, rgba(237,27,46,0.8) 100%); 	
	
}
.right {
   inset-inline-end: 0;
   transform: rotateY(270deg);
   transform-origin: right center;
} 
.left {
   inset-inline-start: 0;
   transform: rotateY(90deg);
   transform-origin: left center;
}

.top, .bottom {
   height:1em;
} .top {
   inset-block-start: 0;
   transform: rotateX(270deg);
   transform-origin: center top;
} .bottom {
   inset-block-end: 0;
   transform: rotateX(90deg);
   transform-origin: center bottom;
}

.corner > *, .right, .left { width:3em; }