/* ======================================================= 
 *
 *    carousel3D  
 *    Version: 1
 *    By castlecode
 *
 *    Contact: http://codecanyon.net/user/castlecode
 *    Created: April 04, 2018
 *
 *    Copyright (c) 2018, castlecode. All rights reserved.
 *    
 *    ---------------------------------
 *    CONTENTS
 *    ---------------------------------
 *
 *      [1] CAROUSEL
 *      [2] FX
 *      [3] INFO FUNCTIONALITY
 *      [4] INFO
 *    
 * ======================================================= */
  

/* ====================================================================== *
      [1] CAROUSEL
 * ====================================================================== */
	
	.carousel3D>div{
		display: none;
	}

	.carousel3D{
		background-color: #e2e2e2;
		background-position: center center;
    	background-repeat: no-repeat;
    	background-image: url('loading-image.gif');

		min-height: 100px;
		width: 100%;
		position: relative;
		
		cursor: move;
    	cursor: grab;
    	cursor: -webkit-grab;
	}

	.carousel3D:active {
	    cursor: grabbing;
	    cursor: -webkit-grabbing;
	}

	.carousel3D_ready{
		background-image: none;
	}

	.carousel3D_ready>div{
		display: block;
	}

	.carousel3D_item{
		position: absolute;
		left: 50%;
		background: #fff;
		box-sizing: border-box;

		-webkit-transform-style: preserve-3d;

		-webkit-transition: opacity 0.7s ease, transform .7s ease;
		   -moz-transition: opacity 0.7s ease, transform .7s ease;
			-ms-transition: opacity 0.7s ease, transform .7s ease;
		 	 -o-transition: opacity 0.7s ease, transform .7s ease;
				transition: opacity 0.7s ease, transform .7s ease;

	}

	.carousel3D_active{
		z-index: 99 !important;

		-webkit-transform : none !important;
        -moz-transform    : none !important;
        -ms-transform     : none !important;
        -o-transform      : none !important;
        transform         : none !important;
	}

	.carousel3D_active img{
		opacity: 1 !important;
		position: relative;
	}

	.carousel3D_item img{
		width: 100%;
		opacity: 0.7;
		display: block;
		box-sizing: border-box;

		-webkit-transition: opacity 0.7s ease;
		   -moz-transition: opacity 0.7s ease;
			-ms-transition: opacity 0.7s ease;
		 	 -o-transition: opacity 0.7s ease;
				transition: opacity 0.7s ease;
	}

	.carousel3D_removed{
		opacity: 0 !important;
	}

/* ====================================================================== *
      [2] FX
 * ====================================================================== */

	.carousel3D_fx_hidden{
		opacity: 0 !important;
		z-index: 1 !important;
	}

	.carousel3D_fx_before_2 {
	    -webkit-transform: translate(-130%, 26%) rotateZ(-20deg) scale(1);
	    	 	transform: translate(-130%, 26%) rotateZ(-20deg) scale(1);
	    /*opacity: 0.3*/
	    z-index: 3;
	}

	.carousel3D_fx_before_1 {
	    -webkit-transform: translate(-75%, 10%) rotateZ(-13deg) scale(1);
	    		transform: translate(-75%, 10%) rotateZ(-13deg) scale(1);
	    /*opacity: 0.5*/
	    z-index: 4;
	}

	.carousel3D_fx_after_1 {
	    -webkit-transform: translate(75%, 10%) rotateZ(13deg) scale(1);
	    		transform: translate(75%, 10%) rotateZ(13deg) scale(1);
	    /*opacity: 0.5*/
	    z-index: 4;
	}

	.carousel3D_fx_after_2 {
	    -webkit-transform: translate(130%, 26%) rotateZ(20deg) scale(1);
	    		transform: translate(130%, 26%) rotateZ(20deg) scale(1);
	    /*opacity: 0.3*/
	    z-index: 3;
	}

/* ====================================================================== *
      [3] INFO FUNCTIONALITY
 * ====================================================================== */

 	.carousel3D_info{
 		display: none;
 	}

 	.carousel3D_info_ready{
 		display: block;
 	}

	.carousel3D .carousel3D_item_info{
 		display: none;
 	}

 	.carousel3D_info{
 		box-sizing: border-box;
 		position: relative;
 	}

 	.carousel3D_info_items{
 		box-sizing: border-box;
 		position: relative;
		overflow: hidden;
		background: #fff;

		-webkit-transition: height 0.7s ease;
		   -moz-transition: height 0.7s ease;
			-ms-transition: height 0.7s ease;
		 	 -o-transition: height 0.7s ease;
				transition: height 0.7s ease;
 	}	

 	.carousel3D_item_info{
 		position: absolute;
 		width: 100%;
 	}

/* ====================================================================== *
      [4] INFO DESIGN
 * ====================================================================== */

 	.carousel3D_info{
 		width: 500px;
 		max-width: 100%;
 		margin: auto;
 	}

 	.carousel3D_item_info{
 		padding: 20px;
 		padding-top: 40px;
 		background: white;
 		text-align: center;
 	}

 	.carousel3D_info h4{
 		margin-bottom: 25px;
 		font-weight: bold;
 		font-size: 20px;
 	}

 	.carousel3D_info .row a{
 		display: block;
 		margin-bottom: 10px;
    	color: #565656;
    	font-weight: 400;
 	}

 	.carousel3D_info .btn{
		border: 1px solid #212529;
		border-radius: 15px;
		padding: 5px 30px;
		font-weight: 500;
		background: #fff;
 	}

 	.carousel3D_info .carousel3D_prev,
 	.carousel3D_info .carousel3D_next{
 		cursor: pointer;
		position: absolute;
		top: 50%;
		margin-top: -20px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 50%;
		background: white;
		font-size: 14px;
		display: block;

		-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
	       -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
	         -o-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
	        -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
	            box-shadow: 0 1px 2px rgba(0,0,0,0.15);
 	}
 	.carousel3D_info .carousel3D_prev{
		left: -20px;
 	}
 	.carousel3D_info .carousel3D_next{
		right: -20px;
 	}