/* STYLESHEET */

/* FONTS ADDENDUM */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

/* <style> ========================================================================================================== */
/* ROOT */
/* ================================================================================================================== */

:root {
    
    --clr-primary:          #e77e23;
    --clr-primary-darker:   #a73e00;

    --font-primary:         'Sora', Arial, sans-serif; 
    --font-secondary:       'Sora', Arial, sans-serif; 

    --main-border-radius:               10px;
    --main-border-radius-outspoken:     40px;
    
    --theme-accent1:    #e77e23;
    --theme-accent2:    #9EBD6F;
    
    --theme-text:       #030303;
    --theme-muted:      #b7c2de;
    
    --theme-bg:         #ffffff;
    --theme-bg-alt:     #f3eddb;
    --theme-card:       #ffffff;
    --theme-card-alt:   #f1f1f1;
}


/* ================================================================================================================== */
/* BASIC SETTINGS */
/* ================================================================================================================== */

html, body 
{ 
    font-family: var(--font-primary);
    font-weight: 300;

    min-height:100%;
    max-width:100%;
    height:100%;
    
    background: var(--theme-bg);
    color: var(--theme-text);
    position: relative;
}

body { 
    font-size: 16px; 
    line-height: 1.4em; 
} 

@media only screen and (min-width : 768px)
{
    body { font-size: 17px; line-height: 1.4em; } 
}

@media only screen and (min-width : 992px)
{
    body { font-size: 18px; line-height: 1.4em; } 
}

h1 { font-size: 2.5em; }
h2 { font-size: 1.6em; color: var(--theme-accent1); }
h3 { font-size: 1.4em; color: var(--theme-accent1); }
h1, h2, h3 { line-height: 1.2em; margin-bottom: 0.5em; font-weight: 500; font-family: var(--font-secondary); }

p { margin-bottom: 1.3em; }
.contentwrapper p:last-child { margin-bottom: 0 }
.lead { font-size: 1.2em; line-height: 1.4em; font-family: var(--font-secondary); font-weight: 400;  }

b, strong { font-weight: 600; }

/* ================================================================================================================== */
/* BASICS */
/* ================================================================================================================== */

.background {
    width: 100%;
    height: 100%;
    width: 100vw;
    height: 100vh; 
    background-position: center center;
    background-image: url('../img/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.centerwrapper {
    display: table;
    width: 100%;
    height: 100%; /* For at least Firefox */
    min-height: 100%;
    vertical-align: middle;
    text-align: center;
}

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

.wrapper { padding: 10px; }

.img-responsive {
    margin: 0 auto;
}

#meta { 
    color: white;
    font-size: 14px; 
    line-height: 12px; 
    margin-bottom: 10px; 
    position: absolute; 
    width: 100%;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
}

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

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

/* ================================================================================================================== */
/* BASICS */
/* ================================================================================================================== */

.textbackground {
    background-position: center center;
    background-image: url('../img/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}

.textwrapper {
    padding: 15px;
    background-color: white;
    color: #151515;
    max-width: 90%;
    margin: 50px auto;
}

@media only screen and (min-width : 768px)
{
    .textwrapper { max-width: 80%; padding: 20px; } 
}

@media only screen and (min-width : 992px)
{
    .textwrapper { max-width: 70%; padding: 50px; } 
}

blockquote {
    padding: 1rem 1rem;
    background-color: #eceff1;
    border-left: 5px solid #607d8b;
    border-radius: .5rem;
    margin: 1rem 0;
    position: relative
}

blockquote p {
    margin: 5px 0;
}

blockquote.is-success {
    background-color: #e8f5e9;
    border-color: #81c784;
    color: #1b5e20
}

blockquote.is-info {
    background-color: #e3f2fd;
    border-color: #64b5f6;
    color: #0d47a1
}

blockquote.is-danger {
    background-color: #ffebee;
    border-color: #e57373;
    color: #b71c1c
}