#testimonials h2 {
  margin-top: 60px;
}
main#content {margin-top:0;}
h3 {margin-top: 40px;font-size:1.4em;}
.quiz-list-title h3:after {
    background: rgba(71,141,226,0.5);
    content: "";
    display: block;
    width: 30px;
    height: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
}
div.sub-title-line h3 {
  width: calc(100% - 120px);
}
div.sub-title-line span.more {float: right;margin-top: -64px;margin-right: 5px;}

.top_player_title {
  text-align:center;width: 100%;padding-bottom: 50px;
}

ol#topplayer {
  list-style-type: none;
  counter-reset: my-counter;
}
ol#topplayer>li {
  padding-bottom: 10px;
  width: 20%;
  float: left;
}
ol#topplayer>li:before {
  counter-increment: my-counter;
  content: counter(my-counter);
  display: inline-block;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(120, 120, 120, 0.2);
  text-align: center;
  padding-top: 5px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 0 50% 50% 0;
}
ol#topplayer>li:first-child:before {
  background-color: deeppink;
  border: 1px solid deeppink;
  color: white;
}
ol#topplayer>li:nth-child(2):before {
  background-color: hotpink;
  border: 1px solid hotpink;
  color: white;
}
ol#topplayer>li:nth-child(3):before {
  background-color: lightpink;
  border: 1px solid lightpink;
  color: white;
}
ol#topplayer li span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
ol#topplayer li span:last-child {
  width: calc(100% - 110px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8em;
  filter: opacity(.7);
  line-height: 1.4em;
}
ol#topplayer li span img {
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  object-fit: cover;
  border-radius: 3px;
}
aside#testimonials blockquote {
  width: 110px;
  max-width: 25%;
  float: left;
  padding: 5px;
}
aside#testimonials blockquote footer {
  font-size: 0.9em;
}
blockquote.testimonial img {
     width: 106px;aspect-ratio: 1 / 1;
     object-fit:cover;
     border: 1px solid rgba(120, 120, 120, 0.1);
     border-radius: 5px;
} 
.testimonial.classic footer:before {
     display: none;
}

@media (max-width: 767px) {
  h1 {line-height: 1.2em !important;}
  main#content {margin:0px;}
  #banner h1 {font-size: 2.3em !important;}
  #banner h2 {font-size: 1em;}
  #banner h2 p {line-height: 1.4em !important;}
  div.sub-title-line h3 {font-size: 1.2em;}
  div.sub-title-line span.more {margin-right: 0px;}
  
  #banner-content.row {
    padding: 70px 0 0 0 !important;
    margin-left: -20px;
    width: calc(100% + 20px);
  }
  #banner-nav {margin: 20px auto 0 auto;}
  #banner-content {height:400px;}
  #banner-content div.rolled {height: 340px;background-size:110%;padding:0px 30px;}
  #banner-content .section-heading {padding-left: 0;border-radius: 0;}
  #banner-content .section-heading h2 {width: 100%;padding: 0;}
  #banner-content .section-heading h2 p {font-size: 0.9em;line-height: 1.1em;}
  #banner-content .section-heading h2 p.large {font-size: 0.9em;line-height: 2em;}
  #banner h1 {display:none;}
  p#COUNT {display:none;}
  .col-3 {padding-left:0;padding-right:0;width:100%;}
  ol#topplayer>li {width: 50%;}
}
@media (min-width: 768px) and (max-width: 1024px) {
  h1 {
    line-height: 0.9em !important;
    font-size: 3.8em !important;
    font-weight: normal !important;
    letter-spacing: -1px !important;
  }
  #banner h1 {white-space:nowrap;}
  #banner h2 p {font-size: 0.9em;line-height: 1.2em;}
  main#content {margin-top:0px;width: 100%;}
  ol#topplayer {margin-left: 10px;}
  div.sub-title-line h3 { margin-left: 12px; }
  div.sub-title-line span.more {margin-right: 10px;}
  
  #banner-content.row {height: 410px !important;}
  #banner-content div.rolled {height: 380px;}
  p.roll_gap_03 {padding-top: 0px;display:none;}
  #banner-content .section-heading {border-radius: 0;}
  #banner-content .section-heading h2 p.large {font-size: 1.1em; color: #000 !important;}
  ol#topplayer>li {width: 25%;}
}

div.languages {clear:both;margin-top: 70px;text-align: right;padding: 14px 10px 12px 0;border-top: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(0, 0, 0, 0.1);background-color: rgba(120, 120, 120, 0.05);font-size:0.825em;}
div.languages img {width:48px;border-radius:50%;cursor:pointer;vertical-align:middle;}
  
div#main-banner         {margin-top:0px;padding-top: 70px;min-height:360px;}
div#main-banner h1      {font-size:1.4em !important;font-weight: 600;}
div#main-banner p       {font-size:0.9em;opacity:0.5;line-height:1.2em;margin: 10px 0;}

#banner_video           {position: absolute;bottom: 0px;z-index: -10;height: 100%;right: 0;}
.social-icon            {font-size: 2em;margin-left: 5px;transition:font-size .5s}
.social-icon:hover      {font-size: 3em;}
  
div.stars               {display: flex;justify-content: center;flex-direction: row;flex-wrap: wrap;}
div.stars>blockquote    {max-width:20% !important;}

p.service_title         {font-size: 1.2em;font-weight: bold;}
p.underline             {text-align:justify;font-size: 0.9em;line-height:1.4em;padding-bottom: 30px; opacity:0.7;}
.service_body           {display:block;width:65%;float:left;margin-right:20px;}
.service_right          {display:block;width:calc(35% - 20px);float:left;}
.service_body .fa-solid, .section-heading>h3 {color: #4A91E5 !important;opacity:0.5;}

a.add-more              {margin-top:10px;background-color:#4A91E5 !important;color:white !important;border-radius:20px;padding:5px 8px;transition:padding .5s, border-radius 1s;}
a.add-more:hover        {background-color:black;border-radius:0px;padding:15px;}
a.add-more:hover::after {content:' MORE';}

section#player:hover i.fa-crown {font-size:2em;animation:zigzag 1s linear infinite;}
div.random-quiz-zone       {text-align: left;padding: 20px;background-color: aliceblue;}
div.random-quiz-zone ol    {margin-left: 40px;}
div.random-quiz-zone ol li {padding: 2px 0px 2px 30px;margin-left: -45px;}
div.random-quiz-zone h3    {margin-top: 0;}
div.random-quiz-zone p.random-quiz-title {margin:0;opacity:0.5;}
div.random-quiz-zone span.more           {margin-left: 30px;vertical-align: middle;}
div.random-quiz-zone i.fa-solid:hover    {animation:zigzag .4s linear 2;}
  
.invite-random-quiz   {text-align:center;line-height: 40px;background-color: chocolate;padding: 20px;color:white;}
a.btn_challenge       {background-color:darkorange;border-radius:5px;padding:5px 8px 8px 8px;color:white;transition:padding .5s, border-radius 1s;}
a.btn_challenge:hover {background-color:red;border-radius:0px;padding:16px;}

ul.mobile_navigation_block {max-width:480px;flex-flow: wrap;list-style:none;text-transform: uppercase;font-size:0.825em;font-weight:normal;margin-top:30px;display:flex;position:absolute;bottom:0;}
ul.mobile_navigation_block li {width:calc(25% - 2px);padding:12px 6px 6px 6px;margin:1px;border-radius: 5px;text-align:left;cursor:pointer;transition: all 0.2s ease-in;
  background-color: rgba(255, 255, 255, 0.9);border:1px solid rgba(120, 120, 120, 0.2);
}
ul.mobile_navigation_block li:hover {background-color:rgba(120, 120, 120, 0.05);margin-top:-5px;}
ul.mobile_navigation_block li:hover i {animation:zigzag .4s linear 1;}
ul.mobile_navigation_block li i {font-size:2.6em;margin-bottom:10px;}
ul.before-footer {display:none;}

@media (prefers-color-scheme: dark) {
  div.random-quiz-zone {background-color: cadetblue;}
  div.random-quiz-zone ol li:hover {background-color:rgba(0,0,0,0.2);}
}
@media (width:1024px) {
  #banner_video {width:calc(100% - 480px);height:auto;}
  aside#testimonials blockquote:nth-child(n+10) {display:none;}
}
@media (min-width: 768px) and (max-width: 1023px) {
  div#main-banner h1, div#main-banner p {padding-left:10px;}
  #banner_video                         {width:74%;height:auto;bottom: 0;top: auto;}
  ol#topplayer>li:nth-child(n+9)        {display:none;}
  aside#testimonials blockquote:nth-child(n+13) {display:none;}
}
@media (max-width: 767px) {
  div#main-banner {min-height:auto;height:430px;padding-left:0px;background-color:transparent;}
  div#main-banner h1, div#main-banner p {margin-top:0;}
  div#main-banner h1 {font-size:1.3em;}
  div#main-banner p {font-size:0.9em;}
  video {display:none;}

  ol#topplayer {margin-left: 20px;}
  ol#topplayer>li:nth-child(n+7) {display:none;}
  a.add-more {border-radius: 5px;padding: 15px;}
  .service_body, .service_right {width:100%;float:normal;}
  div.random-quiz-zone ol li {margin-left:-50px;}

  ul.before-footer {display:flex;position:relative;}
  #landing-footer {margin-top: 60px;padding-bottom: 0px;}
}

/* EVENTS */
.fade-in-up {opacity: 0;transform: translateY(30px);transition: all 0.6s ease-out;}
.fade-in-down {opacity: 0;transform: translateY(-30px);transition: all 0.6s ease-out;}
.visible {opacity: 1;transform: translateY(0);}
@keyframes zigzag {25% {transform:rotate(50deg);} 75% {transform:rotate(-50deg);}}
@keyframes fadeInDown {from {opacity: 0; transform: translateY(-30px);} to {opacity: 1; transform: translateY(0);}}
@keyframes fadeInUp {from {opacity: 0; transform: translateY(30px);} to {opacity: 1; transform: translateY(0);}}