@font-face {
    font-family: 'Bebas Neue2';
    src: url('fonts/BebasNeue-Regular.woff2') format('woff2'),
        url('fonts/BebasNeue-Regular.woff') format('woff'),
        url('fonts/BebasNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


*{
    box-sizing:border-box;
}
body{
    font-family: 'Roboto', sans-serif;
    background:#fff;
    text-align:center;
    padding:50px 0 0;
    color:#000;
    line-height:1.5;
}

.logo{
    width:90%;
    max-width:200px;
    height:auto;
}

h1 {
    color: #fff;
    font-size: 150px;
    text-transform: uppercase;
    font-family: 'Bebas Neue2';
    line-height:1;
    margin:10px 0;
    padding:0;
    font-weight: 400;
}


.container{
    max-width:800px;
    width:90%;
    margin:auto;
}

.hero{
    position:relative;
    margin-bottom:25px;
    background:#0f0f0f;
    padding:50px 0 15px;
    background-size:cover;
    background-position:center center;
    color:#fff;

}

.hero *{
    z-index:1;
    position:relative;
}



a {
    color: #007ba0;
}
a:hover {
    color: #007ba0;
    text-decoration:none;
}

h2, h3, p{
    font-weight:100;
}

h3{
    text-align:left;
    font-weight:600;
}
p{
    text-align:left;
    font-weight:400;
}

.row {
    display: flex;
    justify-content: space-between;
}

.col {
    padding: 15px;
    background: #0f0f0f;
    color: #fff;
    flex-grow: 1;
    margin:0;
    text-align:left;
}

.col.middle-col{
    margin:0 15px;
}

.col p{
    font-weight:500;
}

.col h3{
    margin:0;
    font-weight:500;
}

footer p{
    text-align:center;
    color:#111;
    font-size:12px;
}

.contact-menu{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    background: #eee;
    color: #000;
    z-index:100;
}

a.cta {
    background: #37a641;
    padding: 10px 15px;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    margin: 5px 10px;
    transition: 0.2s ease-in-out;
    font-size: 20px;
    font-weight: lighter;
}

a.cta:hover{
    background:#287d2f;
}

.contact-menu p{
    display: inline;
    font-weight: bolder;
    font-size: 20px;
}


@media (max-width: 875px){
    .contact-menu p {
        display:block;
        text-align:center;
        margin:0
    }
}

@media (max-width: 700px){
    .row {
        display: block;
    }

    .row .col{
        margin:15px 0;
    }

 

}
@media (max-width: 550px){
    h1{
        font-size:80px
    }

    span.hidden-sm {
        display: none;
    }
    
    .contact-menu p {
        display: inline;
    }

    a.cta {
        margin: 5px 5px;
    }

}

@media (max-width: 455px){
    span.hidden-xs {
        display:none;
    }
    a.cta {
        margin: 5px 1px;
    }
    .contact-menu p{
        font-size:17px;
    }
}