:root {
    /* Colors */
    --textColor: #353535;
    --white: #FFFFFF;
    --black: #000000;
    --blackOpacity: rgba(0, 0, 0, 0.3);
    --lightBlueGrey: #F5F6FE;
    --lightGrey: #f5f5f5;
    --mediumGrey: #dcdcdc;
    --darkGrey: #a3a3a3;
    --darkerGrey: #7a7a7a;
    --darkestGrey: #4f4f4f;
    --themeRed: #E31D1C;
    --themeRedOpacity: rgba(227, 29, 28, 0.5);
    --themeGreen: #168C43;
    --themeGreenDark: #116C33;
    --themeGrey: #A0A0A0;
    --redMedium: #D41413;
    --redDark: #B01716;

    /* Measurements */
    --xxxSmall: 4px;
    --xxSmall: 8px;
    --xSmall: 12px;
    --small: 16px;
    --medium: 24px;
    --large: 32px;
    --xLarge: 48px;
    --xxLarge: 64px;
    --xxxLarge: 96px;

    /* Defaults */
    --spacing: 24px;
    --borderRadius: 8px;
    --transitionAll: all 0.3s ease;
    --shadowFloor: 0 8px 6px -6px var(--darkestGrey);
    --marquee-duration: 20s;
}

/* Helper classes */
.bg-red{ background-color: var(--themeRed) !important; }
.bg-green{ background-color: var(--themeGreen) !important; }
.bg-green-dark{ background-color: var(--themeGreenDark) !important; }
.bg-grey{ background-color: var(--themeGrey) !important; }
.bg-light-grey{ background-color: var(--lightGrey) !important; }
.bg-medium-grey{ background-color: var(--mediumGrey) !important; }
.bg-black{ background-color: var(--textColor) !important; }
.bg-white{ background-color: white !important; }

.txt-red{ color: var(--themeRed) !important; }
.txt-green{ color: var(--themeGreen) !important; }
.txt-green-dark{ color: var(--themeGreenDark) !important; }
.txt-grey{ color: var(--themeGrey) !important; }
.txt-white{ color: white !important; }
.txt-xxxSmall{ font-size: var(--xxxSmall) !important; }
.txt-xxSmall{ font-size: var(--xxSmall) !important; }
.txt-xSmall{ font-size: var(--xSmall) !important; }
.txt-small{ font-size: var(--small) !important; }
.txt-medium{ font-size: var(--medium) !important; }
.txt-large{ font-size: var(--large) !important; }
.txt-xlarge{ font-size: var(--xLarge) !important; }
.txt-xxlarge{ font-size: var(--xxLarge) !important; }
.txt-xxlarge{ font-size: var(--xxLarge) !important; }
.txt-xxxlarge{ font-size: var(--xxxLarge) !important; }
.txt-justify{ text-align: justify !important; }
.uppercase{ text-transform: uppercase !important; }
.lowercase{ text-transform: lowercase !important; }

.border-radius-small{ border-radius: calc(var(--spacing) / 4) !important; }
.border-radius-medium{ border-radius: calc(var(--spacing) / 2) !important; }
.border-radius-large{ border-radius: var(--spacing) !important; }
.border-radius-full{ border-radius: 50% !important; }

/* Generals */
* {
    box-sizing: border-box;
}

html, body {
    background-color: var(--lightGrey);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    color: var(--textColor);
    margin-bottom: 0.5em;
}

a, p, li, label, input, textarea, button {
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--textColor);
}

footer{
    background-color: var(--themeRed);
    padding: calc(var(--spacing) * 3) 0;
}

#footer-logo, #footer-libre-logo{
    width: auto;
    height: calc(var(--spacing) * 4);
}

.validation{
    min-height: calc(var(--spacing) * 2);
    color: var(--themeRed);
    font-size: var(--xSmall);
}

.input-error{
    outline: 1px solid var(--themeRed) !important;
}

#big-screen{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blackOpacity);
    z-index: 99999;
    display: none;
    justify-content: center;
    align-items: center;
}

/* Hero section */
#hero{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    width: 100%;
    max-width: 1400px;
    aspect-ratio: 3 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: calc(var(--spacing) * 3) auto;
    border-radius: calc(var(--spacing) / 2);
}

#hero-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); */
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: calc(var(--spacing) / 2);
}

#hero-text{
    width: 90%;
    text-align: center;
    padding: 0 calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
}

#hero h2{
    font-family: 'Lexend', sans-serif;
    font-weight: 700;
    font-size: var(--xLarge);
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin: 0;
    line-height: 1;
}

#hero h4{
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: var(--medium);
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    margin: calc(var(--spacing) / 4) 0 calc(var(--spacing) * 1) 0;
    line-height: 1;
}

#hero .hero-button{
    color: var(--textColor);
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: calc(var(--spacing) / 4);
    border: none;
    transition: var(--transitionAll);
}

#hero .hero-button:hover{
    background-color: var(--themeRed);
    color: white;
}

@media screen and (max-width: 600px) {
    #hero{
        aspect-ratio: 4 / 3;
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0;
    }

    #hero-overlay{
        border-radius: 0;
    }

    #hero-text{
        width: 100%;
        padding: 0 calc(var(--spacing) * 1);
        margin-bottom: calc(var(--spacing) * 1);
    }

    #hero h2{
        font-size: var(--medium);
        margin-bottom: calc(var(--spacing) / 2);
    }

    #hero h4{
        font-size: var(--small);
    }

    #hero .hero-button{
        font-size: var(--small);
        margin-bottom: calc(var(--spacing) / 2);
    }
}
/* ----------------------------------- end hero --------------------------------------- */

/* Breadcrumb */
#bread-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--themeRed);
    background-image: url('../../images/common/libre-white-transparency.png');
    background-repeat: no-repeat;
    background-position: 100% 150%;
    background-size: 25%;
    padding: calc(var(--spacing) * 4) 0;
    /* margin-bottom: calc(var(--spacing) * 3); */
}

#bread-title{
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: var(--xxLarge);
    color: white;
    text-align: center;
    margin: 0;
}

#bread-path{
    font-size: var(--small);
    color: white;
    margin-top: calc(var(--spacing) / 2);
}

#bread-path a{
    font-size: var(--small);
    color: white;
    text-decoration: none;
}

#bread-path a:hover{
    color: var(--textColor);
    text-decoration: none;
}

@media screen and (max-width: 600px) {
    #bread-container{
        background-size: 35%;
        background-position: 100% 100%;
        padding: calc(var(--spacing) * 2) 0;
        margin-bottom: 0;
    }

    #bread-title{
        font-size: var(--xLarge);
        margin-bottom: 0;
    }

    #bread-path, #bread-path a{
        margin-top: 0;
        font-size: var(--small);
    }
}

/* Big headlines */
#columns-headline-text{
    padding-top: calc(var(--spacing) * 4);
}

#columns-headline-img{
    aspect-ratio: 1/1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--spacing);
}

#columns-headline-text-intro{
    font-size: var(--medium);
    color: var(--darkGrey);
    margin: 0 0 calc(var(--spacing) / 2) 0;
    line-height: 1.2;
}

#columns-headline-text-title{
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: var(--xxLarge);
    color: var(--textColor);
    margin: 0 0 calc(var(--spacing) / 2) 0;
    line-height: 1.1;
}

/* Sections */
.section-title{
    margin: calc(var(--spacing) * 2) 0 calc(var(--spacing) * 3) 0 !important;
}

.section-title p{
    font-size: var(--medium);
    color: var(--darkGrey);
    margin: 0 0 calc(var(--spacing) / 4) 0;
    line-height: 1.2;
}

.section-title h3{
    font-size: var(--xLarge);
    margin: 0 0 calc(var(--spacing) / 2) 0;
    line-height: 1;
}

.section-title__divider{
    display: block;
    width: 50px;
    height: 4px;
    background-color: var(--themeRed);
    border-radius: calc(var(--spacing) / 4);
    margin-top: calc(var(--spacing) / 1);
}

.section-title__divider.center{
    margin-left: auto;
    margin-right: auto;
}

.section-title__divider.left{
    margin-left: 0;
    margin-right: auto;
}

.section-title__divider.right{
    margin-left: auto;
    margin-right: 0;
}

@media screen and (max-width: 600px) {
    .section-title p{
        font-size: var(--normal);
    }

    .section-title h3{
        font-size: var(--large);
    }
}
/* ---------------------------- end sections ---------------------------- */

/* Reasons */
#reasons{
    padding-bottom: calc(var(--spacing) * 3);
}

.reason-card{
    padding: calc(var(--spacing) * 2);
    background-color: var(--lightGrey);
    border-radius: calc(var(--spacing) * 1);
    transition: var(--transitionAll);
}

.reason-word{
    font-size: var(--small);
    font-weight: 500;
    margin-bottom: calc(var(--spacing) * 4);
    transition: var(--transitionAll);
}

.reason-title{
    font-size: var(--medium);
    font-weight: 600;
    color: var(--textColor);
    margin-bottom: calc(var(--spacing) * 1);
    line-height: 1.2;
    transition: var(--transitionAll);
}

.reason-divider{
    width: 40px;
    height: 3px;
    background-color: var(--themeRed);
    border-radius: calc(var(--spacing) / 4);
    margin-bottom: calc(var(--spacing) * 1);
    transition: var(--transitionAll);
}

.reason-subtitle{
    font-size: var(--small);
    color: var(--darkGrey);
    line-height: 1.5;
    transition: var(--transitionAll);
}

.reason-card:hover{
    background-color: var(--themeRed);
    box-shadow: var(--shadowFloor);
    transform: translateY(-4px);
}

.reason-card:hover > .reason-word, .reason-card:hover > .reason-title, .reason-card:hover > .reason-subtitle {
    color: white;
}

.reason-card:hover > .reason-divider {
    background-color: black;
}

/* Custom UiKit */
/* Headings */
.uk-heading-bullet::before{
    border-left-color: var(--themeRed);
}

/* Navbar */
.uk-navbar-nav>li.uk-active>a{
    color: var(--themeRed);
}

li a span:last-child {
    color: var(--textColor) !important;
}

li.uk-parent.uk-open a span[data-uk-icon="chevron-down"]{
    color: var(--textColor) !important;
    rotate: 180deg;
}

/* Sidenav */
.uk-offcanvas-bar{
    background-color: var(--lightGrey);
}

.uk-card-primary.uk-card-body .uk-nav-default>li.uk-active>a, .uk-card-primary>:not([class*=uk-card-media]) .uk-nav-default>li.uk-active>a, .uk-card-secondary.uk-card-body .uk-nav-default>li.uk-active>a, .uk-card-secondary>:not([class*=uk-card-media]) .uk-nav-default>li.uk-active>a, .uk-light .uk-nav-default>li.uk-active>a, .uk-offcanvas-bar .uk-nav-default>li.uk-active>a, .uk-overlay-primary .uk-nav-default>li.uk-active>a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default>li.uk-active>a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default>li.uk-active>a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default>li.uk-active>a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default>li.uk-active>a{
    color: var(--themeRed);
}

.uk-card-primary.uk-card-body .uk-nav-default>li>a, .uk-card-primary>:not([class*=uk-card-media]) .uk-nav-default>li>a, .uk-card-secondary.uk-card-body .uk-nav-default>li>a, .uk-card-secondary>:not([class*=uk-card-media]) .uk-nav-default>li>a, .uk-light .uk-nav-default>li>a, .uk-offcanvas-bar .uk-nav-default>li>a, .uk-overlay-primary .uk-nav-default>li>a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default>li>a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default>li>a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default>li>a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default>li>a{
    color: var(--darkestGrey);
}

.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub a, .uk-card-primary>:not([class*=uk-card-media]) .uk-nav-default .uk-nav-sub a, .uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub a, .uk-card-secondary>:not([class*=uk-card-media]) .uk-nav-default .uk-nav-sub a, .uk-light .uk-nav-default .uk-nav-sub a, .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a, .uk-overlay-primary .uk-nav-default .uk-nav-sub a, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a{
    color: var(--darkGrey);
    padding-left: calc(var(--spacing) * 1);
}

.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-header, .uk-card-primary>:not([class*=uk-card-media]) .uk-nav-default .uk-nav-header, .uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-header, .uk-card-secondary>:not([class*=uk-card-media]) .uk-nav-default .uk-nav-header, .uk-light .uk-nav-default .uk-nav-header, .uk-offcanvas-bar .uk-nav-default .uk-nav-header, .uk-overlay-primary .uk-nav-default .uk-nav-header, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header{
    color: var(--textColor);
}

.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-divider, .uk-card-primary>:not([class*=uk-card-media]) .uk-nav-default .uk-nav-divider, .uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-divider, .uk-card-secondary>:not([class*=uk-card-media]) .uk-nav-default .uk-nav-divider, .uk-light .uk-nav-default .uk-nav-divider, .uk-offcanvas-bar .uk-nav-default .uk-nav-divider, .uk-overlay-primary .uk-nav-default .uk-nav-divider, .uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider, .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider, .uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider, .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider{
    border-top-color: var(--mediumGrey);
}

.uk-icon-button{
    width: var(--spacing);
    margin-right: calc(var(--spacing) / 4);
}

/* Dots */
.uk-dotnav>.uk-active>*{
    background-color: var(--themeRed);
}

/* Buttons */
.uk-button-primary{
    background-color: var(--themeRed);
    border-color: var(--themeRed);
    color: white;
    border-radius: calc(var(--spacing) / 4);
    transition: var(--transitionAll);
}

.uk-button-primary:hover{
    background-color: var(--redMedium);
    border-color: var(--redMedium);
    color: white;
}

.uk-input:focus, .uk-select:focus, .uk-textarea:focus{
    border-color: var(--darkGrey);
}
/* ------------------------- end Custom UiKit ------------------------- */

/* Mouse scroll down */
#mouse {
    /* display: none; */
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--spacing) / 1);
	width: 35px;
	height: 55px;
	border: 3px solid var(--mediumGrey);
	border-radius: 60px;
    cursor: pointer;
    z-index: 1000 !important;
	/* position: relative; */
	&::before {
		content: '';
		width: 12px;
		height: 12px;
		position: absolute;
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
		background-color: var(--mediumGrey);
		border-radius: 50%;
		opacity: 1;
		animation: wheel 2s infinite;
		-webkit-animation: wheel 2s infinite;
	}
}

@keyframes wheel {
	to {
		opacity: 0;
		top: 30px;
	}
}

@-webkit-keyframes wheel {
	to {
		opacity: 0;
		top: 30px;
	}
}

#mouse:hover{
    border-color: var(--darkGrey);

    &::before{
        background-color: var(--darkGrey);
    }
}

/* Go up button */
#go-up{
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: calc(var(--spacing) * 1);
    right: calc(var(--spacing) * 1);
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    color: white;
    background-color: var(--themeRed);
    border-radius: 50%;
    box-shadow: var(--shadowFloor);
    cursor: pointer;
    z-index: 1000 !important;
    transition: var(--transitionAll);
}

#go-up:hover{
    background-color: var(--redMedium);
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.2);
}