/** UNIVERSAL CSS - Used for all universal style stuff so I don't have to copy paste these into diff stylesheets 
	includes:
		- FLEX STUFF
		- MARGIN AND PADDING
		- THE ACCENT STUFF
**/


/* TEXT STYLES */

:root {scroll-behavior: smooth;}

h1, h2, h3, h4, h5 {font-family: var(--fonthead);}

header a, footer a, button a, nav a, .row.gallery a, a.big, .btn a {text-decoration: none;}

li {text-align: left;}

.subtitle {font-family: var(--fonthead); font-size: 1.1rem; color: var(--accb);}

.accent {color: var(--acc);}

.bg-accent {background: var(--acc);}

.accentb {color: var(--accb);}

.bg-accentb {background: var(--accb);}

.big {font-family: var(--fonthead); font-size: 1.5rem; color: var(--acc); margin: 0 0 15px;}

.warning {color: #DA553A; font-weight: bold;}

.bg-warning {background: #DA553A; padding: 10px;}

.bg-warning h2 {margin-top: 20px;}

.uppercase {text-transform: uppercase}

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

.text-left, .text-left-center {text-align: left;}

.text-right, .text-right-center {text-align: right;}

.text-justify {text-align: justify;}

.sc {font-variant: small-caps;}

.sm-cap {font-size: 0.9rem; padding: 0 10px;}

.sticky {position: sticky; top: 0;}

.w-100 {width: 100%;}

.w-75, .w-md-75 {width: 75%;}

.w-50, .w-md-50 {width: 50%;}

.w-25 {width: 25%;}

::-webkit-scrollbar {background: var(--dark);}

::-webkit-scrollbar-thumb {background: var(--acc);}

::selection {
  color: var(--dark);
  background: var(--acc);
}

/* FLEX STUFF */
.column, .column-row {
	display: flex;
	flex-flow: column wrap;
}

.row {
	display: flex;
	flex-flow: row wrap;
}

.row-align-center {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

.reverse {flex-direction: row-reverse;}

.flex {display: flex;}

.gutters {
	column-gap: 2rem;
}

.inline-block {display: inline-block;}

.block {display: block;}

.hide {display: none;}

.align-center, .center {align-items: center;}

.justify-center, .center {justify-content: center;}

.align-end {align-items: end;}

.float-md-left {float: left;}

/* COLUMNS */
.col-1 {flex: 0 0 8.33%;}

.col-2 {flex: 0 0 16.33%;}

.col-3 {flex: 0 0 25%;}

.col-4 {flex: 0 0 33.33%;}

.col-5 {flex: 0 0 42%;}

.col-6 {flex: 0 0 50%;}

.col-7 {flex: 0 0 58%;}

.col-8 {flex: 0 0 66.67%;}

.col-9 {flex: 0 0 75%;}

.col-11 {flex: 0 0 91.67%;}

.col-12 {flex: 0 0 100%;}

.col {flex: 1 1 0;}

/* PADDING AND MARGINS */
.pt-10, .py-10, .p-10 {padding-top: 10px;}

.pb-10, .py-10, .p-10 {padding-bottom: 10px;}

.pl-10, .pl-md-10, .px-10, .p-10 {padding-left: 10px;}

.pr-10, .pr-md-10, .px-10, .p-10 {padding-right: 10px;}

.pt-15, .pt-md-15, .py-15, .p-15, .p-md-15 {padding-top: 15px;}

.pb-15, .pb-md-15, .py-15, .p-15, .p-md-15 {padding-bottom: 15px;}

.pl-15, .pl-md-15, .px-15, .p-15, .p-md-15, .px-md-15 {padding-left: 15px;}

.pr-15, .pr-md-15, .px-15, .p-15, .p-md-15, .px-md-15 {padding-right: 15px;}

.pt-20, .py-20, .py-md-20, .p-20, .p-md-20 {padding-top: 20px;}

.pb-20, .py-20, .py-md-20, .p-20, .p-md-20 {padding-bottom: 20px;}

.pr-20, .pr-md-20, .px-20, .px-md-20, .p-20, .p-md-20 {padding-right: 20px;}

.pl-20, .pl-md-20, .px-20, .px-md-20, .p-20, .p-md-20 {padding-left: 20px;}

.p-25, .p-md-25 {padding: 25px;}

.p-30, .p-md-30 {padding: 30px;}

.py-30, .py-md-30 {padding-top: 30px; padding-bottom: 30px;}

.mt-0, .my-0, .m-0 {margin-top: 0;}

.mb-0, .my-0, .m-0 {margin-bottom: 0;}

.ml-5, .mx-5, .m-5 {margin-left: 5px;}

.mr-5, .mx-5, .m-5 {margin-right: 5px;}

.mb-10, .my-10, .m-10 {margin-bottom: 10px;}

.mt-10, .my-10, .m-10 {margin-top: 10px;}

.ml-10, .ml-md-10, .mx-10, .m-10 {margin-left: 10px;}

.mr-10, .mr-md-10 .mx-10, .m-10 {margin-right: 10px;}

.mx-n10 {margin-left: -10px; margin-right: -10px;}

.ml-15, .ml-md-15, .mx-15, .m-15 {margin-left: 15px;}

.mr-15, .mr-md-15, .mx-15, .m-15 {margin-right: 15px;}

.mt-15, .my-15, .m-15 {margin-top: 15px;}

.mb-15, .my-15, .m-15 {margin-bottom: 15px;}

.mx-n15 {margin-left: -15px; margin-right: -15px;}

.ml-20, .ml-md-20, .mx-20, .m-20 {margin-left: 20px;}

.mr-20, .mr-md-20, .mx-20, .m-20 {margin-right: 20px;}

.mx-n20 {margin-left: -20px; margin-right: -20px;}

.mt-20, .my-20, .m-20 {margin-top: 20px;}

.mb-20, .my-20, .m-20 {margin-bottom: 20px;}

.mt-30, .my-30, .m-30 {margin-top: 30px;}

.mb-30, .my-30, .m-30 {margin-bottom: 30px;}

.mx-50 {margin-right: 50px; margin-left: 50px;}

.ml-auto, .mx-auto {margin-left: auto;}

.mr-auto, .mx-auto {margin-right: auto;}

/* INFO ROW */
.info-row {
	display: flex;
	justify-content: space-between;
}

.info-row p, .info-row span, .info-col {
	line-height: 1;
	margin: 6px 10px;
}

.info-row p {font-weight: bold;}

.info-row span {text-align: right;}

/* ROW GALLERY */
.row.gallery {
	justify-content: center;
}

.row.gallery p {
	opacity: 0.8;
	margin-top: -5px;
}	

.row.gallery h3 {
	margin-top: 0;
	margin-bottom: 15px;
}

.row.gallery .col-3 img {
	max-height: 200px;
	max-width: 150px;
	margin: 8px;
}

.row.gallery .col-4 img {
	max-height: 250px;
	max-width: 200px;
	margin: 8px;
}

/* TOBII LIGHTBOX CONTENT */
.galerya .art {height: 78vh; background: var(--dark);}

.galerya .art img {object-fit: contain; object-position: center; width: 100%; height: 100%;}

.galerya .caption {max-height: 78vh; overflow: auto;}

.galerya .col {background: var(--bg); padding: 0 20px 20px;}

/* GALLERY TABS ALT */
.thumb img {
	max-height: 100px;
	max-width: 100px;
}

.thumb a {text-decoration: none;}

.thumb img:hover {box-shadow: 0 0 0 5px var(--acc);}

.tabwrap {text-align: center;}

.tabwrap section {
	display: none;
}

.tabwrap section:target {
	display:block;
}

.tabwrap img {max-width: 100%; max-height: 75vh;}

.tabwrap p {text-align: left;}

.tabwrap h2 {margin: 0 0 25px; padding-top: 20px;}

/* RESPONSIVE STUFF */
@media (max-width: 768px) {
	.w-md-75 {max-width: 75%;}
  
	.row, .row-align-center {flex-direction: column;}
  
    .column-row {flex-flow: row wrap;}
	
	.nav-title, .nav-items {margin: auto;}
	
	.text-left-center, .text-right-center {text-align: center;}
	
	.p-md-20, .p-md-30 {padding: 15px;}
	
	.px-md-10, .pl-md-10, .pr-md-10, .pl-md-15, .pl-md-20, .pr-md-20 {padding: 0;}
	
	.portrait, .w-md-50 {max-width: 70%;}

	.ml-md-20, .ml-md-15, .ml-md-10 {margin-left: 0;}
	
	.mr-md-20, .mr-md-15, .mr-md-10 {margin-right: 0;}
	
	.row-gallery .col-3 img {
		max-height: 250px;
		max-width: 200px;
	}
	
	.align-md-center {align-items: center;}
	
	.float-md-left {float: none;}
	
	.galerya .art {height: 50vh;}
	
	.galerya .caption {max-height: auto;}
	
	.tobii__slide .tobii-html {height: auto;}
}

@media (max-width: 960px) {
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col {flex: 0 0 100%;}
	
	.row.mx-30 {
		margin-left: 0; margin-right: 0;
  }
	.px-md-15 {padding: 0;}
	
	.galerya .art {height: 40vh;}
	
	.tobii__slide .tobii-html {height: auto;}
}