@charset "utf-8";
/* CSS Document */

#menuContainer {
	left:0;
	top:0;
	overflow:hidden;
	background:url(glossary/b_menu.gif) repeat-x;
    margin-bottom: 5px;
	
}
#menu {padding:0; margin: 0px; list-style:none; float:left; height:40px; position:relative; left:50%;}
#menu li {float:left; position:relative; right:50%; margin:0 2px;}

#menu li a {display:block; height:40px; line-height:40px; padding:0 3px 0 0; float:left; color:#fff; text-decoration:none;}

#menu li a b {display:block; height:40px; float:left; padding:0 0 0 3px; cursor:pointer;}
#menu li a:hover {background:url(glossary/b_hov.jpg) no-repeat right top; line-height:36px;}

.challenge {
    left: 5px;
    width: 80%;
    border: 2px solid #98BA2F;
    background-color: #d9d9d9;
    padding-left: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}


:root {
  --clr-primary: #d50000;
  --clr-primary-hover: #29e6a7;
  --clr-primary-dark: #039d69;
  --clr-gray100: #f0f7f8;
  --clr-gray200: #cfd8dc;
  --clr-gray300: #a7b7be;
  --clr-gray400: #6b7e86;
  --clr-gray500: #425a65;
  /* radius */
  --radius: 0.2rem;
}


@media (max-width: 1100px){
  #advert277{
  display: none;
  }
}    

#splashfront {
  font-family: Oxygen, sans-serif;
  margin: 2rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(12rem, 16rem))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(12rem, 16rem));
  grid-gap: 2rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.card {
  overflow: hidden;
  -webkit-box-shadow: 0px 2px 20px var(--clr-gray200);
          box-shadow: 0px 2px 20px var(--clr-gray200);
  border-radius: var(--radius);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  cursor: pointer;

}

.card h3 {
  padding: 5px 1rem;
  text-align: center;
}

.card p {
   padding-left: 1rem;
}

.card h2 {
  padding: 0 1rem;
  text-align: center;
  color: red;
}

.card:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}