@font-face {
    font-family: 'Rubik';
    src: url('../font/rubik-regular-webfont.woff2') format('woff2'),
         url('../font/rubik-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rubik';
    src: url('../font/rubik-bold-webfont.woff2') format('woff2'),
         url('../font/rubik-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Rubik Black';
    src: url('../font/rubik-black-webfont.woff2') format('woff2'),
         url('../font/rubik-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Courier';
    src: url('../font/courier-bold-webfont.woff2') format('woff2'),
         url('../font/courier-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* override browser default */
html,
body {
  margin: 0;
  padding: 0;
}

/* use viewport-relative units to cover page fully */
body {
	width: 100vw;
	height: 100vh;
	min-height: 0;
	max-height: 100vh;
	background-color: #F0EFD4;
	/* Remove/hide scrollbars while scrolling still works */
	-ms-overflow-style: none; /* Internet Explorer 10+ */
	scrollbar-width: none;    /* Firefox, except on Windows */
	/* For Firefox on Windows see:
	https://stackoverflow.com/questions/56875867/only-hide-scrollbar-not-disable-scrollbar-on-firefox-windows
	*/
}
body::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

/* include border and padding in element width and height */
* {
  box-sizing: border-box;
}


footer {
	position: fixed;
	left: 0;
	top: 86vh;    /* Približno 12/14 */
	height: 14vh; /* Približno  2/14 */
	width: 100vw;
	color: #FFFFFF;
	background-color: #393939;
	font-size: 2vh; /* 0.875rem = 14px */
	margin-left: 4.5rem; /* Width of the navbar */
	z-index: 2;
}

.footer-item {
	height: 14vh;
	/* width = 133.3% of height */
	padding: 2vh 1vh 2vh 2vh;
}

.footer-item-label {
	height: 14vh;
	width: 10vh;
	padding: 2vh 0;
}

/* Override rounded corners in modal windows */
.modal-content {
	border-radius: 0;
}

/* Add custom close icon to modal windows */
.close-icon {
	text-align: right;
	margin-bottom: 1rem;
	cursor: pointer;
}

.modal {
	z-index: 5000;
}

/* Add pointer cursor to point to FancyBox galleries */
.pointer {
	cursor: pointer;
}


/* CRT aspect ratio dependant on viewport height */
.crt {
	height: 50vh;
	/* width = 133.3% of height */
	width: 66.66667vh;
}

.crt-sm {
	height: 10vh;
	/* width = 133.3% of height */
	width: 13.33333vh;
}

.crt-md {
	height: 20vh;
	/* width = 133.3% of height */
	width: 26.66667vh;
}


/* Force Slick Carousel to be full height */
.slick-slider, .slick-list, .slick-track {
	height: 100vh !important;
}


/* Absolute and relative position */
.abs { position: absolute }
.rel { position: relative }


/* Width which is height dependant */
.wd { width: 25vmin } /* for diagonals */
.w20 { width: 20vh }
.w25 { width: 25vh }
.w30 { width: 30vh }
.w40 { width: 40vh }
.w50 { width: 50vh }
.w60 { width: 60vh }
.w70 { width: 70vh }
.w80 { width: 80vh }
.w100 { width: 100vh }

/* Height */
.h10 { height: 10vh }
.h20 { height: 20vh }
.h25 { height: 25vh }
.h30 { height: 30vh }
.h35 { height: 35vh }
.h40 { height: 40vh }
.h45 { height: 45vh }
.h50 { height: 50vh }
.h60 { height: 60vh }
.h70 { height: 70vh }
.h80 { height: 80vh }
.h90 { height: 90vh }
.h100 { height: 100vh }

.h86 { height: 80vh /*86vh*/ } /* 12/14 */
.h14 { height: 14vh } /*  2/14 */

.h20p { height: 20% }


/* Margins used in flex positioning */
.ml1rem { margin-left: 1rem }
.ma1rem { margin: 1rem }
.mr1rem { margin-right: 1rem }
.ml2 { margin-left: 2vh }
.mr2 { margin-right: 2vh }
.mb2 { margin-bottom: 2vh }
.mb4 { margin-bottom: 4vh }
.ml4 { margin-left: 4vh }
.mr4 { margin-right: 4vh }
.ml8 { margin-left: 8vh }
.mr8 { margin-right: 8vh }
.mt-auto { margin-top: auto }
.ml-auto { margin-left: auto }
.mr-auto { margin-right: auto }
.mb-auto { margin-bottom: auto }


/* Paddings used in flex positioning */
.p2 { padding: 2px }
.pl2 { padding-left: 2vh }
.pr2 { padding-right: 2vh }
.pa2 { padding: 2vh }
.pt1 { padding-top: 1vh }
.pt2 { padding-top: 2vh }


/* z-index for divs that should be over footer */
.z10 { z-index: 10 }
.z20 { z-index: 20 }


/* Nested flex containers */
.flex-row {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.flex-row-centered {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.flex-column,
.news-column {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.flex-column-reverse,
.news-column-reverse {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}


.img-vertical-scroll {
	overflow-y: auto;
	height: 100vh;
	padding-top: 2px;
	padding-bottom: 2px;
	-ms-overflow-style: none; /* Internet Explorer 10+ */
	scrollbar-width: none;    /* Firefox */
}
.img-vertical-scroll::-webkit-scrollbar { 
	display: none;  /* Safari and Chrome */
}

.flex-column-space {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.flex-gallery {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: stretch;
	justify-content: flex-start;
}

.flex-gallery-centered {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: stretch;
	justify-content: center;
}

.flex-zigzag {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-start;
	align-content: flex-start;
}

.flex-double-column {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 2;
}


/*
 *  Bootstrap 4 media queries
 */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

	.content-box-inner {
		margin-top: 5vh;
		margin-bottom: 5vh;
	}

	.navbar-title {
		display: none;
	}

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	
	.content-box-inner {
		margin-top: 20vh;
		margin-bottom: 20vh;
	}

	.navbar-title {
		display: block;
	}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	
	.content-box-inner {
		margin-top: 20vh;
		margin-bottom: 20vh;
	}

	.navbar-title {
		display: block;
	}

}