@charset "utf-8";
/* CSS Document */

.clear{clear:both;}

        .controls{
            width:100%;
            margin-bottom:8px;
            padding-left: 20px;
            padding-right: 20px;
        }
		.cbcontrol{
			font-size:24px;
			float:left;
			color:white;
            width:48%;
            text-align:center;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
		}

        #cbControlRight{
            margin-right:4%;
            background-color:#b53513;  
        }
            
        #cbControlLeft{
            background-color:#2e3192;
        }
		.cbcontrol:hover{
            cursor:pointer;
            background-color:#404040!important;
        }

		.stage{
			background-color: transparent;
			float: left;
			height: 400px;
			overflow: hidden;
			width:100%;
			z-index: 10;
			position:relative;
			-webkit-backface-visibility:hidden;
		}

		.cbImage{
			width:250px;
			height:250px;
			float:left;
			margin:40px 0px 25px 0px;
			box-shadow:
    -50px -50px 0 -45px var(--red),
    50px 50px 0 -45px var(--blue);
			position:absolute;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
		}
		
		.cbImage img{
			width:100%;
			height:100%;
		}
		
		.inactiveLeft{
			-webkit-transform:perspective(500px) rotateY(64deg);
			-O-transform:perspective(500px) rotateY(64deg);
			transform:perspective(500px) rotateY(64deg);
			-webkit-transition:all .5s ease-out;
			-O-transition:all .5s ease-out;
			transition:all .5s ease-out;
			box-shadow:
    -50px -50px 0 -45px var(--red),
    50px 50px 0 -45px var(--blue);
		}

		.inactiveRight{
			-webkit-transform:perspective(500px) rotateY(-64deg);
			-O-transform:perspective(500px) rotateY(-64deg);
			transform:perspective(500px) rotateY(-64deg);
			-webkit-transition:all .5s ease-out;
			-O-transition:all .5s ease-out;
			transition:all .5s ease-out;
			box-shadow:
    -50px -50px 0 -45px var(--red),
    50px 50px 0 -45px var(--blue);;
		}
		
		.active{
			z-index:100;
			-webkit-transform:perspective(500px) scale(1.1, 1.1) rotateY(0deg);
			-O-transform:perspective(500px) scale(1.1, 1.1) rotateY(0deg);
			transform:perspective(500px) scale(1.1, 1.1) rotateY(0deg);
			-webkit-transition:all .5s ease-out;
			-O-transition:all .5s ease-out;
			transition:all .5s ease-out;
		}
        
        .intro{
            color:#fff;
        }