/*********************************************
    OFFSHORE SOLO RACING CLUB
    VERSION 3.0
    DEVELOPED 22/06/20232
    JUSTIN KERCHER / APOLLO INTERNET MEDIA

    COLOUR REF:
    Red:       #9b2d30
**********************************************/

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

:root { 
    --red:     #9b2d30;
    --lt-grey: #eaeaea; 
    --dk-grey: #333333;
}

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

html, body, form { display: flex; flex-direction: column; min-height: 100vh }
#site-wrap { flex: 1 1 auto; overflow: hidden;  }
#site-footer { flex-shrink: 0; }


body { font-family: 'Ubuntu', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5;  }

h1, .h1, h2, .h2, h3,.h3 .box-link .content {  font-weight: 700; text-transform: uppercase; }

h1, .h1 { font-size: 3rem; }
h2, .h2 { font-size: 2.5rem; }

    h1 + h2 { font-size: 1.2rem; }

h3 { font-size: 1.2rem; font-weight: 900; }

a { color: var(--red); }

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

.text-red { color: var(--red); }

/* Backgrounds */
.bg-lt-grey { background-color: var(--lt-grey); }
.bg-red { background-color: var(--red); color: #fff; }
    .bg-red a { color: #fff; }

/* Overlays */
.overlay { position: relative; }
    .overlay :first-child { position: relative; z-index: 1; }
    .overlay:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.3); z-index: 1; }

/* Parallax */
.bg-parallax { position: relative; background-attachment: fixed; background-size: cover; background-position: center; height: 400px; overflow: hidden;   }

/* Buttons*/
.button { display: inline-block; color: #fff; background-color: var(--red); text-transform: uppercase; border-collapse: collapse; border: 0px none;
          padding: 15px 30px; text-decoration: none !important; transition: all 0.5s ease-in-out; clip-path: polygon(0 0, 90% 0, 100% 20%, 100% 100%, 0 100%); }
    .button:hover { transform: translateY(-8px); color: #fff; }
    .button + .button { margin-left: 15px; }

    .button:after { position: absolute; content: ""; width: 0px; height: 5px; background-color: #000; bottom: 0px; left: 50%; transform: translateX(-50%); transition: all 0.2s ease-in-out; }
        .button:hover:after { width: 100%; }

    /*.bg-parallax .button { background-color: #fff; color: var(--red);  }
    .bg-parallax .button:hover { background-color: var(--red); color: #fff;  } */

.wedge { position: relative; clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%); padding: 1px; margin-bottom: 0px !important; }
   /* .wedge:before { content: ""; display: block; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; clip-path: inherit; background-color: var(--lt-grey); }*/


/* Image wraps */
.img-wrap { position: relative;  overflow: hidden; }
    .img-wrap img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
    .img-wrap.c4by3 img { aspect-ratio: 4/3; }
    .img-wrap.c16by9 img { aspect-ratio: 16/9; }

    .img-wrap > figcaption { background-color: var(--red); color: #fff; padding: 0.5rem; position: absolute; right: 0; bottom: 30px; padding-right: 1rem; padding-left: 2rem; 
                             clip-path: polygon(0% 50%, 10% 0%, 100% 0%, 100% 100%, 10% 100%); filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.8)); transition: all 0.5s ease-in-out; }

    .img-wrap:hover > figcaption { padding-left: 3rem; }

/* Article Listings */
.article-listing-item { position: relative; color: inherit !important; text-decoration: none !important;  background-color: var(--lt-grey); height: 100%; display: flex; flex-direction: column; border: solid 1px var(--lt-grey); }
    .article-listing-item img { max-width: 100%; transition: all 0.5s ease-in-out; }
    .article-listing-item .content { display: flex; flex-direction: column; flex: 1 1 auto; overflow: hidden; }
    .article-listing-item .posted { display: flex; align-self: baseline; }
    .article-listing-item:hover img { transform: scale(1.05); }
    .article-listing-item small { color: #aeaeae !important; }
    .article-listing-item.download:before { content: "\f56d"; font-family: "Font Awesome 6 Free"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: var(--fa-display,inline-block);  font-style: normal;
                                            font-variant: normal; font-weight: 900; line-height: 1; text-rendering: auto; position: absolute; bottom: 36px; right: 20px; color: var(--red); }

/* Product Links */
.product-box { display: flex; width: 100%; flex-direction: column; position: relative; overflow: hidden; color: inherit; text-decoration: none !important; height: 100%; }
    .product-box img { transition: all 0.5s ease-in-out; }
    .product-box:hover img { transform: scale(1.05); }
    .product-box .content { margin-top: 1rem; display: flex; flex-direction: column; flex: 1 1 auto; overflow: hidden; text-align: left; }
    .product-box .price { color: var(--red); display: flex; align-self: baseline; }

    .product-box .date, .article-listing-item .date { background-color: #fff; display: block; position: absolute; bottom: 0px; left: 0px;  
                                                      width: 80px; padding: 0.25rem;  text-align: center; color: var(--red); border-top: solid 4px var(--red); }
    .product-box .date span, .article-listing-item .date span { display: block; }
    .product-box .date .month, .article-listing-item .date .month { text-transform: uppercase; }
    .product-box .date .day, .article-listing-item .date .day { font-size: 3.0em; line-height: 50px; }
    .product-box .date .year, .article-listing-item .date .year {  }

/* Social */
a:hover .fa-facebook { color: #3b5998 }
a:hover .fa-twitter { color: #1da1f2 }
a:hover .fa-youtube { color: #ff0000 }
a:hover .fa-instagram { color: #C13584 }
a:hover .fa-linkedin { color: #0A66C2 }
a:hover .fa-flickr { color: #f40083 }

/* Misc */
.events-box { border: solid 1px var(--lt-grey); height: calc(100% - 30px); }
.alert { display: block; }

/* Accounts */
.account-listing-item { border: solid 1px var(--lt-grey); padding: 1rem; margin: 2rem 0; }
/*********************************************
    LAYOUT
*********************************************/
#site-header {
}
    #site-header #site-logo { max-width: 200px; }
    #site-header .nav-boxes { list-style: none; margin: 0px; text-transform: uppercase; }
    #site-header .nav-boxes li { display: inline-block; width: calc(20% - 30px); margin: 0px 7.5px; }
        #site-header .nav-boxes li:last-child { margin-right: 0px !important; }
    #site-header .nav-boxes li a { position: relative; display: flex; justify-content: center; background-color: var(--red); color: #fff; text-align: center; 
                                   padding: 15px 5px; text-decoration: none; object-fit: contain; overflow: hidden; transition: all 0.5s ease-in-out; 
                                   clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%);}
 #site-header .nav-boxes { list-style: none; margin: 0px; text-transform: uppercase; }
    #site-header .nav-boxes li { display: inline-block; width: calc(20% - 30px); margin: 0px 7.5px; }
        #site-header .nav-boxes li:last-child { margin-right: 0px !important; }
    #site-header .nav-boxes li a { position: relative; display: flex; justify-content: center; background-color: var(--red); color: #fff; text-align: center; 
                                   padding: 15px 5px; text-decoration: none; object-fit: contain; overflow: hidden; transition: all 0.5s ease-in-out; 
                                   clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%);}
        
        #site-header .nav-boxes li a:hover { transform: translateY(-8px);}
        #site-header .nav-boxes li a:after { position: absolute; content: ""; width: 0px; height: 5px; background-color: #000; bottom: 0px; left: 50%; transform: translateX(-50%); transition: all 0.2s ease-in-out; }
        #site-header .nav-boxes li a:hover:after { width: 100%; }
        
    #site-banner { position: relative; color: #fff; }
        #site-banner > img { position: absolute; width: 150px; top: 45px; left: 50%; transform: translateX(-50%); z-index: 100; }
        #site-banner .carousel-item  { min-height: 550px; height: calc(100vh - 66px); overflow: hidden; }
                #site-banner.half .carousel-item { min-height: unset; height: 300px; max-height: 300px; }
            #site-banner .carousel-item:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4); z-index: 0; }
            #site-banner .carousel-item {  background-position: center; background-size: cover; }
        
            #site-banner .carousel-caption { transform: translateY(-50%); left: 15px; right: 15px; width: auto;  transition: all 0.5s ease-in-out; top: 50%; bottom: auto;
                                             animation: banner-caption 2s ease-in-out forwards; }
        
            #site-banner .carousel-caption img { filter: grayscale(100%) brightness(500%) contrast(100%); }

#designby a { color: inherit !important; }
#site-footer .social-links { font-size: 2rem; }

#panArticles { transition: all 0.5s ease-in-out;overflow: hidden; }
      
/*********************************************
    OVERRIDES
*********************************************/

/* Navbar toggle for BS4 */
.icon-bar {	width: 22px; height: 2px; background-color: var(--red); display: block; transition: all 0.2s; margin-top: 4px }
.navbar-toggler {  border: none;  background: transparent !important; z-index: 20; position: absolute; top: -45px; right: 0px;  }
.navbar-toggler .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; }
.navbar-toggler .middle-bar { opacity: 0; }
.navbar-toggler .bottom-bar { transform: rotate(-45deg);  transform-origin: 10% 90%; }
.navbar-toggler.collapsed .top-bar { transform: rotate(0); }
.navbar-toggler.collapsed .middle-bar { opacity: 1; }
.navbar-toggler.collapsed .bottom-bar { transform: rotate(0); }

.navbar-nav a { text-transform: uppercase; font-weight: 600; color: inherit !important; }
.navbar-nav a:hover { color: var(--red) !important; }
.navbar-nav .dropdown-menu { background-color: #fff; border-radius: 0px; -webkit-box-shadow: none; box-shadow: none; border: 0px;  }

/* Twitter */
.twitter-timeline { width: 100% !important; }

.form-control { border-radius: 0px; box-shadow: 0px; -webkit-box-shadow: none; height: 50px; outline: 0 !important; box-shadow: none !important; }


.btn:not(.btn-link) { border-radius: 0px; height: 50px; color: #fff; line-height: 2.2rem; }
    .btn:hover:not(.btn-link) { background-color: var(--dk-grey) !important; color: #fff !important; border-color: var(--dk-grey) !important; }
    .input-group .btn { border-radius: 0px; height: 50px; background-color: #fff; color: var(--red);  }

#cookiebar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; }

/* Articles */
.article-listing-item { margin-top: 0px; margin-bottom: 0px; }

/* Colours */
.btn-primary, .badge-primary { background-color: var(--red); border-color: var(--red); }

/* Cards */
.card-header h2 { font-size: inherit; }
.card-header .btn-link { color: var(--red) !important; background: transparent !important; text-decoration: none !important; }

.form-group { position: relative; }

/* Owl */
.owl-carousel .owl-stage { display: flex; }
.owl-carousel .article-listing-item { display: flex; flex: 1 0 auto; height: 100%; }

/* Articles */
.related-articles { position: relative; }
    .related-articles:before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: var(--lt-grey); height: 100%; width: 100vw; z-index: 0; }
    .related-articles .article-listing-item { border-color: #ccc; background-color: rgba(255,255,255,0.3);  }

.article-content p + p .button:first-child { margin-top: 2rem; }

.alert .btn-sm { height: auto; padding: 5px !important; line-height: 1rem !important; }

/*********************************************
    MEDIA QUERIES
*********************************************/

/* Header */ 
@media (min-width: 768px) {
    /* Convenience */
    #site-banner .carousel-caption h1 { font-size: 4rem; }
}

@media(min-width: 992px) {
    /* Layout */
    #site-banner .carousel-item { max-height: calc(100% - 107px); }
    #site-banner.half .carousel-item { height: 500px; max-height: 500px; }

    /* Classes */
    .events-box { position: relative; }
    .events-box article + div { position: absolute; bottom: 15px; right: 15px; }
    .border-bottom-lg { border-bottom: solid 1px var(--lt-grey); }
    .bg-parallax { height: 600px}

    /* Nav */
    .navbar li { margin: 0px 5px; position: relative; }

    .navbar li:nth-child(4) { display: none; }

    /* Scroll to reveal */
    #site-content .img-wrap,#site-content p,#site-content h1,#site-content h2:not(.card h2),#site-content h3,#site-banner .caption, .nav-boxes li { opacity: 0; }
    .come-in { transform: translateY(150px); animation: come-in 0.8s ease forwards; opacity: 0; }
    .come-in:nth-child(1) { animation-delay: 0.2s; }
    .come-in:nth-child(2) { animation-delay: 0.3s; }
    .come-in:nth-child(3) { animation-delay: 0.6s; }
    .come-in:nth-child(4) { animation-delay: 0.8s; }
    .come-in:nth-child(5) { animation-delay: 1s; }
    .come-in:nth-child(6) { animation-delay: 1.2s; }
    .come-in:nth-child(7) { animation-delay: 1.4s; }
    .come-in:nth-child(8) { animation-delay: 1.6s; }
    .come-in:nth-child(9) { animation-delay: 1.8s; }
}

@media(min-width: 1200px) {

    /* Banner */
    #site-banner .carousel-item {
        background-attachment: fixed;
        background-size: 110%;
        background-repeat: no-repeat;
        animation: banner-image-zoom 4s ease-in-out forwards;
    }    
}

/*********************************************
    KEYFRAMES
*********************************************/


@keyframes come-in { 
    to { transform: translateY(0); opacity: 1;}
}

@keyframes banner-image-zoom { 
    from {
        background-size: 200vw auto; 
    }
    to {
        background-size: 120vw auto;
    }

}

@keyframes banner-caption { 
    from {
        transform: translateY(300px);
        opacity: 0;
    }
    to {
        transform: translateY(-50%);
        opacity: 1;
    }
}