:root {
--color1: #36A2EB;
--color2: #4BC0C0;
--color3: #FF5C26;
--colorborder: #e7effb;
--colorbg: #F9FCFF;
--colortext: #555;
--colordark: #333333;
--maxwidth: 1200px;
--bradius: 10px;
--autopad: calc((100% - var(--maxwidth)) / 2);
} body {
font-family: Poppins;
font-size: 16px;
line-height: 1.75em;
color: var(--colortext);
background: #FFF;
margin: 0;
}
*,
:after,
:before {
box-sizing: border-box;
}
ul,
li {
margin: 0;
padding: 0;
} a{
color: var(--color1);
transition: .5s;
}
a:hover {
color: var(--color3);
}
a:active,
a:hover,
a:link,
a:visited {
text-decoration: none;
} h1 {
font-size: 1.6em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
h5 {
font-size: 1em;
}
h1,
h2,
h3,
h4,
h5 {
margin: 10px 0;
font-weight: 600;
line-height: initial;
color: var(--colordark);
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
margin-top: 0;
} input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit
}
input,
select,
textarea {
padding: .5em 1em;
outline: 0;
background: #FFF;
border: 1px solid var(--colorborder);
border-radius: var(--bradius);
box-shadow: 0 2px 0 0 rgba(0,0,0,.027);
}
.bttn,
.button-primary,
.form-submit input,
button {
cursor: pointer;
padding: .5em 1.4em;
background: var(--color1);
border: 0;
outline: 0;
color: #FFF;
transition: .5s;
border-radius: 30px;
display: inline-block;
}
.bttn:hover,
.button-primary:hover,
.form-submit input:hover,
button:hover {
color: #FFF;
background: var(--color3);
transform: translateY(-2px);
}
.bttn:focus {
color: #FFF;
}
input[type=text]:focus,
select:focus,
textarea:focus {
background: #FCFCFC;
}
textarea::placeholder,
input::placeholder {
color: #AAA;
} blockquote {
font-size: 110%;
width: 95%;
margin: 20px auto;
font-style: italic;
padding: 10px 40px;
border: 1px solid var(--colorborder);
position: relative;
background: var(--colorbg);
border-radius: var(--bradius);
}
blockquote::before {
font-family: arial, sans-serif;
content: "\201C";
color: var(--color1);
font-size: 6em;
position: absolute;
left: 0;
top: 15px;
}
blockquote::after {
content: '';
}
code {
background: var(--colordark);
color: var(--colorborder);
padding: 20px;
display: block;
border-radius: var(--bradius);
} .wp-caption,
img,
img.alignnone,
p img {
max-width: 100%;
}
img {
height: auto;
}
a img {
border: none;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
img.aligncenter {
display: block;
margin: 10px auto;
}
img.alignright {
display: inline;
margin: 0 0 5px 5px;
}
img.alignleft {
display: inline;
margin: 0 5px 5px 0;
}
.wp-caption img {
margin: 0;
padding: 0;
border: none;
}
.wp-caption p.wp-caption-text {
font-style: italic;
font-size: .8em;
padding: 0;
background: #ffffff90;
margin: 0;
text-align: center;
}
.wp-caption.aligncenter {
display: block;
margin: 10px auto;
}
.wp-caption.alignleft {
float: left;
margin: 5px 10px 5px 0;
}
.wp-caption.alignright {
float: right;
margin: 5px 0 5px 10px;
} @keyframes blinker {
50% {
opacity: 0;
}
}
.blink {
animation: blinker 1s linear infinite;
} @keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(-50px)
}
80% {
transform: translateX(10px)
}
100% {
opacity: 1;
transform: translateX(0px)
}
} @keyframes button-callout {
0% {
opacity: 0
}
40% {
opacity: 0;
transform: translateX(100%) perspective(50em) rotateY(50deg)
}
to {
opacity: 1;
visibility: visible
}
}
.callout {
animation: button-callout 1s ease-in-out;
opacity: 1;
visibility: visible;
} ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #F5F5F5;
}
::-webkit-scrollbar-thumb {
background: #E7E7E7;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color1);
}
body ::-webkit-scrollbar {
width: 6px;
height: 6px;
} .small {
font-size: .8em!important;
}
.medium {
font-size: .9em!important;
}
.big {
font-size: 1.4em!important;
line-height: 1.2;
}
.jumbo {
font-size: 2.7em!important;
line-height: 1.2;
}
.hidden {
font-size: 0;
}
.bgreen {
background: var(--color2);
}
.borange {
background: var(--color3);
}
.borange:hover {
background: var(--color1);
}
.tblue {
color: var(--color1);
}
.tgreen {
color: var(--color2);
}
.torange {
color: var(--color3);
}
.tgrey {
color: #CCCCCC;
}
.twhite {
color: #FFF!important;
}
.error,
.tred {
color: red
}
.stabilo {
border-radius: .5em 0 1em 0;
padding: 0 5px;
background-image: linear-gradient(
-100deg,
rgba(255, 224, 0, 0.3),
rgba(255, 224, 0, 0.7) 95%,
rgba(255, 224, 0, 0.1)
);
font-style: normal;
}
.stabilo2 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='42' preserveAspectRatio='none' viewBox='0 0 480 42'%3E%3Cpath fill='%23FFE200' fill-opacity='.75' d='m.7884025 41.3449275c15.8171024-1.6206809 71.8777185-.9529412 87.8950374-1.5331327 16.0173191-.5801915 83.3901661-.745318 100.1082431-.667414 16.718076.0779039 83.089842-.0805484 99.607702.4720956s171.593663-4.1777204 188.411848-.5026041c3.203464.64141 4.604979-37.03709852 1.301407-37.67784118-16.217535-3.4897587-170.292256 1.04456951-186.710008.30189599s-84.391249-.1001373-101.509758.0139905c-17.11851.1141278-84.191033.7506573-101.2094341 1.7162471-17.0184014.9655898-47.6903594-.51449033-88.09525389.58732435-.90097419.38473091-.7007577 37.29511244.20021649 37.28943844z'/%3E%3C/svg%3E")
bottom center/97% 78% no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='479' height='47' preserveAspectRatio='none' viewBox='0 0 479 47'%3E%3Cpath fill='%23FFE200' fill-opacity='.3' d='m478.156709 8.7824162c-15.838938 1.2871448-71.877674-.56274795-87.900678-.3203145-16.023003.24243345-83.384536-1.01313476-100.097964-1.44357365-16.713429-.43043889-83.073982-1.67157136-99.579885-2.57252834-16.505903-.90095697-171.7612979-2.11020331-188.38083741-3.47061103-1.44382456 9.18867382-1.72962966 27.64863472-1.88448384 37.65056312 49.37498245 2.5658616 109.46343725.852584 186.67624025 3.6352676s84.372323 1.8796999 101.489075 2.126551 84.185321 1.0246833 101.215168.4179614 47.672574 1.5201394 88.086209 1.2703448c.906745-.365732 1.278032-37.28033554.377156-37.2936604z'/%3E%3C/svg%3E")
top left/96% 100% no-repeat;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
padding: 5px 5px 0;
font-style: normal;
} .info,
.notice,
.notis,
.sukses,
.warning {
width: 100%;
padding: 15px 20px;
background: var(--colorbg);
border: 1px solid var(--colorborder);
overflow: hidden;
}
.notice,.notis {
background: #FFFFEC;
border-color: #FFB973;
color: #FF8000;
}
.warning {
background: #ffe2e2;
border-color: #f7b1b1;
color: red;
}
.sukses {
background: #D9F4DB;
border-color: #4CAF50;
color: #4CAF50;
} .latin {
font-size: 130%;
font-weight: 500;
}
.glyphicon,
[class*=el-icon-] {
font-size: 90%;
margin-right: 5px
}
.rounded {
border-radius: var(--bradius);
}
.circle {
border-radius: 50%;
}
.nomargin {
margin: 0 !important;
}
.nomargin-top {
margin-top: 0 !important;
}
.nomargin-bottom {
margin-bottom: 0 !important;
}
.center {
text-align: center;
}
.coret {
text-decoration: line-through;
} .flex-container {
display: flex;
gap: 20px;
}
.flex-container.column {
flex-direction: column;
} .grid-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 20px;
}
.grid-container.two-col {
grid-template-columns: repeat(2, 1fr);
}
.grid-container.three-col {
grid-template-columns: repeat(3, 1fr);
}
.grid-container.four-col {
grid-template-columns: repeat(4, 1fr);
} .row {
display: flex;
flex-wrap: wrap;
}
.justify-center {
justify-content: center;
}
.align-items-center {
align-items: center;
} .headline {
margin: 20px auto;
}
.headline h2 {
font-size: 3em;
color: var(--color1);
line-height: 1.1em;
margin-top: 10px;
}
.headline h3 {
font-size: 1.4em;
}
.headline p {
font-size: 1.1em;
}
.headline h2 .latin {
color: var(--color3);
} .titleline {
display: table;
white-space: nowrap;
font-size: 1.7em;
text-align: center;
margin: 20px auto 50px;
width: 95%;
}
.titleline::before {
right: 20px;
}
.titleline::after {
left: 20px;
}
.titleline::before,
.titleline::after {
border-top: 5px dotted var(--colorborder);
content: "";
display: table-cell;
position: relative;
top: 0.7em;
width: 45%;
} .card {
background: #fff;
box-shadow: 0 3px 9px rgba(43, 135, 218, .15);
padding: 30px;
transition: all .5s ease;
}
.card.card-trans {
background: transparent;
box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent;
}
.card.card-small {
padding: 18px;
}
.card.card-vsmall {
padding: 8px;
}
.card.card-nopad {
padding: 0;
}
.card:hover {
box-shadow: 0 10px 40px 0 rgb(33 150 243 / 14%), 0 15px 60px 0 rgb(33 150 243 / 10%);
}
.card img {
display: block;
}  #header {
padding: 20px var(--autopad);
position: absolute;
width: 100%;
top: 0;
z-index: 2;
grid-template-columns: 270px auto 30px;
gap: 20px;
display: grid;
color: #DDD;
}
#header>div {
display: flex;
align-items: center;
}
.headlogo a {
font-size: 250%;
color: #DDD;
text-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(0, 0, 0, .05)
}
.headlogo p {
margin: 0;
font-size: 110%
}
.headmenu {
font-size: 90%;
text-transform: uppercase;
justify-self: end;
} .toggleMenu {
display: none;
color: #FFF;
cursor: pointer;
padding: 5px 10px
}
.toggleMenu:hover,
.naviku a:hover {
color: #FFF9;
}
.naviku>li {
list-style: none;
text-align: left;
float: left;
padding: 15px 10px;
}
.naviku a {
padding: 5px 10px;
color: #FFF;
}
.naviku:after {
display: table;
clear: both;
}
.naviku>li>a {
display: block
}
.naviku ul {
list-style: none;
width: 200px
}
.naviku li {
position: relative
}
.naviku>li>.parent {
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/downArrow.png);
padding-right: 25px;
background-repeat: no-repeat;
background-position: right
}
.naviku>li.hover>.parent {
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/upArrow.png);
}
.naviku li ul {
position: absolute;
text-transform: none;
padding: 10px;
background: rgba(0, 0, 0, .7);
border-radius: 8px;
left: calc(100% /2 - 105px);
top: 100%;
display: none;
}
.naviku li ul::before {
position: absolute;
content: "";
width: 0;
height: 0;
bottom: 100%;
left: calc(100% /2 - 5px);
border-width: 0 10px 10px;
border-color: transparent transparent rgba(0, 0, 0, .7) transparent;
border-style: solid;
}
.naviku>li.hover>ul {
display: block
}
.naviku li li a {
display: block;
padding: 5px 10px
} .headsearch {
position: relative;
justify-content: center;
}
.headsearch i {
cursor: pointer;
}
.headsearch form {
display: none;
position: absolute;
right: 15px;
top: 100%;
background: rgba(0, 0, 0, .7);
padding: 15px;
border-radius: var(--bradius);
border-top-right-radius: 0;
width: 320px;
}
.headsearch form::before {
position: absolute;
content: "";
width: 0;
height: 0;
bottom: 100%;
right: 0;
border-width: 0 0 10px 12px;
border-color: transparent transparent rgba(0, 0, 0, .7) transparent;
border-style: solid;
}
.headsearch input {
width: 100%;
box-sizing: border-box;
border: none;
border-bottom: 1px solid #FFFFFF30;
color: #FFF;
background: none;
border-radius: 0;
padding: 0 0 10px;
font-size: .9em;
} #headback {
width: 100%;
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/headback.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
padding: 140px 0;
position: relative;
color: #FFF;
}
#headback::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 150px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 50 1200 150' preserveAspectRatio='none' style='background:transparent;'><path fill='%23FFFFFF' d='M0,100c166.8,0,333.6,80,500.4,80C667.2,180,834,100,1000.8,100c166.8,0,333.6,80,400.4,80V200H0V100z'></path></svg>");
background-size: cover;
} .titleheader {
max-width: 1000px;
padding: 0 20px;
margin: 0 auto;
text-align: center;
font-size: 1.3em;
position: relative;
}
.titleheader a,
.titleheader p,
.titleheader h1,
.titleheader h2 {
color: #FFF;
}
.titleheader h1 {
font-size: 2em;
}
.titleheader button {
margin-top: 10px;
background: none;
border: 2px solid #FFF;
}
.titleheader button:hover {
background: var(--color3);
border-color: var(--color3)
} #slider::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 150px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 50 1200 150' preserveAspectRatio='none' style='background:transparent;'><path fill='%23FFFFFF' d='M0,100c166.8,0,333.6,80,500.4,80C667.2,180,834,100,1000.8,100c166.8,0,333.6,80,400.4,80V200H0V100z'></path></svg>");
background-size: cover;
}
.slide {
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
padding: 140px 0;
} .contain {
width: 100%;
padding: 60px var(--autopad);
margin: 0;
}
.medium-contain {
max-width: 880px;
margin: 20px auto;
padding: 0 30px;
} .foreveryone {
color: #FFF;
background: radial-gradient(circle at top left, var(--color2) 0, var(--color1) 100%);
padding: 40px 50px 50px;
position: relative;
}
.foreveryone h2 {
text-align: center;
color: #FFF;
font-size: 2.5em;
}
.foreveryone:before {
background: var(--color2);
border-radius: 50%;
content: "";
display: block;
width: 80px;
height: 80px;
position: absolute;
right: 20px;
top: -100px;
z-index: -1;
opacity: .07;
transition: .5s;
}
.foreveryone:after {
background: var(--color3);
border-radius: 10%;
content: "";
bottom: -10px;
left: -120px;
display: block;
height: 300px;
width: 300px;
transform: rotate(70deg);
position: absolute;
z-index: -1;
opacity: .07;
transition: .5s;
}
.foreveryone:hover:before,
.foreveryone:hover:after {
transform: rotate(120deg) scale(1.3);
} .newtheme {
padding: 50px 0;
margin-bottom: 60px;
position: relative;
justify-content: space-between;
gap: 0;
}
.newtheme .card:nth-child(1) {
transform: rotate(350deg) translate(30px, -20px) scale(.9);
}
.newtheme .card:nth-child(2) {
transform: rotate(5deg) translate(10px, 30px) scale(.92);
}
.newtheme .card:nth-child(3) {
transform: rotate(350deg) translate(5px, -20px) scale(.9);
}
.newtheme .card:nth-child(4) {
transform: rotate(15deg) translate(-30px, -50px) scale(.87);
}
.newtheme .card:hover {
z-index: 1;
transform: scale(1);
}
.newtheme .card h3 {
position: absolute;
bottom: 18px;
left: 18px;
background: radial-gradient(circle at top left, var(--color2) -20%, var(--color1) 100%);
padding: 5px 15px;
color: #FFF;
margin: 0;
border-top-right-radius: var(--bradius);
border-bottom-left-radius: var(--bradius);
}
.newtheme .card img {
border-radius: var(--bradius);
}
.newtheme:after {
background: linear-gradient(300deg, transparent 40%, var(--color1));
border-radius: 50%;
content: "";
display: block;
width: 600px;
height: 600px;
position: absolute;
bottom: -140px;
right: 380px;
z-index: -1;
opacity: .07;
} .switches-container {
max-width: 380px;
position: relative;
display: flex;
padding: 5px;
position: relative;
background: var(--colorbg);
border: 1px solid var(--colorborder);
line-height: 3rem;
border-radius: 3rem;
margin: 0 auto;
user-select: none;
}
.switches-container input {
visibility: hidden;
position: absolute;
top: 0;
}
.switches-container label {
width: 50%;
padding: 5px;
margin: 0;
text-align: center;
cursor: pointer;
color: var(--color1);
}
.switch-wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
padding: 5px;
z-index: 3;
transition: transform .5s cubic-bezier(.77, 0, .175, 1); }
.switch {
height: 100%;
}
.switch div {
width: 100%;
padding: 5px;
text-align: center;
opacity: 0;
display: block;
color: #FFF;
transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
will-change: opacity;
position: absolute;
background: var(--color1);
border-radius: 3rem;
top: 5px;
left: 0;
}
.switches-container input:nth-of-type(1):checked~.switch-wrapper {
transform: translateX(0%);
}
.switches-container input:nth-of-type(2):checked~.switch-wrapper {
transform: translateX(calc(100% - 10px));
}
.switches-container input:nth-of-type(1):checked~.switch-wrapper .switch div:nth-of-type(1) {
opacity: 1;
}
.switches-container input:nth-of-type(2):checked~.switch-wrapper .switch div:nth-of-type(2) {
opacity: 1;
background: var(--color2);
} .price-wrap {
max-width: 840px;
margin: 80px auto;
text-align: center;
gap: 50px;
position: relative;
}
.price-wrap:before {
background: var(--color1);
border-radius: 30%;
top: 40%;
left: -160px;
content: "";
display: block;
width: 300px;
height: 300px;
position: absolute;
z-index: -1;
opacity: .07;
transform: rotate(20deg);
transition: .5s;
}
.price-wrap:after {
background: var(--color2);
border-radius: 50%;
content: "";
display: block;
width: 100px;
height: 100px;
position: absolute;
right: -40px;
top: -40px;
z-index: -1;
opacity: .07;
transition: .5s;
}
.price-wrap:hover:before,
.price-wrap:hover:after {
transform: scale(1.5) rotate(70deg);
}
.price-wrap .card {
display: flex;
flex-direction: column;
align-self: center;
}
.price-wrap .card:hover {
transform: translateY(-5px);
}
.price-wrap .card.populer {
transform: scale(1.1);
position: relative;
overflow: hidden;
margin-left: 20px;
}
.price-wrap .card.populer::after {
content: 'Most Popular';
position: absolute;
right: -75px;
padding: 0 50px;
top: 28px;
width: 250px;
height: 30px;
line-height: 30px;
transform: rotate(40deg);
color: #fff !important;
text-align: center;
background: var(--color3);
font-size: .9em;
}
.price-wrap .card:hover:first-child {
margin-top: -5px;
margin-bottom: 5px;
}
.price-wrap .price {
display: flex;
gap: 5px;
justify-content: center;
margin: 10px 0 30px;
position: relative;
}
.price-wrap .start.price {
margin: 25px 0;
}
.price-wrap .price span:nth-child(2) {
font-size: 2.6em;
font-weight: 700;
line-height: 1.1em;
color: var(--colordark);
}
.price-wrap .price span:last-child {
font-size: .8em;
position: absolute;
bottom: -25px;
}
.price-wrap .start.price:before {
position: absolute;
top: -25px;
left: 0;
width: 100%;
content: 'Harga mulai';
text-align: center;
font-size: .8em;
}
.price-wrap ul li {
list-style: none;
margin: 10px 0;
}
.price-wrap h2 {
position: relative;
margin: 0;
text-transform: uppercase;
}
.price-wrap .bttn {
font-size: 1.2em;
font-weight: 600;
}
.premium-diskon h2:before {
content: 'Diskon 50% Renewal';
position: absolute;
bottom: calc(100% + 13px);
left: 50%;
transform: translateX(-50%);
line-height: 1em;
padding: 10px;
color: #FFF;
background: var(--color3);
font-size: 14px;
border-radius: var(--bradius);
width: 180px;
text-transform: capitalize;
font-weight: 400;
}
.premium-diskon h2:after {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 7px 0 7px;
border-color: var(--color3) transparent transparent transparent;
transform: rotate(0deg);
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
} #pw .card {
position: relative;
overflow: hidden;
}
#pw .card > * {
position: relative;
z-index: 1;
}
#pw .card::after {
content: '';
position: absolute;
bottom: -5%;
right: 10px;
width: 350px;
height: 350px;
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/svg/domain.svg);
background-size: contain;
background-position: center bottom;
background-repeat: no-repeat;
}
#pw .card.populer::before {
content: 'Hot Offers!';
position: absolute;
right: -75px;
padding: 0 50px;
top: 28px;
width: 250px;
height: 30px;
line-height: 30px;
transform: rotate(40deg);
color: #fff !important;
text-align: center;
background: var(--color3);
font-size: .9em;
}
#pw .card:hover {
transform: translateY(-5px);
}
#pw.medium-contain {
position: relative;
}
#pw.medium-contain:before {
background: var(--color2);
border-radius: 50%;
content: "";
display: block;
width: 130px;
height: 130px;
position: absolute;
left: -55px;
bottom: -10%;
z-index: -1;
opacity: .07;
transition: .5s;
}
#pw.medium-contain:after {
background: var(--color1);
border-radius: 50%;
content: "";
top: 86px;
right: -60px;
display: block;
height: 50px;
width: 50px;
transform: rotate(70deg);
position: absolute;
z-index: -1;
opacity: .07;
transition: .5s;
}
#pw.medium-contain:hover:before,
#pw.medium-contain:hover:after {
transform: scale(1.8);
} #testimonial.contain {
grid-template-columns: 50% 50%;
}
#testislider .owl-item {
padding: 40px;
}
#testislider h3 {
margin: 0;
text-transform: capitalize;
}
#testislider .thecomment {
clear: both;
}
#testimoni .komentar {
padding: 15px 20px;
} #support {
background-color: var(--colorbg);
position: relative;
padding-top: 170px !important;
overflow: hidden;
}
#support:before {
content: '';
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 150px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 50 1200 150' preserveAspectRatio='none' style='background:transparent;'><path fill='%23F9FCFF' d='M0,100c166.8,0,333.6,80,500.4,80C667.2,180,834,100,1000.8,100c166.8,0,333.6,80,400.4,80V200H0V100z'></path></svg>");
background-size: cover;
background-color: #FFF;
}
#support:after {
content: '';
position: absolute;
left: 0;
top: 170px;
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/ca.png);
background-repeat: no-repeat;
background-size: contain;
width: 800px;
height: 1000px;
opacity: .04;
}
.support {
padding-right: 40%;
position: relative;
z-index: 1;
}
.support:after {
content: '';
position: absolute;
right: -50px;
top: -100px;
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/ca.png);
background-repeat: no-repeat;
background-size: contain;
width: 500px;
height: 700px;
z-index: -1;
}
.support h2 {
font-size: 2.8em;
margin-bottom: 30px
}
.support ul li {
list-style: circle;
padding: 3px 0;
margin: 5px 10px 5px 30px
} .topfooter {
background: radial-gradient(circle at center center, var(--color2) -10%, var(--color1) 100%);
position: relative;
}
.topfooter::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/bg_footer.png);
opacity: .5;
}
.topfooter .titleheader {
position: relative;
}
#footerwrap {
width: 100%;
background: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/footer-wide.png) center bottom repeat-x #E4F2FC;
position: relative;
padding-bottom: 15px !important;
}
#footerwrap h4 {
color: var(--color1);
font-size: 150%
}
#footerwrap h5 {
font-size: 120%;
margin: 5px 0
}
.footbar {
margin-bottom: 20px;
padding: 20px 0;
position: relative;
color: var(--colordark);
z-index: 1;
}
.footbar a {
color: var(--colordark);
}
.footbar a:hover {
color: var(--color3);
}
.footbar ul li {
padding: 5px 0;
margin-left: 5px;
list-style: none;
}
.copyright {
text-align: center;
color: #FFF;
margin-top: 150px
}
.cloud {
width: 100%;
position: absolute;
top: 0;
left: 0
} .single.contain {
grid-template-columns: 720px auto;
gap: 30px;
}
.sidewrap {
position: sticky;
top: 20px;
height: fit-content;
overflow: auto;
} .wrap-post ul li {
border-bottom: 1px dotted var(--colorborder);
padding: 2px 0;
margin-left: 30px;
list-style-type: circle;
}
.wrap-post h2,
.wrap-post h3 {
margin: 20px 0;
}
.wrap-post img {
border-radius: var(--bradius);
box-shadow: 0 2px 4px 0 rgba(103, 151, 255, .08), 0 8px 20px 0 rgba(103, 151, 255, .1) !important;
}
.wrap-post table, .wrap-post td {
border: 1px solid var(--colorborder);
padding: 10px;
background: var(--colorbg);
vertical-align: top;
}
.wrap-post table ul li {
border-bottom: none;
} .sidebar {
padding: 20px;
background: var(--colorbg);
border: 1px solid var(--colorborder);
border-radius: var(--bradius);
}
.sidebar h4 {
border-bottom: 1px solid var(--colorborder);
color: var(--color1);
padding-bottom: 10px;
font-size: 1.2em;
margin-bottom: 20px;
}
.sidebar ul li {
padding: 5px 0;
list-style-type: none;
border-bottom: 1px dashed var(--colorborder);
}
.sidebar ul li a {
color: var(--colordark);
}
.sidebar ul li a:hover {
color: var(--color3);
}
.sidebar ul li:last-child {
border: none;
}
.list-bank li {
overflow: hidden;
padding: 10px 0 !important;
display: block;
}
.list-bank img {
float: left;
margin-right: 10px;
border-radius: var(--bradius);
border: 1px solid var(--colorborder);
}
.sidebar .history ul li {
padding: 3px 0;
margin: 5px 10px 5px 30px;
}
.sidebar .history {
border-left: 1px dashed #DDD;
margin: 10px 0 0 10px;
}
.sidebar .history li {
margin: 0 10px 10px 14px;
padding: 0 0 0 5px;
border-bottom: none;
list-style-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/dot-grey.png);
}
.sidebar .history li:first-child {
list-style-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/dot-green.png);
} #sidetheme .owl-pagination {
margin-top: 20px;
}
.list-theme {
display: grid;
grid-template-columns: 150px auto;
gap: 20px;
}
.list-theme img {
border-radius: 50%;
border: 1px solid var(--colorborder);
padding: 5px;
}
.list-theme h5 {
font-size: 1.1em;
margin-bottom: -10px !important;
} #faq #accordion,
#faq .ui-widget input,
#faq .ui-widget select,
#faq .ui-widget textarea,
#faq .ui-widget button {
font-family: inherit;
}
#faq .ui-accordion .ui-accordion-header {
border: none;
margin-top: 10px;
background: var(--colorbg);
font-weight: 600;
}
#faq .ui-accordion-header.ui-state-active,
#faq .ui-widget-content .ui-state-active,
#faq .ui-widget-header .ui-state-active,
#faq a.ui-button:active,
#faq .ui-button:active,
#faq .ui-button.ui-state-active:hover {
background: var(--color1);
font-size: 1.3em !important;
}
#faq .ui-widget-content {
border-color: var(--colorborder);
color: inherit;
line-height: 1.7;
}
#faq .ui-widget-content a {
color: var(--color1);
}
#faq .ui-accordion-header {
border-top-right-radius: var(--bradius);
border-top-left-radius: var(--bradius);
}
#faq .ui-accordion-content {
border-bottom-right-radius: var(--bradius);
border-bottom-left-radius: var(--bradius);
}
#faq .ui-corner-all {
border-radius: var(--bradius);
}
#faq .ui-widget-content ul{
margin-left: 20px;
} #theme-wrap {
grid-template-columns: 200px auto;
padding-top: 40px;
gap: 15px;
}
.theme-container .card-cover {
float: left;
width: 30.333%;
margin: 1.5%;
perspective: 1000px;
}
.theme-container .card img {
border-radius: var(--bradius);
}
.theme-container .card {
position: relative;
transform-style: preserve-3d;
}
.theme-container .card h2 {
position: absolute;
bottom: 18px;
left: 18px;
background: radial-gradient(circle at top left, var(--color2) -20%, var(--color1) 100%);
padding: 5px 15px;
color: #FFF;
margin: 0;
border-top-right-radius: var(--bradius);
border-bottom-left-radius: var(--bradius);
font-size: 1.1em;
}
.theme-container .card-cover:hover .card {
transform: rotateY(180deg);
}
.theme-container .card-back {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-image: linear-gradient(to top, var(--colorbg), #FFF);
border-radius: 8px;
padding: 20px;
text-align: center;
place-items: center;
display: flex;
flex-direction: column;
justify-content: center;
transform: rotateY(180deg);
gap: 10px;
}
.theme-container .card-back ._desc {
line-height: 1.5em;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
.theme-container .card-back ._desc p {
margin-top: 0;
}
.theme-container h5 {
margin: 0 10px 20px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--colorborder);
}
.contain.type-taxo {
padding-top: 10px;
}
.theme-container.type-taxo {
padding: 35px;
}
.theme-container.type-taxo .flex-container {
justify-content: space-between;
align-items: center;
}
.theme-container.type-taxo .flex-container > *:last-child {
margin-left: auto;
}
.theme-type {
line-height: 2em;
}
.theme-type a {
display: inline-block;
border: 1px solid  var(--color1);
padding: 2px 10px;
border-radius: 20px;
margin: 2px 0;
}
.theme-type a:hover {
border-color: var(--color3)
}
.themehead .theme-type a {
border-color: #FFF;
color: #FFF;
padding: 2px 15px;
margin-top: 10px;
} .theme-filter {
position: sticky;
top: 20px;
height: fit-content;
}
.theme-filter ul li {
list-style-type: none;
font-size: 90%;
}
.theme-filter label {
cursor: pointer;
} .themeprice {
display: flex;
gap: 3px;
justify-content: center;
color: var(--color3);
}
.themeprice span {
font-size: 1.5em;
font-weight: 700;
line-height: 1.5em;
} #headback.themehead,
#headback.ptohead {
padding-bottom: 250px
} #fitur-extra {
text-align: left;
background: var(--colorbg);
padding: 5px 15px;
margin-top: 5px;
display: none;
}
#fitur-extra._active {
display: inline-block;
}
#show-extra {
margin-left: 5px;
font-size: .9em;
cursor: pointer;
} #preview.contain {
padding-top: 0;
margin-top: -160px;
grid-template-columns: 730px auto;
}
.demoimg {
width: 730px;
height: 498px;
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/laptop.png);
position: relative;
}
.getinfo {
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: flex-end;
}
.topinfo .bttn {
padding: 10px 30px;
font-size: 1.1em;
}
.topinfo .themeprice {
justify-content: flex-start;
font-size: 1.7em;
line-height: 1.7em;
margin-top: 0;
}
.botinfo ul {
margin-left: 20px;
margin-top: 10px;
} .vert {
width: 503px;
height: 320px;
left: 112px;
top: 34px;
border: 2px solid #333;
margin-bottom: 1.5em
}
.vert .simply-scroll-clip {
width: 100%;
height: 316px
}
.pointer {
width: 163px;
height: 115px;
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/pointer.png);
position: absolute;
bottom: 175px;
right: 555px
} .about ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.about li {
list-style: none;
} .ssbox {
max-width: 1020px;
padding: 10px;
margin: 0 auto;
}
.ssbox img {
border-radius: var(--bradius);
}
.ssbox .lSSlideOuter .lSPager.lSGallery li.active,
.ssbox .lSSlideOuter .lSPager.lSGallery li:hover {
border-radius: var(--bradius);
border: 2px solid var(--colorborder);
} .fitur ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 60px;
}
.fitur li {
list-style: none;
}
.fitur img {
border-radius: var(--bradius);
box-shadow: 0 2px 4px 0 rgba(103, 151, 255, .08), 0 8px 20px 0 rgba(103, 151, 255, .1);
margin-bottom: 20px;
width: 100%;
} .videobox {
position: relative;
padding-bottom: 50%;
overflow: hidden;
max-width: 1100px;
margin: 30px auto;
}
.videobox iframe {
position: absolute;
top: 10px;
left: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
border-radius: 5px;
} #countdown {
display: flex;
gap: 10px;
justify-content: center;
margin: 30px auto;
position: relative;
max-width: 420px;
}
#countdown div {
border: 1px solid var(--colorborder);
background-color: var(--colorbg);
padding: 25px 20px 20px;
border-radius: var(--bradius);
display: flex;
flex-direction: column;
align-items: center;
width: 80px;
}
#countdown div span:first-child {
font-size: 2.2em;
font-weight: 700;
}
#countdown:before {
background: var(--color2);
border-radius: 50%;
content: "";
display: block;
width: 150px;
height: 150px;
position: absolute;
right: -150px;
bottom: 40%;
z-index: -1;
opacity: .07;
transition: .5s;
}
#countdown:after {
background: var(--color1);
border-radius: 30%;
top: 40%;
left: -160px;
content: "";
display: block;
width: 150px;
height: 150px;
position: absolute;
z-index: -1;
opacity: .07;
transform: rotate(20deg);
transition: .5s;
}
#countdown:hover:before,
#countdown:hover:after {
transform: scale(1.5) rotate(70deg);
}  .loop .list {
position: relative;
}
.loop .list h2 {
margin-top: 0;
font-size: 1.2em;
}
.loop .list img {
float: left;
margin-right: 15px;
border-radius: var(--bradius);
border: 1px solid var(--colorborder);
}
.loop .list .tipepost {
position: absolute;
top: 0;
left: 0;
padding: 2px 6px;
background: #00000060;
color: #FFF;
border-top-left-radius: var(--bradius);
border-bottom-right-radius: var(--bradius);  font-size: 80%
} .loop.grid-container, .loop.flex-container {
gap: 30px;
}
.loop .card {
overflow: hidden;
position: relative;
}
.loop .card .pigura {
width: calc(100% + 36px);
height: 250px;
overflow: hidden;
margin: -18px -18px 0;
}
.loop .card .pigura img {
object-fit: cover;
height: 100%;
width: 100%;
transition: .5s;
}
.loop .card:hover img {
transform: scale(1.05);
}
.loop .card h2 {
font-size: 1.1em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 10px;
color: var(--color1);
}
.loop .card p {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.loop .card .kategori {
position: absolute;
top: 10px;
left: 10px;
}
.loop .card .kategori a {
display: inline-block;
background: var(--color1);
color: #FFF;
padding: 3px 5px;
border-radius: 4px;
font-size: .8em;
line-height: initial;
}
.loop .card .kategori a:hover {
background: var(--color3);
} .crumbs {
padding-bottom: 10px;
font-size: 80%;
border-bottom: 1px solid var(--colorborder)
} .pagination {
width: 100%;
margin: 30px 0;
text-align: center;
}
.pagination a,
.pagination>.current {
border: 1px solid var(--colorborder);
padding: 5px 10px;
background: var(--colorbg);
margin: 0 2px;
display: inline-block;
min-width: 40px;
text-align: center;
border-radius: 50%;
}
.pagination a:hover,
.pagination>.current {
color: #FFF;
background: var(--color1);
}
.pagination .next.page-numbers,
.pagination .prev.page-numbers {
border-radius: var(--bradius);
} #komentar {
margin-top: 30px;
}
.comments input[type="text"],
.comments textarea {
width: 100%;
}
.comments label {
font-weight: bold;
}
.comments .komentar {
padding: 15px;
position: relative;
overflow: hidden;
}
.comments .comment-respond {
padding: 15px;
background: var(--colorbg);
border-radius: var(--bradius);
border: 1px solid var(--colorborder);
}
.comment .comment-respond {
border: none;
border-radius: 0;
background: none;
}
.comments .comment-reply-title small {
margin-left: 10px;
}
.comment_text li {
list-style-type: none;
overflow: hidden;
margin: 20px 0 0 20px;
border-top-left-radius: var(--bradius);
border-bottom-left-radius: var(--bradius);
border: 1px solid var(--colorborder);
}
.comment_text li li {
border-right: none;
}
.comment_text li li:last-child {
border-bottom-left-radius: 0;
border-bottom: none;
border-right: none;
}
.comment_text .depth-1 {
margin: 20px 0;
background: var(--colorbg);
border-radius: var(--bradius);
}
.comment_text li,
.comment_text li li li {
background: var(--colorbg);
}
.comment_text li li,
.comment_text li li li li {
background: #FFF;
}
.comment_text li li img {
width: 50px;
height: 50px;
} .ratestar {
margin: 5px 0;
}
.ratecount {
position: absolute;
right: 10px;
top: 10px;
font-size: .9em;
text-align: center;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
background: var(--color2);
color: #FFF;
}
.ratecount:first-letter {
font-size: 1.8em;
font-weight: 600;
margin-right: -5px;
}
.rating input[type="radio"] {
margin: 5px;
width: 25px;
height: 25px;
cursor: pointer;
} .avatar {
border-radius: 50%;
float: left;
margin: 0 15px 10px 0;
width: 100px;
height: 100px;
} .scrollup {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/up.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-color: #00000010;
border-radius: 50%;
z-index: 3;
} .shareicon span {
font-size: 35px;
margin: 0;
}
.shareicon a {
border-radius: var(--bradius);
width: 35px;
height: 35px;
display: inline-block;
overflow: hidden;
margin-right: 5px;
} .seo {
font-size: 0;
margin: 0;
padding: 0
} .popup {
max-width: 780px
}
.popup a {
outline: none;
}
.popup ul li {
margin: 10px 0;
border-bottom: 1px solid var(--colorbg);
} #kontak {
max-width: 500px;
}
.kbbm,
.kemail,
.ksms,
.ktelp,
.ktelp2,
.kwa {
background-repeat: no-repeat;
padding-left: 40px;
list-style: none;
line-height: 30px;
vertical-align: middle;
text-align: left
}
.ktelp {
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/telp.png)
}
.ksms {
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/sms.png)
}
.kbbm {
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/bbm.png)
}
.kwa {
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/wa.png)
}
.kemail {
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/email.png)
}
.ktelp2 {
background-image: url(//www.oketheme.com/wp-content/themes/oketheme4.1/images/telp2.png)
} .owl-controls .owl-buttons div {
background: #fffc;
border-radius: 50%;
}
.smallslider .owl-controls .owl-buttons .owl-prev,
.megaslider .owl-controls .owl-buttons .owl-prev {
left: 120px;
}
.smallslider .owl-controls .owl-buttons .owl-next,
.megaslider .owl-controls .owl-buttons .owl-next {
right: 120px;
}
.owl-carousel .owl-buttons .owl-prev {
transition: .5s;
opacity: 0;
}
.owl-carousel:hover .owl-buttons .owl-prev {
left: 40px;
opacity: .5;
}
.owl-carousel .owl-buttons .owl-next {
transition: .5s;
opacity: 0;
}
.owl-carousel:hover .owl-buttons .owl-next {
right: 40px;
opacity: .5;
} .intro-services.contain {
padding-bottom: 0;
}
#service-wrap.contain{
grid-template-columns: 63% 37%;
padding-top: 40px;
}
#no-service {
grid-column: span 2;
}
.card-service>div,.tema-pw>div {
border: 1px solid transparent;
}
.card-service>div.active,.tema-pw>div.active {
border-color: var(--color1);
box-shadow: 0 3px 9px rgba(43, 135, 218, .15);
position: relative;
}
.card-service>div.active:before,.tema-pw>div.active:before {
content: 'Dipilih';
position: absolute;
top: 0;
right: 0;
background: var(--color1);
color: #FFF;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
padding: 2px 10px;
font-size: 80%;
}
.card-service .card {
cursor: pointer;
}
.services input[type='text'],
.services select,
.services textarea {
width: 100%;
margin: 8px 0;
}
.services {
position: relative;
}
.services .info.false {
border-color: red;
position: relative;
}
.services .info.false:before {
content: 'Error';
position: absolute;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.497);
color: #FFF;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
padding: 2px 10px;
font-size: 80%;
}
.services .check {
display: none;
} .services .jscolor {
background-color: #FFF;
color: var(--colortext);
border: 1px solid var(--colorborder);
margin: 8px 5px 8px 0;
border-radius: var(--bradius);
width: 150px;
} .services #domain-exist {
padding: 10px;
border: 1px solid var(--colorborder);
background: #FFF;
border-radius: var(--bradius);
display: grid;
gap: 20px;
grid-template-columns: auto 120px;
}
.services #domain-exist input {
margin: 0;
border: none;
padding: 5px;
font-size: 24px;
box-shadow: none;
}
.services #domain-exist input[type=text]:focus {
background: none;
}
.services #domain-exist button {
border-radius: 5px;
padding: 6px 10px;
}
.services #domain-exist #added {
padding: 5px;
color: #4CAF50;
} .services #wdc-style .input-group {
box-shadow: none;
border-radius: var(--bradius) !important;
margin: 0;
padding: 5px;
border: 1px solid var(--colorborder);
background: #FFF;
}
.services #wdc-style #Search,
.services #wdc-style .input-group .input-group-btn {
border-color: transparent !important;
background: none;
outline: none;
}
.services #wdc-style .large #Search {
height: auto;
}
.services #wdc-style .large button#Submit {
height: auto;
font-size: initial;
padding: .5em 1.1em;
line-height: initial;
text-transform: none;
border-radius: 5px !important;
letter-spacing: normal;
margin: 0;
}
.services #wdc-style .callout {
margin: 15px 0 0;
} .services .tema-pw {
border-radius: var(--bradius);
padding: 15px;
gap: 15px;
background: #FFF;
}
.services .tema-pw>div {
position: relative;
border-radius: var(--bradius);
transition: .5s;
cursor: pointer;
gap: 0;
background: var(--colorborder);
}
.services .tema-pw>div p {
padding: 5px;
position: absolute;
bottom: 0;
width: 100%;
background: #e7effbf0;
font-weight: 600;
margin: 0;
border-bottom-right-radius: var(--bradius);
border-bottom-left-radius: var(--bradius);
}
.services .tema-pw>div.active p{
background: #36a2ebb0;
color: #FFF;
}
.services .tema-pw>div:hover {
box-shadow: 0 3px 9px rgba(43, 135, 218, .15);
border-color: var(--color1);
}
.services .tema-pw img {
max-width: unset;
border-radius: var(--bradius);
}
.services #tema-detail {
margin-top: 20px;
}
.services .list-order li {
display: flex;
justify-content: space-between;
padding: 5px 0;
}
.services .kode-order {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
font-size: 160px;
line-height: 140px;
opacity: 0.04;
color: var(--color1);
cursor: default;
user-select: none;
}
.services .top-invoice {
display: none;
grid-template-columns: 280px auto;
gap: 20px;
border-bottom: 1px solid var(--colorborder);
padding-bottom: 20px;
margin-bottom: 20px;
font-size: .9em;
line-height: 1.5em;
} .detail-service li {
display: flex;
justify-content: space-between;
}
.detail-service #form-button {
margin-top: 10px;
display: flex;
justify-content: space-between;
}
#show-rincian {
display: none;
}
.topline {
border-top: 2px solid var(--colorborder);
padding-top: 5px;
margin-top: 5px;
}
.botline {
border-bottom: 2px solid var(--colorborder);
padding-bottom: 5px;
margin-bottom: 5px;
font-size: 1.2em;
}
.sidebar.promo {
border-style: dashed;
}
.sidebar.true {
border-color: var(--color2);
background: #ebffe9;
position: relative;
}
.sidebar.true:before {
content: 'Promo Aktif';
position: absolute;
top: 0;
right: 0;
background: rgba(14, 180, 111, 0.497);
color: #FFF;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
padding: 2px 10px;
font-size: 80%;
} .hscroll {
white-space: nowrap;
overflow: auto;
}
.hscroll::-webkit-scrollbar {
display: none;
} .bgtrans {
position: relative;
}
.bgtrans > * {
position: relative;
}
.bgtrans:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .7;
background: #000;
}