.container-scportfolio{width:100% !important;display:flex !important;flex-direction:column !important;margin:0 !important}.container-scportfolio:after{visibility:hidden;display:block;content:"";clear:both;height:0}.container-scportfolio ul{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:40px;margin-left:-40px !important}.container-scportfolio ul li{display:inline-block;padding:.75rem 1.25rem;border-radius:0;color:#fff;text-transform:uppercase;font-size:18px;letter-spacing:.15rem;transition:all .3s;position:relative;overflow:hidden;z-index:1;cursor:pointer;border:solid 4px #fff;margin:3px;font-weight:600;background-color:#282828}.container-scportfolio ul li:before{content:"";position:absolute;bottom:0;left:0;width:0;height:100%;border-radius:0;z-index:-1}.container-scportfolio ul li:hover{cursor:pointer;transition:background-color 2s ease-out;background-color:#1d6dae}.container-scportfolio ul li:before{width:100%}.container-scportfolio ul li.active{background-color:#0c3a60}.scportfolio{display:grid;grid-gap:20px;grid-template-columns:repeat(3,minmax(300px,1fr));grid-auto-rows:300px}@media screen and (max-width:992px){.scportfolio{grid-template-columns:repeat(2,minmax(300px,1fr));grid-auto-rows:300px}}@media screen and (max-width:600px){.scportfolio{grid-template-columns:repeat(1,minmax(200px,1fr));grid-auto-rows:400px}}.scportfolio .itemBox{position:relative;display:flex;justify-content:center;align-items:center;font-size:2em;background-color:#282828;transition:all .5s ease}.scportfolio .itemBox.hide{display:none}.scportfolio .itemBox img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:opacity 1s ease-in-out}.scportfolio .itemBox:hover img{opacity:.1;transition:opacity .55s ease-in-out}.icons{display:none;position:absolute}.scportfolio .itemBox:hover .icons{display:block;text-align:center;color:#fff;z-index:2}.scportfolio .itemBox:hover .icons i{font-size:36px;color:#fff;transition:transform .5s ease;margin:10px}.scportfolio .itemBox:hover .icons i:hover{font-size:36px;color:#fff;transform:scale(1.5)}.title{position:absolute;display:block;text-align:center;font-size:20px;color:#282828;text-transform:uppercase;z-index:2;padding:10px 20px;font-weight:700;background:#fff;box-shadow:rgba(0,0,0,.25) 0px 54px 55px,rgba(0,0,0,.12) 0px -12px 30px,rgba(0,0,0,.12) 0px 4px 6px,rgba(0,0,0,.17) 0px 12px 13px,rgba(0,0,0,.09) 0px -3px 5px}.scportfolio .itemBox:hover .title{top:0;left:0;background:0 0;padding:20px;color:#fff;background-color:transparent;border:none;box-shadow:none}.year{display:none}.scportfolio .itemBox:hover .year{position:absolute;top:30px;left:0;background:0 0;padding:20px;color:#fff;background-color:transparent;display:block;z-index:2;font-size:16px;font-style:italic;font-weight:700}.description{display:none}.scportfolio .itemBox:hover .description{position:absolute;bottom:0;left:0;background:0 0;padding:20px;font-size:14px;color:#fff;z-index:2;display:block}*:focus{outline:0 !important}.fade-in{animation:fadeIn 1s cubic-bezier(.39,.575,.565,1) forwards}.fade-out{animation:fadeOut 1s cubic-bezier(.39,.575,.565,1) forwards}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}.vbox-share{width:100%!important;font-size:24px;padding:.35em!important;background-color:var(--vbox-share-background);border-radius:0 !important;width:100%}.vbox-description{font-size:18px;color:#fff;padding:.35em}.vbox-title{font-size:24px !important;font-weight:700}