/* -------------------------------- 

Primary style

-------------------------------- */
#myVideo {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; 
}

.cd-headline {
    font-size: 3.5rem;
    margin-left: 0px;
    text-shadow: #000 1px 1px 2px;
    text-align: center;
    white-space: wrap;
    line-height: 54px;
}

.cd-words-wrapper {
    position: relative;
    margin-top: 20px;
}

.cd-words-wrapper b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    top: 0;
    left: 720px;
    color: #fd7e14;
}

.cd-words-wrapper b.is-visible {
    position: relative;
}

.no-js .cd-words-wrapper b {
    opacity: 0;
}

.no-js .cd-words-wrapper b.is-visible {
    opacity: 1;
}

@media (min-width: 1301px) and (max-width: 1400px) {
.cd-headline {
    font-size: 3.5rem;
    }
.cd-words-wrapper {
    margin-top: 20px;
}
.cd-words-wrapper b {
    position: absolute;
    left: 420px;
    }
.btn-index {
    padding: 12px 28px;
    font-weight: 500;
    font-size: 1.1rem;
    }
}

@media (min-width: 1201px) and (max-width: 1300px) {
.cd-headline {
    font-size: 3.5rem;
    }
.cd-words-wrapper {
    margin-top: 20px;
}
.cd-words-wrapper b {
    position: absolute;
    left: 400px;
    }
.btn-index {
    padding: 12px 28px;
    font-weight: 500;
    font-size: 1.1rem;
    }
}

@media (min-width: 1001px) and (max-width: 1200px) {
.cd-headline {
    font-size: 3rem;
    text-shadow: #000 1px 1px 2px; 
    }
.cd-words-wrapper b {
    position: absolute;
    left: 320px;
    }
.btn-index{
    padding: 12px 28px;
    font-size: 16px;
    }
}

@media (min-width: 901px) and (max-width: 1000px) {
.cd-headline {
    font-size: 3rem;
    text-shadow: #000 1px 1px 2px;
    }
.cd-words-wrapper {
    margin-top: 0px;
    }

.cd-words-wrapper b {
    position: absolute;
    left: 320px;
    }
.btn-index{
    padding: 12px 28px;
    font-size: 16px;
    }
}

 @media (min-width: 768px) and (max-width: 900px) {
.cd-headline {
    font-size: 2.6rem;
    text-shadow: #000 0px 1px 1px; 
    }
.cd-words-wrapper {
    margin-top: 0px;
    }
.cd-words-wrapper b {
    position: absolute;
    left: 260px;
    }
.btn-index{
    padding: 10px 26px;
    font-weight: 500;
    font-size: 15px;
    }
}

@media (min-width: 601px) and (max-width: 767px) {
  .cd-headline {
    font-size: 2.5rem;
    text-shadow: #000 0px 1px 1px; 
    }
.cd-words-wrapper {
    margin-top: 0px;
    }
.cd-words-wrapper b {
    position: absolute;
    left: 150px;
    }
}

@media (min-width: 501px) and (max-width: 600px) {
.cd-headline {
    font-size: 2.2rem;
    text-shadow: #000 0px 1px 1px; 
    }
.cd-words-wrapper {
    margin-top: 0px;
    }
.cd-words-wrapper b {
    position: absolute;
    left: 114px;
    }
}

@media (min-width: 401px) and (max-width: 500px) {
.cd-headline {
    font-size: 2rem;
    text-shadow: #000 0px 1px 1px; 
    line-height: 48px;
    }
.cd-words-wrapper {
    margin-top: 0px;
    }
.cd-words-wrapper b {
    position: absolute;
    left: 60px;
    }
}

@media (min-width: 320px) and (max-width: 400px) {
.cd-headline {
    display: none;
    }
.btn-index{
    display: none;
    }
}

/* -------------------------------- 

xpush 

-------------------------------- */
.cd-headline.push b {
  opacity: 0;
}
.cd-headline.push b.is-visible {
  opacity: 1;
  -webkit-animation: push-in 0.6s;
  -moz-animation: push-in 0.6s;
  animation: push-in 0.6s;
}
.cd-headline.push b.is-hidden {
  -webkit-animation: push-out 0.6s;
  -moz-animation: push-out 0.6s;
  animation: push-out 0.6s;
}

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