@charset "UTF-8";
html,body{  
	font-size:16px; 
}

.txt-subhead{ font-size:2.7rem  }
.txt-large  { font-size:1.4rem;}
.txt-middle  { font-size:1.1rem;}

.generic-button, .tnc-container, .card-job-label-container, .form-name input, .answer-container button, .panel-container.hints .panel-container-inner, .panel-container.photo div, .generating-container, .panel-tab-nav-container button{ letter-spacing:0!important; }
.panel-container.banner p{  position:relative; z-index:1}

.generic-button{  padding:.75em 1em; }

.card-job-label-container{ line-height:1.1}

.answer-button.txt-large{ font-size:1.25em}
.answer-container button{ line-height:1.2; float:left }
.answer-container.mlines .answer-button{ height:4em; padding:0;}
 
.bubble-container > div > div{ text-align:center; letter-spacing:0; }

.panel-tab-nav-container button:nth-child(1){ margin-left:-2.5em}


.panel-tab-nav-container button:nth-child(2){ width:18em; margin-left:-4em; background-image:url("../img/tab-red-b.svg");}
.panel-tab-nav-container button:nth-child(2).active, .panel-tab-nav-container button:nth-child(2).hover{  background-image:url("../img/tab-white-b.svg");   }



.panel-tab-content-container > div:nth-child(1)  .generic-button:nth-child(odd){ right:11.5em;  }

.card-header-container{ background-image:url("../img/card-header-en.png") }

.panel-container.banner .panel-container-inner p > br:nth-child(2){ display:block}

.bubble-container.txt-middle{ font-size:1rem}

.panel-container.major p{ font-size:0.9em; line-height:1.2}
.panel-container.major br{ display:block}



@media only screen and (min-width:0px) and (max-width:768px) { 
	.txt-tiny { font-size:0.66rem}
	.txt-subhead{ font-size:1.9rem; } 
	.txt-large  { font-size:1.33rem;}
	 
	.panel-container.banner p{ width:80%;}
	.panel-container.banner p br{ display:none }
	
	.panel-slide-container.second br{ display:none}
	.panel-slide-container.second p{ width:100%; }
	.panel-slide-container.second .txt-large{ font-size:1.15rem}
	.panel-slide-container.second p{ font-size:.9rem; margin-top:.3em}
	
	.answer-container button{  float:left; }
	.answer-container.mlines .answer-button{ height:calc(33vw - 1em - .75em); max-height:calc(160px - .75em);}
	
	.bubble-container.txt-middle{ font-size:0.9rem}
	
	.page-container:nth-child(1) .panel-container.square{ padding-bottom:4.5em}
	
	.panel-container.banner .panel-container-inner p > br:nth-child(1){ display:none}
	.panel-container.banner .panel-container-inner p > br:nth-child(2){ display:none}
	
	.panel-slide-container > div > div:nth-child(2){ margin-bottom:0em;  }
	
	.panel-container.banner .panel-container-inner p{ width:17em }
	.mc-container{  width:calc(100% - 16em);  }
	
	.panels-container.home{  padding:5.5em 0 16em 0; min-height:calc(100% - 21.5em); }
}

@media only screen and (min-width:0px) and (max-width:640px) {
	.panel-tab-content-container .txt-middle{ font-size:1rem }
}

@media only screen and (min-width:0px) and (max-width:374px) {
	html,body{  font-size:12px; }
	.answer-button.txt-large{ font-size:1em}
}

@media only screen and (min-width:375px) and (max-width:480px) {
	html,body{  font-size:12px; }
	.answer-button.txt-large{ font-size:1em}
}

@media only screen and (min-width:481px) and (max-width:640px) {
	html,body{  font-size:13px; }
}

@media only screen and (min-width:641px) and (max-width:768px) {
	html,body{  font-size:13px; }
}
@media only screen and (min-width:769px) and (max-width:1023px) { 
	html,body{  font-size:13px; }
	.txt-subhead{ font-size:2rem;  }
	.txt-large  { font-size:1.2rem;}
	.txt-middle{ font-size:1.1rem}
	
	.panel-container.banner p{ width:80%;}
	.panel-container.banner p br{ display:none }
	
	.answer-button.txt-large{ font-size:1em}
	
	.panel-container.banner .panel-container-inner p > br:nth-child(1){ display:none}
	.panel-container.banner .panel-container-inner p > br:nth-child(2){ display:none}
}

@media only screen and (min-width:1024px) and (max-width:1279px) {
	html,body{  font-size:14px; }
	.txt-large  { font-size:1.25rem;}
	
	.answer-button.txt-large{ font-size:1.1em}
	
	.panel-container.banner p{ width:80%;}
	.panel-container.banner p br{ display:none }
	.mc-container{  width:45%; height:90%; top:10%;  right:0em;  }
	
	.panel-container.banner .panel-container-inner p > br:nth-child(2){ display:none}
}

@media only screen and (min-width:1280px) and (max-width:1599px) {
	html,body{  font-size:15px; }
	
	.answer-button.txt-large{ font-size:1.1em}
	
	.panel-container.banner p{ width:80%;}
	.panel-container.banner p br{ display:none }
	.mc-container{  width:45%; height:90%; top:10%;  right:0em;  }
	
	.panel-container.banner .panel-container-inner p > br:nth-child(2){ display:none}
}