body {
font-size: 0.95rem !important;
}
/*Header*/
/* .container {
width: 100%;
max-width: 1300px;
} */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container,
.container-sm {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container,
.container-md,
.container-sm {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container,
.container-lg,
.container-md,
.container-sm {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 1320px;
}
}
/*.header { height: auto; }*/
.separator {
border-top: 1px solid #575757;
}
.dashed {
border-top: 1px dashed #575757;
}
.my-dashed {
border: 1px dashed #e1e1e1;
}
.pr-dashed {
border-right: 1px dashed #e1e1e1;
padding-right: 20px;
}
.btn-default {
color: #000;
background-color: #ddd;
border-color: #ddd;
}
.btn-default:hover {
color: #000;
background-color: #bbb;
border-color: #bbb;
}
.btn {
font-weight: 400;
font-size: 14px;
}
.btn:hover {
font-weight: 400;
font-size: 14px;
}
.w-15 {
width: 15% !important;
}
.h-100px {
height: 100px !important;
}
.h-175px {
height: 175px !important;
}
.h-110 {
height: 110% !important;
}
.min-h-30px {
min-height: 30px!important;
}
.min-h-35px {
min-height: 35px!important;
}
.min-h-50px {
min-height: 50px!important;
}
.min-h-75px {
min-height: 75px!important;
}
.min-h-100px {
min-height: 100px!important;
}
.min-h-125px {
min-height: 125px!important;
}
.min-h-150px {
min-height: 150px!important;
}
.min-h-175px {
min-height: 175px!important;
}
.mb-10 {
margin-bottom: 10px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
/* .pt-10 {
padding-top: 10px !important;
}
.pt-20 {
padding-top: 20px !important;
} */
.py-0 {
padding-top: 0!important;
padding-bottom: 0!important
}
.py-1 {
padding-top: .25rem!important;
padding-bottom: .25rem!important
}
.py-2 {
padding-top: .5rem!important;
padding-bottom: .5rem!important
}
.py-3 {
padding-top: .75rem!important;
padding-bottom: .75rem!important
}
.py-4 {
padding-top: 1rem!important;
padding-bottom: 1rem!important
}
.py-5 {
padding-top: 1.25rem!important;
padding-bottom: 1.25rem!important
}
.py-6 {
padding-top: 1.5rem!important;
padding-bottom: 1.5rem!important
}
.py-7 {
padding-top: 1.75rem!important;
padding-bottom: 1.75rem!important
}
.py-8 {
padding-top: 2rem!important;
padding-bottom: 2rem!important
}
.py-9 {
padding-top: 2.25rem!important;
padding-bottom: 2.25rem!important
}
.py-10 {
padding-top: 2.5rem!important;
padding-bottom: 2.5rem!important
}
.py-11 {
padding-top: 2.75rem!important;
padding-bottom: 2.75rem!important
}
.py-12 {
padding-top: 3rem!important;
padding-bottom: 3rem!important
}
.py-13 {
padding-top: 3.25rem!important;
padding-bottom: 3.25rem!important
}
.py-14 {
padding-top: 3.5rem!important;
padding-bottom: 3.5rem!important
}
.py-15 {
padding-top: 3.75rem!important;
padding-bottom: 3.75rem!important
}
.py-16 {
padding-top: 4rem!important;
padding-bottom: 4rem!important
}
.py-17 {
padding-top: 4.25rem!important;
padding-bottom: 4.25rem!important
}
.py-18 {
padding-top: 4.5rem!important;
padding-bottom: 4.5rem!important
}
.py-19 {
padding-top: 4.75rem!important;
padding-bottom: 4.75rem!important
}
.py-20 {
padding-top: 5rem!important;
padding-bottom: 5rem!important
}
.pt-0 {
padding-top: 0!important
}
.pt-1 {
padding-top: .25rem!important
}
.pt-2 {
padding-top: .5rem!important
}
.pt-3 {
padding-top: .75rem!important
}
.pt-4 {
padding-top: 1rem!important
}
.pt-5 {
padding-top: 1.25rem!important
}
.pt-6 {
padding-top: 1.5rem!important
}
.pt-7 {
padding-top: 1.75rem!important
}
.pt-8 {
padding-top: 2rem!important
}
.pt-9 {
padding-top: 2.25rem!important
}
.pt-10 {
padding-top: 2.5rem!important
}
.pt-11 {
padding-top: 2.75rem!important
}
.pt-12 {
padding-top: 3rem!important
}
.pt-13 {
padding-top: 3.25rem!important
}
.pt-14 {
padding-top: 3.5rem!important
}
.pt-15 {
padding-top: 3.75rem!important
}
.pt-16 {
padding-top: 4rem!important
}
.pt-17 {
padding-top: 4.25rem!important
}
.pt-18 {
padding-top: 4.5rem!important
}
.pt-19 {
padding-top: 4.75rem!important
}
.pt-20 {
padding-top: 5rem!important
}
.pe-0 {
padding-right: 0!important
}
.pe-1 {
padding-right: .25rem!important
}
.pe-2 {
padding-right: .5rem!important
}
.pe-3 {
padding-right: .75rem!important
}
.pe-4 {
padding-right: 1rem!important
}
.pe-5 {
padding-right: 1.25rem!important
}
.pe-6 {
padding-right: 1.5rem!important
}
.pe-7 {
padding-right: 1.75rem!important
}
.pe-8 {
padding-right: 2rem!important
}
.pe-9 {
padding-right: 2.25rem!important
}
.pe-10 {
padding-right: 2.5rem!important
}
.pe-11 {
padding-right: 2.75rem!important
}
.pe-12 {
padding-right: 3rem!important
}
.pe-13 {
padding-right: 3.25rem!important
}
.pe-14 {
padding-right: 3.5rem!important
}
.pe-15 {
padding-right: 3.75rem!important
}
.pe-16 {
padding-right: 4rem!important
}
.pe-17 {
padding-right: 4.25rem!important
}
.pe-18 {
padding-right: 4.5rem!important
}
.pe-19 {
padding-right: 4.75rem!important
}
.pe-20 {
padding-right: 5rem!important
}
.pb-0 {
padding-bottom: 0!important
}
.pb-1 {
padding-bottom: .25rem!important
}
.pb-2 {
padding-bottom: .5rem!important
}
.pb-3 {
padding-bottom: .75rem!important
}
.pb-4 {
padding-bottom: 1rem!important
}
.pb-5 {
padding-bottom: 1.25rem!important
}
.pb-6 {
padding-bottom: 1.5rem!important
}
.pb-7 {
padding-bottom: 1.75rem!important
}
.pb-8 {
padding-bottom: 2rem!important
}
.pb-9 {
padding-bottom: 2.25rem!important
}
.pb-10 {
padding-bottom: 2.5rem!important
}
.pb-11 {
padding-bottom: 2.75rem!important
}
.pb-12 {
padding-bottom: 3rem!important
}
.pb-13 {
padding-bottom: 3.25rem!important
}
.pb-14 {
padding-bottom: 3.5rem!important
}
.pb-15 {
padding-bottom: 3.75rem!important
}
.pb-16 {
padding-bottom: 4rem!important
}
.pb-17 {
padding-bottom: 4.25rem!important
}
.pb-18 {
padding-bottom: 4.5rem!important
}
.pb-19 {
padding-bottom: 4.75rem!important
}
.pb-20 {
padding-bottom: 5rem!important
}
.ps-0 {
padding-left: 0!important
}
.ps-1 {
padding-left: .25rem!important
}
.ps-2 {
padding-left: .5rem!important
}
.ps-3 {
padding-left: .75rem!important
}
.ps-4 {
padding-left: 1rem!important
}
.ps-5 {
padding-left: 1.25rem!important
}
.ps-6 {
padding-left: 1.5rem!important
}
.ps-7 {
padding-left: 1.75rem!important
}
.ps-8 {
padding-left: 2rem!important
}
.ps-9 {
padding-left: 2.25rem!important
}
.ps-10 {
padding-left: 2.5rem!important
}
.ps-11 {
padding-left: 2.75rem!important
}
.ps-12 {
padding-left: 3rem!important
}
.ps-13 {
padding-left: 3.25rem!important
}
.ps-14 {
padding-left: 3.5rem!important
}
.ps-15 {
padding-left: 3.75rem!important
}
.ps-16 {
padding-left: 4rem!important
}
.ps-17 {
padding-left: 4.25rem!important
}
.ps-18 {
padding-left: 4.5rem!important
}
.ps-19 {
padding-left: 4.75rem!important
}
.ps-20 {
padding-left: 5rem!important
}
.py-lg-0 {
padding-top: 0!important;
padding-bottom: 0!important
}
.py-lg-1 {
padding-top: .25rem!important;
padding-bottom: .25rem!important
}
.py-lg-2 {
padding-top: .5rem!important;
padding-bottom: .5rem!important
}
.py-lg-3 {
padding-top: .75rem!important;
padding-bottom: .75rem!important
}
.py-lg-4 {
padding-top: 1rem!important;
padding-bottom: 1rem!important
}
.py-lg-5 {
padding-top: 1.25rem!important;
padding-bottom: 1.25rem!important
}
.py-lg-6 {
padding-top: 1.5rem!important;
padding-bottom: 1.5rem!important
}
.py-lg-7 {
padding-top: 1.75rem!important;
padding-bottom: 1.75rem!important
}
.py-lg-8 {
padding-top: 2rem!important;
padding-bottom: 2rem!important
}
.py-lg-9 {
padding-top: 2.25rem!important;
padding-bottom: 2.25rem!important
}
.py-lg-10 {
padding-top: 2.5rem!important;
padding-bottom: 2.5rem!important
}
.py-lg-11 {
padding-top: 2.75rem!important;
padding-bottom: 2.75rem!important
}
.py-lg-12 {
padding-top: 3rem!important;
padding-bottom: 3rem!important
}
.py-lg-13 {
padding-top: 3.25rem!important;
padding-bottom: 3.25rem!important
}
.py-lg-14 {
padding-top: 3.5rem!important;
padding-bottom: 3.5rem!important
}
.py-lg-15 {
padding-top: 3.75rem!important;
padding-bottom: 3.75rem!important
}
.py-lg-16 {
padding-top: 4rem!important;
padding-bottom: 4rem!important
}
.py-lg-17 {
padding-top: 4.25rem!important;
padding-bottom: 4.25rem!important
}
.py-lg-18 {
padding-top: 4.5rem!important;
padding-bottom: 4.5rem!important
}
.py-lg-19 {
padding-top: 4.75rem!important;
padding-bottom: 4.75rem!important
}
.py-lg-20 {
padding-top: 5rem!important;
padding-bottom: 5rem!important
}
.pt-lg-0 {
padding-top: 0!important
}
.pt-lg-1 {
padding-top: .25rem!important
}
.pt-lg-2 {
padding-top: .5rem!important
}
.pt-lg-3 {
padding-top: .75rem!important
}
.pt-lg-4 {
padding-top: 1rem!important
}
.pt-lg-5 {
padding-top: 1.25rem!important
}
.pt-lg-6 {
padding-top: 1.5rem!important
}
.pt-lg-7 {
padding-top: 1.75rem!important
}
.pt-lg-8 {
padding-top: 2rem!important
}
.pt-lg-9 {
padding-top: 2.25rem!important
}
.pt-lg-10 {
padding-top: 2.5rem!important
}
.pt-lg-11 {
padding-top: 2.75rem!important
}
.pt-lg-12 {
padding-top: 3rem!important
}
.pt-lg-13 {
padding-top: 3.25rem!important
}
.pt-lg-14 {
padding-top: 3.5rem!important
}
.pt-lg-15 {
padding-top: 3.75rem!important
}
.pt-lg-16 {
padding-top: 4rem!important
}
.pt-lg-17 {
padding-top: 4.25rem!important
}
.pt-lg-18 {
padding-top: 4.5rem!important
}
.pt-lg-19 {
padding-top: 4.75rem!important
}
.pt-lg-20 {
padding-top: 5rem!important
}
.lines {
border-bottom: 1px solid #ece5e5;
padding-bottom: 10px;
}
.right {
text-align: right;
}
.no-border {
border: none;
}
.mt-20 {
margin-top: 20px !important;
}
.nopadding {
padding: 0px !important;
}
.selengkapnya {
font-size: 12px !important;
margin-bottom: 0px !important;
}
.selengkapnya:hover {
font-size: 12px !important;
text-decoration: underline;
color: var(--portal-color-light);
}
.text-hover:hover{
text-decoration: underline;
color: var(--portal-color-light) !important;
}
.text-hover-primary:hover{
color: var(--portal-color-light) !important;
}
.btn-share {
color: #b3b3b3;
background-color: transparent;
}
.btn-share:hover {
color: #b3b3b3;
background-color: transparent;
}
.btn-share:after {
content: none;
}
.post a:hover {
text-decoration: underline;
color: var(--portal-color-light);
}
.bg-main {
background-color: var(--portal-color);
}
.bg-img {
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.main-colour {
color: var(--portal-color);
}
.list-inline {
padding-left: 0;
list-style: none;
margin-left: -5px;
}
.list-inline > li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
.align-items-center {
align-items: center !important;
}
.d-flex {
display: flex !important;
}
.flex-root {
flex: 1;
}
.flex-column {
flex-direction: column !important;
}
#btn-cta {
font-size: 24px;
font-weight: 700;
color: #273035;
/* Rectangle 2: */
background-color: #ecba00;
background-image: linear-gradient(-180deg, #f7de01 0%, #ecba00 100%);
border: 1px solid #ecba00;
border-radius: 10px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
padding: 10px 36px;
margin-bottom: 30px;
position: relative;
top: 0;
}
#btn-cta:hover {
background-image: linear-gradient(180deg, #f7de01 0%, #ecba00 100%);
box-shadow: 0 9px 33px -10px rgba(0, 0, 0, 0.5);
top: -1px;
}
#navigasi {
margin: auto;
margin-top: 0em;
margin-bottom: 0em;
width: 60%;
}
#navigasi > li > a {
display: block;
padding: 0.5em 0.5em;
}
#logo-cover {
position: relative;
margin-bottom: 0px;
max-width: 33%;
}
#judul-cover {
position: relative;
margin-top: 30px;
bottom: 0;
}
#icon-utama {
max-width: 100px;
max-height: 100px;
position: relative;
margin-top: 8px;
bottom: 0;
}
main {
position: relative;
background-color: black;
height: 94vh;
/* height: 100vh; */
/* min-height: 30rem; */
width: 100%;
overflow: hidden;
}
main video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
/* main .bg-screen {
} */
main .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.2;
z-index: 1;
}
/*Start New Style*/
.addresss-info {
padding: 0;
}
.addresss-info li {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
list-style: none;
}
.addresss-info i {
color: #fff000;
padding-right: 5px;
float: left;
display: table-cell;
width: 30px;
line-height: 26px;
font-size: 18px;
}
.addresss-info p {
display: table;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 0px;
}
.addresss-info li a {
color: rgba(255, 255, 255, 0.5);
}
/*Navigasi Transparan*/
.top-logo {
position: absolute;
height: 50px;
width: 240px;
}
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show > .nav-link {
color: #fed136;
}
.navbar-brand span {
color: #fed136;
font-size: 25px;
font-weight: 700;
letter-spacing: 0.1em;
font-family: "Kaushan Script", "Helvetica Neue", Helvetica, Arial, cursive;
}
.navbar-brand {
color: #fff;
font-size: 25px;
font-family: "Kaushan Script", "Helvetica Neue", Helvetica, Arial, cursive;
font-weight: 700;
letter-spacing: 0.1em;
}
.navbar-nav .nav-item .nav-link:hover {
color: #ddd;
}
.navbar-nav .nav-item .nav-link {
padding: 0.3em 0.5em !important;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
color: #ffffff;
}
.navbar-expand-md .navbar-nav .dropdown-menu {
border-top: 3px solid #fed136;
}
nav {
-webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
-moz-transition: padding-top 0.3s, padding-bottom 0.3s;
transition: padding-top 0.3s, padding-bottom 0.3s;
border: none;
}
.sticky {
background-color: white;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/*From Old*/
.dropbtnx {
background-color: transparent;
margin-left: -8px;
border: none;
}
.dropdownx-content {
display: none;
position: absolute;
padding-top: 2px;
}
.dropdownx-content a {
padding: 0;
}
.dropdownx:hover .dropdownx-content {
display: block;
}
.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
background-color: #555;
}
.media-body,
.media-left,
.media-right {
display: table-cell;
vertical-align: top;
}
.dropup {
position: relative;
display: inline-block;
}
.dropup-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
bottom: 100%;
margin-bottom: 5px;
z-index: 1;
}
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropup-content a:hover {
background-color: #ccc;
}
.dropup:hover .dropup-content {
display: block;
}
.dropup:hover .dropbtn {
background-color: #2980b9;
}
.dropup .dropdown-toggle::after {
content: none !important;
}
.dropup .title {
z-index: 9999;
white-space: nowrap;
display: inline-block;
background: #fff;
color: #333;
padding: 2px 15px;
border-radius: 20px;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
position: absolute;
bottom: 0px;
left: 50%;
transform: translate(-50%, 0) scale(0);
-webkit-transform: translate(-50%, 0) scale(0);
opacity: 0;
transition: 300ms ease;
-webkit-transition: 300ms ease;
}
.dropup:hover .title {
transform: translate(-50%, 15px) scale(1);
-webkit-transform: translate(-50%, 15px) scale(1);
opacity: 1;
}
.dropdown-menu.fadeIn.animated a.dropdown-item {
position: relative;
padding: 5px 30px;
}
/*Dropdown*/
.owl-item {
opacity: 0;
}
.owl-item.active {
opacity: 1;
}
.dropdown-content {
display: none;
right: -20%;
background-color: #f9f9f9;
min-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
position: fixed;
top: 50%;
}
.dropdown-content span {
color: black;
padding: 12px 12px;
text-decoration: none;
display: block;
position: relative;
}
.dropdown-content span:after {
border-color: transparent transparent #f1f1f1;
border-image: none;
border-style: solid;
border-width: 10px;
bottom: 100%;
content: "";
right: 25%;
position: absolute;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover a img {
opacity: 0.6;
transition: 0.5s;
}
.dropdown:hover .dropbtn {
}
.myopd {
top: auto !important;
bottom: 105% !important;
left: -75% !important;
border: none;
border-radius: 10px;
box-shadow: none;
padding: 15px 0;
background-color: rgba(255, 255, 255, 0.9);
transition: 500ms ease;
transform: translate(0%, 0px) !important;
-webkit-transition: 500ms ease;
-webkit-transform: translate(0%, -0px) !important;
max-width: 100%;
min-width: 270px;
}
.dropup.open .dropdown-menu {
opacity: 1;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
visibility: visible;
}
.myopd:before {
content: "";
position: absolute;
bottom: -20px;
left: 46%;
transform: translateX(-46%);
-webkit-transform: translateX(-46%);
border: 10px solid transparent;
border-top: 10px solid rgba(255, 255, 255, 0.9);
}
.myopd li.heading {
color: white;
background: #238ae6;
padding: 10px 15px;
margin: -15px 0 0px;
border-radius: 5px 5px 0 0;
}
.dropdown-item:hover {
background-color: #238ae6;
color: #fff;
}
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-toggle:active {
pointer-events: none;
}
/*hero area*/
/* main .container {
position: relative;
z-index: 2;
} */
.index-2{
z-index: 2 !important;
}
.position-relative {
position: relative !important;
}
.hero-menu {
position: relative;
z-index: 2;
}
.dropdown-menu li {
position: relative;
padding: 8px 30px;
}
.dropdown-menu .item:hover {
background-color: #eee;
}
.dropdown-menu li:nth-child(even) {
background: #ddd;
padding: 8px 30px;
}
.dropdown-menu li a:before {
content: "\f046";
font-family: "FontAwesome";
position: absolute;
top: 12px;
left: 10px;
color: #238ae6;
}
/*LIST ARTIKEL*/
.bg-jogja {
background-color: rgb(25 133 114 / 97%);
}
.bg-screen {
background-image: linear-gradient(44deg, rgb(25 133 114 / 97%) 20%, rgba(95, 201, 181, 0.92) 95%, rgba(95, 201, 181, 0.9) 30%) !important;
background-position: center;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
/* z-index: 0; */
transition: 0.5s;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.bg-hero {
background-image: url("../images/bg-hero.jpg") !important;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.bg-thumb {
/* display: block; */
background-image: url("../images/noimage.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-color: black;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
width: 100%;
}
.bg-news {
min-height: 80px;
background-image: url("../images/noimage.png");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-color: black;
}
.two-lines {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.three-lines {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/*EVENT JOGJA*/
.event-jogja {
background-color: white;
border: 3px solid var(--portal-color);
border-radius: 10px;
margin-top: -1px;
}
.style-6 .event-date {
/*display: inherit;*/
margin: 5px;
min-width: 80px;
max-width: 80px;
}
.bottom-center {
position: absolute;
bottom: 5vh;
left: 50%;
transform: translate(-50%, -50%);
}
.event-date .month {
font-family: "Poppins";
font-size: 24px;
color: red;
}
.event-date .date {
font-family: "Poppins";
font-size: 35px;
line-height: 0.7em;
}
.event-date .year {
font-family: "Poppins";
font-size: 15px;
line-height: 2em;
}
.event-content {
margin-bottom: 5px;
}
.event-content .event-title {
padding-top: 5px;
display: block;
/*font-weight: 600;*/
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
line-height: 1.3;
}
.event-content .event-loc {
padding-top: 5px;
display: block;
font-weight: 400;
color: #5c5c5c;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
line-height: 1.3;
}
.wrapside {
max-height: 310px;
overflow: auto;
}
/*GRP*/
#gpr-kominfo-widget-body {
overflow: auto;
height: 300px !important;
}
/*GRP*/
.nav-pills .nav-link {
margin-right: 3px;
}
.nav-pills .nav-link:hover {
background-color: #ddd;
}
.nav-pills .nav-link.active {
background-color: var(--portal-color);
}
/*FORUM*/
/* Chat containers */
.chat-reply {
border: 1px solid #dedede;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
/* Darker chat chat-reply */
.darker {
border-color: #ccc;
}
/* Clear floats */
.chat-reply::after {
content: "";
clear: both;
display: table;
}
/* Style images */
.chat-reply img {
float: left;
max-width: 50px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
/* Style the right image */
.chat-reply img.right {
float: right;
margin-left: 20px;
margin-right: 0;
}
.chat-reply img.left {
float: right;
margin-right: 20px;
margin-left: 0;
}
/* Style time text */
.time-right {
font-size: 10px;
float: right;
color: #aaa;
}
/* Style time text */
.time-left {
font-size: 10px;
/*float: left;*/
margin-left: 5px;
color: #999;
}
.forum-header-list {
padding-bottom: 0.1rem;
}
.forum-chat .users {
font-weight: 600;
}
.forum-topik {
color: var(--portal-color);
}
.forum-topik:hover {
text-decoration: underline;
color: var(--portal-color);
}
.forum-login span {
color: red;
font-style: italic;
}
.forum-time {
font-size: 12px;
}
.forum-reply {
font-size: 12px;
}
.forum-name {
font-size: 12px;
font-weight: 600;
}
.forum-topics {
padding-left: 1.25rem;
padding-top: 0;
padding-bottom: 0.5rem;
}
.forum-topics .card-link {
font-weight: 400;
}
.forum-discussion .card-link h2 {
font-size: 18px;
}
.discussion .rounded-circle {
width: 40px;
}
/*Profile card 4*/
.profile-card-4 .card-img-block {
float: left;
width: 100%;
height: 150px;
overflow: hidden;
}
.profile-card-4 .card-body {
position: relative;
}
.profile-card-4 .card-body .logout:hover {
text-decoration: underline;
}
.profile-card-4 .profile {
border-radius: 50%;
position: absolute;
top: -62px;
left: 50%;
width: 100px;
border: 3px solid rgba(255, 255, 255, 1);
margin-left: -50px;
}
.profile-card-4 .card-img-block {
position: relative;
}
.profile-card-4 .card-img-block > .info-box {
position: absolute;
background: rgba(217, 11, 225, 0.6);
width: 100%;
height: 100%;
color: #fff;
padding: 20px;
text-align: center;
font-size: 14px;
-webkit-transition: 1s ease;
transition: 1s ease;
opacity: 0;
}
.profile-card-4 .card-img-block:hover > .info-box {
opacity: 1;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.profile-card-4 h5 {
font-weight: 600;
color: #d90be1;
color: #d90be1;
}
.profile-card-4 h6 {
font-weight: 400;
}
.profile-card-4 .card-text {
font-weight: 300;
font-size: 15px;
}
.profile-card-4 .icon-block {
float: left;
width: 100%;
}
.profile-card-4 .icon-block a {
text-decoration: none;
}
.profile-card-4 i {
display: inline-block;
font-size: 16px;
color: #d90be1;
text-align: center;
border: 1px solid #d90be1;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
margin: 0 5px;
}
.profile-card-4 i:hover {
background-color: #d90be1;
color: #fff;
}
.title-post {
font-size: 18px;
font-weight: 600;
color: #fff;
line-height: 0ch;
padding-top: 10px;
}
.title-post:hover {
font-size: 18px;
font-weight: 600;
color: #fff;
line-height: 0ch;
padding-top: 10px;
text-decoration: underline;
}
.post-title {
line-height: 0ch !important;
}
/*jurnalis*/
.jurnalis-list .title a {
font-size: 1.25rem;
/* font-family: Roboto; */
}
.jurnalis-list .sub-meta a {
color: #6c757d !important;
font-size: unset;
}
/*Ads list*/
.ads-list .title a {
font-size: 1.25rem;
}
.ads-list .sub-meta a {
color: #6c757d !important;
font-size: unset;
}
/*Post*/
/* .post p {
font-family: Roboto;
font-size: 14px;
} */
/* .post ul {
font-family: Roboto;
font-size: 14px;
}
.post ol {
font-family: Roboto;
font-size: 14px;
} */
.post ul,
.post ol {
line-height: 180%;
}
.post img {
max-width: 800px;
height: auto;
}
.social a {
border: none;
width: 30px;
height: 30px;
line-height: 30px;
padding: 0;
text-align: center;
border-radius: 50%;
}
.meta {
font-size: 13px;
color: #aaa;
}
.meta a {
color: var(--portal-color);
}
.meta > div {
display: inline-block;
margin-right: 5px;
}
.meta .author a {
font-size: 13px;
}
.blog-content p a {
font-weight: bold;
text-decoration: underline;
}
@media (min-width: 1024px) {
body > main {
/* height: 100vh; */
height: 95vh;
}
}
/*@media only screen and (min-width: 1440px) {
main video {
top: 50%;
left: 50%;
}
}*/
@media only screen and (min-width: 768px) {
.h-100 .hero {
/* height: 110% !important; */
}
.mynews {
--ms-flex: 0 0 100%;
flex: 0 0 50%;
max-width: 100%;
}
}
/*@media only screen and (max-width: 1280px){
main video {
top: 65%;
left: 45%;
}
}*/
@media only screen and (max-width: 768px) {
.dropup .myopd {
position: fixed !important;
top: auto !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: auto !important;
-webkit-transform: none !important;
transform: none !important;
background: #fff !important;
float: none !important;
border-radius: 0;
transition: 0s linear !important;
}
.dropup .myopd:before {
display: none !important;
}
#navigasi {
width: 80%;
}
/* #navigasi{width: 100%;} */
.h-100 .hero {
height: 110% !important;
}
}
@media only screen and (max-width: 1024px) {
.navbar-nav {
background-color: #211c0dbf;
margin-top: 18px;
position: relative;
z-index: 9999;
}
.nav-item .nav-link {
color: #ffffff !important;
}
}
/*@media only screen and (min-width: 1280px) and (max-width:1440px) {
main video {
top: 50%;
left: 50%;
}
}*/
@media only screen and (min-width: 426px) and (max-width: 629px) {
#icon-utama {
width: 80px;
}
#navigasi {
width: 90%;
}
}
@media only screen and (min-width: 376px) and (max-width: 425px) {
.h-100 .hero {
height: 110% !important;
}
#navigasi {
width: 100%;
}
#icon-utama {
max-width: 70px;
}
}
@media only screen and (min-width: 300px) and (max-width: 375px) {
#navigasi {
width: 100%;
}
#icon-utama {
max-width: 60px;
}
/*.logo{width: 240px;}*/
/*.logo-white{width: 240px;}*/
.navbar-brand {
max-width: 230px;
margin: 6px 0px 6px 0px;
}
}
@media only screen and (min-width: 300px) and (max-width: 425px) {
.heroarea {
background: url("../images/tugu-jogja.jpg") black no-repeat center
center scroll;
}
/* main video {
display: none;
} */
img#logo-cover {
display: none;
}
}
@media (max-width: 1399.98px) {
#icon-utama {
max-width: 90px;
max-height: 90px;
}
}
.me-2 {
margin-right: 0.5rem !important;
}
.me-3 {
margin-right: 0.75rem !important;
}
.lh-0 {
line-height: 0!important
}
.lh-1 {
line-height: 1!important
}
.lh-sm {
line-height: 1.25!important
}
.lh-base {
line-height: 1.5!important
}
.lh-lg {
line-height: 1.75!important
}
.lh-xl {
line-height: 2!important
}
.lh-xxl {
line-height: 2.25!important
}
.fs-5 {
font-size: 1.15rem!important
}
.fs-6 {
font-size: 1.075rem!important
}
.fs-7 {
font-size: .95rem!important
}
.fs-8 {
font-size: .85rem!important
}
.fs-9 {
font-size: .75rem!important
}
.fs-10 {
font-size: .5rem!important
}
.rounded-10 {
border-radius: 10px !important;
}
.rounded-20 {
border-radius: 20px !important;
}
.rounded-30 {
border-radius: 30px !important;
}
.rounded-top-10 {
border-top-left-radius: 10px!important;
border-top-right-radius: 10px!important;
}
.jss-ribbon {
position: absolute;
padding: 8px 20px;
border-radius: 20px 0px;
transition: bottom ease-in-out 0.4s;
}
.ms-0 {
margin-left: 0!important
}
.ms-1 {
margin-left: .25rem!important
}
.ms-2 {
margin-left: .5rem!important
}
.ms-3 {
margin-left: .75rem!important
}
.ms-4 {
margin-left: 1rem!important
}
.ms-5 {
margin-left: 1.25rem!important
}
.ms-6 {
margin-left: 1.5rem!important
}
.ms-7 {
margin-left: 1.75rem!important
}
.ms-8 {
margin-left: 2rem!important
}
.ms-9 {
margin-left: 2.25rem!important
}
.ms-10 {
margin-left: 2.5rem!important
}
.ms-11 {
margin-left: 2.75rem!important
}
.ms-12 {
margin-left: 3rem!important
}
.ms-13 {
margin-left: 3.25rem!important
}
.ms-14 {
margin-left: 3.5rem!important
}
.ms-15 {
margin-left: 3.75rem!important
}
.ms-16 {
margin-left: 4rem!important
}
.ms-17 {
margin-left: 4.25rem!important
}
.ms-18 {
margin-left: 4.5rem!important
}
.ms-19 {
margin-left: 4.75rem!important
}
.ms-20 {
margin-left: 5rem!important
}
.svg-icon.svg-icon-1 svg {
height: 1.75rem!important;
width: 1.75rem!important
}
.svg-icon.svg-icon-2 svg {
height: 1.5rem!important;
width: 1.5rem!important
}
.svg-icon.svg-icon-3 svg {
height: 1.35rem!important;
width: 1.35rem!important
}
.svg-icon.svg-icon-4 svg {
height: 1.25rem!important;
width: 1.25rem!important
}
.svg-icon.svg-icon-5 svg {
height: 1.15rem!important;
width: 1.15rem!important
}
.svg-icon.svg-icon-6 svg {
height: 1.075rem!important;
width: 1.075rem!important
}
.svg-icon.svg-icon-7 svg {
height: .95rem!important;
width: .95rem!important
}
.svg-icon.svg-icon-8 svg {
height: .85rem!important;
width: .85rem!important
}
.svg-icon.svg-icon-9 svg {
height: .75rem!important;
width: .75rem!important
}
.svg-icon.svg-icon-10 svg {
height: .5rem!important;
width: .5rem!important
}
.svg-icon.svg-icon-base svg {
height: 1rem!important;
width: 1rem!important
}
.svg-icon.svg-icon-fluid svg {
height: 100%!important;
width: 100%!important
}
.svg-icon.svg-icon-2x svg {
height: 2rem!important;
width: 2rem!important
}
.svg-icon.svg-icon-2qx svg {
height: 2.25rem!important;
width: 2.25rem!important
}
.svg-icon.svg-icon-2hx svg {
height: 2.5rem!important;
width: 2.5rem!important
}
.svg-icon.svg-icon-2tx svg {
height: 2.75rem!important;
width: 2.75rem!important
}
.svg-icon.svg-icon-3x svg {
height: 3rem!important;
width: 3rem!important
}
.svg-icon.svg-icon-3qx svg {
height: 3.25rem!important;
width: 3.25rem!important
}
.svg-icon.svg-icon-3hx svg {
height: 3.5rem!important;
width: 3.5rem!important
}
.svg-icon.svg-icon-3tx svg {
height: 3.75rem!important;
width: 3.75rem!important
}
.svg-icon.svg-icon-4x svg {
height: 4rem!important;
width: 4rem!important
}
.svg-icon.svg-icon-4qx svg {
height: 4.25rem!important;
width: 4.25rem!important
}
.svg-icon.svg-icon-4hx svg {
height: 4.5rem!important;
width: 4.5rem!important
}
.svg-icon.svg-icon-4tx svg {
height: 4.75rem!important;
width: 4.75rem!important
}
.svg-icon.svg-icon-5x svg {
height: 5rem!important;
width: 5rem!important
}
.svg-icon.svg-icon-5qx svg {
height: 5.25rem!important;
width: 5.25rem!important
}
.svg-icon.svg-icon-5hx svg {
height: 5.5rem!important;
width: 5.5rem!important
}
.svg-icon.svg-icon-5tx svg {
height: 5.75rem!important;
width: 5.75rem!important
}
@media (min-width: 576px) {
.svg-icon.svg-icon-sm-1 svg {
height:1.75rem!important;
width: 1.75rem!important
}
.svg-icon.svg-icon-sm-2 svg {
height: 1.5rem!important;
width: 1.5rem!important
}
.svg-icon.svg-icon-sm-3 svg {
height: 1.35rem!important;
width: 1.35rem!important
}
.svg-icon.svg-icon-sm-4 svg {
height: 1.25rem!important;
width: 1.25rem!important
}
.svg-icon.svg-icon-sm-5 svg {
height: 1.15rem!important;
width: 1.15rem!important
}
.svg-icon.svg-icon-sm-6 svg {
height: 1.075rem!important;
width: 1.075rem!important
}
.svg-icon.svg-icon-sm-7 svg {
height: .95rem!important;
width: .95rem!important
}
.svg-icon.svg-icon-sm-8 svg {
height: .85rem!important;
width: .85rem!important
}
.svg-icon.svg-icon-sm-9 svg {
height: .75rem!important;
width: .75rem!important
}
.svg-icon.svg-icon-sm-10 svg {
height: .5rem!important;
width: .5rem!important
}
.svg-icon.svg-icon-sm-base svg {
height: 1rem!important;
width: 1rem!important
}
.svg-icon.svg-icon-sm-fluid svg {
height: 100%!important;
width: 100%!important
}
.svg-icon.svg-icon-sm-2x svg {
height: 2rem!important;
width: 2rem!important
}
.svg-icon.svg-icon-sm-2qx svg {
height: 2.25rem!important;
width: 2.25rem!important
}
.svg-icon.svg-icon-sm-2hx svg {
height: 2.5rem!important;
width: 2.5rem!important
}
.svg-icon.svg-icon-sm-2tx svg {
height: 2.75rem!important;
width: 2.75rem!important
}
.svg-icon.svg-icon-sm-3x svg {
height: 3rem!important;
width: 3rem!important
}
.svg-icon.svg-icon-sm-3qx svg {
height: 3.25rem!important;
width: 3.25rem!important
}
.svg-icon.svg-icon-sm-3hx svg {
height: 3.5rem!important;
width: 3.5rem!important
}
.svg-icon.svg-icon-sm-3tx svg {
height: 3.75rem!important;
width: 3.75rem!important
}
.svg-icon.svg-icon-sm-4x svg {
height: 4rem!important;
width: 4rem!important
}
.svg-icon.svg-icon-sm-4qx svg {
height: 4.25rem!important;
width: 4.25rem!important
}
.svg-icon.svg-icon-sm-4hx svg {
height: 4.5rem!important;
width: 4.5rem!important
}
.svg-icon.svg-icon-sm-4tx svg {
height: 4.75rem!important;
width: 4.75rem!important
}
.svg-icon.svg-icon-sm-5x svg {
height: 5rem!important;
width: 5rem!important
}
.svg-icon.svg-icon-sm-5qx svg {
height: 5.25rem!important;
width: 5.25rem!important
}
.svg-icon.svg-icon-sm-5hx svg {
height: 5.5rem!important;
width: 5.5rem!important
}
.svg-icon.svg-icon-sm-5tx svg {
height: 5.75rem!important;
width: 5.75rem!important
}
}
@media (min-width: 768px) {
.svg-icon.svg-icon-md-1 svg {
height:1.75rem!important;
width: 1.75rem!important
}
.svg-icon.svg-icon-md-2 svg {
height: 1.5rem!important;
width: 1.5rem!important
}
.svg-icon.svg-icon-md-3 svg {
height: 1.35rem!important;
width: 1.35rem!important
}
.svg-icon.svg-icon-md-4 svg {
height: 1.25rem!important;
width: 1.25rem!important
}
.svg-icon.svg-icon-md-5 svg {
height: 1.15rem!important;
width: 1.15rem!important
}
.svg-icon.svg-icon-md-6 svg {
height: 1.075rem!important;
width: 1.075rem!important
}
.svg-icon.svg-icon-md-7 svg {
height: .95rem!important;
width: .95rem!important
}
.svg-icon.svg-icon-md-8 svg {
height: .85rem!important;
width: .85rem!important
}
.svg-icon.svg-icon-md-9 svg {
height: .75rem!important;
width: .75rem!important
}
.svg-icon.svg-icon-md-10 svg {
height: .5rem!important;
width: .5rem!important
}
.svg-icon.svg-icon-md-base svg {
height: 1rem!important;
width: 1rem!important
}
.svg-icon.svg-icon-md-fluid svg {
height: 100%!important;
width: 100%!important
}
.svg-icon.svg-icon-md-2x svg {
height: 2rem!important;
width: 2rem!important
}
.svg-icon.svg-icon-md-2qx svg {
height: 2.25rem!important;
width: 2.25rem!important
}
.svg-icon.svg-icon-md-2hx svg {
height: 2.5rem!important;
width: 2.5rem!important
}
.svg-icon.svg-icon-md-2tx svg {
height: 2.75rem!important;
width: 2.75rem!important
}
.svg-icon.svg-icon-md-3x svg {
height: 3rem!important;
width: 3rem!important
}
.svg-icon.svg-icon-md-3qx svg {
height: 3.25rem!important;
width: 3.25rem!important
}
.svg-icon.svg-icon-md-3hx svg {
height: 3.5rem!important;
width: 3.5rem!important
}
.svg-icon.svg-icon-md-3tx svg {
height: 3.75rem!important;
width: 3.75rem!important
}
.svg-icon.svg-icon-md-4x svg {
height: 4rem!important;
width: 4rem!important
}
.svg-icon.svg-icon-md-4qx svg {
height: 4.25rem!important;
width: 4.25rem!important
}
.svg-icon.svg-icon-md-4hx svg {
height: 4.5rem!important;
width: 4.5rem!important
}
.svg-icon.svg-icon-md-4tx svg {
height: 4.75rem!important;
width: 4.75rem!important
}
.svg-icon.svg-icon-md-5x svg {
height: 5rem!important;
width: 5rem!important
}
.svg-icon.svg-icon-md-5qx svg {
height: 5.25rem!important;
width: 5.25rem!important
}
.svg-icon.svg-icon-md-5hx svg {
height: 5.5rem!important;
width: 5.5rem!important
}
.svg-icon.svg-icon-md-5tx svg {
height: 5.75rem!important;
width: 5.75rem!important
}
}
@media (min-width: 992px) {
.svg-icon.svg-icon-lg-1 svg {
height:1.75rem!important;
width: 1.75rem!important
}
.svg-icon.svg-icon-lg-2 svg {
height: 1.5rem!important;
width: 1.5rem!important
}
.svg-icon.svg-icon-lg-3 svg {
height: 1.35rem!important;
width: 1.35rem!important
}
.svg-icon.svg-icon-lg-4 svg {
height: 1.25rem!important;
width: 1.25rem!important
}
.svg-icon.svg-icon-lg-5 svg {
height: 1.15rem!important;
width: 1.15rem!important
}
.svg-icon.svg-icon-lg-6 svg {
height: 1.075rem!important;
width: 1.075rem!important
}
.svg-icon.svg-icon-lg-7 svg {
height: .95rem!important;
width: .95rem!important
}
.svg-icon.svg-icon-lg-8 svg {
height: .85rem!important;
width: .85rem!important
}
.svg-icon.svg-icon-lg-9 svg {
height: .75rem!important;
width: .75rem!important
}
.svg-icon.svg-icon-lg-10 svg {
height: .5rem!important;
width: .5rem!important
}
.svg-icon.svg-icon-lg-base svg {
height: 1rem!important;
width: 1rem!important
}
.svg-icon.svg-icon-lg-fluid svg {
height: 100%!important;
width: 100%!important
}
.svg-icon.svg-icon-lg-2x svg {
height: 2rem!important;
width: 2rem!important
}
.svg-icon.svg-icon-lg-2qx svg {
height: 2.25rem!important;
width: 2.25rem!important
}
.svg-icon.svg-icon-lg-2hx svg {
height: 2.5rem!important;
width: 2.5rem!important
}
.svg-icon.svg-icon-lg-2tx svg {
height: 2.75rem!important;
width: 2.75rem!important
}
.svg-icon.svg-icon-lg-3x svg {
height: 3rem!important;
width: 3rem!important
}
.svg-icon.svg-icon-lg-3qx svg {
height: 3.25rem!important;
width: 3.25rem!important
}
.svg-icon.svg-icon-lg-3hx svg {
height: 3.5rem!important;
width: 3.5rem!important
}
.svg-icon.svg-icon-lg-3tx svg {
height: 3.75rem!important;
width: 3.75rem!important
}
.svg-icon.svg-icon-lg-4x svg {
height: 4rem!important;
width: 4rem!important
}
.svg-icon.svg-icon-lg-4qx svg {
height: 4.25rem!important;
width: 4.25rem!important
}
.svg-icon.svg-icon-lg-4hx svg {
height: 4.5rem!important;
width: 4.5rem!important
}
.svg-icon.svg-icon-lg-4tx svg {
height: 4.75rem!important;
width: 4.75rem!important
}
.svg-icon.svg-icon-lg-5x svg {
height: 5rem!important;
width: 5rem!important
}
.svg-icon.svg-icon-lg-5qx svg {
height: 5.25rem!important;
width: 5.25rem!important
}
.svg-icon.svg-icon-lg-5hx svg {
height: 5.5rem!important;
width: 5.5rem!important
}
.svg-icon.svg-icon-lg-5tx svg {
height: 5.75rem!important;
width: 5.75rem!important
}
}
@media (min-width: 1200px) {
.svg-icon.svg-icon-xl-1 svg {
height:1.75rem!important;
width: 1.75rem!important
}
.svg-icon.svg-icon-xl-2 svg {
height: 1.5rem!important;
width: 1.5rem!important
}
.svg-icon.svg-icon-xl-3 svg {
height: 1.35rem!important;
width: 1.35rem!important
}
.svg-icon.svg-icon-xl-4 svg {
height: 1.25rem!important;
width: 1.25rem!important
}
.svg-icon.svg-icon-xl-5 svg {
height: 1.15rem!important;
width: 1.15rem!important
}
.svg-icon.svg-icon-xl-6 svg {
height: 1.075rem!important;
width: 1.075rem!important
}
.svg-icon.svg-icon-xl-7 svg {
height: .95rem!important;
width: .95rem!important
}
.svg-icon.svg-icon-xl-8 svg {
height: .85rem!important;
width: .85rem!important
}
.svg-icon.svg-icon-xl-9 svg {
height: .75rem!important;
width: .75rem!important
}
.svg-icon.svg-icon-xl-10 svg {
height: .5rem!important;
width: .5rem!important
}
.svg-icon.svg-icon-xl-base svg {
height: 1rem!important;
width: 1rem!important
}
.svg-icon.svg-icon-xl-fluid svg {
height: 100%!important;
width: 100%!important
}
.svg-icon.svg-icon-xl-2x svg {
height: 2rem!important;
width: 2rem!important
}
.svg-icon.svg-icon-xl-2qx svg {
height: 2.25rem!important;
width: 2.25rem!important
}
.svg-icon.svg-icon-xl-2hx svg {
height: 2.5rem!important;
width: 2.5rem!important
}
.svg-icon.svg-icon-xl-2tx svg {
height: 2.75rem!important;
width: 2.75rem!important
}
.svg-icon.svg-icon-xl-3x svg {
height: 3rem!important;
width: 3rem!important
}
.svg-icon.svg-icon-xl-3qx svg {
height: 3.25rem!important;
width: 3.25rem!important
}
.svg-icon.svg-icon-xl-3hx svg {
height: 3.5rem!important;
width: 3.5rem!important
}
.svg-icon.svg-icon-xl-3tx svg {
height: 3.75rem!important;
width: 3.75rem!important
}
.svg-icon.svg-icon-xl-4x svg {
height: 4rem!important;
width: 4rem!important
}
.svg-icon.svg-icon-xl-4qx svg {
height: 4.25rem!important;
width: 4.25rem!important
}
.svg-icon.svg-icon-xl-4hx svg {
height: 4.5rem!important;
width: 4.5rem!important
}
.svg-icon.svg-icon-xl-4tx svg {
height: 4.75rem!important;
width: 4.75rem!important
}
.svg-icon.svg-icon-xl-5x svg {
height: 5rem!important;
width: 5rem!important
}
.svg-icon.svg-icon-xl-5qx svg {
height: 5.25rem!important;
width: 5.25rem!important
}
.svg-icon.svg-icon-xl-5hx svg {
height: 5.5rem!important;
width: 5.5rem!important
}
.svg-icon.svg-icon-xl-5tx svg {
height: 5.75rem!important;
width: 5.75rem!important
}
}
@media (min-width: 1400px) {
.svg-icon.svg-icon-xxl-1 svg {
height:1.75rem!important;
width: 1.75rem!important
}
.svg-icon.svg-icon-xxl-2 svg {
height: 1.5rem!important;
width: 1.5rem!important
}
.svg-icon.svg-icon-xxl-3 svg {
height: 1.35rem!important;
width: 1.35rem!important
}
.svg-icon.svg-icon-xxl-4 svg {
height: 1.25rem!important;
width: 1.25rem!important
}
.svg-icon.svg-icon-xxl-5 svg {
height: 1.15rem!important;
width: 1.15rem!important
}
.svg-icon.svg-icon-xxl-6 svg {
height: 1.075rem!important;
width: 1.075rem!important
}
.svg-icon.svg-icon-xxl-7 svg {
height: .95rem!important;
width: .95rem!important
}
.svg-icon.svg-icon-xxl-8 svg {
height: .85rem!important;
width: .85rem!important
}
.svg-icon.svg-icon-xxl-9 svg {
height: .75rem!important;
width: .75rem!important
}
.svg-icon.svg-icon-xxl-10 svg {
height: .5rem!important;
width: .5rem!important
}
.svg-icon.svg-icon-xxl-base svg {
height: 1rem!important;
width: 1rem!important
}
.svg-icon.svg-icon-xxl-fluid svg {
height: 100%!important;
width: 100%!important
}
.svg-icon.svg-icon-xxl-2x svg {
height: 2rem!important;
width: 2rem!important
}
.svg-icon.svg-icon-xxl-2qx svg {
height: 2.25rem!important;
width: 2.25rem!important
}
.svg-icon.svg-icon-xxl-2hx svg {
height: 2.5rem!important;
width: 2.5rem!important
}
.svg-icon.svg-icon-xxl-2tx svg {
height: 2.75rem!important;
width: 2.75rem!important
}
.svg-icon.svg-icon-xxl-3x svg {
height: 3rem!important;
width: 3rem!important
}
.svg-icon.svg-icon-xxl-3qx svg {
height: 3.25rem!important;
width: 3.25rem!important
}
.svg-icon.svg-icon-xxl-3hx svg {
height: 3.5rem!important;
width: 3.5rem!important
}
.svg-icon.svg-icon-xxl-3tx svg {
height: 3.75rem!important;
width: 3.75rem!important
}
.svg-icon.svg-icon-xxl-4x svg {
height: 4rem!important;
width: 4rem!important
}
.svg-icon.svg-icon-xxl-4qx svg {
height: 4.25rem!important;
width: 4.25rem!important
}
.svg-icon.svg-icon-xxl-4hx svg {
height: 4.5rem!important;
width: 4.5rem!important
}
.svg-icon.svg-icon-xxl-4tx svg {
height: 4.75rem!important;
width: 4.75rem!important
}
.svg-icon.svg-icon-xxl-5x svg {
height: 5rem!important;
width: 5rem!important
}
.svg-icon.svg-icon-xxl-5qx svg {
height: 5.25rem!important;
width: 5.25rem!important
}
.svg-icon.svg-icon-xxl-5hx svg {
height: 5.5rem!important;
width: 5.5rem!important
}
.svg-icon.svg-icon-xxl-5tx svg {
height: 5.75rem!important;
width: 5.75rem!important
}
}
@media (max-width: 992px) {
.cs-hero-change {
margin-bottom: 90px !important;
margin-right: -15px !important;
}
}
.cs-hero-change {
bottom: 30px;
cursor: pointer;
padding: 0px;
position: fixed;
user-select: none;
z-index: 2147483000 !important;
}
.cs-hero-change.cs-hero-right {
right: 20px;
}
.hero-switch {
height: 0;
width: 0;
visibility: hidden;
}
.hero-switch-label {
cursor: pointer;
text-indent: -9999px;
width: 38px;
height: 22px;
background: grey;
display: block;
border-radius: 50px;
position: relative;
box-shadow: 0 9px 30px rgba(0, 0, 0, 0.20) !important;
}
.hero-switch-label:after {
content: '';
position: absolute;
top: 4px;
left: 5px;
width: 14px;
height: 14px;
background: #fff;
border-radius: 20px;
transition: 0.5s;
box-shadow: 0 9px 30px rgba(0, 0, 0, 0.20) !important;
}
.hero-switch:checked + .hero-switch-label {
background: #13998a;
}
.hero-switch:checked + .hero-switch-label:after {
top: calc(100% - 19px);
left: calc(100% - 4px);
transform: translateX(-100%);
}
.fit-screen {
min-height: calc(70vh - 10px);
}
.play-btn {
width: 100px;
height: 100px;
background: radial-gradient(#F1416C 50%, rgba(217, 33, 78, 0.4) 52%);
border-radius: 50%;
display: block;
position: absolute;
overflow: hidden;
}
.translate-middle {
transform: translate(-50%,-50%) !important;
}
.rounded-50 {
border-radius: 50px !important;
}
.start-50 {
left: 50% !important;
}
.top-50 {
top: 50% !important;
}
.position-absolute {
position: absolute !important;
}
.small-play-btn::before, .play-btn::before {
content: '';
position: absolute;
width: 130px;
height: 130px;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation: pulsate-btn 2s;
animation: pulsate-btn 2s;
animation-iteration-count: 1;
-webkit-animation-direction: forwards;
animation-direction: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: steps;
animation-timing-function: steps;
opacity: 1;
border-radius: 50%;
border: 5px solid rgba(217, 33, 78, 0.7);
top: -15%;
left: -15%;
background: rgba(198, 16, 0, 0);
}
.small-play-btn::after, .play-btn::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-40%) translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #fff;
z-index: 100;
transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
@-webkit-keyframes pulsate-btn {
0% {
transform: scale(0.6, 0.6);
opacity: 1;
}
100% {
transform: scale(1, 1);
opacity: 0;
}
}
@keyframes pulsate-btn {
0% {
transform: scale(0.6, 0.6);
opacity: 1;
}
100% {
transform: scale(1, 1);
opacity: 0;
}
}