/* - - - Body - - - */

/* html */
html {
  min-height:100%; position:relative;
    font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:none;
}
/* body */
body {
  color:#000;
  font-family:Verdana, Geneva, sans-serif;
  font-size:14px; font-style:normal; font-weight:normal;
  hyphens:auto;
  letter-spacing:0; line-height:25px;
  word-wrap:break-word;
    background-color:#fff;
    background-position:center; background-repeat:repeat; background-size:auto;
    width:100%; height:100%;
      margin:0; padding:0;
      overflow-x:hidden; overflow-y:scroll;
}

/* - - - Type - - - */

/* active */
a {
  color:#00abff;
  font-style:normal; font-weight:normal;
  text-decoration:none;
    cursor:hand; cursor:pointer;
      transition:all 0.15s ease-in-out;
      -o-transition:all 0.15s ease-in-out;
      -ms-transition:all 0.15s ease-in-out;
      -moz-transition:all 0.15s ease-in-out;
      -webkit-transition:all 0.15s ease-in-out;
}
a:active, a:hover {
  color:#000;
}
/* heading */
h1 {
  font-family:"Montserrat", sans-serif;
	font-size:150px; font-style:normal; font-weight:800;
  letter-spacing:0; line-height:160px;
    margin:0; padding:0;
}
h2 {
  font-family:"Montserrat", sans-serif;
	font-size:90px; font-style:normal; font-weight:800;
  letter-spacing:0; line-height:100px;
    margin:0; padding:0;
}
h3 {
  font-family:"Montserrat", sans-serif;
	font-size:45px; font-style:normal; font-weight:800;
  letter-spacing:0; line-height:50px;
    margin:0; padding:0;
}
h4 {
  font-family:"Montserrat", sans-serif;
	font-size:30px; font-style:normal; font-weight:800;
  letter-spacing:0; line-height:35px;
    margin:0; padding:0;
}
/* paragraph */
p {
  text-align:justify; text-justify:inter-word;
    margin:0; padding:0;
}
/* quote */
q {
  quotes:"\201C" "\201D" "\2018" "\2019";
}

/* - - - Element - - - */

/* hr */
hr {
  background-color:#000;
  width:100%; height:1px;
    border-style:none;
    margin:0 auto;
}
/* footer */
footer {
  padding-bottom:30px;
}
footer .menu .empty {
  width:60px;
}
/* header */
header .menu {
  width:100%; height:120px;
    position:relative;
}
header .menu:after {
  content:"";
    background-color:#fff;
    width:100%; height:60px;
    z-index:80;
      box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.1);
      position:fixed;
      top:0; left:0;
}
header .menu:before {
  content:"";
    background-color:#fff;
    width:100%; height:600px;
    z-index:90;
      position:absolute;
      top:-480px; left:0;
}
header .menu .container {
  z-index:100;
    position:fixed;
    margin:0 auto;
    top:0; right:0; left:0;
}
/* img */
img {
  width:100%;
    display:block;
    margin:0 auto; padding:0;
}
/* section */
section {
  overflow:hidden;
}
section .container {
  margin-bottom:60px;
}
section .container > h2 {
  margin-top:45px;
}
section .container > h3, section .container > p {
  display:inline-block;
  vertical-align:top;
}
section .container > h3 {
  width:30%;
    margin:15px 0 0;
}
section .container > hr {
  margin-top:60px;
}
section .container > img {
  margin-top:60px;
}
section .container.title > img {
  margin-top:0;
}
section .container > p {
  width:60%;
    margin:20px 0 0 10%;
}
/* video */
video {
  height:100%; width:177.77777778vh;
  min-width:100%; min-height:56.25vw;
    position:absolute;
    top:50%; left:50%;
        transform:translate(-50%, -50%);
}

/* - - - Division - - - */

/* arrow */
.arrow {
  background-position:center; background-repeat:no-repeat;
  width:60px; height:60px;
  z-index:110;
    position:fixed;
    top:0;
      transition:all 0.2s ease-in-out;
      -o-transition:all 0.2s ease-in-out;
      -ms-transition:all 0.2s ease-in-out;
      -moz-transition:all 0.2s ease-in-out;
      -webkit-transition:all 0.2s ease-in-out;
}
.arrow:hover {
  background-color:#00abff;
}
.arrow.left {
  background-image:url(/base/assets/icon-arrow-left-black.svg);
    left:0;
}
.arrow.right {
  background-image:url(/base/assets/icon-arrow-right-black.svg);
    right:0;
}
/* container */
.container {
  width:60%;
    margin:0 auto;
}
/* grid */
.grid {
  width:100%;
    display:grid;
    grid-gap:15px;
    grid-template-columns:auto;
    margin-top:60px; padding:0;
}
.grid + .grid {
  margin-top:15px;
}
.grid.two {
  grid-template-columns:auto auto;
}
.grid.three {
  grid-template-columns:auto auto auto;
}
.grid.four {
  grid-template-columns:auto auto auto auto;
}
.grid img {
  align-self:center;
}
/* highlight */
.highlight {
  z-index:10;
    border-top:60px solid transparent;
    border-bottom:60px solid transparent;
    position:relative;
}
.highlight:after {
  content:"";
    background-color:#fff;
    width:0; width:calc(100% + 120px); height:0; height:calc(100% + 120px);
    z-index:-1;
      position:absolute;
      top:-60px; left:-60px;
}
/* menu */
.menu {
  width:100%;
}
.menu .button, .menu .link {
  line-height:60px;
  text-align:center;
}
.menu .button, .menu .button:after, .menu .link {
  transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -webkit-transition:all 0.2s ease-in-out;
}
.menu .button {
  color:#000;
  white-space:nowrap;
    width:1%;
    z-index:2;
      position:relative;
}
.menu .button:after {
  content:"";
    background-color:#00abff;
    width:100%; height:100%;
    z-index:-1;
      position:absolute;
      top:0; left:0;
}
.menu .button.contact {
  padding:0 20px 0 45px;
}
.menu .button.contact:before {
  content:"";
    background-image:url(/base/assets/icon-email-black.svg);
    width:17px; height:12px;
      margin:24px 0 0 -25px;
      position:absolute;
}
.menu .button.work {
  width:116px;
}
.menu .button.work:after {
  width:0%;
    right:0; left:auto;
}
.menu .button.work:hover:after {
  width:100%;
}
.menu .button.work:hover + .button.contact:after {
  width:0%;
}
.menu .container {
  display:table;
}
.menu .container a, .menu .container div {
  height:60px;
    display:table-cell;
    vertical-align:middle;
}
.menu .empty:after {
  content:"";
}
.menu .link {
  color:#fff;
  font-size:20px;
    background-color:#000;
    width:60px;
}
.menu .link:hover {
  background-color:#00abff;
}
/* portfolio */
.portfolio {
  width:90%; width:calc(100% - 120px);
    display:grid;
    grid-gap:15px;
    grid-template-columns:auto auto auto auto auto auto;
}
.portfolio a {
  color:#000;
    background-color:#00abff;
    height:270px;
      overflow:hidden;
      position:relative;
}
.portfolio a:after {
  content:"";
    background-position:center; background-size:cover;
    width:100%; height:100%;
      position:absolute;
      top:0; left:0;
        transition:all 0.15s ease-out;
        -o-transition:all 0.15s ease-out;
        -ms-transition:all 0.15s ease-out;
        -moz-transition:all 0.15s ease-out;
        -webkit-transition:all 0.15s ease-out;
}
.portfolio a:hover:after {
  opacity:0;
}
.portfolio a:nth-child(8n-7), .portfolio a:nth-child(8n-5), .portfolio a:nth-child(8n-2), .portfolio a:nth-child(8n) {
  grid-column:span 2;
}
.portfolio a h4 {
  text-align:center;
    position:absolute;
    top:47.5%; left:50%;
      transform:translate(-50%, -52.5%);
}
.portfolio a h4:after {
  content:"";
    background-color:#000;
    width:0%; height:1px;
      margin:0 auto;
      position:absolute;
      right:0; bottom:-12px; left:0;
        transition:all 0.3s ease-out;
        -o-transition:all 0.3s ease-out;
        -ms-transition:all 0.3s ease-out;
        -moz-transition:all 0.3s ease-out;
        -webkit-transition:all 0.3s ease-out;
}
.portfolio a:hover h4:after {
  width:75%;
}
/* title */
.title {
  overflow:hidden;
  position:relative;
}
.title.large {
  width:90%; width:calc(100% - 120px); padding:150px 0;
}
.title.small {
  padding:40px 0;
}
.title h1, .title img {
  text-align:center;
  z-index:10;
    position:relative;
}
.title img {
  width:75%;
}
/* vimeo */
.vimeo {
  width:100%;
    margin-top:60px; padding-bottom:56.25%;
    position:relative;
}
.vimeo iframe, .vimeo object, .vimeo embed {
  width:100%; height:100%;
  z-index:10;
    position:absolute;
    top:0; right:0; bottom:0; left:0;
}
.vimeo:before {
  content:"Please, enable JavaScript :)";
  text-align:center;
    width:100%;
      position:absolute;
      top:45%; left:0;
}

/* - - - Identity - - - */

/* contact */
#contact img {
  background-image:url(/base/assets/graphic-contact.svg);
  background-repeat:no-repeat; background-size:contain;
    margin-bottom:-10px; padding-bottom:50%;
}
#contact .container {
  margin:120px auto 180px;
}
#contact .email, #contact .phone {
  margin:0 0 0 30px;
}
#contact .email:before, #contact .phone:before {
  content:"";
    width:17px; height:12px;
      margin:8px 0 0 -30px;
      position:absolute;
}
#contact .email:before {
  background-image:url(/base/assets/icon-email-black.svg);
}
#contact .phone:before {
  background-image:url(/base/assets/icon-phone-black.svg);
}