.intro {
   height: 100vh;
   text-align: center;
   padding: 0px 0 50px 0;
   display: flex;
   align-items: center;
}

.intro .wrapper {
   max-width: 1180px;
   padding: 0 30px;
   margin: auto;
   position: relative;
   width: 100%;
}

.intro h1 {
   font-family: SofiaPro;
   font-size: 60px;
   -webkit-font-smoothing: antialiased;
   letter-spacing: 2px;
   padding-bottom: 40px;
   font-weight: 700;
   margin: 0;
   line-height: 70px;
}

.intro p {
   font-size: 24px;
   color: #4c5970;
   padding-bottom: 79px;
   font-weight: 300;
   margin: 0;
   line-height: 29px;
}

.intro .types>li {
   float: left;
   height: 38vh;
   width: calc((100% / 2) - 30px);
   margin: 0 15px;
   background: #fff;
   box-shadow: 0 12px 32px rgb(0 0 0 / 10%);
   position: relative;
   box-sizing: border-box;
   transition: background .3s;
   list-style-type: none;
} {}

.intro ul.types {
   margin: 0;
   padding: 0;
}

.intro ul.types::after {
   content: '';
   clear: both;
   display: block;
}

.intro .types>li a {
   position: absolute;
   display: block;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 3;
}

.intro .types>li .icon {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate3d(-50%,-50%,0);
}

.intro .types>li h2 {
   line-height: 37px;
   margin: 0;
   position: absolute;
   left: 0;
   width: 100%;
   top: 50%;
   margin-top: 70px;
   font-family: SofiaPro;
   font-size: 32px;
   -webkit-font-smoothing: antialiased;
   letter-spacing: 1px;
   transition: all .3s;
}

.intro .types>li .icon svg {
   display: block;
   margin-bottom: 4px;
}

.intro .types>li .icon svg polygon,
.intro .types>li .icon svg line,
.intro .types>li .icon svg path{
   stroke: #f03454;
}

.intro .types>li .icon svg circle{
   fill: #f03454;
}

.intro .types>li:not(.disabled):hover {
   background: #f03454;
}

.intro .types>li:hover .icon svg polygon,
.intro .types>li:hover .icon svg line,
.intro .types>li:hover .icon svg path{
   stroke: #000;
}

.intro .types>li:hover .icon svg circle{
   fill: #000;
}

.intro .types>li:not(.disabled):hover h2 {
   color: #fff;
}

.intro h1 {
   color: #1c212a;
   font-family: Coolvetica;
   font-weight: 400;
   padding-bottom: 41px;
   line-height: normal;
}

.intro .types>li h2 {
   font-family: Coolvetica;
}

@media (max-width: 640px){

   .intro h1 {
      font-size: 30px;
      letter-spacing: .25px;
      width: 250px;
      padding-bottom: 23px;
      margin: 0 auto;
      line-height: normal;
   }

   section.intro {
      padding: 15vh 0 0 0;
   }

   .intro .wrapper {
      margin-top: 0;
      padding: 0 20px;
   }

   .intro p {
      font-size: 17px;
      line-height: 22px;
      padding-bottom: 29px;
   }

   .intro p br {
      display: none;
   }

   .intro .types li {
      font-size: 0;
      width: calc(100% - 40px)!important;
      height: 150px;
      box-shadow: 0 10px 25px 0 rgb(0 0 0 / 10%);
      margin: 20px 20px 0 20px;
      transition: all 0s;
      display: flex;
      align-items: center;
   }

   .intro .types li:first-child {
      margin: 0 20px;
   }

   .intro .types li::before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      width: 0;
      height: 100%;
   }

   .intro .types li .icon, 
   .intro .types li h2 {
      position: static;
      display: inline-block;
      vertical-align: middle;
      width: 50%;
      margin: 0;
      transform: translate3d(0,0,0);
   }

   .intro .types li .icon {
      padding: 0 30px;
      box-sizing: border-box;
   }

   .intro .types li h2 {
      font-size: 22px;
      text-align: left;
      word-spacing: 9999px;
      line-height: 30px;
      transition: all 0s;
   }

   .intro .types>li .icon svg path {stroke-width: 3px;}

   .intro .types>li .icon svg {
      margin-bottom: 1px;
      max-width: 100%;
      margin: auto;
   }

}

@media (max-width: 350px){

   .intro .types li .icon {
      width: 40%;
      padding: 0 20px;
   }

   .intro .types li h2 {
      width: 60%;
      font-size: 20px;
      line-height: 26px;
   }

   .intro .types li {
      height: auto;
      min-height: 100px;
   }

   .intro .types>li .icon svg path {
      stroke-width: 2px;
   }

}