.welcome-logo {
    width: 300px;
}

#section-1 .portfolio-icon {
    width: 40%;
}

#section-2 {
    background-color: white;
}

.slider-img {
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.study-space {
    margin-bottom: 35%;
}
#creative-nav .nav-link {
    padding: 10px 30px;
    border: 1px solid #e8e5e5c9;
    border-radius: unset;
    background: transparent;
    margin: 0 10px;
    color: #e8e5e5c9;
}

#creative-nav .nav-link.active,
#creative-nav .nav-link:hover {
    padding: 10px 30px;
    border: 1px solid #c09869;
    border-radius: unset;
    background: #c09869;
    color: white;
}

/* Hide every HTML inside .hover-overlay that would render outside*/
.hover-overlay {
    overflow: hidden;
}
  /*Animate overlay and move it 'above'*/
.hover-overlay .overlay {
    transform: translate3d(-100%, 0, 0);
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
  
  
  /* Mouse enter event */
.hover-overlay.mouseenter.top .overlay {
    animation-name: slide--enter-top;
}
.hover-overlay.mouseenter.right .overlay {
    animation-name: slide--enter-right;
}
.hover-overlay.mouseenter.bottom .overlay {
    animation-name: slide--enter-bottom;
}
.hover-overlay.mouseenter.left .overlay {
    animation-name: slide--enter-left;
}
  
  /* Mouse leave event */
.hover-overlay.mouseleave.top .overlay {
    animation-name: slide--leave-top;
}
.hover-overlay.mouseleave.right .overlay {
    animation-name: slide--leave-right;
}
.hover-overlay.mouseleave.bottom .overlay {
    animation-name: slide--leave-bottom;
}
.hover-overlay.mouseleave.left .overlay {
    animation-name: slide--leave-left;
}
  
  /* Sliding animations ! */
@keyframes slide--enter-top {
    0% { transform: translate3d(0, -100%, 0); }
    100% { transform: none; }
}
@keyframes slide--enter-right {
    0% { transform: translate3d(100%, 0, 0); }
    100% { transform: none; }
}
@keyframes slide--enter-bottom {
    0% { transform: translate3d(0, 100%, 0); }
    100% { transform: none; }
}
@keyframes slide--enter-left {
    0% { transform: translate3d(-100%, 0, 0); }
    100% { transform: none; }
}
@keyframes slide--leave-top {
    0% { transform: none; }
    100% { transform: translate3d(0, -100%, 0); }
}
@keyframes slide--leave-right {
    0% { transform: none; }
    100% { transform: translate3d(100%, 0, 0); }
}
@keyframes slide--leave-bottom {
    0% { transform: none; }
    100% { transform: translate3d(0, 100%, 0); }
}
@keyframes slide--leave-left {
    0% { transform: none; }
    100% { transform: translate3d(-100%, 0, 0); }
}
  
  
  
  /**
   * BASIC CSS FOR DEMO PURPOSE
   */
.layout {
    width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
  
.hover-overlay {
    /* background-color: #4472C4; */
    position: relative;
    /* display: flex; */
    /* flex: 1 1 30%; */
    /* margin: 1%; */
    height: 290px;
    align-items: center;
    justify-items: center;
    cursor: pointer;
}
  
.overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0);
    opacity: 0.9;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.overlay-2 {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0);
    opacity: 0.5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* different dimensions view */
@media (max-width: 1580px) {
}
@media (max-width: 1380px) {
}
@media (max-width: 1200px) {
    #section-2 .bg-img-contain-top {
        background-size: cover!important;
    }
}
@media (max-width: 990px) {
    .study-space {
        margin-bottom: 25px;
    }
}
@media (max-width: 768px) {
}
@media (max-width: 767px) {
    .welcome-logo {
        width: 270px;
    }
}
@media (max-width: 520px) {

    .study-space {
        margin-bottom: 25px;
    }
}
@media (max-width: 380px) {
}