@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nanum+Pen+Script&display=swap');
html {scroll-behavior: smooth;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, th, td, pre, code, blockquote, form, fieldset, legend, input, textarea, figcaption, figure {margin: 0px;padding: 0px;}
h3 {text-align: center!important;color: #f3dae6!important;}
h4 {font-size: 37px;font-weight: 100;padding-right: 15px;color: #cc5ccf;text-align: right!important;}
h5 {font-size: 27px;font-weight: 100;color: #cc5ccf;padding-right: 15px;text-align: center;text-align: right!important}
p {margin: 0px;/* padding: 10px 0px 0px; */font-size: 2em;font-weight: 400;text-align: center;/*font-family: "Nanum Pen Script";*/color: #df65df!important;line-height: 1.3em;}
p .special {font-size: 2em;/* text-align: center; */background: #351556cc;/* z-index: 999; */}
* {margin: 0px;padding: 0px;font-family: "Bebas Neue"; box-sizing: border-box;}
body { background: black; min-height: 1500px; text-align: center;}
#logo_top {/* margin:auto; *//* margin-bottom: 106px; *//* width: auto; */margin: -29px 10px 10px 10px;height: 9em;left: 0;display:none;}
iframe#ytplayer {border: 3px solid #000b89;border-radius:30px}
p.longtext {font-size: 16pt;}

.lightbox-window {
  position: fixed;
  background-color: rgb(125 85 148 / 59%);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}

.lightbox-window:target {
	display:block;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.lightbox-window:target .close a {background: rgb(0 0 0 / 0%);bottom: 0;left: 0;right: 0;padding: 0px 10px 0px 10px;top: 0;position: absolute;z-index: 1;}
.close  {color: #FFFFFF;font-size: 2em;text-indent: 0;/* text-align: left; */left: 0;/* right: 0; *//* bottom: 0; */top: 0;position: absolute;/* top: 0; */}
.closex  {color: #FFFFFF;font-size: 2em;text-indent: 0;/* text-align: left; */left: 0;/* right: 0; *//* bottom: 0; */top: 0;position: absolute;/* top: 0; */}
.closex a {background: rgb(0 0 0 / 0%);bottom: 0;left: 0;right: 0;padding: 0px 10px 0px 10px;top: 0;position: absolute;z-index: 1;}

.lightbox-window > div {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em;
    background: white;
    overflow-y:scroll;
    height:100%;
    z-index: 99999999999999;
}


.close {
  color: #130031;
  line-height: 50px;
  font-size: 20px;
  position: absolute;
  text-align: left;
  /* left: 465px; */
  top: 0;
  padding: 0px 15px;
  width: 100%;
  height: 100%;
  text-decoration: none;
  z-index: 9999999;
}

.closex {
  color: #130031;
  line-height: 50px;
  font-size: 20px;
  position: sticky;
  text-align: left;
  top: 0;
  padding: 0px 321px 0px 0px;
  text-decoration: none;
  z-index: 9999999;
}

.closex:hover {
    color: #521db5;
}
.mycontent {
  padding:0 4%;
}

.photo {
  background: url("../img/1.jpeg") no-repeat;
  background-size:contain;
  min-height:500px;
  background-position: 50% 50%;
}

@media screen and (max-width: 768px) {
  .photo {min-height:350px;}
  .mycontent {padding:0 4%;}
}

@media screen and (max-width: 480px) {
  .photo {min-height:325px;}
  .mycontent {padding:0;}
}

#clouds {
  position: relative;
  margin: auto;
}
/*Time to animate*/
.bobbing{
    position: relative;
    animation-name: bobbingAnim;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-play-state: running;
    -webkit-animation-name: bobbingAnim;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
}

.bobbing.image {
    position: absolute;
	width: 100%;
	height: inherit;
	object-fit: contain;
	object-position: center bottom;
    top: 0px;
    background: url("../img/clouds.png") no-repeat;
}

@keyframes bobbingAnim {
   0% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }

   50% {
       transform: translate(0px, -12px);
       animation-timing-function:ease-in-out
   }

   100% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }
}

@-webkit-keyframes bobbingAnim {
   0% {
       -webkit-transform: translate(0px, 0px);
       -webkit-animation-timing-function:ease-in-out
   }

   50% {
       -webkit-transform: translate(0px, -12px);
       -webkit-animation-timing-function:ease-in-out
   }

   100% {
       -webkit-transform: translate(0px, 0px);
       -webkit-animation-timing-function:ease-in-out
   }
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 999;
  font-size: 35px;
  border: none;
  outline: none;
  background-color: rgb(174 46 245 / 37%);
  color: #ffffff;
  cursor: pointer;
  padding: 14px;
  border-radius: 15px;
}

#myBtn:hover {
  background-color: #9d65df54;
}

/* base */



.flip {
  transition: 0.1s;
  transform-style: preserve-3d;
  position: relative;
  -webkit-user-select: none;
}
 .flip > .front, .flip > .back {
	 display: block;
	 transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	 transition-duration: 0.5s;
	 transition-property: transform, opacity;
}
 .flip > .front {
	 transform: rotateY(0deg);
}
 .flip > .back {
	 position: absolute;
	 opacity: 0;
	 top: 0px;
	 left: 0px;
	 width: 100%;
	 height: 100%;
	 transform: rotateY(-180deg);
}


 .flip.hover > .front {
	 transform: rotateY(180deg);
}
 .flip.hover > .back {
	 opacity: 1;
	 transform: rotateY(0deg);
}

 .flip {
	 position: relative;
	 display: inline-block;
	 margin-right: 2px;
	 margin-bottom: 1em;
	 width: 400px;
}
 .flip > .front, .flip > .back {
	 display: block;
	 color: white;
	 width: inherit;
	 background-size: cover !important;
	 background-position: center !important;
	 height: 520px;
	 padding: 1em 3em 0em 1em;
	 /* border-left: 20px solid #ba53c1; */
	 background: #351556e8;
	 border-radius: 0px;
}
 .flip > .front p, .flip > .back p {
	 font-size: 0.9125rem;
	 line-height: 160%;
	 color: #999;
}



 .text-shadow {
	 text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
}
/* base */
.js-menuItem > a {
  position: relative;
  width: 149px;
  height: 29px;
  margin-bottom: 10px;
  padding-left: 10px;
  padding-top: 3px;
  padding-right: 20px;
  line-height: 29px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.3em;
  text-align: left;
  color: #fff;
  transition: 0.5s;
  }
.js-menuItem > a:hover {
    background: #7a18ec00 url(../img/pixel2.png);
    animation: animate 0.8s steps(8) forwards;
  }
@keyframes animate {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: -480px;
  }
}
.fa-chevron-circle-down { font-size:22px!important }
.fa-chevron-circle-up { font-size:22px!important }
table { border-collapse: collapse; border-spacing: 0px; }
fieldset, img {border: 0px;}
address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: 400; }
li { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h6 {font-size: 36px;font-weight: 400;color:white;text-align: center;}
q::before, q::after { content: ""; }
abbr, acronym { border: 0px; font-variant: normal; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }
input, textarea, select { }
legend { color: rgb(255, 255, 255); }
hr { display: none; }
img {vertical-align: bottom;}
select, input, button, textarea { font-size: 99%; }
table { font-size: inherit; border-collapse: collapse; border-spacing: 0px; }
pre, code, kbd, samp, tt { font-family: monospace; line-height: 100%; }
section#top {position: relative;width: 100%;height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: center;overflow-x: hidden;min-height: 390px;background: rgb(227, 242, 251);}
section#trailer {position: relative;width: 100%;height: 100vh;overflow: hidden;/* display: flex; */justify-content: center;background: #3740dc;align-items: center;border-top: 20px solid transparent;border-image: url("../img/border.png") 30 stretch;}
section#story {position: relative;width: 100%;display: flex;justify-content: center;align-items: center;background:#351556;border-top: 20px solid transparent;border-image: url("../img/borderphone.png") 30 stretch;z-index: 999999999999;}
section#supernatural {display: block;position: relative;width: 100%;min-height: 84vh;overflow: hidden;/* display: inline-block; */justify-content: center;align-items: center;background:#351556;border-top: 20px solid transparent;border-image: url("../img/borderphone.png") 30 stretch;}
section#episodes {position: relative;width: 100%;height: fit-content;/* display: flex; */justify-content: center;align-items: center;background:#351556;}
section#footer {position: relative;bottom:0;width: 100%;height: fit-content;/* display: flex; */justify-content: center;align-items: center;background: rgb(227, 242, 251);}
section#footer p {font-family: "Bebas Neue";font-size: 16px;padding-left: 5%;padding-right: 5%;padding-top: 50px;padding-bottom: 20px;}
section#characters {position: relative;width: 100%;height: fit-content;/* display: flex; */justify-content: center;align-items: center;background:#351556;overflow-x:hidden!important}
section#characters p {font-family: "Bebas Neue"}
.btn {/* line-height: 30px; */display: inline-block;padding: 0 10px;border: 1px solid #cb4dd1;font-size: 4em;text-transform: uppercase;color: #cb4dd1;text-decoration: none;}
section#episodes .info {
	position: relative;
	width: 100%;
	z-index:899;
	display:block;
	text-align:center;
	padding:30px 0px 20px;
	}

section#episodes .info h2 {
	color: #df65df; font-size:1em}

section#episodes .fa-external-link-square {
	color: #df65df; font-size:24px!important}
section#characters p {font-family: "Bebas Neue"}
section#characters .btn {/* line-height: 30px; */display: inline-block;padding: 0 10px;border: 1px solid #cb4dd1;font-size: 4em;text-transform: uppercase;color: #cb4dd1;text-decoration: none;}
section#characters .info {
	position: relative;
	width: 100%;
	z-index:899;
	display:block;
	text-align:center;
	padding:30px 0px 20px;
	}

section#characters .info h2 {
	color: #df65df; font-size:1em}

section#characters .fa-external-link-square {
	color: #df65df; font-size:24px!important}
section#music {position: relative;width: 100%;height: fit-content;/* display: flex; */justify-content: center;align-items: center;background: rgb(227, 242, 251);}
section#music .btn {/* line-height: 30px; */display: inline-block;padding: 0 10px;border: 1px solid #cb4dd1;font-size: 4em;text-transform: uppercase;color: #cb4dd1;text-decoration: none;}
section#music .info {
	position: relative;
	width: 100%;
	z-index:899;
	display:block;
	text-align:center;
	padding:30px 0px 20px;
	/* background: rgb(227, 242, 251); */
	}

section#music .info h2 {
	color: #df65df; font-size:1em}

section#music .fa-external-link-square {
	color: #df65df; font-size:24px!important}

section#patreon {position: relative; width: 100%;height: 100vh;/* display: flex; */justify-content: center;align-items: center;}
section img#px0{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;object-fit: cover;object-position: center bottom;}
section img {position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;object-fit: cover;}
section img#road { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
section img#ocs {position: relative;bottom: 0px;/* left: -4%!important; */min-width: 447px;height: 100%;object-fit: contain;object-position: center bottom;}
section img#clouds {position: absolute;top: 0px;height: 100%;width: 100%;object-fit: cover;object-position: center top;}
section img#logo { position: absolute; top: 4%; left: 10%; width: 180px; height: auto; object-fit: cover; }
section #episodes { position: relative; width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; background: rgb(255, 255, 255); }
section img#px00 {position: relative;top: 0px;left: 0px;width: 100%;height: 100%;object-fit: cover;object-position: center center;}
section#music > h2{
	color:#D360C0;
}
#text { position: relative; background: no-repeat; color: rgb(255, 255, 255); font-size: 10em; }
#road { }
#ocs { }
#contentfront {display:block;/* margin: 20px; */}
#contentfront2 { }
ul .icon:hover { opacity: 0.5; }
ul {margin-block: 0px;list-style-type: none !important;padding-inline-start: 0px !important;}
ul#musicLists {display: flex}
.Lists {display: flex;flex-wrap: wrap;/* padding-left: 10px; */}
.item {width: calc((100% - 60px) / 4);margin-bottom: 5px;}
.item:not(:nth-child(4n+1)) {margin-left: 20px;}
@media screen and (min-width: 1200px) {
  .item {width: calc((100% - 100px) / 6);margin-bottom: 5px;}
  .item:not(:nth-child(4n+1)) { margin-left: 0px; }
  .item:not(:nth-child(6n+1)) { margin-left: 20px; }
}
.item > a { text-decoration: none !important; }
@media screen and (max-width: 767px) {
  .item {width: calc((100% - 40px) / 3);margin-bottom: 5px;}
  .item:not(:nth-child(4n+1)) {margin-left: 0px;}
  .item:not(:nth-child(3n+1)) { margin-left: 20px; }
}
.item > a { text-decoration: none !important; }
.thumbWrap {overflow: hidden;padding-top: 100%;/* min-width: 125px; */height: auto;position: relative;background-position: center;border: 0.5em solid springgreen;}
.thumb {background-repeat: no-repeat;background-position: center center;background-size: cover;width: 100%;height: 100%;margin: auto;position: absolute;inset: 0;transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0s;}
.item > a:hover .thumb { transform: scale(1.16); }
.title {color: rgb(255, 255, 255);margin-top: 2px;/* width: 100%; */transition: color 0.4s ease 0s;text-align: center;font-size: initial;}
.item > a:hover .title { color: rgb(141, 0, 0); }
@media screen and (max-width: 767px) {
  .title { }
}

.item2 {width: calc((100% - 20px) / 3);margin-bottom: 5px;}
.item2:not(:nth-child(3n+1)) {margin-left: 20px; }
@media screen and (min-width: 1200px) {
  .item2 {width: calc((100% - 20px) / 3);margin-bottom: 5px;}

}
.item2 > a { text-decoration: none !important; }
@media screen and (max-width: 767px) {
  .item2 {width: calc((100% - 20px) / 3);margin-bottom: 5px;}

}
.item2 > a { text-decoration: none !important; }
.thumbWrap2 {overflow: hidden;padding-top: 100%;/* min-width: 23px; */height: auto;position: relative;border-radius: 900px;}
.thumb2 {background-repeat: no-repeat;background-position: center center;background-size: cover;width: 100%;height: 100%;margin: auto;position: absolute;inset: 0px;
  transition: all 2s;}
.item2 > a:hover .thumb2 { transform: rotate(30deg); }
.title2 {color: rgb(255, 255, 255);margin-top: 2px;transition: color 0.4s ease 0s;text-align: center;font-size: initial;}
.item2 > a:hover .title { color: rgb(141, 0, 0); }
@media screen and (max-width: 767px) {
  .title2 { }
}


entry-content { height: 100%; width: 100%; background: rgb(21, 43, 86); }
.font-bebas {font-family: "Bebas Neue", cursive;}
#fullWrap {position: relative;margin: 0;}
@media screen and (max-width: 722px) and (min-height: 580px) {#logo_top {margin:auto;padding:0!important;margin-top: 10%;height: 12em!important;} section img#ocs {left:-8%;}}
@media screen and (min-height: 580px) {
	.header__navLogo {margin: 1% auto 12px 0px!important;}
	section img#ocs {left:5%!important;} 
	.menuLists {margin: 0px 0px 0px!important;} 
}
@media screen and (max-width: 767px) {
  html { font-size: 62.5%; }
  body { font-size: 1rem; }
  .sp-only { display: block; }
  .pc-only { display: none !important; }
  .link-opacity:hover { opacity: 1; }
  #fullWrap { min-width: 320px; }
   section img#ocs {left: -6%!important;}
}
.header {width: 15%;/* min-width: 324px; */height: 100vh;position: absolute;top: 0px;left: 0px;transition: background-color 0.4s ease 0s;}

.headertitle {
	color: #fff;
	text-align: center;
	padding: 30px 0 0px;
}

.headertitle > h2 {
		text-align: center;
		/* text-transform: uppercase; */
		/* font-size: 65px; */
		font-weight: 400;
		/* letter-spacing: 3px; */
		/* line-height: .8; */
		/* padding-top: 50px; */
}

.headertitle > h2 > p {
		padding-top: 30px;
		position:relative;
		z-index: 9999999}
.headertitle > h2 > p > a {
		color: rgb(112, 155, 133); 
		pointer-events: none; 
		transition: color 0.4s ease 0s;}

div.headertitle li .btn {/* line-height: 30px; */display: inline-block;padding: 0 10px;border: 1px solid #cb4dd1;font-size: 3.7em;text-transform: uppercase;color: #cb4dd1;background-color: #351556a6;text-decoration: none;}

div.headertitle li .info {
	position: relative;
	width: 100%;
	z-index:899;
	color: #df65df;
	display:block;
	text-align:center;
	padding:30px 20px 20px;
	}
.description{
	display:none;
	padding: 0 10%;
	background: #351556d9;
}

.header.is-posabs { position: absolute; }
@media screen and (max-width: 767px) {
  .header {/* background-color: white; */width: 100%;min-width: 100%;height: auto;}
  .header.is-posabs { position: fixed; top: 0px !important; }
  #logo_top {display:block;position:relative;}
}
.header__inner {width: 100%;position: absolute;transition: top 0.3s ease 0s;padding: 0 20px;}
@media screen and (max-width: 767px) {
  .header__inner {height: 100%;overflow: auto;opacity: 0;pointer-events: none;position: fixed;top: 0px;left: 0px;padding-bottom: 20px;transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) 0s;}
  .header.is-active .header__inner { opacity: 1; pointer-events: auto; z-index: 998; }
  .header__inner::before {content: "";background-color: #351556e8;position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;transform: scaleY(0);transition: all 0.4s ease 0s;}
  body.is-family .header__inner::before { background-color: rgb(252, 221, 171); }
  .header.is-active .header__inner::before { transform: scaleY(1); }
}
.header__nav {/* padding: 40px 20% 0px; */}
@media screen and (max-width: 767px) {
  .header__nav {/* padding: 200px 0px 0px; */position: relative;}
}
.header__navLogo {width: 300px;max-width: 400px;/* margin: 43px auto 12px 80px; */}
.header__navLogo img { width: 100%; }
@media screen and (max-width: 767px) {
  .header__navLogo {text-align: center;width: 100%;height: 128px;max-width: 100%;margin: auto;opacity: 0;/* padding: 10px 0px; */position: absolute;top: 0px;right: 0px;left: 0px;transition: opacity 0.4s ease 0s;}
  .header__navLogo img { width: auto; height: 90%; transform: translateY(-7px); }
  .header.is-active .header__navLogo { transition-delay: 0.4s; opacity: 1; }
}
.header__nav .menuLists {width: 100%;max-width: 172px;margin: 0px auto 20px;}
@media screen and (max-width: 767px) {
  .header__nav .menuLists {display: flex;flex-wrap: wrap;max-width: 100%;margin: 0px;}
}
.header__nav .menuLists > li {font-size: 22px;line-height: 1.6;letter-spacing: 0.01em;white-space: nowrap;text-align: left;}
.header__nav .menuLists > li:first-child {display: none;}
@media screen and (max-width: 767px) {
  .header__nav .menuLists > li { width: 100%; font-size: 3rem; margin-bottom: 8px; opacity: 0; transform: translateX(-20px); transition: all 0.4s ease 0s; text-align: center; }
  .header__nav .menuLists > li.is-ani {opacity: 1;transform: translateY(150px);}
}
.header__nav .menuLists > li > a {position: relative;text-decoration: none;transition: color 0.4s ease 0s;}
.header__nav .menuLists > li.is-standby > a { color: rgb(112, 155, 133); pointer-events: none; transition: color 0.4s ease 0s; }
.header__nav .menuLists > li.the-movieBtn > a { color: rgb(141, 0, 0); }
body.is-family .header__nav .menuLists > li.is-standby > a { color: rgb(214, 151, 50); }
@media screen and (max-width: 767px) {
  .header__nav .menuLists > li > a { padding-left: 24px; }
}
.header__nav .menuLists > li > a::before { content: ""; background-color: rgba(194, 143, 255, 0.76); width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; transform: scale(0, 1); transform-origin: right top; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) 0s; }
.header__nav .menuLists > li > a:hover::before, .header__nav .menuLists > li > a.is-active::before { transform-origin: right bottom; transform: scale(1, 1); }
.header__nav .menuLists > li > a:hover, .header__nav .menuLists > li > a.is-active { color: rgb(255, 255, 255); }
.header__nav .menuLists > li > a > span {display: inline-block;position: relative;transition: transform 0.4s ease 0s;color: rgb(52 63 155);}
.header__nav .menuLists > li > a:hover > span, .header__nav .menuLists > li > a.is-active > span { transform: translateX(8px); color: white; }
@media screen and (max-width: 767px) {
  .header__nav .menuLists > li > a > span { color: rgb(255, 255, 255); }
  .header__nav .menuLists > li > a:hover > span, .header__nav .menuLists > li > a.is-active > span { transform: translateX(0px); }
}
@media screen and (max-width: 767px) {
  .header__menuBtn {background-color: rgb(174 46 245 / 37%);width: 60px;height: 58px;position: fixed;top: 0px;right: 0px;z-index: 999;/* border: 3px solid #c28fff; */border-radius: 19px;border-radius: -17px;}
  .header__menuBtn a {display: block;width: 100%;height: 100%;}
  .header__menuBtn__inner {display: flex;flex-direction: column;justify-content: space-evenly;width: 30px;height: 44px;margin: auto;position: absolute;inset: 0px;}
  .header__menuBtn__inner::before, .header__menuBtn__inner::after {content: "";background-color: rgb(255, 255, 255);display: block;width: 0px;height: 11px;position: absolute;transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0s;}
  .header__menuBtn__inner::before {top: 17px;left: 0px;transform: rotate(45deg);}
  .header__menuBtn__inner::after {bottom: 16px;right: 0px;transform: rotate(-45deg);}
  .header__menuBtn a.is-active .header__menuBtn__inner::before, .header__menuBtn a.is-active .header__menuBtn__inner::after { transition-delay: 0.4s; width: 100%; }
  .header__menuBtn a span {background-color: #ffffff;display: block;width: 100%;height: 6px;transition: rotate 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0s;}
  .header__menuBtn a.is-active span { opacity: 0; transform: translateX(8px); }
  .header__menuBtn a.is-active span:nth-child(2) { transition-delay: 0.1s; }
  .header__menuBtn a.is-active span:nth-child(3) { transition-delay: 0.2s; }
  .header__menuBtn a.is-active span:nth-child(1) { opacity: 0; }
}


.icon-list {
  width: 100%;
  max-width: 0rem;
  padding: 0 0rem;
  display: contents;
  justify-content: space-between;
  float: right;
}


.icon-item {
  list-style: none;
}

.icon-link {
  display: inline-flex;
  font-size: 3rem;
  text-decoration: none;
  color: #d360aa;
  width: calc((100%) / 5);
  height: calc((100%) / 5);
  transition: .5s linear;
  position: relative;
  z-index: 1;
  margin: auto;
  text-align: center;
  float: left;
}

@media screen and (min-width: 1200px) {
  .icon-link  { width: calc((100% / 5)); margin-bottom: 5px; }
}
@media screen and (max-width: 767px) {
  .icon-link { font-size: 5rem; width: calc((100%)); margin-bottom: 5px; }
}


.icon-link:hover {
  color: #fff;
}

.icon-link i {
  margin: auto;    
}

.icon-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: calc((100%));
  height: calc((100%));
  background: #000;
  border-radius: 0%;
  z-index: -1;
  transform: scale(0);
  transition: 0.3s cubic-bezier(.95, .32, .37, 1.21);
}
  
.icon-link:hover::before {  
  transform: scale(1);
}

.icon-item:nth-child(1) a:hover:before { 
  background: #1DB954; 
}

.icon-item:nth-child(2) a:hover:before { 
  background: #d948dd; 
}

.icon-item:nth-child(3) a:hover:before { 
  background: #CD201F; 
}

.icon-item:nth-child(4) a:hover:before { 
  background: #333333; 
}

.icon-item:nth-child(5) a:hover:before { 
  background: #00c7f2; 
}