@charset "UTF-8";
.accordion { margin: 15px 0; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; }
.accordion details { position: relative; z-index: 1; margin: 0; overflow: hidden; }
.accordion summary { display: block; padding: 15px; background-color: #f5f5f5; background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 50%, white); border-bottom: 1px solid #ccc; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:focus { outline: none; box-shadow: inset 0 0 0 2px #2276c2; }
.accordion summary::after { position: absolute; right: 15px; color: #2276c2; }
.accordion summary:hover::after, .accordion summary:focus::after { content: "❯"; }
.accordion details:last-of-type summary { border-bottom: none; }
.accordion details[open] summary { border-bottom: 1px solid #ccc; }
.accordion details[open] summary::after { content: "❮"; }
.accordion img { position: absolute; z-index: -1; top: calc(1.125em + 30px); height: calc(100% - 1.125em - 30px); left: 0; width: 100%; object-fit: cover; opacity: 0.4; }
.accordion a { display: block; padding: 15px; text-shadow: 1px 1px 2px white; }
.accordion a p { margin-top: 0; }
.accordion a .link { display: block; text-align: right; }

@keyframes slide-from-left { from { right: 70%; }
  to { right: 0; } }
.js .carousel { position: relative; margin: 15px; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; }
.js .carousel details { margin: 0; padding: 0; }
.js .carousel summary { position: relative; z-index: 3; margin: 0; padding: 15px; box-sizing: border-box; width: 30%; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #f5f5f5; background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 50%, white); display: block; }
.js .carousel summary::-webkit-details-marker { display: none; }
.js .carousel summary:focus { outline: none; box-shadow: inset 0 0 0 2px #2276c2; }
.js .carousel summary.current:focus { box-shadow: inset 0 0 0 2px white; }
.js .carousel summary:hover::after, .js .carousel summary:focus::after, .js .carousel summary.current::after { position: absolute; right: 15px; color: #2276c2; content: "❯"; }
.js .carousel summary.current { background-color: #2276c2; background-image: linear-gradient(to bottom, #00a8ff, #2276c2 50%); border-color: #2276c2; color: white; }
.js .carousel summary.current::after { color: white; }
.js .carousel details:last-of-type summary { border-bottom: none; }
.js .carousel img, .js .carousel a { position: absolute; z-index: 1; top: 0; right: 0; transition: opacity 0.5s ease; opacity: 0; will-change: opacity; }
.js .carousel .current ~ img, .js .carousel .current ~ a { opacity: 1; z-index: 2; }
.js .carousel img { width: 70%; height: 100%; left: auto; object-fit: cover; }
.js .carousel a { display: block; bottom: 0; width: 30%; min-width: 250px; margin: 15px; padding: 15px; background: rgba(51, 51, 51, 0.9); background: linear-gradient(to bottom, rgba(85, 85, 85, 0.9), rgba(51, 51, 51, 0.9) 20px, rgba(51, 51, 51, 0.75)); border-radius: 6px; color: #ddd; text-shadow: 1px 1px 1px black; border: 1px solid rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 2px 5px rgba(0, 0, 0, 0.6); }
.js .carousel a:hover { color: #ddd; }
.js .carousel p { margin-top: 0; }

.news { flex: 1; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 15px; padding: 15px; overflow: hidden; }
.news h2 { margin: -15px; padding: 15px; margin-bottom: 15px; background-color: #f5f5f5; border-bottom: 1px solid #ccc; font-size: 1.125em; font-weight: normal; background-image: linear-gradient(to bottom, white, #ddd); }
.news ul { margin: 0; padding: 0 0 0 15px; list-style: none; text-indent: -15px; }
.news li { margin: 15px 0 0; padding: 0; }
.news .date { text-decoration: underline; }
.news .more { display: block; margin-top: 15px; text-align: center; }

@media (min-width: 600px) { .columns { display: flex; align-items: flex-start; margin-top: 30px; }
  .news + .news { margin-left: 15px; } }