.bg-primary {
      background-color: white!important;
  }

  @media (max-width: 780px){
   
    header {
      height:100vh !important;
      background-color: #174799;
    /* background-color: rgb(248, 222, 207); */
    background-position:  center top;
    background-size: cover;
    }
  }

  #text_opis{
    font-family: 'Lato', sans-serif;
    color: #636262;
    font-size: 20px;
    line-height: 1.7;
    font-weight: 500;
    
    text-align: center;
    }
  

header{
    height:75vh;
     /* background-image: url("../assets/layout/baner.jpg");  */
     background-color: #174799;
    /* background-color: rgb(248, 222, 207); */
    background-position:  center top;
    background-size: cover;
    
}

.pasek {
    text-shadow: 1px 3px 2px rgba(0,0,0,0.3);
        
        margin-bottom: 30px;
        background: url("../assets/layout/shape.png") no-repeat center center;
    }

.pasek h1 {
    color: #13518c;	
    padding: 0;
    font-size: 40px;
    font-weight: 600;
    text-transform: uppercase;	
}

nav{
  border-bottom: 2px solid white;
}

h1,h2, a{
    text-shadow: 5px 5px 5px rgba(0,0,0,0.3);
    font-weight: 600;
}

header button{
    background:transparent;
    border: 2px solid white;
    color:white;
    padding: 5px;
    font-size: 26px;
    
}

.card img{
    width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
    position: relative;
    
}

.card img:hover{
  /* background-image: url('../assets/layout/baner.png') !important; */

  opacity: 0.7;
}

.card{
  -webkit-box-shadow: 10px 10px 20px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 20px -6px rgba(0,0,0,0.75);
box-shadow: 10px 10px 20px -6px rgba(0,0,0,0.75);
}

.card-body
{
    /* background-image: url("../assets/layout/tlologo.png"); */
    background-repeat:initial;
    

}

.responsive {
  width: 100%;
  height: auto;
}

#kontakt{
    
    background-color: #2D4BA6;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
}

nav li{
    cursor: pointer;
}

header button:hover{
    background-color: rgba(255, 255, 255, 0.3);
    color: rgba(0, 0, 0, 0.5)
}

#up-button{
    display:none;
    position: fixed;
    right: 30px;
    bottom: 20px;
    z-index: 88;
    outline: none;
    border:none;
    background-color: transparent;
    background-image: url('../assets/layout/up-arrow.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 60px;
    width: 60px;
    cursor: pointer;
}

html, body{
  
    overflow-x: hidden;
    background-color: #f3f5f7 ;
}




/*
IMAGE MODEL

*/


.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }
  
  
  
  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* 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;
  }
  
  /* Caption of Modal Image */
  .caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
  }
  
  /* Add Animation */
  .modal-content, .caption {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  
  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close {
    position: absolute;
    top: 75px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  
  .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%;
    }
  }

  text_color{
    color: #f48342;
    font-weight: 800;
  }

/*
IMAGE MODEL

*/