@charset "utf-8";
/* CSS Document */
 html, body {
     height: 100%;
}
 body{
     background-color:#010713 !important;
     font-family: "Roboto Condensed", sans-serif;
     font-weight:700;
     color: #fff;
}
 .header-logo {
     display: block !important;
     text-indent: -9999px !important;
     width: 250px !important;
     height: 50px !important;
     margin-top: 3px !important;
     margin-bottom: 3px !important;
     background: url(../img/betla.net-mobile.svg) no-repeat !important;
     background-size: 250px 50px !important;
}

 .navbar-inverse {
     background: transparent;
}
 .navbar-inverse .navbar-nav>li>a {
     color: #fff;
     text-shadow: 1px 1px 1px #000;
     font-size:16px;
     font-weight:bold 
}
 .navbar-nav>li {
     float: left;
     text-transform: uppercase;
}
 .navbar-fixed-top, .navbar-fixed-bottom {
     position: relative !important;
     right: 0;
     left: 0;
     z-index: 1030;
}
 .navbar {
     position: relative !important;
     min-height: 50px;
     margin-bottom: 20px;
     border: 1px solid transparent;
     border-bottom: #283b59 solid 2px;
}
.blueline{

    color: #026aed !important;
    text-decoration-line: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 8px;
}

.blueline:hover{

    color: #026aed !important;
    text-decoration-line: underline !important;
    text-decoration-thickness: 4px !important;
    text-underline-offset: 8px !important;
}
 .form-control {
     display: block !important;
     width: 100% !important;
     height: 34px !important;
     padding: 16px 32px !important;
     font-size: 14px !important;
     line-height: 1.42857143 !important;
     color: #fff !important;
     background-color: #000 !important;
     background-image: none;
     border: 1px solid #252734 !important;
     border-radius: 4px !important;
     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
     box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
     -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s !important;
     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s !important;
}
 .form-control:focus {
     color: #252734 !important;
     background-color: #fff !important;
     border-color: #66afe9 !important;
     outline: 0 !important;
     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6) !important;
     box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6) !important;
}
 .btn-primary {
     color: #fff;
     background-color: #0a65e9;
     border-color: #0a65e9;
}
 .btn-primary:hover{
    background-color: #084db1;
     border-color: #084db1
}
 .full-width-jumbotron {
     margin-top: -20px!important;
     height: auto !important;
     margin-bottom: 30px!important;

}
 hr{
     border: none;
     height: 2px;
     background-color: #283b59;
     margin-top: 0 !important;
}
 .hero-container{
     display: flex;
     width: 100%;
     height: auto;
     align-items: center;
     justify-content: center;
     flex-direction: row;
     flex-wrap: nowrap;
     column-gap: 20px !important;
     row-gap: 0 !important;
}
 .hero-container img{
     max-width: 100%;
     height: auto;
     flex: 1 1 auto;
     object-fit: cover;
}

 .linkops{
     display: flex;
     width: 100%;
     height: auto;
     align-items: center;
     justify-content: center;
     flex-direction: row;
     flex-wrap: nowrap;
     column-gap: 20px !important;
     row-gap: 0 !important;
}
 .linkops img{
     max-width: 100%;
     height: auto;
     flex: 1 1 auto;
     object-fit: cover;
}
 .footer{
    width:100%;
    text-align:center;
    color:#fff;
    margin-top:15px;
    font-family: 'Roboto Condensed', 'sans-serif';
    font-size:18px;
    font-weight:700
}
 @media screen and (max-width: 1440px) {
     .hero-container img{
         max-width: 80%;
         height: auto;
         flex: 1 1 auto;
         object-fit: cover;
    }
    #jayson{
        max-width: 41%;
        margin-bottom: 2px !important;}
   
    .linkops img{
     max-width: 100%;
     flex: 1 1 auto;
     object-fit: cover;
}
}
@media screen and (max-width: 1366px) {
     .hero-container img{
         max-width: 75%;
         height: auto;
         flex: 1 1 auto;
         object-fit: cover;
    }
    #jayson{
        max-width: 42%;
        margin-bottom: 2px !important;}
   
    .linkops img{
     max-width: 100%;
     flex: 1 1 auto;
     object-fit: cover;
}
}
@media screen and (max-width: 1280px) {

    .hero-container img{
         max-width: 63%;
         height: auto;
         flex: 1 1 auto;
         object-fit: cover;
    }
    #jayson{max-width: 36%;
        margin-bottom: 2px !important;}
   
    .linkops img{
     max-width: 100%;
     flex: 1 1 auto;
     object-fit: cover;
}

}
 @media screen and (max-width: 960px) {
     .navbar-collapse {
         background-color: transparent !important;
    }
     .navbar-nav>li{
         display: inline-block !important;
         width:auto !important;
    }
     .hero-container{
         display: flex;
         width: 100%;
         height: auto;
         align-items: center;
         justify-content: center;
         flex-direction: column !important;
         gap: 20px !important;
         flex-wrap: wrap;
    }

     .linkops{
     display: flex;
         width: 100%;
         height: auto;
         align-items: center;
         justify-content: center;
         flex-direction: column !important;
         gap: 20px !important;
         flex-wrap: wrap;
     
}

.hero-container img{
         max-width: 100%;
         height: auto;
         flex: 1 1 auto;
         object-fit: cover;
    }
    #jayson{
        max-width: 100%;
        margin-bottom: 20px !important;}
   
    .linkops img{
     max-width: 100%;
     flex: 1 1 auto;
     object-fit: cover;
}

}
 @media screen and (max-width: 768px) {
     .navbar-nav>li {
         float: left;
         width: 100%;
         border-right: none;
         -webkit-box-shadow: none;
         -moz-box-shadow: none;
         box-shadow: none;
         text-transform: uppercase;
    }
}
@media (max-width:480px) {
    .navbar-nav>li{
        display: inline-block !important;
        width:100% !important;
    }
    .navbar-nav>li>a {
        line-height: 20px !important;
    }
}