/* screen size fixes 2022-11-17 23:56:29 */

@media all and (max-width: 479px) {
	.video-details-heading {
		font-size: 0.8rem;

	}
}
	/* .site-content-wrapper {
		max-height: calc(100vh - 40px);
		margin-top: 40px; 


	}
	.video-list-item {
		width: calc(48% - 2px);
		border-radius: 5px;
	} 
	.pagination-container li {
		padding: 5px 10px;
    	border-radius: 3px;
    	font-size: 0.9rem;
	}
	.video-list-wrapper {
		margin: 15px 0;
	} 
	.video-list-item .title {
		font-size: 0.7em;
		line-height: 1.5;
	}

}
*/
/* big - max-height: calc(100vh - 80px); 
	margin-top: 80px;
*/
/* @media all and (min-width: 480px) { */


.loader {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	min-height: 100px;
}

.loader-animation {
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	border: 6px solid #333;
	border-left-color: transparent;
	animation: rotation 2s infinite linear;
}

@keyframes rotation {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(359deg);
	}
}

.no-videos-found {
	width: 100%;
	margin-top: 30vh;
	text-align: center;
	line-height: 1.4rem;
	cursor: pointer;
}

.video-list-wrapper {
	margin: 40px 0;
}

.video-list-wrapper h2 {
	margin-left: 5px;
}

.video-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.video-list--featured {
	border-bottom: 1px solid #ddd;
	margin-bottom: 1rem;
}

.video-list-item {
    display: inline-block;
	width: calc(20% - 10px);
	border-radius: 10px;
    vertical-align: top;
    margin: 10px 5px 0px 2px;
    overflow: hidden;
    box-shadow: 6px 6px 18px 0px rgb(0 0 0 / 30%);
}

.video-list .video-preview {
	position: relative;
	width: 100%;
	height: 80%;
	/* make the images 16:9 aspect ratio */
	padding: 0 0 calc(9 / 16 * 100%) 0;
	margin: 0;
	overflow: hidden;
	list-style: none;

	background-image: url('/wp-content/plugins/yourcamspot/assets/awe/logo.svg');
	background-size: 50%;
	background-position: center;
	background-color: #751403;
	background-repeat: no-repeat;
}

.video-list .video-preview-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.video-list .video-preview-item.visible {
	opacity: 1;
}

.video-list-item .title {
    margin-top: 15px;
    color: #ebebeb;
    background-color: #d45f5f;
    margin-top: 0;
    text-align: center;
	height: 3.4rem;
}
.video-list-item .title a { 
	color: #ebebeb;
}
.pagination-container {
	width: 100%;
	margin: 10px 0;
	text-align: center;
	user-select: none;
}

.pagination-container ul {
	display: inline-block;
}

.pagination-container li {
	display: inline-block;
	margin: 0 5px;
	line-height: 1;
	border-radius: 3px;
	padding: 16px 20px;
	font-size: 1.3rem;	
	background: #ac0505;
	color: #fff;
	cursor: pointer;
}

.pagination-container li.current-page {
	background: #ef7777;
}

.pagination-left-arrow,
.pagination-right-arrow {
	display: inline-block;
	vertical-align: top;
	width: 16px;
	height: 15px;
	margin-top: 1px;
}

.pagination-left-arrow {
	margin-right: 5px;
}

.pagination-right-arrow {
	margin-left: 5px;
}

/******************************/
/* 		from app.css 		  */
/******************************/
/*
html {
	font-size: 62.5%;
}

body {
	font-size: 1.4rem;
}

html, body {
	font-family: 'Rubik', sans-serif;
	color: #fff;
	background: #fefefe;


	width: 100vw;
	height: 100vh;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
body.disable-menu .ycsl-content-wrapper {
	width: 100%;
	margin-left: 0;
}
body.disable-interaction * {
	pointer-events: none;
	user-select: none;
}


*/
h1,
h2 {
	font-family: 'Amethysta', serif;
	font-size: 1.8rem;
	font-weight: 400;
}

em {
	color: #ff0000;
	font-weight: 400;
	font-style: normal;
}
em a { 
	color: #ff0000;
	font-weight: 400;
	font-style: normal;
}

/******************************/
/* Site Content Wrapper       */
/******************************/

.ycsl-content-wrapper {
	width: 99vw;
	/* max-height: calc(100vh - 80px); */
	margin-top: 0px;
	overflow-x: hidden;
	overflow-y: auto;
	background: #f8f8f8;
}

.ycsl-content {
	width: 100%;
	height: auto;
	margin-top: 0px;
	min-height: 90vh;	
}

.ycsl-content h1,
.ycsl-content h2 {
	color: #fff;
}


[data-router-link-bound] {
	cursor: pointer;
}

/* -------- Scrapping other css files - details.css items here --------- */
.video-content-wrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.video-content {
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 310px);
	margin-right: 10px;
}

.video-sidebar {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 300px;
	font-size: 0;
	overflow: hidden;
}

.video-sidebar::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 200px;
	z-index: 1;
	pointer-events: none;
	/* background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #00151c 60%); */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(135 13 1 / 69%) 60%);
}

.video-sidebar .title {
	height: 1.5rem;
	font-size: 0.6rem;
}

.video-sidebar .video-list-item {
	width: calc(50% - 3px);
	margin: 6px 6px 0 0;
}

.video-sidebar .video-list-item:nth-child(even) {
	margin-right: 0;
}

.video-sidebar .video-list-wrapper {
	margin: 0;
}

.video-sidebar-more-button {
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 50px;
	outline: 0;
	border: 0;
	border-radius: 5px;
	font-size: 1.2rem;
	font-weight: 500;
	text-transform: uppercase;
	z-index: 2;
	background: #9d1103;
	color: #efefef;
}

.video-player-frame-aspect-ratio-wrapper {
	position: relative;
	width: 100%;
	/* make the video frame exactly 16:9 aspect ratio */
	padding-top: calc(9 / 16 * 100%);
}

.video-player-frame-aspect-ratio-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-details {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 20px 2%;
	background: #660212;
}

.video-details p {
	margin: 10px 0 0;
	color: #ededed;
}

.video-details-heading {
	margin-top: 0;
	text-transform: uppercase;
}

.video-details-icon {
	margin-right: 5px;
	margin-top: -3px;
	height: 17px;
}

.video-details-icon,
.video-details-meta-category {
	display: inline-block;
	vertical-align: middle;
}
/* 2022-11-24 05:07:41 */

.ycs-video-wrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.ycs-video-player {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 310px);
    margin-right: 10px;
}