#csr {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden; }
  #csr * {
    box-sizing: border-box !important; }

#csr-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -15px; }

#csr-col-left {
  width: 100%;
  max-width: 100%;
  padding: 0 15px;
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0em;
  text-align: left;
  position: relative;
  margin-bottom: 20px; }
@media (min-width: 992px) {
  #csr-col-left {
    flex: 0 0 auto;
    width: 40%;
    margin-bottom: 0; } }

#csr-col-right {
  width: 100%;
  max-width: 100%;
  padding: 0 15px;
  position: relative; }
@media (min-width: 992px) {
  #csr-col-right {
    flex: 0 0 auto;
    width: 60%; } }

.csr-arrow {
  visibility: hidden;
  opacity: 0;
  cursor: pointer;
  display: none; }
@media (min-width: 768px) {
  .csr-arrow {
    display: block; } }
.csr-arrow circle {
  opacity: 0; }

#csr-headline {
  font-family: Roboto;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  margin-bottom: 1em; }

#csr-copy {
  margin-bottom: 1em; }

#csr-console > div {
  display: none; }
@media (min-width: 768px) {
  #csr-console > div {
    display: block; } }
#csr-console > div a {
  color: #000;
  text-decoration: none;
  font-weight: 400; }
  #csr-console > div a:hover, #csr-console > div a.csr-active {
    font-weight: 700; }
#csr-console select {
  display: block;
  width: 100%;
  font-size: 18px;
  padding: 6px; }
@media (min-width: 768px) {
  #csr-console select {
    display: none; } }

#csr-wrapper {
  margin: 0 auto; }

#csr-wheel {
  opacity: 0;
  visibility: hidden; }
  #csr-wheel text {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 21px;
    text-align: center;
    letter-spacing: -0.3px; }
  #csr-wheel .csr-text {
    opacity: 0;
    visibility: hidden; }
  #csr-wheel .csr-arc[data-csr-active="true"] {
    cursor: pointer; }

#csr-card-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s; }
  #csr-card-overlay.csr-card-overlay-show {
    opacity: 0.666;
    visibility: visible; }

#csr .csr-card {
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 66px 20px 20px;
  left: 0;
  top: 0;
  transform: translateY(-20px);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s; }
@media (min-width: 576px) {
  #csr .csr-card {
    position: absolute;
    height: auto;
    left: 50%;
    top: 50%;
    padding: 45px;
    transform: translate(-50%, -66%); } }
@media (min-width: 768px) {
  #csr .csr-card {
    padding: 90px; } }
@media (min-width: 992px) {
  #csr .csr-card {
    width: calc(100% - 200px); } }
#csr .csr-card.csr-card-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px); }
@media (min-width: 576px) {
  #csr .csr-card.csr-card-open {
    transform: translate(-50%, -50%); } }
#csr .csr-card.csr-card-1 {
  background: #E5243B; }
#csr .csr-card.csr-card-2 {
  background: #DDA63A; }
#csr .csr-card.csr-card-3 {
  background: #4C9F38; }
#csr .csr-card.csr-card-4 {
  background: #C5192D; }
#csr .csr-card.csr-card-5 {
  background: #FF3A21; }
#csr .csr-card.csr-card-6 {
  background: #26BDE2; }
#csr .csr-card.csr-card-7 {
  background: #FCC30B; }
#csr .csr-card.csr-card-8 {
  background: #A21942; }
#csr .csr-card.csr-card-9 {
  background: #FD6925; }
#csr .csr-card.csr-card-10 {
  background: #DD1367; }
#csr .csr-card.csr-card-11 {
  background: #FD9D24; }
#csr .csr-card.csr-card-12 {
  background: #BF8B2E; }
#csr .csr-card.csr-card-13 {
  background: #3F7E44; }
#csr .csr-card.csr-card-14 {
  background: #0A97D9; }
#csr .csr-card.csr-card-15 {
  background: #56C02B; }
#csr .csr-card.csr-card-16 {
  background: #00689D; }
#csr .csr-card.csr-card-17 {
  background: #19486A; }
#csr .csr-card .csr-card-close {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath fill='%23FFF' d='M7.9 6.5L12 2.3l.9-.9c.1-.1.1-.3 0-.4L12 .1c-.1-.1-.3-.1-.5 0l-5 5-5-5C1.3 0 1.1 0 1 .1L.1 1c-.1.1-.1.3 0 .5l5 5-5 5c-.1.2-.1.4 0 .5l.9.9c.1.1.3.1.5 0l5-5 4.2 4.2.9.9c.1.1.3.1.5 0l.9-.9c.1-.1.1-.3 0-.5L7.9 6.5z'/%3E%3C/svg%3E") center center / 100% no-repeat;
  opacity: 0.8;
  cursor: pointer; }
@media (min-width: 768px) {
  #csr .csr-card .csr-card-close {
    right: 48px;
    top: 48px; } }
#csr .csr-card .csr-card-close:hover {
  opacity: 1; }
#csr .csr-card .csr-card-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  align-items: center; }
#csr .csr-card .csr-card-col-left {
  width: 100%;
  max-width: 100%;
  padding: 0 15px;
  text-align: center;
  margin-bottom: 20px; }
@media (min-width: 576px) {
  #csr .csr-card .csr-card-col-left {
    margin-bottom: 0;
    width: 40%; } }
#csr .csr-card .csr-card-col-left img {
  max-width: 100%; }
#csr .csr-card .csr-card-col-right {
  width: 100%;
  max-width: 100%;
  padding: 0 15px; }
@media (min-width: 576px) {
  #csr .csr-card .csr-card-col-right {
    width: 60%; } }
#csr .csr-card .csr-card-head {
  font-family: Roboto;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: 0;
  text-align: left;
  margin-bottom: 0.8em; }
#csr .csr-card .csr-card-copy {
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left; }