
/* ====================== [ Start tabs before & after section ] ====================== */

.after-before{
	position: relative;
	color: #fff;

	.background{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 50%;
		z-index: -1;
	}

	.dotsbg{
		position: relative;

		&:after{
			content: '';
			background-image: url(../img/line-pattern1.png);
			background-repeat: repeat;
			position: absolute;
			bottom: -60px;
			left: 10%;
			right: 10%;
			height: 40%;
			z-index: -1;
		}
	}
}

/* ====================== [ Start tabs before & after section ] ====================== */



/* ====================== [ 20 Start call-action ] ====================== */

.call-action{
	background-color: #020202;
	color: #fff;

	&.gray{
		background: #f8f8f8;

		.content{

			h6{
				color: #777;
				font-size: 14px;
				font-weight: 500;
	
				span{
					color: #777;
				}
			}
	
			h2{
				font-size: 5vw;
				font-weight: 700;
				margin-bottom: 20px;
				-webkit-text-stroke-width: 1px;
				-webkit-text-stroke-color: #333;
	
				b{
					
					span{
						color: #333;
						-webkit-text-stroke-width: 0;
					}
				}
			}
		}
	
		.tlink{
			border-bottom: 1px solid #333;
		}
	}

	&:before{
		background-image: url(../img/giphy.gif);
		background-repeat: repeat;
		opacity: .04;
	}

	&.nogif{
		position: relative;
		padding: 80px 0;
		background: #0a0a0a;
		z-index: 2;
		overflow: hidden;

		&:before{
			display: none;
		}

		&:after{
			content: '';
			height: 0;
			width: 100%;
			position: absolute;
			top: auto;
			right: 0;
			bottom: 0;
			transition: height .6s cubic-bezier(.25,.8,.25,1) 0s;
			background: #0c0c0c;
			z-index: -1;
		}

		&:hover{

			&:after{
				height: 100%;
				top: 0;
				bottom: auto;
			}
		}
	}

	.content{

		h6{
			color: #b19777;
			font-size: 13px;
			font-weight: 400;
			text-transform: uppercase;
			letter-spacing: 4px;
			margin-bottom: 10px;

			span{
				color: #b19777;
			}
		}

		h2{
			font-size: 6vw;
			font-weight: 800;
			margin-bottom: 20px;
			-webkit-text-stroke-width: 1px;
			-webkit-text-stroke-color: #fff;
			color: transparent;
			
			span{
				color: transparent;
			}

			.word{
				margin-right: 15px;
			}

			b{
				
				span{
					color: #fff;
					-webkit-text-stroke-width: 0;
				}
			}
		}

		p{
			font-size: 17px;
			font-weight: 300;
		}
	}

	.tlink{
		margin-left: auto;
		border-bottom: 1px solid #eee;
	}

	&.next{
		position: relative;
		z-index: 2;
		overflow: hidden;

		&:after{
			display: none;
		}

		&:before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: block;
			background: #0a0a0a;
			opacity: 1;
			transition: all .5s;
		}

		.content{

			h2{
				font-size: 5vw;
				font-weight: 700;

				b{
					font-weight: 700;
				}
			}
		}

		.nxt-img{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			transform: scale(1.4);
			background-size: cover;
			background-position: center;
			z-index: -1;
			transition: all 1s linear;
		}

		&:hover{

			&:before{
				opacity: .9;
			}

			.nxt-img{
				transform: scale(1);
				transition: all 10s linear;
			}
		}
	}
}

.video-wrapper{
	min-height: 500px;

	.vid{
		position: relative;
		z-index: 8;

		.vid-butn{

			&:hover{

				.icon{
					color: #fff;

					&:before{
						transform: scale(0);
					}
				}
			}
			
			.icon{
				color: #212529;
				width: 100px;
				height: 100px;
				border: 1px solid rgba(255,255,255,.2);
				border-radius: 50%;
				line-height: 100px;
				text-align: center;
				font-size: 17px;
				position: relative;
				transition: all .5s;

				&:after{
					content: '';
					position: absolute;
					top: 5px;
					bottom: 5px;
					right: 5px;
					left: 5px;
					border: 1px solid #eee;
					border-radius: 50%;
					z-index: -1;
				}

				&:before{
					content: '';
					position: absolute;
					top: 5px;
					bottom: 5px;
					right: 5px;
					left: 5px;
					background: #fff;
					border-radius: 50%;
					z-index: -1;
					transition: all .5s cubic-bezier(1, 0, 0, 1);
				}
			}
		}
	}
}

/* ====================== [ End call-action ] ====================== */