/* ================================================================================================================== */
/* INLINE VARS */ 
/* ================================================================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wdth,wght@0,6..12,125,200..1000;1,6..12,125,200..1000&family=Sora:wght@100..800&display=swap');

:root {
    --clr-primary:          #213948;
    --clr-primary-darker:   #1a242b;
    --clr-secondary:        #dd6e2d; 
    --clr-secondary-darker: #633e28;
}

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

html, body { 
    min-height:100%;
    max-width:100%;
    height:100%;
    font-family: 'Sora', Arial, sans-serif; 
    font-size: 15px;
    line-height: 1.4em; 
    font-weight: 300;
    color: #fff;
    background-color: var(--clr-primary);
}

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

h1 { font-weight: 600; color: var(--clr-secondary); font-family: 'Nunito Sans', 'Sora', Arial, sans-serif; }
h1 small { font-weight: 200; font-family: 'Sora', Arial, sans-serif; }

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

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

a { color: var(--clr-secondary); }
a:hover { color: var(--clr-secondary-darker); }

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

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

.pane.content { 
	overflow: hidden;
	padding-bottom: 50px;
	position: relative;
}

.viewline {
	max-width: 100%;
	position: absolute;
	bottom: 30px;
	left: 10px;
	right: 10px;
}

.padding { padding: 5%; }

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

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

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

.socials {
	margin: 2em 0 3em;
}

.socials a {
	display: inline-block;
	text-align: center;
	width: 55px;
	height: 55px;
	line-height: 58px;
	font-size: 30px;
	background-color: #fe7f2d;
	border-radius: 50%;
	color: white;
	margin: 0 15px 0 0;
}

.socials a:hover {
	background-color: var(--clr-primary-darker);
}

.card { background-color: var(--clr-primary-darker); }
.card-body { color: white; }

.center-outer {
    display: table;
    min-height: 400px; 
    height: 100%;
    width: 100%;
}

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