.media-box { 
	width: 33.3%; 
	border: solid 2px #ffffff;
	float: left 
}

.hover_block { 
	display: none
}

.ie8 .media-box:hover img {
	display:none
}

.hover-block-content {
	position: relative;
    width: 100%;
    height: 100%;
}

.hover-block-content h3 {
	margin: 0 10%;
	width: 80%;
	position: absolute;
	top:30%;
}

.cs-btn {
	width: 80%;
    color: #fff;
    margin: 0 10%;
	padding: 10px;
    border: 1px solid #fff;
    font-size: 1.15em;
	position: absolute;
	bottom:20%;
}

.cs-btn i {
	float: right;
}

.hover-block-content .sector {
	display:none;
	position: absolute;
	bottom: 5%;
	right:0;
	font-size: 3em;
	opacity:0.2;
	text-transform: uppercase;
	margin-bottom: 0 !important;
	line-height:1em;
	text-align: right;
}

 .hover_block h3, .hover_block p {
	 color: #ffffff
 }
 
 ul.filters_sort {
	 margin-left: 0;
 }
 
 .filters_sort li {
	 cursor: pointer;
	 display: inline-block;
	 padding: 0 20px;
	 border-left: 1px solid #b2b3b4;
	 margin: 5px 0;
	 text-transform:uppercase;
 }
 
  .filters_sort li:first-child {
	 border-left: none;
	 padding-left: 0;
 }
 
 .filters_sort li a:hover, .filters_sort li.menu_item a.filter.selected {
	 font-weight: 400 !important;
	 text-decoration:none;
 }
 
 @media only screen and (max-width:780px) {
	 .hover_block h3 {
		 font-size:1.3em;
		 line-height:1.2em;
	 }
	 .hover_block p {
		font-size:0.95em;	 
	 }
 }
  @media only screen and (max-width:780px) and (min-width:480px) {
	.media-box .hover_block  { 
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgba(100, 102, 105, 0.5);
		position: absolute;
		bottom: 0;
	}
	
	.media-box:hover .hover_block {
		background-color: rgba(100, 102, 105, 0.5);
	}
	
	.media-box img { opacity: 0.25 }
	.hover-block-content .sector { font-size: 2.5em; }
}
 
 @media only screen and (max-width: 480px) {
	.media-box .hover_block  { 
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgba(100, 102, 105, 0.5);
		position: absolute;
		bottom: 0;
	}
	
	.media-box:hover .hover_block {
		background-color: rgba(100, 102, 105, 0.5);
	}
	
	.media-box img { opacity: 0.25 }
	.hover-block-content .sector { font-size: 2em; }
}






















/* ======================================================= 
 *
 *    Media boxes   
 *    Version: 2.8
 *    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] MAGNIFIC POPUP
 *      [8] 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
 *    
 * ======================================================= */
/* ====================================================================== *
      [1] MEDIA BOX CONTENT
 * ====================================================================== */



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

  .media-box-container .row{
    padding: 25px 0 15px 0;
	border-bottom: solid 1px #eceeef;
	display: block;
  }

  .media-box-content{
    margin-top: -20px;
	padding: 0px 20px 15px 20px;
    position: relative;
	z-index: 5;
    background: #503291;
  }
  
  .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{
      opacity: 1;
      left: 0;
      top: 0;
    }
  }
  /* mobile */
  @media only screen and (max-width: 768px) {
    .media-grid-image:hover .thumbnail-overlay-animated{
      opacity: 1;
      left: 0;
      top: 0;
    }
  }


  .thumbnail-overlay-button{
    display: inline-block;
    color: white;
    font-size: 13px;
    background: #e54e53;
    background: rgba(229, 78, 83, 1);
    padding: 6px 8px;
    margin: 3px 0;

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

  .thumbnail-overlay-button:hover{
  	background: rgba(229, 78, 83, .8);
  }

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

  .media-box-title{
  }

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


  .media-box-view-image{
  	margin: 12px 0 0 0;
  }
	
  .media-box-more a, .media-box-view-image a{
    text-decoration: none !important;
    color: inherit;
    padding: 0;
    margin: 0;
  }

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

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

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

  .media-box-footer{
  	background: #503291;
  }

  .media-box-social-buttons{
	text-align: center;
  }
  
.media-box-footer ul { 
	margin: 0px;  
	list-style: none; 
	text-align: center;  
}
.media-box-footer ul li { 
	display: inline-block; 
	padding: 10px; 
	font-size: 14px; 
	font-weight: 400; 
	width: auto; 
    width: 21%;
	min-width: 30px; 
	text-align: center;
	color: #ffc832;
}
.media-box-footer ul li:hover { opacity: 0.8; }
.media-box-footer ul li .winner-link {
	width: auto;
	height: auto;
	padding: 0px;
	margin: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.media-box-footer ul li span, .media-box-footer ul li .winner-link { display: block; }
/* footer link */
.media-box-footer ul li a { color: #ffc832; }
.media-box-footer ul li a:hover { color: #CC9500; }
.media-box-footer ul li.active a { color: #CC9500; }



/* ====================================================================== *
      [2] LOAD MORE
 * ====================================================================== */
    
  .media-boxes-load-more-button{
    cursor: pointer;
    width: 150px;
    text-align: center;
    color: white;
    background-color: #333333;
    font-size: 14px !important;
    padding: 10px 15px 10px 15px;
    margin: 0px auto 50px auto;
    line-height: 15px;
	border-radius: 25px;

    -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{
    filter: alpha(opacity=20);
    opacity: 0.2;
  }


/* ====================================================================== *
      [3] FILTER BAR
 * ====================================================================== */
  
  .filters-container{
  	margin-bottom: 15px;
  }

  .filters-container:after {
  	content: " ";
  	visibility: hidden;
  	display: block;
  	height: 0;
  	clear: both;
  }
  
  @media only screen and (max-width: 768px) {
     .filters-container>*{
      float: left !important;
      display: block;
      margin-bottom: 5px !important;
      margin-right: 5px !important;
     }
     .filters-container .media-boxes-filter{
      margin-top: -5px !important;
     }
     .filters-container .media-boxes-filter>li{
      margin-top: 5px !important;
     }
  }

  .media-boxes-filter{
    font-size: 0px;
    list-style: none;
    margin: 0;
    padding: 0px;
    text-align: left;
  }

  .media-boxes-filter>li{
    display: inline-block;
    line-height: 16px;
    margin: 0 8px 0 0;

    -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: #676767;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    margin: 0 0px 0px 0;
    padding: 11px 14px;
    background-color: white;
    -webkit-border-radius: 1px;
       -moz-border-radius: 1px;
            border-radius: 1px;

    -webkit-transition: background-color .1s;
       -moz-transition: background-color .1s;
         -o-transition: background-color .1s;
        -ms-transition: background-color .1s;
            transition: background-color .1s;

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

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

  .media-boxes-filter>li a.selected{
    background: #e54e53 !important; 
    color: #fff !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{     
      padding: 9px 14px 9px 14px;
      font-size: 12px;
      margin: 0;
      font-weight: 400;
      
      color: #555;
      vertical-align: middle;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 1px;
      
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
              box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
      
      -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
              transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }
    
    .media-boxes-search:focus {
      border-color: #66afe9;
      outline: 0;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
              box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

/* ====================================================================== *
      [5] DROP DOWN MENU
 * ====================================================================== */
    
    .media-boxes-drop-down{
      width: 140px;
      margin: 0;
      position: relative;

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

    .media-boxes-drop-down-header .fa{
      float: right;
    }

    .media-boxes-drop-down-menu {
      margin: 0;
      padding: 0;
      z-index: 99999;
      position: absolute;
      width: 100%;
      display: none;

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

    .media-boxes-drop-down-menu > li {
      list-style: none;
    }

    .media-boxes-drop-down-menu > li:first-child > a{
      border-top: 1px solid #E9E9E9;
    }

    .media-boxes-drop-down-menu > li > a, .media-boxes-drop-down-header{
      font-size: 12px;
      font-weight: 400;    
  
      display: block;
      padding: 10px 14px;
    
      text-decoration: none;
      background-color: white;
      color: #676767;
      
      -webkit-box-sizing:border-box;
         -moz-box-sizing: border-box;
          -ms-box-sizing: border-box;
              box-sizing: border-box;
    }

    .media-boxes-drop-down-menu > li > a{
      color: #999999;
    }

    .media-boxes-drop-down-menu > li > a:hover, .media-boxes-drop-down-menu > li > a:focus {
      color: #000;
    }

    .media-boxes-drop-down-menu > li.selected > a,
    .media-boxes-drop-down-menu > li > a.selected{
      color: #e54e53;
    }

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

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

  .thumbnail-overlay{
    background: black; /* fallback for IE8 */
    background-color: rgba(0,0,0, .30);
    color: #333333;
  }

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

  .thumbnail-overlay i.fa, .media-box-play-button, .media-box-sound-button{
  	background: #e54e53;
    font-size: 13px;
    color:  #fff;
    text-align: center;

    display: inline-block;
    margin: 3px;
    
    height: 44px;
    width: 44px;
    line-height: 45px;
    /*padding: 17px 17px 15px 17px;*/

    -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: -webkit-transform .2s, background .1s;
       -moz-transition:    -moz-transform .2s, background .1s;
         -o-transition:      -o-transform .2s, background .1s;
        -ms-transition:     -ms-transform .2s, background .1s;
            transition:         transform .2s, background .1s;
  }  
  
  .thumbnail-overlay i.fa:hover{
      -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
         -o-transform: scale(1.2);
            transform: scale(1.2);          
              
      cursor: pointer;

      background: #333333 !important;
  }

  .mb-play-container{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /*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{
    border: 2px solid #fff;
    padding: 14px 15px 13px 17px;
	font-size: 19px;
    color: #fff;
    text-align: center;
    
    width: 50px;
    height: 50px;
  
    -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+ */

    position: absolute;
    top: 50%;
    left: 50%;
    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] MAGNIFIC POPUP
 * ====================================================================== */

  .mb-open-popup{
    cursor: pointer;
  }
  
  .mfp-arrow.mfp-arrow:before, 
  .mfp-arrow.mfp-arrow:after { border:none !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-container, .iframe-on-grid-container iframe{
  	position: absolute;
  	z-index: 5;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	border: none;
  	background: #000;
  	display: none;
  }

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


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

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

	.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 */
    display: none; /* hidden by default, the plugin will take care of showing it */
    float: left;
    /*width: 20%;*/
  }

  .media-box-hidden, .not-loaded-before-search{
    display: none; /* hide the hidden boxes */
  }
	
  .media-boxes-container{
  	margin-right: 0 !important;
  	margin-bottom: 0 !important;
  }
  
  .media-box-loaded{
    display: block; /* class to show the boxes once the plugin has been initialized */
  }

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

  .media-grid-image{
    position: relative;
    overflow: hidden;
    width: 100%;
  }
    
  /* Hack to center the image */
  .media-grid-image div[data-width][data-height]{
    position: relative;
    overflow: hidden;
  }
  .media-grid-image div[data-width][data-height] img{
    position: absolute;
    top:-100%; left:0; right: 0; bottom:-100%;
    margin: auto;
  }
  /* End Hack */

  .media-box .media-grid-image img{
    width: 100%;
    max-width: 100%;
    display: block;
	transform: scale(1.0); 
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;
  }

  .media-box:hover .media-grid-image img{
	  -webkit-transform: scale(1.05);
	  transform: scale(1.05);
  }
  
  .media-box img{
    max-width: 100%;
  }
  
  /* Loading and broken thumbnail effects */

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

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

  .broken-image-here{
    background-color: black;
    background-image: url('images/spinner.gif');
	height: 100%;
  }

  .broken-image-here:not([data-height]){
    min-height: 150px;
  }
/* ====================================================================== *
    [3] MEDIA BOX CONTENT
 * ====================================================================== */

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

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