/* css */
@import '../../unauth.css';

.poster {
  background-image: url('../../../img/posters/meeting.jpg');
  background-color: #f4f4f4;
}

h1.title {
  padding-left: 120px;
  padding-top: 80px;
  padding-bottom: 35px;
}

h1.title img.separator {
  width: 4px;
  margin: 0 20px;
  position: relative;
  top: 16px;
}

h1.title span {
  color: #6a6a6a;
  font-size: 20px;
  font-weight: 400;
  position: relative;
  top: -2px;
}

.events {
  padding-bottom: 60px;
}

.events .date {
  width: 83px;
  height: 83px;
  border-radius: 10px;
  background-color: #e6eaef;
  float: left;
  text-align: center;
  color: #3B3E48;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
}

.events .date .day {
  font-size: 40px;
  display: block;
}

.events .date .month {
  font-size: 17px;
  display: block;
}

.events .event {
  float: left;
  padding: 0 0 0 40px;
  width: 485px;
  padding-right: 35px;
}

.events .event .title {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #3B3E48;
  padding-bottom: 6px;
}

.events .event .description {
  font-size: 12px;
  color: #6a6a6a;
  line-height: 18px;
  font-weight: 300;
}

.events .event a.hide-details,
.events .event a.details {
  font-weight: 700;
  color: #3B3E48;
}

.events .banner {
  float: left;
  width: 525px;
  padding-top: 10px;
}

.events .banner img {
  max-width: 100%;
  max-height: 80px;
}

.events .mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  opacity: 0.7;
}

.events .hide-details,
.events .long {
  display: none;
}

@media only screen and (max-width: 1180px) {

  .poster {
    background-image: url('../../../img/posters/meeting-mobile.jpg');
  }

  h1, h2 {
    font-size: 20px;
  }

  .container .events {
    padding-top: 60px;
  }

  .past h1.title,
  .upcoming h1.title {
    padding-left: 0;
    font-size: 16px;
  }

  h1.title span {
    font-size: 16px;
  }

  h1.title img.separator {
    width: 2px;
    top: 8px;
    margin: 0 10px;
  }

  .events {
    padding-bottom: 0;
  }

  .events .wrapper {
    padding: 0 20px;
  }

  .events .event {
    float: left;
    padding: 0 0 0 10px;
    width: calc(100% - 73px);
  }

  .events .event .title {
    font-size: 16px;
  }

  .events .date {
    width: 63px;
    height: 63px;
  }

  .events .date .day {
    font-size: 30px;
  }

  .events .date .month {
    font-size: 15px;
  }

  .events .banner,
  .events .banner img {
    width: 100%;
  }
}

@media only screen
and (min-height: 300px)
and (max-height: 665px) {
  .container .events {
    padding-top: 75px;
  }
}