html, body {
    height: 100%;
}

body {
    font-family: "Roboto", sans-serif;
    margin: 0;
    
    width: 100%;
    header {
    max-width: 80rem;
    margin: auto;
    }
    .container {
        position: relative;
        padding: 0.5rem;

        min-height: 100%;
        box-sizing: border-box;
    }
}

header {
    .title-line {
        display: flex;
        flex-direction: row;
    
        img {
            display: block;
            max-width: 7rem;
            width: auto;
            height: auto;
        }
    
        h1 {
            color: #3E3E3E;
            margin: auto 1rem;
            font-size: 1.6rem;
            margin-top: 0.4;
            text-transform: uppercase;
        }
        .subtitle {

        }
    }
}

@media only screen and (max-width: 30rem) {
    header {
        .title-line {
            img {
               
                max-width: 5rem;
            }
            h1 {
                font-size: 1.2rem;
            }
        
        }
    }   
}

.subtitle {
    text-align: right;
    color: grey;
}
.grid {
    max-width: 80rem;
    margin: auto;
      display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

      gap: 1rem;
    .cell {
        min-height: 12rem;
    }
      .card {
        &.victory {
            background-color: #EFEFEF;
            .card-content::before {
                content: '✌️';
                position: absolute;
                font-size: 6rem;
            }
        }
        height: 100%;
          position: relative;
          box-sizing: border-box;
          .open-modal {

          }
    
      div {
        justify-content: center;
          text-align: center;
      }
  
      .card-content {
          display: flex;
          height: 100%;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;			  		
      
        .logo-container {
            max-height: 85%;
            img {
                max-width: 80%;
                width: auto;

                  margin: auto;
                  height: 100%;
              }
        }
      }

      padding: 1rem;
      border-radius: 0.4rem;
      box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
          rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
          rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
          rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
          rgba(14, 63, 126, 0.04) 0px 12px 12px -6px,
          rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
      
      }
}

section {
    padding: 1rem;
    max-width: 80rem;
    margin: auto;
    margin-bottom: 1.5rem;
    border-radius: 0.4rem;

    &.marques {

        box-shadow: rgba(219,1,1,0.2) 0px 0px 0px 1px,
        rgba(219,1,1,0.2) 0px 1px 1px -0.5px,
        rgba(219,1, 1, 0.2) 0px 3px 3px -1.5px,
        rgba(219, 1, 1, 0.2) 0px 6px 6px -3px;
    }

    &.complices {
        box-shadow: rgba(14, 63, 126, 0.2) 0px 0px 0px 1px,
        rgba(42, 51, 69, 0.2) 0px 1px 1px -0.5px,
        rgba(42, 51, 70, 0.2) 0px 3px 3px -1.5px,
        rgba(42, 51, 70, 0.2) 0px 6px 6px -3px;
    }

    &.divest {
        box-shadow: rgb(12,107,0,0.2) 0px 0px 0px 1px,
        rgb(12,107,0,0.2) 0px 1px 1px -0.5px,
        rgb(12,107,0,0.2) 0px 3px 3px -1.5px,
        rgb(12,107,0,0.2) 0px 6px 6px -3px;
    }
}

@media only screen and (max-width: 80rem) {
    section {
        max-width: 85%;
    }
}

h2 {
    max-width: 80rem;
    margin: auto;
    margin-top: .2rem;
    margin-bottom: 2rem;
    font-size: 1.4rem;
    text-transform: uppercase;
}

.marques {
    h2 {
        color: #cc182b;
    }
}

.divest {
    h2 {
        color:#00793f
    }
}

.js-modal-trigger {
    cursor: pointer;
}

.modal {
    display: none;
    &.is-active {
        display: flex;
        justify-content: center;
    }
}

.modal-background {
    background-color: rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

.modal-content {
    position: fixed;
    max-width: 50rem;
    top: 20%;
    left: auto;
    margin: auto 1rem;
    background-color: white;
    border-radius: 0.2rem;
    padding: 1rem;
    animation: fade 0.2s ease-in-out
}

@keyframes fade {
    0%   { top: 18%; opacity: 0; }
    100% { opacity: 1; }
}
.open-modal {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    /*background-color: #fc6d00;*/
    font-family: 'courier new',monospace;
    color: white;
    cursor: pointer;
    border: none;
    padding: 0.2rem;
    border-radius: 1.2rem;
    min-width: 1.7rem;
}

footer {
    margin-top: 1rem;
    height: 2rem;
    width: 95%;
    ul {
        margin: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        width: 100%;
        padding: 0;
        li {
            list-style-type: none;
        }
    }
}