body {
	margin: 0;
	padding: 0;
	background-color: #212738;
	overflow-x: hidden;
	overflow-y: hidden;
}

#texture-overlay {
	background: #000000;
	width: 100vw;
	height: 100vh;
	position: absolute;
	mix-blend-mode: overlay;
	z-index: 520;
	opacity: 0.25;
	pointer-events: none;
}
#texture {
	background: url("/css/grid-pattern.png") repeat;
	width: 100vw;
	height: 100vh;
	position: absolute;
	mix-blend-mode: luminosity;
	z-index: 510;
	opacity: 0.15;
	pointer-events: none;
	background-size: 3px;
}

#preloading-container {
	position: absolute;
	display: flex;
	z-index: 500;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background-color: #f1f2eb;
	justify-content: center;
}
.letter-container {
	display: flex;
	padding: 0 40%;
}
.loading-letter {
	opacity: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #4a4a48;
	text-align: center;
	align-self: center;
	margin: 0 10px;
}
.loading-circle {
	opacity: 0;
	border-radius: 5px;
	width: 10px;
	height: 10px;
	background-color: #2a9d8f;
	align-self: center;
	margin: 0 10px;
}

::selection {
	background-color: #2a9d8f;
}
.timeline-year::selection,
.about-header-bottom::selection {
	background-color: #ffffff;
}
input::selection,
textarea::selection {
	color: #ffffff;
	background-color: #2a9d8f;
}

.container {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	display: grid;
	grid-template-rows: auto auto;
	overflow: hidden;
	background: radial-gradient(ellipse at top, rgba(49, 55, 72, 0.3), transparent),
				radial-gradient(ellipse at bottom, rgba(74, 74, 88, 0.3), transparent);
}

.nav-top {
	position: fixed;
	display: flex;
	width: 100%;
	color: #ffffff;
	background-color: #151c2e;
	z-index: 1;
	padding-bottom: 15px;
	overflow: hidden;
}
.name-header {
	font-family: 'Pacifico', cursive;
	font-size: 40px;
	line-height: 54px;
	padding: 22px 45px 18px 30px;
	will-change: transform;
	cursor: pointer;
	opacity: 0;
}
.nav-link {
	font-size: 16px;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	height: 24px;
	overflow: hidden;
	align-self: center;
	padding: 10px 4px 2px 4px;
	margin: 0 0 0 40px;
	text-transform: uppercase;
	cursor: pointer;
	will-change: transform;
	opacity: 0;
}
.nav-text1, .nav-text2 {
	height: 36px;
}
.nav-line {
	position: absolute;
	top: 69px;
	left: 0;
	height: 5px;
	width: 0%;
	max-width: 108px;
	background-color: #2a9d8f;
	opacity: 0;
}
.section-line {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 0vh;
	background-color: #ffffff;
}


/***** DISABLE SELECTION FOR TEXT LINKS *****/

.loading-letter, .nav-link, .name-header, .menu-item {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}


/***** MENU LAYOUT *****/

.menu-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 1.5em;
	box-sizing: border-box;
	max-width: 920px;
	height: 100vh;
	height: 100dvh;
	margin: 0 auto;
	padding: 15% 0 10% 0;

	justify-content: space-evenly;
	justify-items: center;
	align-content: space-evenly;
	align-items: center;
}
.menu-item {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 8% 12%;
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	will-change: transform;
	cursor: pointer;
	opacity: 0;
}
#menuBorder1, #menuBorder2, #menuBorder3, #menuBorder4 {
	position: absolute;
	width: 100%;
	height: 100%;
	left: -2px;
	top: -2px;
	opacity: 0;
}
#menuBorder1 { border: 2px #ef476f solid; }
#menuBorder2 { border: 2px #0079b6 solid; }
#menuBorder3 { border: 2px #ffd469 solid; }
#menuBorder4 { border: 2px #5d636f solid; }

.menu-item p.heading, p.info-header, p.info-header2, p.contact-header, p.about-header-bottom, p.about-text-bottom {
	font-family: 'DM Sans', sans-serif;
	font-size: 42px;
	font-weight: 600;
	line-height: 48px;
	margin: 0 0 25px 0;
	will-change: transform;
}
.menu-item p.description, p.info-content, p.contact-content, p.scroll-message {
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0.5px;
	margin: 0 0 8px 0;
	will-change: transform;
}
p.info-header, p.contact-header {
	color: #ffffff;
	font-size: 44px;
	display: block;
	margin: 0 5% 75px 5%;
}
p.info-header2, p.about-header-bottom, p.about-text-bottom {
	color: #ffffff;
	font-size: 28px;
	letter-spacing: 1px;
	display: block;
	margin: 25px 5%;
}
p.about-header-bottom, p.about-text-bottom {
	position: relative;
	top: 45vh;
	font-size: 28px;
	line-height: 32px;
	margin: 0 5% 50px 5%;
	padding: 0 15%;
	color: #2a9d8f;
}
p.about-text-bottom {
	font-size: 18px;
	line-height: 32px;
	color: #ffffff;
	margin: 0 5% 36px 5%;
}
p.about-text-bottom a,
p.contact-content a {
	color: #2a9d8f;
	text-decoration: underline;
	font-weight: 600;
}
p.about-text-bottom a:hover,
p.contact-content a:hover {
	color: #2a9d8f;
	text-decoration: none;
}
p.about-text-bottom.withSpace {
	padding-bottom: 150px;
}

.aboutHeadingWord,
.aboutHeadingWordEnd {
	display: inline-block;
}
p.timeline-header {
	color: #ffffff;
	font-size: 28px;
	letter-spacing: 1px;
	display: block;
	margin: 25px 5%;
}
.timeline-container {
	display: flex;
	position: relative;
	top: 30vh;
	width: 100%;
	height: 460px;
}

.timeline-left,
.timeline-center,
.timeline-right {
	position: absolute;
	left: 0;
	width: 45%;
}
.timeline-center {
	display: flex;
	left: 45%;
	width: 10%;
	justify-content: center;
	align-items: center;
	margin: 4px 0 0 0;
}
.timeline-right {
	left: 55%;
}

.timeline-year,
.timeline-company,
.timeline-details-left,
.timeline-details-right {
	font-size: 15px;
	font-family: 'DM Sans', sans-serif;
    color: #ffffff;
}

.timeline-year {
	width: 65%;
	font-size: 24px;
	font-family: 'Oswald', sans-serif;
    font-weight: 500;
	color: #2a9d8f;
	text-align: right;
	padding: 0 0 25px 35%;
}
.timeline-year.alt-direction {
	text-align: left;
	padding: 0 35% 25px 0;
}
.timeline-company {
	width: 65%;
	font-family: 'Bree Serif', sans-serif;
	font-size: 24px;
	text-align: left;
	padding: 0 35% 75px 0;
}
.timeline-company.alt-direction {
	text-align: right;
	padding: 0 0 75px 35%;
}


.timeline-details-left {
	display: flex;
	width: 65%;
	padding: 50px 0 50px 35%;
	text-align: right;
}
.timeline-details-right {
	width: 65%;
	padding: 50px 35% 50px 0;
	text-align: left;
}

.timeline-path {
	display: flex;
	position: absolute;
	top: 45px;
	height: 400px;
	width: 10px;
	background: #ffffff;
}
.timeline-path-end {
	display: flex;
	position: absolute;
	top: 45px;
	height: 400px;
	width: 10px;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 35%, rgba(255,255,255,0));
}

.timeline-point {
	display: flex;
	position: absolute;
	top: 0;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	outline: 3px dashed #ffffff;
	outline-offset: 5px;
	background-color: #2a9d8f;
}

.timeline-year, .timeline-company, .timeline-details-left, .timeline-details-right, .about-header-bottom, .about-text-bottom {
	opacity: 0;
}

.timeline-point.spinRight {
	-webkit-animation: spinRight 4s linear infinite;
	animation: spinRight 4s linear infinite;
}
.timeline-point.spinLeft {
	-webkit-animation: spinLeft 4s linear infinite;
	animation: spinLeft 4s linear infinite;
}
@-webkit-keyframes spinRight {
	100% { -webkit-transform: rotate(360deg); }
} 
@keyframes spinRight {
	100% { transform: rotate(360deg); }
}
@-webkit-keyframes spinLeft {
	100% { -webkit-transform: rotate(-360deg); }
} 
@keyframes spinLeft {
	100% { transform: rotate(-360deg); }
}


p.info-content, p.contact-content {
	color: #ffffff;
	font-size: 20px;
	display: block;
	margin: 0 5% 25px 5%;
}
p.scroll-message {
	float: left;
	position: relative;
	top: 15vh;
	width: 90%;
	text-align: center;
	color: #666666;
	font-size: 18px;
	letter-spacing: 10px;
	margin: 0 5%;
	font-weight: 600;
}
#main1 { background-color: #ef476f; border: 1px solid #ef476f; color: #ffffff; transform: perspective(500px) rotateX(0) rotateY(0); }
#main2 { background-color: #0079b6; border: 1px solid #0079b6; color: #ffffff; transform: perspective(500px) rotateX(0) rotateY(0); }
#main3 { background-color: #ffd469; border: 1px solid #ffd469; color: #212738; transform: perspective(500px) rotateX(0) rotateY(0); }
#main4 { background-color: #5d636f; border: 1px solid #5d636f; color: #ffffff; transform: perspective(500px) rotateX(0) rotateY(0); }


/***** CONTENT LAYOUT *****/

.info-container {
	box-sizing: border-box;
	max-width: 1260px;
	height: 100vh;
	height: 100dvh;
	margin: 0 auto;
	padding: 15% 0 10% 0;
}
.scroll-container-contact {
	height: 100vh;
	height: 100dvh;
	overflow-y: scroll;
}

#main-menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#about {
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	overflow: hidden;
}
#contact {
	position: absolute;
	top: 0;
	left: 200%;
	width: 100%;
	overflow: hidden;
}
#contact-thanks {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#contact-thanks .info-container {
	padding: 15% 0 10% 0 !important;
}
#portfolio-1 {
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}
#portfolio-2 {
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}
#portfolio-3 {
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}
#portfolio-4 {
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.bottom-spacer {
	float:left;
	width:100%;
	height:40px;
}

/***** WORK LAYOUT *****/

/* Hide scrollbar for Chrome, Safari and Opera */
.item-container-1::-webkit-scrollbar,
.item-container-3::-webkit-scrollbar,
.item-container-4::-webkit-scrollbar,
.selected-container-1::-webkit-scrollbar,
.selected-container-3::-webkit-scrollbar,
.selected-container-4::-webkit-scrollbar,
.scroll-container-1::-webkit-scrollbar,
.scroll-container-3::-webkit-scrollbar,
.scroll-container-4::-webkit-scrollbar,
.scroll-container-about::-webkit-scrollbar,
.displaySet::-webkit-scrollbar,
.scroll-container-contact::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.item-container-1,
.item-container-3,
.item-container-4,
.selected-container-1,
.selected-container-3,
.selected-container-4,
.scroll-container-1,
.scroll-container-3,
.scroll-container-4,
.scroll-container-about,
.displaySet,
.scroll-container-contact {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.selected-container-1,
.selected-container-3,
.selected-container-4 {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	margin: 0 auto;
	padding: 170px 0 4% 0;
	overflow-y: scroll;
	visibility: hidden;
	z-index: 9;
}
.selected-container-4 {
	align-items: center;
	justify-content: center;
}
.selected-container-1 img,
.selected-container-3 img,
.selected-container-4 img,
.selected-container-4 video {
	float: none;
	display: block;
	max-width: 600px;
	margin: 0 auto;
	cursor: pointer;
}
.selected-container-4 img,
.selected-container-4 video {
	max-width: 900px !important;
	position: absolute;
}
.selected-container-4 video {
	display: none;
}
.videoForAppsImg {
	position: absolute;
}

.selected-container-1 img.two-col,
.selected-container-3 img.two-col,
.selected-container-4 img.two-col {
	float: none;
	display: block;
	max-width: 900px;
	margin: 0 auto;
	overflow: visible;
}

.scroll-container-1,
.scroll-container-3,
.scroll-container-4,
.scroll-container-about {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	overflow-y: scroll;
}

.item-container-1,
.item-container-3,
.item-container-4 {
	box-sizing: border-box;
	max-width: 1260px;
	height: 100vh;
	height: 100dvh;
	margin: 0 auto;
	padding: 150px 0 5% 0;
}
.portfolio-item-1,
.portfolio-item-3 {
	float: left;
	overflow: hidden;
	cursor: pointer;
	width: 20%;
	height: 210px;
	margin: 0.5% 2.5% 4.5%;
}

.portfolio-item-4 {
	float: left;
	display: flex;
	position: relative;
	cursor: pointer;
	width: 28%;
	height: 198px;
	align-items: center;
	justify-content: center;
	margin: 0.5% 2.66% 20px;
}

.portfolio-item-1 img,
.portfolio-item-3 img,
.portfolio-item-4 img,
.portfolio-item-4 video {
	display: none;
	width: 100%;
}
.portfolio-item-4 img,
.portfolio-item-4 video {
	position: absolute;
	top: 0;
	left: 0;
}

.portfolio-item-1.two-col,
.portfolio-item-3.two-col,
.portfolio-item-4.two-col {
	width: 45%;
}

.portfolio-item-1.two-col img,
.portfolio-item-3.two-col img,
.portfolio-item-4.two-col img {
	width: 100%;
}

.appSectionTitles, .appSectionTitlesMob {
	float: left;
	display: block;
    font-size: 15px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    height: 30px;
	color: #ffffff;
	width: 28%;
	margin: 0 2.66% 40px;
	text-align: center;
}
.appSectionTitlesMob {
	display: none;
}

#menu-gradient {
	background-image: radial-gradient(circle at center,rgba(42, 157, 143, 0.5), rgba(42, 157, 143, 0));
	width: 200vw;
	height: 30vh;
	position: absolute;
	top: 40vh;
	left: -25%;
	z-index: -1;
	filter: blur(50px);
}


.display-items {
	box-sizing: border-box;
	max-width: 1180px;
	height: 100vh;
	height: 100dvh;
	margin: 0 auto;
	padding: 180px 0 5% 0;
}
.display-items-col1, .display-items-col2, .display-items-col3 {
	display: block;
}
.display-items-col1 { width: 15.75%; float: left; margin: 0 2.5% 0 0; }
.display-items-col2 { width: 55.7%; float: left; margin: 0 2.5% 0 0; }
.display-items-col3 { width: 23.5%; float:left; }

.display-itemsMob-col1, .display-itemsMob-col2, .display-itemsMob-col3 {
	display: none;
}

.display-1, .displayMob-1,
.display-2, .displayMob-2,
.display-3, .displayMob-3,
.display-4, .displayMob-4,
.display-5, .displayMob-5,
.display-6, .displayMob-6,
.display-7, .displayMob-7,
.display-8, .displayMob-8 {
	float: left;
	text-align: center;
	cursor: pointer;
}

.display-1, .displayMob-1 { width: 100%; height: auto; }
.display-2, .displayMob-2 { width: 100%; height: auto; margin: 15% 0 0 0; }
.display-3, .displayMob-3 { width: 22.5%; height: auto; margin: 0 2.5% 0 0; }
.display-4, .displayMob-4 { width: 72.5%; height: auto; margin: 0 0 0 2.5%; }
.display-5, .displayMob-5 { clear: left; width: 56.6%; height: auto; margin: 4% 2.5% 0 0; }
.display-6, .displayMob-6 { width: 38.4%; height: auto; margin: 4% 0 0 2.5%; }
.display-7, .displayMob-7 { width: 100%; height: auto; margin: 4% 0 0 0; }
.display-8, .displayMob-8 { width: 100%; height: auto; }

.displaySet {
	align-items: start;
}
.displaySet img {
	max-width: 90%;
	height: auto;
	text-align: center;
	padding: 0 15px 26px;
}


.display-col1 {
	width: 13.5%;
	float: left;
}
.display-col2 {
	width: 61%;
	float: left;
	text-align: center;
}
.display-col3 {
	width: 25.5%;
	float: left;
}


.displayset-1,
.displayset-2,
.displayset-3,
.displayset-4,
.displayset-5,
.displayset-6,
.displayset-7,
.displayset-8 {
	display: none;
	max-width: 1260px;
	box-sizing: border-box;
	height: 100vh;
	height: 100dvh;
    margin: 0 auto;
	padding: 50px 0 0 0;
	opacity: 0;
}

.displayBackButton {
	display: flex;
	width: 7.5%;
	float: left;
	align-self: center;
	justify-content: center;
	cursor: pointer;
}
.backButtonIcon {
	border: solid white;
	border-width: 0 8px 8px 0;
	padding: 8px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}

.displayBannerThumbs {
	display: flex;
	float: left;
	width: 20%;
	height: 100vh;
	height: 100dvh;
	align-content: center;
	flex-wrap: wrap;
}
.displayBannerLarge {
	display: flex;
	float: left;
	position: relative;
	width: 70%;
	height: 100vh;
	height: 100dvh;
	margin: 0 0 0 2.5%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.displayVideoThumbs {
	display: flex;
	float: left;
	width: 22.5%;
	height: 100vh;
	height: 100dvh;
	align-content: center;
	flex-wrap: wrap;
}
.displayVideoLarge {
	display: flex;
	float: left;
	position: relative;
	width: 67.5%;
	height: 100vh;
	height: 100dvh;
	margin: 0 0 0 2.5%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.displayBannerThumb1 { width: 100%; }
.displayBannerThumb2 { opacity: 0.1; width: 44.25%; padding: 2.5% 1.25% 0 0; }
.displayBannerThumb3 { opacity: 0.1; width: 53.25%; padding: 2.5% 0 0 1.25%; }
.displayBannerThumb4 { opacity: 0.1; width: 63.6%; padding: 2.5% 1.25% 0 0; }
.displayBannerThumb5 { opacity: 0.1; width: 33.9%; padding: 2.5% 0 0 1.25%; }
.displayBannerThumb6 { opacity: 0.1; width: 100%; padding: 2.5% 0 0 0; }

.displayVideoThumb1 { width: 100%; }
.displayVideoThumb2 { opacity: 0.1; width: 74%; padding: 2.5% 1.25% 0 0; }
.displayVideoThumb3 { opacity: 0.1; width: 23.5%; padding: 2.5% 0 0 1.25%; }
.displayVideoThumb4 { opacity: 0.1; width: 35.1%; padding: 2.5% 1.25% 0 0; }
.displayVideoThumb5 { opacity: 0.1; width: 62.4%; padding: 2.5% 0 0 1.25%; }
.displayVideoThumb6 { opacity: 0.1; width: 100%; padding: 2.5% 0 0 0; }

.displayBannerLarge1, .displayVideoLarge1 { left: 0; }
.displayBannerLarge2, .displayVideoLarge2 { left: 100%; }
.displayBannerLarge3, .displayVideoLarge3 { left: 200%; }
.displayBannerLarge4, .displayVideoLarge4 { left: 300%; }
.displayBannerLarge5, .displayVideoLarge5 { left: 400%; }
.displayBannerLarge6, .displayVideoLarge6 { left: 500%; }

.displayBannerLarge1,
.displayBannerLarge2,
.displayBannerLarge3,
.displayBannerLarge4,
.displayBannerLarge5,
.displayBannerLarge6,
.displayVideoLarge1,
.displayVideoLarge2,
.displayVideoLarge3,
.displayVideoLarge4,
.displayVideoLarge5,
.displayVideoLarge6 {
	position: absolute;
	width: 100%;
	text-align: center;
}


.displayBannerLarge1 img { width: 100%; max-width: 728px; height: auto; }
.displayBannerLarge2 img { width: 100%; max-width: 250px; height: auto; }
.displayBannerLarge3 img { width: 100%; max-width: 300px; height: auto; }
.displayBannerLarge4 img { width: 100%; max-width: 250px; height: auto; }
.displayBannerLarge5 img { width: 100%; max-width: 132px; height: auto; }
.displayBannerLarge6 img { width: 100%; max-width: 750px; height: auto; }

.displayVideoLarge1 video { width: 100%; max-width: 600px; height: auto; }
.displayVideoLarge2 video { width: 100%; max-width: 600px; height: auto; }
.displayVideoLarge3 video { width: 100%; max-width: 275px; height: auto; }
.displayVideoLarge4 video { width: 100%; max-width: 500px; height: auto; }
.displayVideoLarge5 video { width: 100%; max-width: 600px; height: auto; }
.displayVideoLarge6 video { width: 100%; max-width: 600px; height: auto; }

.displayBannerThumb1,
.displayBannerThumb2,
.displayBannerThumb3,
.displayBannerThumb4,
.displayBannerThumb5,
.displayBannerThumb6,
.displayVideoThumb1,
.displayVideoThumb2,
.displayVideoThumb3,
.displayVideoThumb4,
.displayVideoThumb5,
.displayVideoThumb6 {
	height: auto;
	float: left;
	cursor: pointer;
}

#videoWithAudio1,
#videoWithAudio2,
#videoNoAudio1,
#videoNoAudio2,
#videoNoAudio3,
#videoNoAudio4 {
	cursor: pointer;
}

.videoPlayButton,
.videoPlayButtonApps {
	pointer-events: none;
	cursor: pointer;
	width: 80px;
	height: 80px;
	background-color:#2a9d8f;
	display: flex;
	border-radius: 40px;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	z-index: 1;
	opacity: 0;
}
.videoPlayButtonApps {
	position: absolute;
}
.videoPlayIcon {
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 25px solid #ffffff;
	width: 0px;
	height: 0px;
	margin: 0 0 0 6px;
}
.videoPauseIcon {
	border-left: 8px solid #ffffff;
	border-right: 8px solid #ffffff;
	width: 10px;
	height: 30px;
	display: none;
}


/* PARTICLES LAYOUT */

#particles-js {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -2;
	overflow: hidden;
}


/* FORM LAYOUT */

form {
	/* Center the form on the page */
	margin: 50px 5% 25px 5%;
	width: 500px;
	/* Form outline */
	padding: 3em 1em 1em 2em;
	border: 6px dashed rgb(42, 157, 143);
	border-radius: 1em;
}
  
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
  
form li + li {
	margin-top: 1em;
}

label {
	/* Uniform size & alignment */
	display: inline-block;
	width: 90px;
	text-align: right;
	color: #ffffff;
	font-size: 18px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
	padding: 12px;
}

input:required,
textarea:required {
	font: 1em 'Bree Serif', sans-serif;
	width: 300px;
	box-sizing: border-box;
	border: 1px solid #999999;
	padding: 5px;
	font-weight: bold;
	color: #212738 !important;
}
textarea:required {
	resize: none;
}

input:focus,
textarea:focus {
	border-color: #000000;
}
  
textarea {
	/* Align multiline text fields with their labels */
	vertical-align: top;
	/* Provide space to type some text */
	height: 5em;
}

.button {
	/* Align buttons with the text fields */
	margin: 15px 0 15px 100px;
	padding: 25px;
}
  
button {
	margin-left: 0.5em;
	font-family: 'Bree Serif', sans-serif;
	background-color: rgb(42, 157, 143);
	color: #ffffff;
	font-size: 22px;
	width: 250px;
	height: 48px;
	padding: 0 0 6px 0;
	border: none;
}




@media screen and (max-width: 1024px) and (orientation: portrait){

	.portfolio-item-1, .portfolio-item-3 {
		height: 175px;
	}
	.menu-container {
		padding: 25% 0 25% 0;
	}

	.display-items {
		margin: 0 15%;
		padding: 180px 0 0 0;
	}
	.display-items-col1, .display-items-col2, .display-items-col3 {
		display: none;
	}
	.display-itemsMob-col1, .display-itemsMob-col2, .display-itemsMob-col3 {
		display: block;
	}
	.display-itemsMob-col1 { width: 25%; float: left; margin: 0 1.5% 0 16%; }
	.display-itemsMob-col2 { width: 66%; float: left; margin: 3% 0 0 16%; }
	.display-itemsMob-col3 { width: 37.3%; float:left; margin: 0 0 0 2.5%; }

	.displayset-1,
	.displayset-2,
	.displayset-3,
	.displayset-4,
	.displayset-5,
	.displayset-6,
	.displayset-7,
	.displayset-8 {
		grid-template-columns: 0.2fr 1fr;
		grid-template-rows: 0.65fr 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		padding: 75px 0 0 0;
	}
	.display-5, .displayMob-5 { margin: 5% 2.5% 0 0; }
	.display-6, .displayMob-6 { margin: 5% 0 0 2.5%; }
	.display-7, .displayMob-7 { margin: 5% 0 0 0; }
	.displayBackButton {
		grid-area: 1 / 1 / 2 / 2;
	}
	.displayBannerThumbs {
		display: grid;
		width: 70%;
		height: 30vh;
		grid-area: 1 / 2 / 2 / 3;
		grid-template-columns: 1.9fr 2.4fr 1.6fr 0.85fr;
		grid-template-rows: 0.5fr 1.5fr 1.9fr;
		grid-column-gap: 5px;
		grid-row-gap: 0px;
		align-items: center;
		justify-items: center;
		margin: 10% 0 0 10%;
	}
	.displayBannerThumb1 { grid-area: 1 / 1 / 2 / 3; width: 94%; padding: 3%; }
	.displayBannerThumb2 { grid-area: 2 / 1 / 3 / 2; width: 90%; padding: 5%; }
	.displayBannerThumb3 { grid-area: 2 / 2 / 3 / 3; width: 90%; padding: 5%; }
	.displayBannerThumb4 { grid-area: 1 / 3 / 3 / 4; width: 82%; padding: 9%; }
	.displayBannerThumb5 { grid-area: 1 / 4 / 3 / 5; width: 82%; padding: 9%; }
	.displayBannerThumb6 { grid-area: 3 / 1 / 4 / 5; width: 97%; padding: 1.5%; }
	.displayBannerLarge {
		width: 90%;
		height: 45vh;
		margin: 2% 0 0 5%;
		grid-area: 2 / 1 / 3 / 3;
	}
	.displayBannerLarge1 img { width: 100%; max-width: 728px; height: auto; }
	.displayBannerLarge2 img { width: 100%; max-width: 250px; height: auto; }
	.displayBannerLarge3 img { width: 100%; max-width: 300px; height: auto; }
	.displayBannerLarge4 img { width: 100%; max-width: 275px; height: auto; }
	.displayBannerLarge5 img { width: 100%; max-width: 145px; height: auto; }
	.displayBannerLarge6 img { width: 100%; max-width: 800px; height: auto; }
	.displayBackButton {
		width: 100%;
	}

	.displayVideoThumbs {
		width: 80%;
		height: 45vh;
		margin: 0 0 0 10%;
		grid-area: 1 / 2 / 2 / 3;
	}
	.displayVideoThumb1 { width: 31%; }
	.displayVideoThumb2 { width: 32%; padding: 0 1.25% 0 2.5%; }
	.displayVideoThumb3 { width: 10%; padding: 0 1.25% 0 1.25%; }
	.displayVideoThumb4 { width: 18%; padding: 0 0 0 1.25%; }
	.displayVideoThumb5 { width: 48%; padding: 2.5% 1.25% 0 0; }
	.displayVideoThumb6 { width: 48%; padding: 2.5% 0 0 1.25%; }

	.displayBannerLarge,
	.displayVideoLarge {
		width: 90%;
		margin: 0 0 0 5%;
		grid-area: 2 / 1 / 3 / 3;
		height: 45vh;
	}
	.displayVideoLarge {
		height: 35vh;
	}
	.displayVideoLarge3 video {
		max-width: 300px;
	}
	.displayVideoLarge4 video {
		max-width: 450px;
	}

	.info-container {
		padding: 20% 0 10% 0;
	}
	.timeline-details-left,
	.timeline-details-right {
		font-size: 16px;
	}
}

@media screen and (max-width: 912px) and (orientation: portrait){
	.menu-container {
		height: 95vh;
		margin: 5% 1.5em;
    	padding: 20% 0 25% 0;
	}
	.portfolio-item-1, .portfolio-item-3 {
		height: 155px !important;
	}
	.portfolio-item-4 {
		height: 190px;
		margin: 0.5% 2.66% 0;
	}
	.display-items {
		margin: 0 14%;
		padding: 200px 0 0 0;
	}
	.selected-container-1 img.two-col, .selected-container-3 img.two-col {
		max-width: 750px !important;
	}
}

@media screen and (max-width: 820px) and (orientation: portrait){
	.menu-item p.heading {
		font-size: 38px;
		line-height: 44px;
	}
	.portfolio-item-1, .portfolio-item-3 {
		height: 140px !important;
	}
	.display-items {
		margin: 0 10%;
		padding: 140px 0 0 0;
	}
	.displayBannerThumbs {
		height: 310px;
	}
	.displayBannerThumbs {
		height: 310px;
	}
	.displayBannerLarge4 img { max-width: 210px; }
	.displayBannerLarge5 img { max-width: 110px; }
	.selected-container-1 img.two-col, .selected-container-3 img.two-col, .selected-container-4 img, .selected-container-4 video {
		max-width: 700px !important;
	}
}

@media screen and (max-width: 768px) and (orientation: portrait){
	.menu-item p.heading {
		font-size: 36px;
		line-height: 42px;
	}
	.portfolio-item-1, .portfolio-item-3 {
		height: 125px !important;
	}
	.display-items {
		margin: 0 14%;
	}
	.timeline-details-left,
	.timeline-details-right {
		font-size: 14px;
	}
	.selected-container-1 img, .selected-container-3 img {
		max-width: 500px !important;
	}
	.selected-container-4 img, .selected-container-4 video {
		max-width: 650px !important;
	}
	.selected-container-1 img.two-col, .selected-container-3 img.two-col {
		max-width: 650px !important;
	}
}

@media screen and (max-width: 500px) and (orientation: portrait){
	.not-for-mobile {
		display: none !important;
	}
	.nav-top {
		flex-wrap: wrap;
		width: 100vw;
		padding-bottom: 32px;
		justify-content: center;
	}
	.name-header {
		width: 100%;
		font-size: 40px;
		line-height: 44px;
		padding: 30px 10px 27px 0;
		text-align: center;
	}
	.nav-link {
		padding: 12px 4px 2px 4px;
		margin: 0 5%;
	}
	.nav-line {
		top: 148px;
	}

	.menu-container {
		grid-gap: 1em;
		width: 100%;
		height: 80vh;
		margin: 20vh 0 0 0;
		padding: 15% 4% 15% 4% !important;
	}
	.menu-item {
		padding: 0 10%;
	}
	.menu-item p.heading, p.info-header, p.info-header2, p.contact-header, p.about-header-bottom {
		font-size: 26px;
		line-height: 30px;
	}
	p.contact-header,
	p.info-header,
	p.about-header-bottom {
		font-size: 44px;
    	line-height: 46px;
	}
	p.info-header2 {
		line-height: 36px;
	}
	p.about-header-bottom {
		padding: 0 10%;
	}
	p.about-text-bottom {
		font-size: 16px;
		line-height: 26px;
		padding: 0 10%;
	}
	.menu-item p.description, p.info-content, p.contact-content, p.scroll-message {
		font-size: 16px;
		font-weight: 400;
		line-height: 20px;
	}
	.section-line {
		width: 7px;
	}

	form {
		margin: 50px 5% 25px 5%;
		width: 300px;
		/* Form outline */
		padding: 3em 1em 1em 2em;
		border: 6px dashed rgb(42, 157, 143);
		border-radius: 1em;
	}
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	form li + li {
		margin-top: 1em;
	}
	label {
		width: 60px;
		font-size: 14px;
		padding: 12px;
	}
	input:required,
	textarea:required {
		width: 180px;
		box-sizing: border-box;
		border: 1px solid #999;
		padding: 5px;
	}
	.button {
		margin: 15px 0 15px 30px;
		padding: 25px;
	}
	button {
		font-size: 18px;
		width: 200px;
		height: 38px;
	}

	.portfolio-item-1, .portfolio-item-3 {
		width: 45%;
		height: 150px;
		margin: 0.5% 2.5% 4.5%;
	}
	.portfolio-item-1.two-col, .portfolio-item-3.two-col, .portfolio-item-4.two-col {
		width: 95%;
		margin: 0.5% 2.5% 4.5%;
	}
	.item-container-1, .item-container-3, .item-container-4 {
		margin: 0 10px;
		padding: 200px 0 5% 0;
	}
	.selected-container-1, .selected-container-3, .selected-container-4 {
		padding: 220px 0 4% 0;
	}
	.selected-container-1 img, .selected-container-3 img,
	.selected-container-1 img.two-col, .selected-container-3 img.two-col {
		max-width: 380px !important;
	}
	.selected-container-4 img, .selected-container-4 video {
		max-width: 400px !important;
	}
	
	.display-items {
		padding: 250px 0 5% 0;
	}
	.display-items-col1, .display-items-col2, .display-items-col3 {
		display: none;
	}
	.display-itemsMob-col1, .display-itemsMob-col2, .display-itemsMob-col3 {
		display: block;
	}
	.display-itemsMob-col1 { width: 25%; float: left; margin: 0 1.5% 0 16%; }
	.display-itemsMob-col2 { width: 66%; float: left; margin: 3% 0 0 16%; }
	.display-itemsMob-col3 { width: 37.3%; float:left; margin: 0 0 0 2.5%; }

	.displayBannerThumbs, .displayVideoThumbs {
		width: 85%;
		height: 190px;
		margin: 7.5% 0 0 0;
		grid-area: 1 / 2 / 2 / 3;
		grid-row-gap: 0px;
		grid-column-gap: 0px;
		align-self: center;
	}
	.displayVideoThumbs {
		margin: 0;
	}
	.displayBannerLarge,
	.displayVideoLarge {
		width: 95%;
		height: 50vh;
		grid-area: 2 / 1 / 3 / 3;
		align-self: center;
		margin: 0 0 0 2.5%;
		padding: 0 0 100px 0;
	}
	.displayBannerLarge {
		width: 90%;
		margin: 0 0 2.5% 5%;
	}
	.displayVideoLarge1 video, .displayVideoLarge2 video, .displayVideoLarge5 video, .displayVideoLarge6 video {
		max-width: 300px;
	}
	.displayVideoLarge3 video {
		max-width: 130px;
	}
	.displayVideoLarge4 video {
		max-width: 220px;
	}
	.displayset-1, .displayset-2, .displayset-3, .displayset-4, .displayset-5, .displayset-6, .displayset-7, .displayset-8 {
		padding: 100px 0 0 0;
		grid-template-columns: 0.3fr 1fr;
		grid-template-rows: 0.5fr 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
	.displayBackButton {
		grid-area: 1 / 1 / 2 / 2;
		align-self: center;
	}
	.displayBannerLarge2 img { max-width: 180px; }
	.displayBannerLarge3 img { max-width: 225px; }
	.displayBannerLarge4 img { max-width: 125px; }
	.displayBannerLarge5 img { max-width: 67px; }
	.displayVideoLarge3 video { max-width: 140px; }

	.portfolio-item-4 {
		width: 75%;
		margin: 0.5% 12.5% 5px;
	}
	.appSectionTitles {
		display: none;
	}
	.appSectionTitlesMob {
		display: block;
		width: 75%;
		margin: 0 12.5% 40px;
	}

	.info-container {
		padding: 230px 0 10% 0;
	}
	p.scroll-message {
		font-size: 18px;
		line-height: 30px;
		letter-spacing: 8px;
	}
	.timeline-container {
		width: 90vw;
		margin: 0 5%;
	}
	.timeline-left {
		width: 40%;
	}
	.timeline-right {
		width: 45%;
		left: 60%;
	}
	.timeline-details-left,
	.timeline-details-right {
		font-size: 13px;
	}
	.timeline-details-left {
		width: 90%;
		padding: 40px 0 40px 10%;
	}
	.timeline-details-right {
		width: 90%;
		padding: 40px 10% 40px 0;
	}
	.timeline-year,
	.timeline-company {
		width: 90%;
		font-size: 20px;
		padding: 0 10% 75px 0;
	}
	.timeline-year {
		padding: 0 0 25px 10%;
	}
	.timeline-year.alt-direction {
		padding: 0 10% 25px 0;
	}
	.timeline-company.alt-direction {
		text-align: right;
		padding: 0 0 75px 10%;
	}
	p.info-header2 {
		line-height: 32px !important;
	}

}

@media screen and (max-width: 430px) and (orientation: portrait){
	.menu-container {
		height: 70vh;
		margin: 20vh 0 0 0;
		padding: 15% 4% 25% 4% !important;
	}
	.item-container-1, .item-container-3, .item-container-4 {
		margin: 0 5% !important;
		padding: 140px 0 100px 0 !important;
	}
	.selected-container-1, .selected-container-3, .selected-container-4 {
		padding: 130px 0 110px 0;
	}
	.portfolio-item-1, .portfolio-item-3 {
		width: 40%;
		margin: 0.5% 5% 10%;
	}
	.portfolio-item-4 {
		height: 175px !important;
	}
	.portfolio-item-1.two-col, .portfolio-item-3.two-col {
		width: 90%;
		margin: 0.5% 5% 10%;
	}
	.display-items {
		padding: 140px 0 0 0;
		margin: 0 7.5%;
	}
	.displayset-1, .displayset-2, .displayset-3, .displayset-4, .displayset-5, .displayset-6, .displayset-7, .displayset-8 {
		padding: 80px 0 0 0;
		grid-template-columns: 0.3fr 1fr;
		grid-template-rows: 0.6fr 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
	.displayBannerLarge, 
	.displayVideoLarge {
		height: 35vh;
		align-self: start;
		padding: 0 0 100px 0;
	}
	
	.displayBannerLarge2 img { max-width: 180px; }
	.displayBannerLarge3 img { max-width: 225px; }
	.displayBannerLarge4 img { max-width: 125px; }
	.displayBannerLarge5 img { max-width: 67px; }
	.displayVideoLarge3 video { max-width: 140px; }

	.menu-item p.heading, p.info-header, p.info-header2, p.contact-header, p.about-header-bottom {
		font-size: 19px;
		line-height: 23px;
	}
	.menu-item p.description {
		font-size: 15px;
		line-height: 19px;
		margin: 0;
	}
	p.info-header, p.about-header-bottom, p.contact-header {
		font-size: 32px;
		line-height: 38px;
	}
}

@media screen and (max-width: 400px) and (orientation: portrait){
	.name-header {
		font-size: 32px;
		line-height: 34px;
		padding: 20px 10px 20px 0;
	}
	.nav-link {
		font-size: 16px;
	}
	.nav-line {
		top: 118px;
	}
	.nav-top {
		padding-bottom: 22px;
	}

	.menu-container {
		height: 60vh;
		margin: 25vh 0 0 0;
		padding: 0 4% 20% 4% !important;
	}
	.menu-item p.heading {
		font-size: 17px;
		line-height: 21px;
		margin: 0 0 20px 0;
	}
	.menu-item p.description {
		font-size: 13px;
		line-height: 16px;
		margin: 0;
	}
	.selected-container-1, .selected-container-3, .selected-container-4 {
		padding: 100px 0 80px 0;
	}
	.item-container-1, .item-container-3, .item-container-4 {
		padding: 110px 0 70px 0 !important;
	}
	.portfolio-item-1, .portfolio-item-3 {
		height: 120px !important;
	}
	.portfolio-item-4 {
		height: 175px !important;
	}
	.selected-container-1 img, .selected-container-3 img, .selected-container-4 img, .selected-container-4 video,
	.selected-container-1 img.two-col, .selected-container-3 img.two-col {
		max-width: 350px !important;
	}
	.display-items {
		padding: 100px 0 0 0;
		margin: 0 10%;
	}
	.displayBannerThumbs, .displayVideoThumbs {
		width: 85%;
		height: 140px;
		margin: 7.5% 0 0 0;
		grid-area: 1 / 2 / 2 / 3;
		grid-row-gap: 0px;
		grid-column-gap: 0px;
		align-self: center;
	}
	.displayVideoThumbs {
		margin: 0;
	}
	.displayBannerLarge,
	.displayVideoLarge {
		width: 95%;
		height: 50vh;
		grid-area: 2 / 1 / 3 / 3;
		align-self: center;
		margin: 0 0 0 2.5%;
	}
	.displayBannerLarge {
		width: 90%;
		margin: 0 0 2.5% 5%;
	}
	.displayVideoLarge1 video, .displayVideoLarge2 video, .displayVideoLarge5 video, .displayVideoLarge6 video {
		max-width: 300px;
	}
	.displayVideoLarge3 video {
		max-width: 130px;
	}
	.displayVideoLarge4 video {
		max-width: 220px;
	}
	.displayset-1, .displayset-2, .displayset-3, .displayset-4, .displayset-5, .displayset-6, .displayset-7, .displayset-8 {
		padding: 100px 0 0 0;
		grid-template-columns: 0.3fr 1fr;
		grid-template-rows: 0.8fr 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
	.displayBackButton {
		grid-area: 1 / 1 / 2 / 2;
		align-self: center;
	}
	.displayBannerLarge2 img { max-width: 180px; }
	.displayBannerLarge3 img { max-width: 225px; }
	.displayBannerLarge4 img { max-width: 125px; }
	.displayBannerLarge5 img { max-width: 67px; }
	.displayVideoLarge3 video { max-width: 140px; }

	.info-container {
		padding: 200px 0 10% 0;
	}
	p.contact-header,
	p.info-header,
	p.about-header-bottom {
		font-size: 32px;
    	line-height: 36px;
	}
	p.info-header, p.contact-header {
		margin: 0px 5% 50px 5%;
	}
	form {
		width: 280px;
		padding: 3em 1em 1em 1em;
	}
}

@media screen and (max-width: 375px) and (orientation: portrait){
	.menu-container {
		height: 55vh;
		margin: 27vh 0 0 0;
		padding: 0 4% 0 4% !important;
	}
	.menu-item p.heading {
		font-size: 1.05em;
		line-height: 1.2em;
	}
	.menu-item p.description {
		font-size: 0.7em;
		line-height: 1.25em;
		letter-spacing: 0.7px;
	}
	.portfolio-item-1, .portfolio-item-3 {
		height: 110px !important;
	}
	.portfolio-item-4 {
		height: 180px !important;
	}
	.display-items {
		padding: 110px 0 0 0;
		margin: 0 12.5%;
	}
	.displayBannerLarge,
	.displayVideoLarge {
		height: 40vh;
	}
	.displayBannerLarge2 img { max-width: 150px; }
	.displayBannerLarge3 img { max-width: 195px; }
	.displayBannerLarge4 img { max-width: 100px; }
	.displayBannerLarge5 img { max-width: 55px; }
	.displayVideoLarge3 video { max-width: 130px; }
}

@media screen and (max-width: 360px) and (orientation: portrait){
	.menu-container {
		height: 55vh;
		margin: 28vh 0 0 0;
	}
	.menu-item p.heading {
		font-size: 1em;
	}
	.menu-item p.description {
		font-size: 0.7em;
		line-height: 1.1em;
		letter-spacing: 0.5px;
	}
	.selected-container-1 img, .selected-container-3 img, .selected-container-4 img, .selected-container-4 video,
	.selected-container-1 img.two-col, .selected-container-3 img.two-col {
		max-width: 330px !important;
	}
	.displayBannerLarge,
	.displayVideoLarge {
		height: 45vh;
	}
}