@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:900i');
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:900');
@import url('https://fonts.googleapis.com/css?family=Catamaran:700');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400i');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400');

:root {
  --paperColor: #e4e1c9;
  --orange: #dc801e;
  --blue: #30ab8e;
  --text-paperColor: #e6e3c1;
  --text-orange: #da7b16;
  --text-blue: #27a588;
}

html {
  background-color: var(--paperColor);
  font-size: calc(0pt + 1.55vw);
  padding-top: 7em;
}

@media screen and (max-width: 1200px) {
  html {
    font-size: calc(3pt + 1.0vw);
  }
}

#fullsizeLoader{
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: #da7b16;
  z-index: 22;
  top: 0;
}

.own-paperColor {
  background-color: var(--paperColor);
  color: var(--text-orange)
}

.own-paperColorB {
  background-color: var(--paperColor);
  color: var(--text-blue)
}

.own-orange {
  background-color: var(--orange);
  color: var(--text-paperColor)
}

.own-blue {
  background-color: var(--blue);
  color: var(--text-paperColor)
}

.own-text-paperColor {
  color: var(--paperColor)
}

.own-text-orange {
  color: var(--orange)
}

.own-text-blue {
  color: var(--blue)
}

.own-title {
  font-family: "Alegreya Sans";
  font-size: 4.5rem;
  font-weight: 900;
  text-transform: uppercase;
  font-style: italic;
  -ms-transform: translateY(-1em);
  /* IE 9 */
  -webkit-transform: translateY(-1em);
  /* Safari */
  transform: translateY(-1em);
}

.own-titlePortfolioModal {
  font-family: "Alegreya Sans";
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.038em;
  word-spacing: 0.06em;
  text-transform: uppercase;
  font-style: italic;
  padding-bottom: 2rem;
  -ms-transform: translateY(-2.05ex);
  /* IE 9 */
  -webkit-transform: translateY(-2.05ex);
  /* Safari */
  transform: translateY(-2.05ex);
}

.own-subTitle {
  font-family: "Alegreya Sans";
  font-weight: 900;
  font-size: 1.35rem;
  padding-bottom: 1.55em;
  line-height: 154%;
  word-spacing: 0.05em;
  letter-spacing: 0.035em;
}

.own-text {
  font-family: "Fira Sans";
  font-weight: 400;
  font-style: italic;
  font-size: 0.85rem;
  padding-left: 4.0em;
  line-height: 180%;
}

.own-textModal {
  font-family: "Fira Sans";
  font-weight: 400;
  font-style: italic;
  font-size: 0.85rem;
  padding-left: 4.0em;
  padding-top: 3.0em;
  padding-bottom: 4.0em;
  line-height: 180%;
}

.own-award-list {
  font-family: "Fira Sans";
  font-weight: 400;
  font-size: 0.85rem;
  padding-left: 4.0em;
  line-height: 180%;
}

.own-nav-item {
  font-family: "Alegreya Sans";
  font-size: 1.0rem;
  float: left;
  width: auto;
  text-align: center;
  text-decoration: none;
  padding: 0.2rem 0.5rem 0.5rem 0.5rem;
  letter-spacing: 0.038em;
  text-transform: uppercase;
  border-top: 0.5em #30ab8e solid;
  opacity: 0.85;
  -webkit-transition: border-top 200ms, opacity 200ms;
  transition: border-top 200ms, 200ms;
}

.modalExit {
  position: fixed;
  top: 2vw;
  right: 2vw;
  z-index: 55;
  font-size: 3.5rem;
  background: none;
}

#main-nav {
  position: fixed;
  transition: top 0.53s;
  top: 0;
  z-index: 50;
}

#nav-right-elements {
  float: right;
}

#top-box {
  margin-top: 4.4rem;
}


@media screen and (max-width: 1000px),
(orientation: portrait) {
  .own-nav-item {
    font-size: 1.85rem;
  }

  #nav-right-elements {
    display: none;
    float: left;
    /* font-size: 1.25rem; */
  }

  #top-box {
    margin-top: 13.4rem;
  }

  .modalExit {
    position: fixed;
    top: 1.25vw;
    right: 1.25vw;
    z-index: 55;
    font-size: 7.5rem;
  }
}



.own-nav-item:hover {
  border-top: 0.5em #e6e3c1 solid;
  opacity: 1.0;
}

.own-10-button {
  color: #27a588;
  float: left;
  text-align: center;
  width: 10%;
  font-size: 2.55rem;
  -webkit-transition: color 100ms, font-size 100ms;
  transition: color 100ms, font-size 100ms;
  cursor: pointer;
}

.own-10-button:hover {
  color: #da7b16 !important;
  font-size: 3rem;
}

.own-source {
  font-family: "Fira Sans";
  font-weight: 300;
  opacity: 0.75;
  font-size: 0.85em;
  font-style: normal;
  padding-bottom: 2rem;
}

.own-boxRotate {
  -ms-transform: skewY(-5deg);
  /* IE 9 */
  -webkit-transform: skewY(-5deg);
  /* Safari */
  transform: skewY(-5deg);
  /* Standard syntax */
}

.own-boxRotate-navigation {
  -ms-transform: skewY(-5deg) translateY(-3.8rem);
  /* IE 9 */
  -webkit-transform: skewY(-5deg) translateY(-3.8rem);
  /* Safari */
  transform: skewY(-5deg) translateY(-3.8rem);
  /* Standard syntax */
}

.own-DeRotate {
  -ms-transform: skewY(5deg) translateY(-2.0rem);
  /* IE 9 */
  -webkit-transform: skewY(5deg) translateY(-2.0rem);
  /* Safari */
  transform: skewY(5deg) translateY(-2.0rem);
  /* Standard syntax */
}

.own-center {
  width: 65%;
  margin: auto;
  padding-bottom: 8rem;
}

.own-center-modal-title {
  width: 82.5%;
  margin: auto;
  margin-left: 17.5%;
}

.own-center-navigation {
  width: 65%;
  margin: auto;
}

.own-portfolio-center {
  width: 68.5%;
  margin: auto;
  padding-bottom: 9rem;
}

@media screen and (max-width: 600px) {
  .own-center {
    width: 95%;
    margin: auto;
  }

  .own-center-modal-title {
    width: 97.5%;
    margin: auto;
    margin-left: 2.5%;
  }

  .own-portfolio-center {
    width: 100%;
    margin: auto;
  }

  .own-center-navigation {
    width: 95%;
    margin: auto;
  }

  html {
    padding-top: 4.5em;
  }

  .own-titlePortfolioModal {
    -ms-transform: translateY(-2ex);
    /* IE 9 */
    -webkit-transform: translateY(-2ex);
    /* Safari */
    transform: translateY(-2ex);
  }
}

.own-portfolio-item {
  margin-right: 1.45rem;
  margin-left: 1.45rem;
  overflow: hidden;
  opacity: 1.0;
  cursor: pointer;


}

.own-portfolio-item:hover {}

.own-portfolio-img {
  width: 150%;
  background-position: center;
  height: 20rem;
  opacity: 0.85;
  -webkit-transition: transform 300ms, opacity 300ms;
  transition: transform 300ms, opacity 300ms;
}

@media screen and (max-width: 1199px) {
  .own-portfolio-img {
    height: 22rem;
    background-size: cover;
    background-position-y: 0rem;
    width: 100%;
  }
}

@media screen and (max-width: 599px) {
  .own-portfolio-img {
    background-position-y: -5rem;
  }
}

.own-portfolio-item:hover .own-portfolio-img {
  -ms-transform: scale(1.06, 1.06);
  /* IE 9 */
  -webkit-transform: scale(1.06, 1.06);
  /* Chrome, Safari, Opera */
  transform: scale(1.06, 1.06);
  opacity: 1.0;
}

.own-portfolio-title {
  font-family: "Fira Sans";
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.1rem;
  -ms-transform: scale(0.85, 0.85) rotate(90deg) translateY(-0.85rem);
  /* IE 9 */
  -webkit-transform: scale(0.85, 0.85) rotate(90deg) translateY(-0.85rem);
  /* Safari */
  transform: scale(0.85, 0.85) rotate(90deg) translateY(-0.85rem);
  width: 50rem;
  text-transform: uppercase;
  position: absolute;
  right: -23.36rem;
  top: 19.24rem;
  padding-left: 1.5rem;
  padding-top: 0.4rem;
  padding-bottom: 0.25rem;
  text-overflow: ellipsis;
}

.own-award {
  font-size: 0.8em;
  margin-left: 0em;
  margin-right: 1em;
}

.own-award-img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.noScroll {
  overflow: hidden;
}

.own-vid {
  margin-bottom: 1.33rem;
  padding: 0.15rem;
}

.own-vimeo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.lazyload {
  background: #e4e1c9;
}

.lazyloading {
  opacity: 0;
  background: #e4e1c9;
}



.own-animate-top {
  animation: animatetop 0.4s
}

@keyframes animatetop {
  from {
    top: -20vh;
    opacity: 1
  }

  to {
    top: 0;
    opacity: 1
  }

  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: fixed;
  top: 50vh;
  right: 50vw;
  border: 2px solid var(--paperColor);
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 4px;
  top: 4px;
  border: 2px solid var(--paperColor);
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
    
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}