/* general styling */


        @font-face {
            font-family: 'Palanquin';
            src: url("Palanquin/Palanquin-Light.ttf") format("opentype");
            //font-style: normal;
        }


        @font-face {
            font-family: 'Gillius';
            src: url("OTF/GilliusADFNo2-Regular.otf") format("opentype");
            font-style: normal;
        }

        body {
            background-color: #fff;
	    font-family: 'Crimson Text', serif;
            color: #000;
            margin: 0;
            padding: 0;
        }

        * {
            box-sizing: border-box;
        }


        h1, h2 {
            font-family: Palanquin;
            margin: 0;
            padding: 0;

        }


#header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    //background-color: #c75a13;
}

#header img {
    width: 100%;
    position:relative;
    left: 2%;
}

#header h1 {
    color: #fff;
    font-size: 120px;
    line-height: 1;
    text-align: right;
}

#header h2 {
    transform: rotate(-90deg);
    font-size: 60px;
    line-height: 1;
    width: 30%;
    position: absolute;
    bottom: 10%;
    left: -8%;
}

#title img {
    width: 100%;
    position: relative;
    top: -4%;
    left: 0;
}

#title {
    background-color: #c75a13;
    position: absolute;
    top: 100%;
    left: 0;
    height: 40%;
    width: 100%;
}


#content {
    position: absolute;
    top: 55%;
    padding: 5% 0%;
}

#navigation {
    width: 100%;
    border-bottom: 3px solid #c75a13;
    padding: 0 5%;
}

#navigation a {
    font-family: Palanquin;
    font-size: 1.6em;
    color: #000;
    text-decoration: none;
    margin: 0 2% 0 0;
}

#navigation a:hover {
    color: #c75a13;
}

#navigation .active {
    color: #c75a13;
    font-weight: 600;
}

#main-content {
    margin-top: 15%;
    width: 90%;
    padding: 0 5%;
}


#main-content h1 {
    margin-top: 4%;
    margin-bottom: 15%;
    color:  #c75a13;
}

#main-content h2 {
    //margin-top: 4%;
    font-size: 1.1em;
    font-family: 'Crimson Text', serif;
    color:  #c75a13;
}

#main-content p {
    font-size: 1.3em;
    margin-top: 0;
}

#main-content a {
    color: #000;
    }

#main-content a:hover {
    color:  #c75a13;
    }

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@media only screen and (min-width: 1000px) {

    #header {
        width: 66%;
        height: 110vh;
    }

    #title {
        position absolute;
        top: 60%;
    }

    #header h2 {
        bottom: 22%;
    }

    #main-content {
        padding: 0 0;
    }


    #navigation {
        width: 90%;
        padding: 0 0;
    }

    #navigation a {
        font-size: 1.4em;
    }

    #content {
        position: absolute;
        right: 0;
        top: 0;
        width: 33%;
        padding: 5% 4.5% 5% 5%;
    }

}

@media (max-aspect-ratio: 4/3) {
    #navigation a {
        font-size: 1.2em;
    }
}