/* PAGE */
body {
    margin-bottom: 0px;
    position: relative;
}

body p, li {
    font-weight: 300;
}

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

/* HEADER */
.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link:hover {
    color: #ffcd00;
}

/* FOOTER */
footer {
    background-color: #151f28;
    margin-bottom: 0px;
}

.footer-small {
    font-size: 0.8rem;
}

.footer-large {
    font-size: 1.5rem;
}


/* COLOURS */
.awg-yellow a:link, .awg-yellow a:visited, .awg-yellow a:hover, .awg-yellow a:active {
    color: #ffcd00 !important;
}


/* WELCOME */
.jumbotron-banner {
    background-size: cover;
    min-height: 500px;
    color: white;
}

#jumbotron-home {
    background-image: url("/img/brand/artworkingguy-banner.png");
}

#jumbotron-home p {
    font-size: 1.5rem;
}

.standout-shadow-title {
    font-weight: bold;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}


/* SERVICES SLIDER */
#services .col {
    padding-left: 0;
    padding-right: 0;
}

#services a:link, #services a:visited {
    color: white;
}
  
#services a:hover {
    color: #ffcd00;
    text-decoration: none;
}

.services-slider .jumbotron {
    height: 300px;
    width: 450px;
    margin: 0px 5px;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    outline: none;
}

.services-slider .jumbotron a {
    outline: none;
}

.services-slide-text {
    margin-bottom: 15px;
}

.services-slide-1 {
    background-image: url("/img/services/company-identity/company-identity-banner.png");   
}

.services-slide-2 {
    background-image: url("/img/services/technical-communication/technical-communication-banner.png");
}

.services-slide-3 {
    background-image: url("/img/services/theatrical/theatrical-banner.png");
}

.services-slide-4 {
    background-image: url("/img/services/ui-design/ui-design-banner.png");
}


/* DARK SECTIONS */
#contact, #identity, #packaging, #technical-illustration, #technical-manuals, #murals, #virtual-ui, .section-dark {
    background-color: #f3f3f3;
}


/* SERVICES */
#jumbotron-company-identity {
    background-image: url("/img/services/company-identity/company-identity-banner.png");
}

#jumbotron-technical-communication {
    background-image: url("/img/services/technical-communication/technical-communication-banner.png");
}

#jumbotron-theatrical {
    background-image: url("/img/services/theatrical/theatrical-banner.png");
}

#jumbotron-ui-design {
    background-image: url("/img/services/ui-design/ui-design-banner.png");
}

.jumbotron-service h1 {
    background-color: #151f28;
    opacity: 0.8;
}

.service .border {
    border-width: 8px !important;
    border-color: #e6e6e6 !important;
}

.service .row div {
    padding-left: 0px !important;
    padding-right: 0px !important;
}


/* SERVICE CTA */
.alert {
    margin-bottom: 0;
}

.alert .btn {
    background-color: #ffcd00 !important;
    border: none !important;
}
.alert .btn:hover, .alert .btn:active, .alert .btn:focus {
    background-color: #ffd633 !important;
    border: none !important;
}


/* DISPLAY BREAKPOINTS */
@media (max-width: 340px) {
    .standout-shadow-title {
        font-size: 4.3rem;
    }

    .jumbotron-service h1 {
        font-size: 2.2rem;
        padding-left: 0.5em !important;
        padding-right: 0.5em !important;
    }

    footer p {
        text-align: center;
    }
}
        
@media (max-width: 388px) {
    .navbar-toggler {
        margin: 8px 0px 4px 0px !important;
    }
}

@media (min-width: 340px) and (max-width: 576px) {  
    .standout-shadow-title {
        font-size: 5rem;
    }
    
    .jumbotron-service h1 {
        font-size: 2.8rem;
    }

    footer p {
        text-align: center;
    }   
}

@media (min-width: 576px) and (max-width: 648px)  {  
    .jumbotron-service h1 {
        font-size: 3rem;
    }
}

@media (min-width: 648px) and (max-width: 993px) {  
    .jumbotron-service h1 {
        font-size: 4rem;
    }
}

@media (min-width: 993px) and (max-width: 1200px) {  
    .jumbotron-service h1 {
        font-size: 4.5rem;
    }
}