/* FONTS */ 
@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;700&family=Arimo:ital,wght@0,400;0,700;1,400&display=swap');

/* BASE */
html, body { 
    min-height: 100%;
    height: 100%;
    font-family: 'Arimo','Open Sans', Arial, sans-serif; 
    font-size: 16px;
    line-height: 1.4em; 
    font-weight: 300;
    color: #161615;
}

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

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { 
    font-family: 'Abhaya Libre','Arimo','Open Sans', Arial, sans-serif; ;
    font-weight: 400;
    margin-bottom: 20px;
    color: #2c2f51;
}

h1 { font-size: 1.8em; margin-top: 0; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
p { margin-bottom: 20px; }
.lead { font-size: 1.2em; }

/* BUTTON OVERWRITES */ 
.btn {
	padding: .25rem 1rem;
	border-radius: .5rem;
}

.btn-fin { background-color: #08407b; color: white; }
.btn-sur { background-color: #0099ae; color: white; }
.btn-fin:hover { color: #08407b; background-color: white; border-color: #08407b; }
.btn-sur:hover { color: #0099ae; background-color: white; border-color: #0099ae; }

.finlink { color: #08407b; }
.surlink { color: #0099ae; }
.finlink:hover, .surlink:hover { text-decoration: none; }

/* CONTEXT COLOR */
.content-08407b h1 { color: #08407b; }
.content-0099ae h1 { color: #0099ae; }

/* Building blocks */ 

.slogan {
	font-family: 'Abhaya Libre','Arimo','Open Sans', Arial, sans-serif; ;
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    margin-top: 20px;
    color: #999;
}

#heroimage {
	height: 500px;
	background-color: #efefef;
	background-image: url('background.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	position: relative;
	z-index: -1;
}

#heroimage::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	background-image: url('arc.svg');
	background-repeat: no-repeat;
	background-size: 100% 150px;
	background-position: bottom center;
	height: 150px;
	z-index: 0;
}

#herooverlay {
	margin-top: -150px;
	z-index: 1;
}

.logo {
	width: 300px;
}

.tablewrapper {
	display: table;
	height: 100%;
	width: 100%;
	vertical-align: middle;
}

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

.rondbox { 
	background-color: #fff;
	border-radius: 20px;
	-webkit-box-shadow: 0px 0px 25px 10px rgba(1,2,1,0.1);
	-moz-box-shadow: 0px 0px 25px 10px rgba(1,2,1,0.1);
	box-shadow: 0px 0px 25px 10px rgba(1,2,1,0.1);
	padding: 25px 25px 5px;
	margin: 20px;
}

.content-08407b { border-bottom: 3px dotted #eee; padding-bottom: 10px; margin-bottom: 25px; }

@media only screen and (min-width : 576px) 
{
	.content-08407b { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
}

@media only screen and (min-width : 768px) 
{
	#heroimage { height: 75vh; }
	#heroimage::after { background-size: 100% 300px; height: 300px; }
	#herooverlay { margin-top: -200px; }
	.logo { width: 400px; }
	.tablewrapper { height: calc(100% - 150px); }
	.tablecenter { text-align: left; }
	.rondbox { margin: 0 0 20px; padding: 35px 50px 20px; }
	.slogan { font-size: 38px; line-height: 42px; }
	.content-08407b { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
}