﻿
body {
  overflow-x: hidden;
  font-family: 'Avenir LT W01_55 Roman1475520', sans-serif;
  width: 100%;
  font-size: 13px;
}

.pt-5 {
    padding-top:5em !important;
}

#clarionmicroban h1, #clarionmicroban h2 {
  font-weight: bold;
}

#clarionmicroban .contact-link, #arenamicroban .contact-link {
    color: #95C93D;
}

#clarionmicroban .bg-cyan, #arenamicroban .bg-cyan {
    background-color: #76cbca;
}

#clarionmicroban .bg-dark-cyan, #arenamicroban .bg-dark-cyan {
    background-color: #125955;
}

#clarionmicroban .bg-grey, #arenamicroban .bg-grey {
  background-color: #e2f3f3;
}

#clarionmicroban .full-width, #arenamicroban .full-width {
    width: 100%;
}

#clarionmicroban .text-white, #arenamicroban .text-white {
    color: white;
}

#clarionmicroban .interior-padding, #arenamicroban .interior-padding, .reflections-program-page .arena-microban .interior-padding {
    padding: 2rem 5% 3rem 5%;
    clear: both;
}

#clarionmicroban .interior-side-padding, #arenamicroban .interior-side-padding, .reflections-program-page .arena-microban .interior-side-padding {
    padding-left: 5%;
    padding-right: 5%;
}

#clarionmicroban .interior-top-padding, #arenamicroban .interior-top-padding, .reflections-program-page .arena-microban .interior-top-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.no-padding {
    padding: 0;
}

.no-margin {
  margin: 0;
}

#clarionmicroban .hero-banner {
  background-color: #76cbca;
  text-align: center;
  font-weight: bold;
}

#arenamicroban .hero-banner {
    background-color: #ffe3a4;
    text-align: center;
    font-weight: bold;
}

.bg-ref-yellow {
    background-color: #ffe3a4;
}

    .bg-ref-yellow h1, .bg-ref-yellow p, .bg-ref-yellow h2 {
        color: #232e83;
    }

    #clarionmicroban .hero-banner h2, #arenamicroban .hero-banner h2 {
        padding-top: 3.5em;
    }

    #clarionmicroban .hero-banner h1, #arenamicroban .hero-banner h1 {
        margin-top: 1rem;
    }

    #arenamicroban .hero-banner h1, #arenamicroban .hero-banner h2 {
        color: #232e83;
    }


#clarionmicroban .renaissance {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
}

#antimic-protection {
    width:20%;
}

@media screen and (min-width: 576px) {
    #clarionmicroban .renaissance {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
  }
}

#clarionmicroban .renaissance .renaissance-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#clarionmicroban .renaissance .renaissance-left svg {
  width: 100%;
  margin: 2rem 0;
}

#clarionmicroban .renaissance .renaissance-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#clarionmicroban .clarion-microban, .reflections-program-page .arena-microban {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
}

    #clarionmicroban .clarion-microban img, #arenamicroban .arena-microban img {
        padding: 5%;
    }

@media screen and (min-width: 576px) {
  #clarionmicroban .clarion-microban, .reflections-program-page .arena-microban {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    align-items: center;
  }
}

#clarionmicroban .clarion-microban .clarion-microban-left, .reflections-program-page .arena-microban .arena-microban-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

    #clarionmicroban .clarion-microban .clarion-microban-left svg, #arenamicroban .arena-microban .arena-microban-left svg, .reflections-program-page .arena-microban .arena-microban-left svg {
        width: 26rem;
    }

@media screen and (min-width: 991px) {
    #clarionmicroban .clarion-microban .clarion-microban-left svg, #arenamicroban .arena-microban .arena-microban-left svg, .reflections-program-page .arena-microban .arena-microban-left svg {
        width: 30rem;
        padding-top: 5rem;
    }
}

#clarionmicroban .clarion-microban .clarion-microban-right img, #arenamicroban .arena-microban .arena-microban-right img, .reflections-program-page .arena-microban .arena-microban-right img {
    height: auto;
}

@media screen and (min-width: 991px) {
    #clarionmicroban .clarion-microban .clarion-microban-right img, #arenamicroban .arena-microban .arena-microban-right img, .reflections-program-page .arena-microban .arena-microban-right img {
        height: 60vh;
    }
}

#clarionmicroban .video {
    padding-top: 8rem;
}

#clarionmicroban .protection, #arenamicroban .protection {
    margin: 4rem 0 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

    #clarionmicroban .protection img, #clarionmicroban .protection svg, #arenamicroban .protection img, #arenamicroban .protection svg {
        max-height: 8rem;
    }

@media screen and (min-width: 576px) {
    #clarionmicroban .protection img, #clarionmicroban .protection svg, #arenamicroban .protection img, #arenamicroban .protection svg {
        max-height: 26rem;
    }
}

@media screen and (min-width: 991px) {
    #clarionmicroban .protection img, #clarionmicroban .protection svg, #arenamicroban .protection img, #arenamicroban .protection svg {
        max-height: 30rem;
    }
}

#clarionmicroban .protection .arrow-right, #arenamicroban .protection .arrow-right {
  width: 0;
  height: 0;
  border-top: 8rem solid transparent;
  border-bottom: 8rem solid transparent;
  border-right: 8rem solid #76cbca;
}

@media screen and (min-width: 1200px) {
    #clarionmicroban .protection .arrow-right, #arenamicroban .protection .arrow-right {
        border-top: 18rem solid transparent;
        border-bottom: 18rem solid transparent;
        border-right: 18rem solid #76cbca;
    }
}

#clarionmicroban .protection .arrow-left, #arenamicroban .protection .arrow-left {
    width: 0;
    height: 0;
    border-top: 8rem solid transparent;
    border-bottom: 8rem solid transparent;
    border-left: 8rem solid #76cbca;
}

@media screen and (max-width: 991px) {
    #clarionmicroban .protection .arrow-right, #clarionmicroban .protection .arrow-left, #arenamicroban .protection .arrow-right, #arenamicroban .protection .arrow-left {
        display: none !important;
    }
    #antimic-protection, #MicrobanGraphicBox {
        width:100%;
        float:left;
    }
}

@media screen and (min-width: 1200px) {
  #clarionmicroban .protection .arrow-left, #arenamicroban .protection .arrow-left {
    border-top: 18rem solid transparent;
    border-bottom: 18rem solid transparent;
    border-left: 18rem solid #76cbca;
  }
}

#clarionmicroban .standards img {
  max-height: 25rem;
  padding-bottom: 3rem;
  margin-top: 4rem;
}

.why-arena h1, .bg-ref-yellow h1 {
    padding: 2rem 0 3rem 0;
}

#clarionmicroban .why-clarion, #arenamicroban .why-arena {
  background-image: url('../img/diagonal_lines_bg.png');
}

    #clarionmicroban .why-clarion h1, #clarionmicroban .why-clarion h2, #arenamicroban .why-arena h1, #arenamicroban .why-arena h2 {
        margin: 0;
    }

#clarionmicroban .why-clarion .d-grid, #arenamicroban .why-arena .d-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -webkit-column-gap: 10px;
          column-gap: 10px;
}

#clarionmicroban .why-clarion .d-grid .card {
  padding: 2rem 5%;
  background-image: url('../img/diagonal_lines_bg.png');
}

@media screen and (min-width: 768px) {
  #clarionmicroban .why-clarion .d-grid .card {
    padding: 4rem 10% 2rem;
  }
}


#clarionmicroban .why-clarion .d-grid .card svg, #arenamicroban .why-arena svg {
    height: 10rem;
}


#clarionmicroban .why-clarion .heading {
  padding: 3rem;
}

@media screen and (min-width: 768px) {
  #clarionmicroban .why-clarion .d-grid {
    -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
  }
}

#clarionmicroban .footer {
  background-color: #125955;
  text-align: center;
  color: white !important;
}

#clarionmicroban .footer img {
  margin: 1rem;
}

#clarionmicroban .steps-flex, #arenamicroban .steps-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-pack: stretch;
      -ms-flex-pack: stretch;
          justify-content: stretch;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
          overflow-x: hidden;
}

@media screen and (min-width: 768px) {
    #clarionmicroban .steps-flex, #arenamicroban .steps-flex {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: stretch;
        -ms-flex-pack: stretch;
        justify-content: stretch;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
}

#clarionmicroban .steps-flex #special, #arenamicroban .steps-flex #special {
    margin-right: -66px;
}

@media screen and (min-width: 400px) {
    #clarionmicroban .steps-flex #special, #arenamicroban .steps-flex #special {
        margin-right: -82px;
    }
}

@media screen and (min-width: 768px) {
    #clarionmicroban .steps-flex #special, #arenamicroban .steps-flex #special {
        margin: 0;
    }
}

#clarionmicroban .learn-more,
#clarionmicroban .learn-more-microban  {
    padding: 1em;
    width: 100%;
    background-color: #6AC53D;
    color: white;
    text-decoration: none;
    border-radius: 3px;
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s;
    margin-top: 10px;
    margin-bottom: 20px;
}

#arenamicroban .learn-more,
#arenamicroban .learn-more-microban {
    padding: 1em;
    width: 100%;
    background-color: #fdb825;
    color: white;
    text-decoration: none;
    border-radius: 3px;
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s;
    margin-top: 10px;
    margin-bottom: 20px;
}

.reflections-program-page .arena-microban .learn-more,
.reflections-program-page .arena-microban .learn-more-microban {
    padding: 1em;
    width: 100%;
    background-color: #232E83;
    color: white;
    text-decoration: none;
    border-radius: 3px;
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s;
    margin-top: 10px;
    margin-bottom: 20px;
}

#clarionmicroban .learn-more:hover {
    background-color: #0d403d;
}

#arenamicroban .learn-more:hover {
    background-color: #fdb825;
}

#clarionmicroban .learn-more-microban, #arenamicroban .learn-more-microban, .reflections-program-page .arena-microban .learn-more-microban {
    background-color: #232E83;
    transition: background-color 0.5s;
}

    #clarionmicroban .learn-more-microban:hover, #arenamicroban .learn-more-microban:hover, .reflections-program-page .arena-microban .learn-more-microban:hover {
        background-color: #8CDFF4;
    }

#clarionmicroban .learn-more-microban-container, #arenamicroban .learn-more-microban-container {
    margin-top: 1em;
}

.reflections-program-page .arena-microban .learn-more-microban-container {
    margin-top: 1em;
    margin-bottom:3em;
}

#clarionmicroban #contact-form {
    background-color: #125955;
}

#arenamicroban #contact-form {
    background-color: #232e83;
}

#clarionmicroban #contact-form textarea, #arenamicroban #contact-form textarea {
    height: 23em;
}

#clarionmicroban .floor-care-banner-left {
    margin-bottom: 4rem;
}

.petri-dish svg {
    width:60%;
    padding:3em;
}

.petri-dish h3 {
    color: #232e83;
    text-align:center;
}

.petri-dish {
    text-align:center;
}

@media screen and (max-width: 768px) {
    .petri-dish svg {
        width: 90%;
        padding:0;
    }
    #clarionmicroban .protection, #arenamicroban .protection {
        display:block;
        margin:0;
    }

        #clarionmicroban .protection img, #clarionmicroban .protection svg, #arenamicroban .protection img, #arenamicroban .protection svg {
            height: auto;
            max-height: none;
        }

        #clarionmicroban .protection img, #arenamicroban .protection img {
            width:60%;
        }
        #clarionmicroban .protection svg, #arenamicroban .protection svg {
            width:95%;
        }
    #MicrobanGraphicBox {
        margin: 0 0 2em 0;
    }
}