body {
  background: #f9f9f9;
  letter-spacing: .5px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}
::selection {
  background: #4b2de5;
  color:white;
}
::-moz-selection {
  background: #4b2de5;
  color:white;
}
a {
  text-decoration:none;
  color:#000;
  position: relative;
}

/* HEADER */

#headerLogo {
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width:80%;
    max-width:80%;
  	z-index:10000;
  	padding:10px 0;
}
#headerLogo div {
  display: inline-block;
  padding-left: 0px;
}

/* LOGO */

#logo {
  fill:#282828;
  height: 2vw;
  min-height: 25px;
}
#logo:hover {
  fill:#4b2de5;
  -webkit-transition: fill .2s ease-in-out;
  transition: fill .2s ease-in-out;
  -webkit-animation: pulse 1s;
  animation: pulse 1s;
}

/* ABOUT + CONTACT */

.hlinks {
  writing-mode: vertical-rl;
  position: fixed;
  right: 10%;
  top: 20px;
  display: inline;
  color: #000;
  font-size: 13px;
  font-family: 'Raleway', sans-serif !important;
  font-weight:400;
  z-index:100000;
}

.hlinks > a:before,
.vertcontact > a:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  top: 0;
  left: 0;
  background-color: #4b2de5;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.hlinks > a:hover:before,
.vertcontact > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

@media only screen and (max-height: 450px) {
  .hlinks {
    writing-mode: horizontal-tb;
    font-size: 12px;
    position: fixed;
          }
  .hlinks a:before, a:hover{
    width: 0px;
    text-decoration: underline;
          }
}

/* EMAIL */

.vertcontact {
  writing-mode: vertical-rl;
  z-index:100000;
  position: fixed;
  right: 10%;
  bottom: 5%;
  display: inline;
  color: #000;
  font-size: 13px;
  font-family: 'Raleway', sans-serif !important;
}

@media only screen and (max-height: 450px) {
    .vertcontact {
        display: none;
    }
}

/* MAIN SECTION */

.main {
  position: fixed;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 53%;
  font-size: 2.3vw;
  line-height: 3.3vw;
  font-family: 'Raleway', sans-serif !important;
  text-transform: uppercase;
  font-weight:200;
  text-align: justify;
  color: #282828;  
  margin: 0 auto;
  transform-style: preserve-3d;
}


/* PROJECTS IMAGES */

.img1 {
        width: 60vw;
}
.img2 {
        width: 50vw;
}
.img3 {
        width: 40vw;
}
.img4 {
        width: 70vw;
}
.hover_img span {
  pointer-events: none;
  z-index:-1;
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.hover_img a:hover span {
  display: inline-block;
  opacity: 1;
}

/* PROJECTS LINKS + BACKGROUND */

.hover_link img video {
  height: auto;
}
.hover_link {
  text-decoration: none;
  padding: 0 2px;
  color: #181818;
  font-family: 'Montserrat', sans-serif !important;
  text-transform: uppercase;
  font-style: italic;
  font-weight:900;
}
.main:hover .hover_link {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.main:hover .hover_link:hover {
  background: #f9f9f9;
  padding: 0px 5px;
  text-decoration: none;
  -webkit-text-stroke-width: 0px !important;
  -webkit-text-fill-color: #4b2de5 !important;
  -webkit-text-stroke-color: #4b2de5 !important;
}

/* iPHONE */

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
    .main {
      font-size: 3vh;
      line-height: 4vh;
      width: 78%;
    }
    .hover_link {
      text-decoration: none;
      padding: 0 2px;
      color: #181818;
      font-family: 'Montserrat', sans-serif !important;
      text-transform: uppercase;
      font-style: italic;
      font-weight:900;
    }
    .main:hover .hover_link {
      -webkit-text-fill-color: black;
      -webkit-text-stroke-width: 0px;
      -webkit-text-stroke-color: black;
    }

    .main:hover .hover_link:hover {
      background: #f9f9f9;
      padding: 0px 2px;
      text-decoration: none;
      -webkit-text-fill-color: black;
      -webkit-text-stroke-width: 0px;
      -webkit-text-stroke-color: black;
    }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape) { 
    .main {
      font-size: 3vw;
      line-height: 4vw;
      width: 78%;
    }
    .hover_link {
      text-decoration: none;
      padding: 0 2px;
      color: #181818;
      font-family: 'Montserrat', sans-serif !important;
      text-transform: uppercase;
      font-style: italic;
      font-weight:900;
    }
    .main:hover .hover_link {
      -webkit-text-fill-color: black;
      -webkit-text-stroke-width: 0px;
      -webkit-text-stroke-color: black;
    }

    .main:hover .hover_link:hover {
      background: #f9f9f9;
      padding: 0px 2px;
      text-decoration: none;
      -webkit-text-fill-color: black;
      -webkit-text-stroke-width: 0px;
      -webkit-text-stroke-color: black;
    }
}

/* iPAD */

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .main {
      font-size: 3vh;
      line-height: 4vh;
      width: 78%;
    }
    .hover_link {
      text-decoration: none;
      padding: 0 2px;
      color: #181818;
      font-family: 'Montserrat', sans-serif !important;
      text-transform: uppercase;
      font-style: italic;
      font-weight:900;
    }
    .main:hover .hover_link {
      -webkit-text-fill-color: black;
      -webkit-text-stroke-width: 0px;
      -webkit-text-stroke-color: black;
    }

    .main:hover .hover_link:hover {
      background: #f9f9f9;
      padding: 0px 2px;
      text-decoration: none;
      -webkit-text-fill-color: black;
      -webkit-text-stroke-width: 0px;
      -webkit-text-stroke-color: black;
    }
}

@media only screen 
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .main {
      font-size: 3vh;
      line-height: 4vh;
      width: 78%;
    }
    .hover_link {
      text-decoration: none;
      padding: 0 2px;
      color: #181818;
      font-family: 'Montserrat', sans-serif !important;
      text-transform: uppercase;
      font-style: italic;
      font-weight:900;
    }
    .main:hover .hover_link {
      -webkit-text-fill-color: black;
      -webkit-text-stroke-width: 0px;
      -webkit-text-stroke-color: black;
    }

    .main:hover .hover_link:hover {
      background: #f9f9f9;
      padding: 0px 2px;
      text-decoration: none;
      -webkit-text-fill-color: black;
      -webkit-text-stroke-width: 0px;
      -webkit-text-stroke-color: black;
    }
  }

/* animations */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
}
@keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown2 {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }
}
@-webkit-keyframes fadeInDown2 {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.fadeInUp2 {
  -webkit-animation-name: fadeInUp2;
  animation-name: fadeInUp2;
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
.fadeInDown2 {
  -webkit-animation-name: fadeInDown2;
  animation-name: fadeInDown2;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}