.desktop {
  display: block;
}
.mobile {
  display: none;
}

/* ========================================================================== */

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

  .desktop {
    display: none !important;
  }
  .mobile {
    display: block !important;
  }
  #content .wrapper {
 display: flex;
        flex-flow: column wrap;
        padding: 2em;
    }
    .left-col {
    width: 100%;
        
}
    .wrapper.no-column{
        width:100%;
    }
    .wrapper.no-column .full-width .contact-left {
        width:100%;
    }
    .wrapper.no-column .full-width .contact-right {
        width:100%;
    }
    .mobile img.logo{
        max-width:250px;
    }
    footer{
        padding:1em 0;
    }
    footer ul a {
    color: #fff;
    font-size: 7px;
}
    
}
@media screen and (max-width: 640px) {
        .actionable {
    color: #31829a;
    font-size: 54px;
    color: #31829a;
    font-size: 54px;
    margin: 0 0 0 10%;
    line-height: 0.85;
}
    .mobile img.logo {
    max-width: 275px;
}
/* Add rules for 640px and 480px breakpoints only if needed */
@media screen and (max-width: 480px) {

    footer ul.footer-main-nav{
        flex-flow:column nowrap;
    }
    flex-flow: column nowrap{
        border: 0px solid red;
        height: auto;
        padding: 1em 0;
    }
.left-col img{ width:100%;}
    

}