/************************************************
    FOXPOND CONSTRUCTIONS VERSION 3
    DEVELOPED 10/05/2022
    Justin Kercher / Apollo Internet Media

    Colour Ref: 

    Orange:     #ff9900;
    Dk Blue:    #003366;
************************************************/

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

:root {
   --dk-blue: #003366;
   --orange:  #f49200
}

/************************************************
    CONVENIENCE
************************************************/
body { font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 400; overflow-x: hidden; }

h1, h2, h3 { text-transform: uppercase; font-weight: 700; margin-bottom: 0px; }
    h1 > small { display: block; font-size: 50%; }


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

.bg, .bg a, .bg p, .bg h1, .bg h2, .bg h3 { color: #fff; }
.bg.bg-orange { background-color: var(--orange); }
.bg.bg-dk-blue { background-color: var(--dk-blue); }

.button { display: inline-block; padding: 15px 30px; color: #fff; font-weight: 700; text-decoration: none !important; border-collapse: collapse; border: 0px; color: #fff !important; 
          background-color: var(--orange); transition: all 0.5s ease-in-out; }
    .bg-orange .button, .button:hover { background-color: var(--dk-blue); color: #fff !important; }
    .bg-orange .button:hover { background-color: #ffffff; color: var(--dk-blue) !important; }


/* Box links */
.box-links a { display: block; position: relative; overflow: hidden; }
    .box-links a > img { display: block; transition: all 0.5s ease-in-out; width: 100%; }
    .box-links a > span { position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 15px; color: #fff; text-shadow: 0px 0px 10px rgba(0,0,0,0.3); font-weight: 700; }

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

/************************************************
    LAYOUT
************************************************/
#site-header { }
    #site-header #site-logo { display: block; max-width: 300px; }

#xs-bar { }
    #xs-bar a { display: inline-block; margin: 0px 15px; text-decoration: none; }

#site-banner { background-color: #000; }
    #site-banner hr { background-color: #fff; }
    #site-banner .carousel-inner { overflow: visible;}
    
    #site-banner .banner-image { opacity: 0; }
    #site-banner .banner-image, #site-banner .banner-image img { width: 100%; }

    #site-banner article { color: #fff; position: relative; z-index: 2; }
    #site-banner aside { font-style: italic; background-color: #eaeaea; color: #333; position: relative; z-index: 2; }
        
        #site-banner aside p { position: relative; padding-left: 50px; }
        #site-banner aside p > i { position: absolute; top: 5px; left: 0px;  }

#site-content { }

#site-nav #menu .navbar-nav:first-child .nav-link { color: var(--dk-blue); font-weight: 700; margin: 0px 10px; }
    #site-nav .button { width: 100%; text-align: center; margin: 5px 0px;  }

#site-footer { }

    #site-footer #site-accreditations { }
        #site-footer #site-accreditations a { display: inline-block; max-width: 150px;  }
            #site-footer #site-accreditations a img { max-width: 100%; }

    #site-footer #contact-details a { display: block; }

    #site-footer .bg-dk-blue p { position: relative; padding-left: 30px; }
        #site-footer .bg-dk-blue p i { position: absolute; left: 0px; top: 5px; }
    
    

/************************************************
    OVERRIDES
************************************************/

.navbar { padding: 0px; }
.carousel-indicators li { background-color: #000; width: 10px; height: 10px; border-radius: 50%; }

/* Navbar toggle for BS4 */
.icon-bar {	width: 22px; height: 2px; background-color: #B6B6B6; display: block; transition: all 0.2s; margin-top: 4px }
.navbar-toggler {  border: none;  background: transparent !important; position: absolute; top: -36px; 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); }

/* form */
.form-control { border-radius: 0px; height: 50px; box-shadow: none; -webkit-box-shadow: none;  }

/* Modal */
.modal-header { background-color: var(--dk-blue); color: #fff; }
    .modal-header .close { color: #fff; }
.modal-content h2 { font-size: 1.4rem; }


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

@media (min-width: 576px) { 

}

@media (min-width: 768px) {
    /* Banner */
    #site-banner article:before , #site-banner aside:before { display: block; position: absolute; content: ""; width: 100vw; height: 100%; top: 0px; left: 50%; transform: translateX(-50%); z-index: -1; }
    #site-banner article:before { background-color: #000000; }
    #site-banner aside:before { background-color: #eaeaea; }
}

@media (min-width: 992px) {
    
    /* Navbar */
    #site-nav .button { width: 150px; margin: 0px 15px; }

    /* Banner */
    #site-banner .banner-image { border-radius: 50%; position: absolute; right: 30px; top: 30px; bottom: 30px; width: 400px; height: 400px; z-index: 3; overflow: hidden; }
        #site-banner .banner-image img { min-height: 100%; min-width: 100%; width: auto; position: absolute; right: 0px; bottom: 0px; }
    #site-banner article:before , #site-banner aside:before { display: block; position: absolute; content: ""; width: 100vw; height: 100%; top: 0px; left: 50%; transform: translateX(-50%); z-index: -1; }
    #site-banner article:before { background-color: #000000; }
    #site-banner aside:before { background-color: #eaeaea; }
    #site-banner article > div, #site-banner aside > div { max-width: 56% }

    /* Footer */
    #site-footer #site-accreditations a { max-width: none;}
}

@media (min-width: 1200px) {


    /* Banner */
    #site-banner .banner-image { width: 420px; height: 420px;  }
    #site-banner article > div, #site-banner aside > div { max-width: 56%; }
}



.scale-in-center, .carousel-item.active .banner-image {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-5-11 11:58:14
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}