/*!
  * Add common styles below eg variables, button, headings
*/
/*
* Variables
*/
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&family=Euphoria+Script&display=swap'); 

:root {
    --green: #009e94;
    --blue: #14bcf4;
    --yellow: #ffcd1e;
    --purple: #1e0e2b;
    --heading-font-family: 'Spartan', sans-serif;
    --heading-size: 22px;
    --heading-text-transform: default;
    --body-font-family: 'Spartan', sans-serif;
    --fancy-font: 'georgia', cursive;
}

/*
* Buttons
*/
.tt-button {
    background: var(--purple);
    color: white;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 42px 9px;
    display: inline-block;
    transition: 0.2s ease;
    border: 0;
    cursor: pointer;
}

.tt-button:hover {
    color: white;
    background: var(--green);
}

.tasman-green h3 {
    color: var(--green);
}

.tasman-blue h3 {
    color: var(--blue);
}

.tasman-yellow h3 {
    color: var(--yellow);
}

.tasman-purple h3 {
    color: var(--purple);
}

.slick-prev:hover, .slick-next:hover {
    background: white;
}

.slick-prev, .slick-next {
    background: var(--purple) !important;
    width: 40px!important;
    height: 40px!important;
    /* box-shadow: 2px 2px 0 rgba(0,0,0,0.4); */
    border-radius: 0;
    z-index: 2;
}

.slick-prev:before, .slick-next:before {
    content: '>'!important;
    color: white !important;
    font-family: var(--heading-font-family)!important;
    font-size: 20px!important;
    font-weight: 600;
    line-height: 1;
    transform: translateY(3px)!important;
    display: block;
}

.slick-prev:before {
    content: '<' !important;
}

.slick-prev {
    left: 0px!important;
}

.slick-next {
    right: 0px!important
}

@media(max-width: 1200px) {
    .slick-prev {
        left: 0px!important;
    }

    .slick-next {
        right: 0px!important
    }
}

.tasman-green .slick-prev, .tasman-green .slick-next {
    background: var(--green)!important;
}

.tasman-blue .slick-prev, .tasman-blue .slick-next {
    background: var(--blue)!important;
}

.tasman-yellow .slick-prev, .tasman-yellow .slick-next {
    background: var(--yellow)!important;
}

.tasman-yellow .slick-prev:before, .tasman-yellow .slick-next:before {
    color: black;
}

.tasman-purple .slick-prev, .tasman-purple .slick-next {
    background: var(--purple)!important;
}

.fancy-1 {
    font-family: var(--fancy-font);
    text-transform: unset !important;
    font-weight: normal;
    letter-spacing: -0.02em;
    line-height:1.1;
    font-size:34px!important;
    font-style:italic;
}