.meta { position: absolute; top: 10px; left: 10px; color: lime; font-size: 10px; line-height: 16px; padding: 10px; border: 1px dashed lime; background: rgba(0,0,0,0.4); }

/* ====== MODULES LAYOUTS ====================================================================================================================================================== */

.module { display: block; position: relative; overflow: hidden; opacity: 1; }
.module.overlay { position: absolute; top: 0; left: 0; z-index: 999; }
.module .inner-module { height: 100%; width: 100%; position: relative; } 

/* ====== MODULES HEIGHTS ====================================================================================================================================================== */

.module.h-1-3 { height: 33.333%; }
.module.h-2-3 { height: 66.666%; }
.module.h-3-3 { height: 100%; }

/* ====== MODULES WIDTHS ======================================================================================================================================================= */

.module.w-1-4 { width: 25%; flex: 0 0 25%; }
.module.w-2-4 { width: 50%; flex: 0 0 50%; }
.module.w-3-4 { width: 75%; flex: 0 0 75%; }
.module.w-4-4 { width: 100%; flex: 0 0 100%; }

/* ====== MODULES OVERLAY POSITION ============================================================================================================================================= */

.module.overlay.t-1 { top: 0; }
.module.overlay.t-2 { top: 33.3333%; }
.module.overlay.t-3 { top: 66.6666%; }

.module.overlay.l-1 { left: 0; }
.module.overlay.l-2 { left: 25%; }
.module.overlay.l-3 { left: 50%; }
.module.overlay.l-4 { left: 75%; }

/* ====== MODULES TRANSITION STATES =============================================================================================================================================== */

.module.fade { opacity: 0; }
.active .module.fade { opacity: 1; }

.module.zoomin { transform: scale(0.5); -ms-transform: scale(0.5); -webkit-transform: scale(0.5); -o-transform: scale(0.5); -moz-transform: scale(0.5); }
.active .module.zoomin { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); }
.module.zoomout { transform: scale(2); -ms-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); -moz-transform: scale(2); }
.active .module.zoomout { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); }

.module.top { margin-top: -80vh; }
.active .module.top { margin-top: 0; }
.module.bottom { margin-top: 80vh; }
.active .module.bottom { margin-top: 0; }

.module.left { margin-left: -80vh; }
.active .module.left { margin-left: 0; }
.module.right { margin-left: 80vh; }
.active .module.right { margin-left: 0; }

/*
    .module.relativeleft { margin-left: -80vh; }
    .active .module.relativeleft { margin-left: 0; }
    .module.right { margin-left: 80vh; }
    .active .module.right { margin-left: 0; }
*/

/* ====== MODULES COPIES ========================================================================================================================================================== */

.copy-holder { color: #fff; padding: 2vh 0; height: 100%; position: relative; }
.copy-holder .inner  { color: #fff; padding: 0 5.5vh; max-height: calc( 100% - 4vh ); overflow: hidden; width: 100%; margin-top: 0; }

.copy-holder.v-half { height: 50%; }
.copy-holder.v-third { height: 33.3333%; }
.copy-holder.v-doublethird { height: 66.6666%; }
.copy-holder.h-half { width:50%; float: left; }
.copy-holder.center { text-align: center; }
.copy-holder .inner.vertical-top { top: 6.5vh; left: 0; position: absolute; }
.copy-holder .inner.vertical-bottom { bottom: 8.5vh; left: 0; position: absolute; }

.copy-holder .inner h1 { font-size: calc( 44vh * var( --font-convert-ratio ) ); line-height: 1.1; margin-bottom: 0; font-weight: bold; }
.copy-holder .inner h2 { font-size: calc( 36vh * var( --font-convert-ratio ) ); line-height: 1.15; margin-bottom: 2.3vh; font-weight: bold; }
.copy-holder .inner h2 span { font-weight: normal; display: block; font-size: calc( 18vh * var( --font-convert-ratio ) ); line-height: 1; margin-bottom: 1vh;  }
.copy-holder .inner h3 { font-size: calc( 12vh * var( --font-convert-ratio ) ); line-height: 1.67; margin-bottom: 2vh; font-weight: bold; border-bottom: 3px solid #fff; }

.copy-holder .inner p { font-size: calc( 14vh * var( --font-convert-ratio ) ); line-height: 1.3; margin-bottom: 2vh; }
.copy-holder .inner p:last-of-type { margin-bottom: 0; }
.copy-holder .inner p.big { font-size: calc( 18vh * var( --font-convert-ratio ) ); line-height: 1.3; margin-bottom: 2vh; }
.copy-holder .inner p.big:last-of-type { margin-bottom: 0; }
.copy-holder .inner p.big strong { display: block; padding: .5vh 0; }

.copy-holder .inner span.tag { display: inline-block; background: #121212; color: #fff; font-size: calc( 15vh * var( --font-convert-ratio ) ); line-height: 2; font-weight: bold; 
    text-transform: uppercase; letter-spacing: calc( 1.85vh * var( --font-convert-ratio ) ); padding: 1vh 3vh; }
.copy-holder .inner p.student { font-size: calc( 22vh * var( --font-convert-ratio ) ); line-height: calc( 29vh * var( --font-convert-ratio ) ); font-weight: bold; margin-bottom: 2vh; }
.copy-holder .inner p.grade { font-size: calc( 12vh * var( --font-convert-ratio ) ); line-height: calc( 16vh * var( --font-convert-ratio ) ); font-weight: bold; text-transform: uppercase; margin-bottom: 0; letter-spacing: calc( 0.75vh * var( --font-convert-ratio ) ); }

.copy-holder .inner span.date { display: block; padding: 4vh 0; margin-bottom: 3.5vh; }
.copy-holder .inner span.date span { text-transform: uppercase; text-transform: uppercase; letter-spacing: calc( 1vh * var( --font-convert-ratio ) ); font-size: calc( 16vh * var( --font-convert-ratio ) ); 
    line-height: 2; display: block; width: 40%; text-align: center; font-weight: bold; }
.copy-holder .inner span.date span.month { margin-bottom: 6vh; }
.copy-holder .inner span.date span.day { font-size: calc( 91vh * var( --font-convert-ratio ) ); line-height: 1; display: inline-block; border-bottom: .5vh solid #FF8A22; font-weight: normal; }

.copy-holder .inner span.date + h1 { margin-bottom: 5vh; }

.copy-holder .inner ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; }
.copy-holder .inner ul li { font-size: calc( 10vh * var( --font-convert-ratio ) ); line-height: 1.6; }

.copy-holder .inner blockquote {  font-size: calc( 32vh * var( --font-convert-ratio ) ); line-height: 1.25; margin-bottom: 2vh; font-weight: bold; }
.copy-holder .inner cite { font-size: calc( 14vh * var( --font-convert-ratio ) ); line-height: calc( 19vh * var( --font-convert-ratio ) ); font-weight: bold; text-transform: uppercase; margin-bottom: 0; 
    font-style: normal; letter-spacing: calc( 0.87vh * var( --font-convert-ratio ) ); }