:root{
    --blue:#1D2754;
    --lBlue:#357ae8;
    --gray:#9e9e9e;
    --darkGray:#333333;
}
body{box-sizing: border-box;font-size:62.5%;margin:0;font-family: 'Montserrat', sans-serif;}
p{font-size: 1.65em;line-height: 22px;}
a, header .logo img{text-decoration:none;-webkit-transition:all 0.3s ease-out;-webkit-transition:0.3s ease-out;transition:0.3s ease-out;}
header .logo{padding-top: 80px;display: flex;flex-direction: column;align-items: center;margin:0 5%;text-align: center;}
header .logo img{width:180px;}
header .logo img:hover, header .logo img:active{opacity:.75;}
header h1{color:#FFF;font-size: 6em;font-weight: 800;text-transform: uppercase;margin-top:10px;margin-bottom: 0;}
header h2{color:#FFF;font-size: 3em;font-weight: 700;text-transform: uppercase;margin:0;}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 600,
  'GRAD' 0,
  'opsz' 48
}
.material-symbols-outlined{size:1em;vertical-align: middle;}

.hero{position: absolute;top: 0;z-index: -998;width: 100%;height:100%}
.heroImage img{background-image: url(images/san-jacinto.jpg);background-size: cover;width: 100%;height:800px;}
.heroImage{position: relative;}
.heroImage::before{  
  content:""; 
  position: absolute; 
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.25) 100%);
  height:100%;
  }
.heroImage::after {
  content:""; 
  position: absolute; 
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
  height: 40%;  
}

.flex{display: flex;}

.eventsWrap{background-color:#FFF;border-radius: 10px;margin:50px 10%;padding:40px;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);}
.alignCenter{align-items: center;}
.filters{flex-basis: 20%;margin-right:80px;}
.eventsList{flex:1;}

.event{border:2px solid rgba(0, 0, 0, .08);border-radius: 8px;padding:20px 30px;;display: flex;align-items: center;margin-bottom: 30px;}
.event:hover, .event:active{background-color:#f0f0f0;}

.event .monthDate{flex-basis: 80px;margin-right: 30px;text-align: center;border-right:1px solid #CCC;padding-right: 30px;}
.event .monthDate .month{font-size: 2em;font-weight: 600;color:var(--blue);}
.event .monthDate .date{font-size: 4em;font-weight: 700;color:var(--blue);}
.event .monthDate .day{font-size: 2em;color:var(--darkGray);}

.event .detail{flex-basis: 180px;margin-right: 30px;}
.event .detail .material-symbols-outlined{color:var(--gray);}
.event .detail .time{font-size: 1.5em;font-weight: 600;color:var(--darkGray);display: flex;align-items: center}
.event .detail .location{font-size: 1.5em;font-weight: 600;margin-top: 10px;color:var(--darkGray);display: flex;align-items: center}
.event .detail .time .iconWrap{margin-right: 5px;}

.event .text{flex:1;}
.event .text .title{font-size: 2em;font-weight: 700;color:var(--darkGray);margin-bottom: 5px;}
.event .icon{color:var(--blue);vertical-align: middle;margin-top:5px;}

.breadcrumbBack{margin-bottom: 35px;}
.breadcrumbBack a{cursor: pointer;}
.eventsDetail{flex-basis: 50%;margin-right: 80px;}
.eventsDetail h2{font-size: 3em;color:var(--blue);}
.eventsDetail .extraDetails{margin-top:40px;}
.eventsDetail .extraDetails p{margin-top:5px;margin-bottom: 0;}
.eventsDetail p a{color:#357ae8;}
.eventsDetail p a:hover, .eventsDetail p a:active{color:#5c5c5c;}

.eventPhoto{flex: 1;}
.eventPhoto img{border-radius: 8px;max-width: 100%; height: auto;}

.tag{padding:5px 10px;margin-top:5px;display: inline-block;border-radius: 50px;font-size: 1.5em;font-weight:600;text-align: center;vertical-align: middle;color:#FFF;}
.tag ~ .tag{margin-left:10px;}

.ui.pagination.menu{margin-top: 30px;font-family: inherit;}


.paginationWrap{display:flex;justify-content:flex-end;}
.pagination{display:flex;justify-content:flex-end;align-items:center;border:2px solid rgba(0, 0, 0, .09);border-radius:8px;}
.pagination a, .current{font-size:1.45em;min-width: 3em;padding:10px;color:#000;text-align:center;display:inline-block;position:relative;}
.pagination .current{background-color:rgba(0, 0, 0, 0.05);}
.pagination a::after, .current::after{content:"";width:1px;border-right:2px solid rgba(0, 0, 0, .09);position:absolute;height:100%;top:0;right:0;}
.pagination > a:last-child::after{display:none;}
.pagination a:hover, .pagination a:active{background-color:var(--gray);}

footer{text-align: center;text-decoration: none;}
footer a{color:var(--lBlue);}
footer a:hover, footer a:active{color:var(--blue);}


@media only screen and (max-width: 1200px) {
    .flex{flex-direction: column;}
    .filters{margin-right: 0; margin-bottom: 100px;}
    .eventsDetail{margin-right: 0;margin-bottom: 20px;}
}


@media only screen and (max-width: 890px) {
	.eventsWrap{margin-right:4%;margin-left:4%;padding: 15px;}
    .event{flex-direction: column;}
    .event .monthDate{flex-basis: 100%; border-right: 0;padding-right: 0;margin-right: 0;border-bottom: 1px Solid #CCC;padding-bottom: 30px;margin-bottom: 30px;width:100%;}
    .event .detail{flex-basis: 100%;margin-right: 0;order:3;margin-top:30px;}
    .event .text{text-align: center;}
    .event .text .title{margin-bottom: 20px;}
}