/**
 * @title	   style.css
 * @copyright  Copyright 2017 mf23.net. All rights reserved.
 * @link       http://mf23.net
 * @author     Patrick Guttner
 **/
 

/* 
    landing/welcome page
*/
.main {
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
    overflow: auto;
}
#landing {
    /* display: flex; */
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
#welcome {
    /* display: flex; */
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.head {
    margin: 35px;
    padding: 50px;
    background: #fff;
}
.head img {
    height: 140px;
}

.content {
    margin: 0px 15%;
}
.content .branding {
    width: 420px; 
}
.content .description {
    width: calc(100% - 420px); 
}

.sub {
    margin: 0px 15% 60px;
}
.sub .column {
    margin: 0px 30px 30px;
}
.sub img {
    float: left;
    height: 40px;
}
.sub p {
    float: left;
    width: calc(100% - 130px);
    margin-left: 20px;
    font-size: 42%;
    font-weight: 600;
}

.foot {
    font-size: 50%;
    text-align: right;
    margin: 0px;
    padding: 80px 110px 40px;
    background: #fff;
}


.button {
    /* display: none; */
    font-size: 66%;
    font-weight: 600;
    text-align: center;
    /* width: 240px; */
    padding: 15px 45px;
    margin: 40px 0px;
    border-radius: 10px;
    color: #20333b;
    background: #addbed;
    cursor: pointer;
    z-index: 1;
}
.button:hover {
    background: #d8e7ed;
}
.button.sec {
    color: #d8e7ed;
    background: #20333b;
    cursor: pointer;
}
.button.sec:hover {
    color: #addbed;
    background: #20333b;
}
.column {
    float: left;
    width: calc(50% - 65px);
    padding: 0px 20px
}
.spacer {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

#welcome .content {
    max-height: 250px;
}
#welcome .content .branding,
#welcome .sub .loader {
    margin: 0px auto;
}
#welcome .sub .loader {
    width: 50%;
    text-align: center;
}
#welcome .sub img {
    float: none;
    margin: 0px auto;
}
#welcome .sub p {
    width: 100%;
    margin: 0;
}
#loaderBarWrapper {
    width: 100%;
    margin: 30px 0px 10px 0px;
}
#loaderBarBg {
    width: 100%;
    height: 15px;
	background: #20333b;
}
#loaderBar {
	width: 0%;
    height: 15px;
    margin-top: -15px;
	background: #addbed;
}

@media all and (max-width: 1580px) {
    .content .branding {
        width: 320px; 
    }
    .content .description {
        width: calc(100% - 320px); 
    }
}
@media all and (max-width: 1024px) {
    .head {
        margin: 30px;
        padding: 45px;
    }
    .head img {
        height: 120px;
    }

    .content {
        margin: 0px 10%;
    }
    
    .sub {
        margin: 0px 10% 60px;
    }
    .sub .column {
        clear: both;
        width: 100%;
        margin: 0px 0px 30px;
    }
    .sub #img_360 {
        height: 28px;
    }
    .sub p {
        font-size: 60%;
    }
    
    .foot {
        font-size: 60%;
        padding: 80px 80px 40px;
    }
}
@media all and (max-width: 768px) {
    .head {
        margin: 25px;
        padding: 40px;
    }
    .head img {
        height: 90px;
    }

    .content {
        margin: 0px 5%;
    }
    .content .description {
        width: 100%; 
    }
    .button {
        font-size: 80%;
        width: 100%;
    }
    
    .sub {
        margin: 0px 5% 60px;
    }
    .sub p {
        font-size: 70%;
    }
    
    .foot {
        font-size: 70%;
        padding: 40px 30px;
    }
}
@media all and (max-width: 480px) {
    .head {
        margin: 20px;
        padding: 30px;
    }
    .head img {
        height: 65px;
    }

    .content {
        margin: 0px 0%;
    }
    .content .branding {
        width: 220px; 
    }
    .button {
        font-size: 100%;
    }
    
    .sub {
        margin: 0px 0% 60px;
    }

    .foot {
        font-size: 75%;
        padding: 30px 20px;
    }
}


/* 
    logo, close, cardboard
*/
#close {
    display: none;
    position: fixed;
    top: -60px;
    right: 60px;
    width: 40px;
    cursor: pointer;
}
#logo {
    display: none;
	position: fixed;
    top: calc(100% + 60px);
    right: 60px;
    width: 200px;
	/* pointer-events: none; */
    cursor: pointer;
}
#cardboard {
    display: none;
    position: fixed;
    top: calc(100% + 60px);
    left: 100px;
    width: 75px;
    margin-bottom: 0px;
    cursor: pointer;
}
#close.on { top: 60px; }
#logo.on { top: calc(100% - 60px - 28px); }
#cardboard.on { top: calc(100% - 60px - 28px); }

@media all and (max-width: 1024px) {
    #close {
        right: 40px;
        width: 30px;
    }
    #logo {
        right: 40px;
        width: 150px;
    }
    #cardboard {
        left: 40px;
        width: 50px;
    }
    #close.on { top: 40px; }
    #logo.on { top: calc(100% - 40px - 18px); }
    #cardboard.on { top: calc(100% - 40px - 18px); }
}
@media all and (max-width: 480px) {
    #close.on { top: 30px; }
    #logo.on { top: calc(100% - 30px - 18px); }
    #cardboard.on { top: calc(100% - 30px - 18px); }
}

/* 
    info poi
*/
#infopoi {
    display: none;
    position: fixed;
    top: 0;
    max-height: calc(100% - 70px);
    max-width: calc(100% - 70px);
    margin: 35px;
    padding: 45px;
    padding-bottom: 0px;
    background: #fff;
    color: #20333b;
    overflow: auto;
}
#infopoi h1, #infopoi h2 {
    float: left;
    width: calc(100% - 45px);
    padding-top: 0px;
    padding-bottom: 50px;
}
#infopoi .close {
    float: left;
    width: 45px;
    clear: right;
    cursor: pointer;
}
#infopoi .row {
    display: inline-block;
    padding-bottom: 45px;
}
#infopoi .column:first-child {
    padding-left: 0px;
    padding-bottom: 50px;
}
#infopoi .column:last-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: calc(50% + 65px);
}
#infopoi .button {
    width: 300px;
    align-self: end;
    margin-bottom: 0px;
}

@media all and (max-width: 1024px) {
    #infopoi {
        max-height: calc(100% - 60px);
        max-width: calc(100% - 60px);
        margin: 30px;
        padding: 35px;
    }
    #infopoi .row {
        padding-bottom: 35px;
    }
    #infopoi .column:last-child {
        width: 100%;
    }
    #infopoi .column {
        padding: 0px;
        width: 100%;
    }
}
@media all and (max-width: 768px) {
    #infopoi .button {
        width: 100%;
    }
}
@media all and (max-width: 480px) {
    #infopoi {
        max-height: calc(100% - 40px);
        max-width: calc(100% - 40px);
        margin: 20px;
        padding: 25px;
    }
    #infopoi .row {
        padding-bottom: 25px;
    }
}


/* 
    facts
*/
#facts {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    pointer-events: none;
}
#factsContent {
    display: none;
}
#factsBtn {
    position: fixed;
    bottom: 60px;
    left: 60px;
    cursor: pointer;
    pointer-events: all;
}