/* Mobile */
@media only screen and (orientation: landscape) and (min-width: 767px) {}

/* Smartphones ----------- */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  #vs {
    display: none !important;
  }

  #portrait {
    display: block;
  }

  html, body {
    overflow: hidden;
  }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {}

@media only screen and (max-width: 767px) {
  html, body {
    height: auto;
  }

  .nowebgl {
    overflow: auto;
  }

  /*
	 */
  .top-cont {
    background-color: rgba(0, 0, 0, 0.7);
  }

  #section>div {
    max-width: 90%;
  }

  /*
	 */
  #vs {
    width: 75%;
    top: 180px;
    transform: translateY(0%);
  }

  #vs .player {
    position: absolute;
  }

  #vs .player:last-child {
    margin-bottom: 0px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  #vs .player h2 {}

  #vs .player {}

  #vs .player .btnx {}

  /*
		 */
  #about {
    position: relative;
  }

  #about .about {
    padding-bottom: 60px;
  }

  /*
	 */
  #section .analysis .country-cont {
    width: 100%;
    margin-top: 16px;
  }

  #flagdd {
    width: 100%;
  }

  #section .title-cont .country-cont .tot-cont {
    flex-direction: row-reverse;
  }
  #section .title-cont .country-cont .tot-cont .total {
    margin:0;
  }

  #section .player-cont .player .info {
    float: left;
    margin: 10px 0;
    width: 100%;
  }

  #section .player-cont .player .img-cont {
    width: auto;
    padding: 0;
  }

  #section .player-cont .player .info h2 {}

  #section .title-cont .country-cont {
    margin-top: 16px;
    margin-left: auto;
  }

  #section .analysis {
    padding-bottom: 60px;
  }

  #credits {
    padding-bottom: 60px;
  }

  /*
	 */
  #buy-warp .buy .info-cont .info .vote-cont .vote {
    font-size: 45px;
  }

  #buy-warp .buy .info-cont .titl {
    font-size: 24px;
  }

  #buy-warp .buy .info-cont h2 {}

  #buy-warp .buy .payment-cont ul li {
    width: 100% !important;
  }

  #buy-warp .buy .payment-cont ul li:first-child {
    margin-bottom: 4 px;
  }

  #buy-warp .form-cont input, #buy-warp .form-cont select {
    margin: 4px 0;
  }

  /*
	 */
  #tiktok .vid- {}

  #tiktok .vid-cont .control {
    position: absolute;
    margin: 0 0 8px;
    display: flex;
    /*justify-content: space-between;*/
    align-content: space-around;
    width: 100%;
    opacity: 0.5;
    padding: 0 16px;
  }

  #tiktok .vid-cont .control>div {
    margin: 0 !important;
    padding-right: 16px;
  }

  #tiktok .vid-cont .control>div:last-child {
    display: none;
  }

  /*
	 */
  #credits .credits ul.img-cont {
    margin: 0;
  }

  #credits .credits ul.img-cont li {
    width: 100%;
  }

  #credits .credits ul.img-cont li .txt {
    position: relative;
  }

  /*
	 */
  #section .contact {
    max-width: 100%;
  }

  #section .contact .form-cont {
    width: 100%;
  }

  #section .contact .form-cont .captcha input {
    margin: 0;
  }

  /*
	 */
  #footer {
    display: none;
  }
}

/* iPads ----------- */
@media only screen and (max-width: 1024px) {
  .nowebgl {
    overflow: auto;
  }

  .top-cont {
    background-color: rgba(0, 0, 0, 0.7);
  }

  #tiktok .vid- {}

  #mdevices {
    display: block;
  }

  #mmenu {
    display: block;
  }

  #social {
    display: none;
  }

  #footer {
    display: none;
  }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  #vs {
    width: 100%;
  }

  #vs .player .btnx {
    font-size: 22px;
  }

  #vs .player .btnx {}
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  #credits .credits ul.img-cont li {
    width: 32%;
    margin: 20px 5%;
  }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  #credits .credits ul.img-cont li {
    width: 49%;
  }
}

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1280px) {
  #vs .player h2 {
    font-size: 32px;
  }

  #vs .player .btnx {
    font-size: 24px;
  }

  #contact .contact .form-cont {
    max-width: 50%;
  }

  #tiktok .vid-cont video {}
}

/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
  #vs .player h2 {
    font-size: 32px;
  }

  #vs .player .btnx {
    font-size: 30px;
  }
}
