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

	--text-color:                   var(--main-color);
	--text-color-dark:              var(--color-itouring);

    --menu-background-color:        var(--color-vis-navigator-05);
	    
    --headline-text-color:          #FFF;
    --headline-background-color:    var(--color-vis-navigator-08);
    --subheadline-text-color:       var(--color-vis-navigator);
    --subheadline-background-color: var(--color-vis-navigator-05);

    --header-box-headline-text-color:           #FFF;
    --header-box-headline-background-color:     var(--color-vis-navigator-08);
    --header-box-subheadline-text-color:        var(--color-vis-navigator);
    --header-box-subheadline-background-color:  var(--color-vis-navigator-05);
}

h3
{
    max-width: 80vw;
    margin: 0 auto;
    padding-bottom: 10px;
    color: var(--text-color);
    text-align: justify;
}

.box.main .headline h1
{
    font-family: "sourcesanspro-regular";
}

.block p
{
    font-size: 110%
}

.block
{
    width: 70vw;
    max-width: 1000px;
}

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

.logo.img
{
    background-image: url("img/vis.navigator.logo.white.noclaim.svg");
    filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.3));
}

.heroimage
{
    display: none;
}
.heroimage .img
{
    background-image: url("./img/hero.jpg");
}

.herovideo
{
    position: relative;
    margin-top: -50px;
    width: 100vw;
    max-height: 85vh;
    overflow: hidden;
}
.herovideo .gradient
{
    position: absolute;
    width: 100vw;
    height: 15vh;
    bottom: 0px;
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
.herovideo video
{
    width: 100%;
    opacity: 0.9;
    z-index: -1;
}

.img.stele
{
	position: absolute;
	top: 22vh;
	left: 5vw;
	height: 80vh;
}
.img.iphone
{
	position: absolute;
	top: 40vh;
	left: 25vw;
	height: 45vh;
}

.box.header .headline
{
    top: 73vh;
    left: unset;
    right: 0px;
    width: 45vw;
    text-align: center;
    background: var(--color-vis-navigator-05);
}
.box.header .headline h1
{
    font-family: "mosk-regular";
    font-size: 200% !important;
    Xletter-spacing: 2px;
    line-height: 100%;
}


/* ====== blocks ======== */

/* ====== intro block ======== */
.block.intro h3
{
    margin: 0 5vw 0 5vw;
    font-size: 160% !important;
    text-align: center;
}

/* ====== keyfeatures block ======== */
.block.keyfeatures h1
{
    margin: 3vh 0vw 3vh 0vw;
}

/* ====== versions block ======== */
.block.versions img
{
    width: 90%;
    max-width: 800px;
}

/* ======== benefits block ================ */

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

.block.benefits img
{
    width: 90%;
    max-width: 700px;
}

.textcircle-wrapper
{
	position: relative;
	width: 100%;
	height: 75vw;
	margin: 5vh 0vw 0vh 0vw;
}
.textcircle
{
	position: absolute;
	width: 40vw;
	height: 40vw;
    border-radius: 50%;
    padding-top: 3vw;
    font-size: 1.7vw;
    text-align: center;
}
.textcircle *
{
	color: #003264;
}
.textcircle.house
{
	left: 1vw;
	top: 0px;
	background-color: rgba(51,153,255,0.3);
}
.textcircle.host
{
	right: 1vw;
	top: 0px;
	background-color: rgba(56,192,0,0.3);
}
.textcircle.guest
{
	left: calc(50% - 20vw);
	top: 32vw;
	background-color: rgba(255,128,0,0.3);
}

/* ====== prices block ======== */

.block.prices img
{
    width: 100%;
    max-width: 800px;
}

.block.prices
{
    margin-bottom: 15vh;
}

/* ======== tile ================ */


.tile-wrapper
{
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

.tile, .tile-front, .tile-back
{
	width: 20vw;
	height: 20vw;
    max-width: 300px;
    max-height: 300px;
    min-width: 240px;
    min-height: 240px;
}

.tile
{
	perspective: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.tile.flip .tile-wrapper
{
	transform: rotateY(180deg);
}

.tile-front, .tile-back
{
	position: absolute;
	top: 0;
	left: 0;
	padding: 2vw;
	background-color: var(--color-vis-navigator-02);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

}

.tile-front
{
	z-index: 2;
	transform: rotateY(0deg);
	display: grid;
    align-items: center;
    overflow: hidden;
}

.tile-back
{
	transform: rotateY(180deg);
	display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}
.tile-back li
{
	font-size: 90% !important;
    line-height: 100% !important;
    margin-bottom: 10px;
}

.tile:hover .tile-wrapper
{
  transform: rotateY(180deg);
}

.tile h1
{
    font-family: "sourcesanspro-regular";
}
.tile-back
{
    font-size: 110%;
}

/* ======== grid ================ */

.grid
{
    align-items: unset;
    font-size: 80%;
}

.grid-cell
{
    width: 30%;
    font-size: 90%;
    padding: 2vh 2% 2vh 2%;
    text-align: center;
    color: var(--text-color-dark)
}
.grid-cell *
{
    color: var(--text-color-dark)
}
.block.keyfeatures .grid-cell
{
    background: var(--color-vis-navigator-01);
}



/* ======== icons ================ */

.icon.compass:before
{
	font-family: 'awesome-solid';
	content: "\f124";
}

.icon.info:before
{
	font-family: 'awesome-solid';
	content: "\f05a";
}

.icon.android:before
{
	font-family: 'awesome-brands';
	content: "\f17b";
}

.icon.apple:before
{
	font-family: 'awesome-brands';
	content: "\f179";
}

.icon.buttonmenu:before
{
	font-family: 'awesome-light';
	content: "\f0c9";
	font-size: 1.5em;
}


@media (max-width: 480px)
{
    ul {
        margin-left: 0px;
    }
    ul.checkmark {
        margin-left: -10vw;
    }
    
    .logo.img {
        max-width: 60vw;
    }
    .img.stele {
        top: 25vh;
        left: -70px;
    }
    .img.iphone {
        left: unset;
        right: 5vw;
    }
    .box.header .headline {
        top: 82vh;
        width: 100vw;
        font-size: 120%;
    }
    
    .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;
        margin-bottom: 5vh;
    }
    .box.main .subheadline h1 {
        font-size: 150%;
    }
    
    .grid-cell {
        width: 90%;
        font-size: 110%;
    }
    
    .block.versions img, .block.benefits img, .block.prices img {
        width: 100vw;
        margin-left: -15vw;
    }   

    .tile h2 {
        margin-bottom: -15px;
    }
}