.container {
  max-width: 1280px;
}

.icon-link > .bi {
  width: .75em;
  height: .75em;
}

/*
 * Custom translucent site header
 */

.site-header {
  background-color: rgba(0, 79, 158, .95);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(0, 79, 158, .95) !important;
}
.border-bottom {
  border-bottom: var(--bs-border-width) var(--bs-border-style) rgba(0, 79, 158, .95) !important;
}
.site-header a {
  color: #8e8e8e;
  transition: color .15s ease-in-out;
}
.site-header a:hover {
  color: #fff;
  text-decoration: none;
}

/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-device {
  position: absolute;
  right: 10%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  background-color: #333;
  border-radius: 21px;
  transform: rotate(30deg);
}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 5%;
  background-color: #e5e5e5;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-condensed-100 {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.roboto-condensed-400 {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.roboto-condensed-500 {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;  
}
.roboto-condensed-700 {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.logo {
  width: 100%;
  height: auto;
  max-width: 320px;
  padding: 10px 0px 10px 0px;  
}
.sygnet {
  width: 100%;
  height: auto;
  max-width: 100px; 
}

.color-blue {
  color: #004f9f !important;
}
a .color-blue:hover, a .lead:hover {
  color: dodgerblue !important;
}
a .main-baner:hover {
  opacity: 0.5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}


.main-baner {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
  transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -webkit-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
}
.main-baner-desk {
  width: 100%;
  height: auto;
  display: block;  
}
.main-baner-tab {
  width: 100%;
  height: auto;
  display: none;
}
.main-baner-mob {
  width: 100%;
  height: auto;
  display: none;
}

a {
  text-decoration: none !important;
}


.nav-link {
  font-size: 1.1rem;
  font-weight: 600;
}


.bg-body-tertiary { 
  background-color: rgba(240, 240, 240) !important;
}

.kafelek img{
  margin: 20px 20px 10px 20px;
}

/*
 * Extra utilities
 */

.flex-equal > * {
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    flex: 1;
  }
  .okulary {
    width:100%; 
    max-width:720px; 
    display: block; 
    margin: 0 auto!important;
    } 
}

@media (min-width: 640px) and (max-width: 1100px){
  .main-baner-desk {    
    display: none;
  }
  .main-baner-tab {    
    display: block;
  }
  .main-baner-mob {
        display: none;
  }
}

@media (max-width: 639px) {
  .main-baner-desk {    
    display: none;
  }
  .main-baner-tab {    
    display: none;
  }
  .main-baner-mob {
        display: block;
  }
}

@media (min-width: 260px) {  
  .kafelek img {
    max-width: 160px;
  }  
}