/* 
STEEL 'N MOTION 
WEBSITE AUTHOR: zazcdev@gmail.com
LAST UPDATED: 
*/

@font-face {
    font-family: OpenSans;
    src: url(assets/fonts/OpenSans.ttf);
}

@font-face {
    font-family: BebasNeue;
    src: url(assets/fonts/BebasNeue.ttf);
}

@font-face {
    font-family: Archive;
    src: url(assets/fonts/Archive.ttf);
}

@font-face {
    font-family: IBM Plex;
    src: url(assets/fonts/IBMPlexSans-Bold.ttf);
}

body {
    background-color: #000000;
    font-family: OpenSans, Tahoma, sans-serif;
        color: #efefef; 
}

body.home {
    height: 100vh;
    background-image: url("/assets/img/SPARK-BACKGROUND.png");
    background-repeat: no-repeat;
    background-size: 200%;
    background-position: 60% 100%;
}

body.contact {
    background-image: url("/assets/img/WS-BACKGROUND.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    height: 100vh;
}

body.error {
    height: 100vh;
    background-image: url("/assets/img/4041-BACKGROUND.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

a {
    color: #efefef; 
}

h1, h2 {
    font-family: Archive, Tahoma, sans-serif;
    text-transform: uppercase;
}

h3 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
}

.navbar-brand {
    color: #efefef; 
    margin: 0;
    font-size: 1.8em;
    text-transform: uppercase;
    font-family: Archive, Tahoma, sans-serif;
}    

.navbar-brand:hover {
    color: #ffffff;
}

#offcanvasNavbar2 {
    width: 100vw;
}

.navbar-toggle {
    margin-top: 0px;
    width: 40px;
    border: none;
    background-color: #000000;
}

nav.navbar {
    margin: 10px 10px 0 15px;
}

.nav-link:hover {
    color: #2d2d2d;
}

.offcanvas-title {
    color: #18191a;
    padding-left: 10px;
}

.offcanvas.offcanvas-end {
    background-color: #181a1a;
}

.offcanvas-header {
    padding: 40px 35px 0px 0px;
}

.navbar-nav {
    margin-top: 100px;
    text-align: center;
}

.navbar-close {
    background-color: #18191a;
}

.nav-item, .nav-link {
    font-size: 1.3em;
    padding-bottom: 10px;
    color: #efefef; 
    font-family: IBM Plex, Tahoma, sans-serif;
    text-transform: uppercase;
}

.homeLead {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    width: 75%;
    margin-top: 100px;
    margin-left: 8%; 
}

.slogan {
    font-size: 1.8em;
    text-align: left;
    color: #efefef; 
    text-transform: uppercase;
    width: 100%;
    line-height: 1.6em;
}

.tagline {
    font-size: 1.3em;
    padding-top: 10px;
    color: #efefef; 
    text-transform: uppercase;
}

.aboutContainer {
    margin: 80px 0;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
}

.aboutHeader {
    font-size: 1.8em;
    line-height: 1.7em;
    padding-bottom: 20px;
    font-family: Archive, Tahoma, sans-serif;
    text-transform: uppercase;
}

.aboutPara {
    line-height: 1.9em;
}

button {
    border-style: none;
    border-radius: 10px;
    font-style: italic;
    letter-spacing: 0.1em;
    padding: 0;
    width: 40px;
}

.galleryArticle {
    padding: 20px;
} 

.row {
    padding: 0;
    margin: 0;
}

.col {
    padding: 0;
    margin: 0;
}

.galImg {
    padding: 5px;
}

#servicesRow {
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    list-style: none;
}

#servicesColumn {
    padding: 5px;
    width: 100%;
    margin-top: 10px;
}

.servicesPara {
    width: 100%;
    margin: 0;
    padding: 10px 0;
    font-size: 0.9em;
    text-align: justify;
}

.marinePara {
    margin: 50px 0 30px 0;
}

.servicesHeader {
    padding-top: 30px;
    font-family: Archive, Tahoma, sans-serif;
    font-weight: 500;
}

#contactRow {
    display: flex;
    flex-flow: column;
    padding: 30px 30px;
    margin: 0;
    list-style: none;
}

#contactColumn {
    padding: 20px 0;
    width: 100%;
    margin-top: 10px;
}

.contactPara {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    text-align: justify;
}

.contactList {
    list-style-type: none;
    margin: 0;
    padding: 0 0 40px 0;
}

.contactList li {
    padding: 3px 0;
}

.contactListHeader {
    padding: 20px 0 0 0;
}

.contactHeader {
    padding-bottom: 20px
}

.errorPage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.errorSlogan {
    font-family: Archive, Tahoma, sans-serif;
    color: #f8eeee;
    font-size: 5em;
    line-height: 1.1em;
}

.errorMessage {
    color: #f8eeee;
    font-size: 1em;
}


.errorRedirect {
    padding-top: 10px;
    text-decoration: none;
    font-family: IBM Plex, Tahoma, sans-serif;
    word-spacing: 0.2em;
    font-size: 1em;
    color: #dfcfc8;
}

.errorRedirect:hover {
    color: #3d363f;
}


/* REG DESKTOP VIEW ADJUSTMENT */
@media only screen and (min-width: 992px) {
   
    body.home {
        background-size: 95%;
        height: 90vh;
        background-position: 300% 70%;
    }

    body.gallery {
        padding: 0;
        margin: 0;
    }

    body.contact {
        background-image: url("/assets/img/WS-BACKGROUND.png");
        background-repeat: no-repeat;
        background-size: 100%;
        height: 98vh;
        background-position: fixed bottom;
    }

    .navbar {
        margin: 0;
        padding: 20px 30px 0 30px 0;
    }

    .navbar-nav {
        margin: 0;
        padding: 0;
        text-align: left;
        justify-content: end;
    }
    
    .navbar-brand {
        padding: 0 0 0 20px;
        font-size: 2em;
    }

    .nav-item {
        font-size: 1em;
        padding: 0 0 0 15px;
        margin: 0;
    }

    .homeLead {
        display: flex;
        flex-direction: column;
        width: 50%;
        margin-top: 200px;
        margin-left: 8%; 
    }
 
    .slogan { 
        font-size: 2.5em;
        line-height: 1.3em;
        padding: 0;
        margin: 0;
    }

    .tagline {
        line-height: 2.8em;
        font-size: 1.4em;
        padding: 0;
        margin: 0;
    }

    .aboutContainer {
        margin-top: 150px;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .aboutHeader {
        font-size: 1.8em;
        line-height: 1.7em;
        padding: 20px 0;
        width: 70%;
        font-family: Archive, Tahoma, sans-serif;
        text-transform: uppercase;
    }
    
    .aboutPara {
        line-height: 1.9em;
        width: 70%;
    }
    
    img.menu-desktop {
        display: none;
    }

    .nav-link {
        color: #fefefe; 
    }

    .galleryArticle {
        padding: 60px;
    } 
    
    #servicesRow {
        display: flex;
        flex-flow: row;
        justify-content: space-around;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    #servicesColumn {
        padding: 5px;
        width: 50%;
        margin-top: 10px;
    }
    
    .servicesPara {
        width: 80%;
        padding: 10px 0;
        font-size: 1em;
    }

    #contactRow {
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    #contactColumn {
        padding: 5px;
        width: 100%;
        margin: 180px;
    }
    
    .contactPara {
        margin: 0;
        padding: 10px 0;
        font-size: 1em;
    }

}


/* LG DESKTOP VIEW */

@media only screen and (min-width: 1600px) {
    
    body.home {
        background-size: 80%;
        background-position: 180% 70%;
    }

    .homeLead {
        width: 40%;
        margin-top: 200px;
        margin-left: 8%;
    }

    .slogan {
        font-size: 3em;
    }

    .tagline {
        font-size: 1.5em;
    }

    .navbar-brand {
        font-size: 3em;        
    }

    .nav-item {
        font-size: 1.4em;
        padding: 0 0 0 15px;
        margin: 0;
    }
}


@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-delay: -1ms !important;
      animation-duration: -1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
    }
  }