@charset "utf-8";

/* AT-RULES */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url('../../assets/fonts/the-anton-project-authors.eot'); /* IE9 Compat Modes */
  src: local('Anton Regular'), local('Anton-Regular'),
       url('../../assets/fonts/the-anton-project-authors.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../assets/fonts/the-anton-project-authors.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../assets/fonts/the-anton-project-authors.woff') format('woff'), /* Modern Browsers */
       url('../../assets/fonts/the-anton-project-authors.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../assets/fonts/the-anton-project-authors.svg#Anton') format('svg'); /* Legacy iOS */
  font-display: fallback;
}
@import url('https://fonts.googleapis.com/css?family=Roboto:300i,400&subset=latin-ext');


/* DOCUMENT */
html{
  font-family: Verdana, sans-serif;
  font-size: 0.625em; line-height: 0.625em;
}
body{  
  background-color: rgb(230,230,230);
  color: rgb(38,38,38);
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: 100%;
}


/* RESET */
*, *:before, *:after{ 
  margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;
  padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;
  box-sizing: border-box; vertical-align: middle;
}
li { 
  list-style: none;
}
abbr, button, select,
a, a:link, a:visited, a:hover, a:focus, a:active{ 
  text-decoration: none;
}
fieldset, input, textarea, img, button, hr, iframe,
a img, a:link img, a:visited img, a:hover img, a:focus img, a:active img { 
  border: medium none;
}
abbr, button, select,
fieldset, input, textarea, img, hr, iframe,
a, a:link, a:visited, a:hover, a:focus, a:active,
a img, a:link img, a:visited img, a:hover img, a:focus img, a:active img{
  outline: 0;
}
img{ 
  width: 100%;
  height: auto;
}


/* HIDDEN WAII READABLE */
.hide{ 
  font-size: 0.1rem !important; 
  height: 0 !important; 
  top: 0 !important; 
  padding: 0 !important; 
  margin: 0 !important; 
  left: -99999px !important; 
  position: absolute !important; 
  display: inline !important; 
  z-index: 1;
}


/* HIDDEN */
.bury{
  display: none;
}


/* ICONS */
.icon{ 
  white-space: nowrap; display: inline-block;
}
.wh44{
  width: 44px; height: 44px; 
}
.wh36{
  width: 36px; height: 36px; 
}
.h30{
  height: 30px;
}


/* PARAGRAPHES */
header p, header p *,
header li, header li *{
  vertical-align: baseline;
}

header{
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  top: 50%;
  position: fixed;
  z-index: 200;
}
.inside{
  color: rgb(38,38,38);
  background-color: rgb(255,255,255);
  text-align: center;
  width: 100%;
  padding-right: 3.75%;
  padding-left: 3.75%;
  position: relative;
  z-index: 210;
  box-shadow: 0px 0px 12px rgba(0,0,0,0.35);
}
.inside > div{
  padding-right: 3.75%;
  padding-left: 3.75%;
  padding-top: 3px;
  padding-bottom: 3px;
}
.inside .apex,
.inside .menu {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.inside .apex {
  margin-bottom: 12px;
}
.inside .apex h1{
  display: inline-block;
  position: relative;
  margin-top: 7px;
}
.inside .apex .title{
  color: rgb(230,230,230);
  background-color: transparent;
  opacity: 0.5;
  font-family: 'Anton', sans-serif;
  font-size: 3.2rem;
  line-height: 150%;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  position: relative;
}
.inside .apex .logo{
  left: 50%;
  display: block;
  position: absolute;
  z-index: 215;
  top: -2px;
  line-height: 4.8rem;
  width: 42px;
  margin-left: -21px;
}
.inside .apex p{
  font-family: 'Roboto', sans-serif;
  font-size: 1.4rem;
  line-height: 125%;
  font-weight: 300;
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: -0.05rem;
  text-align: center;
  padding-top: 1px;
}

.inside .menu div{
  margin-bottom: 12px;
  padding-top: 12px;
}
.inside .menu div p{
  font-size: 1.0rem;
  line-height: 125%;
  margin-bottom: 12px;
}
.inside .menu div a{
  font-family: 'Anton', sans-serif;
  font-size: 1.8rem;
  line-height: 150%;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  display: inline-block;
}
.inside .menu div a,
.inside .menu div a:link,
.inside .menu div a:visited{
  color: rgb(38,38,38);
  background-color: transparent;
  border-bottom: 2px solid rgba(0,104,114,0.0);
  -webkit-transition: border-bottom 0.2s ease-in-out;
  -moz-transition: border-bottom 0.2s ease-in-out;
  -o-transition: border-bottom 0.2s ease-in-out;
  transition: border-bottom 0.2s ease-in-out;
}
.inside .menu div a:hover,
.inside .menu div a:focus,
.inside .menu div a:active{
  color: rgb(0,0,0);
  background-color: transparent;
  border-bottom: 2px solid rgba(0,104,114,1.0);
}

.edge{
  color: rgb(38,38,38);
  background: transparent;
  position: absolute;
  width: 13%;
  max-width: 320px;
  height: 100%;
  top: 0;
}
.inside + .edge{
  background: -moz-linear-gradient( 90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0) );
  background: -o-linear-gradient( 90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0) );
  background: -webkit-linear-gradient( 90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0) );
  background: linear-gradient( 90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0));
  left: 0;
  z-index: 220;
}
.edge + .edge{
  background: -moz-linear-gradient( -90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0) );
  background: -o-linear-gradient( -90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0) );
  background: -webkit-linear-gradient( -90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0) );
  background: linear-gradient( -90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0));
  right: 0;
  z-index: 221;
}

/* FOOTER */
footer{
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 110;
}
footer .base{
  padding: 1.25% 3.85%;
}
footer p{
  font-size: 1.0rem;
  line-height: 1.4rem;
  vertical-align: baseline;
  text-align: center;
  padding-bottom: 6px;
}
footer p a{
  vertical-align: baseline;
}
footer p a,
footer p a:link,
footer p a:visited{
  color: rgb(10,107,119);
  background-color: transparent;
}
footer p a:hover,
footer p a:focus,
footer p a:active{
  color: rgb(0,57,74);
  background-color: transparent;
}
footer p span{
  margin-left: 4px;
  width: 14px;
  display: inline-block;
  margin-top: -3px;
}

@media screen and (orientation:portrait){
  header{
    margin-top: -200px;
  }
  .inside .menu div{
    padding-top: 12px;
  }
}
@media screen and (orientation:landscape){
  header{
    margin-top: -148px;
  }
  .inside .menu div{
    display: inline-block;
    width: 49%;
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media screen and (min-width:520px){
  .inside .apex h1 {
    margin-top: 7px;
    margin-bottom: 3px;
  }
  .inside .apex .logo {
    width: 64px;
    margin-left: -32px;
  }
}
@media screen and (min-width:768px){
  .inside .apex h1 {
    margin-top: 12px;
    margin-bottom: 6px;
  }
  .inside .apex .logo {
    width: 84px;
    margin-left: -42px;
  }
}
@media screen and (min-width:1280px){
  header{
    margin-top: -180px;
  }
  .inside .apex h1 {
    margin-top: 18px;
  }
}