.cont {
    height: 140px;
    background: url("{{ url_for('serve_minio_file_blueprint.serve_file', filename='img/bg-sec-final.svg') }}")bottom left no-repeat,      linear-gradient(to left, #56BFC9, #24A637 65%);
    background-size: 35% auto, 100% 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
#control-panel.desactive {
  display: none !important;
}
#button-mobile-menu.desactive {
  display: none !important;
}
.img-fluid {
  max-width: 100%;
  /* height: 100px; */
  padding: 20px;
}
#image-ce{
  height: 700px;
  aspect-ratio: 805 / 1183;
  max-width: 476.33px;
}
#image-ne{
  height: 700px;
  aspect-ratio: 839 / 1183;
  max-width: 496.45px;
}
#image-br{
  height: 700px;
  aspect-ratio: 1026 / 1183;
  max-width: 607.10px;
}
.logo{
  margin-top: 40px;
  height: 60px;
  /* padding: 20px; */
  width: 395px;
}
.desktop{
      display: flex;
}

.mobile{
      display: none;
}

.tablet{
      display: none;
}

footer{
  margin-top: 5%;
}

.hamburger-button{
    display: none;
}

#container-content{
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 1128px){
  #control-panel.desactive {
    display: none !important;
  }
  #button-mobile-menu.desactive {
    display: none !important;
  }
    .cont{
      height: 60px;
    }
    .desktop{
      display: none;
    }
    .mobile{
      display: none;
    }
    .tablet{
      display: flex;
    }
    .logo
    {
        height: 45px;
        width: 100%;
        /* max-width: 400px; */
        margin-top: 2%;
    }
  .container .satelite .background-images{
    height: 60vh;
  }
  #image-ce{
  aspect-ratio: 805 / 1183;
    height: 499px;
    max-width: 339.5562px;
  }
  #image-ne{
  aspect-ratio: 839 / 1183;
    height: 499px;
    max-width: 353.8977px;
  }
  #image-br{
  aspect-ratio: 1026 / 1183;
    max-width: 432.7759px;
    height: 499px;
  }
  #container-content{
    width: 100%;
    min-height: 520px
}
  .control{
    background-color: #ffffff;
  }
  footer{
    margin-top: 10%;
  }
  .content{
    max-width: 100%;
  }
  .hamburger-button{
      display: none;
  }
}
@media only screen and (max-width: 991px){
  #control-panel{
    min-width: 40%;
  }
  #container-images{
    min-width: 50%;
  }
  #control-panel.desactive {
    display: none !important;
  }
  #button-mobile-menu.desactive {
    display: none !important;
  }
  .cont{
    height: 60px;
  }
  .desktop{
    display: none;
  }
  .mobile{
    display: none;
  }
  .tablet{
    display: flex;
  }
  .logo
  {
      height: 45px;
      width: 100%;
      /* max-width: 400px; */
      margin-top: 2%;
  }
  .container .satelite .background-images{
    height: 60vh;
    width: 100%;
    padding: 0%;
  }
  .content{
    max-width: 80%;
  }
  #image-ce{
    aspect-ratio: 805 / 1183;
    height: auto;
    width: 90%;
  }
  #image-ne{
    aspect-ratio: 839 / 1183;
    height: auto;
    width: 90%;
  }
  #image-br{
    aspect-ratio: 1026 / 1183;
    height: auto;
    width: 90%;
  }
  .data-cadastro{
      right: 0;
      font-size: 10px;
    }
  .control{
    background-color: #ffffff;
  }
  footer{
    margin-top: 10%;
  }
  .hamburger-button{
      display: none;
  }
}

@media only screen and (max-width: 768px){
  .btn-group .btn {
      padding: 0.25rem 0.5rem;
      font-size: 0.8rem;
    }
  #control-panel{
      display: none !important;
  }
  #button-mobile-menu.desactive {
    display: none !important;
  }
  #close-control.desactive {
    display: none !important;
  }
  #close-control.active{
    right: 20px;
    position: absolute;
    display: flex;
  }
  #close-control{
    right: 20px;
    position: absolute;
    display: flex;
  }
  #control-panel.active {
      display: flex !important;
      z-index: 10 !important;
      position: fixed;
      background-color: #fff;
      margin-left: 15vw !important;
    }
  #control-panel.desactive {
    display: none !important;
  }
  #container-images {
      margin-left: auto;
      min-width: 60vw;
  }
  .hamburger-button{
      width: 25px;
      height: 25px;
      border: solid #c7c9d7 2px;
      margin-left: 5px;
      margin-top: 5px;
      padding: 4px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: none;
      border-radius: 2px;
  }
  .hamburger-button span {
      display: block;
      height: 2px;
      background-color: black;
      border-radius: 2px;
    }
  .hamburger-button.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
  }

  .hamburger-button.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-button.active span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
  }
  #button-mobile-menu{
      z-index: 100;
  }
}

@media only screen and (max-width: 620px){
  #control-panel{
      display: none !important;
  }
  #control-panel.desactive {
    display: none !important;
  }
  #button-mobile-menu.desactive {
    display: none !important;
  }
  #close-control.desactive {
    display: none !important;
  }
  #close-control.active{
    right: 20px;
    position: absolute;
    display: flex;
  }
  #close-control{
    right: 20px;
    position: absolute;
    display: flex;
  }
  #control-panel.active {
      display: flex !important;
      z-index: 10 !important;
      position: fixed;
      background-color: #fff;
      margin-left: 15vw !important;
      width: 100% !important;
      /* max-height: 55vh !important; */
    }
  }

@media only screen and (max-width: 580px)
{
    #control-panel{
        display: none !important;
    }
    #control-panel.desactive {
      display: none !important;
    }
    #button-mobile-menu.desactive {
      display: none !important;
    }
    #control-panel.active {
      display: flex !important;
      z-index: 10 !important;
      position: fixed;
      background-color: #fff;
      margin-left: 20vw !important;
      max-height: 65vh !important;
      min-width: 70vw;
    }
    #close-control.desactive {
      display: none !important;
    }
    #close-control.active{
      right: 20px;
      position: absolute;
      display: flex;
    }
    #close-control{
      right: 20px;
      position: absolute;
      display: flex;
    }
    .cont{
      height: 50px;
    }
    .container .satelite .background-images{
      height: 50vh;
      min-width: 100%;
    }
    #image{
      aspect-ratio: 9 / 14;
      height: auto;
    }
    .desktop{
      display: none;
    }
    .mobile{
      display: flex;
    }
    .tablet{
      display: none;
    }
    .background-images{
        height: 100%;
    }
    .logo
    {
        height: auto;
        padding: 20px;
        width: 100%;
        margin-top: -3%;
    }
    #logo-mobile{
      width: 100%;
    }
    .data-cadastro{
      right: 0;
      font-size: 8px;
    }
    .controls{
      margin-left: 10%;
    }
    footer{
    margin-top: 20%;
  }
  #container-images {
      margin-left: auto;
      min-width: 60vw;
  }
  .btn-group .btn {
      padding: 0.2rem 0.4rem;
      font-size: 0.7rem;
    }
}