*{box-sizing: border-box;padding: 0;margin:0;}
@font-face{font-family:'googlesans';src:url('../font/googlesans/googlesans-regular.woff2') format('woff2'),url('../font/googlesans/googlesans-regular.eot?#iefix') format('embedded-opentype'),url('../font/googlesans/googlesans-regular.ttf')format('truetype'),url('../font/googlesans/googlesans-regular.woff') format('woff');font-weight: 100;font-style: normal;}
@font-face{font-family:'googlesans';src:url('../font/googlesans/googlesans-medium.woff2') format('woff2'),url('../font/googlesans/googlesans-medium.eot?#iefix') format('embedded-opentype'),url('../font/googlesans/googlesans-medium.ttf')format('truetype'),url('../font/googlesans/googlesans-medium.woff') format('woff');font-weight: 400;font-style: normal;}
body{margin: 0;font-family: googlesans;}
.header {text-align: center;padding: 32px 0;width: 100%;position: absolute;top: 0;}
h1,a{text-transform : uppercase;}
a{text-decoration-line : none;} 
.container {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;padding: 0 15px;}
.logo .container,.mobile .container {gap:15px;padding-bottom: 15px;}
.web .column {-ms-flex: 33.33%;flex: 33.33%;max-width: 33.33%;padding: 0 5px;} 
.project .inner_div {position: relative;}
.project .container{display:grid;grid-template-columns: repeat(auto-fill,minmax(315px,1fr));grid-gap:15px}
.logo .container{display:grid;grid-template-columns: repeat(auto-fill,minmax(430px,1fr));grid-gap:15px}
.mobile .container,.logo .container.alter{display:grid;grid-template-columns: repeat(auto-fill,minmax(235px,1fr));grid-gap:15px}
.content img {vertical-align: middle;width: 100%;transition: transform .5s;cursor: pointer;} 
.content img:hover{transform: scale(1.045);}
.lists li a{ color: #999;padding:0 10px;font:400 16px/50px googlesans;}
.lists li a.active,.lists li a:hover{ color: #4285f4;}
.header li{list-style-type: none;margin: 0 10px;display: inline-block;} 
.header h1{font: 100 32px/50px googlesans;margin-bottom: 10px;}
.inner_div{overflow: hidden;margin-bottom: 10px;}
.logo .inner_div,.mobile .inner_div,.project .inner_div{margin-bottom: 0px;}
.popup{display: flex;justify-content: center; align-content: center;width: 100%;}
.fade{top: 0;left: 0;bottom: 0;right: 0;background: rgba(0, 0, 0, 0.85);position: fixed;display: flex;justify-content: center;align-items: center;}
.popups .fade{background: rgba(0, 0, 0, 0.75);}
.slider{height: 90%;top: 5%;position: fixed;display: flex;justify-content: center;align-items: center;max-width: 80%;} 
.prev,.next{position: fixed;top: 80px;bottom: 80px;margin: auto 0;width: 50px;height: 60px;display: flex;align-items: center;cursor: pointer;justify-content: center;z-index: 1;}
.next{right:12px} 
.prev{left:12px} 
#prev,#next{width: 40px;height: 40px;  border-radius: 100%;transition: all .3s;background: rgba(0, 0, 0, 0.75);}
.prev:hover #prev,.next:hover #next{background: #4285f4;}
#prev::before,#next::before{content:"";position: absolute;background: url(../image/arrow.svg) no-repeat center center;width: 40px;height: 40px; } 
#prev::before{transform: rotate(180deg);}  
.content{display: none;padding-top: 174px;min-height: 920px;}
.content.active{display: block;} 
.heading{position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,0.00345888) 63.94%, rgba(0,0,0,0.014204) 65.89%, rgba(0,0,0,0.0326639) 67.83%, rgba(0,0,0,0.0589645) 69.78%, rgba(0,0,0,0.0927099) 71.72%, rgba(0,0,0,0.132754) 73.67%, rgba(0,0,0,0.177076) 75.61%, rgba(0,0,0,0.222924) 77.56%, rgba(0,0,0,0.267246) 79.5%, rgba(0,0,0,0.30729) 81.44%, rgba(0,0,0,0.341035) 83.39%, rgba(0,0,0,0.367336) 85.33%, rgba(0,0,0,0.385796) 87.28%, rgba(0,0,0,0.396541) 89.22%, rgba(0,0,0,0.4) 91.17%);display: flex;align-items: flex-end;padding: 25px;opacity: 0;}
.heading p{color:#fff;font:100 16px googlesans;}
.heading:before{position: absolute;content: "View";right: 20px;background: #000;color: #fff;padding: 0px 25px;line-height: 35px;border-radius: 5px;cursor: pointer;}
.project .inner_div:hover .heading{opacity: 1;}
.cross_inner{width: 45px;height: 45px;display: flex;justify-content: center;align-items: center;}
.cross{display: flex;justify-content: flex-end;}
.cross_icon{width: 24px;height: 24px;}
.frame_outter{position: fixed;left: 0;right: 0;top: 0;bottom: 0;cursor: pointer;}
#popups_5{width: 100%;height: calc(100vh - 45px);border:none;}
.popup .cross{position: absolute;top: 0;right: 10px;cursor: pointer;}

@media(max-width: 480px) {
     .header{padding:22px 0;}
     .header h1{margin: 0;}
     .content{padding-top: 144px;}
    .logo .container {grid-template-columns: repeat(auto-fill,minmax(380px,1fr));}
  }


  @media(max-width: 400px) {
    .header h1 {font: 100 28px/50px googlesans;}
    .lists li a{font-size: 14px;padding: 0 6px;}
    .header li{margin: 0;}
    .logo .container {grid-template-columns: repeat(auto-fill,minmax(290px,1fr));}
    .project .container {grid-template-columns: repeat(auto-fill,minmax(285px,1fr));}
  }