@import url("https://fonts.googleapis.com/css?family=Oswald:500");

* {
  font-family: "Oswald", sans-serif;
}

head, body{
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

.back {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(https://pp.userapi.com/c841122/v841122831/327e/nHt-92F6yc4.jpg)
    no-repeat top center #efeff1;
  background-size: cover;
}
.thx {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 15px;
}
nav {
  width: 100%;
  position: fixed;
  top: 19px;
  text-align: center;
}
nav a {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  color: #16151b;
  margin: 0 15px;
  font-size: 16px;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}
nav a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: #16151b;
  top: 47%;
  animation: out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
nav a:hover:before {
  animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
@keyframes in {
  0% {
    width: 0;
    left: 0;
    right: auto;
  }
  100% {
    left: 0;
    right: auto;
    width: 100%;
  }
}
@keyframes out {
  0% {
    width: 100%;
    left: auto;
    right: 0;
  }
  100% {
    width: 0;
    left: auto;
    right: 0;
  }
}
@keyframes show {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@for $i from 1 through 5 {
  nav a:nth-child(#{$i}) {
    animation: show 0.2s #{$i * 0.1+1}s ease 1 both;
  }
}

header {
  height: 52px;
  background-color: white;
  position: fixed;
  z-index: 5;
  width: 100%;
  opacity: 0.8;
}

.img-background {
  width: 200vh;
  height: 100vh;
}

.img-background-movil {
  width: 200vh;
  height: 60vh !important;
}

.section-informaation-0 {
  width: 100%;
  height: 100%;
}

.section-informaation-1 {
  width: 100%;
  height: 100vh;
  background-color: white;
}

.section-movil-0{
  display: none;
}

.section-informaation-2 {
  width: 100%;
  height: 100vh;
  background-color: #1c1c1c;
  margin: 0px 0px;
  display: inline-block;
  color: white;
  font-size: 2rem;
}

.svg-top-header {
  position: absolute;
  width: 100%;
  height: 40px;
  margin-top: -40px;
}

.svg-top {
  position: relative;
  top: 4px;
}

.svg-bottom {
  position: relative;
  top: 0px;
  transform: rotate(180deg);
}

.section-informaation-3 {
  width: 100%;
  height: 100vh;
  background-color: white;
}

.section-informaation-4 {
  width: 100%;
  height: 100vh;
  background-color: #1c1c1c;
  margin: 0px 0px;
  display: inline-block;
  color: white;
  font-size: 2rem;
}

.section-informaation-5 {
  width: 100%;
  height: 100vh;
  background-color: white;
}

.img-first{
  width: 110%;
}

.img-second{
  width: 150%;
  position: relative;
  left: -10%;
}

footer {
  height: 120px;
  width: 100%;
  background-color: #1c1c1c;
  color: white;
}

footer p {
  text-align: center;
  position: relative;
  top: 15px;
}

.redes img{
  margin-top: 30px;
  width: 40px !important;
  cursor: pointer;
}

.title-info {
  text-align: center;
  font-size: 50px !important;
  text-transform: uppercase;
}

.subtitle-info {
  text-align: center;
  font-size: 25px !important;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 10px;
}

.call_action_button {
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 5px;
  margin-top: 50px;
  background: #1c1c1c;
  color: white;
  display: flex;
  margin-bottom: 70px;
  font-size: 30px;
  width: 204px;
  text-decoration: none;
  text-align: center;
  display: block;
}

.call_action_button:hover {
  opacity: 0.8;
  cursor: pointer;
}

.content {
  font-size: 30px;
  text-align: center;
  width: 80%;
  margin-left: 10%;
  margin-bottom: 6px;
}

.img-background-cir {
  width: 75%;
  margin-left: 12.5%;
  border: 9px solid #fff;
  background: url(images/circuito.jpg) no-repeat;
  -moz-box-shadow: inset 10px 10px 50px #fff;
  -webkit-box-shadow: inset 10px 10px 50px #fff;
  box-shadow: inset 57px 47px 91px #000;
}

.doble {
  height: 155vh;
}

.text-pist {
  font: 700 2em/1 "Oswald", sans-serif;
  letter-spacing: 0;
  padding: 0.25em 0 0.325em;
  display: block;
  margin: 0 auto;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);

  /* Clip Background Image */

  background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
  -webkit-background-clip: text;
  background-clip: text;

  /* Animate Background Image */

  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 80s linear infinite;

  /* Activate hardware acceleration for smoother animations */

  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}


.wrapper{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height:75vh;
  min-height: 500px;
  margin-top: 80px;
}

.fut-player-card{
  position: relative;
  width: 350px;
  margin-left: 40px;
  height: 90%;
  background-image: url(https://selimdoyranli.com/cdn/fut-player-card/img/card_bg.png);
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 3.8rem 0;
  z-index: 2;
  transition: 200ms ease-in;
  color: #e9cc74;
}

.fut-player-card .title-player{
  text-align: center;
  font-size: 40px;
}

.img-inter{
  width: 60%;
  margin-left: 20%;
  margin-top: 15px;
}

.title-player-content{
  text-align: center;
  font-size: 23px;
  width: 90%;
  text-align: center;
  display: block;
  margin-left: 5%;
}

.svg-top-header-first{
  height: 53px;
}

.rules-content{
  width: 80%;
  margin-left: 10%;
  display: flex;
  margin-bottom: 10px;
}

.rules{
  width: 15%;
    border: 3px solid white;
    border-radius: 13px;
    padding: 10px;
    text-align: center;
    flex: auto;
    margin-left: 11px;
}

.rule-title{}

.img-rule{
  width: 100px;
  margin-bottom: 20px;
}

.ubication-content{
  width: 80%;
  margin-left: 10%;
  display: flex;
}

.ubication{
  width: 122px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 4px;
  margin-left: 10px;
  cursor: pointer;
}

.patro-content{
  width: 60%;
  margin-left: 20%;
  display: flex;
  justify-content: center;
}

.patro-content img{
  margin-left: 20px;
  width: 130px;
}

.title-ubi{
  font-size: 79px;
}

.services {
  display: flex;
  margin-top: 40px;
}

.services div{
  width: 40%;
  text-align: center;
  display: inline-block;
}

#ubication-movil{
  display: none;
}

#header-movil{
  display: none;
}

@media  (max-width: 550px) {

  .section-movil-0{
    display: block;
  }

  .section-web-0{
    display: none;
  }

  #header-web {
    display: none;
  }

  #header-movil {
    display: block;
    height: 92px;
  }

 

  .img-background {
    width: 100%;
    height: 100vh;
  }

  .title-info{
    font-size:30px !important;
  }

  .doble{
    height: 65vh !important;
  }

  .fut-player-card{
    width: 80%;
  }

  .wrapper{
    flex-direction: column;
    margin-top: 443px;
  margin-left: -16px;
  }

  .type-pist{
    height: 240vh;
    margin-top: 233px;
  }


  .type-pist .title-info{
    position: relative;
    top:-180px;
  }

  .rules-content-div{
    height: 145vh;
  }

  .rules-content-div .rules{
    width: 100%;
    flex-direction: column;
  }

  .rules-content{
    flex-direction: column;
  }

  .rules {
    padding: 0px;
    margin-left: 0px;
    margin-bottom: 10px;
  }

  .rule-title{
    display: inline-block;
    margin-left: -11px;
    font-size: 21px;
    text-align: left;
    width: 58%;
  }

  .img-rule{
    display: inline-block;
    margin-top: 22px;
    margin-left: 15px;
    width: 59px;
    float: left;
  }

  #ubication-movil{
    display: block;
  }

  #ubication-web{
    display: none;
  }

  .ubication-content .title-ubi {
    font-size: 45px;
    margin: 0px;
    margin-bottom: 10px;
  }

  .ubication{
    margin: 0px !important;
    margin-bottom: 20px;
  }

  iframe {
    margin-top: 20px;
    width: 104%;
  }

  #ubication-movil{
    height: 110vh;
  }

  .services-content .services {
    flex-direction: column;
  }

  .services-content .services div{
    width: 100%;
  }

  .parterns{
    height: 90vh !important;
  }
  .parterns .patro-content{
    flex-direction: column;
  }

  .parterns .patro-content img {
    width: 150px;
    margin-bottom: 25px;
  }

  .section-informaation-2{
    height: 140vh;
  }

  #guerra-info{
    height: 150vh;
  }

  .lds-ripple{
    margin-top: 58% !important;
    margin-left: 42% !important;
}
  

  
  /* MENU MOBILE*/

  /* FIN MENU MOBILE*/
  

}

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid black;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}


#body-header{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 16;
  top: 0px;
  left: 0px;
  background-color: white;
  display: flex;
}

.lds-ripple{
    margin: 0 auto;
    display: block;
    margin-top: 19%;
    margin-left: 48%;
}