@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800&display=swap');

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0;
}
[class^="wk-desk-"] { float: left; }
.wk-desk-1 { width: 8.333%; }
.wk-desk-2 { width: 16.667%; }
.wk-desk-3 { width: 25%; }
.wk-desk-4 { width: 33.333%; }
.wk-desk-5 { width: 41.667%; }
.wk-desk-6 { width: 50%; }
.wk-desk-7 { width: 58.333%; }
.wk-desk-8 { width: 66.667%; }
.wk-desk-9 { width: 75%; }
.wk-desk-10 { width: 83.333%; }
.wk-desk-11 { width: 91.667%; }
.wk-desk-12 { width: 100%; }

@media (max-width:1024px){[class^="wk-ipadp-"]{float:left}
.wk-ipadp-1{width:8.333%}.wk-ipadp-2{width:16.667%}.wk-ipadp-3{width:25%}.wk-ipadp-4{width:33.333%}
.wk-ipadp-5{width:41.667%}.wk-ipadp-6{width:50%}.wk-ipadp-7{width:58.333%}.wk-ipadp-8{width:66.667%}
.wk-ipadp-9{width:75%}.wk-ipadp-10{width:83.333%}.wk-ipadp-11{width:91.667%}.wk-ipadp-12{width:100%}}

@media (max-width:768px){[class^="wk-tab-"]{float:left}
.wk-tab-1{width:8.333%}.wk-tab-2{width:16.667%}.wk-tab-3{width:25%}.wk-tab-4{width:33.333%}
.wk-tab-5{width:41.667%}.wk-tab-6{width:50%}.wk-tab-7{width:58.333%}.wk-tab-8{width:66.667%}
.wk-tab-9{width:75%}.wk-tab-10{width:83.333%}.wk-tab-11{width:91.667%}.wk-tab-12{width:100%}}

@media (max-width:500px){[class^="wk-mobile-"]{float:left}
.wk-mobile-1{width:8.333%}.wk-mobile-2{width:16.667%}.wk-mobile-3{width:25%}.wk-mobile-4{width:33.333%}
.wk-mobile-5{width:41.667%}.wk-mobile-6{width:50%}.wk-mobile-7{width:58.333%}.wk-mobile-8{width:66.667%}
.wk-mobile-9{width:75%}.wk-mobile-10{width:83.333%}.wk-mobile-11{width:91.667%}.wk-mobile-12{width:100%}}

.desktop_2 *{font-family:'Nunito',sans-serif;margin:0}
.desktop_2 button,.desktop_2 img{cursor:pointer}
.desktop_2 img:hover{transform:scale(1.02);transition:all .3s ease-in-out}
.desktop_2 .hdImg{display:none}
.desktop_2 .btn-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none}
.desktop_2 .project:hover .btn-box{display:block}
.desktop_2 .Container{width:898px;margin:100px auto 50px}
.desktop_2 .portfolio{background:#fff;display:flex;flex-direction:column;flex-wrap:wrap}
.desktop_2 .project{position:relative}
.desktop_2 .overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(71,69,69,0.7);display:none;z-index:100;padding:20px}
.desktop_2 .overlay-inner{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:10px;padding:35px 20px 20px;max-width:50%;max-height:85%}
.desktop_2 .close{position:absolute;top:9px;right:15px;background:none;border:0;color:#474545;text-transform:uppercase;letter-spacing:2px}
.desktop_2 .overlay-inner .hdImgs{height:calc(80% - 55px);display:flex}
.desktop_2 .overlay-inner img{max-height:100%;max-width:100%}
.desktop_2 .bigImg{width:665px;height:440px;margin:0 10px 10px 0;border-radius:6px}
.desktop_2 .project-image{width:215px;height:215px;margin:0 10px 10px 0;border-radius:6px}
.desktop_2 .above,.desktop_2 .bottom{display:flex}
.desktop_2 .bottom{justify-content:space-around}

@media(max-width:1024px){
.desktop_2 .project-image{width:165px;height:165px}
.desktop_2 .Container{width:898px;margin:80px auto 50px}
.desktop_2 .bigImg{width:515px;height:340px}
}
@media(max-width:768px){
.desktop_2 .project{width:220px;display:inline-block}
.desktop_2 .project-first{width:450px}
.desktop_2 .above{flex-direction:column}
.desktop_2 .portfolio{justify-content:flex-start}
.desktop_2 .Container{width:450px}
.desktop_2 .bigImg{width:450px}
.desktop_2 .project-image{width:220px;height:200px;margin-bottom:10px}
.desktop_2 .side{display:flex;width:450px;justify-content:space-between}
.desktop_2 .bottom{flex-wrap:wrap;justify-content:space-between}
}
@media(max-width:500px){
.desktop_2 .bigImg{width:250px;height:200px}
.desktop_2 .project{width:110px;margin-bottom:20px}
.desktop_2 .Container{width:250px;margin:80px auto 50px}
.desktop_2 .project-image{width:110px;height:110px}
.desktop_2 .side{flex-direction:row;width:250px}
.desktop_2 .project-first{width:250px}
.desktop_2 .overlay-inner{max-width:90%}
}



