@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;500;800&family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,300;1,6..12,400;1,6..12,500;1,6..12,800&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,600;1,700&display=swap');

:root {
    --tan:rgb(228, 208, 178);
    --white:#fff;
  }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
body {
    font-family: 'Nunito Sans', sans-serif;
}

.btn{
    display:inline-block;
    margin:20px 0;
    padding:10px 30px;
    background:#fff;
    color:#333!important;
}
.btn:hover{
  background:var(--tan);
    color: #333!important;
    transition: .3s ease;
}
.btn-dark:hover {
  background:#333;
  color:#fff!important;
}
ul{
    list-style:none;
}
a{
  color:inherit;
    text-decoration:none;
}
.column-2 p a{
    color:#fff;
}
a:visited{
    color:inherit;
}
h1{
    font-size:30px;
    font-weight:700;
    text-transform: uppercase;
}
h2{
    font-size:24px;
    font-weight:500;
    text-transform: uppercase;
}
p{
    margin:16px 0 10px 0;
    font-size:1.1rem;
}
ul li{
    font-size:1rem;
}
.about ul li{
    font-size:1.1rem;
    padding:4px;
}

.text-primary{
    color:var(--primary-color);
}

.container{
    max-width:1200px;
    margin:auto;
    overflow:hidden;
}

.logo{
    font-size: x-large;
    text-transform: uppercase;
    color:#fff;
  }

.overlay{
    background:var(--overlay-color);
    height:100%;
    width:100%;
    position:absolute;
    color:#fff;
}
section{
    padding:40px;
    height:100%;
}
.grid{
    display:grid;
    grid-template-columns: repeat(2,1fr);
}

.row{
    display:flex;
}
.box{
    padding:20px;
}


/* Flex items */
.flex-items {
    display: flex;
    text-align: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

.flex-items > div {
    padding: 20px;
}

/* Flex columns */
.flex-columns.flex-reverse .row {
    flex-direction: row-reverse;
}

.flex-columns .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}
.flex-columns .column .column-1{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding:60px 0;
}


.flex-columns .column .column-1,
.flex-columns .column .column-2 {
    height:100%; 
}

.flex-columns img {
    width: 100%;
    height: 100%;
}

.flex-columns .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 30px;
}


.flex-columns p {
    margin: 20px 0;
}

.navbar.top{
  background: transparent;
}

.navbar {
  height:70px;
  color:#fff;
  padding: 20px;
  position:fixed;
  width:100%;
  top:0px;
  z-index:10;
  transition: 0.5s;
  background:#333;
  opacity: .8;
}
.navbar .container {
   display: flex;
  align-items: center;
  justify-content: space-between;
}


.navbar a {
  padding: 10px 20px;
  margin: 0 5px;
}
.social {
  margin-left:40px;
}
.social a{
  padding:10px;
}
.navbar a:hover {
 color:var(--tan);
}

.navbar ul {
  display: flex;
}
.navbar i{
  font-size:20px;
}


.showcase{
  background:url("img/Naslovna-Vice.jpg") no-repeat center center/cover;
  background-position: 70%;
  content:'';
  height:800px;
  position:relative;
  
}

.showcase::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
}
.showcase .container{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  align-items:center;
  justify-content: center;
  top:0;
  left:0;
  height:100%;
  width:100%;
}
.showcase .content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width:600px;
  padding:40px;
}
.showcase h1{
  font-weight: 800;
  font-size: 32px;
  line-height: 50px;
}


.title{
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.line{
  border-bottom:2px solid var(--tan);
  max-width:auto;
  bottom:0;
  left:0;
  position:relative;
  
  }
.about{
  background:var(--tan);
}
.about .title .line{
  border-bottom:2px solid #fff;
}
.about img{
  height:600px;
}
.about ul li span{
  font-weight: bold;
}
.about p a:hover{
border-bottom:1px solid #fff;
}
.img-box {
  position: relative;
  margin: auto;
  overflow: hidden;
  width:auto;  
  height:auto;
}
.img-box img {
  max-width: 100%;
  transition: all 1.9s;
  display: block;
  width: 100%;
  height:100%;
  height: auto;
  transform: scale(1);

}

.img-box:hover img {
  transform: scale(1.05);
}
.order{
  position: relative;
  width:282px;
  background:var(--tan);
  display:flex;
  flex-direction:column;
  justify-content: center;
  text-align: center;
  align-items: center;
  top:-10px;
}
.order p{
  margin:0;
  margin-top:10px;
}

.gallery .grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  padding:20px;
}
.gallery .grid .fit-image:first-child{
  grid-column:1/1;
  grid-row:1/3;
}
.gallery .grid .fit-image:nth-child(7){
  grid-column:3/3;
  grid-row:2/4;
  }
.fit-image img{
  width:100%;
  height:100%;
}
.grid img{
  margin-bottom:15px;
  transition:0.5s ease;
  padding:10px;
}
.grid img:hover{
  opacity: 0.7;
  transition:0.5s ease;
  cursor:pointer;
}
.modal{
  display:none;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgba(0,0,0,0.9);
  z-index:10;
}
.modal-content{
  margin-top:10px;
  position: relative;
  display:flex;
  flex-direction: column;
  width:100%;
  pointer-events: auto;
  outline:0;
}

.modal-content img{
 max-height:800px; 
}

.modal-header{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
}
.modal-body{
  position: relative;
  margin:auto;
}
.my-slides {
  width:100%;
  height:100%;
  position:relative;
/*   background:red; */

}
.my-slides .img-box{
  position:relative;
}
.my-slides .img-box p{
  position: absolute;
  bottom:-20px;
  left:0;
  background:#333333d8;  
  color:#fff;
  padding:20px;
  font-size:14px;
  max-width:400px;
  text-align: start;
}

/* 
.my-slides .image img{
  height:100%;
  width:100%;
  object-fit: cover;
} */
.close{
  color:#fff;
  position: absolute;
  right:25px;
  font-size:4rem;
  font-weight: 100;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.3s ease;
  z-index:10;
}
.close:hover, .close:focus{
  color:#fff;
  text-decoration: none;
  font-weight: 700;
  opacity:0.75;
  transition: 0.3s ease;
}
.prev, .next{
  color:#fff;
  position: absolute;
  cursor: pointer;
  opacity: 0.5;
  top:50%;
  padding:0.4rem;
  margin-top:-50px;
  font-size:3rem;
  user-select: none;
  z-index:10;
  background-color:rgba(0,0,0,0.5);
}
.next{
  right:0;
}
.prev:hover, .next:hover{
  opacity:1;
  transition: 0.3s ease;
  background-color:rgba(0,0,0,0.8);

}

.modal-header .numbertext{
  color:grey;
  font-size:1.5rem;
  padding:8px 50px;
  position: absolute;
  left:40px;
  top:40px;
  z-index:10;
}


.modal-footer{
  color:#fff;
  display:flex;
  align-items:flex-end;
  justify-content: center;
  padding:1rem;
}
p#caption{
  background:red;
  height:100%;
  overflow:hidden;
}

.footer{
  height:70px;
  background:#333;
  color:#fff;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align:center;
}



@media(max-width: 800px) {
  .logo{
    padding-bottom:20px;
  }
  .navbar {
      flex-direction: column;
      height:120px;
  }
  .navbar .container{
    flex-direction: column;
}
  .navbar a {
      padding: 10px 10px;
      margin: 0 3px;
  }

  .flex-items {
      flex-direction: column;
  }

  .flex-columns .column, .flex-grid .column {
      flex: 100%;
      max-width: 100%;
  }
  .showcase  .container{
      display:flex;
      flex-direction: column;
      text-align:center;
      justify-content: center;
      text-align:center;
      height:100%;
      width:100%;
      top:0;
      left:0;
  }
  .showcase .content{
      max-width:auto;
      padding:40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      height: 100%;
      padding: 0 20px;
    }
    .modal-content img{
      object-fit: cover;
      max-height:600px;
    }
    
  
    .close{
      font-size:24px;
  }
  h2{
      font-size:1.5em!important;
  }
  .numbertext{
      font-size:16px!important;
  }
  .prev, .next{
      font-size:36px;
  }
}

@media(max-width: 500px) {
  .logo{
    padding-bottom:20px;
  }
  .navbar ul li{
    font-size:0.9rem;
}
.navbar a {
  padding: 8px 0px;
  margin: 0 5px;
}
.social {
  margin-left:10px;
}
.social a{
  padding:2px;
}

.navbar i{
  font-size:14px;
}
  .showcase h1{
    font-weight: 800;
    font-size: 23px;
    line-height: 50px;
  }
}