/*---------------------------------------------- Why Section ----------------------------------------------*/
.why-row {
    display: flex;
    width: 90%;
    margin: 0px auto;
}

.why-col {
    width: 31.333%;
    margin: 1%;
    float: left;
    min-height: auto;
}

.why-align {
    display: inline-flex;
    align-items: center;
    height: 100%;
    width: 100%;
}

.why-group {
    width: 100%;
}

.why-header, .why-body {
  width:100%;
  display:block;
  float:left;
}


.why-header h1 {
    font-size: 5.5vh;
}

h1.why-yestitle {
    font-size: 7.5vh;
}

.why-header h2 {
    font-size: 1.5vh;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif!important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    margin: 3vh 0px 2.5vh 0px;
}

.why-no {
    color: #fff;
    background-color: #232528;
    border-radius: 8px;
    height: auto;
    padding: 8vh 0px;
    transform: scale(0.9);
    box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
}

.why-yes {
    color: #fff;
    background-color: #d62722;
    background-image: url(../img/brand/4k_Airxon_navigation_bg.jpg);
    background-size: cover;
    border-radius: 8px;
    height: auto;
    padding: 8vh 0px;
    transform: scale(1.1);
    z-index: 9;
    position: relative;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
}

ul.why-nolist {
    text-align: left;
}

li.why-yesitem, li.why-noitem {
    margin: 1.5vh;
    font-size: calc(6px + 0.8vh);
    font-weight: 400!important;
}

h2.why-nosub {
    color: #8a8c8e;
}

h2.why-yessub {
    color: #000;
}


/*---------------------------------------------- Section Responsive ----------------------------------------------*/

@media screen and (min-width: 1501px) {
/*---------- Insert Style -----------*/
}

@media screen and (max-width: 1500px) {
/*---------- Insert Style -----------*/
}
@media screen and (min-width: 1200px) {
/*---------- Insert Style -----------*/
}
@media screen and (max-width: 1120px) and (min-width: 769px){
/*---------- Insert Style -----------*/
}

@media screen and (min-width: 1170px) {
/*---------- Insert Style -----------*/
}

@media screen and (min-width: 769px) {

}

@media screen and (max-width: 768px) {
  .why-col {
      width: 98%;
      margin: 1%;
      float: left;
      min-height: auto;
  }
  .why-row {
      display: inline-block;
      width: 80%;
      margin: 0px auto;
  }
  .why-yes, .why-no {
     padding: 3vh 0px;
  }
  .why-yes {
      transform: scale(1.0);
  }
  .why-no {
      transform: scale(0.8);
  }
}

@media screen and (max-width: 540px) {
/*---------- Insert Style -----------*/
}

@media screen and (max-width: 498px) {
/*---------- Insert Style -----------*/
}