@font-face {
    font-family: bragga;
    src: url("/css/fonts/BRAGGA.ttf");
}

body{
    background:white;
    font-family: 'Roboto', sans-serif;
    padding: 0 10px;
}

nav{
    display:flex;
    padding:15px;
}

nav ul{
    list-style:none;
    display:flex;
    justify-content:center;
    height:50px;
    flex:1;
    align-items:center;
    font-family: 'Raleway', sans-serif;
    padding:0;
    margin-left:-200px;
}

nav ul li{
    margin-right:20px;
}

a{
    text-decoration:none;
    color:black;
}

nav ul a.active{
    color: #6b6b6b;
}

nav ul a{
    text-transform:uppercase;
    text-decoration: none;
    color:black;
    font-size:21px;
    font-weight:light;
    font-family: "bragga";
}

nav ul a:hover{
    color:#444;
}

.splash{
    width:100%;
    height:65vh;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom:5px;
    display:flex;
}

#content{
    display:flex;
    flex-grow:1;
}

.block-content.text{
    display:flex;
    text-align:center;
    align-items:center;
    background:#e6e6e6;
}

.block-content.text span{
    display:block;
    margin-bottom:10px;
    font-size:22px;
    font-weight:bold;
}

.block-content.text p{
    width:50%;
    margin:auto;
    font-size:19px;
}

.block-content.image{
    display:flex;
    text-align:center;
    align-items:center;
    background-size:cover;
    position:relative;
    justify-content: center;
    transition:all 0.7s linear;
}

.overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.65);
}

.overlay:hover{
    background:rgba(0,0,0,0.5);
    cursor:pointer;
}

.block-content{
    background:#c1bebe;
    width:33%;
    height:350px;
}

.splash .block-content.text{
    background:black;
    color:white;
}

.splash .block-content.text{
    background:black;
    color:white;
}

.splash .block-content{
    width:33.3%;
    margin-top:0px;
    height:100%;
}

.splash .block-filler{
    width:33%;
    height:100%;
}

.footer{
    width:100%;
    display:flex;
    background:black;
    padding:10px 0px;
}

.footer span{
    width:100px;
    margin:auto;
    color:white;
}

@media only screen and (max-width: 960px) {
    /* For mobile phones: */
    nav{display:block;}
    nav ul{margin-left:0;flex-wrap:wrap;}
    #logo{width:200px;margin:auto;}
    #content{flex-wrap:wrap;}
    .splash .block-content{
        width:70%;
    }
    .image{width:100%;}
    #content .contact{margin-left:30%;}
    #content .service{margin-left:15%;}
    #about-splash{background-position-y: 0px !important;}
}

#index-splash{
    background-image: url("../img/home.jpg");
    background-position-y: center;
}

.about{
    background-image: url("../img/about_c.jpg");
    background-position-x: center;
    background-position-y: 50px;
    margin-left:0px;
}

.contact{
    background-image: url("../img/contact.jpg");
    margin-left:66.6%;
}

.service{
    background-image: url("../img/services.jpg");
    margin-left:33.3%;
}

.text_wrapper{
    z-index:999;
    color:white;
    width:50%;
}

.block_title{
    font-size:26px;
}

.text_block{
    display:none;
    color:white;
    z-index:99;
    width:50%;
}
.about .about_text{
    display:block;
}
.service .service_text{
    display:block;
}

.contact .contact_text{
    display:block;
}

.block-content.image a{
    color:white;
}

#contentblock.home{
    display:none;
}