@charset "UTF-8";

:before,:after,html *{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
.clearfix:after,
.clear{clear: both;display: block;height: 0;width: 100%;float: none !important;}
.clearfix:after{content: '';}
input::-moz-focus-inner { border: 0;padding: 0;}
a{text-decoration: none;outline: 0 !important;}
a:hover{color: inherit;text-decoration: none;}
img{max-width: 100%;vertical-align: top;}
*:focus ,
textarea,
input,
textarea:focus, input:focus{outline: none;border-radius: 0}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none !important;margin: 0;}
input[type=number] {-moz-appearance:textfield !important;}
input::placeholder{ 
color: #cacdc8;
opacity:1;
}
textarea::placeholder{ 
color: #cacdc8;
opacity: 1;
}
::-moz-placeholder {
opacity: 1;
}
.cvr-bg-bf:before,
.cvr-bg-af:after,
.cvr-bg{
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.cvr-bg-bf:before,
.cvr-bg-af:after{
content: '';
display: inline-block;
vertical-align: middle;
}
body{
background: #fff;
color: #344054;
font-size: 16px;
font-family: 'Plus Jakarta Sans';
font-weight:  500;
position: static;
overflow-y:auto
}
body.is-maintenance{
height: 100vh;
overflow: hidden;
}
#shell{
overflow: hidden;
}
.wrapper{
max-width: 1180px;
width: 100%;
margin: 0 auto;
}
.rowflex{
display: flex;
flex-wrap: wrap;
}
.rowflex > *{
flex: 1;
}
.clicked.dropselect.has-search input,
.form-basic .date-field,
.dropselect strong,
.dropdown select,
.form-basic input[type="number"],
.form-basic input[type="text"],
.form-basic input[type="tel"],
.form-basic input[type="email"],
.form-basic input[type="password"],
.form-basic textarea{ -webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border-radius: 5px;
display: block;
width: 100%;
background: #fff;
color: #344054;
border: 1px solid #D5E0DA;
font-size: 14px;
font-family: 'Inter';
font-weight: 400;
height: 50px;
padding: 0 25px;
}
.clicked.dropselect.has-search input:focus,
.form-basic input[type="number"]:focus,
.form-basic input[type="text"]:focus,
.form-basic input[type="tel"]:focus,
.form-basic input[type="email"]:focus,
.form-basic input[type="password"]:focus,
.form-basic textarea:focus{
border: 1px solid #003B7C;
}
.form-basic textarea{
min-height: 135px;
padding: 15px 25px;
resize: vertical;
line-height: 180%;
}
.form-basic form > * {
display: block;
margin-top: 25px;
}
.form-basic form > *:first-child{
margin-top: 0;
}
.form-basic .pass-field{
position: relative;
}
.form-basic .pass-field b{
display: block;
position: absolute;
right: 15px;
top: 12px;
width: 20px;
height: 20px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/melek.svg);
cursor: pointer;
}
.form-basic .pass-field b.merem{
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/merem.svg);
}
.form-basic .fgroup > label{
display: block;
margin-bottom: 8px;
color: #6F7682;
font-size: 12px;
}
.form-basic .fgroup > label sup{
line-height: 100%;
position: relative;
top: 0;
color: #DE2C4F;
}
.format-text img,
.format-text .gallery img{
vertical-align: top;
height: auto !important;
}
.form-basic .gap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.form-basic .gap > *{
flex: calc(50% - 18px);
max-width: calc(50% - 18px);
} .dropselect{
position: relative;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.clicked.dropselect.has-search strong,
.dropselect.has-search input,
.dropselect select{
display:none;
}
.clicked.dropselect.has-search input{
display: block;
}
.dropselect strong{
display: block;
border: 1px solid #D5E0DA;
padding: 0 25px;
height: 50px;
line-height: 50px;
cursor: pointer;
z-index: 2;
position: relative;
}
.dropselect.clicked strong{
border: 1px solid #003B7C;
}
.dropselect.activated strong{
opacity: 1;
}
.dropselect strong:after{
display: block;
position: absolute;
right:13px;
top: 12px;
content: '';
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/arrow-select.svg);
transform: rotate(0deg);
}
.dropselect.clicked strong:after{
transform: rotate(-180deg);
}
.dropselect .scrollbar-inner.scroll-content{
max-height: 200px;
}
.dropselect .dropholder{
list-style: none;
position: absolute;
left: 0;
width: 100%;
opacity: 0;
visibility: hidden;
transition:all 0.1s ease-in;
display: block;
background: #fff;
border-radius: 4px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
margin-top: 0;
}
.dropselect.ontop .dropholder{
bottom: 100%;
margin: 0;
}
.dropselect.clicked .dropholder{
opacity: 1;
visibility: visible;
z-index: 9;
margin-top: 5px;
}
.dropselect.ontop.clicked .dropholder{
margin: 0 0 5px;
}
.dropselect .scrollbar-inner{
padding: 2px 15px;
}
.dropselect .scrollbar-inner > .scroll-element.scroll-y{
width: 2px;
}
.dropselect li{
display:block;
cursor: pointer;
padding: 15px 0;
position: relative;
border-top: 1px solid #E9E8E6;
transition:color 0.2s ease-in;
font-size: 14px;
}
.dropselect li.current:after{
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/drop-checked.svg);
content: '';
top: 15px;
right: 0;
display: block;
position: absolute;
}
.dropselect li.current,
.dropselect li:hover{
color: #1A3561;
}
.dropselect li:first-child{
border: none;
}
.dropselect li.hidden,
.dropselect li.empty{
display: none;
}
.iframe-holder{
position: relative;
padding-bottom: 56.25%; padding-top: 25px;
height: 0;
z-index: 1;
}
.iframe-holder > *{
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.page-pagination{
text-align: center;
margin: 30px 0 0;
}
.page-pagination > *{
display: inline-block;
vertical-align: middle;
color: #344054;
width: 38px;
height: 38px;
line-height: 38px;
font-size: 13px;
font-weight: 600;
background: rgba(102, 112, 133, 0.08);
border-radius: 6px;
transition:all 0.2s ease-in;
font-family: 'Manrope';
margin: 0 1px;
}
.page-pagination > span{
position: relative;
background: #FF6300;
color: #fff;
box-shadow: 0px 2px 4px 0px rgba(102, 112, 133, 0.30);
}
.page-pagination a:hover{
color: #FF6300;
}
.page-pagination i.cvr-bg{
display: inline-block;
width: 7px;
height: 12px;
position: relative;
top: 1px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/arrow-pagi-right.svg);
}
.page-pagination i.cvr-bg.next{
right: 0;
transition:right 0.2s ease-in;
}
.page-pagination a:hover i.cvr-bg.next{
right: -2px;
}
.page-pagination i.cvr-bg.prev{
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/arrow-pagi-left.svg);
left: 0;
transition:left 0.2s ease-in;
}
.page-pagination a:hover i.cvr-bg.prev{
left: -2px;
}
.format-text{
line-height: 180%;
font-size: 16px;
font-weight: 500;
}
.format-text > *{
margin-top: 30px;
}
.format-text > *:first-child{
margin-top: 0;
}
.format-text b,
.format-text strong{
font-weight: 700;
}
.format-text em,
.format-text i:not(.fa){
font-style: italic;
}
.format-text h1,
.format-text h2,
.format-text h3,
.format-text h4,
.format-text h5,
.format-text h6{
color: #003B7C;
font-weight: 500;
font-family: 'Fredoka';
line-height: 120%;
}
.format-text h1{
font-size: 36px;
}
.format-text h2{
font-size: 32px;
}
.format-text h3{
font-size: 24px;
}
.format-text h4{
font-size: 20px;
}
.format-text h5{
font-size: 18px;
}
.format-text h6{
font-size: 14px;
}
.format-text h1 + *,
.format-text h2 + *,
.format-text h3 + *,
.format-text h4 + *,
.format-text h5 + *,
.format-text h6 + *{
margin-top: 15px;
}
.format-text a:not(.button){
color: #FF6300;
}
.format-text a:not(.button):hover{
text-decoration: underline;
}
.format-text ul{
list-style: disc;
padding-left: 22px;
}
.format-text ul li,
.format-text ol li{
padding-bottom: 10px;
}
.format-text ol{
list-style: decimal;
}
.format-text ol{
padding-left: 20px;
}
.format-text sup{
color: #d90000;
position: relative;
top: 0;
line-height: 100%;
}
.format-text blockquote{
font-size: 24px;
font-style: italic;
line-height: 160%;
color: #6F7682;
}
.centered{
text-align: center;
}
.rightned{
text-align: right;
}
.leftned{
text-align: left;
}
.jconfirm .jconfirm-box{
max-width: 340px;
margin: 0 auto;
}
.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title{
font-weight: 600;
font-size: 16px;
color: #3f4e38;
}
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content{
font-size: 14px;
line-height: 160%;
font-weight: 400;
}
.jconfirm .jconfirm-box div.jconfirm-title-c{
padding-bottom: 10px;
}
.jconfirm .jconfirm-box div.jconfirm-content-pane{
margin-bottom: 10px;
}
.button{ -webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border-radius: 4px;
display: inline-block;
color: #fff;
background: #FF6300;
font-family: 'Plus Jakarta Sans';
font-weight: 600;
font-size: 16px;
height: 44px;
line-height: 42px;
padding: 0 24px;
text-align: center;
cursor: pointer;
border: none;
outline: none !important;
transition:all 0.2s ease-in;
}
.button.disabled:hover,
.button.disabled{
cursor: default;
background: #ccc;
color: #fff;
}
.button:active,
.button:focus{
border-radius: 4px;
}
.button.btn-fullwidth{
display: block;
width: 100%;
}
.button.btn-hollow{
background: none;
border: 1px solid #2399B1;
color: #2399B1;
line-height: 42px;
}
.button.btn-hollow:hover{
background: #2399B1;
border: 1px solid #2399B1;
color: #fff;
}
.button.btn-hollow-orange{
background: none;
border: 1px solid #FF6300;
color: #FF6300;
line-height: 42px;
}
.button.btn-hollow-orange:hover{
background: #FF6300;
border: 1px solid #FF6300;
color: #fff;
}
.button:hover{
color: #fff;
background: #2399B1;
border-color: #2399B1;
}
.button.btn-disabled,
.button.btn-disabled:hover{
background: #E9E7EC;
color: #817F85;
cursor: default;
}
.button.has-loading{
position: relative;
overflow: hidden;
}
.button.has-loading.fetching{
color: rgba(0,0,0,0) !important;
cursor: default;
}
.button.has-loading:before{
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.8);
content: '';
z-index: 1;
}
.button.has-loading:after{
display: none;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: calc(50% - 15px);
width: 30px;
height: 30px;
background: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/btn-loading.svg) no-repeat;
content: '';
z-index: 2;
}
.button.has-loading.fetching:after,
.button.has-loading.fetching:before{
display: block;
}
.btn-hide{
display: none !important;
}
.slick-dots{
display: block;
z-index: 2;
width: 100%;
text-align: center;
padding: 0 0 2px;
}
.slick-dots li{
display: inline-block;
vertical-align: middle;
margin: 0 10px;
}
.slick-dots li button{
display: block;
width: 10px;
height: 10px;
cursor: pointer;
border: none;
color: rgba(0,0,0,0);
background: #fff;
padding: 0;
border-radius: 50%;
position: relative;
}
.slick-dots li.slick-active button{
background: #006261;
}
.slick-dots li button:before{
display: block;
position: absolute;
left: -5px;
top: -5px;
width: 20px;
height: 20px;
content: '';
border-radius: 50%;
border: 1px solid #D0D5DD;
}
.page-header{
text-align: center;
margin: 0 0 55px;
}
.crumb{
margin: 0 0 40px;
}
.crumb > *{
display: inline-block;
vertical-align: middle;
color: #98A2B3;
}
.crumb > i{
width: 18px;
height: 19px;
margin: 0 10px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/arrow-right.svg);
position: relative;
top: 2px;
}
.crumb a:hover{
text-decoration: underline;
color: #98A2B3;
}
.page-header h1{
color: #003B7C;
font-size: 32px;
font-family: 'Fredoka';
font-weight: 500;
line-height: 130%;
max-width: 820px;
margin: 0 auto;
}
.page-header .meta{
margin: 10px 0 0;
}
.detail-product .main a.cat,
.page-header .meta > *{
display: inline-block;
vertical-align: middle;
color: #98A2B3;
font-size: 14px;
font-family: 'Inter';
font-weight: 400;
}
.detail-product .main a.cat,
.page-header .meta > a{
color: #6C981F;
font-size: 12px;
font-family: 'Manrope';
font-weight: 600;
height: 26px;
line-height: 26px;
background: #D1F297;
border-radius: 3px;
padding: 0 20px;
margin: 0 10px 0 0;
}
.page-header figure{
display: block;
margin: 50px 0 0;
}
.news-item{
border: 1px solid #D0D5DD;
background: #fff;
border-radius: 12px;
overflow: hidden;
padding: 24px;
}
.news-item figure a{
display: block;
position: relative;
border-radius: 12px;
overflow: hidden;
}
.news-item figure a:before{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 80px 0 0 80px;
border-color: transparent transparent transparent #FF6300;
content: '';
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
}
.news-item figure a:after{
display: block;
position: absolute;
left: 10px;
bottom: 10px;
width: 25px;
height: 24px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/arrow-diag.svg);
z-index: 2;
transition:all 0.2s ease;
}
.news-item:hover figure a:after{
left: 13px;
bottom: 13px;
}
.news-item figure a img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transform: scale(1);
transition:transform 0.2s ease;
}
.news-item:hover figure a img{
transform: scale(1.05);
}
.news-item .caption{
margin: 35px 0 0;
}
.news-item .caption span{
display: block;
line-height: 100%;
font-size: 12px;
color: #667085;
margin: 0 0 20px;
}
.news-item .caption h3{
color: #003B7C;
font-size: 20px;
font-weight: 500;
font-family: 'Fredoka';
line-height: 120%;
margin: 0 0 16px;
}
.news-item .caption h3 a{
color: #003B7C;
transition:color 0.2s ease-in;
}
.news-item .caption h3 a:hover{
color: #FF6300;
}
.news-item .caption .format-text{
font-size: 14px;
color: #667085;
line-height: 160%;
}
.banner{
position: relative;
padding: 160px 0 60px;
text-align: center;
}
.banner:after{
display: block;
position: absolute;
left: 0;
top: 0;
content: '';
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0, 98, 97, 0.80);
}
.banner img{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
object-fit: cover;
}
.banner .wrapper{
position: relative;
z-index: 3;
color: #fff;
}
.banner h1{
font-size: 32px;
font-family: 'Fredoka';
font-weight: 500;
line-height: 120%;
}
.banner .format-text{
max-width: 560px;
margin: 15px auto 0;
line-height: 160%;
}
.acc-item{
background: #FFF;
box-shadow: 0px 8px 32px 0px rgba(11, 49, 94, 0.07);
}
.acc-item .acc-head{
cursor: pointer;
position: relative;
color: #1A3561;
font-size: 20px;
font-weight: 500;
font-family: 'Fredoka';
padding: 16px 24px;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.acc-item .acc-head:after{
display: block;
position: absolute;
right: 24px;
top: 18px;
width: 21px;
height: 20px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/arrow-accord.svg);
}
.acc-item.active .acc-head:after{
transform: rotate(180deg);
}
.acc-item:not(.active) .acc-body{
display: none;
}
.acc-item .acc-body .format-text{
color: #98A2B3;
font-size: 14px;
line-height: 160%;
padding: 16px 24px;
border-top: 1px solid #E3E8EF;
} #top{
border-bottom: 1px solid #DCDCDC;
padding: 15px 0;
position: relative;
z-index: 99;
transition:background 0.3s ease;
background: rgba(255,255,255,1);
}
body.white-head #top{
border: none;
background: none;
position: absolute;
width: 100%;
top: 0;
left: 0;
background: rgba(255,255,255,0);
}
body.white-head #top:hover{
background: #fff;
}
#top .rowflex{
align-items: center;
justify-content: space-between;
max-width: 1352px;
}
#top .logo{
flex: 124px;
max-width: 124px;
}
#top .util{
flex: 220px;
max-width: 220px;
text-align: right;
}
#top .mainmenu{
flex: calc(100% - 400px);
max-width: calc(100% - 400px);
text-align: center;
}
#top .search{
position: absolute;
z-index: 999;
width: 100%;
height: 100%;
background: #fff;
display: block;
left: 0;
top: -100%;
text-align: center;
display: flex;
align-items: center;
transition:top 0.2s ease;
}
body.search-active #top .search{
top: 0;
}
#top .search .form-basic{
flex: 1;
}
#top .search form > *{
display: inline-block;
vertical-align: middle;
margin: 0 5px;
}
#top .search form input{
max-width: 500px;
}
#top .search input{
height: 44px;
}
#top .search label{
color: #1A3561;
font-family: 'Fredoka';
font-size: 20px;
}
#top .search .cls{
display: block;
position: absolute;
right: 80px;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9;
width: 32px;
height: 32px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/close-form.svg);
}
.mainmenu li{
display: inline-block;
vertical-align: middle;
margin: 0 16px;
}
.mainmenu li a{
color: #1A3561;
font-size: 14px;
font-weight: 600;
transition:color 0.2s ease-in;
display: inline-block;
vertical-align: middle;
}
.mainmenu li a div{
display: none;
}
body.white-head #top:not(:hover) .lang b,
body.white-head #top:not(:hover) .mainmenu li a{
color: #fff;
}
body.white-head #top:not(:hover) .prf a,body.white-head  #top:not(:hover) .sch a,
body.white-head #top:not(:hover) .lang b:before,body.white-head  #top:not(:hover) .lang b:after,
body.white-head #top:not(:hover) .mainmenu li b{
filter: brightness(0) invert(1);
}
body.white-head .mainmenu li a:hover,
.mainmenu li:hover > a,
.mainmenu li a:hover{
color: #FF6300;
}
.mainmenu li b{
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/arrow-down.svg);
margin-left: 5px;
transform: rotate(0deg);
transition:transform 0.2s ease;
position: relative;
top: 1px;
}
.mainmenu li:hover b{
transform: rotate(180deg);
}
.menu-product,
.menu-company{
position: absolute;
left: 0;
width: 100%;
background: #fff;
padding: 40px 0;
opacity: 0;
visibility: hidden;
margin: 45px 0 0;
transition:all 0.3s ease;
}
.mainmenu li:hover .menu-product,
.mainmenu li:hover .menu-company{
opacity: 1;
visibility: visible;
}
.menu-product:before,
.menu-company:before{
height: 45px;
content: '';
display: block;
width: 100%;
top: -45px;
left: 0;
position: absolute;
}
.menu-company .rowflex{
justify-content: space-between;
align-items: center;
}
.menu-company figure{
flex: 44.6%;
max-width: 44.6%;
}
.menu-company figure img{
width: 100%;
border-radius: 12px;
}
.menu-company .caption{
flex: 50%;
max-width: 50%;
text-align: left;
}
.menu-company .caption h2{
color: #1A3561;
font-size: 24px;
font-weight: 500;
font-family: 'Fredoka';
margin: 0 0 20px;
}
.menu-company .caption .format-text{
line-height: 160%;
font-size: 14px;
color: #98A2B3;
}
.menu-company ul{
display: flex;
flex-wrap: wrap;
max-width: 630px;
}
.menu-company ul.trio{
max-width: 100%;
}
.menu-company ul li{
flex: 50%;
max-width: 50%;
margin: 20px 0 0 !important;
}
.menu-company ul.trio li{
flex: 33.333333333333333333%;
max-width: 33.333333333333333333%;
}
.menu-company ul li a{
display: block;
}
.menu-company ul li span{
display: inline-block;
width: 100%;
max-width: 225px;
position: relative;
color: #1A3561;
}
.menu-company ul.trio li span{
width: auto;
max-width: 100%;
}
.menu-product .wrapper{
max-width: 1352px;
}
.menu-product .emulate{
display: flex;
flex-wrap: wrap;
margin: 0 -12px;
}
.menu-product .emulate .item{
flex: calc(33.33333333333333333% - 24px);
max-width: calc(33.33333333333333333% - 24px);
margin: 0 12px 44px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu-product figure{
flex: 34.52%;
max-width: 34.52%;
}
.menu-product figure img{
border-radius: 12px;
}
.menu-product .caption{
flex: 65.48%;
max-width: 65.48%;
padding-left: 24px;
text-align: left;
}
.menu-product .caption h3{
color: #1A3561;
font-size: 20px;
font-weight: 500;
font-family: 'Fredoka';
line-height: 120%;
margin: 0 0 8px;
}
.menu-product .caption h3 a{
color: #1A3561;
transition:color 0.2s ease-in;
font-size: 20px;
font-weight: 500;
font-family: 'Fredoka';
}
.menu-product .caption h3 a:hover{
color: #FF6300;
}
.menu-product .caption .format-text{
font-size: 14px;
color: #98A2B3;
line-height: 160%;
}
.menu-product .caption > a{
font-family: 'Manrope';
font-size: 14px;
font-weight: 600;
display: inline-block;
margin: 18px 0 0;
color: #1A3561;
}
#top .util > *{
display: inline-block;
vertical-align: middle;
}
#top .lang{
position: relative;
text-align: left;
}
#top .lang b{
color: #1A3561;
font-weight: 600;
font-size: 14px;
display: block;
position: relative;
padding: 0 25px;
line-height: 100%;
cursor: pointer;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#top .lang b:before,
#top .lang b:after{
display: block;
position: absolute;
width: 18px;
height: 18px;
top: -1px;
}
#top .lang b:before{
left: 0;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/globe.svg);
}
#top .lang b:after{
right: 0;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/arrow-down.svg);
transform: rotate(0deg);
transition:transform 0.2s ease-in;
}
#top .lang.active b:after{
transform: rotate(180deg);
}
#top .lang ul{
display: block;
position: absolute;
left: 0;
width: 130px;
background: #fff;
border-radius: 2px;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.13);
font-size: 12px;
overflow: hidden;
margin: 12px 0 0;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
}
#top .lang.active ul{
opacity: 1;
visibility: visible;
margin: 8px 0 0;
}
#top .lang li span, .lang li a{
color: #1A3561;
display: block;
padding: 10px 12px;
transition: all 0.2s ease-in;
font-size: 14px;
border-bottom: 1px dashed #EAECF0;
}
#top .lang li a:hover{
color: #FF6300;
}
#top .lang li span{
display: block;
position: relative;
}
#top .lang li span:after{
display: block;
position: absolute;
right: 16px;
top: 11px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/drop-checked.svg);
width: 18px;
height: 18px;
}
#top .sch{
margin: 0 20px;
}
#top .prf a.cvr-bg,
#top .sch a{
display: block;
width: 32px;
height: 32px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/search.svg);
}
#top .prf a.cvr-bg{
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/user.svg);
}
#top .prf{
position: relative;
}
#top .prf a.cvr-bg + a{
display: block;
position: absolute;
right: 0;
font-size: 14px;
padding: 5px;
color: #1A3561;
font-weight: 600;
padding: 8px 15px;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.13);
border-radius: 2px;
line-height: 100%;
margin: 10px 0 0;
transition:color 0.2s ease-in;
display: none;
background: #fff;
filter: none !important;
}
#top .prf a.cvr-bg + a:hover{
color: #FF6300;
} #bottom .cta{
position: relative;
padding: 90px 0;
text-align: center;
color: #fff;
overflow: hidden;
}
#bottom .cta:after{
z-index: 2;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
background: rgba(0, 98, 97, 0.80);
}
#bottom .cta .bg{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;
position: absolute;
left: 0;
top: 0;
}
#bottom .cta .wrapper{
position: relative;
z-index: 3;
}
#bottom .cta .pusher{
max-width: 640px;
margin: 0 auto;
}
#bottom .cta h2{
font-family: 'Fredoka';
font-weight: 500;
font-size: 36px;
line-height: 110%;
margin: 0 0 15px;
}
#bottom .cta .format-text{
line-height: 160%;
}
#bottom .cta .button{
margin: 25px 0 0;
}
#bottom .brand{
padding: 32px 0 0;
}
#bottom .brand .border{
background: rgba(0, 59, 124, 0.10);
margin: 22px 0 0;
width: 100%;
height: 1px;
}
#bottom .brand .logo{
float: left;
}
#bottom .brand .hotline{
float: right;
color: #2399B1;
font-size: 24px;
font-weight: 700;
line-height: 160%;
position: relative;
top: 30px;
}
#bottom .brand .hotline a{
color: #FF6300;
}
#bottom .brand .hotline a:hover{
text-decoration: underline;
}
#bottom .footer-widget {
padding: 40px 0;
}
.footer-widget .rowflex{
justify-content: space-between;
}
.footer-widget .widget-about{
flex: 21%;
max-width: 21%;
font-size: 14px;
color: #667085;
}
.widget-about .caption{
line-height: 160%;
}
.widget-about .caption > *:not(:first-child){
margin: 20px 0 0;
}
.widget-about .caption a{
color: #667085;
}
.widget-about .caption a:hover{
text-decoration: underline;
}
.widget-menu li.bold > a,
.widget-about .caption h2{
color: #2399B1;
font-family: 'Fredoka';
font-size: 18px;
font-weight: 500;
}
.widget-about .social{
margin: 20px 0 0;
}
.social a{
display: inline-block;
vertical-align: middle;
width: 36px;
height: 36px;
margin-right: 8px;
opacity: 1;
transition:opacity 0.2s ease-in;
}
.social a:hover{
opacity: .7;
}
.social a.fb{
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/fb.svg);
}
.social a.ig{
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/ig.svg);
}
.social a.tw{
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/tw.svg);
}
.social a.yb{
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/yb.svg);
}
.social a.in{
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/in.svg);
}
.footer-widget .widget-menu{
flex: 59%;
max-width: 59%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer-widget .widget-menu ul{
flex: 28.5%;
max-width: 28.5%;
}
.widget-menu li{
display: block;
margin: 13px 0 0;
line-height: 160%;
}
.widget-menu li:first-child{
margin: 0;
}
.widget-menu li a{
font-size: 14px;
color: #667085;
}
.widget-menu li a:hover{
text-decoration: underline;
}
.tribute{
padding: 0 0 35px;
font-size: 14px;
}
.tribute .border{
background: rgba(0, 59, 124, 0.10);
margin: 0 0 35px;
height: 1px;
width: 100%;
}
.tribute ul{
float: right;
}
.tribute ul li{
display: inline-block;
vertical-align: middle;
margin: 0 0 0 24px;
}
.tribute ul li a{
color: #6F7682;
}
.tribute ul li a:hover{
text-decoration: underline;
}
.tribute .copy{
float: left;
color: #6F7682;
line-height: 130%;
} .detail-news,
.inner-news{
padding: 55px 0 95px;
}
.inner-product .filter,
.inner-news .filter{
background: #F3FAF6;
padding: 32px 0 22px;
position: relative;
z-index: 3;
}
.inner-product .filter .rowflex,
.inner-news .filter .rowflex{
justify-content: space-between;
}
.inner-news .filter .rowflex > *{
flex: 22.5%;
max-width: 22.5%;
margin: 0 0 10px;
}
.inner-product .filter .rowflex > *{
flex: 28.5%;
max-width: 28.5%;
margin: 0 0 10px;
}
.inner-product .filter .sch,
.inner-news .filter .sch{
position: relative;
}
.inner-product .filter .sch input,
.inner-news .filter .sch input{
padding-right: 50px;
}
.inner-product .filter .sch button,
.inner-news .filter .sch button{
position: absolute;
right: 15px;
top: 14px;
padding: 0;
margin: 0;
border: none;
background: none;
cursor: pointer;
}
.inner-product .filter .sch button i,
.inner-news .filter .sch button i{
width: 24px;
height: 24px;
display: block;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/search.svg);
}
.inner-news .list{
margin: 95px 0 0;
}
.detail-news .related .rowflex,
.inner-news .list .rowflex{
margin: 0 -10px;
}
.detail-news .related .news-item,
.inner-news .list .news-item{
flex: calc(33.333333333333333% - 20px);
max-width: calc(33.333333333333333% - 20px);
margin: 0 10px 50px;
}
.detail-news .banner {
margin: 0 0 80px;
padding: 0;
height: 700px;
}
.detail-news .banner img{
width: 100%;
height: 100%;
display: block;
position: relative;
left: auto;
top: auto;
}
.detail-news .banner:after{
display: none;
}
.detail-news .content .format-text{
padding: 0 0 50px;
border-bottom: 1px solid #D0D5DD;
}
.error404 .detail-news .content .format-text{
border: none;
}
.detail-news .related{
margin: 40px 0 0;
}
.detail-news .related .hentry{
margin: 0 0 40px;
color: #6F7682;
line-height: 150%;
}
.detail-news .related .hentry h2{
color: #21345F;
font-size: 32px;
font-family: 'Fredoka';
font-weight: 500;
margin: 0 0 10px;
line-height: 110%;
} .inner-cert,
.inner-partner{
padding: 55px 0 0;
}
.inner-cert .list,
.inner-partner .list{
padding: 55px 0 150px;
background: #f3faf6;
}
.inner-partner .list .wrapper{
max-width: 870px;
text-align: center;
}
.inner-partner .list h2{
color: #003B7C;
font-family: 'Fredoka';
font-size: 24px;
font-weight: 500;
margin: 0 0 50px;
}
.inner-partner .list .item{
margin: 60px 0 0;
}
.inner-partner .list .item:first-child{
margin: 0;
}
.inner-cert .list .rowflex,
.inner-partner .list .rowflex{
margin: 0 -16px;
justify-content: center;
}
.inner-cert .list .rowflex{
justify-content: flex-start;
}
.inner-cert .list .item,
.inner-partner .list .rowflex figure{
flex: calc(33.333333333333333% - 32px);
max-width: calc(33.333333333333333% - 32px);
margin: 0 16px 32px;
}
.inner-partner .list .rowflex figure span{
display: block;
background: #fff;
border-radius: 5px;
padding: 40px 10px 20px;
}
.inner-partner .list figcaption{
display: block;
text-align: center;
color: #006261;
font-family: 'Fredoka';
font-weight: 500;
line-height: 130%;
max-width: 240px;
margin: 18px auto 0;
}
.inner-cert .list .item{
margin-bottom: 55px;
}
.inner-cert .item figure{
padding: 25px;
background: #fff;
box-shadow: 0px 4px 32px 0px rgba(0, 59, 124, 0.07);
margin: 0 0 25px;
}
.inner-cert .item figure a{
display: block;
position: relative;
}
.inner-cert .item figure a:after{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
content: '';
background: #FF6300;
opacity: 0;
transition:opacity 0.2s ease-in;
}
.inner-cert .item figure:hover a:after{
opacity: 0.6;
}
.inner-cert .item figure span{
display: block;
position: absolute;
left: 0;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
text-align: center;
z-index: 2;
opacity: 0;
transition:opacity 0.2s ease-in;
}
.inner-cert .item figure:hover span{
opacity: 1;
}
.inner-cert .item figure span i{
display: inline-block;
width: 33px;
height: 33px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/search2.svg);
}
.inner-cert .item h3{
color: #667085;
line-height: 160%;
text-transform: uppercase;
}
.inner-cert .item small{
display: block;
line-height: 100%;
color: #98A2B3;
font-size: 14px;
margin: 8px 0 0;
}
.inner-board{
padding: 55px 0 0;
}
.inner-board .section{
padding: 80px 0;
}
.inner-board .section:nth-child(even){
padding: 110px 0 130px;
background: #F3F9F9;
}
.inner-board .section h2{
font-size: 32px;
font-weight: 500;
font-family: 'Fredoka';
color: #003B7C;
margin: 0 0 50px;
}
.inner-board .section .item{
justify-content: space-between;
margin: 45px 0 0;
padding: 0 45px 35px;
align-items: flex-end;
position: relative;
}
.inner-board .section .item:after{
content: '';
z-index: 1;
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: calc(100% - 60px );
background: #FFF;
box-shadow: 0px 4px 32px 0px rgba(0, 59, 124, 0.07);
}
.inner-board .section .item:first-child{
margin: 0;
}
.inner-board .section .item figure{
flex: 30.092%;
max-width: 30.092%;
position: relative;
z-index: 2;
}
.inner-board .section .item .caption{
flex: 65.5%;
max-width: 65.5%;
position: relative;
z-index: 2;
padding: 0 0 30px;
}
.inner-board .section .item h3{
color: #006261;
font-size: 32px;
font-family: 'Fredoka';
font-weight: 500;
line-height: 120%;
margin: 0 0 15px;
}
.inner-board .section .item span{
display: block;
line-height: 100%;
color: #607167;
font-size: 20px;
}
.inner-board .section .item .format-text{
color: #607167;
font-size: 14px;
line-height: 160%;
margin: 15px 0 0;
max-width: 705px;
} .inner-heri{
padding: 55px 0 0;
}
.inner-heri .content{
padding: 0 0 120px;
}
.inner-heri .content .format-text{
font-size: 14px;
}
.inner-heri .video{
margin: 60px 0 0;
}
.inner-heri .video a{
display: block;
position: relative;
}
.inner-heri .video a:after{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
z-index: 1;
background: linear-gradient(to bottom,  rgba(8,116,67,0.3) 0%,rgba(8,116,67,0.05) 100%); }
.inner-heri .video span{
display: block;
position: absolute;
left: 0;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
z-index: 2;
text-align: center;
color: #fff;
font-family: 'Inter';
font-weight: 600;
font-size: 14px;
}
.inner-com .intro .video i,
.inner-heri .video span i{
display: block;
width: 102px;
height: 102px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/play.svg);
margin: 0 auto 20px;
}
.inner-heri .timeline{
padding: 130px 0;
background: #F3F9F9;
}
.inner-heri .timeline .item{
position: relative;
padding: 0 0 35px 68px;
}
.inner-heri .timeline .item:before,
.inner-heri .timeline .item:after{
display: block;
position: absolute;
content: '';
}
.inner-heri .timeline .item:before{
width: 50px;
height: 50px;
background: #ff6300;
border: 5px solid #f7cdaf;
border-radius: 50%;
left: 0;
top: 0;
}
.inner-heri .timeline .item:after{
top: 50px;
left: 25px;
height: 100%;
background: #f7cdaf;
width: 1px;
}
.inner-heri .timeline .item:last-child:after{
display: none;
}
.inner-heri .timeline .layer{
background: #fff;
padding: 35px 40px 40px;
}
.inner-heri .timeline h3{
color: #006261;
font-size: 20px;
font-weight: 500;
font-family: 'Fredoka';
margin: 0 0 15px;
line-height: 120%;
}
.inner-heri .timeline .format-text{
color: #98A2B3;
font-size: 14px;
line-height: 160%;
max-width: 1020px;
}
.inner-vismis{
padding: 55px 0 70px;
}
.inner-vismis .hentry{
margin: 0 0 70px;
font-family: 'Fredoka';
font-weight: 500;
}
.inner-vismis .hentry span{
display: block;
font-size: 20px;
line-height: 100%;
margin: 0 0 25px;
}
.inner-vismis .hentry h2{
color: #003B7C;
font-size: 32px;
line-height: 120%;
}
.inner-vismis .layer{
position: relative;
border-radius: 12px;
overflow: hidden;
padding: 65px 50px 65px 115px;
}
.inner-vismis .layer img{
position: absolute;
display: block;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
left: 0;
top: 0;
}
.inner-vismis .layer:after{
display: block;
position: absolute;
z-index: 2;
content: '';
width: 100%;
height: 100%;
left: 0;
top: 0; background: linear-gradient(to right,  rgba(0,98,97,0.75) 0%,rgba(0,98,97,0.75) 64%,rgba(0,98,97,0.3) 100%); }
.inner-vismis .layer .format-text{
color: #fff;
max-width: 510px;
position: relative;
z-index: 3;
}
.inner-vismis .layer .format-text h1,
.inner-vismis .layer .format-text h2,
.inner-vismis .layer .format-text h3,
.inner-vismis .layer .format-text h4,
.inner-vismis .layer .format-text h5,
.inner-vismis .layer .format-text h6{
color: #fff;
}
.inner-vismis .layer .format-text li{
padding-bottom: 0;
} .inner-res,
.inner-quali,
.inner-facil{
padding: 55px 0 120px;
}
.inner-facil .content .format-text h1,
.inner-facil .content .format-text h2,
.inner-facil .content .format-text h3,
.inner-facil .content .format-text h4,
.inner-facil .content .format-text h5,
.inner-facil .content .format-text h6{
color: #21345F;
}
.inner-res .content .format-text,
.inner-facil .content .format-text{
max-width: 675px;
color: #667085;
line-height: 160%;
}
.inner-facil .list{
margin: 85px 0 0;
}
.inner-facil .list .rowflex{
margin: 0 -9px;
}
.inner-facil .list figure{
flex:  calc(25% - 18px);
max-width:  calc(25% - 18px);
margin: 0 9px 60px;
text-align: center;
color: #000;
}
.inner-facil .list figure figcaption{
display: block;
margin: 15px 0 0;
}
.inner-facil .list figure img{
border-radius: 12px;
}
.inner-quali .list .item{
margin: 100px 0 0;
}
.inner-quali .list  .item:first-child{
margin: 0;
}
.inner-res .copy .rowflex,
.inner-quali .list .item:not(.item-center){
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.inner-quali .list .item:not(.item-center) figure{
flex: 40.34%;
max-width: 40.34%;
order: 2;
}
.inner-res .copy figure{
flex: 44.07%;
max-width: 44.07%;
}
.inner-res .copy figure,
.inner-quali .list .item.item-left figure{
order: 1;
}
.inner-res .copy .caption,
.inner-quali .list .item:not(.item-center) .caption{
flex: 48.5%;
max-width: 48.5%;
order: 1;
}
.inner-res .copy .caption,
.inner-quali .list .item.item-left .caption{
order: 2;
}
.inner-contact .submis h2,
.inner-res .copy h2,
.inner-quali .list .item h2{
color: #21345F;
font-size: 24px;
font-weight: 500;
font-family: 'Fredoka';
margin: 0 0 15px;
line-height: 130%;
}
.inner-contact .submis .format-text,
.inner-res .copy .format-text,
.inner-quali .list .item .format-text{
color: #667085;
line-height: 160%;
}
.inner-quali .list .item figure img{
border-radius: 12px;
}
.inner-quali .list .item.item-center{
position: relative;
padding: 135px 30px;
border-radius: 12px;
overflow: hidden;
}
.inner-quali .list .item.item-center:after{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
z-index: 2;
background: #006261;
opacity: .5;
}
.inner-quali .list .item.item-center figure{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.inner-quali .list .item.item-center figure img{
width: 100%;
height: 100%;
object-fit: cover;
}
.inner-quali .list .item.item-center .caption{
max-width: 575px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 3;
}
.inner-quali .list .item.item-center h2,
.inner-quali .list .item.item-center .format-text{
color: #fff;
}
.inner-res > *:not(:first-child) + .content{
margin-top: 80px;
}
.inner-res .content .rowflex{
margin: 100px -10px 0;
}
.inner-res .content .rowflex figure{
flex: calc(33.333333333333333333% - 20px);
max-width: calc(33.333333333333333333% - 20px);
margin: 0 10px 20px;
}
.inner-res .content .rowflex img{
border-radius: 12px;
}
.inner-res .quote{
padding: 100px 0 160px;
background: #F3F9F9;
margin: 80px 0 0;
}
.inner-res .quote .rowflex{
justify-content: space-between;
}
.inner-res .quote h2{
flex: 40.34%;
max-width: 40.34%;
color: #FF6300;
font-family: 'Fredoka';
font-size: 24px;
line-height: 160%;
font-weight: 500;
}
.inner-res .quote .format-text{
flex: 48.5%;
max-width: 48.5%;
color: #667085;
font-size: 20px;
line-height: 160%;
}
.inner-res .copy{
margin: 120px 0 0;
} .inner-contact {
padding: 0 0 100px;
}
.inner-contact .loc{
margin: 100px 0 0;
}
.inner-contact .loc .wrapper,
.inner-contact .submis .wrapper{
max-width: 1080px;
}
.inner-contact .rowflex{
justify-content: space-between;
background: #FFF;
box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.07);
}
.inner-contact .loc .map{
flex: 49.8%;
max-width: 49.8%;
position: relative;
}
.inner-contact .loc .map iframe{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.inner-contact .loc .addr{
flex: 44.2%;
max-width: 44.2%;
padding: 60px 60px 100px 0;
}
.inner-contact .loc h2{
font-size: 24px;
font-weight: 500;
font-family: 'Fredoka';
color: #1A3561;
line-height: 120%;
margin: 0 0 25px;
}
.inner-contact .loc hr{
height: 1px;
border-top:1px solid #D8D8D8;
}
.inner-contact .loc .txt {
line-height: 160%;
color: #6F7682;
}
.inner-contact .loc .txt a{
color: #6F7682;
}
.inner-contact .loc .txt a:hover{
text-decoration: underline;
}
.inner-contact .loc .txt > *:not(:first-child){
margin-top: 16px;
}
.inner-contact .loc .txt > h3 + *{
margin-top: 8px !important;
}
.inner-contact .loc .txt > h3 {
color: #2399B1;
font-size: 16px;
font-family: 'Fredoka';
font-weight: 500;
line-height: 110%;
}
.inner-contact .loc .social{
margin: 25px 0 0;
}
.inner-contact .loc .social a{
filter: brightness(0%);
opacity: .6;
transition:all 0.2s ease-in;
}
.inner-contact .loc .social a:hover{
filter: brightness(100%);
opacity: 1;
}
.inner-contact .submis{
margin: 60px 0 0;
}
.inner-contact .submis .rowflex{
align-items: center;
padding: 58px 62px 58px 52px;
}
.inner-contact .submis .caption{
flex: 49%;
max-width: 49%;
}
.inner-contact .submis .form-basic{
flex: 43%;
max-width: 43%;
}
.inner-contact .submis input{
height: 48px;
padding: 0 15px;
}
.inner-contact .submis textarea{
padding: 15px;
} .inner-product {
padding: 0 0 120px;
}
.inner-product .wrapper{
max-width: 980px;
}
.inner-product .list{
margin: 65px 0 0;
}
.inner-product .list .item{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid #EAECF0;
}
.inner-product .list .item figure{
flex: 28.36%;
max-width: 28.36%;
}
.detail-product .main figure img,
.inner-product .list .item figure img{
border-radius: 12px;
width: 100%;
}
.inner-product .list .item .caption{
flex: 65.8%;
max-width: 65.8%;
padding: 16px 0 0;
}
.inner-product .list .page-pagination{
padding: 20px 0 0;
}
.inner-product .list .item h3{
color: #2399B1;
font-size: 24px;
font-family: 'Fredoka';
font-weight: 500;
line-height: 130%;
margin: 0 0 15px;
}
.inner-product .list .item h3 a{
display: block;
position: relative;
color: #2399B1;
padding-left: 30px;
transition:color 0.2s ease-in;
}
.inner-product .list .item h3 a:hover{
color: #FF6300;
}
.inner-product .list .item h3 a:before{
width: 20px;
height: 21px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/hex.svg);
display: block;
position: absolute;
left: 0;
top: 5px;
}
.inner-product .list .item .format-text{
color: #667085;
line-height: 160%;
margin: 0 0 20px;
}
.detail-product .main .act .button,
.inner-product .list .item .button{
display: inline-block;
vertical-align: middle;
font-size: 14px;
}
.detail-product .main .act .button.btn-hollow,
.inner-product .list .item .button.btn-hollow{
margin-left: 10px;
}
.detail-product .main .act .button.btn-hollow .cvr-bg,
.inner-product .list .item .button.btn-hollow .cvr-bg{
display: inline-block;
position: relative;
transition:all 0.2s ease-in;
width: 16px;
height: 16px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/download.svg);
vertical-align: middle;
margin-right: 10px;
top: -1px;
filter: none;
}
.detail-product .main .act .button.btn-hollow:hover .cvr-bg,
.inner-product .list .item .button.btn-hollow:hover .cvr-bg{
filter: brightness(0) invert(1);
}
.detail-product{
padding: 60px 0 120px;
overflow: hidden;
}
.detail-product .crumb{
margin: 0 0 60px;
}
.detail-product .main{
justify-content: space-between;
}
.detail-product .main figure{
flex: 48.7%;
max-width: 48.7%;
}
.detail-product .related{
margin: 60px 0 0;
}
.detail-product .main .caption{
flex: 45.5%;
max-width: 45.5%;
padding: 15px 0 0;
}
.detail-product .main a.cat{
margin: 0 0 10px;
}
.detail-product .main h1{
color: #2399B1;
font-size: 32px;
font-weight: 500;
font-family: 'Fredoka';
line-height: 130%;
margin: 0 0 10px;
}
.detail-product .main .format-text{
line-height: 160%;
color: #667085;
margin: 0 0 25px;
}
.detail-product .main .meta{
padding: 0 0 30px;
margin: 0 0 40px;
border-bottom: 1px solid #D8D8D8;
}
.detail-product .main .meta li{
color: #667085;
line-height: 160%;
margin: 0 0 10px;
}
.detail-product .main .meta li a,
.detail-product .main .meta li i{
color: #2399B1;
} .detail-product .main .act small{
display: block;
color: #98A2B3;
margin: 25px 0 0;
line-height: 160%;
}
.detail-product .taby{
margin: 75px 0 0;
}
.detail-product .taby .nav{
display: flex;
flex-wrap: wrap;
position: relative;
z-index: 2;
bottom: -1px;
}
.detail-product .taby .nav a{
display: block;
flex: 1;
text-align: center;
padding: 0 0 16px;
color: #1A3561;
font-size: 20px;
border-bottom: 2px solid rgba(0,0,0,0);
transition:all 0.2s ease-in;
}
.detail-product .taby .nav a:hover{
color: #FF6300;
}
.detail-product .taby .nav a.current{
border-color: #FF6300;
color: #FF6300;
}
.detail-product .taby .tab-item{
position: relative;
padding: 60px 0 70px;
display: none;
}
.detail-product .taby .tab-item:before,
.detail-product .taby .tab-item:after{
display: block;
position: absolute;
top: 0;
left: -50vw;
width: 200vw;
height: 1px;
content: '';
background: #D0D5DD;
}
.detail-product .taby .tab-item:after{
top: auto;
bottom: 0;
}
.detail-product .taby .tab-item.current{
display: block;
}
.detail-product .taby .format-text{
color: #667085;
line-height: 160%;
max-width: 775px;
margin: 0 auto;
}
.detail-product .related h2{
text-align: center;
margin: 0 0 40px;
color: #21345F;
font-size: 32px;
font-weight: 500;
line-height: 120%;
font-family: 'Fredoka';
}
.detail-product .related .rowflex{
margin: 0 -9px;
}
.detail-product .related .news-item{
flex: calc(33.3333333333333% - 18px);
max-width: calc(33.3333333333333% - 18px);
margin: 0 9px 18px;
}
.detail-product .news-item h3{
text-align: center;
margin: 0;
}
.detail-product .news-item .caption{
margin: 25px 0 0;
}
.detail-product .news-item figure a:after,
.detail-product .news-item figure a:before{
display: none;
} .inner-com{
padding: 55px 0 0;
}
.inner-com .intro{
padding: 50px 0 0;
}
.inner-com .value .rowflex,
.inner-com .intro .rowflex{
justify-content: space-between;
}
.inner-com .intro .video{
flex: 47.6%;
max-width: 47.6%;
}
.inner-com .intro .video a{
display: block;
position: relative;
color: #fff;
}
.inner-com .intro .video a:after{
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block; background: linear-gradient(to bottom,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); content: '';
}
.inner-com .intro .video .holder{
position: absolute;
left: 0;
top: 70%;
-ms-transform: translateY(-70%);
-webkit-transform: translateY(-70%);
transform: translateY(-70%);
z-index: 2;
width: 100%;
text-align: center;
font-family: 'Manrope';
font-size: 14px;
font-weight: 300;
line-height: 140%;
}
.inner-com .intro .video i{
margin-bottom: 10px;
}
.inner-com .intro .video h3{
font-family: 'Inter';
font-weight: 600;
font-size: 14px;
}
.inner-com .intro .video p{
max-width: 295px;
margin: 10px auto 0;
}
.inner-com .intro .caption{
flex: 44%;
max-width: 44%;
padding: 15px 0 0;
}
.inner-com .award .hentry h2,
.inner-com .list .item h2,
.inner-com .market .hentry h2,
.inner-com .value h2,
.inner-com .intro h2{
font-family: 'Fredoka';
font-weight: 500;
font-size: 32px;
line-height: 120%;
margin: 0 0 15px;
color: #003B7C;
}
.inner-com .intro .format-text{
color: #667085;
font-size: 14px;
line-height: 160%;
}
.inner-com .intro .doc{
margin: 35px 0 0;
}
.inner-com .intro .doc li{
display: block;
padding: 0 0 15px;
margin: 0 0 15px;
border-bottom: 1px solid #D0D5DD;
}
.inner-com .intro .doc li a{
color: #003B7C;
font-size: 14px;
font-weight: 600;
font-family: 'Manrope';
display: block;
position: relative;
padding: 0 35px;
}
.inner-com .intro .doc li a:before,
.inner-com .intro .doc li a:after{
display: block;
position: absolute;
}
.inner-com .intro .doc li a:before{
width: 25px;
height: 25px;
left: 0;
top: -2px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/pdf.svg);
}
.menu-product .caption > a:after,
.menu-company ul li span:after,
.inner-com .value .layer a:after,
.inner-com .intro .doc li a:after{
width: 24px;
height: 25px;
right: 16px;
top: -3px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/arrow-circle-right.svg);
transition:right 0.2s ease-in;
}
.menu-company ul li span:after{
display: block;
position: absolute;
right: 0;
transition:right 0.2s ease;
}
.menu-company ul li a:hover span:after{
right: -5px;
}
.menu-company ul.trio li span:after{
position: relative;
display: inline-block;
vertical-align: middle;
top: -2px;
margin-left: 8px;
}
.menu-product .caption > a:after{
display: inline-block;
vertical-align: middle;
position: relative;
right: 0;
top: -2px;
margin-left: 8px;
}
.menu-product .caption > a:hover:after{
right: -5px;
}
.inner-com .intro .doc li a:hover:after{
right: 12px;
}
.inner-com .value{
margin: 130px 0 0;
padding: 130px 0;
background: #F3F9F9;
}
.inner-com .value h2,
.inner-com .value .hentry{
margin: 0 0 25px;
}
.inner-com .value .format-text{
color: #6F7682;
font-size: 14px;
line-height: 160%;
}
.inner-com .value .caption{
flex: 55%;
max-width: 55%;
}
.inner-com .value .acc-item:not(:last-child){
margin: 0 0 16px;
}
.inner-com .value .layer{
flex: 31.6%;
max-width: 31.6%;
background-color: #006261;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/selensia-bg.png);
color: #fff;
padding: 80px 40px;
box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.07);
}
.inner-com .value .layer figure{
margin: 0 0 45px;
}
.inner-com .value .layer h3{
font-family: 'Inter';
font-weight: 600;
font-size: 18px;
margin: 0 0 15px;
line-height: 120%;
}
.inner-com .value .layer .format-text{
font-size: 14px;
line-height: 140%;
color: rgba(255, 255, 255, 0.90);
font-family: 'Manrope';
font-weight: 500;
}
.inner-com .value .layer a{
color: #FCFCFD;
font-size: 14px;
font-weight: 600;
font-family: 'Manrope';
display: inline-block;
margin: 25px 0 0;
}
.inner-com .value .layer a:after{
position: relative;
display: inline-block;
vertical-align: middle;
right: 0;
transition:right 0.2s ease-in;
top: -1px;
margin-left: 8px;
filter: brightness(0) invert(1);
}
.inner-com .value .layer a:hover:after{
right: -3px;
}
.inner-com .market{
padding: 70px 0 130px;
background: #F3F9F9;
}
.inner-com .market .hentry{
text-align: center;
margin: 0 0 100px;
}
.inner-com .market .hentry .format-text{
color: #6F7682;
font-size: 14px;
line-height: 160%;
}
.inner-com .market .loc{
margin: 38px -8px 0;
}
.inner-com .market .loc .item{
border: 1px solid #E9E8E6;
background: #fff;
box-shadow: 0px 2px 12px 0px rgba(15, 26, 30, 0.06);
padding: 24px 27px 27px;
flex: calc(33.33333333333333% - 16px);
max-width: calc(33.33333333333333% - 16px);
margin: 0 8px 16px;
}
.inner-com .market .loc .item h3{
color: #FF6300;
text-transform: uppercase;
letter-spacing: 2.56px;
font-weight: 700;
line-height: 120%;
margin: 0 0 10px;
}
.inner-com .market .loc .item span{
display: block;
color: #3E5646;
font-family: 'Arial';
line-height: 130%;
font-weight: 700;
margin: 0 0 15px;
}
.inner-com .market .loc .item .txt{
color: #565F62;
font-size: 14px;
font-weight: 500;
line-height: 160%;
}
.inner-com .market .loc .item .txt a{
color: #565F62;
}
.inner-com .market .loc .item .txt a:hover{
text-decoration: underline;
}
.inner-com .market .loc .item .txt b,
.inner-com .market .loc .item .txt strong{
color: #889D8F;
}
.inner-com .list .item{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 130px 0 0;
align-items: center;
}
.inner-com .list .item figure{
display: block;
position: relative;
flex: 48%;
max-width: 48%;
}
.inner-com .list .item:nth-child(odd) figure{
order: 2;
}
.inner-com .list .item figure:after{
display: block;
position: absolute;
right: -2px;
top: -7px;
height: calc(100% + 14px);
width: calc(100% - 45px);
border: 1px solid #d1d7df;
content: '';
}
.inner-com .list .item figure img{
position: relative;
z-index: 2;
}
.inner-com .list .item .caption{
flex: 48%;
max-width: 48%;
}
.inner-com .list .item:nth-child(odd) .caption{
order: 1;
}
.inner-com .list .item .format-text{
color: #667085;
line-height: 160%;
}
.inner-com .list .item .button{
margin: 25px 0 0;
}
.inner-com .list .item h2{
margin: 0 0 20px;
font-size: 31px;
}
.inner-com .award{
padding: 130px 0;
margin: 130px 0 0;
background: #F3F9F9;
}
.inner-com .award .hentry{
margin: 0 0 55px;
}
.inner-com .award .hentry h2{
float: left;
margin: 0;
width: 45%;
position: relative;
top: 5px;
}
.inner-com .award .hentry .txt{
float: right;
text-align: right;
color: #98A2B3;
font-size: 16px;
line-height: 160%;
font-weight: 500;
font-family: 'Manrope';
width: 49%;
}
.inner-com .award .rowflex{
margin: 0 -16px;
}
.inner-com .award .item{
flex: calc(25% - 32px);
max-width: calc(25% - 32px);
margin: 0 16px 40px;
background: #fff;
border-radius: 5px;
box-shadow: rgba(50, 50, 93, 0.1) 0px 50px 80px -40px, rgba(0, 0, 0, 0.3) 0px 30px 50px -30px;
text-align: center;
padding: 32px 16px 40px;
}
.inner-com .award .item b{
display: block;
color: #1A3561;
font-size: 32px;
font-weight: 500;
font-family: 'Fredoka';
line-height: 100%;
margin: 25px 0 15px;
}
.inner-com .award .item p{
color: #667085;
font-size: 14px;
line-height: 160%;
} .inner-home{
padding: 0 0 160px;
}
.inner-home .hero{
position: relative;
}
.inner-home .hero .slider{
position: relative;
z-index: 2;
}
.inner-home .hero .item{
position: relative;
text-align: center;
color: #fff;
}
.inner-home .hero .item:after{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
content: '';
background: rgba(0,0,0,0.2);
}
.inner-home .hero .item span{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(1) rotate(0deg);
transition: transform 8s linear;
background-repeat: no-repeat;
background-position: bottom center;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 1;
}
.inner-home .hero .item.slick-active span{
transform: scale(1.1) rotate(0.1deg);
}
.inner-home .hero .slide-init.item span{
transform: scale(1) rotate(0deg) !important;
transition: transform 0s linear;
}
.inner-home .hero .item .holder{
display: flex;
min-height: 100vh;
flex-wrap: wrap;
align-items: center;
padding: 50px 0;
}
.inner-home .hero .item .wrapper{
position: relative;
z-index: 3;
max-width: 820px;
flex: 1;
}
.inner-home .hero .slidenav{
position: absolute;
left: 0;
top: 45%;
-ms-transform: translateY(-45%);
-webkit-transform: translateY(-45%);
transform: translateY(-45%);
height: 0;
width: 100%;
padding: 0 60px;
}
.inner-home .news .slidenav a,
.inner-home .hero .slidenav a{
display: block;
width: 42px;
height: 42px;
position: relative;
}
.inner-home .news .slidenav a.prev,
.inner-home .hero .slidenav a.prev{
float: left;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/arrow-hero-left.svg);
left: 0;
transition:left 0.2s ease-in;
}
.inner-home .news .slidenav a.prev:hover,
.inner-home .hero .slidenav a.prev:hover{
left: -5px;
}
.inner-home .news .slidenav a.next,
.inner-home .hero .slidenav a.next{
float: right;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/arrow-hero-right.svg);
right: 0;
transition:right 0.2s ease-in;
}
.inner-home .news .slidenav a.next:hover,
.inner-home .hero .slidenav a.next:hover{
right: -5px;
}
.inner-home .hero h2{
font-family: 'Fredoka';
font-size: 40px;
font-weight: 500;
line-height: 120%;
margin: 0 0 15px;
}
.inner-home .hero .format-text{
color: #D0D5DD;
line-height: 160%;
}
.inner-home .hero .button{
margin: 30px 0 0;
}
.inner-home .hero .scroll{
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
z-index: 5;
color: #fff;
font-size: 10px;
letter-spacing: 3px;
font-weight: 400;
text-transform: uppercase;
padding: 0 0 40px;
}
.inner-home .hero .scroll span{
cursor: pointer;
display: inline-block;
}
.inner-home .hero .scroll span:after{
display: block;
width: 43px;
height: 42px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/arrow-hero-down.svg);
margin: 15px auto 0;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-10px);}
60% {transform: translateY(-5px);}
}
.inner-home .stat{
background: #F3F9F9;
padding: 50px 0 20px;
}
.inner-home .stat .item{
flex: 33.333333333333333%;
max-width: 33.333333333333333%;
margin: 0 0 30px;
color: #667085;
font-size: 12px;
line-height: 160%;
}
.inner-home .stat .item > *{
display: inline-block;
vertical-align: top;
}
.inner-home .stat .item figure{
width: 65px;
}
.inner-home .stat .item .caption{
width: calc(100% - 65px);
padding-left: 16px;
}
.inner-home .stat h3{
color: #21345F;
font-size: 24px;
font-weight: 500;
line-height: 120%;
margin: 0 0 5px;
font-family: 'Fredoka';
}
.inner-home .stat .txt{
max-width: 200px;
}
.inner-home .copy{
margin: 100px 0 0;
}
.inner-home .partner .rowflex,
.inner-home .cert .rowflex,
.inner-home .copy .rowflex{
justify-content: space-between;
align-items: center;
}
.inner-home .copy figure{
flex: 40.34%;
max-width: 40.34%;
position: relative;
}
.inner-home .copy figure > img{
border-radius: 12px;
z-index: 1;
}
.inner-home .copy figure span{
display: block;
position: absolute;
left: 0;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
text-align: center;
width: 100%;
}
.inner-home .copy .caption{
flex: 48.7%;
max-width: 48.7%;
}
.inner-home .news h2,
.inner-home .partner h2,
.inner-home .heri .caption h2,
.inner-home .cert h2,
.inner-home .prods .holder h3,
.inner-home .prods .hentry h2,
.inner-home .copy h2{
font-family: 'Fredoka';
font-size: 32px;
font-weight: 500;
color: #003B7C;
margin: 0 0 20px;
line-height: 120%;
}
.inner-home .copy .format-text{
color: #667085;
line-height: 160%;
}
.inner-home .copy .button{
margin: 25px 0 0;
}
.inner-home .service{
margin: 120px 0 0;
}
.inner-home .service .rowflex{
margin: 0 -29px;
}
.inner-home .service .news-item{
flex: calc(33.33333333333333333% - 58px);
max-width: calc(33.33333333333333333% - 58px);
margin: 0 29px 50px;
padding: 0;
border-radius: 0;
border: none;
}
.inner-home .service .news-item .button{
border-radius: 10px;
margin: 16px 0 0;
font-size: 14px;
}
.inner-home .prods{
margin: 80px 0 0;
padding: 80px 0 0;
background: #F3F9F9;
}
.inner-home .prods .hentry{
margin: 0 0 60px;
}
.inner-home .prods .hentry h2{
margin: 0;
float: left;
width: 40%;
position: relative;
top: 5px;
}
.inner-home .prods .hentry .txt{
float: right;
color: #6F7682;
line-height: 160%;
text-align: right;
width: 45%;
font-size: 16px;
}
.inner-home .prods .item{
flex: 50%;
max-width: 50%;
position: relative;
padding: 190px 70px;
}
.popcred .hentry:after,
.inner-home .heri .layer:after,
.inner-home .prods .item:after{
z-index: 2;
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(43, 96, 96, 0.80);
}
.inner-home .heri img,
.inner-home .prods .item img{
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
z-index: 1;
object-fit: cover;
}
.inner-home .prods .holder{
position: relative;
z-index: 3;
text-align: center;
color: #fff;
}
.inner-home .prods .holder h3{
color: #fff;
}
.inner-home .heri .caption .format-text,
.inner-home .prods .holder .format-text{
line-height: 160%;
}
.inner-home .prods .holder .button{
margin: 25px 0 0;
}
.inner-home .cert{
margin: 160px 0 0;
}
.inner-home .news .hentry .format-text,
.inner-home .partner .format-text,
.inner-home .cert .format-text{
color: #6F7682;
line-height: 160%;
}
.inner-home .cert .caption{
flex: 40.3%;
max-width: 40.3%;
}
.inner-home .cert .grid{
flex: 48.9%;
max-width: 48.9%;
}
.inner-home .cert .rowed{
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.inner-home .cert .rowed figure{
flex: 26%;
max-width: 26%;
margin: 0 10px;
border: 1px solid #D0D5DD;
border-radius: 12px;
padding: 18px;
text-align: center;
}
.inner-home .cert .rowed:last-child{
margin-top: 20px;
justify-content: flex-end;
}
.inner-home .heri{
margin: 120px 0 0;
}
.inner-home .heri .layer{
border-radius: 12px;
position: relative;
overflow: hidden;
padding: 120px 20px;
}
.popcred .hentry:after,
.inner-home .heri .layer:after{
background: rgba(0, 98, 97, 0.80);
}
.inner-home .heri .caption{
position: relative;
z-index: 3;
max-width: 700px;
margin: 0 auto;
color: #fff;
text-align: center;
}
.inner-home .heri .caption h2{
color: #fff;
}
.inner-home .partner .button,
.inner-home .heri .caption .button{
margin: 25px 0 0;
}
.inner-home .partner{
margin: 130px 0 0;
}
.inner-home .partner .thumb{
flex: 49%;
max-width: 49%;
}
.inner-home .partner .wrap{
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
justify-content: center;
}
.inner-home .partner .wrap figure{
flex: calc(50% - 20px);
max-width: calc(50% - 20px);
text-align: center;
border: 1px solid #D0D5DD;
border-radius: 12px;
padding: 18px;
margin: 0 10px 20px;
}
.inner-home .partner .caption{
flex: 44%;
max-width: 44%;
}
.inner-home .partner .button{
border-radius: 10px;
}
.inner-home .news{
margin: 100px 0 0;
}
.inner-home .news .hentry{
margin: 0 0 40px;
}
.inner-home .news .hentry h2{
margin: 0 0 5px;
}
.inner-home .news .slider{
overflow: hidden;
}
.inner-home .news .slick-list{
min-width: 100%;
margin: 0 -10px;
}
.inner-home .news .slick-track{
display: flex;
flex-wrap: wrap;
min-width: 100%;
}
.inner-home .news .slick-track .news-item{
float: none;
height: auto;
margin: 0 10px;
}
.inner-home .news .emul{
position: relative;
}
.inner-home .news .slidenav{
position: absolute;
left: -70px;
width: calc(100% + 140px);
top: 40%;
-ms-transform: translateY(-40%);
-webkit-transform: translateY(-40%);
transform: translateY(-40%);
height: 0;
z-index: 2;
}
.inner-home .news .slick-dots{
margin: 40px 0 0;
}
.inner-home .news .slidenav a{
filter: brightness(0);
opacity: .7;
}
.popcred{
width: 100%;
max-width: 480px;
padding: 0;
}
.popcred .hentry{
position: relative;
text-align: center;
padding: 30px 10px;
}
.popcred .hentry > img{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
object-fit: cover;
}
.popcred .hentry span{
position: relative;
z-index: 3;
display: block;
}
.popcred .fancybox-close-small{
filter: brightness(0) invert(1);
padding: 3px;
right: 5px;
top: 5px;
opacity: 1;
}
.popcred .nav{
display: flex;
flex-wrap: wrap;
}
.popcred .nav a{
flex: 50%;
max-width: 50%;
padding: 16px 10px;
color: #98A2B3;
font-weight: 500;
font-size: 20px;
font-family: 'Fredoka';
border-bottom: 1px solid #D0D5DD;
text-align: center;
transition:color 0.2s ease-in;
}
.popcred .nav a:hover{
color: #1A3561;
}
.popcred .nav a.current{
color: #1A3561;
border-bottom: 2px solid #344054;
}
.popcred .form-basic{
padding: 40px;
}
.popcred .forgot{
text-align: center;
margin: 30px 0 0;
}
.popcred .forgot a{
color: #2399B1;
font-size: 14px;
}
.popcred .forgot a:hover{
text-decoration: underline;
}
.popcred .form-basic .fgroup > label{
font-size: 14px;
}
.popcred .form-basic input{
height: 44px !important;
}
.sinkona-edit-page{
display: block;
position: fixed;
z-index: 99999;
right: 30px;
bottom: 30px;
width: 40px;
height: 40px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/edit-mode.png);
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 2px;
border-radius: 50%;
}
#loader{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background: #fff;
}
#loader figure{
display: block;
position: absolute;
left: 0;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
width: 100%;
}
#loader figure img{
display: inline-block;
animation: UpDown 2s linear infinite;
position: relative;
}
@keyframes UpDown { 0% { bottom: 0; } 50% { bottom: 1em; } 100% { bottom: 0;}}
#maintenance{
position: fixed;
width: 100%;
height: 100%;
z-index: 9999;
left: 0;
top: 0;
display: flex;
align-items: center;
}
#maintenance .wrapper{
max-width: 800px;
} .animate-loading{
position: fixed;
z-index: 999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
}
.animate-loading .centered{
position: absolute;
left: 0;
width: 100%;
text-align: center;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.animate-loading .ldr {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.animate-loading .ldr div {
position: absolute;
width: 13px;
height: 13px;
border-radius: 50%;
background: #2399b1;
animation: animate-loading-grid 1.2s linear infinite;
}
.animate-loading .ldr div:nth-child(1) {
top: 6px;
left: 6px;
animation-delay: 0s;
}
.animate-loading .ldr div:nth-child(2) {
top: 6px;
left: 26px;
animation-delay: -0.4s;
}
.animate-loading .ldr div:nth-child(3) {
top: 6px;
left: 45px;
animation-delay: -0.8s;
}
.animate-loading .ldr div:nth-child(4) {
top: 26px;
left: 6px;
animation-delay: -0.4s;
}
.animate-loading .ldr div:nth-child(5) {
top: 26px;
left: 26px;
animation-delay: -0.8s;
}
.animate-loading .ldr div:nth-child(6) {
top: 26px;
left: 45px;
animation-delay: -1.2s;
}
.animate-loading .ldr div:nth-child(7) {
top: 45px;
left: 6px;
animation-delay: -0.8s;
}
.animate-loading .ldr div:nth-child(8) {
top: 45px;
left: 26px;
animation-delay: -1.2s;
}
.animate-loading .ldr div:nth-child(9) {
top: 45px;
left: 45px;
animation-delay: -1.6s;
}
@keyframes animate-loading-grid{
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
} @media screen and (-webkit-min-device-pixel-ratio:0) {
} @-moz-document url-prefix(){
}
#top .util > .mobile-trigger{
display: none;
}
@media (max-width: 1800px) {
}
@media (max-width: 1411px) {
.menu-product .wrapper,
#top .rowflex{
max-width: 100%;
padding-left: 30px;
padding-right: 30px;
}
.inner-home .news .slidenav{
left: 0;
width: 100%;
}
}
@media (max-width: 1239px) {
.wrapper{
max-width: 100%;
padding-left: 30px;
padding-right: 30px;
}
.footer-widget .widget-about{
flex: 30%;
max-width: 30%;
}
.inner-com .value .layer{
flex: 35%;
max-width: 35%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1100px)  {
#top .mainmenu{
flex: 100%;
max-width: 100%;
order: 3;
}
}
@media (max-width: 991px) {
#top .mainmenu{
display: none;
}
#top .logo{
flex: 80px;
max-width: 80px;
}
#top .util{
flex: calc(100% - 100px);
max-width: calc(100% - 100px);
}
#top .util .lang{
display: none;
}
#top .util > .mobile-trigger{
display: inline-block;
vertical-align: middle;
position: relative;
margin-left: 25px;
}
a.menu-mobile{
width: 30px;
height: 20px;
position: relative;
display: inline-block;
top: 3px;
}
.menu-mobile .menu-bar b:after,
.menu-mobile .menu-bar b:before,
.menu-mobile .menu-bar b{
position: absolute;
width: 100%;
height: 3px;
left: 0;
top: 9px;
background: #003B7C;
display: block;
}
body.white-head .menu-mobile .menu-bar b:after,
body.white-head .menu-mobile .menu-bar b:before,
body.white-head .menu-mobile .menu-bar b{
background: #fff;
}
.menu-mobile .menu-bar b:after,
.menu-mobile .menu-bar b:before{
content: '';
}
.menu-mobile .menu-bar b:after{
top: 9px;
}
.menu-mobile .menu-bar b:before{
top: -9px;
}
#top .search{
position: fixed;
top: 0;
z-index: 999;
opacity: 1;
visibility: visible;
display: none;
}
body.search-active #top .search{
display: flex;
}
#top .search .cls{
top: 20px;
-ms-transform: translateY(0%);
-webkit-transform: translateY(0%);
transform: translateY(0%);
right: 20px;
}
#top .search form input{
max-width: 400px;
}
.mfull .fancybox-slide--html{
padding: 0;
}
#popmenu{
padding: 0;
width: 100%;
height: 100%;
}
#popmenu .logo{
padding: 15px 30px;
max-width: 140px;
}
#popmenu .fancybox-close-small{
padding: 0;
opacity: 1;
right: 22px;
top: 22px;
}
#popmenu .fancybox-button svg path{
fill:#003B7C;
}
#popmenu > ul > li > div{
display: none;
opacity: 1;
visibility: visible;
position: fixed;
margin: 0;
left: 0;
top: 0;
z-index: 8888;
width: 100%;
height: 100%;
overflow-y: scroll;
padding: 60px 0 30px !important;
}
#popmenu > ul > li > div:before{
display: none !important;
}
#popmenu > ul{
padding: 20px 30px 0;
}
#popmenu > ul > li{
display: block;
margin: 0 0 15px;
padding: 0 0 15px;
border-bottom: 1px solid #ccc;
position: relative;
}
#popmenu > ul > li > a{
color: #1A3561;
font-weight: 600;
}
#popmenu > ul > li > b{
display: block;
position: absolute;
right: 0;
top: -1px;
width: 24px;
height: 25px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/arrow-circle-right.svg);
}
#popmenu > ul > li > b.showing{
position: fixed;
top: 15px;
right: 15px;
z-index: 9999;
width: 32px;
height: 32px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/close-form.svg);
}
#popmenu .lg{
padding: 0 30px;
}
#popmenu .lg > *{
display: inline-block;
vertical-align: middle;
font-weight: 500;
color: #808080;
text-transform: uppercase;
}
#popmenu .lg > b{
color: #FF6300;
font-weight: 700;
}
#popmenu .lg > span{
margin-right: 8px;
width: 18px;
height: 18px;
background-image: url(//www.sinkonaindonesia.com/wp-content/themes/sinkona/assets/img/icon/globe.svg);
position: relative;
top: 1px;
}
#popmenu .lg > a{
color: #1A3561;
}
#popmenu .lg i{
width: 1px;
height: 13px;
background: #ccc;
margin: 0 8px;
}
.menu-company .caption,
.menu-company figure{
flex: 100%;
max-width: 100%;
}
.menu-company figure{
margin: 0 0 30px;
}
.menu-product .emulate .item {
flex: calc(50% - 24px);
max-width: calc(50% - 24px);
}
body.white-head #top:hover{
background: none;
}
body.white-head #top .prf a, body.white-head #top .sch a, body.white-head #top .lang b:before, body.white-head #top .lang b:after, body.white-head #top .mainmenu li b {
filter: brightness(0) invert(1);
}
.inner-home .service .rowflex,
.inner-com .market .loc,
.detail-product .related .rowflex,
.detail-news .related .rowflex{
flex-wrap: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
display: flex;
margin: 0 -30px 0 0;
}
.inner-com .market .loc{
margin: 50px -30px 0 0;
}
.inner-home .service .rowflex::-webkit-scrollbar,
.inner-com .market .loc::-webkit-scrollbar,
.detail-product .related .rowflex::-webkit-scrollbar,
.detail-news .related .rowflex::-webkit-scrollbar {
width: 0px;
background: transparent; }
.inner-home .service .rowflex .news-item,
.inner-com .market .loc .item,
.detail-product .related .rowflex .news-item,
.detail-news .related .rowflex .news-item{
flex: 0 0 auto;
margin: 0 15px 0 0;
width: 300px;
max-width: 300px;
}
.footer-widget .widget-about{
flex: 35%;
max-width: 35%;
}
.inner-board .section .item:after{
height: 100%;
}
.inner-board .section .item{
padding: 30px;
align-items: flex-start;
}
.inner-news .filter .rowflex > *{
flex: 49%;
max-width: 49%;
}
.inner-news .list .news-item {
flex: calc(50% - 20px);
max-width: calc(50% - 20px);
}
.detail-product .main .caption{
flex: 51%;
max-width: 51%;
}
.detail-product .main figure{
flex: 45%;
max-width: 45%;
}
.inner-com .value .layer{
flex: 40%;
max-width: 40%;
}
.inner-com .award .rowflex{
margin: 0 -5px;
}
.inner-com .award .item{
flex: calc(50% - 10px);
max-width: calc(50% - 10px);
margin: 0 5px 50px;
}
.inner-home .hero .slidenav{
padding: 0 20px;
}
.inner-home .prods .item{
padding: 80px 40px;
}
.inner-home .prods .hentry .txt{
width: 55%;
}
}
@media only screen and (min-width: 769px) and (max-width: 991px)  {
}
@media (max-width: 768px) {
.inner-home .news .slidenav,
.format-text h3 br,
.menu-company .caption .format-text br{
display: none;
}
.menu-product .wrapper,
#top .rowflex,
.wrapper{
padding-left: 20px;
padding-right: 20px;
}
#top .util{
position: relative;
top: 2px;
}
#top .search form{
padding: 0 20px;
}
#top .search form > *{
display: block;
margin: 10px 0;
text-align: center;
max-width: 100%;
width: 100%;
}
#popmenu .logo{
padding: 15px 20px;
max-width: 120px;
}
#popmenu .fancybox-close-small{
right: 12px;
top: 24px;
}
.menu-product .caption .format-text{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
#bottom .brand .logo{
width: 80px;
}
.footer-widget .widget-menu ul{
flex:47%;
max-width: 47%;
margin: 0 0 20px;
}
.tribute .copy{
line-height: 200%;
}
.inner-cert .list .item,
.inner-partner .list .rowflex figure{
flex: calc(50% - 4px);
max-width: calc(50% - 4px);
margin: 0 2px 30px;
}
.inner-com .intro .video i, .inner-heri .video span i{
width: 40px;
height: 40px;
}
.inner-heri .timeline .item:before{
width: 21px;
height: 21px;
}
.inner-heri .timeline .item:after{
top: 21px;
left: 10px;
}
.inner-product .filter .sch button i, .inner-news .filter .sch button i{
width: 16px;
height: 16px;
}
.inner-product .filter .sch button, .inner-news .filter .sch button{
right: 10px;
top: 18px;
}
.filter .dropselect strong:after{
width: 18px;
height: 18px;
right: 8px;
top: 16px;
}
.filter .dropselect li.current:after{
width: 13px;
height: 13px;
top: 20px;
}
.inner-facil .list figure{
flex: calc(50% - 10px);
max-width: calc(50% - 10px);
margin: 0 5px 30px;
}
.inner-contact .loc .map{
height: 300px;
}
.inner-contact .loc .map iframe{
position: relative;
}
.inner-res .content .rowflex{
flex-wrap: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
display: flex;
margin: 50px -20px 0 0;
}
.inner-res .content .rowflex::-webkit-scrollbar {
width: 0px;
background: transparent; }
.inner-res .content .rowflex figure{
flex: 0 0 auto;
margin: 0 20px 0 0;
width: 300px;
max-width: 300px;
}
.inner-product .filter .rowflex > *{
flex: 49%;
max-width: 49%;
}
.detail-product .taby .nav{
flex-wrap: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
display: flex;
margin: 0 -20px 0 0;
}
.detail-product .taby .nav::-webkit-scrollbar {
width: 0px;
background: transparent; }
.detail-product .taby .nav a{
flex: 0 0 auto;
margin: 0;
padding: 0 20px 16px;
}
.inner-com .intro .video .holder{
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.inner-com .market .loc .item h3{
letter-spacing: 2px;
}
.acc-item .acc-head:after{
top: 16px;
right: 15px;
}
.inner-home .hero .item .holder{
max-width: calc(100% - 60px);
margin: 0 auto;
}
.detail-product .taby .tab-item:before{
top: -4px;
}
.detail-news .banner{
height: auto;
} .inner-home .partner .thumb,
.inner-home .partner .caption,
.inner-home .cert .grid,
.inner-home .cert .caption,
.inner-home .prods .item,
.inner-home .copy .caption,
.inner-home .copy figure,
.inner-home .stat .item,
.inner-com .list .item figure,
.inner-com .list .item .caption,
.inner-com .value .layer,
.inner-com .value .caption,
.inner-com .intro .caption,
.inner-com .intro .video,
.detail-product .main figure,
.detail-product .main .caption,
.inner-product .list .item figure,
.inner-product .list .item .caption,
.inner-product .filter .rowflex > *:first-child,
.inner-contact .submis .caption,
.inner-contact .submis .form-basic,
.inner-contact .loc .addr,
.inner-contact .loc .map,
.inner-res .copy .caption,
.inner-res .copy figure,
.inner-res .quote h2,
.inner-res .quote .format-text,
.inner-quali .list .item:not(.item-center) .caption,
.inner-quali .list .item:not(.item-center) figure,
.inner-news .list .news-item,
.inner-board .section .item figure,
.inner-board .section .item .caption,
.footer-widget .widget-menu ul:last-child,
.footer-widget .widget-menu,
.footer-widget .widget-about,
.menu-product .emulate .item ,
.menu-company ul.trio li,
.menu-company ul li{
flex: 100%;
max-width: 100%;
}
.inner-home .stat .txt,
.menu-company ul li span,
.popcred,
#top .search form input{
max-width: 100%;
}
.inner-home .prods .hentry h2,
.inner-home .prods .hentry .txt,
.inner-com .award .hentry .txt,
.inner-com .award .hentry h2{
width: 100%;
}
.inner-com .list .item:nth-child(odd) figure,
.inner-quali .list .item:not(.item-center) figure{
order: 1;
}
.inner-com .list .item:nth-child(odd) .caption,
.inner-quali .list .item:not(.item-center) .caption{
order: 2;
}
.mfull .popcred{
height: 100%;
}
#bottom .brand .hotline{
top: 25px;
}
.inner-home .prods .hentry h2,
.inner-com .award .hentry h2{
top: auto;
}
.inner-home .prods .hentry .txt,
.inner-home .prods .hentry h2,
.inner-com .award .hentry .txt,
.inner-com .award .hentry h2,
.tribute .copy,
.tribute ul{
float: none;
}
.inner-home .prods .hentry .txt,
.inner-com .award .hentry .txt{
text-align: left;
}
.inner-home .news .slidenav a.next:hover,
.inner-home .hero .slidenav a.next:hover{
right: 0;
}
.inner-home .news .slidenav a.prev:hover,
.inner-home .hero .slidenav a.prev:hover{
left: 0;
} .inner-home .cert .caption,
.inner-com .market .hentry{
margin: 0 0 50px;
}
.inner-com .award .hentry,
.page-header,
.inner-news .list .news-item,
.detail-news .banner{
margin: 0 0 40px;
}
.inner-home .news .hentry,
.inner-home .partner .thumb,
.inner-home .prods .hentry,
.inner-home .copy figure,
.inner-com .list .item figure,
.inner-com .intro .video,
.detail-product .crumb,
.detail-product .related h2,
.inner-contact .submis .caption,
.inner-res .copy figure,
.inner-res .quote h2,
.inner-quali .list .item:not(.item-center) figure,
.inner-board .section h2,
.inner-board .section .item figure,
.inner-partner .list h2,
.footer-widget .widget-about,
.detail-news .related .hentry{
margin: 0 0 30px;
}
.inner-board .page-header,
.crumb,
.menu-product .emulate .item {
margin: 0 0 20px;
}
.inner-home .partner h2,
.inner-home .prods .hentry h2,
.inner-com .award .hentry h2,
.inner-com .list .item h2,
.inner-com .value h2{
margin: 0 0 15px;
}
.inner-res > *:not(:first-child) + .content,
.inner-home .news,
.inner-home .partner,
.inner-home .heri,
.inner-home .cert,
.inner-home .prods,
.inner-home .service,
.inner-home .copy,
.inner-com .award,
.inner-com .list .item,
.inner-com .value,
.detail-product .taby,
.inner-contact .loc,
.inner-res .copy,
.inner-res .quote,
.inner-quali .list .item,
.inner-facil .list,
.inner-news .list{
margin: 50px 0 0;
}
.detail-product .related,
.inner-product .list,
.inner-contact .submis{
margin: 40px 0 0;
}
.inner-com .value .layer,
.detail-product .main .caption,
.inner-product .list .item .caption,
.page-header figure{
margin: 30px 0 0;
}
.format-text > *{
margin: 20px 0 0;
}
.tribute .copy,
.menu-product .caption > a{
margin: 10px 0 0;
}
.format-text h1 + *, .format-text h2 + *, .format-text h3 + *, .format-text h4 + *, .format-text h5 + *, .format-text h6 + *{
margin: 5px 0 0;
}
.tribute ul li{
margin: 0 10px 0 0;
}
.inner-home .service .rowflex,
.detail-product .related .rowflex,
.detail-news .related .rowflex{
margin: 0 -20px 0 0;
}
.inner-com .market .loc{
margin: 50px -20px 0 0;
}
.inner-cert .list .rowflex,
.inner-partner .list .rowflex{
margin: 0 -2px;
}
.inner-facil .list .rowflex{
margin: 0 -5px;
}
.crumb > i{
margin: 0 5px;
}
.inner-com .intro .video i, .inner-heri .video span i{
margin-bottom: 5px;
}
.detail-product .main .act .button.cvr-bg-bf:before,
.inner-product .list .item .button.cvr-bg-bf:before{
margin-right: 5px;
}
.inner-news .list .rowflex,
.menu-product .emulate{
margin: 0;
} .detail-product,
.inner-res, .inner-quali, .inner-facil,
.inner-vismis,
.inner-cert .list, .inner-partner .list,
.detail-news, .inner-news{
padding: 40px 0 60px;
}
.inner-contact .submis .rowflex,
.inner-contact .loc .addr,
.popcred .form-basic{
padding: 30px 20px;
}
#popmenu > ul{
padding: 20px 20px 0;
}
.inner-home .heri .layer,
.inner-home .prods .item,
.inner-vismis .layer{
padding: 50px 30px;
}
.acc-item .acc-body .format-text,
.inner-com .market .loc .item,
.inner-news .list .news-item,
.inner-heri .timeline .layer,
.inner-board .section .item{
padding: 20px;
}
.inner-home .news .slick-track .news-item,
.detail-product .related .news-item,
.inner-cert .item figure,
.detail-news .related .rowflex .news-item{
padding: 15px;
}
.acc-item .acc-head{
padding: 15px 20px;
}
.inner-com .value .layer,
.inner-quali .list .item.item-center{
padding: 50px 20px;
}
.banner{
padding: 120px 0 50px;
}
.inner-com .award,
.inner-com .market,
.inner-com .value,
.detail-product .taby .tab-item,
.inner-res .quote,
.inner-heri .timeline,
#bottom .cta{
padding: 50px 0;
}
.inner-board .section:nth-child(even),
.inner-board .section{
padding: 30px 0;
}
.inner-com .intro{
padding: 10px 0 0;
}
.inner-home,
.inner-contact,
.inner-heri .content{
padding: 0 0 50px;
}
#popmenu .lg{
padding: 0 20px;
}
.filter .dropselect strong{
padding: 0 10px;
}
#bottom .footer-widget{
padding: 40px 0 20px;
}
.inner-home .prods{
padding: 50px 0 0;
}
.inner-com,
.inner-heri,
.inner-board,
.inner-cert, .inner-partner{
padding: 40px 0 0;
}
.inner-heri .timeline .item{
padding: 0 0 20px 35px;
}
.inner-product .filter .sch input, .inner-news .filter .sch input{
padding: 0 30px 0 10px;
}
.detail-product .main .act .button,
.inner-product .list .item .button{
padding: 0 15px;
}
.inner-com .award .item{
padding: 20px 10px 30px;
}
.inner-home .hero .slidenav,
.inner-com .intro .caption,
.inner-product .list .item .caption,
.inner-board .section .item .caption{
padding: 0;
} .detail-product .main h1,
.banner h1,
#bottom .cta h2{
font-size: 26px;
}
.inner-home .news h2,
.inner-home .partner h2,
.inner-home .heri .caption h2,
.inner-home .cert h2,
.inner-home .prods .hentry h2,
.inner-home .copy h2,
.inner-com .award .item b,
.inner-com .award .hentry h2,
.inner-com .market .hentry h2,
.inner-com .value h2,
.inner-com .intro h2,
.detail-product .related h2,
.inner-vismis .hentry h2,
.inner-board .section .item h3,
.inner-board .section h2,
.detail-news .related .hentry h2,
.format-text h1,
.page-header h1{
font-size: 24px;
}
.inner-home .hero h2,
.inner-com .list .item h2,
.inner-partner .list h2,
.format-text h2{
font-size: 22px;
}
.inner-home .prods .holder h3,
.inner-contact .submis h2,
.inner-contact .loc h2,
.inner-res .quote h2,
.inner-quali .list .item h2,
.format-text blockquote,
.format-text h3{
font-size: 20px;
}
.acc-item .acc-head,
.news-item .caption h3,
.format-text h4{
font-size: 18px;
}
.detail-product .taby .nav a,
.inner-res .quote .format-text,
.inner-vismis .hentry span,
.inner-board .section .item span,
#bottom .brand .hotline,
.format-text h5,
.menu-product .caption h3 a{
font-size: 16px;
}
.inner-home .prods .hentry .txt,
.inner-com .award .hentry .txt,
.inner-com .market .loc .item span,
.inner-com .market .loc .item h3,
.detail-product .main .act small,
.detail-product .main .meta,
.inner-contact .loc .txt,
.inner-facil .list figure,
.inner-cert .item h3,
.detail-news .related .hentry,
.format-text h6,
.format-text,
.detail-news .content .format-text,
.crumb > *{
font-size: 14px;
}
.inner-com .award .item p,
.inner-heri .video span,
.inner-cert .item small{
font-size: 12px;
}
} @media (max-width: 480px) {
}
@media (max-width: 360px) {
}
@media (min-width: 1230px) {
}
#responsive{
display:block;
width:10px;
height: 10px;
position: fixed;
bottom:10px;
left: 10px;
z-index: 9999;
} @media (max-width: 1239px) {  #responsive{background: blueViolet !important;}}
@media (max-width: 991px) {  #responsive{background: red !important;}}
@media (max-width: 768px) {  #responsive{background: blue !important;}}
@media (max-width: 480px) {  #responsive{background: cyan !important;}}
@media (max-width: 360px) {  #responsive{background: green !important;}}