@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");

@media screen {

  .card-grid__area.card-grid__image.grid-layout__area .avvio-image .avvio-image__image {
    aspect-ratio: auto!important;
  }

  #login_container_not_logged_in,
  #login_container_logged_in {
    display: none !important;
  }
  
  .header a i,
  .footer a i {
    margin-right: 0px;
  }
  
  .main-be-area {
    background-color: #F0F8FC;
  }
  
  .header {
    background: #FFFFFF;
    
    width: 100%;
    height: auto;
    padding-block: 10px;
    padding-inline: 56px;
  }
  
  .header .container {
    display: flex;
    
    background-color: #FFFFFF;
    box-shadow: 2px 2px 10px 0px #F1F1F1;
    
    width: 100%;
    padding: 15px;
    border-radius: 57px;
  }
  
  .header .invisible-flex-item {
    display: block;
    
    width: 279.06px;
    height: 100%;
  }
  
  .header .logo img {
    display: block;
    
    height: 50px;
    width: auto;
  }
  
  .header .backtosite a {
    display: flex;
    justify-content: center;
    align-items: center;
    
    color: var(--brand-color);
    background: #F0F8FC;
    
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    
    height: 100%;
    min-width: 175px;
    padding-block: 10px;
    padding-inline: 75px;
    border-radius: 50px;
    
    transition: all 0.5s ease;
  }
  
  .header .backtosite:hover a {
    color: #FFFFFF;
    background-color: var(--brand-color);
  }
  
  .header .backtosite:active a {
    position: relative;
    top: 1px;
  }
  
  .footer {
    background: #F0F8FC;
    color: #656565;
    
    font-family: "Quicksand", "Trebuchet MS", trebuchet, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 32px;
    text-align: center;
    
    width: 100%;
    padding-top: 40px;
    padding-bottom: 100px;
  }
  
  .footer .container {
    display: flex;
    align-items: center;
    
    max-width: 1140px;
    width: 100%;
    padding-inline: 15px;
    margin-inline: auto;
    gap: 40px;
  }
  
  .footer .footer-logo img {
    display: block;
    
    
    height: 60px;
    width: auto;
  }
  
  .footer .contact {
    font-weight: 700;
    text-align: center;
  }
  
  .footer .contact a {
    font-weight: 500;
    
    transition: all 0.8s ease;
  }
  
  .footer .contact a:hover {
    color: #0F78A3;
  }
  
  .footer .socials {
    display: flex;
    
    padding: 20px;
    gap: 40px;
  }
  
  .footer .socials a i {
    color: var(--brand-color);
    
    font-size: 32px;
    line-height: 32px;
    
    transition: all 0.8s ease-in-out;
  }
  
  .footer .socials a:hover i {
    color: #6EB9D8;
  }
  
  .footer .socials a img {
    display: block;
    
    width: 40px;
    height: auto;
    margin-top: 4px;
    
    filter: invert(64%) sepia(94%) saturate(495%) hue-rotate(153deg) brightness(89%) contrast(95%);
    
    transition: all 0.8s ease-in-out;
  }
  
  .footer .socials a:hover img {
    filter: invert(25%) sepia(16%) saturate(1145%) hue-rotate(158deg) brightness(91%) contrast(85%);
  }
  
}


@media screen and ( max-width: 1024px ) {
  .panel-footer {
    background-color: #FFF;
    z-index: 10;
  }

}

@media screen and ( max-width: 999px ) {
  
  .header .container {
    padding-left: 25px;
  }
  
  .header .invisible-flex-item {
    display: none;
  }
  
}


@media screen and ( max-width: 749px ) {
  
  .header {
    padding-inline: 20px;
  }
  
  .header .invisible-flex-item {
    display: none;
  }
  
  .header .backtosite a {
    padding-inline: 35px;
  }
  
}



@media screen and ( max-width: 499px ) {
  
  .header .container {
    justify-content: center;
    
    padding-right: 25px;
  }
  
  .header .backtosite {
    display: none;
  }

  .footer .socials {
    justify-content: center;
    width: 100%;
    gap: 20px;
    flex-wrap: wrap;
  }
  
}

@media screen and ( max-width: 400px ) {

  #section_mainpage .page-layout .panel-footer .flex.flex-1 {
    flex-direction: column;
  }

  .footer {
    padding-bottom: 200px;
  }

}