@font-face {
    font-family: "din_alternatebold";
    font-weight:bold;
    src: url("../fonts/din_alternate_bold.ttf");
    src:
            url("../fonts/din_alternate_bold.woff") format("woff"),
            url("../fonts/din_alternate_bold.woff2") format("woff2")
}


html {
    scroll-behavior: smooth;
}

body, div {
    padding:0;
    margin:0;
    font-family: 'din_alternatebold', arial, sans-serif;

}

#comms {
    background-image:url('../images/comms.jpg');
}

#creative-hidden, #creative-permanent {
    background-image:url('../images/creative.jpg');
}

#graphic-hidden, #graphic-permanent {
    background-image:url('../images/graphic.jpg');
}

#photography-hidden, #photography-permanent {
    background-image:url('../images/photography.jpg');
}

#thought {
    background-image:url('../images/thought.jpg');
}

.content-section {
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

.hidden {
    opacity:0;
}

.permanent {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:-100;
}


.content-section {
    height:100vh;
    width:100%;
}

footer .content-section {
    height: 50vh;
}

h2 {

    color: white;
    text-transform: lowercase;
    font-weight: bold;
    background-position: bottom;
    background-repeat: repeat-x;

}

#contact h2, #graphic-permanent h2 {
    color:black;
}

#comms h2 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAYAAABMDlehAAAAEElEQVR42mNkmP/4PyNtCQCsYzIp5SHXNgAAAABJRU5ErkJggg==);
}

#creative-hidden, #creative-permanent h2 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAQAAADmB58qAAAADklEQVR42mNk+M9ILgIAToIUAfZkvPUAAAAASUVORK5CYII=);
}

#graphic-hidden, #graphic-permanent  h2  {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAQAAADmB58qAAAADklEQVR42mP8/5+RXAQArj4n7fYuNOwAAAAASUVORK5CYII=);
}

#photography-hidden, #photography-permanent h2 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAYAAABMDlehAAAAEElEQVR42mOMPpH4n5G2BADFizJRXv6AHAAAAABJRU5ErkJggg==);
}

#thought h2 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAYAAABMDlehAAAAEElEQVR42mM8wPD/PyNtCQCp7Dbt2CmfRQAAAABJRU5ErkJggg==);
}

#contact h2 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAYAAABMDlehAAAAEElEQVR42mP8/4HhPyNtCQCAMzqtJD4iwQAAAABJRU5ErkJggg==);
}



.menu a, .menu a:link, .menu a:visited, .menu a:focus, .menu a:hover {

    color:white;
    text-decoration:none;
}

footer {
    background-color:lightgrey;

}

footer a, footer a:link, footer a:visited, footer a:focus, footer a:hover {
    color:black;
    text-decoration:none;
}

.footer-bottom {
    display: grid;
    display:-ms-grid;
    grid-template-columns: 3fr 2fr;
    -ms-grid-columns:3fr 2fr;
    grid-gap: 10px;
    align-items:end;
}



.copyright {
    text-align:left;
    font-size:12px;
    color:grey;
}

.copyright a, .copyright a:link, .copyright a:visited, .copyright a:focus, .copyright a:hover {
    color:#666;
}

.cubby {
    text-align:right;
}



h2 {
    opacity:0;
    transition:opacity 1.5s;
}

.reveal-heading h2 {
    opacity:1;
    transition:opacity 1.5s;
}

.permanent#creative-permanent {
    z-index:-75;
}


.permanent.send-to-middle {
    z-index:-50;
}

.container {
    opacity:0;
}

.container.reveal-container {
    opacity:1;
    transition:opacity 3s;
}

#loading-permanent {
    background-color:black;
}