/* Copyright 2018 - dato. taPMeppe solutions. All Rights Reserved. */

@font-face {
    font-family: 'FuturaHvBT';
    src: url('FuturaHvBT/FutuHv.ttf') format('truetype');
    font-weight: normal;
}
/*
@font-face {
    font-family: 'FuturaHvBT';
    src: url('FuturaHvBT/FuturaHeavyBT.ttf') format('truetype');
    font-weight: bold;
}
*/

html { 
    overflow: hidden;
    box-sizing: border-box
}
body { 
    margin: 0;
    padding: 50px;
    background-color: #2B2B2B;
    /* background-color: white; /*todo remove this line*/
    visibility: hidden /*the visibility is set by the logic once the placeholder will have been replaced*/
}
html , body
{
    /*
     * font-family: Verdana,sans-serif;
     * font-size: 15px;
     */
    font-family: FuturaHvBT;
    font-size: 16px;
    line-height: 1;
}

body > div {
    max-width: 800px;
    margin: auto;
    position: relative /*set the grid*/
}
body > div > img { width: 100%; border:none }

body > div > div { position: absolute }

body > div > div:first-of-type {
    top: 15%;
    left: 5%;
}
body > div > div:first-of-type > * { float: left }
body > div > div:first-of-type > img { 
    width: 25%;
    min-width: 150px
}
body > div > div:first-of-type > div { 
    margin: 10% 10px;
    width: 50%
}
body > div > div:first-of-type > div > div { 
    color: #607d8b; /*w3.css .w3-blue-grey*/
    margin-bottom: 5px
}
body > div > div:first-of-type > div > a { color: #71BC78 } /*logo: green*/
body > div > div:first-of-type > div > a:hover{ 
    text-decoration: underline;
    cursor: pointer
}

body > div > div:last-of-type {
    right: 15%;
    bottom: calc(15% + 10px);
    font-weight: 900;
    text-align: right;
    color: #2C9CA7 /*logo: blue*/
}
body > div > div:last-of-type > div:first-child { 
    font-size: 175px;
    margin-bottom: -10px;
    margin-right: -5px;
}
body > div > div:last-of-type > div:last-child { font-size: 25px }


@media (max-width: 750px) {
    body { padding: 20px; }
    body > div > div:last-of-type > div:first-child { font-size: 150px }
}
@media (max-width: 620px) {
    body > div > div:first-of-type { left: 0 }
    body > div > div:first-of-type > img { width: 40% }
    body > div > div:first-of-type > div { 
        margin: 5% 10px;
        width: auto
    }
    body > div > div:last-of-type { display: none }
}