/*



    COLORS: 



        dark blue: rgb(0,9,20)



        gold: rgb(186, 167, 48)



        white: rgb(255, 255, 255)







    STYLING ORDER:



        position



        display



        size



        padding



        color/image



        border



        font



        interaction



*/







/*------------General Style Rules------------*/



*{



    padding: 0;



    box-sizing: border-box;



    margin: 0;







    font-family: 'Titillium Web', sans-serif;







    overflow-x: hidden;



}







.kb_mobile-only{



    display: none !important; 



}







p{



    color: rgb(255, 255, 255);







    font-size: 14pt;



    font-weight: 400;



}







h1{



    display: table;



    width: auto;







    color: rgb(255, 255, 255);







    font-size: 36pt;



    font-weight: 600;







    border-bottom: 4px solid rgb(186, 167, 48);



}







h2{



    display: table;



    width: auto;







    color: rgb(255, 255, 255);







    font-size: 24pt;



    font-weight: 600;







    padding-top: 12pt;



    border-bottom: 2px solid rgb(186, 167, 48);



}







h3{



    color: rgb(255, 255, 255);







    font-size: 42pt;



    font-weight: 600;







    padding-top: 20pt;



    padding-bottom: 12pt;



}







h4{



    display: table;



    color: rgb(186, 167, 48);







    font-size: 20pt;



    font-weight: 600;







    padding-top: 20pt;



    padding-bottom: 20pt;



    border-bottom: 2px solid rgb(186, 167, 48);



}







a{



    text-decoration: none;



}







p a {



    color: rgb(255, 255, 255);



    text-decoration: underline;



}







.kb_first-word{



    color: rgb(186, 167, 48);







    font-size: 14pt;



    font-weight: 700;



}







/*------------Container Rules---------------*/



.kb_container{



    width: 100vw;



    min-height: 100vh;







    padding-top: 60px;



    padding-bottom: 120px;







    background-color:rgb(0,9,20);



}







/*--------------Menu Styling----------------*/



.kb_top-menu{



    position: fixed;



    top: 0;



    left: 0;



    z-index: 99;



    



    display: flex;



    justify-content: space-evenly;



    align-items: center;







    width: 100vw;



    height: 60px;







    background-color: rgb(0,9,20);



    border-bottom: 4pt solid rgb(186, 167, 48);



}







.kb_menu-button{



    display: none;



}







.kb_top-menu a{



    color: rgb(255, 255, 255);







    font-size: 18pt;



    font-weight: 600;



}







.kb_top-menu a:hover{



    color: rgb(186, 167, 48);







    cursor: pointer;



}







/*-----------Main Page Styles------------*/



.kb_main-page-con{



    position: relative;







    display: flex;



    height: auto;







    justify-content: space-evenly;



    align-items: flex-start;







    padding-top: 7.5vh;



}







.kb_main-column{



    position: relative;



    float: left;







    display: block;







    width: 20vw;



}







.kb_main-col-mid{



    width: 50vw;



    min-height: 75vh;



    height: auto;



    background-color: rgb(0,9,20);



}







.kb_main-col-logo{



    position: relative;



    left: 0;



    top: 0;







    display: block;







    width: 50%;



    max-width: 400px;







    padding-bottom: 12pt;



    border-bottom: 2px solid rgb(186, 167, 48);



}







#kb_main-col-left-1{



    display: block;



    width: 100%;



    height: 33vh;







    background-image: url("../assets/photos/home/home1.jpeg");



    background-size: contain;



    background-position: center center;



    background-repeat: no-repeat;








    border-bottom: 4px solid rgb(186, 167, 48);



}







#kb_main-col-left-2{



    display: block;



    width: 100%;



    height: 33vh;







    background-image: url("../assets/photos/home/home2.jpg");



    background-size: contain;



    background-position: center center;



    background-repeat: no-repeat;




}







#kb_main-col-right-1{



    display: block;



    width: 100%;



    height: 33vh;







    background-image: url("../assets/photos/home/home3.jpeg");



    background-size: contain;



    background-position: center center;



    background-repeat: no-repeat;








    border-bottom: 4px solid rgb(186, 167, 48);



}







#kb_main-col-right-2{



    display: block;



    width: 100%;



    height: 33vh;







    background-image: url("../assets/photos/home/home4.jpg");



    background-size: contain;



    background-position: center center;



    background-repeat: no-repeat;




}







/*-----------Sub Page Styles------------*/



.kb_sub-page-con{



    position: relative;







    display: flex;



    height: auto;







    padding-top: 120px;



    padding-bottom: 120px;







    justify-content: space-evenly;



}







.kb_sub-column{



    position: relative;



    float: left;







    display: block;







    width: 20vw;



    height: 75vh; 



}







.kb_sub-col-mid{



    width: 50vw;



    min-height: 75vh;



    height: auto;







    background-color: rgb(0,9,20);



}







.kb_sub-col-img{



    display: block;



    width: 100%;



    max-width: 650px;



    height: auto;







    padding-top: 18pt;



    padding-bottom: 18pt;



    border-bottom: 2px solid rgb(186, 167, 48);



}







.kb_ref-img-con{



    position: relative;







    display: flex;



    width: 100%;



    height: auto;







    flex-wrap: wrap;



    align-items: center;



    align-content: stretch;



}







.kb_ref-img-con img{



    display: block;



    width: 50%;



    height: auto;



}







.kb_ref-img-con .kb_ref-img-con-fullwidth{



    display: block;



    width: 100%;



    height: auto;



}







.kb_gen-img-con{



    position: relative;







    display: flex;



    width: 100%;



    height: auto;







    flex-wrap: wrap;



    align-items: center;



    align-content: stretch;



}







.kb_gen-img-con img{



    display: block;



    width: 100%;



    height: auto;



}







.kb_contact-col-img{



    display: block;



    width: 100%;



    max-width: 650px;



    height: auto;







    border: 2px solid rgb(186, 167, 48);



}







.kb_ref-img-slider-con{



    position: relative;



    display: block;



    width: 90vw;



    max-width: 60vh;



    height: 120vw;



    max-height: 80vh;



    overflow: hidden;



    border: 2px solid rgb(186, 167, 48);



}







.kb_ref-img-slider-img{



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    background-size: 100% 100%;



}







.kb_ref-img-slider-background-img{



    background-image: url('../assets/photos/beforeafter/after_slider.jpg');



}







.kb_ref-img-slider-foreground-img{



    background-image: url('../assets/photos/beforeafter/before_slider.jpg');



    width: calc(50% - 2px);



    background-size: 200% 100%;



}







.kb_ref-img-slider {



    position: absolute;



    -webkit-appearance: none;



    appearance: none;



    width: 100%;



    height: 100%;



    outline: none;



    background-color: rgba(0, 0, 0, 0);



    margin: 0;



    transition: all .2s;



    display: flex;



    justify-content: center;



    align-items: center;



}







.kb_ref-img-slider::-webkit-slider-thumb {



    -webkit-appearance: none;



    appearance: none;



    width: 3px;



    height: 100%;



    background-color: rgb(186, 167, 48);



    cursor: pointer;



}







.kb_ref-img-slider::-moz-range-thumb {



    width: 3px;



    height: 100%;



    background-color: rgb(186, 167, 48);



    cursor: pointer;



}



  



.kb_ref-img-slider-button {



    pointer-events: none;



    position: absolute;



    width: 30px;



    height: 30px;



    border-radius: 50%;



    background-color: rgb(0,9,20);



    border: 3px solid rgb(186, 167, 48);



    left: calc(50% - 16px);



    top: calc(50% - 16px);



    display: flex;



    justify-content: center;



    align-items: center;



}







.kb_ref-img-slider-con-2{



    position: relative;



    display: block;



    width: 50vw;



    max-width: 120vh;



    height: 37.5vw;



    max-height: 80vh;



    overflow: hidden;



    border: 2px solid rgb(186, 167, 48);



}







.kb_ref-img-slider-background-img-2{



    background-image: url('../assets/photos/beforeafter/after_slider_2.jpg');



}







.kb_ref-img-slider-foreground-img-2{



    background-image: url('../assets/photos/beforeafter/before_slider_2.jpg');



    width: calc(50% - 2px);



    background-size: 200% 100%;



}







.kb_ref-img-slider-2 {



    position: absolute;



    -webkit-appearance: none;



    appearance: none;



    width: 100%;



    height: 100%;



    outline: none;



    background-color: rgba(0, 0, 0, 0);



    margin: 0;



    transition: all .2s;



    display: flex;



    justify-content: center;



    align-items: center;



}







.kb_ref-img-slider-2::-webkit-slider-thumb {



    -webkit-appearance: none;



    appearance: none;



    width: 3px;



    height: 100%;



    background-color: rgb(186, 167, 48);



    cursor: pointer;



}







.kb_ref-img-slider-2::-moz-range-thumb {



    width: 3px;



    height: 100%;



    background-color: rgb(186, 167, 48);



    cursor: pointer;


}



  



.kb_ref-img-slider-button-2 {



    pointer-events: none;



    position: absolute;



    width: 30px;



    height: 30px;



    border-radius: 50%;



    background-color: rgb(0,9,20);



    border: 3px solid rgb(186, 167, 48);



    left: calc(50% - 16px);



    top: calc(50% - 16px);



    display: flex;



    justify-content: center;



    align-items: center;



}







/*----------Mid-Size Screen Styles-------*/



@media only screen and (max-width: 1750px) and (min-width: 1280px){



    /*------------General Style Rules------------*/



    p{



        font-size: 12pt;



    }







    h1{



        font-size: 24pt;



        border-width: 3px;



    }







    h2{



        font-size: 18pt;



    }







    h3{



        font-size: 30pt;   



    }







    h4{



        font-size: 18pt;



        padding-top: 12pt;



        padding-bottom: 12pt;



    }







    a{



        font-size: 24pt;    



    }







    p a {



        font-size: 12pt;    



    }







    .kb_first-word{



        font-size: 12pt;    



    }







    /*------------Container Rules---------------*/



    .kb_container{



        



    }







    /*--------------Menu Styling----------------*/



    .kb_top-menu{



        height:50px;



        border-width: 3px;



    }







    .kb_top-menu a{



        



    }







    .kb_top-menu a:hover{



        



    }







    /*-----------Main Page Styles------------*/



    .kb_main-page-con{



        



    }







    .kb_main-column{



        



    }







    .kb_main-col-mid{



        



    }







    .kb_main-col-logo{



        max-width: 200px;



    }







    #kb_main-col-left-1{



        



    }







    #kb_main-col-left-2{



        



    }







    #kb_main-col-right-1{



        



    }







    #kb_main-col-right-2{



        



    }







    /*-----------Sub Page Styles------------*/



    .kb_sub-page-con{



        padding-top: 60px;



    }







    .kb_sub-column{



        



    }







    .kb_sub-col-mid{



        



    }







    .kb_sub-col-img{



        



    }







    .kb_ref-img-con{



        



    }







    .kb_ref-img-con img{



        width:100%;



        padding-bottom: 12px;



    }







    .kb_gen-img-con{



        



    }







    .kb_gen-img-con img{



        



    }







    .kb_contact-col-img{



        



    }



}







/*------------Mobile Styles--------------*/



@media only screen and (max-width: 1279px){



    .kb_mobile-only{



        display: block !important;



    }







    p{



        font-size: 11pt;



    }



    



    h1{



        font-size: 21pt;



        border-width: 3px;



    }



    



    h2{



        font-size: 16pt;



        line-height: 19pt;







        padding-bottom: 4pt;



    }



    



    h3{



        font-size: 30pt;   



    }



    



    h4{



        font-size: 16pt;



        padding-top: 12pt;



        padding-bottom: 12pt;



    }



    



    a{



        font-size: 24pt;    



    }



    



    p a {



        font-size: 11pt;    



    }



    



    .kb_first-word{



        font-size: 12pt;    



    }



    



    /*------------Container Rules---------------*/



    .kb_container{



        padding-top: 0;



        



    }



    



    /*--------------Menu Styling----------------*/



    .kb_menu-button-open{



        position: fixed;



        top: 20px;



        right: 20px;







        z-index: 99;







        display: block;



        width: 25px;



        height: 25px;



    }







    .kb_top-menu{



        flex-direction: column;



        left:100vw;



        height:100%;



        width:100vw;



        border-bottom: none;



        border-left: rgb(186, 167, 48) solid 3px;



        transition: left 0.5s;



    }







    .kb_menu-button-close{



        display: block;



        width: 25px;



        height: 25px;



    }



    



    .kb_top-menu a{



        



    }



    



    .kb_top-menu a:hover{



        



    }



    



    /*-----------Main Page Styles------------*/



    .kb_main-page-con{



        min-height: 100vh;



        height: auto;



        align-items: flex-start;



    }



    



    .kb_main-column{



        padding-top: 45px;



        padding-bottom: 20px;



        height: auto;



        max-height: none;



    }



    



    .kb_main-col-mid{



        width: 90vw;



    }



    



    .kb_main-col-logo{



        width: 60vw;



        max-width: 250px;



    }



    



    .kb_main-col-left{



        display:none;



    }



    



    .kb_main-col-img{



        max-height: 50vh;



        max-width: 90vw;;



        width: auto;



    }







    #kb_main-col-left-1{



  



    }



    



    #kb_main-col-left-2{







    }







    .kb_main-col-right{



        display:none;



    }



    



    #kb_main-col-right-1{







    }



    



    #kb_main-col-right-2{







    }



    



    /*-----------Sub Page Styles------------*/



    .kb_sub-page-con{



        min-height: 100vh;



        height: auto;



        align-items: flex-start;



        padding: 0;



    }



    



    .kb_sub-column{



        padding-top: 45px;



        padding-bottom: 20px;



        height: auto;



        max-height: none;        



    }






    .kb_sub-col-left{



        display:none;



    }







    .kb_sub-col-right{



        display:none;



    }



    



    .kb_sub-col-mid{



        width: 90vw;        



    }



    



    .kb_sub-col-img{



        



    }



    



    .kb_ref-img-con{



        



    }



    



    .kb_ref-img-con img{



        width:100%;



        padding-bottom: 12px;



    }



    



    .kb_gen-img-con{



        



    }



    



    .kb_gen-img-con img{



        



    }



    



    .kb_contact-col-img{



        



    }







    .kb_ref-img-slider-con-2{



        width: 90vw;



        height: 67.5vw;



    }



}











@media only screen and (max-width: 1279px) and (max-height: 800px) and (orientation: landscape){



    .kb_ref-img-con img{



        max-height: 100vh;



        width: auto !important;



    }







    .kb_main-col-top-con{



        display: flex;



        justify-content: space-between;



        align-items: baseline;



        width: 100%;



        height: auto;



        max-height: 75vh;



    }







    .kb_main-col-logo{



        max-width: 25vw;



    }



}