@keyframes movie-bg-1 {
	  0% { background-color: #000000; }
	 20% { background-color: #000000; }
	 40% { background-color: #000000; }
	 60% { background-color: #000000; }
	 80% { background-color: #000000; }
	100% { background-color: #ffffff; }
}

@keyframes movie-bg-2 {
	  0% { background-color: #000000; }
	 20% { background-color: #000000; }
	 40% { background-color: #000000; }
	 60% { background-color: #000000; }
	 80% { background-color: #000000; }
	100% { background-color: #ffffff; }
}

@keyframes movie-bg-3 {
	from { background-color: #000000; }
	to   { background-color: #000000; }
}

@keyframes movie-img-1 {
	  0% { transform: translateY(-25%); opacity : 0.8; }
	 20% { transform: translateY(-20%); opacity : 0.8; }
	 40% { transform: translateY(-15%); opacity : 0.8; }
	 60% { transform: translateY(-10%); opacity : 0.8; }
	 80% { transform: translateY(-5%);  opacity : 0.8; }
	100% { transform: translateY(0%);   opacity : 0;   }
}

@keyframes movie-img-2 {
	  0% { transform: translateY(-30%); opacity : 0.8; }
	 20% { transform: translateY(-25%); opacity : 0.8; }
	 40% { transform: translateY(-20%); opacity : 0.8; }
	 60% { transform: translateY(-15%); opacity : 0.8; }
	 80% { transform: translateY(-10%); opacity : 0.8; }
	100% { transform: translateY(-5%);  opacity : 0;   }
}

@keyframes movie-img-3 {
	  0% { transform: translateY(-45%); opacity : 0.8; }
	 20% { transform: translateY(-40%); opacity : 0.8; }
	 40% { transform: translateY(-35%); opacity : 0.8; }
	 60% { transform: translateY(-30%); opacity : 0.8; }
	 80% { transform: translateY(-25%); opacity : 0.8; }
	100% { transform: translateY(-20%); opacity : 0.8; }
}

@keyframes movie-img-4 {
	from { transform: translateY(-20%); opacity : 0.8; }
	to   { transform: translateY(-20%); opacity : 0.8; }
}

@keyframes movie-message-1 {
	  0% { opacity : 0; }
	 20% { opacity : 1; }
	 40% { opacity : 1; }
	 60% { opacity : 1; }
	 80% { opacity : 1; }
	100% { opacity : 1; }
}

@keyframes movie-message-2 {
	  0% { opacity : 0; }
	 20% { opacity : 1; }
	 40% { opacity : 1; }
	 60% { opacity : 1; }
	 80% { opacity : 1; }
	100% { opacity : 1; }
}

@keyframes movie-message-3 {
	  0% { opacity : 0; }
	 20% { opacity : 1; }
	 40% { opacity : 1; }
	 60% { opacity : 1; }
	 80% { opacity : 1; }
	100% { opacity : 1; }
}

@keyframes movie-logo-1 {
	from { opacity : 0; }
	to   { opacity : 1; }
}

@keyframes movie-logo-2 {
	from { opacity : 1; }
	to   { opacity : 1; }
}

@keyframes movie-logo-3 {
	from { opacity : 0; }
	to   { opacity : 1; }
}

@keyframes movie-logo-4 {
	from { opacity : 1; }
	to   { opacity : 1; }
}



.container-fluid {
	padding: 0;
}

h2 {
	margin: 0;
	font-size: 3rem;
	font-family: "Century Gothic",-apple-system,BlinkMacSystemFont,Arial,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",sans-serif;
	text-align: center;
	padding-top: 40px;
}

h3 {
	padding-top: 20px;
	text-align: center;
	font-size: 1.5rem;
}


@media screen and (max-width: 400px) {
	.navbar-brand {
		width: 50%;
	}
	.navbar-brand img {
		width: 100%;
	}
}

.nav-bg {
	background-color: #ffffff;
}

.nav-link .main {
	font-size: 1.3rem;
}

@media screen and (max-width: 991px) {
	.nav-link {
		padding: 0;
	}
	.nav-link .main {
		text-align: right;
	}
	.nav-link .sub {
		text-align: left;
		padding-top: 4px;
	}
}

@media screen and (min-width: 992px) {
	.nav-link .main {
		text-align: center;
	}
	.nav-link .sub {
		text-align: center;
	}
}

.movie {
	position: relative;
	padding: 0;
	top: -30vw;
}

.movie-bg {
	z-index: -1;
	position: absolute;
	padding: 0;
	top: 30vw;
}

.movie-bg img {
	width: 100%;
	opacity: 0;
}

.movie-bg-1 img {
	transform: translateY(-25%);
}

.movie-bg-2 img {
	transform: translateY(-30%);
}

.movie-bg-3 img {
	transform: translateY(-40%);
}

.movie-bg-4 img {
	transform: translateY(-20%);
}

.movie-message {
	z-index: 0;
	position: absolute;
	padding: 0;
	width: 100%;
	text-align: center;
	letter-spacing: 1.5vw;
	color: #ffffff;
	opacity: 0;
}

@media screen and (min-width: 801px) {
	.movie-message {
		font-size: 2vw;
		top: 42vw;
	}
}
@media screen and (min-width:601px) and ( max-width:800px) {
	.movie-message {
		font-size: 2.5vw;
		top: 41vw;
	}
}
@media screen and (min-width:401px) and ( max-width:600px) {
	.movie-message {
		font-size: 3.5vw;
		top: 40vw;
	}
}
@media screen and ( max-width:400px) {
	.movie-message {
		font-size: 4vw;
		top: 39vw;
	}
}

.movie-logo-1 {
	z-index: 0;
	position: absolute;
	padding: 0;
	width: 100%;
	text-align: center;
	top: 37vw;
	opacity: 0;
}
.movie-logo-1 img {
	width: 30vw;
}

.movie-logo-2 {
	z-index: 0;
	position: absolute;
	padding: 0;
	width: 100%;
	text-align: center;
	top: 37vw;
	opacity: 0;
}
.movie-logo-2 img {
	width: 30vw;
}

.movie-logo-3 {
	z-index: 0;
	position: absolute;
	padding: 0;
	width: 100%;
	text-align: center;
	top: 37vw;
	opacity: 0;
}
.movie-logo-3 img {
	width: 30vw;
}

.movie-logo-4 {
	z-index: 0;
	position: absolute;
	padding: 0;
	width: 100%;
	text-align: center;
	top: 37vw;
	opacity: 0;
}
.movie-logo-4 img {
	width: 30vw;
}

.main-contents {
	position: relative;
	top: 30vw;
	padding-bottom: 40px;
}

.services {
	background-color: #ffffff;
	text-align: center;
}

.services h2 {
	color: #f1972d;
}

.services img {
	border: 1px solid;
	margin-bottom: 10px;
}

.services .gallery {
	margin: 10px 0 20px 0;
}

.information {
	background-color: #f1972d;
	color: #ffffff;
}

.information .detail {
	border-bottom: 1px dotted;
	margin: auto;
	padding: 15px;
}

.contact {
	background-color: #dddddd;
}

.contact h2 {
	color: #f1972d;
}

.contact .info {
	margin: 20px auto 0;
}

.contact .row {
	padding: 5px 0 5px 0;
}

.contact .header {
	padding-right: 0;
}

.contact textarea {
	min-height: 200px;
}

.contact .sumbit-btn {
	padding: 20px;
	text-align: center;
}

.contact .btn {
	padding: 10px 50px 10px 50px;
	background-color: #f1972d;
	color: #ffffff;
}

.company {
	background-color: #f1972d;
	color: #ffffff;
}

.company .info {
	margin: auto;
}

.company .header {
	border-bottom: 1px dotted;
	padding: 15px 0 15px 15px;
}

.company .detail {
	border-bottom: 1px dotted;
	padding: 15px;
}

footer {
	position: relative;
	top: 30vw;
	text-align: center;
	padding: 20px;
}

@media screen and (min-width: 992px) {
	footer .footer-menu {
		padding-top: 18px;
	}
}

footer .footer-menu a {
	color: #666666;
	font-size: 1.2rem;
}

footer .footer-logo img {
	max-width: 80%;
}

footer .row {
	margin-bottom: 10px;
}