/*
Module Name: Home v2 (Mobile CSS)
Author: Prosoft Phils
Author URL: http://prosoft-phils.com/
*/

@media (max-width: 767px) {
  /*--------------------------------------------------------------
HOME - General Styles
--------------------------------------------------------------*/

  .unbreak-mobile {
    display: inline-block;
  }
  /*--------------------------------------------------------------
HOME - Banner
--------------------------------------------------------------*/
  .home-pg-banner {
    background: url("../img/v2/bg1.jpg") no-repeat center top;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    /* height: auto; */
  }

  .home-pg-banner .vertical-horizontal-center {
    top: 0;
    
    height: inherit;
    display: flex;
    align-items: center;
  }

  .home-pg-banner-content {
    width: 100%;
    padding: 126px 10px 100px;
  }

  .home-pg-banner-content p {
    margin-bottom: 30px;
  }

  .home-pg-banner-content p.h2 {
    font-size: 25px;
    padding: 0 1rem;
  }

  .home-pg-banner-content p.h4 {
    font-size: 18px;
  }

  .home-pg-banner-content button {
    margin-bottom: 15px;
  }

  .home-banner-tag span,
  .puzzle-tag span {
    padding-left: 0;
    padding-right: 0;
  }

  .badge-banner-xs,
  .badge-banner-xs-b {
    display: flex;
    justify-content: space-around;
    position: absolute;
    right: 10px;
    bottom: 0;
  }

  .badge-banner-xs img {
    width: 80px;
  }

  .badge-banner-xs-b img {
    max-width: 300px;
    opacity: 0.7;
    margin-top: 35px;
  }

  .badge-banner {
    display: none;
  }

  .home-sg-events img {
    width: 250px;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  /*--------------------------------------------------------------
HOME - Fact
--------------------------------------------------------------*/

  .home-fact #msd-fact {
    padding-top: 0;
  }

  .home-fact p.text-justify {
    text-align: left !important;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 60px;
  }

  .home-fact p {
    margin-bottom: 24px;
  }

  .fact-gradient {
    margin-left: 0;
    padding: 20px 15px;
  }

  /*--------------------------------------------------------------
HOME - Get Started / Callouts
--------------------------------------------------------------*/
  .home-callouts li {
    margin-bottom: 30px;
  }

  .home-callouts li:last-child {
    margin-bottom: 0;
  }

  .home-callouts li figure {
    margin-bottom: 0;
  }

  .home-callouts li img {
    max-width: 110px;
  }

  .home-callouts li .h4 {
    font-size: 16px;
  }

  .home-callouts li button,
  .home-custom-value button {
    min-width: 160px;
  }

  /*--------------------------------------------------------------
HOME - Calculator
--------------------------------------------------------------*/
  .calculator-container {
    padding: 50px 20px;
    margin-bottom: 60px;
  }

  .calculator-container label {
    font-size: 17px;
  }

  .calculator-container .btn,
  .reduced-width {
    width: 100%;
  }

  .form-ahs .reduced-width {
    height: auto;
  }

  .home-calculator .form-check {
    margin-top: 10px;
    float: left;
    margin-left: 0;
    width: 100%;
  }

  /*--------------------------------------------------------------
HOME - About
--------------------------------------------------------------*/
  .home-about {
    background: url("../img/v2/bg3.jpg") no-repeat center top;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
  }

  /*--------------------------------------------------------------
HOME - Puzzle
--------------------------------------------------------------*/
  .puzzle-heading {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    margin-bottom: 15px;
  }

  .puzzle-lg {
    display: none;
  }

  .puzzle-xs {
    display: block !important;
    margin-bottom: 20px;
  }

  .puzzle-image-tag {
    text-align: center;
  }

  /*--------------------------------------------------------------
HOME - Client
--------------------------------------------------------------*/
  .home-client {
    background: url("../img/v2/bg4.jpg") no-repeat center top;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
  }

  .home-client-highlight {
    background: url("../img/v2/bg5.jpg") no-repeat center top;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    padding: 50px 20px;
    margin-bottom: 30px;
  }

  .home-client-highlight em {
    font-size: 14px;
  }

  .home-client-highlight .h2 {
    font-size: 20px;
  }

  .home-client table {
    margin-top: 30px;
  }

  .table tr td {
    display: block;
    width: 100% !important;
    clear: both;
    border-top: none;
  }

  .home-client table p {
    margin-bottom: 10px;
  }

  .home-client table tr:last-child td {
    padding-left: 12px;
  }

  .link-mobile-btn {
    background-color: var(--color-blue);
    border-radius: 5px;
    padding: 7px 15px;
  }

  .link-mobile-btn a {
    color: #fff;
  }

  .link-mobile-btn:hover {
    background-color: var(--color-green);
  }

  /*--------------------------------------------------------------
HOME - Reviews
--------------------------------------------------------------*/
  .home-reviews {
    padding-bottom: 0 !important;
  }

  .watch-tag {
    position: relative;
    bottom: 50%;
    top: auto;
  }

  .graph-cardinal-img {
    margin-bottom: 50px;
  }

  .home-reviews-row p:first-child .italic {
    font-size: 15px;
  }

  .review-section {
    margin-top: 16px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .review-section p.italic {
    margin-top: 20px;
    margin-bottom: 50px;
  }

  /*--------------------------------------------------------------
HOME - Client List
--------------------------------------------------------------*/
  .past-event__list li {
    width: calc(40% - 16px);
    margin: 8px;
  }
  /*--------------------------------------------------------------
HOME - MSD
--------------------------------------------------------------*/
  .home-msd {
    background: url("../img/v2/bg6.jpg") no-repeat center top;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
  }

  .home-msd h2 {
    font-size: 25px;
  }

  .home-msd p:last-child {
    width: 90%;
  }

  /*--------------------------------------------------------------
MODAL - About MSD
--------------------------------------------------------------*/
  #popup-msd .fact-gradient {
    position: relative;
    margin: 0;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 20px;
  }

  #popup-msd .fact-gradient .vertical-horizontal-center {
    padding: 0;
    width: 100%;
  }
} /* END of @media 767px and below*/