@charset "utf-8";
/* CSS Document */


/** Layout **/

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: white;
    color: #222222;
    font-family: "Rubik", "Myriad Pro", Arial, "sans-serif";
}

header {
    background-color: #0d3a5e;
    text-align: center;
    padding: 5%;
}

main {
	margin: auto;
}

	main section {
		padding: 3% 5% 3% 5%;
	}

section section, .row {
    padding: 0;
    margin: 0;
}

footer {
    margin-top: 3%;
}

img {
    /*border-radius: 15px;*/
    overflow: hidden;
}

form {
    background-color: white;
    border-radius: 10px;
    font-family: "Rubik SemiBold", sans-serif;
    color: #0d3a5e;
}

form input, textarea {
	width: 100%;
	margin-bottom: 7%;
	padding: 2%;
	box-sizing: border-box;
	border: 1px solid #bbb;
	border-radius: 5px;

	color: #4a4a49;
	font-size: 14px;
	font-family: "Rubik", sans-serif;
}

hr {
    background: #0d3a5e;
    margin-bottom: 4%;
    padding: 0;
    height: 5px;
    border: 0;
    border-radius: 5px;
    opacity: 1;
}

    .hr-date {
        background: #666;
        padding: 0;
        height: 1px;
        border: 0;
        border-radius: 5px;
    }



/** Classes **/

.box-border {
    border: 4px solid #0d3a5e;
    border-radius: 15px;
    padding: 2%;
}

.box-border-red {
    border: 4px solid #e74259;
    border-radius: 15px;
    padding: 2%;
    color: #222222;
}

    .box-border-red h2, .box-border-red h3, .box-border-red h4 {
        color: #e74259;
    }

    .box-border-red:hover {
        border: 4px solid #0eb9b3;
    }

    .box-border-red:hover, .box-border-red:hover h2, .box-border-red:hover h3, .box-border-red:hover h4 {
        color: #0eb9b3;
    }

.box-blue {
    background: #0d3a5e;
    border: 3px solid #0d3a5e;
    border-radius: 25px;
    padding: 2%;
    color: white;
}

.box-green {
    background: #0eb9b3;
    border: 3px solid #0eb9b3;
    border-radius: 25px;
    padding: 2%;
    color: white;
}

    .box-blue h2, .box-blue h3, .box-blue h4, .box-blue h5,
    .box-green h2, .box-green h3, .box-green h4, .box-green h5 {
        color: white;
    }

.box-quote {
    border: 3px solid #0d3a5e;
    border-radius: 15px 15px 0 15px;
    padding: 5% 10% 5% 10%;
    margin-bottom: 8%;
}

.border-blue {
    border: 4px solid #0d3a5e;
    border-radius: 15px;
}

.rounded {
    border-radius: 15px !important;
}

.rounded-top {
    border-radius: 15px 15px 0 0 !important;
}

.rounded-left { 
    border-radius: 10px 0 0 10px;
}

.round {
    border-radius: 100%;
    width: 100%;
}

.border-white {
    border: 2px solid white !important;
}

.img-cover {
    height: 100%;
    width: 100%;
    object-fit: cover !important;
}



/** Blogs **/

.blog-container {
    padding: 3% 10% 5% 10%;
}

.blog-link {
    box-shadow: 0px 0px 25px #0d3a5e;
}

.blog-link a {
    color: #0d3a5e;
}

.blog-link h2 {
    font-size: 1.5rem;
}

.blog-link h3 {
    font-size: 1rem;
}

.blog-link p {
    margin-top: 1rem;
    font-size: 0.9rem;
}



/** Navigation **/

nav {
	padding: 1% 2% 1% 2% !important;
}

.nav-link {
    display: inline;
    margin-left: 1.5rem;
    border-radius: 10px;
    background-color: white;
    font-family: "Rubik SemiBold", sans-serif;
    font-size: 1rem;
    color: #0d3a5e;
}

    .nav-link:hover {
        color: #0eb9b3;
    }

    .nav-link-current {
        color: #e74259;
        text-decoration: underline;
        text-underline-offset: 10px;
    }

.nav-subitem {
    position: fixed;
    display: none;
    margin-top: 1px;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

    .nav-dropdown:hover .nav-subitem {
        display: block;
    }

    .nav-subitem a {
        font-size: 0.85rem;
    }

    .nav-subitem .nav-item {
        margin-bottom: 0.5rem;
    }

.navbar-toggler-icon {
    background-color: #e74259 !important;
}



/** Alignment **/

.paddingbottom-2 {
    padding-bottom: 2% !important;
}

.paddingbottom-5 {
    padding-bottom: 5% !important;
}

.paddingbottom-10 {
    padding-bottom: 10% !important;
}

.paddingleft-5 {
    padding-left: 3%;
}

.paddingright-5 {
    padding-right: 5%;
}

.marginbottom {
    margin-bottom: 5% !important;
}

.marginright-10 {
    margin-right: 10% !important;
}

.margintop--5 {
    margin-top: -3% !important;
}

.nomargin {
	margin: 0 !important;
}

.nopadding {
	padding: 0 !important;
}



/** Backgrounds **/

.bg-dark {
    background: #101010 !important;
}

.bg-blue {
    background: #0d3a5e;
    color: white !important;
}



/** Text **/

header h1 {
    font-family: "Rubik SemiBold", sans-serif;
    font-size: 80px;
    margin-bottom: 2%;
    color: white;
}

    .blog-h1 {
        font-family: "Rubik SemiBold", sans-serif;
        font-size: 60px;
        color: white;
    }

h2, .h2 {
	font-family: "Rubik SemiBold", sans-serif;
    font-size: 36px;
    margin-bottom: 3%;
    color: #0d3a5e;
}

    header h2, .bg-blue h2, .bg-blue .h2 {
        color: white !important;
    }

    header h2, header h3 {
        font-family: "Rubik", sans-serif;
        font-style: italic;
        margin-bottom: 1%;
    }

    h2:has(+ h3) {
        margin-bottom: 1%;
    }

h3, .h3 {
	font-family: "Rubik SemiBold", sans-serif;
    font-size: 24px;
    margin-bottom: 2%;
    color: #0d3a5e;
}

    header h3, .bg-blue h3, .bg-blue .h3 {
        color: white !important;
    }

    h3 span {
        font-family: "Rubik", sans-serif !important;
        font-size: 20px;
    }

h4, .h4 {
    font-family: "Rubik SemiBold", sans-serif;
	font-size: 18px;
    margin-bottom: 1.75%;
}

h5 {
	font-family: "Rubik Light-Italic", sans-serif;
	font-size: 16px;
}

p {
	font-family: "Rubik Light", sans-serif;
    font-size: 16px;
}

li {
    font-size: inherit !important;
    line-height: 30px;
}

.h404 {
    font-family: "Rubik SemiBold", sans-serif;
    font-size: 160px;
    color: #e74259;
}

a {
    font-weight: bold;
    text-decoration: none;
    color: #e74259;
}

    a:hover, p a:hover, h2 a:hover {
        color: #0eb9b3;
    }

    .bg-blue a, .box-blue a {
        color: #0eb9b3;
    }

        .bg-blue a:hover, .box-blue a:hover {
            color: #e74259;
        }

    strong a, a strong {
        font-family: "Rubik SemiBold", sans-serif;
        color: inherit;
    }

ul {
	padding-left: 7%;
}

li {
	font-family: "Rubik Light", sans-serif;
	font-size: 20px;
	padding-left: 0%;
}

	li b, li strong {
		font-family: "Rubik SemiBold";
		font-weight: normal;
	}

    .column li {
        padding-bottom: 1%;
    }

.bold {
    font-weight: bold !important;
}

.italic {
    font-style: italic;
}

.blue {
    color: #0d3a5e !important;
}

.red {
    color: #e74259 !important;
}

.uppercase {
    text-transform: uppercase;
}

.quote {
	font-family: "Rubik Italic", sans-serif;
    font-size: 18px;
	line-height: 1.5em;
}

.quote-large {
	font-family: "Rubik Italic", sans-serif;
    font-size: 30px;
	line-height: 1.5em;
}



/** Buttons **/

.icon {
    margin-right: 2%;
    margin-top: -1% !important;
}

    .icon:hover {
        border-radius: 3px;
        box-shadow: 0px 0px 15px #0d3a5e;
    }

button, .button {
    background: #e74259;
    border-radius: 5px;
    border: 3px solid #e74259;
    padding: 1% 3% 1% 3%;
    color: white;
}

    button:hover, .button:hover {
        background: #0eb9b3;
        border: 3px solid #0eb9b3;
    }

.button-green {
    background: #0eb9b3;
    border-radius: 5px;
    border: 3px solid #0eb9b3;
    padding: 1% 3% 1% 3%;
    color: white;
}

    .button-green:hover {
        background: #e74259;
        border: 3px solid #e74259;
    }

.button-border {
    background: white;
    border-radius: 10px;
    border: 3px solid #e74259;
    padding: 1% 3% 1% 3%;
    color: #e74259;
}

    .button-border:hover {
        border: 3px solid #e74259;
        background: #e74259;
        color: white;
    }

.button-blue-border {
    background: #0d3a5e;
    border-radius: 10px;
    border: 3px solid white;
    padding: 1% 3% 1% 3%;
    color: white;
}

    .button-blue-border:hover {
        background: white;
        color: #0d3a5e;
    }



/** Fonts **/

@font-face {
	font-family: "Rubik";
	font-display: swap;
	src: url("fonts/Rubik-Regular.ttf");
}

@font-face {
	font-family: "Rubik Medium";
	font-display: swap;
	src: url("fonts/Rubik-Medium.ttf");
}

@font-face {
	font-family: "Rubik SemiBold";
	font-display: swap;
	src: url("fonts/Rubik-SemiBold.ttf");
}

@font-face {
	font-family: "Rubik Bold";
	font-display: swap;
	src: url("fonts/Rubik-Bold.ttf");
}

@font-face {
	font-family: "Rubik Light";
	font-display: swap;
	src: url("fonts/Rubik-Light.ttf");
}

@font-face {
	font-family: "Rubik Light-Italic";
	font-display: swap;
	src: url("fonts/Rubik-LightItalic.ttf");
}

@font-face {
	font-family: "Rubik Italic";
	font-display: swap;
	src: url("fonts/Rubik-Italic.ttf");
}



/** Animation **/

/* Fade in upwards animation */
.animate-fadein-scroll {
    opacity: 0;
    animation: fadein-scroll 1s ease forwards;
    
    animation-timeline: view();
    animation-range: entry 0% entry 200%;
    
    /*@container style(--in-view: true) {
        animation-play-state: running;
    }*/
}

    @keyframes fadein-scroll {
        from {
            opacity: 0;
            transform: translateY(100px);
        }
        to {
            opacity: 1;
            transform: translateY(0px);
        }
    }

/* Fade in upwards animation */
.animate-fadein {
    opacity: 0;
    animation: fadein 0.5s ease forwards;
    animation-play-state: paused;
    
    @container style(--in-view: true) {
        animation-play-state: running;
    }
}

    @keyframes fadein {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0px);
        }
    }

/* This container object switches from false to true when visible on screen */
/* A child object can switch on its animation-play-state when its container switches --in-view to true */
.animate-in-view {
    --in-view: false;
    animation: animate-in-view both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

    @keyframes animate-in-view {
        from {
            --in-view: false;
        }
        to {
            --in-view: true;
        }
    }

/* Causes each child object to animate in with a delay */
/* Use style="--i: 1" on each child object */
.animation-delay {
    animation-delay: calc(var(--i) * 0.1s);
}

/* Fade in upwards animation */
.animate-moveleft {
    animation: moveleft 0.75s ease-out forwards;
    animation-play-state: paused;
    
    @container style(--in-view: true) {
        animation-play-state: running;
    }
}

    @keyframes moveleft {
        0% {
            transform: translateX(2000px);
        }
        60% {
            transform: translateX(-30px);
        }
        80% {
            transform: translateX(5px);
        }
        100% {
            transform: translateX(0px);
        }
    }