/* 320 px beginnen */

/*********************/
/* CUSTOM PROPERTIES */
/*********************/

main > section:nth-of-type(1){
	display: flex;
	position: relative;
}
main > section:nth-of-type(1) h2{
	display: none;
}

main > section:nth-of-type(1) img{
    width: 100%;
}

main > section:nth-of-type(1) img.wissel {
	content: url("../images/PinkNotJustAnIdea.jpeg");
}

main > section:nth-of-type(1) button{
	position: absolute;
	font-family: Absolutbold, arial, sans-serif;
	font-size: .8em;
	color: var(--whiteCollab);
	background-color: var(--button-color);

	border: none;
	border-radius: .2em;

	padding: .8em;
	bottom: .5em;
	right: .5em	;
}

main > section:nth-of-type(2){
    display: grid;
    grid-template-columns: 17em;
    grid-template-rows: 10em;
    grid-auto-columns:25em;  
  	place-content: center;
	padding-bottom: 2em;
}

main > section:nth-of-type(2) h2{
    font-family: Absolut, arial, sans-serif; 
	font-size: 2.5em;
	color: var(--blue); 
	text-align: center;
    line-height: 80%;

    justify-self: center;
    align-self: end;
    margin-bottom: .4em;   
}

main > section:nth-of-type(2) h2 strong{
    font-family: AbsolutHandWritten, arial, sans-serif;
}

main > section:nth-of-type(2) p{
    font-family: Absolutmedium, arial, sans-serif;
    font-size: 1.2em;  
	color: var(--black);
    text-align: center;
    line-height: 150%;
	justify-self: center;
    align-self: end;
	padding: 0 1em;
}

main > div:nth-of-type(1){
	display: grid;
	grid-template-columns:17em;
	grid-template-rows:19em;
  	place-content: center;
	background-color:var(--beigepink);

	padding-bottom: 2em;
}

main > div:nth-of-type(1)> section {
	display: grid;
	grid-row-start: 2;
	grid-template-columns:17em;
	grid-template-rows: 11em;
	place-content: center;

	padding-top: 2em;
	padding-bottom: 3em;

	line-height: 1.4;
	background-color: var(--white);
}


main > div:nth-of-type(1)> section h2 {
	font-family: Absolutbold, Arial, sans-serif;
	font-size: 1.7em;
	color: var(--black);
	text-transform: uppercase;
	padding: 0 1em;
}

main > div:nth-of-type(1)> section p {
	font-family: Absolutregular, Arial, sans-serif;
	font-size: .9em;
	color: var(--black);
	text-align: left;
	padding: 0 2em 0 1.5em;
}

main > div:nth-of-type(1) img{
	grid-row-start: 1;
	justify-self: center;
	align-self: end;
	width: 100%;
}

main > img{
	padding: 4em 2em 6em 2em;
	justify-self: center;
	align-self: center;
	width: 100%;
	
}

@media (prefers-reduced-motion: reduce){
	main > img:nth-of-type(2){
		width: 0;
	}
}

section:nth-of-type(3){
	place-content: center;
}

section:nth-of-type(3) h2{
	font-family: Absolut,Arial, sans-serif;
	font-size: 2.7em ;
	color:var(--blue);
	text-align: center;
	line-height: 80%;
	padding: 1em .5em .3em .5em; 

}

section:nth-of-type(3) h2 strong{
	font-family: AbsolutHandWritten,Arial, sans-serif;
	color:var(--blue);


}

section:nth-of-type(3) p{
    font-family: Absolutmedium, arial, sans-serif;
    font-size: 1.2em;
	color: var(--black);
    text-align: center;
    line-height: 150%;
	padding: .8em 2em 0 2em;
    justify-self: center;
    align-self: end;
    
}

section:nth-of-type(3) p:last-of-type{
	padding-top: 1em;
	padding-bottom: 2em;
}

section:nth-of-type(4){
	background: url("../images/SavePicture.webp");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 120%;
	width: 100%;
	animation: background-animation 15s linear infinite;
}

@keyframes background-animation {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}

section:nth-of-type(4) h3{
	display: grid;
 
	font-family: Absolut, arial, sans-serif;
	font-size: 5.3em;
	color: var(--whiteCollab);
	text-align: center;
	line-height: 90%;

	padding: .5em 0;
}

@media (prefers-reduced-motion: reduce){
	section:nth-of-type(3){
		animation:unset;
	}
}

section:nth-of-type(4) h3 strong{
	font-family: AbsolutHandWritten, arial, sans-serif;
}

section:nth-of-type(4) img{
	width: 100%;
}

main > p{ 
	font-family: Absolutmedium, arial, sans-serif;
    font-size: 1.25em;
	color: var(--black);
	text-align: center;
	line-height: 150%;
	padding: 3em 2em 0 2em;
}

main > p:last-of-type{
	padding:1em 2em 3em 2em;
}