.cb-slideshow,
.cb-slideshow:after { 
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(/cyouri/img/top/overlay.png) repeat top left; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(/cyouri/img/top/mainv01.webp) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(/cyouri/img/top/mainv02.webp);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(/cyouri/img/top/mainv03.webp);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(/cyouri/img/top/mainv04.webp);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(/cyouri/img/top/mainv05.webp);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}

/* mainv */
.mainv {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  overflow-x: hidden; }

  .mainv .content {
    width: 75em;
    max-width: calc(100% - 4em);
    margin: 0 auto; 
    writing-mode: vertical-rl;
    text-orientation: upright;
    position: absolute;
    right: calc(50% - 11.75rem);
    top: 30%;
    transform: translateY(-70%);
    -webkit-transform: translateY(-70%);
    -ms-transform: translateY(-70%);
}
    .main .content > :last-child {
      margin-bottom: 0; }

  .mainv.fullscreen {
    height: 100vh; 
    overflow: hidden; }

  .mainv.style1 {
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    padding: 0 0 3em 0;
}

    .mainv.style1 h2 {
      font-size: 4.6em;
      line-height: 8rem;
      margin-bottom: 1em;
      letter-spacing: 0.05em;
      color: #fff !important; 
      font-weight: 600;
      text-shadow: 0 0 5px #808080;
      font-family: 'Noto Serif', serif;}
      .mainv.style1 h2 span {
        font-size: 0.6em;
        margin-bottom: 0.25em;}

    .mainv.style1 p {
      font-size: 2.2em;
      line-height: 9rem;
      letter-spacing: 0.05em;
      font-weight: 400;
        margin: 1em 0 3em;}

    .mainv.style1 > .content {
      -moz-transition: opacity 1s ease;
      -webkit-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
      transition: opacity 1s ease;
      -moz-transform: translateZ(0);
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      opacity: 1.0;
      margin: 0;
      color:#fff;}

    .mainv.style1.inactive > .content {
      opacity: 0; }

.mainv.style1 .fig {
    position: absolute;
    right:1%;
    bottom:0;
    width:500px;
    max-width:25%;
    opacity: 1; 
}


/* Intro */
#intro {
  background: #202020; }

@media screen and (max-width: 974px) {
    .mainv.fullscreen {
    height: 85vh; /* Fallback */
    height: calc(var(--vh, 1vh) * 85);}
    .mainv .content {
      padding-bottom: 0;
      right: calc(50% - 9rem); }
      .mainv.style1 h2 {
        font-size: 3em;
        line-height: 6rem;
        margin-bottom: 1em;
        letter-spacing: 0.05em;
        font-weight: 600; }
        .mainv.style1 h2 span {
          font-size: 2rem;
          margin-bottom: 0.25em; }
      .mainv.style1 p {
        font-size: 1.75rem;
        line-height: 6rem;
        margin: 1em 0 3em;
        font-weight: 400; }
      .mainv.style1 .fig {
          position: absolute;
          right:2%;
          bottom:-30px;
          max-width:47%;
          opacity: 1; }
    
}    

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    35% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    35% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    35% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    35% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    35% { opacity: 0 }
    100% { opacity: 0 }
}

/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 1.75em; }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 1.75em; }
}