/*
 *  VARIABLES
 */
 @import url('https://fonts.googleapis.com/css?family=Oswald|Oxygen|Roboto+Condensed|Open+Sans');

 :root{
    /* COLORS */
    --primary-bg-color:    #e8edec;
    --primary-front-color: rgb(12, 12, 12);
    --grid-cols:           calc(100vw / 250px);
 }

html, body {
    overflow-x:       hidden;
    background-color: var(--primary-bg-color);
    color:            var(--primary-front-color);
    font-family:      'Oswald', sans-serif;
    font-size:        16px;
    padding: 0;
    margin:  0;
}

/* HEADER */

#menu {
    width:   100vw;
    height:  100px;
    display:    grid;
    grid-template-columns: 140px 224px 1fr repeat(4, 120px) 30px;
}

#menu img{
    display: block;
    grid-column: 1;
    grid-row:    1;
    height:       82px;
    padding-left: 10px;
    padding-top:   8px;

}

.empty{
    grid-column: 3;
    grid-row:    1;
}

#nmtitle {
    display:     block;
    align-self: end;
    grid-column: 2;
    grid-row:    1;
    width: 100%;
    color: #223004;
    padding-left: 10px;
    font-family: 'Oswald', sans-serif;
    font-size: 42px;
    text-align: left;
}

#menu a {
    display:    block;
    grid-row: 1;
    margin:     0px 2px;
    height:     calc( 90px - 52px );
    padding-top:   52px;
    padding-left:  12px;
    color: #000;
    border-bottom: 2px solid #7baa9d;
    text-decoration: none;
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.spacing {
    margin-right: 5px;
    font-size: 2em;
}

#menu a:hover {
    background-color: #ff9a04;
    color: #FFF;
    border-bottom: 2px solid #1c202b;
}

/* BODY */


/****************************************************
  GENERIC CUBE BEHAVIOUR
****************************************************/

main {
    /* behaviour */
    display:    grid;
    box-sizing: border-box;
    overflow-x: hidden;
    grid-gap: 10px;
    grid-template-columns: repeat( var(--grid-cols), 1fr );
    /* color elements */
    background-color: var(--primary-bg-color);
    /* styling elements */
    width: 100vw;
    padding: 10px 30px 10px 10px;
    /* text elements */
}

article {
    height: 230px;
    padding: 0px;
    border-radius: 12px;
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}


/* first parameter is columns, second rows */

[class*="two "] {
    grid-column: span 2;
}

[class*=" two"] {
    grid-row: span 2;
    height: 470px;
}

[class*="three "] {
    grid-column: span 3;
}

[class*=" three"] {
    grid-row: span 3;
    height: 710px;
}


/****************************************************
  CUBE SPECIFIC BEHAVIOUR
****************************************************/
/*
article div {
    display: block;
    background-color: rgba(86, 163, 166, 0.4);
    overflow: hidden;
    width: 0;
    height: 100%;
    border-radius: 12px;
}

article:hover {
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-name: slidein;
}
*/
article a {
    display: block;
    visibility: visible;
    width: 70%;
    padding-top: 20px;
    margin: auto;
    color: #FFF;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    text-align: center;
    align-content: center;
}

article a span {
    font-size:   28px;
    line-height: 40px;
    background-color: rgba(86, 163, 166, 0.8);
    padding: 2px 16px;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

article a span:hover {
    background-color: #ff9a04;
}

article:hover a {
    animation-duration: .1s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
    animation-name: linkvisible;
}

@keyframes linkvisible {
    from {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}

@keyframes slidein {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/****************************************************
  RESPONSIVE BEHAVIOUR
****************************************************/


@media (orientation: portrait) {
    :root{
        --grid-cols:  2;
    }

    #menu {
        height:  190px;
        grid-template-columns: 270px 1fr 30px;
    }
    #menu img{
    height:       160px;

}
    #menu a{
        display:    none;
        visibility: hidden;
    }

    #nmtitle {
        padding-left: 12px;
        font-size:    80px;
    }

    article a {
        visibility: visible;
    }

    article:hover a {
        animation-name: none;
    }

    article a span {
        font-size:   42px;
        line-height: 60px;
    }
 }