body{
    margin:0;
}


.media-box{
    font-size: 16px;
    margin-top: 50px;
}

.media-box-container{
    -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.2);
    -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.2);
    -o-box-shadow: 0 1px 3px rgba(34,25,25,0.2);
    -ms-box-shadow: 0 1px 3px rgba(34,25,25,0.2);
    box-shadow: 0 1px 3px rgba(34,25,25,0.2);
}

.media-box-content{
    padding: 10px;
    background: white;
    color: rgb(51, 51, 51);
    line-height: 20px;
    text-align: center;
    height: 105px;

}

.media-box-title{
    text-align: right;
    letter-spacing: 0px;
    line-height: 1.3;
    font-weight: 500;
    color: #007085;
    font-size: 16px;
    height: 65px;
}

.media-box-title:hover{
    text-align: right;
    letter-spacing: 0px;
    line-height: 1.3;
    font-weight: 500;
    color: #484848;
    font-size: 16px;
    text-decoration:none;
}

.media-box-date{
    text-align: right;
    font-size: 14px;
    line-height: 15px;
    color: #c6c3c3;
    margin-top: 5px;
    direction: ltr;

}

.media-box-text{
    font-size: 12px;
    margin: 13px 0px 13px 0 !important;
    color: #484848;
}

.media-box-more a{
    text-decoration: none !important;
    color: inherit;
    padding: 0;
    margin: 0;
    color: #007085;
    font-weight: 500;
}

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

.media-boxes-load-more-button{

    cursor: pointer;
    width: 150px;
    text-align: center;
    color: white;
    background-color: #007085;
    font-size: 14px !important;
    height: 15px;
    padding: 10px 15px 10px 15px;
    margin: 40px auto;
    line-height: 15px;

    -webkit-box-shadow: 0 1px 1px rgba(34,25,25,0.2);
    -moz-box-shadow: 0 1px 1px rgba(34,25,25,0.2);
    -o-box-shadow: 0 1px 1px rgba(34,25,25,0.2);
    -ms-box-shadow: 0 1px 1px rgba(34,25,25,0.2);
    box-shadow: 0 1px 1px rgba(34,25,25,0.2);

    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

.media-boxes-no-more-entries{

}


/* ====================================================================== *
      [3] ISOTOPE FILTER
 * ====================================================================== */

.media-boxes-filter{

    font-size: 0px;
    list-style: none;
    margin: 0 0 5px 0;
    padding: 0px;
    width: 100%;
    text-align: right;
    padding-right: 25px;
    background: #005f5e;
}

.media-boxes-filter li{
    display: inline-block;
    line-height: 16px;
    margin: 0 8px 0 0;
    padding: 5px 0 5px 0;
    border-right: 1px solid #005f5e;
    border-top: 3px solid #005f5e;

    -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{
    background: none;
}

.media-boxes-filter li a{
    display: block;
    cursor: pointer;
    color: White;
    font-size: 18px;
    font-weight: 300;
    text-decoration: none;
    margin: 0 0px 0px 0;
    padding: 10px 14px;
}

.media-boxes-filter li a:hover{
    color: White;
    border-top: 0px solid #224c5e;
    background-color: #019795;
}

.media-boxes-filter li a.selected{
    background: #224C5E;
    color: #fff;
}

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

.thumbnail-overlay{
    background: #fff; /* fallback for IE8 */
    background-color: rgba(255,255,255, .30);
    color: #484848;
}





/* 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{
    font-weight: 500;
    font-size: 16px;
    display: block;
    line-height: 16px;
    margin-bottom: 5px;
}

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

.mb-icon-plus, .mb-icon-link, .mb-icon-movie, .mb-icon-sound, .mb-icon-play{
    width: 50px;
    height: 50px;
    display: inline-block;
    border: 2px solid #484848;
    margin: 6px;

    -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+ */


    background-repeat:no-repeat;
    background-position: center center;

    -webkit-transition: -webkit-transform .2s;
    -moz-transition:    -moz-transform .2s;
    -o-transition:      -o-transform .2s;
    -ms-transition:     -ms-transform .2s;
    transition:         transform .2s;
}

.mb-icon-plus{
    background-image: url('icons/icon-plus.png');
}

.mb-icon-movie{
    background-position: 49.9% 50%;
    background-image: url('icons/icon-movie.png');
}

.mb-icon-sound{
    background-image: url('icons/icon-headphones.png');
}

.mb-icon-link{
    background-image: url('icons/icon-link.png');
}

.mb-icon-plus:hover, .mb-icon-link:hover, .mb-icon-movie:hover, .mb-icon-sound:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);

    cursor: pointer;
}

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

.mb-icon-play{
    border: 2px solid #fff;
    background-position: 56% 50%;
    background-image: url('icons/icon-play.png');
    background-color: rgba(0,0,0,.4);
    position: absolute;
    top: 50%;
    right: 50%;
    margin-top: -25px;
    margin-right: -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 .mb-icon-play{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

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

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

.mfp-container{

}

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

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

    /*width: 20%;*/
}

.media-box-hidden{
    display: none; /* hide the hidden boxes */
}

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

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

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

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

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

/* 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: #224C5E;
    background-image: url('icons/broken-image.png');
}

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

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

.media-box-container{
    overflow: hidden;
}


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

.thumbnail-overlay{
    position: absolute;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    width: 100%;
}

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

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

/* ====================================================================== *
    [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;
}

.search1 {
    width: 50%;
    margin-left: auto;
    padding-left: 21px;
    padding-top: 35px;
    margin: 0 auto;

}

.search1 input.field {
    float: left;
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #d3d3d3;
    font-size: 14px;
    color: #8a8a8a;
    background: #ededed;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
}

.search1 input.search-btn {
    float: right;
    font-size: 0;
    line-height: 0;
    text-indent: -4000px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border: 0;
}
.media-boxes-container {
    /*margin-top: 50px !important;*/
}

.media-box-content {

    height: auto !important;
}

.media-box-footer{
    background: white;
    text-align: center;
    padding: 10px;
}

.media-box-date {
    text-align: center;
    font-size: 13px;
    color: #c6c3c3;
    direction: rtl;
    padding: 5px;
}