/* Hero block */

.block.hero {
    position: relative;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.block.hero.fg-image.top.center {
    /*padding: 0 0 80px;*/
}

.block.hero.bottom.center {
    /*padding: 80px 0 0;*/
}

.block.hero .block-foreground {
    position: relative;
    z-index: 3;
    float: left;
    width: 100%;
}


.block.hero p {
    line-height: 1.4;
}

/* TO DO ONLY IF HAVE IMAGE */

.block.hero.fg-image.center .block-foreground,
.block.hero.fg-video.center .block-foreground {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.block.hero.fg-image.center.bottom .block-foreground,
.block.hero.fg-video.center.bottom .block-foreground {
    flex-wrap: wrap-reverse;
}


.block.hero .block-background {
    position: relative;
    z-index: 1;
    float: left;
    width: 100%;
    height: auto;
}

.block.hero video.block-background {
    height: 100%;
}

.block.hero video.block-background.full-width {
    height: auto !important;
    width: 100% !important;
}



/*
middle right > bottom
middle left > bottom
bottom center > top
bottom left/right > gone
*/

/* Entry headers */
.block.hero .block-header {
    position: relative;
    z-index: 3;
    float: left;
    width: 100%;
    margin: 0;
    padding: 80px;
    top: 0;
    bottom: auto;
    left: 0;
    right: auto;
    text-align: left;
}

.block.hero.left .block-header,
.block.hero.right .block-header {
    width: 80%;
}

.block.hero.right .block-header {
    float: right;
}

.block.hero.bottom .block-header {
    top: 40px;
    bottom: 0;
}

.block.hero.center .block-header {
    text-align: center;
}

.block.hero.right .block-header {
    text-align: right;
}



/* Shapes */

.block.hero.ratio .block-foreground {
    position: absolute;
    top: 0;
    bottom: auto;
}

.block.hero.ratio.bottom .block-foreground {
    top: auto;
    bottom: 0;
}

.block.hero.ratio.middle .block-foreground {
    top: 50%;
    bottom: auto;
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.block.hero.fg-image.middle .block-header {
    position: absolute;
    top: 50%;
    bottom: auto;
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

/* Buttons */
.block.hero ul.buttons {
    list-style: none;
    width: 100%;
    margin: 40px 0 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start
}

.block.hero.center ul.buttons {
    justify-content: center;
}

.block.hero.right ul.buttons {
    justify-content: flex-end;
}

.block.hero ul.buttons li {
    margin: 0 20px 20px 0;
    padding: 0;
}

.block.hero.center ul.buttons li {
    margin: 0 10px 10px;
}

.block.hero.right ul.buttons li {
    margin: 0 0 10px 10px;
}

.block.hero ul.buttons li:last-child {
    margin: 0;
}

/* Images & video */
.block.hero img,
.block.hero video {
    position: relative;
    float: left;
    width: 100%;
    z-index: 1;
}

.block.hero .block-foreground picture {
    width: 60%;
}


.block.hero .block-foreground picture img {
    padding: 0;
    width: 100%;
}

.block.hero .block-foreground img,
.block.hero .block-foreground video {
    width: 60%;
    padding: 80px 0;
}

.block.hero.left .block-foreground img:not(.icon),
.block.hero.left .block-foreground video,
.block.hero.right .block-foreground img:not(.icon),
.block.hero.right .block-foreground video {
    float: right;
    position: absolute;
    top: 50%;
    bottom: auto;
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.block.hero.right .block-foreground img:not(.icon),
.block.hero.right .block-foreground video {
    left: 0;
}

.block.hero.center .block-foreground img:not(.icon),
.block.hero.center .block-foreground video {
    padding: 0 0 80px;
    /* now via flexbox */
    /*
    left: 50%;
    right: auto;
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    */
}

.block.hero.center a.link-image {
    display: flex;
    justify-content: center;
}

.block.hero.middle .block-foreground img:not(.icon),
.block.hero.middle .block-foreground video {
    padding: 0;
}

.block.hero.bottom.center .block-foreground img:not(.icon),
.block.bottom.hero.center .block-foreground video {
    padding: 80px 0 0;
}

.block.hero img.block-background,
.block.hero video.block-background {
    position: absolute;
    z-index: 1;
    float: left;
    width: 100% !important;

    max-width: none;
    object-fit: cover;

    top: auto;
    left: auto;
    right: auto;
}


.block.hero img.block-background:not(.rellax),
.block.hero video.block-background:not(.rellax) {
    width: auto;

    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


/* Alignments */

.block.hero.center {
    text-align: center;
}

.block.hero img.icon {
    width: auto;
    height: auto;
    max-height: 64px;
    float: left;
    margin: 0 0 40px;
    padding: 0;
    position: relative;
}

.block.hero.center .icon,
.block.hero.center a.button,
.block.hero.center button,
.block.hero.center .button {
    position: relative;
    left: 50%;
    right: auto;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.block.hero.right {
    text-align: right;
}

.block.hero.right a.button,
.block.hero.right button,
.block.hero.right .button {
    float: right;
}

.block.hero.right .icon {
    float: right;
}


/* Overlay */
.block.hero:before {
    display: none;
    content: " ";
    position: absolute;
    z-index: 2;

    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

}

.block-header.color-default {}

.block-header.color-white,
.block-header.color-white a.button,
.block-header.color-white a {
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

.block-header.color-white a.button {
    border-color: #fff;
}

.block-header.color-white a.button:hover,
.block-header.color-white a:hover {
    color: #fff;
    border-color: #f0f;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0);
}


/* xxx MEDIA QUERIES xxx */

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

    .block.hero video.block-background,
    .block.hero img.block-background:not(.rellax),
    .block.hero video.block-background:not(.rellax) {
        height: auto;
        width: 100%;
    }

    .block.hero video.block-background.full-width {
        min-height: 100%;
        min-width: 100%;
    }

    .block.hero video.block-background.full-width {
        height: auto !important;
        width: 100% !important;
        min-height: 100%;
        min-width: 100%;
    }

    .block.hero a.link-image,
    .block.hero.center a.link-image {
        display: block;
    }

    .block.hero .block-foreground img:not(.icon),
    .block.hero .block-foreground video {
        width: 102%;
        height: auto;
        padding: 80px 20px;
        margin: 0 0 0 -1%;
    }

    .block.hero .block-header {
        padding: 40px;
    }
}

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

    .block.hero video.block-background,
    .block.hero img.block-background:not(.rellax),
    .block.hero video.block-background:not(.rellax) {
        height: 100%;
        width: auto;
    }

    .block.hero.center ul.buttons li {
        margin: 0 0 20px;
        width: 100%;
    }

    .block.hero .block-header,
    .block.hero.left .block-header,
    .block.hero.right .block-header {
        width: 100%;
        padding: 20px;
    }

    .block.hero .block-header.rellax {
        width: 100%;
        padding: 20px 20px 80px;
    }

    .block.hero ul.buttons li {
        margin: 0 20px 10px 0;
    }
}

@media screen and (max-width: 480px) {
    .block.hero .block-header.rellax {
        padding: 20px 20px 120px;
    }

}