/* Global: reset by tags */
body, p, ul, ol, form, input, button, select, h1, h2, h3, h4, h5, h6, dl, dt, dd, blockquote, address, pre{margin:0;padding:0;}
ul, ol{list-style:none;}
button{border:none;}


/* Global: tags */
body{background-color:#fff;font-family:'Roboto', sans-serif;font-size:16px;line-height:2;color:#000;}
a{text-decoration:none;color:inherit;}
::selection{background-color:rgba(0, 0, 0, .1);}


/* Global: animations */
@keyframes grain{
  0%, 100%{transform:translate(0, 0);}
  20%{transform:translate(5%, -15%);}
  40%{transform:translate(12%, 9%);}
  60%{transform:translate(-3%, 7%);}
}


/* Component: page */
#page{display:flex;min-height:100vh;position:relative;overflow:hidden;}
#page:before{content:'';position:absolute;top:-30%;right:-30%;bottom:-30%;left:-30%;background-image:url(../img/page-before.png);opacity:.2;animation:grain 1500ms steps(4) infinite;}
#page-inner{display:flex;width:90%;padding:5%;position:relative;}
#page-warning{display:none;position:fixed;bottom:0;right:0;left:0;z-index:100;padding:30px;background-color:#b41c28;color:#fff;font-size:14px;line-height:1.4;font-weight:300;text-align:center;}
html:not([lang='en']) #page-warning{display:block;}
#page-warning a{text-decoration:underline;}
#page-warning a:hover{text-decoration:none;}


/* Component: section */
#section-introduction{position:relative;display:flex;width:100%;flex-direction:column;justify-content:space-between;}
#section-introduction-row-1{display:flex;justify-content:space-between;}
#section-introduction-logo{width:120px;}
#section-introduction-button{display:inline-block;padding:15px 35px;background-color:#000;color:#fff;}
#section-introduction-title{margin-bottom:20px;font-family:'Roboto Condensed', sans-serif;font-size:8vw;font-weight:400;line-height:1.1;}
#section-introduction-title .sub-line{white-space:nowrap;}
#section-introduction-description{position:relative;padding-left:25px;margin-right:250px;font-size:20px;line-height:1.4;font-weight:300;}
#section-introduction-description:before{content:'—';position:absolute;top:0;left:0;}
#section-introduction-row-3{position:absolute;bottom:0;right:0;}
#section-introduction-teasing{line-height:1.5;color:#b41c28;}

#section-projectana{position:absolute;top:100%;left:0;width:100%;text-align:center;}

.section-title{display:inline-block;position:relative;margin-bottom:150px;font-size:13px;text-transform:uppercase;letter-spacing:7px;font-weight:300;}
.section-title:last-child{margin-bottom:0;}
.section-title .sub-line{position:absolute;top:50%;left:50%;width:5000px;height:2px;margin-left:-2500px;text-indent:-999em;overflow:hidden;background-color:#b41c28;}
.section-title[data-index='1'] .sub-line{transform:rotate(-80deg);}
.section-title[data-index='2'] .sub-line{transform:rotate(80deg);}
.section-title[data-index='3'] .sub-line{transform:rotate(-80deg);}
.section-title[data-index='4'] .sub-line{transform:rotate(80deg);}
.section-title .sub-text{position:relative;}

@media (max-width:1280px){
  #section-introduction-title{font-size:10vw;}
  #section-introduction-description{font-size:18px;}
}

@media (max-width:768px){
  #section-introduction-button{padding:10px 25px;}
  #section-introduction-row-2{text-align:center;}
  #section-introduction-title{font-size:12vw;}
  #section-introduction-description{display:inline-block;margin-right:0;font-size:16px;}
  #section-introduction-row-3{position:static;text-align:center;}
}


/* JavaScript: serialcursor */
#serialcursor{pointer-events:none;}
#serialcursor-inner{position:fixed;z-index:13;width:80px;height:80px;margin:-40px 0 0 -40px;opacity:0.2;transition:opacity 900ms;}
#serialcursor-pointer{position:fixed;z-index:13;height:8px;width:8px;transform:translate(-50%, -50%);background-color:#bc2d39;border-radius:100%;transition:200ms;}
#serialcursor.on-mousemove #serialcursor-inner{opacity:.6;}
#serialcursor.is-click #serialcursor-inner{opacity:1;}
#serialcursor.is-click #serialcursor-pointer{transform:translate(-50%, -50%) scale(0.75);}

[data-serialcursor-state='grab']{cursor:grab;}
#serialcursor-pointer-grab{opacity:0;transition:opacity 400ms;}
#serialcursor-pointer-grab .sub-icon{position:absolute;top:-2px;width:6px;height:14px;fill:#bc2d39;transition:400ms;}
#serialcursor-pointer-grab .sub-icon.is-left{left:-5px;}
#serialcursor-pointer-grab .sub-icon.is-right{right:-5px;}
#serialcursor.is-grab #serialcursor-pointer-grab{opacity:1;}
#serialcursor.is-grab #serialcursor-pointer-grab .sub-icon{fill:#fff;}
#serialcursor.is-grab #serialcursor-pointer-grab .sub-icon.is-left{left:-16px;}
#serialcursor.is-grab #serialcursor-pointer-grab .sub-icon.is-right{right:-16px;}