:root {

    --font-size-xlarge: 50px;
    --font-size-large: 35px;
    --font-size-medium: 25px;
    --font-size-small: 20px;
    --font-size-xsmall: 18px;

    --spacer-xsmall: 5px;
    --spacer-small: 10px;
    --spacer-medium: 20px;
    --spacer-large: 30px;
    --spacer-xlarge: 40px;
    --spacer-xxlarge: 80px;
}








h1 {
    letter-spacing: 3px;
}










div.btnrow > div:nth-child(1) {
    width: 150px;
}

div.btnrow > div:nth-child(2) a {
    font-size: var(--font-size-small);
}





/*
======================================================================
STARTER
=====================================================================
*/


@media (min-width: 960px) {
    div.starter {
        height: 100vh;
        max-height: 842px;
        flex-direction: row;
    }
    div.starter > div {
        width: 50%;
        height: 100% !important;
    }
    div.starter > div.left {
        z-index: 1000;
        order: 0;
        background-color: var(--color-lightgray);
    }


    div.starter > div.right div.content > div {
        vertical-align: bottom;
        padding-bottom: 28%;
    }
}

@media (min-width: 960px) and (max-height: 842px) {
    div.starter {
        height: 842px;        
        max-height: 842px;
        flex-direction: row;
    }
}



div.starter.home h1 > span {
    font-size: 45px;
}
div.starter.home h1 > span:nth-child(1) {
    font-size: 24px;
}
div.starter.home h1 > span:nth-last-child(1) {
    font-size: 22px;
}




/* home */
div.starter.home > div.left ul > li {
    display: inline-block;
    border-left: 1px solid var(--color-gray);
}
div.starter.home > div.left ul > li:nth-child(1) {
    border-left: none;
}




@media (min-width: 960px) {
    div.starter.home > div.right {
        background-image: url('/img/starters/cow-large.jpg');
    }
    div.starter.contact > div.right {
        background-position: center center;
        background-image: url('/img/starters/contact-large.jpg');
    }
}



/*
======================================================================
BANNER
=====================================================================
*/

@media (min-width: 960px) {
    div.banner {
        height: 100vh;
        max-height: 450px;
        flex-direction: row;
    }
    div.banner > div {
        width: 50%;
        height: 100% !important;
    }


    div.banner div.content > div > div.wrapper {
        padding-left: var(--spacer-xlarge);
    }


}







/*
======================================================================
TWO COLS
=====================================================================
*/
@media (min-width: 960px) {

    div.two-cols.large {
        display: table;
        width: 100%;
    }
    div.two-cols.large > div {
        display: table-cell;
        vertical-align: top;
        width: 50%;
    }
    div.two-cols.large > div:nth-child(1) {
        margin-bottom: 0;
        padding-right: var(--spacer-xlarge);
    }
    div.two-cols.large > div:nth-child(2) {
        margin-bottom: 0;
        padding-left: var(--spacer-xlarge);
    }
}
div.two-cols:not(.large) {
    display: table;
    width: 100%;
}
div.two-cols:not(.large) > div {
    display: table-cell;
    vertical-align: top;
    width: 50%;
}
div.two-cols:not(.large) > div:nth-child(1) {
    margin-bottom: 0;
    padding-right: var(--spacer-xlarge);
}
div.two-cols:not(.large) > div:nth-child(2) {
    margin-bottom: 0;
    padding-left: var(--spacer-xlarge);
}





/*
======================================================================
TILES
=====================================================================
*/
div.tileWrap {
    flex-direction: row;
}
div.tileWrap > div {
    width: calc( (100% - var(--spacer-xlarge) - var(--spacer-xlarge)) / 3 );
    max-height: none !important;
}
div.tileWrap > div:nth-child(2) {
    margin: 0 var(--spacer-xlarge);
}

@media (min-width: 960px) {
    div.tileWrap > div {
        width: calc( (100% - var(--spacer-xxlarge) - var(--spacer-xxlarge)) / 3 );
    }
    div.tileWrap > div:nth-child(2) {
        margin: 0 var(--spacer-xxlarge);
    }
}




/*
======================================================================
NEWS
=====================================================================
*/
div.newsWrap {
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
div.newsWrap > div {
    width: calc(50% - var(--spacer-xlarge));
}
div.newsWrap > div:nth-child(2) {
    margin-top: 0;
}
div.newsWrap > div:nth-child(2n+1) {
    margin-right: var(--spacer-xlarge);
}
div.newsWrap > div:nth-child(2n+2) {
    margin-left: var(--spacer-xlarge);
}



/*
======================================================================
CHEESE
=====================================================================
*/

div#cheeseCat {
    top: 14px;
}

div#cheeseThumbs div.item {
    width: calc((100% / 3) - (var(--spacer-xsmall) * 2));
}
@media (min-width: 958px) {
    div#cheeseThumbs div.item {
        width: calc((100% / 4) - (var(--spacer-xsmall) * 2));
    }
}




/*
======================================================================
PRODUCTS
=====================================================================
*/

div.products {
    display: table;
    width: 100%;
}
div.products > div {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}
div.products > div:nth-child(1) {
    padding: 0 var(--spacer-xxlarge) 0 0;
}


div.products h1 {
    color: var(--color-primary);
}



div.button {
    position: relative;
    z-index: 1;
    margin: -35px 0 0 auto;
}





/*
======================================================================
HISTORY
=====================================================================
*/
div#historyItems > div.items {
    padding: 40px 80px;
}

div#historyItems p {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;

    padding-right: 40px;
    background-color: var(--color-primary);
}





div#historyItems .prev,
div#historyItems .next {
    display: none;
}



div#historyItems ul.slick-dots {
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    width: 100px;

    border-left: 1px solid var(--color-white);
    margin: 0;
    padding: 0;
}
div#historyItems ul.slick-dots li {
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
    margin-left: -5px;
}
div#historyItems ul.slick-dots li:nth-child(1) {
    margin-top: -10px !important;
}
div#historyItems ul.slick-dots li:nth-last-child(1) {
    margin-bottom: -10px !important;
}
div#historyItems ul.slick-dots a {
    color: var(--color-white);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
div#historyItems ul.slick-dots a i {
    display: inline-block;
    vertical-align: middle;
    font-size: 9px;
    margin-right: 40px;
}

div#historyItems ul.slick-dots li.slick-active a {
    color: var(--color-secondary);
}




/*
======================================================================
TEMPLATE
=====================================================================
*/





/* Header Logo */
@media (min-width: 960px) {
    header div.logo {
        width: 290px;
    }
}



/* Header Hamburger */
header div.hamburger {
    display: none;
}



/* Header Nav - head */
header nav#head {
    display: table-cell;
    position: relative;
    width: auto;
    text-align: right;
}
header nav#head a {
    display: inline-block;
    padding: 0;
    border: none;
    background-color: transparent;
    margin-right: 20px;
}
header nav#head a:nth-last-child(1) {
    border-bottom: none;
}
header nav#head a:hover,
header nav#head a:active {
    background-color: transparent;
    color: var(--color-secondary);
}







/* Header Nav - Lan */
header nav#lan a {
    border-right: 1px solid var(--color-primary);
}



/* Header Socials */
header nav#socials {
    display: table-cell;
    width: 85px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    border-left: 1px solid var(--color-primary);
}
header nav#socials a {
    display: inline-block;
    margin: 0 3px;
}
header nav#socials a:nth-child(1) {
    margin-left: 0;
}
header nav#socials a:nth-last-child(1) {
    margin-right: 0;
}







/* Main */
main > section.ecru.halfway {
    background-color: var(--color-ecru);
    background: linear-gradient(90deg, var(--color-white) 0%, var(--color-white) calc(50% + var(--spacer-xlarge)), var(--color-ecru) calc(50% + var(--spacer-xlarge)), var(--color-ecru) 100%);
}






/* Footer */
footer {
    padding: 75px 0 65px 0;
}
footer > .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}







/* Footer - logo */
footer div.logo {
    width: 30%;
    flex-shrink: 1;
}
footer div.logo img {
    max-width: 300px;
}


/* Footer - Contact */
footer div.contact {
    width: 275px;
    flex-shrink: 0;
    margin: 0 40px;
}




/* Footer - Socials */
footer div.socials a {
    flex-shrink: 0;
    margin-left: 30px;
}