/* stylelint-disable order/properties-alphabetical-order */
/* stylelint-enable */
@import url("https://fonts.googleapis.com/css?family=Lato");
@import url("https://fonts.googleapis.com/css?family=Rozha+One");
@import url("https://fonts.googleapis.com/css?family=Cedarville+Cursive");
@font-face {
  font-family: 'cantilenaregular';
  src: url("../fonts/cantilena-webfont.woff2") format("woff2"), url("../fonts/cantilena-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

a {
  color: inherit; }

body {
  background: black;
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: white;
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  cursor: url(../images/cursor.png) 16 16, auto; }

#logo {
  background: url("../images/logo.png") center center no-repeat;
  background-size: contain;
  height: 5%;
  width: 5%;
  position: absolute;
  left: 10%;
  top: 10%;
  margin: 0;
  padding: 0;
  z-index: 99999999999;
  opacity: 0;
  transition: all 0.5s ease; }
  @media only screen and (max-width: 768px) {
    #logo {
      height: 10%;
      width: 10%;
      left: 10%;
      top: 5%; } }

.burgerExtended {
  right: 2.5vw;
  top: 2.5vw; }

.burgerRetracted {
  right: 10%;
  top: 10%; }

.logoExtended {
  left: 2.5vw;
  top: 2.5vw; }

.logoRetracted {
  left: 10%;
  top: 10%; }

#burger {
  position: absolute;
  right: 10%;
  top: 10%;
  z-index: 9999999999;
  margin: 0;
  padding: 0;
  font-size: 1.25em; }

#navMenu {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  margin: 0;
  padding: 0;
  list-style: none; }
  #navMenu li {
    font-size: 4em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 0 42.5%;
    width: 40%;
    opacity: 0;
    color: #a5a5a5; }
    #navMenu li:first-of-type {
      margin-top: 15%;
      opacity: 0; }
    #navMenu li:hover {
      color: black; }
    @media only screen and (max-width: 768px) {
      #navMenu li {
        line-height: 1.25em;
        font-size: 3.5em;
        margin: 0 0 0 27.5%; }
        #navMenu li:first-of-type {
          margin-top: 50%; } }

#navContact, #navMail {
  font-size: 1em !important;
  text-transform: lowercase !important;
  margin-top: 5% !important;
  text-align: left; }

#navContact {
  color: black !important; }

#navMail {
  margin-top: 1% !important; }
  #navMail:hover {
    color: black !important; }

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  transition: 1s opacity; }

#player {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden; }

#bgOverlay {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  width: 100%;
  height: 100%; }

#sectionOne {
  width: 0;
  height: 100%;
  position: absolute;
  overflow: hidden;
  color: white; }

#sectionOneContentWrapper {
  align-content: center;
  justify-content: center;
  position: relative;
  top: 40%; }
  @media only screen and (max-width: 768px) {
    #sectionOneContentWrapper {
      top: 50%;
      transform: perspective(1px) translateY(-50%); } }
  #sectionOneContentWrapper h1 {
    font-weight: 500;
    font-size: 4em;
    margin: 0 0 0 10%;
    text-align: center;
    text-align: left;
    width: 75%;
    opacity: 0;
    font-style: italic;
    font-family: 'cantilenaregular', cursive; }
    @media only screen and (max-width: 768px) {
      #sectionOneContentWrapper h1 {
        line-height: 0.75em;
        margin: 0 0 10% 10%; } }
  #sectionOneContentWrapper #sectionButtons {
    list-style: none;
    margin: 10vh 0 0 0;
    padding: 0;
    text-align: center; }
  #sectionOneContentWrapper li {
    margin: 2.5vh 0 0 0;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 3px;
    opacity: 0; }
  #sectionOneContentWrapper p {
    font-weight: 500;
    font-size: 2em;
    opacity: 0;
    width: 75%;
    text-align: left;
    line-height: 1.5em;
    margin: 0 0 0 10%; }
    @media only screen and (max-width: 768px) {
      #sectionOneContentWrapper p {
        font-size: 1.5em; } }

#socialButtons {
  position: absolute;
  bottom: 10%;
  left: 10%;
  color: white;
  margin: 0;
  padding: 0;
  opacity: 0;
  list-style: none;
  width: 50%; }
  @media only screen and (max-width: 768px) {
    #socialButtons {
      width: 50%;
      left: 10%;
      bottom: 15%; } }
  #socialButtons li {
    display: inline-block;
    margin: 0 5% 0 0;
    font-size: 1.15em; }
    @media only screen and (max-width: 768px) {
      #socialButtons li {
        margin: 0 20% 0 0;
        font-size: 1.5em; } }

svg {
  vertical-align: middle; }

.scroll-down {
  position: absolute;
  display: none;
  bottom: 10%;
  opacity: 0;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  padding-left: 7px;
  cursor: pointer;
  z-index: 2;
  color: #ffffff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  @media only screen and (max-width: 768px) {
    .scroll-down {
      bottom: 10%; } }

.scroll-down.svg svg {
  width: 25px;
  opacity: 1;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  -ms-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s; }

.scroll-down.svg .stroke {
  stroke: #ffffff; }

.scroll-down.svg .scroller {
  fill: #ffffff;
  -webkit-animation: updown 1s infinite;
  -moz-animation: updown 1s infinite;
  -o-animation: updown 1s infinite;
  animation: updown 1s infinite; }

@-webkit-keyframes updown {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@-moz-keyframes updown {
  0% {
    -moz-transform: translate(0, 0);
    transform: translate(0, 0); }
  50% {
    -moz-transform: translate(0, 5px);
    transform: translate(0, 5px); }
  100% {
    -moz-transform: translate(0, 0);
    transform: translate(0, 0); } }

@-o-keyframes updown {
  0% {
    -o-transform: translate(0, 0);
    transform: translate(0, 0); }
  50% {
    -o-transform: translate(0, 5px);
    transform: translate(0, 5px); }
  100% {
    -o-transform: translate(0, 0);
    transform: translate(0, 0); } }

@keyframes updown {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

#sectionTwo {
  z-index: 999;
  background: black;
  width: 0;
  overflow: hidden;
  height: 100%;
  position: absolute;
  top: 0;
  display: none; }

.workSlides {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  overflow: hidden; }

#nextWork {
  position: absolute;
  font-size: 2.5em;
  top: 45%;
  right: 2.5%;
  padding: 0;
  margin: 0;
  z-index: 9; }
  @media only screen and (max-width: 768px) {
    #nextWork {
      top: 85%;
      right: 20%; } }

#prevWork {
  position: absolute;
  font-size: 2.5em;
  top: 45%;
  left: 2.5%;
  padding: 0;
  margin: 0;
  z-index: 9; }
  @media only screen and (max-width: 768px) {
    #prevWork {
      top: 85%;
      left: 20%; } }

.workTextWrapper {
  width: 25%;
  text-align: right;
  margin: 0;
  padding: 0;
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
  left: 54.5%;
  color: white;
  opacity: 0; }
  @media only screen and (max-width: 768px) {
    .workTextWrapper {
      width: 90%;
      left: 5% !important; } }
  .workTextWrapper h3, .workTextWrapper h4, .workTextWrapper h5 {
    margin: 0; }
  .workTextWrapper h5 {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 3px;
    font-size: 0.75em; }
  .workTextWrapper h4 {
    text-transform: capitalize;
    font-size: 1em;
    font-weight: 500; }
  .workTextWrapper h3 {
    font-size: 5em;
    line-height: 0.75em;
    letter-spacing: -1px;
    margin: 15% 0;
    text-transform: capitalize;
    font-family: 'Rozha One', serif; }
    @media only screen and (max-width: 768px) {
      .workTextWrapper h3 {
        font-size: 3em;
        line-height: 1em; } }
  .workTextWrapper div {
    border: solid white 2px;
    padding: 2%;
    display: inline-block;
    font-weight: 900 !important;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px; }
  .workTextWrapper p {
    line-height: 1.5em;
    text-align: right; }

#workZero {
  background-color: #f5f5f5;
  background-repeat: no-repeat;
  background-attachment: fixed, fixed; }
  #workZero .workTextWrapper {
    color: #3498db; }
    #workZero .workTextWrapper div {
      border-color: #3498db;
      transition: all 0.5s; }
      #workZero .workTextWrapper div:hover {
        background: #3498db !important;
        color: white !important; }
  @media only screen and (max-width: 768px) {
    #workZero {
      background-size: 33%, 250%;
      background-position: 15% 22%, center -100%; } }

@-webkit-keyframes workOneBg {
  from {
    background-position: 25% center, center center; }
  to {
    background-position: 25% center, left center; } }

@keyframes workOneBg {
  from {
    background-position: 25% center, right center; }
  to {
    background-position: 25% center, left center; } }

#workOne {
  background: #d1362c;
  background-image: url(../images/mbgmold.png), url(../images/mflyer1.jpg);
  background-size: 175%, 150%;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat;
  transition: all 1s ease;
  -webkit-animation: workOneBg 15s linear infinite alternate;
  animation: workOneBg 15s linear infinite alternate; }
  @media only screen and (max-width: 768px) {
    #workOne {
      background-size: 500%, 325%;
      background-attachment: fixed, fixed; }
    @keyframes workOneBg {
      from {
        background-position: 33% center, right center;
        background-attachment: fixed, fixed; }
      to {
        background-position: 33% center, left center;
        background-attachment: fixed, fixed; }
      @media only screen and (max-width: 768px) {
        from {
          background-position: -10% center, right center;
          background-attachment: fixed, fixed; }
        to {
          background-position: -10% center, left center;
          background-attachment: fixed, fixed; } } } }
  #workOne .studyCaseLink:hover {
    background: white;
    color: #d1362c;
    border-color: white; }

#workTwo {
  background: url("../images/loransia-logo.png"), url("../images/lbg.jpg");
  background-color: #f5f5f5;
  background-position: 20% 40%, left -35%;
  background-size: 25%, cover;
  background-repeat: no-repeat;
  background-attachment: fixed, fixed;
  width: 0; }
  #workTwo .workTextWrapper {
    color: #3498db; }
    #workTwo .workTextWrapper div {
      border-color: #3498db;
      transition: all 0.5s; }
      #workTwo .workTextWrapper div:hover {
        background: #3498db !important;
        color: white !important; }
  @media only screen and (max-width: 768px) {
    #workTwo {
      background-size: 33%, 250%;
      background-position: 15% 22%, center -100%; } }

#workThree {
  background: url("../images/razan.png") no-repeat, url("../images/razan.jpg") center center no-repeat, rgba(36, 31, 48, 0.7);
  background-attachment: fixed, fixed;
  background-position: -25% center;
  background-size: 75%, cover;
  width: 0; }
  @media only screen and (max-width: 768px) {
    #workThree {
      background-position: left 10%, center center;
      background-size: 75%, cover; } }
  #workThree .workTextWrapper {
    color: #e5894a; }
    #workThree .workTextWrapper div {
      border-color: #e5894a;
      transition: all 0.5s; }
      #workThree .workTextWrapper div:hover {
        background: #e5894a !important;
        color: black !important; }