.pm_warn { 
	background: url('images/svg/exclamation.svg') 10px 50% no-repeat; 
}
.nosvg .pm_warn {
	background-image: url('images/png/exclamation.png');
}

.pm_info { 
	background: url('images/svg/information.svg') 10px 50% no-repeat; 
}

.nosvg .pm_info{
	background-image: url('images/png/information.png');
	background-repeat: no-repeat;
}

.pm_error { 
	background: url('images/svg/error.svg') 10px 50% no-repeat;
}
.nosvg .pm_error {
	background-image: url('images/png/error.png');	
}

.pm_warn, .pm_info, .pm_error {
	padding-left: 48px;
	background-size: 20px;
}

/*************** ANIMATIONS ***************/

@-webkit-keyframes spin-vertical1 {
	from { -webkit-transform: rotateX(0); }
	to { -webkit-transform: rotateX(-90deg); }
}

@-ms-keyframes spin-vertical1 {
	from { ms-transform: rotateX(0); }
	to { ms-transform: rotateX(-90deg); }
}

@keyframes spin-vertical1 {
	from { transform: rotateX(0); }
	to { transform: rotateX(-90deg); }
}

@-webkit-keyframes spin-vertical2 {
	from { -webkit-transform: rotateX(0); }
	to { -webkit-transform: rotateX(-90deg); }
}

@-ms-keyframes spin-vertical2 {
	from { ms-transform: rotateX(0); }
	to { ms-transform: rotateX(-90deg); }
}

@keyframes spin-vertical2 {
	from { transform: rotateX(0); }
	to { transform: rotateX(-90deg); }
}

/*************** STANDARD CUBE ***************/
.cube {
	position: relative;
	margin: 0 auto;
		
	/* 3D Transforms attributes */
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: 0% 0% 0px;
	
	-webkit-transform-style: preserve-3d;
	-webkit-animation: spin 1s 1 ease;
	
	-moz-transform-style: preserve-3d;
	-moz-animation: spin 1s 1 ease;

	-ms-transform-style: preserve-3d;
	-ms-animation: spin 1s 1 ease;

	transform-style: preserve-3d;
	animation: spin 1s 1 ease;
}

.cube div {
	width: 100%;
	margin: 0;
	position: absolute;
}

/*************** DEPTH CUBE ***************/
.depth div.back-pane {
	-webkit-transform: translateZ(-20px) rotateY(180deg);
	-moz-transform: translateZ(-20px) rotateY(180deg);
	-ms-transform: translateZ(-20px) rotateY(180deg);

	transform: translateZ(-20px) rotateY(180deg);
}
.depth div.top-pane {
	-webkit-transform:rotateX(-90deg) translateY(-20px);
	-webkit-transform-origin: top center;

	-moz-transform:rotateX(-90deg) translateY(-20px);
	-moz-transform-origin: top center;

	-ms-transform:rotateX(-90deg) translateY(-20px);
	-ms-transform-origin: top center;

	transform:rotateX(-90deg) translateY(-20px);
	transform-origin: top center;
}
.depth div.bottom-pane {
	-webkit-transform:rotateX(90deg) translateY(20px);
	-webkit-transform-origin: bottom center;

	-moz-transform:rotateX(90deg) translateY(20px);
	-moz-transform-origin: bottom center;

	-ms-transform:rotateX(90deg) translateY(20px);
	-ms-transform-origin: bottom center;

	transform:rotateX(90deg) translateY(20px);
	transform-origin: bottom center;
}
.depth div.front-pane {
	-webkit-transform: translateZ(10px);
	-moz-transform: translateZ(10px);
	-ms-transform: translateZ(10px);

	transform: translateZ(10px);
}


/*************** FIRST SPIN ***************/
.cube-wrap.vertical .cube.active {
	-webkit-transform-origin: 0 20px;
	-moz-transform-origin: 0 20px;
	-ms-transform-origin: 0 20px;
	transform-origin: 0 20px;

	-webkit-animation: spin-vertical1 1s 1 ease;
	-moz-animation: spin-vertical1 1s 1 ease;
	-ms-animation: spin-vertical1 1s 1 ease;
	animation: spin-vertical1 1s 1 ease;
	
	/* keep the final state of the rotation */
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/*************** SECOND SPIN ***************/
.cube-wrap.vertical .cube.active2 {
	-webkit-transform-origin: 0 20px;
	-moz-transform-origin: 0 20px;
	-ms-transform-origin: 0 20px;
	transform-origin: 0 20px;
	
	-webkit-animation: spin-vertical2 1s 1 ease;
	-moz-animation: spin-vertical2 1s 1 ease;
	-ms-animation: spin-vertical2 1s 1 ease;
	animation: spin-vertical2 1s 1 ease;
	
	-webkit-animation-direction: alternate-reverse;
	animation-direction: alternate-reverse;
}

.cube-wrap.vertical .depth div.top-pane {
	-webkit-transform:rotateX(-270deg) translateY(-20px);
	-moz-transform:rotateX(-270deg) translateY(-20px);
	-ms-transform:rotateX(-270deg) translateY(-20px);
	transform:rotateX(-270deg) translateY(-20px);
}

.cube-wrap.vertical .depth div.back-pane {
	-webkit-transform: translateZ(-20px) rotateX(180deg);
	-moz-transform: translateZ(-20px) rotateX(180deg);
	-ms-transform: translateZ(-20px) rotateX(180deg);

	transform: translateZ(-20px) rotateX(180deg);
}

.cube-wrap.vertical .depth div.bottom-pane {
	-webkit-transform: rotateX(-90deg) translateY(20px);
	-moz-transform: rotateX(-90deg) translateY(20px);
	-ms-transform: rotateX(-90deg) translateY(20px);
	transform: rotateX(-90deg) translateY(20px);
}