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

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

}





.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 */





/* 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%;
}

#seccion_01 > div{
  display:none;
}

#seccion_01_01{
  display:block !important;
}

#seccion_01 img{
  width:20%;
  margin-left:10%;
  
}

#parrafo_01{
  width:60% !important;
  margin-left:20% !important;
  margin-top:7%;
}

#seccion_01{
  width:100%;
}

#seccion_01_01{
  width:100%;
  margin-top:-0.6%;
}

#seccion_01_01 img:hover{
  cursor:pointer;
  width:21%;
  opacity:0.8;  
}

.seccion_aparte{
  width:97%;
  height:83%;
  position:absolute;
  background:rgba(255, 255, 255, 0.9);
  left:1.5% !important;
  top:14%;
}

#container_parrafo_01_01{
  width:60%;
}

#parrafo_01_01_01{
  width:60% !important;
  margin-top:15%;
  margin-left: 54% !important;
}

#btn_cerrar_1{
  width:2.5% !important;
  position:absolute;
  margin-top:-14.6% !important;
  margin-left:69% !important;  
}

#btn_cerrar_2{
  width:2.5% !important;
  position:absolute;
  margin-top:28.8% !important;
  margin-left:1% !important;  
}


.custom_btn_cerrar:hover{
  cursor:pointer;
  opacity:0.9;
}

#container_parrafo_01_02{
  height:100% !important;
  width:100%;
  position:absolute !important;
  left:27%;
}

#parrafo_01_02_01{
  width:40% !important;
  margin-top:28%;
  margin-left: 3% !important;
}

#parrafo_01_02_01_text{
  color:#0071BC;
  font-size:2.2em;
  position:absolute;
  left: 15.5%;
  top:65.5%;
}

#parrafo_01_02_02{
  position:absolute;
  left:-6%;
  top:3%;
  width:39% !important;
  display:none;
}

#container_parrafo_01_03{
  height:100% !important;
  width:100%;
  position:absolute !important;
  left:65%;
}

#parrafo_01_03_01{
  position:absolute;
  top:20%;
  right:70%;
  width:35% !important;
}

#container_parrafo_01_03 h3{
  position:absolute;
  font-size:1.8em;
  color:#0071BC ;
}

#angulos_rectos{
  top:16.6%;
  left:14%;
}

#angulos_agudos{
  top:30.6%;
  left:-1.4%;
}

#angulos_obtusos{
  top:42.7%;
  left:-1.4%;
}

#angulos_llanos{
  top:49.9%;
  left:14.4%;
}

#btn_cerrar_3{
  position:absolute !important;
  width:2.5% !important;
  margin-top:9.6%;
  left:21%;
}

#img_angulos{
  position:absolute; 
  width:100%;
  right:67%; 
}

#img_angulos img{
  position:absolute;
  width:50%;
  margin-top:1%;
  display:none;
}

h3:hover{
  color:white !important;
  cursor:pointer;
}