/******* Styles for Global Responsive Phone portrait ******/

@media (min-width: 320px) and (max-width: 736px) {

  #mainContainer {
    width: 100%;
    padding: 0;
    background-color: #fff;
  }

  #mainContent {
    width: 100%;
    padding: 2%;
  }

  /** Top Nav Styles **/
  #banner_mojo {
    display: none;
  }

  .navigation_bar {
    display: none;
  }

  /* .topnav {
    overflow: hidden;
    background-color: #007C9D;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: #4CAF50;
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border: solid white 1px;
    padding: 2% 4%;
  }
  
  .topNav_logo {
    float: left;
    width: 83%;
    margin-top: 2%;
    margin-left: 2%;
    margin-bottom: 4%;
    clear: right;
  } */


  /** Footer Styles **/
  .wellnesschallenges_footer_bar_top {
    height: 140px;
    padding-left: 4%;
    padding-top: 2%;
  }

  .footer_icon_container {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 40px;
    justify-content: left;
  }

  .footer_phone_container {
    width: 100%;
    margin-left: 3%;
  }

  .footer_phone_image {
    width: 8%;
  }

  .footer_phone_text {
    margin-top: 0;
    margin-left: 2%;
    font-size: 140%;
  }

  .footer_email_container {
    width: 100%;
    margin-left: 3%;
  }

  .footer_email_image {
    width: 10%;
  }

  .footer_email_text {
    margin-top: 0;
    margin-left: 2%;
    font-size: 140%;
  }

  .footer_coach_container {
    width: 100%;
    margin-left: 3%;
  }

  .footer_chat_image {
    width: 8%;
  }

  .footer_coach_text {
    margin-top: 0;
    margin-left: 2%;
    font-size: 140%;
  }

  .footer_company_logo {
    float: left;
    width: 100%;
    margin-left: 4%;
  }

  .footer_disclaimer_text {
    float: left;
    width: 100%;
    margin-top: 4%;
    margin-left: 4%;
    text-align: left;
  }

  .footer_disclaimer_text p {
    font-size: 5vw;
  }
}


/******* Styles for Responsive Phone landscape ******/
@media (min-width: 480px) and (max-width: 736px) {

  /** Top Nav Styles **/
  .navigation_bar {
    display: none;
  }

  /* .topnav {
    overflow: hidden;
    background-color: #007C9D;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border: solid white 1px;
    padding: 1% 4%;
  }
  
  .topNav_logo {
    float:left;
    width: 88%;
    margin: 1% 0 2% 2%;
    clear: right;
  } */


  /** Footer Styles **/
  .wellnesschallenges_footer_bar_top {
    height: 150px;
    padding-left: 0;
  }

  .footer_phone_container {
    width: 100%;
    margin-left: 3%';

  }

  .footer_phone_image {
    width: 8%;
  }

  .footer_phone_text {
    font-size: 120%;
  }

  .footer_email_container {
    width: 100%;
    margin-left: 3%;
  }

  .footer_email_image {
    width: 10%;
  }

  .footer_email_text {
    font-size: 120%;
  }

  .footer_coach_container {
    width: 100%;
    margin-left: 2%;
  }

  .footer_chat_image {
    width: 8%;
  }

  .footer_coach_text {
    font-size: 120%;
  }

  .footer_company_logo {
    float: left;
    width: 30%;
    margin-left: 2%;
  }

  .footer_disclaimer_text {
    float: right;
    width: 50%;
    margin-top: 0;
    margin-right: 4%;
    text-align: right;
  }

}

/******* Styles for Responsive Large Phone landscape ******/
@media (min-width: 481px) and (max-width: 896px) and (orientation: landscape) {
  #banner_mojo {
    display: none;
  }

  .navigation_bar {
    display: none;
  }

  .topnav {
    overflow: hidden;
  }

  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 160%;
  }

  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  .topnav a.active {
    background-color: #4CAF50;
    color: white;
  }

  .topnav .icon {
    display: none;
  }

  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
    margin-right: 3%;
    font-size: 200%;
  }

  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border: responsive;
    padding: 1% 4%;
  }

  .topNav_logo {
    float: left;
    width: 88%;
    margin-top: 2%;
    margin-left: 2%;
    margin-bottom: 4%;
    clear: right;
  }

  .footer_phone_container {
    width: 25%;
    margin-left: 0;
  }

  .footer_email_container {
    width: 35%;
    margin-left: 0;
  }

  .footer_coach_container {
    width: 30%;
    margin-left: 0;
  }

  .footer_company_logo {
    float: left;
    width: 30%;
    margin-left: 2%;
  }

  .footer_disclaimer_text {
    float: right;
    width: 50%;
    margin-top: 0;
    margin-right: 4%;
    text-align: right;
  }

}

/************ Laptops and Tablets (Portrait) ************/
@media (min-width : 768px) and (max-width : 1024px) and (orientation: portrait) {
  #banner_mojo {
    display: none;
  }

  .navigation_bar {
    display: none;
  }

  .topnav {
    overflow: hidden;
  }

  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 160%;
  }

  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  .topnav a.active {
    background-color: #4CAF50;
    color: white;
  }

  .topnav .icon {
    display: none;
  }

  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.icon {
    margin-right: 3%;
    float: right;
    display: block;
    font-size: 220%;
  }

  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border: transparent;
    padding: 1% 4%;
  }

  .topNav_logo {
    float: left;
    width: 87%;
    margin-top: 2%;
    margin-left: 2%;
    margin-bottom: 4%;
    clear: right;
  }

  .footer_phone_container {
    width: 25%;
    margin-left: 0;
  }

  .footer_email_container {
    width: 35%;
    margin-left: 0;
  }

  .footer_coach_container {
    width: 30%;
    margin-left: 0;
  }

  .footer_company_logo {
    float: left;
    width: 30%;
    margin-left: 2%;
  }

  .footer_disclaimer_text {
    float: right;
    width: 50%;
    margin-top: 0;
    margin-right: 4%;
    text-align: right;
  }

}

/* Google Pixel 4XL  ----------- */
@media only screen and (min-width: 480px) and (max-width: 870px) and (orientation : landscape) {
  #mainContainer {
    width: 100%;
    padding: 0;
    background-color: #fff;
  }

  #mainContent {
    width: 100%;
    padding: 2%;
  }

  #banner_mojo {
    display: none;
  }

  .navigation_bar {
    display: none;
  }

  /* .topnav {
    overflow: hidden;
    background-color: #007C9D;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 4vw;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: #4CAF50;
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border: solid white 1px;
    padding: 2% 4%;
  }
  
  .topNav_logo {
    float: left;
    width: 88%;
    margin-top: 2%;
    margin-left: 2%;
    margin-bottom: 4%;
    clear: right;
  } */

  .footer_phone_container {
    width: 22%;
    margin-left: 2%;
  }

  .footer_email_container {
    width: 35%;
    margin-left: 0;
  }

  .footer_coach_container {
    width: 30%;
    margin-left: 0;
  }

  .footer_company_logo {
    float: left;
    width: 30%;
    margin-left: 2%;
  }

  .footer_disclaimer_text {
    float: right;
    width: 50%;
    margin-top: 0;
    margin-right: 4%;
    text-align: right;
  }

}

/* iPhone 11 ----------- */
/*@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: landscape) {*/
@media only screen and (min-width: 768px) {
  /*#mainContainer {
    width: 100%;
    padding: 0;
    background-color: #fff;
  }
  
  #mainContent {
    width: 100%;
    padding: 2%;
  }
  
  #banner_mojo {
    display: none;
  }
  
  .navigation_bar {
    display: none;
  }
  
  .topnav {
    overflow: hidden;
    background-color: #007C9D;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 4vw;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: #4CAF50;
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border: solid white 1px;
    padding: 2% 4%;
  }
  
  .topNav_logo {
    float: left;
    width: 88%;
    margin-top: 2%;
    margin-left: 2%;
    margin-bottom: 4%;
    clear: right;
  }
  
  .footer_phone_container {
      width: 25%;
      margin-left: 0;
  }
  
  .footer_email_container {
      width: 35%;
      margin-left: 0;
  }
  
  .footer_coach_container {
      width: 30%;
      margin-left: 0;
  }
  
  .footer_company_logo {
    float: left;
    width: 30%;
    margin-left: 2%;
  }
  
  .footer_disclaimer_text {
    float: right;
    width: 50%;
    margin-top: 0;
    margin-right: 4%;
    text-align: right;
  }*/
}

/* laptop ----------- */
@media only screen and (min-width: 992px) {
  /*#mainContainer {
    width: 100%;
    padding: 0;
    background-color: #fff;
  }
  
  #mainContent {
    width: 100%;
    padding: 2%;
  }
  
  .topnav {
    display: none;
  }*/
}