/*-----------GENERAL STYLING AND COLORSCHEME-----------*/
*{
    scroll-behavior: smooth;
	scroll-snap-type: y mandatory;	
    margin:0;
    padding:0; 
}

body{
    margin:0 auto;
    padding:0; 
    width:100%;
    max-width:100vw;

    --black:#000000;
    --white:#ffffff;
	--gray: #98999B;
    --red:#AB281E;
    --cream:#f2ece4;

    background-color: var(--black);

    box-sizing: border-box;

    img{
        width:100%;
        height:100%;
        object-fit: cover;
    }
/*----FONTS----*/
    font-family: "termina", sans-serif;
    font-weight: 400;
    font-style: normal;

    font-family: "termina", sans-serif;
    font-weight: 500;
    font-style: normal;

    font-family: "termina", sans-serif;
    font-weight: 700;
    font-style: normal;
}
/*----TEXT-& VISUALS----*/
     h1{
        font-family: "termina", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 2.625rem;
        line-height: 3.15rem;
        color:var(--gray);
    }
    h2{ font-family: "termina", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 1.5rem;
        line-height: 1.75rem;
        color:var(--gray);
    }
    h3{
        font-family: "termina", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 1.15rem;
        line-height: 1.4rem;
        color:var(--gray);
    }
    button{
        width:22rem;
        padding:0.5rem;
        margin-bottom: 1rem;
        font-family: "termina", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 1rem;
        line-height: 1.25rem;
        color:var(--cream);
        background-color: var(--red);
        border-radius: 20px;
        border: 2px solid var(--gray);
        border-radius: 20px;
        cursor: pointer;
        text-decoration: none;
    }

    p,li{
        font-family: "termina", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 1rem;
        line-height: 1.75rem;
        color:var(--gray);
    }
    .QUOTE{
        padding: 4%;
        background-color: var(--white);
    }
    .QUOTE p{
        color:var(--black);
    }
   .LOGO{
        max-width: 8rem;
        aspect-ratio: 1/1;
    }
    .HEROVISUAL{
        min-width: 400px;
        width:100%;
        aspect-ratio:20/15;
        object-fit: contain;    
        align-self: center;          
        background-color: var(--white);
    }
    
    .ADVISUAL{
       min-width:400px;
       aspect-ratio: 1/0.8;
       align-self: center;
    }
    .TRIANGLE-DOWN{
        margin: 0 auto;        
        width: 0;
	    height: 0;
	    border-left: 30px solid transparent;
	    border-right: 30px solid transparent;
	    border-top: 30px solid var(--red);
    }

    /*-----------/GENERAL STYLING AND COLORSCHEME-----------*/

    /*-----------BOX STYLING AND COLORSCHEME-----------*/
    .LOGOBOX{
        width:8rem;
         aspect-ratio: 1/1;
    }
    .BOX{
        min-width: 420px;
        max-width:100%;  
        padding:4%;       
        border:3px solid var(--gray);
        border-radius:20px;
        color:var(--gray);
        background-color: var(--black);
        overflow:hidden;
        display: grid;
        justify-items: center;
        justify-content: center;
    }
    .BOX1{
        padding:0;
        aspect-ratio: 1/1.3;
        display:grid;
        justify-items: center;
        align-content: center;
    }
    .BOX2{
        padding:0;
        aspect-ratio: 1/.75;
    }
    .BOX3{
        padding:0 1rem 1rem 1rem;  
        display: grid; 
        justify-items: center;    
    }
   
    /*-------------iPhone-6-7-8----375x667px-----*/
.CONTAINER{
    margin: 0 auto;
    padding:0;
    width:100%;
    width:100vw;
    display: grid; 
    grid-template-columns: 10vw 1fr 10vw;
    grid-template-rows: auto; 
    justify-items: center;   
}
header{ 
    grid-column: 1/-1;
    grid-row:1/2;
    width:100%;
    max-width:100vw; 
    position: relative;
    display: inline-flex;
    justify-content: center;    
}
/*----------REDACTIE-------
    header met logo
    BOX1 - AD> DAAROM GRATIS MARKETINGHULP
    BOX2 - HERO> De Marketing Club voor Starters & Groeiers helpt je echt vooruit
    BOX3 - Wat is de Marketing Club?
    BOX4 - AD> Bij de Marketingclub leren van starters en groeien met echte ondernemers
    BOX5 - Wat krijg je als lid van de Marketing Club?
    BOX6 - WAT IS MARKETING AS A SERVICE?
    BOX7 - AD> Daarom Marketing & Design in 1 Marketingclub
    BOX8 - MARKETINGSCAN
    BOX9 - MARKETING AS A SERVICE:
    BOX10- AD> Groeien met Marketing as a Service: Jouw abonnement op marketing
  -----*/

main{
    margin:0 auto;
    width:100vw;
    display: grid;
    grid-template-areas: 1/-1;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    grid-template-areas:
    'box2'    
    'box3'
    'box5'
    'box1'
    'box8'
    'box4'
    'box7'
    'box9'
    'box6'
    'box10';
    justify-items: center;
    justify-content: center;
}

.BOX{
    margin:0;
    padding:0;
    transform:scale(0.7);
    display: grid;
    justify-items: center;
}
 .BOX6{
        min-width: 420px ;
        padding:4%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
        'kop'
        'P1'
        'P2'
        'P3'    
    }    
/*----------REDACTIE-------
    header met logo
    BOX1 - AD> DAAROM GRATIS MARKETINGHULP
    BOX2 - HERO> De Marketing Club voor Starters & Groeiers helpt je echt vooruit
    BOX3 - Wat is de Marketing Club?
    BOX4 - AD> Bij de Marketingclub leren van starters en groeien met echte ondernemers
    BOX5 - Wat krijg je als lid van de Marketing Club?
    BOX6 - WAT IS MARKETING AS A SERVICE?
    BOX7 - AD> Daarom Marketing & Design in 1 Marketingclub
    BOX8 - MARKETINGSCAN
    BOX9 - MARKETING AS A SERVICE:
    BOX10- AD> Groeien met Marketing as a Service: Jouw abonnement op marketing


/*-----------iPad Mini------768x1024px--------*/
@media (min-width:700px){

main{
        margin:0 auto 1rem auto;
        width:100vw;
        padding:0 2rem 0 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr ;
        grid-template-rows: 1fr;
        column-gap: 0;
        justify-items: center;
        justify-content: center;
        grid-template-areas: 
        '. box2 box2 .'            
        '. box5 box1 .'
        '. box4 box3 .'
         '. box8 box8 .'   
        '. box7 box9 .'
        '. box6 box10 .';        
    }
    
    .BOX6{
        margin-top: -2rem;
    }

    .BOX{
        transform:scale(0.75);  
}
   
}
/*----------REDACTIE-------
    header met logo
    BOX1 - AD> DAAROM GRATIS MARKETINGHULP
    BOX2 - HERO> De Marketing Club voor Starters & Groeiers helpt je echt vooruit
    BOX3 - Wat is de Marketing Club?
    BOX4 - AD> Bij de Marketingclub leren van starters en groeien met echte ondernemers
    BOX5 - Wat krijg je als lid van de Marketing Club?
    BOX6 - WAT IS MARKETING AS A SERVICE?
    BOX7 - AD> Daarom Marketing & Design in 1 Marketingclub
    BOX8 - MARKETINGSCAN
    BOX9 - MARKETING AS A SERVICE:
    BOX10- AD> Groeien met Marketing as a Service: Jouw abonnement op marketing


/*-----------HP-ZBook15------1300x740px--------*/
@media (min-width:1250px){

    main{
        margin:0 auto;
        padding:0;
        width:100vw;        
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr;
        column-gap: 0;
        grid-template-areas: 
        '. box2 box2 box3 .'
        '. box2 box2 box3 .'
        '. box5 box1 box8 .'
        '. box7 box9 box4 .'
        '. box6 box6 box10 .'
        '. box6 box6 box10 .'        ;
        justify-items: center;
        justify-content: center;
        align-content: center;
    }
   
    .BOX{
        transform:scale(0.7);
    }
     .BOX1{
        margin-top: -3.5rem;
        object-fit: contain;        
    }
    .BOX2{
        margin-top: -4rem;
    }

    .BOX6{
        margin-top: 0;
        width: 800px ;
        padding-top:3rem;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-template-areas:
        'kop kop kop kop'
        'P1 P1 P1 P1'
        'P2 P2 P3 P3'
    }
    .BOX8 img{
        object-fit: contain;
    }
}
/*-----------Widescreen------1900x740px--------*/
@media (min-width:1900px){
    .BOX{
    transform:scale(0.9);
    }
     .BOX1,.BOX2{
        margin-top: 0;
    }
  

}