@media screen and (max-width:1360px) {
:root {
--autopad: 30px;
}
} @media screen and (max-width:1240px) {
#header {
grid-template-columns: auto 30px 90px;
gap: 10px;
} .headmenu {
position: relative;
order: 3;
}
.naviku {
background: rgba(0, 0, 0, .7);
padding: 5px 15px;
position: absolute;
top: 100%;
right: 0;
min-width: 220px;
border-radius: var(--bradius);
max-height: 380px;
overflow: auto;
display: none;
}
.naviku::-webkit-scrollbar-track {
background: none;
}
.naviku::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: var(--bradius);
}
.naviku::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.naviku ul,
.toggleMenu {
display: block
}
.naviku>li {
float: none;
text-align: right;
padding: 0;
}
.naviku ul {
width: 100%
}
.naviku li li .parent {
background-image: url(//www.oketheme.com/wp-content/themes/oketheme/assets/css/img/downArrow.png);
background-repeat: no-repeat
}
.naviku li li.hover ul,
.naviku>li.hover>ul {
position: static
}
.naviku li ul:before {
content: none
}
.naviku li ul {
padding: 0
} #hero._theme {
flex-direction: column;
gap: 60px;
padding-bottom: 170px;
}
#hero._theme ._content {
text-align: center;
align-items: center;
max-width: 800px;
}
#hero._theme ._start {
justify-content: center;
}
#hero._theme ._content.fixed ._action ._ghost {
display: none;
}
} @media screen and (max-width:1024px) {
#hero._theme ._content.fixed ._pricing {
display: none;
} #headline ._visual {
display: none;
} #about ._content {
flex-direction: column;
gap: 30px;
}
#about ._sidebar {
width: 100%;
}
#pricing > ._content._three {
gap: 0;
margin: 0 -10px;
}
#pricing > ._content._three ._card {
padding: 20px;
}
#license .grid {
grid-template-columns: repeat(2, 1fr);
}
} @media screen and (max-width:900px) { #hero._home {
min-height: unset;
}
#hero h1 {
font-size: 3.3em;
}
#hero._theme ._price b {
font-size: 2.5em;
}
section.container > ._header ._title,
#cta ._content > ._header ._title {
font-size: 2.3em;
} .group-card,
.loop.grid {
grid-template-columns: repeat(2, 1fr);
} #persona > ._content {
grid-template-columns: repeat(2, 1fr);
}
#persona > ._content ._card:last-child {
grid-column: span 2;
} #showcase > ._content {
grid-template-columns: repeat(2, 1fr);
} #features ._content ul {
grid-template-columns: repeat(2, 1fr);
} #pricing > ._content {
flex-direction: column;
gap: 30px!important;
margin: 0!important;
align-items: center;
}
#pricing ._card {
padding: 30px!important;
}
#pricing ._card._popular {
transform: none;
}
#pricing ._card._popular:hover {
transform: translateY(-5px);
} #faq.container {
flex-direction: column;
}
#faq ._header {
width: 100%;
position: unset;
} #support ._visual {
display: none;
}
#support:before {
display: block;
} #footer .grid {
grid-template-columns: repeat(2, 1fr);
}
#footer .grid .footbarwidget:nth-child(3) {
grid-column: span 2;
}
.copyright {
flex-direction: column;
gap: 10px;
text-align: center;
} .theme-grid .card-cover {
width: 50%;
} .single.container .column-right,
#intro._pw img {
display: none;
}
.hero._pw {
padding: 140px var(--autopad) 100px;
}
.hero._pw ._header {
margin-bottom: 0;
}
#intro._pw {
padding-top: 50px;
} .card-service.grid, #service-wrap.container {
grid-template-columns: 100%;
}
.card-service img {
float: left;
margin: 0 15px 5px 0;
}
.sidewrap {
position: inherit;
}
.sidebar.detail-service {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
border-radius: 0;
border: none;
border-top: 1px solid var(--colorborder);
box-shadow: 0 10px 40px 0 rgb(33 150 243 / 14%), 0 15px 60px 0 rgb(33 150 243 / 10%);
z-index: 4;
}
.sidebar.detail-service h3 {
font-size: 1.1em;
}
#show-rincian {
display: block;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.mh {
display: none;
}
#testi-page .card {
width: calc(50% - 10px);
}
} @media screen and (max-width:640px) {
:root {
--autopad: 20px;
}
#hero._theme ._content.fixed h2 a {
font-size: 1.3em;
}
#hero._theme ._content.fixed .bttn {
padding: 10px 12px;
font-size: .9em;
}
#headline .group-card ._card h3 {
font-size: 2em;
}
.container {
padding: 50px 20px;
}
.hero ._action {
flex-direction: column;
}
.trust {
grid-template-columns: 100%;
}
#headline ._rating {
position: unset;
flex-direction: row;
align-items: center;
width: auto;
padding: 15px;
justify-content: center;
gap: 10px;
align-self: center;
flex-wrap: wrap;
}
#showcase ._more {
display: none;
}
section.container > ._header._left:has(._more) {
padding: 0;
}
.group-card,
#persona > ._content,
#showcase > ._content,
#footer .grid,
.loop.grid {
grid-template-columns: 100%;
}
#persona > ._content ._card:last-child,
#footer .grid .footbarwidget:nth-child(3) {
grid-column: span 1;
}
#testimonial ._rating {
flex-wrap: wrap;
border-radius: var(--bradius);
padding: 15px;
}
#cta {
padding: 0;
}
#cta ._content {
padding: 50px 30px;
top: unset;
border-radius: 0;
}
.theme-header {
flex-wrap: wrap;
gap: 10px 20px;
}
.theme-header #dev-select,
.theme-header ._ghost {
margin: unset!important;
}
.theme-grid .card-cover {
width: 100%;
}
#hero ._preview {
max-width: 400px;
width: auto;
height: 460px;
background-image: linear-gradient(to top, var(--colordark), #444);
padding: 10px;
border-radius: 20px;
margin-bottom: 30px;
box-shadow: 0px 1px 10px #36a2eb54;
}
#hero ._preview .browser{
display: flex;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 30px;
background: #333;
border: none;
}
#hero ._preview .browser ._bar {
background: #444;
}
.vert {
left: 0;
top: 0;
width: 100%;
height: auto;
}
.vert .simply-scroll-clip {
height: 410px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
#hero ._preview ._rating {
right: -10px;
width: 86px;
}
#hero ._hint ._text,
#hero ._hint svg {
display: none;
}
#hero ._hint {
bottom: -50px;
left: unset;
right: -20px;
background-image: url(//www.oketheme.com/wp-content/themes/oketheme/images/pointer2.png);
width: 147px;
height: 111px;
}
.trust._full {
grid-template-columns: repeat(2, 1fr);
}
.trust._full ._item {
justify-content: flex-start;
}
#pw.card::after {
opacity: .05;
}
#video ._content {
height: 300px;
}
#license .grid,
#membership .grid {
grid-template-columns: 100%;
}
#license ._free {
grid-column: span 1;
}
#testi-page .card {
width: 100%;
}
} @media screen and (max-width:480px) {
.hero ._badge {
font-size: .7em;
}
#about .group-card,
#features ._content ul {
grid-template-columns: 100%;
}
#about .group-card ._card:first-child {
grid-column: span 1;
}
.author-box {
grid-template-columns: 100%;
}
.author-box h3 {
grid-column: span 1;
}
.author-box img, .headsearch {
display: none!important;
}
#header {
display: flex;
padding: 20px;
justify-content: space-between;
gap: 20px;
}
.card._list ._pigura {
display: none;
}
}