﻿@media screen and (min-width: 48em) {
body {
	font-size: 18px;
	font-size: 1.125em;
}
h1 {
	font-size: 5vw;
}
h2 {
	font-size: 2em;
}

/** BLOQUES*/
.bloque-grid {
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
	width: 100%;
	position: relative;
	align-items: start;
	justify-content: center;
}
.bloque-grid > * + * {
	margin-left: 3em;
}
.hexagon-container{
	flex-direction:row;	
}
.bloque2, .bloque2-short, .bloque2-large, .bloque3, .bloque4 {
	flex: 1;
}
.bloque2 img, .bloque2-short img {
	max-width: 100%;
}
.bloque-grid .bloque4{
	margin:1em;	
}
/** CUSTOM STYLES*/
.page2 .background-right {
	width: 100vw;
	height: 100vw;
	transform: translate(40%, -50%) rotateZ(45deg);

}
.page2 .bloque-child .style1 {
	font-size: 1.5em;
}
.page3 .bloque-child {
	margin-left: 50%;
}

.page5 .bloque-child {
	margin-left: 5%;
}
.page6 .bloque-grid:last-child{
	background-color:transparent;
	padding:0;	
}
.page6 .bloque-grid .bloque3 {
	margin-bottom:0;
}
.page6 .cube-container {
	margin-bottom: 10vw;
	padding-right: 5.7vw;
}
.page6 .cube {
	width: 8vw;
	height: 8vw;
}
.page6 .extra.open{
    position: absolute;
    bottom: 0;
    z-index: 999;
    transform: translate(0, -50%);
}
.page8 .center-wrap {
	padding: 2em 4em;
	background-color: rgba(255,255,255,0.8);
}
.page8 .bloque-grid .bloque4 {
	margin-bottom:0;
}
.page8 .cube-container {
	margin-bottom: 8vw;
	padding-right: 4.4vw;
}
.page8 .cube {
	width: 6vw;
	height: 6vw;
}
.page11 .bloque-child {
	margin-left: 25%;
}
.page12 .bloque-grid > * + *{
	margin-left:15%;	
}
.page14 .bloque-grid{
	flex-wrap:nowrap;
}
.page14 .bloque-grid > * + *{
	margin-left:15%;	
}
.page14 h2{
	text-align:center;	
}
.page15 .bloque-grid:last-child{
        max-width: 90%;
        margin:0 auto;
}
.page15 .bloque-grid:last-child .bloque-child{        
        flex: 0 0 20%;
        padding: 0 1em;
        margin-left: 0;
        text-align: center;
        box-sizing: border-box;
}
.hexagon {
	width: 20vw;
	height: 11.547vw; /* 20 * sqrt(3)/2 */
	margin: 5vw auto;
}
.hexagon::before, .hexagon::after {
	border-left: 10vw solid transparent;
	border-right: 10vw solid transparent;
}
.hexagon::before {
	border-bottom: 5.7735vw solid #02BBFB;
}
.hexagon::after {
	border-top: 5.7735vw solid #02BBFB;
}
.inblock{
	margin-right:4em;	
}
}
@media screen and (min-width: 60em) {
}
@media screen and (min-width: 67em) {
body {
	font-size: 18px;
	font-size: 1.125em;
}
h1 {
	font-size: 3.5vw;
}
h2 {
	font-size: 2.85vw;
}
h2 span {
	position: absolute;
	left: -1.75em;
}
.center-wrap {
	width: 65%;
	margin: 0 auto;
}
.mobile {
	display: none;
}
/** BACKGROUND*/
@-moz-document url-prefix() {
 .chapter.cover .background-wrap-right, .chapter.cover .background-wrap-left {
 opacity: 0.8;
}
}
.section .face{
	width:0;
	height:0;
	transform-origin:bottom right;
}
.section.active .face {
 	width: 100%;
    height: 100%;
	transform-origin:top left;
	text-align:center;
	color:black;
	font-size:8em;
}
.section.active .face-top {
	transition: transform-origin 1s ease 1s, width 1s ease, height 1s ease;
}
.section.active .face-left {
	transition: transform-origin 1s ease 1s, width 0.5s ease 0.25s, height 1s ease 0.25s;
}
.section.active .face-right {
	transition: transform-origin 1s ease 1s, width 0.75s ease 0.5s, height 1s ease 0.5s;
}
.onepage-pagination li a:before {
	-webkit-transition: background 0.5s ease;
	-moz-transition: background 0.5s ease;
	-ms-transition: background 0.5s ease;
	-o-transition: background 0.5s ease;
	transition: background 0.5s ease;
}
.section.active.page14 .bloque2 a:after{
	-webkit-transition: background 0.5s ease;
	-moz-transition: background 0.5s ease;
	-ms-transition: background 0.5s ease;
	-o-transition: background 0.5s ease;
	transition: all 0.5s ease 0.5s;
}
.section.active .plus{
	-webkit-transition: background 0.5s ease;
	-moz-transition: background 0.5s ease;
	-ms-transition: background 0.5s ease;
	-o-transition: background 0.5s ease;
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s;	
}
.section.active .center, .section.active .left, .section.active .right, .section.active .down{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.section.active .background-top, .section.active .background-left, .section.active .background-right, .section.active .background-bottom, .section.active .image {
	-webkit-transition: background 0.5s ease;
	-moz-transition: background 0.5s ease;
	-ms-transition: background 0.5s ease;
	-o-transition: background 0.5s ease;
	transition: all 1s ease 0.5s;
}
.section.page10.active video{
	transition: top 1s ease 2s;
}
.cursor {
	-webkit-transition: opacity 0.25s ease;
	-moz-transition: opacity 0.25s ease;
	-ms-transition: opacity 0.25s ease;
	-o-transition: opacity 0.25s ease;
	transition: opacity 0.25s ease;
}
.section.page2 .background-left{
	transform: translate(-80%, 140%) rotateZ(45deg);
}
.section.page2.active .background-left{
	transform: translate(-70%, 70%) rotateZ(45deg);
	transition-delay:0.75s;
}
.section.page2 .background-right{
	 transform: translate(160%, -50%) rotateZ(45deg);
}
.section.page2.active .background-right{
 transform: translate(40%, -50%) rotateZ(45deg);
}
.section.page2 .background-top{
	 transform: translate(-30%, -150%) rotateZ(45deg);
}
.section.active.page2 .background-top{
    transform: translate(-30%, -110%) rotateZ(45deg);
	transition-delay:0.5s;
}
.section.page2 .background-bottom{
    transform: translate(50%, 190%) rotateZ(45deg);
}
.section.active.page2 .background-bottom{
    transform: translate(50%, 90%) rotateZ(45deg);
	transition-delay:1s;
}
.section.page6 .background-bottom{
	width:0;	
}
.section.page6.active .background-bottom{
	width:100vw;
}
.section.page8 .background-right{
	width:100vw;	
}
.section.page8.active .background-right{
	width:50vw;
}
.section.page10 .background-top{
	width:0;	
}
.section.page10.active .background-top{
	width:100vw;
}
.section.page10 video{
	top:0;
}
.section.page10.active video{
	top:40vh;
}
.section.page12 .image{
	transform:scale(0);	
}
.section.active.page12 .image{
	transform:scale(1);	
}
.section.page12 .background-top{
    transform: translate(-100%, -100%);
}
.section.active.page12 .background-top{
    transform: translate(-10%, -10%);
	transition-delay:1s;
}
.section.page14 .bloque2 a:after{
	transform:translate(50%,-50%) scale(0);
}
.section.active.page14 .bloque2 a:after{
	transform:translate(50%,-50%) scale(1);
}
.section .plus{
	transform:scale(0);	
}
.section.active .plus{
	transform:scale(1);	
}
.section .center {
	opacity: 0;
	-moz-transform: translateY(2em);
	-webkit-transform: translateY(2em);
	-o-transform: translateY(2em);
	-ms-transform: translateY(2em);
	transform: translateY(2em);
}
.section .left {
	opacity: 0;
	-moz-transform: translateX(-2em);
	-webkit-transform: translateX(-2em);
	-o-transform: translateX(-2em);
	-ms-transform: translateX(-2em);
	transform: translateX(-2em);
}
.section .right {
	opacity: 0;
	-moz-transform: translateX(2em);
	-webkit-transform: translateX(2em);
	-o-transform: translateX(2em);
	-ms-transform: translateX(2em);
	transform: translateX(2em);
}
.section .down {
	opacity: 0;
	-moz-transform: translateY(-2em);
	-webkit-transform: translateY(-2em);
	-o-transform: translateY(-2em);
	-ms-transform: translateY(-2em);
	transform: translateY(-2em);
}
.section.active .center, .section.active .left, .section.active .right, .section.active .down {
	opacity: 1;
	-moz-transform: translateX(0) translateY(0);
	-webkit-transform: translateX(0) translateY(0);
	-o-transform: translateX(0) translateY(0);
	-ms-transform: translateX(0) translateY(0);
	transform: translateX(0) translateY(0);
}
.section.active .anim1 {
	transition-delay: 0.5s;
}
.section.active .anim2 {
	transition-delay: 0.75s;
}
.section.active .anim3 {
	transition-delay: 1s;
}
.section.active .anim4 {
	transition-delay: 1.25s;
}
.section.active .anim5 {
	transition-delay: 1.5s;
}
.section.active .anim6 {
	transition-delay: 1.75s;
}
.section.active .anim7 {
	transition-delay: 2s;
}
.section.active .anim8 {
	transition-delay: 2.25s;
}
.section.active .anim9 {
	transition-delay: 2.5s;
}
.section.active .anim10 {
	transition-delay: 2.75s;
}
.section .hexagon.hexagon1{
	transform: scale(1);
}
.section.active .hexagon.hexagon1{
	transform: scale(1.2);
}
.section .hexagon.hexagon2{
	transform: translate(0, 0);
}
.section.active .hexagon.hexagon2{
	transform: translate(0, -30%);
}
@media screen and (min-width: 87.50em) {
body {
	font-size: 18px;
	font-size: 1.125em;
}
}
@media screen and (min-width: 100em) {
body {
	font-size: 2em;
	font-size: 1.250em;
}
.center-wrap {
	max-width: 1200px;
}
.page6 .extra.open{
    position: relative;
    bottom: 0;
    z-index: 999;
    transform: none;
}
}
@media screen and (min-width: 112.500em) {
body {
	font-size: 22px;
	font-size: 1.375em;
}
}
