/* ---------------- */
/* -              - */
/* -  F O N T S   - */
/* -              - */
/* ---------------- */

@font-face {
	font-family: 'Plex Mono';
    src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'),
         url('../fonts/IBMPlexMono-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	text-rendering: optimizeLegibility;
}

@font-face {
	font-family: 'Plex Mono';
    src: url('../fonts/IBMPlexMono-Bold.woff2') format('woff2'),
         url('../fonts/IBMPlexMono-BOld.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	text-rendering: optimizeLegibility;
}

@font-face {
	font-family: 'Plex Serif';
    src: url('../fonts/IBMPlexSerif-Light.woff2') format('woff2'),
         url('../fonts/IBMPlexSerif-Light.woff') format('woff');
	font-weight: 250;
	font-style: normal;
	text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "HalvarEngschrift-ExtraBold";
    src: url('../fonts/Halvar-Engschrift-ExtraBold.woff2') format('woff2'),
         url('../fonts/Halvar-Engschrift-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    text-rendering: optimizeLegibility;
}

.plex-mono {
	font-family: 'Plex Mono';
	font-weight: 400;
}

.plex-mono-bold {
	font-family: 'Plex Mono';
	font-weight: 700;
}

.plex-serif {
	font-family: 'Plex Serif';
	font-weight: 250;
}

.halvar {
	font-family: 'HalvarEngschrift-ExtraBold';
	font-weight: 800;
	color: #0000ff;
}


/* --------------- */
/* -             - */
/* -   M I S C   - */
/* -             - */
/* --------------- */

html {
    scroll-behavior: smooth;
}

body {
	font-family: 'Plex Mono';
	font-weight: 400;
	line-height: 1.8;
	color: #000;
	position: relative;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.jumbotron {
    padding: 140px 25px;
}

.jumbotron-image {
    background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.header-img {
	background-image: url("../images/kv_header_img.jpg") !important;
}

.container-fluid {
	padding: 20px 50px;
}

:target:before {
    content: "";
    display: block;
    height: 300px;
    margin: -300px 0 0;
}

.grey {
    color: #ececec;
}

.blue {
    color: #0000ff;
}

.bg-grey {
    background-color: #ececec;
}

.bg-blue {
    background-color: #0000ff;
}

.pictogram {
	max-width:100%;
	border-bottom:4px solid black;
	margin-bottom: 20px;
}

.slideanim {
	visibility: hidden;
}

.slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}

@keyframes slide {
    0% {opacity: 0; transform: translateY(70%);} 
  100% {opacity: 1; transform: translateY(0%);}
}

@-webkit-keyframes slide {
	0% {opacity: 0; -webkit-transform: translateY(70%);} 
  100% {opacity: 1; -webkit-transform: translateY(0%);}
}

.kv-mark {
	max-height: 160px;
}

a[href^=tel] {
   text-decoration:inherit;
   color: inherit;
}

/* --------------------------- */
/* -                         - */
/* -   N A V I G A T I O N   - */
/* -                         - */
/* --------------------------- */

.navbar {
    margin-bottom: 0;
    background-color: #0000ff;
    z-index: 9999;
    border: 0;
    font-size: 0.85rem !important;
    line-height: 1.50em !important;
    border-radius: 0;
    font-family: "Plex Mono";
    font-weight: 400;
}


.navbar-dark .navbar-nav .nav-link {
    color: #fff !important;

}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
    color: #fff !important;
}

.navbar-dark .navbar-nav .nav-link.disabled {
    color: #fff !important;
}

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff !important;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}

.navbar-toggler {
    border-width: 0px !important;
    border-radius: 0px !important;
}

.navbar-logo {
	max-height: 30px;
}

.burger {
    width: 32px;
    height: 3px;
    background-color: white;
    margin: 6px 0;
}


/* --------------- */
/* -             - */
/* -   T Y P E   - */
/* -             - */
/* --------------- */

h1 {
	font-family: 'HalvarEngschrift-ExtraBold';
	font-weight: 800;
	font-size: 120px;
    line-height: 0.90em;
	color: #0000ff;
	text-align: center;
	margin-bottom: 30px;
}

h2 {
	font-family: 'HalvarEngschrift-ExtraBold';
	font-weight: 800;
	font-size: 76px;
    line-height: 0.90em;
	color: #0000ff;
	text-align: center;
	margin-bottom: 30px;
}

h3 {
	font-family: 'Plex Serif';
	font-weight: 250;
	font-size: 24px;
    line-height: 1.375em;
	color: #000;
	text-align: center;
	margin-bottom: 30px;
}

h4 {
    font-size: 19px;
    line-height: 1.375em;
    color: #303030;
    font-weight: 400;
    margin-bottom: 30px;
}  

p {
    font-size: 0.85rem;
    line-height: 1.50em;
}

.yhteystiedot {
	font-size: 0.85rem;
	line-height: 1.50em;
}

.copyright {
    font-size: 0.85rem;
    line-height: 1.50em;
    color: #fff;
}

/* ----------------------- */
/* -                     - */
/* -   C A R O U S E L   - */
/* -                     - */
/* ----------------------- */


.carousel-control-next, .carousel-control-prev {
	color: #0000ff !important;
    opacity: 1 !important;
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 16px;
    height: 16px;
    padding: 0;
    margin-right: 8px;
    margin-left: 8px;
    margin-bottom: 1rem;
    text-indent: -999px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff' /%3E%3C/svg%3E ") !important;
    background-repeat: no-repeat;
    background-color: transparent;
    background-clip: padding-box;
    opacity: 0.5;
}

.carousel-indicators .active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%230000ff' /%3E%3C/svg%3E ") !important;
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: 1 !important;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 4rem;
    height: 4rem;
	color: #0000ff !important;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath id='arrow-line' stroke-width='1.5' fill='none' stroke='%230000ff' d='M10 2, 2 9, 10 16' /%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath id='arrow-line' stroke-width='1.5' fill='none' stroke='%230000ff' d='M2 2, 10 9, 2 16' /%3E%3C/svg%3E") !important;
}


/* --------------------------- */
/* -                         - */
/* -   R E S P O N S I V E   - */
/* -                         - */
/* --------------------------- */

@media screen and (max-width: 1399.98px) {

}

@media screen and (max-width: 1199.98px) {

}

@media screen and (max-width: 991.98px) {
	.navbar-nav {padding-top: 32px;}
	.jumbotron {padding: 100px 25px;}
	.kv-mark {max-height: 120px; !important}
	h1 {font-size: 90px; line-height: 0.90em;}
}


@media screen and (max-width: 767.98px) {
	h1 {font-size: 72px; line-height: 0.90em;}
	h2 {font-size: 60px; line-height: 0.90em;}
	h3 {font-size: 24px; line-height: 1.375em;}
	h4 {font-size: 19px; line-height: 1.375em;}  
	p {font-size: 1.00rem; line-height: 1.50em;}
	.kv-mark {max-height: 100px; !important}
	.yhteystiedot {font-size: 0.85rem; !important line-height: 1.50em; !important}
	.copyright {font-size: 0.85rem; !important line-height: 1.50em; !important}
	.jumbotron {padding: 80px 25px;}
}

@media screen and (max-width: 575.98px) {
	h1 {font-size: 60px; line-height: 0.90em;}
	h2 {font-size: 48px; line-height: 0.90em;}
	h3 {font-size: 20px; line-height: 1.375em; padding: 0px 20px;}
	h4 {font-size: 19px; line-height: 1.375em;}  
	p {font-size: 1.00rem; line-height: 1.50em;}
	.kv-mark {max-height: 160px; !important}
	.jumbotron {padding: 60px 10px;}
	.yhteystiedot {font-size: 0.85rem; !important line-height: 1.50em; !important}
	.copyright {font-size: 0.85rem; !important line-height: 1.50em; !important}
	.carousel-indicators [data-bs-target] {padding: 8px; margin-right: 4px; margin-left: 4px; margin-bottom: -20px;}
	.carousel-control-next-icon, .carousel-control-prev-icon {width: 2rem; height: 2rem;}
}

@media screen and (max-width: 479.98px) {
	h1 {font-size: 48px; line-height: 0.90em;}
	h2 {font-size: 40px; line-height: 0.90em;}
	h3 {font-size: 18px; line-height: 1.375em; padding: 0px 20px;}
	h4 {font-size: 19px; line-height: 1.375em;}  
	p {font-size: 0.85rem; line-height: 1.50em;}
	.copyright {font-size: 0.65rem; !important line-height: 1.50em; !important}
	.kv-mark {max-height: 120px; !important}
	.navbar-logo {max-height: 30px;}
	.container-fluid {padding: 20px 20px;}
}