@font-face {
    font-family: lato;
    src: url(../fonts/lato.woff);
}

@font-face {
    font-family: lora;
    src: url(../fonts/lora.woff);
}
/*CONTENT*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.container {
    display: grid;
    grid-template-columns: 30vw 70vw;
    grid-template-rows: 100vh;
    grid-template-areas: 'sidebar content';
    min-height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.splash {
    background-image: url("../images/background_splash.webp");
}



sidebar {
    grid-area: sidebar;
    background-color: rgba(0,0,0,0.3);
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 18% 1fr 8% 8% 1fr 8% 1fr;
    grid-template-areas: '.' 'sblogo' '.' 'sbtitle' 'sbcopy' '.' 'sbbtn' '.';
    height: 100%;
}

.content {
    grid-area: content;
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 10% 10% 1fr;
    grid-template-areas: '.' 'pagetitleaddress' 'pagetitlecity' '.';
}

.pagetitleaddress {
    grid-area: pagetitleaddress;
    text-align: center;
    padding-bottom: 10px;
}

.pagetitlecity {
    grid-area: pagetitlecity;
    text-align: center;
    padding-top: 20px
}

.padding5 {
    padding-right: 5%;
}

.padding10 {
    padding-right: 10%;
}
/*==SIDEBAR==*/

.sblogo {
    grid-area: sblogo;
    height: 100%;
    display: block;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("../images/logoAlpha.png");
    background-size: contain;
}

.sbtitle {
    grid-area: sbtitle;
    text-align: center;
}

.sbcopy {
    grid-area: sbcopy;
    text-align: center;
}

.sbbtn {
    grid-area: sbbtn;
    align-items: center;
    margin: 0;
    justify-self: center;
    -moz-appearance: none;
    -webkit-appearance: none;
    height: 6vh;
}

    .sbbtn > img {
        height: 6vh;
        max-width: 100%;
        object-fit: cover;
    }

@media only screen and (orientation:portrait) {

    .container {
        grid-template-columns: 100vw;
        grid-template-rows: 40vh 60vh;
        grid-template-areas: 'sidebar' 'content';
    }

    sidebar {
        grid-area: sidebar;
        background-color: rgba(0,0,0,0.3);
        display: grid;
        grid-template-rows: 1fr 25% 1fr 10% 1fr 20% 1fr 20% 1fr;
        grid-template-areas: '.' 'sblogo' '.' 'sbtitle' '.' 'sbcopy' '.' 'sbbtn' '.';
    }


    .pagetitleaddress {
        padding: 0;
    }

    .pagetitlecity {
        padding: 0;
    }

    .sbcopy {
        text-align: center;
        align-content: center;
    }
}


/*TEXT*/


.tflato {
    font-family: lato;
}

.tflora {
    font-family: lora;
}

.twhite {
    color: white;
}

.tpagetitle {
    font-size: 2.75vw;
}

.tportfoliolabel {
    font-size: 1.5vw;
}

.tportfolioaddress {
    font-size: 5vw;
}
.tportfoliocity {
    font-size: 4vw;
}

@media (orientation:portrait) {

    .tportfolioaddress {
        font-size: 10vw;
    }
    .tportfoliocity {
        font-size: 8vw;
        
    }

    .tportfoliolabel {
        font-size: 3.75vw;
        padding: 2%;
    }

    .tpagetitle {
        font-size: 6vw;
    }
}