/* CSS Document */
.video-container-outer {
	max-width:600px;
	max-height:400px;
	margin:0 auto;
}

.video-container {
    position: relative;
    padding-bottom: 50.2%;
    padding-top: 30px;
    height: 0px;
    overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100% !important;
    height: 100% !important;
}

#slideit label {
	cursor: pointer;
}
#slideit input[type="radio"] {
	display: none;
}

#slideit {
	z-index: 9999; /* Keep the item above all other elements on the page */
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0; /* Vertical position of the elements */
	right: 0; /* Horizontal position of the elements */
	pointer-events:none;
}

#slideit.blur {
backdrop-filter: blur(4px);
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(255, 255, 255) transparent;
/* RGBa with 0.6 opacity */
background: rgba(255, 255,255, 0.3);
transition: all 0.7s ease;
}

/***** Main styles *****/

#slideit section {
	margin: 0;
	overflow: hidden;
	width:100%;
	max-width: 600px;
	height: auto;
	left: 50%;
	top:50%;
	margin-top:-125px;
	position:relative;
	z-index: 10;
	background:#515048;
	color:#FFFFFF;
	-webkit-backface-visibility: hidden; /* Webkit transition hack */
	pointer-events: auto;
}
#slideit section,
#slideit input#close-item:checked ~ section {
	/* Section position when closed */
	-webkit-transform: translateX(350%);
	-moz-transform: translateX(350%);
	-ms-transform: translateX(350%);
	-o-transform: translateX(350%);
	transform: translateX(350%);

}
#slideit input#open-item:checked ~ section {
	/* Section position when opened */	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}
#slideit section .wrap {
	position: relative;
	float: right;
	width: 100%;
	height: auto;
	padding: 30px;
	padding-right:20px;
}



/***** Labels *****/

#slideit label.open,
#slideit label.close {
	text-align: center;
	position: absolute;
}
#slideit label.open {
	font-size: 22px;
	color:#FFFFFF;
	background: #515048;
	width: 215px;
	font-family: "amaticbold";
	top: 25%;
	right: -150px;
	bottom: auto;
	margin: 0 auto;
	padding: 10px 0;
	z-index: 1;
	/* Safari */
-webkit-transform: rotate(90deg);

/* Firefox */
-moz-transform: rotate(90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#slideit input#close-item:checked ~ label.open {
	right: -83px;
}
#slideit label.open:hover,
#slideit label.open:focus {
	background: #515048;
}
#slideit label.close {
	right: 15px;
	left: auto;
	top: 0;
	bottom: auto;
	font-size: 24px;
	background:#e6007e;
	color: #fff;
	width: 22px;
	z-index: 999;
}
#slideit label.close:hover,
#slideit label.close:focus {
	background:#e6007e;
}


/***** Transitions *****/

#slideit label {
	pointer-events: auto;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
#slideit section,
#slideit .data span {
	-webkit-transition: all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);
	-moz-transition: all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);
	-ms-transition: all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);
	-o-transition: all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);
	transition: all 0.4s cubic-bezier(0.2, 0.6, 0.3, 1);
}
#slideit input#close-item:checked ~ label.open {
	-webkit-transition: right 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease;
	-moz-transition: right 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease;
	-ms-transition: right 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease;
	-o-transition: right 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease;
	transition: right 0.3s ease 0.4s, background 0.1s ease, color 0.1s ease;
}