@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,100&display=swap');


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', 'Arial', sans-serif;
}

a {
  text-decoration: none;
}

body {
  width:100%;
}


.arhiv-div {
  display:flex;
  flex-wrap: wrap;
  width:80%;
  height:80px;
  background-color:#a2a4a2;
  margin:0 auto;
  justify-content:space-evenly;  
}

.arhiv-img {
  height:80px;
  width:auto;
}

.arhiv-p {
  height: 80px;
  line-height: 80px;
}

.arhiv-h {
  height:80px;
  margin-bottom: -500px;
}



.TOS {
  margin-top:70px;
  margin-right:10%;
  margin-left:10%;
}

.oglasevanje-p {
  text-align: center;
}

.arhiv-h {
  text-align: center;
  margin-bottom:300px;
}


.italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
  text-align: left;
    color:black;
}



.tos-frame {
  margin-left:10px;
  margin-right:10px;
}

.tos-p {text-align: left;}

.pasica {
  display: block;
  margin:0 auto;
}

@media (max-width:1330px) {

  .pasica {

    width:80%;
    height:auto;

  }

}

.img-responsive {
  display:block;
  margin:0 auto;
}

.uploadForm {
  text-align: center;
}


.comment-wrapper {
  white-space: pre-line;
  width:300px;
  height:250px;
  margin:20px auto;

  text-align:center;
}


.profile-id {
  margin:0 auto;
  text-align:center;
  display: block;
}

.page-frame {

  text-align: center;
  vertical-align: middle;
  padding-top:40px;
  padding-bottom:40px;
  margin:50px auto;
  width:93%;
  background:white;
}

@media (max-width:640px) {
  .page-frame {
    width:95%;
  } 
}



.unreg-comment {
  text-align: center;
  color:black;
}

.commentator {
  top:0;
  margin-bottom:10px;
}

.comment-section{
  
  white-space: pre-line;
  list-style: none;
  width:300px;
  height:auto;
  border: 1px solid black;
  margin:20px auto;
  display: block;
  text-align:center;
  position:relative;

}


.text-container {
  white-space: normal;
  word-break: break-word;
  width: 100%;
  height: 100%;

}

.commentedAt {
  position:absolute;
  bottom:0;
  right:0;

  float:right;
  font-size:11px;
}

.comments {

  font-size: 18px;
  display: block;
}


.foot-grid {
  display:grid;
 grid-template-columns:30% 30% 40%;
}

.foot-p{
  font-size:14px;
  margin-top:10px;    
  color:white;
}

.foot-a {
  width:50px;
}

.foot-h {
  margin-top:20px;
  margin-bottom:20px;
  font-size:18px;  
  color:white;
}

.reg-a {
  text-decoration:underline;
  color:blue;
}

.reg-a:hover {
  text-decoration:none;
}




.foot-col3 {
  margin-top:35px;
  text-align:center;
}

.foot-in {
  display:inline-block;
}



footer {
  position: relative;
  z-index:999999999999999999999999;
  width:100%;
  height:190px;
background:#a2a4a2;
}


@media (max-width:876px) {
.contact-text {
  font-size:12px;
}   
}

@media (max-width:690px) {
  .foot-grid{
  display:grid;
 grid-template-columns:50% 50%;
 grid-template-rows:50% 50%;
}


footer {
  height:280px;
}

}   

.fa {
  margin-top:10px;    
  margin-left:17%;    
  color:#2279fb;
}

.contact-text {
  margin-top:10px;    
  color:white;
}

.foot-img {
  margin:0 auto;
}

.foot-img:hover {
    transition: .5s ease;
    opacity:0.2;
}

.foot-p:hover {
    transition: .5s ease;
    opacity:0.2;
}

contact-text:hover {
    transition: .5s ease;
    opacity:0.2;
}

.fa:hover {
    transition: .5s ease;
    opacity:0.2;
}



footer a:visited {
  text-decoration:none;
}

footer a {
  margin: 0 auto;
  position:relative;
  text-align:center;  
  display:block;
  text-decoration:none;
  color:white;
}


.profile-img {
  display:block; 
  margin-bottom:10px;
}


.g-recaptcha {
  width:200px;
    text-align:center;
    margin:0 auto;

}

.captcha-fake-field {
  background: transparent;
  border: none;
  display: block;
  height: 1px;
  left: 50%;
  top:70%;
  width: 1px;
z-index: -1;
position:absolute;
text-align:center;
margin:0 auto;
}

.captcha-position {
  position:relative;
  text-align:center;
  margin:0 auto;
}

.reg-input {
    border:1px solid black;
    background:white;
}


.reg-div {
  overflow: hidden;
    text-align:center;
    position:relative;
    width:80%;
    min-height:630px;
  background:#a2a4a2; 
  margin:0 auto;    
}
 
.register-div {
    margin:0 auto;
    text-align:center;
    margin-top:20px;
}


.register-form {
    width:350px;
    margin-top:50px;
    height:260px;
    margin:0 auto;
    text-align:center;
  background:white; 
}
 
.register-div input {
    margin-top:10px;
}
 
 
.reg-btn {
  margin-top:20px;
    top:-5%;
    text-align:center;
     color:white;
        height:30px;
    width:130px;
    border-radius:15px;
    border:none;
  background: linear-gradient(to right, #2056ca, #5a9ca5);    
  cursor: pointer;
    
} 
 

h3 {
        margin-top:30px;
        margin-bottom:20px;
    }


@media (max-width:400px) {
      .register-form{
        width:80%;
}
    .reg-h {
        font-size :18px;
    }
}





.login-btn2:hover {
    cursor:pointer;
    opacity:0.3;
}

.login-btn2 {
  padding: 3px 17px;
  border: none;
  outline: none;
  position: relative;
  border-radius: 5px;
  background: linear-gradient(to right, #00FFA3, #DC1FFF);
  cursor: pointer;
  z-index: 1;
}

.login-btn2::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  background-color: white;
  border-radius: 4px;
  z-index: -1;
    transition: 800ms;
}


.login-btn2::after {
  content: attr(data);
  font-size: 16px;
  color: black;  
    z-index: 2;
      transition: 800ms;
}

.login-btn2:hover::before {
  opacity: 50%;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.login-btn2:hover::after{
  color: white;
}




.login-btn3:hover {
  opacity:0.3;
}



.login-btn3 {
     color:white;
        height:30px;
    width:70px;
    border-radius:20px;
    border:none;
    background:#008eff;   
}

.article-image {
  width:100%;

}

.article-img {
    width:400px;
    height:auto;
    margin:0 auto;
    display:block;
}





.article-p {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  text-align: left;
    color:black;
    font-size: 18px;
}


@media (max-width:700px) {

.article-h {
 font-size:19px!important;
}

.date {
  font-size:17px!important;
 }

.article-p {
  font-size:16px;

}
}


.category {
    width:100px;
    height:17px;
    margin-top:5px;
    margin-left:5px;
    position:absolute;
    top:0;
    left:0;
    font-size:13px;
    background:black;
    color:white;
    border:1px solid white;
}

.category1 {
    width:100px;
    height:17px;
    margin-top:5px;
    margin-left:5px;
    position:absolute;
    top:0;
    left:50%;
    font-size:13px;
    background:black;
    color:white;
    border:1px solid white;
}


.category2 {
    width:100px;
    height:17px;
    margin-top:5px;
    margin-left:5px;
    position:absolute;
    top:50%;
    left:50%;
    font-size:13px;
    background:black;
    color:white;
    border:1px solid white;
}


@media (max-width:580px){
    .category1 {
    width:100px;
    height:17px;
    margin-top:5px;
    margin-left:5px;
    position:absolute;
    top:33.3%;
    left:0;
    font-size:13px;
    background:black;
    color:white;
    border:1px solid white;
}


.category2 {
    width:100px;
    height:17px;
    margin-top:5px;
    margin-left:5px;
    position:absolute;
    top:66.6%;
    left:0;
    font-size:13px;
    background:black;
    color:white;
    border:1px solid white;
}

}

@media (max-width:630px){
.article-img {
    width:100%;
    height:auto;
}
}
.com-div {
    margin-top:20px;
    margin-bottom:20px;
  display: grid;
   column-gap:17.5%;
   grid-template-columns:41.25% 41.25%;
    width:80%;
    margin:0 auto;
}

.mzg {
    margin-top:20px;
    margin-bottom:20px;    
    display:block;
   width:100%;
  height: auto;
}


@media (max-width:660px) {
   .mzg {
   width: 100%;
  height: auto;
} 

.com-div {
  display: block;

}
}


.win-div {
    margin-top:20px;
    position:relative;    
    width:80%;
  background:white;
  margin:0 auto;    
    
}

.win-figc {
    font-size:14px;
    text-align:center;
}


.grid2{
    margin-top:20px;
   display: grid;
   grid-template-columns:16% 16% 16% 16% 16%;
   grid-gap:5%;
   height:210px;
}

.win-img {
    display:block;
    width:100%;
    height:140px;
}

.win-img:hover {
        cursor:pointer;
    opacity:0.5;
    transform: scale(1.02);
    
    
}

.category-win1 {
    font-size:12px;
    position:absolute;
    top:0;
    left:0;
    margin-top:5px;
    margin-left:5px;
    background:black;
    color:white;
    width:100px;
    height:16px;
    border:1px solid white;    
}

.category-win2 {
    font-size:12px;    
    position:absolute;
    top:0;
    left:21%;
    margin-top:5px;
    margin-left:5px;
    background:black;
    color:white;
    width:100px;
    height:16px;
    border:1px solid white;    
}

.category-win3 {
    font-size:12px;        
    position:absolute;
    top:0;
    left:42%;
    margin-top:5px;
    margin-left:5px;
    background:black;
    color:white;
    width:100px;
    height:16px;
    border:1px solid white;    
}

.category-win4 {
    font-size:12px;        
    position:absolute;
    top:0;
    left:63%;
    margin-top:5px;
    margin-left:5px;
    background:black;
    color:white;
    width:100px;
    height:16px;
    border:1px solid white;    
}

.category-win5 {
    font-size:12px;        
    position:absolute;
    top:0;
    left:84%;
    margin-top:5px;
    margin-left:5px;
    background:black;
    color:white;
    width:100px;
    height:16px;
  border:1px solid white;
    
}

@media (max-width:970px) {
 .win-figc {
    font-size:14px;
    text-align:center;
}


.grid2{
    margin-top:20px;
   display: grid;
   grid-template-columns:16% 16% 16% 16% 16%;
   grid-gap:5%;
   height:230px;
}

.win-img {
    display:block;
    width:100%;
    height:100px;
}


.category-win1 {
    font-size:12px;
    position:absolute;
    top:0;
    left:0;
    margin-top:5px;
    margin-left:5px;
    background:black;
    color:white;
    width:65px;
    height:16px;
    border:1px solid white;
    
}

.category-win2 {
    font-size:12px;    
    position:absolute;
    top:0;
    left:21%;
    margin-top:5px;
    margin-left:5px;
    background:black;
    color:white;
    width:65px;
    height:16px;
    border:solid 1px white;
    
}

.category-win3 {
    font-size:12px;        
    position:absolute;
    top:0;
    left:42%;
    margin-top:5px;
    margin-left:5px;
    background:black;
    color:white;
    width:65px;
    height:16px;
    border:1px solid white;
}

.category-win4 {
    font-size:12px;        
    position:absolute;
    top:0;
    left:63%;
    margin-top:5px;
    margin-left:5px;
    background:black;
    color:white;
    width:65px;
    height:16px;
    border:1px solid white;
}

.category-win5 {
    font-size:12px;        
    position:absolute;
    top:0;
    left:84%;
    margin-top:5px;
    margin-left:5px;
    background:black;
    color:white;
    width:65px;
    height:16px;
    border:1px solid white;
}
}




@media (max-width:700px) {
    
.grid2 {
 display: grid;
   grid-template-columns:100%;
   grid-template-rows:20% 20% 20% 20% 20%;
   grid-gap:2%;
height:100%;
margin-bottom:140px;

   }
.win-img{
display:grid;
width:100%;
height: 140px; 
    }
    

.win-figc1, .win-figc2, .win-figc3, .win-figc4, .win-figc5 {
    position:absolute;
    width:100%;
    background:black;
    color:white;
}    
    
    
.category-win1 {
    top:0;
    left:0;
}    
    
 .category-win2 {
    top:22%;
    left:0;
}   
    
   .category-win3 {
    top:44%;
    left:0;
} 
  
   .category-win4 {
    top:66%;
    left:0;
}   
    
     .category-win5 {
    top:88%;
    left:0;
}   
    
.win-figc1 {
    position:absolute;
    top:18%;
}   
.win-figc2 {
    position:absolute;
    top:40%;
}   
      
.win-figc3 {
    position:absolute;
    top:62%;
}   
    
.win-figc4 {
    position:absolute;
    top:84%;
}       
    
.win-figc5 {
    position:absolute;
    top:106%;
}    
 
    



}

.article-container {
  margin:0 auto;
width:80%;
z-index:1000;
}

.article-grid {
  display:grid;
  grid-template-columns: 68.5% 28.5%;    
  margin:0 auto;
  gap:3%;
  z-index:1000;  
}





.article-h {
  font-size:34px;
  position: relative;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  color:black;
  font-weight: bold;
  margin-bottom: 10px;
}

.date {
  margin-bottom:10px;
  font-weight: bold;
 color: #8c7d7f;
 font-size:20px;
}




@media (max-width:700px) {
  .article-div-right {
    display:none;
  
  }

.article-grid {
  display:grid;
  grid-template-columns: 100%;    
  margin:0 auto;
  z-index:1000;  
}


}


.article-header {
  width:100%;
  opacity:50%;
}

.adimg {
  width:100%;
}






.container{
    position:relative;
    width:80%;
  background:white;
  margin:0 auto;
  height:100%;
}

.grid {
      display: grid;
   grid-template-columns:50% 50%;
   height:480px;
}


.fig1 {
      transition: .2s;
  grid-row: 1 / span 2;    
        display:block;
   width:100%;
  height: 480px;    
}


.fig2 {
      transition: .2s;
        display:block;
   width:100%;
  height: 240px;    
}

.fig3 {
      transition: .2s;
    width:100%;
            display:block;
  height: 240px;  
}

.figc1 {
    color:white;
        bottom:0;
    position:absolute;
    width:50%;
    background:black;
}


.figc2 {
    color:white;
        bottom:50%;
    position:absolute;
    width:50%;
    background:black;
}



.figc3 {
    color:white;
        bottom:0;
    position:absolute;
    width:50%;
    background:black;
}



.article {
      transition: .2s;
  grid-row: 1 / span 2;    
        display:block;
   width:100%;
  height: 480px;
}


.article1 {
      transition: .2s;
        display:block;
   width:100%;
  height: 240px;  
}



.article2 {
      transition: .2s;
    width:100%;
            display:block;
  height: 240px; 
}


.article:hover, .article1:hover, .article2:hover {
    cursor:pointer;
    opacity:0.5;
    transform: scale(1.02);
    
}





@media (max-width:860px) {

.grid {
      display: grid;
   grid-template-columns:50% 50%;
   height:300px;
   
}


.fig1 {
  grid-row: 1 / span 2;    
        display:block;
   width:100%;
  height: 300px;
}


.fig2 {
        display:block;
   width:100%;
  height: 150px;  
}

.fig3 {
            display:block;
   width:100%;
  height: 150px; 
}

.figc1 {
    color:white;
        bottom:0;
    position:absolute;
    width:50%;
    background:black;
}


.figc2 {
    color:white;
        bottom:50%;
    position:absolute;
    width:50%;
    background:black;
}



.figc3 {
    color:white;
        bottom:0;
    position:absolute;
    width:50%;
    background:black;
}


.article {
      transition: .2s;
  grid-row: 1 / span 2;    
        display:block;
   width:100%;
  height: 300px;
}


.article1 {
      transition: .2s;
        display:block;
   width:100%;
  height: 150px;  
}



.article2 {
      transition: .2s;
    width:100%;
            display:block;
  height: 150px; 
}

}

@media (max-width:580px) {

.grid {
      display: grid;
   grid-template-columns:100%;
   grid-template-rows:repeat 1, 100%;
   height:600px;
   
}


.fig1 {
        display:block;
   width:100%;
  height: 200px;
}


.fig2 {
        display:block;
   width:100%;
  height: 200px;  
}

.fig3 {
            display:block;
   width:100%;
  height: 200px; 
}



.article {
      transition: .2s;
        display:block;
   width:100%;
  height: 200px;
}


.article1 {
      transition: .2s;
        display:block;
   width:100%;
  height: 200px;  
}



.article2 {
      transition: .2s;
    width:100%;
            display:block;
  height: 200px; 
}

.figc1 {
    color:white;
        bottom:66.3%;
    position:absolute;
    width:100%;
    background:black;
}


.figc2 {
    color:white;
        bottom:33.3%;
    position:absolute;
    width:100%;
    background:black;
}



.figc3 {
    color:white;
        bottom:0;
    position:absolute;
    width:100%;
    background:black;
}




}








h1 {
  font-size: 2.2rem;
}

h2 {
  color: #000;
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 10px;
}

/* BASIC SETUP */


.nav-wrapper {
  width: 100%;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  z-index:1000;
  top: 0;
}



/* NAVIGATION */

.navbar {
  z-index:999999999999999999999999;
  position: sticky;
  top: 0; 
  width:100%;
  height: 50px;
  background:#a2a4a2;
  align-items: center;
}



.nav-item{
    display:inline;
}

.navbar img {
  width: auto;
  margin-left: 20px;
}

.navbar ul {
  place-items: center;
    display:grid;
 grid-template-columns:8% 8% 8% 10% 15% 15% 22%; 
 grid-gap:8%;
     float:right;   
  list-style: none;
  margin-right:360px;
  
}

.nav-item a {
    text-align:center;
    float:right;
  color: #000;
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.3s ease-out;
}



.dropdown-login:hover {
    opacity:0.3;
}
    
.nav-item-login {
  margin-bottom: 5px;
}

.nav-item-login a {
  color: white;
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.3s ease-out;
}

.nav-item a:hover {
  color: #3498db;
}



/* SEARCH FUNCTION */

#search-icon {
  margin-top: 0;
  transition: color 0.3s ease-out;
}




#search-icon:hover {
  color: #3498db;
  cursor: pointer;
}

.search {
  transform: translate(-15%);
  -webkit-transform: translate(-15%);
  transition: transform 0.7s ease-in-out;
  color: #3498db;
}



.no-search {
  transform: translate(15%);
  transition: transform 0.7s ease-in-out;
}

.search-input {
    display:inline;
  position: absolute;
  top: 12px;
  right: -360px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.6s ease;
  width:200px;
}

.search-arhiv {
  display:inline;
position: absolute;
top: -4px;
right: -110px;
opacity: 0;
z-index: -1;
transition: opacity 0.6s ease;
width:165px;
}

.search-active {
  opacity: 1;
  z-index: 0;
}

input {
  border: 0;
  border-left: 1px solid #ccc;
  border-radius: 0; /* FOR SAFARI */
  outline: 0;
  padding: 5px;
}

/* MOBILE MENU & ANIMATION */

.menu-toggle .bar{
  width: 25px;
  height: 3px;
  background-color: #3f3f3f;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.menu-toggle {
    margin-top:8px;
    float:right;
  margin-right: 25px;
  display: none;
}

.menu-toggle:hover{
  cursor: pointer;
}

.login 
  {
    margin-top:7px;
    float:right;
  margin-right: 5%;
  display: none;
}







#mobile-menu.is-active .bar:nth-child(2){
  opacity: 0;
}

#mobile-menu.is-active .bar:nth-child(1){
  -webkit-transform: translateY(8px) rotate(45deg);
  -ms-transform: translateY(8px) rotate(45deg);
  -o-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg);
}

#mobile-menu.is-active .bar:nth-child(3){
  -webkit-transform: translateY(-8px) rotate(-45deg);
  -ms-transform: translateY(-8px) rotate(-45deg);
  -o-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

/* KEYFRAME ANIMATIONS */

@-webkit-keyframes gradbar {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes gradbar {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes gradbar {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

/* Media Queries */

  /* Mobile Devices - Phones/Tablets */

@media only screen and (max-width:875px) { 
  /* MOBILE HEADINGS */
  
  h1 {
    font-size: 1.9rem;
  }
  
  h2 {
    font-size: 1rem;
  }
  
  p {
    font-size: 0.8rem;
  }
  
  /* MOBILE NAVIGATION */
     
  .navbar ul {
      margin-top:0;
      float:none;
      z-index:5;
    display: flex;
    flex-direction: column;
    position: fixed;
    justify-content: start;
    top: 50px;
  background:#a2a4a2;
    width: 100%;
    height: calc(50vh - 50px);
    transform: translate(-101%);
    text-align: center;
    overflow: hidden;
  }
  
  .nav-item a {
    text-align:center;
    float:none;
  color: #000;
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.3s ease-out;
}
  
  
  .navbar li {
    padding:0;
  }
  
  .navbar li:first-child {
    margin-top: 20px;
  }
  
  .navbar li a {
    font-size: 1rem;
  }
   
  .menu-toggle, .bar {
    display: block;
    cursor: pointer;
  }
  
 .login {
    display: block;
    cursor: pointer;
} 

.dropdown-login {
    display:none;

}

.login-btn2 {
    display:none;

}

.login-btn3 {
    display:none;

}


.nav-item-login a {
    display:none;
}

  
  .mobile-nav {
    height:40vh;
  transform: translate(0%)!important;
}
  
#search-icon {
  font-size: 0.9rem;
  margin-top: 0;
  margin-right: 0;
  transition: color 0.3s ease-out;
}

#search-icon:hover {
  color: #3498db;
  cursor: pointer;
}

.no-search {
  transform: translate(0);
  transition: transform 0.7s ease-in-out;
}


.search {
  transform: translate(-0);
  -webkit-transform: translate(-0);
  transition: transform 0.7s ease-in-out;
  color: #3498db;
}

.search-active {
  opacity: 1;
  z-index: 9;
}

.search-input {
    width:50%;
    display:inline;
  position: relative;
  top:-20px;
  left:0;

  opacity: 1;
  z-index: 10;
  transition: opacity 0.6s ease;
}

.search-arhiv {
  width:50%;
  display:inline;
position: relative;
top: 0;
left:0;

opacity: 1;
z-index: 10;
transition: opacity 0.6s ease;
}


  
}














:root {
  --white-color:#a2a4a2;
  --blue-color: #4070f4;
  --grey-color: white;
  --grey-color-light: white;
}



/* sidebar */
.sidebar {
  z-index:100;
  display:block;
  padding: 60px 0;
  width: 60px;
  position: fixed; 
  height:100%;
  top: 0;
  left: 0; 
  box-shadow: 0 0 1px var(--grey-color-light);  
  background-color: var(--white-color);   
}

@media (max-width: 650px) {
  .sidebar {
    width:35px;

  }
}


.sidebar.open {
  z-index: 100;
  overflow-y: scroll;
  box-shadow: 0 0 1px var(--grey-color-light);  
  background-color: var(--white-color);
  height: 100%;
  padding: 80px 20px;
  width: 260px;  
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.5s ease;
  display:block;
}
.sidebar::-webkit-scrollbar {
  display: none;
}
.menu_content {
  display:block;
  position: relative;
}
.menu_title {
  padding: 6px 30px;  
display:block;
}
.sidebar.open .menu_title {
  display:block;
  padding: 6px 30px;
  margin: 15px 0;
  padding: 0 20px;
  font-size: 18px;  
}


.sidebar.open .item {
  list-style: none;
}

.sidebar.open .item-uni {
  list-style: none;
}

.navlink_icon {
  position: relative;
  font-size: 22px;
  min-width: 50px;
  line-height: 40px;
  display: inline-block;
  border-radius: 6px;
  color:black;
  text-align:center;
}

@media (max-width: 650px) {
.navlink_icon {

  min-width: 30px;

}
}


.nav_link {
  display:block;
  text-align:center;
  list-style:none;
}


.navlink_icon:hover {
  background: var(--blue-color);
}

.sidebar .navlink {
  display:none;
}



.sidebar.open .item-uni:hover {
  border-radius: 8px;
  color: var(--white-color);
  background: var(--blue-color);
}


.nav_link:hover {
  color: var(--white-color);
  background: var(--blue-color);
}

.submenu_item {
  cursor: pointer;
  text-align: center;
}
.submenu {
  display: none;
  text-align:center;
}









.sidebar .submenu {
  text-align:center;
  display: none;
}


.show_submenu .arrow-left {
  transform: rotate(90deg);
}


.submenu .sublink {
  text-align:center;
}
.bottom_content {
  height:100%;
  display:block;
  bottom: 60px;
  left: 0;
  width: 260px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.bottom {
  height:100%;
  display:block;
  position: absolute;
  display: flex;
  align-items: center;
  left: 0;
  justify-content: space-around;
  padding: 18px 0;
  text-align: center;
  width: 100%;
  color: var(--grey-color);
  border-top: 1px solid var(--grey-color-light);
  background-color: var(--white-color);
}



.bottom span {
  display: none;

}

.bottom i {
  display:none;
}



.display.open .bottom i {
  display:none;
  font-size: 20px;
}