/* =======================================================
 *
 *    Media boxes   
 *    Version: 3.3
 *    By castlecode
 *
 *    Contact: http://codecanyon.net/user/castlecode
 *    Created: March 11, 2014
 *
 *    Copyright (c) 2013, castlecode. All rights reserved.
 *    Available only in http://codecanyon.net/
 *    
 *    ---------------------------------
 *    CONTENTS
 *    ---------------------------------
 *    
 *    (1) GRAPHIC STYLE (Play around in this section)
 *
 *      [1] MEDIA BOX CONTENT
 *      [2] LOAD MORE
 *      [3] FILTER BAR
 *      [4] SEARCH FILTER
 *      [5] DROP DOWN MENU
 *      [6] THUMBNAIL OVERLAY EFFECT
 *      [7] FANCYBOX
 *      [8] MAGNIFIC POPUP
 *      [9] SOCIAL FOR MAGNIFIC POPUP
 *
 *    (2) NEEDED STYLE (Don't play here)
 *
 *      [1] SETUP
 *      [2] MEDIA BOX THUMBNAIL
 *      [3] MEDIA BOX CONTENT
 *      [4] THUMBNAIL OVERLAY EFFECT
 *      [5] MAGNIFIC POPUP
 *    
 * ======================================================= */
  
  /*
  //This is optional, but you need it for a full width gallery 
    body{
      margin:0;
      min-height: 1000px;
      overflow-y: scroll; 
    }
  */

  /*
  //This is for preventing that the content of your page shifts to the right when magnific popup is activated
    html {
      margin-right: 0 !important;
      overflow: visible !important;
  }
  */

/* ********************************************************************
  (1) GRAPHIC STYLE (Play around in this section)
********************************************************************* */


/* GLOBAL FONT */
.mfp-container,
.media-box,
.media-boxes-load-more-button,
.media-boxes-filter,
.media-boxes-drop-down-menu > li > a, .media-boxes-drop-down-header,
.media-boxes-search
	{
		/*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
		font-family: inherit;
		font-weight: 400;
    }

/* ====================================================================== *
      [1] MEDIA BOX CONTENT
* ====================================================================== */

.media-box
	{
    	font-size: 14px;
	}

.media-box iframe
	{
	    margin: 0px !important;
	    display: block;
	}

.media-box-container
	{
    	-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
		-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
		-o-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
        -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
		box-shadow: 0 1px 2px rgba(0,0,0,0.15);
/*
*/
	}

.media-box-content
	{
	    position: relative;
	    padding: 20px;
	    color: #F0F0F0;
	    line-height: 17px;
	    background: #393939;
	}

.thumbnail-overlay-animated
	{
	    position: relative;
	    opacity: 0;
	    -webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

.thumbnail-overlay-animated[data-from="top"]
	{
	    top: -20px;
	}

.thumbnail-overlay-animated[data-from="bottom"]
	{
	    top: 20px;
	}

.thumbnail-overlay-animated[data-from="left"]
	{
	    left: -20px;
	}

.thumbnail-overlay-animated[data-from="right"]
	{
	    left: 20px;
	}

/* desktop */
@media only screen and (min-width: 768px)
	{
	    .thumbnail-overlay:hover .thumbnail-overlay-animated
			{
				top: 0;
				left: 0;
				opacity: 1;
			}
	}

/* mobile */
@media only screen and (max-width: 768px)
	{
	    .media-box-image:hover .thumbnail-overlay-animated
			{
				top: 0;
				left: 0;
				opacity: 1;
			}
	}


.thumbnail-overlay-button
	{
	    margin: 3px 0;
	    padding: 10px 14px;
	    color: #FFFFFF;
	    font-size: 13px;
	    background: rgba(255, 255, 255, .3);
	    display: inline-block;

	    -webkit-transition: background 0.3s ease-in-out;
		-moz-transition: background 0.3s ease-in-out;
		-o-transition: background 0.3s ease-in-out;
		-ms-transition: background 0.3s ease-in-out;
		transition: background 0.3s ease-in-out;
	}

.thumbnail-overlay-button:hover
	{
	    background: rgba(255, 255, 255, 0.4);
	}

.thumbnail-overlay-caption
	{
	    padding: 4px 6px;
	    margin: 3px 0;
	    color: #FFFFFF;
	    font-size: 11px;
	    background: rgba(255, 255, 255, 0.2);
	    display: inline-block;
	}

.media-box-title
	{
	    color: #D8203C;
	    font-size: 28px;
	    font-weight: 400;
	    letter-spacing: 0px;
	    line-height: 1.05;
	}

.media-box-title small
	{
	    margin-top: 5px;
	    font-size: 12px;
	    display: block;
	}

.media-box-year
	{
	    margin-bottom: 3px;
	    font-size: 11px;
	    color: #808080;
	}

.media-box-author
	{
	    margin: 3px 0px 0px 0px !important;
	    font-size: 11px;
	}

.media-box-categories
	{
	    margin-top: 5px;
	    color: #E54E53;
	    font-size: 11px;
	    line-height: 15px;
	}

.media-box-categories span
	{
	    color: #333333;
	    font-weight: 600;
	}

.media-box-date
	{
	    margin-top: 5px;
	    color: #E54E53;
	    font-size: 11px;
	    line-height: 15px;
	}

.media-box-date span
	{
	    color: inherit;
	    font-weight: 600;
	}

.media-box-big-icon
	{
	    margin-bottom: 12px;
	}

.media-box-big-icon .fa
	{
	    color: #FFFFFF !important;
	    font-size: 55px !important;

		-webkit-transform: scale(1) !important;
		-moz-transform: scale(1) !important;
		-ms-transform: scale(1) !important;
		-o-transform: scale(1) !important;
		transform: scale(1) !important;
	}

.media-box-text
	{
	    margin: 15px 0px 0px 0px !important;
	    color: inherit;
	    font-size: 18px;
	    line-height: 1.3;
	}

.media-box-books
	{

	}

.media-box-books br
	{
		margin-bottom: 5px;
	}

.media-box-books span.book-title
	{
		font-size: 16px;
		line-height: 1.4;
	}

.media-box-quote
	{
	    padding: 30px;
	    color: inherit;
	    font-size: 14px;
	    line-height: 28px;
	    background: #E54E53;
	}

.media-box-quote span
	{
	    margin-top: 20px;
	    font-size: 13px;
	    display: block;
	}

.media-box-subscribe
	{
	    padding: 30px;
	    color: #FFFFFF;
	    font-size: 14px;
	    line-height: 28px;
	    background: #2C393F;
	}

.media-box-subscribe p
	{
	    color: #FFFFFF;
	}

.media-box-subscribe input
	{
	    margin-top: 10px;
	    margin-bottom: 15px;
	    border-radius: 0px;
	    border: 0;
	}

.media-box-subscribe .btn
	{
	    min-width: 120px;
	    padding: 12px;
	    color: #FFFFFF;
	    font-size: 12px;
	    background: #86979F;
	    border-radius: 2px;
	    -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
		-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
		box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
	    border: 0;
	}

.media-box-view-image
	{
	    margin: 12px 0px 0px 0px;
	}

.media-box-more a, .media-box-view-image a
	{
	    margin: 0px;
	    padding: 0px;
	    font-size: 11px;
	    color: inherit;
	    color: #E54E53;
	    font-weight: 600;
	    text-decoration: none !important;
  }

.media-box-more a:hover, .media-box-view-image a:hover
	{
	    color: #333333;
	}

a.media-box-read-more-link
	{
	    padding: 0px 4px;
	    color: #FFFFFF;
	    background: #E54E53;
	}

a.media-box-read-more-link:hover
	{
		text-decoration: none;
		background: #333333;
	}

.media-box-footer
	{
		padding: 20px;
		background: #E4E4E4;
	}

.media-box-social-buttons
	{
		text-align: center;
	}

.media-box-social-buttons i
	{
		margin: 0px 7px;
		color: #C7C7C7;
		font-size: 15px;
		-webkit-transition: color .1s;
		-moz-transition: color .1s;
		-o-transition: color .1s;
		-ms-transition: color .1s;
		transition: color .1s;
	}

.media-box-social-buttons i:hover
	{
		color: #333333;
	}

.media-box-play-button
	{
		padding-left: 3px;
		color: #FFFFFF !important;
		background: rgba(28, 186, 200, 1) !important;
	}

.media-box-sound-button
	{
		padding-left: 1px;
		color: #FFFFFF !important;
		background: rgba(28, 186, 200, 1) !important;
	}

.media-box-logo
	{
		padding: 30px 0px;
		color: rgba(255, 255, 255, 0.7);
		font-size: 80px;
		text-align: center;
		-webkit-transition: color .1s;
		-moz-transition: color .1s;
		-o-transition: color .1s;
		-ms-transition: color .1s;
		transition: color .1s;
	}

.media-box-logo:hover
	{
		color: rgba(255, 255, 255, 1);
	}

.media-box-price
	{
		margin-top: 10px;
		font-size: 16px;
		color: #E54E53;
	}

.media-box-price del
	{
		font-size: 12px;
		color: #A4A4A4;
	}

.media-box-sale
	{
		position: absolute;
		top: -10px;
		right: 10px;
		width: 45px;
		height: 45px;
		color: #FFFFFF;
		font-size: 12px;
		text-align: center;
		line-height: 45px;
		font-weight: 100;
		border-radius: 50%;
		background: #E54E53;
		z-index: 99;
	}

/* ====================================================================== *
      [2] LOAD MORE
 * ====================================================================== */

.media-boxes-load-more-button
	{
		width: 150px;
		min-height: 15px;
		margin: 20px auto 30px;
		padding: 10px 15px 10px 15px;
		color: #333333;
		font-size: 14px !important;
		text-align: center;
		line-height: 15px;
		background-color: #E2D8CE;
		cursor: pointer;
		-webkit-box-sizing: content-box !important;
		-moz-box-sizing: content-box !important;
		box-sizing: content-box !important;
	}

.media-boxes-no-more-entries
	{
		filter: alpha(opacity=20);
		opacity: 0.2;
	}


/* ====================================================================== *
      [3] FILTER BAR
 * ====================================================================== */

.filters-container
	{
		margin-bottom: 15px;
	}

.filters-container:after
	{
		content: " ";
		height: 0;
		visibility: hidden;
		clear: both;
		display: block;
	}

.media-boxes-filter
	{
		position: relative;
		top: -2px;
		margin: 0px;
		padding: 0px;
		font-size: 0px;
		list-style: none;
		text-align: left;
		display: inline-block;
	}

.media-boxes-filter>li
	{
		margin: 0px 5px 5px 0px;
		display: inline-block;
		-webkit-box-sizing: border-box;
	 /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;
	    /* Firefox, other Gecko */
		box-sizing: border-box;
	         /* Opera/IE 8+ */;
	}

.media-boxes-filter>li:last-child
	{
		margin-right: 0px !important;
	}

.media-boxes-filter>li a
	{
		margin: 0px;
		padding: 0 15px;
		vertical-align: top;
		font-size: 13px;
		color: #444444;
		height: 34px;
		line-height: 33px;
		text-decoration: none;
		background-color: #FFFFFF;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		border: 1px solid #EBEBEB;
		cursor: pointer;
		display: block;
		-webkit-box-sizing: content-box !important;
	 /* Safari/Chrome, other WebKit */
		-moz-box-sizing: content-box !important;
	    /* Firefox, other Gecko */
		box-sizing: content-box !important;
	         /* Opera/IE 8+ */
		-webkit-transition: background-color .1s;
		-moz-transition: background-color .1s;
		-o-transition: background-color .1s;
		-ms-transition: background-color .1s;
		transition: background-color .1s;
	}

.media-boxes-filter>li a:hover
	{
		color: #FFFFFF;
		text-decoration: none;
		background: #333333;
	}

.media-boxes-filter>li a.selected
	{
		color: #FFFFFF !important;
		background: #E54E53 !important;
		-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15) !important;
		-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15) !important;
		box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15) !important;
	}

/* ====================================================================== *
      [4] SEARCH FILTER
 * ====================================================================== */

.media-boxes-search
	{
		margin-bottom: 25px;
		display: inline-block;
		border: 1px solid #EBEBEB;
	}

.media-boxes-search .media-boxes-icon,
.media-boxes-search .media-boxes-clear
	{
		width: 34px;
		height: 34px;
		margin-right: -4px;
		font-size: 13px;
		color: #444444;
		line-height: 34px;
		text-align: center;
		background: #FFFFFF;
		display: inline-block;
	}

.media-boxes-search .media-boxes-clear
	{
		margin-right: -1px;
		cursor: pointer;
	}

.media-boxes-search input[type=text]
	{
		min-width: 150px;
		max-width: 170px;
		height: 34px;
		margin: 0px !important;
		margin-right: -4px !important;
		padding: 0px 10px 0px 0px !important;
		font-size: 13px;
		color: #444444;
		vertical-align: top;
		line-height: 34px;
		box-shadow: none !important;
		background-color: #fff;
		border: none !important;
		outline: 0;
		-webkit-appearance: none;
		-webkit-border-radius: 0 !important;
		-moz-border-radius: 0 !important;
		border-radius: 0 !important;
	}

.media-boxes-search input::-webkit-input-placeholder
	{
	 /* Chrome */
		color: #444444;
		font-weight: 300;
	}

.media-boxes-search input:-ms-input-placeholder
	{
	 /* IE 10+ */
		color: #444444;
		font-weight: 300;
}

.media-boxes-search input::-moz-placeholder
	{
	 /* Firefox 19+ */
		color: #444444;
		font-weight: 300;
	}

.media-boxes-search input:-moz-placeholder
	{
	 /* Firefox 4 - 18 */
		color: #444444;
		font-weight: 300;
	}


/* ====================================================================== *
      [5] DROP DOWN MENU
 * ====================================================================== */

.media-boxes-drop-down,
.media-boxes-drop-down-header,
.media-boxes-drop-down-menu,
.media-boxes-drop-down-menu > li > a
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

.media-boxes-drop-down
	{
		position: relative;
		width: 150px;
		margin: 0;
		margin-bottom: 5px;
		border: 1px solid #EBEBEB;
		display: inline-block;
	}

.media-boxes-drop-down-header
	{
		background-color: #FFFFFF;
		cursor: pointer;
	}

.media-boxes-drop-down-header .fa
	{
		height: 34px;
		line-height: 31px;
		float: right;
	}

.media-boxes-drop-down-menu
	{
		position: absolute;
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		display: none;
		-webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
		-moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
		box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
		z-index: 99999;
	}

.media-boxes-drop-down-menu > li
	{
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
	}

.media-boxes-drop-down-header
	{
		height: 34px;
		margin: 0px !important;
		padding: 0px 15px !important;
		font-size: 12px;
		color: #444444;
		text-decoration: none;
		line-height: 34px;
		background-color: #FFFFFF;
		display: block;
	}

.media-boxes-drop-down-menu > li > a
	{
		height: auto !important;
		margin: 0px !important;
		padding: 10px 15px !important;
		font-size: 12px;
		color: #444444;
		text-decoration: none;
		line-height: normal !important;
		border-top: 1px solid rgba(175,175,175,.16)!important;
		background: #FFFFFF;
		display: block;
	}

.media-boxes-drop-down-menu > li > a:hover
	{
		color: #FFFFFF !important;
		background: #E54E53 !important;
	}

.media-boxes-drop-down-menu > li.selected > a,
.media-boxes-drop-down-menu > li > a.selected
	{
          /* */;
	}

.media-boxes-sort
	{
		vertical-align: top;
		display: inline-block;
	}

.media-boxes-sort .media-boxes-drop-down-header .fa
	{
		display: none;
	}

.media-boxes-sort-order
	{
		width: 34px;
		height: 34px;
		color: #444444;
		line-height: 33px;
		text-align: center;
		vertical-align: top;
		cursor: pointer;
		border: 1px solid #EBEBEB;
		background: #FFFFFF;
		display: inline-block;
		-webkit-box-sizing: content-box !important;
		-moz-box-sizing: content-box !important;
		box-sizing: content-box !important;
	}

.media-boxes-sort-order>span
	{
		display: none;
	}

.media-boxes-sort-order>span.selected
	{
		display: inline-block;
	}

/* ====================================================================== *
      [6] THUMBNAIL OVERLAY EFFECT
 * ====================================================================== */

.thumbnail-overlay
	{
		color: #333333;
		background-color: rgba(199, 199, 199, 0.6);
	}

  /* The style for centering the caption (vertically and horizontally) */
.thumbnail-overlay>div.aligment
	{
		height: 100%;
		width: 100%;
		display: table !important;
	}

.thumbnail-overlay>div.aligment>div.aligment
	{
		padding: 10px;
		display: table-cell !important;
		vertical-align: middle;
	 /* FOR VERTICAL ALIGN */
		text-align: center;
	 /* FOR HORIZONTAL ALIGN */;
	}

.overlay-title
	{
		margin-bottom: 5px;
		font-size: 16px;
		font-weight: 500;
		line-height: 16px;
		display: block;
	}

.overlay-description
	{
		font-size: 12px;
		line-height: 16px;
		display: block;
	}

.thumbnail-overlay i.fa,
.thumbnail-overlay i.far,
.thumbnail-overlay i.fas,
.media-box-play-button,
.media-box-sound-button
	{
		width: 50px;
		height: 50px;
		margin: 3px;
		color: #E54E53;
		text-align: center;
		font-size: 22px;
		line-height: 50px;
		background: #FFFFFF;
		display: inline-block;
		-webkit-box-sizing: border-box;
	 /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;
	    /* Firefox, other Gecko */
		box-sizing: border-box;
	         /* Opera/IE 8+ */
		-webkit-border-radius: 50%;
	 /* Safari 3-4, iOS 1-3.2, Android 1.6- */
		-moz-border-radius: 50%;
	 /* Firefox 1-3.6 */
		border-radius: 50%;
	 /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
		-webkit-transition: all .05s linear;
		-moz-transition: all .05s linear;
		-o-transition: all .05s linear;
		-ms-transition: all .05s linear;
		transition: all .05s linear;
	}

.media-box-play-button,
.media-box-sound-button
	{
		width: 50px;
		height: 50px;
		font-size: 15px;
		line-height: 50px;
	}

.thumbnail-overlay i.fa:hover
	{
		color: #FFFFFF;
		background: rgba(255, 255, 255, 0.3);
		cursor: pointer;
	}

.mb-play-container
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('icons/blank.gif');
	 /* IE hack, since IE doesn't recognize the hover state in places where there's nothing */;
	}

.mb-play-container .fa
	{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 50px;
		height: 50px;
		padding: 14px 15px 13px 17px;
		font-size: 19px;
		color: #FFFFFF;
		text-align: center;
		border: 2px solid #fff;
		-webkit-border-radius: 50%;
	 /* Safari 3-4, iOS 1-3.2, Android 1.6- */
		-moz-border-radius: 50%;
	 /* Firefox 1-3.6 */
		border-radius: 50%;
	 /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
		margin-top: -25px;
		margin-left: -25px;
		-webkit-transition: background-color .2s, -webkit-transform .2s;
		-moz-transition: background-color .2s,    -moz-transform .2s;
		-o-transition: background-color .2s,      -o-transform .2s;
		-ms-transition: background-color .2s,     -ms-transform .2s;
		transition: background-color .2s,         transform .2s;
	}

.mb-play-container:hover .fa
	{
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}

/* ====================================================================== *
      [7] FANCYBOX
 * ====================================================================== */

.fancybox-caption
	{
		padding: 0px !important;
		height: 44px !important;
		text-align: center;
		border-top: 0;
		display: flex;
		align-items: center;
	 /* Vertical center alignment */
		justify-content: center;
	 /* Horizontal center alignment */;
	}

.fancybox-thumbs
	{
		background: rgba(255, 255, 255, 0.1);
	}


/* ====================================================================== *
      [8] MAGNIFIC POPUP
 * ====================================================================== */

.mb-open-popup
	{
		cursor: pointer;
	}

.mfp-arrow.mfp-arrow:before,
.mfp-arrow.mfp-arrow:after
	{
		border: none !important;
	}

.mfp-arrow.mfp-arrow-left
	{
		background: url('icons/icon-arrow-left.png') 50% 50% no-repeat !important;
	}

.mfp-arrow.mfp-arrow-right
	{
		background: url('icons/icon-arrow-right.png') 50% 50% no-repeat !important;
	}

.mfp-close
	{
		background: url('icons/icon-close.png') right no-repeat !important;
	}

   /* Just some example in how to add a loder image (gif) to the popup
.mfp-preloader
	{
	    width: 24px;
	    height: 24px;
	    margin: auto;
	    color: transparent;
	    background-image: url('icons/loading-image.gif');
	}
  */

.iframe-on-grid
	{
		cursor: pointer;
	}

.iframe-on-grid-container, .iframe-on-grid-container iframe
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: none;
		background: #000000;
		display: none;
		z-index: 5;
	}

.iframe-on-grid-container
	{
		display: block;
	}

.mfp-hide
	{
		display: none;
	}


/* ====================================================================== *
      [9] SOCIAL FOR MAGNIFIC POPUP
 * ====================================================================== */

.media-boxes-social-container
	{
		margin-right: 10px;
		font-size: 18px;
		float: right;
	}

.media-boxes-social-container>*
	{
		margin-right: 5px;
	}
/*
 *
 *
 *
 *
 *  BRIDGE (Unless you know what you are doing don't scroll down) ========>
 *
 *
 *
 *
 */

/* ********************************************************************
  (2) NEEDED STYLE (Don't play here)
********************************************************************* */

/* ====================================================================== *
      [1] SETUP
 * ====================================================================== */

.media-box
	{
	    /* Box-model */
		/* hidden by default, the plugin will take care of showing it */
		display: none;
		float: left;
	}

.media-box,
.media-box-hidden
	{
	    /* hardware acceleration */
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}

.media-box-hidden, .not-loaded-before-search
	{
		/* hide the hidden boxes */;
		display: none;
	}

.media-boxes-container
	{
		margin-right: 0 !important;
		margin-bottom: 0 !important;
	}

.media-box-loaded
	{
		/* class to show the boxes once the plugin has been initialized */;
		display: block;
	}

[onclick]
	{
		cursor: pointer;
	}

[hide_if_empty]
	{
		display: none !important;
	}

/* ====================================================================== *
    [2] MEDIA BOX THUMBNAIL
* ====================================================================== */

.media-box-image
	{
		position: relative;
		width: 100%;
		overflow: hidden;
	}

/* Hack to center the image */
.media-box-image div[data-width][data-height]
	{
		position: relative;
		overflow: hidden;
	}

.media-box-image div[data-width][data-height] img
	{
		position: absolute;
		top: -100%;
		left: 0;
		right: 0;
		bottom: -100%;
		margin: auto;
	}
/* End Hack */

.media-box .media-box-image img
	{
		width: 100%;
		max-width: 100%;
		display: block;
	}

.media-box img
	{
		max-width: 100%;
		-webkit-transform: translate3D(0, 0, 0);
		-moz-transform: translate3D(0, 0, 0);
		-ms-transform: translate3D(0, 0, 0);
		-o-transform: translate3D(0, 0, 0);
		transform: translate3D(0, 0, 0);
	}

  /* Invert position */
.media-box .media-box-fill-height[data-width][data-height] img
	{
		top: 0 !important;
		left: -100% !important;
		right: -100% !important;
		bottom: 0 !important;
		width: auto !important;
		max-width: none !important;
		height: 100%;
	}

/* Loading and broken thumbnail effects */

.media-box-image div[data-thumbnail],
.media-box-image div[data-popup]
	{
		background-position: center center;
		background-repeat: no-repeat;
	}

.image-with-dimensions
	{
		background-color: black;
		background-image: url('icons/loading-image.gif');
	}

.broken-image-here
	{
		background-color: #BE3730;
		background-image: url('icons/broken-image.png');
	}

.broken-image-here:not([data-height])
	{
		min-height: 150px;
	}

/* ====================================================================== *
    [3] MEDIA BOX CONTENT
* ====================================================================== */

.media-box-container
	{
		position: relative;
		overflow: hidden;
		z-index: 1;
	}

.media-box-container:hover
	{
		/* bring the hover media box to the front */;
		z-index: 2;
	}


/* ====================================================================== *
    [4] THUMBNAIL OVERLAY EFFECT
* ====================================================================== */

.thumbnail-overlay
	{
		position: absolute;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

/* REVEAL EFFECT */
.position-reveal-effect .media-box-thumbnail-container
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}

.position-reveal-effect .thumbnail-overlay
	{
		position: absolute;
		left: 0;
		z-index: 1;
	}

.overlay-always-visible
	{
		zoom: 1 !important;
		filter: alpha(opacity=100) !important;
		opacity: 1 !important;
		display: block !important;
	}

.overlay-text-left>.aligment>.aligment
	{
		text-align: left !important;
	}

.overlay-text-right>.aligment>.aligment
	{
		text-align: right !important;
	}

/* ====================================================================== *
    [5] MAGNIFIC POPUP
* ====================================================================== */

.mfp-arrow:focus
	{
		opacity: 0.65;
		filter: alpha(opacity=65);
	}

.mfp-arrow:hover
	{
		opacity: 1 !important;
		filter: alpha(opacity=100) !important;
	}

/* at start */
.my-mfp-slide-bottom .mfp-figure
	{
		opacity: 0;
		-webkit-transition: all 0.2s ease-out;
		-moz-transition: all 0.2s ease-out;
		-o-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
		-ms-transform: scale(0.8);
		-o-transform: scale(0.8);
		transform: scale(0.8);
	}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .mfp-figure
	{
		opacity: 1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .mfp-figure
	{
		opacity: 0;
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
		-ms-transform: scale(0.8);
		-o-transform: scale(0.8);
		transform: scale(0.8);
	}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg
	{
		opacity: 0;
		-webkit-transition: opacity 0.3s ease-out;
		-moz-transition: opacity 0.3s ease-out;
		-o-transition: opacity 0.3s ease-out;
		transition: opacity 0.3s ease-out;
	}

/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg
	{
		opacity: 0.8;
	}

/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg
	{
		opacity: 0;
	}