* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



div.container {
    font-family: 'Cormorant Garamond', serif;
    font-size: 100%;
    color: #000;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga", "kern";
    margin: 0px;
    padding: 0px;
    /*border: 1px solid red;*/
}

article {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 10vmin; /*WITRUIMTE tussen artikels aanpassen*/
	height: 100vh;
    width: 100%;
    /*border: 1px solid powderblue;*/
}

.kader:before {
    /*HACK OM VIERKANT KADER TE BEHOUDEN*/
    content: "";
    display: block;
    padding-top: 100%;
}

.kader {
    /*tussen portrait en landscape*/
    position: relative;
    height: 77vh;
    width: 77vh;
    overflow: hidden;
    /*border: 1px dashed green;*/
}

        @media (min-aspect-ratio: 3/2) {
            /*LANDSCAPE*/
            .kader {
                position: relative;
                height: 90vh;
                width: 90vh;
                overflow: hidden;
                /*border: 1px dashed powderblue;*/
            }
        }

        @media (max-aspect-ratio: 7/8) {
            /*PORTRAIT*/
            .kader {
                position: relative;
                /*width: 90%;
                height: auto;*/
				width: 90vw;
				height: 90vw;
                overflow: hidden;
                /*border: 1px dashed powderblue;*/
            }
        }

        .vierkant {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        .frontimg {
            width: auto;
            height: 100%;
        }

        header {
            /*tussen portret en landschap*/
            z-index: 1;
            display: flex;
            align-items:  center;
            flex-direction: column;
            position: fixed;
            /*top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);*/
            width: 100%;
            /*height: 100vh;*/	/*180515*/
			height: 100vh;
            color: black;
            /*border: 1px dotted pink;*/
			
			pointer-events: none;
        }

        @media (max-aspect-ratio: 7/8) {
            header {
                /*PORTRET*/
                z-index: 1;
                display: flex;
                align-items: center;
                flex-direction: column;
                position: fixed;
				/*bottom: 0;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);*/	/*180515*/
                width: 100%;
                /*height: 100vh;*/	/*180515*/
				height: 100vh;
                color: black;
                /*border: 2px dotted pink;*/
				
				pointer-events: none;
            }
        }
         @media (min-aspect-ratio: 3/2) {
            header {
                /*LANDSCAPE*/
                z-index: 1;
                display: flex;
                align-items: center;
                flex-direction: row;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                width: 100%;
                height: auto;
                color: black;
                /*border: 1px dotted pink;*/
				
				pointer-events: none;
            }
        }

        .logo {
            /*TUSSEN PORTRET EN LANDSCHAP*/
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: -1px; /*zoniet is boordje van witte achtergrond zichtbaar op kader...*/
            width: 101%;
            background-color: white;
            height: calc((100vh - 77vh) / 2 );
            white-space: nowrap;
            border: 1px solid white;
        }

        @media (max-aspect-ratio: 7/8) {
            .logo {
                /*PORTRET*/
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: -1px; /*zoniet is boordje van witte achtergrond zichtbaar op kader...*/
                width: 101%;
                background-color: white;
                height: calc((100vh - 90vw) / 2);
                white-space: nowrap;
                border: 1px solid white; /*zoniet is boordje van witte achtergrond zichtbaar op kader...*/
            }
        }

        @media (min-aspect-ratio: 3/2) {
            /*LANDSCHAP*/
            .logo {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: -2px;  /*zoniet is boordje van witte achtergrond zichtbaar op kader...*/

                width: calc((100% - 90vh) / 2);
                white-space: nowrap;
                /*border: 1px solid blue;*/
            }
        }

        #logotekst {
            display: block;
            text-align: right;
            width: max-content;
            height: auto;
            /*border: 1px dashed violet;*/
        }




        h1 {
            font-size: 30px;
            font-size: 2.0vh;
            letter-spacing: 0.13vh;
            word-spacing: 0.33vh;
            line-height: 2.2vh;
            font-weight: 700;
        }

        h2 {
            font-size: 18px;
            font-size: 1.44vh;
            line-height: 2.2vh;
            letter-spacing: 0.13vh;
            font-weight: 500;
        }


        @media (min-aspect-ratio: 3/2) {
            /*LANDSCHAP*/
            h1 {
                font-size: 30px;
                font-size: 1.4vw;
                letter-spacing: 0.10vw;
                word-spacing: 0.25vw;
                line-height: 1.7vw;
                font-weight: 700;
            }

            h2 {
                font-size: 18px;
                font-size: 1.0vw;
                line-height: 1.7vw;
                letter-spacing: 0.10vw;
                font-weight: 500;
            }
        }



        nav {
            /*TUSSEN PORTRET EN LANDSCHAP*/
            display:flex;
            align-items:center;
            justify-content:center;
            margin-top: auto;
            margin-bottom: -100px; /*hack voor scrollen op smart phone ivm url-bar*/
            width: 101%;
            height: calc((100vh - 77vh) / 2 + 100px);
            text-align: center;
            background-color:white;
            /*border: 1px solid white;*/
			
			pointer-events: all;
        }

        @media (max-aspect-ratio: 7/8) {
            /*PORTRET*/
            nav {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: auto;
                margin-bottom: -100px;	/*hack voor scrollen op smart phone ivm url-bar*/
                width: 101%;
                height: calc((100vh - 90vw) / 2 + 100px);
                text-align: center;
                background-color: white;
                /*border: 1px solid blue;*/
				
				pointer-events: all;
            }
        }
        
         @media (min-aspect-ratio: 3/2) {
            /*LANDSCHAP*/
            nav {
                margin-left: auto;
                margin-right: -1px;
                width: calc((100% - 90vh) / 2);
                text-align: center;
                /*border: 1px dotted red;*/
				
				pointer-events: all;
            }
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
			transform: translateY(-50px); /*hack voor scrollen op smart phone ivm url-bar*/
            /*border: 1px dotted cyan;*/
        }
		
		@media (min-aspect-ratio: 3/2) {
            /*LANDSCHAP*/
			nav ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				transform: translateY(-25px);
				/*border: 1px dotted cyan;*/
			}
		}
		

        nav li {

            display: inline;
            font-size: 18px;
            font-size: 1.4vh;
            line-height: 1.2vh;
            letter-spacing: 0.10vh;
            font-weight: 500;
            padding-left: 1.4vh;
            padding-right: 1.4vh;
            /*border: 1px dotted purple;*/
        }

        @media (min-aspect-ratio: 3/2) {
            /*LANDSCHAP*/
            nav li {
                display: inline;
                font-size: 18px;
                font-size: 0.8vw;
                line-height: 0.8vw;
                letter-spacing: 0.07vw;
                font-weight: 500;
                padding-left: 0.95vw;
                padding-right: 0.95vw;
                /*border: 1px dotted purple;*/
            }
        }

                nav ul a {
                    text-decoration: none;
                    display: inline-block;
                }

            .active {
                font-weight: 700;
            }

            a {
                text-decoration: none;
                color: #000;
            }

			a:hover {
				color: #000;
			}
			
			@media(any-hover: hover){
				a:hover {
					color: #a89443;
				}
			}

        p {
            font-family: 'Tinos', Cambria, sans-serif;
            font-weight: 400;

            font-size: 0.875em; /* 14px/16=0.875em */
            color: black;
            /*border: 1px dashed green;*/
        }





            h3 {
                font-size: 16px;
                margin-top: 0px;
                margin-bottom: 20px;
                padding-left: 30px;
                font-weight: 300;
            }



			
			
.demo-gallery {
	/*tussen landscape en portrait*/
width: 100vmin;
height: 100vmin;
margin: -8.55vmin; /* GELIJK AAN MARGIN HIERONDER !*/
/*border: 1px dashed violet;*/
}

.demo-gallery a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	display: block;
	float: left;
	margin: 8.55vmin 0 0 8.55vmin;
	width: 12.83vmin;
	height: 12.83vmin;
	line-height: 0;
	/*border: 1px dashed green;*/
}

@media (max-aspect-ratio: 7/8) {
	/*PORTRET*/
	.demo-gallery {
		width: 100vmin;
		height: 100vmin;
		margin: -10vmin; /* GELIJK AAN MARGIN HIERONDER !*/
		/*border: 1px dashed violet;*/
	}
	
	.demo-gallery a {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-touch-callout: none;
		display: block;
		float: left;
		margin: 10vmin 0 0 10vmin;
		width: 15vmin;
		height: 15vmin;
		line-height: 0;
		/*border: 1px dashed green;*/
	}
}

@media (min-aspect-ratio: 3/2) {
	/*LANDSCHAP*/
	.demo-gallery {
		width: 100vmin;
		height: 100vmin;
		margin: -10vmin; /* GELIJK AAN MARGIN HIERONDER !*/
		/*border: 1px dashed violet;*/
	}
	
	.demo-gallery a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	display: block;
	float: left;
	margin: 10vmin 0 0 10vmin;
	width: 15vmin;
	height: 15vmin;
	line-height: 0;
	/*border: 1px dashed green;*/
}
}


.demo-gallery img {
	width: 100%;
	height: auto;
}

.demo-gallery figure {
	display: none;
}

.demo-gallery__title {
    line-height: 14px;
    font-size: 14px;
    opacity: 0.8;
    margin-top: 5px;
    width: 100%;
    float: left;
    /*border: 1px dashed cyan;*/
}

#map {
    position: relative;
    /*margin-top: 20vmin;
                margin-bottom: 5vmin;*/
    width: 90vmin;
    height: 50vh;
}