/* general styling */
* {
// outline: 1px solid red;
 }
        @font-face {
            font-family: 'garamond'; 
            src: url("CormorantGaramond-Regular.ttf") format("opentype");
            font-style: normal;
        }
        
        @font-face {
            font-family: 'JosefinSlab'; 
            src: url("JosefinSlab-Light.ttf") format("opentype");
            font-style: normal;
        }




        body {
            min-height: 100vh;
            font-family: JosefinSlab, times;
            color: 000;
            margin: 0 0 10% 0;
            padding: 0;


            //background-attachment: fixed;
            //background-repeat: no-repeat;

            //background: linear-gradient(0deg, #e1e1e1, #fff);
            //background-size: 400% 400%;

            //animation: AnimationName 12s ease infinite;
        }

        @keyframes AnimationName {
            0%{background-position:51% 0%}
            70%{background-position:50% 100%}
            100%{background-position:51% 0%}
        }
    
            
        p {
            margin:0;
            padding: 0 5% 0 0;
            font-family: JosefinSlab, times;
        }
        
        a, a:hover, a:active, a:visited {
            color: #000;
            font-family: JosefinSlab, times;
        }
        
        a:hover {
            text-decoration: none;
            //background-color: #cccccc;
        }
        
        h1 {
             font-family: JosefinSlab, times;
             font-weight; 4em;
        }
        
        h2 {
             font-family: JosefinSlab, times;
             font-size: 1.3em;
             font-weight: normal;
        }

        
        /* two bars at the left side */
        
        #header {
            position: fixed;
            top: 0%;
            left: 0.75%;
            background-color: #1e1c1c;
            width: 0.5vw;
            height: 96vh;
            animation-name: header;
            animation-duration: 30s;
            animation-iteration-count: infinite;
        }

        #header2 {
            position: fixed;
            top: 0%;
            left: 1.75%;
            background-color: #1e1c1c;
            width: 0.5vw;
            height: 66vh;
            animation-name: header2;
            animation-duration: 30s;
            animation-iteration-count: infinite;
        }
        
        @keyframes header {
            0% {height: 96vh; }
            50% {height: 66vh}
            100% { height: 96bh}
        }
        
        @keyframes header2 {
            0% {height: 66vh; }
            50% {height: 36vh}
            100% { height: 66vh}
        }
        
        /* logo */
        #titel {
            position: absolute;
            left: 0%;
            top: 0%;
            margin: 0;
            padding: 0;
        }

        #header-h {
            position: relative;
            top: 1vh;
            left: 4vw;
            margin: 0;
            padding: 0;
        }
        
        .logo {
            width: 20vw;
        }
        
        
        /* navigatie */ 
        
        #topnav {
            position: absolute;
            top: 6vh;
            right: 14vw;
            z-index: 999;
        }
        
        #topnav a {
            font-size: 1.3em;
            padding-right: 0.5vw;
            text-decoration: none;
        }
        
        #topnav a:hover {
            border-bottom: 0.5px solid #1e1c1c;
        }
        
        .currentlink {
            border-bottom: 0.5px solid #1e1c1c;
        }
        
        
        /* two bars at the right */
        #footer-1 {
            position: fixed;
            background-color: #211f1f; /*1e1c1c;*/
            bottom: 0vh;
            right: 1vw;
            width: 2vw;
            height: 40vh;
            animation-name: footer-1;
            animation-duration: 60s;
            animation-iteration-count: infinite;
        }
        
        @keyframes footer-1 {
            0% {height: 40vh; }
            50% {height: 50vh}
            100% { height: 40vh;}
        }
            
        #footer-2 {
            position: fixed;
            background-color: #211f1f; /*1e1c1c;*/
            bottom: 0vh;
            right: 3.5vw;
            width: 1vw;
            height: 34vh;
            animation-name: footer-2;
            animation-duration: 60s;
            animation-iteration-count: infinite;
        }
        
        @keyframes footer-2 {
            0% {height: 34vh; }
            50% {height: 44vh}
            100% { height: 34vh;}
        }
        
        #footer-3 {
        display: none;
            position: fixed;
            background-color: #211f1f; /*1e1c1c;*/
            bottom: 0vh;
            right: 10vw;
            width: 0.25vw;
            height: 8vh;
        }
        
        #footer-4 {
            position: fixed;
            background-color: #211f1f; /*1e1c1c;*/
            bottom: 2vh;
            right: 6vw;
            width: 34vw;
            height: 0.5vh;
            animation-name: footer-4;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }
        
        @keyframes footer-4 {
            0% {bottom: 2vh; }
            25% {bottom: 3vh; }
            50% {bottom: 2vh}
            75% {bottom: 5vh; }
            100% { bottom: 2vh;}
        }
        
        
        /* main content for grid pages*/
        
        #content, #contenthome, #contentvisit, #contentother  {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 6vh 1vw;
            
            margin-left: 5vw;
            margin-top: 32vh;
        }

        #contenthome {
            margin-left: 10vw;
            }
        
        /* various image sizes in grid */
        img {
            width: 40vw;
            height: auto !important;
            box-shadow: 0px 0px 0px 0px white;
            //border-bottom: 1px solid white;
            padding-bottom: 0.2vh;
        }
               
        img:hover {
            box-shadow: -4vh 4.2vh 0px -4vh #211f1f;
            //box-shadow: 0px 24px 3px -24px magenta
            //border-bottom: 1px solid #211f1f;
            transition: 1.5s ease;
        }
            
        .wide-image {
            float: left;
            width: 83vw;
            margin-bottom: 4vh;
        }
        
        .portrait-image {
            width: 20vw;
        }
        
        .small-image {
            width: 20vw;
        }

       .map-image {
           width: auto;
           height: auto;
            max-width: 12vw;
            max-height: 16vh;
        }

        
        /* clickable panorama code */
        .panorama-container {
            position: relative;
            width: 80vw;
            overflow-x: scroll;
            overflow-y: hidden;
        }
        
        .panorama-image {
            width: 150vw;
        }
        
        .scroll-right, .scroll-left {
                position: fixed;
                top: 40%;
                font-size: 96px;
                color: white;
        }
        
        .scroll-right {
            left: 80vw;
        }
        
        .scroll-left {
            left: 15vw;
        }
        
        .hotspot {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 16px;
            border: 2px solid white;
        }
        
        #spot1 {
            top: 20%;
            left: 23%;
        }


        /* items in grid; default styling */

        .item {
            justify-self: left;
        }
        
        .item p {
            //width: 3vw;
            font-size: 1.3em;
            margin-bottom: 1vh;
           // max-width: 30vw;
        }
        

/* Slideshow container */
        .slideshow {
            position: relative;
            //max-height: 60vh;
            min-width: 75%;
            max-width: 85%; 
            margin: auto;
            top: 28vh; /*28vh;*/
            overflow: auto;
        }

/* Hide the images by default */
        .slides {
            display: none;
        }

        .slide1 {
            display: block;
        }

        .float-left img {
            margin-right: 5vw;
            float: left;
        }

                    
        /* items home */        
        #contenthome #item-1 {
            grid-area: 1 / 1 / span 1 / span 2;
        }
        #contenthome #item-1 img {
            grid-area: 2 / 1 / span 1 / span 1;
            //width: 30vw !important;
        }
        
        #contenthome #item-2 {
            grid-area: 2 / 2 / span 1 / span 1;
            //justify-self: left;
        }

        #contenthome #item-2 img {
           width: 30vw !important;
        }


        #contenthome #item-3 {
            grid-area: 3 / 2 / span 1 / span 1;
            justify-self: right;
            margin-top: -30vh;
        }

        #contenthome #item-3 img {
           // width: 80vw !important; 
        }

        #contenthome #item-4 {
            grid-area: 2 / 1 / span 1 / span 1;
            //justify-self: right;
        }
        
        #contenthome #item-4 img {
           width: 25vw !important;
        }
        
        #contenthome #item-5 {
            grid-area: 3 / 1 / span 1 / span 1;
            justify-self: right;
        }
        
        #contenthome #item-5 img {

          // width: 35vw !important;
        }
        
        
        /* items visit */        
        #contentvisit #item-1 {
            grid-area: 1 / 1 / span 1 / span 1;
        }
        
        #contentvisit #item-2 {
            grid-area: 1 / 2 / span 1 / span 1;
            //justify-self: left;
        }
        
        #contentvisit #item-2 img {
           width: 30vw !important;
        }

        #contentvisit #item-3 {
            grid-area: 2 / 1 / span 1 / span 1;
            justify-self: left;
			margin-top: -10vh;
        }

        #contentvisit #item-3 img {
           // width: 80vw !important; 
        }

        #contentvisit #item-4 {
            grid-area: 2 / 2 / span 1 / span 1;
            justify-self: right;
        }
        
        #contentvisit #item-4 img {
           width: 30vw !important;
        }
        
        #contentvisit #item-5 {
            grid-area: 3 / 1 / span 1 / span 1;
            justify-self: right;
        }
        
        #contentvisit #item-5 img {
           width: 35vw !important;
        }
        

        /* items species */        
        #item-1 {
        }
        

        #item-2 {
        }

        #content #item-2 img {
            width: 30vw !important;
        
        }        
        
        #item-3 {
            grid-area: 7 / 1 / span 1 / span 2;
        }

        #item-4 {
            grid-area: 6 / 2 / span 1 / span 2;
            
        }

        #content #item-4 img {
            width: 30vw !important; 
        }
        
        #item-5 {
            grid-area: 3 / 2 / span 1 / span 1;
            margin-top: -5vh;
        }
        
        #item-6 {
            grid-area: 5 / 1 / span 1 / span 2;
            
        }
        
        #content #item-7 img {
            width: 25vw !important;
        }

        
        #item-7 {
            grid-area: 3 / 1 / span 1 / span 1;
        }
        
        #item-8 {
            grid-area: 8 / 1 / span 1 / span 1;
            justify-self: right;
        }
        
        #item-9 {
            grid-area: 6 / 1 / span 1 / span 1;
        }
        
        #item-10 {
            grid-area: 7 / 2 / span 1 / span 1;
            justify-self: right;
            margin-top: -20vh;
        }
        
        #item-11 {
            grid-area: 10 / 2 / span 1 / span 1;
            margin-top: -2vh;
        }
        
        #item-12 {
            grid-area: 8 / 2 / span 1 / span 2;
            justify-self: right;
        }
        
        #content #item-12 img {
            width: 30vw !important;
        }

        #item-13 {
            grid-area: 9 / 1 / span 1 / span 1;
            justify-self: left;
        }

        #content #item-13 img {
            width: 25vw !important;
        }

        #item-14 {
            grid-area: 9 / 2 / span 1 / span 1;
            justify-self: right;
        }

        #item-15 {
            grid-area: 2 / 2 / span 1 / span 1;
            justify-self: right;
        }

        #content #item-15 img {
            width: 25vw !important;
        }

        #item-16 {
            grid-area: 10 / 1 / span 1 / span 1;
            justify-self: right;
        }

        #item-17 {
            grid-area: 2 / 1 / span 1 / span 1;
            margin-top: -15vh;
        }

        #item-18 {
            grid-area: 11 / 1 / span 1 / span 1;
            //margin-top: -15vh;
        }


        /* items other objects */
        #contentother #item-1 {
		    grid-area: 1 / 1 / span 1 / span 1;
        }
       
        #contentother #item-2 {
		    grid-area: 1 / 2 / span 1 / span 1;
			justify-self: left;
        }
        
        #contentother #item-3 {
            grid-area: 2 / 1 / span 1 / span 1;
			margin-top: -35vh;
        }

        #contentother #item-4 {
            grid-area: 2 / 2 / span 1 / span 2;
			margin-left: -10vw;
        }
        
        #contentother #item-5 {
            grid-area: 3 / 1 / span 1 / span 2;

        }
        
        #contentother #item-6 {
            grid-area: 4 / 1 / span 1 / span 1;
            
        }
        
        #contentother #item-7 {
            grid-area: 4 / 2 / span 1 / span 1;
        }
        
        #contentother #item-8 {
            grid-area: 6 / 2 / span 1 / span 1;
            justify-self: right;
        }
        
        
        #contentother #item-9 {
            grid-area: 6 / 1 / span 1 / span 1;
        }
        
        #contentother #item-10 {
            grid-area: 7 / 2 / span 1 / span 1;
            justify-self: right;
            margin-top: -20vh;
        }
        
        #contentother #item-11 {
            grid-area: 2 / 1 / span 1 / span 1;
            margin-top: -15vh;
        }
        
        #contentother #item-12 {
            grid-area: 8 / 2 / span 1 / span 2;
            justify-self: right;
        }
        
        #contentother #content #item-12 img {
            width: 30vw !important;
        }

        #contentother #item-17 {
            grid-area: 2 / 1 / span 1 / span 1;
            margin-top: -15vh;
        }
        
    /* pages for individual works */

    #work {
        position: absolute;
        top: 28vh;
        left: 10vw;
        max-width: 85%;
        width: 85%;

    }
    
    #work .item {
        display: block;
        width: 100%;
    }
    
    #work .item p {
        width: 30vw;
    }
    
    #work .item img, video {
        margin-top: 4vh;
    }

    video {
        max-height: 70vh;
    }
    
    #work .item #text, #work .item #text2 {
        float: right;
        margin-top: 6vh;
        margin-left: 2vw;
    }

    #work .bendbeast  #text {
    //    margin-top: -25vh;
    }

    
    .infoblock {
        width: 100%;
        margin: 4vh 0 0 0;
        padding: 1vw;
        background-color: #e1e1e1;
        font-size: 1.3em;
    }
    
    th {
        text-align: left;
        font-weight: normal;
        padding: 0 0 2vh 0;
    }
    
    td {
        padding: 0 60px 0 0;
    }
    
    video, #streambox {
        width: 40vw;
    }

   .player-dimensions {
	   width: 960px;
	   height: 540px;
   }
  

    .instaframe {
        margin-top: 4vh;
        width: 40vw;
        float: left;
    }
    
    #work #text.habitat {
        float: left;
        clear: both;
        width: 70vw;
        margin-left: 0;
    }

    
    #work #text.habitat {
        //columns: auto 2;
        //max-height: 10vh;
        margin-top: 0;
        
    }
    
    #work #text.habitat p {
        width: 65vw;
    }
    
    #work .links {
        clear: both;
    }
    
    #work .links img {
        height: 18vh !important;
        width: auto;
        float: left;
        margin-right: 2vw;
        margin-bottom: 6vh;
    }

    #work .links p {
        float: left;
    }

    #mapid {
        height: 50vh;
        width: 75vw;
        //border: 2px solid #1e1c1c;
        margin-top: 4vh;
        margin-bottom: 4vh;
    }
    
    .leaflet-popup {
            width: 14vw;
    }

    .leaflet-popup-content {
        font-size: 1.4em;
        display: block;
     }


     /* BENDBEAST */

     .bendbeast ul li {
         display: block;
         width: 100px;
         height: 30px;

         margin-bottom: 1em;
         padding: 0.8em 0 0 4em;
     }

     .bendbeast ul li:hover {
         cursor: pointer;
     }

     .bendbeast ul li:active {
         background-color: #88898a;
     }

     .bendbeast .forward {
         background: url("bendbeast/Arrowforward.png") no-repeat left;
         background-size: contain;
     }

    .bendbeast .left {
         background: url("bendbeast/Arrowleft.png") no-repeat left;
         background-size: contain;
    }

    .bendbeast .right {
         background: url("bendbeast/Arrowright.png") no-repeat left;
         background-size: contain;
    }

    .bendbeast .deposit {
         background: url("bendbeast/deposit.png") no-repeat left;
         background-size: contain;
    }

    .bendbeast video {
	    margin-top: 0;
    }

    .status, .votes, .poll {
	    font-weight: bold;
	    background-color: #1e1c1c;
	    color: #fff;
	    padding: 1%;

    }

@media screen and (max-width: 1000px) {
	.player-dimensions {
		height: 170px;
	}

	#work .bendbeast #text { 
		width: 100%;
		float: left;
	 }

	#work .bendbeast #text p { 
		width: 100%;
	}
}

    
/* mobile site */
@media screen and (max-width: 1000px) {
        #work .bendbeast  #text {
        margin-top: 20vh;
    }

    #streambox #player {
    max-width: 200%;
    }

    .logo {
        width: 66vw;
    }
   
    #contenthome {
        margin-top: 30vh !important;
    }

    .slideshow {
        width: 100%;
        max-width: 100%;
        margin: auto;
    }
    
/* items mobile*/

       #topnav {
            top: 16vh;
            left: 6vw;
            width: 90vw;
        }

        #content, #contenthome, #contentvisit, #contentother {
            overflow: hidden;
        }


/* mobile: general styling */
        .item {
            justify-self: left;
            display: block;
        }
        
        .item p {
            width: 95%;
            font-size: 1.1em;
            
        }

        img {
            width: 80vw;
        }
            
        .wide-image {
            margin-left: -40vw;
            width: 180vw;
        }
        
        .portrait-image {
            width: 40vw;
        }
        
        .small-image {
            width: 20vw;
        }

/* mobile: placement of individual items on homepage */
        
        #content #item-1 {
            grid-area: 1 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: 10%;
        }
        
        #content #item-2, #contenthome #item-2, #contentvisit #item-2, #contentother #item-2 {
            grid-area: 2 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: 0%;

        }
        
        #content #item-3, #contenthome #item-3, #contentvisit #item-3, #contentother #item-3 {
            grid-area: 3 / 1 / span 1 / span 1;
            //justify-self: right;
            justify-self: left;
            margin-top: 0;
			margin-left: 15%;
        }
        
        #content #item-4, #contenthome #item-4, #contentvisit #item-4, #contentother #item-4 {
            grid-area: 4 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: -1%;
        }
        
        #content #item-5, #contenthome #item-5, #contentvisit #item-5, #contentother #item-5 {
            grid-area: 5 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: 10%;
        }

        #content #item-6, #contenthome #item-6, #contentvisit #item-6, #contentother #item-6 {
            grid-area: 6 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: -10%;
        }
        
        #content #item-7, #contenthome #item-7, #contentvisit #item-7, #contentother #item-7 {
            grid-area: 7 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: 0%;
			margin-left: 0%;
        }
        #content #item-8, #contenthome #item-8, #contentvisit #item-8, #contentother #item-8 {
            grid-area: 8 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: -3%;
        }

        #content #item-9, #contenthome #item-9, #contentvisit #item-9, #contentother #item-9 {
            grid-area: 9 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: 15%;
        }

        #content #item-10, #contenthome #item-10, #contentvisit #item-10, #contentother #item-10 {
            grid-area: 10 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: -5%;
        }
         #item-11 {
            grid-area: 11 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: 5%;
        }
        #item-12 {
            grid-area: 12 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: 0%;
        }
        #item-13 {
            grid-area: 13 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: 0%;
        }

        #content #item-13 img {
            width: 88vw;
        }

        #item-14 {
            grid-area: 14 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: 0%;
        }

        #content #item-15 {
            grid-area: 16 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: 0%;
        }

        #content #item-15 img {
            width: 88vw;
        }
        
        #content #item-16 {
            grid-area: 15 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: 0%;
        }

#content #item-17 {
            grid-area: 17 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: 0%;
}

#content #item-18 {
            grid-area: 18 / 1 / span 1 / span 1;
            justify-self: left;
            margin-top: 0;
			margin-left: 0%;
}

        
        #content #item-1 img, #content #item-2 img, #content #item-3 img, #content #item-4 img, #content #item-5 img, #content #item-6 img, #content #item-7 img, #content #item-8 img, #content #item-9 img, #content #item-12 img,#item-13 img, #item-14 img,#item-15 img,#item-16 img,
        #contenthome #item-1 img, #contenthome #item-3 img, #contenthome #item-4 img, #contenthome #item-5 img, #contenthome #item-6 img, #contenthome #item-9 img, #contenthome #item-12 img, 
        #contentvisit #item-1 img, #contentvisit #item-2 img, #contentvisit #item-3 img, #contentvisit #item-4 img, #contentvisit #item-5 img, #contentvisit #item-6 img, #contentvisit #item-7 img, #contentvisit #item-8 img, #contentvisit #item-9 img, #contentvisit #item-10 img, #contentvisit #item-11 img, #contentvisit #item-12 img, #contentvisit #item-13 img, #contentvisit #item-14 img
        {
            width: 88vw !important;
            //width: 140vw !important;
        }
        
        
 /* pages for individual works */
    #work .item p {
        width: 80vw;
    }
    #work #item-1 {
		margin-left: 0;
	}
    video {
        width: 80vw;

    }


}

@media screen and (orientation: landscape) and (max-width: 1000px)  {
    
        .logo {
            width: 40vw;
        }
        
        #topnav {
            top: 10vh;
            left: 50vw;
            width: 50vw;
        }

        .slideshow {
            top: 42vh;
        }
        
        #content, #contenthome, #contentvisit, #contentother {
            margin-top: 50vh;
        }
        
        #contenthome {
            margin-top: 100vh !important;
        }

        #work {
            top: 50vh;
        }

}
@media screen and (orientation: portrait) and (max-width: 1000px)  {

       .map-image {
            max-width: 40vw;
            max-height: 60vh;
        }

        .leaflet-popup {
            width: auto;


}