.bg-main {background-color: rgba(87, 21, 27, 0.9) !important;}
.bg-scnd {background-color: rgb(254, 246, 234);}

/* PISMO */
.alex-brush {font-family: "Alex Brush", serif; font-style: normal; font-weight: 400;}
.cinzel {font-family: "Cinzel", serif; font-optical-sizing: auto; font-style: normal; font-weight: 400;}
.cinzel-light {font-weight: 300;}
.cinzel-medium {font-weight: 500;}
.cinzel-semibold {font-weight: 700;}
.cinzel-bold {font-weight: 900;}
.cormorant {font-family: "Cormorant", serif; font-optical-sizing: auto; font-style: normal; font-weight: 400;}
.cormorant-light {font-weight: 300;}
.cormorant-medium {font-weight: 500;}
.cormorant-semibold {font-weight: 600;}
.cormorant-bold {font-weight: 700;}

/* NAVBAR */
#navbar {transition: padding 0.5s linear;}
#navbar-menu a {border: 1px solid rgba(0, 0, 0, 0); border-radius: 8px;}
#navbar-menu a:focus, #navbar-menu a:hover, #navbar-menu .active {background: rgb(255, 255, 255);}
.navbar-brand {letter-spacing: 2px;}

/* OSTATNE */
.btn-outline-main {border-color: rgb(130, 23, 23) !important; color: rgb(130, 23, 23) !important;}
.btn-outline-main:hover, .btn-outline-main:focus {background: rgb(130, 23, 23) !important; color: white !important;}
.border-main {border-color: rgb(130, 23, 23) !important;}
.container-fluid {max-width: 1920px;}
.hover-underline a {text-decoration: none;}
.hover-underline a:hover, .hover-underline a:focus {text-decoration: underline;}
.grecaptcha-badge {visibility: hidden;}
.title-container {display: inline-block; position: relative;}
.link-main, .text-main {color: rgb(130, 23, 23);}
.link-main:focus, .link-main:hover {color: rgb(162, 55, 55);}
.text-shadow {text-shadow: 3px 3px 5px #888888;}

/* CSS ANIMACIE */
.active {display: block !important;}
.reveal {visibility: hidden;}
.fade-in {animation-duration: 3s; animation-name: fadeIn;}
.flip {animation-direction: reverse; animation-duration: 0.5s; animation-name: flip;}
.heartbeat {animation-duration: 2s; animation-name: heartbeat; animation-iteration-count: infinite;}
.neon-glow {animation-direction: alternate; color: white; animation-duration: 1s; animation-name: neonGlow; animation-iteration-count: infinite;}
.rotate {animation: 0.5s ease-out 0s rotate;}
.slide-in {animation-duration: 0.5s; animation-fill-mode: both; animation-name: slideIn;}
.slide-in-left {animation-duration: 0.5s; animation-name: slideInLeft;}
.slide-in-right {animation-duration: 0.5s; animation-name: slideInRight;}
.show-me, .show-me-2, .show-me-3, .show-me-4 {animation-duration: 1.0s; animation-fill-mode: both; animation-name: show-me; opacity: 0;}
.show-me-2 {animation-duration: 1.75s;}
.show-me-3 {animation-duration: 2.50s;}
.show-me-4 {animation-duration: 3.25s;}
.wave {animation: moveWave 2s linear infinite; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="20" viewBox="0 0 100 20"><path fill="none" stroke="%230daccb" stroke-width="3" d="M0 10 Q 25 0, 50 10 T 100 10"></path></svg>') repeat-x; background-size: 100px 20px; height: 20px; margin-left: -10px; width: calc(100% + 20px); }
.zoom-in {animation: zoomInEffect 1s ease forwards; display: inline-block; opacity: 0; transform: scale(0);}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes flip {
	0% {transform: none;}
	100% {transform: scalex(-1)}
}

@keyframes heartbeat {
	0% { transform: scale(1); }
	25% { transform: scale(0.8); }
	50% { transform: scale(1); }
	75% { transform: scale(0.8); }
	100% { transform: scale(1); }
}

@keyframes moveWave {
	from {background-position: 0;}
	to {background-position: 100px;}
}

@keyframes neonGlow {
	from { text-shadow: 0 0 8px white; }
	to { text-shadow: 0 0 20px cyan, 0 0 30px cyan, 0 0 40px cyan, 0 0 50px cyan; }
}

@keyframes rotate {
	0% {transform: none;}
	100% {transform: rotate(360deg);}
}

@keyframes slideIn {
  0% {opacity: 0; transform: translateY(1rem);}
  100% {opacity: 1; transform: translateY(0rem);}
	0% {opacity: 0; transform: translateY(1rem);}
}

@keyframes slideInLeft {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

@keyframes slideInRight {
	from { transform: translateX(+100%); }
	to { transform: translateX(0); }
}

@keyframes show-me {
	100% {opacity: 1;}
}

@keyframes zoomInEffect {
	from {opacity: 0; transform: scale(0);}
	to {opacity: 1; transform: scale(1);}
}

@media (max-width: 991.98px) {
	.timeline::before {display: none;}
}