/*Estilos comunes a todas las resoluciones*/

.publicidad {text-align: center;}


 table.ficha-tecnica {width: 100%;}
table.ficha-tecnica tr:nth-child(2n+0)  {background-color:#666;}
table.ficha-tecnica th {color: #000000; font-size: 12px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    height: 20px;
    line-height: normal;
    padding: 0;
    text-align: center;
}
table.ficha-tecnica td {
     font-size: 16px;
    padding: 5px;
    border-bottom: 1px dotted #999999;
    text-align: left;
    color: #fff;

}
table.ficha-tecnica td.ficha {
  width:45%
}


body section, html section {
  margin: 10px auto;
  width: 100%;
  height: 105px;
  text-align: center;
}

@-moz-keyframes fill {
  0% {
    height: 0%;
  }
  60% {
    height: 110%;
  }
  70% {
    height: 95%;
  }
  80% {
    height: 105%;
  }
  100% {
    height: 100%;
  }
}
@-webkit-keyframes fill {
  0% {
    height: 0%;
  }
  60% {
    height: 110%;
  }
  70% {
    height: 95%;
  }
  80% {
    height: 105%;
  }
  100% {
    height: 100%;
  }
}
@keyframes fill {
  0% {
    height: 0%;
  }
  60% {
    height: 110%;
  }
  70% {
    height: 95%;
  }
  80% {
    height: 105%;
  }
  100% {
    height: 100%;
  }
}
.box {
  width: 24%;
  height: 100px;
  position: relative;
  display: inline-block;
}
.box .container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  z-index: 3;
  text-align: center;
  color: white;
  font-size: 14px;
  padding-top: 15px;
}
.box .container .number {
  font-size: 50px;
  margin-top: 25px;
}
.box .fill {
  z-index: 2;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
}
.box .fill.speed1 {
  -moz-animation: fill 1s ease-out;
  -webkit-animation: fill 1s ease-out;
  animation: fill 1s ease-out;
}
.caja-autor { text-align: center;}
.caja-autor2 { text-align: center;}
.caja-autor img {border: 5px solid #fbb731; border-radius: 100%; height: 85px; width: 85px;}

@media only screen and (max-width: 850px)  {
/*Botones Sociales*/
.estatica .byline-tools {height: 48px;  width: 100%; overflow: hidden; max-width: inherit;  margin-top: 0; border-bottom: 0px;border-top: 0px; margin: 0 auto;}
.estatica .aside-tools { width: 100%; float: none;}
.estatica .tools { border: 0; float: none;  margin: 0 auto;}
.aside-tools .social-tools .share-counter {color: #fff;} }

.heading3 p.prelista-puesto {color: #fbb731;}


/*Estilos resoluciones desktop*/

 @media only screen and (min-width: 851px)  {

body, html {  height: 100%;  font-size: 100%;  font-family: "Roboto", sans-serif;   background-color: #e1e1e1;    overflow: hidden;}
*, *:before, *:after { -webkit-box-sizing: border-box;  box-sizing: border-box; margin: 0; padding: 0;}
.cd-main-content {height: 100%; position: relative; z-index: 1;}
.cd-container::after {content: ''; display: table; clear: both;}
.cd-fixed-bg.cd-bg-1 { background-image: url('../images/background.jpg');}
.cd-fixed-bg { position: relative; min-height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; z-index: 1;}
.inner, .nav-panel ul .nav-btn:after { content: ""; position: absolute; top: 50%; left: 50%;}
.scene { width: 100%; height: 100%; position: relative;}
.page { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: opacity .7s, z-index .7s, -webkit-transform .7s; transition: opacity .7s, z-index .7s, -webkit-transform .7s;  transition: transform .7s, opacity .7s, z-index .7s;  transition: transform .7s, opacity .7s, z-index .7s, -webkit-transform .7s;  will-change: transform, opacity;}
.page.active {  z-index: 5;  -webkit-transition: opacity .7s, z-index 0s .7s, -webkit-transform .7s;  transition: opacity .7s, z-index 0s .7s, -webkit-transform .7s;  transition: transform .7s, opacity .7s, z-index 0s .7s;  transition: transform .7s, opacity .7s, z-index 0s .7s, -webkit-transform .7s;}
.page.active .half { -webkit-transform: translateX(0) !important; transform: translateX(0) !important;  -webkit-transition: -webkit-transform .7s ease-out;  transition: -webkit-transform .7s ease-out;  transition: transform .7s ease-out;
  transition: transform .7s ease-out, -webkit-transform .7s ease-out;}
.page.previous { opacity: 0.4 !important; visibility: visible !important;  -webkit-transition: opacity .7s, z-index 0s, -webkit-transform .7s;  transition: opacity .7s, z-index 0s, -webkit-transform .7s;  transition: transform .7s, opacity .7s, z-index 0s;  transition: transform .7s, opacity .7s, z-index 0s, -webkit-transform .7s;}
.page.small { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0;}
.page.small .half {-webkit-transform: translateX(0) !important; transform: translateX(0) !important;}
.page:nth-child(2) .left {-webkit-transform: translateX(-100%);  transform: translateX(-100%);}
.page:nth-child(2) .right {  -webkit-transform: translateX(100%); transform: translateX(100%);}
.page:nth-child(3) .left { -webkit-transform: translateX(-100%);  transform: translateX(-100%);}
.page:nth-child(3) .right {-webkit-transform: translateX(100%);   transform: translateX(100%);}
.page:nth-child(4) .left { -webkit-transform: translateX(-100%);  transform: translateX(-100%);}
.page:nth-child(4) .right { -webkit-transform: translateX(100%);  transform: translateX(100%);}
.page:nth-child(5) .left {-webkit-transform: translateX(-100%);   transform: translateX(-100%);}
.page:nth-child(5) .right {-webkit-transform: translateX(100%);   transform: translateX(100%);}
.page:nth-child(6) .left { -webkit-transform: translateX(-100%);  transform: translateX(-100%);}
.page:nth-child(6) .right { -webkit-transform: translateX(100%);  transform: translateX(100%);}
.page:nth-child(7) .left { -webkit-transform: translateX(-100%);  transform: translateX(-100%);}
.page:nth-child(7) .right {-webkit-transform: translateX(100%);   transform: translateX(100%);}
.page:nth-child(8) .left { -webkit-transform: translateX(-100%);  transform: translateX(-100%);}
.page:nth-child(8) .right { -webkit-transform: translateX(100%);  transform: translateX(100%);}
.page:nth-child(9) .left { -webkit-transform: translateX(-100%);  transform: translateX(-100%);}
.page:nth-child(9) .right {-webkit-transform: translateX(100%);   transform: translateX(100%);}
.page:nth-child(10) .left {-webkit-transform: translateX(-100%);  transform: translateX(-100%);}
.page:nth-child(10) .right {-webkit-transform: translateX(100%);   transform: translateX(100%);}
.half { position: absolute; top: 0; width: 50%; height: 100%; background-size: cover; -webkit-transition: -webkit-transform .7s ease-in;  transition: -webkit-transform .7s ease-in;  transition: transform .7s ease-in;  transition: transform .7s ease-in, -webkit-transform .7s ease-in;  will-change: transform;}
.half.left {  left: 0;}
.half.right {  left: 50%;}
.half.withText:after {  content: "";  position: absolute;  display: block;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: rgba(0, 0, 0, 0.5);  z-index: 10;}
.heading {  position: absolute;  z-index: 500;  top: 50%;  left: 50%;  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);  font-size: 3.5rem;  color: #fff;}
.heading h2 {  font-size: 3.5rem;  color: #fff; margin-bottom: 0.8em;}

.heading2 {  position: absolute;  z-index: 500;  top: 45%;  left: 50%;  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);  width: 75%;}
.heading2 h2 { font-size: 3.5rem;  color: #fff; margin-bottom: 0.8em;}
.heading2 p {font-size: 1.5rem;  color: #fff; line-height: 1.5em;}
.heading3 {  position: absolute;  z-index: 500;  top: 45%;  left: 50%;  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);  width: 75%;}
.heading3 h2 { font-size: 3.5rem;  color: #fff; margin-bottom: 0.8em;}
.heading3 p {font-size: 1.5rem;  color: #fff; line-height: 1.5em;}
.heading p.opinion {
    font-size: 1rem;
    color: #ececec;
    line-height: 1.5em;
    text-align: right;
    padding: 1rem;
}
.heading p.opinion2 {
    font-size: 1.5rem;
    color: #ffffff;
    line-height: 1.5em;
    text-align: left;

}
.nav-panel {  position: fixed;  top: 50%;  right: 2%;  -webkit-transform: translateY(-50%); transform: translateY(-50%);  z-index: 1000;  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);  transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6), -webkit-transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);  will-change: transform, opacity;}
.nav-panel.invisible {  opacity: 0;  -webkit-transform: translateY(-50%) scale(0.5); transform: translateY(-50%) scale(0.5);}
.nav-panel ul {  list-style-type: none;  overflow: block !important;   overflow: visible;}
.nav-panel ul .nav-btn {  position: relative;  overflow: hidden;  width: 1rem;  height: 1rem;  margin-bottom: 0.5rem;  border: 0.12rem solid #fff;  border-radius: 50%;  cursor: pointer;  -webkit-transition: border-color, -webkit-transform 0.3s;  transition: border-color, -webkit-transform 0.3s;  transition: border-color, transform 0.3s;  transition: border-color, transform 0.3s, -webkit-transform 0.3s;  will-change: border-color, transform;}
.nav-panel ul .nav-btn:after {  width: 100%;  height: 100%;  border-radius: 50%;  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.3); transform: translateX(-50%) translateY(-50%) scale(0.3);  background-color: #fff;  opacity: 0;  -webkit-transition: opacity 0.3s, -webkit-transform;  transition: opacity 0.3s, -webkit-transform; transition: transform, opacity 0.3s;
  transition: transform, opacity 0.3s, -webkit-transform;  will-change: transform, opacity;}
.nav-panel ul .nav-btn.active:after, .nav-panel ul .nav-btn:hover:after {  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.7); transform: translateX(-50%) translateY(-50%) scale(0.7);  opacity: 1;}
.nav-panel ul .nav-btn:hover {  border-color: yellow;  -webkit-transform: scale(1.2); transform: scale(1.2);}
.nav-panel ul .nav-btn:hover:after {  background-color: yellow;}
.nav-panel .scroll-btn {  position: absolute;  left: 0;  width: 1rem;  height: 1rem;  border: 0.2rem solid #fff;  border-left: none;  border-bottom: none;  cursor: pointer;  -webkit-transform-origin: 50% 50%;  transform-origin: 50% 50%;  -webkit-transition: border-color 0.3s;  transition: border-color 0.3s;}
.nav-panel .scroll-btn.up {  top: -1.6rem;  -webkit-transform: rotate(-45deg);  transform: rotate(-45deg);}
.nav-panel .scroll-btn.down {  bottom: -1.2rem;  -webkit-transform: rotate(135deg);   transform: rotate(135deg);}
.nav-panel .scroll-btn:hover {  border-color: yellow;}
.contenedorcentral {  max-width: 990px; /*margin: 12em auto;*/ margin-top: 30%; margin-left: auto; margin-right: auto; }
p.grupo {  width: 100px;  margin: 10px 0px; }
p.grupo span { background-color: #fbb731; padding: 5px; font-weight: bold;  text-align: center;   font-size: 16px; color: #000; }
p.grupo3 {   margin: 10px 0px; }
p.grupo3 span { background-color: #0b2aae; padding: 5px; font-weight: bold;  text-align: center;   font-size: 16px; color: #fff; }
p.boton { text-align: center; margin: 5% 0px; }
p.boton a {   background-color: #fbb731; width: 183px; padding: 5px; font-weight: bold;  text-align: center;   font-size: 16px; color: #000;  }
.contenedorcentral h1 { color: #ffffff;  font-size: 100px;  text-shadow: 11px -4px 3px #000;  text-align: center;   border-bottom: 1px dotted grey;}

.video {  margin-top: 0px;}




/*Lista de preseleccionados*/

ul.prelista { font-size: 12px;  overflow: hidden; list-style-type: none;}
ul.prelista .jugador { width: 33%; height: 71px;  float: left;    margin: 0 0 2px;}
ul.prelista .jugador { background: #e0e0e0;  color: #1d1d1d;}
ul.prelista .jugador ul {   border-right: solid 2px #ffffff;  margin: 0;  padding: 12px 0;  list-style-type: none;}
ul.prelista .jugador li { margin-right: 0;}
ul.prelista .jugador .foto-jugador { width: 50px;  height: 50px;  border-radius: 67px;  overflow: hidden;  border: solid 3px #ffffff;  line-height: 96px;  float: left;  margin: 0px 13px;}
ul.prelista .jugador .foto-jugador img { width: 45px; top: -9px;  position: relative;}
ul.prelista .jugador .nombre { padding-top: 4px;  font-weight: bold;  overflow:hidden;  white-space:nowrap;  text-overflow: ellipsis;}
ul.prelista.jugador .demarcacion, ul.prelista.jugador .equipo { overflow:hidden;  white-space:nowrap;  text-overflow: ellipsis;}



.bajar-a-contenido { display: none; }
h2.entradilla-principal { display: none }




}



/*Parche para una determinada resolución*/
@media (min-width: 1030px) {html, body { font-size: 80%; }    }



/*Estilos resoluciones movil*/

@media only screen and (max-width: 850px)  {
body, html { height: 100%;  font-size: 100%;  font-family: "Roboto", sans-serif;  background-color: #e1e1e1;}
html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
*, *:before, *:after { -webkit-box-sizing: border-box;  box-sizing: border-box; margin: 0;  padding: 0;}
.cd-main-content { /*height: 100%;*/ position: relative;  z-index: 1;}
.cd-container::after { content: '';  display: table;  clear: both;}
.scene {  width: 100%;  height: 100%;}
.page {background-image: url(http://e00-especiales-marca.uecdn.es/mundial-rusia-2018/images/selecciones/fondo-mundial.jpg);background-size: cover;background-repeat: no-repeat;background-position: center center;  min-height: 100%;}
.contenedorcentral {  max-width: 990px;  margin: 0 auto;  padding-top: 5em;}
.contenedorcentral h1 {font-size: 60px; text-shadow: 6px 2px 0px #000;color: #ffffff;text-align: center;   border-bottom: 1px dotted grey;}

p.grupo { display: none; }
p.boton { text-align: center; margin: 5% 0px; }
p.boton a {   background-color: #fbb731; width: 183px; padding: 5px; font-weight: bold;  text-align: center;   font-size: 16px; color: #000;  }
h2.entradilla-principal { font-size: 2em;  color: #fbb731;  margin: 20px auto; width: 100%;  text-align:center; display: block; padding: 0.5em;}
.video {  margin-top: 20px;}
.bajar-a-contenido {position: absolute; left: 50%;  bottom: 0%;  -ms-transform: translateX(-50%);    -webkit-transform: translateX(-50%);  -moz-transform: translateX(-50%);  -o-transform: translateX(-50%);  transform: translateX(-50%);    -webkit-animation: arrow_animation 1s infinite;   animation: arrow_animation 1s infinite;  transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;  background: rgba(0, 0, 0, 0) url(http://e00-especiales-marca.uecdn.es/mundial-rusia-2018/images/flecha.png) no-repeat scroll center top;   background-color: transparent;   display: block;   height: 65px;   margin: 0px auto;    width: 65px;}
.page .left {float: none;  padding:15px;}
.page .right {float: none; padding:15px;}
.page-3 .heading3 {min-height: 367px;}
.page:nth-child(3) .left {min-height: 100%; background-size: cover;  background-repeat: no-repeat;  width: 100%;  height: 570px;}
.page:nth-child(3) .right {background-size: cover;  background-repeat: no-repeat;  width: 100%;}
.page:nth-child(4) .right {  background-size: cover;  background-repeat: no-repeat;  width: 100%;  height: 250px;}
.page:nth-child(7) .left {  background-size: cover;  background-repeat: no-repeat;  width: 100%;  height: 460px;}
.page:nth-child(10) .left {  background-size: cover;  background-repeat: no-repeat;  width: 100%;  height: 302px;}
.heading p.opinion { font-size: 1rem; color: #666; line-height: 1.5em; text-align: right;  padding: 1rem;}
.heading h2 {  font-size: 2em;  color: #000;}
.heading2 h2 {display:none;}
.heading3 h2 {  font-size: 2em;  color: #fbb731;  margin: 0px auto; width: 100%;  text-align:center;}
.heading3 h2.negro {  color: #000; margin-top: 20px;}
.heading3 p { color: #ffffff;  margin-top: 1.5em;}
.heading3 p.gris {  color: #222222;  margin-top: 0.5em;}
.volver-arriba {  width: 65px; height: 65px;  background: url(http://e00-especiales-marca.uecdn.es/mundial-rusia-2018/images/selecciones/subir.jpg) no-repeat center bottom;  bottom: 20px;  display: none;  text-indent: -9999px;  overflow: hidden;   padding: 5px 15px;
    position: fixed;  right: 20px;  border-radius: 35px;  transition: all 0.2s linear 0s;  z-index: 10;}
.page:nth-child(5) .left {display: none;}
p.grupo3 {  margin: 10px 0px; }
p.grupo3 span { background-color: #0b2aae; padding: 5px; font-weight: bold;  text-align: center;   font-size: 0.8em; color: #fff; }

.heading3 p.opinion { font-size: 1rem; color: #666; text-align: center;}

/*jugadores*/
ul.prelista {  font-size: 12px;  overflow: hidden;  list-style-type: none;  margin-top: 1em;}
ul.prelista .jugador {   width: 50%;  height: 71px;  float: left;  margin: 0 0 2px;}
ul.prelista .jugador {  background: #e0e0e0;  color: #1d1d1d;}
ul.prelista .jugador ul {  border-right: solid 2px #ffffff;  margin: 0;  padding: 12px 0;   list-style-type: none;}
ul.prelista .jugador li { margin-right: 0;}
ul.prelista .jugador .foto-jugador { width: 50px;  height: 50px;  border-radius: 67px;  overflow: hidden;    border: solid 3px #ffffff;  line-height: 96px;  float: left;  margin: 0px 13px;}
ul.prelista .jugador .foto-jugador img {  width: 45px;  top: -9px;  position: relative;}
ul.prelista .jugador .nombre {  padding-top: 4px;  font-weight: bold; overflow:hidden;  white-space:nowrap; text-overflow: ellipsis;}
ul.prelista .jugador .demarcacion, .jugador .equipo { overflow:hidden; white-space:nowrap; text-overflow: ellipsis;}


.page:nth-child(6) .right {min-height: 100%; background-size: cover; background-repeat: no-repeat;  width: 100%;  height: 570px;}

table.ficha-tecnica td {color: #000;}
table.ficha-tecnica tr:nth-child(2n+0)  {background-color:#ececec;}
}

/*Estilos resoluciones Ipad*/

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation:landscape) {

body { padding-top: 0px;}
.bajar-a-contenido {display: none}
.contenedorcentral { max-width: 640px;}
html, body { font-size: 70%; }
.nav-panel ul .nav-btn { width: 2rem;  height: 2rem; }
.nav-panel .scroll-btn {  width: 2rem;  height: 2rem;}

}


@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation : portrait) {


 body { padding-top: 0px;}
 .contenedorcentral h1 { font-size: 100px;}

.page:nth-child(4) .right {height: 650px;}
.heading3 p.imagenentrenador { height: 690px;}
.page:nth-child(10) .left { height: 415px;}
}

/*Parche para una determinada resolución*/

@media only screen and (min-width: 850px) and (max-height: 768px)  {

.contenedorcentral {    max-width: 600px;}
.heading3 { top: 52%;}

}

#mapaConcepto{
  width: 100%;
  min-width: 40%;
  max-width: 122%;
  margin-top: 10%;
  margin-left: 0%;
  margin-right: 10%;
}

#mallaConcepto{
  max-width: 100%;
  margin-left: 0%;
  margin-top: 0%;
  margin-right: 0%
}


#funcion{
  margin-bottom: -3%;
  margin-top: 10%;
}

#robot{
  width: 73%;
}

#pizza{
  width: 4%;
  margin-left: 27%;
  margin-top: 3%;
}