:root{
  --ab-color-green: #44d62c;
  --ab-color-black: #000000;
  --ab-color-white: #ffffff;
  --ab-color-gray:  #9d9d9d;
	--ab-grid-tcols: var(--ab-sides) repeat(12, 1fr) var(--ab-sides);
	--ab-safemargin: 30px;
}
@font-face {
	font-family: 'abc_outline';
	src: url('./fonts/abracadabra_lubalin_bold_outline-webfont.woff2') format('woff2'),
			 url('./fonts/abracadabra_lubalin_bold_outline-webfont.woff') format('woff');
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: 'abc';
	src: url('./fonts/abracadabra_lubalin_bold-webfont.woff2') format('woff2'),
			 url('./fonts/abracadabra_lubalin_bold-webfont.woff') format('woff');
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: 'abc_outline';
	src: url('./fonts/abracadabra_lubalin_bold_outline-webfont.woff2') format('woff2'),
			 url('./fonts/abracadabra_lubalin_bold_outline-webfont.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'abc';
	src: url('./fonts/abracadabra_lubalin_bold-webfont.woff2') format('woff2'),
			 url('./fonts/abracadabra_lubalin_bold-webfont.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Source Sans Pro';
	src: url('./fonts/SourceSansPro-Regular.woff2') format('woff2'),
			 url('./fonts/SourceSansPro-Regular.woff') format('woff');
	font-style: normal;
}
@font-face {
	font-family: 'Source Sans Pro';
	src: url('./fonts/SourceSansPro-Bold.woff2') format('woff2'),
			 url('./fonts/SourceSansPro-Bold.woff') format('woff');
  font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Source Sans Pro';
	src: url('./fonts/SourceSansPro-Semibold.woff2') format('woff2'),
			 url('./fonts/SourceSansPro-Semibold.woff') format('woff');
  font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Luba';
	src: url('./fonts/itc-lubalin-graph-std-demi.otf');
  font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Luba';
	src: url('./fonts/itc-lubalin-graph-std-medium.otf');
  font-weight: 600;
	font-style: normal;
}
html{margin:0;padding:0;font-size:30px;line-height: 38px;width: 100vw ; overflow-x: hidden;scroll-behavior: smooth;width:100vw;height:100vh;}
body{margin:0;padding:0;background-color: var(--ab-color-black);color:var(--ab-color-white);font-family: 'abc', sans-serif;overflow:hidden;position:relative;width:100%;height:100%;}
img{max-width:100%;max-height:100%;}
.verde{color:var(--ab-color-green);}
.langmod {display:none;}
[lang="es-MX"] .lang-es{display:block;}
[lang="en-US"] .lang-en{display:block;}
[lang="fr-FR"] .lang-fr{display:block;}
[lang="es"] .lang-es{display:block;}
[lang="en"] .lang-en{display:block;}
[lang="fr"] .lang-fr{display:block;}

a{text-decoration:none;}

#bgvideo, #facevideo, #thevideo{width:100%;height:100%;pointer-events: none;}
#bgvideo iframe, #facevideo iframe, #thevideo iframe{width:100%;height:100%;}
section{display:none;position:relative;}
section.show{display: block;width:177.78vh;height: 100vh;margin: 0 auto;}
section.show{width:100%;height:56.25vw;position:absolute;top:50%;transform:translateY(-50%);}
#again{display:none;position:absolute;bottom:var(--ab-sides);left:var(--ab-sides);color:white;text-align:center;}
#again{background-image: url('./img/again.svg');background-size: 100%;background-repeat: no-repeat;width:5vw;height:5vw;cursor:pointer;}

#frase{position:absolute;top:15vh;left:0;width:100%;text-align:center;font-size:50px;color:var(--ab-color-green);z-index:1;}
.btn.invisible{display:block;width:10.417vw;height:12.500vw;position:absolute;cursor:pointer;}
#btn1{top:72%;left:07%;}
#btn2{top:32%;left:25%;}
#btn3{top:55%;left:45%;}
#btn4{top:39%;left:65.5%;}
#btn5{top:64%;left:82%;}
.number{color:#5ea;font-size: 30px;position:absolute;cursor: pointer;}

.thenumbers{width:calc(100vw - 80px);height:calc(100vh - 160px);margin: 80px auto 80px auto;display: grid;grid-template-columns: 1fr 20% 1fr; grid-template-rows: 27% 45% 27%; justify-items: center; align-items: center;}
.numbers{display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr);height:100%;}
.numbers.mid{grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);max-height: 100%; max-width: 100%;}
.number{position:relative;}

.numbers[data-numbers-0]{grid-column:1;grid-row:1/4;}
.numbers[data-numbers-1]{grid-column:2;grid-row:1;}
.numbers[data-numbers-2]{grid-column:2;grid-row:3;}
.numbers[data-numbers-3]{grid-column:3;grid-row:1/4;}

.page-thevideo #abremenu, .page-thevideo #logotop {display: none;}