@media screen and (min-width:1367px) {
#demo-1{
    overflow: hidden;
    width: 100%;
    height: 100%;
}

header,body,html{
    height: 100%;
}
.topH1{
    margin: 0;
    float: left;
    position: absolute;
    top:575px;
    left:175px;
    color: #fff;
    font-size: 42px;
}

.topH11{
    font-size: 150%;
    text-shadow: 1px 2px 15px #000000;
    font-family: 'Cambria Math', sans-serif;
}
.topH12{
    font-size: 80%;
    font-family: 'Cambria Math', sans-serif;
    text-shadow: 1px 2px 15px #000000;
}
footer{
    position: absolute;
    bottom :0;
    margin-left: calc((80%-280px)/2);
    color: #fff; 

}

.sp-buttons{
    display: none;
}
}

@media screen and (min-width:376px) and ( max-width:1366px){
    
#demo-1{
    overflow: hidden;
    width: 100%;
    height: 100%;

}

header,body,html{
    height: 100%;
}
.topH1{
    margin: 0;
    float: left;
    position: absolute;
    top:405px;
    left:175px;
    color: #fff;
    font-size: 42px;
}

.topH11{
    font-size: 150%;
    text-shadow: 1px 2px 15px #000000;
    font-family: 'Cambria Math', sans-serif;
}
.topH12{
    font-size: 80%;
    font-family: 'Cambria Math', sans-serif;
    text-shadow: 1px 2px 15px #000000;
}
footer{
    position: absolute;
    bottom :0;
    margin-left: calc((80%-280px)/2);
    color: #fff; 
    z-index: 2;

}
.sp-buttons{
    display: none;
}
}