@charset "UTF-8";
/**
* xlightbox Plugin
* 
* Copyright (c) 2016 Zul Zolkaffly
* Version: 1.0.0 (01/11/2016) (DD/MM/YYYY)
* Minimum Requirement:
*		-	jQuery v1.12.1
*		-	Bootstrap 3
*		- Font-Awesome 3
* ----------------------------------------------------------------------
* FILE		   	: xlightbox.css
* VERSION     : 1.0.0
* DATE				: 2015-11-01 (YYYY-MM-DD)
* AUTHOR      : Zul Zolkaffly
* CONTACT			: mohammad.zulfadhli.zolkaffly@gmail.com
* LICENSE     : GNU-LGPL v3 (http:*www.gnu.org/copyleft/lesser.html)
* ----------------------------------------------------------------------
* Copyright (C) 2016 [ ZUL ZOLKAFFLY ]
* ----------------------------------------------------------------------
*
* xlightbox is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* xlightbox is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with xlightbox.  If not, see <http:*www.gnu.org/licenses/>.
* ----------------------------------------------------------------------
* DISCLAIMER:
*  XLIGHTBOX IS A JQUERY PLUGIN FOR IMAGE GALLERY LIGHTBOX
*  IT IS MEANT TO BE AN EXTENSION TO BOOTSTRAP 3
*  THIS FILE, ALONG WITH REST OF XLIGHTBOX PROJECT FILES ARE A PART OF
*  THE INTELLECTUAL PROPERTIES OF ZUL ZOLKAFFLY.
*  ANY USE OF THIS FILE AND ANY FILE FROM THE PROJECT XLIGHTBOX IS WITHIN
*  YOUR OWN CONSENT. ANY MISCONDUCT, MISUSE, HARMS, INJURIES
*  AND ANY KIND OF UNDESIRABLE SITUATION, IN ANY TYPES AND WAYS
*  SHOULD NOT BE REFERRED TO THE ORIGINAL AUTHOR, AND THE ORIGINAL AUTHOR
*	 SHOULD NOT BE HELD RESPONSIBLE FOR IT, IN ANY LEGAL OR ILLEGAL CONSEQUENCES
*  OR ACTIONS, FINANCIALLY, PHYSICALLY OR ANY OTHER WAYS MEANT FOR
*  DIRECT OR INDIRECT PUNISHMENTS OR PAYMENTS FOR AND TO THE
*  ORIGINAL AUTHOR. ANY USE OF THIS FILE AND ANY FILE
*  FROM THE PROJECT XLIGHTBOX SHOULD ALWAYS INCLUDE A FILE NAMED
*  <XLIGHTBOX_LICENSE_AND_DISCLAIMER.txt>. YOU MAY MODIFY ANY PART OF
*  THIS FILE OR ANY FILE FROM THE PROJECT XLIGHTBOX ACCORDING TO YOUR
*  REQUIREMENTS AND NEEDS. HOWEVER, THIS FILE AND ANY FILE FROM
*  THE PROJECT SHOULD NOT BE CLAIMED AS BELONG TO YOU, YOUR TEAM,
*  ORGANIZATION OR ANY PARTY OTHER THAN THE ORIGINAL AUTHOR AND
*  HIS TEAM. ANY CLAIM OF OWNAGE OTHER THAN THE ORIGINAL AUTHOR
*  IS A SERIOUS OFFENSE OF HUMAN RIGHTS AND RESPECT.
* ----------------------------------------------------------------------
*/
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
*[data-toggle="xlightbox"] { cursor: pointer; }
*[data-toggle="xlightbox"] .xlightbox-title { display: block; }
*[data-toggle="xlightbox"] .xlightbox-caption { display: block; }
*[data-toggle="xlightbox"]:first-child { clear: left; }
*[data-toggle="xlightbox"]:last-child { clear: right; }
/**
* XLIGHTBOX
*/
.xlightbox {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
  display: none;
	z-index: 10001;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
  -webkit-overflow-scrolling: touch;
	background-color: rgba(0,0,0,0.75);
	outline: 0;	
  transform: scale(0);
  opacity: 0;
	
  -webkit-transition: all 400ms ease-in-out;
			-moz-transition: all 400ms ease-in-out;
				-ms-transition: all 400ms ease-in-out;
				-o-transition: all 400ms ease-in-out;
				transition: all 400ms ease-in-out;
				
}
.xlightbox.in { opacity: 1; transform: scale(1); display: block; }
.xlightbox .hidden { display: none; }
.xlightbox .box-dialog {
	margin: 0 auto;
	width: 80vw;
	height: 80vh;
	position: relative;
	top: 10vh;
	overflow: hidden;
  -webkit-transition: -webkit-transform .3s ease-out;
       -o-transition:      -o-transform .3s ease-out;
          transition:         transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
       -o-transform: translate(0, -25%);
          transform: translate(0, -25%);
}
.xlightbox .box-dialog.thumb-t,
.xlightbox .box-dialog.thumb-b { top: 5vh; height: 90vh; }
.xlightbox .box-dialog.thumb-l,
.xlightbox .box-dialog.thumb-r { width: 90vw; }
.xlightbox.in .box-dialog {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}
.xlightbox .box-content {
	display: block;
	width: 100%;
	height: 100%;
	box-shadow: none;
	border: none;
	overflow: hidden;
	background-color: rgba(255,255,255,0.95);
}
.xlightbox .box-dialog.thumb-t .box-content,
.xlightbox .box-dialog.thumb-b .box-content { height: 80%; }
.xlightbox .box-dialog.thumb-l .box-content,
.xlightbox .box-dialog.thumb-r .box-content { float: left; width: 90%; }

/**
* THUMBNAILS
*/
.xlightbox .box-dialog .box-thumb { overflow: hidden; background-color: #FFF; }
.xlightbox .box-dialog.thumb-t .box-thumb,
.xlightbox .box-dialog.thumb-b .box-thumb { border-bottom: 5px solid #FFF; border-top: 5px solid #FFF; }
.xlightbox .box-dialog.thumb-r .box-thumb,
.xlightbox .box-dialog.thumb-l .box-thumb { border-left: 5px solid #FFF; border-right: 5px solid #FFF; }
.xlightbox .box-dialog.thumb-t .box-thumb,
.xlightbox .box-dialog.thumb-b .box-thumb { width: 100%; height: 20%; overflow: hidden; }
.xlightbox .box-dialog.thumb-l .box-thumb,
.xlightbox .box-dialog.thumb-r .box-thumb { float: left; width: 10%; height: 100%; }
.xlightbox .box-dialog.thumb-l .box-thumb .thumb-item,
.xlightbox .box-dialog.thumb-r .box-thumb .thumb-item {
	clear: both;
	width: 100%;
	height: 10%;
	margin: 0;
}
.xlightbox .box-dialog .box-thumb .thumb-item {
	height: 100%;
	width: 10%;
	margin: 0;
	overflow: hidden;
	float: left;
	background-color: #FFF;
	border: 1px solid #FFF;
	cursor: pointer;
	text-align: center;
	opacity: 0.25;
  -webkit-transition: all 400ms ease-in-out;
			-moz-transition: all 400ms ease-in-out;
				-ms-transition: all 400ms ease-in-out;
				-o-transition: all 400ms ease-in-out;
				transition: all 400ms ease-in-out;
}
.xlightbox .box-dialog .box-thumb .thumb-item.active { border: 1px solid #333; opacity: 1; }
.xlightbox .box-dialog.thumb-t .box-thumb .thumb-item { border-bottom: 1px solid #333; }
.xlightbox .box-dialog.thumb-r .box-thumb .thumb-item { border-left: 1px solid #333; }
.xlightbox .box-dialog.thumb-b .box-thumb .thumb-item { border-top: 1px solid #333; }
.xlightbox .box-dialog.thumb-l .box-thumb .thumb-item { border-right: 1px solid #333; }

.xlightbox .box-dialog.thumb-t .box-thumb .thumb-item.active { border-bottom: 1px solid #FFF; }
.xlightbox .box-dialog.thumb-r .box-thumb .thumb-item.active { border-left: 1px solid #FFF; }
.xlightbox .box-dialog.thumb-b .box-thumb .thumb-item.active { border-top: 1px solid #FFF; }
.xlightbox .box-dialog.thumb-l .box-thumb .thumb-item.active { border-right: 1px solid #FFF; }

.xlightbox .box-dialog .box-thumb .thumb-item img {
	height: 100%;
	width: auto;
	display: block;
	margin: 0 auto;
	transform: scale(1);
	transform-origin: middle middle;
  -webkit-transition: all 400ms ease-in-out;
			-moz-transition: all 400ms ease-in-out;
				-ms-transition: all 400ms ease-in-out;
				-o-transition: all 400ms ease-in-out;
				transition: all 400ms ease-in-out;
}
.xlightbox .box-dialog .box-thumb .thumb-item:hover { opacity: 1; }
.xlightbox .box-dialog .box-thumb .thumb-item:hover img { transform: scale(0.9); }

/**
* MEDIA
*/
.xlightbox .box-media {
	float:left;
	width: 60%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0,0,0,0.5);
	position: relative;
}
.xlightbox .box-media.full { width: 100%; }
.xlightbox .box-media img,
.xlightbox .box-media video { display: block; margin: 0 auto; background-color: rgba(255,255,255,0.95); }
.xlightbox .box-media.wide img,
.xlightbox .box-media.wide video { width: 100%; height: auto; }
.xlightbox .box-media.tall img,
.xlightbox .box-media.tall video { height: 100%; width: auto; }
.xlightbox .box-media .box-nav-left,
.xlightbox .box-media .box-nav-right {
	display: none;
	background: none;
	border: none;
	outline: none;
	box-shadow: none;
	position: absolute;
	z-index: 10001;
	width: 10%;
	height: 60%;
	top: 20%;
	cursor: pointer;
}
.xlightbox .box-media .box-nav-left { left: 5px; }
.xlightbox .box-media .box-nav-right { right: 5px; }
.xlightbox .box-media [class*="box-nav-"] .box-arrow {
	position: relative;
	height: 20%;
	width: 100%;
	background-color: rgba(255,255,255,0.25);
	-webkit-border-radius: 5%;
	-moz-border-radius: 5%;
	-ms-border-radius: 5%;
	-o-border-radius: 5%;
	border-radius: 5%;
}
.xlightbox .box-media .box-nav-left span,
.xlightbox .box-media .box-nav-right span {
	background-color: #AAA;
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	top: 50%;
	cursor: pointer;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
}
.xlightbox .box-media .box-nav-left span { transform-origin: center left; }
.xlightbox .box-media .box-nav-right span { transform-origin: center right; }
.xlightbox .box-media .box-nav-left span:first-child { transform: translateX(5%) rotateZ(45deg); }
.xlightbox .box-media .box-nav-left span:last-child { transform: translateX(5%) rotateZ(-45deg); }
.xlightbox .box-media .box-nav-right span:first-child { transform: translate(-5%, 1px) rotateZ(45deg); }
.xlightbox .box-media .box-nav-right span:last-child { transform: translate(-5%, -1px) rotateZ(-45deg); }
.xlightbox .box-media [class*="box-nav-"]:active,
.xlightbox .box-media [class*="box-nav-"]:focus,
.xlightbox .box-media [class*="box-nav-"]:hover { border: none; outline: none; }
.xlightbox .box-media [class*="box-nav-"].hidden { display: none; }
.xlightbox .box-media [class*="box-nav-"] .box-arrow:hover span { background-color: #000; }
.xlightbox .box-media:hover [class*="box-nav-"]:not(.hidden) { display: block; }

/**
* INFO
*/
.xlightbox .box-info {
	float: left;
	width: 40%;
	height: 100%;
	padding: 10px;
	overflow-x: hidden;
	overflow-y: auto;
}
.xlightbox .box-info.hidden { display: none; }

/**
* CLOSE BUTTON
*/
.xlightbox .box-close {
	display: block;
	background: none;
	border: none;
	outline: none;
	box-shadow: none;
	position: fixed;
	top: 5%;
	right: 5%;
	width: 50px;
	height: 50px;
	cursor: pointer;
	z-index: 10001;
}
.xlightbox .box-close span {
	background-color: #FFF;
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	top: 50%;
	cursor: pointer;
}
.xlightbox .box-close span:first-child { transform: translateY(0) rotateZ(45deg); }
.xlightbox .box-close span:last-child { transform: translateY(0) rotateZ(135deg); }
.xlightbox .box-close:active,
.xlightbox .box-close:focus,
.xlightbox .box-close:hover { border: none; outline: none; }
.xlightbox .box-close:hover span { background-color: #AAA; }

/**
* MEDIA QUERY
*/
@media only screen and (max-width: 767px) {
	.xlightbox .box-content { height: 100%; }
	.xlightbox .box-media,
	.xlightbox .box-info { width: 100%; height: 50%; float: none !important; clear: both; }
}