/* Color variables */
:root {
    --raisin-black: #1F2232;
    --platinum: #D8E2DC;
    --fairy-tale: #E3BAC6;
    --misty-rose: #FDE8E9; 
    --salmon-pink: #E4959E;
    --cambridge-blue: #B3D0C3;
    --lapis-lazuli: #2D5D7B;
    --prussian-blue: #0B3954;
    --white: #FFFFFF;
    --transp-white: rgba(255,255,255,0.5);
}

/* Header */
.header {display:flex; align-items:center; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; -o-transition:all .3s; transition:all .3s}
.navbar-fixed-top {position:fixed;top:0;z-index:999}
.navbar {-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out}

/* Bg */
.nn-bg {padding:100px 15px; position:relative}
.nn-bg-caption {padding-top:120px; text-align:center}
.nn-bg-caption h1 {font-size:2rem; font-weight:600; color:var(--white); margin:0; letter-spacing:-0.03em}
.nn-bg-caption h2 {color:var(--fairy-tale); font-weight:600; margin-top:.5rem; letter-spacing:-0.03em}
.nn-bg-caption p {font-size:1.6rem; color:var(--white); margin:2rem 0}

/* Content */
.nnco {padding:30px 15px 50px 15px}
.nn-content {background-color:var(--white); border:1px solid rgba(0,0,0,.125); border-radius:.25rem; padding:25px 50px 50px 50px}
.nn-content h2 {color:var(--lapis-lazuli); margin:3rem 0 2rem 0; font-weight:600; font-size:2rem; letter-spacing:-0.03em}
.nn-content h3 {color:var(--salmon-pink); margin:3rem 0 2rem 0; font-weight:600; font-size:1.6rem}
.nn-content ol li::marker {color:var(--salmon-pink)}
.nn-content ul li::marker {color:var(--salmon-pink)}

/* Veselá Chaloupka sections */
.vecha-s {padding:50px 0}
.vecha-sh {padding:20px 0}

.vecha-s h1, .vecha-s h2 {font-weight:600; font-size:2rem; margin:2rem 0 2rem 0; letter-spacing:-0.03em}
.vecha-s h3 {font-weight:600; font-size:2rem; margin:3rem 0 2rem 0}
.vecha-s h3.hg {margin:1rem 0 2rem 0; text-align:center; font-size:1.4rem}
.vecha-s h4 {font-weight:600; font-size:1.4rem; margin:2rem 0 1rem 0}
.vecha-s p {font-size:1rem}

.vecha-sh p {text-align:center; color:var(--lapis-lazuli)}
.vecha-sh p.stat-title {font-size:3rem; color:var(--lapis-lazuli); text-align:center; margin-bottom:0}

.vecha-platinum {background-color:var(--platinum)}
.vecha-salmon-pink {background-color:var(--salmon-pink)}
.vecha-lapis-lazuli {background-color:var(--lapis-lazuli)}
.vecha-cambridge-blue {background-color:var(--cambridge-blue)}
.vecha-fairy-tale {background-color:var(--fairy-tale)}

.vecha-misty-rose {background-color:var(--misty-rose)}
.vecha-misty-rose .btn-draw {text-transform:uppercase; text-decoration:none; background:none; color:var(--lapis-lazuli); padding:10px 20px; border:2px solid var(--lapis-lazuli); font-size:0.9rem;}
.vecha-misty-rose .btn-draw:hover {color:var(--salmon-pink); border:2px solid var(--salmon-pink)}

.vecha-form-l {text-align:left}
.vecha-form p a {color:var(--lapis-lazuli)}
.vecha-form p a:hover {text-decoration:none}
.vecha-form textarea {height:100px !important}
.vecha-form label {margin-left:10px}

.vecha-bg-01 {background-image:url(../img/01.png); background-repeat: no-repeat; background-position:0 0}
.vecha-bg-02 {background-image:url(../img/02.png); background-repeat: no-repeat; background-position:0 0}
.vecha-bg-03 {background-image:url(../img/03.png); background-repeat: no-repeat; background-position:0 0}

/* Cards */
.card h3 {font-size:1rem; margin:0 0 .5rem 0}

/* Image backgrounds */
.bg-white {background-color:var(--white)}
.bg-financovani {background:url(../img/financovani.jpg) no-repeat 50% 50%; background-size:cover}
.bg-standardy {background:url(../img/standardy.jpg) no-repeat 50% 50%; background-size:cover}

/* Lightbox */
.fslimg {-webkit-filter:brightness(100%); filter:brightness(100%)}
.fslimg:hover {
    -webkit-filter: brightness(60%);
    filter: brightness(60%);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

/* Footer */
.bg-nn {background-color:var(--lapis-lazuli) !important}
.footer {padding:50px 0}
.footer p {color:var(--white)}
.footer p.text-gray::after {content: ""; display: block; width:30px; border-top:2px solid var(--transp-white); margin: 5px 0 5px}
.footer p a:hover {color:var(--white)}
.footer-links {font-size:0.9rem}
.footer-links a {color:var(--white); text-decoration:none}
.footer-links a:hover {color:var(--fairy-tale) !important}
.copyright {padding:20px 0 10px 0; background-color:var(--prussian-blue)}
.copyright p {color:var(--transp-white)}
.copyright p strong {color:var(--white)}
.soc-icons a {font-size:1.5rem; margin-right:10px}

/* Sticky Bar */
.stickybar {display:block; top:150px; right:0; bottom:auto; left:auto; position:fixed; z-index:1000}
.stickybar p {padding:0; margin:5px 0}
.stickybar a {display:block; padding:10px; font-size:0.9rem; border-color:var(--fairy-tale); background-color:var(--fairy-tale)}
.stickybar a i {font-size:2rem}

/* Colorize */
.bw {-webkit-filter: grayscale(100%); -webkit-transition: .3s ease-in-out; -moz-filter: grayscale(100%); -moz-transition: .3s ease-in-out; -o-filter: grayscale(100%);  -o-transition: .3s ease-in-out; filter: grayscale(100%); transition: .3s ease-in-out}
.bw:hover {-webkit-filter: grayscale(0%); -webkit-transition: .3s ease-in-out; -moz-filter: grayscale(0%); -moz-transition: .3s ease-in-out; -o-filter: grayscale(0%); -o-transition: .3s ease-in-out; filter: grayscale(100%); transition: .3s ease-in-out}

/* Typography */
a, button {font-weight:600; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; -o-transition:all .3s; transition:all .3s}
a, a.revert:hover {color:var(--lapis-lazuli)}
a:hover, a.revert {color:var(--salmon-pink)}
strong, .btn {font-weight:600}
button {text-transform:uppercase}
.rem25 {line-height:2.5rem}
.display-8 {font-size:1.8rem; font-weight:600; line-height:1.3; color:var(--lapis-lazuli) !important}
.pl-10 {padding-left:10rem !important}
.text-left {text-align:left}
.text-gray {color:var(--transp-white) !important}
.wrap-link {overflow-wrap:break-word; word-wrap: break-word}
.btn-vecha-primary {text-transform:uppercase; background-color:var(--lapis-lazuli); border:2px solid var(--lapis-lazuli); color:var(--white)}
.btn-vecha-primary:hover {background-color:var(--salmon-pink); border:2px solid var(--salmon-pink); color:var(--white)}
.btn-vecha-secondary {text-transform:uppercase; background-color:var(--prussian-blue); border:2px solid var(--prussian-blue); color:var(--white)}
.btn-vecha-secondary:hover {background-color:var(--raisin-black); border:2px solid var(--raisin-black); color:var(--white)}

body {
    font-size:1rem;
    font-family:
        /* Default font for all */
        'Schibsted Grotesk',
        /* Cross-platform generic font family (default user interface font) */
        system-ui,
        /* Safari for macOS and iOS (San Francisco) */
        -apple-system,
        /* Windows */
        'Segoe UI',
        /* Android */
        Roboto,
        /* Basic web fallback */
        'Helvetica Neue', Arial,
        /* Linux */
        'Noto Sans',
        'Liberation Sans',
        /* Sans serif fallback */
        sans-serif,
        /* Emoji fonts */
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.img-sm {max-width:80%}
#vecha-carousel-lokalita .carousel-caption {background-color:rgba(18,35,61,0.8); padding:10px 10px 0 10px}
#vecha-carousel-intro .carousel-caption {left:3rem; bottom:0}
#vecha-carousel-intro .carousel-caption h5 {text-align:left; text-transform:uppercase; color:var(--fairy-tale)}
#vecha-carousel-intro .carousel-caption p {text-align:left; text-transform:uppercase}
.carousel-control-prev-icon, .carousel-control-next-icon {background-color:rgba(0,0,0,0.25)}
.carousel .fill {width:100vw; height:100vh; background-position:center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover}
.full-screen {background-size: cover; background-position: center; background-repeat: no-repeat}

/* Carousel zoom */
.carousel-inner .carousel-item .fill {-webkit-animation: thing 20s; -o-animation: thing 20s; animation: thing 20s}
.carousel-inner .carousel-item > img {-webkit-animation: thing 20s; -o-animation: thing 20s; animation: thing 20s}
@keyframes thing {
    from {transform: scale(1, 1)}
    to {transform: scale(1.5, 1.5) translateX(-5%)}
}
@-webkit-keyframes thing {
    from {-webkit-transform: scale(1, 1)}
    to {-webkit-transform: scale(1.5, 1.5) translateX(-5%)}
}

/* Video */
.video-wrapper {position:relative; width:100%; height:0; margin:30px 0; padding-bottom:56.25%}
.video {position:absolute; top:0; left:0; width:100%; height:100%}
.vid {width:100%}

/* Navbar */
.bg-transp {background:rgba(255,255,255,0.1)}
.bg-nontrp {background:rgba(18,35,61,1)}
.logoleft {display:none; height:50px}
.logocent {width:100px}
.nav-link {color:var(--white); font-weight:600; padding:.2rem 0 .2rem 0 !important}
.nav-link-logo {display:block; border:none}
.navbar-nav {margin:10px auto}
.navbar-nav li {display:flex; flex-direction:row; align-items:center; margin:0 1rem; text-transform:uppercase; font-size:0.9rem}
.nav-link:hover, .bg-white .nav-link:hover, .bg-white .active .nav-link, .nav-item .active {color:var(--fairy-tale) !important}
.bg-white .nav-link {color:var(--lapis-lazuli)}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    .img-sm {max-width:80%}
    .logoleft {display:block}
    .nav-link-logo {display:none}
    .bg-transp {background-color:var(--prussian-blue)}
    .pl-10 {padding-left:3rem !important}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {  
    .img-sm {max-width:50%}
    .logoleft {display:block}
    .nav-link-logo {display:none}
    .navbar-nav li {margin:0}
    .nav-link {padding:.5rem 0 !important}
    .bg-transp {background-color:var(--prussian-blue)}
    .pl-10 {padding-left:3rem !important}
    .bg-financovani, .bg-standardy {height:45vh}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .img-sm {max-width:70%}
    .logoleft {display:block}
    .nav-link-logo {display:none}
    .navbar-nav li {margin:0}
    .nav-link {padding:.5rem 0 !important}
    .bg-transp {background-color:var(--prussian-blue)}
    .pl-10 {padding-left:3rem !important}
    .bg-financovani, .bg-standardy {height:40vh}
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .img-sm {max-width:70%}
    .nn-bg {padding:100px 15px 60px 15px}
    .nn-bg-caption {padding-top:50px}
    .nn-bg-caption h1 {font-size:2rem}
    .nn-bg-caption p {font-size:1.25rem; line-height:1.6rem}
    .nn-content {padding:0 25px 25px 25px}
    .logo {width:80px}
    .stickybar {bottom:75px; top:auto}
    .stickybar span {display:none; visibility:hidden}
    .logoleft {display:block}
    .nav-link-logo {display:none}
    .navbar-nav li {margin:0}
    .nav-link {padding:.5rem 0 !important}
    .bg-transp {background-color:var(--prussian-blue)}
    .pl-10 {padding-left:3rem !important}
    .bg-financovani, .bg-standardy {height:35vh}
    #vecha-carousel-intro .carousel-caption h5 {font-size:1rem}
    #vecha-carousel-intro .carousel-caption p {font-size:0.8rem}
    #vecha-carousel-lokalita .carousel-caption h5 {font-size:1rem}
    #vecha-carousel-lokalita .carousel-caption p {font-size:0.8rem}
}