html
{
 font-family:'Open Sans';
 font-size:2.5vw;
/* max-font-size of 50px can be easily implemented using a single media query to override the default 1.5vw font-size */
/* scroll-behavior:smooth;*/
}

html, body
{
 margin:0px;
 padding:0px;
 height: 100%;
}

.topdiv
{
 position:relative;
 margin:0 auto;
 border:none;
 width:100%;
/* height:auto;*/
 min-height: 100%;
 background-color:#F1C986;
 background-image: none;
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
/* background-size: 100% 100%;*/
 text-align:center;
}

/* make div fill all available height */
/* https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space */



h1, h3
{
 color:#9D0202;
/* font-style: italic;*/
/* text-shadow: 2px 2px 4px #BEF2EA;*/
 margin:0px;
 padding:0px;
}

h1
{
 position:absolute;
 top:4vh;
 left:0;
 right:0;
 margin-left:auto;
 margin-right:auto;
 padding-right:2vw;
 padding-left:2vw;
/* padding-top:10vh;*/
}


h3
{
 position:absolute;
 bottom:4vh;
 left:0;
 right:0;
 margin-left:auto;
 margin-right:auto;
 padding-right:1vw;
 padding-left:1vw;
/* font-style: normal;*/
/* padding-top:50vh;*/
}



.headdom
{
 font-size:2.5em;
 color:#8B0B04;
 text-align:center;
}

.subtdom
{
 font-size:1.3em;
 color:#8B0B04;
 text-align:center;
}

.frontimage
{
 display:block;
 position:relative;
}

.infomessage
{
 display:block;
 font-size:50%;
/* line-height:0.8;*/
}

.colorize
{
 display:block;
 font-size:60%;
 color:#D80F10;
}


@media (min-width:992.01px)
{

h1
{
 font-size:1.5em;
 width:60%;
}
h3
{
 font-size:0.8em;
}

}

@media (max-width:500px)
{

img
{
/* display:block;*/
 width:100%;
}

}


/*=======================*/
/* Less than 500px block */
/*=======================*/


@media (max-width:500px)
{

h1
{
 font-size:10vw;
}
h3
{
 font-size:5.5vw;
}


}

@media (max-width:500px) and (max-height:700px)
{

h1
{
 font-size:8vw;
}
h3
{
 font-size:5vw;;
}


}

@media (max-width:500px) and (max-height:450px)
{

h1
{
 font-size:8vw;
}
h3
{
 font-size:5vw;
}
.topdiv
{
 background-image:none;
}


}

@media (max-width:500px) and (max-aspect-ratio:43/100)
{

h1
{
 font-size:16vw;
}
h3
{
 font-size:8vw;
}


}

@media (max-width:500px) and (min-aspect-ratio:100/53)
{

h1
{
 font-size:4.5vw;
}
h3
{
 font-size:3.5vw;
}


}

/*=======================*/
/*== End of 500px block =*/
/*=======================*/

/*============================================*/
/* More than 500px and less than 6000px block */
/*============================================*/


@media (min-width:500.1px) and (max-width:6000px)
{

h1
{
 font-size:6.5vh;
}
h3
{
 font-size:3.5vh;
}


}
/*
@media (min-width:500.1px) and (max-width:6000px) and (max-height:700px)
{

h1
{
 font-size:8vw;
}
h3
{
 font-size:5vw;;
}


}
*/
@media (min-width:500.1px) and (max-width:6000px) and (max-height:450px)
{

h1
{
 font-size:4.5vw;
}
h3
{
 font-size:2.9vw;
}
.topdiv
{
 background-image: none;
}


}

@media (min-width:500.1px) and (max-width:6000px) and (max-aspect-ratio:43/100)
{

h1
{
 font-size:16vw;
}
h3
{
 font-size:8vw;
}


}
/*
@media (min-width:500.1px) and (max-width:6000px) and (min-aspect-ratio:100/53)
{

h1
{
 font-size:4.5vw;
}
h3
{
 font-size:3.5vw;
}


}
*/
/*===================================================*/
/* End of more than 500px and less than 6000px block */
/*===================================================*/