<data:blog.pageTitle/> <data:blog.pageName/> - <data:blog.title/> All Posts - <data:blog.title/> Page Not Found - <data:blog.title/> <data:blog.pageName/> Variable definitions end ========================*/ /*!************************************************ * Blogger Template Style * Name: vio **************************************************/ /** * Eric Meyer's Reset CSS v2.0 http://meyerweb.com/eric/tools/css/reset/ * http://cssreset.com */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;/*font-size:100%;*/font:inherit;vertical-align:baseline;} /* HTML5 display-role reset for older browsers */ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html{display:block;}blockquote,q{quotes:none;}blockquote::before,blockquote::after,q::before,q::after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;} /* Blogger CSS Reset */ .section,.widget{margin:0 0 0 0;padding:0 0 0 0;padding-left: 0;} .navbar,.blog-feeds,.feed-links,#backlinks-container,a.home-link,.blog-mobile-link{display:none;} .quickedit,.edit-post,.item-control{display:none;} .post-body .separator > a, .post-body .separator > span {margin-left: 0 !important;} /* FRAMEWORK */ strong,b{font-weight:bold;} cite,em,i{font-style:italic;} a:link{color:$(body.link.color);text-decoration:none;outline:none;} a:visited{color:#1a73e8;text-decoration:none;} a:hover{color:#1a73e8;text-decoration:none;} a img{ border:none; border-width:0; outline:none; } abbr,acronym{border-bottom:1px dotted;cursor:help;} sup,sub{vertical-align:baseline;position:relative;top:-.4em;font-size:86%;} sub{top:.4em;}small{font-size:86%;} kbd{font-size:80%;border:1px solid #777;padding:2px 5px;border-bottom-width:2px;border-radius:3px;} mark{background-color:#ffce00;color:black;} p,blockquote,pre,table,figure,hr,form,ol,ul,dl{margin:0 0 1.5em;} hr{height:1px;border:none;background-color:#666;} h1{font-size:1.8rem} h2{font-size:1.6rem} h3{font-size:1.4rem} h4{font-size:1.2rem} h5{font-size:1rem} h6{font-size:0.9rem} /* heading */ h1,h2,h3,h4,h5,h6 { margin: 0 0 0.6em; font-weight: bold; } /* list */ ol,ul,dl{margin: .5em 0em .5em 3em} li{margin: .5em 0} dt{font-weight: bold} dd{margin: 0 0 .5em 2em} /* form */ input,button,select,textarea{font:inherit;font-size:100%;line-height:normal;vertical-align:baseline;} textarea{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} /* code & blockquote */ pre,code{font-family:"Courier New",Courier,Monospace;color:inherit;} pre{white-space:pre;word-wrap:normal;overflow:auto;} blockquote{background:#f9edbe;border:1px solid #f0c36d;margin-left:1em;margin-right:1em;padding:1em 1em;color:#777777;font-style:italic;font-size:100%;} blockquote::before { content: "\f10d"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; padding-right: 4px; color: #0066cc; } /* table */ table[border="1"] td, table[border="1"] th { vertical-align: top; text-align: left; font-size: 13px; padding: 3px 5px; border: 1px solid #f6f6f6; } table[border="1"] th { background: #eee; } table, img { max-width: 100%; height: auto; } iframe { max-width: 100%; } td.tr-caption { color: #777; } .clear { clear: both; } .clear::after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } /* TRANSISI */ .label-count, #cssmenu ul ul li, #cssmenu > ul > li.has-sub > a::before, #cssmenu ul ul li.has-sub > a::before, .berlangganan-box input.submit-email[type="submit"], .berlangganan-box input.email-address[type="text"] { transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; color: #fff; } a:link { color: #000; } .related-post-style-3 .related-post-item { transition: opacity 0.2s linear; } .label-info-th a, .info-1, .info-2, h2.post-title, .post-snippet, .sidebar-sticky { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } .img-thumbnail, .img-thumbnail img { transition: width .2s linear; -o-transition: width .2s linear; -moz-transition: width .2s linear; -webkit-transition: width .2s linear; } #searchfs input[type="search"], h1,h2,h3,h4,h5,h6 { transition: font-size .2s linear; -o-transition: font-size .2s linear; -moz-transition: font-size .2s linear; -webkit-transition: font-size .2s linear; } h3 { padding: 11px; color: #000; font-size: 15px; padding-top: 20px; padding-bottom: 20px; border-radius: 10px; text-align: center; } .img-thumbnail, .img-thumbnail img, .FeaturedPost .post-summary, .FeaturedPost .image, .PopularPosts .item-thumbnail, .PopularPosts .widget-content ul li img, .Profile .widget-content, .PopularPosts .widget-content ul, .list-label-widget-content ul, .label-info-th a, .displaypageNum a, .showpage a, .pagecurrent, .Profile .profile-link, .label-size, .berlangganan-box, #baca-juga, #baca-juga h2, .related-post-item-thumbnail, #baca-juga ul, .PopularPosts ul li .item-thumbnail-only::before, .PopularPosts ul li .item-content::before, .PopularPosts ul li > a::before { } #share a:first-child { border-radius: 3px 0 0 3px; } #share a:last-child { border-radius: 0 3px 3px 0; } body { background: #ededed; margin: 0 0 0 0; padding: 0 0 0 0; color: #000; font:400 14px 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue', Arial, sans-serif; text-align: left; } /* WRAPPER */ #wrapper { background: #ededed; max-width: 1000px; margin: 0 auto; padding: 70px 30px 30px; overflow: hidden; } /* HEADER */ #header-container { background: #1a73e8; position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 999; height: 48px; background-image: linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1)); } #header-wrapper { max-width: 1000px; margin: 0 auto; position: relative; } .header { max-width: 400px; float: left; margin-right: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .header h1.title, .header p.title { color: $(header.title.color); margin: 0; text-transform: uppercase; line-height: 50px; font: 400 20px 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue', Arial, sans-serif; margin-top: 10px; font-size: 20px; } .header .description { color: $(header.title.color); margin: -10px 0 4px 0; padding: 0; font-size: 0.7em; display: none; } .header a, .header a:hover{ color: $(header.title.color); } .header img { display: block; width: auto; margin: 10px 0; max-height: 28px; } /* POST WRAPPER */ .post-container { padding-right: 25px; } #post-wrapper { background:transparent; float:left; width:70%; max-width:700px; margin:0 0 10px; } .breadcrumbs { box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 15px 20px; background: #1a73e8; color: #fff; text-transform: capitalize; } .breadcrumbs svg { width: 16px; height: 16px; vertical-align: -3px; } .breadcrumbs a { color: #fff; } .breadcrumbs a:hover { color: #f2994a; } .post { margin-bottom: 20px; padding: 10px; background: #fff; border-radius: 0 0 7px 7px; } .post-body { font-family: 'Nunito', sans-serif; line-height: 1.65em; text-align: left; color:#000; word-wrap: break-word; } h2.post-title, h1.post-title { font: $(post.title.font); } h1.post-title { font-size: 24px; margin-bottom: 15px; } h2.post-title { margin-bottom: 10px; } h2.post-title a, h1.post-title a, h2.post-title, h1.post-title { line-height: 2em; } h2.post-title a:hover, h1.post-title a:hover { color: #1a73e8; } h2.post-title a { color: #000; font-weight: 500; font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue', Arial, sans-serif; } .img-thumbnail { position: relative; float: left; width: 255px; height: 170px; margin-top: 3px; overflow: hidden; } .img-thumbnail img { width: 100%; display: block; } .label-info-th { display: block; z-index: 2; position: relative; margin-bottom: 10px; height: 32px; overflow: hidden; } .label-line, .label-line-c { position:relative; } .label-line-c { text-align: center; margin-bottom: 6px; } .label-line::before, .label-line-c::before { z-index: 1; content: ""; width: 100%; height: 0px; position: absolute; top: 50%; left: 0; margin-top: -2px; border-bottom: 1px dotted rgba(0, 0, 0, 0.49); } .label-info-th a { color: $(label.color); background: #df0f81; display: inline-block; padding: 6px 12px; margin: 1px 0; font-size: 11px; font-weight: 500; text-transform: uppercase; border: 0px solid $(label.border.color); } .label-info-th a:hover { color: $(body.link.color); } .post-info { color: $(post.footer.color); line-height: 1.6em; } .post-snippet b, .post-snippet strong, .post-snippet i, .post-snippet em { font-weight: normal; font-style: normal; } .info-1 { margin-top: 10px; } .info-2 { margin-top: 10px; } .info-3 { margin-bottom: 1.6em; } .post-info a { display: inline-block; color: inherit; } .post-info a:hover { color: $(body.link.color); } .author-info::after, .time-info::after, .label-info::after { content: "-"; padding: 0 2px; } .edit-post a { color: $(body.link.color); } .edit-post a:hover { color: $(body.link.hover.color); } .edit-post::before { content: "-"; padding: 0 2px; } /* AUTHOR POST PROFILE */ .author-profile { overflow: hidden; margin: 30px 0; line-height: 1.5; } .author-profile img { border: none; float: left; margin-right: 15px; border-radius: 46px; } .author-profile > span { font-size: 14px; opacity: 0.8; } .author-profile a.g-profile { font-weight: bold; color: $(body.link.hover.color); font-size: 18px; margin-bottom: 5px; display: inline-block; } .author-profile a.g-profile:hover { color: $(body.link.color); } .author-profile a.g-profile::after { content: "\f058"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; padding-right: 4px; color: $(body.link.color); } /* SIDEBAR WIDGET */ #sidebar-wrapper { background:transparent; float:right; width:30%; max-width:300px; margin:0 auto; } .latest-post-title h2{ font: normal 15px Roboto, Arial, sans-serif; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04); border: none; width: 92%; color: #fff; padding-left: 10px; padding: 15px 20px; background: #1D976C; border-radius: 10px; margin-bottom: 15px; font-weight: bold; text-align: center; display: none; } .above-post-widget h2 { display: flex; margin-bottom: 10px; font: 500 14px 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 1.15rem; align-items: center; border-radius: 7px 7px 0px 0px; color: #333; } .above-post-widget svg { width: 17px; height: 17px; margin-right: 5px; fill: rgb(0, 89, 230,.95); } .sidebar h2 { font: 400 14px 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue', Arial, sans-serif; color: #333; display: inline-block; } .section:last-child .widget:last-child, .sidebar .widget, .sidebar-sticky .widget, .above-post-widget .widget, .bellow-header-widget .widget{ margin:0 0 10px; clear:both; border-radius: 10px; } .sidebar ul, .sidebar ol, .sidebar-sticky ul, .sidebar-sticky ol { list-style-type:none; margin: 0; padding: 0; } .sidebar li, .sidebar-sticky li { margin:5px 0; padding: 0; } .sidebar-sticky { z-index: 9; } .sidebar .widget-content::after, .sidebar-sticky .widget-content::after, .sidebar .widget-content::before, .sidebar-sticky .widget-content::before { content: ""; display: table; table-layout: fixed; clear: both; } .bellow-header-widget { text-align: center; } .bellow-header-widget h2 { display: none; } .bellow-header-widget .widget { overflow: hidden; } .bellow-header-widget img, .bellow-header-widget iframe{ max-width: 100%; border: none; overflow: hidden; } /* CUSTOM WIDGET */ .widget-item-control { float: right; height: 20px; margin-top: -20px; position: relative; z-index: 10 } .widget-item-control a { opacity: .5 } .widget-item-control a:hover { opacity: 1 } .widget .widget-item-control a img { border: none; padding: none; background: none; -moz-box-shadow: none; -webkit-box-shadow: none; -ie-box-shadow: none; box-shadow: none } .widget ul { line-height:1.4em; } /* GSC */ .gsc-search-box-tools .gsc-search-box .gsc-input { margin: 3px 0 !important; } .gsib_a { padding: 0px 6px 0 !important; } .cse .gsc-search-button-v2, .gsc-search-button-v2 { padding: 9px 27px !important; } /* Label */ .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 { font-size:100%; opacity:10 } .cloud-label-widget-content { text-align:left } .label-size { transition: all 0.25s; -moz-transition: all 0.25s; -webkit-transition: all 0.25s; line-height:1.2; display: block; float: left; margin: 0 3px 3px 0; color: $(body.link.color); font-size: 13px; text-transform: uppercase; border: 1px solid $(body.link.color); } .label-size a,.label-size span{ display: inline-block; color: $(body.link.color); padding: 6px 8px; } .label-size:hover { border: 1px solid $(body.link.color); background: $(body.link.color); } .label-size:hover a, .label-size:hover .label-count { color: $(posts.background.color); } .label-count { margin-left: -12px; margin-right: 0px; } .list-label-widget-content ul { display: flex; flex-wrap: wrap; } .list-label-widget-content ul li { list-style-type: none; margin: 0px 5px 5px 0px; border:none; display: flex; width: auto; flex-wrap: nowrap; align-items: center; flex-grow: 1; background-color: #1a73e8; border-radius: 3px; } .bellow-header-widget .cloud-label-widget-content { } .bellow-header-widget .cloud-label-widget-content .label-size { font-weight: bold; } .bellow-header-widget .cloud-label-widget-content .label-size a, .bellow-header-widget .cloud-label-widget-content .label-size span { padding:15px 20px; } /* Feed */ .Feed ul li { display: block; margin: 0 0 10px; } .Feed ul li:last-child { margin-bottom: 10px; } .Feed .item-date, .Feed .item-author { color: #999; } .Feed .item-title { font-weight: bold; } /* Popular Posts */ .PopularPosts .widget-content ul, .PopularPosts .widget-content ul li { margin: 0 0; padding: 0 0; list-style:none; border:none; outline:none; } .PopularPosts .widget-content ul li a { color: #000; } } .PopularPosts .widget-content ul li img { display: block; width: 70px; height: 70px; float: left; border-radius: 3px 25px; } .PopularPosts .widget-content ul li { margin: 0; counter-increment: num; position: relative; border-bottom: 1px solid rgba(0,0,0,0.08); border-top: 1px solid rgba(255,255,255,0.12); } .PopularPosts ul li:last-child { margin-bottom: 0px; } .PopularPosts ul li .item-thumbnail-only::before, .PopularPosts ul li .item-content::before, .PopularPosts ul li > a::before { color: $(body.link.color) !important; } .PopularPosts ul li .item-thumbnail-only::after, .PopularPosts ul li .item-content::after, .PopularPosts ul li > a::after { background: $(label.border.color); } .PopularPosts .item-title { line-height: 1.6; margin-right: 8px; min-height: 40px; font-weight: 500; } .PopularPosts .item-thumbnail { float: left; margin-right: 8px; } .PopularPosts .item-snippet { line-height: 1.6em; font-size: 14px; margin-top: 8px; opacity: 0.925; } .PopularPosts ul li > a { padding: 8px 20px; min-height: 45px; color: #fff; font-family: sans-serif; font-size: 15px; } .PopularPosts ul li > a:hover { background: rgba(0,0,0,0.15); } /* Featured Post */ .FeaturedPost .post-summary { background: #1a73e8; position: relative; padding: 0; min-height: 190px; max-height: 450px; overflow: hidden; border-radius: 8px; max-width:100%; width:97%; transition: all .5s ease; border: 1px solid #1a73e8; } @media only screen and (max-width: 480px){ .FeaturedPost .post-summary { background: #fff; position: relative; padding: 0; min-height: 190px; max-height: 450px; overflow: hidden; border-radius: 8px; max-width:100%; width:100%; transition: all .5s ease; } } .FeaturedPost .post-summary h3 { font: 20px Poppins, Arial, sans-serif; position: absolute; z-index: 1; font-size: 1.25rem; margin: 0; text-align: left; overflow: hidden; padding: 15px; width: 60%; right: -16px; line-height: initial; } .FeaturedPost .post-summary h3::after { content:""; position:absolute; top:-0.25em; right:100%; bottom:-0.25em; width:0.25em; } .FeaturedPost .post-summary h3 a { color: #fff; } .FeaturedPost .post-summary h3 a:hover { } .FeaturedPost .post-summary p { position: absolute; color: #fff; padding: 3px 8px; bottom: 50px; top:50px; margin-left:265px; overflow: hidden; text-overflow: ellipsis; white-space:; width: 60%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .FeaturedPost .image { display: block; border-radius: 7px 0px 0px 7px; width: 37%; height: 190px; clear: both; max-width: 100%; } .sidebar .FeaturedPost .post-summary h3 { font-size: 16px; } /* Profile */ .Profile .widget-content { text-align: center; padding: 30px; margin: 0 auto; max-width: 300px; border: 2px solid $(label.border.color); } .Profile .profile-img { border-radius: 50%; float: none; } .Profile .profile-name-link { color: $(body.text.color); font-size: .9em; opacity: 1; overflow: hidden; } .Profile .profile-name-link:hover { color: $(body.link.color); } .Profile .profile-link { border-style: solid; border-width: 1px; cursor: pointer; font-size: 14px; padding: 6px 22px; display: inline-block; line-height: normal; } .profile-textblock { margin: .8em 0; font-size: 14px; line-height: 1.5em; } .profile-img { float: left; display:inline; opacity:10; margin:0 6px 3px 0; } .profile-data { margin: 0; } .profile-datablock { margin: .5em 0; } .profile-name-link { background: no-repeat left top; box-sizing: border-box; display: inline-block; max-width: 100%; min-height: 20px; padding-left: 20px; } /* Archive */ #ArchiveList .toggle { cursor: pointer; font-family: Arial, sans-serif; } #ArchiveList .toggle-open { _font-size: 1.7em; line-height: .6em; } #ArchiveList { text-align: left; } #ArchiveList a.post-count-link, #ArchiveList a.post-count-link:link, #ArchiveList a.post-count-link:visited { text-decoration: none; } #ArchiveList a.toggle, #ArchiveList a.toggle:link, #ArchiveList a.toggle:visited, #ArchiveList a.toggle:hover { color: #a0a0a0; text-decoration: none; } .BlogArchive #ArchiveList ul li { background: none; list-style: none; list-style-image: none; list-style-position: outside; border-width: 0; padding-left: 15px; text-indent: -15px; margin: .25em 0; background-image: none; } .BlogArchive #ArchiveList ul ul li { padding-left: 1.2em; } .BlogArchive #ArchiveList ul { margin: 0; padding: 0; list-style: none; list-style-image: none; border-width: 0; } .BlogArchive #ArchiveList ul.posts li { padding-left: 1.3em; } #ArchiveList .collapsed ul { display: none; } /* Artikel Terbaru */ .artikel-terbaru ul li { border-bottom: 1px dashed #fff; padding-bottom: 8px; margin-bottom: 8px; font-weight: bold; } .LinkList ul li, .PageList ul li { border-bottom: 2px dotted $(label.border.color); padding: 6px 0px; } .artikel-terbaru ul li::before, .LinkList ul li::before, .PageList ul li::before { content: "\f14b"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; margin-right: 6px; color: $(body.link.color); } .artikel-terbaru ul li::before { content: "\f14b"; } .LinkList ul li::before { content: "\f14c"; } .PageList ul li::before { content: "\f249"; } /* SUBSCRIBER BOX */ .berlangganan-box { background: $(header.background.kiri); background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan)); color: $(header.title.color); padding: 15px; margin: 20px 0; text-align: center; } .berlangganan-box p { margin:15px 0; } .berlangganan-box input.email-address[type="text"] { width: 60%; padding: 10px; text-align: center; border-radius: 2px; border: none; outline: none; } .berlangganan-box input.submit-email[type="submit"] { background: #fff; padding: 10px 15px; border-radius: 2px; color: $(body.text.color); border: none; outline: none; } .berlangganan-box input.submit-email[type="submit"]:hover { background: $(body.text.color); color: #fff; cursor: pointer; } .berlangganan-box input.email-address[type="text"]:focus { background: #fffcd2; } /* Back to top */ .smoothscroll-top { position:fixed; opacity:0; visibility:hidden; overflow:hidden; text-align:center; z-index:99; background:#1a73e8 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z' fill='%23fff'/%3E%3C/svg%3E") center / 25px no-repeat; color:#fff; width:40px; height:40px; line-height:45px; right:20px; bottom:-25px; border-radius:100px; border: 2px solid #1a73e8; padding-top: 1px; padding-bottom: 1px; padding-left: 1px; padding-right: 1px; } .smoothscroll-top:hover { border-color:#ef5350; background:#ef5350 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z' fill='%23fff'/%3E%3C/svg%3E") center / 25px no-repeat; color:#fff; transition:all 0.2s ease-in-out; transition-delay:0s; } .smoothscroll-top:after { content:''; position:relative; margin:auto; width:40px; height:40px; border:2px solid #fff; display:block; border-radius:100px; left:-2px; top:-2px; right:0px; bottom:0px; } .smoothscroll-top.show { visibility:visible; cursor:pointer; opacity:1; bottom:30px; } .smoothscroll-top i.fa { line-height:inherit; } /* Share button */ .share-this-pleaseeeee{display:inline-block;margin:0;color:#000;text-transform:uppercase;font-size:16px;background:#ffffff;z-index:1;position:relative;padding:0 10px;font-weight:700;transition:all .5s ease} #share-container{margin:20px auto 10px;overflow:hidden} #share{width:100%;text-align:center} #share a{width:25%;height:40px;display:block;font-size:24px;color:#fff;transition:opacity .15s linear;float:left} #share i{position:relative;top:50%;transform:translateY(-50%)} .facebook{border-color:#3a579a;border-top-style:solid;border-top-width:3px} .facebook:hover{background:#3a579a} #share svg{width:24px;height:24px;vertical-align:-12px} #share a:hover svg path{fill:#fff} .twitter{border-color:#55acee;border-top-width:3px;border-top-style:solid} .twitter:hover{background:#55acee} .linkedin{background:#0077b5} .pinterest{border-color:#cb2027;border-top-width:3px;border-top-style:solid} .pinterest:hover{background:#cb2027} .whatsapp{border-color:#25d366;border-top-width:3px;border-top-style:solid} .whatsapp:hover{background:#25d366} /* Status Msg */ .status-msg-wrap { font-size: 110%; width: 100%; margin: 0 auto 15px; position: relative; background: #fff; border-radius: 5px; } .status-msg-border { border: none; filter: alpha(opacity=40); -moz-opacity: .4; opacity: .4; width: 100%; position: relative; } .status-msg-bg { background-color: transparent; opacity: .8; filter: alpha(opacity=30); -moz-opacity: .8; width: 100%; position: relative; z-index: 1; } .status-msg-body { text-align: center; padding: .3em 0; width: 100%; position: absolute; z-index: 4; color: #de0b84; font-size: 16px; } .status-msg-hidden { visibility: hidden; padding: .3em 0; } .status-msg-wrap a { padding-left: .4em; color: #213040; font-size: 16px; font-weight: bold; } .status-msg-wrap a:hover{ color: #de0985; } /* SLOT IKLAN */ .iklan-tengah1 .widget, .iklan-tengah2 .widget, .iklan-bawah .widget, .iklan-atas .widget, .iklan-tengah1 .widget-content, .iklan-tengah2 .widget-content, .iklan-bawah .widget-content, .iklan-atas .widget-content { margin:0 !important; } .iklan-tengah1 h2, .iklan-tengah2 h2, .iklan-bawah h2, .iklan-atas h2 { display: none; } #kode-iklan-atas ins, #kode-iklan-bawah ins, #kode-iklan-tengah1 ins, #kode-iklan-tengah2 ins { margin: 20px 0; } .post-body #kode-iklan-tengah1, .post-body #kode-iklan-tengah2, .post-body #kode-iklan-bawah, .post-body #kode-iklan-atas { text-align: center; display: block; } .post-body #baca-juga { display: block; } /* PAGE NAVIGATION */ /* FOOTER NAV MENU */ #footer-navmenu{border-bottom:1px dotted rgba(0,0,0,0.08);background:#028271;padding:30px 0;font:bold 14px Roboto, Arial, sans-serif;color:#ffffff} #footer-navmenu-container{max-width:1000px;margin:0 auto;text-align:center} #footer-navmenu ul{list-style:none;margin:0} #footer-navmenu ul li{display:inline-block;margin: 2px 0;} #footer-navmenu ul li a{color:#028271;margin:0 1px;padding:9px 12px;border-radius:3px;background:#8fd8d5;} #footer-navmenu ul li a:hover{color:#ffffff;background:#373636} /* FOOTER WIDGET */ #footer-widget-container { background: #028271; font-size: 18px; } .footer-widget { max-width: 1000px; margin: 0 auto; text-align: center; } .footer-widget h2 { display: none; } .footer-widget .widget { margin-bottom: 0px !important; padding: 20px 0px; } /* SOCIAL ICON */ ul.nav-social { list-style: none; margin: 0; padding: 0; } ul.nav-social li { display: inline-block; padding: 0px 15px; margin: 0; } ul.nav-social li a { color: $(footerwidget.color); } ul.nav-social li a:hover { color:#555; } ul.nav-social li a.fcb:hover { color:#3B5A9B; } ul.nav-social li a.gpl:hover { color:#DD4B39; } ul.nav-social li a.twt:hover { color:#1BB2E9; } ul.nav-social li a.ytb:hover { color:#ED3F41; } ul.nav-social li a.lkdn:hover { color:#007fb2; } ul.nav-social li a.igicon:hover { color:#527fa4; } /* Search Form */ .jagoanSearch{ position:absolute; right:0px; top:0px; bottom:0px; } .jagoanSearch svg{ width:24px; height:24px; } .jagoanSearch svg path{ fill:#fff; } .jagoanSearch .search .input { background-color: #fff; color: #4b4f56; width: 0px; height: 30px; border-radius: 15px; vertical-align: bottom; top: 9px; right: 75px; position: relative; transition: all .3s ease; outline: none; border: none; z-index: 3; } .jagoanSearch .search .icon{ position:absolute; top:8px; right:80px; border-radius:25px; padding: 4px; transition:all .5s ease; cursor: pointer; z-index: 3; } .jagoanSearch .search .icon .open{ display:block; } .jagoanSearch .search .icon .close{ display:none; } .jagoanSearch .search .check:checked ~ .input, .jagoanSearch .search .input:focus{ padding:0px 40px 0px 15px; width:calc(1011px - 15px); } .jagoanSearch .search .check:checked ~ .icon .open{ display:none; } .jagoanSearch .search .check:checked ~ .icon .close{ display:block; position:relative; right:2px; } .jagoanSearch .search .check:checked ~ label:hover{ background-color:transparent !important; } .jagoanSearch .search .check:checked ~ .icon > svg path{ fill:#000; } @media screen and (max-width: 600px) { .jagoanSearch .search .check:checked ~ .input, .jagoanSearch .search .input:focus { width: calc(100vw - 145px); } } @media screen and (max-width: 1130px) { .jagoanSearch .search .check:checked ~ .input, .jagoanSearch .search .input:focus { width: calc(100vw - 140px); } } /* NAV MENU */ #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile { border: 0; list-style: none; line-height: 1; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu ul li a { position: relative; } #cssmenu #head-mobile { position: relative; } #cssmenu { text-align: left; } #cssmenu ul { margin: 0; display: block; height: 48px; } #cssmenu #head-mobile { display: none; position: relative; } #cssmenu > ul > li { border-left: 1px solid rgba(0,0,0,0.08); border-right: 1px solid rgba(255,255,255,0.12); float: left; margin: 0; } #cssmenu > ul > li > a { padding: 0 17px; font: $(navmenu.font); line-height: 48px; letter-spacing: 0.8px; text-decoration: none; text-transform: uppercase; color: $(navmenu.font.color); } #cssmenu > ul > li:hover > a, #cssmenu ul li.active a { color: $(navmenu.font.hover.color); } #cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover { background: rgba(64,64,64,0.1); -webkit-transition: background .2s ease; -ms-transition: background .2s ease; transition: background .2s ease; } #cssmenu ul li.has-sub { position: relative; } #cssmenu > ul > li.has-sub > a::after, #cssmenu ul ul li.has-sub > a::after { content: "\f0d7"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; margin-left: 10px; } #cssmenu ul ul li.has-sub > a::after { content: "\f0da"; } #cssmenu > ul > li.has-sub:hover > a::after { content: "\f0d8"; } #cssmenu ul ul { height: auto; position: absolute; left: -9999px; z-index: 1; -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15); box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15); opacity: 0; transform: translateY(-2em); transition: all 0.3s ease-in-out 0s; } #cssmenu li:hover > ul { left: auto; opacity: 1; transform: translateY(0%); transition-delay: 0s, 0s, 0.3s; } #cssmenu ul ul li { background: $(navsubmenu.font.background); margin: 0; } #cssmenu ul ul li:hover { background: $(navsubmenu.hover); } #cssmenu ul ul ul{ margin-left: 100%; top: 0 } #cssmenu ul ul li a { font: $(navsubmenu.font); border-bottom: 1px solid rgba(150,150,150,0.15); padding: 0 17px; line-height: 42px; max-width: 100%; text-decoration: none; color: $(navsubmenu.font.color); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a { border-bottom: 0 } #cssmenu ul ul li.has-sub:hover, #cssmenu ul li.has-sub ul li.has-sub ul li:hover { background: $(navsubmenu.hover); } @media screen and (min-width:801px){ #cssmenu ul { display: block !important; } } @media screen and (max-width:800px){ #cssmenu { float: none; } #cssmenu ul { background: $(navsubmenu.font.background); width: 100%; display: none; height: auto; -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15); box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15); } #cssmenu > ul { max-height: calc(100vh - 48px); overflow-y: auto; } #cssmenu ul ul { -webkit-box-shadow: none; box-shadow: none; display:none; opacity: 1; transform: translateY(0%); transition: unset; } #cssmenu li:hover > ul { transition-delay: 0s, 0s, 0s; } #cssmenu ul li { width: 100%; border-top: 1px solid rgba(150,150,150,0.15); background: linear-gradient(to right, #ee0979, #ff6a00); } #cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover { background: $(navsubmenu.hover); } #cssmenu > ul > li:hover > a, #cssmenu ul li.active a { color: $(navsubmenu.font.color); } #cssmenu ul ul li a { padding: 0 25px; } #cssmenu ul li a, #cssmenu ul ul li a { width: 100%; border-bottom: 0; color: $(navsubmenu.font.color); } #cssmenu > ul > li { float: none; position: relative; } #cssmenu ul ul li.has-sub ul li a { padding-left: 35px } #cssmenu ul ul, #cssmenu ul ul ul { position: relative; left: 0; width: 100%; margin: 0; text-align: left } #cssmenu > ul > li.has-sub > a::after, #cssmenu ul ul > li.has-sub > a::after { display: none } #cssmenu #head-mobile { display: block; padding: 24px; color: #fff; font-size: 12px; font-weight: bold } .button { width: 25px; height: 20px; position: absolute; right: 0; top: 14px; cursor: pointer; z-index: 2; outline: none; } .mline1, .mline2, .mline3 { position: absolute; left: 0; display: block; height: 3px; width: 22px; background: $(search.icon.color); content:''; border-radius: 5px; transition: all 0.2s; display: none; } .mline1 { top: 0; } .mline2 { top: 7px; } .mline3 { top: 14px; } .button.menu-opened .mline1 { top: 8px; border: 0; height: 3px; width: 22px; background: $(search.icon.color); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .button.menu-opened .mline2 { top: 8px; background: $(search.icon.color); width: 22px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .button.menu-opened .mline3 { display: none; height:0; } #cssmenu .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; cursor: pointer; background: linear-gradient(to left, $(header.background.kiri), $(header.background.kanan)); } #cssmenu .submenu-button::after { content: "\f0d7"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; margin: 0 20px; color: $(search.icon.color); line-height: 42px; } #cssmenu .submenu-opened::after { content: "\f0d8"; } #cssmenu ul ul .submenu-button::after { line-height: 36px; } #cssmenu ul ul ul li.active a{ border-left: none } #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{ border-top: none } } /* BACA JUGA */ #baca-juga { display: block; position: relative; } #baca-juga h2 { color: #ffffff; position: absolute; top: -17px; left: 3.5em; border: 0px solid #efefef; padding: 7px 13px; font-size: 14px; background: #1a73e8; font-weight: bold; z-index: 1; border-radius: 25px; } #baca-juga a { font-size: 14px; display: block; padding: 0; color: #1a73e8; line-height: 20px; } #baca-juga a:hover { color: white; } #baca-juga ul { max-width: 100%; margin: 1.5em 0 1.5em 0; padding: 20px 20px 10px 17px; position: relative; background-color: rgba(0, 128, 128, .15); } #baca-juga li { padding: 0px; margin: .6em 0; list-style: none; padding-bottom: 5px; border-bottom: 3px dotted rgba(0,0,0,.15); } @media screen and (max-width: 800px) { #body-post-it .baca-juga-wrap h2 { left: 15px; } } /* RELATED POSTS */ .related-post { margin: 30px auto 0; overflow: hidden; } .related-post h4 { position:relative; margin: 0; display: inline-block; font-weight: bold; color: #000; text-transform: uppercase; font-size: 16px; z-index: 1; background: #fff; padding: 0 10px; } .related-post ul { padding: 0 !important; font-size: 14px; } /* Style 3 */ .related-post-style-3, .related-post-style-3 li { margin: 0; padding: 0; list-style: none; word-wrap: break-word; overflow: hidden; } .related-post-style-3 .related-post-item { float: left; width: 23.5%; height: auto; margin-right: 2%; margin-bottom: 10px; } .related-post-style-3 .related-post-item:nth-of-type(4n+0) { margin-right: 0; } .related-post-style-3 .related-post-item:nth-of-type(4n+1) { clear: both; } .related-post-style-3 .related-post-item:hover { opacity: 0.7; } .related-post-style-3 .related-post-item-thumbnail { display: block; max-height: none; background-color: transparent; border: none; padding: 0; max-width: 100%; } .related-post-style-3 .related-post-item-title { color: #444; } .related-post-style-3 .related-post-item-tooltip { padding: 10px 0; } .related-post-item-tooltip .related-post-item-title { font-weight: bold; display: block; } @media only screen and (max-width:480px){ .related-post-style-3 .related-post-item { width: 48%; margin-right: 4%; } .related-post-style-3 .related-post-item:nth-of-type(2n+0) { margin-right: 0; } .related-post-style-3 .related-post-item:nth-of-type(2n+1) { clear: both; } } .contact-form-widget { } .contact-form-success-message, .contact-form-error-message { background: #f9edbe; border: 0 solid #f0c36d; font-size: 14px; text-align: center; max-width: 500px; border-radius: 3px; } .contact-form-success-message-with-border, .contact-form-error-message-with-border { background: #f9edbe; border: 1px solid #f0c36d; font-size: 14px; text-align: center; max-width: 600px; border-radius: 3px; box-sizing: border-box; padding: 5px 10px; } .contact-form-cross { height: 11px; margin: 0 5px; vertical-align: -8.5%; width: 11px; } .contact-form-email, .contact-form-name { color: inherit; height: 40px; margin-top: 5px; max-width: 300px; width: 100%; padding: 0 15px; border-radius: 3px; border: 1px solid #cacaca; box-sizing: border-box; } .contact-form-email-message { color: inherit; margin-top: 5px; vertical-align: top; max-width: 600px; width: 100%; border-radius: 3px; border: 1px solid #cacaca; padding: 15px; } .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover { outline: none; border: 1px solid $(body.link.color); } .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus { outline: none; border: 1px solid $(body.link.color); } .contact-form-name, .contact-form-email, .contact-form-email-message { background: #f8f8f8; } .contact-form-button { display: block; font-size: 14px; line-height: 24px; padding: 5px 20px; margin: 30px 0; text-align: center; border: none; background: $(body.link.color); color: #fff; border-radius: 3px; font-weight: bold; } .contact-form-button:hover, .contact-form-button.hover { cursor: pointer; outline: none; opacity: .85; } .contact-form-button.focus, .contact-form-button.right.focus, .contact-form-button.mid.focus, .contact-form-button.left.focus { outline: none; } .contact-form-button-submit:focus, .contact-form-button-submit.focus { outline: none; opacity: .85; } .swajib { font-weight: bold; color: #e85e5e; } .ctitles { font-weight: bold; display: block; margin: 30px 0 0; } /* COMMENT FORM */ #comments-block { margin: 15px 0; } .comment a{ color: #565656; } .comment-body { padding: 15px 0; margin: 0 0; } .comment-body p { margin: 0; } .comment-form { overflow: hidden; margin-top: 20px; } .comment-footer { margin: 0 0 30px; } #comments-block .avatar-image-container { display: none; } h4#comment-post-message { display: none; margin: 0 0 0 0; } .comments{ clear: both; margin-top: 10px; margin-bottom: 0 } .comments .comments-content{ transition: all .5s ease; margin-bottom:20px; } .comments .comments-content .comment-thread ol{ text-align: left; margin: 13px 0; padding: 0; list-style: none; } #comments .comment-thread ol > li {background:#fff;border: 1px solid #dddfe2;padding: 15px 15px 0px;margin-bottom: 20px; border-radius: 7px;transition: all .5s ease;} .comment .avatar-image-container { float: left; max-height: 36px; overflow: hidden; width: 36px; } .comments .avatar-image-container img { max-width: 34px; border-radius: 17px; } .comments .comment-block { position: relative; margin-left: 45px; border-radius: 5px; word-break: break-word; transition: all .5s ease; } .comments .comments-content .comment-replies{ margin:10px 0; margin-left:45px; border-left: 2px solid #1a73e8; padding-left: 10px; } .comments .comments-content .comment-thread:empty{ display:none } .comments .comment-replybox-single { margin-left:45px; margin: 20px 0; } .comments .comment-replybox-thread { margin: 20px 0; } .comments .comments-content .comment{ margin-bottom:6px; padding:0 } .comments .comments-content .comment:first-child { padding:0; margin:0 } .comments .comments-content .comment:last-child { padding:0; margin:0; } .comments .comment-thread.inline-thread .comment, .comments .comment-thread.inline-thread .comment:last-child { margin:0px 0px 5px 14% } .comment .comment-thread.inline-thread .comment:nth-child(6) { margin:0px 0px 5px 0%; } .comment .comment-thread.inline-thread .comment:nth-child(5) { margin:0px 0px 5px 0%; } .comment .comment-thread.inline-thread .comment:nth-child(4) { margin:0px 0px 5px 0%; } .comment .comment-thread.inline-thread .comment:nth-child(3) { margin:0px 0px 5px 0%; } .comment .comment-thread.inline-thread .comment:nth-child(2) { margin:0px 0px 5px 0%; } .comment .comment-thread.inline-thread .comment:nth-child(1) { margin:0px 0px 5px 0; } .comments .comments-content .comment-thread{ margin:0; padding:0 } .comments .comments-content .inline-thread{ background:#fff; margin:0; transition: all .5s ease; } .comments .comments-content .icon.blog-author { display:inline; height: 18px; margin: 0 0 -4px 6px; width: 18px; } .comments .comments-content .icon.blog-author::after { content:"author"; background: #1a73e8; color: #fff; padding: 2px 6px; border-radius: 10px; font-size: 11px; } .comments .comments-content .comment-header { font-size:14px; margin: 0 0 15px; } .comments .comments-content .comment-content { margin: 0 0 15px; text-align: left; line-height: 1.6; color: #333; font-size: 13px; } .comments .comments-content .datetime { margin-left: 6px; } @media screen and (max-width: 800px) { .comments .comments-content .datetime { float: none; } } .comments .comments-content .datetime a { color:#000; } .comments .comments-content .user { font-weight: bold; font-style: normal; } .comments .comment .comment-actions a { display: inline-block; font-size: 13px; line-height: 15px; margin: 4px 8px 0 0; border-radius: 25px; color: #1a73e8; } .comments .continue a { display:inline-block; font-size:13px; padding: 5px 13px 5px 10px; color: #1a73e8; text-align: center; } .comments .comment .comment-actions a:hover, .comments .continue a:hover{ text-decoration:underline; } .pesan-komentar { } .pesan-komentar p { margin: 5px 0 15px; } .deleted-comment { font-style: italic; opacity: .5; } .comments .comments-content .loadmore { cursor: pointer; margin-top: 3em; max-height: 3em } .comments .comments-content .loadmore.loaded { max-height: 0; opacity: 0; overflow: hidden } .comments .thread-chrome.thread-collapsed { display: none } .comments .thread-toggle { display: none; } .comments .thread-toggle .thread-arrow { display: inline-block; height: 6px; margin: .3em; overflow: visible; padding-right: 4px; width: 7px } .comments .thread-expanded .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent } .comments .thread-collapsed .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent } .comments .hidden { display: none } @media screen and (max-device-width:480px) { .comments .comments-content .comment-replies { margin-left: 0 } } /* MEDIA QUERY */ @media only screen and (max-width:1080px){ #wrapper { margin: 0 auto; } .footer-widget, #footer-navmenu-container { max-width: 100%; } #header-wrapper, .footer-widget .widget, #footer-navmenu-container { padding-left: 30px; padding-right: 30px; } .sticky-mobile { margin-right: 30px; } .img-thumbnail { width: 240px; height: 160px; } .search-icon { right: 90px; } } @media only screen and (max-width:800px){ #header-wrapper { padding-left: 0px; padding-right: 0px; position: relative; } #wrapper { padding: 70px 20px 20px; } #cssmenu > ul > li > a { padding: 0x 20px; line-height: 42px; color:#fff; } .footer-widget .widget, #footer-navmenu-container { padding-left: 20px; padding-right: 20px; } .button { left: 20px; } .header { position: absolute; top: -1px; left: 50px; z-index: 1; text-align: center; float: none; display: inline-block; max-width: 100%; margin-right: 0; } .header img { display: inline-block !important; } .img-thumbnail { width: 180px; height: 120px; } .search-icon { right: 90px; } } @media only screen and (max-width:768px){ #post-wrapper, #sidebar-wrapper { float:none; width:100%; max-width:100% } .post-container { padding: 0 0 20px 0; } } @media only screen and (max-width:640px){ #wrapper { padding: 60px 10px 15px; } #cssmenu > ul > li > a { padding: 0 15px; } .footer-widget .widget, #footer-navmenu-container { padding-left: 15px; padding-right: 15px; } .button { left: 15px; } #post-wrapper, #sidebar-wrapper { float:none; width:100%; max-width:100% } .search-icon { right: 90px; } } @media only screen and (max-width:480px){ #footer-navmenu ul li a { display: inline-flex; } #footer-navmenu ul li { } ul.nav-social li { padding: 0px 8px; } .img-thumbnail { width: calc(100% + 30px); margin: 0px 0px 15px -15px; height: 160px; position: relative; overflow: hidden; } .img-thumbnail img { width: auto; height: 160px; position: absolute; top: -100%; left: 0; right: 0; bottom: -100%; margin: auto; } .post-snippet { margin-top: 10px; } blockquote { margin-left:0; margin-right:0; } #baca-juga ul { max-width: 100%; margin: 1.5em 0 1.5em 0; } h1{font-size:170%} h2{font-size:150%} h3{font-size:100%} h4{font-size:120%} h5{font-size:110%} h6{font-size:100%} h2.post-title { font-size: 18px; display: inline; } h1.post-title { font-size: 16px; } .section:last-child .widget:last-child, .sidebar .widget, .sidebar-sticky .widget, .above-post-widget .widget, .bellow-header-widget .widget{ margin:0 0 20px; } .comments .comments-content .comment-replies{ margin-left:20px !important; } .comments .comment-block { padding: 15px !important; } .comment .comment-thread.inline-thread .comment { margin: 0 0 0 0 !important; } iframe#comment-editor { } #searchfs input[type="search"] { font-size: 26px; } .FeaturedPost .post-summary, .FeaturedPost .image, .img-thumbnail, .img-thumbnail img { } .FeaturedPost .post-summary p { margin: 0 10px; } #baca-juga { max-width: 100%; } } /* Tombol Download */ .buttonDownload { border-radius: 3px; display: inline-block; position: relative; padding: 10px 25px; background-color: $(body.link.color); color: white !important; font-weight: bold; font-size: 0.9em; text-align: center; text-indent: 15px; transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; } .buttonDownload:hover { opacity: .85; } .buttonDownload::before, .buttonDownload::after { content: ' '; display: block; position: absolute; left: 15px; top: 52%; } .buttonDownload::before { width: 10px; height: 2px; border-style: solid; border-width: 0 2px 2px; } .buttonDownload::after { width: 0; height: 0; margin-left: 3px; margin-top: -7px; border-style: solid; border-width: 4px 4px 0 4px; border-color: transparent; border-top-color: inherit; animation: downloadArrow 2s linear infinite; animation-play-state: paused; } .buttonDownload:hover::after { animation-play-state: running; } @keyframes downloadArrow { 0% { margin-top: -7px; opacity: 1; } 0.001% { margin-top: -15px; opacity: 0; } 50% { opacity: 1; } 100% { margin-top: 0; opacity: 0; } } /* Skin for Blogger Tabbed Layout TOC */ .tabbed-toc { margin: 0 auto; background: $(header.background.kiri); background: linear-gradient(to bottom right, $(header.background.kiri), $(header.background.kanan)); position: relative; } .tabbed-toc .loading { display: block; padding: 2px 12px; color: $(navmenu.font.color); } .tabbed-toc ul, .tabbed-toc ol, .tabbed-toc li { margin: 0; padding: 0; list-style: none; } .tabbed-toc .toc-tabs { width: 20%; float: left; } .tabbed-toc .toc-tabs li a { display: block; font: $(navmenu.font); overflow: hidden; color: $(navmenu.font.color); text-transform: uppercase; text-decoration: none; padding: 12px; } .tabbed-toc .toc-tabs li a:hover { background-color: rgba(64,64,64,0.1); } .tabbed-toc .toc-tabs li a.active-tab { background: rgba(64,64,64,0.1); position:relative; z-index:5; margin:0 -1px 0 0; /* cursor:text; */ } .tabbed-toc .toc-content, .tabbed-toc .toc-line { width: 80%; float: right; background-color: white; border-left: 5px solid rgba(64,64,64,0.1); box-sizing: border-box; } .tabbed-toc .toc-line { float: none; display: block; position: absolute; top: 0; right: 0; bottom: 0; } .tabbed-toc .panel { position: relative; z-index: 5; } .tabbed-toc .panel li a { display: block; position: relative; font-weight: bold; font-size: 14px; padding: 6px 12px; overflow: hidden; } .tabbed-toc .panel li time { display: block; font-weight: normal; font-size: 11px; color: #666; float: right; } .tabbed-toc .panel li .summary { display: block; padding: 10px 12px 10px; font-size: 13px; } .tabbed-toc .panel li .summary img.thumbnail { float: left; display: block; margin: 5px 8px 0 0; width: 72px; height: 72px; background-color: #fafafa; } .tabbed-toc .panel li {background-color:#f3f3f3} .tabbed-toc .panel li:nth-child(even) {background-color:#fff} .tabbed-toc .panel li a:hover, .tabbed-toc .panel li a:focus, .tabbed-toc .panel li.bold a { background-color: rgba(64,64,64,0.1); outline: none; } @media (max-width:700px) { .tabbed-toc .toc-tabs, .tabbed-toc .toc-content { overflow :hidden; width: auto; float: none; display: block; } .tabbed-toc .toc-tabs li { display: inline; float: left; } .tabbed-toc .toc-tabs li a.active-tab { background-color: rgba(64,64,64,0.1); } .tabbed-toc .toc-content { border: none } .tabbed-toc .toc-line, .tabbed-toc .panel li time { display: none } } /* Button Dark Mode */ .modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:39px;top: 0;z-index:999;} .modedark svg{ width:24px; height:24px; vertical-align: -5px; background-repeat: no-repeat !important; content: ''; } .modedark svg path{ fill:#fff; } .modedark .check:checked ~ .NavMenu{ opacity:1; visibility:visible; top:45px; min-width:200px; transition:all .3s ease; z-index:2; } .iconmode { cursor: pointer; display: block; padding: 8px; background-position: center; transition: all .5s linear; } .iconmode:hover{ border-radius: 100px; background: rgba(0,0,0,.2) radial-gradient(circle, transparent 2%, rgba(0,0,0,.2) 2%) center/15000%; } .check { display: none; } .modedark .iconmode .openmode{ display:block; } .modedark .iconmode .closemode{ display:none; } .modedark .check:checked ~ .iconmode .openmode{ display:none; } .modedark .check:checked ~ .iconmode .closemode{ display:block; } .Night .post { background: #213040; } .Night h2.post-title a { color: #929aa0; } .Night .post-body { color: #8899a6; } .Night .latest-post-title h2 { background: #213040; color:#fff; } .Night div.Label h2 { background: #213040; } .Night .PopularPosts h2 { background: #213040; } .Night { background: #15202b; } .Night #wrapper { background: #15202b; } .Night .breadcrumbs { background: #213040; color:#fff; } .Night h1.post-title { color:#de0985; } .Night .section:last-child .widget:last-child{ background: #213040; } .Night .share-this-pleaseeeee { color: #de0a84; background: #213040; } .Night #footer-widget-container { background:#213040; } .Night h3 { background: #213040; } .Night .comments .comments-content{ background: #213040; } .Night a:link { color: #fff; } .Night .btn { background: #213040; } .Night .middle a { color: #ee0979; } .Night .breadcrumbs span { color:#fff; background: #15202b; } .Night .breadcrumbs a { background:#15202b; color: #ee0979; } .Night .status-msg-wrap { background: #213040; } .Night .status-msg-wrap a { color:#fff; } .Night #ignielRelated h3.title span { background: #213040; } .Night #ignielRelated ul li a.judul{ color: #fff; } .Night .comments .comments-content .comment-content { color:#fff; } .Night .blog-posts .post-outer .post { background: #213040; color: #fff; } .Night .post-label a { color: #929aa0; } .Night .comments .comment .comment-actions a:hover { background: #213040; } .Night .comments .continue a:hover { background: #213040; } .Night .PopularPosts .widget-content ul li a { color: #fff; } .Night .list-label-widget-content ul li a { color:#fff; } .Night .post-label a::before { background: #15202b; } .Night .post-bottom a { background: #15202b; } .Night .post-label a{ background: transparent; } .Night .comments .comment-block { background: #15202b; } /* Blogger Sitemap Dropdown */ #sitemap1 {background-color:#fff; color:#1d2129; font-weight:400; border:1px solid #ccc;} #sitemap1 .loading {padding:10px 15px; color:#666;} #sitemap1 .judul {background: linear-gradient(to right, #ee0979, #ff6a00); color:#fff; font-size:125%; font-weight:600; padding:15px; cursor:pointer; border-bottom:1px solid #fff; letter-spacing:1px; transition:all .3s ease;} #sitemap1 .judul:last-child {border-bottom:0px;} #sitemap1 .judul:hover {background-color:#1d2129;} #sitemap1 .judul:after {content:''; width:0px; height:0px; position:relative; float:right; top:10px; right:10px; border:5px solid transparent; border-color:#fff transparent transparent; transition:all .3s ease} #sitemap1 .judul.aktif {background-color:#1d2129;} #sitemap1 .judul.aktif:after {border-color:#fff transparent transparent; top:5px; -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg)} #sitemap1 .konten ol, #sitemap1 .konten ol li {list-style:none; list-style-type:none; margin:0px; padding:0px; font-weight:400;} #sitemap1 .konten ol li:nth-of-type(even) {background-color:#e9e9e9;} #sitemap1 .konten ol li:nth-of-type(odd) {background-color:#fff} #sitemap1 .konten ol li a {text-decoration:none; padding:10px 15px; display:block; color:#666; line-height:1.5em; transition:all .3s ease;} #sitemap1 .konten ol li a:hover {color:#000;} .Label h2 svg { float: left; margin-left: 15px; display: inline-block; width: 20px; height: 20px; vertical-align: -5px; background-repeat: no-repeat !important;content: ''; } .idnxmusNavigation label { cursor:pointer; display:block; padding:8px; background-position:center; transition:all .5s linear; } .idnxmusNavigation .check:checked ~ .NavMenu { opacity:1; visibility:visible; top:45px; min-width:200px; transition:all .3s ease; z-index:2; } .idnxmusNavigation .NavMenu { opacity:0; visibility:hidden; position:absolute; right:0; top:0; background-color:#fff; color:#3c4043; box-shadow:0 5px 8px 0 rgba(0,0,0,.06); transition:all .3s ease; } .idnxmusNavigation .check:checked ~ .icon .open { display:none; } .idnxmusNavigation .icon .open { display:block; } .idnxmusNavigation { position:absolute; right:8px; top:3px; } .idnxmusNavigation .icon .close { display:none; } .idnxmusNavigation .check:checked ~ .icon .close { display:block; } .idnxmusNavigation .NavMenu ul { margin:0; padding:0; } .idnxmusNavigation .NavMenu:before,.idnxmusNavigation .NavMenu:after { content:''; top:-5px; right:11px; border-color:transparent; border-bottom-color:#e6e6e6; border-style:dashed dashed solid; border-width:0 8.5px 8.5px; position:absolute; z-index:1; height:0; width:0; } .idnxmusNavigation .NavMenu:before { border-bottom-color:rgba(0,0,0,.25); } .idnxmusNavigation .NavMenu ul li.xprofil { background-color:#e6e6e6; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; margin:0; align-items:center; padding:10px 16px; border-bottom:1px solid #fff; } .idnxmusNavigation .NavMenu ul li { list-style-type:none; transition:all .3s ease; margin:0; } .idnxmusNavigation .NavMenu img { max-width:50px; max-height:50px; border-radius:100px; border:1px solid #fff; margin:0; } .idnxmusNavigation .NavMenu ul li.xprofil ul { line-height:24px; margin-left:3px; } .idnxmusNavigation .NavMenu ul li.xprofil ul li.name { font-weight:500; margin-bottom:3px; } .idnxmusNavigation .NavMenu ul li.xprofil ul li { padding:0; font-size:17px; line-height:normal; white-space:nowrap; } .idnxmusNavigation .NavMenu ul li.xprofil ul li.follow a { background-color:#1a73e8; color:#fff; font-size:10px; padding:3px 7px; border-radius:25px; display:inline-block; } .idnxmusNavigation .NavMenu ul li a { color:#3c4043; display:block; padding:10px 16px; margin:0; } .idnxmusNavigation .NavMenu ul li a span { font-size:14px; } .idnxmusNavigation .NavMenu ul li.xprofil ul li.follow a:before { content:''; display:inline-block; width:15px; height:15px; margin-right:3px; margin-left:-3px; vertical-align:-4px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat; } .idnxmusNavigation .NavMenu ul li:hover { background:#e6e6e6; } .idnxmusNavigation .NavMenu ul li.social { background-color:#e6e6e6; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; justify-content:space-between; padding:0 15px; border-top:1px solid #fff; } .idnxmusNavigation .NavMenu ul li.social a { padding:15px 7px; z-index:1; position:relative; } .idnxmusNavigation .NavMenu ul li.social button { margin:0; font-size:unset; } .idnxmusNavigation label:hover { border-radius:100px; background:rgba(0,0,0,.2) radial-gradient(circle,transparent 2%,rgba(0,0,0,.2) 2%) center/15000%; } .idnxmusNavigation label:active { border-radius:100px; background-color:rgba(0,0,0,.1); background-size:100%; transition:background 0s; } .idnxmusNavigation .NavMenu ul li.xprofil ul li.follow a:hover { background-color:#000; } .idnxmusNavigation .NavMenu ul li.social a:hover:before { content:''; position:absolute; z-index:-1; margin:auto; background:rgba(0,0,0,.1); border-radius:100px; width:36px; height:36px; top:0; bottom:0; left:0; right:0; transition:opacity .3s linear; } .middle{ width: 100%; text-align: center; } .middle a { color:#ee0979; } .btn{ display: inline-block; width: 70px; height: 70px; background: #f1f1f1; margin: 10px; border-radius: 30%; box-shadow: 0 5px 15px -5px #00000070; color: #3498db; overflow: hidden; position: relative; } .btn i{ line-height: 70px; font-size: 26px; transition: 0.2s linear; } .btn:hover i{ transform: scale(1.3); color: #f1f1f1; } .btn::before{ content: ""; position: absolute; width: 120%; height: 120%; background: linear-gradient(to right, #ee0979, #ff6a00); transform: rotate(45deg); left: -110%; top: 90%; } .btn:hover::before{ animation: aaa 0.7s 1; top: -10%; left: -10%; } @keyframes aaa { 0%{ left: -110%; top: 90%; }50%{ left: 10%; top: -30%; }100%{ top: -10%; left: -10%; } } .txtb{ width: 100%; height: 70px; background: #f1f1f199; border-radius: 40px; position: relative; margin-top: 40px; } .txtb input{ width: 100%; height: 70px; border-radius: 40px; border: 0; background: none; padding: 0 30px; outline: none; font-size: 15px; padding-right: 80px; } .txtb button{ background: #df1082; border: 0; width: 50px; height: 50px; border-radius: 50%; position: absolute; right: 10px; top: 10px; outline: none; cursor: pointer; color: #fff; transition: 0.3s linear; } .txtb button:hover{ opacity: .5; } .contact-info{ display: flex; align-items: center; justify-content: center; padding: 0 20px; } .card{ background: linear-gradient(to right, #ee0979, #ff6a00); padding: 0 20px; margin: 0 10px; width: calc(33% - 20px); height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; cursor: pointer; border-radius: 10px; } .card-icon{ font-size: 28px; background: #ff6348; width: 60px; height: 60px; text-align: center; line-height: 60px !important; border-radius: 50%; transition: 0.3s linear; } .card:hover .card-icon{ background: none; color: #ff6348; transform: scale(1.6); } .card p{ margin-top: 20px; font-weight: 300; letter-spacing: 2px; max-height: 0; opacity: 0; transition: 0.3s linear; } .card:hover p{ max-height: 40px; opacity: 1; } @media screen and (max-width:800px) { .contact-info{ flex-direction: column; } .card{ width: 100%; max-width: 300px; margin: 10px 0; } } .email-box{ height: 40px; justify-content: center; display: flex; /*its better to use inline-flex*/ } .email-box i{ background: #2f3542; width: 40px; line-height: 40px; } .tbox,.baten{ border: none; outline: none; } .tbox{ width: 0px; transition: 0.6s; } .email-box:hover > .tbox,.tbox:focus{ width: 260px; padding: 0 10px; } .baten{ background: #2f3542; color: white; padding: 0 10px; text-transform: uppercase; cursor: pointer; } .kontaner{ text-align: center; color: white; } #downloadbtn a{ position: absolute; transform: translate(-50%,-50%); color:#fff; padding:30px; letter-spacing:2px; text-transform:uppercase; text-decoration:none; box-shadow:0 20px 50px rgba(0,0,0,.5); overflow:hidden; background: linear-gradient(to right,#de0985,#f18241); } #downloadbtn a:before { content: ''; position: absolute; top: 2px; left: 2px; bottom: 2px; width: 50%; background: rgba(255,255,255,0.05); } #downloadbtn a span:nth-child(1) { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right,#de0985,#f18241); animation: animate1 2s linear infinite; } @keyframes animate1 { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } } #downloadbtn a span:nth-child(2) { position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: linear-gradient(to right,#de0985,#f18241); animation: animate2 2s linear infinite; animation-delay: 1s; } @keyframes animate2 { 0% { transform:translateY(-100%); } 100% { transform:translateY(100%); } } #downloadbtn a span:nth-child(3) { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right,#de0985,#f18241); animation: animate3 2s linear infinite; } @keyframes animate3 { 0% { transform:translateX(100%); } 100% { transform:translateX(-100%); } } #downloadbtn a span:nth-child(4) { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: linear-gradient(to right,#de0985,#f18241); animation: animate4 2s linear infinite; animation-delay: 1s; } @keyframes animate4 { 0% { transform:translateY(100%); } 100% { transform:translateY(-100%); } } /* Infinite Scroll Navigation */ #blog-pager a.home-link {display:none} #blog-pager {padding:0;margin:20px auto; text-align:center;} #blog-pager-older-link {float:none; display:block} #blog-pager-older-link img {max-height:50px} #blog-pager-older-link a { background: #1a73e8; color:#fff; font-size:14px; font-weight:600; border-radius:3px; padding:10px 20px; display:inline-block; position:relative; transition:0.3s; float: left; border: 1px solid #1a73e8;} #blog-pager-older-link a:hover { background:transparent; border: 1px solid #1a73e8; color: #1a73e8; } #blog-pager-newer-link a { background: #1a73e8; float: right; font-size: 14px; font-weight: 600; border-radius: 3px; padding: 10px 20px; display: inline-block; position: relative; transition: 0.3s; border: 1px solid #1a73e8; color: #fff; } #blog-pager-newer-link a:hover { background:transparent; border: 1px solid #1a73e8; color: #1a73e8; } /* JS LOAD MORE */ .js-load{ display: inline-block; box-sizing: border-box; background: #1a73e8; color: #fff!important; margin: 0; border-radius: 25px; padding: 8px 15px; transition: all .5s ease; } .js-load:hover { background: #ef5350; transition: all .5s ease; } .js-load::before, .js-load::after { width: calc(100% / 3); border-top: 1px solid #000; flex-grow: 1; } /* profile card */ .contaner{ user-select: none; margin:auto; background: linear-gradient(to right, #ee0979, #ff6a00); color: #b3b8cd; border-radius: 5px; width: 100%; text-align: center; box-shadow: 0 10px 20px -10px rgba(0,0,0,.75); } .cover-photo{ background: url(https://1.bp.blogspot.com/-2HFIq51vrlo/XbwbVqlFWHI/AAAAAAAAAHo/DqvYxCnZqi0kbMZW1wKHtvWgr9HdUEBHwCLcBGAsYHQ/s320/bg.jpg); height: 160px; width: 100%; border-radius: 5px 5px 0 0; } .profile{ height: 120px; width: 120px; border-radius: 50%; margin: 93px 0 0 -175px; border: 1px solid #de0985; padding: 7px; background: #f18241; } .profile-name{ font-size: 25px; font-weight: bold; margin: 27px 0 0 120px; } .about{ margin-top: 35px; line-height: 21px; } button{ margin: 10px 0 40px 0; } .msg-btn, .follow-btn{ background: #ef7847; border: 1px solid #ef7847; padding: 10px 25px; color: #fff; border-radius: 3px; font-family: Montserrat, sans-serif; cursor: pointer; } .follow-btn{ margin-left: 10px; background: transparent; color: #fff; } .follow-btn:hover{ color: #fff; background: #ef7847; transition: .5s; } .contaner i{ padding-left: 20px; font-size: 20px; margin-bottom: 20px; cursor: pointer; transition: .5s; color: #fff; } .contaner i:hover{ color: #213040; } #PopularPosts1 { margin-top: 10px; } /* fix komentar hilang */ .mobile .blogger-iframe-colorize { display: block !important; }.blogger-iframe-colorize { display: block !important; } .emji { height: 35px; border: none; box-shadow: none; } .post-body pre { background-color: #292E34; /* warna background */ border-left: 5px solid #008c5f; /* variasi border kiri */ padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none } .post-body pre code { color: #BFBF90; /* warna huruf */ font-size: 12px; /* ukuran huruf */ max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text } .post h1.post-title { padding: 5px 0 15px; text-align: center; border-radius: 10px; font: 400 20px bold 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 20px; color: #000; } .post-body a img:hover{animation:ignielShake 0.82s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}@keyframes ignielShake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px, 0, 0)}}@-webkit-keyframes ignielShake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}} /* Dark Mode Bintang, Mode Malam by DizzyTech www.dizzycloud.my.id */ .section-center{ position: fixed; width: 100%; height: 100%; top: 50%; left: 50%; display: none; overflow: hidden; z-index: 5; pointer-events: none; box-shadow: 0 0 50px 5px rgba(255,148,0,.1); transform: translate(-50%, -50%); } .section-center { -webkit-transition: all 500ms linear; transition: all 500ms linear; } .shooting-star { z-index: 2; width: 1px; height: 50px; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; top: 0; left: -70px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); animation: animShootingStar 6s linear infinite; -webkit-transition: all 2000ms linear; transition: all 2000ms linear; } .shooting-star-2 { z-index: 2; width: 1px; height: 50px; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; top: 0; left: 200px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); animation: animShootingStar-2 9s linear infinite; -webkit-transition: all 2000ms linear; transition: all 2000ms linear; } .star { z-index: 2; position: absolute; top: 185px; left: 25px; background-image: url('https://ivang-design.com//svg-load/air/star.png'); background-size: 15px 15px; width: 15px; height: 15px; opacity: 0.4; animation: starShine 3.5s linear infinite; -webkit-transition: all 1200ms linear; transition: all 1200ms linear; } .star.snd { top: 100px; left: 310px; animation-delay: 1s; } .star.trd { top: 130px; left: 100px; animation-delay: 1.4s; } .star.fth { top: 190px; left: 200px; animation-delay: 1.8s; } .star.fith { top: 85px; left: 1080px; animation-delay: 2.2s; } @keyframes animShootingStar { from { transform: translateY(0px) translateX(0px) rotate(-45deg); opacity: 1; height: 5px; } to { transform: translateY(1280px) translateX(1280px) rotate(-45deg); opacity: 1; height: 800px; } } @keyframes animShootingStar-2 { from { transform: translateY(0px) translateX(0px) rotate(-45deg); opacity: 1; height: 5px; } to { transform: translateY(1920px) translateX(1920px) rotate(-45deg); opacity: 1; height: 800px; } } @keyframes starShine { 0% { transform: scale(0.3) rotate(0deg); opacity: 0.4; } 25% { transform: scale(1) rotate(360deg); opacity: 1; } 50% { transform: scale(0.3) rotate(720deg); opacity: 0.4; } 100% { transform: scale(0.3) rotate(0deg); opacity: 0.4; } } /* NAVIGASI BAR */ .darkshadow{visibility:hidden;opacity:0;position:fixed;top:48px;background:rgba(0,0,0,0.59);left:0;right:0;bottom:0;margin:0;z-index:5;transition:all .4s ease-in-out}.darkshadow.open{visibility:visible;opacity:1} #nav-wrapper{ font-size:13px; width:265px; position:fixed; z-index:5; top:48px; overflow:hidden; left:0; background:#fff; -webkit-transition:.3s; -o-transition:.3s; transition:.3s; bottom:0; padding-top:15px; -webkit-transform:translateX(-290px); -ms-transform:translateX(-290px); transform:translateX(-290px); transition: all .5s ease; } #nav-wrapper:hover{overflow-y:auto} #nav-wrapper.open{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)} #nav-wrapper.close{display:none} #nav-wrapper ul{margin:0;padding:0;list-style:none} #nav-wrapper li{display:block;list-style:none;position:relative} #nav-wrapper li.first{background:#d0d0d0;border-radius:0 50px 50px 0;margin:0 20px 0 0;transition: all .5s ease;display: none;} #nav-wrapper>ul>li>a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:12px 0 13px 15px;color:#333333;font-size:13px}#nav-wrapper li a.nav-submenu{padding:10px 15px;padding-bottom:12px;}#nav-wrapper li ul.nav-sub{display:none}#nav-wrapper li li a{display:block;position:relative;padding-left:4em;line-height:40px;color: #000;}#nav-wrapper a:hover{color:#008080;}#nav-wrapper svg.down{margin-right:0;margin-left:15px;display:block;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease} #nav-wrapper li.open svg.down{ -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg) } #nav-wrapper svg{height:20px;width:20px;margin-right:15px;overflow:hidden;opacity:.7;fill:currentColor}#nav-wrapper>ul>li:not(.colormode)>a>span:not(.new){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:1;-ms-flex:1 1;flex:1 1}#nav-wrapper>ul>li>a>span>span.new{background:#e1f5fe;color:#004c88;line-height:normal;margin-left:10px;font-size:8px;padding:3px 10px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px} @media only screen and (max-width:480px){ #nav-wrapper .profile img { width: 24px; height: 24px; margin-right: 15px; margin-left: 1px; border-radius: 20px; } } @media screen and (max-width: 600px) { #nav-wrapper .subs { display: flex; margin-left: 24px; margin-top: 10px; } #nav-wrapper .subs a { font-size: 11px; margin-right: 10px; width: auto; height: auto; padding: 7px 10px; margin-top: 0; background-color: #a1362a; color: #fff; border-radius: 20px; } #nav-wrapper .subs svg { width: 12px; height: 12px; margin-right: 3px; margin-top: -1px; } #nav-wrapper .subs button { flex-grow: 1; margin-top: 0; width: auto; height: auto; padding: 7px 10px; display: flex; align-items: center; justify-content: center; background-color: #000; border-radius: 20px; border: none; margin-right: 23px; color: #fff; outline: none; } #nav-wrapper li.footer a { font-size: 11px; font-weight: 400; color: #000; display: inline-block; padding:0; } #nav-wrapper .footer { display: block; margin-top: 14px; margin-left: 24px; } #nav-wrapper .footer .social { display: flex; margin: 7px 0; } #nav-wrapper .footer .credit { display: block; color: #000; } #nav-wrapper .footer .developer { color: #000; } } @media screen and (max-width: 800px) { #nav-wrapper .subs { display: flex; margin-left: 15px; margin-top: 10px; } #nav-wrapper .subs a { font-size: 11px; margin-right: 10px; width: auto; height: auto; padding: 7px 10px; margin-top: 0; background-color: #a1362a; color: #fff; border-radius: 20px; } #nav-wrapper .subs svg { width: 12px; height: 12px; margin-right: 3px; margin-top: -1px; } #nav-wrapper .subs button { flex-grow: 1; margin-top: 0; width: auto; height: auto; padding: 7px 10px; display: flex; align-items: center; justify-content: center; background-color: #000; border-radius: 20px; border: none; margin-right: 23px; color: #fff; outline: none; } #nav-wrapper li.footer a { font-size: 11px; font-weight: 400; color: #000; display: inline-block; padding:0; } #nav-wrapper .footer { display: block; margin-top: 14px; margin-left: 15px; } #nav-wrapper .footer .social { display: flex; margin: 7px 0; } #nav-wrapper .footer .credit { display: block; color: #000; } #nav-wrapper .footer .developer { color: #000; } } .kotak9 { fill: #fff; margin-top: -4px; display:none } @media screen and (max-width: 800px) { .kotak9 { fill: #fff; margin-top: -4px; display: block; } } /*POPULAR POST By DizzyTech - www.dizzycloud.my.id*/ .popular-posts {width: 100%;border-radius: 0px 0px 7px 7px;background: #fff;border-left: 1px solid #dadada;border-right: 1px solid #dadada;border-bottom: 1px solid #dadada} .PopularPosts ul li:hover{background: #3333330f;} .popular-posts ul li a {} .popular-posts ul li a:hover {} .PopularPosts h2 {border-radius: 7px 7px 0px 0px;text-indent: 20px;margin-bottom: 0px;border: 1px solid #dadada;width: 100%;padding-bottom: 15px;background: #fff;padding-top: 15px;font:400 14px 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue', Arial, sans-serif;} .PopularPosts h2 span {margin-left:16px} .PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {margin: 0 0;padding: 0 0;list-style:none;border:none;outline:none;} .PopularPosts .widget-content ul {margin: 0;list-style:none;counter-reset:num;} .PopularPosts .widget-content ul li img {display: block;width: 70px;height: 70px;float: left;border-radius: 3px 25px;} .PopularPosts .widget-content ul li {margin: 0;counter-increment: num;position: relative;border-bottom: 1px dashed #dadada} .PopularPosts ul li:last-child {margin-bottom: 0px;} .PopularPosts ul li .item-thumbnail-only::after, .PopularPosts ul li .item-content::after, .PopularPosts ul li > a::after {background: #efefef;} .PopularPosts .item-title {line-height: 1.6;margin-right: 8px;min-height: 40px;font-weight: 500;} .PopularPosts .item-thumbnail {float: left;margin-right: 8px;} .PopularPosts .item-snippet {line-height: 1.6em;margin-top: 8px;opacity: 0.925;} .PopularPosts ul li > a {font-weight: bold; font-size: 14px;} .PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {margin-left: 15px;margin-bottom: 9px; margin-top: 5px;} .PopularPosts ul li > a {display: block;padding: 8px 20px;font-size: 15px;font-weight: 400;min-height: 45px;} .PopularPosts h2 svg {margin-left: 15px;float: left;display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat!important;content: '';} .PopularPosts ul li:before { content: counter(num) !important; counter-increment: igniplexPopular; display: flex; align-items: center; justify-content: center; background-color: #1a73e8; position: absolute; top: 10px; left: 5px; color: #fff; z-index: 1; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 100px; font-family: arial } /* igniplex search */ .igniplexSearch{ position:absolute; right:40px; top:0px; bottom:0px; } .igniplexSearch svg{ width:24px; height:24px; } .igniplexSearch svg path{ fill:#fff; } .igniplexSearch .search .input { background-color:#fff; color:#4b4f56; padding:0px; width:0px; height:30px; border-radius:25px; vertical-align:bottom; top:9px; right:10px; position:relative; transition:all .3s ease; outline: none; border:none; } .igniplexSearch .search .icon{ position:absolute; top:8px; right:8px; border-radius:25px; padding: 4px; transition:all .5s ease; cursor: pointer; } .igniplexSearch .search .icon .open{ display:block; } .igniplexSearch .search .icon .close{ display:none; } .igniplexSearch .search .check:checked ~ .input, .igniplexSearch .search .input:focus{ padding:0px 40px 0px 15px; width:calc(1011px - 115px); } .igniplexSearch .search .check:checked ~ .icon .open{ display:none; } .igniplexSearch .search .check:checked ~ .icon .close{ display:block; position:relative; right:2px; z-index: 6; } .igniplexSearch .search .check:checked ~ label:hover{ background-color:transparent !important; } .igniplexSearch .search .check:checked ~ .icon > svg path{ fill:#000; } @media screen and (max-width: 600px) { .igniplexSearch .search .check:checked ~ .input, .igniplexSearch .search .input:focus { width: calc(100vw - 115px); z-index: 2; } } @media screen and (max-width: 1130px) { .igniplexSearch .search .check:checked ~ .input, .igniplexSearch .search .input:focus { width: calc(100vw - 115px); z-index: 2; } } @media only screen and (max-width: 480px) { .FeaturedPost .image { width: 100%; max-width: 100%; border-radius: 7px 7px 0px 0px; height: 265px; } .FeaturedPost .post-summary h3 { width: 96%; top: 255px; font-size: 16px; } .FeaturedPost .post-summary { height: 330px; } } /* igniplex footer */ #igniplexFooter{ background-color: #263238; background: #263238 url(https://3.bp.blogspot.com/-jlcKIZCfrDQ/WtzDK-6gopI/AAAAAAAABbM/G_i_u9ObEzUORoYivnCX0RJ-j3_AY3aNwCLcBGAs/s320/footer-arik.png); color:#ffffff; margin-top:20px; } #igniplexFooter a{ color:#fff; } #igniplexFooter a:hover{ color:#fff; } #igniplexFooter .title{ background-color:transparent; background-size:20px; color:#fff; margin-bottom:15px; border-bottom:1px dashed rgba(255,255,255,.35); padding-bottom:10px; font-size: 15px; } #igniplexFooter .footer-inner{ display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; align-items:flex-start; justify-content:space-between; max-width:calc(1130px + 60px); margin:auto; } #igniplexFooter .footer-inner .section{ width:100%; } #igniplexFooter .footer-inner .section .widget{ margin:20px; } #igniplexFooter .footer-inner .section .widget:not(:first-child){ margin-top:40px; } #footer .widget .widget-content{ padding:10px; } #igniplexFooter .widget .title svg path{ fill:#ffeb3b; } #igniplexFooter .attribution{ font-size:.85rem; display:block; padding:15px 30px; margin:auto; border-top:1px solid rgba(0,0,0,.25); background:#263238; } #igniplexFooter .attribution .left{ display:inline-block; } #igniplexFooter .attribution .right{ float:right; } .widget .title svg{ width:14px; height:14px; margin-right:3px; } #igniplexFooter li { list-style: none; } #igniplexFooter li svg { width: 17px; height: 17px; margin-right: 7px; fill: #fff; } #igniplexFooter ul { margin: 0; } @media screen and (max-width: 640px) { #igniplexFooter .footer-inner { display: block; padding: 1px; } } /*Label by DizzyTech - www.dizzycloud.my.id*/ .list-label-widget-content ul li a { font-size: .85rem; color: #fff; white-space: nowrap; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; text-align: center; flex-grow: 1; padding: 1px 5px; } div.Label{border-radius: 0px 0px 7px 7px;background: #fff;border: 1px solid #dadada;} div.Label h2 {border-radius: 7px 7px 0px 0px;padding: 15px 0;text-indent: 20px;width: 100%;border-bottom: 1px dotted #dadada;margin-bottom: 5px;} .Label h2 svg {float: left;margin-left: 15px; display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat !important;content: '';} .widget:hover h2 > svg {animation: rubberBand 1s;} @keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}} .widget-content.list-label-widget-content { padding: 12px; } .nexlab { background-color: rgba(0,0,0,.25); color:#fff; height: 100%; font-size: .85rem; display: flex; align-items: center; border-radius: 0px 3px 3px 0px; transition: all .3s ease; } .nexlab { padding: 0px 7px; } /* komen style */ iframe#comment-editor { padding: 15px 20px; border-radius: 15px; width: calc(100% - 40px); background-color: #fff; } .header h1.title { } .lazy {animation: ignielShine 1.5s linear infinite;-moz-animation: ignielShine 1.5s linear infinite;/*-webkit-animation: ignielShine 1.5s linear infinite;*/-o-animation: ignielShine 1.5s linear infinite;background: #f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.78) 20%,rgba(255,255,255,0) 30%);background-size: 800px 104px;} .Night .lazy{background:#252931 linear-gradient(to right,rgba(255,255,255,0) 5%,rgb(49,54,64) 20%,rgba(255,255,255,0) 30%);background-size:800px 104px} @keyframes ignielShine{0%{background-position:-468px 0}100%{background-position:468px 0}}@-webkit-keyframes ignielShine{0%{background-position:-468px 0}100%{background-position:468px 0}}@-moz-keyframes ignielShine{0%{background-position:-468px 0}100%{background-position:468px 0}}@keyframes ignielZoom{0%{transform:scale(0)}100%{transform:scale(1)}}@-webkit-keyframes ignielZoom{0%{transform:scale(0)}100%{transform:scale(1)}}@-moz-keyframes ignielZoom{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes ignielFade{from{opacity:0}to{opacity:1}}@-webkit-keyframes ignielFade{from{opacity:0}to{opacity:1}}@-moz-keyframes ignielFade{from{opacity:0}to{opacity:1}}@keyframes ignielGradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-webkit-keyframes ignielGradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes ignielGradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes ignielWobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}@-webkit-keyframes ignielWobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}@-moz-keyframes ignielWobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}@keyframes ignielShine{0%{background-position:-468px 0}100%{background-position:468px 0}} #share svg { margin-top: 8px; } ]]> >"; position: absolute; bottom: 18px; z-index: 999; right: 80px; color: #999; font-size: 12px; } body#layout #wrapper, body#layout #header-wrapper, body#layout #footer-container, body#layout #footer-widget-container { margin: 0 0; padding: 0 20px; } body#layout #footer-container { padding-bottom: 20px; } body#layout #cssmenu { position: relative; height: 33px; display: block; padding: 20px; margin: 8px 0; width: 500px; font-size: 14px; color: #fff; background: #bbbbbb; font-weight: bold; float: right; border: 1px solid #8e8e8e; } body#layout #cssmenu ul, body#layout #footer-navmenu ul { display: none; } body#layout #cssmenu::after { content: "Menu navigasi harus diedit melalui Edit HTML"; color: #fff; position: absolute; top: 30px; left: 20px; visibility: visible; } body#layout .post-container { padding: 0 15px 0 0; } body#layout .sidebar-container { padding: 0 0 0 0; } body#layout #searchfs, body#layout .latest-post-title, body#layout .section h4 { display: none; } body#layout div.section { background: transparent; margin: 0px 0px 15px 0px; padding: 0px; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body#layout .sidebar-sticky::before { content: "Widget Sidebar (Sticky)"; } body#layout .sidebar::before { content: "Widget Sidebar"; } body#layout .above-post-widget::before { content: "Widget di Atas Post (Hanya Homepage)"; } body#layout .Blog::before { content: "Posting Blog"; margin-bottom: 8px; } body#layout .bellow-header-widget::before { content: "Widget di Bawah Header/Menu Navigasi"; } body#layout #footer-widget-container::before { content: "Widget di Atas Footer"; } body#layout .sidebar-sticky::before, body#layout .sidebar::before, body#layout .above-post-widget::before, body#layout .Blog::before, body#layout .bellow-header-widget::before, body#layout #footer-widget-container::before { padding: 5px 10px; display: block; font-size: 14px; color: #fff; background: #bbbbbb; border: 1px solid #8e8e8e; font-weight: bold; } body#layout .add_widget, body#layout .widget-content { padding: 12px; } body#layout .add_widget a { margin-left: 0px; font-size: 14px; } body#layout div.layout-title { font-size: 14px; } body#layout div.layout-widget-description { font-size: 12px; } body#layout .editlink { color: #FFFFFF !important; background: #bbbbbb; border-radius: 15px; padding: 4px 6px; } body#layout #footer-wrapper { position: relative; background: #fff; height: 40px; border: 1px solid #ddd; } body#layout #footer-wrapper::after { content:"Footer"; color:#999; position:absolute; top:12px; } body#layout #footer-navmenu { position: relative; display: block; padding:0; font-size: 14px; color: #fff; background: #bbbbbb; border: 1px solid #8e8e8e; font-weight: bold; margin: 0 20px 8px; height: 50px; } body#layout #footer-navmenu::after { content: "Menu navigasi harus diedit melalui Edit HTML"; color: #fff; position: absolute; top: 17px; left: 20px; visibility: visible; } ]]>

 

BerandaHome &nbsp;›&nbsp;
BerandaHome &nbsp;›&nbsp;

()

Edit Ditulis olehWritten By Komentar Komentar Comment 1 Comment Comments Tambah Komentar Komentar Add Comment 1 Comment Comments

Subscribe Our Newsletter

Blog yang membahas fakta unik, dunia hiburan, tips blogging, tutorial, android dan tentunya saling berbagi pengalaman dari masing-masing penulis.

<ul> <li><svg viewbox='0 0 24 24'> <path d='M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z'></path> </svg><a href='#'>About</a></li> <li><svg viewbox='0 0 24 24'> <path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z'></path> </svg><a href='h#'>Contact</a></li> <li><svg viewbox='0 0 24 24'> <path d='M12,1A5,5 0 0,0 7,6V8H6A2,2 0 0,0 4,10V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V10A2,2 0 0,0 18,8H17V6A5,5 0 0,0 12,1M12,2.9C13.71,2.9 15.1,4.29 15.1,6V8H8.9V6C8.9,4.29 10.29,2.9 12,2.9M11,11H13V15H11V11M11,17H13V19H11V17Z'></path> </svg><a href='#'>Privacy Policy</a></li> <li><svg viewbox='0 0 24 24'> <path d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M13,17H11V15H13V17M13,13H11V7H13V13Z'></path> </svg><a href='#'>Disclaimer</a></li> </ul>

<ul> <li><svg viewbox='0 0 24 24'> <path fill="currentColor" d="M19,10C19,11.38 16.88,12.5 15.5,12.5C14.12,12.5 12.75,11.38 12.75,10H11.25C11.25,11.38 9.88,12.5 8.5,12.5C7.12,12.5 5,11.38 5,10H4.25C4.09,10.64 4,11.31 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12C20,11.31 19.91,10.64 19.75,10H19M12,4C9.04,4 6.45,5.61 5.07,8H18.93C17.55,5.61 14.96,4 12,4M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z" /></path></svg><a href='#'>Off Topik</a></li> <li><svg viewbox='0 0 24 24'> <path fill="currentColor" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z" /></path></svg><a href='#'>Redesign</a></li> <li><svg viewbox='0 0 24 24'> <path fill="currentColor" d="M17.45,15.18L22,7.31V19L22,21H2V3H4V15.54L9.5,6L16,9.78L20.24,2.45L21.97,3.45L16.74,12.5L10.23,8.75L4.31,19H6.57L10.96,11.44L17.45,15.18Z" /> </path></svg><a href='#'>Traffic</a></li> <li><svg viewbox='0 0 24 24'> <path fill="currentColor" d="M3,5V19H22V5H3M5,7H20V11H5V7M5,17V13H9V17H5M11,17V13H20V17H11Z" /> </path></svg><a href='#'>Info Iklan</a></li> </ul>

Copyright © 2020
</div>