/*
Theme Name: Epoch Distinctive Assets 2022
Author: Joe M
Description: Epoch Distinctive Assets 2022
Version: 0.0.3
*/

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 12px;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  line-height: 1;
}

body {
  color: #c8c7c6;
  font-family: hero-new, sans-serif;
  overflow-wrap: break-word;
  word-wrap: break-word;
  height: 100vh;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, #choicesContainer label {
  color: #47494d;
  font-family: korolev-condensed, sans-serif;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
}

h1, .h1 {
  font-size: 3rem;
}

.questionText h1, .counter h2 {
  color: #ffffff;
  font-size: 3rem;
  line-height: 0.9;
}

.questionText h1 {
  margin-bottom: 10px;
}

.questionText h3 {
  margin-bottom: 10px;
}

h2, .h2 {
  font-size: 3rem;
}

h3, .h3, #choicesContainer label {
  font-size: 2rem;
  color: #c8c7c6;
}

p, .p {
  color: #ffffff;
  margin-bottom: 0.7rem;
  line-height: normal;
}

p a, .p a {color: #ffffff;}

strong, .strapline {
  font-weight: 600;
}

.total {
  color: #ffffff;
  font-family: korolev-condensed, sans-serif;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  font-size: 10rem;
  line-height: 1;
  display: inline-block;
  border-bottom: 4px solid;
  margin-bottom:1rem;
}

.intro p {
  color: #68696d;
}

.results h2, .results h3, .results p {
  color: #ffffff;
}

.results h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.qNumber {
  color: #ffffff;
}

.lightText, .qTotal {
  color: #c8c7c6;
}

#container{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#left, #right {
  padding: 1rem;
  display: flex;
  align-content: center;
}

#left {
  justify-content: space-between;
  align-items: center;
}
#right {
  width: 100%;
}

#content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  flex-grow: 1;
}

#textContainer{
  display: flex;
  align-items: flex-end;
  flex-grow: 2;
}

#scoreContainer {
  align-self: flex-end;
  flex-grow: 1;
  align-items: flex-end;
  display: flex;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
}

#answers {
  display: flex;
  flex-direction: column;
}

.smell, .taste, .touch, .see, .hear, .btn {
  align-items: center;
  width: 10%;
}

#mainBtn {
  min-height: 50px;
  display: flex;
  position: fixed;
  left: 1rem;
  bottom: 0.5rem;
  z-index: 10;
}

audio {
  margin-bottom: 10px;
  max-width: 80%;
}

#choicesContainer {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
}

#choicesContainer label {
  cursor: pointer;
  width: max-content;
}

input[type="radio"] {
   display: none;
}

input[type="radio"] + *::before {
  content: "";
  display: inline-block;
  width: 20px;
  margin-right: 15px;
  border: 3px solid #c8c7c6;
  height: 20px;
}

input[type="radio"]:checked + *::before {
border: 3px solid #47494d;
background-color: #47494d;
}

#choicesContainer input[type="radio"]:checked + *, #choicesContainer input[type="radio"]:hover + *, label:hover {
  color: #47494d;
}

button {
  text-transform: uppercase;
  background: none;
  color: #ffffff;
  border: none;
  padding: 5px 0 0 0;
  letter-spacing: 2.5px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
}

.signOff {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  background-color: rgba(255,255,255, 0.2);
  padding: 10px;
  margin-bottom: 3rem;
}

.signOffText {
  margin-right: 20px;
}

.signOffText p {
  margin-bottom:0;
}

.signOffBtn {
  align-self: center;
}

.cta {
  width: 155px;
}

.slide1 h1, .slide1 button { color: #00207b; }
.slide1 p { color: #68696d; }

.slide2 .questionText h1, .slide2 button, .slide2 .qNumber, .slide2 #choicesContainer input[type="radio"]:checked + *, .slide2 #choicesContainer input[type="radio"]:hover + *  { color: #2aac4c; }
.slide2 input[type="radio"]:checked + ::before { border: 3px solid #2aac4c; background-color: #2aac4c; }
.slide2 .touch img {filter: brightness(0) saturate(100%) invert(50%) sepia(81%) saturate(460%) hue-rotate(84deg) brightness(94%) contrast(82%); }

.slide3 .questionText h3, .slide3 .strapline { color: #31aecd; }
.slide3 .qTotal {color: #31aecd;}
.slide3 .touch img {filter: brightness(100) saturate(100%); }
.slide3 .taste img, .slide3 .smell img, .slide3 .see img, .slide3 .hear img {filter:brightness(0) saturate(100%) invert(35%) sepia(66%) saturate(604%) hue-rotate(84deg) brightness(84%) contrast(85%);}
.slide3 { background-image: url('../images/slide03.jpg'); background-size: cover; background-position: center; background-color: #1b5921; }

.slide4 .questionText h1, .slide4 button, .slide4 .qNumber, .slide4 #choicesContainer input[type="radio"]:checked + *, .slide4 #choicesContainer input[type="radio"]:hover + *  { color: #f22700; }
.slide4 input[type="radio"]:checked + ::before { border: 3px solid #f22700; background-color: #f22700; }
.slide4 .touch img {filter: brightness(0) saturate(100%) invert(17%) sepia(52%) saturate(6755%) hue-rotate(342deg) brightness(90%) contrast(116%); }

.slide5 .questionText h3, .slide5 .strapline { color: #c4c9c9; }
.slide5 .qTotal {color: #ff433e;}
.slide5 .touch img {filter: brightness(100) saturate(100%); }
.slide5 .smell img, .slide5 .taste img, .slide5 .see img, .slide5 .hear img {filter: brightness(0) saturate(100%) invert(41%) sepia(76%) saturate(3125%) hue-rotate(336deg) brightness(115%) contrast(119%); }
.slide5 { background-image: url('../images/slide05.jpg'); background-size: cover; background-position: center; background-color: #f22700;}

.slide6 .questionText h1, .slide6 button, .slide6 .qNumber, .slide6 #choicesContainer input[type="radio"]:checked + *, .slide6 #choicesContainer input[type="radio"]:hover + *  { color: #000000; }
.slide6 input[type="radio"]:checked + ::before { border: 3px solid #000000; background-color: #000000; }
.slide6 .see img {filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(14%) hue-rotate(98deg) brightness(95%) contrast(100%); }

.slide7 .questionText h3, .slide7 .strapline { color: #cbab87; }
.slide7 .qTotal {color: #747474;}
.slide7 .see img {filter: brightness(100) saturate(100%); }
.slide7 .smell img, .slide7 .taste img, .slide7 .touch img, .slide7 .hear img {filter: brightness(0) saturate(100%) invert(48%) sepia(0%) saturate(0%) hue-rotate(255deg) brightness(94%) contrast(92%); }
.slide7 { background-image: url('../images/slide07.jpg'); background-size: cover; background-position: center; background-color: #000000;}

.slide8 .questionText h1, .slide8 button, .slide8 .qNumber, .slide8 #choicesContainer input[type="radio"]:checked + *, .slide8 #choicesContainer input[type="radio"]:hover + *  { color: #0f5aac; }
.slide8 input[type="radio"]:checked + ::before { border: 3px solid #0f5aac; background-color: #0f5aac; }
.slide8 .see img {filter: brightness(0) saturate(100%) invert(26%) sepia(50%) saturate(3332%) hue-rotate(200deg) brightness(82%) contrast(88%); }

.slide9 .questionText h3, .slide9 .strapline { color: #ffd616; }
.slide9 .qTotal {color: #1f7ad7;}
.slide9 .see img {filter: brightness(100) saturate(100%); }
.slide9 .smell img, .slide9 .taste img, .slide9 .touch img, .slide9 .hear img {filter: brightness(0) saturate(100%) invert(40%) sepia(98%) saturate(2458%) hue-rotate(193deg) brightness(90%) contrast(85%); }
.slide9 { background-image: url('../images/slide09.jpg'); background-size: cover; background-position: center; background-color: #0f5aac;}

.slide10 .questionText h1, .slide10 button, .slide10 .qNumber, .slide10 #choicesContainer input[type="radio"]:checked + *, .slide10 #choicesContainer input[type="radio"]:hover + *  { color: #feb900; }
.slide10 input[type="radio"]:checked + ::before { border: 3px solid #feb900; background-color: #feb900; }
.slide10 .hear img {filter: brightness(0) saturate(100%) invert(55%) sepia(96%) saturate(718%) hue-rotate(6deg) brightness(112%) contrast(101%); }

.slide11 .questionText h3, .slide11 .strapline { color: #e92203; }
.slide11 .qTotal {color: #ffe190;}
.slide11 .hear img {filter: brightness(100) saturate(100%); }
.slide11 .smell img, .slide11 .taste img, .slide11 .touch img, .slide11 .see img {filter: brightness(0) saturate(100%) invert(90%) sepia(18%) saturate(1073%) hue-rotate(332deg) brightness(103%) contrast(103%); }
.slide11 { background-image: url('../images/slide11.jpg'); background-size: cover; background-position: center; background-color: #feb900;}

.slide12 .questionText h1, .slide12 button, .slide12 .qNumber, .slide12 #choicesContainer input[type="radio"]:checked + *, .slide12 #choicesContainer input[type="radio"]:hover + *  { color: #0a4da0; }
.slide12 input[type="radio"]:checked + ::before { border: 3px solid #0a4da0; background-color: #0a4da0; }
.slide12 .hear img {filter: brightness(0) saturate(100%) invert(19%) sepia(32%) saturate(5773%) hue-rotate(204deg) brightness(93%) contrast(92%); }

.slide13 .questionText h3, .slide13 .strapline { color: #fe2b14; }
.slide13 .qTotal {color: #1b7fe0;}
.slide13 .hear img {filter: brightness(100) saturate(100%); }
.slide13 .taste img, .slide13 .touch img, .slide13 .see img, .slide13 .smell img {filter: brightness(0) saturate(100%) invert(37%) sepia(81%) saturate(2151%) hue-rotate(194deg) brightness(94%) contrast(87%); }
.slide13 { background-image: url('../images/slide13.jpg'); background-size: cover; background-position: center; background-color: #0a4da0; }

.slide14 .questionText h1, .slide14 button, .slide14 .qNumber, .slide14 #choicesContainer input[type="radio"]:checked + *, .slide14 #choicesContainer input[type="radio"]:hover + *  { color: #fdcd13; }
.slide14 input[type="radio"]:checked + ::before { border: 3px solid #fdcd13; background-color: #fdcd13; }
.slide14 .touch img {filter: brightness(0) saturate(100%) invert(89%) sepia(19%) saturate(2673%) hue-rotate(346deg) brightness(101%) contrast(98%); }

.slide15 .questionText h3, .slide15 .strapline { color: #0b569d; }
.slide15 .qTotal {color: #fbde63;}
.slide15 .touch img {filter: brightness(100) saturate(100%); }
.slide15 .smell img, .slide15 .taste img, .slide15 .see img, .slide15 .hear img {filter: brightness(0) saturate(100%) invert(98%) sepia(87%) saturate(1303%) hue-rotate(320deg) brightness(106%) contrast(97%); }
.slide15 { background-image: url('../images/slide15.jpg'); background-size: cover; background-position: center; background-color: #fbde63;}

.slide16 .questionText h1, .slide16 button, .slide16 .qNumber, .slide16 #choicesContainer input[type="radio"]:checked + *, .slide16 #choicesContainer input[type="radio"]:hover + *  { color: #283a7a; }
.slide16 input[type="radio"]:checked + ::before { border: 3px solid #283a7a; background-color: #283a7a; }
.slide16 .smell img {filter: brightness(0) saturate(100%) invert(47%) sepia(53%) saturate(346%) hue-rotate(189deg) brightness(91%) contrast(93%); }

.slide17 .questionText h3, .slide17 .strapline { color: #6a7ab3; }
.slide17 .qTotal {color: #6a7ab3;}
.slide17 .smell img {filter: brightness(100) saturate(100%); }
.slide17 .see img, .slide17 .taste img, .slide17 .touch img, .slide17 .hear img {filter: brightness(0) saturate(100%) invert(47%) sepia(53%) saturate(346%) hue-rotate(189deg) brightness(91%) contrast(93%); }
.slide17 { background-image: url('../images/slide17.jpg'); background-size: cover; background-position: center; background-color: #283a7a;}

.slide18 .questionText h1, .slide18 button, .slide18 .qNumber, .slide18 #choicesContainer input[type="radio"]:checked + *, .slide18 #choicesContainer input[type="radio"]:hover + *  { color: #fda036; }
.slide18 input[type="radio"]:checked + ::before { border: 3px solid #fda036; background-color: #fda036; }
.slide18 .smell img {filter: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(2868%) hue-rotate(332deg) brightness(103%) contrast(102%); }

.slide19 .questionText h3, .slide19 .strapline { color: #d1e11e; }
.slide19 .qTotal {color: #f9c890;}
.slide19 .smell img {filter: brightness(100) saturate(100%); }
.slide19 .see img, .slide19 .taste img, .slide19 .touch img, .slide19 .hear img {filter: brightness(0) saturate(100%) invert(86%) sepia(15%) saturate(1188%) hue-rotate(330deg) brightness(99%) contrast(97%); }
.slide19 { background-image: url('../images/slide19.jpg'); background-size: cover; background-position: center; background-color: #fda036;}

.slide20 { background-image: url('../images/slide20.jpg'); background-size: cover; background-position: center; background-color: #4e4e4e;}


button:hover{
  transition-duration: 0.4s;
	opacity: 0.8 !important;
}

.signOffBtn button:hover.cta img {
  transition-duration: 0.4s;
  opacity: 1 !important;
  filter:  invert(100%);
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animatedSlow {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
  
  /* medium devices */
@media (min-width: 667px) {
  .smell, .taste, .touch, .see, .hear, .btn {width: 7%;}
}
  /* medium devices */
@media (min-width: 768px) {
  html { font-size: 16px; }
  #container{ flex-direction: row; }
  #left, #right { padding: 2rem; min-height: 100vh;}
  #right { width: 80%;}
  .questionText h1, .counter h2 { font-size: 5rem; }
  #textContainer { flex-grow: 1; }
  #left { justify-content: space-evenly; flex-direction: column;  width: 20%;}
  #choicesContainer { justify-content: flex-start; }
  #scoreContainer { flex-grow: 0; align-items: flex-end; display: flex; }
  .smell, .taste, .touch, .see, .hear, .btn {  width: 45%; align-items: center; max-width: 75px; }
  .total { font-size: 14rem;}
  #mainBtn, #scoreContainer { position: unset; }
  .results h2 { font-size: 2rem; }

/* large devices */
@media (min-width: 960px) {
 
}

/* Extra large devices */
@media (min-width: 1140px) {
  .smell, .taste, .touch, .see, .hear, .btn {  width: 25%; }
  .mainText { max-width: 65%}
 }
}