@charset "UTF-8";

/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/

/*--- views --------------------------*/

.screen {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}

.screen.screen-50-per { width: 50%; }
.screen.screen-25-per { width: 25%; }

.screen.screen-r { left: auto; right: 0 }


/*--- corners ------------------------*/

.cor-tl {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

.cor-tr {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
}

.cor-bl {
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
}

.cor-br {
  z-index: 1;
  position: absolute;
  bottom: 0;
  right: 0;
}

/*--- edges --------------------------*/

.edge-t {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.edge-b {
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.edge-r {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.edge-l {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

/*--- vh-center ----------------------*/

.vh-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

/*--- content frames -----------------*/

.c-frame {
  z-index: 1;
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.c-frame.c-frame-l  { 
  width: 90%;
  max-width: 80em;
}

.c-frame.c-frame-m  { 
  width: 90%;
  max-width: 65em;
}



.c-frame.c-frame-s  { 
  width: 51%;
  max-width: 62em;
}

/*--- grid ---------------------------*/

.grid { 
  display: grid;
  box-sizing: border-box;
  width: 100%;
}

.grid-u-12 {  grid-template-columns: repeat(12, 1fr); }
.grid-u-8  {  grid-template-columns: repeat(8, 1fr); }
.grid-u-6  {  grid-template-columns: repeat(6, 1fr); }
.grid-u-4  {  grid-template-columns: repeat(4, 1fr); }
.grid-u-3  {  grid-template-columns: repeat(3, 1fr); }
.grid-u-2  {  grid-template-columns: repeat(2, 1fr); }
.grid-u-1  {  grid-template-columns: repeat(1, 1fr); }

.grid-cc { 
  height: 100%;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.grid-item {
  box-sizing: border-box;
}

.grid-item-1-5  { grid-column: 1 / 5; }
.grid-item-1-6  { grid-column: 1 / 6; }
.grid-item-6-10  { grid-column: 6 / 10; }
.grid-item-10-13 { grid-column: 10 / 13; }
.grid-item-1-12 { grid-column: 1 / 12; }
.grid-item-2-11 { grid-column: 2 / 11; }
.grid-item-3-10 { grid-column: 3 / 10; }

.grid-gap-4   { grid-gap: 4em; }
.grid-gap-2-5 { grid-gap: 2.5em; }
.grid-gap-2   { grid-gap: 2em; }
.grid-gap-1   { grid-gap: 1em; }
.grid-gap-0-5 { grid-gap: .5em; }

.grid-gap-vw-5 { grid-gap: 5vw; }

/*--- text grid ----------------------*/

.text-grid-u-3 { column-count: 3; }

.text-grid-gap-2 { column-gap: 2em; }

.avoid-break {
  -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
                 break-inside: avoid;
}

/*--- flex ---------------------------*/

.flex-box {
  display: flex;
}

.flex-box-col {
  display: flex;
  flex-direction: column;
}

/*--- width and width -----------------*/

.w-per-100 { width: 100% }
.w-per-75 { width: 75% }

.hgt-4  { height: 4em; }
.hgt-25 { height: 25em }

/*--- images/videos ------------------*/

.media-container {
  line-height: 0;
}

svg.inline   { width: 100%; height: auto; }
img.inline   { width: 100%; height: auto; }
video.inline { width: 100%; height: auto;  }
audio.inline { width: 100%;  }

.img-cover,
.video-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.bg-img-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-img-contain {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/*--- object fit ---------------------*/

.obj-fit-cover {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.obj-fit-contain {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/*--- modifications ------------------*/

.static   { position: static; }
.fixed    { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }

.scrollable   { overflow-y: scroll; -webkit-overflow-scrolling: touch; }

.clear        { clear: both; }
.float-left   { float: left; }
.float-right  { float: right; }

.inline-block  { display: inline-block; }
.display-block { display: block; }

.bor-box  { box-sizing: border-box; }
.v-center { vertical-align: middle; }
.v-top { vertical-align: top; }

.vp-min-height { min-height: 100vh; }
.auto-height   { height: auto; }

.v-trans-center {
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}