* {
    z-index: 1;
    box-sizing: border-box;
}

@font-face {
    font-family: 'JosefinSlab'; 
    src: url("JosefinSlab-Light.ttf") format("opentype");
    font-style: normal;
}

body {
    min-height: 100vh;
    font-family: JosefinSlab, times;
    color: #000000;
    font-size: 1.2em;
    margin: 24vh 0 0 5vw;
    padding: 0;
}


@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 !important;
}

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;
}

img {
    max-width: 90vw;
    height: auto;
}


/* 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;
    z-index: 99;
}

#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;
    z-index: 99;
}

@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;
    z-index: 99;
}

#header-h {
    position: relative;
    top: 1vh;
    left: 4vw;
    margin: 0;
    padding: 0;
    background-color: #fff;
    z-index: 99;
}

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

    #header-h .logo {
        width: 60vw;
        z-index: 99;
    }
}


.logo {
    width: 20vw;
}

/* 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 menu */

#block-mcnh-main-menu {
    position: absolute;
    top: 6vh;
    right: 14vw;
    z-index: 99;
    background-color: #ffffff;
    padding: 0.5%;
}

#block-mcnh-main-menu ul {
    padding: 0em;
}

#block-mcnh-primary-local-tasks {
    position: absolute;
    top: 15vh;
}


#block-mcnh-main-menu ul, #block-mcnh-primary-local-tasks ul {
    list-style-type: none;
    margin-bottom:  2em;
}

#block-mcnh-main-menu li, #block-mcnh-primary-local-tasks li {
    float: left;
    margin-right: 3em;
}


@media screen and (max-width: 1000px) {
    header {}
    #block-mcnh-page-title {
        margin-top: 28vh;
    }

    #block-mcnh-main-menu {
        position: absolute;
        top: 15vh;
        left: 6vw;
    }

    #block-mcnh-primary-local-tasks {
        top: 24vh;
    }

    #block-mcnh-main-menu li, #block-mcnh-primary-local-tasks li {
        margin-right: 1em;
    }

    #block-mcnh-page-title {
        //margin-top: 10vh;
    }

    main {
        margin-top: 0vh;
    }
}

/* habitats view block 2 */

.habitats {
#    margin: 3em 3em 3em 0;
}

.habitat-mini div {
    float: left;
    margin: 2vh 2vw 0 0;
}
.habitats-view::after {
  content: "";
  clear: both;
  display: table;
}

.habitats.views-row {
    margin-bottom: 4vh;
}

.leaflet-container {
    margin-bottom: 8vh;
}


/* species view */
.species-view {
}

.species-view::after {
  content: "";
  clear: both;
  display: table;
}

.species {
    float: left;
    margin: 3em 3em 3em 0;
}

nav {
    clear: both;
}

nav li {
    float: left;
    margin-right: 2vw;
    list-style-type: none;
}

.species.views-row img {
    max-width: 40vw;
    heigth: auto;
}

.species.views-row:nth-child(3) {
    margin-left: 2vw;
}

.species.views-row:nth-child(4) {
    margin-left: 4vw;
}

.species.views-row:nth-child(6) {
    margin-left: 4vw;
}

.species.views-row:nth-child(7) {
    margin-left: -2vw;
}

.species.views-row:nth-child(9) {
    margin-left: 3vw;
}

.species.views-row:nth-child(10) {
    margin-left: 3vw;
}

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

    .species.views-row img {
        max-width: 90vw;
    }
    .species.views-row {
        margin-left: 0 !important;
    }
}

/* homepage */
.homepage {
    float: left;
    margin: 3em 3em 3em 0;
}



/* content */
.content {
    width: 90vw;
    margin-bottom: 16vh;
}

.layout--twocol-section {
}

.layout__region--first {
    float: left;
    width: 60vw;
}

.layout__region--second {
    float: right;
    width: 10vw;
    padding: 0vw 2vw;
}

.layout__region--first img, .layout__region--first video  {
    margin-bottom: 14vh;
}

.views-field-title {
    margin-bottom: 1vh;
}

th {
    text-align: left;
    font-weight: normal;
}

td {
    padding-right: 2vw;
}

img {
    padding-bottom: 0.2vh;
}

img:hover {
    box-shadow: -4vh 4.2vh 0px -4vh #211f1f;
    transition: 1.5s ease;
}

@media screen and (max-width: 1000px) {
    video {
        width: 90vw;
        height: auto;
    }
}


/* video homepage */
.home video {
    position: relative;
    top: -30vh;
    left: -5vw;
    width: 100vw;
    height: auto;
    z-index: 0;
}

#block-mcnh-content .layout--onecol:nth-child(2) {
    margin-top: -12vh;
}

.homepage.views-row {
    float: left;
    margin-right: 10vw;
    width: 30vw;
}

.homepage.views-row img {
    max-width: 30vw;
}
.homepage:nth-child(3) {
    margin-left: 4vw;
}

.homepage:nth-child(4) {
    margin-left: -8vw;

}

@media screen and (max-width: 1000px) {
    .home video {
        top: 0;
    }

    .homepage.views-row {
        width: 90vw;
    }

    #block-mcnh-content .layout--onecol:nth-child(2) {
        margin-top: 0vh;
    }

    .homepage.views-row img {
        max-width: 90vw;
    }
    
    .homepage:nth-child(3), .homepage:nth-child(4) {
        margin-left: 0;
    }
}