@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto:300i,400&subset=latin-ext');

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


@-webkit-keyframes SpinOn{  
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}
@keyframes SpinOn{ 
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}


/* DOCUMENT */
html{
  font-family: Verdana, sans-serif;
  font-size: 0.625em; line-height: 0.625em;
}
body{ 
  -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;
}


/* TYPOGRAPHIES */
main h1, 
main h2,
main h3,
main time,
main form input[type="submit"]{
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
}
main h4,
main form label:not([for]){
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
}
main figcaption{
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-style: italic;
}
main h5,
main h6{
  font-weight: 700;
}

/* FONTS */
main h1{
  font-size : 5.4rem;
  line-height: 100%; 
  letter-spacing: 0.2rem;
}
main h2{
  font-size: 2.8rem;
  line-height: 125%;
  letter-spacing: 0.1rem;
}
main h3{
  font-size: 1.8rem;
  line-height: 150%;
  letter-spacing: 0.2rem;
}
main h4,
main h5,
main h6,
main figcaption{
  font-size: 1.2rem;
  line-height: 150%;
  letter-spacing: 0.1rem;
}
main time{
  font-size: 1.8rem;
  line-height: 125%;
  letter-spacing: 0.0rem;
}
main p, main li{
  font-size: 1.2rem;
  line-height: 150%;
}
main .smaller p{
  font-size: 1.1rem;
  line-height: 125%;
}

/* PARAGRAPHS */
main h1,
main h2,
main .txt-center{
  text-align: center;
}
main p{
  text-align: justify;
}
main h1, main h1 *,
main h2, main h2 *,
main h3, main h3 *,
main h4, main h4 *,
main time, main time *,
main p, main p *,
main li, main li *{
  vertical-align: baseline;
}
main sup{
  font-size: 66%;
  vertical-align: super;
  text-transform: lowercase;
}
main .row [class*="col-"]{
  vertical-align: text-top;
}

/* APP Z-INDEXES */
/*  z-index : 
      a.bypass : 50;
      footer.lead : 100;
      header.lead : 200;
      widgets :
        ›  share : 310;
        ›  languages : 320;
        ›  tip : 330;
*/

/* COMMON : LEAD */
.lead{
  width: 100%;  
  position: fixed;
}
.lead .inside{
  text-align: center;
  width: 100%;
  padding-right: 3.75%;
  padding-left: 3.75%;
  position: relative;
}
.lead .inside div{
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.lead .inside nav li{
  display: inline-block;
  margin-left: 18px;
  margin-right: 18px;
  margin-top: 3px;
  margin-bottom: 3px;
}
.lead .inside nav li a{
  display: block;
}
.lead .edge{
  position: absolute;
  width: 13%;
  max-width: 320px;
  height: 100%;
  top: 0;
}
.lead .inside + .edge{
  left: 0;
}
.lead .edge + .edge{
  right: 0;
}

/* HEADER */
header.lead{
  padding-bottom: 18px;
  top: 0;
  z-index: 200;
}
header.lead .inside{
  z-index: 210;
}
header.lead .inside .menu{
  height: auto;
  overflow: hidden;
  -webkit-transition: height 0.25s ease-in-out;
  -moz-transition: height 0.25s ease-in-out;
  -o-transition: height 0.25s ease-in-out;
  transition: height 0.25s ease-in-out;
}
header.lead .inside .menu.closed {
  height: 1px;
}
header.lead .inside .apex a{
  display: inline-block;
  position: relative;
  margin-top: 7px;
}
header.lead .inside .apex .title{
  font-family: 'Anton', sans-serif;
  font-size: 3.2rem;
  line-height: 150%;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  position: relative;
}
header.lead .inside .apex .logo{
  left: 50%;
  display: block;
  position: absolute;
  z-index: 215;
  top: -2px;
  line-height: 4.8rem;
  width: 42px;
  margin-left: -21px;
}
header.lead .inside .apex p{
  font-family: 'Roboto', sans-serif;
  font-size: 1.4rem;
  line-height: 125%;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.05rem;
  padding-top: 3px;
  display: none;
}
header.lead .inside .menu li a{
  font-family: 'Anton', sans-serif;
  font-size: 1.8rem;
  line-height: 150%;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
}
header.lead .inside .menu li a + span{
  display: none;
}
header.lead .inside + .edge{
  z-index: 220;
}
header.lead .edge + .edge{
  z-index: 221;
}
header.lead button{
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 240;
}

/* FOOTER */
footer.lead{
  padding-top: 18px;
  bottom: 0;
  z-index: 100;
}
footer.lead .inside{
  z-index: 110;
}
footer.lead .inside p{
  font-size: 1.0rem;
  line-height: 1.4rem;
  padding-bottom: 6px;
  vertical-align: baseline;
}
footer.lead .inside p a{
  vertical-align: baseline;
}
footer.lead .inside p span{
  margin-left: 4px;
  width: 14px;
  display: inline-block;
  margin-top: -3px;
}
footer.lead .inside .menu li a{
  font-family: 'Roboto', sans-serif;
  font-size: 1.0rem;
  line-height: 150%;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  padding-top: 3px;
  padding-bottom: 3px;
}
footer.lead .inside .base{
  display: none;
}
footer.lead .inside + .edge{
  z-index: 120;
}
footer.lead .edge + .edge{
  z-index: 121;
}

/* MAIN */
main{
  padding-top: 64px;
  padding-bottom: 108px;
  overflow: hidden;
  -webkit-transition: padding-top 0.2s ease-in-out;
  -moz-transition: padding-top 0.2s ease-in-out;
  -o-transition: padding-top 0.2s ease-in-out;
  transition: padding-top 0.2s ease-in-out;
}
main h1, 
main h2, 
main h3, 
main h4, 
main p, 
main ul {
  margin-bottom: 6px;
}
main p ~ h3,
main p ~ h4{
  padding-top: 6px;
}
main header{
  padding-top: 24px;
}
main hr{
  padding-top: 12px;
  margin-bottom: 12px;
}
main figure img{
  margin-bottom: 5px;
}

main header > div,
main .row [class*="col-"],
main .grid > li{
  padding-right: 3.75%;
  padding-left: 3.75%;
}
main .row [class*="col-"],
main .grid > li{
  margin-bottom: 24px;
}

/* TEMPORARY COLUMNS & GRID SYSTEM */
@media screen and (min-width:640px){
  main .row [class*="col-"]{
    display: inline-block;
  }
  main .row .col-1,
  main .row .col-2,
  main .row .col-3{
    width: 50%;
  }
  main .row .col-4,
  main .row .col-5,
  main .row .col-6{
    width: 100%;
  }
}
@media screen and (min-width:960px){
  main .row .col-1{
    width: 16.666%;
  }
  main .row .col-2{
    width: 33.333%;
  }
  main .row .col-4{ 
    width: 66.666%;
  }
  main .row .col-5{
    width: 83.33%;
  }
}
@media screen and (min-width:640px){
  main .grid > li{
    display: inline-block;
    width: 50%;
  }
}
@media screen and (min-width:1280px){
  main .grid > li{
    display: inline-block;
    width: 33.333%;
  }
}
/* TEMPORARY - END */


/* PAGE */
#page{
  position: relative;
  padding-left: 8%;
  padding-right: 8%;
}


/* PRODUCT BOXES */
main .product a{
  display: block;
}
main .product .preview span {
  display: block;
  overflow: hidden;
  max-height: 198px;
}
main .product .label time,
main .product .label strong{
  font-family: 'Anton', sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}
main .product .label time,
main .product .label strong,
main .product .label span{
  display: block;
  text-align: right;
}
main .product .label span img{
  width: 24px;
  height: 24px;
  margin: 4px;
}


/* WIDGET FOR LANGUAGES AND SHARE */
.widget{
  width: 60px;
  top: 50%;
  text-align: center;
  position: fixed;
  -webkit-transition: margin-top 0.2s ease-in-out;
  -moz-transition: margin-top 0.2s ease-in-out;
  -o-transition: margin-top 0.2s ease-in-out;
  transition: margin-top 0.2s ease-in-out;
}
.widget h2{
  display: none;
  font-family: 'Roboto', sans-serif;
  font-size: 1.0rem;
  line-height: 100%;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.2rem;
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 6px;
}
.widget li{
  width: 36px;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
}
.widget li a {
  width: 36px; 
  height: 36px; 
  display: block;
  white-space: nowrap;
}
.widget#share{
  left: -24px;
  z-index: 310;
}
.widget#share li a{
  padding-top : 3px;
}
.widget#share li a img{
  width: 28px;
}
.widget#languages{
  right : -24px;
  z-index : 320;
}
.widget#languages li a > span:first-child{
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem;
  line-height: 34px;
  text-transform: uppercase;
}

/* INFO BOX ON HOVER : DEVICES [LG] */
.tooltip{ 
  position: relative;
}
.tooltip .tip{
  display: none;
}

/* SHORTCUT PAGE NAVIGATION : DEVICES [LG] */
.bypass{
  height: 48px;
  margin-top: -48px;
  display: block;
  position: fixed;
  top: 50%; 
  z-index: 50;
  overflow: hidden;
  white-space: nowrap;
}
.bypass.prev{
  left: 100%;
}
.bypass.next{
  right: 100%;
}
.bypass .box span{
  display: none;
}

/* IF NO-SCRIPT */
html[data-noscr] .widget#languages,
html[data-noscr] .widget#share{
  display: none;
}