/*
 * Examples *
 */

.example .show-code {
	display: inline-block;
	float: right;
	width: 20px;
	height: 20px;
	font-size: 15px;
	text-align: center;
	color: #fff;
	background: #E74C3C;
	border-radius: 100%;
	cursor: pointer;
}

.example .code {
	display: none;
}

.example .loading {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 5px;
	background: url(loading.gif) no-repeat;
	vertical-align: middle;
}

.example .pagination {
	padding: 10px 0;
	text-align: center;
}

.example .pagination span {
	display: inline-block;
	padding: 8px;
	margin: 0 1px;
	border: 1px solid #E74C3C;
	border-radius: 2px;
	cursor: pointer;
}

.example .pagination span.disabled {
	cursor: default;
}

.example .pagination span:hover:not(.disabled) {
	color: #fff;
	background: #E74C3C;
}

.example-container {
	overflow: hidden;
	margin: 0 -5px;
}

.example-container iframe,
.example-container img {
	display: block;
	width: 100%;
}

/*.example-container .video-item {*/
	/*float: left;*/
	/*box-sizing: border-box;
	padding: 5px;
	cursor: pointer;
}*/

/* Example 1 - Simple last video */

#example1 iframe {
	width: 310px;
	height: 175px;
}

/* Example 2 - Gallery with videos opening in their YouTube pages */

#example2 .video-item {
	width: 16.66666666666667%;
	transition: opacity 0.3s;
}

#example2 .example-container:hover .video-item {
	opacity: .8;
}

#example2 .example-container:hover .video-item:hover {
	opacity: 1;
}

#example2 .video-item img {
	max-width: 100%;
}

/* Example 3 - Gallery with embed videos */

#example3 .video-item {
	width: 33.33333333333333%;
}

#example3 .video-item iframe {
	width: 100%;
	height: 175px;
}

/* Example 4 - Gallery with videos opening through the Fancybox */

/*#example4 .video-item {
	width: 20%;
}*/

#example4 .video-item:nth-child(6n) {
	clear: both;
}

#example4 .video-item .title {
	display: block;
	margin-top: 5px;
}

/* Example 5 - Gallery with thumbnails and an area to show the selected video */

#example5 .media-viewer {
	float: left;
}

#example5 .media-viewer iframe {
	width: 560px;
	height: 315px;
}

#example5 .thumbnails {
	overflow: hidden;
}

#example5 .example-container {
	margin: 0;
}

#example5 .video-item {
	overflow: hidden;
	width: 50%;
	height: 105px;
	padding: 0;
}

#example5 .video-item.active {
	opacity: .50;
}

.titleVideo {
    text-align: center;
}