html, body{
    margin:0;
    padding: 0;
}
body{
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    color: #FFFFFF;
}

#layout{
    display: block;
    width: 100%;
    position: relative
}

#layout picture,  #layout img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;

}

#home-logo{
    position: absolute;
    display: inline-block;
    z-index: 20;
    /* 239.9234 - 36.9292 = 202.9942
    divide by 428 = 47.428%
    height 285.4464 - 80.9943 = 2044521
    divide by height 926 = 22.079%

    top 80.9943 dive 926 =
     */
}

#home-logo:hover{
    cursor: pointer;
}

.crossline{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
}

.r-condensed{
    font-family: 'Roboto Condensed', sans-serif;
}

.uppercase{
    text-transform: uppercase;
}

#main-content{
    display: block;
    position: absolute;
    background-color: rgb(205,23,25);
    font-size: 16px;
    font-family: 'PT Serif', serif;
}


#main-content a{
    color: #FFFFFF;
    text-decoration: none;
}

#slogan{
    position: absolute;
    z-index:20;
    color: rgb(51,51,51);
    font-weight: 400;
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
}

#footer{
    position: absolute;
    bottom: 20px;
    color: #FFFFFF;
    background-color: rgb(161,26,23);
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
}

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


#layout #footer .icons{
    width: 24px;
    height: auto;
    display: inline-block;
}

.font-sans-serif{
    font-family: 'Roboto', sans-serif;
}

.scrollable-main-content{
    overflow-y: scroll;
    margin-right: 30px;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgb(205,23,25);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(224,97,6);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #333;
}

@media screen and (max-width: 374px){

    #main-content{
        font-size: 12px;
    }


    .scrollable-main-content{
        height: 300px;
    }

    #slogan{
        font-size: 10px;
    }

    #footer{
        padding-top: 5px;
        bottom: 20px;
    }

}

@media screen and  (min-width: 375px) and (max-width: 413px){


    .scrollable-main-content{
        height: 400px;
    }

    #main-content{
        font-size: 14px;
    }


}

@media screen and  (min-width: 414px) and (max-width: 479px){

    #slogan{
        font-size: 13px;
    }

    #main-content{
        font-size: 15px;
    }

    .scrollable-main-content{
        height: 400px;
    }


}

@media screen and (max-width: 767px){

    #home-logo{
        width: 50.7%;
        top: 8.75%;
        left: 9.4%;
        height: 23.43%;
        /*background-color: rgba(0,0,0, 0.6);*/
    }

    #main-content{
        top: 34.23%;
        left: 14%;
        padding-right: 13%;
    }

    #slogan{
        top: 3.18%;
        left: 33.87%;
    }


    #footer{
        left: 14%;
    }
}

@media screen and (min-width: 480px) and (max-width: 539px){

    #main-content{
        font-size: 18px;
    }

    .scrollable-main-content{
        height: 400px;
    }

    #slogan{
        font-size: 14px;
    }


    .crossline{
        font-size: 20px;
    }


}

@media screen and (min-width: 540px) and (max-width: 599px){

    #main-content{
        font-size: 20px;
    }

    .scrollable-main-content{
        height: 400px;
    }

    #slogan{
        font-size: 16px;
    }

    .crossline{
        font-size: 22px;
    }


}

@media screen and (min-width: 600px) and (max-width: 639px){

    #main-content{
        font-size: 21px;
    }

    .scrollable-main-content{
        height: 400px;
    }

    #slogan{
        font-size: 18px;
    }

    .crossline{
        font-size: 23px;
    }


}

@media screen and (min-width: 640px) and (max-width: 699px){

    #main-content{
        font-size: 22px;
    }

    .scrollable-main-content{
        height: 400px;
    }

    #slogan{
        font-size: 19px;
    }

    .crossline{
        font-size: 24px;
    }


}

@media screen and (min-width: 700px) and (max-width: 739px){

    #main-content{
        font-size: 24px;
    }

    .scrollable-main-content{
        height: 400px;
    }

    #slogan{
        font-size: 21px;
    }

    .crossline{
        font-size: 26px;
    }


}

@media screen and (min-width: 740px) and (max-width: 767px){

    #main-content{
        font-size: 25px;
    }

    .scrollable-main-content{
        height: 400px;
    }

    #slogan{
        font-size: 22px;
    }

    .crossline{
        font-size: 27px;
    }


}


@media screen and (min-width: 768px) and (max-width: 1023px){

    #home-logo{
        width: 30%;
        top: 8.75%;
        left: 7.7%;
        height: 23.43%;
        /*background-color: rgba(0,0,0, 0.6);*/
    }

    #main-content{
        top: 42.1%;
        left: 20.3%;
        padding-right: 10.41%;
        font-size: 18px;
    }

    .scrollable-main-content{
        height: 400px;
    }

    #slogan{
        top: 24.12%;
        left: 45.31%;
        font-size: 18px;
    }

    .crossline{
        font-size: 20px;
    }

    #footer{
        left: 20.3%;
        font-size: 16px;
        bottom: 36px;
    }

}

@media screen and (min-width: 840px) and (max-width: 899px){

    #main-content{
        font-size: 20px;
    }

    .crossline{
        font-size: 22px;
    }


}

@media screen and (min-width: 900px) and (max-width: 999px){

    #main-content{
        font-size: 22px;
    }

    .crossline{
        font-size: 24px;
    }


}

@media screen and (min-width: 1000px) and (max-width: 1023px){

    #main-content{
        font-size: 24px;
    }

    .crossline{
        font-size: 26px;
    }


}

@media screen and (min-width: 1024px) and (max-width: 1279px){

    #home-logo{
        width: 26%;
        top: 8.75%;
        left: 10%;
        height: 23.43%;
        /*background-color: rgba(0,0,0, 0.6);*/
    }

    #main-content{
        top: 41.01%;
        left: 42.1%;
        padding-right: 17.77%;
        font-size: 16px;
    }

    .scrollable-main-content{
        height: 400px;
    }

    #slogan{
        top: 28.53%;
        left: 42.1%;
        font-size: 18px;
    }

    .crossline{
        font-size: 18px;
    }


    #footer{
        left: 42.1%;
        font-size: 16px;
        bottom: 16px;
    }
}

@media screen and (min-width: 1140px) and (max-width: 1199px){

    #main-content{
        font-size: 17px;
    }

    .crossline{
        font-size: 19px;
    }


}

@media screen and (min-width: 1200px) and (max-width: 1279px){

    #main-content{
        font-size: 18px;
    }

    .crossline{
        font-size: 20px;
    }


}

@media screen and (min-width: 1280px){

    #home-logo{
        width: 21%;
        top: 8.75%;
        left: 9.4%;
        height: 23.43%;
        /*background-color: rgba(0,0,0, 0.6);*/
    }

    #main-content{
        top: 43.5%;
        left: 35.52%;
        padding-right: 17.135%;
        font-size: 16px;
    }

    .scrollable-main-content{
        height: 320px;
    }

    #slogan{
        top: 27.61%;
        left: 35.52%;
        font-size: 18px;
    }

    .crossline{
        font-size: 18px;
    }


    #footer{
        left: 35.52%;
        font-size: 16px;
        bottom: 10px;
    }
}



@media screen and (min-width: 1600px){

    #main-content{
        font-size: 20px;
    }

    #slogan{
        font-size: 24px;
    }


    .scrollable-main-content{
        height: 400px;
    }

    .crossline{
        font-size: 22px;
    }


}