

section {
    background-color: white;
    flex-basis: calc(33.33% - 40px);
    margin: 20px;
    padding: 20px;
    border: 3px solid #2F2FA2;
    border-radius: 20px; 
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
  }
  .clan{
    display: flex;
    justify-content: space-around;
    
  
    
  }
  .header-time img{
    width: 310px;
  }

  .clan h4{
    margin-bottom: 5px;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: black;
    font-size: 20px;
  }
  
  .container{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container div{
    height: 100px;
    width: 110px;
    background-color: white;
    margin: 20px;
    text-align: center;
    border-radius: 20px;
    border: 5px solid #E6AF2E;
  }
  .container p{
    padding-top: 25px;
  }
 
  .container2{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container2 button{
    height: 50px;
    background-color: #2F2FA2;
    margin: 20px;
    text-align: center;
    border: 5px solid #2F2FA2;
  }
  .container2 button{
    color: white;
  }
  .container2 :hover{
  
    color:bisque;
    cursor: pointer;
    
  
}
.clanska-desno{
    width: 33%;
  
  }
  .clanska-desno img{
    width: 80%;
    flex-wrap: wrap;
    padding-top: 20px;
    padding-left: 35px;
  }
  .clanska-lijevo{
    width: 33%;
  
  }
  .clanska-lijevo img{
    width: 80%;
    flex-wrap: wrap;
    padding-top: 20px;
    padding-left: 35px;
  }
  .clan{
    display: flex;
   }
   .ostalo{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .ostalo p{
    margin-bottom: 5px;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: black;
    font-size: 20px;
  }

  /*Mobitel*/
@media (max-width: 767px){
  .clan{
    width: 100%;
    flex-wrap: wrap;
  }
  .clanska-desno{
    width: 100%;
    padding-right: 50px;
  }
  .clanska-lijevo{
    width: 100%;
    padding-right: 50px;
  }
  section{
    flex-basis:fit-content;

  }
  .clanska-lijevo img{
    width: 100%;
  }
  .clanska-desno img{
    width: 100%;
  }

  
}




/*Tablet*/

@media (min-width: 768px) and (max-width:1024px){
  .clan{
    width: 100%;
    flex-wrap: wrap;
  }
  .clanska-desno{
    width: 100%;
    padding-left: 100px;
  }
  .clanska-lijevo{
    width: 100%;
    padding-left: 100px;
  }

  .clanska-lijevo img{
    width: 70%;
    padding-left: 50px;

  }
  .clanska-desno img{
    width: 70%;
    padding-left: 50px;
  }
  section{
    flex-basis:fit-content;
  }
  }

