/**
 * Card Revolver CSS
 * Also includes some opinionated normalize ( Duplicated from the SirconBonesIII theme stylesheet. ).
 * For best practice, include these styles in your theme's stylesheet and uncheck the "load plugin styles" checkbox.
 *
 * @author Herman Hassel ( @agrabush ), Sircon Norge AS
 * @version 0.2
 * @license wtfpl2
 */

/*****************************************************************
 * Opinionated normalize, this is already set when using bones 
 *****************************************************************/
 
/* box sizing */
.card-revolver, .card-revolver *, .card-revolver *:before, .card-revolver: *:after {
	box-sizing: border-box;
}

/* we set figure width, never image width */
figure img {
	width: 100%;	
}



.card-revolver {
	background-color: #e7e6e5;
	margin-bottom: 20px !important;
	padding: 67px 0 40px !important;
}

	.card-revolver .inner {
		
	}
	
	.card-revolver-title {
		position: absolute;
		top: 20px; left: 30px;
		height: 47px;
		margin: 0;
		color: #000;
		line-height: 1;
		font-size: 30px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 300;
		text-transform: lowercase;
		background-repeat: no-repeat;
	}
	/* this part made for naeringslivsavisa.no
	
	@media ( min-width: 768px ) {
		.card-revolver-title {
			left: 260px;
			background-image: url( 'logo-mobile.png' );	/* attach this to a :before element maybe? *//*
		}
	}
	
	*/
	.card-revolver-container {
		position: relative;
		width: calc( 100% - 60px );
		height: 240px;
		margin: 0 auto;
		overflow: hidden;
		background-color: #fff;
		border: 1px solid rgba(0,0,0,.12);
		-webkit-box-shadow: inset 2px 2px 1px rgba(0,0,0,.05);
				box-shadow: inset 2px 2px 1px rgba(0,0,0,.05);
		
}

		.card-revolver-snippet {
			position: absolute;
			top: 10px; left: 0;
			opacity: 0;
			width: 220px;
			height: 220px;
			padding: 10px;
			border: 1px solid #ccc;
			background-color: #fff;
			transition: 0;
			-webkit-will-change: opacity, transform;
					will-change: opacity, transform;
		}
		
		.card-revolver-snippet:hover {
			text-decoration: none;
			-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.2);
					box-shadow: 2px 2px 3px rgba(0,0,0,.2);
		}
		
			.card-revolver-snippet-image {
				
			}
			
			.card-revolver-snippet-title {
				
			}
			.card-revolver-snippet-excerpt {
				color: #000;
    			position: absolute;
				bottom: 0;
				font-size: 80%;
			}
			
			.card-revolver-snippet-title:hover,
			.card-revolver-snippet-excerpt:hover {
				color: #983c4c;
			}
	
	.card-revolver-controls {
		top: 0; left: 0;
		width: 100%; 
		height: 0;
	}
	
		.card-revolver-control {
			position: absolute;
			top: 67px;
			width: 40px; 
			height: 240px;
			transition: .2s;
		}

		.card-revolver-control:hover {
			transition: .05s;
			background-color: rgba(0,0,0,.4);
		}
		
		.card-revolver-control:after {
			content: '';
			position: absolute;
			top: calc( 50% - 20px );
			display: block;
			width: 0; height: 0;
			border: 20px solid transparent;
			transition: .2s;
			-webkit-filter: drop-shadow( 0 0 4px rgba(0,0,0,.05) );
					filter: drop-shadow( 0 0 4px rgba(0,0,0,.05) );
		}
		
		.card-revolver-control:hover:after {
			transition: .05s;
			-webkit-filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.3) );
					filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.3) );
		}
		
		/* left button */
		.card-revolver-previous {
			left: 0;
		}
		.card-revolver-previous:after {
			left: -14px;
			border-right: 14px solid white;
		}
		
		/* right button */
		.card-revolver-next {
			right: 0px;
		}
		.card-revolver-next:after {
			right: -14px;
			border-left: 14px solid white;
		}
	
	.card-revolver-entry {
		position: absolute;
		bottom: 10px; right: 10px;
	}

@media ( min-width: 480px ) {
	
	.card-revolver-container {
		width: calc( 100% - 100px);
	}

	.card-revolver-control {
		width: 48px;
	}
	
	.card-revolver-previous:after {
		left: -5px;
	}
	
	.card-revolver-next:after {
		right: -5px;
	}
	
}