:root { /* BUTTON PARENT CONTAINER --> For demo. */ --button-container-max-width: 200px; /* BUTTON MAX WIDTH - % of parent container width or fixed pixels Adjust other variable - i.e. width/height/font-size - so other shit fits. lol */ --button-max-width: 100%; /* BUTTON DEFAULT MIN-HEIGHT i.e."Mobile First" */ --button-min-height: 65px; /* BUTTON LARGE SCREEN MIN-HEIGHT Add additional breakpoints as needed. */ --button-large-screen-min-height: 100px; /* LEFT BUTTON PANEL DEFAULT WIDTH - i.e."Mobile First" */ --button-div-width: 50px; /* LEFT BUTTON PANEL LARGE SCREEN WIDTH */ --button-div-large-screen-width: 35%; --button-text-font: Montserrat; --button-text-color: rgba(255, 255, 255, 1); /* BUTTON BRIGHTNESS - Easier on the eyes --button-brightness: 0.95; --button-border-color: rgba(255, 255, 255, 0.45); --button-border-width: 1px; --button-background-color: rgba(60, 59, 110, 1); --button-background-hover-color: rgba(178, 34, 52, 1); --button-background-active-color: rgba(137, 11, 25, 1); /* LEFT BUTTON PANEL STYLES The DIV in BUTTON HTML mark-up is the left button panel. The SPAN element is the overlay for the left panel. */ --button-div-background-color: rgb(255, 255, 255); --button-div-background-hover-color: rgb(1, 150, 68); --button-div-border-color: rgb(163, 162, 162); /* RIGHT BORDER WIDTH OF DIV Set to 0px for demo. */ --button-div-right-border-width: 0px; /* LEFT BUTTON PANEL -- SPAN OVERLAY SPAN background color set to transparent when animated */ --button-span-background-color: rgba(0, 0, 0, 0.25); } :root { --vs-primary: 29 92 255; } @font-face { font-family: 'Poppins'; src: url('fontface/Poppins-Regular.ttf'); } @font-face { font-family: 'Poppins-Bold'; src: url('fontface/Poppins-ExtraBold.ttf'); } @font-face { font-family: 'Insta'; src: url('fontface/Instagram_Sans.ttf'); } @font-face { font-family: 'Insta-Bold'; src: url('fontface/Instagram_Sans_Bold.ttf'); } #header_frame {background:linear-gradient(-50deg, #fd2d2de0, #30497a, #30497a, #fd2d2de0); background-size: 400% 400%; height:60px; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}} @-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}} @keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}; } .back_border_input_blue { background-color: #33dffd47; border: 1px solid #32d9fb; padding: .65rem 1rem; height:2.8rem; } .back_border_input_blue:focus { border: 1px solid rgb(2, 155, 179); } .back_border_input_blue:active { border: 1px solid rgb(2, 155, 179); } .back_border_input_blue:hover { border: 1px solid rgb(2, 155, 179); } .back_border_input_blue:disabled { border: 1px solid rgb(138, 139, 139); } .back_border_input_green { background-color: #d8fd3347; border: 1px solid #b1fb32; padding: .65rem 1rem; height:2.8rem; } .back_border_input_green:focus { border: 1px solid rgb(117, 179, 2); } .back_border_input_green:active { border: 1px solid rgb(117, 179, 2); } .back_border_input_green:hover { border: 1px solid rgb(117, 179, 2); } .back_border_input_green:disabled { border: 1px solid rgb(138, 139, 139); } .back_border_input_red { background-color: #fd337647; border: 1px solid #fb3272; padding: .65rem 1rem; height:2.8rem; } .back_border_input_red:focus { border: 1px solid rgb(179, 2, 73); } .back_border_input_red:active { border: 1px solid rgb(179, 2, 73); } .back_border_input_red:hover { border: 1px solid rgb(179, 2, 73); } .back_border_input_red:disabled { border: 1px solid rgb(138, 139, 139); } .back_border_input_silver { background-color: #d4d4d447; border: 1px solid #787878; padding: .65rem 1rem; height:2.8rem; } .back_border_input_silver:focus { border: 1px solid rgb(2, 155, 179); } .back_border_input_silver:active { border: 1px solid rgb(2, 155, 179); } .back_border_input_silver:hover { border: 1px solid rgb(2, 155, 179); } .back_border_input_silver:disabled { border: 1px solid rgb(138, 139, 139); } .back_border_input_silver2 { background-color: #d4d4d447; border: 1px solid #787878; padding: .65rem 1rem; } .back_border_input_silver2:focus { border: 1px solid rgb(2, 155, 179); } .back_border_input_silver2:active { border: 1px solid rgb(2, 155, 179); } .back_border_input_silver2:hover { border: 1px solid rgb(2, 155, 179); } .back_border_input_silver2:disabled { border: 1px solid rgb(138, 139, 139); } .bottom_green { border-bottom: 4px solid #c26b00ce !important; cursor: not-allowed; } .bottom_blue { border-bottom: 4px solid #830846 !important; cursor: not-allowed; } .bottom_red { border-bottom: 4px solid #087f83c9 !important; cursor: not-allowed; } .font_poppin{ font-family:'Poppins'; } .font_poppin_bold{ font-family:'Poppins-Bold'; } .font_insta{ font-family:'Insta'; } .font_insta_bold{ font-family:'Insta-Bold'; } .font_opensans{ font-family: 'Open Sans', sans-serif; } .font_colwhite_blue_a{ color: #ffffff; } .font_colwhite_blue_a:hover{ color: #00e5ff; } .font_colwhite_green_a{ color: #ffffff; } .font_colwhite_green_a:hover{ color: #b7ff00; } .font_colwhite_red_a{ color: #ffffff; } .font_colwhite_red_a:hover{ color: #ff0077; } .bodyku { /*background: linear-gradient(to bottom, #B721FF, #f57b2a, #fec051, #FEE140, #FA709A );*/ background-color:#fee14020; background-size: 100%; background-repeat: repeat; } .bodyku:before{ content:''; position: fixed; top: 0; bottom: 0; width: 100%; z-index: -1; background-color:#fee14020; /*background: linear-gradient(to bottom, #FA709A, #FEE140, #fec051, #f57b2a, #B721FF );*/ } /* BUTTON PARENT CONTAINER Mark-Up for demo. */ .button-container { width: 100%; max-width: var(--button-container-max-width); margin: 0 auto; } /* BUTTON MARK-UP Replace "unique-button-class" to whatever. HINT: Search and replace. Don't forget! - If you change the button class name in the CSS, change the button class name in the HTML too. lol */ .unique-button-class { position: relative; width: 100%; max-width: var(--button-max-width); min-height: var(--button-min-height); border: var(--button-border-width) solid var(--button-border-color); padding-left: calc(var(--button-div-width) + 5px); background-color: var(--button-background-color); color: #292929; filter: brightness(var(--button-brightness)); text-align: left; overflow: hidden; cursor: pointer; transition: background-color 300ms ease; } .unique-button-class:hover { background-color: var(--button-background-hover-color); color: #ffffff; } /* BUTTON FOCUS AND ACTIVE STATES Disabled pointer events and brought down opacity on active button. */ .unique-button-class:focus, .unique-button-class.active { background-color: var(--button-background-active-color); opacity: 0.9; pointer-events: none; } /* BUTTON MEDIA QUERY FOR LARGE SCREENS --> AS NEEDED */ @media only screen and (min-width: 980px) { .unique-button-class { min-height: var(--button-large-screen-min-height); padding-left: calc(var(--button-div-large-screen-width) + 5px); } } .unique-button-class div { width: var(--button-div-width); position: absolute; display: grid; justify-content: center; align-content: center; text-align: center; top: 0; left: 0; bottom: 0; height: 100%; background-color: var(--button-div-background-color); border-right: var(--button-div-right-border-width) solid var(--button-div-border-color); background-size: cover; background-repeat: no-repeat; background-position: center; } /* SPAN IN HTML IS AN OVERLAY FOR BACKGROUND IMAGE */ .unique-button-class span { /*background: var(--button-span-background-color) ;*/ width: 70%; height: 70%; position: absolute; display: block; justify-content: center; align-content: center; text-align: center; margin-left: 15%; margin-top: 15%; } @media only screen and (min-width: 980px) { .unique-button-class div { width: var(--button-div-large-screen-width); } .unique-button-class span { font-size: 2vw; } } /* BUTTON DIV HOVER EFFECT This is the left panel */ .unique-button-class:hover div, .unique-button-class:focus div, .unique-button-class.active div { background-color: var(--button-div-background-hover-color); transition: background-color 300ms ease; } /* BUTTON SPAN ANIMATED SPIN HOVER EFFECT This is the left panel with class "spin" */ .unique-button-class.spin:hover div span, .unique-button-class.spin:focus div span, .unique-button-class.spin.active div span { animation: spin 3s infinite; background:transparent; } /* SPIN ANIMATION */ @keyframes spin { 0% { transform: rotate3d(0, 0, 0, 0deg); } 50% { transform: rotate3d(0, 1, 0, 360deg); } 100% { transform: rotate3d(0, 0, 0, 0deg); } } /* BUTTON PRESS EFFECT Transform scale to create a button press effect when clicked. */ .unique-button-class:active { transform: scale(0.98); } /* BUTTON TYPOGRAPHY */ .unique-button-class div { font-size: 30px; letter-spacing: 1px; } .unique-button-class h2, .unique-button-class h3 { line-height: 1; margin: 0; font-family: var(--button-text-font); } .unique-button-class h2 { margin-top:25px; font-size: 16px; font-weight: 600; text-transform: uppercase; padding-bottom: 3px; text-align: center; } .unique-button-class h3 { font-size: 15px; font-weight: 400; text-align: center; } @media (max-width: 576px) { .margin_header{ margin-top:185px; } .margin_header2{ margin-top:185px; } .margin_header3{ margin-top:185px; } .margin_header_main{ margin-top:70px; } .title_width{ width:100%; } .navwidth{ width:550px; } .logo { float: left; margin: 0 auto 0 0 !important; height:30px; position: relative; z-index: 10; } .breadcrumb1 { -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; border-radius: 0.25rem; } .image-slider { height: 270px; background-position: center; opacity: 0.8; } .container, .container-sm { max-width: 540px; } .logo-image { float: left; width: auto; height: 13vh; margin: 10px 10px 0 10px; padding: 10px; } .logo h1 { font-family: 'ManifoldCF-Medium'; font-size: 150%; margin: 0 0; padding: 0; line-height: 1.1; font-weight: bold; color: #fff; text-shadow: 3px 2px 5px #000; -webkit-text-stroke: 1px transparent; } .logo h2 { font-size: 100%; margin: 5px 0 0; padding: 0; line-height: 1.1; font-weight: normal; color: #fff; text-shadow: -1px -1px 0 rgba(0,0,0,0.1), 1px -1px 0 rgba(0,0,0,0.1), -1px 1px 0 rgba(0,0,0,0.1), 1px 1px 0 rgba(0,0,0,0.1); } .navbarku { position: fixed; width: 100%; } .footer-bottom-line { visibility: hidden; } .hide_gadget{ visibility: hidden; display: none; } .show_gadget{ visibility: visible; display: block; } .flexleft_gadget { visibility: hidden; display: none; } .flexleft2 { display: block; justify-content: center; align-items: center; } .flexright2 { display: block; justify-content: center; align-items: center; } .margin_fb{ margin-left:35%; } .top_main_menu{ top:0px; transition: top 1.0s; } .top_main_menu2{ top:0%; transition: height 1.0s ease; animation: fadeInmenu 3s; } .mainmenu:before{ } .mainmenu:after{ } .mainmenu { width: 100%; position: relative; z-index: 899; margin-top: 48px; } .mainmenu:before { content: ""; position: absolute; left: 0; top: 0; height: 55px; width: 5% !important; z-index: 100 !important; } .mainmenu:after { content: ""; position: absolute; right: 0; top: 0; height: 55px; width: 5% !important; z-index: 100 !important; } .bgcolor-1{ height:200px; } .logo h1 { font-family: 'ManifoldCF-Medium'; font-size: 180%; margin: 0 0; padding: 0; line-height: 1.1; font-weight: bold; color: #ffffff; text-shadow: 3px 2px 5px #000; -webkit-text-stroke: 1px transparent; } .logo h2 { font-size: 80%; margin: 5px 0 0; padding: 0; line-height: 1.1; font-weight: normal; color: #fff; text-shadow: -1px -1px 0 rgba(0,0,0,0.1), 1px -1px 0 rgba(0,0,0,0.1), -1px 1px 0 rgba(0,0,0,0.1), 1px 1px 0 rgba(0,0,0,0.1); } .logo_footer{ margin-top:-40px; margin-left:44%; width:60px; height:auto; box-shadow: 0 4px 4px rgba(0,0,0,.125), 0 4px 6px rgba(0,0,0,0.7); border-radius:0px 0px 35px 35px; background-color: #fff; text-align: center; display: flex !important; justify-content: center; align-items: center; } .footer-bottom-line { position: absolute; left: 100%; top: 0; bottom: 0; width: 1px; background: #fff; opacity: 0.5; } .height_carousel{ height:270px; overflow: hidden; } .slide-effect2 { position: absolute; bottom: 0px; z-index: 10; color: #fff; display: block; text-align: center; width:100%; height:70vh; } .slide-effect3 { position: absolute; top: 50%; left: 50%; z-index: 10; color: #fff; display: block; transform: translate(-50%, -50%); width:90%; } .slide-effect4 { position: absolute; background: #2e68a19e; background: -moz-linear-gradient(180deg,#034485df 20%,#2e67a1df 50%,#034485df 80%); background: -webkit-linear-gradient(180deg,#034485df 20%,#2e67a1df 50%,#034485df 80%); background: linear-gradient(180deg,#034485df 20%,#2e67a1df 50%,#034485df 80%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2e68a19e",endColorstr="#53010194",GradientType=1); top: 10%; left: 50%; z-index: 10; color: #fff; display: block; transform: translate(-50%, -50%); width:90%; height:auto; border-radius: 15px; } .padding_textslide{ top:0; left:0; } .product-image1 { max-width: 100%; height: auto; width: 100%; vertical-align: middle; } .product-row { max-width: 100%; height: auto; width: 100%; } .album-title { position: absolute; z-index: 2; padding: 10px 10px; left:10%; top: 2%; } .album-title:before { content: ""; position: absolute; left: 0; bottom: 10px; width: 100px; height: 40px; border-left: #ffffff 4px solid; border-bottom: #ffffff 4px solid; } .album-title:after { content: ""; position: absolute; right: 15px; top: 5px; width: 100px; height: 40px; border-top: #ffffff 4px solid; } .album-title h2 { font-size: 120%; margin: 10px 10px 10px 0; padding: 0; line-height: 1; font-weight: bold; } .album-title span { font-size: 100%; margin: 10px 10px 10px 0; padding: 0; line-height: 1; font-weight: bold; color: #ffffff; } .slideDown { top:10px; left:0; animation: fadeIn 7s; transform: translateY(-180px); } .slideUp { top:10px; left:0; animation: fadeIn 7s; transform: translateY(0px); } .slideUp2 { top:10px; left:0; animation: fadeIn 7s; transform: translateY(0px); } .slideFadein{ top:10px; left:0; transform: translateY(-280px); } @keyframes slideUp { 0% {transform: translateY(20px);;opacity:0;} 5% {transform: translateY(50px);;opacity:0.5;} 100% {transform: translateY(200px);opacity:1;} } @keyframes slideDown { 0% {transform: translateY(10px);} 100% {transform: translateY(10px);opacity:1;} } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .carousel-control-prev{ display:none; } .carousel-control-next{ display:none; } .margin_jelajah{ margin:2%; padding:10px; } } @media (max-width: 768px) { .margin_header{ margin-top:2px; } .margin_header2{ margin-top:80px; } .margin_header3{ margin-top:60px; } .margin_header_main{ margin-top:70px; } .title_width{ width:100%; } .navwidth{ width:550px; } .logo { float: left; margin: 0 auto 0 0 !important; height:30px; position: relative; z-index: 10; } .breadcrumb1 { -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; border-radius: 0.25rem; } .image-slider { height: 270px; background-position: center; opacity: 0.8; } .container, .container-sm { max-width: 540px; } .logo-image { float: left; width: auto; height: 13vh; margin: 10px 10px 0 10px; padding: 10px; } .logo h1 { font-family: 'ManifoldCF-Medium'; font-size: 150%; margin: 0 0; padding: 0; line-height: 1.1; font-weight: bold; color: #fff; text-shadow: 3px 2px 5px #000; -webkit-text-stroke: 1px transparent; } .logo h2 { font-size: 100%; margin: 5px 0 0; padding: 0; line-height: 1.1; font-weight: normal; color: #fff; text-shadow: -1px -1px 0 rgba(0,0,0,0.1), 1px -1px 0 rgba(0,0,0,0.1), -1px 1px 0 rgba(0,0,0,0.1), 1px 1px 0 rgba(0,0,0,0.1); } .navbarku { position: fixed; width: 100%; } .footer-bottom-line { visibility: hidden; } .hide_gadget{ visibility: hidden; display: none; } .show_gadget{ visibility: visible; display: block; } .flexleft_gadget { visibility: hidden; display: none; } .flexleft2 { display: block; justify-content: center; align-items: center; } .flexright2 { display: block; justify-content: center; align-items: center; } .margin_fb{ margin-left:35%; } .top_main_menu{ top:0px; transition: top 1.0s; } .top_main_menu2{ top:0%; transition: height 1.0s ease; animation: fadeInmenu 3s; } .mainmenu:before{ } .mainmenu:after{ } .mainmenu { width: 100%; position: relative; z-index: 899; margin-top: 48px; } .mainmenu:before { content: ""; position: absolute; left: 0; top: 0; height: 55px; width: 5% !important; z-index: 100 !important; } .mainmenu:after { content: ""; position: absolute; right: 0; top: 0; height: 55px; width: 5% !important; z-index: 100 !important; } .bgcolor-1{ height:200px; } .logo h1 { font-family: 'ManifoldCF-Medium'; font-size: 180%; margin: 0 0; padding: 0; line-height: 1.1; font-weight: bold; color: #ffffff; text-shadow: 3px 2px 5px #000; -webkit-text-stroke: 1px transparent; } .logo h2 { font-size: 80%; margin: 5px 0 0; padding: 0; line-height: 1.1; font-weight: normal; color: #fff; text-shadow: -1px -1px 0 rgba(0,0,0,0.1), 1px -1px 0 rgba(0,0,0,0.1), -1px 1px 0 rgba(0,0,0,0.1), 1px 1px 0 rgba(0,0,0,0.1); } .logo_footer{ margin-top:-40px; margin-left:44%; width:60px; height:auto; box-shadow: 0 4px 4px rgba(0,0,0,.125), 0 4px 6px rgba(0,0,0,0.7); border-radius:0px 0px 35px 35px; background-color: #fff; text-align: center; display: flex !important; justify-content: center; align-items: center; } .footer-bottom-line { position: absolute; left: 100%; top: 0; bottom: 0; width: 1px; background: #fff; opacity: 0.5; } .height_carousel{ height:270px; overflow: hidden; } .slide-effect2 { position: absolute; bottom: 0px; z-index: 10; color: #fff; display: block; text-align: center; width:100%; height:70vh; } .slide-effect3 { position: absolute; top: 50%; left: 50%; z-index: 10; color: #fff; display: block; transform: translate(-50%, -50%); width:90%; } .slide-effect4 { position: absolute; background: #2e68a19e; background: -moz-linear-gradient(180deg,#034485df 20%,#2e67a1df 50%,#034485df 80%); background: -webkit-linear-gradient(180deg,#034485df 20%,#2e67a1df 50%,#034485df 80%); background: linear-gradient(180deg,#034485df 20%,#2e67a1df 50%,#034485df 80%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2e68a19e",endColorstr="#53010194",GradientType=1); top: 10%; left: 50%; z-index: 10; color: #fff; display: block; transform: translate(-50%, -50%); width:70%; height:auto; border-radius: 15px; } .padding_textslide{ top:0; left:0; } .product-image1 { max-width: 100%; height: auto; width: 100%; vertical-align: middle; } .product-row { max-width: 100%; height: auto; width: 100%; } .album-title { position: absolute; z-index: 2; padding: 10px 10px; left:10%; top: 2%; } .album-title:before { content: ""; position: absolute; left: 0; bottom: 10px; width: 100px; height: 40px; border-left: #ffffff 4px solid; border-bottom: #ffffff 4px solid; } .album-title:after { content: ""; position: absolute; right: 15px; top: 5px; width: 100px; height: 40px; border-top: #ffffff 4px solid; } .album-title h2 { font-size: 120%; margin: 10px 10px 10px 0; padding: 0; line-height: 1; font-weight: bold; } .album-title span { font-size: 100%; margin: 10px 10px 10px 0; padding: 0; line-height: 1; font-weight: bold; color: #ffffff; } .slideDown { top:10px; left:0; animation: fadeIn 7s; transform: translateY(-180px); } .slideUp { top:10px; left:0; animation: fadeIn 7s; transform: translateY(0px); } .slideUp2 { top:10px; left:0; animation: fadeIn 7s; transform: translateY(0px); } .slideFadein{ top:10px; left:0; transform: translateY(-280px); } @keyframes slideUp { 0% {transform: translateY(20px);;opacity:0;} 5% {transform: translateY(50px);;opacity:0.5;} 100% {transform: translateY(200px);opacity:1;} } @keyframes slideDown { 0% {transform: translateY(10px);} 100% {transform: translateY(10px);opacity:1;} } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .carousel-control-prev{ display:none; } .carousel-control-next{ display:none; } .margin_jelajah{ margin:2%; padding:10px; } } @media (min-width: 992px) { .margin_header{ margin-top:8px; } .margin_header2{ margin-top:68px; } .margin_header3{ margin-top:60px; } .margin_header_main{ margin-top:0px; } .title_width{ width:40%; } .navwidth{ width:300px; } .logo { float: left; /*margin: 10px auto 0 0 !important;*/ height:30px; position: relative; z-index: 10; } .breadcrumb1 { -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; border-radius: 0.25rem; } .image-slider { height: 550px; background-position: center; background-size: cover; object-fit: cover; } .logo-image { float: left; width: auto; height: 10vh; margin: 10px 10px 0 0; } .navbarku { position: fixed; width: 100%; } .container-fluid{ margin-top: 0%; } .flexleft_gadget { display: flex !important; justify-content: left; align-items: center; } .flexleft2 { display: flex !important; justify-content: left; align-items: center; margin-left: 20px; } .flexright2 { display: flex !important; justify-content: right; align-items: center; margin-right: 20px; } .flex_right { justify-content: right; } .margin_fb{ margin-left:44%; } .image_modal{ width:861px; height:574px; object-fit: cover; } .mainmenu:before{ } .mainmenu:after{ } .mainmenu { width: 100%; position: relative; z-index: 899; margin-top: -25px; } .mainmenu:before { content: ""; position: absolute; left: 0; top: 0; height: 55px; width: 5% !important; z-index: 100 !important; } .mainmenu:after { content: ""; position: absolute; right: 0; top: 0; height: 55px; width: 5% !important; z-index: 100 !important; } .top_main_menu{ top:0px; transition: top 1.0s; } .top_main_menu2{ top:0%; transition: height 1.0s ease; animation: fadeInmenu 3s; } @keyframes fadeInmenu { 0% { opacity: 0; } 100% { opacity: 1; } } .logo h1 { font-family: 'ManifoldCF-Medium'; font-size: 200%; margin: 0 0; padding: 0; line-height: 1.1; font-weight: bold; color: #fff; text-shadow: 3px 2px 5px #000; -webkit-text-stroke: 1px transparent; } .logo h2 { font-size: 90%; margin: 5px 0 0; padding: 0; line-height: 1.1; font-weight: normal; color: #fff; text-shadow: -1px -1px 0 rgba(0,0,0,0.1), 1px -1px 0 rgba(0,0,0,0.1), -1px 1px 0 rgba(0,0,0,0.1), 1px 1px 0 rgba(0,0,0,0.1); } .logo_footer{ margin-top:-40px; margin-left:47%; width:60px; height:auto; box-shadow: 0 4px 4px rgba(0,0,0,.125), 0 4px 6px rgba(0,0,0,0.7); border-radius:0px 0px 35px 35px; background-color: #fff; text-align: center; display: flex !important; justify-content: center; align-items: center; } .footer-bottom-line { position: absolute; left: 100%; top: 0; bottom: 0; width: 1px; background: #fff; opacity: 0.5; } .hide_gadget{ visibility: visible; } .show_gadget{ visibility: hidden; display: none; } .margin_right_navbar{ margin-right: 5%; } .height_carousel{ height: 550px; width:100%; overflow: hidden; } .image-slider_p { height: 42vh; width:100%; object-fit: cover; } .height_carousel_p{ height:42vh; overflow: hidden; } .slide-effect2 { position: absolute; bottom: 0px; z-index: 10; color: #fff; display: block; text-align: center; width:100%; height:90vh; } .slide-effect3 { position: absolute; top: 50%; left: 50%; z-index: 10; color: #fff; display: block; transform: translate(-50%, -50%); width:90%; } .slide-effect4 { position: absolute; background: #2e68a19e; background: -moz-linear-gradient(180deg,#034485df 20%,#2e67a1df 50%,#034485df 80%); background: -webkit-linear-gradient(180deg,#034485df 20%,#2e67a1df 50%,#034485df 80%); background: linear-gradient(180deg,#034485df 20%,#2e67a1df 50%,#034485df 80%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2e68a19e",endColorstr="#53010194",GradientType=1); top: 40%; left: 50%; z-index: 10; color: #fff; display: block; transform: translate(-50%, -50%); width:70%; height:auto; border-radius: 15px; } .padding_textslide{ top:0; left:0; } .product-image1 { max-width: 100%; height: 150px; width: 100%; vertical-align: middle; } .product-row { max-width: 100%; height: 270px; width: 100%; } .album-title { position: absolute; z-index: 2; padding: 10px 10px; left:10%; top: 5%; } .album-title:before { content: ""; position: absolute; left: 0; bottom: 0; width: 160px; height: 40px; border-left: #ffffff 6px solid; border-bottom: #ffffff 6px solid; } .album-title:after { content: ""; position: absolute; right: 0; top: 0; width: 200px; height: 40px; border-top: #ffffff 6px solid; } .album-title h2 { font-size: 140%; margin: 10px 10px 10px 0; padding: 0; line-height: 1; font-weight: bold; } .album-title span { font-size: 100%; margin: 10px 10px 10px 0; padding: 0; line-height: 1; font-weight: bold; color: #ffffff; } .slideDown { top:10px; left:0; animation: fadeIn 7s; transform: translateY(-290px); } .slideUp { top:10px; left:0; animation: fadeIn 7s; transform: translateY(-290px); } .slideUp2 { top:10px; left:0; animation: fadeIn 7s; transform: translateY(-290px); } .slideFadein{ top:10px; left:0; transform: translateY(-280px); } @keyframes slideUp { 0% {transform: translateY(100px);;opacity:0;} 5% {transform: translateY(50px);;opacity:0.5;} 100% {transform: translateY(-80px);opacity:1;} } @keyframes slideDown { 0% {transform: translateY(10px);} 100% {transform: translateY(10px);opacity:1;} } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } } @media (min-width: 1200px) { .margin_header{ margin-top:0px; } .margin_header2{ margin-top:68px; } .margin_header3{ margin-top:60px; } .margin_header_main{ margin-top:0px; } .title_width{ width:35%; } .navwidth{ width:320px; } .breadcrumb1 { -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; border-radius: 0.25rem; } .navbarku { position: fixed; width: 100%; } .container-fluid{ margin-top: 0%; } .margin_right_navbar{ margin-right: 15%; } .image-slider { height: 700px; background-position: center; background-size: cover; object-fit: cover; } .height_carousel{ height: 100%; width:100%; overflow: hidden; } .image-slider_p { height: 42vh; width:100%; object-fit: cover; } .height_carousel_p{ height:42vh; overflow: hidden; } .logo-image { float: left; width: auto; height: 10vh; margin: 10px 10px 0 0; } .flexleft_gadget { display: flex !important; justify-content: left; align-items: center; } .flexleft { display: flex; justify-content: left; align-items: center; } .logo { float: left; margin: 0 auto 0 0 !important; height:50px; position: relative; z-index: 10; } .vmiddle{ vertical-align: middle; } .flexleft2 { display: flex !important; justify-content: left; align-items: center; margin-left: 20px; } .flexright2 { display: flex !important; justify-content: right; align-items: center; margin-right: 20px; } .margin_fb{ margin-left:44%; } .image_modal{ width:861px; height:574px; object-fit: cover; } .mainmenu:before{ } .mainmenu:after{ } .mainmenu { width: 100%; position: relative; z-index: 899; margin-top: -15px; } .mainmenu:before { content: ""; position: absolute; left: 0; top: 0; height: 55px; width: 5% !important; z-index: 100 !important; } .mainmenu:after { content: ""; position: absolute; right: 0; top: 0; height: 55px; width: 5% !important; z-index: 100 !important; } .logo h1 { font-family: 'ManifoldCF-Medium'; font-size: 220%; margin: 0 0; padding: 0; line-height: 1.1; font-weight: bold; color: #fff; text-shadow: 3px 2px 5px #000; -webkit-text-stroke: 1px transparent; } .logo h2 { font-size: 100%; margin: 5px 0 0; padding: 0; line-height: 1.1; font-weight: normal; color: #fff; text-shadow: -1px -1px 0 rgba(0,0,0,0.1), 1px -1px 0 rgba(0,0,0,0.1), -1px 1px 0 rgba(0,0,0,0.1), 1px 1px 0 rgba(0,0,0,0.1); } .logo_footer{ margin-top:-40px; margin-left:47.5%; width:60px; height:auto; box-shadow: 0 4px 4px rgba(0,0,0,.125), 0 4px 6px rgba(0,0,0,0.7); border-radius:0px 0px 35px 35px; background-color: #fff; text-align: center; display: flex !important; justify-content: center; align-items: center; } .footer-bottom-line { position: absolute; left: 100%; top: 0; bottom: 0; width: 1px; background: #fff; opacity: 0.5; } .hide_gadget{ visibility: visible; } .show_gadget{ visibility: hidden; display: none; } .slide-effect2 { position: absolute; bottom: 0px; z-index: 10; color: #fff; display: block; text-align: center; width:100%; height:100vh; } .slide-effect3 { position: absolute; top: 50%; left: 50%; z-index: 10; color: #fff; display: block; transform: translate(-50%, -50%); width:90%; } .slide-effect4 { position: absolute; background: #2e68a19e; background: -moz-linear-gradient(180deg,#034485df 20%,#2e67a1df 50%,#034485df 80%); background: -webkit-linear-gradient(180deg,#034485df 20%,#2e67a1df 50%,#034485df 80%); background: linear-gradient(180deg,#034485df 20%,#2e67a1df 50%,#034485df 80%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2e68a19e",endColorstr="#53010194",GradientType=1); top: 50%; left: 50%; z-index: 10; color: #fff; display: block; transform: translate(-50%, -50%); border-radius: 15px; width:70%; height:auto; } .padding_textslide{ top:0; left:0; } .lineh_textslide{ line-height: 0.8; } .product-image1 { max-width: 100%; height: 200px; width: 100%; vertical-align: middle; object-fit: cover; } .product-row { max-width: 100%; height: 350px; width: 100%; } .album-title h2 { font-size: 180%; margin: 10px 10px 10px 0; padding: 0; line-height: 1; font-weight: bold; } .album-title span { font-size: 100%; margin: 10px 10px 10px 0; padding: 0; line-height: 1; font-weight: bold; color: #ffffff; } .album-title { position: absolute; z-index: 2; padding: 10px 10px; left:10%; top: 5%; } .album-title:before { content: ""; position: absolute; left: 0; bottom: 0; width: 160px; height: 40px; border-left: #ffffff 6px solid; border-bottom: #ffffff 6px solid; } .album-title:after { content: ""; position: absolute; right: 0; top: 0; width: 200px; height: 40px; border-top: #ffffff 6px solid; } .slideDown { top:-180px; left:5px; animation: slideDown ease .4s forwards .6s; } .slideUp { opacity: 0;; top:150px; left:10px; padding:5px; animation: slideUp ease .4s forwards .6s; } .slideDown2 { animation: 4s slideRight; animation-delay: 4s; } .slideUp2 { opacity: 0;; top:-80px; left:10px; padding:5px; animation: slideUp ease 2s forwards .3s; } .slideUp2 { bottom:50px; left:10px; position: relative; } .slideFadein{ top:200px; left:0; transform: translateY(-80px); } @keyframes slideUp { 0% {transform: translateY(150px);;opacity:0;} 5% {transform: translateY(50px);;opacity:0.1;} 100% {transform: translateY(0px);opacity:1;} } @keyframes slideDown { 0% {transform: translateY(-180px);} 100% {transform: translateY(0px);opacity:1;} } @keyframes slideDown2 { 0% {transform: translateY(-50px);} 100% {transform: translateY(40px);opacity:1;} } @keyframes slideRight { from { margin-left: -500px; } to { margin-left: 0%; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .top_main_menu{ top:0px; transition: top 1.0s; } .top_main_menu2{ top:0%; transition: height 1.0s ease; animation: fadeInmenu 3s; } @keyframes fadeInmenu { 0% { opacity: 0; } 100% { opacity: 1; } } .margin_jelajah{ margin:10% 10% 10% 10%; padding:10px; } } .mainheader-cover-color_blue { opacity: 0.6; background: #013f63; background: -moz-linear-gradient(45deg, #013f63 0%, #c3336f 90%); background: -webkit-linear-gradient(45deg, #013f63 0%, #c3336f 90%); background: linear-gradient(45deg, #013f63 0%, #c3336f 90%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#33c380",endColorstr="#c3336f",GradientType=1); } .bg-mainmenu { /*background: url("../img/0c6ad82d7f34d47d1438f9e092a11b0b.gif")left top, linear-gradient(45deg, #6eab11 0%, #4b7c00 90%);*/ background: url("../img/back_desa.jpg")left top, linear-gradient(45deg, #6eab11 0%, #4b7c00 90%); width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; /*background: #6eab11; background: -moz-linear-gradient(45deg, #6eab11 0%, #4b7c00 90%); background: -webkit-linear-gradient(45deg, #6eab11 0%, #4b7c00 90%); background: linear-gradient(45deg, #6eab11 0%, #4b7c00 90%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#33c380",endColorstr="#4b7c00",GradientType=1); */ } .bg-sidebar { /*background: url("../img/0c6ad82d7f34d47d1438f9e092a11b0b.gif")left top, linear-gradient(45deg, #6eab11 0%, #4b7c00 90%);*/ background: url("../img/843378_720.jpg")left top, linear-gradient(45deg, #6eab11 0%, #4b7c00 90%); width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -2; } .bg-sidebar2{ background: #013f63; background: -moz-linear-gradient(90deg,#025e94 20%,#013f63 50%,#012b53 80%); background: -webkit-linear-gradient(90deg,#025e94 20%,#013f63 50%,#012b53 80%); background: linear-gradient(90deg,#025e94 20%,#013f63 50%,#012b53 80%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#025e94",endColorstr="#012b53",GradientType=1); box-shadow: 4px 4px 4px 4px rgba(0,0,0,.125), 0 4px 6px rgba(0,0,0,0.7); z-index: -3; } .mainheader-cover-image1 { /*background: repeating-linear-gradient(90deg, rgba(8,74,131,0.7) 0%, rgba(8,74,131,0.7) 100%),url(../img/back_desa2.jpg);*/ background: url(../img/back_desa2.jpg); height:12em; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .back_pic_header { /*background: repeating-linear-gradient(90deg, rgba(8,74,131,0.7) 0%, rgba(8,74,131,0.7) 100%),url(../img/back_desa2.jpg);*/ height:200px; } .back_pic_header_artikel { /*background: repeating-linear-gradient(90deg, rgba(8,74,131,0.7) 0%, rgba(8,74,131,0.7) 100%),url(../img/back_desa2.jpg);*/ background: url(../img/dotted.png),url(../img/GAMBAR_MENU/img_koran.jpg); background-repeat: repeat, no-repeat; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.4); top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: auto, cover; object-fit: cover; height:200px; } .back_pic_header_statistik { /*background: repeating-linear-gradient(90deg, rgba(8,74,131,0.7) 0%, rgba(8,74,131,0.7) 100%),url(../img/back_desa2.jpg);*/ background: url(../img/dotted2.png),url(../img/GAMBAR_MENU/img_statistik5.jpg); background-repeat: repeat, no-repeat; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7); top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: auto, cover; object-fit: cover; height:200px; } .back_pic_header_aparatur { /*background: repeating-linear-gradient(90deg, rgba(8,74,131,0.7) 0%, rgba(8,74,131,0.7) 100%),url(../img/back_desa2.jpg);*/ background: url(../img/dotted.png),url(../img/GAMBAR_MENU/img_aparatur.jpg); background-repeat: repeat, no-repeat; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7); top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: auto, cover; object-fit: cover; height:200px; } .back_pic_header_galeri { /*background: repeating-linear-gradient(90deg, rgba(8,74,131,0.7) 0%, rgba(8,74,131,0.7) 100%),url(../img/back_desa2.jpg);*/ background: url(../img/dotted.png),url(../img/GAMBAR_MENU/img_kamera.jpg); background-repeat: repeat, no-repeat; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7); top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: auto, cover; object-fit: cover; height:200px; } .back_pic_header_visi { /*background: repeating-linear-gradient(90deg, rgba(8,74,131,0.7) 0%, rgba(8,74,131,0.7) 100%),url(../img/back_desa2.jpg);*/ background: url(../img/dotted.png),url(../img/GAMBAR_MENU/img_visimisi.jpg); background-repeat: repeat, no-repeat; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7); top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: auto, cover; object-fit: cover; height:200px; } .back_pic_header_produk { /*background: repeating-linear-gradient(90deg, rgba(8,74,131,0.7) 0%, rgba(8,74,131,0.7) 100%),url(../img/back_desa2.jpg);*/ background: url(../img/dotted.png),url(../img/GAMBAR_MENU/img_produk.jpg); background-repeat: repeat, no-repeat; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7); top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: auto, cover; object-fit: cover; height:200px; } .back_pic_header_regulasi { /*background: repeating-linear-gradient(90deg, rgba(8,74,131,0.7) 0%, rgba(8,74,131,0.7) 100%),url(../img/back_desa2.jpg);*/ background: url(../img/dotted2.png),url(../img/GAMBAR_MENU/img_regulasi.jpg); background-repeat: repeat, no-repeat; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7); top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: auto, cover; object-fit: cover; height:200px; } .back_pic_header_pembangunan { /*background: repeating-linear-gradient(90deg, rgba(8,74,131,0.7) 0%, rgba(8,74,131,0.7) 100%),url(../img/back_desa2.jpg);*/ background: url(../img/dotted2.png),url(../img/GAMBAR_MENU/img_pembangunan.jpg); background-repeat: repeat, no-repeat; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7); top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: auto, cover; object-fit: cover; height:200px; } .back_pic_header_statistik2 { /*background: repeating-linear-gradient(90deg, rgba(8,74,131,0.7) 0%, rgba(8,74,131,0.7) 100%),url(../img/back_desa2.jpg);*/ background: url(../img/dotted2.png),url(../img/GAMBAR_MENU/img_statistik3.jpg); background-repeat: repeat, no-repeat; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7); top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: auto, cover; object-fit: cover; height:200px; } .back_pic_header_history { /*background: repeating-linear-gradient(90deg, rgba(8,74,131,0.7) 0%, rgba(8,74,131,0.7) 100%),url(../img/back_desa2.jpg);*/ background: url(../img/dotted2.png),url(../img/GAMBAR_MENU/img_history.jpg); background-repeat: repeat, no-repeat; box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7); top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: auto, cover; object-fit: cover; height:200px; } .mainheader-cover-color_blue { opacity: 0.8; background: #013f63; background: -moz-linear-gradient(90deg,#025e94 20%,#013f63 50%,#012b53 80%); background: -webkit-linear-gradient(90deg,#025e94 20%,#013f63 50%,#012b53 80%); background: linear-gradient(90deg,#025e94 20%,#013f63 50%,#012b53 80%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#025e94",endColorstr="#012b53",GradientType=1); } .mainheader-cover-color_blue { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .mainheader-cover-color_green { opacity: 0.8; background: #01633d; background: -moz-linear-gradient(90deg,#02945c 20%,#01633d 50%,#01533a 80%); background: -webkit-linear-gradient(90deg,#02945c 20%,#01633d 50%,#01533a 80%); background: linear-gradient(90deg,#02945c 20%,#01633d 50%,#01533a 80%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#025e94",endColorstr="#012b53",GradientType=1); } .mainheader-cover-color_green { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .mainheader-cover-color_red { opacity: 0.8; background: #630142; background: -moz-linear-gradient(90deg,#940257 20%,#630142 50%,#530123 80%); background: -webkit-linear-gradient(90deg,#940257 20%,#630142 50%,#530123 80%); background: linear-gradient(90deg,#940257 20%,#630142 50%,#530123 80%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#025e94",endColorstr="#012b53",GradientType=1); } .mainheader-cover-color_red { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .mainheader-inner { position: relative; overflow: hidden; padding: 10px 0 10px; } .bgcolor-1, .widget-inner .social-icon { background: #6eab11; background: -moz-linear-gradient(45deg, #6eab11 0%, #4b7c00 90%); background: -webkit-linear-gradient(45deg, #6eab11 0%, #4b7c00 90%); background: linear-gradient(45deg, #6eab11 0%, #4b7c00 90%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#33c380",endColorstr="#4b7c00",GradientType=1); } .logobackg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .logocenter-backg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.5; } .bg_img_white{ background: url("../img/GAMBAR_MENU/img_statistik3.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; } .hover-height { -webkit-transition: height .10s cubic-bezier(0,0,.58,1); -moz-transition: height .10s cubic-bezier(0,0,.58,1); -o-transition: height .10s cubic-bezier(0,0,.58,1); -ms-transition: height .10s cubic-bezier(0,0,.58,1); transition: all .55s cubic-bezier(.645,.045,.355,1) 0s; } .mainmenu-inner { position: relative; margin: 0 0 0; } .bgcolor-blue3, .bg-navsubblue { background: #006374; } .bgcolor-green3, .bg-navsubgreen { background: #427400; } .bgcolor-red3, .bg-navsubred { background: #740061; } .running-title-blue { position: relative; height: 35px; padding: 0 10px; margin: 0; line-height: 1.2; color: #fff; border-radius: 4px 0 0 4px; } .running-title-blue2 { position: relative; height: 35px; padding: 0 10px; margin: 0; line-height: 1.2; color: #333333; border-radius: 4px 0 0 4px; } .running-title-blue:after { border-left: #001f74 20px solid; } .running-title-blue2:after { border-left: #ffffff 20px solid; } .running-title-blue:after,.running-title-blue2:after { content: ""; position: absolute; top: 0; right: -20px; border-top: transparent 18px solid; border-bottom: transparent 18px solid; z-index: 2; } .running-title-green { position: relative; height: 35px; padding: 0 10px; margin: 0; line-height: 1.2; color: #fff; border-radius: 4px 0 0 4px; } .running-title-green2 { position: relative; height: 35px; padding: 5px 10px 5px 10px; margin: 0; line-height: 1.2; color: #015a44; border-radius: 4px 0 0 4px; font-weight: 800; } .running-title-green:after { border-left: #00745b 20px solid; } .running-title-green2:after { border-left: #ffffff 20px solid; } .running-title-green:after,.running-title-green2:after { content: ""; position: absolute; top: 0; right: -20px; border-top: transparent 18px solid; border-bottom: transparent 18px solid; z-index: 2; } .running-title-red { position: relative; height: 35px; padding: 0 10px; margin: 0; line-height: 1.2; color: #fff; border-radius: 4px 0 0 4px; } .running-title-red2 { position: relative; height: 35px; padding: 5px 10px; margin: 0; line-height: 1.2; color: #4b012c; font-weight: 600; } .running-title-red:after { border-left: #740036 20px solid; } .running-title-red2:after { border-left: #ffffff 20px solid; } .running-title-red:after,.running-title-red:after2 { content: ""; position: absolute; top: 0; right: -20px; border-top: transparent 18px solid; border-bottom: transparent 18px solid; z-index: 2; } .flexleft { display: flex !important; justify-content: left; align-items: center; } .flexright { display: flex !important; justify-content: right; align-items: center; } .back_white { background-color: #ffffff; } .back_silverdark{ background-color: #181818; } .back_silver{ background-color: #e0e0e0; } .back_silver2{ background-color: #efeeee; } .back_blackof { background-color: #0a3232e7; } .back_black { background-color: #000000; } .back_green { background-color: #015c3c; } .back_greenx { background-color: #327a6d; height:44px; padding:2px 20px; font-family: 'Dosis', serif; } .back_blue { background-color: #3b44c3; } .back_bluex { background-color: #036c7a; height:44px; padding:2px 20px; font-family: 'Dosis', serif; } .back_bluex2 { background-color: #036c7a; height:44px; padding:2px 20px; font-family: 'Dosis', serif; } .back_bluex2:after { content: ""; position: absolute; top: 0px; left: 400px; border-top: transparent 20px solid; border-bottom: transparent 20px solid; z-index: 2; height:44px; } .back_bluex2:after { border-left: #036c7a 50px solid; } .back_bluesky { background-color: #0496bb; } .back_tosca { background-color: #039b8e; } .back_tosca2 { background-color: #01554e; } .back_tosca3 { background-color: #01554e; } .back_red { background-color: #76037a; } .back_redx { background-color: #76037a; height:44px; padding:2px 20px; font-family: 'Dosis', serif; } .back-grey-soft { background-color: #f4f7fc; } .back-grey-soft2 { background-color: #ffffff; box-shadow: 0 4px 4px rgba(0,0,0,.125), 0 4px 6px rgba(0,0,0,0.7); } .back_a1{ background-image: radial-gradient( circle 382px at 50% 50.2%, rgba(73, 128, 212, 0.867) 0.1%, rgba(1, 30, 50, 0.877) 100.2% ); } .back_a2{ background: repeating-linear-gradient(to right, #fdbb2d9b, #b21f1f83, #1a2a6c94),url(../img/back_header.jpg); width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .back_a3{ background: #1a2a6c; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #fdbb2ddf, #b21f1fce, #1a2a6ccd); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #fdbb2ddf, #b21f1fce, #1a2a6ccd); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .back_a4{ background-image: radial-gradient( circle 382px at 50% 50.2%, rgba(255, 255, 255, 0.867) 0.1%, rgba(245, 245, 245, 0.877) 100.2% ); } .back_a5{ background: #1a2a6c; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #fd9c2ddf, #b2721fce, #6c2c1acd); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #fd9c2ddf, #b2721fce, #6c2c1acd); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .back_a5b{ background: #1a2a6c; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #c77920f3, #b2721ff2, #4c1f11); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #c77920df, #b2721fce, #4c1f11); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .back_a6{ background: #1a2a6c; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #fffffff1, #ffe0e0ea, #fffffff1); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #fffffff1, #ffe0e0ea, #fffffff1); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .back_a7{ background: #1a2a6c; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .back_a8{ background: #1a2a6c; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #fdbb2d, #b21f1f, #1a2a6c); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #fdbb2d, #b21f1f, #1a2a6c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .back_a9 {background:linear-gradient(-50deg, #fd2d2de0, #30497a, #30497a, #fd2d2de0); background-size: 400% 400%; -webkit-animation: Gradient 5s ease infinite; -moz-animation: Gradient 5s ease infinite; animation: Gradient 5s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}} @-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}} @keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}; } .back_blue1{ background-image: radial-gradient( circle 975px at 2.6% 48.3%, rgba(0,8,120,1) 0%, rgba(95,184,224,1) 99.7% ); } .back_blue2{ background-image: linear-gradient( 86.3deg, rgba(0,119,182,1) 3.6%, rgba(8,24,68,1) 87.6% ); } .back_blue3{ background-color: #88254e ; background-image: linear-gradient(90deg, #8a033b 0%, #c3336f 100%); padding:1px; border-bottom:5px solid #ff8400; } .back_blue4{ background-color: #036572; } .back_blue5{ background: rgb(0,155,255); background: -moz-linear-gradient(90deg, rgb(48 73 122) 0%, rgb(154 50 62) 100%); background: -webkit-linear-gradient(90deg, rgb(48 73 122) 0%, rgb(154 50 62) 100%); background: linear-gradient(90deg, rgb(48 73 122) 0%, rgb(154 50 62) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#009bff",endColorstr="#009bff",GradientType=1); } .back_blue6{ background-color: #c4e7ff ; background-image: linear-gradient(90deg, #c4e7ff 0%, #c4e7ff 100%); } .back_blue7{ background-color: #086a8386 ; background-image: linear-gradient(90deg, #087583 0%, #086a83e7 100%); } .back_blue7b{ background-color: #002b3672 ; background-image: linear-gradient(90deg, #002b3691 0%, #002b3693 100%); } .back_blue8{ background-color: #007bd9; } .back_blue9{ background-color: #02a6c4; } .back_blue10 { background: rgba(215,236,238,1); background: -moz-linear-gradient(top, rgba(215,236,238,1) 0%, rgba(200,222,233,1) 100%); background: -webkit-linear-gradient(top, rgba(215,236,238,1) 0%, rgba(200,222,233,1) 100%); background: -o-linear-gradient(top, rgba(215,236,238,1) 0%, rgba(200,222,233,1) 100%); background: -ms-linear-gradient(top, rgba(215,236,238,1) 0%, rgba(200,222,233,1) 100%); background: linear-gradient(to bottom, rgba(215,236,238,1) 0%, rgba(200,222,233,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7ecee', endColorstr='#c8dee9', GradientType=0 ); } .back_blue11{ background-color: #3664a1; } .back_blue12{ background-color: #05274edc ; } .back_blue13{ background-color: #2b558d; } .back_blue13:hover{ background-color: #05204e; } .back_blue14{ background: rgb(6,171,219); background: -moz-linear-gradient(180deg, rgb(48 73 122) 0%, rgb(48 73 122) 100%); background: -webkit-linear-gradient(180deg, rgb(48 73 122) 0%, rgb(48 73 122) 100%); background: linear-gradient(180deg, rgb(48 73 122) 0%, rgb(48 73 122) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#06abdb",endColorstr="#045287",GradientType=1); } .back_blue15{ background-color: #037F95; } .back_green1{ background-image: radial-gradient( circle 975px at 2.6% 48.3%, rgb(0, 120, 64) 0%, rgb(121, 224, 95) 99.7% ); } .back_green2{ background-image: linear-gradient( 86.3deg, rgb(0, 182, 112) 3.6%, rgb(8, 68, 43) 87.6% ); } .back_green3{ background-color: #034d8a ; background-image: linear-gradient(90deg, #034d8a 0%, #33a1c3 100%); padding:1px; border-bottom:5px solid #ff8400; } .back_green4{ background-color: #4b7203; } .back_green5{ background-image: linear-gradient( 110.1deg, rgba(34,126,34,1) 2.9%, rgb(108, 187, 5) 90.3% ); } .back_green6{ background-color: #c4fff2 ; background-image: linear-gradient(90deg, #c4fff2 0%, #c4fff2 100%); } .back_green7{ background-color: #016342 ; background-image: linear-gradient(90deg, #016342 0%, #028a5c 100%); } .back_green7b{ background-color: #1a360072 ; background-image: linear-gradient(90deg, #21360091 0%, #002b3693 100%); } .back_green8{ background-color: #539083; } .back_green9{ background-color: #488478; } .back_green10 { background: rgb(227, 238, 215); background: -moz-linear-gradient(top, rgba(227, 238, 215) 0%, rgb(213, 233, 200) 100%); background: -webkit-linear-gradient(top, rgba(227, 238, 215) 0%, rgba(213, 233, 200) 100%); background: -o-linear-gradient(top, rgba(227, 238, 215) 0%, rgba(213, 233, 200) 100%); background: -ms-linear-gradient(top, rgba(227, 238, 215) 0%, rgba(213, 233, 200) 100%); background: linear-gradient(to bottom, rgba(227, 238, 215) 0%, rgba(213, 233, 200) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7ecee', endColorstr='#c8dee9', GradientType=0 ); } .back_green11{ background-color: #d9ff8c; } .back_green12{ background-color: #134037dc ; } .back_green13{ background-color: #488478; } .back_green13:hover{ background-color: #134037; } .back_green14{ background: rgb(112,219,6); background: -moz-linear-gradient(180deg, rgba(112,219,6,1) 0%, rgba(4,135,20,1) 100%); background: -webkit-linear-gradient(180deg, rgba(112,219,6,1) 0%, rgba(4,135,20,1) 100%); background: linear-gradient(180deg, rgba(112,219,6,1) 0%, rgba(4,135,20,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#70db06",endColorstr="#048714",GradientType=1); } .back_red1{ background-image: radial-gradient( circle 975px at 2.6% 48.3%, rgb(120, 0, 36) 0%, rgb(224, 95, 144) 99.7% ); } .back_red2{ background-image: linear-gradient( 86.3deg, rgb(182, 0, 100) 3.6%, rgb(68, 8, 45) 87.6% ); } .back_red3{ background-color: #40038a ; background-image: linear-gradient(90deg, #32038a 0%, #6533c3 100%); padding:1px; border-bottom:5px solid #ff8400; } .back_red4{ background-color: #72035f; } .back_red5{ background-image: radial-gradient( circle 935px at 3.1% 5.8%, rgb(245, 0, 122) 0%, rgb(127, 8, 81) 100.2% ); } .back_red6{ background-color: #ffc4ed ; background-image: linear-gradient(90deg, #ffc4ed 0%, #ffc4ed 100%); } .back_red7{ background-color: #83086f79 ; background-image: linear-gradient(90deg, #76037a 0%, #83086fda 100%); } .back_red7b{ background-color: #36001372 ; background-image: linear-gradient(90deg, #36001b91 0%, #36001d93 100%); } .back_red8{ background-image: linear-gradient( 78.1deg, rgba(177,14,236,1) 5.5%, rgba(255,19,15,1) 92.8% ); } .back_red9{ background-color: #c40263; } .back_red10 { background: rgb(238, 215, 223); background: -moz-linear-gradient(top, rgba(238, 215, 223) 0%, rgb(233, 200, 209) 100%); background: -webkit-linear-gradient(top, rgba(238, 215, 223) 0%, rgba(233, 200, 209) 100%); background: -o-linear-gradient(top, rgba(238, 215, 223) 0%, rgba(233, 200, 209) 100%); background: -ms-linear-gradient(top, rgba(238, 215, 223) 0%, rgba(233, 200, 209) 100%); background: linear-gradient(to bottom, rgba(238, 215, 223) 0%, rgba(233, 200, 209) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7ecee', endColorstr='#c8dee9', GradientType=0 ); } .back_red11{ background-color: #f78cff; } .back_red12{ background-color: #4a063fe7 ; } .back_red13{ background-color: #c40263; } .back_red13:hover{ background-color: #4a0628; } .back_red14{ background: rgb(219,6,49); background: -moz-linear-gradient(180deg, rgba(219,6,49,1) 0%, rgba(135,4,26,1) 100%); background: -webkit-linear-gradient(180deg, rgba(219,6,49,1) 0%, rgba(135,4,26,1) 100%); background: linear-gradient(180deg, rgba(219,6,49,1) 0%, rgba(135,4,26,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#db0631",endColorstr="#87041a",GradientType=1); } .back_maroon{ background-image: linear-gradient( 99deg, rgba(115,18,81,1) 10.6%, rgba(28,28,28,1) 118% ); } .back_green_orange{ background-color: #b8bb00; background-image: linear-gradient(59deg, #22bb00 0%, #F76B1C 100%); } .back_blue_purple{ background-color: #21D4FD; background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%); } .back_blue_red{ background-color: #21D4FD; background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%); } .back_red_red{ background-color: #6f0101; background-image: linear-gradient(90deg, #6f0101 0%, #bf0000 74%); } .back_orange_orange{ background-color: #FFE53B; background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%); } .back_yellow_orange{ background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); } .back_silver_silver{ background-color: #383838; background-image: linear-gradient(62deg, #5c5c5c 0%, #383838 100%); } .back_black_silver{ background: rgb(0,0,0); background: -moz-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(11,11,11,1) 24%, rgba(60,61,61,1) 100%); background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(11,11,11,1) 24%, rgba(60,61,61,1) 100%); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(11,11,11,1) 24%, rgba(60,61,61,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#3c3d3d",GradientType=1); } .back_black_silver2{ background: rgb(2,0,36); background: -moz-linear-gradient(162deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 63%, rgba(0,0,0,1) 66%, rgba(92,92,92,1) 89%, rgba(82,82,82,1) 92%, rgba(0,0,0,1) 100%); background: -webkit-linear-gradient(162deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 63%, rgba(0,0,0,1) 66%, rgba(92,92,92,1) 89%, rgba(82,82,82,1) 92%, rgba(0,0,0,1) 100%); background: linear-gradient(162deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 63%, rgba(0,0,0,1) 66%, rgba(92,92,92,1) 89%, rgba(82,82,82,1) 92%, rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#000000",GradientType=1); } .back_silver1{ background: rgb(228,227,227); background: -moz-linear-gradient(90deg, rgba(228,227,227,1) 0%, rgba(255,255,255,1) 50%, rgba(228,227,227,1) 100%); background: -webkit-linear-gradient(90deg, rgba(228,227,227,1) 0%, rgba(255,255,255,1) 50%, rgba(228,227,227,1) 100%); background: linear-gradient(90deg, rgba(228,227,227,1) 0%, rgba(255,255,255,1) 50%, rgba(228,227,227,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e4e3e3",endColorstr="#e4e3e3",GradientType=1); } .back_topyellow{ background: rgb(255,221,0); background: -moz-linear-gradient(180deg, rgba(255,221,0,1) 0%, rgba(255,221,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,221,0,1) 0%, rgba(255,221,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(255,221,0,1) 0%, rgba(255,221,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffdd00",endColorstr="#ffffff",GradientType=1); } .back_topbluesky{ background: rgb(0,179,255); background: -moz-linear-gradient(180deg, rgba(0,179,255,1) 0%, rgba(0,179,255,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(0,179,255,1) 0%, rgba(0,179,255,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(0,179,255,1) 0%, rgba(0,179,255,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00b3ff",endColorstr="#ffffff",GradientType=1); } .back_topred{ background: rgb(255,12,0); background: -moz-linear-gradient(180deg, rgba(255,12,0,1) 0%, rgba(255,12,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,12,0,1) 0%, rgba(255,12,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(255,12,0,1) 0%, rgba(255,12,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0c00",endColorstr="#ffffff",GradientType=1); } .back_toppurple{ background: rgb(124,0,255); background: -moz-linear-gradient(180deg, rgba(124,0,255,1) 0%, rgba(124,0,255,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(124,0,255,1) 0%, rgba(124,0,255,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(124,0,255,1) 0%, rgba(124,0,255,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7c00ff",endColorstr="#ffffff",GradientType=1); } .back_toppink{ background: rgb(255,0,141); background: -moz-linear-gradient(180deg, rgba(255,0,141,1) 0%, rgba(255,0,141,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,0,141,1) 0%, rgba(255,0,141,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(255,0,141,1) 0%, rgba(255,0,141,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff008d",endColorstr="#ffffff",GradientType=1); } .back_topstabilo{ background: rgb(226,255,0); background: -moz-linear-gradient(180deg, rgba(226,255,0,1) 0%, rgba(226,255,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(226,255,0,1) 0%, rgba(226,255,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(226,255,0,1) 0%, rgba(226,255,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e2ff00",endColorstr="#ffffff",GradientType=1); } .back_toporange{ background: rgb(255,117,0); background: -moz-linear-gradient(180deg, rgba(255,117,0,1) 0%, rgba(255,117,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,117,0,1) 0%, rgba(255,117,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(255,117,0,1) 0%, rgba(255,117,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7500",endColorstr="#ffffff",GradientType=1); } .back_zebra_blue{ background-image: linear-gradient( 96.5deg, rgba(39,103,187,1) 10.4%, rgba(16,72,144,1) 87.7% ); } .back_transaprent{ background: rgba(0,0,0,.2); } .back_transaprent2{ background: rgba(0,0,0,.4); } .back_transaprent3{ background: rgba(0,0,0,.6); } .back_transaprent4{ background: rgba(0,0,0,.2); } .back_transaprent5{ background: rgba(100, 100, 100, 0.6); } .back_transaprent4:hover{ background: rgba(0,0,0,.6); height:50%; width: 70%; padding-top:30px } .back_shaddow_sidebar { box-shadow: 0 2px 3px rgba(0,0,0,.125), 0 2px 5px rgba(0,0,0,0.7); } .back_shaddow { box-shadow: 0 2px 3px rgba(0,0,0,.125), 0 2px 5px rgba(0,0,0,0.7); } .back_border { border: 1px solid #b3b1b1; } .back_border2 { border-bottom: 1px solid #b3b1b1; } .back_border3 { border: 1px solid #bdbdbd !important; } .back_border_green { border: 2px solid #548308ce !important; } .back_border_blue { border: 2px solid #086a83de !important; } .back_border_grey{ border: 1px solid #a3a3a3 !important; } .back_border_red{ border: 2px solid #83086fc9 !important; } .back_border_bottom_purple { border-bottom: 4px solid #200096 !important; cursor: not-allowed; } .back_border_bottom_orange { border-bottom: 4px solid #ffbb00ce !important; cursor: not-allowed; } .back_border_bottom_green { border-bottom: 4px solid #01a36c !important; cursor: not-allowed; } .back_border_bottom_blue { border-bottom: 4px solid #005c91 !important; cursor: not-allowed; } .back_border_bottom_red { border-bottom: 4px solid #83086fc9 !important; cursor: not-allowed; } .back_border_bottom_green,.back_border_bottom_blue,.back_border_bottom_red{ transition: all 0.4s ease 0s; } .back_border_bottom_orange2 { border-bottom: 4px solid #FF9800 !important; } .back_border_bottom_blue ul li{ /*border-bottom: 2px solid #eaeaeace !important;*/ color:#539ddb; } .back_border_bottom_blue ul li:hover,.back_border_bottom_blue ul li:active{ border-bottom: 2px solid #f69000de !important; color:#084a83; } .back_border_bottom_red ul li:hover,.back_border_bottom_red ul li:active{ border-bottom: 2px solid #f69000de !important; color:#084a83; background-color: #b74ba5c9 ; } .back_border_bottom_green ul li:hover,.back_border_bottom_green ul li:active{ border-bottom: 2px solid #f69000de !important; color:#084a83; background-color: #4bb79ec9 ; } .rad5 { border-radius: 5px; } .rad10 { border-radius: 10px; } .rad15 { border-radius: 15px; } .rad15top { border-radius: 15px 15px 0px 0px; } .rad15bottom { border-radius: 0px 0px 15px 15px; } .rad20 { border-radius: 25px; } .rad25 { border-radius: 25px; } .rad35 { border-radius: 35px; } .rad45 { border-radius: 45px; } .rad50s { border-radius: 50%; } .z_indek-1{ z-index: -1; } .z_indek-2{ z-index: -2; } .z_indek-3{ z-index: -3; } .runningpage { width: 100%; position: relative; margin: 0; height: 36px; border-radius: 4px; overflow: hidden; z-index: 1; border: 1px solid; } .runningpage-info:after { border-left: #00427f 15px solid; } .runningpage-info:after { content: ""; top: 0; position: absolute; right: -15px; border-top: transparent 18px solid; border-bottom: transparent 18px solid; } .fontsize1{ font-size: 1em; } .borderbox{ border-style: groove; } .borderimgw5{ border-color: #ffffff; border:5px solid #ffffff; } .borderimgw5:before { content: ""; position: absolute; right: 0; top: 0; border-right: #fff 40px solid; border-bottom: transparent 14vh solid; z-index: 2; } .borderimgw5:after { content: ""; position: absolute; right: 0; bottom: 0; border-right: #fff 40px solid; border-top: transparent 14vh solid; z-index: 2; } .bordertitlew5{ border-color: #ffffff; border:5px solid #ffffff; } .bordertitlew5:before { content: ""; position: absolute; left: -39px; top: 0; border-right: #e0e0e0 40px solid; border-bottom: transparent 14vh solid; z-index: 2; } .bordertitlew5:after { content: ""; position: absolute; left: -39px; bottom: 0; border-right: #e0e0e0 40px solid; border-top: transparent 14vh solid; z-index: 2; } .padding0{ padding:0px; } .padding2{ padding:2%; } .padding5{ padding:5px; } .padding5a{ padding:5px 0px; } .padding5b{ padding:0px 5px; } .padding10{ padding:10px; } .padding15{ padding:15px; } .padding20{ padding:20px; } .padding25{ padding:25px; } .padding2s{ padding:1% 2%; } .padding3s{ padding:1% 3%; } .padding5s{ padding:1% 5%; } .padding10s{ padding:5% 10%; } .padding15s{ padding:5% 15%; } .padding20s{ padding:5% 20%; } .margin0{ margin:0x; } .margin5{ margin:5px; } .margin10{ margin:10px; } .margin15{ margin:15px; } .margin20{ margin:20px; } .marginleftright1s{ margin:0 1%; } .marginleftright2s{ margin:0 2%; } .marginleftright3s{ margin:0 3%; } .marginleftright4s{ margin:0 4%; } .marginleftright5s{ margin:0 5%; } .textsize5{ font-size: 50%; } .textsize6{ font-size: 60%; } .textsize8{ font-size: 80%; } .textsize9{ font-size: 90%; } .textsize11{ font-size: 110%; } .textsize13{ font-size: 130%; } .textsize14{ font-size: 140%; } .textsize15{ font-size: 150%; } .textsize16{ font-size: 160%; } .textsize20{ font-size: 200%; } .text_align_left{ text-align: left; } .text_align_center{ text-align: center; } .text_align_right{ text-align: right; } .text_justif{ text-align: justify; } @media (min-width: 1200px) { .slide_effect_text { position: absolute; bottom: 0%; left: 50%; z-index: 10; color: #fff; display: block; transform: translate(-50%, -50%); width: 90%; } .dreamit-slider-content { background: #2125299e; padding: 20px; border-radius: 5px; box-shadow: 0px 2px 15px rgb(0 0 0 / 10%); } .textsize_slide32{ font-size: 320%; } .textsize_slide18{ font-size: 180%; } .textsize_slide14{ font-size: 140%; } .textsize_slide12{ font-size: 120%; } .textsize_slide10{ font-size: 80%; } .textsize32{ font-size: 320%; } .textsize28{ font-size: 280%; } .textsize24{ font-size: 240%; } .textsize18{ font-size: 180%; } .textsize14{ font-size: 140%; } .textsize12{ font-size: 120%; } .textsize10{ font-size: 100%; } .text_shaddow{ margin: 0 0; padding: 0; line-height: 1.1; font-weight: bold; color: #fff; text-shadow: 3px 2px 5px #000; -webkit-text-stroke: 1px transparent; } .logo_load{ margin-top:100px; margin-left:44%; width:60px; height:auto; box-shadow: 0 4px 4px rgba(0,0,0,.125), 0 4px 6px rgba(0,0,0,0.7); border-radius:0px 0px 35px 35px; background-color: #fff; text-align: center; display: flex !important; justify-content: center; align-items: center; } } @media (max-width: 992px) { .slide_effect_text { position: absolute; bottom: 30%; left: 50%; z-index: 10; color: #fff; display: block; transform: translate(-50%, -50%); width: 90%; } .dreamit-slider-content { background: #2125299e; padding: 20px; border-radius: 5px; box-shadow: 0px 2px 15px rgb(0 0 0 / 10%); } .textsize_slide32{ font-size: 320%; } .textsize_slide18{ font-size: 180%; } .textsize_slide14{ font-size: 140%; } .textsize_slide12{ font-size: 120%; } .textsize_slide10{ font-size: 80%; } .textsize32{ font-size: 320%; } .textsize28{ font-size: 280%; } .textsize24{ font-size: 240%; } .textsize18{ font-size: 180%; } .textsize14{ font-size: 140%; } .textsize12{ font-size: 120%; } .textsize10{ font-size: 100%; } .text_shaddow{ margin: 0 0; padding: 0; line-height: 1.1; font-weight: bold; text-shadow: 3px 2px 5px #000; -webkit-text-stroke: 1px transparent; } } @media (max-width: 768px) { .slide_effect_text { position: absolute; bottom: 0%; left: 50%; z-index: 10; color: #fff; display: block; transform: translate(-50%, -50%); width: 90%; } .dreamit-slider-content { background: #2125299e; padding: 20px; border-radius: 5px; box-shadow: 0px 2px 15px rgb(0 0 0 / 10%); } .textsize_slide32{ font-size: 130%; } .textsize_slide18{ font-size: 100%; } .textsize_slide14{ font-size: 90%; } .textsize_slide12{ font-size: 80%; } .textsize_slide10{ font-size: 70%; } .slide-effect3 { padding:30px; top: 40%; } .slide-effect4 { padding:30px; bottom: 5%; } .textsize32{ font-size: 180%; } .textsize28{ font-size: 150%; } .textsize24{ font-size: 140%; } .textsize18{ font-size: 120%; } .textsize14{ font-size: 100%; } .textsize12{ font-size: 100%; } .textsize10{ font-size: 100%; } .text_shaddow{ margin: 0 0; padding: 0; line-height: 1.1; font-weight: bold; text-shadow: 1px 1px 2px #000; -webkit-text-stroke: 1px transparent; } } @media (max-width: 576px) { .slide_effect_text { position: absolute; bottom: 0%; left: 50%; z-index: 10; color: #fff; display: block; transform: translate(-50%, -50%); width: 90%; } .dreamit-slider-content { background: #2125299e; padding: 20px; border-radius: 5px; box-shadow: 0px 2px 15px rgb(0 0 0 / 10%); } .textsize_slide32{ font-size: 130%; } .textsize_slide18{ font-size: 100%; } .textsize_slide14{ font-size: 90%; } .textsize_slide12{ font-size: 80%; } .textsize_slide10{ font-size: 70%; } .slide-effect3 { padding:30px; top: 40%; } .slide-effect4 { padding:10px; top: 30%; } .textsize32{ font-size: 180%; } .textsize28{ font-size: 150%; } .textsize24{ font-size: 140%; } .textsize18{ font-size: 120%; } .textsize14{ font-size: 100%; } .textsize12{ font-size: 100%; } .textsize10{ font-size: 100%; } .text_shaddow{ margin: 0 0; padding: 0; line-height: 1.1; font-weight: bold; text-shadow: 1px 1x 2px #000; -webkit-text-stroke: 1px transparent; } } .font_weight400{ font-weight: 400; } .font_weight500{ font-weight: 500; } .font_weight600{ font-weight: 600; } .font_weight700{ font-weight: 700; } .font_weight800{ font-weight: 800; } .font_weight{ font-weight: bold; } .font_colblack{ color: #161616; } .font_colgrey{ color: #494949; } .font_colgrey2{ color: #8f8f8f; } .font_colgreen{ color: #02532d; } .font_colgreen2{ color: #498802; } .font_colgreen3{ color: #72d503; } .font_colwhite{ color: #ffffff; } .font_colyellow{ color: #e5ff00; } .font_colorange{ color: #ff7300; } .font_colorange_stroke{ color: #ff7300; text-shadow: 3px 2px 2px #ffffff; } .font_colpink{ color: #ff006a; } .font_colpink_stroke{ color: #ff006a; text-shadow: 1px 1px 4px #ffffff; } .font_colmaroon{ color: #990442; } .font_coldanger{ color: #f4516c!important; margin-left: 3px; } .font_colsilver{ color: #7c7c7c; } .font_colsilver2{ color: #dadada; } .font_colblue{ color: #005da2; } .font_colblue_stroke{ color: #084a83; text-shadow: 2px 2px 4px #ffffff; } .font_colblue2{ color: #132996; } .font_colblue3{ color: #71bafb; } .font_colred{ color: #70033a; } .font_colred2{ color: #ac0659; } .font_colblue_a{ color: #3b3163; } .font_colblue_a:hover{ color: #084a83; } .font_colblue_a2{ color: #084a83; } .font_colblue_a2:hover{ color: #680202; } .font_col_a2{ color: #539ddb; } .font_col_a2:hover{ color: #ffffff; } .font_colgreen_a{ color: #427400; } .font_colgreen_a:hover{ color: #2d4e02; } .font_colgreen_a2{ color: #2d4e02; } .font_colgreen_a2:hover{ color: #800303; } .font_colred_a{ color: #b40557; } .font_colred_a:hover{ color: #830850; } .font_colred_a2{ color: #830846; } .font_colred_a2:hover{ color: #440380; } .font_colblack_a{ color: #999999; } .font_colblack_a:hover{ color: #666666; } .font_colpurple{ color: #200096; } .font_colwhite_a{ color: #ffffff; } .font_colwhite_a:hover{ color: #e0e0e0; } .font_colorange_a{ color: #ff9f00; } .font_colorange_a:hover{ color: #e0e0e0; } .font_Manifold{ font-family: 'ManifoldCF-Medium'; } .font_Lucida{ font-family: 'Lucida Sans'; } .font_Verdana{ font-family: Verdana; } .font_ubuntu{ font-family: 'Ubuntu',sans-serif; } .text_shaddow1{ text-shadow: 0.5px 0.5px 1px #666; } .text_shaddow2{ text-shadow: 5px 3px 10px #000; } .text_shaddow3{ text-shadow: 3px 3px 5px #000000; } .text_shaddow4{ text-shadow: 4px 0 4px black, 0 4px 4px black, 4px 0 4px black, 0 4px 4px black; } .text_shaddow5{ text-shadow: 1px 1px 2px #000000; } .text_shaddow6{ text-shadow: 1px 1px 2px #999999; } .bottom_border_blue{ border-bottom: 5px solid; border-color: #1159ab; } .bottom_border_red{ border-bottom: 5px solid; border-color: #960303; } .menu_box { border-radius: 0.25rem; box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); display: block; margin-bottom: 20px; position: relative; } .menu_box>.inner { padding: 10px; } .menu_box .icon { color: rgba(0,0,0,.15); z-index: 0; } .menu_box .icon>i { font-size: 90px; position: absolute; right: 15px; top: 15px; transition: -webkit-transform .3s linear; transition: transform .3s linear; transition: transform .3s linear,-webkit-transform .3s linear; } .menu_box>.small-box-footer { background-color: rgba(0,0,0,.1); color: rgba(255,255,255,.8); display: block; padding: 3px 0; position: relative; text-align: center; text-decoration: none; z-index: 10; } .bg_blues { background-color: #efebeb!important; border-radius: 0.45rem; border: 2px solid #03691a; } .bg_blues:hover { background-color: rgb(105, 184, 1)!important; } .bg_blues, .bg_blues>a { color: #fff!important; } .img_responsive{ max-width: 100%; display:block; height: auto; position: absolute; } table,tbody, th, td { border: 1px solid; } .tabku{ color:#e7e7e7; } .tabku:active{ color:#272727; } .tabku:hover{ color:#ffffff; } .tombol_statistik{ height:135px; width: 135px; padding-top: 1px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border:2px solid #ffffff; left:0 auto; top:0 auto; margin:0 auto; } .tombol_statistik2{ height:130px; width: 130px; margin:15px 12px 0px 17px; padding-top:10px; } .tombol_statistik2 h2{ line-height: 0.9; } .ico_size1{ height:40px; width: 40px; transition: all 0.2s linear 0.2s; -webkit-transition: all 0.2s linear 0.2s; -moz-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0.2s; } .ico_size2{ height:60px; width: 60px; transition: all 0.2s linear 0.2s; -webkit-transition: all 0.2s linear 0.2s; -moz-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0.2s; } .ico_size2b{ height:80px; width: 80px; transition: all 0.2s linear 0.2s; -webkit-transition: all 0.2s linear 0.2s; -moz-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0.2s; } .ico_size3{ height:100px; width: 100px; transition: all 0.2s linear 0.2s; -webkit-transition: all 0.2s linear 0.2s; -moz-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0.2s; } .ico_size4{ height:60px; width: 60px; transition: all 0.2s linear 0.2s; -webkit-transition: all 0.2s linear 0.2s; -moz-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0.2s; } .statcircle_green { background: rgb(255,255,255); background: -moz-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 55%, rgba(208,208,208,1) 55%, rgba(181,181,181,1) 100%); background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 55%, rgba(208,208,208,1) 55%, rgba(181,181,181,1) 100%); background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 55%, rgba(208,208,208,1) 55%, rgba(181,181,181,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#b5b5b5",GradientType=1); -webkit-transition: -webkit-transform .4s ease-in-out; -ms-transition: -ms-transform .4s ease-in-out; transition: transform .4s ease-in-out; color:#2a436f; } .statcircle_green:hover { background: rgb(47,167,2); background: -moz-linear-gradient(0deg, rgb(30, 109, 2) 0%, rgba(30, 109, 2) 46%, rgba(47,167,2,1) 46%, rgba(47,167,2,1) 100%); background: -webkit-linear-gradient(0deg, rgba(30, 109, 2) 0%, rgba(30, 109, 2) 46%, rgba(47,167,2,1) 46%, rgba(47,167,2,1) 100%); background: linear-gradient(0deg, rgba(30, 109, 2) 0%, rgba(30, 109, 2) 46%, rgba(47,167,2,1) 46%, rgba(47,167,2,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2fa702",endColorstr="#81ff00",GradientType=1); cursor:pointer; transform: scale(1.1); color:#ffffff; } .statcircle_red { background: rgb(167,2,2); -webkit-transition: -webkit-transform .4s ease-in-out; -ms-transition: -ms-transform .4s ease-in-out; transition: transform .4s ease-in-out; } .statcircle_red:hover { cursor:pointer; transform: scale(1.1); } .statcircle_blue { background: rgb(255,255,255); background: -moz-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 55%, rgba(208,208,208,1) 55%, rgba(181,181,181,1) 100%); background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 55%, rgba(208,208,208,1) 55%, rgba(181,181,181,1) 100%); background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 55%, rgba(208,208,208,1) 55%, rgba(181,181,181,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#b5b5b5",GradientType=1); -webkit-transition: -webkit-transform .4s ease-in-out; -ms-transition: -ms-transform .4s ease-in-out; transition: transform .4s ease-in-out; color:#2a436f; } .statcircle_blue:hover { background: rgb(59,68,195); background: -moz-radial-gradient(circle, rgba(59,68,195,1) 0%, rgba(59,68,195,1) 31%, rgba(64,74,205,1) 62%, rgba(243,243,243,1) 62%, rgba(203,201,201,1) 79%, rgba(180,180,180,1) 100%); background: -webkit-radial-gradient(circle, rgba(59,68,195,1) 0%, rgba(59,68,195,1) 31%, rgba(64,74,205,1) 62%, rgba(243,243,243,1) 62%, rgba(203,201,201,1) 79%, rgba(180,180,180,1) 100%); background: radial-gradient(circle, rgba(59,68,195,1) 0%, rgba(59,68,195,1) 31%, rgba(64,74,205,1) 62%, rgba(243,243,243,1) 62%, rgba(203,201,201,1) 79%, rgba(180,180,180,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b44c3",endColorstr="#b4b4b4",GradientType=1); cursor:pointer; transform: scale(1.1); color:#ffffff; } .statcircle_yellow { background: rgb(104, 167, 2); -webkit-transition: -webkit-transform .4s ease-in-out; -ms-transition: -ms-transform .4s ease-in-out; transition: transform .4s ease-in-out; } .statcircle_yellow:hover { cursor:pointer; transform: scale(1.1); } .statcircle_purple { background: rgb(104,2,167); background: -moz-linear-gradient(0deg, rgba(104,2,167,1) 0%, rgba(104,2,167,1) 46%, rgba(141,0,255,1) 46%, rgba(141,0,255,1) 100%); background: -webkit-linear-gradient(0deg, rgba(104,2,167,1) 0%, rgba(104,2,167,1) 46%, rgba(141,0,255,1) 46%, rgba(141,0,255,1) 100%); background: linear-gradient(0deg, rgba(104,2,167,1) 0%, rgba(104,2,167,1) 46%, rgba(141,0,255,1) 46%, rgba(141,0,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6802a7",endColorstr="#8d00ff",GradientType=1); -webkit-transition: -webkit-transform .4s ease-in-out; -ms-transition: -ms-transform .4s ease-in-out; transition: transform .4s ease-in-out; } .statcircle_purple:hover { cursor:pointer; transform: scale(1.1); } .statcircle_orange { background: rgb(167,99,2); background: -moz-linear-gradient(0deg, rgba(167,99,2,1) 0%, rgba(167,99,2,1) 45%, rgba(255,98,0,1) 45%, rgba(255,98,0,1) 100%); background: -webkit-linear-gradient(0deg, rgba(167,99,2,1) 0%, rgba(167,99,2,1) 45%, rgba(255,98,0,1) 45%, rgba(255,98,0,1) 100%); background: linear-gradient(0deg, rgba(167,99,2,1) 0%, rgba(167,99,2,1) 45%, rgba(255,98,0,1) 45%, rgba(255,98,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a76302",endColorstr="#ff6200",GradientType=1); -webkit-transition: -webkit-transform .4s ease-in-out; -ms-transition: -ms-transform .4s ease-in-out; transition: transform .4s ease-in-out; } .statcircle_orange:hover { cursor:pointer; transform: scale(1.1); } .rotate-2 { /* -webkit-transform: rotate(-15deg); */ /* transform: rotate(-15deg); */ } @import url("https://fonts.googleapis.com/css?family=Montserrat:700"); .hero { font-family: "Montserrat", sans-serif; } .hero2 { position: relative; overflow: hidden; } .hero__title { color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; z-index: 1; } .cube { position: absolute; top: 40vh; left: 45vw; width: 10px; height: 10px; border: solid 1px #f4fff2a4; transform-origin: top left; transform: scale(0) rotate(0deg) translate(-50%, -50%); -webkit-animation: cube 12s ease-in forwards infinite; animation: cube 12s ease-in forwards infinite; z-index: -99; } .cube:nth-child(2n) { border-color: rgba(239, 255, 243, 0.507); } .cube:nth-child(2) { -webkit-animation-delay: 2s; animation-delay: 2s; left: 25vw; top: 10vh; } .cube:nth-child(3) { -webkit-animation-delay: 4s; animation-delay: 4s; left: 75vw; top: 10vh; } .cube:nth-child(4) { -webkit-animation-delay: 6s; animation-delay: 6s; left: 90vw; top: 10vh; } .cube:nth-child(5) { -webkit-animation-delay: 8s; animation-delay: 8s; left: 10vw; top: 10vh; } .cube:nth-child(6) { -webkit-animation-delay: 10s; animation-delay: 10s; left: 50vw; top: 10vh; } .cube2 { position: absolute; top: 40vh; left: 45vw; width: 10px; height: 10px; border: solid 1px #f6fff58e; transform-origin: top left; transform: scale(0) rotate(0deg) translate(-50%, -50%); -webkit-animation: cube 12s ease-in forwards infinite; animation: cube 12s ease-in forwards infinite; z-index: -1; border-radius: 50%; } .cube2:nth-child(2n) { border-color: #f5fff785; } .cube2:nth-child(2) { -webkit-animation-delay: 2s; animation-delay: 2s; left: 5vw; top: 5vh; } .cube2:nth-child(3) { -webkit-animation-delay: 4s; animation-delay: 4s; left: 15vw; top: 10vh; } .cube2:nth-child(4) { -webkit-animation-delay: 6s; animation-delay: 6s; left: 10vw; top: 20vh; } .cube2:nth-child(5) { -webkit-animation-delay: 8s; animation-delay: 8s; left: 10vw; top: 10vh; } .cube2:nth-child(6) { -webkit-animation-delay: 10s; animation-delay: 10s; left: 5vw; top: 20vh; } @-webkit-keyframes cube { from { transform: scale(0) rotate(0deg) translate(-50%, -50%); opacity: 1; } to { transform: scale(20) rotate(960deg) translate(-50%, -50%); opacity: 0; } } @keyframes cube { from { transform: scale(0) rotate(0deg) translate(-50%, -50%); opacity: 1; } to { transform: scale(20) rotate(960deg) translate(-50%, -50%); opacity: 0; } } .glow-on-hover { width: 220px; height: auto; border: none; outline: none; color: #fff; background: transparent; cursor: pointer; position: relative; z-index: 0; border-radius: 10px; } .glow-on-hover:before { content: ''; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); position: absolute; top: -2px; left:-2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity .3s ease-in-out; border-radius: 10px; } .glow-on-hover:active { color: #000 } .glow-on-hover:active:after { background: transparent; } .glow-on-hover:hover:before { opacity: 1; } .glow-on-hover:after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #111; left: 0; top: 0; border-radius: 10px; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } .album-cover { left: 0; top: 0; right: 0; bottom: 0; border-radius: 5px; overflow: hidden; border: 3px solid; background: #000; width: 100%; } .album-title:hover::after { transform: scale(1.05); -webkit-transition: width .5s cubic-bezier(0,0,.58,1); -moz-transition: width .5s cubic-bezier(0,0,.58,1); -o-transition: width .5s cubic-bezier(0,0,.58,1); -ms-transition: width .5s cubic-bezier(0,0,.58,1); transition: all .55s cubic-bezier(.645,.045,.355,1) 0s; } .album-title:hover::before { transform: scale(1.1); -webkit-transition: width .5s cubic-bezier(0,0,.58,1); -moz-transition: width .5s cubic-bezier(0,0,.58,1); -o-transition: width .5s cubic-bezier(0,0,.58,1); -ms-transition: width .5s cubic-bezier(0,0,.58,1); transition: all .55s cubic-bezier(.645,.045,.355,1) 0s; } .hover-width { -webkit-transition: width .5s cubic-bezier(0,0,.58,1); -moz-transition: width .5s cubic-bezier(0,0,.58,1); -o-transition: width .5s cubic-bezier(0,0,.58,1); -ms-transition: width .5s cubic-bezier(0,0,.58,1); transition: all .55s cubic-bezier(.645,.045,.355,1) 0s; } .hover-rotation:hover::after { animation: spin2 3s infinite; background:transparent; } /* SPIN ANIMATION */ @keyframes spin2 { 0% { transform: rotate3d(0, 0, 0, 0deg); } 50% { transform: rotate3d(0, 1, 0, 360deg); } 100% { transform: rotate3d(0, 0, 0, 0deg); } } .album-title h1 { font-size: 150%; margin: 10px 10px 10px 0; padding: 0; line-height: 1; font-weight: bold; color: #fff; } .judul-album { position: relative; width: calc(28% - 10px); border-radius: 5px; width: 100%; height: 100%; min-height: 170px; } .flexcenter { display: flex !important; justify-content: center; align-items: center; } .itemcenter { align-items: center; text-align:center; justify-content: center; } .judul-album img{ display: block; width: 100%; height: 96%; position: absolute; top: 50%; left: 50%; margin: 0 auto; object-fit: cover; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .headgaleri-image img{ display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; margin: 0 auto; object-fit: cover; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .rowsame { display: flex; flex-flow: row wrap; justify-content: space-between center; } .headgaleri-title { position: relative; width: 30%; } .headgaleri-image { position: relative; width: 70%; height: 12vh; } .headgaleri-cover { background: #013f63; background: -moz-linear-gradient(90deg,transparent 0%,#013f63 100%); background: -webkit-linear-gradient(90deg,transparent 0%,#013f63 100%); background: linear-gradient(90deg,transparent 0%,#013f63 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="transparent",endColorstr="#00743e",GradientType=1); } .headgaleri-cover-red { background: #740036; background: -moz-linear-gradient(90deg,#740036 0%,transparent 100%); background: -webkit-linear-gradient(90deg,#740036 0%,transparent 100%); background: linear-gradient(90deg,#740036 0%,transparent 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="transparent",endColorstr="#00743e",GradientType=1); } .headgaleri-cover-blue,.headgaleri-cover-green,.headgaleri-cover-red { position: absolute; left: -1px; top: 0; right: 0; bottom: 0; } .headgaleri-cover2 { background: #013f63; background: -moz-linear-gradient(90deg,#013f63 0%,transparent 100%); background: -webkit-linear-gradient(90deg,#013f63 0%,transparent 100%); background: linear-gradient(90deg,#013f63 0%,transparent 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#013f63",endColorstr="transparent",GradientType=1); } .headgaleri-cover3 { background: rgb(0,0,0); background: -moz-linear-gradient(90deg, rgba(0,0,0,0.7455357142857143) 0%, rgba(0,0,0,0.75) 100%); background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.7455357142857143) 0%, rgba(0,0,0,0.75) 100%); background: linear-gradient(90deg, rgba(0,0,0,0.7455357142857143) 0%, rgba(0,0,0,0.75) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); } .headgaleri-cover4{ background: rgb(0,0,0); background: -moz-linear-gradient(90deg, rgba(0, 43, 56, 0.86) 0%, rgba(0, 43, 56, 0.86) 100%); background: -webkit-linear-gradient(90deg, rgba(0, 43, 56, 0.86) 0%, rgba(0, 43, 56, 0.86) 100%); background: linear-gradient(90deg, rgba(0, 43, 56, 0.86) 0%, rgba(0, 43, 56, 0.86) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); } .headgaleri-cover { position: absolute; left: -1px; top: 0; right: 0; bottom: 0; } .flexcenter { display: flex !important; justify-content: center; align-items: center; } .countdown-panel { margin: 0 0 0 auto; float: right; width: 25vh; text-align: center; } .countdown-panel li span { display: block; color: #dbdbdb; font-size: 120%; font-weight: 700; text-shadow: -1px -1px 0 rgba(0,0,0,.3), 1px -1px 0 rgba(0,0,0,.3), -1px 1px 0 rgba(0,0,0,.3), 1px 1px 0 rgba(0,0,0,.3); } /*-----------------jam digital------------------------------*/ .jam-digital1 { width: 180px; text-align: center; float:right; } .jam1_headblue span,.jam1_headgreen span,.jam1_headred span { float: left; text-align: center; width: 40px; box-sizing: border-box; } .jam1_headblue::after,.jam1_headgreen::after,.jam1_headred::after { content: ""; display: block; clear: both; } .jam1_headblue span:nth-child(1) { background: rgba(5, 1, 255, 0.8); } .jam1_headblue span:nth-child(2) { background: rgba(5, 1, 255, 0.8); } .jam1_headblue span:nth-child(3) { background: rgba(5, 1, 255, 0.8); } .jam1_headgreen span:nth-child(1) { background: rgba(1, 136, 30, 0.8); } .jam1_headgreen span:nth-child(2) { background: rgba(1, 136, 30, 0.8); } .jam1_headgreen span:nth-child(3) { background: rgba(1, 136, 30, 0.8); } .jam1_headred span:nth-child(1) { background: rgba(136, 1, 1, 0.8); } .jam1_headred span:nth-child(2) { background: rgba(136, 1, 1, 0.8); } .jam1_headred span:nth-child(3) { background: rgba(136, 1, 1, 0.8); } .jam2_headblue span,.jam2_headgreen span,.jam2_headred span { float: left; text-align: center; margin: 10px 2px 3px 2px; padding: 2px; width: 158px; box-sizing: border-box; } .jam2_headblue span:nth-child(1) { background: rgba(1, 137, 161, 0.8); } .jam2_headblue span:nth-child(2) { background: rgba(1, 137, 161, 0.8); } .jam2_headblue span:nth-child(3) { background: rgba(1, 137, 161, 0.8); } .jam2_headblue span:nth-child(4) { background: rgba(1, 137, 161, 0.8); } .jam2_headgreen span:nth-child(1) { background: rgba(100, 161, 1, 0.8); } .jam2_headgreen span:nth-child(2) { background: rgba(100, 161, 1, 0.8); } .jam2_headgreen span:nth-child(3) { background: rgba(100, 161, 1, 0.8); } .jam2_headgreen span:nth-child(4) { background: rgba(100, 161, 1, 0.8); } .jam2_headred span:nth-child(1) { background: rgba(161, 1, 140, 0.8); } .jam2_headred span:nth-child(2) { background: rgba(161, 1, 140, 0.8); } .jam2_headred span:nth-child(3) { background: rgba(161, 1, 140, 0.8); } .jam2_headred span:nth-child(4) { background: rgba(161, 1, 140, 0.8); } .jam2_headblue::after,.jam2_headgreen::after,.jam2_headred::after { content: ""; display: block; clear: both; } #unit1 span { float: left; width: 35px; text-align: center; text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 1px 1px rgba(10, 10, 10, 0.7) } span.turn { animation: turn 0.7s ease; } @keyframes turn { 0% {transform: rotateX(0deg)} 100% {transform: rotateX(360deg)} } @media screen and (max-width: 980px){ #jam1 span { float: left; text-align: center; width: 20%; margin: 0px 2px 0px 2px; width: 45px; } h1 { margin: 20px 5%; } .jam-digital1 { width: 100%; margin: 0; } #unit1 span { width: 23%; } .img_preload{ width:70px; height:auto; justify-content: center; } .img_preload2{ width:70px; height:auto; justify-content: center; } .img_profil{ width:200px; height:auto; } .bakc_preload{ } .bakc_preload{ width:400px; height:350px; } .text_preload{ margin-top:0px; } .height_score{ height:200px; } .height_score{ height:300px; } .login_box{ width:400px; margin-top:5%; } .line_text{ line-height: 1.2; } .main-div,.main-div1,.main-div2,.main-div3,.main-div4,.main-div5,.main-div6,.main-div7,.main-div8,.main-div9,.main-div10{ display: block; } .hidden_text_hp{ display:none; } .padding_top{ padding-top:2%; } .padding_top2{ padding-top:2%; } .padding_bottom{ padding-bottom:2%; } } @media screen and (min-width: 981px){ #jam1 span { float: left; text-align: center; width: 20%; margin: 0px 2px 0px 2px; padding: 2px; width: 50px; } h1 { margin: 20px 5%; } .jam-digital1 { width: 100%; margin: 0; } #unit1 span { width: 23%; } .img_preload{ width:20%; height:auto; justify-content: right; } .img_preload2{ width:120px; height:auto; justify-content: center; } .img_preload3{ width:10%; height:auto; justify-content: center; } .bakc_preload{ width:600px; height:350px; } .text_preload{ margin-top:60px; } .img_profil{ width:100%; height:auto; } .max_height_scroll{ max-height:1400px; overflow-y: auto; } .max_height_scroll::-webkit-scrollbar { display: none; /* Safari and Chrome */ } .height_score{ height:300px; } .login_box{ width:1000px; margin-top:10%; } .line_text{ line-height: 1.2; } .main-div,.main-div1,.main-div2,.main-div3,.main-div4,.main-div5,.main-div6,.main-div7,.main-div8,.main-div9,.main-div10{ display: none; } .line05{ line-height: 0.5; } .line08{ line-height: 0.8; } .line1{ line-height: 1; } .line15{ line-height: 1.5; } .padding_top{ padding-top:6%; } .padding_top2{ padding-top:14%; } .padding_bottom{ padding-bottom:10%; } } .font_overlay { font-family: 'ManifoldCF-Medium'; font-weight: bold; text-align: right; text-transform: uppercase; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.852), transparent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-repeat: no-repeat; background-size: 80%; animation: shine 5s linear infinite; position: relative; } @keyframes shine { 0% { background-position-x: -500%; } 100% { background-position-x: 500%; } } .hover-1 { --c: #1095c1; /* the color */ --s: .15em; line-height:1.1em; padding-bottom: calc(2.1*var(--s)); background: conic-gradient(from 135deg at top,var(--c) 90deg,#0000 0) left 0 bottom var(--s)/calc(2*var(--s)) var(--s) repeat-x, conic-gradient(from -45deg at bottom,var(--c) 90deg,#0000 0) left var(--s) bottom 0/calc(2*var(--s)) var(--s) repeat-x; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) 0/var(--_p,0%) padding-box no-repeat; transition: .5s; } .hover-1:hover { --_p: 100%; color: var(--c); } .hover-2 { --c: #ffffff; /* the color */ --b: .1em; /* border length*/ --d: 20px; /* the cube depth */ --_s: calc(var(--d) + var(--b)); color: var(--c); border: solid #0000; border-width: var(--b) var(--b) var(--_s) var(--_s); background: conic-gradient(at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box, conic-gradient(at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b)) border-box; transform: translate(calc(var(--d)/-1),var(--d)); clip-path: polygon( var(--d) 0%, var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), 100% calc(100% - var(--d)), var(--d) calc(100% - var(--d)) ); transition: 0.5s; } .hover-2:hover { transform: translate(0,0); clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100% ); } .hover-3 { --b: 0.1em; /* the thickness of the line */ --c: #1095c1; /* the color */ color: #0000; padding-block: var(--b); background: linear-gradient(var(--c) 50%,#000 0) 0% calc(100% - var(--_p,0%))/100% 200%, linear-gradient(var(--c) 0 0) 0% var(--_p,0%)/var(--_p,0%) var(--b) no-repeat; -webkit-background-clip: text,padding-box; background-clip: text,padding-box; transition: .3s var(--_s,0s) linear,background-size .3s calc(.3s - var(--_s,0s)); } .hover-3:hover { --_p: 100%; --_s: .3s; } .hover-4 { border: 8px solid; border-image: repeating-linear-gradient(135deg,#F8CA00 0 10px,#E97F02 0 20px,#BD1550 0 30px) 8; -webkit-mask: conic-gradient(from 180deg at top 8px right 8px, #0000 90deg,#000 0) var(--_i,200%) 0 /200% var(--_i,8px) border-box no-repeat, conic-gradient(at bottom 8px left 8px, #0000 90deg,#000 0) 0 var(--_i,200%)/var(--_i,8px) 200% border-box no-repeat, linear-gradient(#000 0 0) padding-box no-repeat; transition: .3s, -webkit-mask-position .3s .3s; } .hover-4:hover { --_i: 100%; color: #CC333F; transition: .3s, -webkit-mask-size .3s .3s; } .hover-5 { --s: 0.1em; /* the thickness of the line */ --c: #ffffff; /* the color */ color: #ffffff; padding-bottom: var(--s); background: linear-gradient(90deg,var(--c) 50%,#000 0) calc(100% - var(--_p,0%))/200% 100%, linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) var(--s) no-repeat; -webkit-background-clip: text,padding-box; background-clip: text,padding-box; transition: 0.5s; } .hover-5:hover { transition: 0.5s; } .hover-5:hover h3 { transition: all 0.3s ease-in-out; --_p: 100%; color:#ffffff; height:50%; width:70%; padding-top:10%; background: rgb(4,116,184); background: -moz-linear-gradient(90deg, rgba(4,116,184,0.77) 0%, rgba(4,116,184,0.77) 100%); background: -webkit-linear-gradient(90deg, rgba(4,116,184,0.77) 0%, rgba(4,116,184,0.77) 100%); background: linear-gradient(90deg, rgba(4,116,184,0.77) 0%, rgba(4,116,184,0.77) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0474b8",endColorstr="#0474b8",GradientType=1); } .hover-6 { --s: 0.1em; /* the thickness of the line */ --c: #ffffff; /* the color */ color: #ffffff; padding-bottom: var(--s); background: linear-gradient(90deg,var(--c) 50%,#000 0) calc(100% - var(--_p,0%))/200% 100%, linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) var(--s) no-repeat; -webkit-background-clip: text,padding-box; background-clip: text,padding-box; transition: all 0.5s ease-in-out; } .hover-6 h2 { position: absolute; display: none; transition: all 0.3s ease-in-out; } .hover-6:hover { height:50%; width:60%; } .hover-6:hover h2{ position: absolute; display: block; transition: all 0.3s ease-in-out; --_p: 100%; color:#ffffff; height:60%; width:100%; left:0; top:0; text-align: center; vertical-align: middle; padding-top:25%; background: rgb(4,116,184); background: -moz-linear-gradient(90deg, rgba(4,116,184,0.77) 0%, rgba(4,116,184,0.77) 100%); background: -webkit-linear-gradient(90deg, rgba(4,116,184,0.77) 0%, rgba(4,116,184,0.77) 100%); background: linear-gradient(90deg, rgba(4,116,184,0.77) 0%, rgba(4,116,184,0.77) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0474b8",endColorstr="#0474b8",GradientType=1); } #chartdiv { width : 100%; height : 435px; font-size : 11px; font-weight: 600; } #chartdiv2 { width : 100%; height : 435px; font-size : 11px; } .google-maps { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; margin:0 10px; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .slide-effect { position: absolute; right: 15%; bottom: 20px; left: 0; z-index: 10; color: #fff; display: block; } .slideDown, .slideUp,.slideDown2, .slideUp2 { opacity:0; } .slideDown2 { top:-100px; left:5px; animation: slideDown ease .4s forwards .6s; } .img_artikel_desa{ opacity: 0.1; display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; margin: 0 auto; object-fit: cover; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); z-index: 1; } .btn-style_red { color: #830846; background-color: #ffffff; border: 2px solid #ffffff; border-radius: 30px; font-weight: 700; padding: 3px 25px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .btn-style_red a{ color:#830846; } .btn-style_red a:hover{ color:#ffffff; } .btn-style_red:hover { border: 2px solid #ffffff; background-color: #83084c; } .btn-style_red:hover a { color: #ffffff; } .btn-style_red2 { color: #830846; background-color: #83084c; border: 2px solid #ffffff; border-radius: 30px; font-weight: 700; padding: 1px 15px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; width:200px; } .btn-style_red2 a{ color:#ffffff; } .btn-style_red2 a:hover{ color:#83084c; } .btn-style_red2:hover { border: 2px solid #83084c; background-color: #ffffff; } .btn-style_red2:hover a { color: #83084c; } .btn-style_green { color: #3b44c3; background-color: #ffffff; border: 2px solid #3b44c3; border-radius: 30px; font-weight: 700; padding: 3px 25px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .btn-style_green a{ color:#08835e; } .btn-style_green a:hover{ color:#ffffff; } .btn-style_green:hover { border: 2px solid #ffffff; background-color: #3b44c3; } .btn-style_green:hover a { color: #ffffff; } .btn-style_green2 { color: #ffffff; background-color: #088354; border: 2px solid #ffffff; border-radius: 30px; font-weight: 700; padding: 3px 25px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; width:200px; } .btn-style_green2 a{ color:#ffffff; } .btn-style_green2 a:hover{ color:#088354; } .btn-style_green2:hover { border: 2px solid #088354; background-color: #ffffff; } .btn-style_green2:hover a { color: #088354; } .btn-style_blue { color: #084a83; background-color: #ffffff; border: 2px solid #ffffff; border-radius: 30px; font-weight: 700; padding: 3px 25px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .btn-style_blue a{ color:#084a83; } .btn-style_blue a:hover{ color:#ffffff; } .btn-style_blue:hover { border: 2px solid #ffffff; background-color: #084a83; } .btn-style_blue:hover a { color: #ffffff; } .btn-style_blue2 { color: #ffffff; background-color: #084a83; border: 2px solid #084a83; border-radius: 30px; font-weight: 700; padding: 3px 25px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; width:200px; } .btn-style_blue2 a{ color:#ffffff; } .btn-style_blue2 a:hover{ color:#084a83; } .btn-style_blue2:hover { border: 2px solid #084a83; background-color: #ffffff; } .btn-style_blue2:hover a { color: #084a83; } .nav_menu{ width: 3.6rem; position: relative; } .nav_menu_text{ color:#ffffff; } .nav_menu_text:hover{ color:#ffffff; } .nav_menu_text2{ color:#6c757d; } .nav_menu_text2:hover{ color:#026d1e; } .nav_menu_button_blue { background-color: #084a83; } .nav_menu_button_blue:hover { background-color: #015299; } .nav_menu_button_green { background-color: #066853; } .nav_menu_button_green:hover { background-color: #088373; } .nav_menu_button_red { background-color: #68063f; } .nav_menu_button_red:hover { background-color: #940353; } .articlerow { display: flex; flex-flow: row wrap; justify-content: space-between center; } .rowstyle .artikelhome-image { width: 35% !important; float: left; } .articlerow-box { width: calc(50% - 10px); border: 4px solid; position: relative; border-radius: 5px; padding: 0 0 34px; margin: 5px; } .rowstyle .articlerow-box { width: calc(100% - 10px); border: 4px solid; position: relative; border-radius: 5px; padding: 0 0 34px; margin: 5px; } .artikelhome-text { padding: 15px; } .rowstyle .artikelhome-text { position: relative; overflow: hidden; width: 65%; padding: 15px; float: right; } .artikelhome-text h3 { font-size: 100%; margin: 0 0 5px; padding: 0; line-height: 1.2; font-weight: bold; } .artikelhome-info { padding: 2px 0; } .artikelmeta { position: relative; overflow: hidden; margin: 0 10px 0 0; } .pagebox .artikelmeta { position: relative; overflow: hidden; margin: 0 10px 0 0; float: left; } .artikelmeta h2 { padding-top:-5px; } .artikelhome-link { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; border: none; border-top: 1px solid; padding: 0; z-index: 3; } .artikelmeta i.fa { font-size: 90%; margin: 0 3px 0 0; opacity: 0.6; padding-top:0px; } .artikelhome-link-col { width: 50%; position: relative; } .artikelhome-link-item1, .artikelhome-link-item2 { position: relative; overflow: hidden; height: 34px; cursor: pointer; padding: 0 15px; } .artikelhome-link-item1 { border: none; border-right: 1px solid; } .artikelhome-link-item1 p, .artikelhome-link-item2 p { font-size: 90%; font-weight: 500%; letter-spacing: -0.4px; line-height: 1; } .artikelhome-link-item1 i.fa, .artikelhome-link-item2 i.fa { font-size: 90%; margin: 0 3px 0 0; } .artikel-date { position: absolute; bottom: 5px; left: 15px; right: 15px; overflow: hidden; } .metadate { position: relative; width: 30px; height: 30px; font-size: 100%; margin: 0; padding: 0; line-height: 1; color: #fff; font-weight: bold; } .metadate:after { content: ""; position: absolute; right: -7px; top: -1px; border-top: transparent 16px solid; border-bottom: transparent 16px solid; } .metanext { border: none; border-left: 1px solid; height: 30px; font-size: 90%; margin: 0 0 0 -1px; padding: 0 20% 0 12px; line-height: 1; color: #fff; background: #007e3f; background: -moz-linear-gradient(90deg, #007e3f 0%, transparent 75%); background: -webkit-linear-gradient(90deg, #007e3f 0%, transparent 75%); background: linear-gradient(90deg, #007e3f 0%, transparent 75%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#007e3f",endColorstr="transparent",GradientType=1); } .hoverimage { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .hoverimage-left { position: absolute; left: 0; top: 0; bottom: 0; width: 0; opacity: 0.7; } .hoverimage-right { position: absolute; right: 0; top: 0; bottom: 0; width: 0; } .forhover:hover .hoverimage-left { width: 50%; } .forhover:hover .hoverimage-right { width: 50%; } .headline.forhover:hover .hoverimage-left { width: 100% !important; background: rgba(0,0,0,0.6); } .hoverimage-icon { position: relative; z-index: 1; width: 30px; height: 0; border-radius: 30px; background: #000; margin: 3px 0; overflow: hidden; cursor: pointer; } .forhover:hover .hoverimage-icon { height: 30px; } .hoverimage-icon svg { width: 20px; height: auto; fill: #fff; } .hover-width { -webkit-transition: width .5s cubic-bezier(0,0,.58,1); -moz-transition: width .5s cubic-bezier(0,0,.58,1); -o-transition: width .5s cubic-bezier(0,0,.58,1); -ms-transition: width .5s cubic-bezier(0,0,.58,1); transition: all .55s cubic-bezier(.645,.045,.355,1) 0s; } .hover-height { -webkit-transition: height .10s cubic-bezier(0,0,.58,1); -moz-transition: height .10s cubic-bezier(0,0,.58,1); -o-transition: height .10s cubic-bezier(0,0,.58,1); -ms-transition: height .10s cubic-bezier(0,0,.58,1); transition: all .55s cubic-bezier(.645,.045,.355,1) 0s; } .hover-height2 { -webkit-transition: width .2s cubic-bezier(0,0,.58,1); -moz-transition: width .2s cubic-bezier(0,0,.58,1); -o-transition: width .2s cubic-bezier(0,0,.58,1); -ms-transition: width .2s cubic-bezier(0,0,.58,1); transition: all .2s cubic-bezier(.645,.045,.355,1) 0s; } .image_table{ width:50px; height:30px; } .image_table2{ width:90px; height:40px; } .image_table3{ width:40px; height:60px; } .back_header_change { -webkit-box-shadow: 0 4px 4px rgba(0,0,0,.125), 0 4px 6px rgba(0,0,0,0.7); -moz-box-shadow: 0 4px 4px rgba(0,0,0,.125), 0 4px 6px rgba(0,0,0,0.7); box-shadow: 0 4px 4px rgba(0,0,0,.125), 0 4px 6px rgba(0,0,0,0.7); transition: all 0.2s ease-in-out; } .scroll_hide { background-color: #eeeeee; height: 1100px; border: 1px dotted black; overflow-y: scroll; /* Add the ability to scroll */ } /* Hide scrollbar for Chrome, Safari and Opera */ .scroll_hide::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .scroll_hide { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .scroll_hide2 { overflow-x: scroll; /* Add the ability to scroll */ } /* Hide scrollbar for Chrome, Safari and Opera */ .scroll_hide2::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .scroll_hide2 { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .acontent:hover .dcontent{ display:block; } .dcontent{ display:none; position:absolute; background-color: #000000; color: #ffffff; box-shadow: 0 4px 4px rgba(0,0,0,.125), 0 4px 6px rgba(0,0,0,0.7); width:150px; height:50px; text-align: center; vertical-align: middle; padding-top:30%; } .bg_img_blur{ background-image: url("../img/back_desa3.jpg"); filter:blur(8px); -webkit-filter:blur(8px); background-position: center; background-repeat: no-repeat; background-size: cover; } .flip-card { background-color: transparent; width: 400px; height: 400px; perspective: 1000px; } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } .flip-card-back-blue, .flip-card-back-green, .flip-card-back-red { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } .flip-card-front { color: red; } .flip-card-back-blue { background-color: #00427f; color: white; transform: rotateY(180deg); } .flip-card-back-green { background-color: #00745b; color: white; transform: rotateY(180deg); } .flip-card-back-red { background-color: #83084c; color: white; transform: rotateY(180deg); } .big-stat { animation: flip 2s infinite; } .flipchar { display: inline-block; animation: mirrorflip 6s 0s linear infinite; } @keyframes mirrorflip { 0% { transform: scale(1, 1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); } 50% { transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); } 100% { transform: scale(1, 1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); } } .flippers { animation: flipY 10s infinite; } .flippers2 { animation: flipX 1s infinite; } /* Flip Animation */ @keyframes flipX{ from { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); } to { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); } } @keyframes flipY{ 0% { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); } 50% { -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); -o-transform: scaleY(-1); } 100% { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); } } .underline_header{ text-decoration: underline #666666 5px; text-underline-offset: 15px; border-radius:0px 0px 35px 35px; margin-bottom:20px; } .underline_header_blue{ text-decoration: underline #084a83 5px; text-underline-offset: 15px; border-radius:0px 0px 35px 35px; } .underline_header_green{ text-decoration: underline #02532d 5px; text-underline-offset: 15px; border-radius:0px 0px 35px 35px; } .underline_header_red{ text-decoration: underline #70033a 5px; text-underline-offset: 15px; border-radius:0px 0px 35px 35px; } .underline_menu{ text-decoration: underline #70033a 2px; text-underline-offset: 5px; } /* Loader 1 */ .loader-1 { height: 32px; width: 32px; -webkit-animation: loader-1-1 4.8s linear infinite; animation: loader-1-1 4.8s linear infinite; } @-webkit-keyframes loader-1-1 { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes loader-1-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader-1 span { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 32px; width: 32px; clip: rect(0, 32px, 32px, 16px); -webkit-animation: loader-1-2 1.2s linear infinite; animation: loader-1-2 1.2s linear infinite; } @-webkit-keyframes loader-1-2 { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(220deg); } } @keyframes loader-1-2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(220deg); } } .loader-1 span::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 32px; width: 32px; clip: rect(0, 32px, 32px, 16px); border: 3px solid #FFF; border-radius: 50%; -webkit-animation: loader-1-3 1.2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-1-3 1.2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-1-3 { 0% { -webkit-transform: rotate(-140deg); } 50% { -webkit-transform: rotate(-160deg); } 100% { -webkit-transform: rotate(140deg); } } @keyframes loader-1-3 { 0% { transform: rotate(-140deg); } 50% { transform: rotate(-160deg); } 100% { transform: rotate(140deg); } } /* Loader 2 */ .loader-2 { display: block; height: 32px; width: 32px; -webkit-animation: loader-2-1 3s linear infinite; animation: loader-2-1 3s linear infinite; } @-webkit-keyframes loader-2-1 { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes loader-2-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader-2 span { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 32px; width: 32px; clip: rect(16px, 32px, 32px, 0); -webkit-animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-2-2 { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes loader-2-2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader-2 span::before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 32px; width: 32px; border: 3px solid transparent; border-top: 3px solid #FFF; border-radius: 50%; -webkit-animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-2-3 { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes loader-2-3 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader-2 span::after { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 32px; width: 32px; border: 3px solid rgba(255, 255, 255, .5); border-radius: 50%; } /* Loader 3 */ .loader-3 { display: block; height: 32px; width: 32px; } .loader-3 span { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 32px; width: 32px; } .loader-3 span::before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 32px; width: 32px; border: 3px solid #FFF; border-bottom: 3px solid transparent; border-radius: 50%; -webkit-animation: loader-3-1 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-3-1 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-3-1 { 0% { -webkit-transform: rotate(0deg); } 40% { -webkit-transform: rotate(180deg); } 60% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes loader-3-1 { 0% { transform: rotate(0deg); } 40% { transform: rotate(180deg); } 60% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .loader-3 span::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 6px; height: 6px; background: #FFF; border-radius: 50%; -webkit-animation: loader-3-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-3-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-3-2 { 0% { -webkit-transform: translate3d(0, -32px, 0) scale(0, 2); opacity: 0; } 50% { -webkit-transform: translate3d(0, 0, 0) scale(1.25, 1.25); opacity: 1; } 100% { -webkit-transform: translate3d(0, 8px, 0) scale(0, 0); opacity: 0; } } @keyframes loader-3-2 { 0% { transform: translate3d(0, -32px, 0) scale(0, 2); opacity: 0; } 50% { transform: translate3d(0, 0, 0) scale(1.25, 1.25); opacity: 1; } 100% { transform: translate3d(0, 8px, 0) scale(0, 0); opacity: 0; } } /* Loader 4 */ .loader-4 { height: 52px; width: 32px; } .loader-4::after { content: ""; display: block; position: absolute; top: 50px; left: 0; bottom: 0; right: 0; margin: auto; width: 12px; height: 12px; background: #000; border-radius: 50%; -webkit-animation: loader-4-1 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-4-1 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-4-1 { 0% { -webkit-transform: scale(0); opacity: 0; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0); opacity: 0; } } @keyframes loader-4-1 { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } .loader-4 span { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 20px; width: 20px; -webkit-animation: loader-4-2 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-4-2 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-4-2 { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes loader-4-2 { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .loader-4 span::before, .loader-4 span::after { content: ""; display: block; position: absolute; top: 20px; left: 0; bottom: 0; right: 0; margin: auto; height: 22px; width: 22px; background: #000; border-radius: 50%; -webkit-animation: loader-4-3 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-4-3 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-4-3 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); } 50% { -webkit-transform: translate3d(-16px, 0, 0) scale(.5); } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); } } @keyframes loader-4-3 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-16px, 0, 0) scale(.5); } 100% { transform: translate3d(0, 0, 0) scale(1); } } .loader-4 span::after { -webkit-animation: loader-4-4 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-4-4 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-4-4 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); } 50% { -webkit-transform: translate3d(16px, 0, 0) scale(.5); } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); } } @keyframes loader-4-4 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(16px, 0, 0) scale(.5); } 100% { transform: translate3d(0, 0, 0) scale(1); } } /* Loader 5 */ .loader-5 { height: 32px; width: 32px; -webkit-animation: loader-5-1 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-5-1 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-5-1 { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes loader-5-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader-5::before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 8px; height: 8px; background: #FFF; border-radius: 50%; -webkit-animation: loader-5-2 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-5-2 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-5-2 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); } 50% { -webkit-transform: translate3d(24px, 0, 0) scale(.5); } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); } } @keyframes loader-5-2 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(24px, 0, 0) scale(.5); } 100% { transform: translate3d(0, 0, 0) scale(1); } } .loader-5::after { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 8px; height: 8px; background: #FFF; border-radius: 50%; -webkit-animation: loader-5-3 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-5-3 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-5-3 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); } 50% { -webkit-transform: translate3d(-24px, 0, 0) scale(.5); } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); } } @keyframes loader-5-3 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-24px, 0, 0) scale(.5); } 100% { transform: translate3d(0, 0, 0) scale(1); } } .loader-5 span { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 32px; width: 32px; } .loader-5 span::before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 8px; height: 8px; background: #FFF; border-radius: 50%; -webkit-animation: loader-5-4 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-5-4 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-5-4 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); } 50% { -webkit-transform: translate3d(0, 24px, 0) scale(.5); } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); } } @keyframes loader-5-4 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, 24px, 0) scale(.5); } 100% { transform: translate3d(0, 0, 0) scale(1); } } .loader-5 span::after { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 8px; height: 8px; background: #FFF; border-radius: 50%; -webkit-animation: loader-5-5 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-5-5 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; } @-webkit-keyframes loader-5-5 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); } 50% { -webkit-transform: translate3d(0, -24px, 0) scale(.5); } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); } } @keyframes loader-5-5 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -24px, 0) scale(.5); } 100% { transform: translate3d(0, 0, 0) scale(1); } } /* Loader 6 */ .loader-6 { height: 32px; width: 32px; } .loader-6 span { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 32px; width: 32px; } .loader-6 span::before, .loader-6 span::after { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 32px; width: 32px; border: 2px solid #FFF; border-radius: 50%; opacity: 0; -webkit-animation: loader-6-1 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) infinite; animation: loader-6-1 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) infinite; } @-webkit-keyframes loader-6-1 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(0); opacity: 1; } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1.5); opacity: 0; } } @keyframes loader-6-1 { 0% { transform: translate3d(0, 0, 0) scale(0); opacity: 1; } 100% { transform: translate3d(0, 0, 0) scale(1.5); opacity: 0; } } .loader-6 span::after { -webkit-animation: loader-6-2 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) .25s infinite; animation: loader-6-2 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) .25s infinite; } @-webkit-keyframes loader-6-2 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(0); opacity: 1; } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); opacity: 0; } } @keyframes loader-6-2 { 0% { transform: translate3d(0, 0, 0) scale(0); opacity: 1; } 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; } } .cross_sidebar{ border-bottom: 1px solid #c5c5c5; } .image-slider2{ /*background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 5px, rgba(0, 0, 0, 0.3) 5px, rgba(0, 0, 0, 0.3) 10px ),url(../img/Pemandangan_sawah_dan_gunung.jpg);*/ background: url(../img/dotted.png), url(../img/back_desa2.jpg); /*box-shadow: inset 0 0 0 2000px rgba(85, 84, 85, 0.3);*/ background-repeat: repeat, no-repeat; background-position: center; object-fit: cover; opacity: 0.9; } .image-slider3{ background: url(../img/dotted.png), url(../img/Pemandangan_sawah_dan_gunung.jpg); box-shadow: inset 0 0 0 2000px rgba(2, 128, 69, 0.3); background-repeat: repeat, no-repeat; background-position: center; object-fit: cover; opacity: 0.9; } .image-slider4{ background: url(../img/back_desa3.jpg); box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7); background-repeat: repeat, no-repeat; background-position: center; object-fit: cover; } .image-slider5{ background: url(../img/GAMBAR_MENU/bg2.jpg); /*box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7);*/ background-repeat: repeat, no-repeat; background-position: center; object-fit: cover; } .image-slider6{ background: url(../img/GAMBAR_MENU/img_pendidikan.jpg); box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7); background-repeat: repeat, no-repeat; background-position: center; object-fit: cover; } .border_top{ border-top:10px solid #530123; border-radius:15px 15px 0px 0px; height:50px; } .border_top:hover{ transition: all 0.3s ease-in-out; scale:1.1; } .border_bottom{ border-bottom:10px solid #530123; border-radius:0px 0px 15px 15px; height:50px; } .border_bottom:hover{ transition: all 0.3s ease-in-out; scale:1.1; } .border_bottom_judul{ border-bottom:10px solid #530123; border-radius:0px 0px 15px 15px; width:60%; height:50px; } .border_bottom_judul:hover{ transition: all 0.3s ease-in-out; scale:1.1; } .back_shaddow_judul { box-shadow: 0 2px 3px rgba(0,0,0,.125), 0 2px 5px rgba(0,0,0,0.7); text-align:center; } .back_shaddow_judul:hover { transition: all 0.3s ease-in-out; scale:1.1; } .text_judul{ scale:1; transition: all 0.3s ease-in-out; cursor:pointer; } .text_judul:hover{ scale:1.1; transition: all 0.3s ease-in-out; } .some-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 800px; text-align: center; font-weight: 500; font-size: 24px; } .pure { color: #e75480; text-decoration: underline; font-weight: 600; } .popup { height: 100vh; width: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, .3); backdrop-filter: blur(10px); z-index: 1048; opacity: 0; visibility: hidden; transition: all 0.3s; } .popup:target { opacity: 1; visibility: visible; } .popup__content { position: absolute; top: 100px; left: 100px; transform: translate(-100px, -100px); width: 20em; padding: 20px; background-color: white; box-shadow: 0 2rem 4rem rgba(0, 0, 0, .2); overflow: hidden; height:100%; } .popup__content2 { position: absolute; top: 0px; right: 0px; width: 25em; padding: 20px; background-color: white; box-shadow: 0 2rem 4rem rgba(0, 0, 0, .2); overflow: hidden; height:100%; } .popup__content_laporan { position: absolute; top: 0px; right: 0px; width: 100%; max-width: 90%; padding: 10px; background-color: white; box-shadow: 0 2rem 4rem rgba(0, 0, 0, .2); overflow: hidden; height:100%; } .button_modal { background-color: #ffffff; /* Green */ border: none; color: #68063f; padding: 10px 21px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin-top: 40px; top: 50%; transform: translate(16em, 6.4em); box-shadow: 0 2rem 4rem rgba(0, 0, 0, .2); } .button_modal:hover { background-color: #68063f; color:white; } .button_modal3 { background-color: #ffffff; /* Green */ border: none; color: #68063f; padding: 10px 21px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin-top: 40px; top: 20%; right:390px; position: absolute; box-shadow: 0 2rem 4rem rgba(0, 0, 0, .2); } .button_modal3:hover { background-color: #68063f; color:white; } .button_modal2 { background-color: #ffffff; /* Green */ border: none; color: #68063f; padding: 10px 15.5px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin-top: 40px; top: 10%; transform: translate(13.1em, 3.3em); box-shadow: 0 2rem 4rem rgba(0, 0, 0, .2); } .button_modal4 { background-color: #ffffff; /* Green */ border: none; color: #68063f; padding: 5px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin-top: 10px; top: 1%; right:5%; position: absolute; box-shadow: 0 2rem 4rem rgba(0, 0, 0, .2); border-radius: 10px; } .button_modal4:hover { background-color: #68063f; color:white; } .popup__text { font-size: 1.4rem; margin-bottom: 4rem; } .popup__content a{ color:#ffffff; } .popup__content a:hover{ color:#630142; } .overflow_auto_hide{ overflow: auto; scrollbar-width: none; } .overflow_auto_hide::-webkit-scrollbar { display: none; } .content_center{ justify-content: center; align-items: center; text-align: center; } .button_aa{ -webkit-transition: -webkit-transform .4s ease-in-out; -ms-transition: -ms-transform .4s ease-in-out; transition: transform .4s ease-in-out; background: rgb(231,231,231); background: -moz-linear-gradient(75deg, rgba(231,231,231,1) 0%, rgba(237,237,237,1) 67%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(75deg, rgba(231,231,231,1) 0%, rgba(237,237,237,1) 67%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%); background: linear-gradient(75deg, rgba(231,231,231,1) 0%, rgba(237,237,237,1) 67%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e7e7e7",endColorstr="#ffffff",GradientType=1); } .button_aa:hover { background: rgb(46,53,147); background: -moz-linear-gradient(75deg, rgba(46,53,147,1) 0%, rgba(59,68,195,1) 67%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(75deg, rgba(46,53,147,1) 0%, rgba(59,68,195,1) 67%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%); background: linear-gradient(75deg, rgba(46,53,147,1) 0%, rgba(59,68,195,1) 67%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2e3593",endColorstr="#ffffff",GradientType=1); } .button_a{ -webkit-transition: -webkit-transform .4s ease-in-out; -ms-transition: -ms-transform .4s ease-in-out; transition: transform .4s ease-in-out; scale: 1.0; color:#1a2a6c; } .button_a:hover { scale: 1.05; color:#ffffff; } .button_a:hover img { scale: 1.2; transition: all 0.3s ease-in-out; } .button_b{ -webkit-transition: -webkit-transform .3s ease-in-out; -ms-transition: -ms-transform .3s ease-in-out; transition: transform .3s ease-in-out; scale: 1.0; color:#666666; border-bottom:#7c7c7c 2px solid; border-radius:25px; } .button_b:hover { scale: 1.2; color:#007bff; } .button_b:hover img { scale: 1.2; transition: all 0.3s ease-in-out; } .scale1k1,.scale1k2,.scale1k3,.scale1k4,.scale1k5{ scale: 1.0; transition: all 0.3s ease-in-out; } .scale1k5:hover{ scale: 1.5; } .scale1k4:hover{ scale: 1.4; } .scale1k3:hover{ scale: 1.3; } .scale1k2:hover{ scale: 1.2; } .scale1k1:hover{ scale: 1.1; } #myloader_scroll,#myloader_scroll2,#myloader_scroll3,#myloader_scroll4,#myloader_scroll5 { left: 50%; top: 50%; z-index: 1; width: 120px; height: 120px; border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Add animation to "page content" */ .animate-bottom { position: relative; -webkit-animation-name: animatebottom; -webkit-animation-duration: 1s; animation-name: animatebottom; animation-duration: 1s } @-webkit-keyframes animatebottom { from { bottom:-100px; opacity:0 } to { bottom:0px; opacity:1 } } @keyframes animatebottom { from{ bottom:-100px; opacity:0 } to{ bottom:0; opacity:1 } } #myDiv { display: none; text-align: center; } .text_silver_a{ color:#595a5a; } .text_silver_a:hover{ color:#000000; } .highcharts-figure, .highcharts-data-table table { min-width: 310px; max-width: 800px; margin: 1em auto; } .highcharts-data-table table { font-family: Verdana, sans-serif; border-collapse: collapse; border: 1px solid #ebebeb; margin: 10px auto; text-align: center; width: 100%; max-width: 500px; } .highcharts-data-table caption { padding: 1em 0; font-size: 1.2em; color: #555; } .highcharts-data-table th { font-weight: 600; padding: 0.5em; } .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption { padding: 0.5em; } .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) { background: #f8f8f8; } .highcharts-data-table tr:hover { background: #f1f7ff; } #button-bar { min-width: 310px; max-width: 800px; margin: 0 auto; } .garis1 { width: 20%; background-color: orange; } .garis2 { width: 80%; background-color: #a5a5a5; } .garis1b { width: 30%; background-color: #a5a5a5; } .garis2b { width: 40%; background: rgb(255,139,0); background: -moz-radial-gradient(circle, rgba(255,139,0,1) 0%, rgba(255,112,0,1) 50%, rgba(255,98,0,1) 100%); background: -webkit-radial-gradient(circle, rgba(255,139,0,1) 0%, rgba(255,112,0,1) 50%, rgba(255,98,0,1) 100%); background: radial-gradient(circle, rgba(255,139,0,1) 0%, rgba(255,112,0,1) 50%, rgba(255,98,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff8b00",endColorstr="#ff6200",GradientType=1); } .garis3b { width: 30%; background-color: #a5a5a5; } .garis { float: left; height: 4px; margin-bottom: 15px; } .garisb { float: left; height: 12px; margin-bottom: 15px; border-radius: 0% 0% 50% 50%; } .vhmiddle{ text-align: center; vertical-align: middle; justify-content: center; display: block; } .scale_1 h1,.scale_1 h2,.scale_1 h3,.scale_1 p{ scale: 1; transition: all 0.2s linear 0.2s; -webkit-transition: all 0.2s linear 0.2s; -ms-transition: all 0.2s linear 0.2s; cursor: inherit; } .scale_1:hover h1,.scale_1:hover h2,.scale_1:hover h3,.scale_1:hover p{ scale: 1.2; cursor: pointer; } .uppercaseku{ text-transform: uppercase; } .italicku{ font-style: italic; } .custom-file-upload{ background: #f7f7f7; padding: 8px; border: 1px solid #e3e3e3; border-radius: 5px; border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; } .button_menu_garis_blue{ border-bottom: 1px solid #a6c5d3; height:35px; padding:7px 5px 7px 10px; cursor:pointer; color:#4c4c4c; } .button_menu_garis_blue:hover{ background-color: #a6c5d3; color:#006493; } .button_menu_garis_blue:hover a{ color:#006493; } .button_menu_garis_green{ border-bottom: 1px solid #a6d3c0; height:35px; padding:7px 5px 7px 10px; cursor:pointer; color:#4c4c4c; } .button_menu_garis_green:hover{ background-color: #a6d3c0; color:#016c40; } .button_menu_garis_green:hover a{ color:#016c40; } .button_menu_garis_red{ border-bottom: 1px solid #d3a6c1; height:35px; padding:7px 5px 7px 10px; cursor:pointer; color:#4c4c4c; } .button_menu_garis_red:hover{ background-color: #d3a6c1; color:#930040; } .button_menu_garis_red:hover a{ color:#930040; } .button_w1{ max-width:18px; width:100%; margin:2px auto; align-items: end; align-content: flex-end; } .hidden_class{ visibility: hidden; display:none; } .back_shaddow2{ background: #2125299e; } .back_trans5{ background: #fffffff7; } .transisi_color { background: red; -webkit-transition: background-color 2s ease-out; -moz-transition: background-color 2s ease-out; -o-transition: background-color 2s ease-out; transition: background-color 2s ease-out; } .transisi_color:hover { background-color: green; cursor: pointer; } .transisi_color2 { background: linear-gradient(to right, #ffffff99, #ffffff99 3%, #ffffff 10%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%; transition: background-position 275ms ease; text-decoration: none; animation: color-change 3s infinite; } .transisi_color2:hover { background-position: 0 100%; cursor:pointer; } @keyframes color-change { 0% { background-position: 200% 100%; } 50% { background-position: 100% 100%; } 100% { background-position: 0 100%; } } .floatleft{ float: left; } .floatright{ float: right; } .hide_view{ visibility: hidden; display: none; } .show_view{ visibility: visible; display: block; } .particle { position: fixed; border-radius: 50%; } @keyframes particle-animation-1 { 100% { transform: translate3d(10px, 5px, 4px); } } .particle:nth-child(1) { animation: particle-animation-1 60s infinite; opacity: 0.04; height: 10px; width: 10px; animation-delay: -0.32s; transform: translate3d(20px, 10px, 1px); background: #d9268b; } @keyframes particle-animation-2 { 100% { transform: translate3d(100px, -66px, 77px); } } .particle:nth-child(2) { animation: particle-animation-2 30s infinite; opacity: 0.2; height: 26px; width: 26px; animation-delay: -0.4s; transform: translate3d(-30px, 20px, 14px); background: #666666; } @keyframes particle-animation-3 { 100% { transform: translate3d(-30px, 60px, 14px); } } .particle:nth-child(3) { animation: particle-animation-3 30s infinite; opacity: 0.2; height: 86px; width: 86px; animation-delay: -0.4s; transform: translate3d(150px, -100px, 100px); background: #666666; } /*@keyframes particle-animation-3 { 100% { transform: translate3d(26vw, 62vh, 92px); } } .particle:nth-child(3) { animation: particle-animation-3 60s infinite; opacity: 0.61; height: 6px; width: 6px; animation-delay: -0.6s; transform: translate3d(42vw, 70vh, 80px); background: #d93226; } @keyframes particle-animation-4 { 100% { transform: translate3d(35vw, 77vh, 91px); } } .particle:nth-child(4) { animation: particle-animation-4 60s infinite; opacity: 0.87; height: 6px; width: 6px; animation-delay: -0.8s; transform: translate3d(81vw, 64vh, 51px); background: #3826d9; } @keyframes particle-animation-5 { 100% { transform: translate3d(49vw, 39vh, 31px); } } .particle:nth-child(5) { animation: particle-animation-5 60s infinite; opacity: 0.86; height: 8px; width: 8px; animation-delay: -1s; transform: translate3d(20vw, 16vh, 1px); background: #6226d9; } @keyframes particle-animation-6 { 100% { transform: translate3d(45vw, 67vh, 60px); } } .particle:nth-child(6) { animation: particle-animation-6 60s infinite; opacity: 0.55; height: 9px; width: 9px; animation-delay: -1.2s; transform: translate3d(68vw, 10vh, 94px); background: #d9c726; } @keyframes particle-animation-7 { 100% { transform: translate3d(45vw, 74vh, 92px); } } .particle:nth-child(7) { animation: particle-animation-7 60s infinite; opacity: 0.18; height: 9px; width: 9px; animation-delay: -1.4s; transform: translate3d(27vw, 82vh, 21px); background: #d926a3; } @keyframes particle-animation-8 { 100% { transform: translate3d(28vw, 46vh, 94px); } } .particle:nth-child(8) { animation: particle-animation-8 60s infinite; opacity: 0.73; height: 6px; width: 6px; animation-delay: -1.6s; transform: translate3d(38vw, 74vh, 9px); background: #26d959; } @keyframes particle-animation-9 { 100% { transform: translate3d(73vw, 38vh, 64px); } } .particle:nth-child(9) { animation: particle-animation-9 60s infinite; opacity: 0.79; height: 7px; width: 7px; animation-delay: -1.8s; transform: translate3d(48vw, 44vh, 68px); background: #4126d9; } @keyframes particle-animation-10 { 100% { transform: translate3d(17vw, 63vh, 78px); } } .particle:nth-child(10) { animation: particle-animation-10 60s infinite; opacity: 0.68; height: 7px; width: 7px; animation-delay: -2s; transform: translate3d(43vw, 29vh, 60px); background: #3226d9; } @keyframes particle-animation-11 { 100% { transform: translate3d(31vw, 23vh, 88px); } } .particle:nth-child(11) { animation: particle-animation-11 60s infinite; opacity: 0.36; height: 8px; width: 8px; animation-delay: -2.2s; transform: translate3d(9vw, 46vh, 28px); background: #d92656; } @keyframes particle-animation-12 { 100% { transform: translate3d(7vw, 59vh, 54px); } } .particle:nth-child(12) { animation: particle-animation-12 60s infinite; opacity: 0.74; height: 8px; width: 8px; animation-delay: -2.4s; transform: translate3d(35vw, 2vh, 59px); background: #7d26d9; } @keyframes particle-animation-13 { 100% { transform: translate3d(65vw, 56vh, 4px); } } .particle:nth-child(13) { animation: particle-animation-13 60s infinite; opacity: 0.54; height: 9px; width: 9px; animation-delay: -2.6s; transform: translate3d(59vw, 7vh, 86px); background: #94d926; } @keyframes particle-animation-14 { 100% { transform: translate3d(10vw, 87vh, 21px); } } .particle:nth-child(14) { animation: particle-animation-14 60s infinite; opacity: 1; height: 8px; width: 8px; animation-delay: -2.8s; transform: translate3d(64vw, 50vh, 83px); background: #5cd926; } @keyframes particle-animation-15 { 100% { transform: translate3d(52vw, 2vh, 79px); } } .particle:nth-child(15) { animation: particle-animation-15 60s infinite; opacity: 0.83; height: 10px; width: 10px; animation-delay: -3s; transform: translate3d(16vw, 61vh, 28px); background: #d9ac26; } @keyframes particle-animation-16 { 100% { transform: translate3d(35vw, 61vh, 6px); } } .particle:nth-child(16) { animation: particle-animation-16 60s infinite; opacity: 0.58; height: 6px; width: 6px; animation-delay: -3.2s; transform: translate3d(1vw, 27vh, 83px); background: #26d980; } @keyframes particle-animation-17 { 100% { transform: translate3d(58vw, 32vh, 43px); } } .particle:nth-child(17) { animation: particle-animation-17 60s infinite; opacity: 0.8; height: 9px; width: 9px; animation-delay: -3.4s; transform: translate3d(27vw, 76vh, 36px); background: #d93226; } @keyframes particle-animation-18 { 100% { transform: translate3d(23vw, 3vh, 14px); } } .particle:nth-child(18) { animation: particle-animation-18 60s infinite; opacity: 0.87; height: 8px; width: 8px; animation-delay: -3.6s; transform: translate3d(78vw, 50vh, 73px); background: #d9a326; } @keyframes particle-animation-19 { 100% { transform: translate3d(21vw, 65vh, 18px); } } .particle:nth-child(19) { animation: particle-animation-19 60s infinite; opacity: 0.24; height: 6px; width: 6px; animation-delay: -3.8s; transform: translate3d(86vw, 30vh, 90px); background: #56d926; } @keyframes particle-animation-20 { 100% { transform: translate3d(73vw, 77vh, 17px); } } .particle:nth-child(20) { animation: particle-animation-20 60s infinite; opacity: 0.59; height: 8px; width: 8px; animation-delay: -4s; transform: translate3d(57vw, 10vh, 7px); background: #d95626; } @keyframes particle-animation-21 { 100% { transform: translate3d(50vw, 83vh, 40px); } } .particle:nth-child(21) { animation: particle-animation-21 60s infinite; opacity: 0.62; height: 10px; width: 10px; animation-delay: -4.2s; transform: translate3d(28vw, 79vh, 55px); background: #5626d9; } @keyframes particle-animation-22 { 100% { transform: translate3d(21vw, 60vh, 26px); } } .particle:nth-child(22) { animation: particle-animation-22 60s infinite; opacity: 0.36; height: 8px; width: 8px; animation-delay: -4.4s; transform: translate3d(15vw, 18vh, 60px); background: #d94426; } @keyframes particle-animation-23 { 100% { transform: translate3d(58vw, 73vh, 60px); } } .particle:nth-child(23) { animation: particle-animation-23 60s infinite; opacity: 0.35; height: 10px; width: 10px; animation-delay: -4.6s; transform: translate3d(44vw, 46vh, 1px); background: #265cd9; } @keyframes particle-animation-24 { 100% { transform: translate3d(69vw, 67vh, 78px); } } .particle:nth-child(24) { animation: particle-animation-24 60s infinite; opacity: 0.44; height: 6px; width: 6px; animation-delay: -4.8s; transform: translate3d(33vw, 49vh, 79px); background: #2677d9; } @keyframes particle-animation-25 { 100% { transform: translate3d(30vw, 51vh, 36px); } } .particle:nth-child(25) { animation: particle-animation-25 60s infinite; opacity: 0.3; height: 7px; width: 7px; animation-delay: -5s; transform: translate3d(22vw, 73vh, 87px); background: #d9264a; } @keyframes particle-animation-26 { 100% { transform: translate3d(5vw, 51vh, 81px); } } .particle:nth-child(26) { animation: particle-animation-26 60s infinite; opacity: 0.02; height: 10px; width: 10px; animation-delay: -5.2s; transform: translate3d(39vw, 47vh, 14px); background: #4726d9; } @keyframes particle-animation-27 { 100% { transform: translate3d(4vw, 2vh, 53px); } } .particle:nth-child(27) { animation: particle-animation-27 60s infinite; opacity: 0.47; height: 10px; width: 10px; animation-delay: -5.4s; transform: translate3d(25vw, 90vh, 8px); background: #26d98e; } @keyframes particle-animation-28 { 100% { transform: translate3d(35vw, 6vh, 97px); } } .particle:nth-child(28) { animation: particle-animation-28 60s infinite; opacity: 0.8; height: 7px; width: 7px; animation-delay: -5.6s; transform: translate3d(28vw, 20vh, 64px); background: #29d926; } @keyframes particle-animation-29 { 100% { transform: translate3d(90vw, 46vh, 74px); } } .particle:nth-child(29) { animation: particle-animation-29 60s infinite; opacity: 0.65; height: 8px; width: 8px; animation-delay: -5.8s; transform: translate3d(19vw, 32vh, 17px); background: #d6d926; } @keyframes particle-animation-30 { 100% { transform: translate3d(40vw, 23vh, 77px); } } .particle:nth-child(30) { animation: particle-animation-30 60s infinite; opacity: 0.88; height: 6px; width: 6px; animation-delay: -6s; transform: translate3d(59vw, 43vh, 12px); background: #d98226; }*/ canvas { display: block; vertical-align: bottom; } /* Particle container. #header_frame { position: fixed; width: 100%; height: 60px; }*/ .flip_1{ -webkit-animation: rotationku 3s infinite linear; -moz-animation: rotationku 3s infinite linear; -ms-animation: rotationku 3s infinite linear; -o-animation: rotationku 3s infinite linear; animation: rotationku 3s infinite linear; } @-webkit-keyframes rotationku { from { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } to { -webkit-transform: rotateY(359deg); -moz-transform: rotateY(359deg); -ms-transform: rotateY(359deg); -o-transform: rotateY(359deg); transform: rotateY(359deg); } } #loading { background: #fff; height: 100%; max-height:700px; left: 0; position: fixed; top: 0; width: 100%; z-index: 999999; } #loading .loadingDiv { background: #2a2a2a; border-radius: 50%; color: #fff; opacity: 0; height: 200px; left: 50%; line-height: 200px; margin: -100px 0 0 -100px; position: absolute; text-align: center; top: 50%; width: 200px; } /* HTML:
*/ #loading .loader_1 { opacity: 1; height: 200px; left: 50%; line-height: 200px; margin: -100px 0 0 -100px; position: absolute; text-align: center; top: 50%; width: 200px; --g: radial-gradient(farthest-side,#0000 calc(95% - 3px),#000000 calc(100% - 3px) 98%,#0000 101%) no-repeat; background: var(--g), var(--g), var(--g); background-size: 30px 30px; animation: l9 1s infinite alternate; } @keyframes l9 { 0% { background-position: 0 50%, 50% 50%, 100% 50%; } 20% { background-position: 0 0, 50% 50%, 100% 50%; } 40% { background-position: 0 100%, 50% 0, 100% 50%; } 60% { background-position: 0 50%, 50% 100%, 100% 0; } 80% { background-position: 0 50%, 50% 50%, 100% 100%; } 100% { background-position: 0 50%, 50% 50%, 100% 50%; } } /* HTML:
*/ #loading .loader_2 { width: 65px; left: 3%; aspect-ratio: 1; position: relative; } #loading .loader_2:before, #loading .loader_2:after { content: ""; position: absolute; border-radius: 50px; box-shadow: 0 0 0 3px inset #000000; animation: l4 2.5s infinite; } #loading .loader_2:after { animation-delay: -1.25s; } @keyframes l4 { 0% { inset: 0 35px 35px 0; } 12.5% { inset: 0 35px 0 0; } 25% { inset: 35px 35px 0 0; } 37.5% { inset: 35px 0 0 0; } 50% { inset: 35px 0 0 35px; } 62.5% { inset: 0 0 0 35px; } 75% { inset: 0 0 35px 35px; } 87.5% { inset: 0 0 35px 0; } 100% { inset: 0 35px 35px 0; } } #button_top { display: inline-block; background-color: #ff98007d; width: 40px; height: 40px; text-align: center; border-radius: 4px; position: fixed; bottom: 100px; right: 20px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 1000; } #button_top::after { content: "\f077"; font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 1.5em; line-height: 40px; color: #fff; } #button_top:hover { cursor: pointer; background-color: #ff9000; } #button_top:active { background-color: #555; } #button_top.show { opacity: 1; visibility: visible; } #button_laporan { display: inline-block; background-color: #007bff52; width: 40px; height: 40px; text-align: center; border-radius: 4px; position: fixed; bottom: 30px; right: 20px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 1000; } #button_laporan::after { content: "\f0a1"; font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 1.5em; line-height: 40px; color: #fff; } #button_laporan:hover { cursor: pointer; background-color: #007bff; } #button_laporan:active { background-color: #555; } #button_laporan.show { opacity: 1; visibility: visible; } .font_menu{ color: #4e70b4; } .font_menu:hover{ color: #427df4; } .font_menu:active{ color: #427df4; } .font_menu:focus{ color: #427df4; }