/* CUSTOM CSS (may OVERRIDE other)*/

/*#region General CSS*/
.row {
    margin: 0;
}

.marginCenter {
    margin: auto;
}

.text-centerVertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* hide until animation class */
.opacityZero{
    opacity: 0;
}

body {
    color: white;
    background-color: #23283c;
}

p {
    font-size: 1.5em;
}

h1 {
    font-weight: bolder;
    color: #1E90FF;
}

footer {
    /*background-color: black;
    color: white;*/
}

.col-md-3 {
    padding: 3px 0 3px 0;
}

.col-sm-6, .col-sm-12 {
    padding: 0;
    margin: 0;
}

.sectionMargin {
    margin: 0px 5vw;
    padding-top: 30px;
}

/*#endregion*/

/*#region Navbar*/
.container {
    padding: 0 4vw;
    margin-left: 0;
}

.navbar-inverse .navbar-collapse {
    /*background-image: linear-gradient(to bottom,#747579 0,#27272d 100%);*/
}

.navbar-inverse {
    background-image: linear-gradient(to bottom,#747579 0,#27272d 100%);
}

    .navbar-inverse .navbar-brand {
        margin-left: 10px;
        font-size: 2em;
        color: #1E90FF;
    }

    .navbar-inverse .navbar-toggle{
        margin-right: 10px;
    }

    .container>.navbar-header, .container>.navbar-collapse{
        margin: 0;
    }

nav div ul li {
    display: inline;
    list-style-type: none;
}

div.navbar.navbar-inverse.navbar-fixed-top {
    margin: 0;
    padding: 0;
    min-height: 50px;
}

ul.nav.navbar-nav.pull-right li a:hover, .navbar-inverse .navbar-collapse li a:hover {
    /*border-top: 3px solid white;
    border-bottom: 3px solid white;*/
    background-image: linear-gradient(to bottom,#2a64bd 0,#0f0f0f 100%);
}

.navbar-inverse .navbar-nav > .active > a {
    background-image: linear-gradient(to bottom,#2a64bd 0,#0f0f0f 100%);
}
/*#endregion*/

/*#region Home / Banner */
#Home {
    background: url(../image/background/BannerKCMOcompressed.jpg) top left no-repeat;
    background-attachment: fixed;
    /*background-image: url('../image/background/photo2.png');
    background-size: cover;*/
    background-position: center;
    height: 100vh;
    width: 100vw;
    color: #1E90FF;
}

.title {
    font-size: 10vh;
    margin-left: 20px;
}

    .title p {
        font-size: 5vh;
        color: white;
        font-style: italic;
    }

        .title p em {
            font-style: italic;
            font-weight: bolder;
            color: #1E90FF;
        }

/*#endregion*/

/*#region Service*/
#Service {
    /*margin: 30px 0;*/
    padding-bottom: 30px;
    /*background-color: #909590;*/
    color: white;
}

.imgService, .imgService2 {
    width: 30vw;
    height: 350px;
    opacity: 0;
}
/*#endregion*/

/*#region Quote*/
#Quote {
    /*background-color: #bbb9b4;*/
}

.headquote {
    font-size: 2em;
}

.carousel {
    height: 275px;
}

.carousel-indicators li {
    border: 1px solid black;
}

.carousel-indicators .active {
    background-color: #1E90FF;
}
/*#endregion*/

/*#region Equipment*/
#Equipment {
    margin: 30px 0;
}

div.col-sm-4.text-center img {
    height: 200px;
    width: 200px;
    border-radius: 10%;
    background-color: white;
}
/*#endregion*/

/*#region History*/
#History {
}

#historyImg {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 5px 5px rgba(28, 33, 41, 0.78);
    border-radius: 10%;
    opacity: 0;
}

#historyPara {
    padding-right: 20px;
}
/*#endregion*/

/*#region Location*/
#Location {
    margin: 30px 0;
}

/* Visibility vs Display */
/* Visibility hides element but keeps layout while dispaly hides entire element */
#map {
    width: 100%;
    height: 450px;
    border: 0;
    display: contents;
}

.buttonLocation {
    height: 30px;
    width: 100%;
    padding: 0;
    color: black;
}
/*#endregion*/

/*#region Contact*/
#Contact {
    margin: 150px 5vw;
}

.contactForm {
    width: 40vw;
    margin: auto;
}

.textBox {
    width: 100%;
    max-width: 100vw;
    margin: 5px 0;
    color: black;
}

textarea {
    height: 100px;
}

span.field-validation-error {
    color: #f0a26b;
}

/*placeholder color for dif browsers*/
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #68739f;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #68739f;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #68739f;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #68739f;
}
/*#endregion*/

@media screen and (max-width: 990px) {
    .col-sm-3 {
        padding: 0px;
    }

    .contactForm {
        width: 60vw;
    }

    .container{
        padding: 0 0 0 10px;
    }
}

@media screen and (max-width: 800px) {
    .imgService, .imgService2 {
        width: 90vw;
    }

    .pull-right {
        float: none !important;
        text-align: center;
    }

    #imgHistory {
        margin-top: 10px;

    }

    .contactForm {
        width: 90vw;
    }

    .container {
        padding: 0;
    }


}

@media screen and (min-width: 770px) {
    .navbar-inverse .navbar-collapse{
        background-color: black;
        background-image: linear-gradient(to bottom,#747579 0,#27272d 100%);
    }
    
    .navbar-inverse .navbar-brand{
        padding-left: 5px;
        margin-left: 5px;
    }
    .container {
        max-width: 100%;
    }

    .navbar>.container .navbar-brand{
        margin: 0;
    }
}

@media screen and (max-width: 370px){
    .navbar-inverse .navbar-brand{
        font-size: 1.5em;
    }
}