.fade-in{animation:opac 2s}@keyframes opac{from{opacity:0} to{opacity:1}}
.spin-left{animation:spin-left 5s infinite linear}@keyframes spin-left{0%{transform:rotate(0deg)}100%{transform:rotate(-359deg)}}
.spin-right{animation:spin-right 5s infinite linear}@keyframes spin-right{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.gear-1 {
    left: 140px;
    top: 27px;
    position: absolute;
    width: 20%;
    z-index: -1;
}
.gear-2{
    left: 275px;
    top: 20px;
    position: absolute;
    width: 15%;
    z-index:-1;
    }
.gear-3 {
    right: 85px;
    bottom: -46px;
    position: absolute;
    z-index: -1;
    width: 14%;
}
.gear-4 {
    right: 212px;
    bottom: -32px;
    position: absolute;
    z-index: -1;
    width: 9%;
}
.gear-5 {
    left: 194px;
    top: 10px;
    position: absolute;
    z-index: -1;
    width: 40%;
}
.typed a{
    text-decoration:none;
    color:#fff;
}
.typed a:hover{
    color:#000;
}
.typed h5,.typed h3{ 
    font-family: 'Istok Web', sans-serif;
    width: 100%; 
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: typing 2s steps(21, end),
               blink-caret .5s step-end infinite alternate;
}
.typed p { 
    font-family: 'Istok Web', sans-serif;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: typing 2s steps(21, end),
               blink-caret .5s step-end infinite alternate;
}
@-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 30% { border-color: transparent; } }
.video-1 {
    margin-top: 90px;
    padding: 42px 42px;
    margin-left: 32px;
    position: relative;
    }
.video-2 {
    margin-top: 60px;
    padding: 41px 42px;
    margin-left: 32px;
    position: relative;
    }
.the-ideas {
    padding-bottom:150px;
    }
.the-making {
    padding-bottom:150px;
    }
.the-launching {
    padding-bottom:100px;
    }
.embed-responsive {
    border:6px solid #AFAFAF;
    }
.link_wireup {
    color:#000;
    }
.link_wireup:hover {
    color:#000;
    }
.modal-dialog {
    margin: 0rem;
    }
.modal-content-mobile {
    border: 0px solid rgba(0, 0, 0, 0.2);
    border-radius: 0rem;
    height: 100vh;
    text-align:center;
    background-color:orange;
    }
.modal-header-mobile {
    border-bottom: none;
    }
.modal-title-mobile {
    margin-bottom: 0;
    line-height: 1.5;
    font-weight:700;
    }
.modal-title-mobile a {
    text-decoration:none;
    color:#000;
    }
.modal-body-mobile {
    padding: 0rem;
    }
.modal-body-mobile li:first-child{
    border-top:1px solid rgba(0, 0, 0, 0.2);
    }
.modal-body-mobile li{
    color:#000;
    background-color:transparent;
    border-bottom:1px solid rgba(0, 0, 0, 0.2);
    border-top:0;
    }
.modal-body-mobile li:hover{
    color:#fff;
    background-color:#000;
    }
.modal-body-mobile a{
    color:#000;
    background-color:transparent;
    }
.modal-body-mobile a:hover{
    color:#fff;
    background-color:transparent;
    }
.modal-footer-mobile {
    border-top: none;
    }
.modal-body-mobile .navbar-nav {
    padding-top:35vh;
    } 
#roarbot .nav-color {
    background-color:#FFAF24;
    }
#roarbot {
    overflow: hidden;
    font-family: 'Istok Web', sans-serif;
    background-color: #FFAF24;
    height: 100vh;
    width: 100vw;
    position: fixed;
    }
#contact-page .nav-color {
    background-color:#EDEDED;
    }
#contact-page {
    background-color:#EDEDED;
    overflow:scroll;
    }
#contact-page .navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
    }
#contact-page .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
    }
#contact-page .navbar-light .navbar-nav .nav-link {
  color: #A0A0A0;
    }
#contact-page .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
    }
#contact-page .navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
    }
#contact-page .navbar-light .navbar-nav .show > .nav-link,
#contact-page .navbar-light .navbar-nav .active > .nav-link,
#contact-page .navbar-light .navbar-nav .nav-link.show,
#contact-page .navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
    }
#contact-page .navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
    }
#contact-page #footer{
    position: absolute;
    bottom:0;
    }
#our-project-page .nav-color {
    background-color:#EDEDED;
    }
#our-project-page {
    background-color:#EDEDED;
    overflow:scroll;
    }
#our-project-page .navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
    }
#our-project-page .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
    }
#our-project-page .navbar-light .navbar-nav .nav-link {
  color: #A0A0A0;
    }
#our-project-page .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
    }
#our-project-page .navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
    }
#our-project-page .navbar-light .navbar-nav .show > .nav-link,
#our-project-page .navbar-light .navbar-nav .active > .nav-link,
#our-project-page .navbar-light .navbar-nav .nav-link.show,
#our-project-page .navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
    }
#our-project-page .navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
    }
#our-project-page #footer{
    position: relative;
    bottom:0;
    }
.our-project h2 {
    font-weight:700;
    }
.navbar-brand {
    padding-left: 0;
    }
.navbar {
    padding: 0.5rem 0;
    background-color:transparent;
    }
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 2rem;
    font-size:1rem;
    }
.navbar-brand h1{
    font-family: 'Istok Web', sans-serif;
    font-size:2rem;
    }
#home {
    height:100vh;
    }
.text-atas {
    text-align:right;
    color:#fff;
    margin-top: 0;
    }
.project {
    position:absolute;
    color:#fff;
    }
.robot {
    position: fixed;
    display: table;
    vertical-align: middle;
    text-align: center;
    bottom: 50px;
    z-index: -1;
    right: 0;
    }
.robot img{
    height: 70vh;
    }
.text-tengah {
    padding-top:50px;
    padding-bottom: 150px;
    }
.text-tengah h1{
    font-size:70px;
    color:#FFE5C5;
    z-index: -1;
    position: relative;
    font-family: 'Russo One', sans-serif;
    }
.container-bawah {
    position: absolute;
    bottom: 100px;
    width:100%;
    }
.text-bawah h5{
    font-size:18px;
    color:#fff;
    margin-bottom: 0;
    }
.text-bawah h3{
    font-size:24px;
    color:#fff;
    margin-bottom: 0;
    }
.text-bawah p{
    font-size:12px;
    color:#fff;
    }
#demo p {
    color:#fff;
    }
#demo span {
    background-color:#000;
    color:#fff;
    font-weight:700;
    padding-left:3px;
    margin-right:5px;
    background-size: 30px 30px;
    text-align:center;
    }
#contact form{
    padding-bottom:70px;
    }
#contact label{
    margin-bottom: 0;
    font-weight:600;
    font-size:12px;
    }
#contact input[type=text], select {
    width: 100%;
    padding: 5px;
    border: none;
    box-sizing: border-box;
    resize: vertical;
    background-color: transparent;
    border-bottom: 1px solid black;
    margin-bottom:5px;
    font-size:12px;
    }
#contact textarea {
    width: 100%;
    padding: 5px;
    border: none;
    box-sizing: border-box;
    margin-bottom: 16px;
    background-color: transparent;
    border-bottom: 1px solid black;
    resize: vertical;
    font-size:12px;
    height:100px
    }
#contact input[type=submit] {
    background-color: #000;
    color: white;
    padding: 5px 20px;
    border: none;
    cursor: pointer;
    float:right;
    }
#contact input[type=submit]:hover {
    background-color: #878787;
    }
.address li{
    padding-left:30px;
    font-size: 12px;
    font-weight: 700;
    }
.img-location {
    margin-left:-30px;
    }
.img-phone {
    margin-left:-35px;
    }
#footer{
    position: relative;
    bottom: 0;
    text-align: center;
    width:100%;
    font-size:12px;
    }
#footer img {
    width:20px;
    float:left;
    margin:0 2px;
    }
.countdown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    float:left;
    padding-bottom: 15px;
    }
.countdown span{
    font-size:32px;
    color:#fff;
    }
.countdown_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    padding: 0 2px;
    }
.countdown_timer {
    padding: 2px 5px;
    background-color: #000;
    color:#fff;
    font-size: 32px;
    }
.countdown_item_timer .countdown_label:before, .countdown_item_timer .countdown_label:after {
    display: block;
    height: 1px;
    }
.countdown__label {
    font-size: 0.5em;
    padding-top: .40em;
    text-align: center;
    font-weight:700;
    }
.marquee-left {
    margin-top:0;
    height: 70px;
    overflow: hidden;
    position: relative;
    margin-bottom:0px;
    }
.marquee-left div {
    display: block;
    width: 200%;
    position: absolute;
    overflow: hidden;
    animation: marquee_left 13s linear infinite;
    }
.marquee-left h1 {
    float: left;
    font-style:italic;
    }
.bg-project {
    width: 100%;
    position: absolute;
    z-index: 0;
    top: -160px;
    }
.bg-project-1 {
    margin-top: 200px;
    padding-bottom: 150px;
    }
.bg-project-2 {
    margin-top: 200px;
    padding-bottom: 150px;
    text-align:right;
    }
@keyframes marquee_left {
    0% { left: 0; }
    100% { left: -100%; }
}
.marquee-right {
    margin-top:0;
    height: 70px;
    overflow: hidden;
    position: relative;
    margin-bottom:0px;
    }
.marquee-right div {
    display: block;
    width: 200%;
    position: absolute;
    overflow: hidden;
    animation: marquee_right 15s linear infinite;
    }
.marquee-right h1 {
    float: right;
    font-style:italic;
    }
@keyframes marquee_right {
    0% { right: 0; }
    100% { right: -100%; }
    }
.marquee-left-slow {
    margin-top:0;
    height: 70px;
    overflow: hidden;
    position: relative;
    }
.marquee-left-slow div {
    display: block;
    width: 200%;
    position: absolute;
    overflow: hidden;
    animation: marquee_left 15s linear infinite;
    }
.marquee-left-slow h1 {
    float: left;
    font-style:italic;
    }
@keyframes marquee_lef-slow {
    0% { left: 0; }
    100% { left: -100%; }
    }
.navbar-toggler {
    margin-right: 0;
    }
.project-mobile {
    display:none;
    }
@media (max-width: 575px) {
    .gear-1, .gear-2, .gear-3, .gear-4, .gear-5 {
        display:none;    
    }
    .container-bawah {
        bottom: 60px;
    }
    .project-mobile {
        display:block;
    }
    .project-desktop {
        display:none;
    }
    .bg-project {
        display:none;
    }
    .video-1 {
        margin-top: 0px;
        padding: 0px 0px;
        margin-left: 0;
        position: relative;
    }
    .bg-project-1 {
        margin-top: 10px;
        padding-bottom: 30px;
    }
    .bg-project-2 {
        margin-top: 10px;
        padding-bottom: 30px;
    }
    .navbar-toggler {
        margin-right: 1rem;
    }
    .navbar-brand {
        padding-left: 0;
    }
    .navbar {
        padding: 0.5rem 0;
    }
    #footer{
        position: absolute;
    }
    #contact-page #footer{
        position: relative;
        bottom:0;
    }
    .marquee-left {
        margin-bottom:0px;
    }
    .marquee-right {
        margin-bottom:0px;
    }
    .marquee-left-slow {
        margin-bottom:0px;
    }
    .robot {
    bottom: 60px;
    right: -105px;    
    }
    .robot img {
        height: 45vh;
    }
    .text-tengah {
        padding-bottom: 50px;
    }
    .the-ideas {
        padding-bottom:10px;
    }
    .the-making {
        padding-bottom:10px;
    }
    .the-launching {
        padding-bottom:10px;
    }
}
@media (min-width: 576px) and (max-width: 767px) { 
    .text-tengah {
        padding-top:0;
        padding-bottom:50px;
    }
    .text-atas {
        margin-top: 0;
    }
    .robot {
        bottom: 0;
    }
    #home {
        height:100%;
    }
    #roarbot {
        overflow:scroll;
    }
    .navbar {
        padding: 0.5rem 0;
        font-size:2.5rem;
    }
    #footer{
        position: relative;
    }
    .marquee-left {
        margin-bottom:0px;
    }
    .marquee-right {
        margin-bottom:0px;
    }
    .marquee-left-slow {
        margin-bottom:0px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .gear-1 {
        left: 96px;
        top: -35px;
    }
    .gear-2 {
        left: 185px;
        top: -40px;
    }
    .gear-3 {
        right: 46px;
        bottom: 52px;
    }
    .gear-4 {
        right: 128px;
        bottom: 62px;
    }
    .gear-5 {
        left: 140px;
        top: -45px; 
    }
    .container-bawah {
        bottom: 230px;
    }
    .video-1 {
        margin-top: 0px;
        padding: 24px 15px;
        margin-left: 32px;
        position: relative;
    }
    .video-2 {
        margin-top: 0px;
        padding: 5px 15px;
        margin-left: 32px;
        position: relative;
    }
    .bg-project-1 {
        margin-top: 0px;
        padding-bottom: 150px;
    }
    .bg-project-2 {
        margin-top: 0px;
        padding-bottom: 150px;
    }
    .text-atas {
        margin-top: 0;
    }
    #footer{
        position: absolute;
    }
    .marquee-left {
        margin-bottom:50px;
    }
    .marquee-right {
        margin-bottom:50px;
    }
    .marquee-left-slow {
        margin-bottom:100px;
    }
    .text-tengah {
        padding-top:30px;
        padding-bottom:0;
    }
    .robot {
        bottom: 200px;
    }
    .robot img {
        height: 60vh;
    }
    .the-ideas {
    padding-bottom:40px;
    }
    .the-making {
        padding-bottom:40px;
    }
    .the-launching {
        padding-bottom:40px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .gear-1 {
        left: 120px;
        top: -30px;
    }
    .gear-2{
        left: 240px;
        top: -40px;
    }
    .gear-3 {
        right: 68px;
        bottom: -71px;
    }
    .gear-4 {
        right: 175px;
        bottom: -58px;
    }
    .gear-5 {
        left: 170px;
        top: -40px;
    }
    .video-1 {
        margin-top: 61px;
        padding: 0px 31px;
        margin-left: 32px;
        position: relative;
    }
    .video-2 {
        margin-top: 0px;
        padding: 36px 31px;
        margin-left: 32px;
        position: relative;
    }
    .bg-project-1 {
        margin-top: 0px;
        padding-bottom: 150px;
    }
    .bg-project-2 {
        margin-top: 0px;
        padding-bottom: 150px;
    }
    .bg-project {
        width: 100%;
        position: absolute;
        z-index: 0;
        top: -185px;
    }
    .text-atas {
        margin-top: -20px;
    }
    .navbar {
        padding: 1.5rem 0;
    }
    #footer{
        position: absolute;
    }
    .marquee-left {
        margin-bottom:50px;
    }
    .marquee-right {
        margin-bottom:50px;
    }
    .marquee-left-slow {
        margin-bottom:50px;
    }
    .text-tengah {
        padding-top:50px;
        padding-bottom:0;
    }
}
@media (min-width: 1200px) and (max-width: 1439px) { 
    .text-tengah {
        padding-bottom: 100px;
    }
    .text-atas {
        margin-top: -40px;
    }
    #roarbot .navbar {
        padding: 1.5rem 0;
    }
    #contact-page .navbar {
        padding: 1.5rem 0;
    }
    #footer{
        position: absolute;
    }
    .marquee-left {
        margin-bottom:0px;
    }
    .marquee-right {
        margin-bottom:0px;
    }
    .marquee-left-slow {
        margin-bottom:0px;
    }
    .robot {
        bottom: 0px;
    }
    .robot img {
        height: 80vh;
    }
}
@media (min-width: 1440px) { 
    #contact {
        padding-top:100px;    
    }
    .text-tengah {
        padding-top: 150px;
        padding-bottom: 150px;
    }
    #roarbot .navbar {
        padding: 1.5rem 0;
    }
    #contact-page .navbar {
        padding: 1.5rem 0;
    }
    #footer{
        position: absolute;
    }
    .marquee-left {
        margin-bottom:0px;
    }
    .marquee-right {
        margin-bottom:0px;
    }
    .marquee-left-slow {
        margin-bottom:0px;
    }
    .robot {
        bottom: 0px;
    }
    .robot img {
        height: 80vh;
    }
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 100vw;
        margin: auto;
    }
}