Cacher is the code snippet organizer for pro developers

<!-- Add this CSS Import to the top of the main CSS to import FontAwesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="all" />

<style>

  /** button styles **/
  #hero aside a + a, #additional .viewAll a + a{
    display: none;
  }
  input[type="button"], input[type="submit"], button, .button, #hero aside a, #additional .viewAll a, .submit, .threeBoxBtn {
    background: #61A4D8;
    color: #FFF !important;
    padding: 7px 15px;
    display: inline-block;
    border-radius: 3px;
    height: auto;
    text-shadow: none;
    box-shadow: 0 1px 1px #333;
    font-size: 16px;
    font-family: helvetica, arial, sans-serif;
  }
  input[type="button"]:hover, input[type="submit"]:hover, button:hover, .button:hover, #hero aside a:hover, #additional .viewAll a:hover, .submit:hover, .threeBoxBtn {
    background: #333;
    text-decoration: none;
  }

  /** fontawesome social media icons **/
  .facebookIcon, .twitterIcon, .linkedinIcon, .youtubeIcon, .emailIcon{
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    color: #FFF;
    padding: 1px 0 2px 3px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(51, 51, 51, 0.5);
  }
  .facebookIcon:hover, .twitterIcon:hover, .linkedinIcon:hover, .youtubeIcon:hover, .emailIcon:hover{
    text-decoration: none;
    opacity: .5;
    color: #fff;
  }
  .facebookIcon:before, .twitterIcon:before, .linkedinIcon:before, .youtubeIcon:before, .emailIcon:before{
    padding: 5px 3px;
    border-radius: 3px;
    width: 20px;
    height: 16px;
    display: inline-block; 
  }
  .facebookIcon:before{
    content: "\f09a";
    background-color: #3D5F9F;
  }
  .twitterIcon:before{
    content: "\f099";
    background-color: #56C2CF;
  }
  .linkedinIcon:before{
    content: "\f0e1";
    background-color: #0F75B3;
  }
  .youtubeIcon:before{
    content: "\f16a";
    background-color: #D6202D;
  }
  .emailIcon:before{
    content: "\f0e0";
    background-color: #189604;
  }

  /** removes footer social media icons to replace with fontawsome icons **/
  footer .socialMedia a{
    color: #fff;
  }
  footer .facebookIcon img, footer .twitterIcon img, footer .linkedinIcon img, footer .youtubeIcon img{
    display: none;
  }

  /** MOBILE **/
  @media only screen and (max-width: 480px) {
    header { background: #fff; padding: 10px 0 !important; }
    header .backgroundImage {width: 100%;height: auto;}
    header .fauxLogoImagemap, header .fauxLogoImageMap, header .clientBranding {margin-top: 0;margin-left: 0px;width: 100%;height: auto;float: none;}
    header .fauxLogoImagemap img, header .fauxLogoImageMap img, header .clientBranding img {width: 95% !important;height: auto;}
    header .clientContact {display: none;}
    nav#main li {background:none;border-top: 1px solid rgba(255,255,255,0.5);}
    nav#main li.first {display: none;}
    nav#main li a {color: #fff;text-transform:capitalize;font-family:'Open Sans',sans-serif;font-size:16px;}
    /*nav#main li ul {background-color: rgba(248, 151, 56, 0.85);}*/
    nav#main li ul li {display:block; padding: 10px;}
    nav#main li ul li a {color:#fff;font-size: 14px;}
    #navButton {padding-top:4px;padding-right: 27px;}
  }

</style>