/* Gobal */ .wvc-row{ width: 100%; max-width: 100vw; position: relative; background-attachment:scroll; background-repeat:no-repeat; background-position: center center; //overflow: hidden; padding: 80px 0; // default padding //z-index: 2; } .wvc-row-content{} .wvc-row-is-fullwidth{ padding: 0; } .wvc-row-is-large{ padding:50px 0; } .wvc-row-bg-video-parallax, .wvc-row-bg-effect-parallax, .wvc-row-bg-transparent, .wvc-row-bg-slideshow{ background-color: transparent!important; background: none!important; .wvc-img-bg{ //opacity: 0; } } .wvc-row-bg-effect-fixed{ & > .wvc-img-bg{ //position:fixed; } } .wvc-row-bg-effect-blur{ overflow: hidden; & > .wvc-img-bg{ filter: blur(6px); transform: scale(1.05); } &.fp-section > .fp-tableCell > .wvc-img-bg{ filter: blur(6px); transform: scale(1.05); } } .wvc-column-bg-effect-blur{ overflow: hidden; & > .wvc-img-bg{ filter: blur(6px); transform: scale(1.05); } } // .wvc-is-mobile{ // .wvc-img-bg-marquee-aux{ // display: none; // } // } //.wvc-is-desktop{ .wvc-row-bg-effect-marquee, .wvc-column-bg-effect-marquee{ .wvc-img-bg{ overflow: visible; //max-width: none; //width: auto; //width: 200%; //transform:translate3d(-50%,0,0); animation-name:marquee-background; animation-duration:44s; //animation-duration:11s; animation-iteration-count:infinite; animation-timing-function:linear; animation-delay:0s; //animation-fill-mode:forwards; display: flex; align-items: center; img{ //min-height: 100%; max-width: none; width: auto; vertical-align: middle; } .wvc-img-bg-marquee-aux{ //transform:translate3d(99.5%,-100%,0); } } &.wvc-row-bg-marquee-stretch{ .wvc-img-bg{ //align-items:stretch; img{ min-height: 100%; } } } &.wvc-row-bg-marquee-top{ .wvc-img-bg{ align-items:flex-start; } } &.wvc-row-bg-marquee-middle{ .wvc-img-bg{ align-items: center; } } &.wvc-row-bg-marquee-bottom{ .wvc-img-bg{ align-items: flex-end; } } } .wvc-row-bigtext-marquee{ .wvc-row-bigtext-content{ overflow: visible; } .wvc-element{ //display: inline-block; width: 100vh; //max-width: none; //width: auto; //width: 200%; //transform:translate3d(-50%,0,0); animation-name:marquee1; animation-duration:33s; animation-duration:4s; animation-iteration-count:infinite; animation-timing-function:linear; animation-delay:0s; } .wvc-element:last-child{ animation-name:marquee2; padding-left: 50px; //transform:translate3d(99.5%,-100%,0); } } //} @keyframes marquee-background{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-100%,0,0); } } @keyframes marquee1 { from { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes marquee2 { from { // transform: translateX(0%); transform:translate3d(0,-100%,0); } to { // transform: translateX(-200%); transform:translate3d(-200%,-100%,0); } } .wvc-row-bg-transparent, .wvc-row-bg-slideshow{ & > .wvc-img-bg{ opacity: 0; } } .wvc-background-color-transparent{ background-color: transparent!important; & > .wvc-img-bg{ background-color: transparent!important; } &.wvc-row-bg-effect-marquee > .wvc-img-bg{ background-color: transparent!important; } } .wvc-row-full-height{ min-height: 100vh; } .wvc-row-wrapper{ position: relative; } // fix safari? .wvc-is-apple{ .wvc-row-full-height.wvc-row-layout-block{ .wvc-img-bg-overlay { height: 100vh; } .wvc-row-wrapper{ overflow:hidden; } } } /* Box shadow */ .wvc-row-box-shadow{ padding-bottom: 80px!important; .wvc-row-wrapper{ box-shadow:0px 15px 44px 0 rgba(0,0,0,0.14); } } /* Boxed row width */ .wvc-row-width-boxed, .wvc-row-width-boxed-large, .wvc-row-width-boxed-small{ padding: 0; .wvc-row-wrapper{ @include wrap(); padding:35px; } } .wvc-row-width-boxed-large{ .wvc-row-wrapper{ max-width: none; } } .wvc-row-width-boxed-small{ .wvc-row-wrapper{ max-width: 750px; } } /* Row content width */ .wvc-row-wrapper-width-full{ width: 100%; } .wvc-row-wrapper-width-standard{ @include wrap(); } .wvc-row-wrapper-width-small{ @include wrap(); max-width: 750px; } .wvc-row-wrapper-width-large{ @include wrap(); width: 92%; max-width: none; } /* No padding for block layout by default */ .wvc-row-layout-block{ padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0; .wvc-row-wrapper{ width: 100%; align-self:stretch; } .wvc-columns-container{ width: 100%; align-self:stretch; } .wvc-column-container{ height: 100%; //display: flex; align-self: stretch; // force column stretch } .wvc-column{ //height: 100%; // nope causing block overlapping on mobile } .wvc-column-inner{ align-self:center; } // In case sticky column is set, cancel the equal height stuff &.wvc-no-equal-height{ .wvc-column{ align-self: flex-start; height: auto; } .wvc-column-container{ height: auto; } .wvc-row-wrapper{ align-self:flex-start; } .wvc-row-content{ align-items:flex-start; } .wvc-column-container{ align-self:flex-start; } } } /* Equal height */ .wvc-row-column-equal-height-yes{ .wvc-row-content{ align-items: stretch; } } /* Equal height wide */ .wvc-row-width-wide{ .wvc-row-column-equal-height-yes{ align-self: stretch; } } .wvc-row{ align-items:center; } .wvc-row-content{ align-items:flex-start; } .wvc-row-content{ display: table; width: 100%; height: 100%; } .wvc-columns-container{ display: table-cell; width: 100%; height: 100%; vertical-align: middle; } /* Full height & min height CONTENT position */ .wvc-row-full-height, .wvc-row-min-height{ display: flex; // set display flex by default .wvc-column{ align-self:center; } &.wvc-row-inner{ align-items:center; // default inner row content position } // Blocks &.wvc-row-layout-block{ .wvc-column{ //height: 100%; } } & > .wvc-row-wrapper{ align-self: stretch; } .wvc-row-column-equal-height-yes{ .wvc-row-wrapper, &.wvc-row-wrapper{ align-self:stretch; } } &.wvc-row-columns-placement-middle{ .wvc-row-wrapper{ align-self:center; } } &.wvc-row-columns-placement-top{ .wvc-row-wrapper{ align-self:flex-start; } } &.wvc-row-columns-placement-bottom{ .wvc-row-wrapper{ align-self:flex-end; } } &.wvc-row-columns-placement-stretch{ .wvc-row-wrapper{ align-self:stretch; } } } .fp-section{ &.wvc-row-columns-placement-middle{ .wvc-row-wrapper{ align-self:center!important; } } &.wvc-row-columns-placement-top{ .wvc-row-wrapper{ align-self:flex-start!important; } } &.wvc-row-columns-placement-bottom{ .wvc-row-wrapper{ align-self:flex-end!important; } } &.wvc-row-columns-placement-stretch{ .wvc-row-wrapper{ align-self:stretch!important; } } } /* COLUMN CONTENT placement default setting that can be overwritten on each column */ .wvc-row-content-placement-top{ .wvc-row-content .wvc-column-inner{ align-self:flex-start; } } .wvc-row-content-placement-middle{ .wvc-row-content .wvc-column-inner{ align-self:center; } } .wvc-row-content-placement-bottom{ .wvc-row-content .wvc-column-inner{ align-self:flex-end; } } /* Scroll down arrow */ .wvc-arrow-down{ position: absolute; bottom: 10px; left: 50%; margin-left: -6px; z-index: 5; transition: all .2s; cursor: pointer; &:before{ font-size: 24px; font-family: FontAwesome; content: "\f107"; } &:hover{ //bottom: 5px; } &.wvc-arrow-down-alignement-left{ left: 44px; right: auto; } &.wvc-arrow-down-alignement-right{ left: auto; right: 44px; } } .wvc-row-has-sticky-player{ .wvc-arrow-down{ bottom: 60px; } } .wvc-arrow-down-text{ text-align: center; position: absolute; display: inline-block; opacity: 0; top: -30px; left: 50%; transition:.44s ease; transform:translateX(-50%); width: 250px; } .wvc-arrow-down:hover{ .wvc-arrow-down-text{ top: -35px; opacity: 1; } } .wvc-no-next-section{ .wvc-arrow-down{ display: none!important; height: 0; visibility:hidden; } } .wvc-row-sticky-player-container .wpm-sticky-playlist-container{ position: absolute; } /* One column parent row */ .wvc-row-one-column > .wvc-row-wrapper > .wvc-row-content{ width: 100%!important; margin-left: 0!important; } /* Big Text Background */ .wvc-row-bigtext-container{ display: block; z-index: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; text-align: center; .wvc-element{ //max-width: 92%; margin: 0 auto 0; } .wvc-bigtext{ user-select:none; cursor: default; max-width: none!important; } } .wvc-row-bigtext-content{ width: 100%; height: auto; max-width: 2000px; min-width:1000px; position: absolute; transform:translate3d(-50%,-50%,0); left: 50%; top: 50%; } .wvc-row-big-text-vertical-align-middle .wvc-row-bigtext-content{ } .wvc-row-big-text-vertical-align-top .wvc-row-bigtext-content{ top: 0; transform:translate3d(-50%,0,0); } .wvc-row-big-text-vertical-align-bottom .wvc-row-bigtext-content{ bottom: 0; top: auto; transform: translate3d(-50%,0,0); } /* YT video bg mute button */ .wvc-row-video-bg-mute-button-container{ position: absolute; left: 25px; bottom: 25px; z-index: 9999; } .wvc-row-video-bg-mute-button{ cursor: pointer; } .wvc-row-video-bg-mute-default{ display: block; width: 50px; height: 50px; background:#000; } .wvc-row-has-sticky-player{ .wvc-row-video-bg-mute-button-container{ bottom: 100px; } } /* Volume "Equalizer" */ $eq_w : 44px; $eq_half : $eq_w / 2; $eq_margin : 12px; .wvc-bg-video-mute-equalizer{ overflow: hidden; height: 50px; width: 50px; margin: 0 auto; position: relative; //background:#000; //padding: 10px!important; border:2px solid rgba(255,255,255,.2); border-radius:9999em; transition:all .2s ease; } .wvc-bg-video-mute-equalizer-bar{ height: 6px; width: 3px; display: inline-block; background-color: #fff; bottom: 0; bottom: 13px; top: auto; position: absolute; animation-duration:.44s; animation-play-state:running; animation-direction:alternate; animation-timing-function:linear; animation-iteration-count:infinite } .wvc-bg-video-mute-equalizer-bar-1 { left: $eq_margin + 0; } .wvc-bg-video-mute-equalizer-bar-2 { left: $eq_margin + 7px; } .wvc-bg-video-mute-equalizer-bar-3 { left: $eq_margin + 14px; } .wvc-bg-video-mute-equalizer-bar-4 { left: $eq_margin + 21px; } //.wvc-video-bg-is-unmute{ .wvc-bg-video-mute-equalizer-bar-1 { animation-name: moveHeight1; animation-delay: .1s; } .wvc-bg-video-mute-equalizer-bar-2 { animation-name: moveHeight3; animation-delay: .2s; } .wvc-bg-video-mute-equalizer-bar-3 { animation-name: moveHeight4; animation-delay: .3s; } .wvc-bg-video-mute-equalizer-bar-4 { animation-name: moveHeight2; animation-delay: .4s; } //} .wvc-video-bg-is-unmute{ .wvc-bg-video-mute-equalizer{ border-color:rgba(255,255,255,.8); } } @keyframes moveHeight1{ from{ height:1px } to{ height:22px } } @keyframes moveHeight2{ from{ height:1px } to{ height:15px } } @keyframes moveHeight3{ from{ height:1px } to{ height:17px } } @keyframes moveHeight4{ from{ height:1px } to{ height:24px } } .wvc-is-mobile{ .wvc-bg-video-mute-equalizer{ display: none; } } /*Shape divider */ .wvc-shape-divider{ position: absolute; width: 100%; left: 0; height: 25%; // default height pointer-events: none; svg{ width: 100%; height: 100%; left: 50%; position: absolute; transform: translatex(-50%); } } .wvc-sd-preserve-ratio{ svg{ width: auto; } } .wvc-sd-svg-flip{ transform: rotateZ(180deg) translatex(-50%); } .wvc-sd-flip{ transform: scaleX(-1) translateZ(0)!important; } .wvc-sd-invert{ transform: translatex(-50%) scaley(-1); } .wvc-sd-position-top{ top: -1px; transform:rotate(-180deg); img, svg{ top: 1px; } } .wvc-sd-position-bottom{ bottom: -1px; img, svg{ bottom: -1px; } } .wvc-sd-type-custom{ //background-size: cover; background-repeat: repeat-x; .wvc-sd-position-top{ background-position: center top; } .wvc-sd-position-bottom{ background-position: center bottom; } }