/* Flip + Style of all events link*/
.hdf-events-fp {
    display: flex;
    flex-direction: column;
    flex-flow: column-reverse;
}

.hdf-events-fp > div:last-of-type:not(.view-content) a {
    float: right;
    color:  rgba(177,156,214,1) !important;
    font-size: 1.5em;
    margin-bottom: 15px;
    margin-right: 50px;
}

#hdf-events-fp-wrapper .field--label {
    margin-bottom: 0;
}

/* Events CSS */

.hdf-events-fp .view-content {
  display: grid;
  grid-template-areas: "main sub-1" "main sub-2" "main sub-3";
  grid-template-columns: 50%;
  /*column-gap: 100px;*/
  /*column-gap: 6%;*/
  row-gap: 15px;
  padding: 0 50px;
}

.hdf-events-fp h2 {
  display: none;
}

.hdf-events-fp .view-content > div:first-of-type {
  grid-area: main;
  margin-right: 50px;
}

.hdf-events-fp .view-content > div:not(:first-of-type) {
  margin-left: 50px;
}

.hdf-events-fp .view-content > div {
  border: solid lightgray 2px;
  position: relative;
  padding: 10px;
}

.hdf-events-fp img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/*  */
.hdf-events-fp .contextual-region {
  position: unset;
}

.hdf-events-fp .view-content > div:first-of-type .content > div:last-of-type {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  padding: 10px;
  transition: top 350ms;
  top: 70%;
}

.hdf-events-fp .view-content > div:first-of-type .content > div:last-of-type > div {
  background-color: rgba(177,156,214,0.8);
  padding: 5px;
  height: 100%;
  overflow: auto;
}

.hdf-events-fp .view-content > div:first-of-type .content > div:first-of-type.hdf-fill-img {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 10px;
  position: absolute;
}

/* VVVVVVVVVVV      Height when there's < 4 events      VVVVVVVVVVV */
/*.hdf-events-fp .view-content > div:first-of-type:last-of-type, */
/*.hdf-events-fp .view-content > div:first-of-type:nth-last-child(2), */
/*.hdf-events-fp .view-content > div:first-of-type:nth-last-child(3), */
/*.hdf-events-fp .view-content > div:first-of-type{*/
  /*height: 350px;*/
  /*height: 501px;*/
/*  height: 100%;*/
/*}*/

.hdf-events-fp .view-content > div:first-of-type:last-of-type, 
.hdf-events-fp .view-content > div:first-of-type:nth-last-child(2), 
.hdf-events-fp .view-content > div:first-of-type:nth-last-child(3){ 
  height: 450px;
}


.hdf-events-fp .view-content > div:first-of-type .content .hdf-fill-img > div, 
.hdf-events-fp .view-content > div .content .hdf-fill-img > div > section, 
.hdf-events-fp .view-content > div .content .hdf-fill-img > div > section div {
  height: 100%;
  width: 100%;
}

.hdf-events-fp .view-content > div .content .hdf-fill-img img {
  object-fit: cover;
  height: 100%;
}

.hdf-events-fp .view-content > div:first-of-type .content > div:last-of-type section:nth-of-type(4) p{
  overflow: hidden;
  font-family:'raleway regular';
}

.hdf-events-fp .view-content > div:first-of-type .content > div:last-of-type:hover {
    top: 20%;
}

/*.hdf-events-fp .view-content > div:first-of-type .content > div:last-of-type:not(:hover) section:last-of-type,*/ .hdf-events-fp .view-content > div:first-of-type .content > div:last-of-type:hover section:nth-of-type(3), .hdf-events-fp .view-content > div:not(:first-of-type) .content > div:last-of-type section:last-of-type {
  display: none;
}

  /* Coloring */

.hdf-events-fp .view-content > div:first-of-type .content > div:last-of-type * {
    color: white;
}


.hdf-events-fp .view-content > div:first-of-type .content > div:last-of-type div > section:first-of-type {
    font-size: 1.5em;
    font-family:'raleway bold';    
}

.hdf-events-fp .view-content > div:first-of-type .content > div:last-of-type div > section:nth-of-type(2) {
    font-size: 1.15em;
    font-family:'raleway semi-bold';    
    margin: 0.5em 0;
}

.hdf-events-fp .view-content > div:first-of-type .content > div:last-of-type div > section:nth-of-type(3){
font-family: 'raleway regular';
font-size: 1.1em;
}



/*  */

.hdf-events-fp .view-content > div:not(:first-of-type) .content {
  display: grid;
  grid-template:
    "img txt";
  grid-template-columns: 40%;
  grid-template-rows: 130px;
  column-gap: 2%;
}

.hdf-events-fp .view-content > div:not(:first-of-type) .content > div:first-of-type {
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: center*/
  position: relative;
}

.hdf-events-fp .view-content > div:not(:first-of-type) img {
  /*object-fit: contain !important;*/
  /*height: auto !important;*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}


/* Responsive ^ */
@media only screen and (max-width: 1024px) {
  .hdf-events-fp .view-content > div:first-of-type {
    height: 600px;
  }
  
  .hdf-events-fp .view-content > div:not(:first-of-type) .content {
    grid-template-rows: 176px;
  }
  
  .hdf-events-fp .view-content > div {
    margin: 0 !important;;
  }
  
  .hdf-events-fp .view-content > div:first-of-type {
    grid-area: unset;
  }
  
  .hdf-events-fp .view-content {
    grid-template-areas: none;
    grid-template-columns: 100%;
    row-gap: 25px;
    padding: 0 !important;;
  }

}

@media only screen and (max-width: 480px) {
  .hdf-events-fp .view-content > div:first-of-type {
    height: 400px !important;
  }
  
  .hdf-events-fp .view-content > div:first-of-type .content > div:last-of-type{
    top: 50%;
  }
  
  .hdf-events-fp .view-content > div:first-of-type .content > div:last-of-type:hover{
    top: 5%;
  }
  
  .hdf-events-fp .view-content > div:not(:first-of-type) .content {
    grid-template-rows: 226px;
  }
  
}


  /* Color */
  
.hdf-events-fp .view-content > div:not(:first-of-type) .content > div:last-of-type div > section:first-of-type a {
  font-size: 1.1em;
  color: black;
  font-family:'raleway bold';  
}

.hdf-events-fp .view-content > div:not(:first-of-type) .content > div:last-of-type div > section:nth-of-type(2){
  color: #b19cd6;
  margin: 5px 0;
  font-family: 'raleway semi-bold';
  
}

.hdf-events-fp .view-content > div:not(:first-of-type) .content > div:last-of-type div > section:nth-of-type(3) > div p{
  font-family: 'raleway medium';
  color: black;
}

/*Image in Editor Style*/
.hdf-events-fp .view-content > div:first-of-type .content > div:last-of-type .field--name-field-event-description img{
  width: -webkit-fill-available;
  height: auto;
}