*, html {
  scroll-behavior: smooth;
}


::-moz-selection {
  background: #C4D2BA;
  text-shadow: none;
}

::selection {
  background: #C4D2BA;
  text-shadow: none;
}



/* Typo */
@font-face {
font-family: 'Cera Pro Regular';
src: url('../font/CeraPro-Regular.eot');
src: url('../font/CeraPro-Regular.eot?#iefix') format('embedded-opentype'),
url('../font/CeraPro-Regular.woff') format('woff'),
url('../font/CeraPro-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Cera Pro Bold';
src: url('../font/CeraPro-Bold.eot');
src: url('../font/CeraPro-Bold.eot?#iefix') format('embedded-opentype'),
url('../font/CeraPro-Bold.woff') format('woff'),
url('../font/CeraPro-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

/* Structure */

body {font-family: 'Cera Pro Regular', Verdana sans-serif; background-color: #C4D2BA; font-size: 12px; }
a {color: #000; text-decoration: none; position: relative; display: inline-block; }
a.light {color:#E5D5C4; text-decoration: none; position: relative; display: inline-block; }
a:after {display: block; content: ''; border-bottom: solid 1px #000; transform: scaleX(0); transition: transform 250ms ease-in-out; transform-origin:100% 50%; }
a:visted {color: #000; text-decoration: none; }
a:hover, a:active {color: #000; text-decoration: none; }
a:hover:after {transform: scaleX(1); transform-origin:0 50%; }
h1 {font-family: 'Cera Pro Bold', Verdana sans-serif; color: #E5D5C4; font-size:4rem; line-height:4rem;}

.noscroll { overflow: hidden; }
#pool { position: fixed; min-height: 100%; height: 100vh; width: 100%; z-index:0;}
#main { position: absolute; min-height: 100%; width: 100%; z-index:1;}
#index { width: 100%; padding-top: 6em;}
#overlay { position: fixed; width:100%; min-height:100%; height:100vh; z-index:3; display:none; opacity:0;}
.overlay_content { position: absolute; left: 50%; transform: translate(-50%); bottom: 1em; z-index:2;}
.logo { width: 100%; max-width: 150px; position: absolute; top: 2em; left: 2em;}
.subline { position: absolute; right:2em; top: 2em;}
.content { font-size: 1rem; }
.callout { width:100%; min-height: 80px; position:fixed; bottom:-100px; left:0; z-index:1; }
.bold { font-family: 'Cera Pro Bold', Verdana sans-serif; }

/* Close Button */
.close-container{position: absolute; right: 1em; top: 1em; width: 35px; height: 50px; cursor: pointer; }
.leftright{height: 1px; width: 30px; position: absolute; margin-top: 23px; background-color: #000; border-radius: 2px; transform: rotate(45deg); transition: all .3s ease-in; }
.rightleft{height: 1px; width: 30px; position: absolute; margin-top: 23px; background-color: #000; border-radius: 2px; transform: rotate(-45deg); transition: all .3s ease-in; }

.close{margin: 60px 0 0 5px; position: absolute; }
.close-container:hover .leftright{transform: rotate(-45deg); background-color: #000; } 
.close-container:hover .rightleft{transform: rotate(45deg); background-color: #000; } 
.close-container:hover label{opacity: 1; }
/* ==========================================================================
   Queries
   ========================================================================== */

@media only screen and (min-width: 600px) {
  h1 {font-size: 7rem; line-height: 8rem; }
  

}


@media only screen and (min-width: 1024px) {

  h1 {font-size: 13rem; line-height: 12rem; }
  .logo { width:100%; max-width:150px; position:absolute; top:2em; left:2em; }
  .close-container{position: absolute; right: 2em; top: 2em; width: 35px; height: 50px; cursor: pointer; }
  
}


@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}


@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}