/*====================================================================================================
00. Reset
====================================================================================================*/
body { margin:0; }
a,.event-tab { text-decoration: none; }
a { font-optical-sizing: auto; }

.green { color: #10e235; }


/*====================================================================================================
00. Colors
====================================================================================================*/
.event-card { background: #fff; }
body { background: #f9f9f9; }
.category { color: #777; }
.event-tab { color: #555; }
.event-tab.active::after { background-color: #111; }
a,.event-tab:hover,.event-tab.active { color: #111; }

.margin { padding: 0 2.5%; margin: 0 auto; }

/*====================================================================================================
00. Typography
====================================================================================================*/
/* Proxima */a,p,b,input,form,textarea { font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* Bebas */#logo,#logo b,.title,.event-tab,span.day { font-family: "Bebas Neue", sans-serif; }


.event-date .month { font-size: .87rem; }
.category { font-size: .95rem; }
.datetime,.location { font-size: 1rem; }
.event-tab { font-size: 1.1rem; }
.title { font-size: 2rem; }
.event-date .day { font-size: 2rem; }

.event-date .month { font-weight:400; }
.event-tab { font-weight: 600; }
.event-date .day { font-weight:700; }
#logo,.title { font-weight: 800; }

#logo,#logo b,.title,.event-tab,span.day { text-transform: uppercase; } 
.event-date { text-align: left; }

#logo b { letter-spacing: .05em; }
.event-tab { letter-spacing: .08em; }
.title { letter-spacing: .02em; line-height: 1; }
.event-date .day,.event-date .month { line-height: 1; }

.title,.location,.events-grid .event-card { margin: 0; }
.category { margin: 0 0 1rem; }
.event-date .month { margin: 0 0 .1rem; }
.datetime { margin: 28px 0 8px; }

.event-date .month,.event-date .day { display: block; }
.events-grid,.event-content,.event-tabs,.event-card { display: flex; }
header#stripe .margin,.event-tab,header#stripe,.event-card,.margin { position: relative; }

/* Positioning */
.event-date,.event-tab.active::after { position: absolute; }

.event-tabs,.event-card { justify-content: center; }

/*====================================================================================================
02. Event Cards
====================================================================================================*/
.event-card { align-items: center; min-height:360px; border-radius: 2px; box-shadow:0 8px 15px rgba(0,0,0,.03); transition: .2s ease; }
.event-card:hover { transform:translateY(-2px); box-shadow:0 10px 35px rgba(0,0,0,.08); }

/*====================================================================================================
03. Date
====================================================================================================*/
.event-date { top: 18px; left: 18px; }
.event-date .day { margin-top: 2px; }

/*========================================================================================================
05. Event Tabs
========================================================================================================*/
.event-tabs { gap: 64px; margin: 70px 0 40px; }
.event-tab { padding-bottom: .75rem; }
.event-tab.active::after { content: ""; left: 0; bottom: 0; width: 100%; height: 2px; }

/*========================================================================================================
06. Event Grid
========================================================================================================*/


.events-grid *,.events-grid *::before,.events-grid *::after { box-sizing: border-box; }
.events-grid { flex-wrap: wrap; gap: 1.5rem; max-width: 1440px; margin: 0 auto 3rem; padding: 0 2.5rem; }
.events-grid .event-card { flex: 0 0 calc((100% - 4.5rem) / 4); min-height: 360px; }

header#stripe { width:100%; height:60px; display: block; box-shadow:0 8px 15px rgba(0,0,0,.03); }
header#stripe #logo { display: inline-block; font-size: 33px; line-height: 60px; }

.event-content { width:100%; padding:40px; flex-direction:column; align-items:center; justify-content:center; text-align:center; }

@media (max-width: 1100px) {
    .events-grid .event-card { flex-basis: calc(50% - 10px); }
}

@media (max-width: 640px) {
    .event-tabs { gap: 1.5rem; }
    .events-grid .event-card { flex-basis: 100%; }
}