/**
 * @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%;
}

/* GRID CSS STYLES */

.ytpw_basic_gridWrap {
	margin-bottom:24px;
}

.ytpw_basic_gridWrap .gridImage img {
	display:block;
	max-width:100%;
	width:100%;
	margin-bottom:6px;
}

/* HOVER EFFECT */
/* Set the background position center center to have the icon fade in, use bottom center to fly in from bottom, left center to fly in from left, top center to fly in from top and right center to fly in from the right  */
.ImageWrapper {
	display: block;
	overflow: hidden;
	position: relative;
}
.ImageWrapper .PStyleNe {
	position: absolute;
	background: url(yt_play.png) center center no-repeat;
	width: 100%;
	height: 100%;
	opacity: 0;
	top: 0;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
.ImageWrapper:hover .PStyleNe {
	opacity: 1;
	background-position: center center;
}

.ytchover-wrap {position: relative;}

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

/* scroller */
#scrollbar {
	width: 200px; 
	height: 200px;
	overflow-y: auto;
}
#scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
#scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 5px;
}

#scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.5);
    border-radius: 5px;
}

/* pages buttons */
.pagebuttons {
	text-align:left;
	display:inline-block;
	width:50%;
}

.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;
}

.ytpw_loading {

}

/* playlist button */
.playlistbutton {
	text-align:right;
	display:inline-block;
	width:50%;
}

a.playlistbtn {
	padding:6px 12px;
	background:#1590c3;
	color:#fff;
	font-size:12px;
}

a.playlistbtn:hover {
	color:#fff;
}

.ytpw_video {
	cursor:pointer;
}

.ytpw_video.ytpw_empty {
	cursor:default;
}

/* FLEX GRID LAYOUT */
.ytpw_row {
	display: flex;
	display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: nowrap; /* Safari 6.1+ */
    flex-wrap: nowrap;
	
}

.ytpw_video {
	flex: 1;
	-webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
	
}

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

/* RESPONSIVE FLEX GRID BREAKPOINTS */
@media (max-width: 768px) {
.ytpw_row {
  	margin:0em;
	
}
.ytpw_video {
	flex:100%;  
	-webkit-flex:100%; /* Safari 6.1+ */
    -ms-flex: 100%; /* IE 10 */ 
	padding:0em;
	width:100%!important;
	 
}
/* FLEX GRID LAYOUT */
.ytpw_row {
	display: flex;
	display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
	padding:0px;
	margin:0px;
	
}
.ytpw_row > .ytpw_video {
	padding:0px;
}
.ytpw_basic_gridWrap p {
	font-size: 16px !important;
	line-height: 120%!important;
	font-weight:600!important;
}
}