/*
|------------------------------------------
|  Global
|------------------------------------------
*/
.theme-wrapper {
    overflow: hidden;
    display: block;
    margin: 0 auto;
	padding: 0 70px;
}

body {
	font-style: normal;
	color: #000;
	align-items: center;
	text-align: center;
}

a {
	text-decoration: none;
	color: black;
}

a:hover {
	color: #c00000;
}

h1 {
	font-family: regulator-nova, sans-serif;
	font-size: 50px;
	margin: 70px 0 20px;
}

h2 {
	font-family: regulator-nova, sans-serif;
	font-size: 30px;
	font-weight: 600;
	margin: 50px 0 20px;
	text-transform: uppercase;
}

h3 {
	font-family: regulator-nova, sans-serif;
	font-weight: 500;
	font-size: 23px;
	margin-bottom: 15px;
}


p {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 19px;
	line-height: 1.6;
}

.sub-title {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;
	margin-bottom: 80px;
	text-align: center;
}

.is-flex {
    display: flex;
    justify-content: center;
}

.is-half {
	flex-basis: 50%;
}

.is-left {
	text-align: left;
	justify-content: left;
}

footer {
	margin: 50px 0;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 13px;
}

footer img {
	max-width: 25px;
	margin-left: 10px;
	height: auto;
}

footer p {
	align-self: center;
	margin-left: 10px;
}

img {
	height: 100%;
	width: auto;
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/*
|------------------------------------------
|  Header & Navigation
|------------------------------------------
*/
.nav {
	padding: 0 90px;
    margin: 50px 0;
	justify-content: space-between;
}

.nav a {
	align-self: center;
	font-family: regulator-nova, sans-serif;
	font-weight: 600;
	font-size: 20px;
	padding: 0 5px;
}

.nav img {
	width: 65px;
	box-shadow: none;
}

.nav-bottom {
	text-align: left;
	margin: 100px 0 0 100px;
	font-family: regulator-nova, sans-serif;
	font-size: 20px;
}

.typewriter p {
	font-family: regulator-nova, sans-serif;
	font-size: 20px;
}

.typewriter p span {
	font-family: regulator-nova, sans-serif;
	font-weight: 600;
	font-size: 40px;
    color: #000;
    text-transform: uppercase;
    padding: 0 3px;
    border-right: solid #000 1px; 
    animation: cursor 1s ease-in-out infinite;
}

@keyframes cursor {
    from { border-color: #000; }
    to { border-color: transparent; }
}

/*
|------------------------------------------
|  Grid
|------------------------------------------
*/

.container-fluid .row {
	margin: 100px 0;
}

.container-fluid .row h2 {
	font-size: 23px;
	margin-top: 35px;
}

.container-fluid .row h3 {
	font-size: 20px;
	margin: 8px 0 70px;
}

.container-fluid img {
	width: 20vw;
	height: auto;
}

/*
|------------------------------------------
|  Hover
|------------------------------------------
*/
.container-fluid .hover img {
	filter: grayscale(100%);
	transition: .3s ease-in-out;
}
.container-fluid .hover:hover img {
	filter: grayscale(0);
}

/*
|------------------------------------------
|  About
|------------------------------------------
*/
.about {
	flex-direction: row-reverse;
	justify-content: center;
	margin: 70px 0 200px;
	padding: 0 100px;
}

.about h2 {
	margin-top: 0;
}

.about img {
	max-width: 45vw;
	height: auto !important;
}

.about_text {
	text-align: left;
	margin-left: 40px;
}

.about_text .text {
	/*text-align: center;*/
	margin: 20px 0;
}

/*
|------------------------------------------
|  Project 1
|------------------------------------------
*/
.project-1 img {
	max-width: 70vw;
	margin-bottom: 100px;
}

.content {
	text-align: left;
	padding: 0 60px;
}

.content .process-1 img {
	width: 70vw;
	margin-left: 100px;
	margin-bottom: 30px;
}

.content .process-1 .overview {
	border-left: 1.7px solid #c00000;
	padding-left: 30px;
	margin: 0 50px 100px 0;
}

.content .process-2 .video video {
	max-width: 55vw;
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.content .process-2 .video-detail {
	border-left: 1.7px solid #c00000;
	padding-left: 30px;
	margin-top: 30px;
}

.content .process-3 {
	text-align: center;
	margin-top: 100px;
}

.content .process-3 h2 {
	text-align: left;
	margin: 30px 0 30px;
	border-left: 1.7px solid #c00000;
	padding-left: 30px;
}

.content .process-3 img {
	width: 40vw;
	height: auto;
}

.content .process-3 .detail {
	justify-content: left;
	margin-bottom: 2vh;
	align-items: center;
}

.content .process-3 .detail p {
	padding-left: 40px;
	text-align: left;
}

/*
|------------------------------------------
|  Project 2 - animation section
|------------------------------------------
*/

.animation {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #A70000;
}

svg {
    width: 550px;
}

.man_and_woman {
    stroke: #000038;
    stroke-width: 2px;
    fill: none;
    stroke-dasharray: 3200;
    stroke-dashoffset: 3200;
    animation: animate 3s linear infinite;
}

.hair {
    stroke: #000038;
    stroke-width: 2px;
    fill: none;
    stroke-dasharray: 3200;
    stroke-dashoffset: 3200;
    animation: animate 3s linear infinite;
    animation-delay: 1s;
}

.lips {
    stroke: #fff;
    stroke-width: 2px;
    fill: none;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: animate2 3s linear infinite;
    animation-delay: 2s;
}

@keyframes animate {
    from {
        stroke-dashoffset: 3200;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes animate2 {
    from {
        stroke-dashoffset: 600;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/*
|------------------------------------------
|  Project 2
|------------------------------------------
*/
.text {
	text-align: left;
}

.project-2 .overview {
	justify-content: left;
	margin: 35px 15px 50px 0;
	border-left: 1.7px solid #c00000;
	/*padding-left: 30px;*/
}

.project-2 .overview h2 {
	flex-basis: 20%;
	padding-left: 30px;
	margin: auto;
}

.project-2 .overview p {
	margin-left: 35px;
	text-align: left;
	align-self: center;
}

.project-2 .everglow-logo {
	margin: 150px 0;
}

.project-2 .everglow-logo h2 {
	font-size: 35px;
	text-align: left;
	margin: 60px 0 50px;
	border-left: 1.7px solid #c00000;
	padding-left: 30px;
}

.everglow-logo img {
	max-width: 25vw;
	padding: 15px;
}

.everglow-logo .text {
/*	text-align: left;*/
	margin-left: 40px;
	align-self: center;
}

.everglow-logo .logo-2 {
	margin: 40px 20px 40px 0;
	flex-direction: row-reverse;
}

.everglow-logo .logo-2 .text {
	text-align: right;
	margin-left: 0;
	margin-right: 60px;
}

.everglow-logo .logo-3 {
	margin: 50px 0;
}

.project-2 .everglow-stationary h2 {
	font-size: 35px;
	text-align: left;
	margin: 60px 0 20px;
	border-left: 1.7px solid #c00000;
	padding-left: 30px;
}

.everglow-stationary .moodboard img {
	max-height: 90vh;
	margin-top: 50px;
}

.everglow-stationary .text {
	text-align: center;
	margin: 30px 150px 150px;
}

.everglow-stationary .thumbs img {
	max-width: 25vw;
	margin: 0 15px 30px;
}

.everglow-stationary .bc img {
	max-width: 70vw;
	margin: 0 20px 30px;
}

.everglow-stationary .ev img {
	max-width: 70vw;
	margin: 0 20px 30px;
}

.everglow-stationary .lh img {
	max-height: 90vh;
	margin: 0 20px 30px;
}

.project-2 .everglow-poster h2 {
	font-size: 35px;
	text-align: left;
	margin: 60px 0 50px;
	border-left: 1.7px solid #c00000;
	padding-left: 30px;
}

.everglow-poster img {
	max-height: 90vh;
	margin: 0 10px 30px;
}

.everglow-poster .text {
	text-align: center;
	margin: 30px 150px 100px;
}

.poster-ar {
	margin-bottom: 100px;
}

.poster-ar video {
	max-width: 25vw;
	margin-left: 90px;
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.40);
}

.poster-ar .ar-text {
	width: 40vw;
	text-align: left;
	margin: 0 25px 0;
	align-self: center;
}

.ar-process .texture {
	max-width: 4.5vw;
	height: auto;
}

.ar-process .uv-ps {
	max-width: 50vw;
}

.ar-process .ar-screen img {
	max-height: 52vh;
}

/*
|------------------------------------------
|  Project 3
|------------------------------------------
*/
.main-banner {
	max-width: 90vw;
}

.project-3 .overview-p3 {
	margin: 35px 15px 50px 10px;
	border-left: 1.7px solid #c00000;
	/*padding-left: 30px;*/
}

.project-3 .overview-p3 h2 {
	text-align: left;
	padding-left: 30px;
}

.project-3 .overview-p3 p {
	margin-left: 35px;
	text-align: left;
}

.thumb-section .text {
	margin: 0 60px;
	text-align: center;
}

.thumbs-p3 {
	margin-top: 50px;
}

.thumb-section h2 {
	font-size: 35px;
	text-align: left;
	margin: 60px 60px 20px;
	border-left: 1.7px solid #c00000;
	padding-left: 30px;
}

.final_look {
	margin: 30px 60px;
}

.final_look h2 {
	font-size: 35px;
	text-align: left;
	margin: 80px 0 35px;
	border-left: 1.7px solid #c00000;
	padding-left: 30px;
}

.thumbs-p3 img {
	max-width: 20vw;
	width: 20vw;
	margin: 0 15px 30px;
}

.magazine img {
	max-width: 35vw;
}

.website img {
	max-width: 30vw;
}

.banner img {
	max-width: 20vw;
}

.final_look .text {
	text-align: left;
	margin-left: 40px;
	align-self: center;
}

/*
|------------------------------------------
|  Project 4
|------------------------------------------
*/

.process-1-p4 h2 {
	font-size: 35px;
	text-align: left;
	/* margin: 80px 30px 20px; */
	border-left: 1.7px solid #c00000;
	padding-left: 30px;
}

.project-4 .text {
	margin: 30px 60px 80px;
	text-align: center;
}

.bnr img {
	width: 95%;
}

.bnr .overview {
	width: 95%;
	/* margin: 35px 0 50px 35px; */
	border-left: 1.7px solid #c00000;
	padding-left: 30px;
	text-align: left;
}

.box-design {
	margin: 50px;
}

.box-design .line {
	max-height: 30vw;
	margin-right: 10px;
}

.box-design .texture-p4 {
	max-height: 30vw;
	margin-left: 10px;
}

.box-look img {
	max-width: 35%;
	margin: 0 15px 30px;
}

.box-build img {
	max-height: 50vh;
	margin: 0 15px 30px;
}

.final_p4 h2 {
	font-size: 35px;
	text-align: left;
	margin: 80px 30px 20px;
	border-left: 1.7px solid #c00000;
	padding-left: 30px;
}

.final_p4 img {
	max-width: 75vw;
	margin: 30px 0;
}

/*
|------------------------------------------
|  Project 5
|------------------------------------------
*/
.thumb-section h2 {
	margin-bottom: 30px;
}

.thumb-section .dl-thumbs-p3 img {
	max-width: 25vw;
	height: auto;
	margin-left: 20px;
	margin-bottom: 35px;
}

.dl-banner {
	max-width: 65vw;
}

.dl-styletile img {
	max-width: 60vw;
	margin-bottom: 40px;
}

.final_look .dl-app-text {
	text-align: center;
	margin-bottom: 100px;
}

.dl-app img {
	height: 60vh;
	margin: 0 0 60px 40px;
}

/*
|------------------------------------------
|  Project 6
|------------------------------------------
*/
.ne-sign img {
	width: 45vw;
	margin-left: 25px;
}

.ne-cup img {
	max-width: 80vw;
}

.ne-menu {
	margin-bottom: 200px;
}

.ne-coupon {
	margin-bottom: 150px;
}

/*
|------------------------------------------
|  Project 7
|------------------------------------------
*/

.ice-moodboard img {
	height: 70vh;
	margin-bottom: 50px;
}

.ice-before {
	display: flex;
	justify-content: center;
    align-items: flex-start;
	
}

.ice-before img {
	max-width: 40vw;
	max-height: 100%;
}

.ice-banner {
	max-width: 80vw;
}

.ice-text {
	text-align: left;
	margin: 45px;
}
/*
|------------------------------------------
|  Project 8
|------------------------------------------
*/
.project8-video video {
	max-width: 80vw;
	margin-bottom: 25px;
}

.TC-text p {
	margin-top: 15px;
}

.everglow-logo .logo-1 .TC-gif {
	padding: 0;
	max-width: 45vw;
}

.process-1-p4 .text{
	text-align: center;
}

.TC-modelling h2 {
	margin-top: 100px;
}

.TC-modelling p {
	margin-bottom: -50px;
}

#TC-h2 {
	font-family: regulator-nova, sans-serif;
	font-weight: 500;
	font-size: 23px;
	margin: -80px 0 -25px;
}

.TC-left p {
	text-align: left;
	padding: 0 30px;
	margin-top: -25px;
}

/*
|------------------------------------------
|  Fix
|------------------------------------------
*/
.lg-img {
	height: 100% !important;
	max-width: 80vw;
	max-height: 100%;
}

.padding-clr {
	padding: 0 !important;
}

.inline-link {
	color: #c00000;
}

.inline-link:hover {
	font-weight: 700;
}

@media (max-width: 968px) {
	.lg-img {
		height: 100% !important;
		max-width: 80vw;
		max-height: 100%;
	}

	.everglow-text-res {
		display: flex;
		flex-direction: column-reverse;
	}

	.uv-ps {
		height: 100% !important;
		max-height: 100%;
		max-width: 80vw;
	}

	.ar-screen {
		flex-direction: column;
	}

	.ar-screen img {
		height: 100% !important;
		max-height: 100% !important;
		max-width: 80vw;
	}

	.dl-mockups {
		max-width: 90vw;
		overflow: hidden;
	}

	.dl-mockups img {
		height: 50% !important;
		max-height: 100% !important;
		max-width: 20vw;
	}

	.poster-ar {
		flex-direction: column;
	}

	.poster-ar video {
		height: 80vh;
		max-width: 100% !important;
		margin: 0 auto;
		margin-bottom: 45px;
	}

	.about {
		flex-direction: column-reverse;
		gap: 50px;
	}

	.about img {
		max-width: 75vw;
	}

	.about_text {
		margin-left: 0;
	}
}

@media (max-width: 620px) {
	
	.lg-img {
		height: 100% !important;
		max-width: 80vw;
		max-height: 100%;
	}

	.box-design,.box-look,.box-build {
		flex-direction: column;
		gap: 30px;
	}

	.box-design img, .box-look img, .box-build img {
		margin: 0 auto;
		max-width: 100% !important;
	}

	.dl-mockups {
		max-width: 90vw;
		flex-direction: column;
		gap: 30px;
		margin-bottom: 50px;
	}

	.dl-mockups img {
		margin: 0 auto;
		max-width: 50% !important;
	}
}