/******* Demo 1 *********/
.modal.modal-wide{
	overflow: hidden;
}

.modal-wide .modal-body {
	overflow-y: auto;
}

@-webkit-keyframes custome-animate {
	0% {
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform:  perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
		-moz-transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
		-ms-transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
		transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
		opacity: 0;
	}
    68% {
		-webkit-transform:  rotateY(10deg) rotateX(10deg) translateZ(20px);
		-moz-transform:  rotateY(10deg) rotateX(10deg) translateZ(20px);
		-ms-transform:  rotateY(10deg) rotateX(10deg) translateZ(20px);
		transform:  rotateY(10deg) rotateX(10deg) translateZ(20px);
		opacity: 0.8;                
    }
	100% {
		-webkit-transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		-moz-transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		-ms-transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		opacity: 1;
	}
}
@keyframes custome-animate {
	0% {
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
		-moz-transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
		-ms-transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
		transform: perspective(90%) rotateY(-65deg) rotateX(-45deg) translateZ(-200px);
		opacity: 0;
	}
	68% {
		-webkit-transform:  rotateY(10deg) rotateX(10deg) translateZ(20px);
		-moz-transform:  rotateY(10deg) rotateX(10deg) translateZ(20px);
		-ms-transform:  rotateY(10deg) rotateX(10deg) translateZ(20px);
		transform:  rotateY(10deg) rotateX(10deg) translateZ(20px);
		opacity: 0.8;                
    }
    100% {
		-webkit-transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
		-moz-transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		-ms-transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		transform:  rotateY(0deg) rotateX(0deg) translateZ(0px);
		opacity: 1;
	}
}
.custome-animate {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	-webkit-animation-name: custome-animate;
	animation-name: custome-animate;
}



/********Demo 2*******/

.opacity-animate{
    animation:opt-animation 1s;
     -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

  
}
img{
  width:100%;
}




@-webkit-keyframes opt-animation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes opt-animation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes opt-animation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes opt-animation {
  0%   { opacity: 0;}
  100% { opacity: 1;}
}

/***** Demo 3 *********/
.opacity-animate3{
    animation:opt-animation3 1s ;
  -moz-animation-fill-mode: forwards
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes opt-animation3 {
  0%   { opacity: 0; transform: scale(0.75);}
  100% { opacity: 1; transform: scale(1);}
}
@-moz-keyframes opt-animation3 {
   0%   { opacity: 0; transform: scale(0.75);}
  100% { opacity: 1; transform: scale(1);}
}
@-o-keyframes opt-animation3{
  0%   { opacity: 0; transform: scale(0.75);}
  100% { opacity: 1; transform: scale(1);}
}
@keyframes opt-animation3 {
  0%   { opacity: 0; transform: scale(0.75);}
  100% { opacity: 1; transform: scale(1);}
}

/* .hide-opacity{
   animation:scaleme 1s;
}

@-webkit-keyframes scaleme {
  0% { -webkit-transform: scale(1); opacity: 1; }
  100% { -webkit-transform: scale(0); opacity: 0;display:none;}
}   
 */



/* .demo4
 &.fade {
  .modal-dialog {
   .translate(0, 0);
  }
 }
}
/* or */
/* .demo4.fade .modal-dialog {
 .translate(0, 0);
}
 */ 
.opacity-animate4{
    animation:opt-animation4 1s;
  animation-fill-mode: forwards
}


@keyframes opt-animation4 {
  0% {
    transform: scale(0) rotate(360deg);
  }
  60% {
    transform: scale(0.8) rotate(-10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}