div.center
{
	width			: 80%;
	margin			: 30px auto;
	text-align		: center;
}

div.purchase
{
	bottom			: -100%;
	visibility		: hidden;
	z-index			: 0;
}

div.info-holder
{
	width			: 100%;
	text-align		: center;
}
div.info-holder span
{
	display			: block;
	font-family		: "Arima Madurai", times;
	font-size		: 1.4em;
	line-height		: 50px;
	color			: #636363;
	width			: 90%;
	margin-left		: 50%;
	transform		: translateX(-50%);
	font-weight		: 300;
}

div.info-holder span.price
{
	display			: block;
	font-family		: "Arima Madurai", times;
	font-size		: 1.2em;
	font-weight		: 300;
	line-height		: 40px;
	background-color: #f0652e;
	color			: #FFF;
	margin			: 0px auto;
	margin-top		: 10px;
	margin-left		: 50%;
	transform		: translateX(-50%);
	width			: 50%;
	border-radius	: 5px;
}

div.button-holder
{
	width			: 90%;
	text-align		: center;
	visibility		: visible;
	opacity			: 1;
	margin			: 5% auto;
	transition		: all .3s ease;
}

.slick-center div.button-holder
{
	display			: block;
	bottom			: 5%;
	transition		: all .5s ease;
}

div.purchase
{
	width			: 100%;
	height			: auto;
	padding-bottom	: 10%;
	padding-top		: 0;
	bottom			: -20%;
	visibility		: visible;
	background-color: #FFF;
	position		: absolute;
	z-index			: 2;
	opacity			: 0;
	text-align		: center;
	transition		: all .3s ease;
	visibility		: hidden;
}
.slick-center div.purchase.active
{
	bottom			: 5%;
	visibility		: visible;
	opacity			: 1;
}

hr
{
	height			: 1px;
	background-color: #EEE;
	margin			: 10px 40px;
	border			: none;
	padding			: 0;
}
div.purchase h2
{
	display			: block;
	font-family		: "Cormorant Garamond", times;
	font-size		: 1.3em;
	font-weight		: 200;
	line-height		: 30px;
	color			: rgb(232, 34, 45);
	margin			: 0px;
	margin-top		: 30px;
}

div.purchase label
{
	display			: block;
	font-family		: "Cormorant Garamond", times;
	font-size		: 1.1em;
	font-weight		: 200;
	width			: 80%;
	margin			: 0 auto;
	text-decoration	: none;
	color			: #333;
	line-height		: 40px;
	white-space		: nowrap;
}

div.purchase label input[type="radio"]
{
	display			: none;
}


div.purchase label span.buy-l
{
	display			: inline-block;
	text-align		: left;
	padding-left	: 5%;
	border-radius	: 5px;
}
div.purchase label span.buy-r
{
	display			: inline-block;
	text-align		: right;
	width			: 40%;
	padding-right	: 5%;
	border-radius	: 5px;
}

.slick-center div.purchase label input[type="radio"]:checked ~ span.buy-r,
.slick-center div.purchase label input[type="radio"]:checked ~ span.buy-l
{
	color			: rgb(232, 34, 45);
	background-color: #EEE!important;
}

div.contain
{
	display			: inline-block;
	background-color: #F5F5F7;
	width			: 22%;
	min-width		: 250px;
	position		: relative;
	vertical-align	: top;
	margin			: 3%;
	min-height		: 50vh;
	border-radius	: 10px;
	border			: 1px solid #CCC;
	overflow		: hidden;
	padding			: 2%;
}

div.contain:hover > div.button-holder
{
	opacity: 1;
	visibility	 : visible;
}

div.contain a img
{
    display			: block;
	max-width		: 100%;
	max-height		: 30vh;
	height			: auto;
	object-fit		: contain!important;
	margin			: 0px auto;
	transition		: all .3s ease;
	margin-bottom	: 5%;
	border			: 1px solid #FFF;
}
div.contain h2
{
	font-family		: "Arima Madurai", sans-serif;
	font-size		: 1.4em;
	color			: ;
	text-align		: center;
	display			: block;
	font-weight		: 400;
}
div.contain h3
{
	font-family		: "Cormorant Garamond", sans-serif;
	font-size		: 1.4em;
	color			: #777;
	text-align		: center;
	display			: block;
	font-weight		: 300;
	margin			: 0px auto;
}




div.containside
{
	display			: inline-block;
	background-color: #FCFCFC;
	width			: 43%;
	min-width		: 500px;
	position		: relative;
	vertical-align	: top;
	margin			: 2%;
	border-radius	: 0px;
	border			: 1px solid #EEE;
	overflow		: hidden;
	padding			: 1%;
}

div.containside:hover > div.button-holder
{
	opacity: 1;
	visibility	 : visible;
}
div.containside a
{
    display			: block;
	float			: left;
	width			: 45%;
}

div.containside a img
{
    display			: block;
	max-width		: 100%;
	max-height		: 20vh;
	height			: auto;
	object-fit		: contain!important;
	margin			: 0px auto;
	transition		: all .3s ease;
	margin-bottom	: 5%;
	border			: 1px solid #FFF;
}
div.containside h2
{
	font-family		: "Arima Madurai", sans-serif;
	font-size		: 1.2em;
	text-align		: left;
	display			: block;
	font-weight		: 400;
	margin			: 0;
}
div.containside h3
{
	font-family		: "Cormorant Garamond", sans-serif;
	font-size		: 1em;
	color			: #777;
	text-align		: left;
	display			: block;
	font-weight		: 300;
	margin			: 0px auto;
	line-height		: 30px;
}

div.containside div.info-holder
{
	width			: 45%;
	text-align		: left;
	display			: block;
	float			: left;
	padding-left	: 30px;
}
div.containside span
{
	display			: block;
	font-family		: "Arima Madurai", times;
	font-size		: 1.1em;
	color			: #636363;
	font-weight		: 300;
	margin			: 0;
	transform		: none;
}

div.containside div.button-holder
{
	width			: 90%;
	text-align		: center;
	visibility		: visible;
	opacity			: 1;
	margin			: 0% auto;
	transition		: all .3s ease;
}

.video-thumbs
{
	display			: inline-block;
	width			: calc(20% - 40px);
	margin			: 15px;
	position		: relative;
	height			: 18vh;
	min-height		: 100px;
	background		: transparent no-repeat center top;
	background-size	: contain;
	vertical-align	: top;
	border			: 1px solid #CCC;
	border-radius	: 5px;
	overflow		: hidden;
}
.video-thumbs:hover
{
	border			: 1px solid red;
}
.video-thumbs:hover a
{
	opacity			: 1;
	visibility		: visible;
}

.video-thumbs span
{
	font-family		: "Arima Madurai", sans-serif;
	font-size		: .8em;
	text-align		: center;
	display			: block;
	text-decoration	: none;
	color			: #444;
	position		: absolute;
	bottom			: 0;
	width			: 100%;
	text-align		: center;
	background-color: #EEE;;
	line-height		: 40px;
	overflow		: hidden;
	height			: 40px;
}
.video-thumbs a
{
	width			: 50px;
	line-height		: 50px;
	border-radius	: 100%;
	background-color: red;
	opacity			: 0;
	visibility		: hidden;
	transition		: all .3s ease;
	position		: absolute;
	left			: 50%;
	top				: 25%;
	transform		: translateX(-50%);
 	display			: block;
	color			: white;
	font-size		: 2.5em;
	text-align		: center;
	text-decoration	: none;
	font-weight		: 200!important;
}
.playing
{
	border			: 1px solid red;
	box-shadow		: 0 0 20px rgba(236,80,90, .3);
	opacity			: .7;
}


@media only screen and (max-width: 800px)
{
	div.center
	{
		width			: 100vw;
		margin			: 0px auto;
		padding			: 0;
	}


	div.contain
	{
		width			: 80%;
		min-width		: 300px;
		margin			: 5% auto;
		min-height		: 50vh;
		padding			: 2%;
	}
	.video-thumbs
	{
		display			: inline-block;
		width			: calc(50% - 30px);
		margin			: 10px;
	}
	div.containside
	{
		display			: block;
		background-color: #FCFCFC;
		width			: 90vw;
		min-width		: 90vw;
		margin			: 5% auto;
		text-align		: center;
		padding			: 20px 0;
	}

	div.containside a
	{
	    display			: block;
		float			: none;
		width			: 90%;
		padding			: 0;
		margin			: 0 auto;
	}
	div.containside div.info-holder
	{
		width			: 100%;
		text-align		: left;
		display			: block;
		float			: none;
		padding			: 0px;
		text-align		: center;

	}
	div.containside h2,
	div.containside h3
	{
		text-align		: center;
	}

	div.containside span
	{
		margin			: 0px auto;
	}
	.center h4
	{
		text-align		: center;
	}
}