.vegas-wrapper,
.vegas-overlay,
.vegas-timer,
.vegas-slide,
.vegas-slide-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
border: none;
padding: 0;
margin: 0;
}
.vegas-overlay {
opacity: .5;
}
.vegas-overlay-01 .vegas-overlay{
background: transparent url(//majuhoki.com/wp-content/themes/wavo/js/plugins/vegas/overlays/01.png) center center repeat;
}
.vegas-overlay-02 .vegas-overlay{
background: transparent url(//majuhoki.com/wp-content/themes/wavo/js/plugins/vegas/overlays/02.png) center center repeat;
}
.vegas-overlay-03 .vegas-overlay{
background: transparent url(//majuhoki.com/wp-content/themes/wavo/js/plugins/vegas/overlays/03.png) center center repeat;
}
.vegas-overlay-04 .vegas-overlay{
background: transparent url(//majuhoki.com/wp-content/themes/wavo/js/plugins/vegas/overlays/04.png) center center repeat;
}
.vegas-overlay-05 .vegas-overlay{
background: transparent url(//majuhoki.com/wp-content/themes/wavo/js/plugins/vegas/overlays/05.png) center center repeat;
}
.vegas-overlay-06 .vegas-overlay{
background: transparent url(//majuhoki.com/wp-content/themes/wavo/js/plugins/vegas/overlays/06.png) center center repeat;
}
.vegas-overlay-07 .vegas-overlay{
background: transparent url(//majuhoki.com/wp-content/themes/wavo/js/plugins/vegas/overlays/07.png) center center repeat;
}
.vegas-overlay-08 .vegas-overlay{
background: transparent url(//majuhoki.com/wp-content/themes/wavo/js/plugins/vegas/overlays/08.png) center center repeat;
}
.vegas-overlay-09 .vegas-overlay{
background: transparent url(//majuhoki.com/wp-content/themes/wavo/js/plugins/vegas/overlays/09.png) center center repeat;
}
.vegas-timer {
top: auto;
bottom: 0;
height: 5px;
display:none;
}
.vegas-timer-progress {
width: 0%;
height: 100%;
background: white;
transition: width ease-out;
}
.vegas-timer-running .vegas-timer-progress {
width: 100%;
}
.vegas-slide,
.vegas-slide-inner {
margin: 0;
padding: 0;
background: transparent center center no-repeat;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform, opacity;
}
.wavo-vegas-slider.vegas-yes .vegas-container {
overflow: hidden !important;
position: absolute;
height: 100%!important;
width: 100%!important;
}
.wavo-vegas-slider.vegas-yes .vegas-video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}    .vegas-transition-blur,
.vegas-transition-blur2 {
opacity: 0;
-webkit-filter: blur(32px) brightness(1.01);
filter: blur(32px) brightness(1.01);
}
.vegas-transition-blur-in,
.vegas-transition-blur2-in {
opacity: 1;
-webkit-filter: blur(0px) brightness(1.01);
filter: blur(0px) brightness(1.01);
}
.vegas-transition-blur2-out {
opacity: 0;
}   .vegas-transition-burn,
.vegas-transition-burn2 {
opacity: 0;
-webkit-filter: contrast(1000%) saturate(1000%);
filter: contrast(1000%) saturate(1000%);
}
.vegas-transition-burn-in,
.vegas-transition-burn2-in {
opacity: 1;
-webkit-filter: contrast(100%) saturate(100%);
filter: contrast(100%) saturate(100%);
}
.vegas-transition-burn2-out {
opacity: 0;
-webkit-filter: contrast(1000%) saturate(1000%);
filter: contrast(1000%) saturate(1000%);
}   .vegas-transition-fade,
.vegas-transition-fade2 {
opacity: 0;
}
.vegas-transition-fade-in,
.vegas-transition-fade2-in {
opacity: 1;
}
.vegas-transition-fade2-out {
opacity: 0;
}   .vegas-transition-flash,
.vegas-transition-flash2 {
opacity: 0;
-webkit-filter: brightness(25);
filter: brightness(25);
}
.vegas-transition-flash-in,
.vegas-transition-flash2-in {
opacity: 1;
-webkit-filter: brightness(1);
filter: brightness(1);
}
.vegas-transition-flash2-out {
opacity: 0;
-webkit-filter: brightness(25);
filter: brightness(25);
}   .vegas-transition-negative,
.vegas-transition-negative2 {
opacity: 0;
-webkit-filter: invert(100%);
filter: invert(100%);
}
.vegas-transition-negative-in,
.vegas-transition-negative2-in {
opacity: 1;
-webkit-filter: invert(0);
filter: invert(0);
}
.vegas-transition-negative2-out {
opacity: 0;
-webkit-filter: invert(100%);
filter: invert(100%);
}   .vegas-transition-slideDown,
.vegas-transition-slideDown2 {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.vegas-transition-slideDown-in,
.vegas-transition-slideDown2-in {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
.vegas-transition-slideDown2-out {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}   .vegas-transition-slideLeft,
.vegas-transition-slideLeft2 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.vegas-transition-slideLeft-in,
.vegas-transition-slideLeft2-in {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.vegas-transition-slideLeft2-out {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}   .vegas-transition-slideRight,
.vegas-transition-slideRight2 {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.vegas-transition-slideRight-in,
.vegas-transition-slideRight2-in {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.vegas-transition-slideRight2-out {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}   .vegas-transition-slideUp,
.vegas-transition-slideUp2 {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.vegas-transition-slideUp-in,
.vegas-transition-slideUp2-in {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
.vegas-transition-slideUp2-out {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}   .vegas-transition-swirlLeft,
.vegas-transition-swirlLeft2 {
-webkit-transform: scale(2) rotate(35deg);
transform: scale(2) rotate(35deg);
opacity: 0;
}
.vegas-transition-swirlLeft-in,
.vegas-transition-swirlLeft2-in {
-webkit-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
opacity: 1;
}
.vegas-transition-swirlLeft2-out {
-webkit-transform: scale(2) rotate(-35deg);
transform: scale(2) rotate(-35deg);
opacity: 0;
}   .vegas-transition-swirlRight,
.vegas-transition-swirlRight2 {
-webkit-transform: scale(2) rotate(-35deg);
transform: scale(2) rotate(-35deg);
opacity: 0;
}
.vegas-transition-swirlRight-in,
.vegas-transition-swirlRight2-in {
-webkit-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
opacity: 1;
}
.vegas-transition-swirlRight2-out {
-webkit-transform: scale(2) rotate(35deg);
transform: scale(2) rotate(35deg);
opacity: 0;
}   .vegas-transition-zoomIn,
.vegas-transition-zoomIn2 {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.vegas-transition-zoomIn-in,
.vegas-transition-zoomIn2-in {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.vegas-transition-zoomIn2-out {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}   .vegas-transition-zoomOut,
.vegas-transition-zoomOut2 {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
.vegas-transition-zoomOut-in,
.vegas-transition-zoomOut2-in {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.vegas-transition-zoomOut2-out {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}   .vegas-animation-kenburns {
-webkit-animation: kenburns ease-out;
animation: kenburns ease-out;
}
@-webkit-keyframes kenburns {
0% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns {
0% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}   .vegas-animation-kenburnsDownLeft {
-webkit-animation: kenburnsDownLeft ease-out;
animation: kenburnsDownLeft ease-out;
}
@-webkit-keyframes kenburnsDownLeft {
0% {
-webkit-transform: scale(1.5) translate(10%, -10%);
transform: scale(1.5) translate(10%, -10%);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsDownLeft {
0% {
-webkit-transform: scale(1.5) translate(10%, -10%);
transform: scale(1.5) translate(10%, -10%);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsDownRight {
-webkit-animation: kenburnsDownRight ease-out;
animation: kenburnsDownRight ease-out;
}
@-webkit-keyframes kenburnsDownRight {
0% {
-webkit-transform: scale(1.5) translate(-10%, -10%);
transform: scale(1.5) translate(-10%, -10%);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsDownRight {
0% {
-webkit-transform: scale(1.5) translate(-10%, -10%);
transform: scale(1.5) translate(-10%, -10%);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsDown {
-webkit-animation: kenburnsDown ease-out;
animation: kenburnsDown ease-out;
}
@-webkit-keyframes kenburnsDown {
0% {
-webkit-transform: scale(1.5) translate(0, -10%);
transform: scale(1.5) translate(0, -10%);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsDown {
0% {
-webkit-transform: scale(1.5) translate(0, -10%);
transform: scale(1.5) translate(0, -10%);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsLeft {
-webkit-animation: kenburnsLeft ease-out;
animation: kenburnsLeft ease-out;
}
@-webkit-keyframes kenburnsLeft {
0% {
-webkit-transform: scale(1.5) translate(10%, 0);
transform: scale(1.5) translate(10%, 0);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsLeft {
0% {
-webkit-transform: scale(1.5) translate(10%, 0);
transform: scale(1.5) translate(10%, 0);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsRight {
-webkit-animation: kenburnsRight ease-out;
animation: kenburnsRight ease-out;
}
@-webkit-keyframes kenburnsRight {
0% {
-webkit-transform: scale(1.5) translate(-10%, 0);
transform: scale(1.5) translate(-10%, 0);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsRight {
0% {
-webkit-transform: scale(1.5) translate(-10%, 0);
transform: scale(1.5) translate(-10%, 0);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsUpLeft {
-webkit-animation: kenburnsUpLeft ease-out;
animation: kenburnsUpLeft ease-out;
}
@-webkit-keyframes kenburnsUpLeft {
0% {
-webkit-transform: scale(1.5) translate(10%, 10%);
transform: scale(1.5) translate(10%, 10%);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsUpLeft {
0% {
-webkit-transform: scale(1.5) translate(10%, 10%);
transform: scale(1.5) translate(10%, 10%);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsUpRight {
-webkit-animation: kenburnsUpRight ease-out;
animation: kenburnsUpRight ease-out;
}
@-webkit-keyframes kenburnsUpRight {
0% {
-webkit-transform: scale(1.5) translate(-10%, 10%);
transform: scale(1.5) translate(-10%, 10%);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsUpRight {
0% {
-webkit-transform: scale(1.5) translate(-10%, 10%);
transform: scale(1.5) translate(-10%, 10%);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsUp {
-webkit-animation: kenburnsUp ease-out;
animation: kenburnsUp ease-out;
}
@-webkit-keyframes kenburnsUp {
0% {
-webkit-transform: scale(1.5) translate(0, 10%);
transform: scale(1.5) translate(0, 10%);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsUp {
0% {
-webkit-transform: scale(1.5) translate(0, 10%);
transform: scale(1.5) translate(0, 10%);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}.words-wrapper {position: relative;text-align: left;}
.words-wrapper b {display: inline-block;position: absolute;white-space: nowrap;left: 0;bottom: 0;top: 0;}
.words-wrapper b.is-visible {
position: relative;
}
.animated_headline_wrapper span {
display: flex;
}
.no-js .words-wrapper b {
opacity: 0;
}
.no-js .words-wrapper b.is-visible {
opacity: 1;
}
.animated_headline_wrapper .headline {display: flex;align-items: baseline;}
.words-wrapper small {
font-weight : inherit !important;
}
.headline {
margin:0;
padding: 0;
} .headline.rotate-1 .words-wrapper {
-webkit-perspective: 300px;
-moz-perspective: 300px;
perspective: 300px;
}
.headline.rotate-1 b {
opacity: 0;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.headline.rotate-1 b.is-visible {
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-animation: rotate-1-in 1.2s;
-moz-animation: rotate-1-in 1.2s;
animation: rotate-1-in 1.2s;
}
.headline.rotate-1 b.is-hidden {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
-webkit-animation: rotate-1-out 1.2s;
-moz-animation: rotate-1-out 1.2s;
animation: rotate-1-out 1.2s;
}
@-webkit-keyframes rotate-1-in {
0% {
-webkit-transform: rotateX(180deg);
opacity: 0;
}
35% {
-webkit-transform: rotateX(120deg);
opacity: 0;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(360deg);
opacity: 1;
}
}
@-moz-keyframes rotate-1-in {
0% {
-moz-transform: rotateX(180deg);
opacity: 0;
}
35% {
-moz-transform: rotateX(120deg);
opacity: 0;
}
65% {
opacity: 0;
}
100% {
-moz-transform: rotateX(360deg);
opacity: 1;
}
}
@keyframes rotate-1-in {
0% {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
opacity: 0;
}
35% {
-webkit-transform: rotateX(120deg);
-moz-transform: rotateX(120deg);
-ms-transform: rotateX(120deg);
-o-transform: rotateX(120deg);
transform: rotateX(120deg);
opacity: 0;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
-o-transform: rotateX(360deg);
transform: rotateX(360deg);
opacity: 1;
}
}
@-webkit-keyframes rotate-1-out {
0% {
-webkit-transform: rotateX(0deg);
opacity: 1;
}
35% {
-webkit-transform: rotateX(-40deg);
opacity: 1;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(180deg);
opacity: 0;
}
}
@-moz-keyframes rotate-1-out {
0% {
-moz-transform: rotateX(0deg);
opacity: 1;
}
35% {
-moz-transform: rotateX(-40deg);
opacity: 1;
}
65% {
opacity: 0;
}
100% {
-moz-transform: rotateX(180deg);
opacity: 0;
}
}
@keyframes rotate-1-out {
0% {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 1;
}
35% {
-webkit-transform: rotateX(-40deg);
-moz-transform: rotateX(-40deg);
-ms-transform: rotateX(-40deg);
-o-transform: rotateX(-40deg);
transform: rotateX(-40deg);
opacity: 1;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
opacity: 0;
}
} .headline.type .words-wrapper {
vertical-align: top;
overflow: hidden;
}
.headline.type .words-wrapper::after {
content: '';
position: absolute;
right: 0;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 90%;
width: 1px;
background-color: #aebcb9;
}
.headline.type .words-wrapper.waiting::after {
-webkit-animation: pulse 1s infinite;
-moz-animation: pulse 1s infinite;
animation: pulse 1s infinite;
}
.headline.type .words-wrapper.selected {
background-color: #aebcb9;
}
.headline.type .words-wrapper.selected::after {
visibility: hidden;
}
.headline.type .words-wrapper.selected b {
color: #0d0d0d;
}
.headline b {
font-weight : inherit;
}
.headline.type b {
visibility: hidden;
}
.headline.type b.is-visible {
visibility: visible;
}
.headline small {
font-weight : inherit;
font-size : inherit;
}
.headline.type small {
position: absolute;
visibility: hidden;
font-weight : inherit;
font-size : inherit;
}
.headline.type small.in {
position: relative;
visibility: visible;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0);
opacity: 0;
}
}
@-moz-keyframes pulse {
0% {
-moz-transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-moz-transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-moz-transform: translateY(-50%) scale(0);
opacity: 0;
}
}
@keyframes pulse {
0% {
-webkit-transform: translateY(-50%) scale(1);
-moz-transform: translateY(-50%) scale(1);
-ms-transform: translateY(-50%) scale(1);
-o-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9);
-moz-transform: translateY(-50%) scale(0.9);
-ms-transform: translateY(-50%) scale(0.9);
-o-transform: translateY(-50%) scale(0.9);
transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0);
-moz-transform: translateY(-50%) scale(0);
-ms-transform: translateY(-50%) scale(0);
-o-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
opacity: 0;
}
} .headline.rotate-2 .words-wrapper {
-webkit-perspective: 300px;
-moz-perspective: 300px;
perspective: 300px;
}
.headline.rotate-2 small, .headline.rotate-2 em {
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-weight : inherit;
}
.headline.rotate-2 small {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-20px) rotateX(90deg);
-moz-transform: translateZ(-20px) rotateX(90deg);
-ms-transform: translateZ(-20px) rotateX(90deg);
-o-transform: translateZ(-20px) rotateX(90deg);
transform: translateZ(-20px) rotateX(90deg);
opacity: 0;
}
.is-visible .headline.rotate-2 small {
opacity: 1;
}
.headline.rotate-2 small.in {
-webkit-animation: rotate-2-in 0.4s forwards;
-moz-animation: rotate-2-in 0.4s forwards;
animation: rotate-2-in 0.4s forwards;
}
.headline.rotate-2 small.out {
-webkit-animation: rotate-2-out 0.4s forwards;
-moz-animation: rotate-2-out 0.4s forwards;
animation: rotate-2-out 0.4s forwards;
}
.headline.rotate-2 em {
-webkit-transform: translateZ(20px);
-moz-transform: translateZ(20px);
-ms-transform: translateZ(20px);
-o-transform: translateZ(20px);
transform: translateZ(20px);
}
.no-csstransitions .headline.rotate-2 small {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 0;
}
.no-csstransitions .headline.rotate-2 small em {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.no-csstransitions .headline.rotate-2 .is-visible small {
opacity: 1;
}
@-webkit-keyframes rotate-2-in {
0% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(90deg);
}
60% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(-10deg);
}
100% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0deg);
}
}
@-moz-keyframes rotate-2-in {
0% {
opacity: 0;
-moz-transform: translateZ(-20px) rotateX(90deg);
}
60% {
opacity: 1;
-moz-transform: translateZ(-20px) rotateX(-10deg);
}
100% {
opacity: 1;
-moz-transform: translateZ(-20px) rotateX(0deg);
}
}
@keyframes rotate-2-in {
0% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(90deg);
-moz-transform: translateZ(-20px) rotateX(90deg);
-ms-transform: translateZ(-20px) rotateX(90deg);
-o-transform: translateZ(-20px) rotateX(90deg);
transform: translateZ(-20px) rotateX(90deg);
}
60% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(-10deg);
-moz-transform: translateZ(-20px) rotateX(-10deg);
-ms-transform: translateZ(-20px) rotateX(-10deg);
-o-transform: translateZ(-20px) rotateX(-10deg);
transform: translateZ(-20px) rotateX(-10deg);
}
100% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0deg);
-moz-transform: translateZ(-20px) rotateX(0deg);
-ms-transform: translateZ(-20px) rotateX(0deg);
-o-transform: translateZ(-20px) rotateX(0deg);
transform: translateZ(-20px) rotateX(0deg);
}
}
@-webkit-keyframes rotate-2-out {
0% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0);
}
60% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-100deg);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-90deg);
}
}
@-moz-keyframes rotate-2-out {
0% {
opacity: 1;
-moz-transform: translateZ(-20px) rotateX(0);
}
60% {
opacity: 0;
-moz-transform: translateZ(-20px) rotateX(-100deg);
}
100% {
opacity: 0;
-moz-transform: translateZ(-20px) rotateX(-90deg);
}
}
@keyframes rotate-2-out {
0% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0);
-moz-transform: translateZ(-20px) rotateX(0);
-ms-transform: translateZ(-20px) rotateX(0);
-o-transform: translateZ(-20px) rotateX(0);
transform: translateZ(-20px) rotateX(0);
}
60% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-100deg);
-moz-transform: translateZ(-20px) rotateX(-100deg);
-ms-transform: translateZ(-20px) rotateX(-100deg);
-o-transform: translateZ(-20px) rotateX(-100deg);
transform: translateZ(-20px) rotateX(-100deg);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-90deg);
-moz-transform: translateZ(-20px) rotateX(-90deg);
-ms-transform: translateZ(-20px) rotateX(-90deg);
-o-transform: translateZ(-20px) rotateX(-90deg);
transform: translateZ(-20px) rotateX(-90deg);
}
} .headline.loading-bar span {
display: inline-block;
padding: .2em 0;
}
.headline.loading-bar .words-wrapper {
overflow: hidden;
vertical-align: top;
}
.headline.loading-bar .words-wrapper::after { content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #0096a7;
z-index: 2;
-webkit-transition: width 0.3s -0.1s;
-moz-transition: width 0.3s -0.1s;
transition: width 0.3s -0.1s;
}
.headline.loading-bar .words-wrapper.is-loading::after {
width: 100%;
-webkit-transition: width 3s;
-moz-transition: width 3s;
transition: width 3s;
}
.headline.loading-bar b {
top: .2em;
opacity: 0;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.headline.loading-bar b.is-visible {
opacity: 1;
top: 0;
} .headline.slide span {
display: inline-block;
padding: .2em 0;
}
.headline.slide .words-wrapper {
overflow: hidden;
vertical-align: top;
}
.headline.slide b {
opacity: 0;
top: .2em;
}
.headline.slide b.is-visible {
top: 0;
opacity: 1;
-webkit-animation: slide-in 0.6s;
-moz-animation: slide-in 0.6s;
animation: slide-in 0.6s;
}
.headline.slide b.is-hidden {
-webkit-animation: slide-out 0.6s;
-moz-animation: slide-out 0.6s;
animation: slide-out 0.6s;
}
@-webkit-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(20%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes slide-in {
0% {
opacity: 0;
-moz-transform: translateY(-100%);
}
60% {
opacity: 1;
-moz-transform: translateY(20%);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(20%);
-moz-transform: translateY(20%);
-ms-transform: translateY(20%);
-o-transform: translateY(20%);
transform: translateY(20%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes slide-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(120%);
}
100% {
opacity: 0;
-webkit-transform: translateY(100%);
}
}
@-moz-keyframes slide-out {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
60% {
opacity: 0;
-moz-transform: translateY(120%);
}
100% {
opacity: 0;
-moz-transform: translateY(100%);
}
}
@keyframes slide-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(120%);
-moz-transform: translateY(120%);
-ms-transform: translateY(120%);
-o-transform: translateY(120%);
transform: translateY(120%);
}
100% {
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
} .headline.clip span {
display: inline-block;
}
.headline.clip .words-wrapper {
overflow: hidden;
vertical-align: top;
}
.headline.clip .words-wrapper::after { content: '';
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background-color: #aebcb9;
}
.headline.clip b {
opacity: 0;
}
.headline.clip b.is-visible {
opacity: 1;
} .headline.zoom .words-wrapper {
-webkit-perspective: 300px;
-moz-perspective: 300px;
perspective: 300px;
}
.headline.zoom b {
opacity: 0;
}
.headline.zoom b.is-visible {
opacity: 1;
-webkit-animation: zoom-in 0.8s;
-moz-animation: zoom-in 0.8s;
animation: zoom-in 0.8s;
}
.headline.zoom b.is-hidden {
-webkit-animation: zoom-out 0.8s;
-moz-animation: zoom-out 0.8s;
animation: zoom-out 0.8s;
}
@-webkit-keyframes zoom-in {
0% {
opacity: 0;
-webkit-transform: translateZ(100px);
}
100% {
opacity: 1;
-webkit-transform: translateZ(0);
}
}
@-moz-keyframes zoom-in {
0% {
opacity: 0;
-moz-transform: translateZ(100px);
}
100% {
opacity: 1;
-moz-transform: translateZ(0);
}
}
@keyframes zoom-in {
0% {
opacity: 0;
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform: translateZ(100px);
transform: translateZ(100px);
}
100% {
opacity: 1;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
}
@-webkit-keyframes zoom-out {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-100px);
}
}
@-moz-keyframes zoom-out {
0% {
opacity: 1;
-moz-transform: translateZ(0);
}
100% {
opacity: 0;
-moz-transform: translateZ(-100px);
}
}
@keyframes zoom-out {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-100px);
-moz-transform: translateZ(-100px);
-ms-transform: translateZ(-100px);
-o-transform: translateZ(-100px);
transform: translateZ(-100px);
}
} .headline.rotate-3 .words-wrapper {
-webkit-perspective: 300px;
-moz-perspective: 300px;
perspective: 300px;
}
.headline.rotate-3 small {
display: inline-block;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.is-visible .headline.rotate-3 small {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.headline.rotate-3 small.in {
-webkit-animation: rotate-3-in 0.6s forwards;
-moz-animation: rotate-3-in 0.6s forwards;
animation: rotate-3-in 0.6s forwards;
}
.headline.rotate-3 small.out {
-webkit-animation: rotate-3-out 0.6s forwards;
-moz-animation: rotate-3-out 0.6s forwards;
animation: rotate-3-out 0.6s forwards;
}
.no-csstransitions .headline.rotate-3 small {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 0;
}
.no-csstransitions .headline.rotate-3 .is-visible small {
opacity: 1;
}
@-webkit-keyframes rotate-3-in {
0% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(0deg);
}
}
@-moz-keyframes rotate-3-in {
0% {
-moz-transform: rotateY(180deg);
}
100% {
-moz-transform: rotateY(0deg);
}
}
@keyframes rotate-3-in {
0% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
@-webkit-keyframes rotate-3-out {
0% {
-webkit-transform: rotateY(0);
}
100% {
-webkit-transform: rotateY(-180deg);
}
}
@-moz-keyframes rotate-3-out {
0% {
-moz-transform: rotateY(0);
}
100% {
-moz-transform: rotateY(-180deg);
}
}
@keyframes rotate-3-out {
0% {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
100% {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
} .headline.scale small {
display: inline-block;
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.is-visible .headline.scale small {
opacity: 1;
}
.headline.scale small.in {
-webkit-animation: scale-up 0.6s forwards;
-moz-animation: scale-up 0.6s forwards;
animation: scale-up 0.6s forwards;
}
.headline.scale small.out {
-webkit-animation: scale-down 0.6s forwards;
-moz-animation: scale-down 0.6s forwards;
animation: scale-down 0.6s forwards;
}
.no-csstransitions .headline.scale small {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 0;
}
.no-csstransitions .headline.scale .is-visible small {
opacity: 1;
}
@-webkit-keyframes scale-up {
0% {
-webkit-transform: scale(0);
opacity: 0;
}
60% {
-webkit-transform: scale(1.2);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes scale-up {
0% {
-moz-transform: scale(0);
opacity: 0;
}
60% {
-moz-transform: scale(1.2);
opacity: 1;
}
100% {
-moz-transform: scale(1);
opacity: 1;
}
}
@keyframes scale-up {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
}
60% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes scale-down {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
60% {
-webkit-transform: scale(0);
opacity: 0;
}
}
@-moz-keyframes scale-down {
0% {
-moz-transform: scale(1);
opacity: 1;
}
60% {
-moz-transform: scale(0);
opacity: 0;
}
}
@keyframes scale-down {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
60% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
}
} .headline.push b {
opacity: 0;
}
.headline.push b.is-visible {
opacity: 1;
-webkit-animation: push-in 0.6s;
-moz-animation: push-in 0.6s;
animation: push-in 0.6s;
}
.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%);
}
}