@charset "utf-8";

/* ---------- CUSTOM PROPERTY ---------- */

:root {
}

/* ---------- COMMON ---------- */

main { width: calc(100% - var(--wf_width)*2); margin: 0 auto; }
article { padding: var(--main_padding); text-align: right;}



.left_spacer {width: 53%; margin-left: auto; position: relative;}
.container {width: 85%;  margin: 0 auto; position: relative; text-align: left;}

.container.in {padding: 6vw 0 0; max-width: 900px; text-align: center;}

.in_content {text-align: left;}

h2.large{position: relative; display:block; text-align: right; font-size: 12vw; line-height: 1em; font-family:'futura-pt',sans-serif; font-weight: 600; margin-right: -5px;background: var(--gradientAnim1); -webkit-background: var(--gradientAnim1);-webkit-background-clip: text; -webkit-text-fill-color: transparent;background-size: 200% 200%; animation: 15s ease 0s infinite normal none running gradient; }
h2.large::after {display: block; content: ""; position: absolute; right: 10px; bottom: 10px; height: 200px; width: 11vw; background-image: url( "../images/logo.png"); background-position: bottom;background-size: contain;background-repeat: no-repeat;}

.container.in h2.large {margin-bottom: 50px; display: inline-block;}


.text_center {text-align: center; font-weight: 700;font-size: 1.4vw;line-height: 2.2em;}

.purple_f {display: block; border: 6px solid #5f5f84; background-color: rgba(255,255,255,0.7); padding: 20px; margin-bottom: 20px;}


.link_1 {position: relative;display: block;color: #fff;font-family: din-condensed, sans-serif; background-color: #f7beff; font-size: 30px; padding: 0.6em;width: 60%;margin:  0 auto;text-align: center; border-radius: 5em; transition: 0.2s;}
.link_1:hover {color: #fff; box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);opacity: 1;}

.link_2 {position: relative; display: block; margin-bottom: 50px;}
.link_2 p { position: relative; width: 100%; height: 100px; z-index: 10; border-radius: 15px; border: 5px solid #5f5f84; font-weight: 700; font-size: 25px; text-align: center; margin-bottom: 50px; display: grid; justify-content: center;align-content: center; margin-bottom: 0;}
.link_2.bb p{color: #fff; background-color: #5f5f84;}
.link_2.ww p{color: #5f5f84;background-color: #fff;}
.link_2::before {position: absolute;display: block; content: ""; width: 100%; height: 100px; bottom: -15px; right: -15px; background: var(--gradientAnim1);background-size: 200% 200%; animation: 15s ease 0s infinite normal none running gradient;border-radius: 15px;pointer-events: none; transition: 0.2s;}
.link_2:hover {opacity: 1;}
.link_2:hover::before {bottom: -20px; right: -20px; }

p.maru {margin-left: 1.2em; position: relative;}
p.maru::before {content: "●"; position: absolute; left: -1.3em; font-size: 0.7em;color: #5f5f84;}
p.kome {margin-left: 1.2em; position: relative;}
p.kome::before {content: "※"; position: absolute; left: -1.3em; color: #5f5f84;}


@media only screen and (max-width: 800px){
	main {overflow-x: hidden; width: 100%;}
	.left_spacer {width: 100%;}
	.container {width: 94%;}
	.container.in {padding: 60px 0 0;}
	h2.large{font-size: 26vw;}
	h2.large::after {width: 24vw;}
	.text_center {font-size: 4vw;}
	.link_1 {width: 100%;}
	.link_2 {margin-bottom: 25px;}
	.link_2 p {font-size: 20px; height: 70px;}
	.link_2::before {height: 70px; bottom: -8px; right: -8px;}
	
	.container.moc {padding: 80px 0 40px;}
}



/* bg_mov */

.bg_mov {position: fixed;top: 0; left: 0; width: 100%; height: 100%; z-index: -1000; transition: 0.3s;}
.bg_mov.top_bg::after{content: "";display: block;position: absolute; top: 0; right:0; height: 100%; width: 65%; background:linear-gradient(to right , rgba(255,255,255,0), rgba(255,255,255,0.7) 20% , rgba(255,255,255,1) 45%);}
.bg_mov.top_bg.wv2::after{top: -50%; right:-10%; height: 200%; width: 70%; transform: rotate(10deg);background:linear-gradient(to right , rgba(255,255,255,0), rgba(255,255,255,0.7) 15% , rgba(255,255,255,1) 40%);}
.bg_mov video {position: absolute;top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%, -50%); z-index: -1000; filter: drop-shadow(0px 0px #000);}
.bg_mov.top_bg video {left: 26.5%;}

.bg_mov::before {position: absolute; bottom: 10px; left: 10px; width: 50px;height: 50px;background-image: url( "../images/Spinner-1.2s-100px.gif");background-repeat: no-repeat;background-position: center;background-size: contain;content: "";transition: 0.3s;z-index: 100;}
.bg_mov.js_active::before {opacity: 0;}
.bg_mov video {opacity: 0;transition: 1s;}
.bg_mov.js_active video{opacity: 1;}

@media only screen and (max-width: 800px){
	.bg_mov.top_bg::after{display: none;}
	.bg_mov.top_bg video {left: 50%;}
	.bg_mov.v3 {top: 60px; height: 60%;}
	
	.bg_mov::before{right: 10px; left: auto;}
	
	.bg_mov.whiten {opacity: 0.18!important;}
}


/* KV */

#kv {}
#kv.in {height: 0!important;}
#kv .logo_center {position: fixed; top: 50%; left: 26.5%;}
#kv .logo_center.under {z-index: -1000;}
#kv .logo_center.over {z-index: 10;}
#kv .logo_part {position: absolute;top: 50%;left: 50%; background-size: contain; background-position: center;background-repeat: no-repeat;}
#kv .flower2 {background-image: url("../images/flower_2.png");width:90vw; height: 90vw;animation:120s linear infinite rotation1;background-size: cover;opacity: 0.4;}
#kv .particle_part {background-image: url( "../images/particle_part.png");width: 60vw; height: 60vw;animation:60s linear infinite rotation1;}
#kv .flower1 {background-image: url("../images/flower_1.png");width: 30vw; height: 30vw;animation:90s linear infinite rotation1;}
#kv .logo {background-image: url("../images/logo.png");width: 40vw; height: 40vw; transform: translateX(-50%) translateY(-46%); filter: drop-shadow(0px 0px 20px #fff);}

@media only screen and (max-width: 800px){
	#kv { height: 80vh;}
	#kv .logo_center {position: relative; top: 50%; left:50%; transform: translate(-50%,-50%);}
	#kv .flower2 {width:150vw; height: 150vw;}
	#kv .particle_part {width: 120vw; height: 120vw;}
	#kv .flower1 {width: 60vw; height: 60vw;}
	#kv .logo {width: 80vw; height: 80vw;}
	
	#kv .logo_center.v3 {top: 46%;}
}

#kv.in .logo_center {left: 50%;}
#kv.in .particle_part {width: 150vw; height: 150vw; opacity: 0.7;} 

@media only screen and (max-width: 800px){
	#kv.in { height: 0vh;}
	#kv.in .logo_center {position: fixed; top: 50%; left:50%; transform: translate(-50%,-50%);}
	#kv.in .particle_part {width: 160vh; height: 160vh; opacity: 0.7;} 
}


/* PRECAUTION */

.precaution .purple_f .title {font-weight: 700; font-size: 24px; margin-bottom: 1em;text-align: center; line-height: 1.3em;}
.precaution .purple_f .textbox h4 {font-size: 18px; font-weight: 700; padding: 0.5em 0 0.5em;}
.precaution .purple_f .textbox p {font-size: 16px; color: #000;margin-bottom: 0.5em;line-height: 1.5em;}
.precaution .purple_f .textbox a {color: #f87eff; word-wrap: break-word;}
.precaution .purple_f .textbox hr {margin: 1em 0;}
.precaution .purple_f .textbox img {width: 100%;}

@media only screen and (max-width: 800px){
	.precaution .purple_f .title {text-align: left; font-size: 20px;}
	.precaution .purple_f .textbox p {font-size: 14px;}
}




/* ---------- TOP PAGE ---------- */


/* TOP */

#top {height: calc(100vh - var(--wf_width)*2); position: relative; margin-bottom: 5vw;}
#top .text_box { position: absolute; top: 52%; right: 10%; transform: translateY(-50%); width: 82%; }
#top .text_box .text {width: 100%; margin-bottom: 4vw; filter: drop-shadow(0px 0px 4px #fff);}
#top .text_box .top_link {position: absolute; bottom: -13vw; right: -3vw; display: flex;justify-content: flex-end;}
#top .text_box .top_link img {margin-right: 2vw; width: 13vw;}


@media only screen and (max-width: 800px){
	#top {height: inherit;}
	#top .text_box { position: inherit; transform: translateY(0%); text-align: right; right: 0; top: 0; width: 90%; margin: -12vh auto 0;}
	#top .text_box .text {margin-bottom: 3vw;}
	#top .text_box .top_link {position: inherit; bottom: 0vw;}
	#top .text_box .top_link img {width: 25vw;}
}




/* INTRO */
/*
#intro {}
#intro .text_center {letter-spacing: 0.1em; margin-bottom: 5vw;}
#intro img {width: 100%;}
#intro .icons {margin-bottom: 5vw;}

@media only screen and (max-width: 800px){

}
*/


/* NEWS */

#news {}
#news h2 {margin-bottom: -2vw;}
#news ul {margin-bottom: 30px;}

#news ul .purple_f .date {font-family: din-condensed, sans-serif; font-size: 40px;line-height: 1em;margin-bottom: 0.2em;}
#news ul .purple_f .title {font-weight: 700; font-size: 18px; margin-bottom: 0.5em;}

@media only screen and (max-width: 800px){
	#news h2 {margin-bottom: -4vw;}
	#news ul .purple_f .date {font-size: 30px;}
	#news ul .purple_f .title {font-size: 16px;}
}


/* CAST */

#cast {}
#cast h2 {margin-bottom: 2.5vw;}
#cast .text_center {letter-spacing: 0.1em;line-height: 2.5em;}


@media only screen and (max-width: 800px){
	#cast .text_center {letter-spacing: 0em;}
}



/* NEWSONGS */

#newsongs {background: linear-gradient(to right, rgba(191,251,255,0) 0%,rgba(191,251,255,1) 10%, #fcbfff 50%, #c2bdff 100% );padding: 40px 0 40px;margin: var(--main_padding); position: relative; text-align: center;}
#newsongs h2 {color: #fff;font-family:'futura-pt',sans-serif; font-weight: 600; font-size: 40px; margin-bottom: 0.8em;}

#newsongs .content img {width: 160%;transform: translateX(-27%);}

#newsongs .songs-swiper-container {position: relative; }

#newsongs .swiper-slide { opacity: 0; transition: 0.5s; position: relative;}
#newsongs .swiper-slide-active {opacity: 1;}
#newsongs .swiper-slide-next {opacity: 0.7;}
#newsongs .swiper-slide-prev {opacity: 0.1;}
#newsongs .swiper-slide a:hover {opacity: 1;}
#newsongs .swiper-slide img {width: 100%;}
#newsongs .swiper-slide img:hover {opacity: 1;}

#newsongs .swiper-button-prev , #newsongs .swiper-button-next {width: 16px; height: 24px; margin-top: -12px; background-size: 16px 24px;}
#newsongs .swiper-button-prev:focus , #newsongs .swiper-button-next:focus {outline: none;}
#newsongs .swiper-button-prev:after , #newsongs .swiper-button-next:after {content: none;}

#newsongs .swiper-button-prev {background-image: url( "../images/arrow_small@2x_prev.png");left:22.5%;}
#newsongs .swiper-button-next {background-image: url("../images/arrow_small@2x_next.png");right: 22.5%;}


#newsongs .swiper-slide .title {position: absolute; left: -15px; bottom: 20px;  overflow: hidden; background-color: #fff; color: #5f5f84; font-size: 14px; font-weight: 700; display: inline-block; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;  width: 0; padding: 0; opacity: 0; transition: 0.5s; }
#newsongs .swiper-slide.swiper-slide-active .title {width: 85%; padding: 5px 20px; opacity: 1;}

/*#newsongs .swiper-slide::after {position: absolute; left: -15px; bottom: 55px; background-color: #fff; display: block; content: ""; width: 0%; height: 4px; opacity: 0; transition: 0.5s;}
#newsongs .swiper-slide.swiper-slide-active::after { width: 50%; opacity: 1;}*/

@media only screen and (max-width: 800px){
	#newsongs {background: linear-gradient(to right, rgba(191,251,255,1) 0%, #fcbfff 50%, #c2bdff 100% );}
	#newsongs .swiper-button-prev {left:8%;}
	#newsongs .swiper-button-next {right: 8%;}
	
	#newsongs .swiper-slide { opacity: 1; }
	#newsongs .swiper-slide-active {opacity: 1;}
	#newsongs .swiper-slide-next {opacity: 1;}
	#newsongs .swiper-slide-prev {opacity: 1;}
}


/* LINK */

#link {padding: var(--main_padding);}
#link .link_2:last-of-type {margin-bottom: 0;}

@media only screen and (max-width: 800px){
	
}



/* SECRET */
#secret {}
#secret h2 {margin-bottom: 2vw;}
#secret .qa_box {background: var(--gradientAnim2);background-size: 200% 200%; animation: 15s ease 0s infinite normal none running gradient;border-radius: 15px; text-align: center; padding:  40px;}

#secret .qa_box .question {font-size: 25px; letter-spacing: 0.1em; line-height: 1em; font-weight: bold;  transform: translateX(0.5em);color: #5f5f84;}

#secret .qa_box .pass_container {}
#secret .qa_box .pass_container .input{background-color: #eee;width: 100%;margin-right: 10px; letter-spacing: 0.1em; padding: 20px; font-size: 16px; font-weight: 700; border: none;text-align: center;margin-bottom: 15px;}
#secret .qa_box .pass_container .input.open{background-color: #fff;}
#secret .qa_box .pass_container .input:focus {outline: none;}
#secret .qa_box .pass_container .pass_btn {background-color: #666; margin-bottom: 0;width: 100%; color: #fff;  border-radius: 8px; padding: 20px;font-size: 16px; font-weight: 700; border: none; transition: 0.1s;cursor: pointer;-webkit-appearance: none;}
#secret .qa_box .pass_container .pass_btn.open {background-color:  #5f5f84;}

#secret .qa_box .pass_container .pass_btn:hover {transform: translateY(-2px);box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.5);}
#secret .qa_box .pass_container .pass_btn:focus {outline: none;}


@media only screen and (max-width: 900px){
	#secret {}
	#secret .qa_box {padding: 20px;}
	#secret .qa_box .question {font-size: 4.5vw;}
	#secret .qa_box .pass_container {}
	#secret .qa_box .pass_container .input {margin-bottom: 10px;padding:20px 20px}
	#secret .qa_box .pass_container .pass_btn {padding: 15px 20px;}
}







/* ---------- NEWS PAGE ---------- */


#in_news {}
#in_news ul {margin-bottom: 30px;}

#in_news ul li {padding-top: 50px; margin-top: -50px;}

#in_news ul li .purple_f .date {font-family: din-condensed, sans-serif; font-size: 40px;line-height: 1em;margin-bottom: 0.2em;}
#in_news ul li .purple_f .title {font-weight: 700; font-size: 18px; margin-bottom: 1em;line-height: 1.3em;}
#in_news ul li .purple_f .textbox p {font-size: 16px; line-height: 1.5em; color: #000;margin-bottom: 0.5em;}
#in_news ul li .purple_f .textbox hr {margin: 1em 0;}
#in_news ul li .purple_f .textbox img {max-width: 100%; height: auto;}

@media only screen and (max-width: 800px){
	#in_news ul li .purple_f .date {font-size: 30px;}
	#in_news ul li .purple_f .title {font-size: 16px;}
	#in_news ul li .purple_f .textbox p {font-size: 14px;}
}


/* ---------- INTRO PAGE ---------- */

#in_intro { padding: 50px 0 80px;}
#in_intro .text_center {letter-spacing: 0.1em;  font-size: 20px; text-align: left;}
#in_intro .text_center h1 {font-size: 1.4em; font-weight: 700;}
#in_intro .text_center h2 {font-size: 1.2em; line-height: 2.2em;}
#in_intro .text_center .date_name {font-size: 0.8em;}
#in_intro img {width: 100%;}
#in_intro .icons {margin-bottom: 5vw;}

@media only screen and (max-width: 800px){
	#in_intro { padding: 0 0 30px;}
	#in_intro .text_center {font-size: 3.5vw; margin-bottom: 10vw;}
	#in_intro .icons {margin-bottom: 10vw;}
}


/* ---------- INFO PAGE ---------- */

#in_info {}

#in_info img {margin: 0 auto; display: block; margin-bottom: 40px;}

#in_info .info_logo {width: 60%; }
#in_info .date {width: 100%;}
#in_info .place {width: 40%;}
#in_info .timebox {text-align: center;margin-bottom: 30px;}
#in_info .timebox p {font-family:'futura-pt','Noto Sans JP',sans-serif; font-weight: 600; font-size: 3vw; margin-bottom: 0;line-height: 1em;}
#in_info .timebox p span {font-size: 0.7em;}
#in_info .timebox p span span {font-size: 0.7em;}
#in_info .company {margin-bottom: 0px;}
#in_info .company:last-of-type {margin-bottom: 30px;}
#in_info .icons {width: 100%; margin-bottom: 40px;}



@media only screen and (max-width: 800px){
	#in_info img {margin-bottom: 30px;}
	#in_info .date {margin-bottom: 15px;}
	#in_info .info_logo {width: 80%;}
	#in_info .place {width: 60%;}
	#in_info .timebox p {font-size: 6vw;}
	#in_info .icons {margin-bottom: 20px;}
}



/* ---------- GOODS PAGE ---------- */

#in_goods {}

#in_goods .imgbox {margin-bottom: 30px;}
#in_goods .goods_img {width: 100%; height: auto; margin-bottom: 30px;}
#in_goods .link_flex {display: flex; justify-content: space-between;}
#in_goods .link_flex .link_2 {width: 47%;}
#in_goods .link_flex .link_2 p {line-height: 1.3em; height: 150px;}
#in_goods .link_flex .link_2::before {height: 150px;}
#in_goods .link_flex .link_2 p span {font-size: 0.8em;}
#in_goods .icons {width: 100%; margin-bottom: 40px;}

@media only screen and (max-width: 800px){
	#in_goods .imgbox {margin-bottom: 0px;}
	#in_goods .link_flex {flex-direction: column;}
	#in_goods .link_flex .link_2 {width: 100%;}
	#in_goods .link_flex .link_2 p {height: 120px;}
	#in_goods .link_flex .link_2::before {height: 120px;}
	#in_goods .icons {margin-bottom: 20px;}
}


/* ---------- TICKETS PAGE ---------- */

#in_tickets {position: relative;}

#in_tickets .purple_f {padding: 30px;}
#in_tickets .purple_f .title {font-weight: 700; font-size: 30px; margin-bottom: 1em;line-height: 1.3em; border-bottom: 2px solid #5f5f84;padding-bottom: 0.3em;}

#in_tickets .purple_f .ticket_flex {display: flex; justify-content: space-between;align-items: center;margin-bottom: 25px;}
#in_tickets .purple_f .ticket_flex .price {font-weight: 700; font-size: 40px; margin-bottom: 0; line-height: 1em;}
#in_tickets .purple_f .ticket_flex .price span {font-size: 0.6em;}
#in_tickets .purple_f .ticket_flex .link_2 {width: 50%; margin-bottom: 0;}
#in_tickets .purple_f .ticket_flex .link_2 p {height: 60px; font-size: 18px;}
#in_tickets .purple_f .ticket_flex .link_2::before {height: 60px; bottom: -7px; right: -7px;}
#in_tickets .purple_f .ticket_flex .link_2:hover::before {bottom: -10px; right: -10px; }

#in_tickets .purple_f .textbox h4 {font-size: 1.4em; margin-bottom: 0.5em;line-height: 1.3em;}
#in_tickets .purple_f .textbox p {font-size: 14px; line-height: 1.5em; color: #000;margin-bottom: 0em;}
#in_tickets .purple_f .textbox a {color: #f87eff;word-wrap: break-word;}

#in_tickets .purple_f.genchi .price {margin-bottom: 0.5em;}
#in_tickets .purple_f.genchi .ticket_flex .senkou {font-weight: 700; font-size: 25px; margin-bottom: 0; width: 45%; border: 1px solid #5f5f84; text-align: center; line-height: 1em; padding: 10px; min-height: 60px; display: grid; justify-content: center;align-content: center;}
#in_tickets .purple_f.genchi .ticket_flex .senkou span {font-size: 0.7em;}
#in_tickets .purple_f.genchi .link_2.out p {background-color: #ccc; border: none;}

#in_tickets #cast {text-align: center;padding-bottom: 0;}
#in_tickets #cast h2 {font-weight: 700;font-size: 40px; margin-bottom: 1em;letter-spacing: 0.1em;}
#in_tickets #cast .text_center {font-size: 20px;}


@media only screen and (max-width: 800px){
	#in_tickets .purple_f {padding: 15px;}
	#in_tickets .purple_f .title {font-size: 20px;}
	
	#in_tickets .purple_f .ticket_flex {flex-direction: column; align-items: flex-start;}
	#in_tickets .purple_f .ticket_flex .price {margin-bottom: 0.5em; font-size: 25px;}
	#in_tickets .purple_f .ticket_flex .link_2 {width: 100%;}
	
	#in_tickets .purple_f.genchi .ticket_flex:first-of-type  {margin-bottom: 0;}
	#in_tickets .purple_f.genchi .ticket_flex .senkou {width: 100%;margin-bottom: 0.3em; font-size: 20px;}
	
	#in_tickets #cast h2 { font-size: 30px;}
	#in_tickets #cast .text_center {font-size: 3.5vw;}
}

/*language-*/

#in_tickets .language {position: absolute;top: -10px;right: 0px; transform: translateY(-100%);}
#in_tickets .language a{display: inline-block;padding: 3px 15px; color: #5f5f84;border: 1px solid #5f5f84;}
#in_tickets .language a.active{background: #5f5f84;color: #fff;font-weight: bold;}

@media screen and (max-width: 768px) {
	
}


/* ---------- SECRET ---------- */

#in_secret {margin: 2vh 0 8vh;}
#in_secret .purple_f {padding: 30px 20px;}
#in_secret .purple_f .title {font-weight: 700; font-size: 30px; margin-bottom: 0.7em;line-height: 1.3em; border-bottom: 2px solid #5f5f84;padding-bottom: 0.3em;}

#in_secret .purple_f .link_2 {position: relative; margin-bottom: 10px;}
#in_secret .purple_f .link_2 p {height: 60px; font-size: 18px;}
#in_secret .purple_f .link_2::before {height: 60px; bottom: -7px; right: -7px;}
#in_secret .purple_f .link_2:hover::before {bottom: -10px; right: -10px; }
#in_secret .purple_f .link_2 .dl_mark {position: absolute; height: 30px;top: 50%;transform: translateY(-50%);right: 15px; z-index: 20;}

@media only screen and (max-width: 800px){
	#in_secret .purple_f {padding: 20px 15px;}
	#in_secret .purple_f .title {font-size: 20px;}
	
}


/* ---------- 404 PAGE ---------- */

#section404 {position: relative; height: 70vh;width: 85%;  margin: 0 auto;  max-width: 900px;}
#section404 div {position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);width: 100%;}
#section404 div h2 {font-weight: 700; font-size: 18px;margin-bottom: 2em;}







/*lightbox*/


#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:none;}
   /* #cboxContent{margin-bottom:60px; overflow:visible;}*/
    #cboxContent{margin-right:60px; overflow:visible; margin-bottom:0;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{background:#000;}
        #cboxLoadingGraphic{background:url(../images/loading_b.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxClose{text-indent:-9999px; width:40px; height:100%; position:absolute; top:0;background:url(../images/controls2.png) no-repeat 0 0;}
		
        #cboxClose{background-position:7px 0; right:-50px; border:0; outline:none;}
        #cboxClose:hover{}





@media screen and (max-width: 768px) {
#cboxContent{ margin-right:0; margin-bottom:50px;}
#cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;}
}