@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500&family=Barlow+Semi+Condensed:wght@400;500&family=Barlow:wght@300&display=swap');

*{
	padding:0;
	margin:0;
	font-family:'Barlow';
	scroll-behavior: smooth;
	scroll-margin-top:130px;
}

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

section{
	width:100%;
}

section#hero{
	height:calc(100% - 64px - 24px);
}

section#hero #main-menu{
	position: fixed;width:100%;z-index: 998;height:95px;
}

section.scroll{
	background: #42433E;color:#fff;
}

section.scroll p{
	font-size:24px;
}

section.scroll img{
	width:100%;margin-bottom:20px;
}

section.scroll .title{
	font-size:20px;font-weight:bold;text-align:left;margin-bottom:5px;
}

section.scroll .description{
	font-size:16px;text-align:left;
}

section#nav-menu{
	background: #282923;position:sticky;top:95px;color:#fff;font-weight:bold;z-index:999;
}

section#nav-menu .container{
	padding:0 32px;
}

section.nav{
	background:#fff;/*position: sticky;top:0;z-index:999;*/
}

.number{
	float:left;background:#000;color:#fff;font-size:18px;padding:5px;width:24px;height:24px;text-align:center;border-radius:24px;margin-right:10px;font-weight:bold;
}

section.nav p.title, section#hero p.title{
	font-size:24px;font-weight: bold;float:left;
}

section .tag{
	background:red;padding:10px 20px;border-radius:10px;display:inline-block;font-weight:bold;color:#fff;float:left;margin-right:10px;
}

section .tag:last-of-type{
	margin-right:0;
}

section.content{
	background:#ddd;color:#fff;
}


/*---EMPATHY---*/

section.nav#empathy-nav .number, section.content#empathy-content, section#process-content .empathy, #menu-options .option.empathy{
	background: #E74C3C;
}

section.nav#empathy-nav p.title, #nav-menu #empathy, section#process-content .empathy .number{
	color:#E74C3C;
}

/*---DEFINE---*/

section.nav#define-nav .number, section.content#define-content, section#process-content .define, #menu-options .option.define{
	background: #F1C40F;
}

section.nav#define-nav p.title, #nav-menu #define, section#process-content .define .number{
	color:#F1C40F;
}

/*---IDEATE---*/

section.nav#ideate-nav .number, section.content#ideate-content, section#process-content .ideate, #menu-options .option.ideate{
	background: #1ABC9C;
}

section.nav#ideate-nav p.title, #nav-menu #ideate, section#process-content .ideate .number{
	color:#1ABC9C;
}

/*---PROTOTYPE---*/

section.nav#prototype-nav .number, section.content#prototype-content, section#process-content .prototype, #menu-options .option.prototype{
	background: #3799DB;
}

section.nav#prototype-nav p.title, #nav-menu #prototype, section#process-content .prototype .number{
	color:#3799DB;
}

/*---TESTING---*/

section.nav#testing-nav .number, section.content#testing-content, section#process-content .testing, #menu-options .option.testing{
	background: #9B59B6;
}

section.nav#testing-nav p.title, #nav-menu #testing, section#process-content .testing .number{
	color:#9B59B6;
}


.container{
	max-width:1440px;
	padding:32px;
	margin:0 auto;
}

.container::after, .tag-group::after, .process-step::after, #menu-options .option, .nav .rhs::after, #main-menu .rhs::after, #main-menu ul::after, .col::after, .content-group::after{
	content: "";
	clear: both;
	display:table;
}

.col{
	margin-right:20px;
	float:left;
}


.col.center{
	text-align:center;
}

.col.rhs{
	float:right;
	text-align:right;
}

.col:last-of-type, #nav-menu a:last-of-type .col{
	margin-right:0;
}

#nav-menu a .col{
    margin-right:20px;
}

.content-nav{
	position:sticky;top:150px;
}

.content-nav .option{
	background:rgba(0,0,0,0.3);color:rgba(255,255,255,0.3);width:calc(100% - 40px);padding:20px;margin-bottom:2px;cursor:pointer;
}

.content-nav .option.sub{
	background:rgba(0,0,0,0.15);color:rgba(255,255,255,0.15);
}

.content-nav .option:first-of-type{
	border-top-left-radius:20px;
	border-top-right-radius:20px;
}

.content-nav .option:last-of-type{
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
}

.cta{
	padding:10px 20px;background:blue;color:#fff;font-size:16px !important;text-align:left !important;display:inline-block;font-weight:bold;margin-top:20px;
}

section#process-content .number{
	background:#fff;
}

section#process-content .title{
	font-size:24px;color:#fff;font-weight:bold;
}

section#process-content .process-step{
	padding:20px;
}

section#process-content .process-detail{
	padding:20px;background:#fff;
}

section#process-content .process-detail ul li{
	margin-left:20px;color:#000;margin-bottom:10px;
}

#process-content .process-detail ul li:last-of-type{
    margin-bottom:0;
}

section.content h2{
	font-size:32px;
	margin-bottom:16px;
}

section.content p{
	font-size:18px;
	margin:16px 0;
}

section.content img{
    margin-top:20px;width:100%;
}

section.content p:last-of-type{
	margin-bottom:0;
}


#menu-options{
	position:fixed;top:50%;transform:translateY(-50%);right:60px;width:calc(50vw - 60px);font-size:2.5vh;
}

#menu-options .option{
	width:calc(100% - 40px);padding:20px;font-weight: bold;color:#fff;margin-bottom:10px;
}

#menu-options a:last-of-type .option{
	margin-bottom:0;
}

#menu-options .option img, #menu-options .option p{
	float:left;
}

#menu-options .option img{
	float:right;
	height:3vh;
}

.nav .rhs img, #main-menu .rhs img{
	float:right;
}

.nav .rhs p, #main-menu .rhs p{
	float:right;
	padding-top:5px;
	padding-right:5px;
	font-size:1vh;
}

.mobile-menu-container, .mobile-main-menu-container{
	cursor: pointer;
	display:none;
}

#mobile-menu, #main-mobile-menu{
	display:none; position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:999;
}

.desktop-menu-container{
	display:block;
}

#main-menu ul{
	list-style: none;
}

#main-menu ul a li{
	float:right;padding-top:5px;margin-left:5%;
}

#main-menu ul a:last-of-type li{
	margin-left:0;
}

.divider{
	border-top:1px dotted #fff;opacity:0.5;margin:30px 0 10px 0;
}

#hero-banner{
    padding-top:95px;
}

#hero-banner .container{
    height:calc(100% - 95px - 64px);
}

#hero-banner .container .title{
    position:relative;top:50%;transform:translateY(-50%);
}

.company{
    font-size:32px;margin-bottom:16px;
}

#hero-banner .container .title h1{
    font-size:96px;font-weight:bold;margin-bottom:32px;
}

section.content .rhs .item{
    margin-bottom:15px;text-align:left;
}

section.content .rhs .item:last-of-type{
    margin-bottom:0;
}

#overview-content .title{
    padding:15px;background:#fff;color:#000;font-weight:bold;
}

#overview-content .description{
    padding:15px;background:#000;color:#fff;
}

section.content .rhs .description p{
    margin-top:0;
}

section.content .rhs .item table{
    margin-top:10px;
    width:100%;
}

section.content .rhs .item table td{
    padding:0 5px 5px  0;
    color:#fff;
}

section.content .rhs .item table td:first-of-type{
    width:30px;
}

section.content .rhs .item table tr:last-of-type td{
    padding-bottom:0px;
}

section.content .rhs .item table td img{
    height:30px;
}

#process-content .process-detail p{
    font-weight:bold;color:#000;font-size:14px;margin:15px 0;
}

#process-content .process-detail p:first-of-type{
    margin-top:0;
}

.content-group{
    margin-top:20px;
}

.content-group p.heading{
    margin-top:0;
}


.feature{
    margin:16px 0;
}

.feature .heading{
    padding:15px;background:#fff;font-weight:bold;color:#000;
}

.feature .heading p{
    margin:0;
}

.feature .data{
    padding:15px;background:rgba(0,0,0,0.6);color:#fff;
}

#overview-content img{
    margin-top:0;
}

.content-group{
    display:flex;
}

.content-group .item{
    background:black;
}

.content-group .item .data{
    padding:20px;
}

.content-group .item .data.title{
    background:#fff;
    color:#000;
    font-weight:bold;
    font-size:18px;
}

.content-group .item .data p.heading{
    font-weight:bold;
}

#review-content .content-group{
    margin-top:0;
}

#define-content .content-group p.heading{
    color:#F5D657;
}

.content-group .data p:first-of-type{
    margin-top:0;
}

section#process-content .title{
    font-size:16px;
    padding-top:5px;
}

.item-list-emphasis{
    color:#000;padding:15px;width:calc(100% - 30px);margin:10px 0;background:#fff;
}

.item-list-emphasis:last-of-type{
    margin-bottom:0;
}

ol li{
    margin-left:20px;
}

#define-content h2, #define-content p{
    color:#000;
}

.data ul{
    margin-left:20px;
}

.data ul li{
    margin:10px 0;
}

.data ul li:last-of-type{
    margin-bottom:0;
}

.content-group.img-no-margin img{
    margin:0;
}
				    

section.scroll.more .thumbnail{
    text-align:center;margin-bottom:20px;width:100%;padding:20px 0;max-height:220px;
}

section.scroll.more .thumbnail img{
    max-height:200px;width:auto;margin:0;
}

section.scroll.more .title{
    color:gold;
}

#review-content ul li{
    font-size:18px;
}

#review-content ul li:first-of-type{
    margin-top:0;
}

.preview img{
    margin:0 !important;
}

.menu-logo{
    float:left;height:30px;margin-right:7.5px;
}

section#hero p.title{
    float:left;
}
		    

.col-1{width:calc(((100% - (11 * 20px))/12));}
.col-2{width:calc(((100% - (11 * 20px))/12 * 2) + (20px * (2 - 1)));}
.col-3{width:calc(((100% - (11 * 20px))/12 * 3) + (20px * (3 - 1)));}
.col-4{width:calc(((100% - (11 * 20px))/12 * 4) + (20px * (4 - 1)));}
.col-5{width:calc(((100% - (11 * 20px))/12 * 5) + (20px * (5 - 1)));}
.col-6{width:calc(((100% - (11 * 20px))/12 * 6) + (20px * (6 - 1)));}
.col-7{width:calc(((100% - (11 * 20px))/12 * 7) + (20px * (7 - 1)));}
.col-8{width:calc(((100% - (11 * 20px))/12 * 8) + (20px * (8 - 1)));}
.col-9{width:calc(((100% - (11 * 20px))/12 * 9) + (20px * (9 - 1)));}
.col-10{width:calc(((100% - (11 * 20px))/12 * 10) + (20px * (10 - 1)));}
.col-11{width:calc(((100% - (11 * 20px))/12 * 11) + (20px * (11 - 1)));}
.col-12{width:100%;}

.col-divide5{width:calc(((100% - (4 * 20px))/5) );}
.col-divide8{width:calc(((100% - (7 * 20px))/8) );}

#nav-menu .col-divide8{
	padding:10px 0;
}

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

	.container{
		max-width:1152px;
	}

}

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

	.container{
		max-width:768px;
		padding:16px;
		
	}

	section#process-content .title{
		font-size:18px;
		float:none;
		padding-top:5px;
		width:100%;
	}

	section#process-content .number{
		float: none;
	}

}

@media only screen and (max-width:768px), (orientation : portrait){
    
    
    .menu-logo{
        height:2.25vh;
        margin-right:0.5vh;
    }
                
                
	.container{
		max-width:88%;
		padding:32px 16px;
	}

	.content-nav{
		display:none;
	}

	.content .col-9{
		width:100%;
	}

	.scroll .col-3{
		width:calc((100% - 20px)/2);
	}

	.scroll.more .col-3:nth-of-type(2n+1){
		margin-right:0;
	}

	.scroll.more .col-3:nth-of-type(n+4){
		margin-top:30px;
	}

	section#hero p.title{
		font-size:2vh;
	}

	section#hero .container{
		padding:1.5vh;

	}

	#main-menu{
		height:5vh !important;
	}

	#main-menu .col-6:first-of-type{
		width:calc(60% - 20px);
	}

	#main-menu .col-6:last-of-type{
		width:40%;
	}

	section#nav-menu{
		top:60px;
	}

	section#process-content .col-divide5{
		width:100%;
		margin-top:20px;
	}

	section#process-content .col-divide5:first-of-type{
		margin-top:0;
	}

	section#process-content .title{
		float:left;
		padding-top:5px;
		width:auto;
	}

	section#process-content .number{
		float: left;
	}

	section.nav{
		position:sticky;
		top:5vh;
		z-index:998;
		border-top:1px dotted #000;
	}

	section.nav .container{
		padding:16px !important;
	}

	section.nav p.title{
		font-size:1.5vh;
		padding-top:0.25vh;
	}

	section.nav .number{
		font-size:1.5vh;
		width:2vh;
		height:2vh;

	}

	#nav-menu{
		display:none;
	}

	.mobile-menu-container, .mobile-main-menu-container{
		display:block;
	}
	
	.mobile-menu-container p{
	    font-size:1vh;
	    padding-top:0.5vh;
	}
	
	p.title:nth-of-type(1), p.title:nth-of-type(2),  p.title:nth-of-type(5){
	    padding-top:0;
	}
	
	section.nav .rhs{
	    padding-top:0.25vh;
	}

	.desktop-menu-container{
		display:none;
	}

	*{
		scroll-margin-top:120px;
	}

}