Current File : /home/kelaby89/muzza.fit/wp-content/plugins/wolf-visual-composer/scss/shortcodes/_row.scss

/* 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;
	}
}