/* General */
html {
	scroll-behavior: smooth;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust:100%
	}

body {
	font-family: "Helvetica Neue", sans-serif; 
	font-size: 15px;
	line-height:1.5;
	scroll-behavior: smooth;
	--text-color: #212124;
  	--bkg-color: rgb(250, 250, 250);
}

body.dark-theme {
	--text-color: rgb(250, 250, 250);
  	--bkg-color: #212124;
}

/* dark mode settings*/

@media (prefers-color-scheme: dark) {
	body {
		--text-color: rgb(250, 250, 250);
		--bkg-color: #212124;
	}

	body.light-theme {
		--text-color: #212124;
		--bkg-color: rgb(250, 250, 250);
	  }
}

body {
	background: var(--bkg-color);
	color: var(--text-color);
  }

footer {
	height: fit-content; 
	align-items: center; 
	/* scroll-snap-align: end;  */
	overflow-y: visible;
}

.avatar {
	display: flex;
	margin: auto;
	max-width: 70%;
	height: auto;
	border-radius: 50%;
}

.wrapper {
	height: 100vh;
	width: 100%;
	overflow-y: scroll;
	grid-auto-flow: row;
	overscroll-behavior-y: contain;
	margin: 0 0;
	padding: 0rem;
	display: grid;
	/* scroll-snap-type: y mandatory; */
}

.slide {
	padding:4rem 4rem;
	position: relative;
	height: fit-content;
}

#slide2, #slide3, #slide4 {
	padding:4rem 4rem;
	align-items: center;
	position: relative;
	/* scroll-snap-align: start; */
}

.slide:after,.slide:before{content:""; display:table; clear:both}

/* Text Styles & Decorations */
h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}
h1,h2,h3,h4,h5,h6{
	font-weight:400;
	margin:10px 0;
}

table td, table td * {
    vertical-align: baseline;
}

.medium{font-size: 15px!important;}
.large{font-size:18px!important}
.wide{letter-spacing:4px}

.heavy{font-weight: 500;}

.hvert{
	writing-mode: vertical-rl;
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	transform:rotate(-90deg);
	font-size: 48px;
	letter-spacing:2vh;
	text-align: start;
	line-height: 7vw;
	margin-top: 32px;
}

.hvertcontact{
	writing-mode: vertical-rl;
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	transform:rotate(-90deg);
	letter-spacing:14px;
	text-align: start;
	line-height: 5vw;
	margin: 0; 
	height:100%
}

.buzzwords{
	max-width: 40vw;
	margin-right: 64px;
	margin-top: 64px;
	margin-bottom: 0px;
	min-height: 100%;
}

.underline-green{
	border-bottom: 3px solid rgb(150, 206, 180); 
	padding-bottom: 0.05rem;
}
.underline-yellow{
	border-bottom: 3px solid rgb(255, 238, 173); 
	padding-bottom: 0.05rem;
}
.underline-red{
	border-bottom: 3px solid rgb(217, 83, 79); 
	padding-bottom: 0.05rem;
}
.underline-orange{
	border-bottom: 3px solid rgb(255, 173, 96); 
	padding-bottom: 0.05rem;
}

a{
	background-color:transparent;
	text-decoration: underline;
	color: inherit;
}
p>a:active,p>a:hover{
	outline-width:0;
	color: #858485 
}

.home-button {
	margin-left: 16px; 
	min-width: 86px; 
	border-right: 0.1rem solid var(--text-color);
	/* mix-blend-mode: difference; */
}

/* Alignment */
.center{text-align:center!important;}
.justify{text-align: justify!important;}
.left{float:left!important; text-align: left!important;}
.right{float:right!important;}
.top,.bottom{
	position:fixed;
	width:100%;
	z-index:1
}
.top{top:0}
.bottom{bottom:0}

/* Containers and div Classes */
.half{
	width:49.99999%;
	padding:0 8px;
	display: flex;
	flex-direction:column;
}

.row {
	padding:0 ;
	display: flex;
	flex-direction:row;
}

.column {
	padding:0 8px;
	flex-direction:column;
}

.container {
	max-width: 100%;
  	margin-left: auto;
  	margin-right: auto;
	position: relative;
	overflow-y: scroll;
	overflow-x: hidden;
	align-items: center;
}

.container:after,.container:before,.row:after,.row:before{content:""; display:table; clear:both}

/* Borders and Padding */
img{border-radius: 0%;}

.padding-16{padding-top:16px!important;padding-bottom:16px!important}
.padding-32{padding-top:32px!important;padding-bottom:32px!important}
.padding-64{padding-top:64px!important;padding-bottom:64px!important}

/* Colours */

.opacity,.hover-opacity:hover{opacity:0.60}.opacity-off,.hover-opacity-off:hover{opacity:1}
.opacity-max{opacity:0.25}.opacity-min{opacity:0.75}
.hover-shadow:hover {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }

.button{
	display:inline-block;
	/* padding:8px 8px; */
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	text-transform: uppercase;
	position: relative;
}

.button-green, .button-yellow, .button-red, .button-orange{
	display:inline-block;
	padding:8px 8px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	text-transform: uppercase;
	position: relative;
}
.logo{
	display: inline-block;
	padding: 16px 16px;
	vertical-align:middle;
	overflow:hidden;
	position: relative;
	height: 72px;
	margin-right: -74px;
}

.header-button{
	border: 0.05rem solid var(--text-color);
	/* padding:8px 8px; */
	display: inline-block;
	vertical-align:middle;
	overflow:hidden;
	/* position: relative; */
	min-width: 86px;
	/* margin-left: 16px; */
	/* margin-right: 16px; */
}

.bar2-button{
	display:inline-block;
	padding:8px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	text-transform: uppercase;
	color:inherit;
	background-color:inherit;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	min-width: 86px;
	margin-left: 16px;
	margin-right: 16px;
}

.active, .header-button:hover, .bar2-button:hover{
	background-color: var(--text-color);
	color: var(--bkg-color);
}

.hide{
	display:none!important
}
.show{display:block!important}

/* Nav-Bar */
.button-green:after, .button-yellow:after, .button-red:after, .button-orange:after {
	content: '';
	position: absolute;
	align-self: center;
	width: 100%;
	transform: scaleX(0);
	height: 0.208vw;
	bottom: 0;
	left: 0;
	transform-origin: bottom right;
	transition: transform 1s ease-out;
}

.button-green:after{background-color: rgb(150, 206, 180);}
.button-yellow:after{background-color: rgb(255, 238, 173);}
.button-red:after{background-color: rgb(217, 83, 79);}
.button-orange:after{background-color: rgb(255, 173, 96);}
  
.button-green:hover:after, .button-yellow:hover:after, .button-red:hover:after, .button-orange:hover:after {
	transform: scaleX(1);
	transform-origin: bottom left;
  }

/* Animations */
.button {
	animation: fadeInAnimation ease 3.7s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

p.justify {
	animation: fadeInAnimation ease 1.7s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

p.opacity {
	animation: fadeInAnimation ease 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

p, ol, table, ul {
	animation: fadeInAnimationZ ease 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.bar2-button, button {
	animation: fadeInAnimation ease 2.3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

h1,h2 {
	animation: fadeInAnimation ease 2.3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

h3,h4,h5,h6 {
	animation: fadeInAnimationX ease 2.3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

img {
	animation: appear ease 3.3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@-webkit-keyframes slide {
	0% { opacity:0; transform: translateY(-50%); }  
100% { opacity:1; transform: translateY(0%); } 
}
@keyframes slide {
	0% { opacity:0; transform: translateY(-50%); }  
100% { opacity:1; transform: translateY(0%); } 
}
  
@keyframes fadeInAnimation {
	0% {
	transform: translateX(-50%);
}
100% {
	transform: translateX(0);
			}}

@keyframes fadeInAnimationX {
	0% {
	transform: translateX(-20%);
}
100% {
	transform: translateX(0);
			}}			
@keyframes fadeInAnimationY {
	0% {
	transform: translateY(-20%);
}
100% {
	transform: translateY(0);
			}}

@keyframes fadeInAnimationZ {
	0% {
	transform: translateX(50%);
}
100% {
	transform: translateX(0);
			}}

@keyframes appear {
	from{opacity: 0;
		filter: sepia(100%);}
	to{opacity: 1;
		filter: sepia(0%);} }

/* Small Screen Settings */

@media (max-width:799px) and (min-height:550px){
	body{
		padding: 0 0;
	}

	.hide-small{display:none!important}
	/* .hide-medium{display:none!important} */

	.wrapper {
		height: 100vh;
		max-width: 100vw;
		overflow-y: scroll;
		overflow-x: contain;
		grid-auto-flow: row;
		overscroll-behavior-y: contain;
		margin: 0 0;
		padding: 4 4;
		display: grid;
		/* scroll-snap-type: y mandatory; */
	}

	.avatar { 
		display: flex;
		margin: auto;
		max-width: 100%;
		height: auto;
		border-radius: 50%;
	}

	.slide {
		padding: 8px 16px 16px 8px;
		width: 100%;
		height: fit-content;
		position: relative;
		/* scroll-snap-align: start; */
	}

	#slide2small, #slide3small, #slide4small {
		height: fit-content;
		padding: 8px 8px 16px 8px;
		margin-top: 16px;
		margin-bottom: 16px;
		align-items: center;
		position: relative;
		/* scroll-snap-align: start; */
	}

	.hvertsmall{
		writing-mode: vertical-rl;
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		transform:rotate(-90deg);
		letter-spacing:8px;
		text-align: start;
		line-height: 3em;
	}

	.container, .row {
		width: 100%;
		padding:0 0;
		margin: 0 0;
	}

	.bar2-button {
		font-size: 12px;
		padding: 4px 4px;
		margin: 4px 4px 4px 4px;
	}

	.active, .bar2-button:hover{
		background-color: var(--text-color);
		color: var(--bkg-color);
	};

	.button_small, .btn-toggle-small{
		display:inline-block;
		padding:8px 16px;
		vertical-align:middle;
		overflow:hidden;
		text-decoration:none;
		text-align:center;
		cursor:pointer;
		white-space:nowrap;
		text-transform: uppercase;
		position: relative;
	};

	.button_small, .btn-toggle-small, .col {
		animation: fadeInAnimationY ease 1s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	};

	.show{display:absolute!important};
}
@media (min-width:800px){
	.hide-large{display:none!important}
}

@media (orientation: landscape){
	.hide-large{display: none!important;}
}

/* @media (max-width:799px) and (orientation:landscape){
	body{
		padding: 0 0;
	}
	.hide-medium{display:none!important}
} */