/* ==============================
   Phone
   ============================== */
   .mobile-on{display: none;}
@media (max-width: 480px) and (min-width: 320px) {
    .mb-xs-20{margin-bottom: 20px !important;}
    .flex-col--basics.col--x4 li{
        max-height: 50vh;
    }
   .mobile-on {
        display: block;
            text-align: center;
            margin-top: 20px;
    }
    .xxs{font-size: 12px !important;}
    .mobile-off{
        display: none !important;
    }
    .text-xs-center{
        text-align: center !important;
    }
    .main-timeline:before { 
        margin: 0;
        position: absolute;
        left: 50px;
        right: auto;
    }
        .main-timeline .date-outer{width: 100% !important;height: auto !important;margin-top: 60px;}
    body .main-timeline .date {
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        display: block;
    }
    p.year { 
        background: #e6e5e2;
        text-align: left;
        padding: 10px 0px;
        font-size: 26px;;
        padding-top: 0 !important;
    }
    .order_2b,
    .order_2{
        display: none;
    }
    body p {    
        font-size: 1.2rem;
        line-height: 1.7;
        font-weight: 500;
    }
    p.lead {
        font-size: 1.2rem;
        line-height: 1.7;
        font-weight: 700;
    }
    .floating-img svg.circle { 
        top: -66px; 
    }
    body .floating-img svg.line { 
        bottom: -15px; 
    }
    h2 br {
        display: none;
    }
    #path9429{
        fill: white !important;
    }
    .arrows-slide svg.ls{
        left: 0 !important;
    }
    .arrows-slide svg.rs {
        right: 0px !important;
    }
    .arrows-slide{
        left: 0;
        z-index: 99;
    }
    h2.title_bg_effect_1,
    h2.title_bg_effect_2,
    h2.title_bg_effect_3,
    h2.title_bg_effect_4,
    h2.title_bg_effect_5,
    h2.title_bg_effect_6,
    h2.title_bg_effect_7,
    h2.title_bg_effect_8,
    h2.title_bg_effect_9,
    h2.title_bg_effect_10,
    h2.title_bg_effect_11,
    h2.title_bg_effect_12,
    h2.title_bg_effect_13,
    h2.title_bg_effect_14,
    h2.title_bg_effect_15,
    h2.title_bg_effect_16,
    h2.title_bg_effect_17 {
        font-size: 9vw;
        line-height: 1;
        position: relative;
        z-index: 2;
        font-weight: 900 !important;
    }
    body .textura {
        position: absolute;
        left: -50%;
        top: -2%;
        z-index: 0;
    }
    .mb-80 {
        margin-bottom: 20px !important;
    }
    h2,
    h4{
        font-weight: 800;
    }
    .flex-col--basics li {
        flex: 1;
        width: 100%;
        flex-basis: 100%;
    }
    .flex-col--basics li p {
        color: white;
        padding: 10px;
        margin-top: 20px;
    }
    .flex-col--basics li div span {
        position: absolute;
        left: 20px;
        bottom: 20px;
        color: white;
        font-weight: 800;
        font-size: 4vw;
    }
    .col--x2.cards div h3 {
        margin-bottom: 5px;
        color: white;
        font-size: 15vw;
        line-height: 1;
    }
    .col--x2.cards div p { 
        font-size: 4.5vw;
        line-height: 1.2;
        width: 80%;
        margin: auto;
    }
    .flex-col--basics.col--x4 li {
        flex: 1;
        width: 100%;
        flex-basis: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 2rem;
    }
    .digital--reach--x4>div {
        border-right: 2px solid transparent;
        flex: 1;
        flex-basis: 50%;
        color: #EBE9E1;
        width: 50%;
        text-align: center;
    }
    .digital--reach--x4.x5>div img{
        width: 40px;
    }
    .digital--reach--x4.x5>div {
        max-width: 50%;
        margin-bottom: 60px;
    }
    .digital--reach--x4>div h2 {
        font-size: 6.5vw;
        transform: translate(0, 0) !important;
        margin-bottom: 20px;
    }
    .digital--reach--x4>div h3 {
        font-size: 3vw;
        text-transform: uppercase;
        line-height: 1.4;
        min-height: 40px;
        margin-bottom: 30px;
        transform: translate(0, 0) !important;
    }
    body .list--down li p { 
        font-size: 4vw; 
        line-height: 1.3;
        width: calc(100% - 70px);
    }
    .list--down li b {
        width: 110px;
        font-size: 7vw;
    }
    .w-box >div{
        width: 100%;
    }
    .w-box ul li{
        font-size: 4vw;
        line-height: 1.5;
    }
    .diff{
        font-size: 12vw !important;
    }
    .w-box p{margin-bottom: 0 !important;}
    .w-box {
        border-radius: 2rem;
        border: 2px solid white;
        padding: 70px 30px;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        margin-bottom: 30px;
    }
    .mb-xs-40{
        margin-bottom: 40px;
    }
    .w-box h4 {
        color: white !important;
        font-size: 5vw;
    }
    .reverse{
        flex-direction: column-reverse;
    }
    .mb-xs-130{
        margin-bottom: 130px !important;
    }
    .row.pxs15{
        padding: 40px 15px !important
    }

    .revert{
        flex-direction: column-reverse;
    }
    body .main-timeline .date-content {
        width: 100%;
        position: relative;
    }
    body .main-timeline .date-content:before{
        opacity: 0;
    }
    body .year span {
        font-size: 3.2vw;
    }
    body .order_1 {
        order: 1;
    }
    body .order_3 {
        order: 3;
    }
    body .order_2 {
        order: 2;
        left: 0px;
    }
    body .main-timeline .icon { 
        right: 0px;
    }
    .w-box{
            background-position: 50% 0% !important;
    }
    body .col-md-2{
        flex: 0 0 100%;
        max-width: 100%;
    }


















}