@charset "UTF-8";

/* RESET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}
a:active, a:focus,input:active, input:focus{outline:0;}


/* GLOBAL */
body{
	background: #000;
	color: #fff;
	font-family: "Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", YuGothic, メイリオ, meiryo, Verdana, Helvetica, -apple-system, sans-serif;
	font-family: 'Noto Sans', sans-serif;
	font-size: 18px;
	font-weight: 400;
	font-feature-settings: "palt";
	line-height: 2.1;
	letter-spacing: 0.05em;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
}

#wrap{
	margin: 0 auto;
}


/* GENERAL */
p{
	margin-bottom: 1em;
	text-align: left;
}
p i{
	font-style: italic;
}
img{
	max-width: 100%;
	height: auto;
}

/* LINKS */
a{
	color: #fff;
	text-decoration: none;
}
a.linkLine{
	position: relative;
	padding-left: 0.5em;
	padding-right: 0.5em;
}
a.linkLine::before{
	content: "";
	display: block;
	width: 100%;
	height: 0.5em;
	position: absolute;
	top: 60%;
	left: 0;
	background: #CEFF00;
	opacity: 0.5;
	z-index: -1;
	transition: 0.3s;
}
a.linkLine:hover::before{
	left: 10px;
	opacity: 0.8;
}
a.linkArrow{
	display: inline-block;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 2.2em;
	background: url("img/linkArrow.svg") no-repeat scroll 0.5em 50% / 1em auto;
	line-height: 1;
}

/* COMMON */
.sections{
	position: relative;
	margin: 0;
}
.cWidth{
	width: 800px;
	max-width: 90%;
	margin: 0 auto;
}

@media only screen and (min-width: 961px){
	.SP{ display:none; }
}
@media only screen and (max-width: 960px){
	.DT{ display:none; }
}



#footer{
	padding: 10px 0 60px 0;
	text-align: center;
	font-size: 12px;
}



/* ------ GLOBAL NAV ------ */
#GN{
	position: fixed;
	top: 0;
	right: 0;
    z-index: 101;
}
#gnBurger {
	display: flex;
	align-items: center;
	justify-content: center;
    position: absolute;
	top: 0;
	left: -100vw;
	width: 120px;
	height: 120px;
	opacity: 0.7;
	cursor: pointer;
	z-index: 3;
	transition: 0.3s ease;
}
#gnBurger:hover {
	opacity: 1;
}
#gnBurger span {
    display: block;
    position: relative;
    width: 40px;
    height: 2px;
    background: #fff;
	transition: 0.5s ease 0.1s;
}
#gnBurger span::before, #gnBurger span::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
	background: #fff;
    transition: 0.3s;
}
#gnBurger span::before { top: -15px; left: 0px; }
#gnBurger span::after { bottom: -15px; left: 0px; }

#GN nav {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: -100vw;
	background: rgba(0,0,0,0.9);
	width: 100vw;
	height: 100vh;
	opacity: 0;
	transform: translateX(5%);
	transition: right 0s ease 0.5s, opacity 0.5s ease, transform 0.5s ease;
}
#GN.on nav {
	right: 0;
	opacity: 1;
    transform: translateX(0%);
	transition: right 0s ease 0s, opacity 0.5s ease, transform 0.5s ease;
}
#GN.on #gnBurger span { transition:0.1s ease 0s; background: rgba(255,255,255,0); }
#GN.on #gnBurger span::before { top:2px; transform:rotate(45deg); }
#GN.on #gnBurger span::after { top:2px; transform:rotate(-45deg); }

/* GN styles*/
#GN nav{
}
#GN nav > ul{
	max-width: 640px;
	margin: 0 auto;
	text-align: left;
}
#GN nav > ul > li{
	padding: 5px 0 6px 0;
}
#GN nav a{
	display: block;
	position: relative;
	padding: 0.1em 0.5em 0.1em 1.75em;
	font-size: 20px;
	transition: 0.3s ease;
}
#GN nav a:hover{
	border-bottom-color: rgba(17,17,17,0);
}
#GN nav a::before{
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 0.5em;
	width: 7px;
	height: 7px;
	border: solid 2px #fff;
	border-width: 2px 2px 0 0;
	vertical-align: middle;
	transform: rotate(45deg) translate(-20%,-50%);
}


/* LANG */
#gnLang{
	display: block;
	position: absolute;
	top: 100px;
	left: -100vw;
	width: 120px;
	padding-bottom: 1em;
	text-align: center;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 14px;
	line-height: 1;
	z-index: 4;
}
#gnLang span{ opacity: 0.5; transition: 0.3s; }
#gnLang span.now{ opacity: 1; }
#gnLang:hover span.now{ opacity: 0.5; }
#gnLang:hover span.link{ opacity: 1; }

/* LANGUAGE */
#gnLanguage{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10em;
	margin: 10px auto 0 auto;
	font-size: 13px;
}
#gnLanguage a, #gnLanguage span{
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 50%;
}
#gnLanguage a{
	border-bottom: solid 1px rgba(17,17,17,1);
	font-size: 13px !important;
	opacity: 0.5;
	transition: 0.3s ease;
}
#gnLanguage a:hover{
	border-bottom-color: rgba(17,17,17,0);
	opacity: 1;
}
#gnLanguage span{
}

#switchLanguage {
	display: flex;
	align-items: center;
	justify-content: center;
    position: absolute;
	top: 30px;
	right: 30px;
	width: 60px;
	height: 60px;
	background: url("img/iLanguage.svg") no-repeat 50% 50% / 40px auto;
	border-radius: 40px;
	cursor: pointer;
	z-index: 2;
	transition: 0.3s;
}
#switchLanguage:hover {
	background-color: #CEFF00;
}







/* ------ HOME ------ */
#home{
	min-height: 100vh;
	margin-top: 0;
	background: url("./img/img01.jpg") no-repeat scroll 50% 50% / cover;
}

/* LOGO */
#siteTitle{
	height: 50vh;
	margin: 0 auto auto 14vw;
	padding: 7vh 0 0 0;
}
#siteTitle img{
	height: 100%;
	width: auto;
}

/* TRAILER */
#trailer{
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 66%;
	left: 34%;
	left: calc(14vw + 22vh);
	width: 240px;
	height: 60px;
	border: solid 1px #fff;
	border-radius: 30px;
	color: #fff;
	cursor: pointer;
	transition: 0.3s ease;
}
#trailer::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 3px 0 0 5px;
	background: #000;
	border-radius: 30px;
	opacity: 0.15;
	z-index: 0;
	transform: translate(-50%,-50%);
	transition: 0.3s ease;
}
#trailer img{
	position: relative;
	left: 0;
	z-index: 1;
	cursor: pointer;
	transition: 0.3s ease;
}
#trailer:hover::after{
	margin: 2px 0 0 3px;
	opacity: 0;
}
#trailer:hover img{
	left: 3px;
}
#trailer:hover *{
	cursor: pointer;
}

/* TRAILER PLAYER */
#viewTrailer{
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.9);
	z-index: 105;
}
#viewTrailer .inner{
	position: relative;
	width: 88vw;
	max-width: calc(100vw - 120px);
	background: #000;
	box-shadow: 0px 0px 50px 10px rgba(0,0,0,0.75);
	z-index: 2;
}
#viewTrailer .close{
	position: absolute;
	top: 0px;
	right: -50px;
	width: 50px;
	height: 50px;
	opacity: 0.7;
	cursor: pointer;
	transition: 0.3s ease;
}
#viewTrailer .close span{
	position: absolute;
	top: 15px;
	right: 5px;
	width: 40px;
	height: 2px;
}
#viewTrailer .close:hover{
	opacity: 1;
}
#viewTrailer .close span::before, #viewTrailer .close span::after {
    content: "";
    display: block;
    position: absolute;
	top: 2px;
	left: 0px;
    width: 100%;
    height: 100%;
	background: #fff;
    transition: 0.3s;
}
#viewTrailer .close span::before { transform:rotate(45deg); }
#viewTrailer .close span::after { transform:rotate(-45deg); }
#viewTrailer .bg{
    display: block;
    position: absolute;
	top: 0px;
	left: 0px;
    width: 100%;
    height: 100%;
	z-index: 1;
}



/* PHRASE */
#phrase{
	position: absolute;
	bottom: 15%;
	right: 12%;
}

/* SOCIAL MEDIA */
.socialmediaList li{
}
.socialmediaList li a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 8px 5px;
	opacity: 0.5;
	transition: 0.3s ease;
}
.socialmediaList li a:hover{
	opacity: 1;
}
.socialmediaList li img{
	height: 100%;
	width:auto;
}

#home .socialmediaList{
	position: absolute;
	bottom: 20px;
	left: 20px;
}

/* LAURELS */
#laurels{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	position: absolute;
	top: 20px;
	right: 20px;
	opacity: 0.6;
}
#laurels > p{
	display: none;
}
#laurels img{
	display: block;
	max-width: 120px;
	max-height: 90px;
	width: auto;
	height: auto;
	padding: 10px;
}
#laurels img:nth-child(n + 2){
	padding-right: 20px;
}

/*
#laurels p{
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	position: relative;
}
#laurels br{
	display: none;
}
*/

/* LAUREL GALLERY */
#laurels .gallery{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	position: relative;
}
#laurels .gallery-item, #laurels .gallery-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
#laurels .gallery-caption{
	display: none;
}
#laurels .gallery-item:nth-child(n + 4){
	display: none;
}
#laurels .gallery-item img{
	padding-right: 20px;
}
#laurels .gallery-item:last-child img{
	padding-right: 10px;
}



/* ------ INTRO ------ */
#intro{
	min-height: 100vh;
	background: url("./img/img02.jpg") no-repeat scroll 50% 50% / cover;
}

#introText{
	position: absolute;
	right: 5%;
	bottom: 7%;
	width: 800px;
	max-width: 80%;
	line-height: 2.2;
}




/* ------ CHARACTERS ------ */
#characters{
	min-height: 100vh;
}
#characters .inner{
	min-height: 100vh;
}

.character{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	opacity: 0;
	overflow: hidden;
	transition: 1.0s ease;
}
.character .img{
	position: relative;
	max-width: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	/*transform: translate(-50%,-50%);*/
}
.character .text{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 60vh 5% 0 60%;
	z-index: 1;
}
.character .quote{
	display: block;
	font-size: 26px;
	line-height: 1.5;
}
#c01 .text{ margin: 60vh 5% 0 60%; }
#c02 .text{ margin: 60vh 0 0 10%; }
#c03 .text{ margin: 60vh 5% 0 70%; }
.character .quote br.SP{
	display: none;
}

.character .name{
	display: block;
	margin-top: 20px;
	font-size: 17px;
	line-height: 1.8;
}
.character .name dd{
	font-size: 14px;
}
/* ON */
.character.on{
	opacity: 1;
	transition: 1.5s ease-in-out;
}



/* ------ REVIEWS ------ */
#reviews{
	min-height: 100vh;
	background: url("./img/img03.jpg") no-repeat scroll 50% 50% / cover;
}

#quoteList{
	position: absolute;
	bottom: 10vh;
	right: 160px;
	width: 680px;
	max-width: 90vw;
}
/*
.slick-track{
	display: flex;
	align-items: center;
	justify-content: center;
}
*/
#quoteList .review{
	display: flex;
	align-items: center;
	justify-content: center;
}
#quoteList .quote{
	padding: 0 20px;
	transition: 0.3s ease;
}
#quoteList .slick-active .quote{
	opacity: 1;
}
#quoteList .stars{
	margin-bottom: 10px;
}
#quoteList .stars::before{
	content: "";
	display: block;
	height: 20px;
	width: 0px;
	background: url("img/stars.svg") no-repeat scroll 0 0 / auto 20px;
}
#quoteList .star05::before{ width:10px; }
#quoteList .star10::before{ width:20px; }
#quoteList .star15::before{ width:30px; }
#quoteList .star20::before{ width:40px; }
#quoteList .star25::before{ width:50px; }
#quoteList .star30::before{ width:60px; }
#quoteList .star35::before{ width:70px; }
#quoteList .star40::before{ width:80px; }
#quoteList .star45::before{ width:90px; }
#quoteList .star50::before{ width:100px; }

#quoteList .text p{
	display: inline;
}
#quoteList .name{
	margin-top: 1em;
	text-align: right;
	font-size: 80%;
}
#quoteList .name::before{
	content: "";
	display: inline-block;
	height: 1px;
	width: 2.5em;
	margin: 0 1em 1px 0;
	background: #fff;
	vertical-align: middle;
}





/* ------ LAURELS ------ */
#laurelsArchive{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: 1200px;
	max-width: 90%;
	margin: 0 auto;
	padding-top: 15vh;
	padding-bottom: 60px;
	opacity: 0.75;
}
#laurelsArchive img{
	display: block;
	max-width: 120px;
	max-height: 90px;
	width: auto;
	height: auto;
	padding: 10px 20px;
}

/* LAUREL GALLERY */
#laurelsArchive .gallery{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
}
#laurelsArchive .gallery-item, #laurelsArchive .gallery-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
#laurelsArchive .gallery-caption{
	display: none;
}





/* ------ AWARDS ------ */
#awards{
	width: 90%;
	margin: 0 auto;
	padding-bottom: 15vh;
}
#awardList{
	text-align: center;
}
#awardList dt{
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}
#awardList dd{
	margin: 0.25em 0 1.5em 0;
	line-height: 1.25;
}
#awardList dd .postContent{
	padding-top: 0.5em;
    font-size: 85%;
	line-height: 1.5;
}
#awardList dd .postContent p{
	margin-bottom: 0;
	text-align: center;
}



/* ------ SCREENINGS ------ */
#screenings{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: url("./img/img04.jpg") no-repeat scroll 50% 50% / cover;
}

#screenings .inner{
	padding-bottom: 15vh;
}
#currentScreenings, #upcomingScreenings{
	margin-bottom: 60px;
}
.screeningList dt{
	display: inline-block;
	position: relative;
	margin-bottom: 15px;
	padding: 0.4em 0.75em 0.5em 0.75em;
	/*
	background: rgba(255,255,255,0.85);
	border: solid 1px #fff;
	*/
	border-left: solid 0.4em #fff;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
}
/*
.screeningList dt::before, .screeningList dt::after{
	content: "";
	display: block;
	position: absolute;
}
.screeningList dt::before{
	width: 5px;
	height: 1px;
	left: 0px;
	bottom: -1px;
	background: #000;
}
.screeningList dt::after{
	width: 1px;
	height: 0.5em;
	left: -1px;
	bottom: -0.5em;
	background: #fff;
}
*/
.screeningList dd{
	line-height: 1.5;
	margin: 0.25em 0 0.5em 1.5em;
}

.screeningList dd a{
	display: inline-block;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(255,255,255,0.65);
	transition: 0.3s ease;
}
/*
.screeningList dd a::after{
	content: "";
	display: inline-block;
	width: 20px;
	height: 15px;
	margin-left: 0.75em;
	background: url("img/linkout.png") no-repeat 50% 50% / contain;
	vertical-align: baseline;
}
*/
.screeningList dd a:hover{
	text-decoration-color: rgba(255,255,255,0);
}

.screeningList dd .postContent{
	margin: 0.5em 0.5em;
    padding-left: 0.75em;
    border-left: solid 1px rgba(255,255,255,0.5);
    font-size: 85%;
}
.screeningList dd .postContent p{
	margin-bottom: 0;
}

#pastScreenings{
}






/* ------ CONTACT ------ */
#contact{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 100vh;
	background: url("./img/img05.jpg") no-repeat scroll 50% 50% / cover;
}
#contact .inner{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	height: 100%;
	margin-left: 50%;
	background: rgba(0,0,0,0.7);
}

#contact h2{
	padding: 0 0 0 1em;
}

#contact li{
	padding: 1.0em 0 0.25em 0;
}
#contact a{
	display: block;
	position: relative;
	padding: 1em 2.0em 1em 3.0em;
	background: rgba(255,255,255,0.1);
	border-radius: 50px;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: 0.3s ease;
}
#contact a:hover{
	background: rgba(255,255,255,0.25);
}
#contact a::before{
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 1.25em;
	width: 7px;
	height: 7px;
	border: solid 2px #fff;
	border-width: 2px 2px 0 0;
	vertical-align: middle;
	transform: rotate(45deg) translate(-20%,-50%);
}


/* FORMS */
#forms{
	width: 0px;
	height: 100%;
	opacity: 0;
	overflow: hidden;
	transform: translateY(10px);
	transition: opacity 0.5s ease 0s, transform 0.5s ease 0s, width 0s ease 0.5s;
}
#forms.on{
	width: 100%;
	opacity: 1;
	transform: translateY(0px);
	transition: opacity 0.5s ease 0s, transform 0.5s ease 0s, width 0s;
}

.iForm{ display: none; }
.iForm.on{ display: block; }

.iForm{
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
}

#forms h3{
	margin-bottom: 1.25em;
	font-size: 15px;
}
#forms label{
	font-size: 14px;
	font-weight: bold;
}
#forms label span{
	display: block;
	margin: 0;
}
#forms input[type="text"], #forms input[type="email"], #forms textarea{
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0.5em;
	background: rgba(255,255,255,0.25);
	border: none;
	border-radius: 5px;
	color: #fff;
	font-family: "Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", YuGothic, メイリオ, meiryo, Verdana, Helvetica, -apple-system, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}
#forms textarea{
	max-height: 25vh;
}

#forms .formBtns{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 30px;
}
#forms .cancel{
	position: relative;
	padding: 0 20px 0 27px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1px;
	opacity: 0.75;
	cursor: pointer;
	transition: 0.3s ease;
}
#forms .cancel:hover{
	opacity: 1;
}
#forms .cancel::before, #forms .cancel::after{
	content: "";
	display: block;
	position: absolute;
	top: 48%;
	left: 2px;
	width: 16px;
	height: 1px;
	background: #fff;
}
#forms .cancel::before{ transform:rotate(45deg); }
#forms .cancel::after{ transform:rotate(-45deg); }

#forms input[type="submit"]{
	padding: 7px 30px;
	background: rgba(255,255,255,0.1);
	border: solid 1px #fff;
	border-radius: 50px;
	color: #fff;
	font-family: "Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", YuGothic, メイリオ, meiryo, Verdana, Helvetica, -apple-system, sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 1px;
	transition: 0.3s ease;
}
#forms input[type="submit"]:hover{
	background: rgba(255,255,255,1);
	color: #000;
}

/* messages */
.screen-reader-response{
	display: none;
}
.wpcf7-not-valid-tip{
	position: absolute;
	top: 0.25em;
	right: 0;
	color: #d51;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
}
.wpcf7-response-output{
	display: none;
}


/* ------ INFO ------ */
#info{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 30vh;
	padding: 12vh 0 10vh 0;
}

#info .cWidth{
	width: 860px;
}

#sponsors{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
}
#sponsors img{
	height: 80px;
}




/* ------ FOOTER ------ */
#footer{
	
}

#footer .socialmediaList{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 200px;
	margin: 0 auto 40px auto;
}
#footer .socialmediaList li a{
	opacity: 0.8;
}
#footer .socialmediaList li a:hover{
	opacity: 1;
}

















@media only screen and (max-width: 960px){
	body{
		font-size: 4.0vw;
		letter-spacing: 0.075em;
	}
	
	#wrap{
		max-width: 100%;
		margin: 0 auto;
		overflow-x: hidden;
	}
	.cWidth{
		width: 85%;
	}
	.sections h2{
		max-width: 90%;
		margin: 0 auto;
	}
	
	
	/* ------ GLOBAL NAV ------ */
	#gnBurger{
		width: 16vw;
		height: 16vw;
	}
	#gnBurger span {
		width: 8vw;
		height: 2px;
	}
	#gnBurger span::before, #gnBurger span::after {
		width: 100%;
		height: 100%;
	}
	#gnBurger span::before { top: -12px; left: 0px; }
	#gnBurger span::after { bottom: -12px; left: 0px; }
	
	#GN nav > ul{
		max-width: 90%;
	}
	
	/* LANG */
	#gnLang{
		top: 15vw;
		width: 16vw;
		font-size: 2.5vw;
	}
	
	#switchLanguage {
		top: 10px;
		right: 10px;
		width: 42px;
		height: 42px;
		background: url("img/iLanguage.svg") no-repeat 50% 50% / 40px auto;
		border-radius: 21px;
	}	
	
	
	/* ------ HOME ------ */
	#home{
		margin-bottom: 25vw;
		background-position: 80% 100%;
		background-size: auto 55vh;
	}
	#home .inner{
		min-height: 50vh;
		background: #000 url("img/img01_.jpg") no-repeat scroll 50% 0 / auto 50vh;
	}
	#home::before, #home::after{
		content: "";
		display: block;
		position: absolute;
		width: 100vw;
		height: 8vw;
		z-index: 0;
	}
	#home::before{
		height: 15vw;
		top: 50vh;
		left: 0;
		background: url("img/gr02.png") no-repeat scroll 0 100% / 100% 135%;
	}
	#home::after{
		bottom: 0;
		left: 0;
		background: url("img/gr01.png") no-repeat scroll 0 0 / 100% 135%;
	}
	
	#siteTitle{
		position: absolute;
		top: 45vh;
		left: 50%;
		width: 75vw;
		max-width: 45vh;
		height: auto;
		margin: 0;
		padding: 0;
		transform: translate(-50%,-100%);
		z-index: 99;
	}
	#siteTitle img{
		display: block;
		height: auto;
		margin: 0 auto;
	}
	
	#trailer{
		top: 50%;
		left: 25vw;
		width: 45vw;
		height: auto;
		z-index: 98;
	}
	#trailer img{
		transform: scale(1.2);
	}
	
	/* TRAILER PLAYER */
	#viewTrailer .inner{
		width: 100vw;
		max-width: none;
	}
	#viewTrailer .close{
		top: -50px;
		right: 0px;
	}
	#viewTrailer .close span{
		width: 30px;
	}
	
	#phrase{
		bottom: 5%;
		right: 5%;
		width: 45%;
	}
	
	#laurels {
		flex-direction: column;
		top: 5vw;
		right: 5vw;
	}
	/*
	#laurels li{
		padding: 0 !important;
	}
	#laurels li:nth-child(n + 2){
		margin-top: 1.75vw;
	}
	*/
	#laurels .gallery {
		flex-direction: column-reverse;
	}
	#laurels .gallery-item img{
		height: auto;
		max-height: none;
		width: 14vw;
		padding: 0 0 2.5vw 0 !important;
	}
	
	
	
	/* ------ INTRO ------ */
	#intro{
		background-position: 50% 0%;
		background-size: 150% auto;
	}
	#intro::before{
		content: "";
		display: block;
		position: absolute;
		top: 25vw;
		left: 0;
		width: 100vw;
		height: 65vw;
		background: url("img/gr01.png") no-repeat scroll 0 0 / 100% auto;
		z-index: 0;
	}
	#introText {
		right: 9%;
	}
	
	
	
	/* ------ CHARACTERS ------ */
	#characters{
		min-height: 80vh;
		margin-top: 20vh;
	}
	.character .img{
		position: absolute;
		top: 0;
		left: 0;
		height: 50%;
		width: auto;
		object-fit: contain;
		transform: none;
	}
	#c01 .img{ left:-12%; }
	#c02 .img{ left:-25%; }
	#c03 .img{ left:-0%; }
	#characters .character .text{
		position: relative;
		margin: 43vh 0 0 10%;
	}
	.character .quote{
		font-size: 5.5vw;
	}
	.character .quote br.SP{
		display: block;
	}
	.character .name{
		font-size: 3.3vw;
	}
	.character .name dd{
		font-size: 3vw;
	}
	
	
	
	/* ------ REVIEWS ------ */
	#reviews{
		background-position: 39% 0%;
		background-size: 150% auto;
	}
	#quoteList{
		top: 65vw;
		bottom: auto;
		right: 4vw;
	}
	#quoteList .name{
		padding-right: 1vw;
	}
	
	
	
	
	/* ------ LAURELS ------ */
	#laurelsArchive {
		/*
		position: absolute;
		top: -30vh;
		left: 2%;
		height: 30vh;
		*/
		width: 96%;
		padding: 15vh 0 5vh 0;
	}
	#laurelsArchive img{
		max-width: 15vw;
		max-height: 12vw;
	    padding: 2vw 2vw;
	}

	
	
	/* ------ AWARDS ------ */
	#awards{
		width: 94%;
		padding-bottom: 12vh;
	}
	
	
	
	/* ------ SCREENINGS ------ */
	#screenings{
		background-image: url("img/img04_.jpg");
	}
	#screenings .inner{
		padding: 0 0 10vw 0;
	}
	.screeningList dt{
		font-size: 3.5vw;
		font-weight: bold;
	}
	.screeningList dd{
		margin-bottom: 0.75em;
	}
	/*
	.screeningList dd a{
		display: block;
		width: 100%;
		position: relative;
		left: -0.75em;
		padding: 0.5em 0.5em 0.5em 0.75em;
		border: solid 1px rgba(255,255,255,0.4);
		border-radius: 10px;
	}
	.screeningList dd a::after{
		width: 1em;
		height: 0.85em;
		background: url("img/linkout.png") no-repeat 100% 50% / contain;
		vertical-align: baseline;
	}
	*/
	

	
	
	/* ------ CONTACT ------ */
	#contact{
		height: 150vw;
		min-height: 150vw;
		align-items: flex-start;
		background: url("./img/img05.jpg") no-repeat scroll 50% 100% / 150% auto;
	}
	#contact .inner{
		width: 100%;
		height: 100%;
		margin: 0;
		background: url("./img/gr02.png") no-repeat scroll 50% 65% / 100% 55vw;
	}
	#contact h2{
		padding: 0 0 0 0.5em;
	}
	#contact a{
		font-size: 3.2vw;
	}

	
	/* ------ INFO ------ */
	#info{
		min-height: 20vh;
		padding: 12vh 0 10vh 0;
		font-size: 3.8vw;
	}

	#info .cWidth{
		width: 100vw;
	}
	#info .cWidth p{
		width: 84vw;
		margin: 0 auto;
	}

	#sponsors{
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 10vw;
	}
	#sponsors img{
		height: 15vw;
		padding: 0 4vw;
	}
	
	
	/* ------ FOOTER ------ */
	#footer{
		font-size: 12px;
	}
}

@media only screen and (max-width: 480px){
	#laurels .gallery-item img{
		height: auto;
		max-height: none;
		width: 16vw;
		padding: 0 0 4vw 0 !important;
	}
}