body,
 a {
   font-family: 'Source Sans Pro', sans-serif;
 }

 .content-wrapper {
   background: #4f8ebe;
 }
 .w100{width: 100%;}
.w90{width: 90%;}
.w80{width: 80%;}
.w70{width: 70%;}
.w60{width: 60%;}
.w50{width: 50%;}
.w40{width: 40%;}
.w30{width: 30%;}
.w20{width: 20%;}
.w10{width: 10%;}

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Source Serif Pro', serif;
 }

 p,
 a {
   font-size: 16px;
 }

 .icon-emotsmile{
  font-size: 4rem;
  font-weight: 500;
    text-align: center;
    display: block;
    color: #4f8ebe;
    margin-bottom: 29px;
 }
 #step7 .card-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }
 #step7 .card-body .subhead {
  margin: 8px auto;
}
#step7 a {
  margin-top: 23px;
}

 .pholder {
   width: 48%;
   text-align: center;
   margin: 8px 2% 8px 0;
   background: #f9f9f9;
   padding: 18px 0px;
   cursor: pointer;
   border: solid 2px #f9f9f9;
   height: 122px;
   display: flex;
   overflow: hidden;
   flex-direction: column;
   justify-content: center;
 }

 .hided {
   display: none;
 }

 .pholder.active {
   border: solid 2px #4f8ebe;
   background: #4f8ebe05;
 }

 .pholder:hover {
   background: #e9e9e9;
 }

 .pholder.active {
   border: solid 2px #4f8ebe;
   background: #4f8ebe1a;
 }

 .mt-8 {
   margin-top: 73px;
 }

 .subhead {
   max-width: 80%;
   margin: 16px auto;
 }

 textarea.form-control {
  border: solid 1px #bcb8b8;
}

 .prodimage {
   max-width: 90%;
   margin-top: -28px;
   margin: -20px auto;
   display: block;
 }

 .btn-primary {
   background: #4F8EBE;
   border-color: #4F8EBE
 }

 .img-responsive {
   max-width: 100%;
   margin: 0px 0px 10px;
 }

 .nav-link {
   text-align: center;
   width: 100%;
   justify-content: center;
 }

 .tab-basic .nav-item {
   margin-right: 2%;
   width: 48%;
   margin-top: 16px;
 }

 .helper {
  background: #fbfbfb;
  padding: 20px;
  border-radius: 10px;
  margin: 0 0px;
}

 .tab-basic .nav-item .nav-link {
   padding: 15px;
 }

 .tab-basic .nav-item .nav-link.active {
   background: #c9c9c9;
   color: #4f8ebe;
   border-bottom-color: #4f8ebe;
   padding: 15px;
 }

 .steps,
 .stepholder {
   min-height: 100vh;
 }

 input[type=text] {
   border: none;
   border-bottom: solid 1px #bcb8b8;
 }

 .btn-lg {
   padding: 14px 20px;
   font-weight: 400;
   text-transform: uppercase;
 }

 .p_prod {
   width: 23%;
   text-align: center;
   border: solid 3px #eee;
   background: #f9f9f9;
   padding: 10px 10px 0px 10px;
   margin: 10px 1%;
   cursor: pointer;
   height: 215px;
 }
 .p_prod.active {
  border: solid 2px #4f8ebe;
  background: #4f8ebe0f;
}

 .p_prod img {
   height: 70%;
   width: auto;
 }

 .w80 {
   max-width: 80%;
   margin: auto;
 }

 .mholder, .prholder {
  width: 42%;
  margin: 0 11px 0 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #88a1b50f;
  padding: 20px;
  color: #000;
  border-radius: 6px;
  height: 220px;
  align-items: center;
}
.prholder p {
  margin-bottom: 0px;
}
.mholder {
  vertical-align: middle;
  display: flex;
}
.prholder img{
  height: 70%;
}

.helper2 {
  background: #fbfbfb;
  margin: 0 0px 15px;
  border-radius: 8px;
  padding: 12px 10px 15px 10px;
}

 #copybtn {
   cursor: pointer;
   color: #4f8ebe;
   font-size: 1.3rem;
 }

 @media only screen and (max-width: 600px) {

   /* MOBILE DEVICE */
   h2 {
     font-size: 1.5rem;
   }

   .subhead {
     max-width: 100%;
     margin: 12px auto;
   }

   .col-6 {
     flex: auto;
     max-width: 100%;
   }

   .mmt50 {
     margin-top: 50px;
   }

   .mmt40 {
     margin-top: 40px;
   }

   .mmt30 {
     margin-top: 30px;
   }

   .mmt20 {
     margin-top: 20px;
   }

   .mmt60 {
     margin-top: 60px;
   }

   .mcenter {
     text-align: center;
   }

   h3 {
     font-size: 1.3rem;
   }

   .pholder {
     width: 100%;
   }

   .mmw100 {
     max-width: 100%;
   }

   .p_prod {
    max-width: 94%;
    width: 100%;
}

   .content-wrapper {
     padding: 1.5rem 1rem;
   }

   .mobile-reverse {
     flex-direction: column-reverse;
   }

   .col-3 {
     flex: auto;
     max-width: 50%;
   }

   .mholder, .prholder {
    width: 100%;
    height: 167px;
}
   .mobflex {
    flex-direction: column;
    row-gap: 11px;
}
#step7 {
  min-height: 50vh;
}
 }