@charset "UTF-8";
/* CSS Document */

:root {
  --primary: #AF1E2D;
  --light: #F3F3F3;
  --grey: #8A8A8B;
  --dark: #212121;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.transition-1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  background-color: var(--dark);
  opacity: 0;
  pointer-events: none;
  transition: 0.5s ease-out;
}

.transition-1.is-active {
  pointer-events: all;
  opacity: 1;
} 

.transition-2 {
  position: fixed;
  top: 0;
  left: -100vw;
  width: 100vw;
  bottom: 0;
  z-index: 101;
  background-color: var(--dark);
  transition: 0.5s ease-out;
}

.transition-2.is-active {
  left: 0vw;
}

.transition-3 {
  position: fixed;
  top: 100vh;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 101;
  background-color: var(--dark);
  transition: 0.5s ease-out;
}

.transition-3.is-active {
  top: 0vh;
}



.transform_der {
  transition: 0.5s ease-out;
}


.box_der {
  position: fixed;
  top: 0;
  left: -100vw;
  width: 100vw;
  bottom: 0;
  z-index: 101;
  background-color: var(--dark);
	
}

.transform-active_der {
	  left: 0vw;
}


.box_izq {
  position: fixed;
  top: 0;
  right: -100vw;
  width: 100vw;
  bottom: 0;
  z-index: 101;
  background-color: var(--dark);
	
}

.transform-active_izq {
	  right: 0vw;
}

.transform_izq {
  transition: 0.5s ease-out;
}

.box_arriba {
  position: fixed;
  top: 100%;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 102;
  background-color: var(--dark);
	
}

.transform-active_arriba {
	  top: 0;
}

.transform_arriba {
  transition: 0.5s ease-out;
}


.box_abajo {
  position: fixed;
  top: -100vh;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 101;
  background-color: var(--dark);
}

.transforma-active_abajo {
	  top: 0;
}

.transforma_abajo {
  transition: 0.5s ease-out;
}

.box_noreste {
  position: fixed;
  top: 0;
  left: -500vw;
  width: 400vw;
  height: 500vh;
  bottom: 0;
  transform: rotate(-40deg);
  z-index: 101;
  background-color: var(--dark);
}

.transforma-active_noreste {
	  left: -250vw;
}

.transforma_noreste {
  transition: 1.0s ease-out;
}


.box_noroeste {
  position: fixed;
  top: -200vh;
  right: -520vw;
  width: 400vw;
  height: 500vh;
  bottom: 0;
  transform: rotate(-40deg);
  z-index: 101;
  background-color: var(--dark);
}

.transforma-active_noroeste {
	  right: -100vw;
}

.transforma_noroeste {
  transition: 1.5s ease-out;
}


.box_suroeste {
  position: fixed;
  top: -250%;
  right: -520vw;
  width: 400vw;
  height: 500vh;
  bottom: 0;
  transform: rotate(40deg);
  z-index: 101;
  background-color: var(--dark);
}

.transforma-active_suroeste {
	  right: -200vw;
}

.transforma_suroeste {
  transition: 1.0s ease-out;
}


.box_sureste {
  position: fixed;
  top: -350% !important;
  left: -520vw;
  width: 400vw;
  height: 500vh;
  bottom: 0;
  transform: rotate(40deg);
  z-index: 101;
  background-color: var(--dark);
}

.transforma-active_sureste {
	  left: -200vw;
}

.transforma_sureste {
  transition: 1.0s ease-out;
}