@font-face{
    font-family: Microsoft;
    src: url('../fonts/ntailu.ttf');
}
@font-face{
    font-family: Microsoft Bold;
    src: url('../fonts/ntailub.ttf');
}


.microsoft{
    font-family: Microsoft;
}
.microsoft-bold{
    font-family: Microsoft Bold;
}

/*=======================================
    GENERAL STYLES
==================================================*/
*{
    padding: 0px;
    margin: 0px;
}
a{
    color: #F67d2c;
}
a:hover{
    text-decoration: none;
}

body {
    /*    font-family: fifty;*/

    font-family: Microsoft;
    font-size: 15px;
    /*letter-spacing: 1px;;*/
    color: #777;
    font-weight: lighter;
    /*font-weight: lighter;*/
    /*background-image: url(../img/1.jpg);*/
    /*background-color: #fafafa;*/
    margin: auto;
    /*color: green;*/
    /*line-height: 30px;*/
}


.pad-adjust {
    padding-top: 5%; 
    padding-bottom: 5%;
}
.pad-adjust-bottom{
    /*padding-top: 5%;*/ 
    padding-bottom: 5%;
}
.pad-adjust-top{
    padding-top: 5%; 
    /*padding-bottom: 5%;*/
}

.text-center {
    text-align:center;
}

#side-nav{
    position: fixed;
    margin-top: 300px;
    width: 100px;
    color: black;
}
.visible{
    display: block;
}

h1 {
    /*font-size:55px;*/
    /*color: grey;*/
    /*line-height: 30px;*/
    /*font-weight: 100;*/
}
h2 {
    /*padding-top: 1%;*/
    /*font-size:40px;*/
    /*line-height: 30px;*/
    /*font-weight: 300;*/
}
h3 {
    /*padding-top: 1%;*/
    /*font-family: Indie;*/
    /*font-size:35px;*/
    /*    font-weight: bold;*/
}
h4 {
    /*font-family: Indie;*/
    /*padding-top: 1%;*/
    /*font-size:24px;*/
    /*margin-bottom: -25px;*/
    /*line-height: 0px;*/
    /*    font-weight: bold;*/
}
h5 {
    /*font-family: Indie;*/
    /*padding-top: 1%;*/
    /*font-size:18px;*/
    /*padding: 0px;*/
    /*margin-bottom: -25px;*/
    /*line-height: 0px;*/
    /*    font-weight: bold;*/
}

p {
    /*font-size:16px;*/
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    /*padding-bottom: 5px;*/
}

.text-bold{
    font-weight: bold;
}

.text-bolder{
    font-weight: bolder;
}


.space-free-100 {
    height:100px;
}
.space-free-50 {
    height:50px;
}
.space-free-20 {
    height:20px;
}
.space-free-10 {
    height:10px;
}



.g-pad-bottom {
    padding-bottom:40px;
}
.for-full-back {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

    /* IE 5-7 */
    filter: alpha(opacity=90);

    /* Netscape */
    -moz-opacity: 0.9;

    /* Safari 1.x */
    -khtml-opacity: 0.9;

    /* Good browsers */
    opacity: 0.92;
}

section {
    padding-top:0px;
}

.btn-rokit{
    border: 2px solid #999;
}
.btn-rokit:hover{
    background-color: #ff9729;
    color: whitesmoke;
}

.btn-square{
    border-radius: 0px;
}
/*=======================================
    NAV BAR STYLES
==================================================*/
/* ADDED PADDING IN NAVBAR */
.navbar {
    padding-top:0px;
    padding-bottom:0px;
    -webkit-transition: background .8s ease-out,padding .8s ease-out;
    -moz-transition: background .8s ease-out,padding .8s ease-out;
    transition: background .8s ease-out,padding .8s ease-out;
}
/* CLASS FOR REMOVING PADDING IN NAVBAR*/
.navbar-pad-original {
    padding:0px;
    /*line-height: 0px;*/
}


/*TO MAKING NAV BAR LINKS WHITE COLORED */
.navbar-inverse .navbar-nav > li > a {
    color: #FFF;

    /*text-shadow: 1px 0px 1px #1d241b;*/
    font-size: 14px;
}

.navbar-inverse .navbar-brand {
    color: #FFF;
}

.brand-image {
    /*height: 10px;*/
    /*background-color: gold;*/
    padding: 0px;
    /*margin-top: -10px;*/
    /*height: 1000px;*/
}
.brand-image-small{
    /*height: 10px;*/
    /*background-color: gold;*/
    padding: 2px;
    /*margin-top: -10px;*/
    height: 45px;
}

.navbar-inverse {
    /*background-color: rgba(20, 173, 124, 1);*/
    border:none;
    background-color: transparent;
    background-image: url(../img/dark-nav-bg.png);
    /*text-shadow: 0px 10px 10px 4px black;*/
    /*opacity: 0.518;*/
}
.navbar-shadow {
    box-shadow: 0px 0.2px 8px 0px;
    color: black;
    background:none;
    background-color: #333;
}
.navbar-opacity{
    /*opacity: 0.918;*/ 
    color: black;
    /*text-shadow: 1px 10px 2px 4px;*/
}

.text-shadow{
    /*color: black;*/
    /*text-shadow: 1px 1px 1px black;*/
}
.dropdown{
    /*color:black;*/
}

button {
    color: black;
    /*text-shadow:*/ 
}
/*=======================================
    HOME SECTION STYLES
==================================================*/


.head-btn-one {
    background-color: rgba(20, 173, 124, 1);
    border: 0px solid #fff;

}

#home {
    /*padding-top:130px;*/
    /*padding-bottom:200px;*/
    color:#fff;
}

.wow-slider{
    /*padding-top:15%;*/
    /*padding-bottom:20%;*/
    /*height: 350px;*/
    /*width: 100%;*/
    /*background-image: url('../img/1.jpg');*/
    /*background-color: gray;*/
    /*background-repeat: no-repeat;*/
    background-size: cover;
    /*opacity: 0.9;*/
}



.btn-lg, .btn-group-lg > .btn {
    border-radius: 0px; 

}



.intro{
    padding-top: 30px;
    padding-bottom: 50px;
}

.intro .header{
    padding-left: 15px;
}

.intro .intro-btn-div{
    padding-top: 50px;
}


/*=======================================
    Services Page
==================================================*/
#services-cover{
    background-image: url(../img/strip-1.jpg);
    background-size: cover;
}
.services-cover{
    padding-top: 10%;
    padding-bottom: 8%;
    color: black;
}

.services-cover h1{
    font-size: 3.2em;
    font-family: Microsoft Bold;
    color: white;
    font-weight: bold;
    text-shadow: 0px 1px 10px #000;
}
/*=======================================
    Service Section
==================================================*/

.header{
    padding-top: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
}

.header > h2 {
    font-size: 40px;
}

#service{
    background-color: #edecdf;
    padding-top: 2%;
    padding-bottom: 8%;
}

.web-image{
    width: 100%;
    /*height: 220px;;*/
    /*background-image: url("../img/web jobs/mini-treasures 2.jpg");*/ 
    /*background-size: cover;*/
    /*background-repeat: no-repeat*/
}
.mybox{
    height: 500px;
    width: 200px;
    background-color: yellow;
    opacity: 0.5;
    color: white;
}

.services-thumbnail{
    /*background-color: white;*/
    /*padding-top: 80px;*/
    padding-left: 0px;
    padding-right: 20px;
    padding-top: 50px;
    /*    margin-left: 10px;*/
}
.inner-service-thumb{
    background-color: white;
}

.thumb-text{
    padding-top: 5%;
    padding-bottom: 3%;
}


/*=======================================
    Statements Section
==================================================*/
#statements {
    /*background-color: ;*/
    padding-top: 8%;
    padding-bottom: 8%;
}
/*=======================================
    Why us Section
==================================================*/
#why-us {
    background-color: #edecdf;
    padding-top: 4%;
    padding-bottom: 8%;
}
#about-ceo {
    background-color: #edecdf;
    padding-top: 4%;
    padding-bottom: 8%;
}

.about-ceo{

}
.ceo-img{
    width: 100%;
}

.why-images{
    /*width: 50%;*/
    margin-bottom: 10px;
}
.why-us .header{
    margin-bottom: 50px;
}


#what-we-stand-for {
    padding-top: 1%;
    padding-bottom: 8%;
}


/*=======================================
    Jobs Section
==================================================*/
#jobs{
    padding-top: 8%;
    padding-bottom: 8%;
    /*padding-left: 0px;*/
}

.jobs{
    position: relative;
    overflow: hidden;
    padding: 0px;
    /*padding-bottom: 40px;*/
    margin-bottom: 50px;
}
.jobs:hover .pix-btn{
    display: block;
    /*opacity: 1;*/
}
/*.pix-btn:hover .btn-rokit{
    opacity: 1;
}*/

.jobs > img{
    padding: 0px;
    width: 100%;

    overflow: hidden;
}
.pix-btn {
    background: black;
    bottom: -15px;
    color:#fff;
    letter-spacing: 1px;
    line-height: 16px;
    padding: 12% 0;
    position: absolute;
    text-align: center;  
    width: 100%;
    line-height:25px;
    opacity: 0.902;
    display: none;
}

/*=======================================
    Testimonials Section
==================================================*/
#testimonials{
    background-color: #d9d9dc;
    padding-top: 5%;
    padding-bottom: 5%;
}

.testimonial {
    padding-left: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
}

.inner-testimonial{
    /*color: red;*/
    /*background-color: yellow;*/
}
.display{
    display: block;
}
.display-none{
    display: none;
}
/*===========================================
Our Jobs are constantly section
===========================================*/
#ourjobs{
    padding-top: 0px;
    padding-bottom: 0px;
    background-image: url('../img/strip-1.jpg');
    background-size: cover;
    background-position: 2% 10%;
    background-repeat: no-repeat;
    overflow: hidden;
}
#ourjobs-about{
    padding-top: 0px;
    padding-bottom: 0px;
    background-image: url('../img/strip-2.jpg');
    background-size: cover;
    background-position: 22%, 10%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.ourjob{
    /*background-color: #ff9729;*/
    /*background-image: url('../img/strip-2.jpg');*/
    /*background-color: #333;*/
    color: #fff;
    text-shadow: 1px 1px 5px #000;
    padding-top: 10%;
    padding-bottom: 10%;
    opacity: 1;
}


/*===========================================
About page header pix
===========================================*/
.about-body{
    /*background-image: url('../img/about-cover.jpg');*/
    /*background-color: grey;*/
    /*background-repeat: no-repeat;*/
}

#about-cover{
    padding-top: 0px;
    padding-bottom: 0px;
    /*background-image: url('../img/about-cover.jpg');*/
    /*background-size: auto;*/
    /*background-position: 2%, 2%;*/
    background-repeat: no-repeat;
    /*width: auto;*/
    height: 330px;
    overflow: hidden;
    /*background-color: #ff9729;*/
}
.about-cover-pix{
    width: 100%;
    height: 100%;
    margin: 0px;
    /*height: 100%;*/
}
.about-cover{
    padding: 0px;
    margin: 0px;
}


/*===========================================
Clients section
===========================================*/
#clients{
    padding-top: 1%;
    padding-bottom: 1%;
}

/*=======================================
    Footer Styles
==================================================*/
.first-footer-container{
    background-color: #444;
    padding-bottom: 20px;
    font-size: 14px;
}

.colour-strip{
    height: 7px;
}
.first-footer{
    padding-top: 5%;
    padding-bottom: 5%;
    color: #EC9E00;
}
.google-map-container{
    /*background-color: #333;*/
}

.address-section p{
    /*line-height: 35px;*/
    color: #EC9E00;
}
.address-section > p > .text-bold, .glyphicon, .fa{
    /*line-height: 35px;*/
    letter-spacing: 1.2px;
    /*color: #d8d8d8*/
}
.address-section h4{
    /*margin-bottom: 20px;*/
    /*line-height: 28px;*/
    margin: 0px;
    padding: 0px;
}
.address-section{
    /*margin-top: 10%;*/
    /*background-color: grey;*/
    /*padding-top: 40px;*/
    padding-right: 0.2%;
    /*padding-left: 1%;*/
    /*padding-top: 40px;*/
}

.socials{
    color: #EC9E00;
    font-size: 22px;
}
.socials > a{
    color: #EC9E00;
}
.socials > a:hover{
    color: #fff;
}


.indent-right-2px {
    margin-right: 2px;
}
.indent-right-5px {
    margin-right: 5px;
}
.indent-right-5px {
    margin-right: 5px;
}
.indent-right-10px {
    margin-right: 10px;
}
.indent-left-2px {
    margin-left: -2px;
}
.indent-left-5px {
    margin-left: -5px;
}
.indent-left-10px {
    margin-left: -10px;
}


.contact-info .col-lg-12, .col-lg-6{
    padding-left: 10px;
    /*background: yellow;*/
}

.business-hours{
    margin-left: -15px;
    padding-left: 0px;
}


.form{
    /*background-color: darkslategray*/
}
.form form{
    margin-left: 0%;
}
.form h3{
    margin-left: 4%;
}

.rokit-logo{
    height: 15px;
}


/*=======================================
    CONTACT STYLES
==================================================*/
#contact-inner {
    padding-bottom:60px;
    padding-bottom:50px;
}

.google-map{
    /*border-radius: 10px;*/
}
.google-button{
    margin-top: 15px;
    background: none;
    border: 2px solid #EC9E00;
    color: #EC9E00;
    /*border-radius: 0px 0px 10px 10px;*/
}
.google-button:hover{
    background-color: #ff9729;
    /*background-color: #3ebc00;*/
    color: white;
}
.form-button{
    background: none;
    margin-top: 15px;
    border: 2px solid #EC9E00;
    color: #EC9E00;
}
.form-button:hover{
    background-color: #ff9729;
    /*background-color: #3ebc00;*/
    color: white;
}

.client-logo{
    width: 100%;
}

/*=======================================
    COLOR CODES
==================================================*/

.rokit-orange{color: #ff9729;}
.red{color: #fa2323;}
.green{color: #00ec15;}
.blue{color: #83a4fc}
.yellow{color: yellow;}
.violet{color: violet;}
.purple{color: #fdb0c3;}
.deeppink{color: #ffc1e6;}
.orange{color: orange;}
.orchid{color: #62c562;}
.purple-2{color: #ea0fbc;}
.pale-yellow {color: #1d241b;}
.gold {color: #face00;}
.black {color: #000;}
.grey {color: #888;}
.dark-grey {color: #444;}

.strip-grey {background-color: #353A34;}
.strip-brown {background-color: #715A31;}
.strip-yellow {background-color: #EC9E00;}
.strip-light-red {background-color: #D35644;}
.strip-red {background-color: #A63E3F;}
.bg-rokit-orange{background-color: #ff9729;}
.bg-ash{background-color: #edecdf;}

.gold-shadow {
    text-shadow: 0px 0px 30px gold;
    /*opacity: 0.5;*/
}


.color-bg-one {
    background-color: #b3afff !important;
    /*        background-color: #9b8799 !important;*/
    color:#fff;
}
.color-white {
    background-color:#fff!important;
}
#add {
    font-size:22px;
    line-height: 26px;

}
#contact-inner .form-control {

    height: 55px;
}

/*=======================================
    SOCIAL SECTION STYLES
==================================================*/

.scl {
    background:rgba(20, 173, 124, 1);

    color:#fff;
}
.scl h4 {
    font-size:40px;
}
.scl a {
    color:#fff;
}
.scl-dark-bk {
    background:rgb(13, 138, 98);
}
/*=======================================
    FOOTER STYLES
==================================================*/


#footer {
    /*text-align: center;*/
    margin-top:0px;
    color:grey;
    padding:30px 5px 30px 5px;
    /*text-align:right;*/
    background-color:#222;
    font-size: 14px;
    font-weight: 100;
    /*color: #8d8d8d;*/
}

#footer a{
    color: #ff9729;
}

@media (max-width: 400px){

    /*   
        .brand-image {
            padding: 2%;
            height: 60px;
        }*/

}



@media (min-width: 400.5px){


    /*    
        .brand-image {
            padding: 2%;
            height: 60px;
        }*/

}


@media (min-width: 1000px){



    /*    .brand-image {
            height: 30px;
        }*/

}





.full-screen {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}