@media (max-width:1300px) {
:root {
--autopad: 20px;
}
}
@media (max-width:1200px) {
:root {
--autopad: 20px;
} .top-logo {
margin-right: auto!important;
}
.toggle-menu {
display: flex;
}
.top-menu {
background: var(--color1);
position: absolute;
top: 100%;
padding: 10px 15px;
width: 300px;
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
display: none;
border-bottom-left-radius: var(--bradius);
border-bottom-right-radius: var(--bradius);
border-top: 2px solid var(--color2);
z-index: 99;
}
.top-menu::-webkit-scrollbar {
display: none;
}
.top-menu:hover::-webkit-scrollbar {
display: block;
}
.top-menu ul {
flex-direction: column;
}
.top-menu > ul > li {
border-bottom: 1px solid #ffffff20;
}
.top-menu ul li:last-child {
border-bottom: none;
}
.top-menu > ul > li:has(.children),
.top-menu > ul > li:has(.sub-menu) {
padding-right: 0;
}
.top-menu > ul > li > .children,
.top-menu > ul > li > .sub-menu {
position: relative;
border: none;
padding: 5px 0 0 10px;
width: 100%;
}
.top-menu > ul > li > span {
top: 6px;
transform: none; 
}
}
@media (max-width:1000px) {
:root {
--maxwidth: 728px;
--autopad: calc((100% - var(--maxwidth)) / 2);
} .top-header .socmed {
display: none;
} .konten-slider {
max-width: var(--maxwidth);
width: auto;
} .benefit {
grid-template-columns: repeat(2, 1fr)!important;
} .hiw {
grid-template-columns: 100%!important;
}
.hiw ._item {
flex-direction: row;
}
.hiw ._border {
margin: 0 20px 0 20px!important;
}
.hiw ._pigura {
width: 200px;
height: 200px;
}
.hiw ._content {
text-align: left;
}
#pricing ._paket {
grid-template-columns: repeat(2, 1fr)!important;
}
#pricing ._paket ._item {
align-self: normal;
}
#pricing ._paket ._item._more {
display: flex;
}
#footer {
grid-template-columns: repeat(2, 1fr)!important;
} .grid._res {
grid-template-columns: repeat(2, 1fr)!important;
} .container.two-column {
flex-direction: column;
}
.container.two-column ._col1 {
width: 100%;
position: unset;
top: unset;
height: auto;
}
#sidebar {
position: fixed;
top: 0 !important;
z-index: 999;
width: 379px;
padding: 20px; 
background: var(--colorlight);
border-right: 1px solid var(--colorborder);
height: 100vh;
transition: .3s;
overflow: auto;
}
#sidebar._right {
right: -380px;
}
#sidebar._left {
left: -380px;
}
#sidebar._right.active {
right: 0;
}
#sidebar._left.active {
left: 0;
}
#sidebar .side-close {
display: inline-flex;
} .galeri-featured .ofc,
.single-content ._featured {
height: 400px;
}
}
@media (max-width:780px) {
:root {
--autopad: 20px;
}
}
@media (max-width:700px) {
:root {
--maxwidth: 380px;
--autopad: calc((100% - var(--maxwidth)) / 2);
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.5em;
}
.container {
padding: 50px var(--autopad);
}
.container > ._title h2 {
font-size: 2em;
} .top-header, #header._sticky .top-header, .search-bttn, .contact-bttn span {
display: none!important;
}
#header .bttn {
width: 46px;
height: 40px;
padding: 0;
}
.header {
height: 80px;
gap: 20px!important;
}
.top-logo {
margin-right: 0!important;
}
.top-logo .logo-web {
max-height: 60px;
}
.contact-bttn i {
display: block!important;
}
.top-logo p {
display: none;
} .konten-slider {
top: 80px;
}
.konten-slider h2 {
font-size: 2em;
}
.slider-item {
height: 600px!important;
}
#topslider .owl-nav {
top: calc(50% + 40px);
} #about {
flex-direction: column;
}
#about ._img {
flex-basis: 100%;
} .benefit {
grid-template-columns: 100%!important;
} .grid._res {
grid-template-columns: 100%!important;
} .list._res .loop {
flex-direction: column;
}
.list._res .loop ._pigura {
width: 100%;
height: 250px;
}
.list._res .loop ._content {
width: 100%;
} .hiw ._item {
flex-direction: column;
}
.hiw ._content {
margin-top: 10px!important;
text-align: center;
} #testimonial ._title {
text-align: center;
}
#testimonial ._title h2 span {
align-self: center!important;
}
#testimonial ._title h2:after {
margin: 10px auto;
}
.testimonial .owl-nav {
display: none;
} #pricing ._paket {
grid-template-columns: 100%!important;
}
#pricing ._paket ._item._more {
display: none;
} #footer {
grid-template-columns: 100%!important;
}
#contact {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 0;    
} .galeri-featured .ofc,
.single-content ._featured {
height: 300px;
} .single-content .pricing {
flex-direction: column;
align-items: flex-start!important;
gap: 15px!important;
} .comment-form {
grid-template-columns: 100%;
}
.comment-notes, .comment-form-comment, .comment-form-cookies-consent, .form-submit {
grid-column: unset;
}
}
@media (max-width:420px) {
:root {
--autopad: 20px;
} .top-menu {
width: 100%;
left: 0;
right: 0;
border-radius: 0;
max-height: 400px;
}
}