@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-br {
  z-index: 1;
  position: absolute;
  bottom: 0;
  right: 0;
}

.cor-bl {
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 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-r-30 { width: 30em; }


/*--- 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,
.c-area {
  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-area-xxl {
  width:  90%; 
}

.c-area-xl {
  width:  80%; 
  min-width: 20em; 
}

.c-area-l {
  width: 85%;
  min-width: 20em;
  max-width: 90em;
}

.c-area-xm {
  width:  85%; 
  min-width: 20em; 
  max-width: 80em;
}

.c-area-m {
  width:  85%; 
  min-width: 20em; 
  max-width: 60em;
}

.c-area-s {
  width:  75%; 
  min-width: 20em; 
  max-width: 90em;
}

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

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

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

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

.grid-item-col-span-1 { grid-column: span 1; }
.grid-item-col-span-2 { grid-column: span 2; }
.grid-item-col-span-3 { grid-column: span 3; }
.grid-item-col-span-4 { grid-column: span 4; }
.grid-item-col-span-5 { grid-column: span 5; }
.grid-item-col-span-6 { grid-column: span 6; }

.grid-item-row-span-1 { grid-row: span 1; }
.grid-item-row-span-2 { grid-row: span 2; }
.grid-item-row-span-3 { grid-row: span 3; }
.grid-item-row-span-4 { grid-row: span 4; }
.grid-item-row-span-5 { grid-row: span 5; }
.grid-item-row-span-6 { grid-row: span 6; }

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

.grid-gap-1 { grid-gap: 1em; }

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

.flex-box {
  display: flex;
}

.flex-50 { flex: 50%; }

.gap-0-75 { gap:  .75em; }
.gap-2-25 { gap: 2.25em; }
.gap-1    { gap: 1em; }
.gap-2    { gap: 2em; }
.gap-3    { gap: 3em; }

.just-con-between {
  justify-content: space-between;
 }

 .just-con-end {
  justify-content: end;
 }

.flex-row-reverse {
  flex-direction: row-reverse;
}

/*--- columns ------------------------*/

.col {
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
  transition: .05s;
}

.col.col-100    { width: 100%; }
.col.col-85     { width: 85%; }
.col.col-75     { width: 75%; }
.col.col-66     { width: 66.666%; }
.col.col-60     { width: 60%; }
.col.col-50     { width: 50%; }
.col.col-47     { width: 47%; }
.col.col-40     { width: 40%; }
.col.col-35     { width: 35%; }
.col.col-33     { width: 33.333%; }
.col.col-30     { width: 30%; }
.col.col-25     { width: 25%; }
.col.col-24     { width: 24%; }
.col.col-20     { width: 20%; }
.col.col-27-5     { width: 27.5%; }
.col.col-16-666 { width: 16.666%; }
.col.col-15     { width: 15%; }
.col.col-14-25  { width: 14.25%; }
.col.col-12-5   { width: 12.5%; }
.col.col-10     { width: 10%; }

.col-50-text {
  width: 50%;
  column-count: 2;
  column-gap: 4em;
}

.col-25-text {
  width: 100%;
  column-count: 4;
  column-gap: 4em;
}

.col-width-auto {
  width: auto;
}

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

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

.media-container:not(.media-container-profile-image) {
  background-color: rgba(0,0,0,.025);
  position: relative;
}

.media-container.lazy-complete:not(.media-container-profile-image) {
  background-color: transparent;
}


.media-container-2-3 {
  position: relative;
}

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

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

img.h-40   { height: 40em; width: auto }
video.h-40 { height: 40em; width: auto }

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

.media-container-video {
  position: relative;
}

.media-container-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-aspect-ratio-placeholder {
  position: relative;
  width: 100%;
}


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

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

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

/*--- layout clearfix ----------------*/

.c-frame:after,
.c-area:after,
.col:after {
  content: '.';
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

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

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

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

.of-hidden { overflow: hidden; }

.text-of-hidden {
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
}

.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; }
.v-text-bottom { vertical-align: text-bottom; }

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