body {
    font-family: "Open Sans", sans-serif;
    overflow-x: hidden
}

#wrapper .font-family-open {
    font-family: "Open Sans", sans-serif
}

#wrapper .font-weight-600 {
    font-weight: 600
}

#wrapper .text-transform-upper {
    text-transform: uppercase
}

#wrapper .font12 {
    font-size: 12px
}

#wrapper .font17 {
    font-size: 17px
}

#wrapper .font20 {
    font-size: 20px
}

#wrapper .font-22 {
    font-size: 22px
}

#wrapper .font-36 {
    font-size: 36px
}

#wrapper .font50 {
    font-size: 48px
}

#wrapper .font24 {
    font-size: 24px
}

#wrapper .font-family-condensed {
    font-family: "Open Sans Condensed"
}

#wrapper .justify-content-center {
    display: flex;
    justify-content: center
}

#wrapper .fifth-bg-color {
    background-color: #006ca8
}

#wrapper .year-font-color {
    color: #a7adaf
}

#wrapper #page-content-wrapper .navbar-toggler {
    display: none!important
}

#wrapper #page-content-wrapper .container-fluid .section-heading {
    border-bottom: 1px dashed gray;
    padding-bottom: 10px
}

#wrapper .content-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    -moz-border-radius: 50%px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #000;
    vertical-align: middle;
    margin-right: 10px;
    margin-left: 10px
}

#wrapper p {
    margin: 0
}

#wrapper textarea {
    overflow: auto
}

#wrapper .navbar-light .navbar-nav .nav-link {
    color: #fff
}

#wrapper .material {
    position: relative;
    color: #fff;
    margin: 20px auto;
    height: 400px;
    width: 500px;
    background: #f45673
}

#wrapper .ripple {
    overflow: hidden
}

#wrapper .ripple-effect {
    position: absolute;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background: #fff;
    animation: ripple-animation 2s
}

@keyframes ripple-animation {
    from {
        transform: scale(1);
        opacity: .4
    }
    to {
        transform: scale(100);
        opacity: 0
    }
}

#wrapper .mdc-ripple-surface::after,
#wrapper .mdc-ripple-surface::before {
    background: #fff
}

#wrapper .color-box {
    width: 100%;
    height: 100px;
    margin-top: 10px
}

#wrapper .color-details {
    margin-bottom: 10px;
    padding: 10px 0
}

#wrapper .colors-section .row .col-md-2 {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    transition: box-shadow .3s ease-in-out;
    cursor: pointer
}

#wrapper .colors-section .row .col-md-2:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3)
}

#wrapper #page-content-wrapper .navbar {
    color: #fff
}

#wrapper .list-group .scroll:hover {
    background: 0 0!important
}

#wrapper .activeSection {
    display: block!important
}

#wrapper .container-fluid {
    padding-top: 15px;
    padding-bottom: 15px;
    display: none
}

#wrapper .btnSection,
#wrapper .cardSection,
#wrapper .chartSection,
#wrapper .componentSection,
#wrapper .popupSection,
#wrapper .sliderSection {
    display: none
}

#wrapper .nav-pagination {
    margin: 0 auto;
    display: block;
    width: 360px
}

#wrapper .container-fluid .card {
    box-shadow: none!important;
    border-radius: 0!important
}

#wrapper .container-fluid .card .card-img-top {
    border-radius: 0!important
}

#wrapper #charts-wrapper iframe {
    width: 100%;
    height: 650px
}

#wrapper .bg-green {
    background-color: #006ca8!important
}

#wrapper #footerSection .bg-green {
    color: #fff!important
}

#wrapper #footerSection .bg-green:hover {
    color: #006ca8!important
}

#wrapper .carousel .heading {
    font-family: "Open Sans";
    line-height: 44px;
    font-size: 42px;
    font-weight: 700
}

#wrapper .sub-heading {
    font-family: "Open Sans";
    line-height: 37px;
    font-size: 32px;
    font-weight: 600
}

#wrapper .headinngTxt {
    font-family: "Open Sans";
    line-height: 28px;
    font-size: 18px;
    font-weight: 400
}

#wrapper #carouselExampleFade.one {
    width: 100%;
    background: url(https://www2.deloitte.com/etc/insights-lists/interactives/staging/2020/July/Global-marketing-trends-package/Home/assets/banner/GMT-hero.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%
}

#wrapper .second-banner #carouselExampleFade {
    width: 100%;
    background: url(../assets/TT2020-video-animation.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%
}

#wrapper .linear-banner {
    background-image: url(https://www2.deloitte.com/etc/insights-lists/interactives/staging/2019/November/Holiday-reading-guide/assets/updated-icons/HOL19_background_wallpaper.jpg);
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

#wrapper .second-banner #carouselExampleFade .carousel-inner {
    max-height: max-content;
    background-color: rgba(0, 0, 0, .85)
}

#wrapper .banner-heroImg {
    width: 100%;
    height: 100%
}

#wrapper .headingTxt {
    color: #fff;
    line-height: 1.2;
    padding: 10px
}

#wrapper .heading-desc {
    line-height: 28px
}

#wrapper .mobile-explore-watch-btn .btn-default {
    font-family: "Open Sans";
    text-transform: initial;
    color: #006ca8;
    font-size: 18px;
    font-weight: 600;
    background-color: #fff;
    border: 1px solid #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 20px;
    padding-left: 20px;
    border-radius: 2px;
    min-width: 200px;
    margin-right: 5px
}

#wrapper .mobile-explore-watch-btn button.btn-default:hover {
    background-color: transparent!important;
    border: 1px solid #fff!important;
    color: #fff!important;
    border-radius: 3px;
    font-weight: 700
}

#wrapper #carouselExampleFade .carousel-inner {
    max-height: 650px
}

#wrapper .carousel-caption {
    margin-top: 80px!important;
    top: 0;
    left: 10%;
    text-align: left!important
}

#wrapper .carousel-item .d-block {
    right: 0!important;
    float: right;
    padding: 0 50px 0 48px;
    margin: 40px 0
}

#wrapper .carousel-caption .detail {
    color: #000
}

#wrapper .downloadBtn {
    text-transform: initial!important;
    background-color: #0d3a61!important
}

#wrapper .compress {
    font-weight: 700
}

#wrapper .jumbotron {
    text-align: center;
    background-color: #196069!important;
    color: #fff!important;
    position: relative;
    margin-bottom: 0
}

#wrapper .jumbotron .container {
    max-width: 665px
}

#wrapper .jumbotron .container {
    position: relative
}

#wrapper .share span {
    line-height: 40px;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    opacity: 1;
    transition: opacity .3s ease-in-out;
    pointer-events: none
}

#wrapper .share nav {
    font-size: 0
}

#wrapper .share a img {
    width: 36px;
    height: 36px
}

#wrapper .share a {
    line-height: 32px;
    text-align: center;
    display: inline-block;
    color: #fff;
    overflow: hidden;
    opacity: 1;
    transition: all .3s ease-in-out;
    margin: 0 -18px;
    text-decoration: none
}

#wrapper .share a:nth-child(1) {
    margin-left: 0
}

#wrapper .share a:nth-child(4) {
    border-top-right-radius: 36px;
    border-bottom-right-radius: 36px;
    margin-right: 0
}

#wrapper .share a:nth-child(4):hover {
    background-color: #000
}

#wrapper .share.hover span,
#wrapper .share:hover span {
    opacity: 0
}

#wrapper .share.hover a,
#wrapper .share:hover a {
    border-radius: 50%;
    margin: 0 10px;
    color: #4e4e4e;
    font-size: 28px;
    font-weight: 700
}

#wrapper .share.hover a:hover,
#wrapper .share:hover a:hover {
    color: #fff
}

#wrapper .backgroundProperty {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 36px;
    width: 36px;
    outline: 0
}

#wrapper .my-share {
    background-image: url(../assets/share-active.svg)
}

#wrapper .my-share:hover {
    background-image: url(../assets/share-hover.svg)
}

#wrapper .facebook {
    background-image: url(../assets/facebook-active.svg)
}

#wrapper .facebook:hover {
    background-image: url(../assets/facebook-hover.svg)
}

#wrapper .twitter {
    background-image: url(../assets/twitter-active.svg)
}

#wrapper .twitter:hover {
    background-image: url(../assets/twitter-hover.svg)
}

#wrapper .linkedIn {
    background-image: url(../assets/linkedin-active.svg)
}

#wrapper .linkedIn:hover {
    background-image: url(../assets/linkedin-hover.svg)
}

#wrapper .icon-header {
    padding: 10px;
    border: 1px solid #ccc;
    border-bottom: none
}

#wrapper .socialMediaIcon {
    display: none!important;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out
}

#wrapper .socialMediaIcon.active {
    display: inline-block!important;
    margin-right: 10px;
    transition: all .3s ease-in-out
}

#wrapper .sticky-icon-wrapper {
    float: right;
    margin-top: 20px;
    margin-right: 15px
}

#wrapper .sticky-icon-wrapper .btn:focus {
    box-shadow: none
}

#wrapper .download-blue-icon {
    width: 35px;
    height: 35px;
    background-image: url(../assets/download-blue.svg);
    background-repeat: no-repeat
}

#wrapper .download-blue-icon:hover {
    background-image: url(../assets/download-blue-hover.svg)
}

#wrapper #overlay {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    font-family: Open Sans;
    background: rgba(123, 123, 123, .66)
}

#wrapper #Overlaycontainer1 {
    position: fixed;
    transform: translate(-50%, -50%) scale(1);
    top: calc(50% - 100px);
    left: 50%;
    width: 67%;
    min-width: 250px;
    max-width: 750px;
    max-height: calc(100vh - 250px);
    z-index: 655
}

#wrapper #Overlaycontainer1 #Overlaycard1 {
    padding: 20px;
    position: relative;
    width: auto;
    height: auto;
    background: hsla(0, 0%, 100%, .96);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    padding-top: 18px;
    padding-bottom: 18px;
    font-family: Open Sans;
    padding-right: 18px
}

#wrapper #overlay #congratstitle .header-icon {
    float: left;
    margin-right: 10px;
    width: 35px
}

#wrapper .code-text-area {
    overflow-y: auto
}

#wrapper .code-text-area::-webkit-scrollbar-track,
#wrapper .form-control::-webkit-scrollbar-track,
#wrapper .modal .modal-body.content-body {
    border-radius: 10px
}

#wrapper .code-text-area::-webkit-scrollbar,
#wrapper .form-control::-webkit-scrollbar,
#wrapper .modal .modal-body.content-body::-webkit-scrollbar {
    width: 4px;
    background-color: #a7a8aa
}

#wrapper .code-text-area::-webkit-scrollbar-thumb,
#wrapper .form-control::-webkit-scrollbar-thumb,
#wrapper .modal .modal-body.content-body::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: grey
}

#wrapper #Overlaycontainer1 #Overlaycard1 #Overlayclose1 {
    position: absolute;
    top: 8px!important;
    width: 30px!important;
    height: 30px!important;
    right: 8px!important;
    background-image: url(../assets/close-active.svg);
    background-size: cover;
    cursor: pointer;
    transition: transform .2s;
    z-index: 999
}

#wrapper #Overlaycontainer1 #Overlaycard1 #Overlayclose1:hover {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    background-image: url(../assets/close-hover.svg);
    background-size: cover;
    cursor: pointer;
    transition: transform .2s
}

#wrapper #overlay-wrapper {
    max-height: 400px
}

#wrapper .txtSub2 .heading {
    color: #00a5b8;
    font-weight: 700
}

#wrapper .exploreBtn {
    margin-top: 20px
}

#wrapper #overlay .txtbold {
    font-size: 22px;
    font-weight: 700;
    color: #343741
}

#wrapper #overlay .info1 {
    padding: 10px 40px
}

#wrapper #exampleModalTwo .carousel-inner .carousel-item img {
    width: 100%;
    height: 100%
}

#wrapper #modalcarouselSection .darkblue-text {
    margin-right: 5px
}

#wrapper #modalcarouselSection .carousel-indicators li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #a8a8a8
}

#wrapper #modalcarouselSection .carousel-indicators li.active {
    background-color: #86bc25
}

#wrapper #exampleModalTwo.modal .modal-content .modal-body.content-body {
    padding: 0 24px
}

#wrapper .modal .modal-content .modal-body.content-body {
    padding: 0 24px 24px
}

#wrapper .modal .modal-content {
    border-radius: 0;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)!important
}

#wrapper .modal .modal-content .modal-header.top-header {
    border-radius: 0;
    border: none
}

#wrapper #modalcarouselSection .carousel-control-next,
#wrapper #modalcarouselSection .carousel-control-prev {
    width: unset;
    opacity: 1;
    cursor: pointer
}

#wrapper #modalcarouselSection .carousel-control-prev {
    left: 0
}

#wrapper .nextIcon,
#wrapper .previousIcon {
    height: 35px;
    width: 35px;
    background-position: center;
    background-repeat: no-repeat
}

#wrapper .previousIcon {
    background-image: url(../assets/carousel/left-arrow.svg)
}

#wrapper .nextIcon {
    background-image: url(../assets/carousel/right-arrow.svg)
}

@media (min-width:992px) {
    #wrapper .modal .modal-lg.large {
        max-width: 1150px
    }
}

#wrapper .modalCards {
    padding-right: 40px;
    padding-left: 20px
}

#wrapper .modal .modal-content .closeIcon {
    background-image: url(../assets/close-active.svg);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    position: absolute;
    right: 1%;
    top: 2%;
    cursor: pointer;
    z-index: 9
}

#wrapper .modal .modal-content .closeIcon:hover {
    background-image: url(../assets/close-hover.svg);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px
}

#wrapper .modalCloseBtn:focus,
#wrapper .modalCloseBtn:hover {
    background-color: transparent
}

#wrapper .modal .modal-dialog {
    position: fixed;
    left: 5%;
    right: 5%
}

#wrapper .white-text {
    color: #fff!important
}

#wrapper .text-compress {
    line-height: 1.2
}

#wrapper .general-text {
    color: #343741
}

#wrapper .padding-btn {
    padding-top: 10px;
    padding-bottom: 10px;
    min-width: 178px;
    margin-top: 20px
}

#wrapper .bg-blue {
    background-color: #006ca8
}

#wrapper .readBtn:focus,
#wrapper .readBtn:hover {
    color: #006ca8;
    background-color: #fff;
    border: 1px solid #006ca8
}

#wrapper .labels {
    font-weight: 700;
    fill: #343741;
    font-size: 16px
}

#wrapper .label {
    font-weight: 700;
    font-size: 16px
}

#wrapper body {
    font-family: 'Open Sans';
    overflow-x: hidden
}

#wrapper .Legend {
    padding: 10px;
    margin-left: 6px
}

#wrapper .radio {
    display: flex;
    padding: 10px
}

#wrapper .radio div {
    padding: 5px
}

#wrapper .legend-item {
    display: inline-flex;
    padding-right: 20px
}

#wrapper .fattr1 {
    display: flex;
    justify-content: space-between
}

#wrapper .crossLineBg {
    width: 70px;
    height: 20px;
    fill: #fff;
    stroke: #000;
    stroke-width: 1;
    opacity: .9
}

#wrapper .crossLineText {
    fill: #000
}

#toolTip {
    position: absolute;
    background-color: #53565a;
    padding: 8px;
    width: 200px;
    max-width: 200px;
    pointer-events: none;
    transform: translate(-50%, -100%);
    opacity: 0;
    text-align: center;
    border: 2px solid #d0d0ce
}

#toolTip .after {
    content: " ";
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    right: 5px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #d0d0ce;
    margin-left: -10px
}

.rightPointer#toolTip .after {
    transform: translate(90px, 0)
}

.leftPointer#toolTip .after {
    transform: translate(-90px, 0)
}

#wrapper .HeaderText {
    font-size: 30px
}

#wrapper .font-weight-bold {
    font-weight: 700
}

#wrapper .attText {
    text-align: right;
    font-size: 11px;
    margin-top: 14px;
    margin-right: 8px;
    font-weight: 700;
    height: 25px
}

#wrapper #fText {
    font-size: 13px
}

#wrapper .HeaderText {
    padding-top: 20px;
    font-size: 24px;
    color: #343741;
    font-family: "Open Sans Condensed"
}

#wrapper .xAxisClass .tick line,
#wrapper .yAxisClass .tick line,
#wrapper .yAxisClass path {
    display: none
}

#wrapper .clinical-cut-off-line {
    fill: none;
    stroke-dasharray: 5, 3;
    stroke-width: 3px
}

#wrapper .clinical-cut-off-text {
    text-transform: uppercase;
    text-anchor: start;
    font-size: 12px;
    font-weight: 700
}

#wrapper .selected {
    fill: #afa2dc;
    stroke: #2f225d
}

#wrapper .area {
    clip-path: url(#clip)
}

#wrapper .brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges
}

#wrapper .tooltip {
    position: absolute;
    text-align: left;
    font-family: SuisseIntl;
    font-size: 12px;
    width: 80px;
    height: 52px;
    padding: 8px;
    background: #fff;
    pointer-events: none;
    background-color: #fff;
    line-height: .05em
}

#wrapper .overlay {
    fill: none;
    opacity: .2
}

#login-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 20px
}

#login-wrapper a {
    color: #92badd;
    display: inline-block;
    text-decoration: none;
    font-weight: 400
}

#login-wrapper h2 {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    margin: 40px 8px 10px 8px;
    color: #ccc
}

#login-wrapper #formContent {
    -webkit-border-radius: 0;
    border-radius: 0;
    background: #343a40;
    padding: 30px;
    width: 90%;
    max-width: 450px;
    position: relative;
    padding: 0;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 30px 60px 0 rgba(0, 0, 0, .3);
    text-align: center
}

#login-wrapper #formFooter {
    background-color: #f6f6f6;
    border-top: 1px solid #dce8f1;
    padding: 25px;
    text-align: center;
    -webkit-border-radius: 0;
    border-radius: 0
}

#login-wrapper h2.inactive {
    color: #ccc
}

#login-wrapper h2.active {
    color: #0d0d0d;
    border-bottom: 2px solid #5fbae9
}

#login-wrapper input[type=button],
#login-wrapper input[type=reset],
#login-wrapper input[type=submit] {
    background-color: #56baed;
    border: none;
    color: #fff;
    padding: 15px 80px;
    width: 85%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(95, 186, 233, .4);
    box-shadow: 0 10px 30px 0 rgba(95, 186, 233, .4);
    -webkit-border-radius: 0;
    border-radius: 0;
    margin: 5px 20px 40px 20px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

#login-wrapper input[type=button]:hover,
#login-wrapper input[type=reset]:hover,
#login-wrapper input[type=submit]:hover {
    background-color: #39ace7
}

#login-wrapper input[type=button]:active,
#login-wrapper input[type=reset]:active,
#login-wrapper input[type=submit]:active {
    -moz-transform: scale(.95);
    -webkit-transform: scale(.95);
    -o-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95)
}

#login-wrapper .login-input {
    background-color: #f6f6f6;
    border: none;
    color: #0d0d0d;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px;
    width: 85%;
    border: 2px solid #f6f6f6;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-border-radius: 0;
    border-radius: 0
}

#login-wrapper .login-input:focus {
    background-color: #fff;
    border-bottom: 2px solid #5fbae9
}

#login-wrapper .login-input:placeholder {
    color: #ccc
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

#login-wrapper .fadeIn {
    opacity: 0;
    -webkit-animation: fadeIn ease-in 1;
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s
}

#login-wrapper .fadeIn.first {
    -webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    animation-delay: .4s
}

#login-wrapper .fadeIn.second {
    -webkit-animation-delay: .6s;
    -moz-animation-delay: .6s;
    animation-delay: .6s
}

#login-wrapper .fadeIn.third {
    -webkit-animation-delay: .8s;
    -moz-animation-delay: .8s;
    animation-delay: .8s
}

#login-wrapper .fadeIn.fourth {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s
}

#login-wrapper .underlineHover:after {
    display: block;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    background-color: #56baed;
    content: "";
    transition: width .2s
}

#login-wrapper .underlineHover:hover {
    color: #0d0d0d
}

#login-wrapper .underlineHover:hover:after {
    width: 100%
}

#login-wrapper :focus {
    outline: 0
}

#login-wrapper #icon {
    width: 50%;
    margin: 25px
}

#wrapper .content-section {
    text-align: center;
    color: #343741!important;
    position: relative;
    padding: 50px
}

#wrapper .content-section .share {
    float: right;
    position: absolute;
    right: 30px;
    top: 10px
}

#wrapper .content-section .share span {
    right: 0
}

#wrapper .content-section .download-blue-icon {
    position: absolute;
    right: 10px
}

#wrapper .heading-regular {
    font-weight: 700;
    text-align: center;
    color: #343741;
    font-size: 50px;
    font-family: "Open Sans Condensed"
}

#wrapper #footerSection {
    padding: 25px 0
}

#wrapper #footerSection .expert-details {
    width: 100%;
    height: auto
}

#wrapper #footerSection .footer-container {
    margin-top: 25px;
    margin-bottom: 25px
}

#wrapper #footerSection .heading-content {
    text-align: center;
    padding: 0 0 40px 0
}

#wrapper .btn-default,
#wrapper .download-btn {
    background-color: #c4d82e;
    border: 2px solid #c4d82e;
    color: #343741;
    text-transform: initial;
    outline: 0;
    padding: 10px 16px!important;
    border-radius: 0
}

#wrapper .btn-default:hover,
#wrapper .download-btn:hover {
    background-color: transparent;
    border: 2px solid #343741;
    color: #343741
}

#wrapper #footerSection .expert-name {
    font-weight: 700;
    font-size: 16px
}

#wrapper #footerSection .email {
    color: #006ca8
}

#wrapper #footerSection .social-media-icon {
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 10px;
    cursor: pointer
}

#wrapper .expert-details .expert-image1 {
    width: 6.25em;
    height: 6.25em;
    float: left;
    margin-top: 6px;
    margin-right: 10px;
    background-color: #d0d0ce;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

#wrapper .expert-details .expert-image2 {
    width: 6.25em;
    height: 6.25em;
    float: left;
    margin-top: 6px;
    margin-right: 10px;
    background-color: #d0d0ce;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

#wrapper .expert-details .expert-content {
    float: left;
    font-size: 12px
}

#wrapper .expert-details .expert-content p {
    margin: 2px 0
}

#wrapper .fifth-bg-color .heading-regular {
    color: #fff
}

#wrapper .text-compress {
    line-height: 1.2
}

#wrapper .extendedView a {
    color: #0094d6;
    cursor: pointer;
    text-decoration: none;
    text-align: center
}

#wrapper .card.img-container {
    box-shadow: none!important;
    border: none!important
}

#wrapper .headingTxt {
    color: #fff;
    line-height: 1.2;
    padding: 10px
}

#wrapper .align-item-center {
    display: flex;
    align-items: center
}

#wrapper .bg-blue {
    background-color: #006ca8
}

#wrapper .p-12 {
    padding: 5px
}

#wrapper .font17 {
    font-size: 17px
}

#wrapper .font15 {
    font-size: 15px
}

#wrapper .showAfterTransition .card-body {
    overflow-y: auto
}

#wrapper .nano-content-data {
    overflow-x: hidden
}

#wrapper .page-item.disabled .page-link {
    color: #97999b;
    cursor: not-allowed
}

#wrapper .page-item .page-link {
    border-radius: 0!important;
    padding: .4rem .75rem!important;
    color: #343a40
}

#wrapper .page-item .page-link:hover {
    box-shadow: none
}

#wrapper .page-item.active .page-link {
    background-color: #c4d82e!important;
    border-color: #c4d82e!important;
    color: #343a40!important
}

#wrapper .ttcard {
    width: 100%;
    height: 100%;
    border: 0;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12)
}

#wrapper .bg-black {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 52px;
    opacity: 1;
    padding: 6px 10px 6px 10px;
    background-color: #000
}

#wrapper .special-card {
    position: absolute;
    top: 80%;
    width: 100%;
    height: 52px;
    opacity: 1;
    background-color: #000;
    padding: 5px 10px 5px 10px
}

#wrapper .justify-content-space-between {
    justify-content: space-between
}

#wrapper .h-200 {
    height: 200px
}

#wrapper .targetLink:hover .plus-active-green-icon {
    background-image: url(../assets/updatedIcons/green-arrow-hover.svg)
}

#wrapper .plus-active-green-icon {
    background-image: url(../assets/updatedIcons/green-arrow.svg);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px
}

#wrapper .plus-active-icon {
    background-image: url(../assets/updatedIcons/card-plus.svg);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px
}

#wrapper .flex-center {
    display: flex;
    justify-content: center;
    align-items: center
}

#wrapper .img-width {
    width: 75px;
    height: 75px
}

#wrapper .downloadIcon {
    background-image: url(../assets/updatedIcons/download.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%
}

#wrapper .extendedView:hover .downloadIcon {
    background-image: url(../assets/updatedIcons/download-hover.svg)
}

#wrapper .caseStudyIcon {
    background-image: url(../assets/updatedIcons/bookcs.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%
}

#wrapper .extendedView:hover .caseStudyIcon {
    background-image: url(../assets/updatedIcons/book-hover.svg)
}

#wrapper .trendIcon {
    background-image: url(../assets/updatedIcons/trend.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%
}

#wrapper .extendedView:hover .trendIcon {
    background-image: url(../assets/updatedIcons/trend-hover.svg)
}

#wrapper .searchIcon {
    background-image: url(../assets/updatedIcons/date_active.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%
}

#wrapper .extendedView:hover .searchIcon {
    background-image: url(../assets/updatedIcons/date_hover.svg)
}

#wrapper .archievesIcon {
    background-image: url(../assets/updatedIcons/archieves.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%
}

#wrapper .extendedView:hover .archievesIcon {
    background-image: url(../assets/updatedIcons/archieves-hover.svg)
}

#wrapper .img-future-of-retail {
    background-image: url(../assets/updatedIcons/FutureRetail_1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%
}

#wrapper .img-us-retail-privacy {
    background-image: url(../assets/updatedIcons/us-retail-privacy-survey-2019-1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%
}

#wrapper .img-ConsumerChanging {
    background-image: url(../assets/updatedIcons/ConsumerChanging_3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%
}

#wrapper .ttCard:hover .plus-active-icon {
    cursor: pointer;
    background-image: url(../assets/updatedIcons/card-plus-hover.svg)
}

#wrapper .ttCard.visited .plus-active-green-icon,
#wrapper .ttCard:hover .plus-active-green-icon {
    background-image: url(../assets/updatedIcons/green-arrow-hover.svg)
}

#wrapper .readBtn:hover {
    background-color: #fff!important;
    border: 1px solid #006ca8;
    color: #006ca8!important
}

#wrapper .readBtn {
    box-shadow: none;
    padding-top: 10px!important;
    padding-bottom: 10px!important;
    min-width: 200px;
    border: 1px solid #006ca8
}

#wrapper .labels {
    fill: #343741;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif
}

#wrapper .label {
    font-size: 13px;
    font-weight: 600;
    margin-left: 10px
}

#wrapper #attText {
    text-align: right;
    font-size: 11px;
    margin-top: 14px;
    margin-right: 8px;
    font-weight: 700;
    height: 25px;
    color: #878a8f
}

#wrapper #fText {
    font-size: 13px
}

#wrapper .tick,
#wrapper .xAxisClass text,
#wrapper .yAxisClass text {
    font-size: 13px;
    font-weight: 600;
    font-family: 'Open Sans';
    fill: #53565a
}

#wrapper .fig {
    font-size: 12.5px;
    color: #5f6369;
    font-weight: 500;
    font-family: "Open Sans", sans-serif
}

#wrapper .figTitle {
    font-family: "Open Sans", sans-serif;
    font-size: 19px;
    color: #343741;
    font-weight: 700;
    margin-top: 5px;
    display: block
}

#wrapper .figSubTitle {
    font-size: 15px;
    color: #5f6369;
    display: block;
    font-weight: 500;
    margin-top: 5px;
    margin-bottom: 15px;
    font-family: "Open Sans", sans-serif
}

#wrapper .figSourceText {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #878a8f;
    margin-top: 5px;
    display: block
}

#wrapper .figSource {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #878a8f;
    font-weight: 700;
    float: left;
    margin-right: 5px
}

#wrapper #source-txt {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #878a8f;
    margin-top: 5px;
    display: block
}

#wrapper .loadContentParent .content {
    display: none
}

#wrapper .fadeParaLine {
    position: relative
}

#wrapper .fadeParaLine::after {
    background-image: url(../assets/fadeParaBgImage.png)!important;
    width: 100%;
    height: 50px;
    background-position: center;
    background-repeat: no-repeat
}

#wrapper .fadeParaLine::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50px;
    background-image: -webkit-linear-gradient(to bottom, transparent, #fff);
    background-image: -moz-linear-gradient(to bottom, transparent, #fff);
    background-image: -o-linear-gradient(to bottom, transparent, #fff);
    background-image: linear-gradient(to bottom, transparent, #fff)
}

#wrapper #tile-container .cards a:hover {
    text-decoration: none
}

#wrapper #tile-container .cards .tile-image-full,
#wrapper #tile-container .cards .tile-image-half {
    width: 100%;
    min-height: 440px
}

#wrapper #tile-container .tile-text-subheading {
    margin: 10px 0
}

#wrapper #tile-container .card-overlap-full {
    width: calc(100% - 30px);
    position: absolute;
    bottom: 0;
    line-height: 1.1;
    background-color: rgba(0, 0, 0, .8)
}

#wrapper #tile-container .card-overlap-right0 {
    width: calc(100% - 15px);
    position: absolute;
    bottom: 0;
    line-height: 1.1;
    background-color: rgba(0, 0, 0, .8)
}

#wrapper #tile-container .cards .card-spacing {
    padding: 20px;
    height: 100%
}

#wrapper #tile-container .cards .card-spacing p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

#wrapper #tile-container .cards .filterName {
    text-transform: uppercase
}

#wrapper #tile-container .cardAnimation,
#wrapper #tile-container .cards {
    animation: createBox .9s
}

#wrapper #tile-container .cards .col-md-12,
#wrapper #tile-container .cards .col-md-4,
#wrapper #tile-container .cards .col-md-8 {
    cursor: pointer
}

@keyframes createBox {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

#wrapper #tile-container .cards .col-12 {
    position: relative
}

#wrapper #tile-container .card-left-spacing {
    margin-left: -15px!important
}

#wrapper #tile-container .card-right-spacing {
    margin-right: -15px!important
}

#wrapper #tile-container #cards-container label.form-check-label {
    margin-right: 10px
}

#wrapper #tile-container .custom-dropDown select {
    min-width: 320px;
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid #000
}

#wrapper .loadMore-btn-style {
    min-width: 159px;
    height: 60px;
    border: 1px solid #000;
    border-radius: 0;
    margin: 0 auto
}

#wrapper .loadMore-btn-style:hover {
    border: 1px solid #97999b;
    color: #97999b!important
}

#wrapper .showLoadMoreCard {
    display: none!important
}

#wrapper #swipe-controls-section .swiper-pagination {
    display: none
}

#wrapper .swiper-container .cardItem .card a,
#wrapper .thumbnailCarousel-container .cardItem .card a {
    color: unset;
    text-decoration: none
}

#wrapper .swiper-container {
    width: 100%;
    height: 100%
}

#wrapper .thumbnailCarousel-container {
    width: 100%;
    height: 100%;
    overflow: hidden
}

#wrapper .swiper-container .cardItem .card .card-body {
    height: 270px
}

#wrapper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

#wrapper .swiper-slide .card-body div,
#wrapper .swiper-slide .card-body p {
    color: #000!important
}

#wrapper .swiper-slide .swiper-slide-active .cardItem {
    opacity: 1!important
}

#wrapper .swiper-slide-prev .cardItem {
    opacity: .2
}

#wrapper .swiper-slide-next .cardItem {
    opacity: .2
}

#wrapper .swiper-pagination {
    text-align: center;
    margin-top: 10px;
    position: absolute;
    top: calc(50% - 95px);
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 220px
}

#wrapper .swiper-button-next {
    background-image: url(../assets/carousel/right-arrow.svg);
    background-position: center
}

#wrapper .swiper-button-prev {
    background-image: url(../assets/carousel/left-arrow.svg);
    background-position: center
}

#wrapper .swiper-button-next:focus,
#wrapper .swiper-button-prev:focus {
    border-radius: 0
}

#wrapper .swiper-button-next:after,
#wrapper .swiper-button-prev:after {
    display: none
}

#wrapper .swiper-button-next {
    right: 30px;
    width: 45px;
    height: 45px
}

#wrapper .swiper-button-prev {
    left: 30px;
    width: 45px;
    height: 45px
}

#wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 14px;
    height: 14px;
    background-color: #79c548
}

#wrapper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #a7adaf;
    display: inline-block;
    border: 1px solid #fff;
    margin: 0 2px;
    border-radius: 50%;
    cursor: pointer;
    box-sizing: border-box
}

#wrapper .swiper-pagination {
    display: none
}

#wrapper .thumbnailCarousel-container .cardItem .card {
    box-shadow: none!important;
    border: none!important
}

#wrapper .thumbnailCarousel-container .cardItem .card .card-body {
    padding: 0
}

#wrapper .thumbnailCarousel-container .swiper-slide-next .cardItem,
#wrapper .thumbnailCarousel-container .swiper-slide-prev .cardItem {
    opacity: 1!important
}

#wrapper .thumbnailCarousel-container .swiper-button-next,
#wrapper .thumbnailCarousel-container .swiper-button-prev {
    width: 30px;
    height: 30px
}

#wrapper .thumbnailCarousel-container .swiper-button-next {
    right: 30px
}

#wrapper .thumbnailCarousel-container .swiper-button-prev {
    right: 30px
}

#wrapper #colors-wrapper .tab-content #diExtendedColors,
#wrapper #colors-wrapper .tab-content #diOtherColors,
#wrapper #colors-wrapper .tab-content #diPrimaryColors {
    margin: 0
}

#wrapper .nav-pills .nav-link.active {
    background-color: #343741;
    border-radius: 2px;
    color: #fff;
    border-radius: 0
}

#wrapper .nav-pills .nav-link {
    color: #343741;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px
}

#wrapper #colors-wrapper .colorBoX {
    width: 100%;
    height: 40px
}

#wrapper #colors-wrapper .colorname,
#wrapper #colors-wrapper .hexVal,
#wrapper #colors-wrapper .rgbVal {
    font-size: 13px;
    font-family: 'Open Sans', sans-serif
}

#wrapper #colors-wrapper .colorname,
#wrapper #colors-wrapper .hexVal span,
#wrapper #colors-wrapper .rgbVal span {
    font-weight: 600
}

#wrapper #colors-wrapper .col-md-2 {
    box-shadow: none!important;
    Padding-bottom: 20PX
}

#wrapper #colors-wrapper .BLUE6 {
    background-color: #14377d
}

#wrapper #colors-wrapper .BLUE4 {
    background-color: #007db6
}

#wrapper #colors-wrapper .BLUE3 {
    background-color: #00aae7
}

#wrapper #colors-wrapper .BLUE2 {
    background-color: #52b9e9
}

#wrapper #colors-wrapper .TEAL5 {
    background-color: #00a5b8
}

#wrapper #colors-wrapper .GREEN7 {
    background-color: #00492c
}

#wrapper #colors-wrapper .GREEN6 {
    background-color: #006b35
}

#wrapper #colors-wrapper .GREEN4 {
    background-color: #2cb34a
}

#wrapper #colors-wrapper .DELOITTEGREEN {
    background-color: #80c342
}

#wrapper #colors-wrapper .GREEN2 {
    background-color: #c4d82e
}

#wrapper #colors-wrapper .COOLGRAY11 {
    background-color: #343741
}

#wrapper #colors-wrapper .COOLGRAY10 {
    background-color: #474c55
}

#wrapper #colors-wrapper .COOLGRAY9 {
    background-color: #5f6369
}

#wrapper #colors-wrapper .COOLGRAY7 {
    background-color: #878a8f
}

#wrapper #colors-wrapper .COOLGRAY6 {
    background-color: #a4a7a9
}

#wrapper #colors-wrapper .COOLGRAY4 {
    background-color: #b2b5b6
}

#wrapper #colors-wrapper .COOLGRAY2 {
    background-color: #d7d8d6
}

#wrapper #colors-wrapper .BLACK {
    background-color: #030000
}

#wrapper #colors-wrapper .RICHBLACK {
    background-color: #231f20
}

#wrapper #colors-wrapper .WHITE {
    background-color: #fff;
    border: 2px solid #000
}

#wrapper #colors-wrapper .YELLOW {
    background-color: #ffd400
}

#wrapper #colors-wrapper .ORANGE {
    background-color: #f7941d
}

#wrapper #colors-wrapper .RED {
    background-color: #ed1c24
}

#wrapper #colors-wrapper .BLUE5 {
    background-color: #004a7c
}

#wrapper #colors-wrapper .BLUE1 {
    background-color: #91d9f8
}

#wrapper #colors-wrapper .BLUE7 {
    background-color: #00053e
}

#wrapper #colors-wrapper .TEAL7 {
    background-color: #004751
}

#wrapper #colors-wrapper .TEAL6 {
    background-color: #006f79
}

#wrapper #colors-wrapper .TEAL4 {
    background-color: #00b5af
}

#wrapper #colors-wrapper .TEAL3 {
    background-color: #8ed2cc
}

#wrapper #colors-wrapper .TEAL2 {
    background-color: #8ed2cc
}

#wrapper #colors-wrapper .TEAL1 {
    background-color: #d2ebe2
}

#wrapper #colors-wrapper .GREEN5 {
    background-color: #00aa4f
}

#wrapper #colors-wrapper .GREEN1 {
    background-color: #ecee9a
}

#wrapper #colors-wrapper .HYPERLINK2 {
    background-color: #52b9e9
}

#wrapper #colors-wrapper .COOLGRAY4C {
    background-color: #bbb
}

#wrapper #colors-wrapper .COOLGRAY11C {
    background-color: #54565a
}

#wrapper .nav-tabs {
    border: 0
}

#wrapper .nav-tabs .nav-item {
    margin-bottom: 0
}

#wrapper .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #fff;
    background-color: #343a40;
    border-color: #dee2e6 #dee2e6 #fff;
    border-radius: 0
}

#wrapper .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link {
    color: #343a40;
    border-color: #dee2e6 #dee2e6 #fff;
    border-radius: 0
}

@media only screen and (min-width:780px) and (max-width:990px) {
    #wrapper #carouselExampleFade .demo a {
        bottom: 80px
    }
    #wrapper #carouselExampleFade .carousel-inner .carousel-caption {
        left: 5%!important
    }
    #wrapper #carouselExampleFade .carousel-inner .carousel-item .d-block {
        padding: 0
    }
    #wrapper #wrapper .swiper-wrapper .card-body {
        padding: 50px 30px 30px 30px!important;
        margin-top: -2px!important
    }
    #wrapper #swipe-controls-section .swiper-button {
        width: 35px;
        height: 35px
    }
    #wrapper .swiper-button-prev {
        left: 10px!important
    }
    #wrapper .swiper-button-next {
        right: 10px!important
    }
    #wrapper #swipe-controls-section .swiper-pagination {
        display: block
    }
    #wrapper #carouselExampleFade.one {
        background: url(https://www2.deloitte.com/etc/insights-lists/interactives/staging/2020/July/Global-marketing-trends-package/Home/assets/home-images/Intro-hero-mobile.jpg);
        background-repeat: no-repeat
    }
    #wrapper #carouselExampleFade.two {
        background: url(https://www2.deloitte.com/etc/insights-lists/interactives/staging/2020/July/Global-Marketing-Trends/assets/banner/mob-banner.png);
        background-repeat: no-repeat
    }
    #wrapper #carouselExampleFade.three .ajust-max-width img {
        position: relative;
        width: 100%
    }
    #wrapper #carouselExampleFade.four {
        background: url(https://www2.deloitte.com/content/dam/insights/us/USI-dev/2020/November/TechTrends2021/assets/mobileBannerImages/Chapter_supply_mobile.png);
        background-repeat: no-repeat
    }
    #wrapper #carouselExampleFade.four .carousel-inner,
    #wrapper #carouselExampleFade.one .carousel-inner,
    #wrapper #carouselExampleFade.two .carousel-inner {
        background-color: #000;
        margin-top: 250px
    }
    #wrapper #carouselExampleFade .font-72 {
        font-size: 50px
    }
    #wrapper #carouselExampleFade .font-40 {
        font-size: 36px
    }
    #wrapper .col-reverse {
        flex-direction: column-reverse
    }
    #wrapper .p-80 {
        left: 0!important
    }
    #wrapper .mobile-explore-watch-btn .btn-default {
        width: 100%
    }
}

@media only screen and (max-width:780px) {
    #wrapper .swiper-wrapper .card-body {
        padding: 50px 30px 30px 30px!important;
        margin-top: -2px!important
    }
    #wrapper #swipe-controls-section .swiper-button {
        width: 35px;
        height: 35px
    }
    #wrapper .swiper-button-prev {
        left: 10px!important
    }
    #wrapper .swiper-button-next {
        right: 10px!important
    }
    #wrapper #swipe-controls-section .swiper-pagination {
        display: block
    }
    #wrapper .second-banner #carouselExampleFade .carousel-item .d-block {
        display: none!important;
        height: auto!important;
        padding: 0;
        margin: 0 auto;
        float: initial
    }
    #wrapper #carouselExampleFade .carousel-item .d-block {
        height: auto!important;
        padding: 0;
        margin: 0 auto;
        float: initial
    }
    #wrapper #carouselExampleFade .carousel-item .d-none {
        width: 100%;
        display: block!important;
        position: initial!important;
        padding-top: 50px!important
    }
    #wrapper #carouselExampleFade .carousel-inner {
        max-height: initial
    }
    #wrapper #carouselExampleFade #section02 {
        display: block;
        height: 100px
    }
    #wrapper #carouselExampleFade .demo a {
        bottom: 78px
    }
    #wrapper .mobile-center {
        justify-content: center
    }
    #wrapper .general-btn-style {
        min-width: 100%!important
    }
    #wrapper .general-sbtn-style {
        min-width: 100%!important
    }
    #wrapper #carouselExampleFade.one {
        background: url(https://www2.deloitte.com/etc/insights-lists/interactives/staging/2020/July/Global-marketing-trends-package/Home/assets/home-images/Intro-hero-mobile.jpg);
        background-repeat: no-repeat
    }
    #wrapper #carouselExampleFade.two {
        background: url(https://www2.deloitte.com/etc/insights-lists/interactives/staging/2020/July/Global-Marketing-Trends/assets/banner/mob-banner.png);
        background-repeat: no-repeat
    }
    #wrapper #carouselExampleFade.three .ajust-max-width img {
        position: relative;
        width: 100%
    }
    #wrapper #carouselExampleFade.four {
        background: url(https://www2.deloitte.com/content/dam/insights/us/USI-dev/2020/November/TechTrends2021/assets/mobileBannerImages/Chapter_supply_mobile.png);
        background-repeat: no-repeat
    }
    #wrapper #carouselExampleFade.four .carousel-inner,
    #wrapper #carouselExampleFade.one .carousel-inner,
    #wrapper #carouselExampleFade.two .carousel-inner {
        background-color: #000;
        margin-top: 250px
    }
    #wrapper #carouselExampleFade .font-72 {
        font-size: 50px
    }
    #wrapper #carouselExampleFade .font-40 {
        font-size: 36px
    }
    #wrapper .col-reverse {
        flex-direction: column-reverse
    }
    #wrapper .p-80 {
        left: 0!important
    }
    #wrapper .mobile-explore-watch-btn .btn-default {
        width: 100%
    }
}

@media only screen and (min-width:320px) and (max-width:420px) {
    #wrapper #carouselExampleFade .carousel-item .d-block {
        float: initial
    }
}

@media only screen and (min-width:800px) {
    #wrapper .adjust-max-width {
        max-width: 550px
    }
}

@media only screen and (max-width:780px) {
    #wrapper #carouselExampleFade .carousel-inner {
        max-height: initial!important
    }
}

#wrapper .font-30 {
    font-size: 30px
}

#wrapper .font-family-georgia {
    font-family: Georgia
}

#wrapper .font-16 {
    font-size: 16px
}

#wrapper .font12 {
    font-size: 12px
}

#wrapper .ls-1 {
    letter-spacing: 1px
}

#wrapper .spacing-small {
    margin-top: 15px!important
}

#wrapper .spacing-medium {
    margin-top: 30px!important
}

#wrapper .font20 {
    font-size: 20px
}

#wrapper .badge.badge-default {
    padding: 12px 16px!important;
    font-size: 12px;
    border-radius: 0;
    color: #343a40
}

#wrapper .badge.badge-default.active {
    background-color: #c4d82e
}

#wrapper .pointer {
    cursor: pointer
}

#wrapper .primaryColor {
    background-color: #007db6
}

#wrapper .general-btn-style {
    min-width: 384px;
    height: 60px;
    color: #fff;
    background-color: #000;
    border-radius: 0;
    padding: 6px 30px 6px 30px;
    border: 1px solid #000
}

#wrapper .general-sbtn-style {
    min-width: 384px;
    height: 60px;
    color: #000;
    background-color: transparent;
    border-radius: 0;
    padding: 6px 30px 6px 30px;
    border: 1px solid #000
}

#wrapper .general-btn-style:hover {
    border: 1px solid #97999b;
    background-color: #97999b
}

#wrapper .general-sbtn-style:hover {
    border: 1px solid #97999b;
    color: #97999b
}

#wrapper .text-decor-none:hover {
    text-decoration: none
}

#wrapper #tile-container .dropDownArrowImg {
    background-image: url(https://www2.deloitte.com/etc/insights-lists/interactives/staging/2020/February/Component-Library/assets/next-arrow-white.svg);
    margin-top: -6px
}

#wrapper .dropDownArrowImg {
    background-repeat: no-repeat;
    background-image: url(https://www2.deloitte.com/etc/insights-lists/interactives/staging/2020/February/Component-Library/assets/next-arrow-black.svg);
    height: 40px;
    width: 40px;
    margin-top: 3px;
    transform: rotate(-90deg);
    background-position: center
}

#wrapper #diColorCombos .accordion .card .card-header .collapsed .mb-0 .rotate-icon {
    transform: rotate(-180deg)
}

#wrapper #diColorCombos .accordion .card .card-header .mb-0 .rotate-icon {
    background-repeat: no-repeat;
    background-image: url(https://www2.deloitte.com/etc/insights-lists/interactives/staging/2020/February/Component-Library/assets/next-arrow-black.svg);
    height: 20px;
    width: 20px;
    float: right;
    background-position: center
}

#wrapper #diColorCombos .accordion .card .card-header a {
    color: #000
}

#wrapper .general-btn-style .c-imageSrc,
#wrapper .general-sbtn-style .c-imageSrc {
    display: block
}

#wrapper .general-btn-style .c-imageSrc-hover,
#wrapper .general-sbtn-style .c-imageSrc-hover {
    display: none
}

#wrapper .general-btn-style:hover .c-imageSrc,
#wrapper .general-sbtn-style:hover .c-imageSrc {
    display: none
}

#wrapper .general-btn-style:hover .c-imageSrc-hover,
#wrapper .general-sbtn-style:hover .c-imageSrc-hover {
    display: block
}

#wrapper #keyMessage .true {
    display: block
}

#wrapper #keyMessage .false {
    display: none
}

#wrapper #keyMessage .white-text {
    font-family: 'Open Sans', sans-serif!important
}

#wrapper #keyMessage .keytakeawayname {
    font-family: Georgia;
    font-size: 18px
}

#wrapper #viewSection .true {
    display: block
}

#wrapper #viewSection .false {
    display: none
}

#wrapper #viewSection .white-text {
    font-family: 'Open Sans', sans-serif!important
}

#wrapper #viewSection .hrefTitle {
    font-family: Georgia;
    font-size: 18px
}

#wrapper .colorname {
    display: table-cell;
    vertical-align: bottom;
    height: inherit;
    text-transform: uppercase
}

#wrapper .font-weight-600 {
    font-weight: 600
}

#wrapper .Accessibleteal4 {
    background-color: #00abab
}

#wrapper .Accessibleblue5 {
    background-color: #005587
}

#wrapper .AccessiblegreenD {
    background-color: #86bc25
}

#wrapper .Grays4 {
    background-color: #bbbcbc
}

#wrapper .Accessiblegreen6 {
    background-color: #046a38
}

#wrapper .Accessiblegreen2 {
    background-color: #c4d600
}

#wrapper .Accessibleblue3 {
    background-color: #00a3e0
}

#wrapper .Accessibleteal7 {
    background-color: #004f59
}

#wrapper .greens1 {
    background-color: #e3e48d
}

#wrapper .greens4 {
    background-color: #43b02a
}

#wrapper .greens5 {
    background-color: #009a44
}

#wrapper .greens7 {
    background-color: #2c5234
}

#wrapper .greens8 {
    background-color: #26890d
}

#wrapper .teals1 {
    background-color: #ddefe8
}

#wrapper .teals2 {
    background-color: #9dd4cf
}

#wrapper .teals3 {
    background-color: #6fc2b4
}

#wrapper .teals5 {
    background-color: #0097a9
}

#wrapper .teals6 {
    background-color: #007680
}

#wrapper .teals7 {
    background-color: #004f59
}

#wrapper .teals8 {
    background-color: #0d8390
}

#wrapper .blues1 {
    background-color: #a0dcff
}

#wrapper .blues2 {
    background-color: #62b5e5
}

#wrapper .blues4 {
    background-color: #0076a8
}

#wrapper .blues6 {
    background-color: #012169
}

#wrapper .blues7 {
    background-color: #041e42
}

#wrapper .blues8 {
    background-color: #007cb0
}

#wrapper .grays2 {
    background-color: #d0d0ce
}

#wrapper .grays4 {
    background-color: #bbbcbc
}

#wrapper .grays6 {
    background-color: #a7a8aa
}

#wrapper .grays7 {
    background-color: #97999b
}

#wrapper .grays9 {
    background-color: #75787b
}

#wrapper .grays10 {
    background-color: #63666a
}

#wrapper .grays11 {
    background-color: #53565a
}

#wrapper .brightgreen {
    background-color: #0df200
}

#wrapper .brightteal {
    background-color: #3efac5
}

#wrapper .brightblue {
    background-color: #33f0ff
}

#wrapper .limitedRed {
    background-color: #da291c
}

#wrapper .limitedOrange {
    background-color: #ed8b00
}

#wrapper .limitedYellow {
    background-color: #ffcd00
}

#wrapper .md-accordion .card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .125)
}

#wrapper .md-accordion .card {
    border: 1px solid #fff
}

#wrapper .md-accordion h5 {
    color: #000;
    font-size: 18px;
    text-decoration: none
}

#wrapper .md-accordion h5:hover {
    text-decoration: none
}

#wrapper .font-72 {
    font-size: 72px
}

#wrapper .font-family-georgia {
    font-family: Georgia
}

#wrapper .lh-1 {
    line-height: 1
}

#wrapper .ls-1 {
    letter-spacing: 1.5px
}

#wrapper .font-40 {
    font-size: 40px
}

#wrapper .text-compress {
    line-height: 1.2
}

#wrapper .banner-download-btn {
    float: left;
    margin-right: 40px
}

#wrapper .form-outline label {
    font-size: 14px;
    font-family: 'Open Sans', sans-serif
}

#wrapper .form-outline .form-control {
    font-size: 16px;
    border-radius: 0;
    border: 1px solid #75787b;
    color: #000
}

#wrapper .download-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 18px;
    min-height: 22px;
    margin-left: 10px
}

#wrapper .banner-download-btn .download-icon-white {
    display: block
}

#wrapper .banner-download-btn .download-icon-white-hover {
    display: none
}

#wrapper .banner-download-btn:hover .download-icon-white {
    display: none
}

#wrapper .banner-download-btn:hover .download-icon-white-hover {
    display: block
}

#wrapper .banner-download-btn a {
    display: none;
    text-decoration: none
}

#wrapper .p-80 {
    top: 0!important;
    left: 6%;
    text-align: left!important;
    padding-bottom: 20px
}

#wrapper #carouselExampleFade {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%
}

#wrapper #carouselExampleFade.two {
    background-image: url(https://www2.deloitte.com/etc/insights-lists/interactives/staging/2020/July/Global-Marketing-Trends/assets/landing-page-icons/Hero.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%
}

#wrapper #carouselExampleFade.three {
    background: grey
}

#wrapper #carouselExampleFade.four {
    background-image: url(https://www2.deloitte.com/content/dam/insights/us/USI-dev/2020/November/TechTrends2021/assets/supplyUnchainedAssets/supplyUnchained-banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%
}

#wrapper .ajust-max-width img {
    width: 125%;
    position: absolute;
    right: 0;
    top: -100px
}

#wrapper #section02 {
    margin-left: 1%
}

#wrapper .white-text {
    color: #fff
}

#wrapper .closeIcon {
    background-image: url(../assets/close-active.svg);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    position: absolute;
    right: 1%;
    cursor: pointer;
    top: 2%;
    z-index: 9999
}

#wrapper .closeIcon:hover {
    background-image: url(../assets/close-hover.svg);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px
}