.container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  background-color: bisque;
}
header {
  position: fixed;
  top: 0;
  left: -30px;
  height: 100%;
  width: 280px;
  padding: 60px 0;
  z-index: 1000;
}
.logo {
  display: block;
}
nav ul li ul {
  text-align: left;
  margin-left: 130px;
}
nav ul li ul li a {
  display: block;
  padding-top: 6px;
  word-wrap: break-word;
}
.lan-link {
  position: absolute;
  bottom: 40px;
  left: 0;
}
.section-intro,
.section-main,
.section-bio,
.section-contacto {
  position: absolute;
  left: 390px;
  width: calc(100vw - 625px);
  padding: 180px 80px 40px 0;
}
.section-intro {
  width: calc(100vw - 580px);
}
.section-bio {
  left: 300px;
  width: calc(100vw - 300px);
  max-width: 1140px;
}
.section-contacto {
  max-width: 900px;
  padding: 120px 80px 40px 0;
}

.section-float {
  position: fixed;
  z-index: 3000;
  top: 0;
  width: 50vw;
  height: 100%;
  padding-top: 264px;
  background-color: white;
}
#contacto {
  padding-top: 264px;
}
.icon {
  display: inline-flex;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
.obras-items {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.obras-cover {
  position: relative;
  position: absolute;
  bottom: 5px;
  left: 0;
  color: white;
  background-color: rgb(177, 123, 128, 0.8);
  background-blend-mode: screen;
}
.obras-items:hover > .obras-cover {
  transition: all 0.2s ease;
  display: block;
}
#nav-menu {
  position: absolute;
  right: 40px;
  top: 50px;
  width: 28px;
  cursor: pointer;
}
#nav-menu > span {
  display: block;
  width: 28px;
  height: 1px;
  border-radius: 9999px;
}
#nav-menu > span:not(:last-child) {
  margin-bottom: 7px;
}
#nav-menu,
#nav-menu > span {
  transition: all 0.4s ease;
}
#nav-menu.active {
  transition-delay: 0.8s;
  transform: rotate(45deg);
}
#nav-menu.active > span:nth-child(2) {
  width: 0;
}
#nav-menu.active > span:nth-child(1),
#nav-menu.active > span:nth-child(3) {
  transition-delay: 0.4s;
  background-color: black;
}
#nav-menu.active > span:nth-child(1) {
  transform: translateY(9px);
}
#nav-menu.active > span:nth-child(3) {
  transform: translateY(-9px) rotate(90deg);
  background-color: black;
}
#nav-index {
  display: block;
  position: absolute;
  left: 125px;
  top: 170px;
  width: 28px;
  cursor: pointer;
}
#nav-index > span {
  display: block;
  width: 28px;
  height: 1px;
  border-radius: 9999px;
}
#nav-index > span:not(:last-child) {
  margin-bottom: 7px;
}
#nav-index,
#nav-index > span {
  transition: all 0.4s ease;
}
#nav-index.active {
  transition-delay: 0.8s;
  transform: rotate(45deg);
}
#nav-index.active > span:nth-child(2) {
  width: 0;
}
#nav-index.active > span:nth-child(1),
#nav-index.active > span:nth-child(3) {
  transition-delay: 0.4s;
  background-color: white;
}
#nav-index.active > span:nth-child(1) {
  transform: translateY(9px);
}
#nav-index.active > span:nth-child(3) {
  transform: translateY(-9px) rotate(90deg);
  background-color: white;
}
#header-index nav {
  position: absolute;
  padding-left: 60px;
  left: -200px;
}
.slick,
.slick div {
  width: 100%;
  height: 100vh;
}
#slick-obras,
#slick-obras div {
  height: auto;
  width: 500px;
}
#slick-obras {
  display: inline-block;
}
.trans {
  position: fixed;
  z-index: 500;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.3);
}

.icon-up,
.icon-down {
  position: fixed;
  right: 50px;
  bottom: 40px;
  z-index: 2000;
}
.icon-down {
  right: 70px;
}
.obras-nav {
  position: fixed;
  top: 310px;
  right: 50px;
  z-index: 2000;
  width: 160px;
  text-align: right;
}
.obras-nav li {
  display: inline-block;
  margin-left: 7px;
}
.obras-nav li a {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: darkgrey;
}
.creditos {
  position: fixed;
  bottom: 40px;
  right: 60px;
}