.categories {
  margin-bottom: 40px;
  min-height: 35vh;
  padding-top: 3vw;
}

.category,
.category__content,
.category__icon,
.category__title,
.category__available-soon,
.category__type__icon,
.subcategory,
.subcategory__title,
.subcategory__description {
  -webkit-transition: all .2s ease-out;
  -moz-transition:    all .2s ease-out;
  -o-transition:      all .2s ease-out;
  transition:         all .2s ease-out;
}

.category {
  background:    #ffffff;
  text-align:    center;
  min-height:    215px;
  outline:       none !important;
  cursor:        pointer;
  border:        solid 1px transparent;
  border-radius: 8px;
  z-index:       1;
  position:      relative;
  box-sizing:    content-box;
  margin:        10px 0;
  overflow:      hidden;
}

.category.category--inactive {
  cursor: not-allowed;
}

.category__content {
  position:            relative;
  visibility:          collapse;
  overflow:            hidden;
  display:             inline-block;
  opacity:             0;
  transform:           scaleY(0);
  transition-property: margin-top, transform;
  transform-origin:    center top;
  margin-top:          -100%;
  z-index:             -1;
}

.category__icon {
  position:            absolute !important;
  font-size:           140px !important;
  color:               #0065a2;
  width:               140px;
  height:              140px;
  transform-origin:    top left;
  left:                50%;
  transform:           translateX(-50%);
  margin:              15px 20px 10px 0;
  transition-property: color, transform, left, top;
}

.category__icon.fa-stack {
  font-size: 70px !important;
}

.category__icon--80p {
  font-size:   110px !important;
  padding-top: 15px;
}

.category__type__icon {
  position:         absolute;
  right:            50%;
  top:              85px;
  transform:        translateY(-50%);
  transform-origin: center center;
  font-size:        2em !important;
  color:            #dddddd;
  margin-right:     -100px;
  opacity:          1
}

.category__title {
  font-size:           1.7em;
  color:               #333333;
  border-bottom:       solid 1px transparent;
  transition-property: color, padding-top, background-color;
  padding-top:         165px;
}

.category__available-soon {
  position:      absolute;
  top:           50%;
  left:          50%;
  background:    #0f70b7;
  padding:       4px 0;
  border-radius: 10px/20px;
  font-size:     1.4em;
  transform:     translateX(-50%) translateY(-50%) rotate(-45deg);
  color:         white;
  line-height:   1.7em;
  opacity:       .5;
  margin-top:    -23px;
  white-space:   nowrap;
  width:         180px;
}

.category:hover {
  background-color: #eeeeee;
}

.category--expanded {
  min-height:         200px;
  border-color:       #7ea3c1;
  background-color:   white !important;
  border-radius:      0;
  border-left-color:  transparent;
  border-right-color: transparent;
  cursor:             default;
}

.category--expanded .category__content {
  transform:     scaleY(1);
  visibility:    visible;
  opacity:       1;
  display:       table;
  table-layout:  fixed;
  width:         100%;
  margin-top:    10px;
  margin-bottom: 10px;
}

.category--expanded .category__icon {
  transform: scale(.2);
  position:  absolute;
  left:      22px;
  top:       0;
  margin:    5px 5px 5px -12px;
}

.category--expanded .category__icon .fa-stack-2x {
  font-size: 1em;
}

.category--expanded .category__icon .fa-stack-1x {
  font-size:   .5em;
  line-height: 2em;
}

.category--expanded .category__title {
  font-size:           1.6em;
  text-align:          center;
  line-height:         40px;
  border-bottom-color: #bad5ea;
  padding-left:        40px;
  padding-right:       10px;
  padding-top:         0;
  background:          white;
}

.category:hover .category__type__icon {
  margin-right: -120px;
  transform:    scale(2) translateY(-25%);
  color:        #0065a2;
}

.category--expanded .category__type__icon {
  transition: none;
  opacity:    0;
  transform:  translateX(-100px);
  visibility: collapse;
}

.category--expanded .subcategory {
  transform: scale(1);
}

.category--inactive .category__icon,
.category--inactive .category__title {
  color: #bbbbbb;
}

.category--inactive:hover {
  background-color: inherit;
}

.subcategory {
  text-align:          left;
  cursor:              pointer;
  border-radius:       4px;
  transform:           scaleY(0);
  transform-origin:    center bottom;
  transition-duration: .35s;
}

.subcategory:hover {
  background-color: #eeeeee;
}

.subcategory__inner {
  display: table-row;
}

.subcategory__icon {
  display:        table-cell;
  font-size:      25px;
  width:          45px;
  vertical-align: middle;
  position:       relative;
  padding-left:   10px;
  padding-right:  6px;
  color:          #555555;
}

.subcategory__icon .icon--bottom-right {
  position:      absolute;
  font-size:     .7em;
  right:         0;
  bottom:        50%;
  margin-bottom: -20px;
  line-height:   20px;
  text-shadow:   0 0 12px white;
}

.subcategory__content {
  display: table-cell;
  width:   100%;
  padding: 10px 10px 10px 7px;
}

.subcategory__title {
  font-weight: bold;
  display:     inline-block;
}

.subcategory__description {
  font-size:   1.1rem;
  line-height: 1.3rem;
  color:       #777777;
  margin-top:  3px;
}

.subcategory:hover .subcategory__icon {
  transform: scale(1.1);
}

.subcategory:hover .subcategory__description {
  color: #333333;
}

.divider-top {
  display:    block;
  width:      100%;
  min-height: 5px;
  background: #348cd6;
  margin-top: 20px;
}

.warning {
  border-radius: 0;
  padding:       15px;
  text-align:    justify;
}

.lead {
  font-size: 17.5px;
  padding:   20px;
}

.responsive-notice {
  text-align: center;
}

.responsive-notice .responsive-notice__inner {
  display:       inline-block;
  margin-bottom: -10px;
}

.responsive-notice img {
  display:      inline-block;
  margin-left:  -12px;
  margin-right: -12px;
}

.responsive-notice p {
  display:   inline-block;
  font-size: 1.1em;
  padding:   0 12px 0 12px;
}