/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.wpte-trip-feat-img-gallery{
	position: relative;
}

.wpte-trip-feat-img-gallery .owl-prev{
	position: absolute;
	top: 50%;
	left: 40px;
	width: 60px;
	height: 60px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 1;
	font-size: 0;
}

.wpte-trip-feat-img-gallery .owl-prev:before{
	content: '';
	opacity: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 15px;
	height: 20px;
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 192 512'%3E%3Cpath d='M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z'/%3E%3C/svg%3E") center center no-repeat;
}

.wpte-trip-feat-img-gallery .owl-next{
	position: absolute;
	top: 50%;
	right: 40px;
	width: 60px;
	height: 60px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 1;
	font-size: 0;
}

.wpte-trip-feat-img-gallery .owl-next:after{
	content: '';
	opacity: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 15px;
	height: 20px;
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 192 512'%3E%3Cpath d='M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z'/%3E%3C/svg%3E") center center no-repeat;
}

.wte-video-gallery-slider {
    margin-bottom: 1.5em;
}

.wte-video-gallery-slider .owl-item .owl-video-wrapper {
    height: 0;
    padding-top: 56.25%;
}

.wte-video-gallery-slider .owl-item .owl-video-tn, 
.wte-video-gallery-slider .owl-item iframe {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}

.wte-video-gallery-slider .owl-nav button[class*="owl-"] {
    position: absolute;
    top: 50%;
    left: 0;
    width: 45px;
    height: 45px;
    background: rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

.wte-video-gallery-slider .owl-nav button.owl-next {
    left: auto;
    right: 0;
}

.wte-video-gallery-slider .owl-nav button[class*="owl-"]:hover {
	background: rgba(0,0,0,0.75);
}

.wte-video-gallery-slider .owl-nav [class*="owl-"] svg {
    width: 20px;
    height: 20px;
    margin: auto;
    color: #fff;
    opacity: 0.7;
    filter: alpha( opacity=70 );
}

.wte-video-gallery-slider .owl-nav button.owl-prev svg {
    position: relative;
    left: -2px;
}

.wte-video-gallery-slider .owl-nav [class*="owl-"]:hover svg {
	opacity: 1;
	filter: alpha( opacity=100 );
}

.wp-travel-engine-vid-gal-popup {
    display: block;
    margin-bottom: 1.5em;
}

.wp-travel-engine-vid-gal-popup .wte-trip-vidgal-popup-trigger {
    display: inline-block;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    line-height: 1.3;
    padding: 10px 20px 10px 50px;
    border-radius: 3px;
    position: relative;
    text-decoration: none;
}

.wp-travel-engine-vid-gal-popup .wte-trip-vidgal-popup-trigger:hover {
	background: rgba(0, 0, 0, 0.5);
}

.wp-travel-engine-vid-gal-popup .wte-trip-vidgal-popup-trigger::before {
    content: "";
    background-color: #fff;
    -webkit-mask-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"></path></svg>');
    mask-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"></path></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
    position: absolute;
    top: 10px;
    left: 20px;
    width: 20px;
    height: 20px;
}

.wte-video-gallery-slider.owl-carousel .owl-video-play-icon {
    background-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23fff" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6zM48 453.5v-395c0-4.6 5.1-7.5 9.1-5.2l334.2 197.5c3.9 2.3 3.9 8 0 10.3L57.1 458.7c-4 2.3-9.1-.6-9.1-5.2z"></path></svg>');
    background-color: rgba(0,0,0,0.5);
    background-repeat: no-repeat;
    background-size: 45%;
    background-position: center;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    bottom: 0;
}

@media only screen and (max-width: 767px){
	.wpte-trip-feat-img-gallery .owl-prev{
		width: 40px;
		height: 40px;
		left: 10px;
	}

	.wpte-trip-feat-img-gallery .owl-next{
		width: 40px;
		height: 40px;
		right: 10px;
	}
}
