body {
  background-color: #b8d1e0;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  height: 100vh;
  width: 100vw;
  margin: 0;
  font-size: 24px;
}

canvas {
    display: block;
    position: absolute;
    outline:0;
}

a,
li {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;

  -webkit-transition: color 0.1s ease;
  -moz-transition: color 0.1s ease;
  -ms-transition: color 0.1s ease;
  -o-transition: color 0.1s ease;
  transition: color 0.1s ease;
}

a:active,
a:visited {
  color: #fff;
}

a:hover,
li:hover {
  color: #4f515d;
}

.white {
  color: #fff;
}

.white:active,
.white:hover,
.white:visited {
  color: #fff;
}

.menu-item {
  color: #fff;
  display: block;
}

.menu-item-inactive {
  display: none;
}

.close-s-inactive,
.close-p-inactive,
.close-d-inactive,
.close-c-inactive {
  display: none;
}

.close-s-active,
.close-p-active,
.close-d-active,
.close-c-active {
  display: block;
}

.x {
  width: 20px;
}

.mobile-close {
  display: none;
}

.selected-item {
  color: #4f515d;
}

.cables {
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 1;
  position: fixed;
  filter:blur(0px);

  -webkit-transition: filter 1s ease;
  -moz-transition: filter 1s ease;
  -ms-transition: filter 1s ease;
  -o-transition: filter 1s ease;
  transition: filter 1s ease;
}

.cables-inactive {
  filter:blur(5px);
}

#curtain {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1.5;
  background-color: #b8d1e0;
  opacity: 1;
}

#curtain.active {
-webkit-animation: load-disolve 1s 2s forwards;
-moz-animation: load-disolve 1s 2s forwards;
-ms-animation: load-disolve 1s 2s forwards;
-o-animation: load-disolve 1s 2s forwards;
animation: load-disolve 1s 2s forwards;
}

@-webkit-keyframes load-disolve {  0% {      opacity: 1; }  100% {      opacity: 0; visibility: hidden; pointer-events: none;}}
@-moz-keyframes load-disolve {  0% {      opacity: 1; }  100% {      opacity: 0; visibility: hidden; pointer-events: none;}}
@-ms-keyframes load-disolve {  0% {      opacity: 1; }  100% {      opacity: 0; visibility: hidden; pointer-events: none;}}
@-o-keyframes load-disolve {  0% {      opacity: 1; }  100% {      opacity: 0; visibility: hidden; pointer-events: none;}}
@keyframes load-disolve {  0% {      opacity: 1; }  100% {      opacity: 0; visibility: hidden; pointer-events: none;}}

.main {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
}
.top {
  padding: 50px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
}

.cuciimedia img {
  width: 180px;
}

.nav ul {
  margin: 0;
}

.nav li {
  font-weight: 500;
  text-align: right;
  font-size: 24px;
  padding: 0;
  padding-bottom: 10px;
  margin: 0;
  top: 0;
  list-style-type: none;
  z-index: 1000;
}

.mobilemenu-wrapper {
    display: none;
}

.content-container {
  display: flex;
  justify-content: center;
  opacity: 0;
}

.content-container-active {
  opacity: 1;
}

.content {
  height: 70vh;
  width: 50vw;
  top: 0;
  margin-top: 50px;
  position: absolute;
  z-index: 4;
  opacity: 0;
  display: flex;
  justify-content: center;
  line-height: 1.5;
  text-align: justify;

  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -ms-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
}

.content-active {
  opacity: 1;

  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -ms-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
}


.content-item {
  height: 100%;
  width: 100%;
  margin: auto;
  opacity: 1;
}

.content-item-inactive {
  display: none;
}

.name {
  font-weight: 600;
}

.title {
  font-size: 16px;
}

.credits {
  font-size: 14px;
  line-height: 1.5;
}

.email {
  color: #fff;
  font-weight: 500;
  text-decoration: none;

  -webkit-transition: color 0.1s ease;
  -moz-transition: color 0.1s ease;
  -ms-transition: color 0.1s ease;
  -o-transition: color 0.1s ease;
  transition: color 0.1s ease;
}

.email:active {
  color: #fff;
}

.email:hover {
  color: #4f515d;
}

.servicii,
.portfoliu,
.desprenoi,
.contact {
  display: none;
}

.servicii-active,
.portfoliu-active,
.desprenoi-active,
.contact-active {
  display:block;
}

/* HAMBURGER ICON */
#nav-icon4,
#mob-close-item-s-inactive,
#mob-close-item-p-inactive,
#mob-close-item-d-inactive,
#mob-close-item-c-inactive {
    width: 30px;
    height: 10px;
    z-index: 250;
    margin-top: 15px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}


#nav-icon4 span,
#mob-close-item-s-inactive span,
#mob-close-item-p-inactive span,
#mob-close-item-d-inactive span,
#mob-close-item-c-inactive span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: white;
    border-radius: 30px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon4 span:nth-child(1),
#mob-close-item-s-inactive span:nth-child(1),
#mob-close-item-p-inactive span:nth-child(1),
#mob-close-item-d-inactive span:nth-child(1),
#mob-close-item-c-inactive span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2),
#mob-close-item-s-inactive span:nth-child(2),
#mob-close-item-p-inactive span:nth-child(2),
#mob-close-item-d-inactive span:nth-child(2),
#mob-close-item-c-inactive span:nth-child(2) {
  top: 10px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3),
#mob-close-item-s-inactive span:nth-child(3),
#mob-close-item-p-inactive span:nth-child(3),
#mob-close-item-d-inactive span:nth-child(3),
#mob-close-item-c-inactive span:nth-child(3) {
  top: 20px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1),
#mob-close-item-s-inactive.open span:nth-child(1),
#mob-close-item-p-inactive.open span:nth-child(1),
#mob-close-item-d-inactive.open span:nth-child(1),
#mob-close-item-c-inactive.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0;
  left: 5px;
}

#nav-icon4.open span:nth-child(2),
#mob-close-item-s-inactive.open span:nth-child(2),
#mob-close-item-p-inactive.open span:nth-child(2),
#mob-close-item-d-inactive.open span:nth-child(2),
#mob-close-item-c-inactive.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3),
#mob-close-item-s-inactive.open span:nth-child(3),
#mob-close-item-p-inactive.open span:nth-child(3),
#mob-close-item-d-inactive.open span:nth-child(3),
#mob-close-item-c-inactive.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 21px;
  left: 5px;
}



/* large tablet */
/* @media only screen and (max-width: 1200px) {
  .content {
    width: 100vw;
    height: 100vh;
    margin: 0;
    z-index: 1;
  }

  .content-item {
    margin-top: 40%;
    height: 73%;
    width: 90%;
  }
} */

/* small tablet */
@media only screen and (max-width: 1000px) {
  .content {
    width: 100vw;
    height: 100vh;
    margin: 0;
    z-index: 1;
  }

  .content-item {
    margin-top: 40%;
    width: 87%;
    height: 100%;
    padding-bottom: 40%;
  }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  body {
    overflow: visible;
  }
  .nav {
    display: none;
  }

  .cables {
    position: fixed;
  }
  .cuciimedia img {
    width: 100px;
  }

  .mobilemenu-wrapper {
      display: block;
  }

  .mobilemenu-wrapper-hidden {
    display: none;
  }

  .mobile-close,
  .mob-close-item-s-inactive,
  .mob-close-item-p-inactive,
  .mob-close-item-d-inactive,
  .mob-close-item-c-inactive {
    display: none;
  }

  .mobile-close-active,
  .mob-close-item-s-active,
  .mob-close-item-p-active,
  .mob-close-item-d-active,
  .mob-close-item-c-active {
    display: block;
  }

  .toggle-nav {
    cursor: pointer;
    top: 35px;
    right: 40px;
    z-index: 1000;
  }

  .close {

  }

  .mobilemenu {
      display: none;
      animation: menuToggleBlurIn 1.5s;
      position: fixed;
      top: 0;
      right: 0;
      padding: 130px 35px;
      height: 60vh;
      width: 100vw;
  }

  .mobilemenu-visible {
      display: block;
      width: 100vw;
      right: 0;
      z-index: 200;
  }

  .menu {
    padding-right: 15px;
  }
  .menu ul {
    margin: 0;
  }
  .menu li {
    text-align: right;
    font-size: 24px;
    padding: 0;
    padding-bottom: 10px;
    margin: 0;
    top: 0;
    list-style-type: none;
  }

  .menu li,
  .menu a {
    font-weight: 400;
  }

  .toggle-content {
    opacity: 1;
  }

  .toggle-content-hidden {
      opacity: 0;
      pointer-events: none;
  }

  .content {
    width: 100vw;
    height: 150vh;
    margin: 0;
    z-index: 1;
  }

  .content-item {
    margin-top: 40%;
    height: 100%;
    width: 75%;
    margin-bottom: 50px;
    z-index: 100;
  }
}