:root {
	--bg-color: #F8F9FD;
	--header-color:#1D1B55;
	--text-color: #202040;
	--links-color: #3A65FF;
	--active-color: #2D56E9;
	--visited-color: #704AAD;
	--caption-color: #555E7E;
	--block-color: #FFF;
	--subtle-color:#EFEFF9;
	--invert-bg: #EFEFF9;
	--invert-text:#555E7E;
	}

/*@media (prefers-color-scheme: dark){
	:root {
	--bg-color: #1E1E2A;
  --header-color:#F4F8FF;
	--text-color: #E5ECF8;
	--links-color: #6C8CFF;
	--active-color: #5379FF;
	--visited-color: #7E6DE7;
	--caption-color: #B5BBD3;
	--block-color: #1E1E2A;
	--subtle-color: #191925;
	--invert-bg: #1E1E2A;
	--invert-text: #DDE2F6;
}
} */



body{

	margin: 0;
	padding: 0;
	font:16px/1.5 "Poppins", sans-serif;
	font-weight:300;
	color:var(--text-color);
	background:var(--bg-color);
	display:flex;
	flex-direction:column;
	min-height: 100vh;
	line-height:180%;
	}

	h1{
		font-weight:500;
		font-size:36px;
		font-style:"normal";
		line-height:1.1
		}
		h2{
			font-weight:500;
			font-size:28px;
			font-style:"normal";
			line-height:1.5
			}
			h3{
				font-weight:500;
				font-size:22px;
				font-style:"normal";
				line-height:1.5

				}
a {
	color:var(--links-color);
}

a:visited {
	color: var(--visited-color);
}

a:hover {
	color: var(--active-color);
}
/* section for text styles */

.caption {
	font-size:16px;
	color:var(--caption-color);
}

.caption-white {
	font-size:16px;
	color:#fff;
}
.nolinkcolor {
	color:var(--text-color);
	text-decoration: none;
}
.quote{
	font-size:20px;
	font-weight: 300;
	color: var(--caption-color);
	border-left: 6px solid;
	border-color: var(--subtle-color);
	padding-left:24px;
	padding-right: 32px;
}

@media screen and (max-width:768px) {
	.quote{
		padding-left:4px;
		font-size:18px;
	}
}
/* multicolumn */
.multicolumn {
	display:flex;
	flex-wrap: wrap;
}
.column-equal {
	flex:1;
}

.column-bigger {
	flex:3;
}
.column-2x {
	flex:2;
}

.left_column {
	flex: 0 0 25%;
    max-width: 25%;
		min-width: 250px;
		margin-right:64px;
}
.main_column {
	flex: 1;
  max-width: 600px;
}

.paddingL{
	padding-left:16px;
	padding-right:16px;
}



@media (max-width: 800px) {
    .left_column, .main_column, .column-equal, .column-2x {
        flex: 1 0 100%;
        max-width: 100%;
    }
}

.paddingL-left{
	padding-right:8px;
}
.paddingL-right {
	padding-left:8px;
}

@media (max-width: 800px) {
	.paddingL-left, .paddingL-right, .paddingL {
		padding: 0px;
	}
}

.paddingXL{
	padding-left:128px;
	padding-right:32px;
}
@media (max-width: 800px) {
	.paddingXL{
		padding-left: 32px;
		padding-right:32px;
	}
}

.padding-vertical{
	padding-bottom:64px;
}
@media (max-width: 800px) {
	.padding-vertical{
		padding-bottom:0px;
	}
}


/* images collection */
.img-veriscend-tile {
    background-image: url('images/IMG_9695+copy.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-veriscend-cover {
	    background-image: url('images/veriscend-inner-cover.jpeg');
			background-size: cover;
			background-position: center;
		}

.img-meer-tile {
	  background-image: url('images/meer-cover-new.jpg');
		background-size: cover;
		background-position: center;
	}

	.img-meer-cover {
		  background-image: url('images/meer-cover-inner.jpg');
			background-size: cover;
			background-position: center;
		}

.img-osono-tile {
		background-image: url('images/osono-tile.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-osono-cover {
			background-image: url('images/osonoscrens.jpeg');
			background-size: cover;
			background-position: center;
		}

	.img-radiant1-cover {
		background-image: url('images/hires2.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-veriscend-laptop {
		background-image: url('images/IMG_9686.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-veriscend-closeup {
		background-image: url('images/IMG_9687.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-veriscend-closeup2 {
		background-image: url('images/IMG_9689.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-veriscend-closeup3 {
		background-image: url('images/IMG_9694.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-veriscend-closeup4 {
		background-image: url('images/IMG_9695+copy.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-meer-process1 {
		background-image: url('images/meer-journeymap.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-meer-process2 {
		background-image: url('images/meer-process-2.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-meer-wireframe1{
		background-image: url('images/meer-wires-1.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-meer-wireframe2{
		background-image: url('images/meer-wires-2.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-meer-wireframe3{
		background-image: url('images/meer-wires-3.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-meer-closeup1 {
		background-image: url('images/IMG_9722.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-osono-cover2 {
		background-image: url('images/osonoscrens.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-osono-start {
		background-image: url('images/osono-start.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-goodnews-cover {
		background-image: url('images/goodnews-cover.jpeg');
		background-size: cover;
		background-position: center;
	}

	.img-goodnews-paper0 {
		background-image: url('images/good-paper-0.jpeg');
		background-size: cover;
		background-position: center;
	}
	.img-goodnews-paper1 {
		background-image: url('images/good-paper-1.jpeg');
		background-size: cover;
		background-position: center;
	}
	.img-goodnews-paper2 {
		background-image: url('images/good-paper-2.jpeg');
		background-size: cover;
		background-position: center;
	}
	.img-goodnews-paper3 {
		background-image: url('images/good-paper-3.jpeg');
		background-size: cover;
		background-position: center;
	}
	.img-mull-tile {
		background-image: url('images/mull-tile2.jpg');
		background-size: cover;
		background-position: center;
	}
	.img-mull-cover {
		background-image: url('images/mull-cover-new2.jpg');
		background-size: cover;
		background-position: center;
	}
	.img-mull-photo {
		background-image: url('images/mull-photo.jpeg');
		background-size: cover;
		background-position: center;
	}

/* full width images */
		.full-width-image {
		    height: 500px;
		    background-size: cover;
		    background-position: center;
				margin-top: 48px;
		}
		.full-width-image-big {
				height: 650px;
				background-size: cover;
				background-position: center;
				margin-top: 48px;
		}

.image-link{
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.image-link:hover{
	opacity: 0.9;
}


/* Image grid */
.content-block {
	margin: 24px auto;
	padding-left: 24px;
	padding-right: 24px;
	max-width: 1000px;


}

.content-block-wide {
	margin: 0 auto;
	max-width: 1200px;
	padding-left:24px;
	padding-right:24px;

}


.image {
    height:400px;
}


.image-screenshot {
	height:200px;
}


.grid-item {
	height:auto;
}
.image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.image:hover img {
    transform: scale(1.02);
}
.image-info {
    padding: 8px;
		margin-bottom:24px;
}

.image-info h3 {
    margin: 0;
}

.image-info p {
    margin: 5px 0;
}


/* Navigation menu styles */
.navigation-menu {
    position: fixed;
    top: 0;
    right: -300px; /* Initially hidden off-screen */
    width: 250px;
    height: 100vh;
    background-color: var(--invert-bg);
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
		z-index:1000;
		display:flex;
		flex-direction:column;

}

.navigation-menu ul {
    list-style: none;
    padding: 0;
		margin: 0;
		margin-top:64px;
		width:100%;
}

.navigation-menu ul li {
    margin-bottom: 16px;
		width:100%;
}

.navigation-menu ul li a {
    color: var(--invert-text);
    text-decoration: none;
    font-size: 18px;
		margin-left:8px;
		margin-top:8px;
		margin-bottom:8px;
}

.navigation-menu ul li a:hover{
	border-bottom: 2px solid var(--active-color);
	color:var(--active-color);
	transition: all 0.2s ease-out;
}

.close-button {
	position: absolute;
    top: 16px;
    right: 32px;
    cursor: pointer;
}

.navigation-menu-selected{
	color: var(--active-color);
	margin-left:8px;
	margin-top:8px;
	margin-bottom:8px;
		border-bottom: 2px solid var(--active-color);
}

.navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 900;
		background-color:var(--bg-color);
		border-bottom:2px solid var(--subtle-color);


}

nav {
	width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
    font-size: 20px;
		font-weight:800;

}
.logo a {
	text-decoration: none;
	color: var(--text-color);
}

.nav-links {
    display: flex;
		gap: 40px;
		margin-right:48px;
}


.nav-links a {
    color: var(--text-color);
    text-decoration: none;
		transition: .4s ease-in-out;
}
.nav-links a:hover {
	color: var(--active-color);
}
.nav-links-selected {
	color: var(--active-color);
	border-bottom: 5px solid var(--active-color);
}

.hamburger {
	display:none;
}

@media screen and (max-width:768px) {
  .hamburger {
    display: flex;
    cursor: pointer;
		padding-right: 48px;
  }

	.nav-links {
    display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    right: 0;
    top: 58px;
    background-color: rgb(73, 51, 153);
    width: 100%;
    height: calc(100vh - 58px);
    padding-top: 60px;
    gap: 10vh;
  }
}




/* blocks */
.greyblock {
	margin-top: 64px;
	margin-bottom: 64px;
	padding-top:64px;
	padding-bottom: 64px;
	background-color: var(--subtle-color);
}

.darkblock {
	margin-top: 64px;
	margin-bottom: 64px;
	padding-top:64px;
	padding-bottom:64px;
	background-color: #2F3642;
}

.image-caption {
	margin: 16px;
	padding-top:16px;
	padding-bottom:16px;
	font: "Poppins", sans-serif;
}

.image-screen {
	border-radius: 8px;
	box-shadow:2px 2px 16px rgba(0, 0, 0, 0.05);
	width: 100%;
}

.image-100 {
	border-radius: 4px;
	width: 100%;
}

.mugshot {
	border-radius: 50%;
	width: 100%;
	max-width: 140px;
}


.image-round {
	width: 100%;
	border-radius:50%;
}
@media screen and (max-width:800px) {
	.image-round{
		width:256px;
		height:256px;
	}
}

.image-height {
	height: 400px;
}

.textblock_extramargin {
	padding:64px;
}

.dark_bg{
	color:#000;
}

/* buttons */

.cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--links-color);
    color: #fff;
    border: none;
    padding: 24px;
    font-size: 18px;
		font-weight:600;
    cursor: pointer;
    transition: background-color 0.3s ease;
		margin:0 16px;
}


.cta-button:hover {
    background-color: var(--active-color);
}

.cta-container{
	display: flex;
	justify-content: center;
	align-items: center;

}

.button_icon {
    width: 14px;
    height: 14px;
    margin-left: 8px;
}
.left_button_icon {
    width: 14px;
    height: 14px;
    margin-right: 8px;
}

.content{
	flex:1;
}

/* Carousel2 begins */
.slider {
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;

  overflow-x: auto;
  scroll-snap-type: x mandatory;



  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;


}

.slides::-webkit-scrollbar {
  width: 12px;
  height: 6px;
}

.slides::-webkit-scrollbar-thumb {
  border-radius: 50%;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  height: 500px;
  margin-right: 48px;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
	background-color: #FFFFFF;
	box-shadow:2px 2px 16px rgba(0, 0, 0, 0.05);

  display: flex;
  justify-content: center;
  align-items: center;
}

.slider > a {
  display: inline-flex;
  width: 18px;
  height: 18px;
  background: var(--subtle-color);
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
}
.slider > a:active {
  top: 1px;
	background: var(--active-color);
}
.slider > a:focus {
  background: var(--active-color);
}

.slider > a:visited {
  background: var(--text-color);
}
/* Carousel 2 ends */


.nicer_list{
	margin-bottom:16px;
}
.nicer_list li{
	margin-bottom:16px;
}

.quotes_block{
	width: 60%;
}

.megaquote-container{
	display: flex;
	 justify-content: center;
	 align-items: center;
	 margin-top:256px;
	 margin-bottom:256px;
	 margin-right:24px;
	 margin-left:24px;
}
.megaquote-text{
	font-size: 20px;
	max-width: 450px;
}

/* Progressive image classes */


.progressive-image {
	position: relative;
	overflow: hidden;
}

.progressive-image div {
  width: 100%;
	padding-top: 50%;
	background-size: cover!important;
	background-position: center bottom!important;
}

.progressive-image .loadingImage {
	filter: blur(10px);
}

.progressive-image .overlay {
	position: absolute;
  top: 0;
	opacity: 0;
	transition: opacity 200ms ease-in;
}

.image-group {
	margin-top:60px;
}
/* Second progressive loader experiment */

.extra-padding{
	margin-bottom:64px;
}
.extra-padding-right{
	padding-right: 64px;
}

.enormous-padding{
	padding-bottom:128px;
}

.no-top-padding{
	padding-top:0px;
	margin-top:0px;
}

.top-padding-32{
	margin-top:8px;
}
.bottom-padding-8{
	padding-bottom:8px;
}

.bottom-padding-16{
	padding-bottom:16px;
}

.row-container{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
}
@media (max-width: 800px) {
	.row-container {
		flex-direction:column;
	}
}

.tile-container{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex-basis: auto;

}
.ruler-container{
	display:flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;

}
.ruler-description{
	flex:1;
}

.date-ruler{
	font-size:12px;
	color: var(--caption-color);
	vertical-align: middle;
}

.tile-right{
}

@media (max-width: 800px) {
	.tile-right {
		order:-1;
	}
}
.padding-right-4{
	padding-right:4px;
}

.padding-left-4{
	padding-right:4px;
}

.align-right{
	text-align: right;
}
@media (max-width: 800px) {
	.align-right {
		text-align:left;
	}
}

.hr {
	border-bottom: 1px #B4B7C0 solid;
	flex:1;
}

.bento-container {
	width:100%;
	padding-left:0px;
	margin-left:0px;
}

.bento-block{
	background-color: var(--subtle-color);
	border-radius: 4px;
	height:100px;
	padding:24px;
	display:flex;
	flex-direction: column;
	justify-content:center;
	align-items: center;
	gap:0px;
}

.bento-display{
	color:var(--text-color);
	font-size:32px;
	margin-bottom:0px;
	text-align: center;
}
.bento-text{
	color:var(--text-color);
	font-size:13px;
	text-align: center;
	padding-top:0px;
}

/* D3 experiment */
.day-date{
	font-weight: normal;
	text-align: left;
	padding: 8px;
	border-bottom: 1px #AAAAAA solid;
}
.day-low{
	font-weight: normal;
	text-align: left;
	padding: 8px;
	border-bottom: 1px #AAAAAA solid;
}
.day-high{
	font-weight: normal;
	text-align: left;
	padding: 8px;
	border-bottom: 1px #AAAAAA solid;
}
.head-date{
	font-weight: 700;
	text-align: left;
	padding: 8px;
	border-bottom: 1px #AAAAAA solid;
}
.head-temp-low{
	font-weight: 700;
	text-align: left;
	padding: 8px;
	border-bottom: 1px #AAAAAA solid;
}
.head-temp-high{
	font-weight: 700;
	text-align: left;
	padding: 8px;
	border-bottom: 1px #AAAAAA solid;
}

.disclaimer-light{
	background-color: #E5EBFD;

	padding-top:16px;
	padding-bottom:16px;
	border-radius: 4px;
	color: #1D1B55;
	font-size: 14px;
	line-height: 160%;
	width:100%;
	text-align:center;
	vertical-align: middle;
}

.disclaimer-dark{
	background-color: #323243;

	padding-top:16px;
	padding-bottom:16px;
	border-radius: 4px;
	color: #B0B0DA;
	font-size: 14px;
	line-height: 160%;
	width:100%;
	text-align:center;
	vertical-align: middle;
}


}
/* Footer */
.footer{
	margin-top:128px;
	padding-top:32px;
	padding-bottom: 32px;
	background-color: var(--subtle-color);
	width: 100%;
}


.debug{
	border: 1px solid #FF0000;
}