/* .imgPencilCharging{
 width: 60vw;
}
.divRelativePencilChargin{
 position: relative;
 left: -15vw;
}
.rowTxtDuxStudio{
 height: 30vw;
}  
.rowImgDuxStudio{
 width: 50vw;
}
.divImgAbsoluteDuxStudio{
 position: absolute; top: -60vw; width: 100vw;
}
.imgDuxStudioZIndex0{
 width: 70vw;
 z-index: 0;
}
.imgDuxStudioZIndex1{
 z-index: 1; 
 position: absolute; 
 bottom: 0vw; 
 left: 40vw;
}  
#rowImgTopCortadaDuxStudio{
 height: 35vw;
}
.divRowTopCortadaDuxStudio{
 top: -18vw; 
 width: 100%;
 position: relative;
}
.imgTopCortadaDuxStudio{
 width: 60vw;
}
.img360DuxStudio{
 z-index: 0; 
 top: 0; 
 position: absolute; 
 left: 19vw;
 width: 60vw;
} 
.divRelativeImgDuxStudioMagnetic{
 right: 10vw; 
 top: 3vw;
 position: relative;
}
.divRelativeImgDuxStudioMagnetic{
 z-index: -10;
}

@media only screen and (min-width: 768px){
 .imgDuxStudioZIndex1{
  left: 38vw;
  width: 31.5vw;
 }    
}

@media only screen and (max-width: 767px){
 .imgDuxStudioZIndex1{
  left: 38vw;
  width: 33vw;
 }
 .rowTxtDuxStudio{
  height: 100vw;
 }
 .divRowTopCortadaDuxStudio{
  top: -28vw;
  z-index: -1;
 }
 .imgPencilCharging {
  width: 145vw;
  margin-left: -36vw;
 }
 .img360DuxStudio {
  left: 17vw;
 } 
 .rowImgDuxStudio {
  width: 135vw;
  margin-left: -38vw;
 }
} */

.imgPencilCharging{
 width: 60vw;
}
.divRelativePencilChargin{
 position: relative;
 left: -15vw;
}
.rowTxtDuxStudio{
 height: 30vw;
}  

.rowDuxShellFolio{
 height: 20vw;
}

.rowImgDuxStudio{
 width: 50vw;
}
.rowImgDuxStudioMain{
 height: 50vw;
}
.divImgAbsoluteDuxStudio{
 position: absolute; top: -60vw; width: 100vw;
}
.imgDuxStudioZIndex0{
 width: 70vw;
 z-index: 0;
}
.imgDuxStudioZIndex1{
 z-index: 1; 
 position: absolute; 
 bottom: 0vw; 
 left: 40vw;
} 
.imgDuxStudioZIndex3{
    z-index: 3;
} 
#rowImgTopCortadaDuxStudio{
 height: 35vw;
}
.divRowTopCortadaDuxStudio{
 top: -18vw; 
 width: 100%;
 position: relative;
 z-index: -1;
}
.imgTopCortadaDuxStudio{
 width: 60vw;
}
.img360DuxStudio{
 z-index: 0; 
 top: 0; 
 position: absolute; 
 left: 19vw;
 width: 60vw;
} 

#rowImgTopCortadaDuxShellFolio{
 height: 25vw;
 /* height: 35vw; */
}
.divRowTopCortadaDuxShellFolio{
 top: -40vw; 
 width: 100%;
 position: relative;
 z-index: -1;
}
.imgTopCortadaDuxShellFolio{
 width: 70vw;
}
.img360DuxShellFolio{
 z-index: 0; 
 top: 0; 
 position: absolute; 
 left: 13vw;
 width: 70vw;
} 

.divRelativeImgDuxStudioMagnetic{
 right: 10vw; 
 top: 3vw;
 position: relative;
 z-index: -10;
}
.divRelativeImgDuxShellFolioSimple{
 right: 0vw; 
 top: -23vw;
 position: relative;
 z-index: 0;
}
/* .divRelativeImgDuxStudioMagnetic{
 z-index: -10;
} */
.rowImgDuxStudioMagnetic{
 width: 50vw;
}

.rowImgDuxShellFolioSimple{
 width: 55vw;
}

.imgDuxShellFolioLeft{
 position: relative;
 right: 3vw;
}

.imgDuxShellFolioRight{
 position: relative;
 left: 3vw;
}



/* Dux Surface Go*/
.imgDeviceDuxSurfaceGo{
    width: 50vw;
    position: relative;
    /* top: 2vw; */
    top: 11vw;
    left: 4vw;
    margin-bottom: 4vw;
}

.mt-devide-DuxSurfaceGo{
    margin-top: 5vw;
}
.mt-PenStorage-DuxSurfaceGo{
    margin-top: 10vw;
}
.bg-PenStorage-DuxSurfaceGo{
    background-color: var(--banner-bg-color-smarter);
}

.divImgLeft-DuxSurfaceGo{
    left: 10vw;
}
.divImgRight-DuxSurfaceGo{
    right: 15vw;
}

.imgEasyAcces1-DuxSurfaceGo{
    position: relative;
    right: 8vw;
}
.imgEasyAcces2-DuxSurfaceGo{
    position: relative;
    right: 2vw;
    width: 70vw;
}

.mb-imgDevice{
    margin-bottom: 15vw;
}




@media only screen and (min-width: 768px){
 .imgDuxStudioZIndex1 {
  left: 38vw;
  width: 31.5vw;
 }

 .imgColorDuxShellFolio{
  position: relative;
  right: -5vw;
 }
}

@media only screen and (max-width: 767px){
 .imgDuxStudioZIndex1{
  left: 38vw;
  width: 33vw;
 }
 .rowTxtDuxStudio{
  /* height: 50vw; */
  height: 60vw;
 }

 .rowDuxShellFolio{
  height: 30vw;
 }
 .divRowTopCortadaDuxStudio{
  top: -28vw;
  z-index: -1;
 }

 .divRowTopCortadaDuxShellFolio{
  top: -45vw;
  z-index: -1;
 }
 
 .imgPencilCharging {
  width: 120vw;
  margin-left: -25vw;
 }
 .rowImgDuxStudioMagnetic{
  width: 135vw;
  margin-left: -38vw;
 }
 .rowImgDuxShellFolioSimple{
  width: 90vw;
  margin-left: 0;
 }
 .magnetic{
  height: 100vw;
 }
 .mi{
  z-index: -1;
 }

 .imgColorDuxShellFolio{
  position: relative;
  right: 0;
 }

 .divRelativeImgDuxShellFolioSimple{
  right: 0vw; 
  top: -42vw;
  position: relative;
  z-index: 0;
 }



 /*Dux Surface GO*/
 .imgDeviceDuxSurfaceGo{
    width: 90vw;
    position: relative;
    top: 0vw;
    left: 0vw;
    margin-bottom: 0vw;
    right: 5vw;
}
.imgRDevice1-DuxSurfaceGo{
    width: 55vw;
    position: relative;
    right: 15vw;
}
.imgRInfinity-DuxSurfaceGo{
    width: 100vw;
}
.divImgRight-DuxSurfaceGo{
    right: 5vw;
}
.divImgLeft-DuxSurfaceGo{
    left: 0vw;
}




}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) and (-webkit-min-device-pixel-ratio: 2)
{
 /* .btnColores{
  width: 3.2vw;
  height: 3.2vw;
 } */
 .divRowTopCortadaDuxStudio{
  top: -28vw;
  z-index: -1;
 }

 .divRowTopCortadaDuxShellFolio{
  top: -40vw;
  z-index: -1;
 }


 .sectionar{
  /* margin-top: 10vw; */
    padding-top: 10vw;
 } 
 .bg-white{
  margin-top: -10vw;
 }

 .imgColorDuxShellFolio{
  position: relative;
  right: -5vw;
 }

 .divRelativeImgDuxShellFolioSimple{
  right: 0vw; 
  top: -26vw;
  position: relative;
  z-index: 0;
 }
 
}