/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

/*My specific styles
-------------------------------------------------- */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 10px
}


.label-Background-White{
    background-color:white;
}

.background-image-container-home{
    position: relative;
    height: 85vh;    
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;    
    width: -webkit-fill-available;   
}


.background-image-container {
    position: relative;    
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: -webkit-fill-available;
}

.white-text-container h1,
.white-text-container h2,
.white-text-container h3,
.white-text-container h4,
.white-text-container h5,
.white-text-container p {
    color: #fff
}

/* 
Extra small devices (portrait phones, less than 544px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
/*
h1 {
    font-size: 1rem;
}
    */
/*1rem = 16px*/
/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

@media screen and (max-device-width: 767px) and (orientation: portrait) {
    h1.promo-home-line1 {
        font-size: 2.75rem;
    }
    /*1rem = 16px*/
    div.promo-home {
        top: 36%;
        left: 3%;
        position: absolute
    }
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {
    h1.promo-home-line1 {
        font-size: 3rem;
    }
    /*1rem = 16px*/
    div.promo-home {
        top: 18%;
        left: 17%;
        position: absolute
    }
    a.navbar-brand {
        transform: translateX(-100px);
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    h1.promo-home-line1 {
        font-size: 4rem;
    }
    /*1rem = 16px*/
    div.promo-home {
        top: 30%;
        left: 19%;
        position: absolute
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    h1.promo-home-line1 {
        font-size: 6rem;
    }
    /*1rem = 16px*/
    div.promo-home {
        top: 27%;
        left: 18%;
        position: absolute
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    h1.promo-home-line1 {
        font-size: 8rem;
    }
    /*1rem = 16px*/
    div.promo-home {
        top: 30%;
        left: 21%;
        position: absolute
    }
}



.parallaxRepertoar {
    /* The image used */
    background-image: url("../../Assets/Images/img-repertoar.jpg");
    /* Set a specific height */
    height: 150px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallaxAllUsers {
    /* The image used */
    background-image: url("../../Assets/Images/img-kontakty.jpg");
    /* Set a specific height */
    height: 150px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pt-20 {
    padding-top: 20px;
}

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}


.navbar-nav.navbar-zIndex {
    z-index: 1;
}

/* Responsive image gallery rules begin*/
/*https://codesandbox.io/s/by9sfe?file=/style.css:418-444 */

ul {
    list-style: none;
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    padding-bottom: 50px
}

    .image-gallery > li {
        flex-basis: 350px; /*width: 350px;*/
        position: relative;
        cursor: pointer;
    }

    .image-gallery::after {
        content: "";
        flex-basis: 350px;
    }

    .image-gallery li img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        border-radius: 5px;
    }


.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(57, 57, 57, 0.502);
    top: 0;
    left: 0;
    transform: scale(0);
    transition: all 0.2s 0.1s ease-in-out;
    color: #fff;
    border-radius: 5px;
    /* center overlay text */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* hover */
.image-gallery li:hover .overlay {
    transform: scale(1);
}