body {
    font-family: "Roboto";
    height:100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a, a:visited {
    color: #f27718;
}

a:hover, a:focus {
    color:#202020;
}

header {
    background-color:#000;
    padding:2em;    
}

#slogan {
    color:#fff;
    font-family: "Roboto Light";
    font-size:3em;
    margin-top:0.07em;
}

main {
    flex-grow:1;
    height:100%;
}

main .container {
    padding:2em;
    padding-left:3em;
    padding-top:4em;
    border-left:0.1em solid #ccc;
    height:100%;
}
main .container .vertical {
    margin: 0;
    position:relative;
    top: 20%;
    -ms-transform: translateY(-20%);
    transform: translateY(-20%);
}

main .container .box {
    position:relative;
    margin-left:2em;
    border:0.1em solid #ccc;
    padding:3em;
    margin-bottom:4em;
}

main .container .box .line {
    height:50%;
    top:50%;
    position:absolute;
    width:5.1em;
    left:-5.1em;
    border-top:0.1em solid #ccc;
}

main .container .box h2 {
    font-family: "Roboto Medium";
    font-weight: bold;
    text-transform:uppercase;
    color:#f27718;
    padding-bottom:0.2em;
}

main .container .box h3 span {
    font-family: "Roboto Light";
    padding:0.05em 0.2em 0.05em 0.2em;
    font-size:0.9em;
    background-color:#f27718;
    color:#FFF;
}

footer {
    background-color:#000;
    color:#ccc;
}

footer a {
    color: #ccc;
    text-decoration:none;
}

footer a:focus, footer a:hover {
    color:#f27718;
}

footer div {
   padding:0.5em;
}

footer .contact ul {
    list-style:none;
    text-align: right;
    font-size:1em;
}

/* xxl */
@media (max-width: 1400px) { 
    #slogan {
        font-size: 2.4em;
        margin-top:0.13em;
    }
}

/* xl */
@media (max-width: 1200px) { 
    #slogan {
        font-size: 1.7em;
        margin-top:0.3em;
    }
}

/* lg */
@media (max-width: 992px) { 
}

/* md */
@media (max-width: 768px) { 

    main .container {
        padding:0;
        border:0;
    }
    main .container .box {
        margin:0;
    }

    main .container .box .line {
        display:none;
    }
}


/* sm */
@media (max-width: 576px) { 
    main .container .box {
        margin:0.6em;
    }
}