/* __________________________________________ HEADER */
header {
  background: url("../img/trayectoria/trayectoria.jpg") no-repeat fixed center;
  background-color: #003107;
  height: 100vh;
  background-size: cover;
}

#massoni {
  color: whitesmoke;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 500px;
  position: fixed;
  top: 50%;
  right: 13%;
}



/* __________________________________________ SOBRE MI */

#CV, #about {
  background-color: #f6f2f2;
  padding-top: 40px;
}

#CV h2{
  border-top: 30px solid transparent;
  margin: 0 0 40px 40px;
}

#CV .download-area {
  margin-bottom: 0;
}

/* __________________________________________ CAROUSEL */
#calesilla-bg {
  background-color: #fafafa;
  margin: 0;
  padding: 60px 0;
}

.calesilla {
  width: 50vw;
  margin: 0 auto;
}

.slick-dotted.slick-slider {
  margin: 0 auto;
}

.calesilla .slick-slide {
  position: relative;
}

.slick-slide img {
  height: 350px;
}

.sl-text-area {
  width: 200px;
  font-family: "Roboto Slab", serif;
  text-align: center;
  position: absolute;
  right: 3%;
  top: 0;
}

.sl-text-area h2 {
  font-size: 80px;
}

.sl-text-area p {
  line-height: 1.2em;
  font-size: 15px;
  position: relative;
  bottom: 15px;
}

.sl-text-area p:first-of-type {
  font-size: 30px;
  padding-bottom: 5px;
}

.slick-dots {
  position: relative;
  top: 20px;
}
.slick-dots li.slick-active button:before {
  font-size: 15px;
}

.transparency {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(225, 225, 225, 0.6);
  -webkit-clip-path: polygon(45% 0, 100% 0, 100% 100%, 85% 100%);
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 85% 100%);
}

#slick-slide00 {
  background-color: #d2cde7;
}

#slick-slide01 {
  background-color: #c9d408;
}

#slick-slide02 {
  background-color: #eec189;
}

#slick-slide03 {
  background-color: #a5ae84;
}


/* __________________________________________ ACORDEON */
.title-wrap {
  display: flex;
  cursor: pointer;
}

.title-wrap i {
  border: 2px solid var(--main-color);
  padding: 5px;
  border-radius: 50%;
  margin-right: 5px;
}

.content-wrap {
  display: none;
}

.content-wrap h4 {
  color: var(--main-color);
}

/* __________________________________________ BANCO DE FOTOS */
#banco p:last-of-type {
  padding-bottom: 15px;
}

#banco {
  padding-bottom: 0;
}

#banco a {
  color: var(--main-color);
}

#banco .banco-mobile {
    display: none;
}

@media screen and (max-width:768px) {
  #banco .banco-mobile {
    display: block;
  }

  #banco .banco-desktop {
    display: none;  
  }
}

/* __________________________________________ MEDIA QUERIES */

@media screen and (max-width: 1200px) {
  .text-section {
    width: 80%;
  }

  .calesilla {
    width: 55vw;
  }
}

@media screen and (max-width: 992px) {
  header {
    display: none;
  }

  .slick-slide img {
    height: 320px;
  }

  #calesilla-bg {
    padding-top: 100px;
  }

  .calesilla {
    width: 90vw;
  }

  .slick-slide {
    width: 90vw;
  }
}

@media screen and (max-width: 600px) {
  .calesilla {
    width: 100vw;
  }

  .slick-slide {
    width: 100vw;
  }

  li {
    margin-left: 10px;
  }

  .slick-slide img {
    height: 250px;
  }

  .sl-text-area h2 {
    font-size: 3em;
  }

  .sl-text-area p:first-of-type {
    font-size: 1.5em;
    padding-top: 5px;
  }

  .sl-text-area {
    right: 0;
    width: 140px;
  }

  .transparency {
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 80% 100%);
  }
}