@import url('https://fonts.googleapis.com/css?family=Lato:300,700|Squada+One|Barlow+Condensed');
@import url('https://fonts.googleapis.com/css?family=Nunito:300,700');
@import url("https://use.typekit.net/ovd2yhb.css");


/*
-------------------------------------------------------------------
Globals
-------------------------------------------------------------------
*/

:root
{
    --title-font: 'Industry';
    --body-font: 'Nunito';
    --valeRed: #C8181A;
    --valeRedComponent:200, 24, 26;
}

@media screen and (orientation: landscape)
{
    :root
    {
        --landscape-width: 900px;
        --vertical-margin: 3em;
        --margin: 1em;
        --padding: 1em;
        --fontBasis: 1.2em;  
    }
}
@media screen and (orientation: portrait)
{
    :root
    {
        --vertical-margin: 10vw;
        --margin: 3vw;
        --padding: 3vw;
        --fontBasis: calc(4vw + .1vmin);      
    }    
}

a
{
    text-decoration: none;
    color: var(--valeRed);
}

/*
-------------------------------------------------------------------
General styles
-------------------------------------------------------------------
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}



html
{
    background-color: black;
    font-family: var(--body-font);
    font-size: var(--fontBasis);
}

body
{
    background-color: black;
    color: white;
}


p
{
    font-size: var(--fontBasis);
    line-height: calc(var(--fontBasis) * 1.5);
    margin-bottom: var(--margin);
}

h1
{
    font-family: var(--title-font);
    font-weight: bold;
    font-size: calc(var(--fontBasis) * 2);
    margin-top: var(--margin);
    margin-bottom: var(--margin);
}

.splitter
{
    width: 100%;
    border-style: solid;
    border-width: calc(var(--margin) / 2);
    margin-top: var(--margin);
    margin-bottom: var(--margin);
}

.redSplitter
{
    border-color: var(--valeRed);    
}

.whiteSplitter
{
    border-color: white;
}

.red
{
    color: var(--valeRed);
}

/*
-------------------------------------------------------------------
Panel styles
-------------------------------------------------------------------
*/

.Panel
{
    box-sizing: border-box;
    margin-bottom: var(--vertical-margin);
    padding: var(--padding);
}

@media screen and (orientation: landscape)
{
    .Panel
    {
        width: var(--landscape-width);
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (orientation: portrait)
{
    .Panel
    {
        width: 100%;
    }    
}



/*
-------------------------------------------------------------------
Block grid styles
-------------------------------------------------------------------
*/

.blockGrid
{
    display: grid;
    box-sizing: border-box;
    gap: var(--margin);
    font-family: var(--title-font);    
    font-weight: bold;
}

.blockGrid > div
{
    width: 100%;
    height: 100%;
    display: flex;
    cursor: pointer;
    transition: background-color 0.25s ease;
    background-color: grey;
}

.blockGrid > div a
{
    transition: color 0.25s ease;
    color: white;
}

.blockGrid > div:hover
{
    background-color: white !important;
    color: var(--valeRed) !important;
}

.blockGrid > div:hover a
{
    color: var(--valeRed) !important;
}


.centredContent > div
{
    align-items: center;    
    justify-content: center;
    text-align: center;
}

@media screen and (orientation: landscape)
{
    .blockGrid
    {
        grid-template-columns: repeat(4, 1fr);
    }

    .onlyTwoBoxes > div
    {
        grid-area: span 1 / span 2;   
    }

    .blockGrid > div
    {
        height: calc(var(--landscape-width) / 4.68);
    }

    .blockGrid > div:nth-child(2n + 1)
    {
        background-color: var(--valeRed);
    }
}

@media screen and (orientation: portrait)
{
    .blockGrid
    {
        grid-template-columns: repeat(2, 1fr);   
    }

    .blockGrid > div
    {
        height: 43.7vw;
    }

    .blockGrid > div:nth-child(4n + 1)
    {
        background-color: var(--valeRed);
    }
    
    .blockGrid > div:nth-child(4n + 4)
    {
        background-color: var(--valeRed);
    }    
}


/* 
----------------------------------------------
Gallery styles
----------------------------------------------
*/

.swiper-container
{
    position: relative;
}

#overlay_bottom
{
    bottom: 0;
}

#overlay_top
{
    top: 0;
}

.swiper-container
{
    margin: 0;
}

.swiper-slide
{
    height: 100%;
    width: auto;
}

.swiper-slide > img
{
    width : auto;
    height: 100%;
    display: inline-block;
}

@media screen and (orientation: landscape)
{
    .swiper-container
    {
        height: 600px;
    }
}

@media screen and (orientation: portrait)
{
    .swiper-container
    {
        height: 110vw;
    }
}

/* 
----------------------------------------------
Contact panel styles
----------------------------------------------
*/

#contactPanel
{
    width: 100%;
    background-color: #202020;
    margin-bottom: 0;
}

#contactPanel p
{
    text-align: center;
    font-size: calc(var(--fontBasis) / 2);
    color: lightgray;
    padding-bottom: var(--margin);
}

#contactList
{
    padding-top: calc(var(--margin));
    padding-bottom: calc(var(--margin));
    display: flex;
    align-content: center;
    justify-content: center;
}

@media screen and (orientation: landscape)
{
    #contactList
    {
        width: var(--landscape-width);
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (orientation: portrait)
{
    #contactList
    {
        width: 100%;
    }
}

.contactIcon
{
    height: 2em;
    width: 2em;
    padding-left: 2em;
    padding-right: 2em;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#emailContactLink { background-image: url("img/email_grey.png")}
#phoneContactLink { background-image: url("img/phone_grey.png")}
#fbLink { background-image: url("img/fb_grey.png")}
#twLink { background-image: url("img/twitter_grey.png")}
#igLink { background-image: url("img/instagram_grey.png")}
#ytLink { background-image: url("img/youtube_gray.png")}

/*
----------------------------------------------
Contact Us panel styles
----------------------------------------------
*/


#contactFormPanel
{
    background-color: var(--valeRed);
}

#contactForm > h1
{
    grid-column-start: 2;
    padding: 0;
    margin: 0;
}

#contactForm
{
    display: grid;
    grid-template-columns: 20% 75%;
    gap: var(--margin);
    align-items: center;
}

#contactForm > div
{
    text-align: right;
    padding: var(--padding);
}

#contactForm > div:first-of-type
{
    grid-column: 2;
    text-align: left;
    margin: 0;
    padding: 0;
}

#contactForm a
{
    color: white;
    font-weight: bold;
}

#contactForm a:hover
{
    color: black;
}

#contactForm > input
{
    inset: none;
    border: none;
    background-color: black;
    color: white;
    font-size: var(--font-basis);
    padding: var(--padding);
}

#contactForm > #OKBtn
{
    grid-column-start: 2;
    text-align: center;
    font-family: var(--title-font);
    font-size: calc(var(--fontBasis) * 2);
    font-weight: bold;
    padding: 0;
    background-color: white;
    color: var(--valeRed);
    cursor: pointer;
}

#contactForm > #OKBtn:hover
{
    background-color: black;
    color: white;
}