/*Design Stuff*/
/*blue: 1cb4e3
Green: 92bc43
Orange: f2772e */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto+Slab&display=swap');

/* -------- global stuff -------- */
html {
  scroll-behavior: smooth;
}
body {
	font-family: 'Roboto Slab', serif;
	font-size: 16px !important;
	font-weight: 400;
	background-color: #fff;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.display-1, .display-2, .display-3, .display-4, .display-5 {
    font-family: 'Montserrat', sans-serif;
    text-shadow: 1px 1px #000, -1px -1px #000, -1px 1px #000, 1px -1px #000;
    font-weight: 700;
}
.pointer {
    cursor: pointer;
}
.quote { 
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 40px;
}
.rounded {
    border-radius: 5px;
}
.no-gutters {
    margin-right: -30px;
    margin-left: -30px;
    overflow: hidden;
}
img {
    max-width: 100%;
}
iframe {
    width: 100%;
}
a {
    color: #EA0A2A;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
a:hover {
    color: #222 !important;
}
.img-thumbnail.bg-dark {
    border: none;
}
.bg-dark2 {
    border: 1px #000 solid;
    background-color: rgba(0,0,0,0.8);
    font-size: 16px;
}
.bg-dark2 .table-dark {
    background-color: transparent !important;
}
.bg-blue {
    background-color: #1cb4e3;
}
.bg-orange {
    background-color: #f2772e;
}
.bg-green {
    background-color: #92bc43;
}
.bg-dark3 {
    background-color: #111;
}
.bg-light {
    background-color: #e8e9ea !important;
}
.text-red {
    color: #EA0A2A;
}
.trasparent-card {
    background-color: rgba(255,255,255,0.9);
}
hr.small {
    border-top: 5px solid #92bc43;
    width: 200px;
    opacity: 1;
}
.carousel-control-next-icon {
    background-color: #ccc !important;
    border-radius: 20%;
}
.carousel-control-prev-icon {
    background-color: #ccc !important;
    border-radius: 20%;
}

/* -------- menu -------- */
.navbar-brand img {
    max-height: 75px;
}
@media (max-width: 1200px) {
    .navbar-brand img {
        max-height: 60px;
    }
}
.navbar {
    background-color: #fff !important;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    border-bottom: #ccc solid 1px;
}
.navbar-nav .nav-link {
    padding-right: 20px !important;
    padding-left: 20px !important;
    font-size: 16px;
    color: #000;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}
.navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.navbar .navbar-nav .nav-link.active {
    color: #EA0A2A !important;
    outline: none;
    border-bottom: 1px solid #1cb4e3;
}

.btn-primary {
    background-color: #EA0A2A;
    border-color: #EA0A2A;
}
.btn-primary:hover {
    background-color: #222;
    border-color: #222;
    color: #fff !important;
}
.btn-outline-primary {
    background-color: transparent !important;
    color: #EA0A2A;
    border-color: #EA0A2A;
}
.btn-outline-primary:hover {
    background-color: #EA0A2A !important;
    color: #fff !important;
    border-color: #EA0A2A;
}
.btn-secondary {
    background-color: #f2772e;
    border-color: #f2772e;
}
.btn-secondary:hover {
    background-color: #fff;
    border-color: #f2772e;
    color: #f2772e !important;
}

.index-hero {
    min-height: 500px;
    max-height: 70vh;
    overflow: hidden;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
    background-image: url("../files/IMG_0335.jpg");
}
.hero-text {
    min-height: 500px;
    max-height: 70vh;
    
}
.index-hero h1 {
    text-shadow: 3px 3px 3px #222;
}
.index-hero h4 {
    text-shadow: 2px 2px 2px #222;
}
#myVideo {
    opacity: 1;
    object-fit: cover;
    width: 100%;
    min-height: 500px;
    max-height: 70vh;
    position: absolute;
    top: 0;
    left: 0;
}
.big-links {
    font-weight: 700;
    text-decoration: none;
}

.stripes-dark {
    background: linear-gradient(-7deg, #fff 49.5%, #212529 50%);
    background-size: 100% 30%;
    background-position: bottom;
    background-repeat: no-repeat;
}

.stripes-light {
    background: linear-gradient(-7deg, #fff 49.5%, #e8e9ea 50%);
    background-size: 100% 30%;
    background-position: bottom;
    background-repeat: no-repeat;
}
.stripe-white-top {
    height: 175px;
    width: 100%;
    background-image: linear-gradient(-7deg, rgba(0,0,0,0) 49.5%, #fff 50%);
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}
.stripe-white-bottom {
    height: 175px;
    width: 100%;
    background-image: linear-gradient(-7deg, #fff 49.5%, rgba(0,0,0,0) 50%);
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}
.stripe-light-bottom {
    height: 175px;
    width: 100%;
    background-image: linear-gradient(-7deg, rgb(232, 233, 234) 49.5%, rgba(0,0,0,0) 50%);
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}
.stripe-light-bottom-alt {
    height: 175px;
    width: 100%;
    background-image: linear-gradient(7deg, rgb(232, 233, 234) 49.5%, rgba(0,0,0,0) 50%);
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}

/* -------- carousel -------- */
@media (max-width: 992px) {
    .carousel-caption {
        position: relative;
        left: 0;
        top: 0;
    }
}
@media (max-width: 768px) {
    .carousel-caption {
        height: 200px;
    }
}

/* -------- gallery -------- */

.gallery .card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
    overflow: hidden;
	transition: transform .5s ease;
}
.gallery .card {
	overflow: hidden;
}
.gallery .card-img-top:hover {
	transform: scale(1.1);
}
.gallery .card-body h5 a {
    color: #000 !important;
    text-decoration: none;
}
.gallery .card-body small {
    font-size: 12px;
}

.textimonial1 {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
    background-attachment: inherit;
    background-image: url(../files/testimonial-1.jpg);
}
.textimonial2 {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
    background-attachment: inherit;
    background-image: url(../files/testimonial-2.jpg);
}
.paint-correction {
    height: 80vh;
    max-height: 80vh;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url(../files/paint-correction.jpg);
}
.ceramic-coating {
    height: 80vh;
    max-height: 80vh;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url(../files/ceramic-coating.jpg);
}
.news {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
    background-image: url(../files/news.jpg);
}

.about {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
    background-image: url(../files/about.jpg);
    text-shadow: 1px 0px #000, 0px 1px #000, -1px 0px #000, 0px -1px #000;
}
.services {
    height: 40vw;
    min-height: 400px;
    max-height: 50vh;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
    background-image: url(../files/services.jpg);
    text-shadow: 1px 0px #000, 0px 1px #000, -1px 0px #000, 0px -1px #000;
}
.blog {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../files/blog.jpg);
    text-shadow: 1px 0px #000, 0px 1px #000, -1px 0px #000, 0px -1px #000;
}
.quote {
    height: 30vw;
    max-height: 40vh;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
    background-attachment: inherit;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../files/quote.webp);
    text-shadow: 1px 0px #000, 0px 1px #000, -1px 0px #000, 0px -1px #000;
}
.getinvolved {
    height: 40vw;
    max-height: 60vh;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../files/getinvolved.jpg);
    text-shadow: 1px 0px #000, 0px 1px #000, -1px 0px #000, 0px -1px #000;
}
.contact {
    height: 40vw;
    max-height: 60vh;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../files/contact.jpg);
    text-shadow: 1px 0px #000, 0px 1px #000, -1px 0px #000, 0px -1px #000;
}
.hero {
    min-height: 80vh;
	background-position: center left;
	background-size: cover;
	background-repeat: no-repeat;
    background-image: linear-gradient(90deg, rgba(6, 8, 111, 0.5), rgba(6, 8, 111, 0.9)), url(../files/top.jpg);
}
.license {
    min-height: 100vh;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: linear-gradient(90deg, rgba(0,0,0, 0.5), rgba(0,0,0,0.5)), url(../files/map-01.jpg);
}

.social {
    font-size: 30px;
}
.social i {
    padding-right: 5px;
    padding-left: 5px;
}
#footer h5 {
    font-size: 140%;
}
#footer i {
    color: #EA0A2A !important;
    font-size: 110%;
}
#footer a {
    color: #fff;
    text-decoration: none;
}
#footer a:hover {
    color: #EA0A2A !important;
}

#breadcrumbs {
    color: #fff;
    font-size: 14px;
}
#breadcrumbs a {
    color: #fff;
    text-decoration: none;
}
#breadcrumbs a:hover {
    color: #EA0A2A !important;
}