body#page-site-index {

    &:not(.editing) .secondary-navigation {
        display: none;
    }

    #page {
        padding: 0;
        .secondary-navigation {
            @extend %border-frequency;

            margin: 1rem auto 0;
            max-width: $course-content-maxwidth;
            width: 100%;
            padding: 0;

            &:before {
                height: 1rem;
                top: -1rem;
            }

            li.nav-item {
                border-bottom: none;
            }

            .navigation {
                margin: 0;
            }
        }
    }

    #page-content {
        margin-top: 3rem;
        padding: 0;
        @extend %border-frequency;
        &:after {
            height: 2px;
        }

        #region-main {
            width: 100%;
            padding: 2rem 3rem;
            background: $white;
        }
    }

    #frontpage-banner,
    .frontpage-banner {
        position: relative;
        min-height: calc(#{$banner-height} - 4em);
        background-attachment: scroll, fixed;
        background-position: center center;
        background-size: cover;
        color: $white;

        #frontpage-banner-content {
            position: absolute;
            top: calc(#{$banner-height} / 2);
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: $banner-text-align;
            width: if($banner-text-align == 'center', auto, 80%);

            h2 {
                border-bottom: solid 1px rgba($banner-font-color, 0.5);
                color: $banner-font-color;
                font-size: 2.5rem;
                font-weight: bold;
                font-family: $banner-title-font-family;
                text-transform: $banner-title-transform;
                letter-spacing: $banner-title-spacing;
                line-height: 3rem;
            }

            .h3 {
                font-weight: 300;
                color: $banner-font-color;
                font-size: 1.5rem;
                line-height: 2rem;
                display: block;
            }
            .btn .btn-primary {
                box-shadow: rgba(51, 51, 51, 0.6) 5px 8px 9px;
            }
        }
    }

    #frontpage-settings-menu {
        position: fixed;
        top: 5.3em;
        left: 0;
        background-color: $gray-800;
        z-index: 1010;

        .action-menu a.dropdown-toggle {
            color: $white;
        }

        .context-header-settings-menu {
            height: auto;
        }

        .dropdown-toggle .icon {
            margin-right: 0;
        }
    }

    .drawer-toggler button.btn.icon-no-margin {
        margin-right: .75rem;
    }

    @media (max-width: 768px),
        (max-height: 469px) {
        #frontpage-banner #frontpage-banner-content,
        .frontpage-banner-content {
            max-width: 80%;
            padding: 1.5rem;
            h2 {
                font-size: 2.3rem;
                letter-spacing: 0.2rem;
            }

            .h3 {
                font-size: 1.3rem;
            }
        }

    }

    #frontpage-cards {
        max-width: $course-content-maxwidth;
        background: $white;
        @extend %border-frequency;

        &:after {
            height: 2px;
        }

        &:target {
            padding-top: 2rem;
            margin-top: 3rem;

            &:before {
                margin-top: 0;
            }
        }

        #frontpage-cards-title {

            &:before {
                height: 3rem;
                top: -3rem;
            }

            h2 {
                display: inline-block;
            }
        }

        #frontpage-cards-content {

            .frontpage-card {
                padding: 6rem 7rem 4rem;
                border-top: 1px solid $gray-300;
                border-bottom: 1px solid $gray-300;
            }

            .frontpage-card:nth-child(odd) {
                border-right: 1px solid $gray-300;
            }

            a:hover {
                text-decoration: none;
            }
        }
    }

    #defaultfrontpagebody {
        position: relative;
        padding-top: 0;

        .card-box {
            padding: 3em 2em 1em 2em;
            background-color: $white;
            margin-bottom: 2em;
            position: relative;
            z-index: 10;
            flex: 1 1 0;

            &:after {
                bottom: 0;
            }

            &:before,
            &:after {
                content: '';
                display: block;
                height: 4px;
                position: absolute;
                right: 0;
                width: 100%;
            }
        }
    }
}


.courses {
    .card {
        background-color: $coursecards-bg-color;
        box-shadow: 5px 5px 9px -4px rgba($primary, .1);
        border-bottom: solid 3px $primary;
        text-align: left;
    }

    .course-card-img {
        width: 100%;
        overflow: hidden;
        height: 170px;
        margin: 0 auto;
    }

    .card-img-top {
        border: 1px solid $gray-400;
    }

    .card-title {
        font-weight: 600;
    }

    .card-body {
        padding: .25rem 0;
    }

    .card-body h3 {
        font-size: 1rem !important;
        line-height: 1.5rem;
        font-weight: 400;
    }

    .course-card-text {
        color: #777;
        padding: 0 1rem;
        height: 4rem;
        overflow: hidden;
    }
}

// Frontpage Carrousel.

#carouselTrema {
    .carousel-inner {
        max-height: calc(#{$banner-height} - 4rem);
        a:focus {
            box-shadow: none;
        }

        .frontpage-banner-content {
            position: absolute;
            top: calc(#{$banner-height} / 2);
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: $banner-text-align;
            width: if($banner-text-align == 'center', auto, 80%);
            h2 {
                border-bottom: solid 1px rgba($banner-font-color, 0.5);
                color: $banner-font-color;
                font-size: 2.5rem;
                font-weight: 700;
                font-family: $banner-title-font-family;
                text-transform: $banner-title-transform;
                letter-spacing: $banner-title-spacing;
                line-height: 3rem;
            }
            .h3 {
                font-weight: 300;
                color: $banner-font-color;
                font-size: 1.5rem;
                line-height: 2rem;
                display: block;
            }
        }
        .carousel-control-prev,
        .carousel-control-next {
            width: 4rem;
            height: 5rem;
            margin: auto 0;
        }
    }
    #page-wrapper #page-footer {
        margin-top: 2rem;
    }
}


:dir(rtl) body#page-site-index #frontpage-banner #frontpage-banner-content,
:dir(rtl) body#page-site-index .carousel-inner .frontpage-banner-content {
    transform: translate(50%, -50%);
    right: auto;
}
