html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  box-sizing: border-box;
  overflow-x: hidden;
}
body {
  font-family: lato, sans-serif;
}
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
  :root {
    --mwd-dark-blue: #2D368E;
    --mwd-gray: #707070;
  }
  dialog {
    border: 0;
    background: transparent;
  }
  #contact-dialog::backdrop, #youtube::backdrop {
    background-color: rgba(28, 5, 72, 0.5);
  }
  .close {
    float: right;
    cursor: pointer;
  }
  header {
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    position: sticky;
    width: 100%;
    top: 0px;
    background: white;
    z-index: 5;
  }
  h2, h3, h4, h5 {
    font-family: komet, sans-serif;
    color: #707070;
    text-wrap: balance;
  }
  .section-title {
    font-family: rafaella, sans-serif;
    color: #2D368E;
    font-size: clamp(24px, 3vw, 72px);
    text-align: center;
  }
  .logo img {
    padding: 1em 0;
    text-align: left;
    width: clamp(250px, 15vw, 400px);
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
  }
  .nav {
    position: absolute;
    left: 0;
    width: 100vw;
  }
  nav {
    display: none;
    position: absolute;
    top: 65px;
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    z-index: 2;
  }
  nav a {
    display: block;
    border-bottom: 1px solid var(--mwd-gray);
    padding: 10px 20px;
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    transform: skew(-10deg);
    text-transform: uppercase;
    color: var(--mwd-dark-blue);
    font-size: 0.8em;
    padding: 0.75em;
    text-align: right;
  }
  #menubutton {
    display: block;
    position: absolute;
    top: 25px;
    right: 10px;
    width: 30px;
    height: 30px;
    z-index: 3;
  }
  .show {
    display: block;
    height: auto;
  }
  .banner-curve {
    -webkit-mask-image: url('../img/about-path.svg');
    mask-image: url('../img/about-path.svg');
    mask-type: luminance;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top;
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: top;
}
  .banner-title {
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    flex-direction: column;
  }
  .banner h1, .short-banner h1 {
    font-family: "antipoda-variable",sans-serif;
    font-variation-settings: 'wdth' 150, 'wght' 900;
    font-size: clamp(36px, 4vw, 120px);
    color: white;
    max-width: 1000px;
    text-align: center;
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    padding: 1em 0;
}
  #home .banner-still {
    background: url('../img/home-tech-bg.webp');
    background-size: cover;
    background-position: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%);
  }
  #home .banner {
    background:  url('../img/home-watercolor.webp') no-repeat;
    background-position: center;
    background-size: cover;
  }
  #about .banner {
    background-image:  url('../img/banner-about.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .about-presenting {
    background: url('../img/about-street.jpg') no-repeat bottom;
    background-size: cover;
    padding: 3em 2em;
  }
  .about-intro-text {
    background: rgba(255, 255, 255, 0.8);
    padding: 2em;
    border-radius: 15px;
  }
  #portfolio .banner {
    background: url('../img/banner-portfolio.webp') no-repeat bottom;
    background-size: cover;
    padding: 3em 2em;
  }
  #webdesign .banner {
    background: linear-gradient(75deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 25%, transparent 25%), url('../img/banner-webdesign.webp');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    padding: 3em 2em;
  }
  #photography .banner {
    background: linear-gradient(75deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 25%, transparent 25%), url('../img/photography-filmnotch.png'), url('../img/photography-filmnotch.png'), url('../img/banner-photography.webp');
    background-repeat: no-repeat, repeat-x, repeat-x, no-repeat;
    background-position-y: bottom, 97%, 3%, bottom;
    background-size: cover, auto, auto, cover;
    padding: 3em 2em;
  }
  #content .banner {
    background: linear-gradient(75deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 25%, transparent 25%), url('../img/banner-copywriting.webp');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    padding: 3em 2em;
  }
  #seo .banner {
    background: linear-gradient(75deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 25%, transparent 25%), url('../img/banner-seo.webp');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    padding: 3em 2em;
  }
  #email-marketing .banner {
    background: linear-gradient(75deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 25%, transparent 25%), url('../img/banner-emailmarketing.webp');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    padding: 3em 2em;
  }
  #three-d .banner {
    background: linear-gradient(75deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 25%, transparent 25%), url('../img/banner-3d.webp');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    padding: 3em 2em;
  }
  #techniques .short-banner {
    background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.25)), url('../img/banner-techniques.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: darken;
    padding: 3em 2em;
  }
  .techniques h4+p+ol>li {
    font-weight: bold;
    margin-bottom: 2em;
  }
 .techniques ol[type='a'] {
    font-weight: normal;
  }
  .short-banner h1 {
    font-size: clamp(18px, 2.5vw, 90px);
  }
  .short-banner h2 {
    margin: 0;
    color: white;
    text-align: center;
  }
  .info .row {
    display: flex;
  }
  .infobox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  #webdesign .infobox {
    background-image: linear-gradient( to top, #a4eba3 20%, transparent 50%);
  }
  .bar {
    position: relative;
    font-family: rafaella, serif;
    font-size: clamp(24px, 36px, 2.5rem);
    text-align: center;
    border-top: 4px solid var(--mwd-gray);
    border-bottom: 4px solid var(--mwd-gray);
    padding: 1rem 0;
    color: var(--mwd-gray);
    margin: 2em auto 1.5em;
    padding-bottom: 10px;
  }
  .bar::before {
    content: url('../img/icon-web.svg');
    position: absolute;
    top: 2px;
    left: 0px;
    width: 80px;
    height: 80px;
  }
  .iconmenu {
    box-shadow: inset 0px 12px 7px -7px rgba(0, 0, 0, 0.2), inset 0px -12px 7px -7px rgba(0, 0, 0, 0.2);
  }
  #website .bar::before {
    content: url('../img/icon-web.svg');
  }
  #photography .bar::before {
    content: url('../img/icon-photo.svg');
  }
  #content .bar::before {
    content: url('../img/icon-write.svg');
  }
  #seo .bar::before {
    content: url('../img/icon-seo.svg');
  }
  #email-marketing .bar::before {
    content: url('../img/icon-mail.svg');
  }
  #three-d .bar::before {
    content: url('../img/icon-3d.svg');
  }
  #content .intromain-bg {
    background: url('../img/content-blob.png') no-repeat center;
    background-size: 70%;
  }
  .content-marketing {
    background-image: linear-gradient(to top, #fff, transparent 15%), linear-gradient(to bottom, #fff, transparent 15%), radial-gradient(#fff, #C5D9AD);
    padding: 3em 0;
    margin: 3em 0;
  }
  .infobox {
    display: flex;
    flex-direction: column;
  }
  #photography .info-icon {
    display: flex;
    height: 100%;
  }
  .freecontact .col {
    padding: 2em 3vw;
    text-align: center;
  }
  .freecontact p {
    font-family: rafaella;
    font-size: clamp(24px, 36px, 2.5rem);
    color: var(--mwd-gray);
  }
  .iconmenu {
    padding: 2em 3vw;
    text-align: center;
  }
  .iconmenu a {
    display: inline-block;
  }
  .iconmenu a:hover {
    background-image: radial-gradient(orange, white 70%);
  }
  .iconmenu div {
    margin: 0px 5px 50px;
    display: inline;
    position: relative;
  }
  .iconmenu div::after {
    content: attr(data-caption);
    font-size: 9px;
    text-transform: uppercase;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
  }
  .iconmenu img {
    width: 80px;
    height: 80px;
  }
  .headline {
    text-align: center;
    margin: 3em 0;
    text-wrap: balance;
  }
  .home-intro {
    background: rgb(2, 166, 155, 0.2) url('../img/services-bg.png');
    padding: 2em 0;
  }
  .branding {
    position: relative;
  }
  .branding-bottom::before {
    content: url('../img/brand.svg');
    width: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -35px;
    z-index: 2;
  }
  .branding-top::before {
    content: url('../img/brand.svg');
    width: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -25px;
    z-index: 2;
  }
  .scratch {
    text-align: center;
    padding: 2em 0;
  }
  .btn {
    transform: skew(-10deg);
    border-radius: 0px;
    background-color: var(--mwd-dark-blue);
  }
  .card {
    margin: 2em 0;
  }
  .card-btn {
    display: flex;
    justify-content: center;
    padding-bottom: 1em;
  }
  .btn-success {
    background: #03A696;
  }
  h5.card-title {
    color: var(--mwd-gray);
  }
  .subhead, .section-title {
    margin: 1em 0;
  }
  @keyframes slideby {
    from { background-position: 0% 100%; }
    to { background-position: 100% 100%; }
  }
  .freecontact {
      margin: 5vh 0;
  }
  .blurb {
    background-size: cover;
    place-content: center;
    padding: 2em 3vw;
    margin-bottom: 2vw;
  }
  .blurb-silk {
    mask-image: url('../img/blurb-silk.svg');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top;
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center; 
  }
  .blurb p, .services-blurb p {
    font-family: komet, sans-serif;
    font-size: clamp(2em, 2vw, 36px);
    font-weight: 900;
    text-align: center;
    max-width: 800px;
    margin: 3vw auto;
    text-wrap: balance;
  }
  .services-blurb {
      background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url('../img/separator.jpg'), linear-gradient(pink, rgb(2, 166, 155, 0.7));
      background-size: cover, 80%, cover;
      background-repeat: no-repeat;
      background-position: center;
      background-blend-mode: lighten, multiply;
      color: var(--mwd-dark-blue);
      place-content: center;
      padding: 3em 3vw;
      display: flex;
  }
  #home .blurb {
    background: url('../img/radial-burst.jpg') no-repeat center;
    background-size: cover;
    color: white;
    place-content: center;
    padding: 2em 3vw;
    display: flex;
    clip-path: ellipse(100% 40%);
  }
  #three-d .blurb {
    background-image: url('../img/3d-blurb.jpg');
    background-position: center;
    background-size: cover;
  }
  #three-d .blurb p {
      background: rgba(200,255,50,0.7);
  }
  #seo .blurb {
    background-image: url('../img/seo-grass.jpg');
    background-position: center;
    background-size: cover;
  }
  .blurb-seo {
    mask-image: url('../img/seo-cloud-mask.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
  }
  #seo .blurb p {
    color: white;
    text-shadow: 0 0 3px #0e6600;
    -webkit-text-stroke: 2px #0e6600;
  }
  #email-marketing .blurb {
    background-image: url('../img/email-adage-bg.jpg');
    color: white;
    background-position: center;
    background-size: cover;
  }
  #photography .blurb {
    background-image: url('../img/photography-satin-white.jpg');
    background-position: center;
    background-size: cover;
  }
  #photography .blurb p {
    color: #005B8B;
  }
  .services-intro {
    background: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4)),url('../img/services-bg-50.jpg');
    background-blend-mode: lighten;
    padding: 2em 1em;
  }
  .carousel-inner {
    padding: 1em;
    align-content: stretch;
  }
  .carousel .card-img-top {
    border-radius: 50%;
    width: 60%;
    height: auto;
    margin: 1em auto;
  }
  .carousel .caption {
    font-size: 0.6em;
    text-transform: uppercase;
    text-align: center;
  }
  .carousel .card {
    margin: 0em .5em 1em;
    display: flex;
    justify-content: center;
  }
  img {
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
  }
  .top-quality-stamp {
    width: 100%;
    padding: 2em 0;
    text-align: center;
    & img {
      max-width: 150px;
      opacity: 0.7;
      height: auto;
    }
  }
  .about-transform {
    padding: 4em 0;
    background: rgba(255, 255, 255, 0.5) url('../img/about-transform.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-blend-mode: lighten;
  }
  .about-transform-text {
    padding: 2em;
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
  }
  .portfolio-web {
    background-image: url('../img/sample-web.png'), linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('../img/portfolio-clouds.jpg');
    background-size: 100%, cover, cover;
    background-blend-mode: darken, lighten, normal;
    background-position: top center, center, center;
    background-repeat: no-repeat;
    padding: 10vw 0;
  }
  .portfolio-web .col {
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr;
  }
  .websample {
    background: white;
    padding: 0;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
    box-shadow: 0px, 0px, 0px, rgba(0, 0, 0, 0.2);
    & img {
      aspect-ratio: 3/2;
      width: 100%;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    & .sample-text {
      padding: 0.5em 0.75em;
      border-top: 2px solid purple;
      & p {
        font-size: 0.8rem;
        color: var(--mwd-gray);
      }
      h5 {
        font-size: 0.8rem;
        text-transform: uppercase;
        margin-bottom: 5px;
      }
    }
  }
  .websample:hover {
    transform: scale(1.05) rotate(-2deg);
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.7);
  }
  .portfolio-graphic {
    background-image: url('../img/sample-graphic.png'), url('../img/portfolio-splatter-green.jpg'), url('../img/portfolio-splatter-purple.jpg');
    background-size: 100%, auto, auto;
    background-repeat: no-repeat;
    background-position: top, top 10% right 3%, left 0% bottom 10%;
    padding: 10vw 0;
    text-align: center;
    & p {
      text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #fff;
    }
  }
  .portfolio-video {
    background-image: url('../img/sample-video.png'), url('../img/portfolio-filmstrip.png'), url('../img/portfolio-premium-seal.png'), radial-gradient(#DBD0FF, #DBD0FF);
    background-position: top, bottom 0px right -20px, left 5px bottom 40%, center;
    background-size: 100%, auto, auto, auto;
    background-repeat: no-repeat;
    padding: 10vw 0;
  }
  .portfolio-video .col {
    display: grid;
  }
  #portfolio .letstalk {
    padding: 3em 0;
    display: flex;
    place-content: center;
    text-align: center;
  }
  .portfolio-video img {
    border-radius: 20px;
    box-shadow: 10px 10px 15px rgba(0,0,0,0.4);
  }
  .portfolio-video p {
    margin: 0.5em auto;
    text-shadow: 0 0 2px white;
  }
  .form-box {
    background-color: #F8F8F8;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 30px;
  }
  .form-title {
    font-family: komet, sans-serif;
    font-size: 1.7em;
    text-align: center;
    color: var(--mwd-dark-blue);
  }
  .btn-form {
    transform: none;
    display: inline-block;
    color: white;
    font-family: komet, sans-serif;
    font-size: 1.7em;
    padding: 0 40px;
  }
  .form-label {
    color: #707070;
    text-transform: uppercase;
    font-size: .7em;
  }
  .form-buttons {
    display: flex;
  }
  .sent-message {
    color: orangered;
    text-align: right;
    visibility: hidden;
  }
  footer {
    padding: 20px 2vw;
    background: url('../img/footer-miami.jpg') no-repeat;
    background-size: cover;
  }
  .footer-col1 {
    display: flex;
    flex-direction: column;
  }
  .footer-col2 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .footer-col3 {
    display: flex;
    justify-content: space-around;
  }
  address, footer p.phone {
    margin-left: 45px;
    color: var(--mwd-dark-blue);
  }
  footer p.phone {
    font-weight: bold;
    color: white;
  }
  .youtube frame {
    max-width: 100%;
  }
  
  /*=====  3D samples ===== */
  .smallsamples {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
  }
  .smallsamples a {
    width: 49%;
    margin-right: 2px;
  }
  .smallsamples img {
      max-width: 100%;
      border: 3px solid white;
      border-radius: 20px;
  }
  .smallsamples img:hover {
      border: 3px solid orange;
  }

/* ==========================================================================
   Helper classes
   ========================================================================== */
.hidden,
[hidden] {
  display: none !important;
}
.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}
.invisible {
  visibility: hidden;
}
.visible {
  visibility: visible;
}
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.center {
  text-align: center;
  margin: auto;
  justify-self: center;
}
/* Small devices (landscape phones, 576px and up) */
@media only screen and (min-width: 576px) {
  #testimonials .container {
    position: relative;
  }
  .carousel {
    scrollbar-width: none;
  }
  .carousel-inner {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
  }
  .carousel .card {
    display: block;
    margin-right: 1em;
    flex: 0 0 calc(100%/4);
    display: flex;
    justify-content: center;
    background-color: #fbfbfb;
    height: auto;
    min-width: 300px;
  }
  .carousel-control-prev, .carousel-control-next {
    width: 6vh;
    height: 6vh;
    background-color: var(--mwd-dark-blue);
    opacity: 0.7;
    border-radius: 50%;
    top: 50%;
  }
  .carousel-control-prev {
    transform: translate(-2em, -50%);
  }
  .carousel-control-next {
    transform: translate(2em, -50%);
  }
  .portfolio-web .col {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(2, 1fr);
  }
  .websample:first-of-type {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    & .sample-text {
      & p {
        font-size: 1rem;
      }
      h5 {
        font-size: 1.2rem;
      }
    }
  }

}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  header .row {
    padding: 0 2vw;
  }
  .banner {
    width: 100%;
    aspect-ratio: 100 / 40;
    margin-top: 0px;
    align-content: center;
    justify-content: center;
    display: flex;
  }
  #home .banner {
    background:  url('../img/home-watercolor.webp');
    background-size: cover;
    background-position: center;
    background-repeat: repeat-x;
	  animation: slideby 120s linear infinite;
  }
  #home .banner-symbols {
    background: url('../img/home-herosymbols.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    display: flex;
    place-content: center;
    flex-wrap: wrap;
  }
  .portfolio-web .col {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(4, 1fr);
  }
  .portfolio-video {
    background-image: url('../img/sample-video.png'), url('../img/portfolio-filmstrip.png'), url('../img/portfolio-premium-seal.png'), radial-gradient(#DBD0FF, #DBD0FF);
    background-position: top, bottom 0px right -20px, left -10px bottom 40%, center;
    background-repeat: no-repeat;
    background-blend-mode: normal, normal, multiply, normal;
    padding: 10vw 0;
  }
  .portfolio-video .col {
    gap: 2em;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
  }

  .center-img-y {
    align-content: center;
  }
  footer p.phone {
    color: var(--mwd-dark-blue);
  }
}
/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .nav {
    display: flex;
    position: relative;
    height: auto;
    width: 50%;
    align-content: center;
    justify-content: right;
    left: auto;
  }
  nav {
    position: relative;
    top: 0;
    background-color: transparent;
    display: block;
    width: auto;
    height: auto;
  }
  nav a {
    display: inline-block;
    background: transparent;
    border-bottom: 0;
    padding: 0 10px;
    border-right: 1px solid var(--mwd-gray);
    transform: skewX(-15deg);
  }
  nav a:last-child {
    border: 0;
    padding-right: 0;
  }
  nav a:link, nav a:visited {
    color: gray;
  }
  #menubutton {
    display: none;
  }
  .card {
    height: 100%;
  }
  nav a:hover {
    background-image: -moz-linear-gradient(to right, #ffffff, #efefef); 
    background-image: -webkit-linear-gradient(to right, #ffffff, #efefef); 
    background-image: linear-gradient(to right, #ffffff, #efefef); 
  }
  .home-desk {
    background: url('../img/webdesign-10d.jpg') no-repeat top right;
    height: auto;
    background-size: cover;
  }
  .home-desk-view {
    background: url('../img/website-desk-view.jpg') no-repeat center;
    height: auto;
    background-size: cover;
  }
  .home-desk a, .home-desk-view a {
    display: block;
    height: 100%;
  }
  .home-intro-text {
    max-width: 600px;
  }
  .home-intro-btns {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .portfolio-video .col {
    grid-template-columns: repeat(3, 1fr);
  }

  .card {
    margin: 0;
  }
  footer {
    aspect-ratio: 2.78 / 1;
  }
  footer .footer-col1 img {
    max-width: 300px;
    height: auto;
  }
  .footer-col1 {
    flex-direction: column;
  }
  address, footer.phone {
    color: white;
  }
}
/* X-Large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .branding::before {
    bottom: -25px;
    z-index: 2;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {

}

@media only screen and (min-width: 35em) {

}

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}