.ggb_contenidoInterno_M{
    background:url("../img/football_bg.png");
    background-size:100%;
}

.popup_container{
    width:100%;
    height:100%;
}
.popup_container{
  position:absolute;
   z-index:9;
}
.popup{
    width:50%;
    margin-left:25%;

}

.btn_cerrar{
    width: 8%;
    left: 75%;
    top: 70%;
}

.btn_cerrar:hover{
    width:9%;
    cursor:pointer;
} 

.extra_buttons{
    display:inline-block;
    left:90%;
    top:1.3em;
    border-radius:7px;
}

.extra_buttons:hover{
    cursor:pointer;
}

.extra_buttons:first-of-type{
    left:-60% !important;
}

#perros_y_gatos{
    width:80%;
    margin-left:10%;
    margin-top:7%;
}



#contenedor_jugadores{
    width:100%;
    height:100%;
}

.jugador{
    width:8%;
    position:absolute;
    z-index:3;
}

#perro_0, #gato_0{
    -webkit-animation: movement_animation_01 1.5s infinite; /* Chrome, Safari, Opera */
    animation: movement_animation_01 1.5s infinite;
}

#perro_1, #perro_2, #gato_1, #gato_2{
    -webkit-animation: movement_animation_02 1.1s infinite; /* Chrome, Safari, Opera */
    animation: movement_animation_02 1.1s infinite;
}

#perro_3, #perro_4, #gato_3, #gato_4{
    -webkit-animation: movement_animation_03 2s infinite; /* Chrome, Safari, Opera */
    animation: movement_animation_03 2s infinite;
}

#perro_5, #perro_6, #gato_5, #gato_6{
    -webkit-animation: movement_animation_04 3.5s infinite; /* Chrome, Safari, Opera */
    animation: movement_animation_04 3.5s infinite;
}

#perro_0{
    top:50%;
    left:10%;
}

#gato_0{
    top:50%;
    left:80%;
}

#gato_1{
    top:68%;
    left:73%;
}

#gato_2{
    top:50%;
    left:63%;
}

#gato_3{
    top:70%;
    left:50%;
}

#gato_4{
    top:27%;
    left:43%;
}

#gato_5{
    top:55%;
    left:30%;
}

#gato_6{
    top:24%;
   left:17%;
}

#balon{
    width:3%;
    position:absolute;
    top:60%;
    left:15%;
    -webkit-transition:all 0.6s ease;
    -moz-transition:all 0.6s ease;
    -ms-transition:all 0.6s ease;
    transition:all 0.6s ease;
    z-index:3;
}

#marcador{
    width:22%;
    position:absolute;
    left:38.5%;
}

#marcador img{
    width:100%;
    position:absolute;
    top:0;
}

#marcador #anotaciones{
    width:20%;
    margin-left:42%;
    margin-top:4%;
    position:absolute;
    z-index:4;
    text-align:center;
}

#marcador #anotaciones h3{
    display:inline-block;
    font-size:1.7em;
  
}

#perro_1{
    top:68%;
    left:21%;
}

#perro_2{
    top:22%;
    left:29%;
}

#perro_3{
    top:55%;
    left:40%;
}

#perro_4{
    top:45%;
    left:55%;
}

#perro_5{
    top:71%;
    left:63%;
}

#perro_6{
    top:25%;
    left:68%;
}

.jugador:hover{
    cursor:pointer;
    opacity:0.85;
    width:8.5%;
}


svg{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    z-index:1;
}

#line_path_container{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

.img_popup{
    position:absolute;
    z-index:5;
    width:97%;
    top:14.3%;
    display:none;
}

.img_popup img{
    width:100%;
    border-radius:10px;
}


div {
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes movement_animation_01 {
  0% {
    padding-top: 0%;
  }
  50% {
    padding-top: 0.3%;
  }
  100% {
   padding-top: 0%;
  }
}

@keyframes movement_animation_01 {
  0% {
    padding-top: 0%;
  }
  50% {
    padding-top: 0.3%;
  }
  100% {
   padding-top: 0%;
  }
}


@-webkit-keyframes movement_animation_02 {
  0% {
    padding: 0%;
  }
  70% {
    padding: 0.3%;
  }
  100% {
   padding: 0%;
  }
}

@keyframes movement_animation_02 {
  0% {
    padding: 0%;
  }
  70% {
    padding: 0.3%;
  }
  100% {
   padding: 0%;
  }
}

@-webkit-keyframes movement_animation_03 {
  0% {
    padding: 0%;
  }
  20% {
    padding: 0.4%;
  }
  100% {
   padding: 0%;
  }
}

@keyframes movement_animation_03 {
  0% {
    padding: 0%;
  }
  20% {
    padding: 0.4%;
  }
  100% {
   padding: 0%;
  }
}

@-webkit-keyframes movement_animation_04 {
  0% {
    padding-left: 0%;
  }
  80% {
    padding-left: 0.9%;
  }
  100% {
   padding-left: 0%;
  }
}

@keyframes movement_animation_04 {
  0% {
    padding-left: 0%;
  }
  80% {
    padding-left: 0.9%;
  }
  100% {
   padding-left: 0%;
  }
}


@charset "utf-8";
/* CSS Document */

html, body
{
  background: url('img/patron_M.png') #f7ede7;
}

/* ESTRUCTURA GENERAL */

.ggb_header_M
{
  background-position:left top;
  background-repeat:no-repeat;
  border-bottom-color:#89380f;
  background-color:#eb7f26;
}

.ggb_iconoIntroduction
{
  background-image:url(img/icons_L-M-S_GGA_GGB-29.png);
  background-position: 0.8% 0;
  background-size: 92px;
}

.ggb_iconoObjetivos
{
  background-image:url(img/icons_L-M-S_GGA_GGB-13.png);
  background-position: 0.8% 0;
  background-size: 92px;
}

.ggb_iconoContenido
{
  background-image:url(../img/icons_L-M-S_GGA_GGB-14.png);
  background-position: 0.8% 0;
  background-size: 92px;
}

.ggb_iconoResumen
{
  background-image:url(img/icons_L-M-S_GGA_GGB-15.png);
  background-position: 0.8% 0;
  background-size: 92px;
}

.ggb_iconoValoracion
{
  background-image:url(img/icons_L-M-S_GGA_GGB-16.png);
  background-position: 0.8% 0;
  background-size: 92px;
}

.ggb_contenido_M
{
  background:#fddfbc;
  padding-top:10px;
  border-bottom:solid 5px #89380f;
}

.ggb_contenidoInterno_M
{
  box-shadow:0 0 5px #a3a3a3;
  background-color:#FFF;
}



/* TEXTOS */

h1
{
  color:#FFF;
}

/* ================================================= */

#botonera {
  margin:auto;
  width:100%;
  position:absolute;
  bottom:25px;
  left:42%;
  display:none;
}

#botonera div {
  margin:0 -2px;
  width:70px;
  height:60px;
  background: #eb7f26;
  position: relative;
  color:#FFF;
  font-size:3em;
  text-align:center;
  line-height:60px;
  z-index:2;
}


#botonera div:active {
  background: #89380f;
  transform:scaleY(0.8);
}

#botonera div:first-child {
  border-radius:10px 0 0 0;
  border-right:solid 2px #89380f;
}

.p_next {
  border-radius: 0 10px 0 0;
  border-left:solid 2px #89380f;
}

#botonera div:hover {
  background: #EE9348;
}

/* ========================================================= */

#botonerapeq {
  margin:auto;
  width:140px;
  position:absolute;
  bottom:25px;
  left:43.5%;
}

#botonerapeq div {
  margin:0 -2px;
  width:70px;
  height:60px;
  background: #eb7f26;
  position: relative;
  color:#FFF;
  font-size:3em;
  text-align:center;
  line-height:60px;
}

#botonerapeq:before {
  background-color:#89380f;
    content:"";
    position:absolute;
    width: 99.7%;
    height:20px;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    bottom:-4px;
}

#botonerapeq div:active {
  background: #89380f;
  transform:scaleY(0.8);
}

#botonerapeq div:first-child {
  border-radius:10px 0 0 0;
  border-right:solid 2px #89380f;
}

#botonerapeq div:last-child {
  border-radius: 0 10px 0 0;
  border-left:solid 2px #89380f;
}

#botonerapeq div:hover {
  background: #EE9348;
}

.p_prev.off {background-color:#b45a11 !important;}
.p_next.off {background-color:#b45a11 !important;}

.refresh{
  position:absolute;
  left:6%;
  top:0;
}

#help{
  position:absolute;
  left:-33%;
  top:0;
}

#contenedor_jugadores{
  display:none;
}

.img_popup div{
  width:8%;
  height:15%;
  background:#eb7f26;
  padding:1%;
  color:white;
  border-radius:0.2em;  
  position:absolute;
  margin-left:135%;
  margin-top:33%;
  z-index:10;
}

.img_popup div:hover{
  opacity:0.8;
  border:solid 6px white;
}

.img_popup div i{
  font-size:6.5em !important;
  margin-left:5px;
}

.img_popup .p_next{
  position:absolute !important;
  left:0 !important;
  margin-left:85%;
  margin-top:-15.3%;
}

#mago_01{
  width:36.6%;
}


.play_audio{
position:absolute !important;
top:0;
left:20%;;
  z-index:3;
  display:none;
}

.mago{
  width:35.5%;
     -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
      -ms-filter: "FlipH";
      position:absolute;
      right:10%;

}

.angulos{
  width:45%;
  position:absolute;
  margin:3%
}


 .resplandorExterior
{
  border-radius: 67px;
  animation-duration: 1s;
    animation-name: sombra;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
  -webkit-animation-name: sombra;
  -webkit-animation-iteration-count: infinite;
  
  -moz-box-shadow: 0px 0px 30px #ffffff;
  -webkit-box-shadow: 0px 0px 30px #ffffff;
  box-shadow: 0px 0px 30px 13px #0040FF;
  padding: 0px 0px 0px 0px;
}

    @keyframes sombra{
      0% {box-shadow: 0px 0px 5px #4C0C01}
      50% {box-shadow: 0px 0px 100px #4C0C01}
      100% {box-shadow: 0px 0px 5px #4C0C01}
    }
    @-moz-keyframes sombra{
      0% {box-shadow: 0px 0px 5px #4C0C01}
      50% {box-shadow: 0px 0px 100px #4C0C01}
      100% {box-shadow: 0px 0px 5px #4C0C01}
    }
    @-webkit-keyframes sombra{
      0% {box-shadow: 0px 0px 5px #4C0C01}
      50% {box-shadow: 0px 0px 100px #4C0C01}
      100% {box-shadow: 0px 0px 5px #4C0C01}
    }