*,*::after,*::before {box-sizing:border-box;}


html {background:#fff;}

.bs-1 {
	--color-text: #ededed;
	--color-bg: #FFF;
	--color-link: #000;
	--color-link-hover: #5d5050;
	--color-info: #5d5050;
	--color-menu: #000;
	--color-menu-hover: #000;
	--color-title: #000;
	--color-subtitle: #ededed;
	--color-deco: #161616;
}


body {font-family:"Montserrat",arial,sans-serif;min-height:90vh;color:#ededed;color:var(--color-text);background-color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/* Fade effect */
.js body {opacity:0;transition:opacity 0.3s;}
.js body.render {opacity:1;}


.hidden {position:absolute;overflow:hidden;width:0;height:0;pointer-events:none;}
/* Page Loader */
.js .loading::before {content:'';position:fixed;z-index:100000;top:0;left:0;width:100%;height:100%;background:var(--color-bg);}
.js .loading::after {content:'';position:fixed;z-index:100000;top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;pointer-events:none;border-radius:50%;opacity:0.4;background:var(--color-link);animation:loaderAnim 0.7s linear infinite alternate forwards;}
@keyframes loaderAnim {to {opacity:1;transform:scale3d(0.5,0.5,1);}}

/*main*/
main {position:relative;width:100%;}
.content {position:relative;display:flex;justify-content:center;align-items:center;margin:0 auto;max-height:90vh;}
.content--reveal {position:absolute;z-index:1001;top:0;left:0;width:100%;height:60vh;pointer-events:none;}

/* Scene */
.scene {position:fixed;top:0;left:0;width:100%;height:90vh;z-index:1;}
.scene .blob-1 path {fill: url(#gradient-1);}
.scene path:first-of-type {fill-opacity: 0.1;}
.scene path:nth-of-type(2) {fill-opacity: 0.2;}
.scene path:nth-of-type(3) {fill-opacity: 0.3;}
.scene path:nth-of-type(4) {fill-opacity: 0.4;}
.scene path:nth-of-type(6) {fill-opacity: 0.5;}
.scene path:nth-of-type(5) {fill-opacity: 0.6;}

/* Header */
.blob-header {position:relative;display:flex;flex-direction:row;align-items:flex-start;align-items:center;align-self:start;grid-area:header;justify-self:start;}
.blob-header__title {margin:0;padding:0;font-weight:700;font-size:1em;}
.info {margin:0;color:var(--color-info);grid-area:info;align-self:end;justify-self:end;}

/*Footer*/
footer{position:fixed;width:100%;height:100px;bottom:0;left:0;right:0;background:#1d1e1f;padding:5px 0 35px}
.footer .bottom{margin-top:0;border-top:1px solid #3a455a}
.footer .bottom ul{list-style-type:none;padding:0;text-align:center;margin-top:15px}
.footer .bottom ul li{display:inline-block;margin:0 11px;color:#9daac2;text-transform:uppercase;font-size:11px;font-weight:600;text-decoration:none;}
.footer .bottom ul li:last-child a:after{content:''}
.footer .bottom ul a{color:#9daac2;text-transform:uppercase;font-size:11px;font-weight:600;text-decoration:none;position:relative}
.footer .bottom ul a:after{content:'|';position:absolute;right:-15px;top:-1px;font-weight:bold}@keyframes translateDown {

0% { transform: none; } 100% { transform: translateY(2.25rem); } } @keyframes translateUp { 0% { transform: none; } 100% { transform: translateY(-2.25rem); } } @keyframes scaleYDown { 0% { opacity: 0; transform-origin: bottom; transform: translateX(-50%) scaleY(0); } 100% { opacity: 1; transform: translateX(-50%) scaleY(1); } } @keyframes scaleYUp { 0% { opacity: 0; transform-origin: top; transform: translateX(-50%) scaleY(0); } 100% { opacity: 1; transform: translateX(-50%) scaleY(1); } } @keyframes letterSpacing { 0% {opacity:0;letter-spacing:0;} 100% {opacity:1;letter-spacing:2.25rem;}}


/*Charming*/
h1 {
  position:relative;
  font-size:20vmin;
  font-weight:300;
  color:#000;
  opacity:0;
  text-transform:uppercase;
  text-shadow:0 15px 30px rgba(#000, 0.15);
  animation:letterSpacing 1s 0.6s;
  animation-fill-mode:forwards;
  justify-content:center;

  span {
    position:relative;
    display:inline-block;

    &::before {
      position: absolute;
      content: '';
      display: block;
      transform: translateX(-50%);
      width: 2px;
      height: 10rem;
      opacity: 0;
      background: rgba(#fff, 0.5);
      transition: 0.6s 0.6s;
    }

    &:first-child,
    &:last-child {
      animation: translateDown 0.6s 1.4s;
      animation-fill-mode: forwards;
      &::before {
        bottom: calc(100% + 1rem);
        left: calc(50% - 1rem);
        animation: scaleYUp 0.6s 1.4s;
        animation-fill-mode: forwards;
      }
    }
    @include odd-between(3, 13) {
      animation: translateUp 0.6s 1.4s;
      animation-fill-mode: forwards;
      &::before {
        top: calc(100%);
        left: calc(50% - 1rem);
        animation: scaleYDown 0.6s 1.4s;
        animation-fill-mode: forwards;
      }
    }
  }
}

@media screen and (max-width:55em) {
	.message {display:block;}
	.content {flex-direction:column;height:auto;min-height:0;padding-bottom:10em;}
	.content--fixed {position:relative;z-index:10000;display:block;padding:0.85em 0.5em 2em;}
	.blob-header {flex-direction:column;align-items:center;}
	.blob-header__title {padding-bottom:0.25em;font-size:1.5em;text-align:center;}
	.info {margin:0;text-align:center;}
	.blob-links {margin:0;}
	.menu {font-size:2.75em;margin:0 auto;align-items:left;}

}