/* title 'jays iron works' in header */

#headerTitle {
    text-align: center;
    position: absolute;
    top: 6rem;
    left: 50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 3rem;
    font-weight: 900;
    width: 100%;
    margin: 0;
}

/* subtitle */

#headerSubtitle {
    font-size: 1.2rem;
    font-weight: 300;
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 10rem;
    left: 50%;
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    margin: 0;
}

/* header wrapper containing background image */

#header_section {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 20rem;
    margin: 4rem auto 0 auto;
    background-color: #ffffff;
    background-image: url('../images/displayImgs/irongate.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    z-index: 5;
    border: none;
}

/* generate styles for the left and right skew */

#header_section:before, #header_section:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 50%;
    background-color: inherit;
    padding-bottom: 10%;
}

/* left angle */

#header_section:before {
    right: 50%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -ms-transform: skewX(87deg);
    -webkit-transform: skewX(87deg);
    transform: skewX(84deg);
}

/* right angle */

#header_section:after {
    left: 50%;
    -ms-transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -ms-transform: skewX(-87deg);
    -webkit-transform: skewX(-87deg);
    transform: skewX(-84deg);
}

/* ! MEDIA QUERIES */

@media only screen and (max-width: 553px) {
    /* title 'jays iron works' in header */
    #headerTitle {
        font-size: 2.2rem;
    }
    /* subtitle */
    #headerSubtitle {
        font-size: 1.4rem;
    }
}
@media only screen and (max-width: 365px) {
     /* title 'jays iron works' in header */
     #headerTitle {
        font-size: 1.8rem;  
    }
    /* subtitle */
    #headerSubtitle {
        font-size: 1.2rem;
        top: 9rem
    }
}