.brk-words-rotators {
  display: inline-block;
  position: relative;
  text-align: left; }

.brk-words-rotators b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  font-weight: inherit;
  left: 0;
  top: 0; }

.letters .brk-words-rotators b {
  left: 50%;
  transform: translateX(-50%); }

.brk-words-rotators i,
.brk-words-rotators em {
  font-style: normal; }

.brk-words-rotators b.is-visible {
  position: relative; }

.no-js .brk-words-rotators b {
  opacity: 0; }

.no-js .brk-words-rotators b.is-visible {
  opacity: 1; }

/* -------------------------------- 
  
  xrotate-1 
  
  -------------------------------- */
.brk-headline.rotate-1 .brk-words-rotators {
  perspective: 300px; }

.brk-headline.rotate-1 b {
  opacity: 0;
  transform-origin: 50% 100%;
  transform: rotateX(180deg); }

.brk-headline.rotate-1 b.is-visible {
  opacity: 1;
  transform: rotateX(0deg);
  -webkit-animation: cd-rotate-1-in 1.5s;
  animation: cd-rotate-1-in 1.5s; }

.brk-headline.rotate-1 b.is-hidden {
  transform: rotateX(180deg);
  -webkit-animation: cd-rotate-1-out 1.5s;
  animation: cd-rotate-1-out 1.5s; }

@-webkit-keyframes cd-rotate-1-in {
  0% {
    transform: rotateX(180deg);
    opacity: 0; }
  35% {
    transform: rotateX(120deg);
    opacity: 0; }
  65% {
    opacity: 0; }
  100% {
    transform: rotateX(360deg);
    opacity: 1; } }

@keyframes cd-rotate-1-in {
  0% {
    transform: rotateX(180deg);
    opacity: 0; }
  35% {
    transform: rotateX(120deg);
    opacity: 0; }
  65% {
    opacity: 0; }
  100% {
    transform: rotateX(360deg);
    opacity: 1; } }

@-webkit-keyframes cd-rotate-1-out {
  0% {
    transform: rotateX(0deg);
    opacity: 1; }
  35% {
    transform: rotateX(-40deg);
    opacity: 1; }
  65% {
    opacity: 0; }
  100% {
    transform: rotateX(180deg);
    opacity: 0; } }

@keyframes cd-rotate-1-out {
  0% {
    transform: rotateX(0deg);
    opacity: 1; }
  35% {
    transform: rotateX(-40deg);
    opacity: 1; }
  65% {
    opacity: 0; }
  100% {
    transform: rotateX(180deg);
    opacity: 0; } }

/* -------------------------------- 
  
  xtype 
  
  -------------------------------- */
.brk-headline.type .brk-words-rotators {
  vertical-align: top;
  overflow: hidden; }

.brk-headline.type .brk-words-rotators::after {
  /* vertical bar */
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  height: 90%;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.9); }

.brk-headline.type .brk-words-rotators.waiting::after {
  -webkit-animation: cd-pulse 1s infinite;
  animation: cd-pulse 1s infinite; }

.brk-headline.type .brk-words-rotators.selected {
  background-color: rgba(0, 0, 0, 0.2); }

.brk-headline.type .brk-words-rotators.selected::after {
  visibility: hidden; }

.brk-headline.type .brk-words-rotators.selected b {
  /*base colors*/ }

.brk-headline.type b {
  visibility: hidden; }

.brk-headline.type b.is-visible {
  visibility: visible; }

.brk-headline.type i {
  position: absolute;
  visibility: hidden; }

.brk-headline.type i.in {
  position: relative;
  visibility: visible; }

.brk-headline.type .brk-words-wrapper.selected b {
  color: var(--brand-primary); }

@-webkit-keyframes cd-pulse {
  0% {
    transform: translateY(-50%) scale(1);
    opacity: 1; }
  40% {
    transform: translateY(-50%) scale(0.9);
    opacity: 0; }
  100% {
    transform: translateY(-50%) scale(0);
    opacity: 0; } }

@keyframes cd-pulse {
  0% {
    transform: translateY(-50%) scale(1);
    opacity: 1; }
  40% {
    transform: translateY(-50%) scale(0.9);
    opacity: 0; }
  100% {
    transform: translateY(-50%) scale(0);
    opacity: 0; } }

/* -------------------------------- 
  
  xrotate-2 
  
  -------------------------------- */
.brk-headline.rotate-2 .brk-words-rotators {
  perspective: 300px; }

.brk-headline.rotate-2 i,
.brk-headline.rotate-2 em {
  display: inline-block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.brk-headline.rotate-2 b {
  opacity: 0; }

.brk-headline.rotate-2 i {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -20px) rotateX(90deg);
  opacity: 0; }

.is-visible .brk-headline.rotate-2 i {
  opacity: 1; }

.brk-headline.rotate-2 i.in {
  -webkit-animation: cd-rotate-2-in 0.5s forwards;
  animation: cd-rotate-2-in 0.5s forwards; }

.brk-headline.rotate-2 i.out {
  -webkit-animation: cd-rotate-2-out 0.5s forwards;
  animation: cd-rotate-2-out 0.5s forwards; }

.brk-headline.rotate-2 em {
  transform: translateZ(20px); }

.no-csstransitions .brk-headline.rotate-2 i {
  transform: rotateX(0deg);
  opacity: 0; }

.no-csstransitions .brk-headline.rotate-2 i em {
  transform: scale(1); }

.no-csstransitions .brk-headline.rotate-2 .is-visible i {
  opacity: 1; }

@-webkit-keyframes cd-rotate-2-in {
  0% {
    opacity: 0;
    transform: translateZ(-20px) rotateX(90deg); }
  60% {
    opacity: 1;
    transform: translateZ(-20px) rotateX(-10deg); }
  100% {
    opacity: 1;
    transform: translateZ(-20px) rotateX(0deg); } }

@keyframes cd-rotate-2-in {
  0% {
    opacity: 0;
    transform: translateZ(-20px) rotateX(90deg); }
  60% {
    opacity: 1;
    transform: translateZ(-20px) rotateX(-10deg); }
  100% {
    opacity: 1;
    transform: translateZ(-20px) rotateX(0deg); } }

@-webkit-keyframes cd-rotate-2-out {
  0% {
    opacity: 1;
    transform: translateZ(-20px) rotateX(0); }
  60% {
    opacity: 0;
    transform: translateZ(-20px) rotateX(-100deg); }
  100% {
    opacity: 0;
    transform: translateZ(-20px) rotateX(-90deg); } }

@keyframes cd-rotate-2-out {
  0% {
    opacity: 1;
    transform: translateZ(-20px) rotateX(0); }
  60% {
    opacity: 0;
    transform: translateZ(-20px) rotateX(-100deg); }
  100% {
    opacity: 0;
    transform: translateZ(-20px) rotateX(-90deg); } }

/* -------------------------------- 
  
  xloading-bar 
  
  -------------------------------- */
.brk-headline.loading-bar span {
  display: inline-block;
  padding: .2em 0; }

.brk-headline.loading-bar .brk-words-rotators {
  overflow: hidden;
  vertical-align: top; }

.brk-headline.loading-bar .brk-words-rotators::after {
  /* loading bar */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #ffffff;
  z-index: 2;
  transition: width 0.3s -0.1s; }

.brk-headline.loading-bar .brk-words-rotators.is-loading::after {
  width: 100%;
  transition: width 3s; }

.brk-headline.loading-bar b {
  top: .2em;
  opacity: 0;
  transition: opacity 0.3s; }

.brk-headline.loading-bar b.is-visible {
  opacity: 1;
  top: 0; }

/* -------------------------------- 
  
  xslide 
  
  -------------------------------- */
.brk-headline.slide span {
  display: inline-block; }

.brk-headline.slide .brk-words-rotators {
  overflow: hidden;
  vertical-align: top; }

.brk-headline.slide b {
  opacity: 0;
  top: .2em; }

.brk-headline.slide b.is-visible {
  top: 0;
  opacity: 1;
  -webkit-animation: slide-in 0.6s;
  animation: slide-in 0.6s; }

.brk-headline.slide b.is-hidden {
  -webkit-animation: slide-out 0.6s;
  animation: slide-out 0.6s; }

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  60% {
    opacity: 1;
    transform: translateY(20%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  60% {
    opacity: 1;
    transform: translateY(20%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@-webkit-keyframes slide-out {
  0% {
    opacity: 1;
    transform: translateY(0); }
  60% {
    opacity: 0;
    transform: translateY(120%); }
  100% {
    opacity: 0;
    transform: translateY(100%); } }

@keyframes slide-out {
  0% {
    opacity: 1;
    transform: translateY(0); }
  60% {
    opacity: 0;
    transform: translateY(120%); }
  100% {
    opacity: 0;
    transform: translateY(100%); } }

/* -------------------------------- 
  
  xclip 
  
  -------------------------------- */
.brk-headline.clip span {
  display: inline-block; }

.brk-headline.clip .brk-words-rotators {
  overflow: hidden;
  vertical-align: top; }

.brk-headline.clip .brk-words-rotators::after {
  /* line */
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 1px;
  height: 70%;
  background-color: rgba(255, 255, 255, 0.5); }

.brk-headline.clip b {
  opacity: 0; }

.brk-headline.clip b.is-visible {
  opacity: 1; }

/* -------------------------------- 
  
  xzoom 
  
  -------------------------------- */
.brk-headline.zoom .brk-words-rotators {
  perspective: 300px; }

.brk-headline.zoom b {
  opacity: 0; }

.brk-headline.zoom b.is-visible {
  opacity: 1;
  -webkit-animation: zoom-in 0.8s;
  animation: zoom-in 0.8s; }

.brk-headline.zoom b.is-hidden {
  -webkit-animation: zoom-out 0.8s;
  animation: zoom-out 0.8s; }

@-webkit-keyframes zoom-in {
  0% {
    opacity: 0;
    transform: translateZ(100px); }
  100% {
    opacity: 1;
    transform: translateZ(0); } }

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: translateZ(100px); }
  100% {
    opacity: 1;
    transform: translateZ(0); } }

@-webkit-keyframes zoom-out {
  0% {
    opacity: 1;
    transform: translateZ(0); }
  100% {
    opacity: 0;
    transform: translateZ(-100px); } }

@keyframes zoom-out {
  0% {
    opacity: 1;
    transform: translateZ(0); }
  100% {
    opacity: 0;
    transform: translateZ(-100px); } }

/* -------------------------------- 
  
  xrotate-3 
  
  -------------------------------- */
.brk-headline.rotate-3 .brk-words-rotators {
  perspective: 250px; }

.brk-headline.rotate-3 b {
  opacity: 0; }

.brk-headline.rotate-3 i {
  display: inline-block;
  transform: translateX(150%) rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.is-visible .brk-headline.rotate-3 i {
  transform: translateX(0%) rotateY(0deg); }

.brk-headline.rotate-3 i.in {
  -webkit-animation: cd-rotate-3-in 0.8s forwards;
  animation: cd-rotate-3-in 0.8s forwards; }

.brk-headline.rotate-3 i.out {
  -webkit-animation: cd-rotate-3-out 0.8s forwards;
  animation: cd-rotate-3-out 0.8s forwards; }

.no-csstransitions .brk-headline.rotate-3 i {
  transform: translateX(0%) rotateY(0deg);
  opacity: 0; }

.no-csstransitions .brk-headline.rotate-3 .is-visible i {
  opacity: 1; }

@-webkit-keyframes cd-rotate-3-in {
  0% {
    transform: translateX(150%) rotateY(180deg); }
  100% {
    transform: translateX(0%) rotateY(0deg); } }

@keyframes cd-rotate-3-in {
  0% {
    transform: translateX(150%) rotateY(180deg); }
  100% {
    transform: translateX(0%) rotateY(0deg); } }

@-webkit-keyframes cd-rotate-3-out {
  0% {
    transform: rotateY(0); }
  100% {
    transform: translateX(-150%) rotateY(-180deg); } }

@keyframes cd-rotate-3-out {
  0% {
    transform: rotateY(0); }
  100% {
    transform: translateX(-150%) rotateY(-180deg); } }

/* -------------------------------- 
  
  xscale 
  
  -------------------------------- */
.brk-headline.scale b {
  opacity: 0; }

.brk-headline.scale i {
  display: inline-block;
  opacity: 0;
  transform: scale(0); }

.is-visible .brk-headline.scale i {
  opacity: 1; }

.brk-headline.scale i.in {
  -webkit-animation: scale-up 0.6s forwards;
  animation: scale-up 0.6s forwards; }

.brk-headline.scale i.out {
  -webkit-animation: scale-down 0.6s forwards;
  animation: scale-down 0.6s forwards; }

.no-csstransitions .brk-headline.scale i {
  transform: scale(1);
  opacity: 0; }

.no-csstransitions .brk-headline.scale .is-visible i {
  opacity: 1; }

@-webkit-keyframes scale-up {
  0% {
    transform: scale(0);
    opacity: 0; }
  60% {
    transform: scale(1.2);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 1; } }

@keyframes scale-up {
  0% {
    transform: scale(0);
    opacity: 0; }
  60% {
    transform: scale(1.2);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 1; } }

@-webkit-keyframes scale-down {
  0% {
    transform: scale(1);
    opacity: 1; }
  60% {
    transform: scale(0);
    opacity: 0; } }

@keyframes scale-down {
  0% {
    transform: scale(1);
    opacity: 1; }
  60% {
    transform: scale(0);
    opacity: 0; } }

/* -------------------------------- 
  
  xpush 
  
  -------------------------------- */
.brk-headline.push b {
  opacity: 0; }

.brk-headline.push b.is-visible {
  opacity: 1;
  -webkit-animation: push-in 0.6s;
  animation: push-in 0.6s; }

.brk-headline.push b.is-hidden {
  -webkit-animation: push-out 0.6s;
  animation: push-out 0.6s; }

@-webkit-keyframes push-in {
  0% {
    opacity: 0;
    transform: translateX(-100%); }
  60% {
    opacity: 1;
    transform: translateX(10%); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes push-in {
  0% {
    opacity: 0;
    transform: translateX(-100%); }
  60% {
    opacity: 1;
    transform: translateX(10%); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@-webkit-keyframes push-out {
  0% {
    opacity: 1;
    transform: translateX(0); }
  60% {
    opacity: 0;
    transform: translateX(110%); }
  100% {
    opacity: 0;
    transform: translateX(100%); } }

@keyframes push-out {
  0% {
    opacity: 1;
    transform: translateX(0); }
  60% {
    opacity: 0;
    transform: translateX(110%); }
  100% {
    opacity: 0;
    transform: translateX(100%); } }

.brk-headline_mask {
  padding: 5px 25px;
  border-radius: 700px;
  background: #fff;
  color: #000;
  mix-blend-mode: lighten;
  display: inline-flex !important;
  align-items: center; }
  .brk-headline_mask .brk-words-rotators {
    color: inherit; }

.brk-headline__sample {
  padding: 100px 0;
  text-align: center;
  background-position: center;
  background-size: cover;
  border-radius: 10px; }

.brk-headline_mask.rotate-1 {
  padding-right: 0;
  padding-left: 60px !important; }

.brk-headline_mask.slide {
  padding-right: 0;
  padding-left: 50px !important; }
  .brk-headline_mask.slide .brk-words-rotators {
    padding: 0; }

.brk-headline.zoom .brk-words-rotators {
  text-align: center; }

@media screen and (max-width: 600px) {
  .brk-typing-rotator h1, .brk-typing-rotator h2 {
    font-size: 28px; } }