@font-face {
  font-family: 'SF Pro', sans-serif;
  src: url("/sites/cato.org/files/Fonts/SF-Pro-Text-Light.otf");
}

.custom-heading {
  font-weight: bold;
  font-size: 5rem;
  position: relative;
  padding: 1rem;
}

@media screen and (max-width:768px) {
  .custom-heading {
    font-size:3rem;
    padding:0.875rem;
  }
}

.custom-pullquote {
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    padding-top: 25px;
}

.custom-font-weight {
  font-weight:bold;
}

.custom-research-text {
  padding-top: 25px;
  width: 90%;
  margin: 0 auto;
}

.glass-box {
  border-radius: 16px;
  font-size: 1.675rem;
  padding:26px;
  background: linear-gradient(270deg, rgba(10, 10, 10, 0.80), rgba(20, 20, 20, 1));
background-size: 400% 400%;

    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 11s ease infinite;
    animation: AnimationName 10s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.glass-box-secondary {
  font-size: 1.675rem;
  padding:26px;
  background: linear-gradient(270deg, rgba(97, 87, 79, 0.80), rgba(2, 2, 2, 0.80));
background-size: 400% 400%;

    -webkit-animation: AnimationName 10s ease-in-out;
    -moz-animation: AnimationName 10s ease-in-out ;
    animation: AnimationName 10s ease-in-out;
    animation-iteration-count:1;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.sf-pro {
  font-family: 'SF Pro', sans-serif;
}

.spacer--jumbo--top {
  margin-top: 30vh;
}

.red-bg-box {
  font-size: 1.675rem;
  padding:26px;
  background: #8D0208;
}

.emphasize-text {
  font-size: 3rem;
  line-height:130%;
  margin: 0px 8px;
  font-weight: 900;
  background: url(/sites/cato.org/files/2022-05/cargo_containers%20%282%29-min.png);
  background-size: 40%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  color: rgba(0,0,0,0.08);
  animation: zoom-in-zoom-out 15s ease-out infinite;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}