.portal{font-family:"arial", sans-serif;font-size:14px;font-weight:400;line-height:1.3em;word-wrap:break-word;text-align:center;position:fixed;z-index:9999999;top:0;left:0;bottom:0;right:0;width:100%;height:100%;}
.portal-section{height:100%;width:100%;max-width:880px;margin:0 auto;display:table;}
section{width:100%;position:relative;display:inline-block}
section.clt{height:20%;text-align:left;padding:20px 20px 0;}
section.clt a.imglogo{width:240px;display:inline-block;margin:20px 0 80px;}
section.clt a.imglogo img{background-color:rgba(255,255,255,0.8);padding: 8px 20px;border-radius: 100px;}
section.clt a.imglogo:hover img{background-color:rgba(255,255,255,0.6)}
section.cll{height:75%;z-index:5;}

section.cll span{text-align:left;margin:0 22px 10px;font-size:18px;color:#fff;line-height:20px;display:block}
section.cll span b{font-size:20px;}
section.cll span:nth-child(1){text-shadow: 0px 0.5px 1px rgba(0,0,0,0.5);}
section.cll span:nth-child(2){margin-bottom:40px;line-height:24px;}

section.cll a.link1{padding:6px 0;text-align:center;border:1px solid #ddd;font-weight:bold;display:inline-block;margin-right:5px;height:37px;width:37px;border-radius:100px;font-size:14px;background:#fff;box-shadow:0 1px 3px rgba(22,33,113,.1);}
section.cll a.link1:hover{background:#f5f5f5}
section.cll a.eml{position:relative;cursor:pointer;}
section.cll a.eml:hover:before{display:block;transition:all .3s;}
section.cll a.eml:before{transition:all .3s;padding:5px 7px;border-radius:100px;position:absolute;font-size:11px;line-height:1;background:#eee;content:"admin@bapenda.kaimanakab.go.id";right:-8px;top:45px;display:none;font-weight:normal;color:#555;}
.portal-coll{position:relative;z-index:2;overflow:hidden;display:inline-block;width:190px;height:270px;border-radius:10px;box-shadow:15px 1px 20px rgba(0,0,0,0.12);margin:10px;background-image: -webkit-gradient(linear, left top, right top, from(#f798fe), to(#612be1));background-image: -webkit-linear-gradient(left, #f798fe, #612be1);background-image: -moz-linear-gradient(left, #f798fe, #612be1);background-image: -ms-linear-gradient(left, #f798fe, #612be1);background-image: -o-linear-gradient(left, #f798fe, #612be1);background-image: linear-gradient(left, #f798fe, #612be1);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f798fe', endColorStr='#612be1', gradientType='1');}
.portal-coll b{color:#fff;position:absolute;top:43px;left:100px;font-size:16px;}
.portal-coll .button{box-shadow:3px 2px 10px rgba(0,0,0,0.2);transition:all .3s;color:#fff;padding:8px 0 6px;border-radius:100px;font-size:12px;width:120px;display:inline-block;}
.portal-coll .button i{margin-left:5px;transition:all .3s;}
.portal-coll p{margin:23px 10px 20px;color:#999;}
.portal-coll:hover{transition:all .3s;box-shadow:1px 2px 5px rgba(0,0,0,0.1);}
.portal-coll .button:hover{box-shadow:1px 2px 5px rgba(0,0,0,0.3);}
.portal-coll .button:hover i{margin-left:10px}
.coll02,.coll02 .button{background-image: -webkit-linear-gradient(left, #79dbfb, #0c8ad8);}
.coll03,.coll03 .button{background-image: -webkit-linear-gradient(left, #c5ea00, #4ba116);}
.coll04,.coll04 .button{background-image: -webkit-linear-gradient(left, #f1d907,#ed585a);}
.coll05,.coll05 .button{background-image: -webkit-linear-gradient(left, #f798fe, #612be1);}
.gridicn{background-color:rgba(152, 146, 146, 0.35);box-shadow:3px 2px 10px rgba(0,0,0,0.12);height:70px;width:70px;border-radius:100px;border:5px solid rgba(255, 255, 255, 0.6);position:absolute;top:20px;left:18px;background-size:59px;background-repeat:no-repeat;}
.gridicn01{background-image:url(images/press05.png);}
.gridicn02{background-image:url(images/press06.png);}
.gridicn03{background-image:url(images/press03.png);}
.gridicn04{background-image:url(images/press04.png);}
.gridimg{margin-top:72px;height:50px;width:100%;}
.gridimg img{width:100%;border-bottom:50px solid #fff;}
.gridcoll{background:#fff;position:absolute;height:158px;bottom:0;left:0;right:0;}
section.clz{height:5%;font-size:12px;color:#fff;}

.slideportal {
position: fixed;
width: 100vw;
height: 100vh;
overflow: hidden;
top:0;bottom:0;left:0;right:0;
}

.slideportal-image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
-webkit-animation-name: kenburns;
animation-name: kenburns;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
animation-duration: 20s;
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

.slideportal-image:nth-child(1) {
-webkit-animation-name: kenburns-1;
animation-name: kenburns-1;
z-index: 3;
background-image:url(https://bapenda.kaimanakab.go.id/wp-content/uploads/2019/08/Depan-Kantor.png);
}

.slideportal-image:nth-child(2) {
-webkit-animation-name: kenburns-2;
animation-name: kenburns-2;
z-index: 2;
background-image:url(https://bapenda.kaimanakab.go.id/wp-content/uploads/2017/11/23760260_10211337146004668_1950102961_o.jpg);
}

.slideportal-image:nth-child(3) {
-webkit-animation-name: kenburns-3;
animation-name: kenburns-3;
z-index: 1;
background-image:url(https://bapenda.kaimanakab.go.id/wp-content/uploads/2017/11/23760062_10211337145764662_1126329186_o.jpg);
}

.slideportal-image:nth-child(4) {
-webkit-animation-name: kenburns-4;
animation-name: kenburns-4;
z-index: 0;
background-image:url(https://bapenda.kaimanakab.go.id/wp-content/uploads/2017/11/23798572_10211337145644659_326705160_o.jpg);
}

@-webkit-keyframes kenburns-1 {
0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

1.5625% {
    opacity: 1;
}

23.4375% {
    opacity: 1;
}

26.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
}

100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
    transform: scale(1.21176);
}

100% {
    opacity: 1;
}
}

@keyframes kenburns-1 {
0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

1.5625% {
    opacity: 1;
}

23.4375% {
    opacity: 1;
}

26.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
}

100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
    transform: scale(1.21176);
}

100% {
    opacity: 1;
}
}

@-webkit-keyframes kenburns-2 {
23.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

26.5625% {
    opacity: 1;
}

48.4375% {
    opacity: 1;
}

51.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
}

100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
}

@keyframes kenburns-2 {
23.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

26.5625% {
    opacity: 1;
}

48.4375% {
    opacity: 1;
}

51.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
}

100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
}

@-webkit-keyframes kenburns-3 {
48.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

51.5625% {
    opacity: 1;
}

73.4375% {
    opacity: 1;
}

76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
}

100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
}

@keyframes kenburns-3 {
48.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

51.5625% {
    opacity: 1;
}

73.4375% {
    opacity: 1;
}

76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
}

100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
}

@-webkit-keyframes kenburns-4 {
73.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

76.5625% {
    opacity: 1;
}

98.4375% {
    opacity: 1;
}

100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
}
}

@keyframes kenburns-4 {
73.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

76.5625% {
    opacity: 1;
}

98.4375% {
    opacity: 1;
}

100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
}
}

@media only screen and (max-width: 768px) {
.portal{background-size:360%;}	
.portal-section{display:block;}	
.portal{position:relative;}	
.portal-section{height:100%;width:100%;max-width:768px;}
.portal-coll{width:45%;margin:1%;}
.gridimg{margin-top:55px;}
.gridcoll{height:140px;}
section.cll span{margin:0 32px 10px}
section.clt{height:160px;padding:20px 32px 0;}
section.clz{height:auto;padding:30px 0;}
section.cll{height:auto;}
}
@media only screen and (max-width: 480px) {
section.clt a.imglogo{margin:30px 0;}	
section.clt,section.cll,section.clz{height:auto;}
section.clt,section.cll span{text-align:center;font-size:15px;line-height:20px;margin:0 0 20px;}
section.cll a.link1{line-height:24px;margin:1px;}
.portal-coll{width:45%;height:245px;margin:1%;}
.gridicn{left:12px;height:60px;width:60px;background-size:49px;}
.portal-coll b{left:80px;}
.cll p{margin:5px 10px 15px;font-size:13px;line-height:15px;}
.gridcoll{height:128px;}
.gridimg{margin-top:65px;}
}