/*Top Banner*/

.learning-journey #banner-overview-top {
/*    background-image: url('../img/index_banner_1920.png');
     background-position: right top, center 100%;
    background-repeat: no-repeat;
        background-color: #ddd;*/
    width: 100%;
    /*    height: 150px; */
    background-color: #262626;
    /*     max-width: 1920px; height: 230px;*/
    padding-top: 1.5em;
    padding-bottom: 1em;
    /*    background-image: url("../img/LJ-pictogram.svg");   */
    background-repeat: no-repeat;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: 70px 10px;
}

.learning-journey.dark-theme-lj #banner-overview-top {
 /*   background-image: url('../img/index_banner_1940_300.png');
     background-position: right top, center 100%;
    background-repeat: no-repeat;
    background-color: #ddd;
    width: 100%;
    height: 150px;*/

    background-color: #000;
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 1920px;
    /*
    background-size: cover;
        background-color: #000; */
    /*    background-image: url("../img/LJ-pictogram.svg");   */
    background-repeat: no-repeat;

    background-size: 100px;

    background-repeat: no-repeat;
    background-position: 70px 50px;
}

.learning-journey #banner-overview-top .banner-content {
    margin-left: 10px;
    margin-right: 0%;
    width:100%;
    min-width:80%;

}

#picto-container {
    display:inline-flex;
    margin-left: 5%;
    margin-right: 0%;
    min-width:80vw;
}

#picto-container>img{
    width:100px;
    padding-right:20px;
    padding-bottom:20px;
    height:100px;

}




.learning-journey #banner-overview-top .banner-content .title {
    margin-bottom: 30px;
}

.learning-journey #banner-overview-top .banner-content .title h1 {
    font-size: 28px;
    margin: 0;
    color: #FFF;
    font-weight: normal;
    margin-top:10px;
}

.learning-journey.dark-theme-lj #banner-overview-top .banner-content .title h1 {
    color: #FFF;
}

.learning-journey #banner-overview-top .banner-content .prod-description h4 {
    font-size: 14px;
    margin-right: 20%;
    color: #FFF;
    font-weight: normal;
}

.learning-journey.dark-theme-lj #banner-overview-top .banner-content .prod-description h4 {
    color: #FFF;
}

.learning-journey #banner-overview-top .banner-content .nav-links {
    margin-right: 15%;
    position: absolute;
    top: 190px;
}

.learning-journey #banner-overview-top .banner-content .nav-links>div {
    margin-right: 20px;
    display: inline-flex;
}

.learning-journey #banner-overview-top .banner-content .nav-links>div>a {
    font-size: 14px;
}

.learning-journey.dark-theme-lj #banner-overview-top .banner-content .nav-links>div>a {
    color: #FFF;
}

.learning-journey #banner-overview-top #banner-top-menu {
    display: none;
}

.learning-journey #banner-overview-top .hamburger-nav-links-ui {
    display: none;
    top: 0;
}

.learning-journey #banner-overview-top .hamburger-nav-links {
    background: none;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 45px;
    padding: 5px 15px 0px 15px;
    color: #999;
    border: 0;
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    z-index: 1;
}

.learning-journey #banner-overview-top .cross {
    background: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0px 15px 0px 15px;
    color: #999;
    border: 0;
    font-size: 3em;
    line-height: 65px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    z-index: 1;
}

.learning-journey #banner-overview-top .hamburger-nav-links-ui {
    left: 0;
    right: 0;
    margin-left: auto;
    position: absolute;
    z-index: 1000000000;
    font-weight: bold;
    font-size: 0.8em;
    float: right;
    width: 60%;
    background: #f1f1f1;
    font-size: 12px;
}

.learning-journey #banner-overview-top .hamburger-nav-links-ui ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

.learning-journey #banner-overview-top .hamburger-nav-links-ui li {
    display: block;
    padding: 15px 0 15px 0;
    border-bottom: #dddddd 1px solid;
}

.learning-journey #banner-overview-top .hamburger-nav-links-ui ul a li {
    padding-left: 10px;
    text-decoration: none;
    margin: 0px;
    color: #666;
}

.learning-journey #banner-overview-top .hamburger-nav-links-ui a {
    text-decoration: none;
    color: #666;
}

.learning-journey #banner-overview-top .hamburger-nav-links-ui a:hover {
    text-decoration: none;
    color: #666;
}

@media screen and (max-width: 1280px) {

    .learning-journey #banner-overview-top {
        /*background-image: url('../img/lj_banner_top_white.png');
        background-image: url('../img/index_banner_1280.png');*/
        background-repeat: no-repeat;
        background-color: #262626;
        /*          background-size: cover; */
        max-width: 1280px;
        /*         background-position-y: calc(38% - 2em);
                background-position-x: 42%;*/
    }
    .learning-journey.dark-theme-lj #banner-top {
        background-color: #000;
    }

    .learning-journey #banner-overview-top .banner-content {
        margin-left: 10px;
        margin-right: 0%;
    }
}



/* tablet */

@media screen and (max-width: 1024px) {
    .learning-journey #banner-overview-top .banner-content .prod-description h4 {
        margin-right: 10%;
    }


    .learning-journey:not(.learning-hub-mode) #banner-overview-top .nav-links {
        display: none;
    }

    .learning-journey:not(.learning-hub-mode) #banner-overview-top #banner-top-menu {
        display: block;
    }

    .learning-journey #banner-overview-top {
        /*background-image: url('../img/lj_banner_top_white.png');
        background-image: url('../img/index_banner_bright_700_168.png');*/
        background-repeat: no-repeat;
        background-color: #262626;
        /*        background-size: cover;  */
        max-width: 1024px;
        /*      background-position-y: calc(38% - 2em);
                background-position-x: 42%;  */
    }
    .learning-journey.dark-theme-lj #banner-overview-top {
        /*background-image: url('../img/lj_banner_top_white.png');
        background-image: url('../img/index_banner_700_168.png');*/
        background-repeat: no-repeat;
        background-color: #000;
        background-size: 1024px;
        max-width: 768px;
        /*         background-position-y: calc(38% - 2em);
                background-position-x: 42%;  */
    }
    .learning-journey #banner-overview-top #banner-top-menu {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .learning-journey #banner-overview-top {
        /*background-image: url('../img/lj_banner_top_white.png');
        background-image: url('../img/index_banner_bright_700_168.png');*/
        background-repeat: no-repeat;
        background-color: #262626;
        background-size: 900px;
        max-width: 768px;
        background-position-y: calc(38% - 2em);
        background-position-x: 42%;
    }
    .learning-journey.dark-theme-lj #banner-overview-top {
        /*background-image: url('../img/lj_banner_top_white.png');
        background-image: url('../img/index_banner_700_168.png');*/
        background-repeat: no-repeat;
        background-color: #000;
        background-size: 900px;
        max-width: 768px;
        background-position-y: calc(38% - 2em);
        background-position-x: 42%;
    }
    .learning-journey #banner-overview-top #banner-top-menu {
        display: block;
    }
}





/* phone */

@media screen and (max-width: 640px) {
    .learning-journey #banner-overview-top .banner-content {
        text-align: center;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }

    .learning-journey #banner-overview-top {
        /*background-image: url('../img/lj_banner_top_white.png');
        background-image: url('../img/index_banner_bright_640_210_new.png');*/
        background-repeat: no-repeat;
        background-color: #262626;
        /*         background-size: cover;
        background-position-y: calc(38% - 2em);
                background-position-x: 42%;  */
    }
}
  /*  .learning-journey.dark-theme-lj #banner-overview-top {
        background-image: url('../img/lj_banner_top_white.png');
        background-image: url('../img/footer_image2_640_210.png');
        background-repeat: no-repeat;
        background-color: #000;
        background-size: cover;
        background-position-y: calc(38% - 2em);
        background-position-x: 42%;
    }

    .learning-journey #banner-overview-top .banner-content .prod-description h4 {
        margin: 0 10%;
    }

    .learning-journey #banner-overview-top .nav-links {
        display: none;
    }

    .learning-journey #banner-overview-top #banner-top-menu {
        display: block;
    }
}




/* Bottom Banner */

.learning-journey #banner-overview-bottom {
/*     background-image: url('../img/footer_image_new_1940_300.png'); */
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    background-position: center 100%;
    width: 100%;
}

.learning-journey.dark-theme-lj #banner-overview-bottom {
/*      background-image: url('../img/footer_image2_1940_300.png');*/
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    background-position: center 100%;
    width: 100%;
}

.learning-journey.dark-theme-lj #banner-overview-bottom {
/*      background-image: url('../img/footer_image2_dark.png');*/
}

.learning-journey #banner-overview-bottom .banner-content {
    width: 50%;
    margin-left: 5%;
}

.learning-journey #banner-overview-bottom .banner-content .wrap {
    padding-top: 30px;
}

.learning-journey #banner-overview-bottom .banner-content .wrap .add_source h1 {
    font-size: 24px;
    color: #000;
    font-weight: normal;
}

.learning-journey.dark-theme-lj #banner-overview-bottom .banner-content .wrap .add_source h1 {
    color: #FFF;
}

.learning-journey #banner-overview-bottom .banner-content .wrap .prod_desc {
    font-size: 11px;
}

.learning-journey #banner-overview-bottom .banner-content .wrap .prod_desc p {
    font-size: 14px;
}

.learning-journey.dark-theme-lj #banner-overview-bottom .banner-content .wrap .prod_desc p {
    color: #FFF;
}

@media screen and (max-width: 1024px) {
    .learning-journey #banner-overview-top {
        /*background-image: url('../img/lj_banner_top_white.png');
        background-image: url('../img/index_banner_bright_700_168.png');*/
        background-repeat: no-repeat;
        background-color: #262626;
        /*         background-size: cover;  */
        max-width: 1024px;
        /*         background-position-y: calc(38% - 2em);
                background-position-x: 42%;  */
    }
    .learning-journey.dark-theme-lj #banner-overview-top {
        /*background-image: url('../img/lj_banner_top_white.png');
        background-image: url('../img/index_banner_700_168.png');*/
        background-repeat: no-repeat;
        background-color: #000;
        /*        background-size: cover;  */
        max-width: 1024px;
        /*         background-position-y: calc(38% - 2em);
                background-position-x: 42%;  */
    }


    .learning-journey.dark-theme-lj #banner-overview-bottom {
/*          background-image: url('../img/footer_image2_dark_700_168.png');*/
    }


    .learning-journey .bottom_content {
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    .learning-journey #banner-overview-bottom {
        /*background-image: url('../img/lj_banner_top_white.png');
        background-image: url('../img/footer_image_new_700_168.png');*/
        background-repeat: no-repeat;
        background-color: #262626;
        background-size: cover;
        max-width: 1024px;
        /*         background-position-y: calc(38% - 2em);
                background-position-x: 42%;     */
    }

    .learning-journey.dark-theme-lj #banner-overview-bottom {
        /*background-image: url('../img/lj_banner_top_white.png');
        background-image: url('../img/footer_image2_dark_700_168.png');*/
        background-repeat: no-repeat;
        background-color: #000;
        background-size: cover;
        background-position-y: calc(38% - 2em);
        background-position-x: 42%;
    }
}



/* phone */

@media screen and (max-width: 640px) {
    .learning-journey.dark-theme-lj #banner-overview-top {
/*       background-image: url('../img/index_banner_640_210_new.png'); */  
    }
    .learning-journey #banner-overview-bottom .banner-content .wrap .add_source h1,
    .learning-journey #banner-overview-bottom .banner-content .wrap .prod_desc {
        text-align: left;
    }
    .learning-journey #banner-overview-bottom .banner-content {
        width: 100%;
        margin-left: 0%;
        text-align: center;
        padding: 0 10%;
    }
}

.learning-journey .bottom_content {
    z-index: 1;
    margin: auto;
    text-align: center;
}

.learning-journey .bottom_content .content-box {
    display: inline-block;
    vertical-align: top;
    width: 220px;
    padding: 20px;
}

.learning-journey .bottom_content .content-box h1 {
    font-size: 18px;
    text-align: center;
    font-weight: bold;
}

.learning-journey.dark-theme-lj .bottom_content .content-box h1 {
    color: #FFF;
}

.learning-journey .bottom_content .content-box p {
    font-size: 14px;
    text-align: left;
}

.learning-journey.dark-theme-lj .bottom_content p {
    color: #FFF;
}

.learning-journey .bottom_content .content-box div.box-image {
    display: block;
    width: 60px;
    height: 60px;
    margin-left: auto;
    margin-right: auto;
    border: 0px;
}

.learning-journey .bottom_content #floating-box1 div.box-image {
    background: url(../img/openSAP_icon_fill_48px.svg) no-repeat;
    background-size: 60px 60px;
}

.learning-journey.dark-theme-lj .bottom_content #floating-box1 div.box-image {
    background: url(../img/openSAP_icon_bottom_banner_dark.svg) no-repeat;
    background-size: 60px 60px;
}

.learning-journey .bottom_content #floating-box2 div.box-image {
    background: url(../img/sap_learning_hub_icon_bottom_banner.svg) no-repeat;
    background-size: 60px 60px;
}

.learning-journey.dark-theme-lj .bottom_content #floating-box2 div.box-image {
    background: url(../img/sap_learning_hub_icon_bottom_banner_dark.svg) no-repeat;
    background-size: 60px 60px;
}

.learning-journey .bottom_content #floating-box3 div.box-image {
    background: url(../img/sap_learning_room_icon_bottom_banner.svg) no-repeat;
    background-size: 60px 60px;
}

.learning-journey.dark-theme-lj .bottom_content #floating-box3 div.box-image {
    background: url(../img/sap_learning_room_icon_bottom_banner_dark.svg) no-repeat;
    background-size: 60px 60px;
}

.learning-journey .bottom_content #floating-box4 div.box-image {
    background: url(../img/sap_live_access_icon_bottom_banner.svg) no-repeat;
    background-size: 60px 60px;
}

.learning-journey.dark-theme-lj .bottom_content #floating-box4 div.box-image {
    background: url(../img/sap_live_access_icon_bottom_banner_dark.svg) no-repeat;
    background-size: 60px 60px;
}

.learning-journey .bottom_content #floating-box5 div.box-image {
    background: url(../img/certification_icon_bottom_banner.svg) no-repeat;
    background-size: 60px 60px;
}

.learning-journey.dark-theme-lj .bottom_content #floating-box5 div.box-image {
    background: url(../img/certification_icon_bottom_banner_dark.svg) no-repeat;
    background-size: 60px 60px;
}




/* tablet */

@media screen and (max-width: 1024px) {
    .learning-journey .bottom_content {
        width: 70%;
    }
}