.page .page-section-gradient {
	background-color: #000000;
	background-image: url("../images/broken-noise.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}


#intro-section{
	position: relative;
}

.text-intro h1,.text-intro h2{
	font-family: 'Chonburi', cursive;
}
.text-intro {position: relative;display: inline-block;}

.text-intro h1{font-size: 165px;line-height: 165px;letter-spacing: 15px;margin-bottom: 0px;color: #F13838;}
.text-intro h1 span{position: absolute;right: -55px;top: 70px;color: #ffffff;display: inline-block;font-size: 30px;line-height: 34px;letter-spacing: 5px;transform: rotate(270deg);}
.text-intro h2 {
	color: #ffffff;
	font-size: 19px;
	line-height: 24px;
}

.text-intro h3 {font-size: 18px;line-height: 24px;color: #999999;}

#intro-section .footintro h3{font-size: 18px;letter-spacing: 3px;color: #ffffff;}
#intro-section .footintro p{font-size: 18px;color: #ffffff;}
#intro-section .footintro p span{color: #f13838;}


.item-banner img{
	filter: grayscale(100%);
	width: inherit;
}



@media (max-width: 992px) {

}



@media (min-width: 992px) {
	.text-intro h1{font-size: 290px;line-height: 214px;letter-spacing: 15px;margin-bottom: 30px;margin-right: 60px;color: #F13838;}
	.text-intro h1 span{position: absolute;right: -70px;top: 80px;color: #ffffff;display: inline-block;font-size: 50px;line-height: 54px;letter-spacing: 5px;transform: rotate(270deg);}
	.text-intro h2 {color: #ffffff;font-size: 30px;line-height: 34px;}
	.text-intro h3 {font-size: 18px;line-height: 24px;color: #999999;}
	#intro-section .footintro{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}	

	#intro-section .slideintro{position: absolute;left: 0;right: 0;bottom: 0vh;/* z-index: -1; */}
	

/*	 #intro-section .shell:before {
        content: '';
        width: 638px; 
        height: 661px;  
        background-image: url(../images/dodecahedron.svg);
        opacity: 0.05;
        background-size: cover;  
        position: absolute;  
        left: -138px;
        top: 50px;
        -webkit-animation: rotate 15s normal linear infinite;
        animation: rotate 15s normal linear infinite;
    }
*/


}


@media (min-width: 1200px){
	#intro-section .slideintro{bottom: -150px;}
}




/*

.post-portfolio-title {
	font-weight: 300;
	letter-spacing: -0.05em;
	line-height: 0.73;
	text-transform: uppercase;
	font-family: Teko, Monaco, Consolas, "Courier New", monospace;
	font-size: 72px;
}

@media (min-width: 768px) {
	.post-portfolio-title {
		font-size: 90px;
	}
}

@media (min-width: 992px) {
	.post-portfolio-title {
		font-size: 144px;
	}
}

.post-portfolio-title span {
	transition: 0s ease 0s;
}

@media (min-width: 992px) {
	.post-portfolio-title span {
		display: inline-block;
	}
}

@media (min-width: 1200px) {
	.post-portfolio-title span {
		transform: translate3d(-100%, 0, 0);
		opacity: 0;
	}
}

.post-portfolio-btn {
	transition: 0s ease 0s;
	margin-top: 20px;
}

@media (min-width: 1200px) {
	.post-portfolio-btn {
		transform: translateY(100%);
		opacity: 0;
	}
}

@media (min-height: 800px) and (min-width: 1200px) {
	.post-portfolio-btn {
		margin-top: 17vh;
	}
}

.post-portfolio-text {
	position: relative;
}

.post-portfolio-text > * {
	overflow: hidden;
}

.post-portfolio-text > * > span {
	display: inline-block;
	transition: 0s ease 0s;
}

@media (min-width: 1200px) {
	.post-portfolio-text > * > span {
		transform: translateX(-100%);
	}
}

.post-portfolio-text:after {
	position: absolute;
	left: -20px;
	top: -10px;
	bottom: -4px;
	width: 1px;
	background-color: rgba(255, 255, 255, 0.2);
	transition: 0s ease 0s;
}

@media (min-width: 1200px) {
	.post-portfolio-text:after {
		top: calc(100% + 4px);
	}
}

@media (min-width: 992px) {
	.post-portfolio-text:after {
		content: '';
	}
}

@media (min-width: 1600px) {
	.post-portfolio-text:after {
		left: -70px;
	}
}



.fp-section.fp-completely .post-portfolio-title {
	overflow: hidden;
}

.fp-section.fp-completely .post-portfolio-title span {
	transition: .6s ease-in-out;
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.fp-section.fp-completely .post-portfolio-title span:nth-child(1) {
	transition-delay: .2s;
}

.fp-section.fp-completely .post-portfolio-title span:nth-child(2) {
	transition-delay: .15s;
}

.fp-section.fp-completely .post-portfolio-title span:nth-child(3) {
	transition-delay: .1s;
}

.fp-section.fp-completely .post-portfolio-btn {
	transition: .55s ease-in-out 0.3s;
	opacity: 1;
	transform: translateY(0);
}

.fp-section.fp-completely .post-portfolio-text:after {
	top: -4px;
	transition: 0.4s cubic-bezier(0.8, 0.12, 0.34, 1.02) 0.2s;
}

.fp-section.fp-completely .post-portfolio-text > * > span {
	transform: translateX(0);
	transition: 0.75s cubic-bezier(0.8, 0.12, 0.34, 1.02) 0.05s;
}
*/





@keyframes rotate {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }

    25% {
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
    }

    50% {
        -webkit-transform: rotate3d(0, 0, 1, 180deg);
        transform: rotate3d(0, 0, 1, 180deg);
    }

    75% {
        -webkit-transform: rotate3d(0, 0, 1, 270deg);
        transform: rotate3d(0, 0, 1, 270deg);
    }

    100% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
    }
}


@keyframes rotate01 {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
    }

    25% {
        -webkit-transform: rotate3d(0, 0, 1, 270deg);
        transform: rotate3d(0, 0, 1, 270deg);
    }

    50% {
        -webkit-transform: rotate3d(0, 0, 1, 180deg);
        transform: rotate3d(0, 0, 1, 180deg);
    }

    75% {
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
    }

    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}


@keyframes opacity {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.25;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}