@font-face {
  font-family: "Mattel-Light";
  src: url("../font/mattel/MattelFounders-Light.woff2") format('woff2');
  font-weight: normal;

  font-family: "Mattel-Medium";
  src: url("../font/mattel/MattelFounders-Medium.woff2") format('woff2');
  font-weight: normal;
}

body {
  background: rgb(241, 241, 241);
  font-family: 'Mattel-Light', Arial, Helvetica, sans-serif;
}

.mattel-red {
  color: #E33824;
}

.mattel-dark {
  color: #565656;
}

/* Custom Styles */

.bg-mattel {
  background: #5C4388;
  background: linear-gradient(45deg, #5C4388, #A178EB 100%)
}

.bg-kid {
  background: url('./../img/bg-header.jpg') no-repeat center 34%;
  background-size: cover;
  opacity: .255;
}

.header-holder {
  background: #5C4388;
  background: linear-gradient(45deg, #5C4388, #A178EB 100%)
}

.header-holder .header-content {
  padding: 6rem 1rem 9rem;
}

.body-holder {
  background: white;
  margin-top: -3rem;
  padding: 4rem;
}

.body-holder .body-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mattel-font-l {
  font-family: 'Mattel-Light', Arial, Helvetica, sans-serif;
}

.mattel-font-m {
  font-family: 'Mattel-Medium', Arial, Helvetica, sans-serif;
}

.btn {
  font-family: 'Mattel-Medium', Arial, Helvetica, sans-serif !important;
  border-radius: .455rem;
}

.logo-mattel {
  width: 100%;
  max-width: 120px;
}

@media screen and (max-width: 768px) {
  .logo-mattel {
    width: 100%;
    max-width: 70px;
  }

  .body-holder {
    padding: 1rem;
  }
}

.card {
  border-radius: 1rem !important;

}

.card-header:first-child {
  border: 0;
  border-radius: 0;
  background: unset;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 0;
  background: unset;
}

.card-header[aria-expanded="true"] .mattel-icon {
  color: #E33824;
  transform: rotate(180deg);
  transition: .277s cubic-bezier(0.55, 0.06, 0.04, 0.94);
}

.card-header[aria-expanded="false"] .mattel-icon {
  transform: rotate(0deg);
  transition: .355s cubic-bezier(0.55, 0.06, 0.04, 0.94);
}

.card-header span {
  font-size: 1.6rem;
}

.card-body {
  color: #a5a5a5;
}

p {
  font-size: 1rem !important;
}

.bold {
  font-weight: bold;
}