@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-max-95 { max-width: 95em; }
.c-frame-max-85 { max-width: 85em; }

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

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

.grid-cc {
  align-items: center;
}

.grid-u-24 { grid-template-columns: repeat(24, 1fr); }
.grid-u-12 { grid-template-columns: repeat(12, 1fr); }
.grid-u-6  { grid-template-columns: repeat(6, 1fr); }
.grid-u-5  { grid-template-columns: repeat(5, 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-item {
  box-sizing: border-box;
}

.grid-item-1-2  { grid-column: 1 / 2; }
.grid-item-1-3  { grid-column: 1 / 3; }
.grid-item-1-6  { grid-column: 1 / 6; }
.grid-item-1-7  { grid-column: 1 / 7; }
.grid-item-2-4  { grid-column: 2 / 4; }
.grid-item-2-7  { grid-column: 2 / 7; }
.grid-item-3-4  { grid-column: 3 / 4; }
.grid-item-1-13 { grid-column: 1 / 13; }
.grid-item-6-13 { grid-column: 6 / 13; }
.grid-item-7-13 { grid-column: 7 / 13; }

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

.grid-col-gap-4 { grid-column-gap: 4em; }

/*--- text col layout -----------------*/

.text-colmn-2,
.list-colmn-2 {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
}

.list-colmn-2 li {
    -webkit-column-break-inside: avoid;
              page-break-inside: avoid;          
                   break-inside: avoid-column;         
}
/*--- flex box -----------------------*/

.flex-box {
  display: flex;
}

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

.flex-content-justify { justify-content: space-between; }
.flex-content-center  { justify-content: center; }
.flex-content-end     { justify-content: flex-end; }
.flex-content-start   { justify-content: flex-start; }


.flex-items-center {
  align-items: center;
}

.flex-1 { flex: 1; }
.flex-2 { flex: 2; }

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

/*--- height -------------------------*/

.hgt-per-100 {
  height: 100%;
}

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

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

.media-container.aspect-ratio-2-1 {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.media-container.aspect-ratio-2-1:after {
  content: '';
  width: 100%;
  padding-bottom: 50%;
  display: block;
  position: relative;
}

.media-container.aspect-ratio-3-2 {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.media-container.aspect-ratio-3-2:after {
  content: '';
  width: 100%;
  padding-bottom: 66.666%;
  display: block;
  position: relative;
}


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

.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;
}

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

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

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

.static     { position: static; }
.fixed      { position: fixed; }
.absolute   { position: absolute; }
.relative   { position: relative; }
.sticky-top { position: sticky; top: 0; }

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

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

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


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

.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%);
}