/* Event list generated by the hello-event-list shortcode */
div.hello-event.style1.list {
  border: 1px solid #ccc; border-radius: 4px; background-color:#fafafa; padding-top:1em;
  div.event-date {
    display: inline-block; vertical-align:top; float:left; width:6em; margin:10px; padding: 6px; padding-top:20px; border: 1px solid #ccc;
    background-color: #fff;
    div.day {font-size:2em; font-weight:700; text-align:center; line-height:0.7em; width:100%;}
    div.month {display:inline-block; float:left; text-align:center; width:100%;}
    div.to {text-align:center; font-size:1.5em; font-weight: 700; width:100%; }
  }
  div.title {font-size:2em; line-height:1.4em; font-weight:700; margin-top:0.5em; margin-bottom:0.5em;}
  div.description {
    padding:1em;
    div.description {
      div.time {color: #888;}
      div.time::before { 
        font-family: "Font Awesome\ 5 Free";
        content: "\f017"; /* clock icon */
        display: inline-block;
        padding-right: 3px;
        vertical-align: top;
      }
    }
    
  }
  div.readmore {text-align:right;}
  div.ticket-link {text-align:right; margin-top:1em;}
}

div.hello-event.style1.min {
  padding-top: 1em;
  padding-bottom: 1em;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  div.start-date {display: inline-block; vertical-align:top; width: 20%;  padding-right: 1em;}
  div.event-title {display: inline-block; width: 50%;  padding-right: 2em;}
  div.ticket-link {display: inline-block; vertical-align:top; width: 30%;  }
}

div.hello-event.style1.widget.single-day {
  div.intro div.event-date {
    display:inline-block; vertical-align:top; float:left; width:5em; padding:0.5em;
    div.day {font-size:2em; font-weight: 700; text-align:center; line-height:0.7em; width:100%;}
    div.month {display:inline-block; float:left;text-align:center; width:100%;}
  }
}

div.hello-event.style1.widget.multi-day {
  div.intro div.event-date {
    display:inline-block; vertical-align:top; float:left; width:8em; padding:0.1em; padding-top:0.9em;
    div.start-date {
      display:inline; vertical-align:top; float:left; padding:0em; text-align:center; 
        div.day {display:inline; font-size:1.6em; font-weight: 700; text-align:center; line-height:0.7em; width:100%;}
        div.month {display:inline; float:left;text-align:center; width:100%;}
    }
    div.end-date {
      display:inline; vertical-align:top; float:left; padding:0em; text-align:center; 
        div.day {display:inline; vertical-align:top; font-size:1em; font-weight: 700; text-align:center; line-height:0.2em; width:100%;}
        div.month {display:inline; vertical-align:top; float:left;text-align:center; width:100%; margin-top:-1em;}
    }
  }
  div.to {display:inline; float:left; font-size:1.5em; font-weight: 700; text-align:left; }
  div.intro div.end-date {display:inline}
}
div.hello-event.style1 div.intro {
  div.title {
    display:inline-block;
    text-align:center;
    vertical-align:top;
    float:left;
    font-size:1.4em;
    line-height:1.2em; 
    width:50%;
  }
  div.thumbnail {clear:both;}
}

div.thumbnail.square {
	img {
  	 width: 100%;
  	 object-fit: cover;
		 aspect-ratio: 1/1;
	 }
}

div.thumbnail.round {
	img {	border-radius: 50%;}
}



div.hello-event.style1.compact {
  div.event-date {font-size:0.6em;}
  div.description {
    font-size:0.9em; line-height: 1.1em; text-align:left;
    div.excerpt {margin-top:1em;}
  }
  div.intro {
    div.title {
      display:inline-block;
      text-align:center;
      margin-top:1em;
      float:left;
      font-size:1.5em;
      line-height:1.6em; 
      width:40%;
    }
    div.thumbnail {
      display:inline-block;
      text-align:center;
      vertical-align:top;
      width:40%;	
    }
  }
}





div.hello-event.style1 div.description {padding:1em;}
div.hello-event.style1 div.description div.title {font-size:2em; font-weight:700; margin-top:0.5em; margin-bottom:0.5em;}

div.hello-event.style1 div.description div.time {color: #666; display: inline-block; margin-right: 2em; width:100%; }
div.hello-event.style1 div.description div.time::before { 
  font-family: "Font Awesome\ 5 Free";
  content: "\f017"; /* clock icon */
  display: inline-block;
  padding-right: 3px;
  vertical-align: top;
  text-align: left; 
}

div.hello-event.style1 div.description div.location {color: #666; }
div.hello-event.style1 div.description div.location::before { 
  font-family: "Font Awesome\ 5 Free";
  content: "\f21d"; /* Street view icon */
  display: inline-block;
  padding-right: 3px;
  vertical-align: top;;
}

div.hello-event.style1 div.description div.date {color: #888; display: inline-block;}
div.hello-event.style1 div.description div.date::before { 
  font-family: "Font Awesome\ 5 Free";
  content: "\f073"; /* Calendar icon */
  display: inline-block;
  padding-right: 3px;
  vertical-align: top;;
}