/**
 * Drop Shadow Boxes - front-end and editor styles.
 *
 * Shared by the shortcode, the widget and the block. Loaded only on
 * requests that actually render a box.
 */

/********************************************
 *                  Box model
 ********************************************/

.dropshadowboxes-container {
	clear: both;
	display: flex;
	position: relative;
	z-index: 1;
}
.dropshadowboxes-container:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.dropshadowboxes-container.dropshadowboxes-center{
	width:100%;
}
.dropshadowboxes-container.dropshadowboxes-center > div.dropshadowboxes-drop-shadow {
	margin-left:auto;
	margin-right:auto;

}
.dropshadowboxes-drop-shadow {
	background: none repeat scroll 0 0;
	padding:10px;
	margin: 10px 0 10px 0;
	position: relative;
	border-radius:3px;
	flex:1;
}

.dropshadowboxes-left{
	clear: none;
	float:left;
	margin-right:10px;
}
.dropshadowboxes-right{
	clear: none;
	float:right;
	margin-left:10px;
}

/********************************************
 *                  Corners
 ********************************************/

.dropshadowboxes-rounded-corners{
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}

/********************************************
 *                  Other shadows
 ********************************************/

.dropshadowboxes-inside-shadow{
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}
.dropshadowboxes-outside-shadow{
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.dropshadowboxes-inside-and-outside-shadow{
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.1);
}

/********************************************
 *                  Effects
 ********************************************/

.dropshadowboxes-drop-shadow:before, .dropshadowboxes-drop-shadow:after {
	content: "";
	position: absolute;
	z-index: -2;
}
.dropshadowboxes-lifted-bottom-left:before{

	box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	transform:rotate(-3deg);
	bottom: 17px;

	height: 20%;
	left: 10px;
	max-height: 100px;
	max-width: 300px;
	width: 50%;
}
.dropshadowboxes-lifted-bottom-right:after{

	box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	transform:rotate(-3deg);
	bottom: 17px;

	height: 20%;
	left: 10px;
	max-height: 100px;
	max-width: 300px;
	width: 50%;
}
.dropshadowboxes-lifted-bottom-right:after {
	transform:rotate(3deg);
	left: auto;
	right: 10px;
}
.dropshadowboxes-lifted-both:before, .dropshadowboxes-lifted-both:after {
	box-shadow:0 15px 10px;
	transform:rotate(-3deg);
	bottom: 15px;

	height: 20%;
	left: 10px;
	max-height: 100px;
	max-width: 300px;
	width: 50%;
}
.dropshadowboxes-lifted-both:after {
	transform:rotate(3deg);
	left: auto;
	right: 10px;
}
.dropshadowboxes-curled {
	border: 1px solid #EFEFEF;
	border-radius:0 0 120px 120px / 0 0 6px 6px;
}
.dropshadowboxes-curled:before, .dropshadowboxes-curled:after {
	box-shadow:0 8px 12px;
	transform:skew(-8deg) rotate(-3deg);
	bottom: 12px;

	height: 55%;
	left: 10px;
	max-height: 100px;
	max-width: 200px;
	width: 50%;
}
.dropshadowboxes-curled:after {
	transform:skew(8deg) rotate(3deg);
	left: auto;
	right: 10px;
}
.dropshadowboxes-perspective-left:before {
	box-shadow:-80px 0 8px ;
	transform:skew(50deg);
	transform-origin:0 100%;
	bottom: 3px;
	height: 35%;
	left: 70px;
	width: 50%;
}

.dropshadowboxes-perspective-left:after {
/*display: none;*/
}
.dropshadowboxes-perspective-right:before {
	box-shadow:80px 0 8px;
	transform:skew(-50deg);
	transform-origin:0 100%;
	width: 50%;
	height: 35%;
	bottom: 4px;
	right: 70px;

}
.dropshadowboxes-perspective-right:after {
	display: none;
}

.dropshadowboxes-raised-no-inside-shadow-no-outside-shadow {
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);
}
.dropshadowboxes-raised-with-inside-shadow-no-outside-shadow {

	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.1);
}
.dropshadowboxes-raised-no-inside-shadow-with-outside-shadow {
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
}
.dropshadowboxes-raised-with-inside-shadow-with-outside-shadow {
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.1);
}
.dropshadowboxes-curved:before {
	border-radius: 10px 10px 10px 10px / 100px 100px 100px 100px;
	bottom: 10px;

	left: 0;
	right: 50%;
	top: 10px;
	box-shadow:0 0 15px;
}
.dropshadowboxes-curved-vertical-2:before {
	right: 0;
}
.dropshadowboxes-curved-horizontal-1:before {
	border-radius:100px / 10px;
	bottom: 0;
	left: 10px;
	right: 10px;
	top: 50%;
}
.dropshadowboxes-curved-horizontal-2:before {
	border-radius:100px / 10px;
	bottom: 0;
	left: 10px;
	right: 10px;
	top: 0;
}

/********************************************
 *                  Colors
 ********************************************/

.dropshadowboxes-effect-blue:before,
.dropshadowboxes-effect-blue:after {
	color:rgba(0, 0, 255, 0.6);
}
.dropshadowboxes-effect-white:before,
.dropshadowboxes-effect-white:after {
	color:rgba(255, 255, 255, 0.6);
}
.dropshadowboxes-effect-yellow:before,
.dropshadowboxes-effect-yellow:after {
	color:rgba(255, 255, 0, 0.6);
}
.dropshadowboxes-effect-red:before,
.dropshadowboxes-effect-red:after {
	color:rgba(255, 0, 0, 0.6);
}
.dropshadowboxes-effect-green:before,
.dropshadowboxes-effect-green:after {
	color:rgba(0, 255, 0, 0.6);
}
.dropshadowboxes-effect-default:before,
.dropshadowboxes-effect-default:after  {
	color:rgba(0, 0, 0, 0.5);
}