﻿@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap');

* {
    font-family: 'Roboto', sans-serif;
    transition: 0.3s;
}


a,
a:focus,
a:select,
a:active,
a:visited {
    border: none !important;
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



section {
    padding: 0;
}

h2 {
    font-size: 3em;
    color: white;
    text-align: center;
    padding-bottom: 40px;
    padding-top: 10px;
    border-top: 8px solid #FF5722;
    display: inline-block;
    margin: 0 auto;
    right: 0;
}

h3 {
    font-size: 2em;
    font-weight: 700;
}

.course_text_div h3 {
    border-top: 6px solid #FF5722;
    display: inline-block;
    color: #FF5722;
    padding: 6px 0;
}

p {
    font-weight: 300;
    line-height: 1.2em;
}

body {
    background-image: url('../Images/Career2022/bg_green_01.jpg');
    background-size: 150%;
    background-attachment: scroll;
}



.modal {
    width: 98.5vw;
}

.modal-body {
    text-align: left;
}


#section_top {
    padding-top: 100px;
}

@media (min-width: 1200px) {
    main {
        background-size: cover;
        background-attachment: fixed;
    }
}


#kv_united {
    margin: 0 auto;
    right: 0;
}

    #kv_united img {
        width: 100%;
        padding: 3em 0 4em;
    }

.section_text {
    font-size: 20px;
}



a.btn_CTA {
    font-weight: 700;
    border-radius: 24px;
    color: white;
    padding: 12px 36px;
    background-color: #FF5722;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}

    a.btn_CTA:hover {
        color: #FF5722;
        background-color: white;
        box-shadow: 0px 0px 20px rgba(233,99,55,0.9);
    }


#joinustabbutton {
    position: fixed;
    z-index: 2000;
    top: 100px;
    left: 0;
}

    #joinustabbutton a.btn_special {
        font-weight: 700;
        background-color: #FF5722;
        color: white;
        padding: 24px 12px;
        border-radius: 0 10px 10px 0;
        writing-mode: vertical-rl;
        box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
    }

        #joinustabbutton a.btn_special:hover {
            color: #FF5722;
            background-color: white;
            box-shadow: 0px 0px 20px rgba(233,99,55,0.9);
        }





/* TOP VIDEO */

#feature_agentapp,
#feature_instantproapp {
    margin-left: 0;
    margin-right: 0;
}

#feature_topvideo div {
    font-size: 0;
}

.videobox {
    display: block;
    text-align: center;
    overflow: hidden;
    width: 100%;
}

    .videobox video {
        border: 0px transparent;
        mix-blend-mode: normal;
        opacity: 1;
    }



/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
#kv_united {
    max-width: 60vw;
}

.videobox video {
    width: 100%;
    height: 54.vw;
}

.vertical-align {
    display: auto;
}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #feature_topvideo div {
        margin: 0px;
        padding: 0px;
    }

    #kv_united {
        max-width: 50vw;
    }

    .videobox {
        margin: 0 auto;
        right: 0;
    }

        .videobox video {
            width: 750px;
            height: 421.88px;
        }

    .vertical-align {
        display: flex;
        align-items: center;
    }

    #feature_topvideo_container {
        padding-left: 15px;
        padding-right: 15px;
    }

    #feature_agentapp, #feature_instantproapp {
        margin-left: -15px;
        margin-right: -15px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #kv_united {
        max-width: 45vw;
    }

    .videobox video {
        width: 970px;
        height: 545.63px;
    }

    .vertical-align {
        display: flex;
        align-items: center;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #kv_united {
        width: 35vw;
        max-width: 40vw;
    }

    .videobox video {
        width: 1170px;
        height: 658.13px;
    }

    .vertical-align {
        display: flex;
        align-items: center;
    }
}

/* TOP VIDEO end */






/* FEATUREBOX */

#feature_agentapp, #feature_instantproapp {
    background-image: linear-gradient(45deg, #fff,#bbb);
    text-align: center;
}

.pix_agentapp {
    max-width: 450px;
    width: 300px;
    margin-top: -20px;
}

.btn_appdownload img {
    width: 150px;
}

.contenttextbox {
    text-align: center;
    padding-bottom: 50px;
}

a.btn_appdownload {
    box-shadow: 0px 0px 20px rgba(0,0,0,0.0);
}

    a.btn_appdownload:hover {
        box-shadow: 0px 0px 20px rgba(0,0,0,1);
    }

#feature_agentapp p, #feature_instantproapp p {
    padding: 0 50px;
}


/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .pix_agentapp {
        width: 300px;
        margin-top: -20px;
        padding: 0 10px 30px;
    }

    .btn_appdownload img {
        width: 120px;
    }

    .contenttextbox {
        text-align: left;
    }

    #feature_agentapp p, #feature_instantproapp p {
        padding: 0;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .pix_agentapp {
        width: 400px;
        margin-top: -30px;
        padding: 0 10px 30px;
    }

    .btn_appdownload img {
        width: 140px;
    }

    .contenttextbox {
        text-align: left;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .pix_agentapp {
        width: 450px;
        margin-top: -50px;
        padding: 0 10px 30px;
    }

    .btn_appdownload img {
        width: 180px;
    }

    .contenttextbox {
        text-align: left;
    }
}

/* FEATUREBOX end */





/* AdBlock */

#adblock {
    background-color: transparent;
}

    #adblock .row {
        text-align: center;
    }


    #adblock .adimage {
        width: 100%;
    }

        #adblock .adimage.formobile {
            display: block
        }

        #adblock .adimage.forweb {
            display: none;
        }


/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #adblock .adimage.formobile {
        display: block
    }

    #adblock .adimage.forweb {
        display: none;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #adblock .row .col-xs-12 {
        padding: 0 !important;
    }

    #adblock .adimage.formobile {
        display: none
    }

    #adblock .adimage.forweb {
        display: block;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #adblock .adimage.formobile {
        display: none
    }

    #adblock .adimage.forweb {
        display: block;
    }
}

/* AdBlock end */







/* POWERUP */

#section_powerup {
    padding: 100px 0 0;
}

.poweruptext h2, .poweruptext p {
    padding-bottom: 20px;
    color: white;
}

#section_powerup .powerupvideo {
    background-size: contain;
    text-align: center;
    overflow: hidden;
    background-attachment: scroll;
    margin-bottom: 20px;
}


.shadowmask {
    position: absolute;
    display: block;
    height: 100%;
    width: 95%;
    opacity: 1;
    background: rgba(0,0,0,.6);
    z-index: 0;
    background-size: 100%;
    border-top: 5px solid #FF5722;
}

.ctadiv {
    padding: 50px 0;
}

.modallinkbox {
    z-index: 10;
    position: relative;
}

#video01 .shadowmask {
    background-image: url('../Images/Career2022/powerupvideo_1.jpg');
}

    #video01 .shadowmask::after {
        content: ' ';
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
    }

#video02 .shadowmask {
    background-image: url('../Images/Career2022/powerupvideo_2.jpg');
}

#video03 .shadowmask {
    background-image: url('../Images/Career2022/powerupvideo_3.jpg');
}

#video04 .shadowmask {
    background-image: url('../Images/Career2022/powerupvideo_4.jpg');
}

#video05 .shadowmask {
    background-image: url('../Images/Career2022/powerupvideo_5.jpg');
}

#video06 .shadowmask {
    background-image: url('../Images/Career2022/powerupvideo_6.jpg');
}

#video07 .shadowmask {
    background-image: url('../Images/Career2022/powerupvideo_7.jpg');
}

.videomodallink {
    align-items: center;
    display: flex;
    justify-content: center;
}

.va_child {
    padding: 0 2em;
}

.contentdescription {
    display: block;
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.2em;
    color: white;
    text-shadow: 0px 5px 20px rgba(0,0,0,1);
    padding-bottom: 1em;
    transition: 0.5s;
}


a:hover .contentdescription {
    text-shadow: 0px 5px 30px rgba(0,0,0,2);
    transition: 0.5s;
}

a .btn_powerupvideo {
    display: inline-block;
    font-weight: 700;
    border-radius: 24px;
    color: white;
    padding: 12px 36px;
    background-color: #FF5722;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
    transition: 0.5s;
}

a:hover .btn_powerupvideo {
    color: #FF5722;
    background-color: white;
    box-shadow: 0px 0px 20px rgba(233,99,55,0.9);
    transition: 0.5s;
}


.modal-dialog {
    width: 100%;
    height: 280px;
}

#videoModal iframe {
    height: 280px;
}


/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

#video01, #video02, #video03, #video04, #video05, #video06, #video07 {
    height: 55.25vw;
}

    #video01 .videomodallink, #video02 .videomodallink, #video03 .videomodallink, #video04 .videomodallink, #video05 .videomodallink, #video06 .videomodallink, #video07 .videomodallink {
        height: 50vw;
    }


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #video01, #video02, #video03, #video04, #video05, #video06, #video07 {
        width: 375px;
        height: 210.94px;
    }

        #video01 .videomodallink, #video02 .videomodallink, #video03 .videomodallink, #video04 .videomodallink, #video05 .videomodallink, #video06 .videomodallink, #video07 .videomodallink {
            height: 175px;
        }

    .modal-dialog {
        width: 730px;
        height: 410.63px;
    }

    #videoModal iframe {
        height: 420px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #video01 {
        width: 970px;
        height: 545.63px;
    }

    #video02, #video03, #video04, #video05, #video06, #video07 {
        width: 323.33px;
        height: 181.69px;
    }

    #video01 .videomodallink {
        height: 540px;
    }

    #video02 .videomodallink, #video03 .videomodallink, #video04 .videomodallink, #video05 .videomodallink, #video06 .videomodallink, #video07 .videomodallink {
        height: 200px;
    }

    .modal-dialog {
        width: 970px;
        height: 545.63px;
    }

    #videoModal iframe {
        height: 540px;
    }

    .shadowmask {
        width: 100%;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #video01 {
        width: 1170px;
        height: 658.13px;
    }

    #video02, #video03, #video04, #video05, #video06, #video07 {
        width: 390px;
        height: 219.38px;
    }

    #video01 .videomodallink {
        height: 650px;
    }

    #video02 .videomodallink, #video03 .videomodallink, #video04 .videomodallink, #video05 .videomodallink, #video06 .videomodallink, #video07 .videomodallink {
        height: 215px;
    }

    .modal-dialog {
        width: 1100px;
        height: 658.13px;
    }

    #videoModal iframe {
        height: 599px;
    }
}

/* POWERUP end */














/* GROW WITH US */

#section_growwithus {
    background-image: linear-gradient(0deg, #efefef,#ddd);
    padding: 80px 0 100px;
}

.growwithustext h2, .growwithustext p {
    padding-bottom: 20px;
}

#section_growwithus .modal-body {
    font-size: 1.2em;
    font-weight: 300;
    color: #444;
    padding: 1.5em;
}

#section_growwithus h2 {
    color: #444;
    padding-bottom: 10px;
}

#section_growwithus h3 {
    color: #444;
    padding: 1em 0;
}

#section_growwithus h4 {
    color: #444;
    font-size: 1.2em;
    font-weight: 700;
    padding: 1em 0;
}




#section_growwithus .btn {
    width: 280px;
    padding: 18px 36px;
    font-size: 1.1em;
    font-weight: 300;
    border-radius: 10px !important;
    border: 1px solid #eeeeee;
    background-color: #fff;
    color: #444;
    transition: 0.3s;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#section_growwithus a.btn:hover {
    padding: 18px 36px;
    font-size: 1.1em;
    font-weight: 300;
    border-radius: 10px !important;
    border: 1px solid #ff6501;
    background-color: #ff6501;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    color: #fff !important;
    transition: 0.3s;
}

    #section_growwithus a.btn:hover .stepsnumber span {
        background-color: #fff;
        color: #ff6501;
    }


#section_growwithus .btn b {
    font-size: 1.4em;
    font-weight: 700;
    display: block;
    transition: 0s;
}

.stepsnumber {
    font-size: 1.2em;
    font-weight: 700;
    display: block;
    color: white;
    margin: 10px;
}

    .stepsnumber span {
        display: inline-block;
        margin: 0 auto;
        right: 0;
        background-color: #ff6501;
        padding: 6px;
        width: 38px;
        height: 38px;
        border-radius: 25px;
    }




#section_growwithus .newsalesperson .btn {
    background-color: #ffd6ad;
    border-color: #ffcb98;
}

#section_growwithus .experiencesalesperson .btn {
    background-color: #eee;
    border-color: #ddd;
}


/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}


/* GROW WITH US end */





/* CAREER PATH */

#section_careerprogression {
    /*background-image:linear-gradient(0deg, #444,#222);*/
    padding: 80px 0 100px;
    color: white;
}

.careerpathtext h2, .careerpathtext p {
    padding-bottom: 20px;
}

.careerdiagramimage {
    width: 360px;
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .careerdiagramimage {
        width: 480px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .careerdiagramimage {
        width: 640px;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .careerdiagramimage {
        width: 640px;
    }
}





/* CAREER PATH end */



/* JOIN US */

#section_joinus {
    background: transparent;
    padding: 100px 0;
    color: white;
}

/* JOIN US */






/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    ...
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    ...
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    ...
}











/* TRAINING COURSES Slider */

#section_trainingcourses {
    padding: 100px 0 0;
}

    #section_trainingcourses .kvbox img {
        width: 100%;
    }

.trainingcoursestext h2, .trainingcoursestext p {
    padding-bottom: 20px;
    color: white;
}

.featuredcourses_container .container {
    text-align: center;
}

.courses_sliderplate {
    position: relative;
    display: block;
    width: 262px;
    height: 382px;
    margin: 0px 15px 0px 0px;
    border: 0px solid rgba(0,0,0,0.01);
    background-color: #fff;
    overflow: hidden;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0px 10px rgba(0,0,0,0.1);
    ;
}


/* BxSlider Related Courses */
/* Using from featuredcourses_container classes */
/* ================================================*/



#featuredcourses_proprev {
    position: absolute;
    top: 180px;
    z-index: 99;
}

#featuredcourses_pronext {
    position: absolute;
    top: 200px;
    z-index: 99;
}


.featuredcourses_container {
    background: none;
    min-height: 400px;
    padding-bottom: 100px;
}

.courses_sliderplate {
    height: 423px;
}

#featuredcourses_proprev {
    top: 200px;
}



/* Featured Courses and Popular Courses Slider */
/*=====================================================*/


.featuredcourses_sliderplate_box {
    position: relative;
}

#featuredcourses_sliderplate_box_outter {
    position: relative;
}

#featuredcourses_sliderplate_box {
    display: inline-block;
    overflow: hidden;
}



/* Extra Small */
@media(max-width:767px) {
    #featuredcourses_sliderplate_box {
        width: 100%;
    }

    .featuredcourses_container .container {
        overflow: visible;
    }

    .courseheaderbox {
        padding-left: 15px;
    }

    #featuredcourses_proprev, #featuredcourses_pronext {
        display: none;
    }

    .text_1of6 {
        display: inline-block;
    }
}

/* Small */
@media(min-width:768px) and (max-width:991px) {
    #featuredcourses_sliderplate_box {
        width: 543px;
    }

    .text_1of6 {
        display: none;
    }

    #featuredcourses_proprev {
        left: 50px;
    }

    #featuredcourses_pronext {
        right: 50px;
    }
}

/* Medium */
@media(min-width:992px) and (max-width:1199px) {
    #featuredcourses_sliderplate_box {
        width: 815px;
    }

    .text_1of6 {
        display: none;
    }

    #featuredcourses_proprev {
        left: 30px;
    }

    #featuredcourses_pronext {
        right: 30px;
    }
}

/* Large */
@media(min-width:1200px) {
    #featuredcourses_sliderplate_box {
        width: 1085px;
    }

    .text_1of6 {
        display: none;
    }

    #featuredcourses_proprev {
        left: -10px;
    }

    #featuredcourses_pronext {
        right: -10px;
    }
}


/* Contentblock Styling for Course Details box */
/* =========================================== */

.contentblock {
    height: 150px;
    position: relative;
}

.coursebox_alignbottom {
    position: absolute;
    width: 90%;
    bottom: 10px;
}

a.course_button {
    font-size: 10px;
    font-weight: 600;
    color: #FF5722 !important;
    background: transparent;
    border: 1px solid #FF5722;
    padding: 3px 18px;
    margin: 0px;
    border-radius: 30px;
    display: inline-block;
    position: absolute;
    bottom: 15px;
}

    a.course_button:hover {
        color: #FFF !important;
        background: #FF5722;
        border: 1px solid #FF5722;
    }


.contentblock {
    color: #444;
    padding: 10px 15px;
    position: relative;
    display: block;
}

.course_title {
    font-size: 34px;
    line-height: 41px;
    font-weight: bold;
    color: #fff;
    margin: 5px 0px;
}

.course_companygroup {
    display: table;
    margin-top: 6px;
}

.course_ministry {
    font-weight: bold;
    display: block;
    line-height: 14px;
}

.course_text {
    font-size: 13px;
    display: block;
    margin-top: 8px;
    margin-bottom: 10px;
}


.course_companygroupname {
    padding-top: 0px;
    padding-left: 10px;
}

.course_currency {
    font-size: 22px;
    vertical-align: top;
    margin-top: 5px;
    display: inline-block;
}

.course_cost {
    font-size: 28px;
}

.leftbox .course_currency,
.leftbox .course_cost {
    font-weight: normal;
}

.rightbox .course_currency,
.rightbox .course_cost {
    font-weight: bold;
}


.course_fee_box {
    margin-top: 0px;
    padding-top: 17px;
    margin-bottom: 20px;
    border-top: 1px solid rgba(179,175,175,0.5);
}


.leftbox,
.rightbox {
    text-align: left;
}

.leftbox {
    width: 40%;
}


.rightbox {
    padding-left: 0px;
}


.course_note {
    font-size: 16px;
    line-height: 18px;
}


/* Extra Small */
@media(max-width:767px) {
    .backtosearch_box {
        position: relative;
    }

    .contentblock {
        height: 130px;
    }
}

/* Small */
@media(min-width:768px) and (max-width:991px) {
    .leftbox {
        width: 50%;
    }

    .contentblock {
        height: 130px;
    }
}

/* Medium */
@media(min-width:992px) and (max-width:1199px) {
}

/* Large */
@media(min-width:1200px) {
}




/* Course sliderplate description styling */
/*=====================================================*/


.course_newlabel {
    background: url('../images/icon_new.png');
    background-repeat: no-repeat;
    width: 56px;
    height: 56px;
    padding: 0px;
    margin: 0px;
    top: 0px;
    right: 0px;
    display: block;
    position: absolute;
    z-index: 20;
}

.course_title {
    font-size: 18px;
    font-weight: bold;
    line-height: 21px;
    color: #FF5722;
    margin-bottom: 2px;
    position: relative;
}

.course_institution {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
}

.course_institution_number {
    font-size: 12px;
    font-weight: bold;
    line-height: 10px;
    color: #fff;
    background-color: #fc3d1a;
    padding: 5px 8px 4px 8px;
    display: inline-block;
    margin-top: -1px;
    margin-left: 5px;
    position: absolute;
    border-radius: 10px;
    min-width: 30px;
    text-align: center;
}

.leftbox, .rightbox {
    display: table-cell;
    width: 50%;
    position: relative;
}

.darkgray {
    font-weight: bold;
}

.gray {
    color: #666;
}

.darkgray {
    color: #333;
}


.course_image_div img {
    width: 100%;
}

.course_text_div {
    padding: 20px;
    background-color: #fff;
    text-align: left;
}

    .course_text_div p {
        padding-bottom: 20px;
    }

.courses_col {
    padding: 0 15px 15px 15px;
}

.card {
    border: 0px solid rgba(0,0,0,0.01);
    background-color: #fff;
    overflow: hidden;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0px 10px rgba(0,0,0,0.1);
}

.contentblock {
    padding-bottom: 20px;
}

.courses_sliderplate_banner_box img {
    width: 100%
}



/* TRAINING COURSES Slider end */


/* TESTIMOBIALS CAROUSEL */

#myCarousel .item {
    padding: 20px;
    min-height: 250px;
}

#myCarousel .carousel-caption {
    position: relative;
    padding: 0px 50px 50px 50px;
    background-color: transparent;
}

#myCarousel .item h3 {
    font-size: 1.8em;
    font-weight: 300;
    font-style: italic;
}


#myCarousel .item p {
    font-size: 1.4em;
    font-weight: 100;
    max-width: 480px;
    margin: 0 auto;
    right: 0;
}

#myCarousel .profileimage {
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 auto;
    right: 0;
    border-radius: 80px;
    display: block;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

    #myCarousel .profileimage img {
        width: 100%;
    }


/* YOUR CSS simplified */
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    height: auto;
    width: 100%;
    line-height: 1;
}

/*Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb*/
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
    transition: 0.2;
}

.carousel-fade .carousel-inner .active {
    opacity: 1;
}

    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
        left: 0;
        opacity: 0;
        z-index: 1;
    }

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-control {
    z-index: 2;
}

/*WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        transition: 1s;
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        transition: 1s;
        -webkit-transform: translate3d(-300px, 0, 0);
        transform: translate3d(-300px, 0, 0);
    }

        .carousel-fade .carousel-inner > .item.next.left,
        .carousel-fade .carousel-inner > .item.prev.right,
        .carousel-fade .carousel-inner > .item.active {
            opacity: 1;
            transition: 1s;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
}



/* TESTIMOBIALS CAROUSEL end */

#divImgFB {
    visibility: visible;
}
