.ova-video {
	.icon-content-view{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;

		&.video_active {
			cursor: pointer;
		}

		&:hover {
			.content {
				&:before {
					-moz-transition: all .3s ease;
					-webkit-transition: all .3s ease;
					transition: all .3s ease;
				}
			}
		}

		.content {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: nowrap;
			width: 180px;
			height: 180px;
			min-width: 64px;
			min-height: 64px;
			background: #fff;
			border-radius: 50%;
			margin-right: 16px;
			-moz-transition: all .3s ease;
			-webkit-transition: all .3s ease;
			transition: all .3s ease;
			box-shadow: 0px 21px 30px 0px rgba(0, 0, 0, 0.1);
			i {
				-moz-transition: all .3s ease;
				-webkit-transition: all .3s ease;
				transition: all .3s ease;
				font-size: 30px;
				z-index: 1;
				color: var(--primary);
			    padding: 20%;
			    border-radius: 50%;		
			}	

			&:before {
				position: absolute;
				content: "";
				top: 50%;
				left: 50%;
				border-radius: 50%;
				transform: translate(-50%, -50%);
				width: 80%;
				height: 80%;
				border: 2px solid var(--heading);
				-webkit-animation: lineScale 2.5s linear infinite;
	    		-moz-animation: lineScale 2.5s linear infinite;
				animation: lineScale 2.5s linear infinite;
			}

			&:after {
				position: absolute;
				content: "";
				top: 50%;
				left: 50%;
				border-radius: 50%;
				transform: translate(-50%, -50%);
				width: 60%;
				height: 60%;
				border: 2px dashed #e6e6e6;	
				-webkit-animation: lineScale 2.5s linear infinite;
	    		-moz-animation: lineScale 2.5s linear infinite;
				animation: lineScale 2.5s linear infinite;
			}

			&:hover {
				-moz-transition: all .3s ease;
				-webkit-transition: all .3s ease;
				transition: all .3s ease;
			}
		}

		.ova-text {
			margin: 0;
			font-weight: 700;
			font-size: 16px;
			line-height: 1.4;
			color: var(--heading);

			a {
				color: var(--heading);
				-moz-transition: all .3s ease;
				-webkit-transition: all .3s ease;
				transition: all .3s ease;
			}
		}
	}

	.modal-container {
		display: none;
		background-color: rgba( 0, 0, 0, .2 );
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		z-index: 10;

		.modal {
		    width: 900px;
    		height: 500px;
    		position: relative;

    		@media screen and (max-width: 900px) {
    			width: 768px;
    			height: 450px;
    		}

    		@media screen and (max-width: 788px) {
    			width: 600px;
    			height: 350px;
    		}

    		@media screen and (max-width: 620px) {
    			width: 400px;
    			height: 250px;
    		}

    		@media screen and (max-width: 420px) {
    			width: 320px;
    			height: 200px;
    		}

    		@media screen and (max-width: 330px) {
    			width: 300px;
    			height: 180px;
    		}

    		i {
			    position: absolute;
			    right: -10px;
    			top: -35px;
    			padding: 10px;
    			cursor: pointer;
			    font-size: 12px;
			    color: #fff;
			    font-weight: 600;
			    -moz-transition: all .3s ease;
				-webkit-transition: all .3s ease;
				transition: all .3s ease;

				&:hover {
					color: #000;
				}
    		}

    		.modal-video {
    			width: 100%;
    			height: 100%;
    		}
		}
	}

	@keyframes lineScale {
		50% { 
	        -webkit-transform: translate(-50%, -50%) scale(1.5);
	        -moz-animation: translate(-50%, -50%)scale(1.5);
	        transform: translate(-50%, -50%) scale(1.5);
	    }
	    50% { 
	        -webkit-transform: translate(-50%, -50%) scale(0.8);
	        -moz-animation: translate(-50%, -50%)scale(0.8);
	        transform: translate(-50%, -50%) scale(0.8);
	    }
	}

}