@font-face {
    font-family: "Gotham-Book";
    font-style: normal;
    font-weight: 400;
    src: url(fonts/GothamBook.ttf) format("truetype");
  }
  @font-face {
    font-family: "Gotham Black-Regular";
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Gotham-Black.otf) format("opentype");
  }
.main{
    align-items: flex-start;
    display: flex;
    height: 161px;
    width: 100%;
}

.overlap-group{
    height: 157px;
    position: relative;
    width: 100%;
}
.main .group-2{
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    min-height: 116px;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
}
.main .rectangle-1{
    background-color: #53575A;
    height: 40px;
    width: 100%;
}

.main .rectangle-2{
    background-color: #3DAE2B;
    height: 76px;
    width: 100%;
}
.main .group-1{
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    min-height: 116px;
    width: 185px;
    top: 50px;
    position: relative;
    left:0%;
  
}



/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  .main .group-1{
    left:76%;
  }  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  .main .group-1{
    left:66%;
  }  

  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  .main .group-1{
    left:66%;
  }  
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  .main .group-1{
    left:66%;
  }  
  
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  .main .group-1{
    left:66%;
  }  
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
  .main .group-1{
    left:66%;
  }  
  
}

.main  .title{
    letter-spacing: 0;
    margin-right: 4px;
    min-height: 24px;
    text-align: left;
    width: 216px;
    color: white;
    font-family: "Gotham-Book";
    font-size: 18px
    }
    

.main  .subtitle{
letter-spacing: 0;
margin-right: 4px;
min-height: 28px;
text-align: left;
width: 216px;
color: white;
font-family: "Gotham Black-Regular";
font-size: 18px
}

.main .isotipo{
    height: 146px;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 11px;
    width: 148px;
    content: url("img/isotipo.png");
}

.main .group-3 {
    align-items: flex-start;
    display: flex;
    height: 49px;
    left: 142px;
    min-width: 249px;
    position: absolute;
    top: 45px;
  }
  
  .main .logo {
    align-self: flex-end;
    height: 46px;
    width: 206px;
    content:url("img/logo.png");
  }
  
  .main .text-1 {
    letter-spacing: 0;
    margin-left: 10px;
    margin-top: 7px;
    min-height: 28px;
    width: 31px;
    color: white;
    font-size: 40px;
    font-family: "Gotham Black-Regular";
  }
  

  .screen a {
    display: contents;
    text-decoration: none;
  }
  
  .container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    pointer-events: none;
    width: 100%;
  }
  
  .container > * {
    flex-shrink: 0;
    pointer-events: auto;
  }
  
  .hidden,
  .hidden * {
    pointer-events: none;
    visibility: hidden;
  }