/**
 * Theme Name: IconDigital2021
 * Theme URI: https://icondigitalmedia.com.au
 * Description: Icon Digital Framework
 * Version: 2.0
 * Author: iconDigital
 * Author URI: https://icondigitalmedia.com.au
 */

/* ------------------------------------
 *** Contents:
 * 1. General CSS
 * 2. Header CSS
 * 3. Nav CSS
 * 4. Hero CSS
 * 5. Services
 * 6. Contact
 * 7. Copyright
 * 8. Other CSS
 * 9. Stripe CSS
 * 10. Media Queries
------------------------------------------------------------------------ */



/* ------------------------------------
General CSS
------------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 1rem 0 !important;
}

*+.uk-margin {
    margin-top: 1rem;
}

a {
    font-weight: 700;
}


.pre-heading-text {
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: #a7a9ac;
}

.leading-paragraph {
    font-size: 1.25rem;
    line-height: 1.5;
}

.ugs__panel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0rem;
}


/* ------------------------------------
Header CSS
------------------------------------------------------------------------ */

@media screen and (min-width: 768px) {
    .tm-navbar .uk-container {
        max-width: 1920px;
        padding: 0px;
    }
}

.navbar-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tm-nav-logo img {
    align-items: center;
    display: flex;
    justify-content: center;
}

.tm-nav-logo .wp-block-image {
    margin: 0;
}

.uk-sticky-placeholder {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ------------------------------------
Nav CSS
------------------------------------------------------------------------ */

@media screen and (min-width: 960px) {
    .navbar-right {
        height: 150px;
}
}
.top-headerbar {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 1.375rem;
    font-weight: 700;
    margin-right: 8rem;
}

.top-headerbar span {
    color: #a7a9ac;
    font-weight: 100;
    padding: 0 32px;
}

.top-headerbar p {
    margin: -5px 0 0 0;
}

.top-headerbar i {
    font-size: 1.75rem;
    margin-right: 0.75rem;
    top: 2px;
    position: relative;
}

.tm-nav {
    height: 80px;
    background: #003e6b;
}

.uk-navbar-nav {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.uk-navbar-nav>li {
    width: 25%;
    text-align: center;
}

.uk-navbar-nav>li>a {
    color: #FFF;
    height: 80px;
    line-height: 80px;
    font-size: 1.25rem;
}

.uk-navbar-nav>li.uk-active>a {
    color: #FFF;
}

.uk-navbar-nav>li:hover>a,
.uk-navbar-nav>li>a:focus,
.uk-navbar-nav>li.uk-open>a {
    color: #d9dcdf;
}

/* ------------------------------------
Hero CSS
------------------------------------------------------------------------ */

.main-hero {
    position: relative;
}

.main-hero-text {
    position: absolute;
    z-index: 2;
    top: 40%;
    bottom: 40%;
    max-height: 100%;
    width: 100%;
}

.main-hero-text h1 {
    color: white;
    width: 100%;
}

/* Responsive live image fix */
@media screen and (max-width: 700px) {
    .main-hero {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .main-hero img {
        min-height: 200px;
        display: table;
        min-width: 1000px !important;
        max-height: 220px;
        margin: auto !important;
        margin-left: -60% !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1180px) {

    .uk-navbar-nav > li > a {
        font-size: 0.75rem;
        padding: 0 5px;
    }


    .top-headerbar span {
        padding: 0px 16px;
    }

    .top-headerbar {
        font-size: 1.25rem;
        margin-right: 1rem;
    }

}

/* ------------------
Services Section
------------------------------------ */

#services {
    text-align: center;
}

#services .uk-panel-box {
    border: 0;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 15%);
}

/* ------------------
Contact Section
------------------------------------ */

#contact .stripe {
    padding-top: 1rem;
}

#contact .stripe-content {
    position: relative;
    top: 64px;
}

#contact .uk-panel {
    background: #FFF;
    padding: 64px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 15%);
}

.contact-details {
    font-size: 1.75rem;
}

.contact-details span {
    font-size: 1.25rem;
}

.contact-details i {
    font-size: 2rem;
    margin-right: 1rem;
    float: left;
    width: 32px;
    text-align: center;
}


/* ------------------
Copyright Section
------------------------------------ */

#copyright-footer {
    /*text-align: center;*/
    font-size: 14px;
    padding: 128px 0px;
    background: #003e6b;
    color: #FFF;
}

#copyright-footer p {
    margin: 0 0 10px 0;
    text-transform: uppercase;
    text-align: center;
    font-weight: 100;
}

#copyright-footer a {
    color: #FFF;
}

.copyright-content {
    display: flex;
    height: 100%;
    align-items: flex-end;
}





/* ------------------------------------
Other CSS
------------------------------------------------------------------------ */


.uk-offcanvas-bar {
    background: #003e6b;
}



.uk-nav.uk-nav-offcanvas {
    height: 100%;
}

.uk-nav-offcanvas > li {
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #003e6b;
    border-bottom: 1px solid #002e4e;
    box-sizing: border-box;
}

.uk-nav-offcanvas > li > a {
    background: #003e6b;
    color: #FFF;
    text-align: center;
}




/* ------------------------------------
*
*
* STRIPE CSS 
*
*
------------------------------------------------------------------------ */

.fixed-image {
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: 50% 50% !important;
}

.image-side {
    background-position: center center;
    background-size: cover;
    max-height: 690px;
    height: 100vh;
}

.stripe {
    border-bottom: 1px solid #dfdfdf;
    position: relative;
}

/* =-=-=-= Stripe WHITE Styling =-=-=-= */
.stripe.white {
    background-color: #fff;
    color: #282425;
    border-bottom: 0px !important;
}

.stripe.white h1,
.stripe.white h2,
.stripe.white h3,
.stripe.white h4,
.stripe.white h5 {
    color: #003e6b;
}

/*.stripe.white a { color: #333; }*/

/* =-=-=-= Stripe PRIMARY Styling =-=-=-= */
.stripe.primary {
    background-color: #003e6b;
    color: #FFFFFF;
    border-bottom: 0px !important;
}

.stripe.primary h1,
.stripe.primary h2,
.stripe.primary h3,
.stripe.primary h4,
.stripe.primary h5 {
    color: #FFFFFF;
}

.stripe.primary a {
    color: #FFFFFF;
}

/* =-=-=-= Stripe SECONDARY Styling =-=-=-= */
.stripe.secondary {
    background-color: #a7a9ac;
    color: #FFFFFF;
    border-bottom: 0px !important;
}

.stripe.secondary h1,
.stripe.secondary h2,
.stripe.secondary h3,
.stripe.secondary h4,
.stripe.secondary h5 {
    color: #FFFFFF;
}

.stripe.secondary a {
    color: #FFFFFF;
}

/* =-=-=-= Stripe TERTIARY Styling =-=-=-= */
.stripe.tertiary {
    background-color: #282425;
    color: #FFFFFF;
    border-bottom: 0px !important;
}

.stripe.tertiary h1,
.stripe.tertiary h2,
.stripe.tertiary h3,
.stripe.tertiary h4,
.stripe.tertiary h5 {
    color: #FFFFFF;
}

.stripe.tertiary a {
    color: #FFFFFF;
}

/* =-=-=-= Stripe DARK Styling =-=-=-= */
.stripe.dark {
    background-color: #282425;
    color: #FFFFFF;
    border-bottom: 0px !important;
}

.stripe.dark h1,
.stripe.dark h2,
.stripe.dark h3,
.stripe.dark h4,
.stripe.dark h5 {
    color: #FFFFFF;
}

.stripe.dark a {
    color: #FFFFFF;
}

/* =-=-=-= Stripe LIGHT Styling =-=-=-= */
.stripe.light {
    background-color: #f0f0f0;
    color: #282425;
    border-bottom: 0px !important;
}

.stripe.light h1,
.stripe.light h2,
.stripe.light h3,
.stripe.light h4,
.stripe.light h5 {
    color: #003e6b;
}

/*.stripe.light a { color: #222; }*/

/* =-=-=-= Stripe GRADIENT Styling =-=-=-= */
.stripe.gradient {
    background: #282425;
    background: -webkit-linear-gradient(left, #282425, #ff1d2e, #ff4c1a);
    background: -moz-linear-gradient(left, #282425, #ff1d2e, #ff4c1a);
    background: -ms-linear-gradient(left, #282425, #ff1d2e, #ff4c1a);
    background: -o-linear-gradient(left, #282425, #ff1d2e, #ff4c1a);
    background: linear-gradient(left, #2824256, #ff1d2e, #ff4c1a);
    color: #FFFFFF;
    border-bottom: 0px !important;
}

.stripe.gradient h1,
.stripe.gradient h2,
.stripe.gradient h3,
.stripe.gradient h4,
.stripe.gradient h5 {
    color: #FFFFFF;
}

.stripe.gradient a {
    color: #FFFFFF;
}

.white-text h1,
.white-text h2,
.white-text h3,
.white-text h4,
.white-text h5,
.white-text p,
.white-text li,
.white-text a {
    color: #FFFFFF;
}

.stripe.zero-padding {
    padding: 0px;
}

.stripe.thin-padding {
    padding: 32px 0px;
}

.stripe.padding {
    padding: 64px 0px;
}

.stripe.thick-padding {
    padding: 128px 0px;
}

.stripe.jumbo-padding {
    padding: 256px 0px;
}

.uk-container.uk-container-center.narrow-width {
    max-width: 960px;
}

@media screen and (min-width: 1200px) {}

@media screen and (min-width: 960px) and (max-width: 1200px) {}

@media screen and (min-width: 768px) and (max-width: 960px) {}

@media screen and (max-width: 768px) {
    .stripe.zero-padding {
        padding: 0px;
    }

    .stripe.thin-padding {
        padding: 15px 0px;
    }

    .stripe.padding {
        padding: 30px 0px;
    }

    .stripe.thick-padding {
        padding: 45px 0px;
    }

    .stripe.jumbo-padding {
        padding: 60px 0px;
    }
}

/* ------------------------------------
*
* END STRIPE CSS
*
------------------------------------------------------------------------ */




/* Full Desktop and up */
@media screen and (min-width: 1360px) {}

/* Small Laptop */
@media screen and (min-width: 1180px) and (max-width: 1360px) {}

/* Tablet Landscape */
@media screen and (min-width: 960px) and (max-width: 1180px) {}

/* Tablet Portrait */
@media screen and (min-width: 768px) and (max-width: 960px) {
    .ugs__panel {
        padding: 32px 8px;
    }
}

/* Phone */
@media screen and (max-width: 768px) {
    #services .uk-panel-box {
        max-width: 480px !important;
        margin: auto;
    }

    #contact .uk-panel {
        padding: 32px;
    }

    .frm_button_submit {
        font-size: 16px !important;
    }

    .ugs__panel {
        padding: 25px;
    }

    .contact-details {
        font-size: 1.25rem;
    }

    #copyright-footer img {
        text-align: center;
        margin-bottom: 20px;
    }
    
    #copyright-footer p {
        font-size: 0.75rem;
    }
    .copyright-content p span {
        padding: 0px 16px;
    }
    
    .copyright-content p span {
        visibility: hidden;
        display: block;
    }
    
    #copyright-footer {
        text-align: center;
    }
    
    .copyright-content {
        display: block;
    }
}




/* Responsive Headings */
@media screen and (max-width: 1360px) {

    h1,
    .uk-h1 {
        font-size: 36px;
        line-height: 44px;
    }

    h2,
    .uk-h2 {
        font-size: 30px;
        line-height: 38px;
    }

    h3,
    .uk-h3 {
        font-size: 26px;
        line-height: 32px;
    }

    h4,
    .uk-h4 {
        font-size: 20px;
        line-height: 24px;
    }

    h5,
    .uk-h5 {
        font-size: 16px;
        line-height: 20px;
    }
    .leading-paragraph {
        font-size: 1rem;
    }
}