/*--------------------------------------------------------------------/*
/*		ITMA css file (expanded by PHP)
/*--------------------------------------------------------------------/*

/*--------------------------------------------------------------------
/*		Fix for mobile devices?
/*--------------------------------------------------------------------*/
html {
	height:100%;
	min-height:100%;
	}
body {min-height:100%}

/*--------------------------------------------------------------------/*
/*		CSS reset/normalize from Josh Comeau
/*--------------------------------------------------------------------*/

*,*::before,*::after {box-sizing: border-box}
* {margin: 0}
body {line-height: 1.5}
div, img, picture, video, canvas, svg {display:inline-block; max-width: 100%}
/* input, button, textarea, select {font: inherit} */
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word; font-weight:normal}

/*--------------------------------------------------------------------*/
/*		DIV arrangement definition:
/*			To center horizontally means to add spaces left and right;
/*			this is the same as centering around a vertical axis.
/*--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
/*		Basic DIV Classes
/*--------------------------------------------------------------------*/
.stdCenterH {
	display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem 2rem;
	}

/* Parent DIV to center any contents horizontally */
.center {
	display:block; /* Extend 100% horizontally */
	text-align:center;
	}

/*--------------------------------------------------------------------*/
/*		Define fonts
/*--------------------------------------------------------------------*/

	@font-face {
		font-family: Rubik;
		src: url(Rubik-VariableFont.woff);
		}
	
	@font-face {
		font-family: Consolas;
		src: url(fonts/Consolas.woff);
		}
	
/*--------------------------------------------------------------------*/
/*		Other
/*--------------------------------------------------------------------*/
.par { display:block}
pre { font-family: Consolas,sans-serif; font-size: 1rem}
.grayErrBg {background-color:#aaa}
.border { }
p {padding-bottom:1rem}
.nowrap {white-space: nowrap;}
.lineH { /* horizontal line; Must set color with GenLineH */
	display:inline-block;
	/* width: 10rem; */
	/* min-width:1rem; */
	/* flex: 0 1 1rem; */
	width: 100%;
	background-color: #000;
	height: 3px;
	}

/*--------------------------------------------------------------------*/
/*		Entire page (used for hamburger checked state)
/*--------------------------------------------------------------------*/
#entirePage {
	display:block;
	padding-bottom: 2rem;
	}
#toggle {display:none}

/*--------------------------------------------------------------------*/
/*		Entire page > Header
/*--------------------------------------------------------------------*/
#header {
	;
	padding:2rem 2rem;
	}

/*--------------------------------------------------------------------*/
/*		Entire page > Header > headerTop
/*--------------------------------------------------------------------*/
#headerTopPar { }
#headerTop { }

/*--------------------------------------------------------------------*/
/*		Entire page > Header > headerTop > Language dropdown
/*--------------------------------------------------------------------*/
/* Language dropdown */
#language {
	border:2px solid #017e8c;
	border-radius:.25rem;
	padding:.25rem;
	}

/*--------------------------------------------------------------------*/
/*		Entire page > Header > headerTop > Hamburger menu
/*--------------------------------------------------------------------*/
#hamburger {
	user-select:none;
	pointer-events:unset;
	transform:scale(1.5,1.2);
	padding:0 .2rem .0 .2rem;
	font-size:1.5rem;
	border: 2px solid transparent; /* Placeholder */
	transition:.6s;
	}

/*--------------------------------------------------------------------*/
/*		Entire page > Header > headerTop > adjust for width
/*--------------------------------------------------------------------*/
#header {display:block; padding-right:2rem}
@media (min-width:734px) {
	#headerTopPar {float:right}
	#headerTop {float:right}
	#language {float:right}
	#hamburger {display:none}
	} /* End wide */
@media (max-width:734px) {
	/* Hamburger frame when checked */
	#toggle:checked ~ #header #headerTop #hamburger {
		border: 2px solid black;
		}
	} /* End tiny or narrow */
@media (min-width: 573px) and (max-width: 734px) {
	#headerTopPar {float:right}
	#language {margin-top:.5rem;margin-right:2rem}
	#hamburger {float:right; margin-top:.25rem}
	} /* End ifNarrow */
@media (max-width:573px) {
	#header {display:block}
	#headerTop {
		width:calc(100vw - 2rem);
		padding-top:.5rem;
		}
	#language {margin-top:.1rem}
	#hamburger {float:right}
	} /* End ifTiny */

/*--------------------------------------------------------------------*/
/*		Entire page > Header > Navigation
/*--------------------------------------------------------------------*/
.navLink {
	line-height:1rem;
	;
	}
.navLink a {
	text-decoration:none;
	color:#006;
	user-select:none;
	font-family: Rubik,sans-serif;
	font-weight:bold;
	}
.navLink a:visited {color:#006;}
@media (max-width:734px) {
	/* Hide link lines when checked */
	#toggle:checked ~ #navLinks .lineH {display:none}

	/* Make links thinner when checked */
	#toggle:checked ~ #navLinks .navLink {line-height:.5rem;}
	} /* End ifTinyOrNarrow */
#navLinks {
	;
	display:flex; flex-wrap:wrap; justify-content:center;
	gap:1.5rem 2rem;
	}
@media (min-width:734px) {
	#navLinks {
		padding: 0 6rem 0 6rem;
		}
	} /* End wide */
@media (max-width:734px) {
	#navLinks {padding: 0 2rem 2rem 2rem}
	/* Hide navLinks when not checked (by default) */
	#toggle:not(:checked) ~ #navLinks {display:none}
	/* #navLinks {display:none;} */
	/* Show list of navLinks when checked */
	#toggle:checked ~ #header #navLinks {
		display:flex;
		flex-direction:column;
		padding-left:calc(50% - 4rem);
		}
	} /* End ifTinyOrNarrow */

/*--------------------------------------------------------------------*/
/*		Entire page > Header > Social Buttons
/*--------------------------------------------------------------------*/
#socialPar {
	display:flex; flex-wrap:wrap; justify-content:center;
	gap:1.5rem 2rem;
	}
@media (max-width:734px) {
	/* Hide social links when unchecked */
	#toggle:not(:checked) ~ #header #socialPar {display:none}
	} /* End ifTinyOrNarrow */
#social {
	;
	display:flex; flex-wrap:wrap; justify-content:center;
	gap:1.5rem 2rem;
	}
@media (min-width:734px) {
	#social {padding-top: 2rem}
	}
.socialIcon {
	width:50px;
	height:50px;
	}

/*--------------------------------------------------------------------*/
/*		Entire page > Main Pane
/*--------------------------------------------------------------------*/
#mainPane {
	padding:2rem 2rem;
	background-color: #e8e8e8;
	width:100%;
	}
@media (max-width:734px) {
	/* Hide main pane when checked */
	#toggle:checked ~ #mainPane {display:none}
	} /* End ifTinyOrNarrow */

/*--------------------------------------------------------------------*/
/*		Page Headings
/*--------------------------------------------------------------------*/
.heading1,.heading2,.heading3 {
	display:block;
	font-family: Rubik,sans-serif;
	font-weight:bold;
	color:#017e8c;
	}
.heading1 {font-size:2.8rem; text-align:center;}
.heading2 {font-size:1.8rem; margin-left: auto; margin-right: auto;}
.heading3 {font-size:1.4rem;}

.headingGroup {
	display:flex; flex-wrap:wrap; justify-content:space-evenly; gap:1.5rem 2rem;
	font-family: Rubik,sans-serif;
	font-size:1.4rem;
	font-weight:bold;
	color:#017e8c;
	}
.whitePane {background-color: white}

/*--------------------------------------------------------------------*/
/*		Main Points
/*--------------------------------------------------------------------*/
#mainPoints {
	;
	display:flex; flex-wrap:wrap; justify-content:center;
	padding-top:2rem;
	}
.bullet {transform:scale(1.5,1.5);}
.list {
	;
	display:flex; flex-wrap:wrap; gap:1.5rem 2rem; flex-direction:column;;
	padding-left:2rem;
	}
#mainPoints .item {
	min-width:14rem;
	max-width:24rem;
}
#mainPoints img {
	;
	}

/*--------------------------------------------------------------------*/
/*		Text Block
/*--------------------------------------------------------------------*/
#textBlock1 {
	;
	display:flex; flex-wrap:wrap; justify-content:center;
	gap:1.5rem 2rem;
	}
#textBlock2 {
	;
	font-family: Rubik,sans-serif;
	font-size:1.5rem;
	padding-top:2rem;
	width:75%;
	}

/*--------------------------------------------------------------------*/
/*		Course Photo
/*--------------------------------------------------------------------*/
#coursePar {
	;
	display:flex; flex-wrap:wrap; justify-content:center;
	padding-top:1rem;
	}
#course {
	width:67%;
	min-width:15rem;
	height:100%;
	object-fit:contain
	}

/*--------------------------------------------------------------------*/
/*		Course Structure
/*--------------------------------------------------------------------*/
#structure1 {
	;
	display:flex; flex-wrap:wrap; flex-direction:column;; align-items: center;
	gap:1.5rem 2rem;
	padding:2rem 2rem;
	}
#structure1 h2 {
	text-align:center;
	font-size:1.5rem;
	font-weight:bold;
	color:#080;
	}
#structure2 {
	;
	display:block;
	text-align:center;
	font-size:1.25rem;
	}
#structure2 h3 {
	font-size:1.6rem;
	font-weight:bold;
	}
.btn {
	display:inline-block;
	text-decoration:none;
	color:#fff;
	user-select:none;
	font-family: Verdana,sans-serif;
	font-size: 1.05rem;
	font-weight:bold;
	padding:.5rem 1rem;
	border-radius:.5rem;
	background-color:#009a04d9;
	}

/*--------------------------------------------------------------------*/
/*		Footer (q1 home page only)
/*--------------------------------------------------------------------*/
#logoBigPar {
	display:flex; flex-wrap:wrap; justify-content:center;
	padding-top:2rem;
	}
#logoBig {
	/* width:67%; */
	min-width:15rem;
	/* height:100%; */
	/* object-fit:contain */
	}
.verText {text-align: right; font-size:.7rem}

/*--------------------------------------------------------------------*/
/*		Autoscrolling (nyi)
/*--------------------------------------------------------------------*/
#indicator {
	display:none; /* q1 */
	position:fixed;
	left:50%;
	top:0;
	background-color:lightyellow;
	width: 15rem;
	width:var(--width1);
	height: 1.5rem;
	border: 2px solid black;
}

/*--------------------------------------------------------------------*/
/*		Translate
/*--------------------------------------------------------------------*/
.transBaseString {
	border:2px solid black;
	border-bottom:none;
	display:block;
	width:100vw;
	}
.transLangString {
	color:#00c;
	border:2px solid #00f;
	display:block;
	width:100vw;
	}
.transLangString textarea {
	width:calc(100vw - 5.5rem);
	color:#00c;
	}

/*--------------------------------------------------------------------*/
/*		Big Image Headings
/*--------------------------------------------------------------------*/
.bigImage {
	position:relative;
	display:block;
	display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
	}
.bigImage div {
	position:absolute;
	font-family: Rubik,sans-serif;
	color:white; font-size:3rem; font-weight:bold;
	}

/*--------------------------------------------------------------------
/*		Dog Cards
/*--------------------------------------------------------------------*/
.dogParent {
	display:flex; flex-wrap:wrap; justify-content:space-evenly;
	row-gap:1rem; column-gap:.5rem;
	}
.dogCard {
	display:flex; flex-wrap:wrap; flex-direction:column;;
	width:15rem; /* Card Width */
	text-align:center;
	font-weight:bold;
	}
.dogImg {
	border-radius:.5rem;
	box-shadow:.2rem .2rem .6rem #aaa;
	}
.dogHeading {
	font-size:1.8rem;
	padding:1rem 0 .5rem 0;
	}
.dogText {
	font-size:1.1rem;
	padding:0 0 .5rem 0;
	}

/*--------------------------------------------------------------------
/*		Notify/notifications
/*--------------------------------------------------------------------*/
/* Background: grayed window */
.notify1 {
	;
	visibility:hidden;
	position: fixed;
	top:0; left:0;
	width:calc(100vw - var(--scrollbar-width));
	height:100%;
	display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
	background-color:#000;
	opacity:.33;
	}

/* Foreground: message box */
.notify2 {
	visibility:hidden;
	position:fixed;
	left:calc(50vw - 10rem); top:calc(50vh - 8rem);
	width:20rem; height:auto;
	padding: 2rem;
	overflow-wrap: anywhere;
	font-family: Tahoma,sans-serif;
	font-weight:bold;
	border-radius:1rem;
	border:.3rem solid blue;
	background-color:#ffc;
	opacity:1;
	}

/*--------------------------------------------------------------------
/*		Bullet Lists
/*--------------------------------------------------------------------*/

/* Define list bullet as ✔ (2714) */
ul.checkmarkPointsList {
	list-style-type: '✔ ';
	text-align:left; /* Override any div.center parent */

	li {
		margin-right: 1.5rem;
		padding-bottom: .5rem;
		font-size: 1.3rem;
		color: #017e8c;
		}
	li::marker {font-size: 1.5rem}
	} /* ul.checkmarkPointsList */

/* Define list bullet as • (2022) */
ul.pointsList {
	list-style-type: '• ';
	text-align:left; /* Override any div.center parent */

	li {
		margin-right: 1.5rem;
		padding-bottom: .5rem;
		font-size: 1.3rem;
		color: #017e8c;
		}
	li::marker {font-size: 1.8rem}
	} /* ul.pointsList */

/* Define list bullet as ✦ (2726) */
ul.starredList {
	list-style-type: '✦ ';
	text-align:left; /* Override any div.center parent */

	li {
		margin-right: 1.5rem;
		padding-bottom: .5rem;
		font-size: 1.3rem;
		color: #017e8c;
		}
	li::marker {font-size: 1.8rem}
	} /* ul.starredList */

/* Define list bullet as * (002a) */
ul.asteriskList {
	list-style-type: '* ';
	text-align:left; /* Override any div.center parent */

	li {
		margin-right: 1.5rem;
		padding-bottom: .5rem;
		font-size: 1.3rem;
		color: #066;
		}
	li::marker {font-size: 1.7rem}
	} /* ul.asteriskList */

.multiColumnList {
	display:flex; flex-wrap:wrap; justify-content: space-around;
	} /* .multiColumnList */
@media (min-width:734px) { .multiColumnList {margin: 0 10vw 0 10vw;} }
.multiColumnList > li {min-width: 9rem;}
.owlHeading {
	padding: 2rem 2.2rem 1rem 2.2rem;
	color:#066;
	font-weight: bold;
	font-size:1.3rem
	}
.owl {
	color:#066;
	padding: 0 2rem 0 2rem;
	font-size: 1.1rem;
	text-align: justify;
	}
.right2 {margin: 0 1.5rem 0 1.5rem;}
.width25 {width: 25rem}
.wide {margin: 0 10vw 0 10vw;}
.medium {margin: 0 20vw 0 20vw;}

/*--------------------------------------------------------------------
/*		Standard Forms (standard class is 'form')
/*--------------------------------------------------------------------*/
/* .formCol { display:flex; flex-wrap:wrap; } */
div.form {
	display:flex; flex-wrap:wrap; justify-content:center;
	}
form.form {
	width: 60vw;
	}
.control {
	;
	width: 100%;
	padding: 1rem 1rem;
	}
label.form {
	display:block;
	font-family: Verdana,sans-serif;
	font-size: 1.1rem;
	padding-bottom: .3rem;
	}
textarea.form, select.form, input[type=password].form {
	width: 100%;
	padding: 1rem;
	border-radius: .6rem;
	line-height: 1.5rem;
	background-color: #f0f0f0;
	font-size: 1.2rem;
	font-weight: bold;
	}
input[type=password]:user-invalid {
	border: 2px dashed red;
	}
input[type=password]:valid {
	border: 2px dashed black;
	}
textarea.form { font-family: Consolas,sans-serif; }
textarea.form::placeholder {color:#aaa}
select.form {
	/* height: empirical in GenSelect() via style */
	overflow: clip;
	}
option.form {
	/*
	white-space: wrap; (or pre-wrap)
	text-wrap: wrap;
	margin-bottom: .5rem;
	padding: .5rem;
	*/
	}
/* selected default blue bg color: #1967d2 */
/* option.form:focus-visible { (bug: colors ignored)
	color: white;
	background-color: #e8e8e8 !important;
	outline:2px solid black;
	}
*/
option.form:checked {
	color: white;
	background-color: #1967d2; /* selected-blue */
	/* background-color: #e8e8e8 !important; */
	outline:2px solid white;
	}
input[type=password].form { font-family: Consolas,sans-serif; }
hr.form {
	height: .5rem;
	background-color: #017e8c;
	border-radius:.5rem;
	}
.pane.form {
	display:block;
	height: 25rem;
	border: .2rem solid #017e8c;
	padding: 1rem;
	overflow-x: hidden;
	word-break: break-all;
	}
#infoPane {width:100%; height:22rem}

/*--------------------------------------------------------------------
/*		Invitation
/*--------------------------------------------------------------------*/
.ratMainImage {
	;
	background: url(../images/rocks-2.jpg) no-repeat left top;
	background-attachment: local;
	background-size: cover;
	margin-left: 0;
	width: auto;
	height: auto;
	text-align: center;
	}
.rat3 {
	display:block;
	border: 8px solid #880;
	border-radius: 4px;
	background-color: #9ad2f5;
	padding: 1rem;
	text-align: center;
	margin: 1rem 0 0 calc(14vw + 1rem);
	width: 20vw;
	min-width: 12rem;
	}
.rat {
	border: solid #880 1rem;
	border-radius: .5rem;
	color: #000;
	background-color: #9ad2f5;
	font-family: Verdana,sans-serif;
	padding: 1rem;
	margin: 1rem;
	width: 68vw;
	max-width: 26rem;
	overflow-wrap: anywhere;
	text-align: center;
	}
.rat1 {
	line-height: 1.5rem;
	font-size: 12pt;
	margin-bottom: 0;
	}
.rat2 {
	font-size: .8rem;
	line-height: 13pt;
	}
.ratHR {
	background-color: black;
	height: 2.5pt;
	width: 90%;
	margin: auto; /* center */
	margin: 1rem auto 1rem auto
	}
.ratImageCredit {
	color:white;
	margin-left: .5rem;
	font-size: .8rem;
	}
@media (min-width:734px) {
	.ratHeading {
		padding: 0 8rem 0 8rem;
		}
	.ratMainImage {
		display: inline-block;
		width: 90vw;
		text-align: left;
		}
	} /* End wide */

/* END */