/*Tablet*/
@media only screen and (min-width: 768px) and (max-width: 1280px){
    
    .header-container {
        display: grid;
        grid-template-areas:
            "header header"
            "sub-header sub-header"
            "menu menu"
            "welkom welkom";
    }
    
    .main-container {
        display: grid;
        grid-template-areas:
            "main main main right";
    }
    
    
/*************    
    HEADER
*************/
    
    .header {
        padding: 0px 2.5%;
    }
    
    .header h1 {
        font-size: 20px;
        font-weight: 300;
    }

    .menutoggle {
        margin-left: auto;
    }

    .menutoggle a {
        text-decoration: none;
        font-size: 1.5em;
        color: #fff;
    }

    .active {
        max-height: 400px;
        transition: max-height 0.6s ease-in-out;
    }

    .inactive {
        max-height: 0px;
        transition: max-height 0.6s ease-in-out;
    }
    
    
/*****************
    SUB-HEADER
*****************/
    
    .sub-header {
        grid-area: sub-header;
        display: flex;
        height: 25px;
        padding: 0px 2.5%;
        align-items: center;
        justify-content: flex-end;
        background-color: #353535;
        font-size: 10px;
        color: #828282;
    }
    
    .sub-header div {
        margin-left: 15px;
    }
    
    .sub-header i {
        display: inline-block;
        margin-right: 5px;
    }
    
    .sub-header p {
        display: inline-block;
        font-size: 10px;
        font-weight: 500;
        color: #828282;
    }
    
    
/**********    
    NAV
**********/
    
    nav {
        grid-area: menu;
        background: #353535;
    }

    nav ul {
        display: flex;
        flex-flow: column;
        width: 100%;
    }

    nav ul li {
        list-style: none;
        transition: 0.2s ease-in-out;
    }

    nav ul li:hover {
        background-color: #d98200;
    }

    nav > ul > li > a {
        color: #FFF;
        text-decoration: none;
        display: block;
        padding: 10px 2.5%;
    }


/*************  
    WELKOM
*************/
    
    .welkom {
        grid-area: welkom;
        
        background-image: url(../Fotos/_98255629_gettycheese2.jpg);
        background-position: center;
        background-size: cover;
        background-blend-mode: color;
        background-color: rgba(0, 0, 0, 0.5);
        
        height: 40vh;
        padding: 5%;
        text-align: center;
        color: white;
        
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: space-around;
    }
    
    .welkom h1 {
        text-shadow: -1px 2px 7.5px #000000;
        font-size: 2.5em;
        font-weight: 300;
    }
    
    .welkom figure {
        width: 50%;
        max-width: 250px;
    }
    
    .welkom figure img {
        display: block;
        width:100%;
        border-radius: 5px;
    }
    
/***********    
    MAIN
***********/
        
    
    main {
        color: #828282;
    }
    
    main section {
    }
    
    section article {
        padding: 25px 5% 50px 5%;
    }
    
    section article header {
        margin-bottom: 15px;
        padding-bottom: 5px;
        text-align: center;
        color: #d98200;
        border-bottom: 1px solid rgba(217, 130, 0, 0.25);
    }
    
    section article header h1 {
        font-weight: 400;
        font-size: 20px;
    }    
    
    section article figure {
        width: 100%;
    }
    
    section article figure img {
        width: 50%;
        margin: auto;
        display: block;
        margin-top: 15px;
        border-radius: 5px;
    }
    
    
/************   
    RIGHT
************/
        
    .facebook iframe {
        width:      100%;
        max-width:  500px;
        height:     608px;
        margin:     auto;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1), 
                    0 6px 6px rgba(0,0,0,0.25);
        display:    block;
    }
    
    
/***********    
    MAPS
***********/
    
    .maps {
        grid-area: maps;
        width: 100%;
        height: 40vh;
        border-top: 5px solid #222222;
    }

    footer {
      grid-area: footer;
        background-color: #222222;
        padding: 15px 5%;
        color: #828282;
    }
    
    
/*************    
    FOOTER
*************/
    
    footer section {
        display: flex;
        flex-flow: row;
        justify-content: space-around;
    }
    
    footer section article {
        width: 50%;
    }
    
    footer section article header h1 {
        text-align: left;
    }
    
    footer .sub-footer {
        border-top: 2px solid #353535;
        text-align: center;
    }
    
    footer .sub-footer p {
        color: #535353;
        letter-spacing: 1.5px;
        font-size: 12px;
        padding-top: 15px;
    }
}