:root
{		
	--main-color:                               var(--color-vis-tour);

    --menu-background-color:                    var(--color-vis-tour-05);

	--text-color:                               var(--color-vis-tour);

	--headline-text-color:                      #FFF;
    --headline-background-color:                var(--color-vis-tour);
    --subheadline-text-color:                   #FFF;
    --subheadline-background-color:             var(--color-vis-tour-05);

    --header-box-headline-text-color:           var(--color-vis-tour);
    --header-box-headline-background-color:     var(--color-vis-tour-02);
    --header-box-subheadline-text-color:        #FFF;
    --header-box-subheadline-background-color:  var(--color-vis-tour);

    --label-background-color:                   var(--color-vis-tour-01);
    --label-text-color:                         var(--color-vis-tour);
    
     --menu-background-color-header:            var(--color-vis-tour-02);
}

h3
{
    color: var(--text-color);
    margin: 1.5vh 5vw 1.5vh 5vw;
    font-size: 150%;
    text-align: center;
}

.label
{
    font-size: 160% !important;
    xbackground: var(--color-orange-02) !important;
    xcolor: var(--color-orange) !important;
}

/* ====== header ======== */

.img.logo
{
    background-image: url("./img/vis.tour.logo.white.noclaim.svg");
}

.heroimage
{
    position: relative;
    overflow: hidden;
    transform: unset;
}
.heroimage::after
{
    content: '';
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 20%;
    top: 80.1%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

.heroimage .img
{
    background-image: url("./img/hero.jpg");
    background-position: top left;
    transform: unset;    
    animation: kenburns 30s infinite;
    animation-delay: 5s;
    filter: saturate(0.3);
    opacity: 0.9;
}
@keyframes kenburns 
{
    0%    {transform: scale(1);}
    30%   {transform: scale(1.2);}
    100%  {transform: scale(1); }
}
/* paralax test
.heroimage .img
{
    background-image: url("./img/hero.jpg");
    background-position: -50px;
    background-size: calc(100% + 100px);
    transform: unset;
    transition: all 1s;
}
*/

.img.vrperson
{
	height: 60vh;
	position: absolute;
	top: calc(100vh - 60vh - 10vh);
	right: 0px;
	filter: saturate(0.9)
}

.box.header .headline
{
    top: calc(100vh - 150px - 2vh);
    width: unset;
    transform: skew(0,-2deg);
    font-size: 110%;
    line-height: 200%;
    padding: 2vh 8vw 2vh 8vw;
}
.box.header .headline b
{
    font-size: 150%;
}

.box.header .subheadline
{
    top: 90vh;
    width: unset;
    font-size: 110%;
    line-height: 180%;
    padding: 2vh 2vw 2vh 4vw;
    text-align: right;
}
.box.header .subheadline b *
{
    xcolor: var(--color-orange) !important;
}

.box.main .headline
{
    margin-top: 20vh;
}

/* ====== main ======== */

.block.intro h3
{
    margin-bottom: 20px;
}

.block.intro h3:nth-child(5), .block.intro h3:nth-child(5) *
{
    xbackground: var(--color-vis-tour-02);
    xcolor: var(--color-orange);
    text-decoration: underline;
}

.block.site-inspection img
{
    width: 50vw;
    max-width: 600px;
    float: right;
    margin-right: -5vw;
    margin-top: 10vh;
    shape-outside: url("../vis.tour/img/devices.png");
    shape-threshold: 1;
    shape-margin: 3%;
}

.block.efficiency img
{
    width: 30vw;
    float: left;
    margin-left: -5vw;
    shape-outside: url("../vis.tour/img/rocket.png");
    shape-threshold: 1;
    shape-margin: 3%;
    position: relative;
}

.block.technology img
{
    width: 30vw;
    float: right;
    margin-right: -5vw;
    shape-outside: url("../vis.tour/img/roboter.png");
    shape-threshold: 1;
    shape-margin: 3%;
    position: relative;
}

.block.sustainability img
{
    width: 25vw;
    float: left;
    margin-left: -5vw;
    shape-outside: url("../vis.tour/img/support.png");
    shape-threshold: 1;
    shape-margin: 3%;
    position: relative;
}

.block.moduls .grid
{
    xpadding-left: var(--cubesizehalf)
}
.block.moduls .grid-cell
{
    margin: 2vw;
}

iframe#samples
{
    position: relative;
    width: 100%;
    height: 110vh;
    margin-top: -10vh;
    transform: scale(0.9);
}
@media (max-width: 1024px)
{
    iframe#samples
    {
        height: 60vh;
    }
}
@media (max-width: 480px)
{
    iframe#samples
    {
        left: -100vw;
        width: 300vw;
        transform: scale(0.35);
        margin-top: -40vh;
        margin-bottom: -30vh;
    }
}



@media (max-width: 800px)
{
    .heroimage .img
    {
        background-position: center;
    }
    .img.vrperson
    {
        height: 45vh;
        top: 30vh;
    }
    
    .box.header {
        margin-bottom: 5vh;
    }
    .box.header .headline
    {
        top: 82vh;
    }
    .box.header .subheadline
    {
        top: 75vh;
    }

}

@media (max-width: 480px)
{
    .img.vrperson
    {
        margin-right: -15vw;
    }
    .box.header .headline
    {
        font-size: 90%;
        width: 100vw;
        top: calc(100vh - 200px);
    }
    .box.header .subheadline
    {
        font-size: 90%;
        width: 100vw;
        top: calc(100vh - 60px);
    }
    .box.header
    {
        margin-bottom: 5vh;
    }

    .box.main .headline
    {
        margin-top: 5vh;
        width: 70%;
    }
    .box.main .headline h1
    {
        font-size: 150%;
        font-family: "sourcesanspro-regular";
    }
    .box.main .subheadline
    {
        padding: 20px 30px 20px 30px;
    }
    .box.main .subheadline h1
    {
        font-size: 150%;
    }

    .block .label
    {
        width: 100%;
    }

    .block.site-inspection img, .block.efficiency img, .block.technology img
    {
        width: 100%;
    }
    
    .cubeface
    {
        font-size: 120%;
    }
}