/**
 * Fonts
 */

/* 100 */

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-Thin.ttf');
    font-weight: 100;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedThin.ttf');
    font-weight: 100;
    font-stretch: semi-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedThin.ttf');
    font-weight: 100;
    font-stretch: condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedThin.ttf');
    font-weight: 100;
    font-stretch: extra-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ThinItalic.ttf');
    font-weight: 100;
    font-stretch: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedThinItalic.ttf');
    font-weight: 100;
    font-stretch: semi-condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedThinItalic.ttf');
    font-weight: 100;
    font-stretch: condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedThinItalic.ttf');
    font-weight: 100;
    font-stretch: extra-condensed;
    font-style: italic;
}

/* 200 */

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraLight.ttf');
    font-weight: 200;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedExtraLight.ttf');
    font-weight: 200;
    font-stretch: semi-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedExtraLight.ttf');
    font-weight: 200;
    font-stretch: condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedExtraLight.ttf');
    font-weight: 200;
    font-stretch: extra-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraLightItalic.ttf');
    font-weight: 200;
    font-stretch: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedExtraLightItalic.ttf');
    font-weight: 200;
    font-stretch: semi-condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedExtraLightItalic.ttf');
    font-weight: 200;
    font-stretch: condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedExtraLightItalic.ttf');
    font-weight: 200;
    font-stretch: extra-condensed;
    font-style: italic;
}

/* 300 */

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-Light.ttf');
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedLight.ttf');
    font-weight: 300;
    font-stretch: semi-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedLight.ttf');
    font-weight: 300;
    font-stretch: condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedLight.ttf');
    font-weight: 300;
    font-stretch: extra-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-LightItalic.ttf');
    font-weight: 300;
    font-stretch: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedLightItalic.ttf');
    font-weight: 300;
    font-stretch: semi-condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedLightItalic.ttf');
    font-weight: 300;
    font-stretch: condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedLightItalic.ttf');
    font-weight: 300;
    font-stretch: extra-condensed;
    font-style: italic;
}

/* 400 (Regular) */

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-Regular.ttf');
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensed.ttf');
    font-weight: 400;
    font-stretch: semi-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-Condensed.ttf');
    font-weight: 400;
    font-stretch: condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensed.ttf');
    font-weight: 400;
    font-stretch: extra-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-Italic.ttf');
    font-weight: 400;
    font-stretch: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedItalic.ttf');
    font-weight: 400;
    font-stretch: semi-condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedItalic.ttf');
    font-weight: 400;
    font-stretch: condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedItalic.ttf');
    font-weight: 400;
    font-stretch: extra-condensed;
    font-style: italic;
}

/* 500 */
@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-Medium.ttf');
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedMedium.ttf');
    font-weight: 500;
    font-stretch: semi-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedMedium.ttf');
    font-weight: 500;
    font-stretch: condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedMedium.ttf');
    font-weight: 500;
    font-stretch: extra-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-MediumItalic.ttf');
    font-weight: 500;
    font-stretch: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedMediumItalic.ttf');
    font-weight: 500;
    font-stretch: semi-condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedMediumItalic.ttf');
    font-weight: 500;
    font-stretch: condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedMediumItalic.ttf');
    font-weight: 500;
    font-stretch: extra-condensed;
    font-style: italic;
}

/* 600 */

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiBold.ttf');
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedSemiBold.ttf');
    font-weight: 600;
    font-stretch: semi-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedSemiBold.ttf');
    font-weight: 600;
    font-stretch: condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedSemiBold.ttf');
    font-weight: 600;
    font-stretch: extra-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiBoldItalic.ttf');
    font-weight: 600;
    font-stretch: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedSemiBoldItalic.ttf');
    font-weight: 600;
    font-stretch: semi-condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedSemiBoldItalic.ttf');
    font-weight: 600;
    font-stretch: condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedSemiBoldItalic.ttf');
    font-weight: 600;
    font-stretch: extra-condensed;
    font-style: italic;
}

/* 700 */

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-Bold.ttf');
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedBold.ttf');
    font-weight: 700;
    font-stretch: semi-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedBold.ttf');
    font-weight: 700;
    font-stretch: condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedBold.ttf');
    font-weight: 700;
    font-stretch: extra-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-BoldItalic.ttf');
    font-weight: 700;
    font-stretch: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedBoldItalic.ttf');
    font-weight: 700;
    font-stretch: semi-condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedBoldItalic.ttf');
    font-weight: 700;
    font-stretch: condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedBoldtItalic.ttf');
    font-weight: 700;
    font-stretch: extra-condensed;
    font-style: italic;
}

/* 800 */

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraBold.ttf');
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedExtraBold.ttf');
    font-weight: 800;
    font-stretch: semi-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedExtraBold.ttf');
    font-weight: 800;
    font-stretch: condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedExtraBold.ttf');
    font-weight: 800;
    font-stretch: extra-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraBoldItalic.ttf');
    font-weight: 800;
    font-stretch: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedExtraBoldItalic.ttf');
    font-weight: 800;
    font-stretch: semi-condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedExtraBoldItalic.ttf');
    font-weight: 800;
    font-stretch: condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedBoldItalic.ttf');
    font-weight: 800;
    font-stretch: extra-condensed;
    font-style: italic;
}

/* 900 */

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-Black.ttf');
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedBlack.ttf');
    font-weight: 900;
    font-stretch: semi-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedBlack.ttf');
    font-weight: 900;
    font-stretch: condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedBlack.ttf');
    font-weight: 900;
    font-stretch: extra-condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-BlackItalic.ttf');
    font-weight: 900;
    font-stretch: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-SemiCondensedBlackItalic.ttf');
    font-weight: 900;
    font-stretch: semi-condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-CondensedBlackItalic.ttf');
    font-weight: 900;
    font-stretch: condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif-ExtraCondensedBlackItalic.ttf');
    font-weight: 900;
    font-stretch: extra-condensed;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Light.ttf');
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-LightItalic.ttf');
    font-weight: 300;
    font-stretch: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular.ttf');
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Italic.ttf');
    font-weight: 400;
    font-stretch: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Semibold.ttf');
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-SemiboldItalic.ttf');
    font-weight: 500;
    font-stretch: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Bold.ttf');
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-BoldItalic.ttf');
    font-weight: 700;
    font-stretch: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-ExtraBold.ttf');
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-ExtraBoldItalic.ttf');
    font-weight: 900;
    font-stretch: normal;
    font-style: italic;
}

/**
 * General
 */
html, body {
    height: 100%;
}

body {
    font-family: 'Open Sans';
}

.content {
    position: relative;
    min-height: calc(100% - 140px);
}

a, a:hover {
    text-decoration: none;
    color: unset;
}

/**
 * Top banner
 */

.banner {
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.banner .background {
    position: absolute;
    bottom: calc(100% - 120px);
    width: 100%;
    height: auto;
    z-index: 0;
    left: 0;
}

.banner button {
    position: absolute;
    right: 50px;
}

.banner a {
    z-index: 1;
}

.banner .logo {
    width: 230px;
    height: auto;
}

.banner .menu-icon {
    display: none;
    height: 40px;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    z-index: 3;
}

@media(max-width: 800px) {
    .banner .menu-icon {
        display: block;
    }

    .banner button {
        display: none;
    }
}

@media(max-width: 400px) {
    .banner .background {
        bottom: unset;
        top: 0;
    }

    .banner .logo {
        width: 180px;
    }
}

@media (max-width: 800px) and (orientation: landscape) {
    .banner {
        height: 60px;
    }

    .banner .background {
        bottom: calc(100% - 60px);
    }

    .banner .logo {
        width: 150px;
    }
}

/**
 * Top menu
 */

.top-menu {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 30px;
}

.top-menu a {
    cursor: pointer;
}

.top-menu h2 {
    margin-left: 30px;
    margin-right: 30px;
    font-family: 'Open Sans';
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #324b59;
    padding-bottom: 3px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-bottom: 2px solid white;
}

.top-menu h2.selected {
    font-weight: 500;
    border-bottom: solid 2px #d2caa0;
}

.top-menu h2:hover {
    border-bottom: solid 2px #d2caa0;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

@media (max-width: 800px) {
    .top-menu {
        display: none;
    }
}

/**
 * Lateral menu
 */

.hidden {
    display: none;
}

.menu-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
}

.menu-lateral.hidden {
    display: none;
    position: absolute;
    right: calc(-67% - 300px);
}

.menu-lateral {
    display: block;
    position: absolute;
    right: 0;
    top: 100px;
    z-index: 3;
    height: calc(100% - 100px);
    width: 67%;
    min-width: 300px;
    background-color: #f2f2f2;
    box-shadow: -2px 3px 10px 0 rgba(0, 0, 0, 0.3);
    -webkit-transition: 0.4s; /* Safari prior 6.1 */
    transition: 0.4s;
}

.menu-lateral .menu-row {
    padding: 20px;
    cursor: pointer;
    height: 28%;
    border-bottom: 1px solid #324b59;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: 0.4s; /* Safari prior 6.1 */
    transition: 0.4s;
    color: #324b59;
}

.menu-lateral .menu-row.selected {
    color: white;
    background-color: #324b59;
    border-bottom: 1px solid white;
}

.menu-lateral .menu-row:hover {
    color: white;
    background-color: #9ba2a6;
    border-bottom: 1px solid white;
    -webkit-transition: 0.4s; /* Safari prior 6.1 */
    transition: 0.4s;
}

.menu-lateral .menu-row h2 {
    text-align: center;
    font-family: 'Noto Serif';
    font-size: 24px;
    font-weight: 200;
}

.menu-lateral .button-wrapper {
    height: 16%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/**
 * Headers
 */
 h1 {
    font-family: 'Noto Serif';
    font-size: 20px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #324b59;
}

/**
 * Buttons
 */

.button-dark {
    min-height: 40px;
    border-radius: 5px;
    background-color: #324b59;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #f5f0ec;
    border: none;
    cursor: pointer;
    -webkit-transition: 0.4s; /* Safari prior 6.1 */
    transition: 0.4s;
    border: 1px solid #324b59;
}

.button-white {
    min-height: 40px;
    border-radius: 5px;
    background-color: white;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #324b59;
    cursor: pointer;
    border: 1px solid #9ba2a6;
    -webkit-transition: 0.4s; /* Safari prior 6.1 */
    transition: 0.4s;
}

.button-dark:hover,
.button-white:hover {
    color: #edeeee;
    background-color: #9ba2a6;
    border: 1px solid #9ba2a6;
}

.button-narrow {
    padding: 8px 15px;
}

.button-small {
    padding: 8px 30px;
}

.button-medium {
    padding: 8px 40px;
}

/**
 * Footer
 */

.footer {
    background-color: #324b59;
    width: 100%;
    color: #f6f6f6;
    min-height: 420px;
    font-family: 'Open Sans';
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    position: relative;
}

.footer .overlay {
    z-index: 1;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/Bg-Footer.png');
    background-size: cover;
    background-position: center;
    opacity: 0.7;
}

.footer .inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.footer h2 {
    margin-top: 40px;
    font-size: 24px;
    font-weight: 300;
    text-align: center;
}

.footer .line-horiz {
    width: 75px;
    height: 1px;
    border: solid 1px #f5f0ec;
    margin-bottom: 30px;
}

.footer p {
    font-size: 16px;
    margin-bottom: 25px;
    text-align: center;
    max-width: 100%;
}

.footer img {
    width: 100px;
    height: auto;
    margin-top: 50px;
    margin-bottom: 10px;
}

.footer .small-disclaimer {
    font-family: 'Open Sans';
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 7px;
}

.footer .small-disclaimer a {
    text-decoration: underline !important;
}

.footer .social-networks {
    display: flex;
    justify-content: center;
    margin: 10px 0 20px 0;
}

.footer .social-networks img {
    width: 40px;
    height: auto;
    margin: 0 7px;
}

@media (max-width: 800px) {
    .footer .inner {
        padding: 10px 20px;
    }
}