/*General presets*/
:root {
    --corporate-100: rgb(174, 189, 55); /*Full pea green*/
    --corporate-75: rgba(174, 189, 55, .75);
    --corporate-50: rgba(174, 189, 55, .5);
    --corporate-25: rgba(174, 189, 55, .25);
    --corporate-trim: rgb(6,6,5); /*Almost black*/
    --menu-height: 60px; /*used in body and .menu*/
    font-size: 18px;
}

@font-face {
    font-family: 'Geologica';
    /*font-weight: 400;*/
    src: url('../assets/fonts/Geologica-Regular.woff2') format('woff2'),
         url('../assets/fonts/Geologica-Regular.woff') format('woff');
}

*{
    box-sizing: border-box;
    font-family: 'Geologica', arial, "liberation sans", helvetica, verdana, sans-serif;
    margin: 0px;
    padding: 0px;
}

body {
    margin-top: var(--menu-height);
    background-color: rgba(255, 255, 240, .25); /*Ivory*/
}

/*the content grid*/
.content-grid {
    display: grid;
    grid-template-columns: 12.5% [content-start] 1fr [content-end] 12.5%;
    margin-bottom: .5rem;
}

.content-grid > * {
    grid-column: content;
}

/*Postioning  of the menu and the banner*/
.top-strip{
    /*position: relative;*/
    display: flex;
    gap:1rem;
    /*top: 0px;*/
    height: 100px;
    padding-bottom: .75rem;
    margin-bottom: .75rem;
/*    z-index: 1;*/
    border-bottom: solid 3px rgb(83,104,114);
    background-color: rgba(255, 255, 240,.25); /*Ivory*/
}

.page-header {
    flex-grow: 1;
    padding-top: 1rem;
    min-width: 0;
    text-align: left;

}

.page-header h1 {
    margin-bottom: 0;
}

.page-icon {
    flex-grow: 1;
    object-fit: contain;
    padding-top: .5rem;
    min-width: 0;
    text-align: right;
}

.canz-logo {
    height:100%;
}

/*The page footer styling*/
.page-footer {
    margin-top: 2rem;
    border-top: solid 3px rgb(83,104,114);
}

.s_block {
    display: block;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    overflow: hidden;
}

.contact-details {
    margin: 1rem auto;
    float: left;
}
.contact-details p {
    font-size: 1rem;
    margin-bottom: 0;
}

.contact-details h3 {
    margin-bottom: .2rem;
}
.canz {
    margin-top: 1rem;
    float: right;
    width: 35%;
    min-width: 300px;
}

.canz img {
    width: 100%;
}

@media screen and (max-width: 630px) {
    .canz-logo {
        height:70%;
    }
}
/*scaling the font of the page header for smaller screens*/
@media screen and (max-width: 1024px) {
    /*.page-header {
        text-align: center;
    }
    .page-header h1{
        font-size: 1.8rem;
    }*/
    .content-grid {
        grid-template-columns: 5% [content-start] 1fr [content-end] 5%;
    } 
    

}

@media screen and (max-width: 800px) {
    .page-header {
        text-align: center;
    }  
    .page-header h1 {
    font-size: 1.6rem;
    }
    .content-grid {
        grid-template-columns: 2% [content-start] 1fr [content-end] 2%;
    }
    
    /*out of context but handy for moving things */
    .float-none {
        float: none;
    }
}

p {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: .75rem;
/*    color: rgb(83,104,114); */
}
h1 {
    font-size: 2rem;
    font-weight: 600;
}

h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

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

h1, h2, h3 {
    margin-bottom: 1rem;
}

.bold {
    font-weight: 600;
}

.indent {
    margin-left: 1.5rem;
}

.italic {
    font-style: italic;
}

/*image styling */
.aside-std-img {
    object-fit: contain;
    width: 25vw;
    min-width: 15rem;
}

.aside-medium-img {
    object-fit: contain;
    width: 20vw;
    min-width: 12rem;
    max-width: 15rem;
}

.aside-left {
    float: left;
    margin: .5rem 1.5rem .5rem 0;
}

.aside-right {
    float: right;
    margin: .5rem  1rem .5rem  1.5rem ;
}

.aside-small-img {
    width: 100px;
}

/*Effect for images etc*/

.std-shadow {
    box-shadow: 10px 10px 10px lightgrey;
}

.std-radius {
    border-radius: 25px;
}

/* adjusment for small screens*/
@media screen and (max-width: 800px) {
        /*out of context but handy for moving things */
    .float-none {
        float: none;
    }
}

/*Styles for Testimonials page*/
.t-words {
    margin-left: 2rem;
    margin-right: 2rem;
}

.testimonial {
    font-style: italic;
}

.given-by {
    font-stretch: normal;
    font-weight: 700;
    color: black;
}

/*miscellaneous stugg*/

/*A little separator - apply to  a div between thiongs you want apart
- see the testimonials page for examples*/

.separator {
    display: block;
    border-bottom: 5px solid var(--hb_backg);
    width: 33%;
    margin: 0 auto 1rem;
}