.portfolio-main{height:100%;display:flex;align-items:center;text-align:center;justify-items:center;gap:10px;flex-flow:column}.portfolio-root-button{width:50%;padding:10px 0;margin-top:20px;font-size:.9rem;font-weight:700;cursor:pointer;border:none;border-radius:4px;z-index:1;transition:all .2s;background-color:#0012b38e}.portfolio-root-button:hover{background-color:#3b4ef58e!important}.portfolio-container{width:80vw;position:relative}.portfolio-image{max-width:100%;max-height:100%;cursor:pointer;border-radius:10px}.fade-layer{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fff;opacity:0;transition:opacity .5s ease-in-out;z-index:2;border-radius:10px;display:flex;align-items:center;justify-content:center}.fade-active{opacity:1}.loading-content{text-align:center}.loading-content span{font-size:1.2rem;font-weight:700;margin-bottom:10px;display:block}.progress-bar{width:100%;height:5px;background:#ddd;border-radius:5px;overflow:hidden;position:relative}.progress-bar:after{content:"";position:absolute;left:0;top:0;width:30%;height:100%;background-color:#3b4ef5;animation:progress 2s infinite}img{width:100%;height:100%}@keyframes progress{0%{left:0}to{left:100%}}@media (max-width:768px){.portfolio-container{width:100vw}}