#why-hcc {
    font-size:14px;
    line-height: 24px;
  }
  
  .card-img-slider-hcc{
      height: 250px !important;
  }
  
  #site.ops img {
    max-width:100%;
    height: auto;
  }
  
  #why-hcc h1 {
    color:#fff;
    font-size: 28px;
    background-color: rgba(0,87,150,0.85);
    padding: 15px 20px;
    letter-spacing: 0.02em;
    font-weight:normal;
    margin-bottom: 0;
    display: inline-block;
    transition:font-size 0.3s;
  }
  
  #why-hcc h2 {
    font-size:26px;
    line-height: 1.2;
    margin-top:0;
  }
  
  h2.red {
    color:#a51c37;
  }
  
  h2.white {
    color:#fff;
  }
  
  #intro {
    overflow: hidden;
    position: relative;
  }
  
  /*#intro {
    background-image:url('https://asset1.basecamp.com/2212516/projects/6102460/attachments/162346070/f9d218c1775391db03e81f58ba1df06b0010/large.jpg');
    background-size: cover;
    background-repeat: no-repeat;
  }*/
  
  body.touchSupport #intro {
    background-image:url('/media/howardcc/site-assets/images/why-hcc-bg.jpg');
  }
  
    #intro video {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      background-size: cover;
      max-width: none;
    }
  
    #intro .overlay {
      width:100%;
      height:100%;
      background-color: rgba(0,0,0,0.5);
      position: absolute;
      z-index: 1;
    }
  
  #reasons {
    z-index: 2;
    position: relative;
    padding:25px;
  }
  
  .page-nav {
    list-style:none;
    padding:0;
    margin:0;
  }
  
    .page-nav a {
      color:#fff;
      font-size: 14px;
      font-weight: 300;
      background-color: rgba(0,0,0,0.7);
      text-decoration: none;
      line-height: normal;
      padding: 10px 15px;
      display: inline-block;
      margin-bottom:1px;
      transition:background-color 0.3s;
    }
  
    .page-nav a:hover,
    .page-nav a:focus,
    .page-nav a.active {
      background-color: rgba(0,87,150,0.85);
    }
  
    .page-nav a:before {
      font-weight: normal;
    }
  
    .page-nav a.one:before   { content:"1" }
    .page-nav a.two:before   { content:"2" }
    .page-nav a.three:before { content:"3" }
    .page-nav a.four:before  { content:"4" }
    .page-nav a.five:before  { content:"5" }
    .page-nav a.six:before   { content:"6" }
  
  body.js #page-nav a {
    opacity: 0;
  }
  
  #page-nav a:before {
    margin-right:8px;
  }
  
  #continue {
    position: relative;
    z-index:10;
    margin:auto;
    width:77px;
  }
  
  #continue a {
    transition:transform 0.2s;
    margin:10px;
    display: block;
  }
  
  #continue a:hover {
    margin:0;
    padding:10px;
    -webkit-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
  }
  
  #side-nav {
    display:none;
  }
  
  .row {
    overflow:hidden;
  }
  
  .row .inner {
    padding:50px 25px;
  }
  
  a.btnArrow-white-blue {
    width:220px;
    margin:5px 0 0;
  }
  
  #section1 {
    box-shadow: 0 28px 40px 0 #efefef inset;
  }
  
  #section2 {
    background-image:url('/media/howardcc/site-assets/images/why-hcc-bg-programs.jpg');
    position: relative;
    box-shadow: 0 28px 40px 0 #114872 inset;
    overflow: visible;
  }
  
    #section2 .overlay {
      width:100%;
      height:100%;
      background-color: rgba(0,87,150,0.9);
      position: absolute;
      z-index: 1;
    }
  
    #section2 .inner {
      z-index: 2;
      position: relative;
      color:#fff;
      text-align: center;
    }
  
  #section3 {
    box-shadow: 0 28px 40px 0 #efefef inset;
  }
  
    #section3 .col2 {
      margin-top:20px;
    }
  
  #section4 {
    background-color: #dcdcdc;
    box-shadow: 0 28px 40px 0 #cecece inset;
    padding-bottom:50px;
  }
    
    #section4 .inner {
      text-align: center;
      padding-bottom: 0;
    }
  
  #section5 {
    background-color: #1A499B;
	color:white;
       
}
  }
  
    #section5 .inner {
      text-align: center;
      color:#fff;
    }
  
    #section5 .links {
      margin-top:20px;
    }
  
      #section5 .links .btnArrow-white-blue {
        display:inline-block;
        margin-right:30px;
        text-align: left;
      }
  
  #section6 {
    box-shadow: 0 28px 40px 0 #efefef inset;
  }
  
    #section6 .col2 {
      margin-top:20px;
    }
  
    #section6 .link-list {
      font-size:13px;
    }
  
    #section6 .col1 > p:first-child {
      margin-top:0;
    }
  
  .trans-box {
    padding:15px 20px;
    background-color:rgba(255,255,255,0.3);
  }
  
  #program-search {
    background-color:#e7eff4;
    padding:25px 35px;
    text-align: left;
  }
  
  #program-search .title {
    font-size: 28px;
    color: #a51c37;
    font-weight: 600;
    line-height: 1;
    margin: 10px 0;
  }
  
  #campus-slider {
    max-width:950px;
    margin:auto;
  }
  
    #campus-slider .wrap {
      position: relative;
    }
  
    #campus-slider .caption {
      background-color: rgba(34,34,34,0.85);
      position: absolute;
      bottom:0;
      width:calc(100% - 40px);
      padding:20px;
      font-size: 15px;
      display: none;
    }
  
  #campus-slider-container {
    position: relative;
    padding:0 40px;
    margin-top:40px;
  }
  
    #campus-slider-container .controls {
      position: absolute;
      top:275px;
      left:0;
      width:100%;
    } 
  
      #campus-slider-container .controls a {
        text-indent: -9999px;
        background-image: url('/media/howardcc/site-assets/images/slider-arrow.svg');
        background-repeat: no-repeat;
        width:18px;
        height:32px;
      }
  
      #campus-slider-container .controls .prevBtn {
        float:left;
        -webkit-transform:rotate(180deg);
        -ms-transform:rotate(180deg);
        transform:rotate(180deg);
      }
  
      #campus-slider-container .controls .nextBtn {
        float:right;
      }
  
  @media all and (min-width:800px) {
    #why-hcc h1 {
      font-size: 54px;
    }
  
    #why-hcc h2 {
      font-size:40px;
    }
  
    .page-nav a {
      font-size: 20px;
    }
  
    #why-hcc body {
      font-size:18px;
      line-height: 28px;
    }
  
    #why-hcc .container {
      overflow:hidden;
    }
  
    #why-hcc .col1 {
      float: left;
    } 
  
    #why-hcc .col2 {
      float: right;
    } 
  
    #section1 .col1 {
      max-width:50%;
    }
  
    #section1 .col2 {
      max-width:47%;
      margin-left:3%;
    }
  
    #section3 .col1 {
      max-width:47%;
    }
  
    #section3 .col2 {
      max-width:50%;
      margin-left:3%;
      margin-top:0;
    }
  
    #section6 .col1 {
      max-width:58%;
    }
  
    #section6 .col2 {
      max-width:33%;
      margin-left:3%;
      margin-top:0;
    }
  }
  
  @media all and (min-width:900px) {
    #program-search .col {
      margin-top:0;
      float:left;
      width:32%;
    }
  
    #program-search .col.two {
      margin:0 2%;
    }
  }
  
  @media all and (min-width:1200px) {
    #reasons {
      padding:150px 0;
    }
  
    #side-nav.sticky {
      position:fixed;
      top:0;
    }
  
    #side-nav {
      display:block;
      position: absolute;
      margin-top:50px;
      z-index: 9999;
    }
  
      #side-nav .label {
        display:none;
      }
  
      #side-nav a:hover .label {
        display: inline-block;
      }
  
      #side-nav a:hover:before {
        margin-right:12px;
      }
  
    #section1 .col1 {
      max-width:62%;
    }
  
    #section1 .col2 {
      max-width:35%;
      margin-left:3%;
    }
  
    #section3 .col1 {
      max-width:35%;
    }
  
    #section3 .col2 {
      max-width:62%;
      margin-left:3%;
    }
  
    #campus-slider-container {
      padding:0;
    }
  }
  
  /*animation stuff*/
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
  @-webkit-keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }