/********************************************
    WALCON MARINE V3
    DEVELOPER 13/02/2020
    JUSTIN KERCHER / APOLLO INTERNET MEDIA

    COLOUR REF: 
    #BLUE #282961
    NEWBLUE #002D61
    GOLD #BA9863
    PURPLE: #95095e
********************************************/

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,600,700');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
body {
    font-family: "Figtree", sans-serif; padding: 0px;
    margin: 0px;
    font-size: 18px;
    line-height: 1.6;
    color: #002B3C;
}


/********************************************
    CONVENIENCE
********************************************/

h1, h2, h3, h4 {
    margin-top: 0px;
    font-family: "Figtree", sans-serif;
    font-weight: 400;
}
h1 {
    font-weight: 400;
    font-size: 30px;
    color: #BA9863; 
}
h2 {
    font-size: 24px;
    color: #BA9863;
}
h3 { font-size: 20px; }
h4 a {
    font-weight: 700;
    font-color: #002D61;
}
    h4 a:hover {
        font-color: #BA9863;
    }

h1:empty { display: none; }

h1 { position: relative; margin-bottom: 20px; /*padding-bottom: 30px;*/ display: inline-block; }
    /*h1::after {
        content: "";
        position: absolute;
        left: 0px;
        bottom: 0px;
        display: inline-block;
        width: 50px;
        background-color: #BA9863;
        height: 3px;
    }*/

    .text-center h1:after { left: 50%; transform: translateX(-50%); transform: translateX(-50%); }

#home-projects h1 {
    color: #fff;
}

article h2 {
    color: #002D61;
    font-weight: 700;
}

.container p {
    margin-bottom: 20px;
}

section + section {
    margin-top: 30px;
}

a:not([href]) { color: inherit !important; text-decoration: none !important; }
a {
    color: #BA9863;
    /*text-decoration: underline;*/
}
    a:hover {
        color: #002D61;
    }

/********************************************
    CLASSES
********************************************/

.padding { padding: 30px; }
.padding-tb { padding-top: 30px; padding-bottom: 30px; }

.margin-tb { margin-top: 30px; margin-bottom: 30px; }

.bg-grey { background-color: #eaeaea; position: relative; }
    /* .bg-grey img { position: absolute; top: 0px; right: 0px; transform: translate(50%, -50%); } */

.bg-blue {
    background-color: #002D61;
    color: #fff;
}
    .bg-blue > a { color: inherit; text-decoration: none !important; }

/* Buttons */
.button {
    display: inline-block;
    padding: 15px 30px;
    border: 0px;
    border-top: solid 1px #002D61;
    border-bottom: solid 1px #002D61;
    color: #002D61;
    border-collapse: collapse;
    background-color: transparent;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
    .button:hover {
        background-color: #002D61;
        color: #fff;
    }
    .button.white { border-color: #fff; color: #fff; }

/* Box Links */
.box-links { }
    .box-links a { display: block; position: relative; text-decoration: none !important; margin-top: 15px; margin-bottom: 15px; overflow: hidden;  }
        .box-links a:before { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.3); z-index: 2; }
        .box-links a > img { width: 100%; height: auto; z-index: -1; transition: all 0.5s ease-in-out; }
        .box-links a > h2 { text-align: center; color: #fff; top: 30px; width: 100%;  position: absolute; z-index: 10; }
        .box-links a > .button { position: absolute; bottom: 30px; left: 50%;  z-index: 10; white-space: nowrap;
                                 -webkit-transform: translateX(-50%); transform: translateX(-50%); }

        .box-links a:hover > img {  -webkit-transform: scale(1.1);  transform: scale(1.1); }

/********************************************
    LAYOUT
********************************************/

#site-search { background-color: #eaeaea; padding-top: 15px; }

#site-header { }
    #site-header > .container-fluid { padding: 15px; }
    #site-header > #contact-bar { padding: 5px 15px; }
        #site-header > #contact-bar > a { display: inline-block; margin-left: 15px; }
        #site-header #site-logo { display: block; max-width: 200px; }
            #site-header #site-logo img { max-width: 100%; }
    #site-header #sixty { position: absolute; top: 50%; right: 15px; max-width: 100px; transform: translateY(-50%);  }

#site-banner { position: relative; max-height: 500px; overflow: hidden; margin-bottom: 45px; }
    #site-banner img { display: block; position: relative; z-index: -1; }
    #site-banner .container { background-color: #eaeaea; padding: 15px;  }

#site-content { }

#site-footer {
    background-color: #002D61;
    color: #fff;
    padding: 30px 0px;
    text-align: center;
}
    #site-footer a { color: inherit !important; display: block; text-decoration: none !important; }

/* Sticky footer */
html, body, form { height: 100%; }
form { display: flex; flex-direction: column; }
#site-content-wrap { flex: 1 0 auto; }
#site-footer { flex-shrink: 0; }

#cookiebar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; }

/*************************************
    BOOTSTRAP MENU
**************************************/        

   .navbar { margin-bottom: 0px; }
   .navbar-nav { margin: 0px; }
   .navbar-form { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; }
   
   .navbar-collapse { padding-left: 0px; padding-right: 0px; }
.navbar-default {
    background-color: #002D61;
    border: 0px none;
    border-radius: 0px;
}
.navbar-nav > li > .dropdown-menu {
    background-color: #BA9863;
}
    .navbar-default a { text-decoration: none !important; }
    .navbar-default .navbar-nav > li > a { color: #fff; }
        .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
            background-color: #BA9863;
            color: #fff;
        }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #BA9863;
    color: #fff;
}

    .dropdown-menu { border: 0px none; }
    .dropdown-menu > li > a { color: #fff; }
        .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-color: #002D61;
            color: #fff;
        }

    .navbar-default .navbar-brand, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #fff; }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #fff; }
        
    .navbar-default .navbar-toggle .icon-bar { background-color: #fff; }
    .navbar-form { margin-left: 0px; margin-right: 0px; }


    .navbar-toggle { border: none;	background: transparent !important;  margin-right: 0px !important; }
    .navbar-toggle:hover {	background: transparent !important;}
    .navbar-toggle .icon-bar {	width: 22px;	-webkit-transition: all 0.2s;	transition: all 0.2s;}
    .navbar-toggle.x .icon-bar:nth-of-type(1) {	-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 10% 10%; -ms-transform-origin: 10% 10%; transform-origin: 10% 10%; }
    .navbar-toggle.x .icon-bar:nth-of-type(2) { opacity: 0;	filter: alpha(opacity=0); }
    .navbar-toggle.x .icon-bar:nth-of-type(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 10% 90%; -ms-transform-origin: 10% 90%; transform-origin: 10% 90%; }
    .navbar-toggle.x.collapsed .icon-bar:nth-of-type(1) { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); }
    .navbar-toggle.x.collapsed .icon-bar:nth-of-type(2) { opacity: 1; filter: alpha(opacity=100);}
    .navbar-toggle.x.collapsed .icon-bar:nth-of-type(3) { -webkit-transform: rotate(0);	-ms-transform: rotate(0); transform: rotate(0); }

    .dropdown-menu { font-size: inherit; }

/********************************************
    OVERRIDES
********************************************/
.row, .container, .container-fluid, [class*='col-'] { position: relative; }
.validate-alert { display: none; }

.form-control { font: inherit; border-radius: 0px; box-shadow: none; }
.input-group-btn .btn { border-radius: 0px; }
#site-content .form-control { height: 50px; }
#site-content textarea.form-control { height: 200px; }

.article-listing-item { margin-top: 30px; margin-bottom: 0px; }
.article-listing-item .title { margin-bottom: 10px; }
.article-listing-item img, .articleImage { width: 100%; border: solid 1px #ccc !important; }
.article-listing-item .sub-heading { font-weight: 700; }

.btn { text-decoration: none !important; }

/********************************************
    HOMEPAGE
********************************************/

#home-projects { position: relative; background: url(../images/layout/background.jpg) no-repeat top center fixed; background-size: cover; color: #fff; }
    #home-projects:before { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.3); z-index: 0; }
    #home-projects .container { position: relative; z-index: 10; }
    #home-projects .container header + p { margin: 30px 0px; }

    #home-projects h1 { padding-bottom: 0px; }
    #home-projects h1:after { display: none;}


/********************************************
    MEDIA
********************************************/

@media (max-width: 767px) {
    .match-height { height: auto !important; }
    .navbar-default .form-group { padding: 0px 15px; }

}


@media (min-width: 768px) {

    
    .navbar-right { margin-right: 0px; }

    /* Header */
    #site-header #site-logo { max-width: none; }
    #site-header #sixty { max-width: 120px }

    /* Banner */
    #site-banner .container { position: absolute; z-index: 10; top: 50%; left: 50%; color: #fff; text-align: center; background-color: transparent;
                              -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);  }

    /* Footer */
    #site-footer { text-align: left; }
        #site-footer .row .col-sm-6:last-child { text-align: right; }
        #site-footer a { display: inline-block; }
            #site-footer a + a:before { content: "|"; display: inline-block; margin-right: 5px; }

}

@media (min-width: 992px) {

    /* Menu */
    .navbar-default .container { padding: 0px; }

    .nav > li > a { padding: 15px 8px; }

    /* Header */
    #site-header { background: url(../images/layout/tile-lines.png) repeat-y left 42px top; }
        #site-header h3#harbours { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); margin: 0px; font-weight: bold; }
        #site-header h3#slogan { position: absolute; bottom: 10px; left: 130px; color: #ccc !important; text-transform: uppercase; font-size: 15px }
    #site-header .container-fluid { padding: 0px 15px; }
    #site-logo { margin-bottom: 65px; }
}


@media (min-width: 1250px) {
    .nav > li > a { padding: 15px 15px; }
    #site-header h3#slogan { font-size: 20px; bottom: 10px; }
}

@media (min-width: 1290px) {
    #site-header h3#slogan {
        bottom: 10px;
    }
}

@media (min-width: 1500px) {
    #site-header #sixty { max-width: 180px }
}