.body {
    margin: opx;
    padding: 0px;    
}
.zaglavlje{
    
    text-shadow: 2px 2px 2px white;
    font-size: 13px;
    color: rgba(61, 25, 139, 0.842);
    background: linear-gradient(white, rgb(179, 173, 236), white)   
}
.zaglavlje >h1{
    text-align: center; 
    
}
#header{
    text-align: center;
    display: flex;
    justify-content: space-between;
}
#header img{
  width: 70px;
  height: 70px;
}
/* Add a black background color to the top navigation */
.topnav {
  background-color: #463096 ;
  overflow: hidden;
  
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  
}

/* Add an active class to highlight the current page */
.active {
  background-color: #9380d4;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
  
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
 
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color:  #4c34a5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: rgb(255, 252, 252);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color:#9380d4 ;
  color: white;
  transition: 200ms;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #9380d4;
  color: rgb(249, 248, 248);
  transition: 200ms;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

#myBtn {
  display: none;
  position: fixed; /* Fixed/sticky position */
  bottom: 10px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgb(54, 42, 113); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 25px; /* Increase font size */
}

#myBtn:hover {
  background-color:  #9380d4; /* Add a dark-grey background on hover */
}
.container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 60px 80px 0px 80px;
  background: linear-gradient(rgb(236, 235, 239), rgb(137, 137, 250), rgb(237, 232, 247)); 
  
  
}
.container1{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 80px 40px 80px ;
  background: linear-gradient(rgb(236, 235, 239), rgb(137, 137, 250), rgb(227, 219, 243)); 
}
.container2{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 80px 40px 80px ;
  background: linear-gradient(rgb(236, 235, 239), rgb(137, 137, 250), rgb(227, 219, 243)); 
}
.container3{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 80px 40px 80px ;
  background: linear-gradient(rgb(236, 235, 239), rgb(137, 137, 250), rgb(227, 219, 243)); 
}
.container4{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 80px 40px 80px ;
  background: linear-gradient(rgb(236, 235, 239), rgb(137, 137, 250), rgb(227, 219, 243)); 
}
.child{
 width: 250px;
 height: 250px;
 margin: 30px; 
}
#nulto{
  background-color: white;
}
#prvo{
  background-color:  rgb(64, 31, 136);   
}
#drugo{
background-color: white;
}
#trece{
  background-color: white;
}
#cetvrto{
  background-color: rgb(64, 31, 136) ;
}
#peto{
  background-color:  rgb(64, 31, 136);   
}
#sesto{
  background-color: white;
}
#sedmo{
  background-color: rgb(64, 31, 136);
}
#osmo{
  background-color: rgb(64, 31, 136);
}
#deveto{
  background-color: white;
}
#deseto{
  background-color:rgb(64, 31, 136) ;
}
#jedanaesto{
  background-color: white;
}
#dvanaesto{
  background-color: rgb(64, 31, 136) ;
}
#trinaesto{
  background-color: white ;
}
#cetrnaesto{
  background-color: white ;
}
#petnaesto{
  background-color: rgb(64, 31, 136) ;
}
#sestnaesto{
  background-color: white ;
}
#sedamnaesto{
  background-color: rgb(64, 31, 136) ;
}
#osamnaesto{
  background-color: white ;
}
.button{
  padding: 50px;
  padding-left: 65px;
}
.visit-btn{
  text-decoration: none;
  color: rgb(245, 246, 249);
  border: 2px solid rgb(249, 249, 253);
  padding: 3px;
}
.visit-btn:hover{
  border: 1px solid #5d4a97;
  background: #c9baf5;
  transition: 1s;
}
.visit-btn1{
  text-decoration: none;
  color: rgb(64, 31, 136);
  border: 2px solid rgb(64, 31, 136);
  padding: 3px;
}
.visit-btn1:hover{
  border: 1px solid rgb(64, 31, 136);
  background: #c9baf5;
  transition: 1s;
}
#footer{
  display: flex;
  flex-direction: column;
   background-color: rgb(189, 188, 188);
   color: rgb(70, 69, 69);
   padding-left: 20px;
   padding-top: 5px;
}
#footer img{
   float: left;
   width: 20px;
   height: 20px;
   padding: 0px 15px 5px 0px;
  
}


@media only screen and (min-width: 300px) and (max-width: 380px){
  .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;

    }
    .topnav a.icon {
      float: right;
      display: block;
      padding: 10px;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
     display: block;
      width: 100%;
      text-align: left;
    }
  #header{
      padding-top: 10px;
      font-size: 6px;
  }
  #header img{
    border-radius: 50%;
      width: 40px;
      height: 40px;
      padding-bottom: 3px;
  }
  .page{
    height: auto;
  }
  .container{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: -20px;
  }
  .container1{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: -20px;
  }
  .container2{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: -20px;
  }
  .container3{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: -20px;
  }
  .container4{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: -20px;
  }
  #footer{
    display: flex;
    flex-direction: column;
     background-color: rgb(189, 188, 188);
     color: rgb(70, 69, 69);
     padding-left: 15px;
     padding-top: 5px;
  }
  #footer img{
     float: left;
     width: 20px;
     height: 20px;
     padding: 3px;
    
  }

   }
   @media only screen and (min-width: 381px) and (max-width: 480px){
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;

    }
    .topnav a.icon {
      float: right;
      display: block;
      padding: 10px;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
     display: block;
      width: 100%;
      text-align: left;
    }
  #header{
      padding-top: 10px;
      font-size: 6px;
  }
  #header img{
    border-radius: 50%;
      width: 40px;
      height: 40px;
      padding-bottom: 3px;
  }
  .page{
    height: auto;
  }
  .container{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 30px;
  }
  .container1{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 30px;
  }
  .container2{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 30px;
  }
  .container3{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 30px;
  }
  .container4{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: -20px;
  }
   }
   @media only screen and (min-width: 481px) and (max-width: 600px){
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;

    }
    .topnav a.icon {
      float: right;
      display: block;
      padding: 10px;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
     display: block;
      width: 100%;
      text-align: left;
    }
  #header{
      padding-top: 10px;
      font-size: 6px;
  }
  #header img{
    border-radius: 50%;
      width: 40px;
      height: 40px;
      padding-bottom: 3px;
  }
  .page{
    height: auto;
  }
  .container{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 90px;
  }
  .container1{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 90px;
  }
  .container2{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 90px;
  }
  .container3{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: 90px;
  }
  .container4{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: -20px;
  }
   }  
   @media only screen and (min-width: 601px) and (max-width: 747px){
    .container{
      display: flex;
      flex-direction: column;
      padding: 10px;
      padding-left: 150px;
    }
    .container1{
      display: flex;
      flex-direction: column;
      padding: 80px;
      padding-left: 150px;
    }
    .container2{
      display: flex;
      flex-direction: column;
      padding: 80px;
      padding-left: 150px;
    }
    .container3{
      display: flex;
      flex-direction: column;
      padding: 80px;
      padding-left: 150px;
    }
    .container4{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: -20px;
  }
   } 
   @media only screen and (min-width: 748px) and (max-width: 915px){
    .container{
      display: flex;
      flex-direction: column;
      padding: 10px;
      padding-left: 200px;
    }
    .container1{
      display: flex;
      flex-direction: column;
      padding: 80px;
      padding-left: 200px;
    }
    .container2{
      display: flex;
      flex-direction: column;
      padding: 80px;
      padding-left: 200px;
    }
    .container3{
      display: flex;
      flex-direction: column;
      padding: 80px;
      padding-left: 200px;
    }
    .container4{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: -20px;
  }
   }
   @media only screen and (min-width: 916px) and (max-width: 1100px){
    .container{
      display: flex;
      flex-direction: row;
      padding: 10px;
      padding-left: 10px;
    }
    .container1{
      display: flex;
      flex-direction: row;
      padding: 10px;
      padding-left: 10px;
    }
    .container2{
      display: flex;
      flex-direction: row;
      padding: 10px;
      padding-left: 10px;
    }
    .container3{
      display: flex;
      flex-direction: row;
      padding: 10px;
      padding-left: 10px;
    }
    .container4{
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-left: -20px;
  }
   }