.video-one{
	&__single{
  		position: relative;
      width: 320px;
      height: 458px;
      margin-bottom: 30px;
      @media(max-width: 450px){
         width: 280px;
         height: 380px;
      }
      @media(max-width: 360px){
         width: 200px;
         height: 290px;
      }
  	}
   &__bg{
      position: absolute;
      top: 0;
      left: 0;
      width: 440px;
      height: 100%;
      background: url('#{$image-theme-path-base}bg-video-one.png') no-repeat center center;
      background-size: cover;
      @media(max-width: 450px){
         width: 380px;
      }
      @media(max-width: 360px){
         width: 290px;
      }
   } 
 	&__inner{
		text-align: center;
	}
	&__image{
		 position: absolute;
	    left: 10px;
       right: 10px;
       top: 10px;
       bottom: 10px;
       border-radius: 150px;
       overflow: hidden;
       &:after{
         content: '';
         background-image: linear-gradient(to top, $theme-color-2 0%, rgba(0, 0, 0, 0) 100%);
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%; 
       }
       img{
         filter: grayscale(100%);
         transform: scale(1.0);
         transition: all 5s;
       }
	}
	&__content{
		position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      text-align: center;
		z-index: 1;
      padding-top: 70px;
	}
	&__title{
		font-size: 20px;
		color: $white;
		font-weight: 700;
	}
  	&__action{
	 	.popup-video{
			display: inline-block;
			font-size: 20px;
			color: $white;
			background: $theme-color; 
			text-align: center;
			position: relative;
			@include transition(all 0.35s);
			width: 80px;
			height: 80px;
			line-height: 80px; 
			border-radius: 50%;
			@media(max-width: 767px){
				width: 60px;
				height: 60px;
				line-height: 60px;
			}
			&::before{
			  	position: absolute;
			  	content: '';
			  	left: 0;
			  	top: 0;
			  	height: 100%;
			  	width: 100%;
			  	border: 1px solid $theme-color;
			  	opacity: 0;
				border-radius: 50%;
			  	@include animation(pulse-border-2 1.5s linear infinite);
			}
			&::after{
			  	position: absolute;
			  	content: '';
			  	left: 0;
			  	top: 0;
			  	height: 100%;
			  	width: 100%;
			  	border: 1px solid $theme-color;
			  	opacity: 0;
			  	border-radius: 50%;
			  	@include animation(pulse-border 1s linear infinite);
			}
	 	}
  	}
  	&__single{
		&:hover{
			.video-one{
            &__image{
               img{
                  transform: scale(1.2);
               }
            }
			  	&__action{
				 	.popup-video{
						box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
						@include scale(1.1);
				 	}
			  	}
			 }
		}
	}
}

.video-two{
	&__single{
		
	}
	&__content{
		
	}
  	&__action{
  		text-align: center;
	 	.popup-video{
			display: inline-block;
			font-size: 27px;
			color: $white;
			background: $theme-color-2;   
			text-align: center;
			position: relative;
			@include transition(all 0.35s);
			@include size(102px, 90px);
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10px 0 0 10px;
			@include media-breakpoint-down(md){
			  	height: 80px;
			  	width: 80px;
			  	font-size: 20px;
			}
			&::before{
			  	position: absolute;
			  	content: '';
			  	left: 0;
			  	top: 0;
			  	height: 100%;
			  	width: 100%;
			  	border: 1px solid $theme-color-2;
			  	opacity: 0;
			  	border-radius: 10px 0 0 10px;
			  	@include animation(pulse-border-2 1.5s linear infinite);
			}
			&::after{
			  	position: absolute;
			  	content: '';
			  	left: 0;
			  	top: 0;
			  	height: 100%;
			  	width: 100%;
			  	border: 1px solid $theme-color-2;
			  	opacity: 0;
			  	border-radius: 10px 0 0 10px;
			  	@include animation(pulse-border 1s linear infinite);
			}
	 	}
  	}
  	&__title{
  		fill: $white;
  		font-size: 20px;
  		letter-spacing: 3px;
  	}
}
.video-three{
	&__single{
		position: relative;
	}
	&__inner{
		min-height: 120px;
		min-width: 120px;
		text-align: center;
		position: relative;
		@include media-breakpoint-down(md){
		  	min-height: 80px;
		  	min-width: 80px;
		}
	}
	&__image{
		overflow: hidden;
		position: relative;
		border-radius: 7px;
		a{
			display: block;
			width: 100%;
			height: 100%;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 7px;
			}
		}
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0.2;
			z-index: 1;
			mix-blend-mode: multiply;
			border-radius: 7px;
			background-color: #1e2845;
		}
	}
	&__content{
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	&__title{
		font-size: 25px;
		color: $white;
		font-weight: 500;
		@media(max-width: 600px){
			display: none; 
		}
	}
  	&__action{
	 	.popup-video{
			display: inline-block;
			font-size: 27px;
			color: $white;
			background: rgba(125,113,112,0.8);   
			text-align: center;
			position: relative;
			@include transition(all 0.35s);
			@include size(102px, 102px);
			border: 1px solid $white;
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			@include media-breakpoint-down(md){
			  	height: 80px;
			  	width: 80px;
			  	font-size: 20px;
			}
			&::before{
			  	position: absolute;
			  	content: '';
			  	left: 0;
			  	top: 0;
			  	height: 100%;
			  	width: 100%;
			  	border: 1px solid #fff;
			  	opacity: 0;
			  	border-radius: 50%;
			  	@include animation(pulse-border-2 1.5s linear infinite);
			}
			&::after{
			  	position: absolute;
			  	content: '';
			  	left: 0;
			  	top: 0;
			  	height: 100%;
			  	width: 100%;
			  	border: 1px solid #fff;
			  	opacity: 0;
			  	border-radius: 50%;
			  	@include animation(pulse-border 1s linear infinite);
			}
	 	}
  	}
}

.video-four{
	&__content{
		position: relative;
		min-height: 300px;
	    display: flex;
	    align-items: center;
		&:before{
			content: "";
			position: absolute;
			bottom: 0;
			right: 100%;
			margin-right: -100px;  
			width: 320px;
  			height: 320px;
  			display: block;
  			border-radius: 50%;
  			opacity: 0.2;
  			border: solid 1px #fff;
		}
		@media(max-width: 1024px){
			min-height: 235px;
		}
	}
	&__action{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 3;
	 	.popup-video{
			display: inline-block;
			font-size: 26px;
			color: $white;
			background: $theme-color;   
			text-align: center;
			position: relative;
			@include transition(all 0.35s);
			@include size(100px, 100px);
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			&::before{
			  	position: absolute;
			  	content: '';
			  	left: 0;
			  	top: 0;
			  	height: 100%;
			  	width: 100%;
			  	border: 1px solid #fff;
			  	opacity: 0;
			  	border-radius: 50%;
			  	@include animation(pulse-border-2 1.5s linear infinite);
			}
			&::after{
			  	position: absolute;
			  	content: '';
			  	left: 0;
			  	top: 0;
			  	height: 100%;
			  	width: 100%;
			  	border: 1px solid #fff;
			  	opacity: 0;
			  	border-radius: 50%;
			  	@include animation(pulse-border 1s linear infinite);
			}
	 	}
  	}
	&__title{
		width: 100%;
		opacity: 0.2;
	   color: $white;
		font-size: 220px;
		line-height: 1;
		font-weight: 700;
		
		text-align: center;
		@media(max-width: 1024px){
			font-size: 180px;
		}
		@media(max-width: 767px){
			font-size: 100px;
		}
	}
}