:root {
    --hawks-blue-000: rgb(0, 25, 76);
    --hawks-blue-030: rgb(0, 51, 109);
    --hawks-blue-060: rgb(1, 93, 162);
    --hawks-blue-080: rgb(94, 149, 214);
    --hawks-blue-100: rgb(222, 241, 255);

    --hawks-silver-000: rgb(75, 81, 83);
    --hawks-silver-020: rgb(125, 131, 134);
    --hawks-silver-050: rgb(187, 193, 197);
    --hawks-silver-070: rgb(218, 223, 227);
    --hawks-silver-100: rgb(245, 249, 250);

    --hawks-red-000: rgb(150, 27, 30);
    --hawks-red-020: rgb(175, 0, 22);
    --hawks-red-040: rgb(208, 67, 63);
    --hawks-red-060: rgb(235, 132, 129);
    --hawks-red-080: rgb(248, 195, 198);

    --hawks-lila-1: rgb(139, 53, 182);
    --hawks-lila-2: rgb(183, 91, 228);
    --hawks-lila-3: rgb(211, 146, 244);

    --hawks-orange-1: rgb(190, 115, 28);
    --hawks-orange-2: rgb(234, 141, 35);
    --hawks-orange-3: rgb(254, 189, 110);

    --hawks-petrol-1: rgb(0, 104, 97);
    --hawks-petrol-2: rgb(0, 157, 148);
    --hawks-petrol-3: rgb(50, 214, 203);

    --hawks-green-1: rgb(101, 144, 101);
    --hawks-green-2: rgb(123, 182, 122);
    --hawks-green-3: rgb(142, 218, 141);
}

/* SCROLLBAR */
::-webkit-scrollbar {
    background: var(--hawks-silver-000);
    height: 10px;
    width: 15px;
}
::-webkit-scrollbar-track {
    background: transparent;
    border-left: 2px solid var(--hawks-blue-080);
}
::-webkit-scrollbar-thumb {
    background: var(--hawks-blue-030);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--hawks-blue-060);
}

body{
    font-family: "Liberation Sans", sans-serif;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    margin: 0;

    scrollbar-color: var(--hawks-blue-030) var(--hawks-silver-000);
    scrollbar-width: thin;
}
h1, h2, h3, h4{
    font-family: "Bebas Neue", sans-serif;
}
h1{
    color: var(--hawks-blue-060);
    font-weight: normal;
    margin: 0;
    padding: 10px 0;
}
p{
    color: rgb(60,60,60) !important;
    font-size: 15px;
    line-height: 23px;
    text-align: justify;
}
canvas{
    display: block;
}
hr{
    border: none;
    border-bottom: 2px solid var(--hawks-silver-070);
}

#layout > .head{
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    height: 50px;
    position: fixed;
    top: 0;
    padding: 10px 30px;
    width: calc(100% - 60px);
    transition: background-color 600ms, box-shadow 600ms;
    z-index: 200;
}
#layout > .head.bg{
    background-color: var(--hawks-blue-000);
    box-shadow: 0 0 40px 0 rgba(75, 81, 83, .9);
}
#layout > .head a{
    color: #ffffff;
    text-decoration: none;
}
#layout > .head > .logo{
    background-image: url(../img/HAWKS_Logo_modern_horizontal_white_2020.svg);
    background-size: contain;
    background-repeat: no-repeat;
    float: left;
    height: 100px;
    width: 336px;
    transition: height 600ms, width 600ms;
}
#layout > .head.bg > .logo{
    height: 50px;
    width: 168px;
}
@media only screen and (max-width: 1600px) {
    #layout > .head > .logo{
        height: calc((100vw - 130px) * 50 / 168);
        width: calc(100vw - 130px);
        max-height: 15vh;
    }
}
#layout > .head > .information{
    background-color: rgba(218, 223, 227, 0.9);
    border-radius: 5px;
    float: left;
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    padding: 10px;
    margin-left: 40px;
    transition: color 600ms, background-color 600ms;
}
#layout > .head > .information a{
    color: var(--hawks-red-020);
    transition: color 600ms;
}
#layout > .head > .information a:hover{
    color: var(--hawks-red-040);
}
#layout > .head.bg > .information{
    background-color: rgba(125, 131, 134, 0.0);
}
#layout > .head.bg > .information a{
    color: var(--hawks-red-040);
}
#layout > .head.bg > .information a:hover{
    color: var(--hawks-red-060);
}
@media only screen and (max-width: 1600px) {
    #layout > .head > .information{
        display: none;
    }
}
#layout > .head  > .menu{
    float: right;
    height: 30px;
}
#layout > .head > .menu > .item{
    color: #ffffff;
    float: left;
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    padding: 10px;
}
#layout > .head > .menu > .item:first-child{
    padding-left: 0;
}
#layout > .head > .menu > .item:last-child{
    padding-right: 0;
}
#layout > .head > .menu > .item:hover{
    text-decoration: underline;
}
@media only screen and (max-width: 1600px) {
    #layout > .head  > .menu{
        display: none;
    }
}
#layout > .head > .hamburger-menu{
    display: none;
}
@media only screen and (max-width: 1600px) {
    #layout > .head > .hamburger-menu{
        color: #ffffff;
        display: block;
        float: right;
    }
    #layout > .head > .hamburger-menu > input[type=checkbox]{
        display: none;
    }
    #layout > .head > .hamburger-menu > .hamburger-content{
        background-image: url(../img/design/HAWKS_Flaeche_Silber_Dunkel.svg);
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        position: fixed;
        height: calc(100vh - 20px);
        top: 0;
        left: 0;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        text-align: center;
        width: 100vw;
        z-index: 210;
        transition: all 300ms;
    }
    #layout > .head > .hamburger-menu > .hamburger-content > .information{
        font-family: "Bebas Neue", sans-serif;
        font-size: 26px;
        padding: 10px;
    }
    #layout > .head > .hamburger-menu > .hamburger-content > .information > a{
        color: var(--hawks-red-060);
    }
    #layout > .head > .hamburger-menu > .hamburger-content > .menu{
        font-family: "Bebas Neue", sans-serif;
        font-size: 26px;
        padding: 10px;
    }
    #layout > .head > .hamburger-menu > .hamburger-content > .menu > .item{
        padding: 5px 0;
    }
    #layout > .head > .hamburger-menu > .hamburg-icon > span.material-icons{
        position: fixed;
        right: 30px;
        z-index: 220;
    }
    #layout > .head > .hamburger-menu > .hamburg-icon > span.material-icons::after{
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;

        font-size: 44px;
        padding: 2px 0;
        content: 'menu';
    }
    #layout > .head > .hamburger-menu > input[type=checkbox]:checked + .hamburg-icon::after {
        transform: rotate(90deg);
    }
    #layout > .head > .hamburger-menu > input[type=checkbox]:checked ~ .hamburger-content {
        height: 100vh;
        max-height: 100vh;
        padding: 10px 0;
    }
    #layout > .head > .hamburger-menu > input[type=checkbox]:checked + .hamburg-icon > span.material-icons::after{
        content: 'close';
    }
}

.loading{
    position: fixed;
    top: 70px;
    left: 0;
    height: 2px;
    width: 100vw;
    z-index: 198;

    transition: background-color 300ms;
}
.loading[visible=true]{
    background: var(--hawks-red-020);
}
.loading[visible=false]{
    pointer-events: none;
}
.container{
    background: var(--hawks-blue-030);
    background-image: url(../img/design/HAWKS_Flaeche_Blau.svg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}
.container a{
    color: var(--hawks-blue-030);
    font-weight: bold;
    text-decoration: none;
}
.container a:hover{
    color: var(--hawks-blue-060);
    text-decoration: underline;
}
.container h1 {
    color: #ffffff;
}
.container .box1:first-child > .content > h1:first-child{
    margin-top: 100px;
}
.container .box1 > .content > img, .container .box2 > .content > .left > img, .container .box2 > .content > .right > img{
    border-radius: 7px;
    margin: 15px 0;
    width: 100%;
}
.container .box1.subnav{
    position: sticky;
    top: 70px;
    z-index: 197;
}
.container .margin{
    margin: 15px 0;
}
.container .image {
    background-size: cover;
    background-position: center center;
    height: 90vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.container .media {
    background-size: cover;
    background-position: center center;
    height: 90vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.container .media > picture > img{
    border-radius: 0;
    height: 100%;
    margin: 0;
    object-fit: cover;
    width: 100%;
}
.container .media > .control{
    left: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    position: absolute;
    top: 0;
    height: 100%;
}
.container .media > .control > .item{
    background-color: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    cursor: pointer;
    margin: 10px;
    opacity: 0.5;
    overflow: hidden;
    width: 200px;

    transition: opacity 350ms;
}
.container .media > .control > .item:hover{
    opacity: 1;
}
.container .media > .control > .item > img{
    display: block;
    width: 100%
}
.container .image > picture > img{
    border-radius: 0;
    height: 100%;
    margin: 0;
    object-fit: cover;
    width: 100%;
}
.container .image > .event{
    background-color: var(--hawks-blue-060);
    background-image: url(../img/design/HAWKS_Flaeche_Blau.svg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    color: #ffffff;
    float: right;
    font-family: "Bebas Neue", sans-serif;
    font-size: 20px;
    padding: 10px;
    position: absolute;
    right: 30px;
    text-align: center;
    top: 90px;
}
.container .image > .event > a{
    color: #FFFFFF;
    font-weight: normal;
}
@media only screen and (max-width: 1250px) {
    @media (orientation: portrait) {
        .container .image {
            height: 40vh;
        }
    }
}
.container .box1::after {
    content: " ";
    display: table;
    clear: both;
}
.container .box1.view360{
    height: 90vh;
    position: relative;
    overflow: hidden;
}
.container .box1.view360 > canvas{
    position: absolute;
    bottom: -9%;
}
.container .box1 > .content{
    color: #ffffff;
    margin: 0 auto 20px;
    overflow: auto;
    text-align: center;
    width: 70%;
}
@media only screen and (max-width: 1250px) {
    @media (orientation: portrait) {
        .container .box1.view360 {
            height: 40vh;
        }
        .container .box1.view360 > canvas{
            position: absolute;
            bottom: 0;
        }
    }
    .container .box1 > .content{
        width: 90%;
    }
}
.container .box1 > .content.nomargin{
    margin: 0 auto 0;
}
.container .box1 > .content > .partner{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.container .box1 > .content > .partner > .item{
    background-color: var(--hawks-silver-100);
    border-radius: 5px;
    max-width: 200px;
    padding: 10px 10px;
    margin: 10px;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
}
.container .box1 > .content > .partner > .item.large{
    max-width: 300px;
}
.container .box1 > .content > .partner > .item img{
    border-radius: 0;
    /*min-height: 60px;*/
    max-height: 70px;
    min-width: 100px;
    max-width: 200px;
    height: max-content;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.container .box1 > .content > .partner > .item.large img{
    min-height: 70px;
    max-height: 105px;
    min-width: 150px;
    max-width: 300px;
}
.container .box1 > .content > .partner > .item > span.name{
    color: var(--hawks-blue-000);
    font-weight: bold;
    padding: 10px 0 5px;
}
@media only screen and (max-width: 1250px) {
    .container .box1 > .content > .partner > .item{
        max-width: 100px;
        padding: 5px 5px;
        margin: 5px;
    }
    .container .box1 > .content > .partner > .item.large{
        max-width: 100px;
    }
    .container .box1 > .content > .partner > .item > img{
        min-height: 17px;
        max-height: 35px;
        min-width: 50px;
        max-width: 100px;
    }
    .container .box1 > .content > .partner > .item.large > img{
        min-height: 50px;
        max-height: 100px;
        min-width: 100px;
        max-width: 200px;
    }
    .container .box1 > .content > .partner > .item > span.name{
        font-size: 13px;
        hyphens: auto;
        word-break: break-all;
    }
}

.container .box1 > .content > .teams{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.container .box1 > .content > .teams > .item{
    background-color: var(--hawks-silver-100);
    border-radius: 5px;
    margin: 10px;
    overflow: hidden;
    position: relative;
    min-height: calc(100vw * 0.7 * 0.5 * 0.60);
    width: calc(50% - 20px);
}
.container .box1 > .content > .teams > .item > .season{
    background-color: var(--hawks-silver-070);
    border-radius: 5px;
    font-family: "Bebas Neue", sans-serif;
    font-size: 40px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
}
.container .box1 > .content > .teams > .item > .season a{
    color: var(--hawks-blue-030);
    text-decoration: none;
}
.container .box1 > .content > .teams > .item > .season a:hover{
    color: var(--hawks-blue-000);
    text-decoration: underline;
}
.container .box1 > .content > .teams > .item > img{
    border-radius: 0;
    display: block;
    width: 100%;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
@media only screen and (max-width: 1250px) {
    .container .box1 > .content > .teams > .item{
        min-height: calc(100vw * 0.7 * 0.60);
        width: 100%;
    }
    .container .box1 > .content > .teams > .item > .season{
        font-size: 30px;
    }

}
.container .box1 > .content > .team{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.container .box1 > .content > .team > .item{
    background-color: var(--hawks-silver-100);
    border-radius: 5px;
    max-width: 200px;
    margin: 10px;
    overflow: hidden;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}
.container .box1 > .content > .team > .item > img{
    border-radius: 0;
    max-height: 200px;
    max-width: 200px;
    height: 200px;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.container .box1 > .content > .team > .item > span.name{
    color: var(--hawks-blue-000);
    font-family: "Bebas Neue", sans-serif;
    font-size: 20px;
    font-weight: normal;
    padding: 10px 5px 5px;
}
.container .box1 > .content > .team > .item > span.position{
    color: var(--hawks-blue-000);
    font-weight: bold;
    padding: 0 5px 5px;
    margin: auto 0;
}
@media only screen and (max-width: 1250px) {
    .container .box1 > .content > .team > .item{
        max-width: 150px;
        margin: 5px;
    }
    .container .box1 > .content > .team > .item > img{
        max-height: 150px;
        max-width: 150px;
        height: 150px;
    }
    .container .box1 > .content > .team > .item > span.name{
        font-size: 16px;
    }
    .container .box1 > .content > .team > .item > span.position{
        font-size: 14px;
    }
}

.container .box1 > .content > .subnavigation{
    background-image: url(../img/design/HAWKS_Flaeche_Silber_Dunkel.svg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;

    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

.container .box1 > .content > .subnavigation > a{
    border-left: 1px var(--hawks-silver-050);
    color: var(--hawks-blue-100);
    font-family: "Bebas Neue", sans-serif;
    font-size: 20px;
    font-weight: normal;

    line-height: 42px;
    padding: 0 10px;
}
.container .box1 > .content > .subnavigation > a.current{
    background: var(--hawks-blue-000);
}
.container .silver{
    background-image: url(../img/design/HAWKS_Flaeche_Silber.svg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: #ffffff !important;

    /*-webkit-mask-image: linear-gradient(*/
    /*    to bottom,*/
    /*    hsla(0, 0%, 0%, 0) 0px,*/
    /*    hsla(0, 0%, 0%, 0.049) 0.775px,*/
    /*    hsla(0, 0%, 0%, 0.175) 1.45px,*/
    /*    hsla(0, 0%, 0%, 0.352) 2.06px,*/
    /*    hsla(0, 0%, 0%, 0.55) 2.645px,*/
    /*    hsla(0, 0%, 0%, 0.741) 3.235px,*/
    /*    hsla(0, 0%, 0%, 0.896) 3.875px,*/
    /*    hsla(0, 0%, 0%, 0.987) 4.595px,*/
    /*    hsl(0, 0%, 0%) 5px,*/
    /*    hsl(0, 0%, 0%) calc(100% - 10px),*/
    /*    hsla(0, 0%, 0%, 0.987) calc(100% - 9.19px),*/
    /*    hsla(0, 0%, 0%, 0.896) calc(100% - 7.75px),*/
    /*    hsla(0, 0%, 0%, 0.741) calc(100% - 6.47px),*/
    /*    hsla(0, 0%, 0%, 0.55) calc(100% - 5.29px),*/
    /*    hsla(0, 0%, 0%, 0.352) calc(100% - 4.12px),*/
    /*    hsla(0, 0%, 0%, 0.175) calc(100% - 2.9px),*/
    /*    hsla(0, 0%, 0%, 0.049) calc(100% - 1.55px),*/
    /*    hsla(0, 0%, 0%, 0) 100%*/
    /*);*/
}

/*.container > .silver:last-child{*/
/*    -webkit-mask-image: linear-gradient(*/
/*            to bottom,*/
/*            hsla(0, 0%, 0%, 0) 0px,*/
/*            hsla(0, 0%, 0%, 0.049) 1.55px,*/
/*            hsla(0, 0%, 0%, 0.175) 2.9px,*/
/*            hsla(0, 0%, 0%, 0.352) 4.12px,*/
/*            hsla(0, 0%, 0%, 0.55) 5.29px,*/
/*            hsla(0, 0%, 0%, 0.741) 6.47px,*/
/*            hsla(0, 0%, 0%, 0.896) 7.75px,*/
/*            hsla(0, 0%, 0%, 0.987) 9.19px,*/
/*            hsl(0, 0%, 0%) 10px*/
/*    );*/
/*}*/
/*.container > .silver h1{*/
/*    color: var(--hawks-blue-060);*/
/*}*/
.container .darksilver{
    background-image: url(../img/design/HAWKS_Flaeche_Silber_Dunkel.svg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: #ffffff !important;
}
.container .box2 {
}
.container .box2 > .content{
    color: #ffffff;
    margin: 0 auto;
    width: 70%;
    display: flex;
    justify-content: space-between;
}
@media only screen and (max-width: 1250px) {
    .container .box2 > .content{
        flex-flow: column nowrap;
        width: 90%;
    }
}
.container .box2::after {
    content: " ";
    display: table;
    clear: both;
}
.container .box2 > .content > .left{
    align-self: center;
    float: left;
    width: calc(50% - 30px);
}
.container .box2 > .content > .right{
    align-self: center;
    float: right;
    width: calc(50% - 30px);
}
@media only screen and (max-width: 1250px) {
    .container .box2 > .content > .left{
        float: inherit;
        width: 100%;
    }
    .container .box2 > .content > .right{
        float: inherit;
        width: 100%;
    }
}
.box{
    background-color: var(--hawks-silver-100);
    color: #000000;
    border-radius: 7px;
    margin: 15px 0;
    padding: 10px;
}
.box:after{
    content: "";
    clear: both;
    display: table;
}
.box > h1{
    color: var(--hawks-blue-030);
}
.box button{
    float: right;
}

.foot{
    background-image: url(../img/design/HAWKS_Flaeche_Silber_Dunkel.svg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-size: 17px;
    line-height: 40px;
}
.foot a{
    color: #FFFFFF;
    font-weight: normal;
}
.foot a:hover{
    color: #FFFFFF;
}
.foot img{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.foot > .content{
    margin: 0 auto;
    padding: 10px 0;
    width: 70%;
}
@media only screen and (max-width: 1250px) {
    .foot > .content{
        width: 90%;
    }
}
.foot > .content::after {
    content: " ";
    display: table;
    clear: both;
}
.foot > .content > .partner{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.foot > .content > .partner > .item{
    height: 70px;
    max-width: 200px;
    padding: 20px 10px;
}
.foot > .content > .partner > .item > img{
    height: 100%;
    max-height: 70px;
    max-width: 200px;
}
@media only screen and (max-width: 1250px) {
    .foot > .content > .partner > .item{
        height: 35px;
        max-width: 100px;
        padding: 10px 5px;
    }
    .foot > .content > .partner > .item > img{
        max-height: 35px;
        max-width: 100px;
    }
}

.foot > .content > .socialmedia{
    display: flex;
    flex-flow: row wrap;
}
.foot > .content > .socialmedia > .item{
    height: 36px;
    padding: 10px;
}
.foot > .content > .socialmedia > .item > a > img{
    height: 100%;
}

.facts{
    display: flex;
    justify-content: space-around;
    flex-flow: wrap row;
}
.facts > .item{
    margin: 5px 40px;
}
.facts > .item > .number{
    font-family: "Bebas Neue", sans-serif;
    font-size: 60px;
    text-align: right;
}

.facts > .item > .number > .small{
    font-size: 30px;
}
.facts > .item > .description{
    font-size: 18px;
    font-weight: bold;
}
.facts > .item > .description a{
    color: #ffffff;
}
.facts > .item > .description a:hover{
    color: var(--hawks-blue-100);
}

.gallery{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.gallery > .item{
    margin: 10px;
}
.gallery > .item > img{
    cursor: pointer;
    width: 200px;

    transition: opacity 300ms;
}
@media only screen and (max-width: 1250px) {
    .gallery > .item > img{
        width: 100px;
    }
}
.gallery > .item > img:hover{
    opacity: 0.5;
}
.gallery_overlay{
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 300;

    display: none;
}
.gallery_overlay.vis{
    display: block;
}
.gallery_overlay > .popup{
    background-color: #ffffff;
    border-radius: 10px;
    margin: 0 auto;
    max-height: 90%;
    min-height: 100px;
    min-width: 100px;
    top: 50%;
    overflow: hidden;
    position: relative;
    width: 70%;

    transform: translateY(-50%);
}
.gallery_overlay > .popup > img{
    display: block;
    width: 100%;
}
.gallery_overlay > .popup > .overlay{
    height: calc(100% - 10px);
    padding: 5px;
    position: absolute;
    top: 0;
    width: calc(100% - 10px);
    z-index: 305;
}
.gallery_overlay > .popup > .overlay > .coypright{
    background-color: var(--hawks-silver-020);
    border-radius: 7px;
    font-family: "Bebas Neue", sans-serif;
    font-size: 18px;
    padding: 3px 6px;
    margin: 0 0 5px 0;
    position: absolute;
    bottom: 0;
}
.gallery_overlay > .popup > .overlay > .left, .gallery_overlay > .popup > .overlay > .right{
    border-radius: 45px;
    cursor: pointer;
    color: #ffffff;
    height: 90px;
    left: 0;
    margin: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 90px;

    transition: background-color 300ms;
}
.gallery_overlay > .popup > .overlay > .right{
    left: auto;
    right: 0;
}
.gallery_overlay > .popup > .overlay > .left:hover, .gallery_overlay > .popup > .overlay > .right:hover{
    background-color: var(--hawks-blue-030);
}
.gallery_overlay > .popup > .overlay > .left > span.material-icons, .gallery_overlay > .popup > .overlay > .right > span.material-icons{
    font-size: 90px;
}

/* TABS */
.tabs {
    border-radius: 8px;
    overflow: hidden;
}
.tabs > .tab {
    color: #ffffff;
    overflow: hidden;
    width: 100%;
}
.tabs > .tab > .tab-label {
    background: var(--hawks-blue-030);
    cursor: pointer;
    display: flex;
    font-weight: bold;
    justify-content: space-between;
    padding: 1em;
}
.tabs > .tab > .tab-label:hover {
    background: var(--hawks-blue-060);
}
.tabs > .tab > .tab-label::after {
    content: "❯";
    height: 1em;
    text-align: center;
    transition: all 300ms;
    width: 1em;
}
.tabs > .tab > .tab-content {
    background: white;
    color: #000000;
    max-height: 0;
    padding: 0 1em;
    overflow: hidden;
    transition: all 300ms;
}
.tabs > .tab > input[type=checkbox]{
    display: none;
}
.tabs > .tab > input[type=checkbox]:checked + .tab-label {
    background: var(--hawks-blue-000);
}
.tabs > .tab > input[type=checkbox]:checked + .tab-label::after {
    transform: rotate(90deg);
}
.tabs > .tab > input[type=checkbox]:checked ~ .tab-content {
    max-height: 100vh;
    padding: 1em;
}

.fb_iframe_widget span{
    padding: 10px calc((100% - 500px) / 2);
}

.countdown{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.countdown > .item{
    background-color: var(--hawks-silver-070);
    border-radius: 3px;
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    margin: 5px;
    overflow: hidden;
}
.countdown > .item > .name{
    background-color: var(--hawks-silver-000);
    padding: 5px 5px 0;
}
.countdown > .item > .number{
    color: var(--hawks-silver-000);
    font-family: "Liberation Sans", sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding: 5px;
    text-align: center;
}

.copyright{
    background-color: var(--hawks-silver-020);
    border-radius: 7px;
    bottom: 0;
    color: #000000;
    font-family: "Bebas Neue", sans-serif;
    font-size: 18px;
    margin: 15px;
    opacity: 0.5;
    padding: 3px 6px;
    position: absolute;
    transition: opacity 300ms;
    z-index: 5;
}
.copyright:hover{
    opacity: 1;
}

.ds_image > img{
    position: absolute;
    top: calc(50% - 100px);
    width: 100%;
    transition: opacity 300ms linear;
}

.cards{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.cards > .item{
    background: #FFFFFF;
    box-shadow: 0 0 10px -2px rgba(0,0,0,.4);
    border-radius: 10px;
    color: black;
    padding-bottom: 35px;
    position: relative;
    margin: 10px;
    min-width: 200px;
    overflow: hidden;
    width: 300px;
}
.cards > .item > h2{
    color: var(--hawks-blue-030);
}
.cards > .item > p{
    color: initial;
}
.cards > .item > img{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
}
.cards > .item button{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.picture{
    position: relative;
}
.picture[status=loading]{
    background-color: var(--hawks-silver-000);
    min-height: 60px;
}
.picture > img{
    display: block;
    left: 0;
    margin: 0 auto;
    top: 0;
    width: 100%;
}
.picture > .loader{
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    z-index: 100;
}
.team > .item > .picture > img{
    width: 200px;
}
@media only screen and (max-width: 1250px){
    .team > .item > .picture > img{
        width: 150px;
    }
}
/* LOADING CIRCLE */
.loader {
    border: 8px solid var(--hawks-silver-050);
    border-top: 8px solid var(--hawks-blue-060);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* FACEBOOK */
.facebook{
    background-color: var(--hawks-blue-030);
    color: #FFFFFF;
    border-radius: 7px;
    margin: 15px 0;
    max-height: 60vh;
    padding: 10px;
    overflow-y: auto;
}
.facebook > .post{
    background-color: var(--hawks-silver-100);
    color: #000000;
    border-radius: 7px;
    margin: 15px 0;
    padding: 10px;
}
.facebook > .post > .attachments{
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow-x: auto;
}
.facebook > .post > .attachments > img{
    max-width: 100%;
}

/* DIALOG */
.dialog > .box {
    right: calc((100% - 670px) / 2) !important;
}