html {
  font-size: 15px; }

body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  color: #3C3C3B; }

a {
  text-decoration: none;
  font-weight: bold;
  color: #F3C042;
  -webkit-transition: all .5s ease;
  transition: all .5s ease; }

a:visited {
  color: #F3C042;
  text-decoration: none; }

a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: #F9B233; }

.bienvenida {
  background: #fff;
  height: 50vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.encabezado {
  background: #fff;
  color: #3C3C3B;
  padding: 0; }

.encabezado.fondo-menu {
  -webkit-transition: all .5s ease;
  transition: all .5s ease; }

.encabezado .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.container-extendido {
  width: 100%;
  padding: 0; }

.container-logo {
  background-color: #f39200;
  }

.container-menu {
  background-color: #3c3c3c;
  }

.copyright {
  font-size: 0.8em;
  font-weight: bold;
}

.unmirlo-logo {
  text-align: center;
  filter: drop-shadow(1px 1px 1px #636c72);
}

@media (max-width: 768px) {
  .encabezado .container {
    width: 100%;}

  .espacio-extra {
    border-bottom: 1em solid #292b2c; }}

.texto-encabezado {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: #F3C042;
  font-size: 1.5rem;
  font-weight: bold; }

.texto-encabezado img {
  max-width: 100%; }

/* Estilos para los botones del menu */
#logo-menu {
  height: 2.5em; }

#logo-menu-mini {
  height: 2em; }

#logo-menu-txt {
  height: 2rem; }

.boton-home,
.boton-menu {
  border: 0;
  font-size: 2rem;
  margin: 0;
  padding: 0 .5rem;
  background: transparent;
  color: black; }

.boton-menu {
  margin-top: -0.75em;
}

.boton-home:focus,
.boton-menu:focus {
  outline: 0; }

.boton-home {
  margin-right: auto; }

.boton-menu {
  margin-left: auto; }

.flecha-bajar a {
  display: inline-block;
  color: #000;
  font-size: 4rem;
  -webkit-animation: flecha-animada 2s ease-in-out infinite;
          animation: flecha-animada 2s ease-in-out infinite; }

@-webkit-keyframes flecha-animada {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }
  to {
    -webkit-transform: translatey(0);
            transform: translatey(0); } }

@keyframes flecha-animada {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }
  to {
    -webkit-transform: translatey(0);
            transform: translatey(0); } }
/* Estilo menu */
#menu-principal {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  background: #292b2c; }

#menu-principal ul {
  padding: 0;
  list-style: none;
  margin: 1rem 0 0 0; }

#menu-principal ul a {
  display: block;
  padding: .5rem 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  border-top: 1px solid #3C3C3B;
  text-decoration: none;
  text-align: center;
  color: #ffffff; }

#menu-principal ul a:hover,
#menu-principal ul li.active a {
  color: #F3C042; }

/* Sub-menu */
.submenu {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  background: #fff; }

.submenu ul {
  padding: 0;
  list-style: none;
  margin: 1rem 0 0 0; }

.submenu ul a {
  display: block;
  padding: .5rem 0;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #ffffff; }

.submenu ul a:hover,
.submenu ul li.active a {
  color: #F3C042; }

/*------------------------------------
 SECCION PRESENTACION Y BREADCRUM
------------------------------------*/

.breadcrumb {
  background-color: #fff; }

/*-------------------------------
 SECCION PIE DE PAGINA
-------------------------------*/
.piedepagina {
  text-align: center;
  background-color: #1d1e1f;
  color: #f39200;
  font-size: .9rem; }

.piedepagina p {
  padding: 0;
  margin: 0; }

.ir-arriba {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  font-size: 3rem;
  color: #F3C042;
  text-decoration: none;
  display: none;
  z-index: 99999;
  line-height: 0; }

.ir-arriba:hover,
.ir-arriba:focus {
  outline: 0;
  color: #3C3C3B;
  text-decoration: none;
  -webkit-transition: all .5s ease;
  transition: all .5s ease; }

/*----------------------------------
 ESTILOS PAGINAS INTERNAS
----------------------------------*/
/* GENERALES */
.italica {
  font-style: italic; }

.negrita {
  font-style: normal;
  font-weight: bold; }

.linea-separacion {
  border-bottom: 2px solid #F9B233; }

.sombra {
  text-shadow: 2px 2px rgba(50, 50, 50, 0.5); }

.motto {
  color: #3C3C3B;
  padding: 0.5em 0 0.5em;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
}

.logo-texto {
  width: 240px;
  height: auto;
  vertical-align: text-bottom;
}

.logo-principal {
  width: 100%; }

.text-intro {
  max-width: 750px;
  margin: 0 auto 1em;
}

.icono-coloreado {
  color: #F9B233;
  padding-bottom: .25rem; }

.texto-coloreado {
  color: #F9B233;
  border-top: solid 3px #F3C042;
  padding-top: .5rem; }

figure {
  border: none; }

figcaption {
  font-size: .75rem;
  padding: .5rem; }

.tarjeta-cuerpo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.tarjeta-texto {
  -webkit-box-flex: 10;
      -ms-flex-positive: 10;
          flex-grow: 10; }

.tarjeta-portfolio {
  -webkit-box-flex: 10;
      -ms-flex-positive: 10;
          flex-grow: 10;
  font-size: 0.85rem; }

.pf-imagen-dinamica {
  width: 100%; }

.pf-imagen-linkonline {
  height: 75px;
  margin-top: 5px;
  padding-left: 10%;
  border-bottom: 2px; }

.pf-imagen-googleplay {
  width: 150px; }

.pf-imagen-med {
  width: 250px; }

.splash-juego img {
  width: 100%;
  border: solid 0.2em #F9B233;
  /*overflow:hidden;*/
}

.splash-juego img {
  -webkit-transition:all .9s ease; /* Safari y Chrome */
  -moz-transition:all .9s ease; /* Firefox */
  -o-transition:all .9s ease; /* IE 9 */
  -ms-transition:all .9s ease; /* Opera */
  width:100%;
}
.splash-juego img:hover {
  -webkit-transform:scale(1.05);
  -moz-transform:scale(1.05);
  -ms-transform:scale(1.05);
  -o-transform:scale(1.05);
  transform:scale(1.05);
}

.imagen-creciente img {
  -webkit-transition:all .9s ease; /* Safari y Chrome */
  -moz-transition:all .9s ease; /* Firefox */
  -o-transition:all .9s ease; /* IE 9 */
  -ms-transition:all .9s ease; /* Opera */
}

.imagen-creciente img:hover {
  -webkit-transform:scale(1.05);
  -moz-transform:scale(1.05);
  -ms-transform:scale(1.05);
  -o-transform:scale(1.05);
  transform:scale(1.05);
}

.foto-miembro {
  width: 100%;
}

.tecnologias-logos {
  max-width: 100%;
}

.max-ancho {
  max-width: 100%;
}

.mitad-ancho {
  width: 50%;
}

.borde-molon {
  border: 2px black solid;
  padding: 0.25em;
  margin-bottom: 0.5em;
  border-radius: 10px;
}
.sombra-img {
  filter: drop-shadow(-1px 1px 3px #444);
}

.ajustar-a-ventana{
  width: 560px;
  height: 315px;
}

@media (max-width: 767px) {
  .ajustar-a-ventana {
    width: 320px;
    height: 192px;
  }
}

/* BOTONES Y MACHAQUE DE BOOTSTRAP */
.btn-primary {
  background-color: #F3C042;
  border-color: #F9B233;
  line-height: 1.3rem; }

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:hover {
  background-color: #F9B233;
  border-color: transparent;
  color: #3C3C3B;
  font-size: 1.25rem; }

/* VIDEO Y EFECTOS */
.video-background {
  background: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120%;
  z-index: -99;
  margin-top: -15em;
}

.video-foreground, .video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.game-logo {
  text-align: center;
  margin-top: 9em;
}

.game-logo-img {
  height: 12em;
}

.game-logo-slogan {
  font-size: 1em;
  color: white;
  text-shadow: 2px 2px 0 #111;
}

.presentacion {
  margin-top: 8em;
  padding-bottom: 2em;
  background: #fff;
}

.esquiva-menu {
  margin-top: 8em;
}

.orange-tint {
  font-style: normal;
  color: #ffba02;
}

.blue-tint {
  font-style: normal;
  color: #00e3e3;
}

.strong-tint {
  font-style: normal;
  color: #3C3C3B;
}

.container .redes-sociales {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0 0 1rem;
  font-size: 3rem; }

.container .redes-sociales a
{
  margin: 0 2rem;
  opacity: 1; }

.container .redes-sociales a:hover {
  margin: 0 2rem;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;}


.container .redes-sociales-big {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 5rem; }

.container .redes-sociales-big a
{
  margin: 0 5rem;
  opacity: 1; }

.container .redes-sociales-big a:hover {
  margin: 0 5rem;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;}

@media (max-width: 767px) {
  .container .redes-sociales-big a
  {
    margin: 0 2rem;
    opacity: 1; }

  .container .redes-sociales-big a:hover {
    margin: 0 2rem;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;}
}

.facebook-color, .facebook-color:visited {
  color: #3b5998;
}
.facebook-color:hover {
  color: #F9B233;
}

.twitter-color, .twitter-color:visited {
  color: #00acee;
}

.twitter-color:hover {
  color: #F9B233;
}

.youtube-color, .youtube-color:visited {
  color: #c4302b;
}
.youtube-color:hover {
  color: #F9B233;
}

.linkedin-color, .linkedin-color:visited {
  color: #0e76a8;
}
.linkedin-color:hover {
  color: #F9B233;
}

.redes-sociales li {
  line-height: 0;
  text-align: center;
}

.facebook-color-texto-bajo-rrss, .twitter-color-texto-bajo-rrss:hover {
  color: #3b5998;
  font-size: 0.25em;
}

.twitter-color-texto-bajo-rrss, .twitter-color-texto-bajo-rrss:hover {
  color: #00acee;
  font-size: 0.25em;
}


/*----------------------------------
 MEDIAS QUERYS
----------------------------------*/
@media (max-width: 1200px) {
  .video-background {
    margin-top: -10em;
    margin-left: -12.5%;
    width: 125%;
  }

  .game-logo {
    margin-top: 9em; }

  .game-logo-img {
    height: 7em;
  }

  .presentacion {
    margin-top: 6em;
  }
}

@media (max-width: 767px) {
  .video-background {
    margin-top: -20em;
    margin-left: -50%;
    width: 200%;
  }

  .game-logo {
    margin-top: 6em; }

  .game-logo-img {
    height: 7em;
  }

  .presentacion {
    margin-top: 2em;
  }

  .logo-texto {
    heit: 8em;
    height: auto;
  }

  .esquiva-menu {
    margin-top: 3em;
  }

  .foto-miembro {
    width: 60%;
  }
}

@media (max-width: 767px) {
  #logo-menu-txt {
    height: 2.5rem; }

  #menu-principal ul a {
    font-size: 1rem; }

  .pagina-interna.inicio .bienvenida {
    height: 2rem; } }

@media (max-width: 768px) {
  .presentacion {
    padding-top: 4em;
    width: 100%; }

  .pagina-interna.inicio .bienvenida {
    height: 2rem; } }

@media (min-width: 768px) {
  html {
    font-size: 18px; }

  #menu-principal {
    height: auto !important;
    display: block;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto; }

  #menu-principal ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: center; }

  #menu-principal ul li a {
    padding: .6rem;
    margin: 0 .25rem;
    border-top: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease; }

  #menu-principal ul li.active a {
    color: #F3C042;
    border-bottom: #F3C042 3px solid; }

  .pagina-interna.inicio .bienvenida {
    height: 2rem; }

  /* Sub-menu */
  .submenu {
    height: auto !important;
    display: block;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto; }

  .submenu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    -ms-flex-pack: distribute;
        justify-content: space-around; }

  .submenu ul li a {
    padding: .6rem;
    text-transform: none;
    margin: 0 .25rem;
    border-top: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    font-weight: bold; } }
@media (min-width: 1024px) {
  #logo-menu-txt {
    height: 2.5rem; }

  #menu-principal ul li a {
    font-size: .8rem; }

  .pagina-interna.inicio .bienvenida {
    height: 2rem; }

  .submenu ul li a {
    font-size: 1rem; } }