* {
   margin: 0;
   padding: 0;
   line-height: 1em;
   font-size: 1em;
   box-sizing: border-box;
}

ul, ol, li {
   list-style: none;
}

.hidden {
   display: none;
}

html, body {
   width: 100%;
   height: 100%;
}

a {
   color: #483EB0;
}

a:hover{
   color: #584EC0;
}

/* layout  and defaults */


header, main, footer {
   width: 100%;
   margin: 0 auto;

}

body {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 14px;
}

p {
   line-height: 1.5em;
   padding: 0.5em 1em;
   color: #606060;
}

/* header */

.page-header {
   display: grid;
   grid-template-areas:
      "logo title"
      "logo subtitle";
   grid-template-columns: 75px 1fr;
   grid-template-rows: auto auto;
   background-color: #fff;
}

.page-header__logo {
   grid-area: logo;
   width: 60px;
   height: 60px;
   margin: 15px 10px;
}

.page-header__title {
   grid-area: title;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   font-size: 1.65em;
   font-weight: 700;
   color: #42404E;
   text-decoration: none;
   padding: 20px 0 0 0;
   line-height: 1.25em
}

.page-header__subtitle {
   grid-area: subtitle;
   width: 100%;
   font-size: 1.3em;
   font-weight: 500;
   color: #9B9BA4;
   text-decoration: none;
   padding: 0.25em 0 0.5em 0px
}


.info {
   line-height: 1.65em;
   margin: 1em;
   padding: 1.25em;
   border-radius: 3px;
   font-size: 1.25em;
}

.wsc-list {
   background-color: rgba(222, 210, 239, 0.35);
   line-height: 1.65em;
   margin: 1.5em auto;
   padding: 1em;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
   border-radius: 3px;
   font-size: 1.1em;

   background: linear-gradient(90deg, rgba(222, 210, 239, 0.15) 0%, rgba(222, 210, 239, 0.45) 50%, rgba(222, 210, 239, 0.15) 100%);

}

.wsc-list__item{
   max-width: 960px;
   margin: 0 auto;
}


.wsc-links {
   text-align: center;
   font-size: 1.25em;
   color: #654b84;
   padding-bottom: 0.5em;
   padding-top: 1em;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.wsc-links > a{
   margin: 0 0.5em;
   padding: 0;
   width: 1em;
   height: 1em;
   border-radius: 50%;
   background-color: #ece3fd;
   color: #8044c9;
   text-decoration: none;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

.wsc-links > a:hover{
   background-color: #ddcbfe;
}

.wsc-links > a.next{
   background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="%238044c9" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg>');
}

.wsc-links > a.prev{
   background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="%238044c9" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg>');
}

.wsc-place,
.wsc-dates {
   font-weight: 500;
   font-size: 1em;
   color: #654b84;
   text-align: center;
   padding-bottom: 0.25em;
}

.wsc-info {
   padding: 0 1em;
}

.wsc-info > p{
   font-size: 0.9em;
   line-height: 1.5em;
   color: #654b84;
   padding: 0.25em 0;
}

.wsc-photo {
   text-align: center;
   padding: 1em 0;
}

.wsc-photo img {
   width: 100%;
   max-width: 100%;
   height: auto;
   object-fit: contain;
   border-radius: 5px;
}

.wsc-files {
   text-align: center;
   padding: 0.25em;
}

.wsc-files > a{
   display: inline-block;
   border-radius: 0.5em;
   background-color: #ece3fd;
   color: #654b84;
   font-size: 0.8em;
   padding: 0.25em 0.75em;
   text-decoration: none;
}

.wsc-files a:hover{
   background-color: #ddcbfe;
}

.wsc-files > .wsc-file-important{
   background-color: #fdf4ff;
   color: #543ac3;
   font-weight: bold;
}

.wsc-files .wsc-file-important:hover{
   background-color: #eedcff;
}

footer {
   color: #606060;
   font-size: 0.75em;
   text-align: center;
   margin-top: 1em;
   padding: 1em;
   background-color: #f3f0f7;
}


.nextevent {
   background: #643eb0;
   color: #faf0ff;
   padding: 0.5em;
   font-size: 0.85em;
   text-align: center;
   margin-bottom: 1em;
}

.nextevent a {
   color: #faf0ff;
}

/* size based */
@media(min-width: 640px) {
   body {
      font-size: 16px;
   }

   .info {
      padding: 1.25em 1.5em;
      max-width: 960px;
      margin: 0 auto;
   }

   .wsc-list {
      padding: 1em 2em;
   }

   .text {
      padding: 0.25em 1.5em 0.5em 1.5em;
      max-width: 960px;
      margin: 0 auto;
   }

   .page-header {
      display: grid;
      grid-template-areas:
         ". logo title ."
         ". logo subtitle .";
      grid-template-columns: 1fr 75px 565px 1fr;
      grid-template-rows: auto auto;
      background-color: #fff;
   }

}


/* size based */
@media(min-width: 900px) {
   body {
      font-size: 18px;
   }

   .info {
      padding: 1em 1.5em;
      max-width: 960px;
      margin: 0 auto;
   }

   .wsc-list {
      padding: 1em 2em;
   }

   .text {
      padding: 0.25em 1.5em 0.5em 1.5em;
      max-width: 960px;
      margin: 0 auto;
   }

   .page-header {
      display: grid;
      grid-template-areas:
         ". logo title ."
         ". logo subtitle .";
      grid-template-columns: 1fr 85px 600px 1fr;
      grid-template-rows: auto auto;
      background-color: #fff;
   }

}