:root {
    --primary: #000;
    --secondary: #FFF;
    --grid-gap: 1.5625vw;
    --outer: 7.96875vw;
    --20px: max(1rem, 1.0416666vw);
    --22px: max(1rem, 1.1458333vw);
    --26px: max(1rem, 1.3541666vw);
    --40px: max(1.2rem, 2.0833333vw);
    --57px: max(1.3rem, 2.96875vw);
    --192px: max(3.5rem, 10vw);
}

.post, .page {
	margin: 0;
}

html {
    scroll-behavior: smooth;
}
  
body.home .site-main {
    background: var(--primary);
    color: var(--secondary);
    font-family: "Red Hat Display";
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: var(--grid-gap);
    text-align: center;
    padding: 7.2395833vw 7.96875vw;
}

a, a:hover, a:focus, a:visited {
    color: var(--secondary);
    text-decoration: none;
}

body.home h1 {
    font-family: "Pinyon Script";
    font-weight: 400;
    font-size: var(--192px);
    grid-area: 2/1/2/span 12;
    margin: 0;
    margin-top: -1vw;
    margin-bottom: -4.5vw;
}

body.home h2 {
	font-size: var(--57px);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 25px;
    grid-area: 1/1/1/span 12;
    margin: 0;
}

body.home h3 {
    font-size: var(--26px);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    grid-area:3/1/3/span 12;
    margin: 0;
}

.discover {
    grid-area: 3/11/3/span 2;
    margin-top: 1vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.discover .discover-text {
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

.discover .discover-arrow {
    position: absolute;
    transform: rotate(135deg);
}

.slick-container {
    grid-area:4/1/4/span 7;
    width: 100%;
}

.slick-container .slick-slider {
    width: 100%;
    margin-bottom: 1rem;
}

.slick-container .slick-slider img {
    width: 100%;
}

.counter-container {
    display: flex;
    align-items: center;
}

.counter-container span {
	font-size: var(--22px);
	margin-left: 20px;
	text-transform: uppercase;
	letter-spacing: 5px;
}

.slick-slider-paginator {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.slick-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

.slick-container ul li {
    padding: 1rem;
    border: 1px solid var(--secondary);
    border-radius: 100%;
    display: flex;
    transition: all .3s ease;
}

.slick-container ul li:hover {
    cursor: none;
    transform: scale(1.1);
    transition: all .3s ease;
}

.slick-container ul .prev {
    margin-right: 2rem;
}

.slick-container ul .prev img {
    transform: rotate(180deg);
}

.contact {
    grid-area:4/9/4/span 3;
    font-size: var(--20px);
    align-self: center;
}

.contact h3 {
    font-size: var(--40px);
    letter-spacing: 5px;
    font-weight: 400;
}

footer {
    background: var(--primary);
    color: var(--secondary);
    padding: 2.34375vw var(--57px);
    border-top: 1px solid rgba(255,255,255,.2);
}

footer .site-info {
    display: flex;
    justify-content: space-between;
}

footer .site-info .footer-left {
    display: flex;
}

footer .site-info .nill-logo{
    height: 20px;
    margin-right: 2rem;
    align-self: center;
}

footer .site-info .footer-right a {
    margin-left: 33px;
}

/* Sub Pages */

body.page {
    background: var(--primary);
    color: var(--secondary);
}
  
body.page .site-main {
    padding: 7.2395833vw 7.96875vw;
}
  

/* Media Queries */

@media screen and (max-width: 767.98px) {
    body.home h2 {
        letter-spacing: 10px;
    }

    body.home h3 {
        letter-spacing: 1px;
    }

    .discover {
        grid-area: 3/10/3/span 3;
        margin-top: 2vw;
    }

    .slick-container {
        grid-area: 4/1/4/span 12;
        width: 100%;
        margin-top: 2rem;
    }

    .contact {
        grid-area: 5/1/5/span 12;
        font-size: var(--20px);
        align-self: center;
        margin-top: 2rem;
    }

    .slick-container ul li {
        padding: .5rem;
    }

    footer .site-info {
        display: flex;
        flex-direction: column;
    }

    footer .site-info .footer-right {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
    }

    footer .site-info .footer-right a {
        margin: 0;
    }
}