.container {
    max-width: 960px;
}


/*
 * Rewrite bootstrap colors
 */
:root {
    /***/
    --bs-primary: #085798;
    --bs-primary-rgb: 8,87,152;
    /***/
    --bs-secondary: #87BCE8;
    --bs-secondary-rgb: 135,188,232;
    /****/
    --bs-secondary: #87BCE8;
    --bs-secondary-rgb: 135,188,232;
    /***/
    --bt-primary: #9492EC;
    --bt-primary-rgb: 148,146,236;
    /***/
    --bt-secondary: #1613A5;
    --bt-secondary-rgb: 22,19,165;
    --bt-secondary-r: 22 19 165;
    /***/
    --bt-color: #4A48D5;
    /***/
    --bs-success: #198754;
    --bs-success-rgb: 25,135,84;
    /***/
    --bs-info: #0dcaf0;
    --bs-info-rgb: 13,202,240;
    /***/
    --bs-warning: #ffc107;
    --bs-warning-rgb: 255,193,7;
    /***/
    --bs-danger: #dc3545;
    --bs-danger-rgb: 220,53,69;
    /***/
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248,249,250;
    /***/
    --bs-dark: #212529;
    --bs-dark-rgb: 8,87,152;
    /***/
	--bs-white: #FFF;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    /***/

    --bs-body-color: #085798;
    /***/
    --bs-body-bg: #398ACE;
    --bs-body-rgb: 57,138,206;
	/***/
	--bs-light-bg: #87BCE8;
	--bs-light-bg-rgb:	135, 188, 232;
    /***/
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
}

.btn-outline-secondary {
    color: var(--bt-color);
    border-color: var(--bt-secondary);
}

    .btn-outline-secondary:hover {
        color: var(--bt-secondary);
        border-color: var(--bt-color);
        background-color: var(--bt-color);
    }

    .btn-outline-secondary:active {
        color: var(--bt-secondary);
        border-color: var(--bt-color);
        background-color: var(--bt-color);
    }

        .btn-outline-secondary:active:focus {
            box-shadow: 0 0 0 0.25rem rgb(var(--bt-secondary-r) / 50%);
        }

    .btn-outline-secondary:focus {
        box-shadow: 0 0 0 0.25rem rgb(var(--bt-secondary-r) / 50%);
    }


.bg-blue {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-bg-rgb),var(--bs-bg-opacity))!important;
}

/*
 * Page loader
 */
.loader-frame {
    text-align: center;
}

/*
 * Custom translucent site header
 */

.site-header {
    /*--bs-body-bg*/
    background-color: rgba(var(--bs-body-rgb), .95);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

    .site-header a {
        color: var(--bs-secondary);
        transition: color .15s ease-in-out;
    }

        .site-header a:hover {
            color: var(--bs-white-rgb);
            text-decoration: none;
        }

.rozcestnik{
	height: 250px;
}


/*
 * Extra utilities
 */

.flex-equal > * {
    flex: 1;
}

@media (min-width: 768px) {
    .flex-md-equal > * {
        flex: 1;
    }
}

/***** Timeline */

* {
  box-sizing: border-box;
}

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 8px;
  background-color:  var(--bs-body-color);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.time-container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.time-container::after {
  content: '';
  position: absolute;
  width: 29px;
  height: 29px;
  right: -16px;
  background-color: white;
  border: 4px solid var(--bt-secondary);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50.25%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

/* Full-width containers */
  .time-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

/* Make sure that all arrows are pointing leftwards */
  .time-container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

/* Make sure all circles are at the same spot */
  .left::after, .right::after {
    left: 15px;
  }

/* Make all right containers behave like the left ones */
  .right {
    left: 0%;
  }
}


/*****************************************
modal IMG
**/


/* Style the Image Used to Trigger the Modal */
#smallImg {
  border-radius: 5px;
  cursor: zoom-in;
  transition: 0.3s;
}

#smallImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 500; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  z-index: 600;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 50px;
  right: 50px;
  color: vat(--bt-primary);
  font-size: 50px;
  font-weight: bold;
  transition: 0.3s;
  z-index: 900;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}