/*
colour schemes
    background
    primary colour (con buttons) 
    secondary colour (hover con buttons) 

buttons 
    for hidden buttons (none coloured and hovers grey) - w3.button
    for custom button (coloured and hovers colour) - w3.button w3.round con 
    for nav buttons (non coloured and hover colour) - w3.button half 
    for button w hover shadow - w3.btn 
    
*/


/* VARIABLES */
:root {
    --backround: #fcd4d4;
    --primary: #f9a6a6;
    --secondary: #fcd4d4;
}


/* COLOURS */
body,
#nav,
#mySidebar {
    background-color: var(--backround);
}


/* FONTS */
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Architects Daughter", "Montserrat", "Helvetica", sans-serif;
    font-weight: 600;
    letter-spacing: 6%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800;
}


/* BUTTONS */
.con,
.navbar {
    background-color: var(--primary);
    letter-spacing: 2px;
}

.con:hover {
    background-color: var(--secondary) !important;
}

.w3-button:hover {
    background-color: var(--primary) !important;
}

.half:hover {
    background-color: var(--backround) !important;
}

.imag {
    display: block;
    max-width: 100%;
    min-width: 100%;
    object-fit: cover;
}

/* LOGO */
.brandlogo {
    height: 180px;
    width: 100%;
    display: block;
    max-width: 100%;
    min-width: 100%;
    object-fit: contain;
    flex-shrink: 0;
}

.custombar {
    height: 160px !important;
}

.imagescroll {
    object-fit: cover;
}

/* CARDS */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-link:hover {
    text-decoration: none;
}


@media (max-width:900px) {
    .stack-small {
        flex-direction: column !important;
        justify-content: space-around !important;
    }
}

.mySlides {
    display: none
}

.w3-left,
.w3-right,
.w3-badge {
    cursor: pointer
}

.w3-badge {
    height: 13px;
    width: 13px;
    padding: 0
}


html {
    scroll-behavior: smooth;
}

div.sticky {
    position: sticky;
    top: 0;
    z-index: 1;
}


.hero {
  background-image: url(../img/shnuck/hero.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  height: 350px;
}

.w3-row-padding {
    display: flex;
    flex-wrap: wrap;
}

.card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#contactbuttonsbig a {
    margin: 5px;
    width: 100%;
}