@import "../variables";
@import "../mixins";


/*===================
	Button Styles 
======================*/

.dcare__btn {
	transform: perspective(1px) translateZ(0px);
	transition-duration: 0.3s;
	background: #fe5629 none repeat scroll 0 0;
	box-shadow: 0 0 1px transparent;
	transform: perspective(1px) translateZ(0px);
	transition-duration: 0.5s;
	border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 16px;
    font-weight: 700;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    padding: 0 24px;
    position: relative;
    display: inline-block;
    text-transform: capitalize;
    z-index: 2;
	&::before{
		background: #89d700 none repeat scroll 0 0;
	    border-radius: 25%;
	    bottom: 0;
	    content: "";
	    left: 0;
	    position: absolute;
	    right: 0;
	    top: 0;
	    transform: scale(2);
	    transform-origin: 50% 50% 0;
	    transition-duration: 0.5s;
	    transition-property: transform;
	    transition-timing-function: ease-out;
	    z-index: -1;
	}
	&:hover::before,
	&:focus::before,
	&:active::before{
		transform: scale(0);
	}
	&:hover{
		color: #fff;
		box-shadow: 0 20px 38px rgba(0, 0, 0, 0.16);
		@include transform(translateY(-3px));
	}
	&.btn__gray{
		color: #666666;
		&:hover{
			color: #fff;
		}
		&::before{
			background: #dddddd none repeat scroll 0 0;
		}
	}
	&.hover--theme{
		background: #89d700 none repeat scroll 0 0;
	}
	&.min__height-btn{
		font-size: 16px;
	    height: 37px;
	    line-height: 35px;
	    padding: 0 25px;
	}
	&.max__height-btn{
	    height: 54px;
	    line-height: 52px;
	    padding: 0 26px;
	}
	&.btn__white{
		color: #666666;
		&:hover{
			color: #fff;
		}
		&::before{
			background: #fff none repeat scroll 0 0;
		}
	}
	&.black__btn{
		color: #fff;
		&:hover{
			color: #fff;
		}
		&::before{
			background: #444444 none repeat scroll 0 0;
		}
	}
	&.btn__f1f1f1{
		color: #666666;
		&:hover{
			color: #fff;
		}
		&::before{
			background: #f1f1f1 none repeat scroll 0 0;
		}
	}
	&.hover__444{
		background: #444444 none repeat scroll 0 0;
	}
	&.btn__org{
		color: #fff;
		&:hover{
			color: #fff;
		}
		&::before{
			background: #fe5629 none repeat scroll 0 0;
		}
	}
	&.btn__333333{
		color: #fff;
		&::before{
			background: #333 none repeat scroll 0 0;
		}
	}
	&.btn__f6f6f6{
		color: #666666;
		border: 1px solid #efefef;
		font-size: 18px;
		height: 38px;
		line-height: 34px;
		border-radius: 0;
		&:hover{
			color: #fff;
			border: 1px solid #f6f6f6;
		}
		&::before{
			background: #f6f6f6 none repeat scroll 0 0;
			border-radius: 5%;
		}
	}




}
























// Slider Video Play


.play__btn,
a.play__btn,
button.play__btn{
  display: inline-block;
  height: 55px;
  width: 55px;
  background: #fff;
  line-height: 55px;
  text-align: center;
  position: relative;
  @include border-radius(100%);
  @include transition(all 0.3s ease-in-out 0s);
	img{
	    padding-left: 5px;
	    position: relative;
	}
	&:before,
	&:after{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: transparent;
		border: 1px solid #ffffff;
		z-index: -1;
		@include border-radius(100%);
		opacity: 0;
	}
	&:before{
		z-index: 2;
		-webkit-animation: playbutton-effect 1s ease-in-out infinite;
		-moz-animation: playbutton-effect 1s ease-in-out infinite;
		-ms-animation: playbutton-effect 1s ease-in-out infinite;
		-o-animation: playbutton-effect 1s ease-in-out infinite;
		animation: playbutton-effect 1s ease-in-out infinite;
	}
	&:after{
		z-index: 2;
		-webkit-animation: playbutton-effect 1s ease-in-out infinite;
		-moz-animation: playbutton-effect 1s ease-in-out infinite;
		-ms-animation: playbutton-effect 1s ease-in-out infinite;
		-o-animation: playbutton-effect 1s ease-in-out infinite;
		animation: playbutton-effect 1s ease-in-out infinite;
		-webkit-animation-delay: 0.2s;
		-o-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}
	&:hover{
	    @include transform(scale(1.1));
	}
}




.yu2fvl {
  z-index: 9999;
  top: 0;
}

.yu2fvl-iframe {
  display: block;
  height: 100%;
  width: 100%;
  border: 0;
}

.yu2fvl-overlay {
  z-index: 9998;
  background: #000;
  opacity: 0.8;
}

.yu2fvl-close {
  position: absolute;
  top: 1px;
  left: 100%;
  display: inline-block;
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  background: #f10 !important;
  background-color: #f10 !important;
  color: #ffffff;
  border: 0;
  background: none;
  cursor: pointer;
}



@media #{$md-layout}{
  .yu2fvl-close{
    left: auto;
    right: 0;
    top: auto;
    bottom: 100%;
  }
}

@media #{$sm-layout}{
  .yu2fvl-close{
    left: auto;
    right: 0;
    top: auto;
    bottom: 100%;
  }
  .video{
    h2{
      color: #ffffff;
      font-size: 32px;
    }
    h4{
      font-size: 22px;
      line-height: 32px;
    }
  }
}







































