/**
 * @version		1.5.0
 * @package		JoomlaXTC YouTube Playlist Wall for Joomla 3.x
 * @author		JoomlaXTC http://www.joomlaxtc.com
 * @copyright	Copyright (C) 2015 Monev Software LLC. All rights reserved.
 * @license		http://www.joomlaxtc.com/license JoomlaXTC Proprietary Use License
 */
.ytpw_basic_playerWrap {
	position: relative;
	height: 0;
	padding-bottom: 56.25%; /* 16:9 */
	margin-bottom:25px;
}
.ytpw_basic_playerWrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ytpw_prev {
	cursor:pointer;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 20px 10px 0;
	border-color: transparent #1590c3 transparent transparent;
	display:inline-block;
	margin-right:6px;
}

.ytpw_next {
	cursor:pointer;
	display:inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 0 10px 20px;
	border-color: transparent transparent transparent #1590c3;
}

.ytpw_prev.ytpw_disabled {
	cursor:default;
	border-color: transparent #d6d6d6 transparent transparent;
}
.ytpw_next.ytpw_disabled {
	cursor:default;
	border-color: transparent transparent transparent #d6d6d6;
}

/* GRID CSS STYLES */
.ytpw_basic_gridWrap .gridImage img {
	display:block;
	max-width:100%;
	width:100%;
}

.ytpw_basic_gridWrap p {
	font-size: 11px !important;
	line-height: 120%!important;
	font-weight:900!important;}

.ytpw_video {
	cursor:pointer;
}

.ytpw_video.ytpw_empty {
	cursor:default;
}
 
/* FLEX GRID LAYOUT */
.ytpw_row {
	display: flex;
	display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: no-wrap; /* Safari 6.1+ */
    flex-wrap: no-wrap;
}

.ytpw_video {
	width: 33%!important;
	flex: none;
	-webkit-flex: none; /* Safari 6.1+ */
    -ms-flex: none; /* IE 10 */ 
	/*width:12.5%!important;*/
}

/* With Gutters */
.ytpw_row {
 	margin: -1em 0 0 -1em;
}
.ytpw_row > .ytpw_video {
	padding: 1em 0 0 1em;
}

/* Scroller*/
#scrollbar {/*width:1200px;*/ height: 120px; overflow-x: scroll; width: 100%;}


#scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
 

#scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 5px;
}
 

#scrollbar::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 5px;
}


/* RESPONSIVE GRID BREAKPOINTS */
@media (max-width: 1280px) {
#scrollbar {width:1200px; height: 120px; overflow-x: scroll;}
}

@media (max-width: 1180px) {
#scrollbar {width:1100px; height: 120px; overflow-x: scroll;}
}

@media (max-width: 1080px) {
#scrollbar {width:1000px; height: 120px; overflow-x: scroll;}
}

@media (max-width: 1024px) {
#scrollbar {width:940px; height: 120px; overflow-x: scroll;}
}

@media (max-width: 980px) {
#scrollbar {width:900px; height: 120px; overflow-x: scroll;}
}

@media (max-width: 900px) {
#scrollbar {width:820px; height: 120px; overflow-x: scroll;}
}

@media (max-width: 860px) {
#scrollbar {width:790px; height: 120px; overflow-x: scroll;}
}

@media (max-width: 768px) {
#scrollbar {width:740px; height: 90px; overflow-x: scroll;}
}

@media (max-width: 640px) {
#scrollbar {width:610px; height: 80px; overflow-x: scroll;}
}

@media (max-width: 480px) {
#scrollbar {/*width:460px;*/ width:100%; height: 70px; overflow-x: scroll;}
}

@media (max-width: 320px) {
#scrollbar {width:300px; height: 90px; overflow-x: scroll;}
}