@font-face {
    font-family: 'Nunito Sans';
    src: local('nunito_sansregular'),
         local('Nunito Sans'),
         url('/../aset/font/nunitosans-regular-webfont.woff2') format('woff2'),
         url('/../aset/font/nunitosans-regular-webfont.woff') format('woff'),
         url('/../aset/font/nunitosans-regular-webfont.ttf') format('truetype');
}

:root {
    --sans: 'Nunito Sans', sans-serif;
    --blue: #000f6e;
    --orange: #ff6600;
    --nicebg : #ddd;
};

html, body {font-size: var(--size); font-family: var(--sans);}
body, div, a, p, span, section, header, nav, h1, h2, h3, h4, h5, h6, blockquote, img, audio, video, code, li, ul, ol,
i, strong, b, u, button, input, textarea, em, article, footer, summary, fieldset, form, label, select, option, optgroup,
center, cite, pre, q, strike, table, menu, caption, col, thead, tbody, td, tr, th, noscript, iframe, embed, figure, figcaption
{font-family: var(--sans);}

body {opacity: 0; transition: all 500ms ease;}

h1, h2, h3, h4, h5, h6 {font-weight: bold;}

div, p, span, h1, h2, h3, h4, h5, h6, table, thead, tr, th, td, li, ul, ol, em, i, strong, b, u,
article, footer, cite, blockquote, summary, figcaption, col, tbody, thead, tfoot, nav, section {cursor: default;}

a p,a span,a h1,a h2,a h3,a h4,a h5,a h6,a table,a thead,a tr,a th,a td,a li,a ul,a ol,a em,a i,a strong,a b,a u,
a article,a footer,a cite,a blockquote,a summary,a figcaption,a col,a tbody,a thead,a tfoot,a nav,
a, button, a svg {cursor: pointer;}
button p,button span,button h1,button h2,button h3,button h4,button h5,button h6,button table,button thead,button tr,button th,button td,button li,button ul,button ol,button em,button i,button strong,button b,button u,
button article,button footer,button cite,button blockquote,button summary,button figcaption,button col,button tbody,button thead,button tfoot,button nav,
a, button, button svg {cursor: pointer;}

a:hover, button:hover {text-decoration: none;}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  cursor: pointer;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #ff6600;
  border: 0px none #ffffff;
  border-radius: 0px;
  cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff6600;
  cursor: pointer;
}
::-webkit-scrollbar-thumb:active {
  background: #ff6600;
  cursor: pointer;
}
::-webkit-scrollbar-track {
  background: #000;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #000;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

.px-10 {
    padding-left: 6rem;
    padding-right: 6rem;
}

.a-gibera {color: var(--dark) !important}
.a-gibera:hover {color: var(--orange) !important}

.text-blue {color: var(--blue)}
.border-blue {border-color: var(--blue)}

.text-orange {color: var(--orange)}
.border-orange {border-color: var(--orange)}

.bg-gibera {
    background: rgb(23,162,184);
background: -webkit-linear-gradient(right, rgba(23,162,184,1) 19%, rgba(0,0,0,1) 61%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(right, rgba(23,162,184,1) 19%, rgba(0,0,0,1) 61%, rgba(0,0,0,1) 100%);
background: linear-gradient(to left, rgba(23,162,184,1) 19%, rgba(0,0,0,1) 61%, rgba(0,0,0,1) 100%);
}
.icon {
    width: 1em;
    height: 1em;
}
.btn-orange {
    background-color: #ff6600; 
    background: #ff6600;
    color: var(--light);
    border-color: #ef6600;
}
.btn-orange:hover, .btn-orange:focus {

}

.nav-link.a-gibera {font-size: 18px;}

a.nav-link.a-gibera.font-weight-bold.active {
    background: none;
    color: var(--orange) !important;
}

/* FINALLY */
.theBG {
    background-color: #adfffb;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23adfffb' stroke-width='.5' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cuse fill='%23aafaf6' href='%23s' y='2'/%3E%3Cuse fill='%23aafaf6' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23a6f5f1' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23a6f5f1' href='%23s'/%3E%3Cuse fill='%23a3f0ec' href='%23s' x='2'/%3E%3Cuse fill='%23a3f0ec' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%239febe7'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%239febe7'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%239ce5e2'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23adfffb'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%2398e0dd'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23F60'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
filter: brightness(.6);
/* created by svgbackgrounds.com ! check it out! */
}
#giberamedia {
    overflow-x: hidden;
}

/*** ALL ***/
.h-full {
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.pills-judul {
    border: 1px solid var(--orange);
    color: var(--light);
    background-color: var(--orange);
}
ul.navbar-nav.mr-auto.mt-2.mt-lg-0.nav-pills {
    padding: 1em;
}

/*** NAVBAR ***/
#giberamediaNavbar {
    justify-content: flex-end;
    top: 80px;
    left: 0px;
    z-index: 25;
    background: #fff;
    width: 100%;
    border-bottom: 2px solid #000;
}

/*** HEROES ***/
#heroes {
    display: flex;
    align-items: center;
    height: calc(100vh - 80px);
    background-color: var(--blue);
}
#heroes #infoHero {
    bottom: 2em;
}
#heroes #heroImg {
    top: 0;
    height: 100%;
    right: 0;
    border-radius: 0 0 0 50%;
}

/*** SECOND ***/
#bodySecond .content {
    display: flex;
    justify-content: center;
    align-items: center;
}
#bodySecond .content img {
    position: relative;
    bottom: 1em;
}
#bodySecond .content-item header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    background-color: var(--blue);
}
#bodySecond .content-item .icon {
    position: relative;
    width: 4em;
    height: 4em;
    fill: var(--light);
}
#bodySecond .content-item .deskripsi {
    color: var(--secondary);
    width: 250px;
    font-weight: normal;
    text-align: center;
}

/*** THIRD ***/
#bodyThird {
    background-color: var(--blue);
}
#bodyThird .content {
    display: flex;
    justify-content: space-around;
}
#bodyThird .content .content-item {
    border-radius: 7px;
    display: flex;
    margin-bottom: 2em;
}
#bodyThird .content .content-item .kiri  {
    padding: 1em;
    background-color: var(--white);
    display: flex;
    border-radius: 7px 0 0 7px;
}
#bodyThird .content .content-item .kanan {
    padding: 1em;
}
#bodyThird .content-item .icon {
    position: relative;
    width: 5em;
    height: 5em;
    fill: var(--orange);
}

/*** FOURTH ***/
#bodyFourth .content {
    display: flex;
    justify-content: space-between;
}
#bodyFourth .content .kiri {
    width: 32.5%;
}
#bodyFourth .content .kanan {
    width: 62.5%;
}
#bodyFourth .head-kontak {
    display: flex;
}
#bodyFourth label {
    position: absolute;
    color: var(--secondary);
    top: -.75em;
    left: 1.5em;
    padding: 0 .5em;
    background-color: #fff;
}

/*** RESPONSIF ***/
@media screen and (max-width: 1200px) {
    #heroes #heroImg {
        width: 400px;
        object-fit: cover;
    }
    #bodySecond .content img {
        display: none;
    }
    #bodyThird .content img {
        max-width: 300px;
    }
    #bodyFourth .isi {
        padding: 0 5em;
    }
}
@media screen and (max-width: 1024px) {
    #giberamediaNav, #heroes, #bodyFourth .isi {
        padding-left: 2em;
        padding-right: 2em; 
    }
    #bodyThird {
        padding: 3rem 0 !important;
    }
    #bodyThird .content {
        justify-content: space-between;
    }
    #bodyThird .content aside {
        margin: 3rem 2em !important;
    }
}
@media screen and (max-width: 991px) {
    #realNav {
        display: none;
    }
}
@media screen and (max-width: 900px) {
    #infoHero {
        width: 100% !important;
        padding: 2em;
    }
    #infoHero h1 {
        font-size: 28px;
    }
    #heroes #heroImg {
        border-radius: 50%;
        height: auto;
        right: 4%;
        z-index: -1;
        top: 17%;
    }
    #infoHero h1, #infoHero h6 {
        filter: drop-shadow(2px 4px 6px #333);
    }
    #bodySecond .content {
        display: block;
    }
    #bodySecond .content .content-item {
        margin-bottom: 2em;
    }
}
@media screen and (max-width: 768px) {
    #heroes #heroImg {
        display: none;
    }
    #bodyThird .content {
        display: block;
    }
    #bodyThird .content img {
        display: none;
    }
    #bodyFourth .content {
        display: block;
    }
    #bodyFourth .content .kiri, #bodyFourth .content .kanan {
        margin-bottom: 2em;
        width: 100%;
    }
}
@media screen and (max-width: 400px) {
    #bodyFourth .head-kontak {
        display: block;
    }
    #bodyFourth .head-kontak div {
        margin: 0 !important;
        width: 100% !important;
    }
    #bodyFourth .head-kontak div .form-control {
        margin-bottom: 1.5em;
    }
    #giberamediaNav, #heroes, #bodyFourth .isi, #infoHero {
        padding-left: 1em;
        padding-right: 1em; 
    }
    #bodyThird .content aside {
        margin-left: 1em !important;
        margin-right: 1em !important;
    }
}

/* LOADER */