@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
@import url("https://fonts.googleapis.com/css?family=Jua");
.mainc {
  font-family: "Lato", sans-serif;
  --color-text: #fff;
  --color-bg: #b80c2d;
  --color-link: #f8d05d;
  --color-link-hover: #ccc;
  --color-info: #f0f0f0;
  overflow-x: hidden;
}

.content__title {
  font-family: "Jua", sans-serif;
  font-size: 2rem;
  margin: 0;
  color: #ffbec9;
}

.content__date {
  font-size: 1rem;
  padding: 0.5rem 0;
}

.content__location {
  font-size: 1rem;
}

.content__text {
  max-width: 600px;
  font-size: 1.25rem;
  line-height: 1.4;
  text-align: center;
}

.schedule {
  width: 100%;
  padding: 15px;
  border-top: 2px solid #cccccc;
  border-bottom: 2px solid #cccccc;
}

#content-1 {
  background-image: url(../img/bg.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}

#content-1 .content__title {
  color: #fff;
}

#content-2 {
  background-color: #39424e;
}

#content-3 {
  background-color: #404a57;
}

#content-4 {
  background-color: #39424e;
  overflow-x: hidden;
}

#content-5 {
  background-color: #404a57;
}

#content-6 {
  background-color: #39424e;
}

.menu-trigger {
  display: none;
}

.grim {
  display: none;
}

@media screen and (min-width: 75em) {
  .content__title {
    font-size: 5vw;
  }
  .content__date,
  .content__location {
    font-size: 2rem;
  }
  .menu-trigger {
    font-family: "Jua", sans-serif;
    display: inline-block;
    background: none;
    border: 0;
    grid-area: menu;
    justify-self: start;
    align-self: end;
    cursor: pointer;
    pointer-events: auto;
    color: inherit;
    position: relative;
    padding: 0;
    white-space: nowrap;
    font-size: 1.1rem;
  }
  .menu-trigger--start {
    display: block;
  }
  .menu-trigger--start .text {
    display: block;
    padding: 75px 10px 10px 10px;
  }
  .menu-trigger--close {
    color: #fff;
    font-family: "Jua", sans-serif;
    align-self: center;
  }
  .grim {
    display: grid;
    position: fixed;
    z-index: 1000;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    grid-template-columns: repeat(32, 3.125vw);
    grid-template-rows: repeat(32, 3.125vh);
    pointer-events: none;
  }
  .grim--open {
    pointer-events: auto;
  }
  .grim__item {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .grim__item:first-child {
    grid-area: 31 / 1 / 33 / 2;
  }
  .grim__item:nth-child(2) {
    grid-area: 31 / 2 / 33 / 3;
  }
  .grim__item:nth-child(3) {
    grid-area: 29 / 1 / 31 / 3;
  }
  .grim__item:nth-child(4) {
    grid-area: 29 / 3 / 33 / 5;
  }
  .grim__item:nth-child(5) {
    grid-area: 25 / 1 / 29 / 5;
  }
  .grim__item:nth-child(6) {
    grid-area: 25 / 5 / 33 / 9;
  }
  .grim__item:nth-child(7) {
    grid-area: 17 / 1 / 25 / 9;
  }
  .grim__item:nth-child(8) {
    grid-area: 17 / 9 / 33 / 17;
  }
  .grim__item:nth-child(9) {
    grid-area: 1 / 1 / 17 / 17;
  }
  .grim__item:nth-child(10) {
    grid-area: 1 / 17 / 33 / 33;
  }
  .grim__item-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scale3d(0, 0, 1);
    opacity: 0;
    box-shadow: 0 0 0 2px currentColor;
    background: currentColor;
  }
  .grim__item-bg--1 {
    color: #a8d0e6;
  }
  .grim__item-bg--2 {
    color: #374785;
  }
  .grim__item-bg--3 {
    color: #24305e;
  }
  .grim__item-bg--4 {
    color: #f76c6c;
  }
  .grim__item-bg--5 {
    color: #a8d0e6;
  }
  .grim__item-bg--6 {
    color: #ffbec9;
  }
  .grim__item-bg--7 {
    color: #374785;
  }
  .grim__item-bg--8 {
    color: #24305e;
  }
  .grim__item-bg--9 {
    color: #f76c6c;
  }
  .grim__item-bg--10 {
    color: #a8d0e6;
  }
  .grim__item-content {
    position: relative;
    color: #fff;
    transition: color 0.3s;
    overflow: hidden;
  }
  .grim__item-content:hover,
  .grim__item-content:focus {
    opacity: 0.8;
    color: inherit;
    transition: opacity 0.3s;
  }
  .grim__item-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    opacity: 0;
  }
  .grim__item-title {
    font-family: "Jua", sans-serif;
    font-weight: normal;
    margin: 0;
    font-size: 1.85rem;
    letter-spacing: 0.15rem;
  }
  .grim__item:nth-child(6) .grim__item-title {
    font-size: 2rem;
  }
  .grim__item:nth-child(7) .grim__item-title {
    font-size: 2.25rem;
  }
  .grim__item:nth-child(8) .grim__item-title {
    font-size: 2.45rem;
  }
  .grim__item:nth-child(9) .grim__item-title {
    font-size: 2.65rem;
  }
  .grim__item:nth-child(10) .grim__item-title {
    font-size: 3.85rem;
  }
  .grim__item-desc {
    font-size: 1rem;
    margin: 0.2rem 0 0 0;
  }
  .grim__item-desc::after {
    content: "...";
    position: relative;
    display: block;
    font-size: 1.75rem;
  }
}

.grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 10px;
  padding: 10px;
  width: 100%;
}
.grid-item {
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.one {
  background: url("../img/s1.jpg?v=4");
}

.two {
  background: url("../img/s2.jpg?v=4");
}

.three {
  background: url("../img/s3.jpg?v=4");
}

.four {
  background: url("../img/s4.jpg?v=4");
}

.five {
  background: url("../img/s5.jpg?v=4");
}

.six {
  background: url("../img/s6.jpg?v=4");
}

.seven {
  background: url("../img/s7.jpg?v=4");
}

.eight {
  background: url("../img/s8.jpg?v=4");
}

.s_content {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  padding: 70px 0;
}
/*
.section .main {
  width: 500px;
  position: relative;
  padding: 50px 0;
}
*/
.s_number {
  font-weight: 900;
  font-size: 6rem;
  position: absolute;
  left: -45px;
  top: 5px;
  color: white;
  opacity: 0.87;
  display: none;
}
.s_face {
  padding-top: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  box-shadow: 0px 80px 110px -40px rgba(0, 0, 0, 0.68),
    0px 5px 20px rgba(0, 0, 0, 0.1);
}
.s_title {
  font-family: "Jua", sans-serif;
  width: 200px;
  line-height: 50px;
  text-align: right;
  color: #fff;
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 1.3em;
  text-shadow: 1px 1px 8px #666;
}

.arrow {
  height: 40px;
  width: 40px;
  -webkit-animation: bounce 1s infinite;
  animation: bounce 1s infinite;
  position: absolute;
  bottom: 35px;
  left: 40px;
  background-size: cover;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFDNjM1MjQxQTY1QTExRThCMjUyQjJGQkRDRUI0NkE2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFDNjM1MjQyQTY1QTExRThCMjUyQjJGQkRDRUI0NkE2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUM2MzUyM0ZBNjVBMTFFOEIyNTJCMkZCRENFQjQ2QTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUM2MzUyNDBBNjVBMTFFOEIyNTJCMkZCRENFQjQ2QTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6UiVHGAAAFcUlEQVR42uycS2gVZxTHv9z6KKkVa+miSKFYpVqrCCWU1kcb7UKxCK6KINJNLUXQjYtuSjeCpvF1RYkgVKj1kUSiwRgbjDVRqza2sb5a3UhxoaButCFqTDL9n+RMe3PNnczje83jwA9NMndmvv/873fO+ebOLXMcp1oIUQZ2gL9FFn5iEvgCvFYGAT/Ef34B90EenALnMo2GjfdAJVgD3gCfCghIbHP+jyfgAFjKf8twnE/AXvCoQCf6WbgbzAAPnaHRC86Br8D4FIo2DnwO2sHjIm2egfcLBST2OKXjDlgHpqVAuKlgNbjtoccRd/uyARUHYwr4A7zkMQf0gt2gCTQnbH5bODCnCbEKlHts1wc+ABcHfipSf7fjP+gqfAnGxNxx9DatDzDuQ4WvL3QgxdvswhcDXLmboJbLoPsxcdtEdtoKMCPA6/oBVS2//vebYa7ITidcPAB5UGGx22aDKnA35Bhri/dZ7ECKd/j9XR7hCteBBtAInhh2Ww4sA0vBygj7oXF8BDqG/LbElapx5MR58C2YYMBt5eBr0CZpLPuHO85wDhQ8L5wBr0hywS3Qyp3ODZ5LVMVksBYsBlMl7bOH3Xfhub94XME9jvzoBofBAnaILLdRJTCXO6guBefdWOrYpRzouvASGK3IKe1gLzgO7oTcx6tgCVgOFik6T3q3zOf1AhHEgcT3jvq4AbaA6QEc9xbYCC5rOL8Gr3PxcqDbnVyOmJH9xj1eBcrzvz1Ffx8FKnh+I0e8ruGc+rju6yi5hY+rvcvRGz28iLGMs/fLYAk4CZ5qPpe6kfQZyYEUMzn7lAv9cZGdOMfAsXt57e+s10Z+BBTcpq1O2eIpNQOf+anS/cQu0JUi8cj1m/22OX7iGjiaIgFbPBNHiLcwxXSuC8cmXDzvui+kAyn+AvtT4L4jfsUL6kAd3YnpIDHmBREwF/AA18EPmfvCO9BdL6QV2XEJE+8Z+FgEvCeeC3GgP8G+BLrvsAjxgYJcyIPVJKwupMy7PcwLwwpICwyNCRLweNC5L8oc6Ma7nJFHxVy8Ps6853U60O1OahPgvmNhxYvqQDcjkwvHpKHrkO1ANyP/GGP3NUYRT4aAFDvB45i6Lx91JzIE7Ixpj0zua7dBQME11D8xEo9WmzfJ2JEsAa+IwY+8xSVahKSPMUfNwoUxizNyznLxaMALQJtNDnRdGIce+ags8WQ70HUhJZUXLM6884TEpxBkv92uWJ6Rm4TkRzhUzFdbQbelPe8W2TtVIeAlS10ope7TISBFjYXdSV7FTlUJ2GlZXfgTOK1ix7KzcGHMZCFNrxdS5q1UJaDKovcqqLfAfc2qxFPtQIrZ4DfDdWGlzMJZpwMp6KEdk+uFTSrF0yEgBa3UPDUgHt3n/U71QXQISInExL0TutdxJgkCujWYzu7E4Y5IJEXATnaErmhRmXlNCCh4PurX5L7NugalU0AqZ+o0dR2tugalug4sjlks5GiF7qtUsWhggwMpaL3wgOK6r13ngEzcv9ihqC50hKIVF9sEpIdnDirYL93rOJkGAVW4kLJ7tYmBmBKQEonMr02hrHs2TQJSrBeD9ylkzH2bTA3CpIDUnchYL6RPl55Io4CCnRPVhVtNDsC0gL+LaCs1WrsOGwUU3LeG+W6ZfqFhvS8OAoadC2l151QmYPi6cJsNJ26LgB0i2H1kmvd+zgQcGhuFv/VC2maDLSdtk4DUnTT42O6ELe6zTUDXhb0+akeRCVi6LqwfoetozQT0DrqP3GNj1xEXAelLfg7Z2HXERUDXacXdSZUYXHnJBPSZkZuL6r42G0/U5mc6qm2e+9zQfVszaNCnuyaAN209QdufNv9GWP5NSf8KMABK0KqB99BJ1QAAAABJRU5ErkJggg==");
}

.preparation-text {
  font-size: 16px;
  text-align: center;
  padding: 10px 0 30px 0;
  line-height: 24px;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.responsive-tabs dt {
  padding: 0.5em;
  cursor: pointer;
}
.responsive-tabs dt:first-child {
  border-top: 0;
}
.responsive-tabs .active {
  border-bottom: 2px solid rgba(255, 255, 255, 1);
}
.responsive-tabs .active + dd {
  display: block;
}
.responsive-tabs dd {
  display: none;
  padding: 0.5em;
}

.responsive-tabs-placeholder {
  display: none;
}

iframe {
  width: 100%;
}
.canvascontainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
canvas {
  position: relative;
  z-index: 1;
  pointer-events: none;
  display: none;
}
@media only screen and (min-width: 768px) {
  .responsive-tabs {
    font-size: 1.5em;
  }
  .responsive-tabs dt {
    float: left;
    border-top: 0;
  }
  .responsive-tabs .active + dd {
    display: none;
  }

  .responsive-tabs-placeholder {
    clear: both;
    display: block;
    padding: 1em;
  }
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-gap: 10px;
    padding: 10px;
    width: 800px;
  }
  .grid-item {
    padding: 20px;
    font-size: 20px;
    text-align: center;
  }
  .s_number {
    font-weight: 900;
    font-size: 5rem;
    position: absolute;
    left: -40px;
    top: -25px;
    color: white;
    opacity: 0.1;
    display: block;
  }
  .s_title {
    width: 150px;
    line-height: 35px;
    text-align: right;
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 1.2em;
  }
  .s_content {
    padding: 37px 0;
  }
  iframe {
    width: 500px;
  }
  .schedule {
    width: 500px;
  }
}

@media only screen and (min-width: 930px) {
  .grid-container {
    width: 1000px;
  }
  canvas {
    display: block;
  }
}

/* Privacy page */
.privay-content {
  max-width: 900px;
  margin: 140px auto;
  padding: 20px;
  background-color: #eee;
  color: #454545;
}
.privay-content h1 {
  text-align: center;
  padding: 15px 40px;
}
.privay-content p {
  color: #666;
}
.privay-content a,
.privay-content a:visited {
  color: #f76c6c;
}
.privay-content a:hover {
  color: #f00;
}
.privay-content h3 {
  font-size: 16px;
}