@font-face{
    font-family: "alegreya";
    src: url("doc/font/Alegreya/Alegreya-Regular.ttf") format("truetype");
}
@font-face{
    font-family: "alegreya italic";
    src: url("doc/font/Alegreya/Alegreya-Italic.ttf") format("truetype");
}
@font-face{
    font-family: "alegreya bold";
    src: url("doc/font/Alegreya/Alegreya-Bold.ttf") format("truetype");
}

body {
    margin: 0;
    font-size: 19pt;
    font-family: alegreya;
    line-height: 27pt;
    color: var(--grey);
    letter-spacing: 0.012em;

    --red: rgb(196, 79, 53);
    --grey: rgb(138,138,138);
    --lightgrey: #c4c4c4;
	--grey2: #D1D3D5;
	--beige: rgb(201, 193, 134);
    --headsize: 300px;
}

a {
    text-decoration: none;
    color: var(--grey);
}

p {
    margin: 0px;
}

.desktop {
    display: block;
}

.phone {
    display: none;
}

main {
    display: block;
    width: 80%;
    margin: auto;
    position: static;
}

/****HEADER***/
header {
    width: 100%;
    position: relative;
    height: var(--headsize);
}

#headbis {
    width: 100%;
    height: calc(var(--headsize) + 13px);
    background: var(--red);
    margin: auto;
    overflow: hidden;
    position: absolute;
}

#baner {
    width: 100%;
    height: var(--headsize);
    position: absolute;
	background: black;
}

#banerimg {
    display: block;
    height: var(--headsize);
    width: auto;
    margin-left: 50%;
    transform: translateX(-50%);
}

#headtitle {
    width: 90%;
    height: var(--headsize);
    padding-top: 70px;
    padding-left: 10%;
    position: absolute;
}

#roger {
    font-size: 70px;
    color: white;
    line-height: 103px;
    white-space: nowrap;
}

#thedate {
    font-size: 33px;
    color: var(--beige);
    line-height: 20px;
    white-space: nowrap;
	margin-left: 3px;
}


/*****MENU****/
section {
    display: block;
    position: static;
    height: 700px;
    width: 100%;
}

nav {
	font-size: 17pt;
	position: relative;
    width: 190px;
    height: auto;
    margin-top: 33px;
	line-height: 21pt;
	float: right;
}


div.element {
    margin-top: 20px;
	margin-bottom: 24px;
}

a.element {
    color: var(--red);
}

.hyphen {
    width: 50px;
    height: 2px;
    background: var(--grey2);
}
.hyphenCore{
	margin: 35px 0px;
    width: 50px;
    height: 2px;
	background: var(--grey2);
}
div.hyphenM {
    width: 30px;
    height: 1px;
	margin-left: 23px;
    background: var(--grey);
}

div.sep {
    width: 2px;
    height: 800px;
    background: var(--grey2);
    z-index: -1;
	margin-left: -50px;
}

div.navsep {
    position: absolute;
    top: -20px;
}

.sep#MainPage{
    height: 1050px;
}

/*****CONTENT****/

#content {
    position: relative;
    width: 100%;
    height: 0px;
    margin: auto;
}

#core {
	position: absolute;
    width: calc(100% - 290px);
    top: 50px;
    font-family: "alegreya italic";
}
.paraHeight{
	line-height: 13pt;
}

#myDropdown{
    top: 50px;
}

#credit{
    font-size: 13pt;
    color:#c4c4c4;
    line-height: 15pt;
}


span.CharOverride-2{
    
    color: rgb(138,138,138);
}
span.CharOverride-3{
    color: rgb(138,138,138);
}



@media all and (min-width:1400px){
	
	main{
		width:1120px;
	}
}