header {
    background: url(../img/demo-header.jpg) no-repeat center center;
    background-size: cover;
    text-align: right;
    padding: 33vh 0;
    position: relative;
    z-index: 1;
    color: #fff;
    background-attachment: fixed;
}
header h1 {
    font-size: 80px;
    text-transform: uppercase;
    font-weight: 700;
    float: right;
    margin-bottom: 50px;
}
header p {
    clear: both;
    font-size: 40px;
    margin-top: 30px;
    margin-bottom: 50px;
    font-weight: 600;
    color: #dfdfdf;
    line-height: 50px;
}
header .btn {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 20px;
    background: #F15B26;
    padding: 10px 48px;
    transition: .3s;
    text-decoration: none;
    color: #fff;
}
header .btn:hover {
    color: #000;
    background: #fff;
}
.bodysection {
    background: #F15B26;
    color: floralwhite;
    text-align: justify;
    padding-top: 50px;
}
.monitor {
    background: url(../img/monitor.png) no-repeat;
    height: 180vh;
    background-position: center;
    background-size: 90% 100%;
    padding: 30px 17vh;
}
.demo{
        background: #F1F1F1;
        width: 85%;
        height: 90%;
        margin-top: 50px;
}
.demo h3{
        padding: 10px;
        text-align: center;
}
@media only screen and (max-width: 1300px) {
    .monitor {
    padding: 30px 12vh;
}
.demo {
    width: 70%;
    height: 80%;
    margin-top: 80px;
}
.left{
    margin-left: 5vh;
}
}
@media only screen and (max-width: 767px) {
    header {
    padding: 30vh 0;
}
.bodysection{
    padding-top: 30px;
    height: auto;
}
.monitor{
    background-image: none;
    height: auto;
}
.demo{
    height: 100%;
    width: 100%;
    margin: 0px;
    margin-bottom: 30px;
    padding: 0px;
}
}
@media only screen and (max-width: 479px) {
    header {
    padding: 15vh 0;
}
}