.card{border:1px solid #E5E5E5;box-sizing:border-box;margin-bottom:20px;width:100%;position:relative;transition: 0.3s;cursor:pointer;} /*cursor pointer fixes iphone bug for click handler*/
.card[data-state='preview']{border-radius:5px;height:280px;overflow:hidden;}
.card[data-state='expanded']{border-radius:10px;width:98%; margin:1%;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);margin-bottom:30px;}
.card[data-state='expanded'] footer, .card[data-state='expanded'] .container-media{display:none;}
.card .container-media{height:120px;}
.card .container-media img{width:100%;height:100%;object-fit:cover;}
.card .container-content{padding:15px;}
.card .title-primary{margin-bottom:15px;font-size:16px;}
.card footer{position:absolute;bottom:0px;left:0px;color:#0067CE;background:white;padding:15px;width:calc(100% - 30px);padding-top:30px;text-transform:uppercase;font-weight:bold;}
.card footer{background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 1%, rgba(255,255,255,1) 25%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.04) 1%,rgba(255,255,255,1) 25%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.04) 1%,rgba(255,255,255,1) 25%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}
.card .title-secondary{display:block;}
.card .text-primary{font-size:13px;}
.card[data-state='preview']:hover {box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); cursor:default;}
.mobile .card[data-state='preview']:hover{cursor:pointer;}

.card[data-state='preview']:hover footer{text-decoration:underline;}
.card[data-state='preview'] footer:hover, .card[data-state='preview'] h3:hover{cursor:pointer;text-decoration:underline;}
.card[data-state='preview'] button.is-close {display:none;}
.card[data-state='preview'] .title-secondary{margin-top:-10px;}
.card[data-state='preview'] figure{display:none;}
.card[data-state='expanded'] .title-primary{font-size:30px;}
.card[data-state='expanded'] .title-secondary{font-size:16px;margin-bottom:15px;}
.card[data-state='expanded'] figure{height:320px;position:relative;margin-bottom:20px;}
.card[data-state='expanded'] figure img{height:calc(100% - 20px);width:100%;object-fit:cover;border-radius:5px;}
.card[data-state='expanded'] figure img:hover{opacity:0.75;cursor:pointer;}
.card[data-state='expanded'] figure .fa-expand:hover{cursor:pointer;}
.card[data-state='expanded'] figure[data-state='expanded']{height:auto;}
.card[data-state='expanded'] figcaption{padding-left:2px;color: rgba(0, 0, 0, 0.87);font-weight:500;}
.card[data-state='expanded'] figure .fa-expand{line-height:30px;width:30px;color:white;position:absolute;top:0px;right:0px;text-align:center;background:rgba(0,0,0,0.20) none;}


#buyer-guarantee-sidebar{
   border-radius:6px;
   max-width: 320px;
}



/**
 * What to do when the screen is greater than 600 pixels
 *
 */
 
@media only screen and (min-width: 600px)
{
    /**
     * Assume two cards side by side with amrgin in between
     *
     */
    .card[data-state='preview']{display:inline-block;width:calc(50% - 10px);}
    .card[data-state='preview']:nth-child(2n){margin-left:20px;}
}


/**
 * What to do when the screen is greater than 1140 pixels
 *
 */
 
@media only screen and (min-width: 1140px)
{
    #layout-left, .interior-level-left{width:780px;} /*maximize size of left containers*/
    
    /**
     * Re-position cards now that we can fit three across
     *
     */
    .card[data-state='preview']{width:calc(33.33% - 13.33px);}
    .card[data-state='preview']:nth-child(2n){margin-left:0px;}
    .card[data-state='preview']:nth-child(3n){margin-left:20px;}
    .card[data-state='preview']:nth-child(3n + 2){margin-left:20px;}    
}


#primary-event-list-container{
   min-height: 40vh;
}

@media only screen and (min-width: 960px)
{
   #primary-event-list-container{
      box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 16px;
      background: white;
      padding: 16px;
      border-radius: 12px;
      border: 1px solid #F8F8F8;
   }   
}