/**
* Author: Cristian Pacher
**/
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
	width: 100%;
	overflow-x: hidden;height:100%;
}
body {
	height:100%;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	padding:0;
	margin:0;
	font-size:16px;
	font-variant-ligatures: no-common-ligatures;
	line-height: 28px;
	color: #fff; 
	background:#000 url(../img/background-cdmx.jpg) center center;
	background-size:cover;
	overflow-x:hidden;
	position: relative;
}
.container{height:100%;}

h1 { font-size: 3em; line-height:1.2em; margin:0 0 .3em; }
h2 { font-size: 1.8em; line-height:1.4em; margin:0 0 .3em;  }
h3 { font-size: 1.4em; line-height:1.4em; }
h4 { font-size: 1.25em; line-height:1.4em;}
h5 { font-size: 1.1em; line-height:1.4em; }
h6 { font-size: 1em; line-height:1.2em; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration: none
}	 
p { 
	padding: 0 0 1em;
	margin:0;
	color:#444;
	font-weight:400;
}
a {
	color: #61DED2;
	outline: 0;
	font-weight: bold;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
	text-decoration:none;
} 
a:hover {
	text-decoration: none;
	color: #1f2222;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
}

.img-responsive{padding:10px 0;}

.highlight {
	color: #61DED2;
}

.highlight-2 {
	color: #579E97;
}
#preloader { 
	position: fixed; 
	left: 0; 
	top: 0; 
	z-index: 999; 
	width: 100%; 
	height: 100%; 
	overflow: visible; 
	background: #fff url(../images/loading.gif) no-repeat center center;
}
.fullscreen {
    width:100%;
    min-height:100%;
	background-repeat:no-repeat;
    background-position:50% 50%;
    background-position:50% 50%\9 !important;
}
.overlay {
    background-color: rgba(24, 56, 53, 0.7);
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
}

.overlay:hover{
    background-color: rgba(24, 56, 53, 0.9);
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
}

iframe{margin-bottom:-10px; }

/* video Styles ---------------------------------*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* tabla ---------------------------------*/
.contenedor-tabla{display: table; width:90%; margin:0 auto;}
.contenedor-fila{display: table-row;}
.contenedor-columna{display: table-cell; width:50%;}

.centrar-contenido{width: 80%; margin:0 auto; text-align:center; padding:25px 0;}

/* Galeria ---------------------------------*/
.gal {
  font-size: 1px;
  letter-spacing: -1px;
  width: 100%;/*o lo necesario*/
  margin: auto;
  padding:15px 0;
}
.gal div {
  display: inline-block;
  word-spacing: normal;
  font-size: 2rem;/*u otra unidad para IE8 y -*/
  letter-spacing: normal;
  white-space: normal;
  width: 25%;/*El valor necesario*/
  margin-top:-1px;
  background:url(../images/lupa-icon.svg) no-repeat center center #aec33b;
}
.gal img{width:100%; height:auto;}

/* Efectos ---------------------------------*/
.fade{
   background-color: rgba(0,0,0,.7);
   opacity: 1;
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
}
.fade:hover {
	opacity: 0.2;
}

.parpadeo {
  
  animation-name: parpadeo;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
	

/* End efectos ---------------------------------*/

/*---menú index----webkit-transform: translateX(-50px);transform: translateX(-50px)---*/

.logo-container{width:200px;display:block;margin:0 auto;position:relative;text-align:center;top:36%;z-index:90;}
span.italica{font-size:14px; font-style:italic;letter-spacing: 3px;}
span.medium{font-size:14px; font-weight:600;letter-spacing: 3px;}

.boton-contenedor{width:100%; height:100%; overflow:hidden;position:absolute;top:0;}

.boton-izq .b-izq{opacity: 0;}
.boton-izq{width:50%; height:100%;  background:rgba(000,000,000,0.0);-webkit-transition: all .8s ease;transition: all .8s ease;   margin:0; padding:0;display:inline;position:absolute;z-index:1;left:0;}
.b-izq{width:auto;background:;text-align:center;padding-right:20px;position:absolute;top:50%;right:0;}
.boton-izq:hover{width:55%; background: rgba(000,000,000,0.5);border-right:1px solid #fff;-webkit-transition: all .8s ease;transition: all .8s ease;z-index:3;}
.boton-izq:hover .b-izq{opacity: 1;}

.boton-der .b-der{opacity: 0;}
.boton-der{width:50%; height:100%;  background:rgba(000,000,000,0.0);-webkit-transition: all .8s ease;transition: all .8s ease; margin:0;padding:0;display:inline;position:absolute;overflow:hidden;right:0;}
.b-der{width:auto;background:;text-align:center;padding-left:20px;position:absolute;top:50%;}
.boton-der:hover{width:55%; background: rgba(000,000,000,0.5);border-left:1px solid #fff;-webkit-transition: all .8s ease;transition: all .8s ease;z-index:2;}
.boton-der:hover .b-der{opacity: 1;}


@media (max-width: 1440px) {
.b-izq{padding-right:68px;top:51%;}
.b-der{padding-left:68px;top:51%;}
.boton-izq:hover{width:60%;}
.boton-der:hover{width:60%;}
}

@media (min-width: 1081px) {
.contenido-maquina{left:60%;}
}

@media (max-width: 1280px) {
.b-izq{padding-right:55px;top:52.5%;}
.b-der{padding-left:55px;top:52.5%;}
.boton-izq:hover{width:60%;}
.boton-der:hover{width:60%;}
.contenido-maquina{left:35%;}
}


@media (max-width: 1024px) {
.b-izq{padding-right:28px;top:46%;}
.b-der{padding-left:28px;top:46%;}
.boton-izq:hover{width:60%;}
.boton-der:hover{width:60%;}
.contenido-maquina{left:50%;}
}

@media (max-width: 768px) {
.b-izq{padding-right:25px;top:48.7%;}
.b-der{padding-left:25px;top:48.7%;}
.boton-izq:hover{width:63%;}
.boton-der:hover{width:63%;}
.button--winona{font-size:20px;}
.contenido-maquina{left:35%;}
}

@media (max-width: 720px) {
.b-izq{padding-right:25px;top:60%;}
.b-der{padding-left:25px;top:60%;}
}

@media (min-width: 414px) {
.content {  top:30%;left:20%;}
}

@media (max-width: 414px) {
.b-izq{top:54%;}
.b-der{top:54%;}
.boton-izq:hover{width:74%;}
.boton-der:hover{width:74%;}
.contenido-maquina{display:none;}
.content {top:10%;left:50%;}
}

@media (max-width: 412px) {
.b-izq{top:56%;}
.b-der{top:56%;}
.boton-izq:hover{width:74%;}
.boton-der:hover{width:74%;}
}

@media (max-width: 375px) {
.b-izq{top:56%;}
.b-der{top:56%;}
.boton-izq:hover{width:77.6%;}
.boton-der:hover{width:77.6%;}
}

@media (max-width: 360px) {
.b-izq{top:63%;}
.b-der{top:63%;}
}

@media (max-width: 320px) {
.b-izq{top:59%;}
.b-der{top:59%;}
.boton-izq:hover{width:80.5%;}
.boton-der:hover{width:80.5%;}
}


/**-----*/

.content {
  width:237px;
  font-size:28px;
  line-height:40px;
  font-family: 'Open Sans', sans-serif;
  color:#fff;
  height:40px;
  position:absolute;
  margin-top:-15px;
  margin-left:-118px;}
  
  .content:before {
    content:'[';
    position:absolute;
    left:-30px;
    line-height:40px;
  }
  .content:after {
    content:']';
    position:absolute;
    right:-30px;
    line-height:40px;
  }
  .content:after, .content:before {
    color:#16a085;
    font-size:44px;margin-top:-5px;
    animation:2s linear 0s normal none infinite opacity;
    -webkit-animation:2s ease-out 0s normal none infinite opacity;
    -moz-animation:2s ease-out 0s normal none infinite opacity;
    -o-animation:2s ease-out 0s normal none infinite opacity;
  }


.visible {
  float:left;
  overflow:hidden;
  height:40px;   
}

h2 {
  color:#fff;
  display:inline;
  font-size:28px;font-weight:300;
  float:left;
  margin:0;
}

ul {
  margin-top:0;
  padding-left:110px;
  text-align:left;
  list-style:none;
  animation:6s linear 0s normal none infinite change;
  -webkit-animation:6s linear 0s normal none infinite change;
  -moz-animation:6s linear 0s normal none infinite change;
  -o-animation:6s linear 0s normal none infinite change;
}

ul li {font-weight:600;line-height:40px;margin:0;}

@-webkit-keyframes opacity {
  0%   {opacity:0;}
  50%  {opacity:1;}
  100% {opacity:0;}
}
@keyframes opacity {
  0%   {opacity:0;}
  50%  {opacity:1;}
  100% {opacity:0;}
}

@-webkit-keyframes change {
  0%   {margin-top:0;}
  15%  {margin-top:0;}
  25%  {margin-top:-40px;}
  40%  {margin-top:-40px;}
  50%  {margin-top:-80px;}
  65%  {margin-top:-80px;}
  75%  {margin-top:-40px;}
  85%  {margin-top:-40px;}
  100% {margin-top:0;}
}
@keyframes change {
  0%   {margin-top:0;}
  15%  {margin-top:0;}
  25%  {margin-top:-40px;}
  40%  {margin-top:-40px;}
  50%  {margin-top:-80px;}
  65%  {margin-top:-80px;}
  75%  {margin-top:-40px;}
  85%  {margin-top:-40px;}
  100% {margin-top:0;}
}


/**----**/
.contenido-maquina{border-left:1px solid #fff;padding-left:10px;position:absolute;bottom:20%;}
p{
  color: #fff; 
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 4s steps(60, end); 
}

p:nth-child(2){
  animation: type2 8s steps(60, end);margin-top:-15px;
}

p:nth-child(3){
  animation: type3 16s steps(60, end);margin-top:-15px;
}

p:nth-child(4){
  animation: type4 32s steps(60, end);margin-top:-15px;
}

span.maquina{
  animation: blink 1s infinite;
}

@keyframes type{ from { width: 0; } } 

@keyframes type2{0%{width: 0;}50%{width: 0;}100%{ width: 100; } } 

@keyframes type3{0%{width: 0;}50%{width: 0;}100%{ width: 100; } } 

@keyframes type4{0%{width: 0;}50%{width: 0;}100%{ width: 100; } } 

@keyframes blink{to{opacity: .0;}}

::selection{background: black;}

/* Winona button */

/* Box colors */
.bg-1 {
	color: #37474f;
}

/* Common button styles */
.button {
	min-width: 100px;
	max-width: 250px;
	display: block;
	margin: 0 auto;
	padding: 1em 2em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
}
.button:focus {
	outline: none;
}
.button > span {
	vertical-align: middle;
	text-align:center;
}

/* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */
.bg-1 .button {
	color: #fff;
	border-color: #999;
	background:rgba(0, 0, 0, 0.2);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 1);
}

/* Typography and Roundedness */
.button--round-s {
	border-radius: 5px;
}

/* Borders */
.button--border-thin {
	border: 0px solid;
}

.button--winona {
	overflow: hidden;
	padding: 0;
	-webkit-transition: border-color 0.3s, background-color 0.3s;
	transition: border-color 0.3s, background-color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--winona::after {
	content: attr(data-text);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: -30px;
	opacity: 0;
	color: #Fff;
	-webkit-transform: translate3d(0, 25%, 0);
	transform: translate3d(0, 25%, 0);
}
.button--winona > span {
	display: block;
}
.button--winona.button--inverted {
	color: #7986cb;
}
.button--winona.button--inverted:after {
	color: #fff;
}
.button--winona::after,
.button--winona > span {
	padding: 1em 2em;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--winona:hover {
	border-color: #fff;
	background-color: rgba(126, 192, 165, 0.0);
}
.button--winona.button--inverted:hover {
	border-color: #21333C;
	background-color: #21333C;
}
.button--winona:hover::after {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.button--winona:hover > span {
	opacity: 0;
	-webkit-transform: translate3d(0, -25%, 0);
	transform: translate3d(0, -25%, 0);
}