Mobile Friendly Styles for OSHA City Sites

osha_city_sites.html

<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-38847374-13', 'auto');
  ga('send', 'pageview');
</script>
<style>
.content {
    max-width: 1020px;
    margin-top: 40px;
    margin: 40px auto 0 auto;
    padding-bottom: 30px;
}
.content:after {
  text-align: center;
  display: block;
  content: "Copyright \00a9\00a0OSHA Pros USA, LLC. All rights reserved.";
  clear: both;
  padding-top: 40px;
}
p {
        font-size: 12pt;
        color: #000;
}

.header {
        font-size: 0;
        padding: 20px 0;
}

.header-left {
        width: 75%;
        display: inline-block;
        padding-left: 50px;
        box-sizing: border-box;
}

.header-left h1 {
        font-size: 25pt;
}

.header-left h3 {
        font-size: 14pt;
        font-style: italic;
}

.header-right {
        width: 25%;
        display: inline-block;
        padding-right: 30px;
        box-sizing: border-box;
}

.menu {
        background-color: #1696e6;
        width: 100%;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 15px;
}

.menu li {
        font-size: 17pt;
        display: inline;
        list-style-type: none;
        padding-right: 25px;
}

.menu a {
        color: #fff;
        text-decoration: none;
}

.menu a:hover {
        color: #e5e5e5;
}

.menu a:active {
        color: #7b7b7b;
}

.questions {
        font-size: 14pt;
        font-weight: bold;
}

.contact-us-today {
        font-size: 16pt;
        font-style: italic;
        color: #ff0000;
}

.phone {
        font-size: 18pt;
}

.col-left {
        width: 66.6%;
        float: left;
}

.col-right {
        width: 33.4%px;
        float: right;
}

.content-left {
        padding: 40px;
}

.content-right {
        text-align: center;
        padding: 20px;
}

.content-right h3 {
        font-size: 16pt;
        font-weight: bold;
}

.form-div {
        margin-top: -100px;
}

.img-left {
        float: left;
        padding-right: 20px;
}

.img-bullet-left {
        float: left;
        padding-right: 20px;
        margin-right: 20px;
}

.online-training-banner, .onsite-heading {
        text-align: center;
}
.online-training-banner img {
    width: 90%;
}
.bottom-text {
        font-size: 10pt; 
        font-style: italic; 
        font-color: #7b7b7b;
}

.fill-out-form {
        font-size: 14pt;
        font-weight: bold;
        font-style: italic;
}

.customers {
        text-align: center;
}

.reduce-margin-top {
        margin-top: -50px;
}

.reduce-margin-top-slightly {
        margin-top: -20px;
}
.wsb-canvas {
    height: auto !important;
    background-color: #fff !important;
    position: static !important;
}
.wsb-element-htmlsnippet {
    position: static;
    width: 100% !important;
}
.wsb-htmlsnippet-element {
    width: 100% !important;
    height: 100% !important;
}
.wsb-canvas-page-container {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}
#wsb-canvas-template-container {
    width: 100% !important;
}
#wsb-canvas-template-page {
    height: 100% !important;
    width: 100% !important;
}
@media screen and (max-width: 1080px) {
    .questions {
        font-size: 11pt;
    }

    .contact-us-today {
        font-size: 12pt;
    }

    .phone {
        font-size: 12pt;
    }
    .header-left h1 {
        font-size: 18pt;
    }
    .header-left h3 {
        font-size: 12pt;
    }
}
@media screen and (max-width: 980px) {
  .col-left,
  .col-right {
    width: 100%;
    float: none;
  }
  .form-div {
    margin-top: 0;
  }
  .menu {
    padding: 0;
  }
  .menu ul {
    padding: 0;
  }
  .menu li {
    display: block;
    padding: 10px 0;
  }
  .menu a {
    display: block;
    width: 100%;
  }
  .menu li:active {
    background-color: #077cc4;
  }
  .menu li + li {
    border-top: 1px solid #fff;
  }
  .form-textbox,
  .form-textarea {
    width: 100%;
    padding: 10px 5px !important;
    font-size: 18pt !important;
  }
  .form-label.form-label-auto {
    font-size: 14pt;
    text-align: center !important;
    width: 100% !important;
    float: none !important;
  }
  .form-input {
    width: 100%;
  }
  .form-all {
    width: 100% !important;
  }
  .form-radio-item,
  .form-checkbox-item {
    text-align: left;
  }
  .form-radio-item label,
  .form-checkbox-item label {
    font-size: 12pt;
  }
  [data-type="control_dropdown"] .form-input,
  [data-type="control_dropdown"] .form-input-wide {
    width: 75% !important;
  }
  select.form-dropdown {
    width: 100% !important;
    height: 40px;
  }
  .form-dropdown option {
    font-size: 12pt;
  }
}
@media screen and (max-width: 780px) {
    .header-right,
    .header-left {
        text-align: center;
        display: block;
        width: 100%;
        padding: 0;
    }
    .header-left h1,
    .header-left h3 {
        padding: 10px 0;
    }
    .menu li {
        font-size: 14pt;
    }
    [data-type="control_dropdown"] .form-input,
    [data-type="control_dropdown"] .form-input-wide {
      width: 100% !important;
    }
}
@media screen and (max-width: 680px) {
    .customers img {
        width: 100%;
    }
    .img-left,
    .img-bullet-left {
      width: 100%;
      float: none;
      box-sizing: border-box;
      margin: 0;
      padding: 20px;
    }
}
</style>