@media (max-width: 1020px) {

    .darklink,
    .header-homepage,
    .footer-homepage {
        background: #132732;
        color: #fff !important;
        text-decoration: none
    }
}

@media (max-width: 767px) {
    .m-all {
        float: left;
        padding-right: 0.75em;
        width: 100%;
        padding-right: 0
    }

    .m-1of2 {
        float: left;
        padding-right: 0.75em;
        width: 50%
    }

    .m-1of3 {
        float: left;
        padding-right: 0.75em;
        width: 33.33%
    }

    .m-2of3 {
        float: left;
        padding-right: 0.75em;
        width: 66.66%
    }

    .m-1of4 {
        float: left;
        padding-right: 0.75em;
        width: 25%
    }

    .m-3of4 {
        float: left;
        padding-right: 0.75em;
        width: 75%
    }
}

@media (min-width: 768px) and (max-width: 1019px) {
    .t-all {
        float: left;
        padding-right: 0.75em;
        width: 100%;
        padding-right: 0
    }

    .t-1of2 {
        float: left;
        padding-right: 0.75em;
        width: 50%
    }

    .t-1of3 {
        float: left;
        padding-right: 0.75em;
        width: 33.33%
    }

    .t-2of3 {
        float: left;
        padding-right: 0.75em;
        width: 66.66%
    }

    .t-1of4 {
        float: left;
        padding-right: 0.75em;
        width: 25%
    }

    .t-3of4 {
        float: left;
        padding-right: 0.75em;
        width: 75%
    }

    .t-1of5 {
        float: left;
        padding-right: 0.75em;
        width: 20%
    }

    .t-2of5 {
        float: left;
        padding-right: 0.75em;
        width: 40%
    }

    .t-3of5 {
        float: left;
        padding-right: 0.75em;
        width: 60%
    }

    .t-4of5 {
        float: left;
        padding-right: 0.75em;
        width: 80%
    }
}

@media (min-width: 1020px) {
    .d-all {
        float: left;
        padding-right: 0.75em;
        width: 100%;
        padding-right: 0
    }

    .d-1of2 {
        float: left;
        padding-right: 0.75em;
        width: 50%
    }

    .d-1of3 {
        float: left;
        padding-right: 0.75em;
        width: 33.33%
    }

    .d-2of3 {
        float: left;
        padding-right: 0.75em;
        width: 66.66%
    }

    .d-1of4 {
        float: left;
        padding-right: 0.75em;
        width: 25%
    }

    .d-3of4 {
        float: left;
        padding-right: 0.75em;
        width: 75%
    }

    .d-1of5 {
        float: left;
        padding-right: 0.75em;
        width: 20%
    }

    .d-2of5 {
        float: left;
        padding-right: 0.75em;
        width: 40%
    }

    .d-3of5 {
        float: left;
        padding-right: 0.75em;
        width: 60%
    }

    .d-4of5 {
        float: left;
        padding-right: 0.75em;
        width: 80%
    }

    .d-1of6 {
        float: left;
        padding-right: 0.75em;
        width: 16.6666666667%
    }

    .d-1of7 {
        float: left;
        padding-right: 0.75em;
        width: 14.2857142857%
    }

    .d-2of7 {
        float: left;
        padding-right: 0.75em;
        width: 28.5714286%
    }

    .d-3of7 {
        float: left;
        padding-right: 0.75em;
        width: 42.8571429%
    }

    .d-4of7 {
        float: left;
        padding-right: 0.75em;
        width: 57.1428572%
    }

    .d-5of7 {
        float: left;
        padding-right: 0.75em;
        width: 71.4285715%
    }

    .d-6of7 {
        float: left;
        padding-right: 0.75em;
        width: 85.7142857%
    }

    .d-1of8 {
        float: left;
        padding-right: 0.75em;
        width: 12.5%
    }

    .d-1of9 {
        float: left;
        padding-right: 0.75em;
        width: 11.1111111111%
    }

    .d-1of10 {
        float: left;
        padding-right: 0.75em;
        width: 10%
    }

    .d-1of11 {
        float: left;
        padding-right: 0.75em;
        width: 9.09090909091%
    }

    .d-1of12 {
        float: left;
        padding-right: 0.75em;
        width: 8.33%
    }
}


@media (min-width: 1020px) {
    .load-home .item {
        position: absolute
    }
}

@media (min-width: 1020px) {
    .load-home .item-desc {
        font-size: 2vh
    }
}


@media (max-width: 1020px) {
    .item-background {
        width: 101vw;
        object-fit: cover;
        object-position: 50% 50%;
        height: 100%
    }
}

@media only screen and (orientation: landscape) and (min-width: 481px) {
    .item-background {
        width: 101vw
    }
}

@media only screen and (orientation: portrait) and (min-width: 481px) {
    .item-background {
        width: 100%
    }
}

@media only screen and (min-width: 1020px) {
    .item-background {
        height: auto;
        width: 100%
    }

    .load-single .item-background {
        height: 100%;
        width: auto
    }
}

@media only screen and (min-width: 1020px) {
    .item-background-mobile {
        display: none
    }

    .item-background-desktop {
        display: block
    }

    .homepage-items {
        height: 100%;
        min-width: 100vw;
        margin-right: 0px;
        background: #fff;
        box-shadow: 2px 7px 30px rgba(0, 0, 0, 0.2);
        opacity: 0;
        display: flex;
        align-items: center;
    }

    .home,
    .page-template-page-lab {
        overflow-y: hidden;
        overflow-x: scroll
    }

    .load-home #main,
    .load-lab #main {
        margin-top: 0px;
        position: absolute;
        top: 0vh;
        height: 100%
    }

    .single .homepage-items {
        box-shadow: 10px 15px 30px rgba(0, 0, 0, 0)
    }

    .load-single .item {
        width: 27vw;
        overflow: hidden;
        position: fixed;
        height: 100%;
        transform: scale(1.1) rotate(-3deg)
    }

    .load-single .item-desc {
        display: none
    }

    .load-single .item-background {
        transform: translateX(0) rotate(3deg) !important;
        min-width: 105%;
        min-height: 100%;
        object-fit: cover;
        font-family: 'object-fit: cover;'
    }

    .load-top .item {
        width: 100vw !important;
        overflow: hidden;
        position: relative;
        margin-top: -20px;
        margin-bottom: -4rem
    }

    .load-top .load-top .item {
        height: inherit
    }

    .load-top .item:after {
        content: "";
        display: block;
        background: #fff;
        width: 115%;
        height: 100px;
        z-index: 100;
        position: absolute;
        top: inherit;
        bottom: -50px;
        transform: rotate(-3deg)
    }
}

@media only screen and (min-width: 1020px) and (min-width: 1500px) {
    .load-top .item:after {
        height: 170px;
        bottom: -125px;
        transform: translateX(-10%) rotate(-1.5deg)
    }
}

@media only screen and (min-width: 1020px) {
    .load-top .item-desc {
        display: none
    }

    .load-top .item-background {
        height: auto;
        width: 100vw;
        margin-left: 0
    }
}

@media only screen and (min-width: 1020px) {

    .load-home #main,
    .load-lab #main {
        margin-top: 0;
    }

    .load-home .item:hover .item-background-wrapper {
        transform: scale(1.03)
    }

    .load-home .item:hover .item-desc h3 {
        transform: translateY(-2px)
    }

    .load-home .item:hover .item-desc>p {
        transform: translateY(3px)
    }

    .load-home .item:hover .item-desc>p:before {
        opacity: 1;
        transform: scaleX(1)
    }

    .load-lab .item:hover .item-desc h3 {
        transform: translateY(-2px)
    }

    .load-lab .item:hover .item-desc>p {
        transform: translateY(3px)
    }

    .load-lab .item:hover .item-desc>p:before {
        transform: translateY(-3px) scaleX(1.7)
    }
}


@media only screen and (max-width: 1020px) {
    .header {
        position: fixed;
        top: 0;
        z-index: 1000
    }

    .nav-element {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        z-index: 100;
        background: #152936;
        overflow: hidden;
        animation-duration: 0.7s;
        animation-fill-mode: forwards
    }

    .nav-background {
        position: absolute;
        transform: scale(0.7) rotate(-20deg);
        transform-origin: 50% 10%;
        transition: all 0.7s;
        width: 350%;
        margin-left: -100%;
        height: auto;
        margin-left: -40%;
        margin-top: -10%;
        height: 120%;
        width: 150%;
        background: #132732 url("../images/background-pattern-large.png");
        background: url("../images/background-pattern-large.png"), linear-gradient(135deg, #1a3544 0%, #12242e 100%);
        background-size: 100px 100px, 100% 100%;
        background-size: 300px 300px, 100% 100%
    }

    .footer-links,
    #lang_sel_list {
        opacity: 0;
        transition: all 0.3s;
        position: relative;
        z-index: 100;
        text-align: center;
        margin-top: 3vh;
        margin-bottom: 0vh
    }

    .footer-links .nav,
    #lang_sel_list .nav {
        margin: 0
    }

    .footer-links li,
    #lang_sel_list li {
        display: inline-block !important
    }

    .footer-links li a,
    #lang_sel_list li a {
        color: #fff;
        text-decoration: none;
        padding: 1em;
        width: inherit !important;
        font-size: 0.55em !important;
        text-transform: none !important
    }

    .footer-links li a:focus,
    #lang_sel_list li a:focus {
        color: #fff
    }

    #lang_sel_list {
        text-align: center;
        margin-top: 3vh
    }

    #lang_sel_list .top-nav li {
        display: inline-block
    }

    #lang_sel_list .top-nav li a {
        display: inline-block;
        width: inherit
    }

    .top-nav {
        position: relative;
        z-index: 110;
        font-size: 2em;
        text-transform: uppercase;
        font-family: "proxima-nova-extra-condensed", Helvetica, Arial, sans-serif;
        animation-fill-mode: forwards
    }

    .top-nav li {
        margin-left: auto;
        line-height: 6vh;
        text-align: center;
        animation-fill-mode: forwards
    }

    .top-nav li a {
        letter-spacing: 0.15em;
        padding: 0 0.5em;
        display: inline-block;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        line-height: 12.5vh;
        transition: all 0.2s;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    .top-nav li a:hover,
    .top-nav li a:active {
        color: #fff;
        letter-spacing: 0.1em
    }

    .single .mainmenu li:nth-child(1),
    .page .mainmenu li:nth-child(1) {
        animation-name: topnavclose;
        opacity: 1;
        animation-duration: 0.23s;
        animation-delay: 0.21s
    }

    .single .mainmenu li:nth-child(2),
    .page .mainmenu li:nth-child(2) {
        animation-name: topnavclose;
        opacity: 1;
        animation-duration: 0.26s;
        animation-delay: 0.16s
    }

    .single .mainmenu li:nth-child(3),
    .page .mainmenu li:nth-child(3) {
        animation-name: topnavclose;
        opacity: 1;
        animation-duration: 0.29s;
        animation-delay: 0.11s
    }

    .single .mainmenu li:nth-child(4),
    .page .mainmenu li:nth-child(4) {
        animation-name: topnavclose;
        opacity: 1;
        animation-duration: 0.32s;
        animation-delay: 0.06s
    }

    .single .mainmenu li:nth-child(5),
    .page .mainmenu li:nth-child(5) {
        animation-name: topnavclose;
        opacity: 1;
        animation-duration: 0.35s;
        animation-delay: 0.01s
    }

    .open .menuicon {
        background: rgba(19, 39, 50, 0)
    }

    .open .nav-background {
        transition: all 0.3s;
        transform: scale(1) rotate(0deg)
    }

    .open .nav-element {
        height: 100% !important;
        height: 100vh !important;
        opacity: 1;
        animation-name: navelementopen;
        animation-duration: 0.2s
    }

    .open .top-nav li:nth-child(1) {
        animation-name: topnavopen;
        opacity: 0;
        animation-duration: 0.55s;
        animation-delay: 0.25s
    }

    .open .top-nav li:nth-child(2) {
        animation-name: topnavopen;
        opacity: 0;
        animation-duration: 0.6s;
        animation-delay: 0.3s
    }

    .open .top-nav li:nth-child(3) {
        animation-name: topnavopen;
        opacity: 0;
        animation-duration: 0.65s;
        animation-delay: 0.35s
    }

    .open .top-nav li:nth-child(4) {
        animation-name: topnavopen;
        opacity: 0;
        animation-duration: 0.7s;
        animation-delay: 0.4s
    }

    .open .top-nav li:nth-child(5) {
        animation-name: topnavopen;
        opacity: 0;
        animation-duration: 0.75s;
        animation-delay: 0.45s
    }

    .open .footer-links {
        transition: all 0.5s 0.5s;
        opacity: 1
    }

    .open #lang_sel_list {
        transition: all 0.5s 0.6s;
        opacity: 1
    }

    .backicon {
        position: fixed;
        top: 0;
        right: 50px;
        opacity: 1;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.3s;
        background: #4d4d4d;
        width: 180px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: block;
        color: #FFF !important;
        display: none
    }
}

@media only screen and (min-width: 1020px) {
    .nav-loaded .nav-element {
        animation-name: navelementclose
    }

    .header {
        text-align: right;
        position: fixed;
        z-index: 1000;
        right: 0;
        padding-top: 1.5vh
    }

    .backicon {
        display: none
    }

    .nav-element {
        transition: all 0s
    }

    .active.single .menuicon,
    .active.page .menuicon {
        transform: translateX(0px)
    }

    .active.single .header,
    .active.page .header {
        position: fixed;
        line-height: 57px
    }

    .active.single .nav-element,
    .active.page .nav-element {
        transform: translateX(940px);
        background: #fff;
        width: auto;
        padding-right: 60px;
        position: fixed;
        right: 0;
        transition: all 0.01s;
        box-shadow: 2px 5px 22px rgba(35, 35, 35, 0.1)
    }

    .active.single.open .nav-element,
    .active.page.open .nav-element {
        transform: translateX(0px);
        transition: all 0.3s
    }

    nav {
        display: inline-block
    }

    .nav {
        position: relative;
        z-index: 110;
        font-size: 0.95em;
        margin: 0;
        margin-right: 1.2em;
        line-height: 60px;
        text-transform: uppercase;
        font-family: "proxima-nova-condensed", Helvetica, Arial, sans-serif
    }

    .nav li {
        display: inline-block;
        margin-left: auto;
        text-align: center
    }

    .nav li a {
        width: 100%;
        letter-spacing: 0.1em;
        padding: 0 1.25em;
        display: inline-block;
        font-weight: 600;
        color: #132732;
        transition: all 0.2s;
        position: relative;
        text-decoration: none;
        outline: 0;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    .nav li a:after {
        position: absolute;
        left: 0;
        bottom: 1em;
        content: "";
        width: 100%;
        height: 2px;
        background-color: #295169;
        transform: scaleX(0.5);
        opacity: 0;
        transition: all 0.2s
    }

    .nav li a:hover,
    .nav li a:active {
        color: #295169
    }

    .nav li a:hover:after,
    .nav li a:active:after {
        transform: scaleX(0.7);
        opacity: 1
    }

    .top-nav {
        font-size: 1.05em
    }

    .nav-wrapper {
        display: inline-block
    }

    #lang_sel_list {
        display: inline-block
    }

    #lang_sel_list li a {
        padding: 0 0.5em
    }

    .menuicon {
        width: 60px;
        height: 60px;
        background: #132732;
        display: block;
        transform: translateX(75px);
        transition: all 0.1s;
        position: absolute;
        right: 0
    }

    .menuicon .menuicon-inner {
        padding-top: 10px;
        padding-left: 10px;
        transform: translateX(10px) translateY(10px) scale(1.3)
    }

    .footer-links {
        display: inline-block
    }

    .footer-links li a {
        white-space: nowrap;
        padding: 0 0.8em
    }

    .footer-links li a span {
        display: none
    }

    .footer-links li a:before {
        content: "";
        font-family: 'Font Awesome 5 Brands';
        content: "\f09a";
        display: inline-block
    }

    .footer-links .twitter a:before {
        content: "\f099"
    }

    .footer-links .youtube a:before {
        content: "\f167"
    }

    .footer-links .instagram a:before {
        content: "\f16d"
    }

    .nav-background {
        display: none
    }
}

@media (max-width: 1020px) {

    .header-homepage,
    .footer-homepage {
        z-index: 800;
        padding: 0 1.5em;
        line-height: 55px;
        height: 55px;
        overflow: hidden;
        border: none
    }

    .header-homepage:before,
    .footer-homepage:before {
        content: "« "
    }
}

@media only screen and (min-width: 1500px) {
    .page-article {
        max-width: 950px
    }
}

@media (max-width: 1020px) {
    .logo-dark-wrapper {
        top: 20%;
        left: 20%;
        width: 50vw;
        margin: auto;
        right: 20%;
        bottom: 35%
    }
}

@media (min-width: 1020px) {
    .logo-dark-wrapper {
        top: 50%;
        left: 0;
        margin-left: 12vh;
        margin-top: -12.2vh;
        width: 20vh
    }
}

@media (min-width: 1020px) {
    .logo-dark-wrapper {
        margin-left: 10vh;
        margin-top: -12.2vh
    }
}


@media only screen and (min-width: 1020px) {
    .scrolldown {
        display: none
    }

    .logo-element {
        position: absolute;
        top: 0;
        width: 70vh;
        width: 100%;
        height: 100%
    }

    .logo-element-background {
        transform-origin: left center 0px;
        height: 100%;
        width: 100%;
        overflow: visible
    }

    .logo-element-move {
        transition: all 0.2s;
        transform: translateX(0%);
        transform-origin: top left;
        width: 100%;
        height: 100%
    }

    .logo-element-background-inside {
        height: 120%;
        width: 117%;
        margin-top: -10%;
        background-position: top left;
        display: none
    }
}

@media only screen and (min-width: 1020px) {
    .logo-element {
        position: fixed
    }

    .logo-element-skew {
        position: absolute;
        transform: translateX(110%) translateY(-20%) rotate(-9deg);
        transform-origin: bottom left;
        top: 0;
        left: 0px;
        height: 200%;
        width: 100%;
        background: rgba(255, 0, 0, 0.3);
        background: #fff
    }

    .logo-element-background {
        height: 125%
    }

    .logo-header {
        display: block;
        position: fixed;
        transition: all 0.2s;
        z-index: 100;
        width: 5vh;
        margin-left: 2.6vh;
        margin-top: 3.1vh;
        z-index: 1000
    }

    .page-template-page-top .logo-header {
        position: absolute
    }

    .home .logo-header,
    .page-template-page-lab .logo-header {
        transform: translateX(-200px)
    }

    .home .logo-header.hidden,
    .page-template-page-lab .logo-header.hidden {
        transform: translateX(0px)
    }
}


@media only screen and (min-width: 768px) {
    .team-item {
        position: relative;
        display: flex;
        align-items: center;
        text-align: left;
        width: 100%;
        margin: 2em 0
    }

    .team-item .description {
        width: 50%
    }

    .team-item img {
        width: 100%
    }

    .team-item .image {
        position: relative;
        display: block;
        width: 20%;
        margin-right: 5%
    }

    .team-item .image .userimage-second {
        opacity: 0;
        z-index: 1000;
        display: block;
        width: 100%;
        position: absolute;
        top: 0
    }

    .team-item .image:hover .userimage-second {
        opacity: 1
    }

    .team-item .image:hover img {
        transition: all 0.3s
    }

    .team-item:nth-child(2n) {
        position: relative;
        left: 18%
    }
}

@media only screen and (min-width: 1020px) {
    .team-item .image {
        width: 30%
    }

    .team-item .image:nth-child(2n) {
        left: 30%
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    .marker {
        background-image: url(../images/map/markercluster@2x.png)
    }
}

@media only screen and (min-width: 768px) {
    .map {
        height: 80vh
    }
}

@media (min-width: 1020px) {
    .page-template-page-top .logo-header-dark {
        display: block
    }
}

@media only screen and (min-width: 1020px) {
    sidebar {
        position: absolute !important;
        top: 0;
        width: 25vw;
        max-width: 300px;
        min-width: 290px;
        left: -52%
    }

    sidebar h3 {
        margin-top: 2em;
        margin-bottom: 0
    }

    sidebar p {
        margin-top: 0
    }

    .sidebar-item {
        position: relative
    }
}