@font-face {
    font-family: 'Roboto';
    src: local('Roboto'), url('fonts/Roboto-Regular.ttf');
}    
@font-face {
    font-family: 'Roboto-black';
    src: local('Roboto-black'), url('fonts/Roboto-Black.ttf');
}
@font-face {
    font-family: 'Roboto-light';
    src: local('Roboto-light'), url('fonts/Roboto-Light.ttf');
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Roboto', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: #f7ebda;
}

#top-image {
    width: 100%;
    height: 19vh;
    background: url(img/bkg_head.jpg) no-repeat center ;
    background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
}
#top-line {
    display: flex;
    justify-content: center;
    align-items: end;
    width: 100%;
    color: rgb(2, 86, 117);
    text-align: center;
    padding: 3vw 0 2vw 0;
}
.top-line-logo img {
    padding: 0 1.7vw;
    height: calc((7vw + 7em)/2);;
}
#top-line-title1 {
    font-weight: 700;
    font-size: 3.5vh;
    font-size: calc((3.5vw + 3em)/2);
}
#top-line-title2 {
    font-size: 2.4vh;
    font-size: calc((2.4vw + 1.8em)/2);
}
#top-line-title3 {
    font-size: 1.9vh;
    font-size: calc((1.9vw + 1.8em)/2);
}

#page {
    display: grid;
    gap: 3vw;
    grid-template-columns: 1fr 1fr;
    padding: 0 7vw 0 7vw;
    margin-top: 7vh;
    color: #00374b;
}

.page-info {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: min-content;
    grid-template-areas: 
        "title icon"
        "text icon";
    padding: 1vw;
}
.page-info p {
    margin-bottom: .5vw;
}
.inf-title {
    grid-area: title;
    font-family: 'Roboto-black', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;    
    font-size: calc((1.5vw + 1.5em)/2);
    margin-bottom: 1vw;
    color: rgb(2, 86, 117);
}
.inf-icon {
    grid-area: icon;
}
.inf-text {
    grid-area: text;
    font-family: 'Roboto-light', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: calc((1vw + 1em)/2);
}
#ymap {
    display: inline-block;
    border: 1px solid rgb(244, 199, 159);
}
.icon {
    width: calc((6vw + 6em)/2);
    fill:rgb(0, 55, 75);
    padding-left: 1.2vw;
}

#bottom {
    width: 100%;
    display: flex;
    align-items: stretch;
    color: white;
    background-color: rgb(0, 55, 75);
    padding: 1vw;
    font-size: calc((.7vw + .7em)/2);
}
div[id^='bottom-'] {
    text-align: center;
    padding: 0 2vw 0 2vw;
}
div[id^='bottom-'] img {
    border-radius: .5em;
    height: calc((4vw + 4em)/2);
}

#bottom-text {
    align-items: start;
    text-align: left;
}
#bottom svg {
    fill:white;
    height: calc((4vw + 4em)/2);
}
#bottom-zin svg {
    fill: #00374b;
}
#bottom-viz {
    text-align: center;
}
#bottom-space {
    flex-grow: 5;
}
#bottom-copy {
    text-align: right;
    align-self: end;
    font-size: calc((.6vw + .6em)/2);
    cursor: default;
    border: none;
}
#bottom a, #bottom a:visited, #bottom a:active {
    color: white;
    text-decoration: none;
}
#bottom-copy a, #bottom-copy a:visited, #bottom-copy a:active {
    cursor: default;
}

@media (max-width: 900px) {
    .top-line-logo { 
        display: none;
    }    
}
@media (max-width: 768px) {
    #page {
        grid-template-columns: 1fr;
    }
    .inf-text {
        font-size: 1em;
    }
    #bottom {
        font-size: .7em;
    }
    #bottom-copy {
        font-size: .6em;
    }
}
@media (max-width: 576px) {
    .inf-icon {
        display: none;
    }
    .page-info {
        grid-template-columns: 1fr;
    }
    #bottom {
        flex-direction: column;
        align-items: center;
        font-size: 1em;
    }
    div[id^='bottom-'] {
        padding-top: 3vh;
    }
    #bottom-copy {
        font-size: .5em;
    }
}