@font-face {
    font-family: 'Gotham Pro';
    src: url('../Gotham-fonts/GothamPro-Black.eot');
    src: url('../Gotham-fonts/GothamPro-Black.eot?#iefix') format('embedded-opentype'), url('../Gotham-fonts/GothamPro-Black.woff2') format('woff2'), url('../Gotham-fonts/GothamPro-Black.woff') format('woff'), url('../Gotham-fonts/GothamPro-Black.ttf') format('truetype'), url('../Gotham-fonts/GothamPro-Black.svg#GothamPro-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap
    }
    
    @font-face {
    font-family: 'Gotham Pro';
    src: url('../Gotham-fonts/GothamPro-Bold.eot');
    src: url('../Gotham-fonts/GothamPro-Bold.eot?#iefix') format('embedded-opentype'), url('../Gotham-fonts/GothamPro-Bold.woff2') format('woff2'), url('../Gotham-fonts/GothamPro-Bold.woff') format('woff'), url('../Gotham-fonts/GothamPro-Bold.ttf') format('truetype'), url('../Gotham-fonts/GothamPro-Bold.svg#GothamPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap
    }
    
    @font-face {
    font-family: 'Gotham Pro';
    src: url('../Gotham-fonts/GothamPro-Medium.eot');
    src: url('../Gotham-fonts/GothamPro-Medium.eot?#iefix') format('embedded-opentype'), url('../Gotham-fonts/GothamPro-Medium.woff2') format('woff2'), url('Gotham-fonts/GothamPro-Medium.woff') format('woff'), url('../Gotham-fonts//GothamPro-Medium.ttf') format('truetype'), url('../Gotham-fonts/GothamPro-Medium.svg#GothamPro-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap
    }
    
    @font-face {
    font-family: 'Gotham Pro';
    src: url('../Gotham-fonts/GothamPro-Light.eot');
    src: url('../Gotham-fonts/GothamPro-Light.eot?#iefix') format('embedded-opentype'), url('../Gotham-fonts/GothamPro-Light.woff2') format('woff2'), url('../Gotham-fonts/GothamPro-Light.woff') format('woff'), url('../Gotham-fonts/GothamPro-Light.ttf') format('truetype'), url('../Gotham-fonts/GothamPro-Light.svg#GothamPro-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap
    }
    
    @font-face {
    font-family: 'Gotham Pro';
    src: url('../Gotham-fonts/GothamPro.eot');
    src: url('../Gotham-fonts/GothamPro.eot?#iefix') format('embedded-opentype'), url('../Gotham-fonts/GothamPro.woff2') format('woff2'), url('../Gotham-fonts/GothamPro.woff') format('woff'), url('../Gotham-fonts/GothamPro.ttf') format('truetype'), url('../Gotham-fonts/GothamPro.svg#GothamPro') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap
    }
    h1, h2, h3, h4, h5, h6, ul, li, p{
        margin: 0px;
        padding: 0px;
        font-family: 'Gotham Pro';
    
    }
    a {
        text-decoration: none;
    }
    body {
        margin: 0px;
        padding: 0px;
    }
    
     .lumen-vmware {
      background-image: url(../assets/VMWARE-Homepage.svg);
        height: 100vh;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100% !important;
        position: relative;
    } 

    
    .lumen-vmware h1 {
        font-size: 48px;
        line-height: 54px;
        text-align: center;
        font-weight: 900;
        padding-bottom: 5px;
    }
    .lumen-vmware p {
        text-align: center;
        font-size: 16px;
        line-height: 21px;
    }
    .lumen-vmware h1 span {
        color: #0075C9;
    }
    sup {
        font-size: 45%;
    }
    .lumen-vmware .info-header2 {
        height: 25px !important;
    }
    .main-buttons ul li {
        font-size: 16px;
        line-height: 22px;
        font-weight: 500;
        color: #ffffff;
        margin-left: 15px;
        margin-right: 15px;
        list-style: none;
        background-color: #0075C9;
        text-transform: uppercase;
        padding: 10px 25px;
        border-radius: 4px;
    }
    .main-buttons ul li:hover {
        background-color: #083176;
        transform: scale(1.05);
        transition: 0.2s ease-in-out;
        -webkit-transform: scale(1.05);
    }
    .main-buttons ul li img {
        width: 35px;
        padding-right: 5px;
    }
    .main-buttons ul {
        display: flex;
        justify-content: center;
    }
    
.mobile-traditional-img, .mobile-today-img{
	display: none;
 }
  .mobile-traditional-img img, .mobile-today-img img{
	 width: 100%;} 
    .lumen-vm-ware {
        max-width: 1600px;
        margin: auto;
    }
    .main-vmware {
        display: none;
        padding: 15px 20px 0px 20px;
    }
    .main-explore {
        display: none;
        padding: 15px 20px 0px 20px;
    }
    .info-header-lftsctn ul:after {
        border-bottom: 1px solid #EEEEEE;
        display: block;
        content: '';
    }   
    .lumen-vertical-middle {
     display: flex;
     justify-content: left;
     align-items: center;
     }
     img.home-icon-ip {
         width: 64px;
    }
    .row.evo {
        justify-content: center;
    }
    img.wan-evo {
        padding-top: 40px;
    }
    .full-heading {
        text-align: center;
        color: #000000 !important;
        font-weight: 900 !important;
    }
    .explore-box {
        padding: 30px;

    }
    .explore-box h4 a {
        font-size: 12px;
        font-weight: 700;
        color: #000000;
        display: inline-block;
        margin-bottom: 5px;
        text-transform: uppercase;
    }
  
    .explore-box img {
        margin-bottom: 15px;
    }
    .explore-img {
        text-align: center;
    }
    .explore-box h2 {
        font-size: 22px;
        line-height: 26px;
        font-weight: 900;
        margin-bottom: 10px;
        font-family: 'Gotham Pro';
        
    }
    .col-3:hover .explore-img {
        animation: zoom-in-zoom-out 1.5s ease-out 1;
   
    }
    @keyframes zoom-in-zoom-out {
        0% {
        transform: scale(1, 1);
        }
        50% {
        transform: scale(1.05, 1.05);
        }
        100% {
        transform: scale(1, 1);
        }
        }
    .explore-box.extra {
        padding: 19.5px 30px;   
    }
    .explore-box h2 a span {
        color: #000000;
    }
    .explore-box p {
        font-size: 12px;
        line-height: 16px;
        padding-bottom: 10px !important;
        font-weight: 500;
        font-family: 'Gotham Pro';
    }
    .row.uses-area {
        padding-top: 0px;
        justify-content: center;
    }
    .row.evo {
        margin-bottom: 10px;
        padding-top: 20px;
    }
    .explore-box h2 a {
        color: #0075C9;
        font-family: 'Gotham Pro';
    }
    .col-3:hover {
        border: 1px solid #0C9ED9;
        transform: scale(1.03);
        -webkit-transform: scale(1.03);
        transition: all 0.25s ease-in-out 0s;
        box-shadow: 0 20px 40px -14px rgb(0 0 0 / 25%);
        -webkit-box-shadow: 0 20px 40px -14px rgb(0 0 0 / 25%);
        -moz-box-shadow: 0 20px 40px -14px rgb(0 0 0 / 25%);
        overflow: hidden;
    }
    .row.uses-area.one {
        padding-top: 0px;
        flex-wrap: wrap;
    }
.row{
        width: 100%;
        display: flex;
    }
    .col-3 {
        width: 28%;
    margin: 20px;
    border: 1px solid rgb(208, 212, 217);
    border-radius: 30px 30px 30px 0px;
    background-color: #ffffff;
    cursor: pointer;
         
    }
    
.col-left {
        width: 61%;
    }
 .col-right {
        width: 39%;
    } 
    h4.top-case {
        font-size: 18px;
        line-height: 24px;
        padding-bottom: 10px;
        font-weight: 700;
    }
    h5.blue-heading {
        color: #0075C9;
        font-weight: 700;
        font-size: 16px;
        line-height: 22px;
        padding-bottom: 15px;
    }
    .info-header-lftsctn {
        padding-left: 3%;
        padding-right: 3%;
        display: flex;
    }
    .main-vmware.wan-evolution-pg .info-header-lftsctn {
        padding-left: 3% !important;
        padding-right: 3% !important;
    }
    .info-header-lftsctn img {
        margin-right: 15px;
        margin-left: 15px;
    }
    .info-header-lftsctn ul {
        width: 100%;
    }
    .main-heading-vm {
        font-size: 45px;
        line-height: 50px;
        font-weight: 900;
       padding-bottom: 10px;
       font-family: 'Gotham Pro';
       color: #000000;
    }
    .main-heading-vm span {
        color: #0075C9;
        font-family: 'Gotham Pro';
    }
    .lumen-vm-ware p {
        padding-bottom: 1.2rem;
    }
    .space-between {
        padding-bottom: 10px;
    }
    .text-vm p {
        font-size: 16px;
        line-height: 22px;
    }
    .text-vm ul li {
        font-size: 14px;
        line-height: 18px;
    }
    .lumen-vmware p {
        padding-bottom: 15px;
    }
    .main-vmware .col-right ul {
        padding-left: 20px;
    }
    .main-vmware .col-right li {
        padding-bottom: 2px;
    }
    .main-vmware .col-right li::marker {
        font-size: 19px;
        color: #2374BB;
    }
    ul {
        padding-bottom: 15px;
    }
    
    .padding-inner{
        padding:0% 4% 0%;
    }
    .main-vmware .col-left img {
        width: 100%;
        display: inline-block;
    }
    .col-left {
        margin-right: 50px;
        position: relative;
    }
    .dot-plus {
        position: absolute;
        cursor: pointer;
     width: 65px;
}
     .dot-plus img {
        width: 100% !important;
    }
    .dot-plus-4 {
        position: absolute;
        cursor: pointer;
    }
     .dot-plus-4 img {
        width: 65% !important;
    }
    button.dot-btn {
        background-color: #FF9E18;
        text-decoration: none;
        border-color: transparent;
        border-radius: 25px;
        padding: 8px 18px;
        display: none;
        position: absolute;
        cursor: pointer;
    }
    button.dot-btn {
        text-align: left;
        line-height: 21px;
        font-weight: 600;
        font-size: 15px;
        color: #000000 !important;
        font-family: "Gotham Pro";
    }
    .box-hov {
        background-color: #ffffff;
        width: 250px;
        height: fit-content;
        border-color: transparent;
        box-shadow: rgb(214 214 214 / 83%) 2px 2px 5px 2px;
        -webkit-box-shadow: rgb(214 214 214 / 83%) 2px 2px 5px 2px;
        -moz-box-shadow: rgba(214, 214, 214, 0.83) 2px 2px 5px 2px;
        border-radius: 8px;
        transform-origin: 50% 50% 0px;
        transform: translate(1px, 1px);
        position: absolute;
        top: 27%;
        padding: 20px 20px;
        z-index: 2;
        text-align: left;
    }
    .box-hov.box-active {
        display: block;
    }
    .box-hov h3 {
        text-align: left;
        line-height: 24px;
        letter-spacing: 0px;
        font-weight: 700;
        font-size: 19px;
        padding-bottom: 15px;
    }
    .box-hov p {
        font-size: 13px !important;
        line-height: 18px !important;
        padding-bottom: 0px !important;
    }
    
    .know-area {
        padding-top: 1px;
        padding-left: 0px;
        display: flex;
    }
    .know-area a.know-more,  .know-area a.why-lumen-button {
        font-family: 'Gotham Pro';
        font-size: 17px;
        line-height: 29px;
        cursor: pointer;
        color: rgb(0, 117, 201);
        text-decoration: none;
        text-align: left;
        letter-spacing: 0px;
        font-weight: 700;
        transform-origin: 50% 50% 0px;
        opacity: 1;
        transform: translate(0px);
        margin-right: 12px;
    }
    .know-area a.know-more-arrow, .know-area a.why-lumen-arrow {
        position: relative;
        top: 7.5px;
        cursor: pointer;
    }
    .know-more:hover, .why-lumen-button:hover{
        color: #083176 !important;
    }
    .why-lumen-button {
        margin-left: 25px;
    }
    .blank-area {
        display: none;
    }
    .head-area-vm sup {
        font-size: 45%;
    }
    .vertical-middle {
        display: flex;
        justify-content: left;
        align-items: center;
      }
    
     ul.centric-tabs li {
        margin-right: 3%;
      }
      .sub-heading-main {
        font-weight: 700;
        padding-bottom: 20px;
        font-size: 18px;
        font-family: 'Gotham Pro';
        line-height: 21px;
    }
    .sub-heading-main {
        padding-right: 12px;
    }
    .text-vm sup {
        top: 2px;
        position: relative;
        font-size: 70%;
    }
    .col-right {
        margin-top: 20px;
    }
    .info-header-lftsctn ul li{
        margin-right: 3% !important;
    }
    .text-vm .big-li-text li {
        font-size: 14px;
        line-height: 18px;
    }
    .main-vmware .col-right .big-li-text li {
        padding-bottom: 8px !important;
    }
    button.dot-btn {
        display: none;
    }
    button.dot-btn.current {
        display: block !important;
    }
    .box-hov.boost.box-active {
        display: block;
    }
    .box-hov {
        display: none;
    }
    .dot-plus img.current {
        display: none !important;
    }
    .dot-plus-4.visibility {
        top: 45%;
        right: 27%;
    }
    .dot-btn.visibility {
        top: 52%;
        right: 15%;
    }
    .dot-plus-4.centric {
        top: 45%;
        left: 27%;
        display: none;
    }
    .dot-btn.centric {
        top: 52%;
        left: 10%;
       
    }
    .dot-btn.inside-anime {
        top: 52%;
        left: 10%;
        -webkit-animation: popinanim 0.5s ease-in; 
        display: block;
    }
    @-webkit-keyframes popinanim{
        0%{
            transform: scale(0);
          }
          50%{
            transform: scale(0.2);
          }
          60%{
            transform: scale(0.4);
          }
          70%{
            transform: scale(0.6);
          }
          80%{
            transform: scale(0.8);
          }
          100%{
            transform: scale(1);
          }
      } 
    .col-left .use-tab.use-area2  button.dot-btn {
        text-align: left;
        line-height: 16px;
        font-weight: 600;
        font-size: 12.5px;
        color: #000000 !important;
        font-family: "Gotham Pro";
    }
    .use-tab {
        display: none;
    }
    .use-tab.use-area1.active {
        display: block;
    }
    .col-left .use-tab.use-area2 .img-security {
        padding-top: 30px;
        width: 86% !important;
    }
    .dot-plus-4.traffic-routing {
        top: 35%;
        right: 7.5%;
    }
    .dot-btn.traffic-routing {
        top: 37%;
        right: 2%;
    display: block;
    }
    .box-hov.traffic-routing {
        top: 41%;
        right: 2%;
    }
    .dot-plus-4.thresholds {
        top: 45%;
        right: 7.5%;
    }
    .dot-btn.thresholds {
        top: 47%;
        right: 4%;
    }
    .box-hov.thresholds {
        top: 52%;
        right: 2%;
    }
    .dot-plus-4.access {
        top: 55%;
        right: 7.5%;
    }
    .dot-btn.access {
        top: 57%;
        right: 7.5%;
    }
    .box-hov.access {
        top: 63%;
        right: 0%;
    }
    .dot-plus-4.controls {
        top: 65%;
        right: 7.5%;
    }
    .dot-btn.controls {
        top: 67.5%;
        right: 4%;
    }
    .box-hov.controls {
        top: 73%;
        right: 0%;
    }
   .dot-plus.zero-touch {
    top: 10.5%;
    left: 34%;
}
    .dot-btn.zero-touch {
        top: 16%;
        left: 13%;
    }
 
    .dot-plus.center-visible {
        top: 60%;
        left: 27%;
    }
    .dot-btn.center-visible {
        top: 69%;
        left: 10%;
    }
 
  .dot-plus.security-orch {
    top: 10%;
    right: 35.5%
    }
    .dot-btn.security-orch {
        top: 18%;
        right: 18%;
    }
 
   .dot-plus.uc6-automation {
    top: 58%;
    right: 26.6%;
}
    .dot-btn.uc6-automation {
        top: 69%;
        right: 21%;
    }
 .dot-plus:hover .dot-btn {
    display: block;
}
    .box-hov.uc6-automation {
        top: 49%;
        right: 4%;
    }
 
    img.app-wan {
        padding-top: 20px;
    }
    .uc-Cloud6 {
        position: relative;
    }
 
    img.automtn.activ-img {
        display: block !important;
    }
    img.automtn {
        display: none !important;
        padding-top: 20px;
    }
 
    img.ztouch {
        display: none !important;
        padding-top: 20px;
    }
    img.ztouch.activ-img {
        display: block !important;
    }
 
    img.secorch {
        display: none !important;
        padding-top: 20px;
    }
    img.secorch.activ-img {
        display: block !important;
    }
 
    .app-wan.activ-img{
        display: block !important;
    }
    .app-wan{
        display: none !important;
    }
 
    .box-hov.security-orch {
        right:10%;
        top: 0%;
    }
    .box-hov.zero-touch {
        top: 0%;
        left: 5%;
    }
    .box-hov.center-visible {
        top: 37%;
        left: 0%;
    }
    .explore-img img {
        height: 150px;
    }
    .col-inner {
        position: relative;
    }
    .main-vmware .col-left .img-security {
        display: none;
    }
    .main-vmware .col-left .img-security.switch1 {
        display: block;
    }
    .main-vmware.wan-evolution-pg .col-left img, .main-vmware.case1-pg .dy-connect, .main-vmware.case2-pg .dy-connect, .main-vmware.case3-pg .dy-connect, 
    .main-vmware.case4-pg .image-app-pr, .main-vmware.case5-pg img.app-edge{
        width: 88%;
        margin: auto;
    }
    .image-of-left .use-tab.use-area1.active {
        text-align: center;
    }
    .full-col p {
        padding-bottom: 10px;
        text-align: center;
    }
    .col-left img.app-wan , .col-left img.ztouch , .col-left img.secorch , .col-left img.automtn{
        width: 90% !important;
        margin: auto;
    }

    img.why-lumen-sd {
        width: 80% !important;
        margin: auto;
    }

    .know-main-area {
        display: flex;
    }
    .info-header-lftsctn h3 {
        font-size: 13px;
        line-height: 17px;
        color: #0075C9;
    }
    .info-header-lftsctn h3:hover {
        color: #083176;
    }
    .info-header-lftsctn .click-to-use img {
        margin-right: 25px;
        margin-left: 25px;
    }
    .main-vmware .info-header-lftsctn {
        padding-left: 2.35%;
        padding-right: 2.35%;
    }

    .wrapper-lumen {
        margin: 0px 40px;
        position: relative;
        top: 0%;
    }
      
      .tabs-lumen{
        margin-top:50px;
        padding:0px;
        list-style:none;
        background:#fff;
        box-shadow:0px 5px 20px rgba(0,0,0,0.1);
        display:inline-block;
        position:relative;
      }

      .tabs-lumen a{
        text-decoration:none;
        color: #000000;
        text-transform:capitalize;
        padding:10px 22px;
        display:inline-block;
        position:relative;
        z-index:1;
        transition-duration:0.6s;
        font-family: 'Gotham Pro';
        font-weight: 500;
      }
      

      .tabs-lumen a.active{
        color:#fff;
      }
    
      .tabs-lumen a i{
        margin-right:5px;
      }

      .tabs-lumen .selector{
        height:100%;
        display:inline-block;
        position:absolute;
        left:0px;
        top:0px;
        z-index:1;
        transition-duration:0.6s;
        transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        
        background: #0c9ed9;
       
      }
      .first-load {
        width: 126px !important;
    }
.wanimg{ position: relative}
.smtext {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    font-family: 'Gotham Pro';
    font-weight: 700;
}
    h2.wan-head {
        position: absolute;
        font-size: 18px;
        color: #000;
        margin-top: 10px;
        padding-left: 12px;
    }

    .main-vmware.case5-pg .text-vm sup {
        top: 0px;
        position: relative;
        font-size: 50%;
    }
    img.crs-blue {
        position: absolute;
        width: 12px !important;
        right: 15px;
        top: 15px;
    }
    img.crs-blue {
        position: absolute;
        width: 10px !important;
        right: 15px;
        top: 15px;
        display: none !important;cursor: pointer;
    }
.main-vmware .col-left .uc6-Cloud {
    width: 40%;
    margin: 0 auto;
    display: block;
}
    /* end */