#quizWrap {
  max-width: 100%;
  margin: 0 auto;
  text-align:center;
}

#quizQn {
  padding: 20px 20px;
  color: #000;
  font-size: 1.75em;
  text-transform: uppercase;
  font-family: Bluefin-italic, sans-serif !important;
  line-height: 1em;
  margin-bottom: 10px;
  text-align:center;
}

#quizAns {
  padding:0px 20px;
  margin: 10px 0;
  gap: 25px;
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}

#quizAns label {
  font-family: akrobatextrabold, sans-serif !important;
  text-transform:uppercase;
  color:#636569;
  cursor: pointer;
  font-weight:normal;
  font-size:1.25rem;
  line-height: 1em;
  text-align:center;
}

#quizAns label img {
  width: 80px;
  height: 80px;
  padding:10px;
}

#quizAns label img:hover {
  filter: brightness(0) saturate(100%) invert(64%) sepia(28%) saturate(5125%) hue-rotate(178deg) brightness(98%) contrast(95%);
}

#quizNumber img{
  text-align:center;
}

#quizNumber img{
  width:100%;
}

#quizArrows{
  padding:0px 20px;
  margin-top:50px;
  margin-bottom: 100px;
  color: #64cbf4;
}

#quizArrows button {
  border: 2px solid #64cbf4;
  background: transparent;
  font-family: Bluefin-italic, sans-serif !important;
  font-weight: normal !important;
  min-width:140px;
  float:left;
}

#quizArrows button:hover {
  border: 2px solid #3AA7F4;
  background: #3AA7F4;
  color: #fff;
}

#quizArrows .btn_next {
  background: #64cbf4 !important;
  color:#fff !important;
  float:right !important;
}

#match a:hover, #quizArrows .btn_next:hover {
  background: #3AA7F4 !important;
  border-color: #3AA7F4 !important;
  color: #fff !important;
}

#quizAlert{
  font-style: italic;
  padding:0px 20px;
  text-align:center;
  margin:20px;
}

input[type=checkbox] {
  display:none;
}

input[type=checkbox]:checked + label .img-label {
  border: 3px solid #64cbf4;
  border-radius: 100%;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  filter: brightness(0) saturate(100%) invert(64%) sepia(28%) saturate(5125%) hue-rotate(178deg) brightness(98%) contrast(95%);
}

input[type='email'],input[type='text']{
  height: 50px;
  min-width: 300px;
}

#quizHeader{
  width:100%;
}

#headerContent{
  background: url(/wp-content/themes/bluefin-sup/assets/img/quiz/header.jpg);
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}

#match {
  background: url(/wp-content/themes/bluefin-sup/assets/img/quiz/match/match_bg.jpg);
  padding: 60px 30px 30px 30px;
}

#match .row{
  align-items: center;
  justify-content: center;
}

#match a{
  border: 3px solid #64cbf4;
  color:#64cbf4;
  font-family: Bluefin-italic, sans-serif !important;
  text-transform:uppercase;
  font-size:1.05rem;
  margin: 0 10px 0 10px;
  padding: 7.5px 30px;
}

.img-label {
  border: 3px solid transparent;
  border-radius: 100%;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.ruk_rating_snippet br{
  display:none !important;
}


@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 5s linear infinite;
  -moz-animation: rotating 5s linear infinite;
  -ms-animation: rotating 5s linear infinite;
  -o-animation: rotating 5s linear infinite;
  animation: rotating 5s linear infinite;
  width: 20%;
  margin: 50px auto;
}

#quizAns input::placeholder {
  opacity: .2;
}

@media (max-width: 900px) {
  #quizNumber img{
    width:100%;
  }
  #quizArrows button {
    padding:0px 5px !important;
  }
  #quizQn {
    font-size: 1.5rem;
  }
  #quizArrows{
    margin-top:30px;
    margin-bottom: 60px;
    display: inline-grid;
  }
  #quizNumber{
    padding:5px 20px;
  }
  #numberDesktop, #headerContent img{
    display:none;
  }
  #numberMobile{
    display:block !important;
    height:45px !important;
    margin-bottom:20px;
  }
  #quizAns label img {
    width: 60px;
    height: 60px;
    padding:10px;
  }
  input[type=checkbox]:checked + label .img-label {
    width: 70px;
    height: 70px;
  }
  .img-label {
    width: 70px;
    height: 70px;
  }
  #quizAns label {
    font-size: 1rem;
  }
  #mach_specs_mobile{
    display: block !important;
  }
  #mach_specs{
    display: none !important;
  }
  #match a{
    padding: 7.5px 7.5px;
    width: 100%;
    display: inline-block;
    margin-bottom: 10px;
  }
  #match {
    text-align: center !important;
  }
  .headerContentMobileImage{
    display:block !important;
  }
  .rotating {
    width: 40%;
  }
}

@media (min-width: 900px) {
  #numberDesktop {
    width: 100%;
    display:block !important;
  }
  #numberMobile{
    display:none !important;
  }
  #mach_specs{
    display:block !important;
  }
  #mach_specs_mobile{
    display:none !important;
  }
}