a
/* ======================================================= 
 *
 *    Media boxes   
 *    Version: 2.8
 *    By castlecode
 *
 *    Contact: http://codecanyon.net/user/castlecode
 *    Created: March 11, 2014
 *    Modified: October 2015, Jen Hall, Drive Brand Studio
 *
 *    Copyright (c) 2013, castlecode. All rights reserved.
 *    Available only in http://codecanyon.net/
 *        
 * ======================================================= */
	
  	/*
	//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;
	}*/





/*!
 *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */

/* ********************************************************************
  (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{
    	/*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
    	/*font-family: 'chunkfiveregular'; font-weight:normal;*/
  	}

/* ====================================================================== *
      [1] MEDIA BOX CONTENT
 * ====================================================================== */
  
  .media-box{ font-size: 15px; }
  .media-box iframe{display: block;	margin: 0 !important; }
  .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{padding: 10px 20px; position: relative; background:#799A3D;  color:white;  line-height: 17px;  }
  .media-box-content a { color:#fff; }
  
 /*AUTO ROAD */ 
/*
.box-Summer {background:#799A3D; color:#333; }
.box-Winter {background:#799A3D;  color:#333;}
.box-Events {background:#799A3D;  color:#333;}
.box-Feature {background:#799A3D;  color:#333;}
.box-Interest {background:#799A3D; color:#333; }
.box-Youdrive {background:#0D426A; background:#799A3D; color:#0D426A !important; }
.box-Wedrive {background:#0D426A; color:#fff !important; }
*/
.box-Highlight {background:#0D426A; color:#fff !important; font-size:1.3em; }
.box-Winter {background:#B32028;  color:#333;}
 
.media-boxes-no-more-entries  { display:none; }
  
.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-box-image:hover .thumbnail-overlay-animated{opacity: 1; left: 0; top: 0;  }
  }


  .thumbnail-overlay-button{display: inline-block; color: white; font-size: 13px; background: #405b87; 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;
  }

  
  
  /*
  [[assign var='ar_tan' value='#C8B783']]
  [[assign var='ar_green' value='#779A3D']]
  [[assign var='ar_dkblue' value='#0D426A']]
  
  */
  
.media-box-title{ letter-spacing: 1.2px;    line-height: 1.1;  font-family: 'chunkfiveregular'; font-weight:200;  color: #333333;  color:#fff; text-align:center; font-size: 17px; text-transform:uppercase;  }
.media-box-title a:hover{ color:#0D426A; text-decoration:none; }  /*ar_tan*/
.media-box-title.Highlight { font-size: 1.8em; padding-top:2px }
.media-box-title.Highlight a:hover{ color:#779A3D; }

  
  .media-box-title small{
  	font-size: 12px;
  	display: block;
  	font-weight: 300;
  	margin-top: 5px;
  }
  
  .media-box-title.highlight { font-size: 2.5em; color:#0D426A; }
  .media-box-title.highlight2 { font-size: 2.5em; color:#ffffff; }
  
  
  .media-box-year{ color: gray; font-size: 11px;  margin-bottom: 3px; }
  .media-box-author{ font-size: 11px; margin: 3px 0 0px 0 !important; }
  .media-box-categories{ font-size: 11px; line-height: 15px; color: #405b87; margin-top: 5px; }
  .media-box-categories span{color: #333333;	font-weight: 600; }
  .media-box-date{ font-size: 11px; line-height: 15px; color: #405b87; margin-top: 5px;  }
  .media-box-date span{color: #333333;font-weight: 600;}
  .media-box-big-icon{margin-bottom: 12px; }
  .media-box-big-icon .fa{font-family: 'FontAwesome';font-size: 55px !important;color: white !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{font-size: 12px; margin: 13px 0px 13px 0 !important;  color: #333333;  }
  .media-box-quote{ 	padding: 30px; 	background: #405b87;color: #fff;font-size: 14px;line-height: 28px;font-weight: 600; }
  .media-box-quote span{	display: block;	margin-top: 20px;	font-size: 13px; }
  .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; color: #405b87; font-weight: 600; font-size: 11px; }
  .media-box-more a:hover, .media-box-view-image a:hover{color: #333333; }
  a.media-box-read-more-link{background: #405b87;color: #fff;padding: 0 4px; }
  a.media-box-read-more-link:hover{	background: #333333;	text-decoration: none; }
  .media-box-play-button{ background: rgba(255,255,255, .8) !important; color: #000 !important; padding-left: 3px;  }
  .media-box-sound-button{ background: rgba(255,255,255, .8) !important; color: #000 !important; padding-left: 1px;  }


/* ====================================================================== *
      [2] LOAD MORE
 * ====================================================================== */
  .media-boxes-load-more-button{ cursor: pointer; width: 150px; text-align: center; color: white; background-color: #333333; font-size: 14px !important;
    height: 15px; padding: 10px 15px 10px 15px; margin: 0px 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{ 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: #405b87 !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);
    }


/* ====================================================================== *
      [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: #405b87;
  	font-family: 'FontAwesome';
    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('/modules/MediaBoxes/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-family: 'FontAwesome';
	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; }

  .mfp-arrow.mfp-arrow-left {
    background:url('/modules/MediaBoxes/icons/icon-arrow-left.png') 50% 50% no-repeat !important;
  }
  
  .mfp-arrow.mfp-arrow-right {
    background:url('/modules/MediaBoxes/icons/icon-arrow-right.png') 50% 50% no-repeat !important;
  }
  
  .mfp-close{
    background:url('/modules/MediaBoxes/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('/modules/MediaBoxes/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-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('/modules/MediaBoxes/icons/loading-image.gif');
  }

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

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


/* ====================================================================== *
    [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;
      left: 0;
  }
  
  .position-reveal-effect .thumbnail-overlay{
      z-index: 1;
      position: absolute;
      left: 0;
  }

  .overlay-always-visible{
  	display: block !important;
  	zoom: 1 !important;
    filter: alpha(opacity=100) !important;
    opacity: 1 !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;
  }