@charset "utf-8";

@font-face {
	font-family: "Open Sans Condensed";
	src: url("../fonts/OpenSansCondensed-Light.ttf") format("truetype");
}

@font-face {
	font-family: "Archivo Black";
	src: url("../fonts/ArchivoBlack-Regular.ttf") format("truetype");
}

html, body {
    margin: 0;
    height: 100%;
    
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    
    line-height: 1.5;
    
    font-size: 24px;
	font-family: "Open Sans Condensed", sans-serif;	
    
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -ms-content-zooming: none;
    -ms-touch-action: pan-x pan-y;
    -webkit-appearance: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    
	color: black;
	background-color: shite;

	cursor: default;
}

body {
	opacity: 0;
}


/* DARK */

.dark:not(.div_sectionHeading):not(.div_sectionHeading_selected, #div_header, #div_footer, #div_footer a) {
	color: white !important;
	background-color: rgba(0, 0, 0, 1) !important;
	background-image: none !important;
}

.dark.div_sectionHeading:not(.div_sectionHeading_selected, #div_header, #div_footer a) {
	color: white !important;
	background-color: #202020 !important;
}

.dark.div_sectionHeading_selected {
	color: black !important;
	background-color: white !important;
}

.dark.div_sectionHeading span {
	border-bottom: 1px dashed rgba(255, 255, 255, 0.5) !important;
}


/* GENERAL*/

ul {
	margin-left: -12px !important;
}

ul >li:first-child,
ol >li:first-child,
 {
	margin-top: -10px;
}

li:not(:first-child) {
	margin-top: 8px;
}

.li_spacer {
	margin-top: -12px !important;

	list-style-type: none;
}

.li_highlight {
	margin-top: 30px !important;
	margin-bottom: 25px !important;

	border-top: 1px solid rgb(174, 174, 174) !important;
	border-bottom: 1px solid rgb(174, 174, 174) !important;
}

.div_sectionContent ul > li > ul {
    padding-left: 14px;

    list-style-type: none;
}

.div_sectionContent ul > li > ul > li {
    position: relative;

    padding-left: 20px;
}

.div_sectionContent ul > li > ul > li::before {
    position: absolute;
    left: 0;
    top: 12px;
    
	content: "▪";

    line-height: 1;
    
	font-size: 14px;
    
	color: gray;
}

i {
	margin-right: 5px;
}

.center {
	text-align: center !important;
}

.sucked {
	margin-bottom: -12px !important;
}

.squished {
	margin-top: 6px !important;
}

.minor_headroom {
	margin-top: 30px !important;
}

.headroom {
	margin-top: 40px !important;
}

.p_thankyou {
	margin-top: 84px;
	margin-bottom: -78px;

	padding-right: 40px;

	text-align: center;
}

b,
.bold {
	font-weight: 600 !important;
}

.ultraBold {
	font-weight: bold !important;
}

.color_red {
	color: red !important;
}

.notice {
	margin-right: 12px;

	padding-left: 12px;
	padding-right: 12px;

	color: white !important;
	background-color: black !important;
	border: 1px solid white !important;
	border-radius: 12px !important;
}

.div_plus {
	padding: 2px;
	margin-left: 6px;
	margin-right: 6px;

	color: white !important;
	background-color: black !important;
	border-radius: 50% !important;

	display: inline-block;
}
.plus::before {
	content: "+";
}

.highlight {
	background-color: rgba(255, 172, 28, 0.4);
}

.smaller {
	font-size: 80% !important;
}

.micro {
	font-size: 50% !important;
}

.span_pull {
	margin-left: -2px !important;
}

.span_push {
	margin-left: 1px !important;
}

.grayscale {
	filter: grayscale(0);
}

.transition {
	transition: all 2s ease;
}

.li_or::after {
	margin-left: 8px;

	content: "or:";

	font-family: serif;
	font-size: 80%;
	font-style: italic;

	color: rgba(0, 0, 0, 0.2);
}

.heading {
	font-family: sans-serif;
	font-size: 125% !important;
	font-weight: bold;
}

/* HEADING */

#div_header {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);

    width: fit-content;
    height: fit-content;

    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 4px;

    transition: color 1.5s ease;

    line-height: 1;
    text-align: center;

    font-family: "Archivo Black", sans-serif;
    font-size: 24px;
    text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.7), 1px 1px 0px rgba(255, 255, 255, 0.3);
    
    color: #457296;
    background-color: #7db9e8;
    background: linear-gradient(to bottom, #bee2fe 0%, #7db9e8 100%);
    border-radius: 18px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); 
    
    cursor: pointer;

    z-index: 1;
}

#div_header::before {
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    
    content: "";

    background-color: gray;
    background: linear-gradient(to bottom, gray 0%, black 100%);
    border-radius: 18px;
    
    opacity: 0;
    transition: opacity 1.5s ease;
    
    z-index: -1;
}

@media (hover: hover) {
	#div_header:hover {
		color: white;
	}

	#div_header:hover::before {
		opacity: 1;
	}
}

#div_footer {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    
    width: fit-content;
    height: fit-content;
    min-height: 14px;
    
    padding-top: 5px;
	padding-bottom: 4px;
    
    line-height: 1.3;
    text-align: center;

    font-size: 90%;

    color: white;
    background-color: #1e5799;
    background: linear-gradient(to bottom, #7db9e8 0%, #1e5799 100%);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.3);

    cursor: pointer;
    
    z-index: 1;
}

#div_footer::before {
	position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    
    content: "";

    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    background-color: limegreen;
    background: linear-gradient(to bottom, green 0%, limegreen 100%);
    
    opacity: 0;
	transition: opacity 2s ease;
    
	z-index: -1;
}

@media (hover: hover) {
	#div_footer:hover::before {
		opacity: 1;
	}
}

#div_footer a {
	padding-left: 20px;
	padding-right: 21px;

	text-decoration: none;
	
	color: white;

	cursor: pointer;
}


/* SECTIONS */

.div_welcomeSection {
	margin-top: 60px !important;

	counter-reset: numberCounter;
    counter-reset: alphaCounter;
}

.div_sectionHeading {
    margin-top: 20px;
    margin-bottom: 10px;
    
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 10px;
    
    font-weight: 600;
    
    color: rgba(0, 0, 0, 0.8);
    border-radius: 18px;
    
    cursor: pointer;
}
body>.div_sectionHeading {
	counter-increment: numberCounter;
}
div>.div_sectionHeading {
	counter-increment: alphaCounter;
}

.div_sectionHeading::before {
    margin-right: 16px;
    margin-left: -30px;
    
    width: 24px;
    height: 24px;
    font-size: 14px;
    
    text-align: center;
    line-height: 24px;
    vertical-align: 2px;
    
    color: #ffffff;
    background-color: #000000;
    border-radius: 50%;
    
    display: inline-block;
    font-weight: 600;
    font-family: inherit;
    z-index: 1;
}
body>.div_sectionHeading::before {
    content: counter(numberCounter);
}
div>.div_sectionHeading::before {
    content: counter(alphaCounter, upper-alpha);
}

.div_sectionContent {
	margin-left: 42px;
	margin-bottom: 36px;
	
	padding-left: 5px;
	padding-right: 10px;
	
	text-align: left;
	
	display: none;
}

.div_sectionContent_wide {
	margin-left: 0 !important;
	margin-bottom: 0 !important;
	
	padding-left: 0 !important;
	padding-right: 0 !important;

	transition: all 1s ease; 
}

.div_sectionHeading_over {
	background-color: rgba(0, 0, 0, 0.1) !important;
}

.div_sectionHeading_selected {
	margin-bottom: 20px !important;

	color: white !important;
	background-color: rgba(0, 0, 0, 1) !important;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);	
}

.div_sectionHeading span {
	border-bottom: 1px dashed rgba(0, 0, 0, 0.5);
}


/* PHOTOS */

.div_photo {
	width: 100%;
    height: fit-content;
	
    margin-top: 30px;
	
    line-height: 1.75;
    text-align: center;
    
	font-family: serif;
    font-size: 80%;
    font-style: italic;
}

.div_photo_noHeadroom {
	margin-top: 6px !important;
}

.div_photo img {
	width: 80%;
	max-width: 640px;
	height: auto;
	
	transition: all 1s ease; 
	
	border-radius: 8px;
	box-shadow: 10px 10px 10px gray;
	
	cursor: zoom-in;
}

.div_rendering {
	padding-top: 60px !important;
}

.div_rendering_squished img, 
.div_rendering img {
	box-shadow: none !important;
}

.img_photo_zoomed {
	width: 100% !important;
	max-width: 100% !important;

	cursor: zoom-out !important;
}


/* TABLE */

table {
	margin-left: auto;
	margin-right: auto;
	margin-top: 12px;

	width: auto; 
	max-width: 90%; 
	margin-inline: auto; 

	border-collapse: separate; 	
}

thead tr th:first-child {
	border-top-left-radius: 18px;
	border-bottom-left-radius: 18px;
}

thead tr th:last-child {
	border-top-right-radius: 18px;
	border-bottom-right-radius: 18px;
}

th {
	padding-left: 8px;
	padding-right: 8px;

	text-align: center;

	font-weight: bold;

	color: white;
	background-color: #404040;
}

td {
	padding-left: 8px;
	padding-right: 8px;

	vertical-align: top;
}

td:first-child {
	text-align: right;
	white-space: nowrap;

	font-weight: bold;
}

td:first-child:not(:empty)::after {
	content: ":";
}

.td_verylast_cell {
	padding-left: 20px;
}

.tr_short td {
	height: 18px !important;

	font-size: 18px;
}	

/* VIDEO & DETAILS */

#div_video {
  position: relative;
  
  width: 100%;
  max-width: 640px;
 
  margin: 0 auto;
 
  aspect-ratio: 16 / 9;
}

#div_video video {
  position: absolute;
  top: 0;
  left: 0;
 
  width: 100%;
  height: 100%;
 
  transform: none;
 
  object-fit: contain;
  cursor: pointer;
}

#span_detailsTrigger {
	padding-left: 2px;
	padding-right: 2px;

	transition: all 1s ease;

	border-bottom: 1px dashed silver;

	cursor: pointer;
}

.span_detailsTrigger_over {
	background-color: rgba(0, 0, 0, 0.1) !important;
}

#div_details {
	margin-top: 40px;

	display: none;
}