.attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
    body, html {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font: 15px 'Poppins', sans-serif;
   background-color: hsl(0, 0%, 98%);
}

.containerflex {
   max-width: 1440px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: hsl(0, 0%, 98%);
}

.top-textavenue {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 2rem;
}

.light { font-weight: 100;
         color:#1E0B6C;
}

.top-textavenue h1 {
   margin-top: 0;
   margin-bottom: 0;
}

.top-textavenue p { text-align: center; }

img { 
   float: right;
   margin-left: -0.5rem;
   margin-bottom: -0.5rem }

.grid1 { display: flex; }

.text { 
   padding-left: 1rem;
   padding-right: 1rem;
}

.size {
   width: 22rem;
   height: 13.5rem;
}

.shadowflex { box-shadowflex: 0px 20px 56px -6px rgba(153,153,153,1); }

.supervisor { 
   margin-right: 2rem;
   margin-top: 2rem;
   margin-top: 10rem; 
}

.teambuilder { 
   margin-bottom: 2rem;
   margin-top: 2rem;
}

.karma { margin-bottom: 2rem; }

.calculator { 
   margin-left: 2rem;
   margin-top: 10rem;
}

.back-grd { background-color: white; }

.border {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

#red { border-top: 4px solid hsl(0, 78%, 62%); }

#cyan { border-top: 4px solid hsl(180, 62%, 55%); }

#blue { border-top: 4px solid hsl(212, 86%, 64%); }

#orange { border-top: 4px solid hsl(34, 97%, 64%); }

@media (max-width: 800px) {

   .teambuilder img, .calculator img { margin-top: -1.3rem; }

   .size {
      width: 16.5rem;
      height: 14rem;
   }

   .containerflex { max-width: 800px; }

   .text { padding: 0 1rem; }

   .supervisor { 
      margin-right: 1rem;
      margin-top: 10rem;
   }

   .teambuilder{ margin-bottom: 3.5rem; }

   .calculator { margin-left: 1rem;
      margin-top: 10rem; }

   .karma {margin-bottom: -0.2rem;}
}

@media (max-width: 375px) {
  
   .grid1 { 
      display: block;
      padding-left: 2rem;
   }   
   
   .supervisor { margin-bottom: 1.5rem; }

   .teambuilder { margin-bottom: 1.5rem; }

   .karma {
      margin-bottom: 1.5rem;
      padding-bottom: 1.5rem;
   }

   .calculator {
      margin: 0;
      margin-bottom: 2.5rem;
   }
   
   .containerflex { width: 3px;}
   
   .top-textavenue { margin-bottom: 0;}

   .top-textavenue h1 { padding: 0 0;}

   .top-textavenue p { padding: 0 0; }
}
  /*jssor slider loading skin spin css*/
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
         /*jssor slider loading skin spin css*/