html,
body {
    height: 100%;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.header-section {
    background-color: #fff;
    padding-top: 16px;
    padding-bottom: 16px;
}

.header-section img {
    height: 80px;
    padding: 0 8px;
}

.main-content {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.hero-container {
    background-color: #231f20;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow-x: hidden;
    height: 100%;
}

.hero-container.home {
    background-image: url("../img/royal-fort.jpg");
}

.hero-container.documents {
    background-image: url("../img/wills.jpg");
}

.screen {
    background-color: #BF2E38;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.hero-content {
    position: relative;
    color: #fff;
    height: 100%;
    padding-top: 3em;
    padding-bottom: 3em;
}

.hero-content a {
    font-size: 1.2em;
    color: #fff;
}

.hero-heading {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    display: inline-block;
    padding-bottom: .6em;
    margin-bottom: .6em
}

.hero-subheading {
    font-weight: normal
}

.hero-button {
    font-size: 20px;
    background-color: #BF2E38;
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
    display: block;
    padding: .4em 2em;
    margin-bottom: 2em;
    margin-right: 2em;
    margin-left: 2em;
}


.hero-button:hover,
.hero-button:focus {
    background-color: #231f20;
    background-color: #fff;
}


.hero-button:hover *
{
    color: #BF2E38;
    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out;
}


.hero-button-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #fff;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: skewX(45deg);
    transform: skewX(45deg);
}

.contact-section {
    background-color: #1E1E1E;
    color: #fff;
    padding-top: 2em;
    padding-bottom: 2em;
    margin-top: auto;
}

.contact-section a {
    color: #BF2E38;
}

.footer {
    background-color: #000;
    color: #fff;
    padding: 1em 0;
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .hero-button {
        font-size: 1.75rem;
    }

    .hero-button-content {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

    .hero-content,
    .screen {
        -webkit-clip-path: polygon(0 0, 72% 0, 48% 100%, 0% 100%);
        clip-path: polygon(0 0, 72% 0, 48% 100%, 0% 100%);

    }

    .hero-button {
        margin-left: -2em;
    }
}