body {margin: 0; padding: 0; background-color: #f9f9f9; text-rendering: optimizeLegibility;}
img {display: block;}

a {text-decoration: none; color: inherit;}

.header { height: 100vh; background-image: url(../imagenes/inversiones/biblioteca/Rafelweb-102.jpg); background-size: cover; background-repeat: no-repeat; mix-blend-mode: multiply;  }
.header::after { height: 300px; content: ""; background: linear-gradient(#000000, transparent); position: absolute; top: 0; width: 100%; z-index: -1;}
.header-content {padding:50px 50px 0 50px; max-width: 1600px; margin: 0 auto; min-height: calc(100% - 50px); display: grid;}
.header-content > div:first-of-type {display: grid; grid-template-columns: repeat(12,1fr); column-gap: 25px;}
.header-content > div:last-of-type {display: grid; grid-template-columns: repeat(12,1fr); column-gap: 25px; align-self: flex-end; height: 100%;}
.header-content > div:last-of-type > div {grid-column: 1 / 10;  padding: 50px 50px 75px 50px; align-self: flex-end; position: relative;  }
.header-content > div:last-of-type > div::before { background-color: #FF3948;   position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; z-index: -1; }
.header-content > div:first-of-type > div:first-of-type {text-align: left; grid-column: 1 / 4;}
.header-content > div:first-of-type > div:nth-of-type(2) {text-align: right; grid-column: 5 / 11;}
.header-content > div:first-of-type > div:nth-of-type(3) {text-align: right; grid-column: 12 / 13;}
.header-content h1 {font-family: 'Raleway', sans-serif; font-weight: 400; text-transform: uppercase; font-size:calc(30px + 2.500vw); line-height: calc(30px + 2.500vw); letter-spacing: -2px; margin: 0; padding: 0; color: #2F3590;}
.header-content h2 {font-family: 'Raleway', sans-serif; font-weight: 700; font-size:calc(18px + 0.75vw); line-height: calc(24px + 0.75vw);  margin: 0; padding: 0; color: #fff; padding-bottom: 50px;}

.header-content p {font-family: 'Raleway'; margin: 0; padding: 0; font-size:calc(14px + 0.25vw); line-height: (14px + 0.25vw); color: #fff; font-weight: 400;}
.header-content > div:nth-of-type(2) p {font-family: 'Raleway'; margin: 0; padding: 0; font-size:calc(14px + 0.313vw); line-height: (14px + 0.313vw); color: #888888;}
.current {color: #FF3948; padding-bottom: 10px;}

.video {}
.video-content {padding:0; margin: 0 auto; display: grid; grid-template-columns: repeat(1,1fr);}
.embed-container { 
  position: relative; 
  padding-bottom: 56.25%;
  overflow: hidden;
  max-width: 100%;
  height: auto;
} 

.logo_pat { background-color: #fff; color: #fff;}
.logo_pat_content {padding:50px 25px 50px 25px; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: max-content max-content; column-gap: 50px; align-content: center;
  align-items: center;
   }
.logo_pat_content img{width: 100%; max-width: 210px; }


.embed-container iframe,
.embed-container object,
.embed-container embed { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.que {background-color: #fafafa; }
.que-content { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 25px; padding: 0 8% 0 8%;}
.que-content > div:first-of-type {text-align: left; grid-column: 1 / 7; background-color: #FF3948; padding:100px 50px 100px 50px;}
.que-content > div:nth-of-type(2) {text-align: left; grid-column: 8 / 13; padding:100px 50px 100px 50px;}
.que-content h2 {font-family: 'Raleway', sans-serif; font-weight: 700; font-size:calc(22px + 0.25vw); line-height: calc(22px + 0.25vw);  margin: 0; padding: 0; color: #fff; padding-bottom: 50px;}
.que-content p {font-family: 'Raleway'; margin-top: 0; padding-top: 0; font-size:calc(14px + 0.313vw); line-height: (14px + 0.313vw);}

.past {background-color: #fafafa; padding: 0 50px 0 50px; }
.past-content { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 25px;}
.past-content > div:first-of-type {text-align: left; grid-column: 1 / 3;  padding:0 0 100px 0; border-left:20px solid #FF3948;}
.past-content > div:nth-of-type(2) {text-align: left; grid-column: 5 / 13; padding:0 0 100px 0;}
.past-content h2 {font-family: 'Raleway', sans-serif; font-weight: 700; font-size:calc(30px + 1vw); line-height: calc(30px + 1vw);  margin: 0; padding: 0; color: #FF3948; padding-bottom: 50px; padding-left: 20px;}
.past-content p {font-family: 'Raleway'; margin-top: 0; padding-top: 0; font-size:calc(14px + 0.313vw); line-height: (14px + 0.313vw);}
.past-content h3 {font-family: 'Raleway', sans-serif; font-weight: 700; text-transform: uppercase; font-size: calc(17px + 0.313vw); line-height: calc(23px + 0.313vw);  margin: 0; padding: 0; color: #000; padding-top: 20px;}
.past-content h4 {font-family: 'Raleway'; margin: 0; padding: 0; font-size:calc(14px + 0.313vw); line-height: (14px + 0.313vw); font-weight: 400; padding-top: 20px;}

.pasado {background-color: #f3f3f3;}
.pasado-content {padding:100px 25px 0px 25px; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 25px;}
.pasado-content > div:first-of-type {text-align: left; grid-column: 3 / 7;}
.pasado-content > div:nth-of-type(2) {text-align: left; grid-column: 8 / 13;}
.pasado-content h2 {font-family: 'Raleway', sans-serif; font-weight: 400; text-transform: uppercase;  font-size:calc(25px + 1.563vw); line-height: calc(30px + 1.563vw); letter-spacing: -1px; margin: 0; padding: 0; color: #2F3590;}
.pasado-content p {font-family: 'Raleway'; margin-top: 0; padding-top: 0; font-size:calc(14px + 0.313vw); line-height: (14px + 0.313vw); margin-top: 20px;}

.mapa {background-color: #f3f3f3;}
.mapa-content {margin: 0 auto; display: grid; grid-template-columns: repeat(1,1fr); column-gap: 25px; height: calc(60vh - 60px);}


.futuro {background-color: #fafafa;}
.futuro-content {padding:100px 25px 0px 25px; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 25px;}
.futuro-content > div:first-of-type {text-align: left; grid-column: 3 / 7;}
.futuro-content > div:nth-of-type(2) {text-align: left; grid-column: 8 / 13;}
.futuro-content h2 {font-family: 'Raleway', sans-serif; font-weight: 400; text-transform: uppercase;  font-size:calc(25px + 1.563vw); line-height: calc(30px + 1.563vw); letter-spacing: -1px; margin: 0; padding: 0; color: #2F3590;}
.futuro-content p {font-family: 'Raleway'; margin-top: 0; padding-top: 0; font-size:calc(14px + 0.313vw); line-height: (14px + 0.313vw); margin-top: 20px;}

.obras {display: grid; grid-template-columns: repeat(12,1fr); column-gap: 25px;  overflow-x: scroll; background-color: #fafafa;}
.obras-content { margin: 0 auto; display: grid; grid-auto-flow: column;  grid-column: 1 / 13;}
.obras-content > div {}
.res { }
.res img {object-fit: cover; aspect-ratio: 16 / 11; max-width: 500px;   }
.ill {
  min-width: 500px;
  padding-top: 50px;
  display: grid;
  align-content: center;
  justify-content: center;
}
.ill img {object-fit: cover; aspect-ratio: 16 / 11; max-width: 350px;   }
.obras-content h3 {font-family: 'Raleway', sans-serif; font-weight: 700; text-transform: uppercase; font-size: calc(17px + 0.313vw); line-height: calc(23px + 0.313vw);  margin: 0; padding: 0; color: #000; padding-top: 20px;}
.obras-content h4 {font-family: 'Raleway'; margin: 0; padding: 0; font-size:calc(14px + 0.313vw); line-height: (14px + 0.313vw); font-weight: 400; padding-top: 20px;}
.obras-content p {font-family: 'Raleway'; margin: 0; padding: 0; font-size:calc(13px + 0.250vw); line-height: calc(18px + 0.250vw); padding-top: 20px; padding: 0 25px 0 25px;}
.obras-content h3 {padding: 25px 25px 0 25px;}
.obras-content h4 {padding: 0 25px 25px 25px;}

.slideshow-container > div {background-color: #fafafa;}
.slideshow-container > div > img {object-fit: cover; aspect-ratio: 16 / 11; height: 100%;  }

.proyectos {display: grid; grid-template-columns: repeat(12,1fr); column-gap: 25px;  overflow-x: scroll; background-color: #fafafa;}
.proyectos-content {padding:150px 25px 150px 25px; margin: 0 auto; display: grid; grid-auto-flow: column; column-gap: 50px; grid-column: 2 / 13;}
.proyectos-content > div {min-width: 25vw;}
.proyectos-content h3 {font-family: 'Raleway', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 22px; line-height: 28px;  margin: 0; padding: 0; color: #000; padding-top: 20px;}
.proyectos-content h4 {font-family: 'Raleway'; margin: 0; padding: 0; font-size:calc(14px + 0.313vw); line-height: (14px + 0.313vw); font-weight: 400; padding-top: 20px;}
.proyectos-content p {font-family: 'Raleway'; margin: 0; padding: 0; font-size:calc(13px + 0.250vw); line-height: calc(18px + 0.250vw); padding-top: 20px;}
.combo {display: flex; column-gap: 15px; align-items: flex-end;  margin-bottom: 20px; min-height: 150px;}
.combo img {max-height: 100px; column-gap: 25px;}
.proyectos-content > div {min-width: 400px;}


.banner {}
.banner-content {padding:0 25px 0 25px; margin: 0 auto; display: grid; grid-template-columns: repeat(2,1fr); column-gap: 25px; background-image: url('../imagenes/banner.jpg'); min-height: 50vh; align-content: center; align-items: center; justify-items: center; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.banner-content h2 {font-family: 'Raleway', sans-serif; font-weight: 400; text-transform: uppercase;  font-size:calc(25px + 1.563vw); line-height: calc(30px + 1.563vw);  letter-spacing: -1px; margin: 0; padding: 0; color: #fff;}
.banner-content p {font-family: 'Raleway'; margin-top: 0; padding-top: 0; font-size:calc(14px + 0.313vw); line-height: (14px + 0.313vw); margin-top: 20px; font-style: italic; color: #fff; max-width: 600px;}




.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6 {display: none}
.slideshow-container img {vertical-align: middle;}

.info {display: flex; column-gap: 15px;}
.info img {max-width: 25px;}
.info p {font-family: 'Raleway'; margin-top: 0; padding-top: 0; font-size:calc(12px + 0.25vw); line-height: (14px + 0.25vw); margin-top: 20px; color: #000; max-width: 400px;}

/* Slideshow container */
.slideshow-container {

  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: black;}

  .footer { background-color: #FF3948; color: #fff;}
  .footer-content {padding:50px 25px 50px 25px; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 25px; align-items: center; }
  .footer-content > div:first-of-type {text-align: left; grid-column: 1 / 13; display: grid; grid-template-columns: repeat(2,1fr); padding-bottom: 100px; padding-top: 25px; column-gap: 25px; }
  .footer-content > div:first-of-type > div:last-of-type {justify-self: flex-end;}
  .footer-content > div:nth-of-type(2) {text-align: left; grid-column: 1 / 13; justify-self: center; padding-bottom: 100px; }
  .footer-content > div:nth-of-type(3) {text-align: left; grid-column: 1 / 13; display: grid; grid-template-columns: repeat(2,1fr); padding-bottom: 100px; column-gap: 25px; }
  .footer-content > div:nth-of-type(3) > div:last-of-type {justify-self: flex-end;}
  .footer-content > div:last-of-type {text-align: left; grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3,1fr);}
  .footer-content > div:last-of-type > div:last-of-type {justify-self: flex-end;}
  .footer-content > div:last-of-type > div:first-of-type {display: grid; grid-template-columns: repeat(4,max-content); align-items: center;}
  .footer-content p {font-family: 'Raleway'; margin: 0; padding: 0; font-size:calc(14px + 0.313vw); line-height: (14px + 0.313vw);}
  .footer-content > div:nth-of-type(2) p {font-family: 'Raleway'; margin: 0; padding: 0; font-size:calc(14px + 0.313vw); line-height: (14px + 0.313vw); color: #888888;}
  .footer-content > div:last-of-type img {padding-right: 20px;}

  .footer-content > div:first-of-type > div:first-of-type img {

    max-height: 100px;
    max-width: 100px;

  }
  .footer-content > div:nth-of-type(3) img {    
    max-height: 100px;     max-width: 100px;}
  .footer-content > div:first-of-type > div:last-of-type > img {
    justify-self: flex-end;
    max-width: 100px;
    max-height: 100px;
}
.footer-content > div:first-of-type > div:last-of-type {

  justify-items: flex-end;
  display: grid;
}
.footer-content > div:nth-of-type(3) > div:last-of-type > img {
    justify-self: flex-end;

    max-height: 100px;
}
.footer-content > div:nth-of-type(3) > div:last-of-type {
  justify-self: flex-end;
  display: grid;
}

  @media only screen and (max-width: 890px) {
    .logo_pat_content{grid-template-columns: 1fr;}
    .footer-content > div:nth-of-type(2) {

      padding-bottom: 50px;
  }
    .footer-content > div:nth-of-type(3) > div:last-of-type > img {

      justify-self: flex-end;
    }

.header-content > div:first-of-type {text-align: left; grid-column: 1 / 13;}
.header-content > div:nth-of-type(2) {text-align: left; grid-column: 1 / 13; margin-top: 20px;}
.header-content > div:nth-of-type(3) {text-align: left; grid-column: 1 / 6; margin-top: 50px;}
.header-content > div:last-of-type {text-align: left; grid-column: 1 / 13; margin-top: 50px;}

.que-content > div:first-of-type {text-align: left; grid-column: 1 / 6;}
.que-content > div:nth-of-type(2) {text-align: left; grid-column: 7 / 13;}

.pasado-content > div:first-of-type {text-align: left; grid-column: 1 / 6;}
.pasado-content > div:nth-of-type(2) {text-align: left; grid-column: 7 / 13;}

.obras-content {padding:75px 25px 0 25px; margin: 0 auto; display: grid; grid-auto-flow: column; column-gap: 50px; grid-column: 1 / 13;}
.proyectos-content {padding:75px 25px 100px 25px; margin: 0 auto; display: grid; grid-auto-flow: column; column-gap: 50px; grid-column: 1 / 13;}

.futuro-content > div:first-of-type {text-align: left; grid-column: 1 / 6;}
.futuro-content > div:nth-of-type(2) {text-align: left; grid-column: 7 / 13;}

.banner-content {padding:0 25px 0 25px; margin: 0 auto; display: grid; grid-template-columns: repeat(1,1fr); column-gap: 25px; background-image: url('../imagenes/banner.jpg'); min-height: 50vh; align-content: center; align-items: center; justify-items: center; background-repeat: no-repeat;}

.footer-content > div:first-of-type {text-align: left; grid-column: 1 / 13; }
.footer-content > div:nth-of-type(2) {text-align: left; grid-column: 1 / 13; margin-top: 40px; }
.footer-content > div:last-of-type {text-align: left; grid-column: 1 / 13; display: block; justify-content: flex-start; margin-top: 25px; }
.footer-content > div:last-of-type img {padding-left: 0px; padding-right: 20px; max-height: 25px;}

  .header-content > div:first-of-type {
    display: block;}
    .header-content > div:first-of-type > div:nth-of-type(2) {
      text-align: left;
      padding-top: 20px;
      padding-bottom: 20px;

  }  
  .header-content > div:last-of-type > div {
    grid-column: 1 / 13;
    padding: 25px 25px 50px 25px;
    align-self: flex-end;
    position: relative;
}
  .footer-content img {
    max-width: 100px;

  }
  .que-content > div:first-of-type {

    padding: 50px 25px 50px 25px;
}
.que-content > div:nth-of-type(2) {
  padding: 50px 25px 50px 25px;
}
.footer-content > div:last-of-type > div:first-of-type {margin-bottom: 25px;}
.past {padding: 0 25px 0 25px;}
.past-content {

  display: block;

}
.header-content {padding:50px 25px 0 25px;}
.past-content > div:first-of-type {

  border-left: none;
}
.past-content > div:first-of-type {

  padding: 0 0 25px 0;

}
.past-content h2 {

  border-bottom: 10px solid #ff3948;

  margin-bottom: 25px;
}
.past-content > div:nth-of-type(2) {

  padding: 0 0 25px 0;
}
.footer-content > div:first-of-type {

  padding-bottom: 0px;

}
.footer-content > div:nth-of-type(3) {

  padding-bottom: 0px;

}
}
  @media only screen and (max-width: 480px) {


    .header-content > div:nth-of-type(3) {text-align: left; grid-column: 1 / 13; margin-top: 50px;}
    .header-content > div:last-of-type {text-align: left; grid-column: 1 / 13; margin-top: 50px;}
    
    .que-content > div:first-of-type {text-align: left; grid-column: 1 / 13;}
    .que-content > div:nth-of-type(2) {text-align: left; grid-column: 1 / 13;}
    
    .pasado-content > div:first-of-type {text-align: left; grid-column: 1 / 13;}
    .pasado-content > div:nth-of-type(2) {text-align: left; grid-column: 1 / 13;}
    
    
    .futuro-content > div:first-of-type {text-align: left; grid-column: 1 / 13;}
    .futuro-content > div:nth-of-type(2) {text-align: left; grid-column: 1 / 13;}

    
  }