/* import web fonts */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&family=Roboto+Condensed:wght@700&display=swap');


/* nastavení barev šablony*/

:root {
	--black: #000000;
	--darkblue: #051922;
	--primary: rgb(0, 143, 153);
	--secondary: rgba(0, 143, 153, 0.3);
	--third: rgb(0, 143, 153, 0.1);
	--darkprimary: rgb(0, 96, 101);
	--call: rgb(200, 212, 0);
	--callight: rgb(254, 255, 213);
	--silver: rgba(230, 230, 230);
	--light:  rgba(255, 255, 255, 0.6);
	--dark: rgba(192, 192, 192);
	--white: #ffffff;
}


/* background colors, borders & lines */

.bg-primary {background-color: var(--primary) !important;}
.bg-secondary {background-color: var(--secondary) !important;}
.bg-third {background-color: var(--third) !important;}
.bg-light {background-color: var(--light) !important;}
.bg-darkBlue {background-color: var(--darkblue);}
.bg-dark {background-color: var(--dark);}
.bg-silver {background-color: var(--silver);}
.bg-white {background-color: var(--white);}
.offcanvas-header, .bg-call {background-color: var(--call);}
.bg-callight {background-color: var(--callight);}

.borderPrimary {border: 6px solid var(--primary);}
.borderSecondary {border: 6px solid var(--secondary);}
.borderThird {border: 6px solid var(--third);}
.borderDarkPrimary {border: 6px solid var(--darkprimary);}
.borderDarkblue {border: 6px solid var(--darkblue);}
.borderBlack {border: 6px solid var(--black);}
.borderCall {border: 6px solid var(--call);}

.borderBottomBlack {border-bottom: 1px solid var(--black);}
.borderBottomDarkblue {border-bottom: 1px solid var(--darkblue);}
.borderBottomPrimary {border-bottom: 1px solid var(--primary);}
.borderBottomCall {border-bottom: 1px solid var(--call);}
.borderBottomDark {border-bottom: 1px solid var(--dark);}
.borderBottomWhite {border-bottom: 1px solid var(--white);}


/* typography */

.fontHeadline {font-family: "Roboto Condensed", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal;}
.fontLight {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal;}
.fontRegular, p {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}
.fontMedium {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal;}
.fontSemibold {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal;}
.fontBold {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal;}
.fontExtra {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 800; font-style: normal;}

.fontColorWhite {color: var(--white);}
.fontColorBlack, p {color: var(--black);}
.fontColorPrimary {color: var(--primary);}
.fontColorPrimaryDark {color: var(--darkprimary);}
.fontColorSecondary {color: var(--secondary);}
.fontColorCall {color: var(--call);}
.fontColorLight {color: var(--light);}
.fontColorSilver {color: var(--silver);}
.fontColorDark {color: var(--dark);}
.fontColorThird {color: var(--third);}
.fontColorBlueDark {color: var(--darkblue);}

.fontSizeMastodont {font-size: 5rem;}
.fontSizeBig {font-size: 3.4rem;}
.fontSizeExtraLarge {font-size: 1.6rem;}
.fontSizeSuperLarge {font-size: 1.6rem;}
.fontSizeLarge {font-size: 1.2rem;}
.fontSizeBigger {font-size: 1.1rem;}
.fontSizeStandard, p {font-size: 1rem;}
.fontSizeSmall {font-size: 0.8rem}

.fontLineLarge {line-height: 2.4rem;}
.fontLineStandard {line-height: 1.2rem;}


/* links and buttons */

a {color: var(--darkprimary); text-decoration: underline;}
a:hover {color: var(--primary); text-decoration: underline;}
.nav-link {font-size: 1rem; color: var(--darkprimary); text-decoration: none;}
.nav-link:hover {color: var(--primary); text-decoration: underline;}
.active-link {font-size: 1rem; color: var(--primary); text-decoration: none;}
.active-link:hover {color: var(--primary); text-decoration: underline;}
.mouseColor:hover {cursor: pointer; background-color: var(--callight);}

.btn-primary {background-color: var(--primary); color: var(--white); border: none; text-decoration: none; border-radius: 8px; padding: 0.5rem 1rem; font-size: 1rem; transition: background-color 0.3s;}
.btn-primary:hover {background-color: var(--darkprimary); color: var(--white); text-decoration: none; transition: background-color 0.3s;}
.btn-outline-primary {background-color: transparent; color: var(--primary); border: 2px solid var(--primary); text-decoration: none; border-radius: 8px; padding: 0.35rem 0.85rem; font-size: 1rem; transition: background-color 0.3s, color 0.3s;}
.btn-outline-primary:hover {background-color: var(--primary); color: var(--white); border: 2px solid var(--primary); text-decoration: none; transition: background-color 0.3s, color 0.3s;}
.btn-call {background-color: transparent; color: var(--darkblue); border: none; text-decoration: none; padding: 1rem; font-size: 1rem; transition: background-color 0.3s;}
.btn-call:hover {background-color: var(--call); color: var(--white); text-decoration: none; transition: background-color 0.3s;}
.btn-lg {font-size: 1.4rem; padding: 0.75rem 1.5rem;}

.btn-card {position: absolute; bottom: 0; right: 0; margin: 1rem;}

#backToTopR {position: fixed; bottom: 70px; right: 10px; width: 50px; height: 50px; border-radius: 50%; display: none; justify-content: center; align-items: center; z-index: 1000; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
#backToTopL {position: fixed; bottom: 70px; left: 10px; width: 50px; height: 50px; border-radius: 50%; display: none; justify-content: center; align-items: center; z-index: 1000; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
#backToTopR i, #backToTopL i {font-size: 2.4rem; color: var(--darkblue);}
#backToTopR i:hover, #backToTopL i:hover {color: var(--primary);}

.pointerHand {cursor: pointer !important;}


/* lists */

ul.yes, ul.plus, ul.horizontal {list-style-type: none; padding: 0; display: flex; flex-wrap: wrap;}
ul.yes li, ul.plus li {padding-left: 24px; position: relative;}
ul.horizontal li {margin-right: 3rem;}
ul.yes li::before, ul.plus li::before {color: #0e8267; font-weight: bold; font-size: 1.2em; position: absolute; left: 0; top: 0; margin-right: 0;}
ul.yes li::before {content: "✓";}
ul.plus li::before {content: "+";}



/* form elements */

input {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}
input.required {border: 2px solid var(--call);}
.photoContact, .photoContact00, .photoContact01, .photoContact02, .photoContact03, .photoContact04, .photoContact05, .photoContact06, .photoContact07, .photoContact08, .photoContact09, .photoContact10, .photoContact11, .photoContact12, .photoContact13 {position: relative; overflow: hidden;}
.photoContact::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/SilvieSimkova.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact00::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/JiriBaloun.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact01::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/PetrTichy.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact02::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/stefka.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact03::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/IvoZboril.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact04::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/20250519_114920.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact05::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/StirbaJiri.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact06::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/McKeating.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact07::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/JosefSedlak.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact08::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/JonathanDLong.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact09::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/stalmach.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact10::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/AdamDrnek.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact11::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/DanielKoci.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact12::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/OlgaPeskova.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact13::before {content: ""; position: absolute; inset: 0; background-image: url('https://www.future-forces.org/images/portraits/PetrAksamit.jpg'); background-size: contain; background-position: 0 60px; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; z-index: 0;}
.photoContact > *, .photoContact00 > *, .photoContact01 > *, .photoContact02 > *, .photoContact03 > *, .photoContact04 > *, .photoContact05 > *, .photoContact06 > *, .photoContact07 > *, .photoContact08 > *, .photoContact09 > *, .photoContact10 > *, .photoContact11 > *, .photoContact12 > *, .photoContact13 > * {position: relative; z-index: 1;}


/* Carousel & Testimonial cards */

#testimonialCarousel .carousel img {width: 85px; max-height: 85px; border-radius: 50%; margin-right: 1rem; overflow: hidden;}
#testimonialCarousel .carousel-inner {padding: 1em; display: flex; align-items: stretch;}
#testimonialCarousel .carousel-item {display: flex; flex-direction: column; min-height: 300px;}
#testimonialCarousel .carousel .card {margin: 0 .5em; border: 0; height: 100%;}
#testimonialCarousel .carousel-control-prev, #testimonialCarousel .carousel-control-next {width: 3rem; height: 3rem; background-color: grey; border-radius: 50%; top: 50%; transform: translateY(-50%);}

/* Partner logo carousel */

.partner-logo-carousel .item {width: 240px;}
.partner-logo-carousel .owl-stage {transition-timing-function: linear !important;}
.partner-logo-item {display: flex; align-items: center; justify-content: center; height: 90px; padding: 0.5rem 0;}
.partner-logo {height: 60px; width: auto; max-width: 100%; object-fit: contain;}


/* base (custom) elements */

.logo {max-height: 40px;}
.custom-tooltip {--bs-tooltip-bg: var(--darkprimary); --bs-tooltip-color: var(--white); --bs-tooltip-opacity: 1; --bs-tooltip-border-radius: 1rem; --bs-tooltip-max-width: 320px;}
img.extended {width: 140px; position: absolute; top: calc(100vh - 106px); right: 20px; z-index: 10;}
.partner-extended {width: 420px; position: absolute; top: calc(100vh - 124px); left: 20px; z-index: 10;}


/* responsive updates style with resolution breakpoints */

@media (min-width: 400px) {
}

@media screen and (min-width: 576px) {
	.hero {background-image: url('../img/motiv.jpg'); background-position: center bottom; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; min-height: calc(100vh - 66px);}

	.carousel-inner {display: flex; width: 90%; margin-inline: auto; padding: 1em 0; overflow: hidden;}
	.carousel-item {display: block; margin-right: 0; flex: 0 0 calc(100% / 2);}
}

@media (min-width: 768px) {
	.logo {max-height: 46px;}
	#backToTop {right: 40px;}
}

@media (min-width: 992px) {
	.carousel-item {margin-right: 0; flex: 0 0 33.333333%; display: block;}
	.carousel-inner {display: flex;}
	.card .img-wrapper {max-width: 100%; height: 13em; display: flex; justify-content: center; align-items: center;}
}

@media (min-width: 1200px) {
	.carousel-item {display: block; margin-right: 0; flex: 0 0 calc(100% / 3);}
	.fontSizeBigger {font-size: 1rem;}
}

@media (min-width: 1400px) {
	#backToTop {right: 70px;}
	.heroBackground {position: relative; width: 100%; background-image: url('../img/vojakA.png'), url('../img/vojakB.png'); background-position: -4% bottom, 104% bottom; background-repeat: no-repeat, no-repeat; background-size: 240px, 220px;}
	.fontSizeBig {font-size: 4.4rem;}
	.fontSizeExtraLarge {font-size: 2.1rem;}
	.fontSizeSuperLarge {font-size: 1.8rem;}
	.fontSizeLarge {font-size: 1.5rem;}
	.fontSizeBigger {font-size: 1.4rem;}
	.fontSizeStandard {font-size: 1.1rem;}
}

@media (min-width: 2400px) {
	.heroBackground {background-position: left bottom, right bottom;}
}