h1 {font-size: 12px; margin: 0; font-weight: 400;}
h1 + h2 {font-size: 10vw;}

h1 + h2 + span {
  font-weight: 700;
  background-color: rgba(0 0 0 / .5);
  padding:8px var(--sm);
  color:#fff;
  font-size:12px;
  margin-top: 5px;
  display: inline-block;
}

section[role="banner"] h1,
section[role="banner"] h2 {
  z-index: 2;
  position: relative;
  line-height: 1;
  width: max(300px,30vw);
  color:#fff;
  filter: drop-shadow(3px 3px 3px rgba(0 0 0 / .4));
}

section[role="banner"] > div {
  background: rgb(0,134,203);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(36,112,180,1)), to(rgba(120,180,220,1)));
  background: -o-linear-gradient(top, rgba(36,112,180,1) 50%, rgba(120,180,220,1) 100%);
  background: linear-gradient(180deg, rgba(36,112,180,1) 50%, rgba(120,180,220,1) 100%);
  position: relative;
  min-height: 60vh;
}

img[src*="clouds"] {display: none}
img[src*="totem"] {width: min(70vw,366px);}

.banners {padding: 0;}

.banners > :nth-child(1) {
  background-color: #fff;
}
.banners > :nth-child(1) img {
  object-fit: cover;
}

.banners > :nth-child(1) a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--red);
  padding: 8px;
}

.banners > :nth-child(1) a span {
  display: block;
  background-position: center center;
  padding:0;
  color:#fff;
  margin:4px 8px;
}

.banners h2 {
  font-size: 14px;
  color: var(--red);
  margin-bottom: 0;
}

.banners h3 {
border:none;
padding-left: 0;
color:var(--blue-2);
font-size: calc(var(--fs) + .8vw);
  margin-bottom: 0;
    line-height: 1.4
}

.banners h3 + p {
  margin-bottom: var(--sm);
  font-size: var(--fs);
  line-height: 1.4
}


[class*="banner-"] a > div {
    padding:var(--ss) var(--sp)
}

[class*="banner-"] a span {
  color:#fff;
  display: block;
  font-size: var(--fs);
  margin: 0;
  line-height: 1.5
}

[class*="banner-"] a span + span {
  font-size: calc(var(--fs) + .8vw);
  font-weight: 700;
    line-height: 1
}


[class*="-red"] a {background-color: var(--red);}
[class*="-blue"] a  {background-color: var(--blue);}
[class*="-blue-2"] a {background-color: var(--blue-2);}




@media (max-width:1280px) {
  section[role="banner"] > div {
    display: grid;
    grid-template-rows:1.5fr 1fr;
    justify-items: center;
    height: max(50vw, 75vh);
  }
  section[role="banner"] > div > div {
    display: grid;
    place-content:center;
    align-self: end;
  }

  h2 br{display: none;}

  .banners {
    width:min(720px,95vw);
  }
  .banners > div {
    margin: calc(var(--sp) + 5vw) 3vw;
    box-shadow: 3px 3px 8px rgba(0 0 0 / .4);
  }

  .banners > :nth-child(1) div {
    padding: 10vw
  }

  [class*="banner-"] a {
    display: flex;
    flex-flow: column;
  }

  [class*="banner-"] a div {
    padding: 10vw;
  }

  .banners > div:not(:nth-child(1)) a {
    display: grid;
    align-items: center;
    grid-template-areas:
    "tp"
    "bt";
  }
  .banners > :nth-child(2) a div {
    grid-area: bt;
  }

  .banners > :nth-child(3) a div {
    grid-area: bt;
  }
}
@media (min-width:1281px) {
  section[role="banner"] > div {
    display: grid;
    place-content:center;
    overflow: hidden;
  }
  h1::before {content: "Bienvenidos a "}
  html[lang="en"] h1::before {content: "Welcome to "}
  h1 + h2 {font-size: calc(var(--fs) * 3);}

  section[role="banner"] a:hover h1 + h2 + span {
    background-color: var(--red);
    transition: background-color 400ms;
  }
  .banners {
   color: #444;
   max-width: var(--mw);
   margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "news banner1"
    "news banner1"
    "news banner2"
    "news banner2";
    gap:var(--gap);
  }


  .banners > :nth-child(1) {
     grid-area: news;
      background-color: #fff;
      border-bottom: solid var(--ss) var(--blue);
  }

  .banners > :nth-child(1) div {
    padding: var(--sm) var(--sp) var(--ss) ;
  }

  .banners > :nth-child(2) {
    grid-area: banner1;
  }
  .banners > :nth-child(3) {
    grid-area: banner2;
  }

  .banners > div:not(:nth-child(1)) a {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    grid-template-areas:"foto info";
  }

  .banners > :nth-child(3) a div {
      grid-area: foto;
  }

  .banners > div:not(:nth-child(1)) a > div {
      transform: translateY(-5%);
  }



  img[src*="clouds"] {
    display: inherit;
    position: absolute;
    left:60%;
    z-index: 0;
    opacity: 0;
    animation: viento 120s forwards infinite;
  }

  img[src*="clouds"] {
    position: absolute;
    left:60%;
    z-index: 0;
    opacity: 0;
    animation: viento 120s forwards infinite;
  }

  img[src*="clouds"]:nth-child(2) {
    left:-30%;
    top:20%;
  }

  img[src*="clouds"]:nth-child(3) {
    left:110%;
    animation-delay: 10s;
    top:5%;
  }

  img[src*="totem"] {
    position: absolute;
    right:10%;
    bottom:0;
  }

  [class*="banner-"]:hover a {background-color: var(--dark);}
}


  @-webkit-keyframes viento {
      3%{opacity: 1}
      99% {opacity: .7}
      100% {left:-50%;opacity: 0; top:0;}
  }

  @keyframes viento {
      3%{opacity: 1}
      99% {opacity: .7}
      100% {left:-50%;opacity: 0; top:0;}
  }

  @-webkit-keyframes totem {
      0%{right:10%}
      100% {right:5%;}
  }

  @keyframes totem {
      0%{right:10%}
      100% {right:5%;}
  }


  [class*="banner-"] img {
  }

/*
[class*="-row"] a,
[class*="-row"] {
  max-width: 100%;
  width: 100%;
}
*/