html,
body,
div,
span,
a {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

*:focus {
  outline: none;
}

body {
  overflow: hidden;
  line-height: 1;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility !important;
}

.font-block,
.font-block .big,
.font-block .small {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.font-block .big,
.font-block .small {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in, visibility 0s ease-in 0.5s;
  -webkit-transition: opacity 0.5s ease-in, visibility 0s ease-in 0.5s;
}

.font-block[data-active='big'] .big,
.font-block[data-active='small'] .small {
  z-index: 2;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s ease-in, visibility 0s;
  -webkit-transition: opacity 0.5s ease-in, visibility 0s;
}

.main-card {
  position: relative;
  float: left;
  margin: 0 12px 12px 0;
  cursor: pointer;
  background-color: #222021;
  width: 304px;
  height: 400px;
}
.main-card:hover {
  opacity: 0.9;
}
.is-touch .main-card:hover {
  opacity: 1;
}

.main-card .caption {
  position: absolute;
  left: 15px;
  top: 12px;
  white-space: nowrap;
  font-family: 'Rm Graphik', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.main-card .counters {
  position: absolute;
  right: 17px;
  top: 12px;
  white-space: nowrap;
  font-family: 'Rm Graphik', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  text-align: right;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.02em;
}

.main-card .text {
  position: absolute;
  bottom: 17px;
  left: 13px;
  width: 246px;
  font-family: 'nljb', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
  color: #fff;
  letter-spacing: 0.01em;
}

.main-card .text .first-line {
  color: #ff4828;
}

.letters-card {
  position: relative;
  float: left;
  margin: 0 12px 12px 0;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}
.letters-card.one-image {
  cursor: default;
}

.letters-card .switchers {
  position: absolute;
  right: 16px;
  top: 12px;
  z-index: 3;
  white-space: nowrap;
  font-size: 0;
}

.letters-card .switchers .switcher {
  display: inline;
  cursor: pointer;
  margin-left: 16px;
  font-family: 'Rm Graphik', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  text-align: right;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 0.02em;
}

.letters-card .switchers .switcher:hover {
  color: #000;
}

.letters-card[data-active='1'] .switchers .switcher.switcher-1 {
  cursor: default;
  color: #000;
}

.letters-card[data-active='2'] .switchers .switcher.switcher-2 {
  cursor: default;
  color: #000;
}

.letters-card[data-active='3'] .switchers .switcher.switcher-3 {
  cursor: default;
  color: #000;
}

.letters-card[data-active='4'] .switchers .switcher.switcher-4 {
  cursor: default;
  color: #000;
}

.letters-card[data-active='5'] .switchers .switcher.switcher-5 {
  cursor: default;
  color: #000;
}

.letters-card .counters {
  position: absolute;
  right: 19px;
  top: 12px;
  white-space: nowrap;
  font-family: 'Rm Graphik', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  text-align: right;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 0.02em;
}

.letters-card[data-active='1'] .counters:before {
  content: '1';
}

.letters-card[data-active='2'] .counters:before {
  content: '2';
}

.letters-card[data-active='3'] .counters:before {
  content: '3';
}

.letters-card[data-active='4'] .counters:before {
  content: '4';
}

.letters-card[data-active='5'] .counters:before {
  content: '5';
}

.letters-card .imgs,
.letters-card .previous-image {
  position: relative;
  width: 100%;
  height: 100%;
  background-position: 0 0;
}
.letters-card:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease-in, visibility 0s ease-in 0.1s;
  -webkit-transition: opacity 0.1s ease-in, visibility 0s ease-in 0.1s;
  z-index: 2;
}
.letters-card:hover:after {
  opacity: 0.05;
  visibility: visible;
  transition: opacity 0.1s ease-in, visibility 0s;
  -webkit-transition: opacity 0.1s ease-in, visibility 0s;
}
.letters-card.one-image:hover:after,
.is-touch .letters-card:hover:after {
  opacity: 0;
  visibility: hidden;
}
.is-touch .letters-card,
.is-touch .main-card,
.is-touch .imgs {
  -webkit-tap-highlight-color: transparent;
}
.letters-card .previous-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  -webkit-animation: 0.2s ease-in 0s crossfade;
  -moz-animation: 0.2s ease-in 0s crossfade;
  animation: 0.2s ease-in 0s crossfade;
}

.letters-card.one-image .imgs {
  cursor: default;
}

.letters-card#benton_big_0 {
  width: 304px;
  height: 400px;
}

.letters-card#benton_big_0 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Big-0.png');
}

.letters-card[data-active='2']#benton_big_0 .imgs {
  background-position: -304px 0;
}

.letters-card#benton_big_1 {
  width: 304px;
  height: 400px;
}

.letters-card#benton_big_1 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Big-1.png');
}

.letters-card[data-active='2']#benton_big_1 .imgs {
  background-position: -304px 0;
}

.letters-card#benton_big_2 {
  width: 304px;
  height: 400px;
}

.letters-card#benton_big_2 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Big-2.png');
}

.letters-card[data-active='2']#benton_big_2 .imgs {
  background-position: -304px 0;
}

.letters-card#benton_big_3 {
  width: 304px;
  height: 400px;
}

.letters-card#benton_big_3 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Big-3.png');
}

.letters-card#benton_big_4 {
  width: 304px;
  height: 400px;
}

.letters-card#benton_big_4 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Big-4.png');
}

.letters-card[data-active='2']#benton_big_4 .imgs {
  background-position: -304px 0;
}

.letters-card#benton_small_0 {
  width: 304px;
  height: 400px;
}

.letters-card#benton_small_0 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Small-0.png');
}

.letters-card#benton_small_1 {
  width: 304px;
  height: 400px;
}

.letters-card#benton_small_1 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Small-1.png');
}

.letters-card[data-active='2']#benton_small_1 .imgs {
  background-position: -304px 0;
}

.letters-card#benton_small_2 {
  width: 304px;
  height: 400px;
}

.letters-card#benton_small_2 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Small-2.png');
}

.letters-card[data-active='2']#benton_small_2 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#benton_small_2 .imgs {
  background-position: -608px 0;
}

.letters-card#benton_small_3 {
  width: 304px;
  height: 400px;
}

.letters-card#benton_small_3 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Small-3.png');
}

.letters-card[data-active='2']#benton_small_3 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#benton_small_3 .imgs {
  background-position: -608px 0;
}

.letters-card#benton_small_4 {
  width: 304px;
  height: 400px;
}

.letters-card#benton_small_4 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Small-4.png');
}

.letters-card#century_big_0 {
  width: 304px;
  height: 400px;
}

.letters-card#century_big_0 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Century-Big-0.png');
}

.letters-card[data-active='2']#century_big_0 .imgs {
  background-position: -304px 0;
}

.letters-card#century_big_1 {
  width: 304px;
  height: 400px;
}

.letters-card#century_big_1 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Century-Big-1.png');
}

.letters-card#century_big_2 {
  width: 304px;
  height: 400px;
}

.letters-card#century_big_2 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Century-Big-2.png');
}

.letters-card#century_big_3 {
  width: 304px;
  height: 400px;
}

.letters-card#century_big_3 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Century-Big-3.png');
}

.letters-card#century_big_4 {
  width: 304px;
  height: 400px;
}

.letters-card#century_big_4 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Century-Big-4.png');
}

.letters-card[data-active='2']#century_big_4 .imgs {
  background-position: -304px 0;
}

.letters-card#century_small_0 {
  width: 304px;
  height: 400px;
}

.letters-card#century_small_0 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Century-Small-0.png');
}

.letters-card#century_small_1 {
  width: 304px;
  height: 400px;
}

.letters-card#century_small_1 .imgs {
  background-size: 1520px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Century-Small-1.png');
}

.letters-card[data-active='2']#century_small_1 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#century_small_1 .imgs {
  background-position: -608px 0;
}

.letters-card[data-active='4']#century_small_1 .imgs {
  background-position: -912px 0;
}

.letters-card[data-active='5']#century_small_1 .imgs {
  background-position: -1216px 0;
}

.letters-card#century_small_2 {
  width: 304px;
  height: 400px;
}

.letters-card#century_small_2 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Century-Small-2.png');
}

.letters-card#century_small_3 {
  width: 304px;
  height: 400px;
}

.letters-card#century_small_3 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Century-Small-3.png');
}

.letters-card[data-active='2']#century_small_3 .imgs {
  background-position: -304px 0;
}

.letters-card#century_small_4 {
  width: 304px;
  height: 400px;
}

.letters-card#century_small_4 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Century-Small-4.png');
}

.letters-card[data-active='2']#century_small_4 .imgs {
  background-position: -304px 0;
}

.letters-card#chapparal_big_0 {
  width: 304px;
  height: 400px;
}

.letters-card#chapparal_big_0 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Big-0.png');
}

.letters-card[data-active='2']#chapparal_big_0 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#chapparal_big_0 .imgs {
  background-position: -608px 0;
}

.letters-card#chapparal_big_1 {
  width: 304px;
  height: 400px;
}

.letters-card#chapparal_big_1 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Big-1.png');
}

.letters-card[data-active='2']#chapparal_big_1 .imgs {
  background-position: -304px 0;
}

.letters-card#chapparal_big_2 {
  width: 304px;
  height: 400px;
}

.letters-card#chapparal_big_2 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Big-2.png');
}

.letters-card#chapparal_big_3 {
  width: 304px;
  height: 400px;
}

.letters-card#chapparal_big_3 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Big-3.png');
}

.letters-card[data-active='2']#chapparal_big_3 .imgs {
  background-position: -304px 0;
}

.letters-card#chapparal_big_4 {
  width: 304px;
  height: 400px;
}

.letters-card#chapparal_big_4 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Big-4.png');
}

.letters-card[data-active='2']#chapparal_big_4 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#chapparal_big_4 .imgs {
  background-position: -608px 0;
}

.letters-card#chapparal_small_0 {
  width: 304px;
  height: 400px;
}

.letters-card#chapparal_small_0 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Small-0.png');
}

.letters-card[data-active='2']#chapparal_small_0 .imgs {
  background-position: -304px 0;
}

.letters-card#chapparal_small_1 {
  width: 304px;
  height: 400px;
}

.letters-card#chapparal_small_1 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Small-1.png');
}

.letters-card[data-active='2']#chapparal_small_1 .imgs {
  background-position: -304px 0;
}

.letters-card#chapparal_small_2 {
  width: 304px;
  height: 400px;
}

.letters-card#chapparal_small_2 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Small-2.png');
}

.letters-card#chapparal_small_3 {
  width: 304px;
  height: 400px;
}

.letters-card#chapparal_small_3 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Small-3.png');
}

.letters-card#chapparal_small_4 {
  width: 304px;
  height: 400px;
}

.letters-card#chapparal_small_4 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Small-4.png');
}

.letters-card[data-active='2']#chapparal_small_4 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#chapparal_small_4 .imgs {
  background-position: -608px 0;
}

.letters-card#farnham_big_0 {
  width: 304px;
  height: 400px;
}

.letters-card#farnham_big_0 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Big-0.png');
}

.letters-card[data-active='2']#farnham_big_0 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#farnham_big_0 .imgs {
  background-position: -608px 0;
}

.letters-card#farnham_big_1 {
  width: 304px;
  height: 400px;
}

.letters-card#farnham_big_1 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Big-1.png');
}

.letters-card[data-active='2']#farnham_big_1 .imgs {
  background-position: -304px 0;
}

.letters-card#farnham_big_2 {
  width: 304px;
  height: 400px;
}

.letters-card#farnham_big_2 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Big-2.png');
}

.letters-card[data-active='2']#farnham_big_2 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#farnham_big_2 .imgs {
  background-position: -608px 0;
}

.letters-card#farnham_big_3 {
  width: 304px;
  height: 400px;
}

.letters-card#farnham_big_3 .imgs {
  background-size: 1216px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Big-3.png');
}

.letters-card[data-active='2']#farnham_big_3 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#farnham_big_3 .imgs {
  background-position: -608px 0;
}

.letters-card#farnham_big_4 {
  width: 304px;
  height: 400px;
}

.letters-card#farnham_big_4 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Big-4.png');
}

.letters-card[data-active='2']#farnham_big_4 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#farnham_big_4 .imgs {
  background-position: -608px 0;
}

.letters-card#farnham_small_0 {
  width: 304px;
  height: 400px;
}

.letters-card#farnham_small_0 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Small-0.png');
}

.letters-card[data-active='2']#farnham_small_0 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#farnham_small_0 .imgs {
  background-position: -608px 0;
}

.letters-card#farnham_small_1 {
  width: 304px;
  height: 400px;
}

.letters-card#farnham_small_1 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Small-1.png');
}

.letters-card[data-active='2']#farnham_small_1 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#farnham_small_1 .imgs {
  background-position: -608px 0;
}

.letters-card#farnham_small_2 {
  width: 304px;
  height: 400px;
}

.letters-card#farnham_small_2 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Small-2.png');
}

.letters-card[data-active='2']#farnham_small_2 .imgs {
  background-position: -304px 0;
}

.letters-card#farnham_small_3 {
  width: 304px;
  height: 400px;
}

.letters-card#farnham_small_3 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Small-3.png');
}

.letters-card#farnham_small_4 {
  width: 304px;
  height: 400px;
}

.letters-card#farnham_small_4 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Small-4.png');
}

.letters-card[data-active='2']#farnham_small_4 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#farnham_small_4 .imgs {
  background-position: -608px 0;
}

.letters-card#futura_big_0 {
  width: 304px;
  height: 400px;
}

.letters-card#futura_big_0 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Big-0.png');
}

.letters-card[data-active='2']#futura_big_0 .imgs {
  background-position: -304px 0;
}

.letters-card#futura_big_1 {
  width: 304px;
  height: 400px;
}

.letters-card#futura_big_1 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Big-1.png');
}

.letters-card[data-active='2']#futura_big_1 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#futura_big_1 .imgs {
  background-position: -608px 0;
}

.letters-card#futura_big_2 {
  width: 304px;
  height: 400px;
}

.letters-card#futura_big_2 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Big-2.png');
}

.letters-card#futura_big_3 {
  width: 304px;
  height: 400px;
}

.letters-card#futura_big_3 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Big-3.png');
}

.letters-card#futura_big_4 {
  width: 304px;
  height: 400px;
}

.letters-card#futura_big_4 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Big-4.png');
}

.letters-card[data-active='2']#futura_big_4 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#futura_big_4 .imgs {
  background-position: -608px 0;
}

.letters-card#futura_small_0 {
  width: 304px;
  height: 400px;
}

.letters-card#futura_small_0 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Small-0.png');
}

.letters-card#futura_small_1 {
  width: 304px;
  height: 400px;
}

.letters-card#futura_small_1 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Small-1.png');
}

.letters-card[data-active='2']#futura_small_1 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#futura_small_1 .imgs {
  background-position: -608px 0;
}

.letters-card#futura_small_2 {
  width: 304px;
  height: 400px;
}

.letters-card#futura_small_2 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Small-2.png');
}

.letters-card[data-active='2']#futura_small_2 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#futura_small_2 .imgs {
  background-position: -608px 0;
}

.letters-card#futura_small_3 {
  width: 304px;
  height: 400px;
}

.letters-card#futura_small_3 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Small-3.png');
}

.letters-card#futura_small_4 {
  width: 304px;
  height: 400px;
}

.letters-card#futura_small_4 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Small-4.png');
}

.letters-card#garamond_big_0 {
  width: 304px;
  height: 400px;
}

.letters-card#garamond_big_0 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Big-0.png');
}

.letters-card[data-active='2']#garamond_big_0 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#garamond_big_0 .imgs {
  background-position: -608px 0;
}

.letters-card#garamond_big_1 {
  width: 304px;
  height: 400px;
}

.letters-card#garamond_big_1 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Big-1.png');
}

.letters-card[data-active='2']#garamond_big_1 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#garamond_big_1 .imgs {
  background-position: -608px 0;
}

.letters-card#garamond_big_2 {
  width: 304px;
  height: 400px;
}

.letters-card#garamond_big_2 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Big-2.png');
}

.letters-card[data-active='2']#garamond_big_2 .imgs {
  background-position: -304px 0;
}

.letters-card#garamond_big_3 {
  width: 304px;
  height: 400px;
}

.letters-card#garamond_big_3 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Big-3.png');
}

.letters-card#garamond_big_4 {
  width: 304px;
  height: 400px;
}

.letters-card#garamond_big_4 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Big-4.png');
}

.letters-card[data-active='2']#garamond_big_4 .imgs {
  background-position: -304px 0;
}

.letters-card#garamond_small_0 {
  width: 304px;
  height: 400px;
}

.letters-card#garamond_small_0 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Small-0.png');
}

.letters-card[data-active='2']#garamond_small_0 .imgs {
  background-position: -304px 0;
}

.letters-card#garamond_small_1 {
  width: 304px;
  height: 400px;
}

.letters-card#garamond_small_1 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Small-1.png');
}

.letters-card[data-active='2']#garamond_small_1 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#garamond_small_1 .imgs {
  background-position: -608px 0;
}

.letters-card#garamond_small_2 {
  width: 304px;
  height: 400px;
}

.letters-card#garamond_small_2 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Small-2.png');
}

.letters-card[data-active='2']#garamond_small_2 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#garamond_small_2 .imgs {
  background-position: -608px 0;
}

.letters-card#garamond_small_3 {
  width: 304px;
  height: 400px;
}

.letters-card#garamond_small_3 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Small-3.png');
}

.letters-card[data-active='2']#garamond_small_3 .imgs {
  background-position: -304px 0;
}

.letters-card#garamond_small_4 {
  width: 304px;
  height: 400px;
}

.letters-card#garamond_small_4 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Small-4.png');
}

.letters-card[data-active='2']#garamond_small_4 .imgs {
  background-position: -304px 0;
}

.letters-card#proxima_big_0 {
  width: 304px;
  height: 400px;
}

.letters-card#proxima_big_0 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Big-0.png');
}

.letters-card#proxima_big_1 {
  width: 304px;
  height: 400px;
}

.letters-card#proxima_big_1 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Big-1.png');
}

.letters-card#proxima_big_2 {
  width: 304px;
  height: 400px;
}

.letters-card#proxima_big_2 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Big-2.png');
}

.letters-card#proxima_big_3 {
  width: 304px;
  height: 400px;
}

.letters-card#proxima_big_3 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Big-3.png');
}

.letters-card[data-active='2']#proxima_big_3 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#proxima_big_3 .imgs {
  background-position: -608px 0;
}

.letters-card#proxima_big_4 {
  width: 304px;
  height: 400px;
}

.letters-card#proxima_big_4 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Big-4.png');
}

.letters-card[data-active='2']#proxima_big_4 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#proxima_big_4 .imgs {
  background-position: -608px 0;
}

.letters-card#proxima_small_0 {
  width: 304px;
  height: 400px;
}

.letters-card#proxima_small_0 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Small-0.png');
}

.letters-card#proxima_small_1 {
  width: 304px;
  height: 400px;
}

.letters-card#proxima_small_1 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Small-1.png');
}

.letters-card#proxima_small_2 {
  width: 304px;
  height: 400px;
}

.letters-card#proxima_small_2 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Small-2.png');
}

.letters-card#proxima_small_3 {
  width: 304px;
  height: 400px;
}

.letters-card#proxima_small_3 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Small-3.png');
}

.letters-card[data-active='2']#proxima_small_3 .imgs {
  background-position: -304px 0;
}

.letters-card#proxima_small_4 {
  width: 304px;
  height: 400px;
}

.letters-card#proxima_small_4 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Small-4.png');
}

.letters-card#sweet_big_0 {
  width: 304px;
  height: 400px;
}

.letters-card#sweet_big_0 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Big-0.png');
}

.letters-card[data-active='2']#sweet_big_0 .imgs {
  background-position: -304px 0;
}

.letters-card#sweet_big_1 {
  width: 304px;
  height: 400px;
}

.letters-card#sweet_big_1 .imgs {
  background-size: 912px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Big-1.png');
}

.letters-card[data-active='2']#sweet_big_1 .imgs {
  background-position: -304px 0;
}

.letters-card[data-active='3']#sweet_big_1 .imgs {
  background-position: -608px 0;
}

.letters-card#sweet_big_2 {
  width: 304px;
  height: 400px;
}

.letters-card#sweet_big_2 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Big-2.png');
}

.letters-card#sweet_big_3 {
  width: 304px;
  height: 400px;
}

.letters-card#sweet_big_3 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Big-3.png');
}

.letters-card[data-active='2']#sweet_big_3 .imgs {
  background-position: -304px 0;
}

.letters-card#sweet_big_4 {
  width: 304px;
  height: 400px;
}

.letters-card#sweet_big_4 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Big-4.png');
}

.letters-card[data-active='2']#sweet_big_4 .imgs {
  background-position: -304px 0;
}

.letters-card#sweet_small_0 {
  width: 304px;
  height: 400px;
}

.letters-card#sweet_small_0 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Small-0.png');
}

.letters-card#sweet_small_1 {
  width: 304px;
  height: 400px;
}

.letters-card#sweet_small_1 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Small-1.png');
}

.letters-card#sweet_small_2 {
  width: 304px;
  height: 400px;
}

.letters-card#sweet_small_2 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Small-2.png');
}

.letters-card#sweet_small_3 {
  width: 304px;
  height: 400px;
}

.letters-card#sweet_small_3 .imgs {
  background-size: 304px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Small-3.png');
}

.letters-card#sweet_small_4 {
  width: 304px;
  height: 400px;
}

.letters-card#sweet_small_4 .imgs {
  background-size: 608px 400px;
  background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Small-4.png');
}

.letters-card[data-active='2']#sweet_small_4 .imgs {
  background-position: -304px 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi) {
  .letters-card#benton_big_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Big-0@2x.png');
  }

  .letters-card#benton_big_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Big-1@2x.png');
  }

  .letters-card#benton_big_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Big-2@2x.png');
  }

  .letters-card#benton_big_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Big-3@2x.png');
  }

  .letters-card#benton_big_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Big-4@2x.png');
  }

  .letters-card#benton_small_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Small-0@2x.png');
  }

  .letters-card#benton_small_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Small-1@2x.png');
  }

  .letters-card#benton_small_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Small-2@2x.png');
  }

  .letters-card#benton_small_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Small-3@2x.png');
  }

  .letters-card#benton_small_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Benton-Small-4@2x.png');
  }

  .letters-card#century_big_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Century-Big-0@2x.png');
  }

  .letters-card#century_big_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Century-Big-1@2x.png');
  }

  .letters-card#century_big_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Century-Big-2@2x.png');
  }

  .letters-card#century_big_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Century-Big-3@2x.png');
  }

  .letters-card#century_big_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Century-Big-4@2x.png');
  }

  .letters-card#century_small_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Century-Small-0@2x.png');
  }

  .letters-card#century_small_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Century-Small-1@2x.png');
  }

  .letters-card#century_small_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Century-Small-2@2x.png');
  }

  .letters-card#century_small_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Century-Small-3@2x.png');
  }

  .letters-card#century_small_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Century-Small-4@2x.png');
  }

  .letters-card#chapparal_big_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Big-0@2x.png');
  }

  .letters-card#chapparal_big_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Big-1@2x.png');
  }

  .letters-card#chapparal_big_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Big-2@2x.png');
  }

  .letters-card#chapparal_big_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Big-3@2x.png');
  }

  .letters-card#chapparal_big_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Big-4@2x.png');
  }

  .letters-card#chapparal_small_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Small-0@2x.png');
  }

  .letters-card#chapparal_small_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Small-1@2x.png');
  }

  .letters-card#chapparal_small_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Small-2@2x.png');
  }

  .letters-card#chapparal_small_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Small-3@2x.png');
  }

  .letters-card#chapparal_small_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Chapparal-Small-4@2x.png');
  }

  .letters-card#farnham_big_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Big-0@2x.png');
  }

  .letters-card#farnham_big_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Big-1@2x.png');
  }

  .letters-card#farnham_big_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Big-2@2x.png');
  }

  .letters-card#farnham_big_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Big-3@2x.png');
  }

  .letters-card#farnham_big_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Big-4@2x.png');
  }

  .letters-card#farnham_small_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Small-0@2x.png');
  }

  .letters-card#farnham_small_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Small-1@2x.png');
  }

  .letters-card#farnham_small_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Small-2@2x.png');
  }

  .letters-card#farnham_small_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Small-3@2x.png');
  }

  .letters-card#farnham_small_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Farnham-Small-4@2x.png');
  }

  .letters-card#futura_big_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Big-0@2x.png');
  }

  .letters-card#futura_big_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Big-1@2x.png');
  }

  .letters-card#futura_big_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Big-2@2x.png');
  }

  .letters-card#futura_big_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Big-3@2x.png');
  }

  .letters-card#futura_big_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Big-4@2x.png');
  }

  .letters-card#futura_small_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Small-0@2x.png');
  }

  .letters-card#futura_small_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Small-1@2x.png');
  }

  .letters-card#futura_small_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Small-2@2x.png');
  }

  .letters-card#futura_small_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Small-3@2x.png');
  }

  .letters-card#futura_small_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Futura-Small-4@2x.png');
  }

  .letters-card#garamond_big_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Big-0@2x.png');
  }

  .letters-card#garamond_big_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Big-1@2x.png');
  }

  .letters-card#garamond_big_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Big-2@2x.png');
  }

  .letters-card#garamond_big_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Big-3@2x.png');
  }

  .letters-card#garamond_big_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Big-4@2x.png');
  }

  .letters-card#garamond_small_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Small-0@2x.png');
  }

  .letters-card#garamond_small_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Small-1@2x.png');
  }

  .letters-card#garamond_small_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Small-2@2x.png');
  }

  .letters-card#garamond_small_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Small-3@2x.png');
  }

  .letters-card#garamond_small_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Garamond-Small-4@2x.png');
  }

  .letters-card#proxima_big_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Big-0@2x.png');
  }

  .letters-card#proxima_big_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Big-1@2x.png');
  }

  .letters-card#proxima_big_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Big-2@2x.png');
  }

  .letters-card#proxima_big_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Big-3@2x.png');
  }

  .letters-card#proxima_big_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Big-4@2x.png');
  }

  .letters-card#proxima_small_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Small-0@2x.png');
  }

  .letters-card#proxima_small_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Small-1@2x.png');
  }

  .letters-card#proxima_small_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Small-2@2x.png');
  }

  .letters-card#proxima_small_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Small-3@2x.png');
  }

  .letters-card#proxima_small_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Proxima-Small-4@2x.png');
  }

  .letters-card#sweet_big_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Big-0@2x.png');
  }

  .letters-card#sweet_big_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Big-1@2x.png');
  }

  .letters-card#sweet_big_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Big-2@2x.png');
  }

  .letters-card#sweet_big_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Big-3@2x.png');
  }

  .letters-card#sweet_big_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Big-4@2x.png');
  }

  .letters-card#sweet_small_0 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Small-0@2x.png');
  }

  .letters-card#sweet_small_1 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Small-1@2x.png');
  }

  .letters-card#sweet_small_2 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Small-2@2x.png');
  }

  .letters-card#sweet_small_3 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Small-3@2x.png');
  }

  .letters-card#sweet_small_4 .imgs {
    background-image: url('/dist/img/specials/design-school/font-pairs/Sweet-Small-4@2x.png');
  }
}
@-moz-keyframes crossfade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes crossfade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes crossfade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}