/* ------------------- Home Page ------------------------- */
.main-body-div {
   width: 65%;
   min-height: 600px;
   margin: 0 auto;
   
}

.categories-div {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: space-around;
   /* border: 1px solid green; */
   padding: 5px;
}
.item-div {
   width:300px;
   height: 300px;
   /* border: 1px solid black; */
   margin: 5px;
}
.item-title-div {
   height: 10%;
   background: var(--mainBackColor);
   color: white;
   padding: 3px;
   
}
.item-img-div {
   height: 60%;
}
.item-text-div {
   height: 20%;
   font-size: 13px;
   color: gray;
   padding: 3px;
}

.item-footer-div {
   height: 10%;
   /*background: var(--mainBackColor);*/
   padding: 3px;
}
.item-div a{
   text-decoration: none;
   color: var(--mainBackColor);
   padding: 5px;
}
.item-div a:hover{
   color: black;
}

/* --------------------- Main Slideshow ---------------------------------*/
.slides-container-div div {
   box-sizing: border-box;
}
.slides-container-div {
   height: 450px;
   position: relative;
   margin: auto;
   /* border: 1px solid blue; */
}

.slide-div {
   display: none;
   
}
.slide-img-div {
   max-width: fit-content;
   position: absolute;
   top:10px;
   right: 20px;
   margin: auto;
   z-index: -1;
}
.slide-img-div img {
   vertical-align: middle;
   height: 410px;
   /* max-width: 350; */
   width:500px;
}

.title-div {
   color: black;
   font-size: 35px;
   padding: 8px 12px;
   position: absolute;
   top: 80px;
   left: 40px;
   text-align: left;
   width: fit-content;
   cursor: pointer;
   border: .5px solid var(--mainBackColor)
}

.item-descr-div {
   color: var(--mainBackColor);
   font-size: 25px;
   padding: 8px 12px;
   position: absolute;
   top: 250px;
   left: 20px;
   width: fit-content;
   text-align: left;
   width: 600px;
   /*border: .5px solid rgb(165, 162, 162);*/
}

.dots-div{
   width:90%;
   text-align: center;
   margin: auto;
   padding: 10px;
}

.dot-span {
   height: 15px;
   width: 15px;
   margin: 0 2px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
 }

 .active, .dot:hover {
   background-color: #717171;
 }
 
 /* Fading animation */
 .fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 5s;
   animation-name: fade;
   animation-duration: 5s;
 }
 
 @-webkit-keyframes fade {
   from {opacity: 0} 
   to {opacity: 1}
 }
 
 @keyframes fade {
   from {opacity: 0} 
   to {opacity: 1}
 }
 
/* On smaller screens, decrease text size */
@media only screen and (max-width: 600px) {
  .prev-a, .next-a,.item-descr-div {font-size: 11px}
  .slide-img-div img {width: 200px;}
}

 /* On smaller screens, decrease text size */
 @media only screen and (max-width: 600px) {
   .item-descr-div {font-size: 14px; width:350px}
   .slide-img-div img {width: 200px;}
   .title-div {font-size: 18px;}
}