/* ================================================================================================================== */
/* TYPO */
/* ================================================================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=DM+Serif+Display:ital@0;1&display=swap');

html, body { 
    min-height:100%;
    max-width:100%;
    height:100%;
    font-family: 'Archivo', Arial, sans-serif; 
    font-size: 15px;
    line-height: 1.4em; 
    font-weight: 300;
    color: #fff;
    background-color: #0d0e16;
}

@media only screen and (min-width : 768px)
{
    html, body { font-size: 18px; line-height: 1.6em; } 
}

h1, h2, h3 { 
	font-family: 'DM Serif Display','Archivo', Arial, sans-serif; 
}

h1, h2 { 
	margin:  0 0 1em 0;
}

p { margin: 0; }
p.doorlink { margin: 10px 0 0 0; font-size: 1.2em;  }

.center-outer {
    display: table;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
}

.center-inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.img-logo { max-width: 80%; }

/* ================================================================================================================== */
/* BOOTSTRAP OVERWRITES */
/* ================================================================================================================== */

a { color: #ffa500; }
a:hover { color: #060817; }
 
.pane {
	display: block;
	position: relative;
}

.pane.hero { 
	background-image: url('../img/profile.jpg');
	background-size: cover;
	background-position: center center;
}

.pane.content { 
	overflow: hidden;
	background-image: url('../img/background.jpg');
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}

.padding { padding: 5% 5% 3% 5%; }

@media only screen and (min-width : 768px)
{
    .padding { padding: 8%; }
}

@media screen and (orientation: landscape) 
{
	.panes { height:100vh; width:100vw;}
	.pane { float: left; }
	.pane.hero { width: 40vw; height: 100vh; }
	.pane.content { width: 60vw; height: 100vh; overflow-y: auto; }
}

@media screen and (orientation: portrait) 
{
	.pane { float: none; height: 60vh; }
	.pane.hero { height: 40vh; }
}

.socials {
	text-align: center;
}

.socials a {
	display: inline-block;
	width: 55px;
	height: 55px;
	line-height: 58px;
	font-size: 30px;
	background-color: #ffa500;
	border-radius: 50%;
	color: #0d0e16;
	margin: 0 10px;
}

.socials a:hover {
	background-color: #000;
	color: #ffa500;
}