:root
{		
	--main-color:                   var(--color-vis-player);
	--main-color-2:                 var(--color-orange);
	--main-color-3:                 hsla(197, 50%, 50%, 1);

    --text-color:                   #FFF;

	--headline-text-color:          #FFF;
	
	--menu-background-color:        var(--color-vis-player-08);
	--menu-background-color-header: var(--color-vis-player-08);
}

body
{
    background: var(--main-color);
}

.headline
{
    width: unset !important;
    text-align: center;
    transform: unset !important;
    margin-bottom: 5vh !important;
}
.headline h1
{
    font-size: 400%;
    font-family: 'mosk-thin';
}

.leaflet-popup-content
{
    color: #000;
}

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

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

.box.header
{
    top: 20vh;
}

.box.header li
{
    margin-bottom: 5px !important;
}
.box.header li:before
{
    font-size: 180%;
}

.box.header #hardware
{
    position: relative;
    padding-left: 5vw;
}
.box.header #hardware img#case
{
    width: 30vw;
    max-width: 300px;
    float: left;
    margin-right: 5vw;
}
.box.header #hardware ul
{
    text-align: left;
    margin-top: 5px;
}
.box.header #hardware h1
{
    line-height: 110%;
}

.box.header #software
{
    position: relative;
    text-align: right;
    top: 6vh;
    padding: 0 5vw 5vh 0;
    margin-bottom: 30vh;
    background: var(--main-color-3);
}
.box.header #software:after
{
    content: '';
    display: inline-block;
    position: absolute;
    width: 100vw;
    height: 20vh;
    left: 0px;
    top: -19.98vh;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    -webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%);
    z-index: -1;
    background: var(--main-color-3);
}
.box.header #software img#imac
{
    width: 40vw;
    max-width: 400px;
    float: right;
    margin: -30vh 0 0 5vw;
}
.box.header #software ul
{
    text-align: right;
    margin-top: 5px;
}
.box.header #software h1
{
    display: inline-block;
    margin-top: -20px;
    line-height: 110%;
}

@media (min-width: 1024px)
{
    .box.header #hardware
    {
        padding-left: 10vw;
    }
    
    .box.header #software
    {
        padding-right: 10vw;
    }
}
@media (min-width: 1600px)
{
    .box.header #hardware
    {
        padding-left: 15vw;
    }
    
    .box.header #software
    {
        padding-right: 15vw;
    }
}


/* ====== hardware ======== */

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

.block.hardware .tag
{
    position: relative;
    top: 5vh;
    width: 25vh;
    height: 25vh;
    border-radius: 50%;
    font-size: 200%;
    font-family: sourcesanspro-regular;
    text-align: center;
    line-height: 25vh;   /* this will vertical align text*/
    margin: 10px;
    background: var(--main-color-2);
}
@media (min-width: 1024px)
{
    .block.hardware .tag
    {
        width: 250px;
        height: 250px;
        line-height: 250px;
    }
}
@media (max-width: 640px)
{
    .block.hardware .tag
    {
        width: 150px;
        height: 150px;
        line-height: 150px;
    }
}


.block.hardware .tag.features
{
    float: left;
    margin-left: -5vw;
    margin-top: -10vh;
    margin-bottom: 5vh;
}

.block.hardware .img.features
{
    position: relative;
    width: 70vh;
    max-width: 600px;
    margin: 5vh 0 10vh 0;
}

.block.hardware .tag.usecases
{
    float: right;
    margin-right: -5vw;
    margin-top: -10vh;
    margin-bottom: 5vh;
}

.block.hardware .img.usecases
{
    position: relative;
    width: 70vh;
    max-width: 600px;
    margin: 5vh 0 0 0;
}



/* ====== software ======== */

.block.software
{
    background: var(--main-color-3);
    width: 100vw;
    max-width: unset;
    padding: 0 15vw 45vh 15vw;
    margin-bottom: -35vh;
    text-align: center;
}

.block.software .tag
{
    position: relative;
    width: 48vh;
    height: 15vh;
    border-radius: 30px;
    font-size: 200%;
    font-family: sourcesanspro-regular;
    text-align: center;
    line-height: 15vh;   /* this will vertical align text*/
    margin: 10px;
    margin-top: -10px;
    background: var(--main-color-2);
}

.block.software .img.backend
{
    position: relative;
    width: 70vh;
    margin-bottom: 10vh;
    margin-top: 5vh;
}

.block.software .tag.backend
{
    width: 40vh;
    float: left;
    margin-left: -5vw;
}

.block.software .img.apps
{
    position: relative;
    width: 40vh;
    margin-top: 5vh;
    margin-bottom: 5vh;    
}

.block.software .tag.apps
{
    width: 40vh;
    float: right;
    margin-right: -5vw;
}

.block.software .img.comapps
{
    position: relative;
    width: 80vh;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.block.software .tag.comapps
{
    width: 50vh;
    float: left;
    margin-left: -5vw;
}



@media (max-width: 800px)
{
    .box.header {
        top: 15vh;
    }
    
    .box.header #hardware {
        margin-bottom: 10vh;
    }
    
    .box.main h1
    {
        line-height: 100%;
    }
    
    img#imac {
        margin: -20vh 0 5vh 5vw !important;
    }  
    img#case {
        margin-bottom: 20vh;
    }
    
    .img.features, .img.usecases, .img.backend {
        margin-left: -10vw !important;
        width: 90vw !important;
    }
    .img.apps {
        xmargin-left: 10vh !important;
        width: 60vw !important;
    }
    
    .tag.backend, .tag.apps {
        margin-left: unset !important;
        margin-right: unset !important;
        float: unset !important;
    }    
}