﻿/* .containerImageTarget {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.ImageTarget {
  max-width: 60%;
  height: auto;
  opacity: 0.75;
}

@media (width>1024px) {
  .ImageTarget {
    max-width: 30%;
    height: auto;
    opacity: 0.75;
  }
} */

body {
  margin: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#control {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

.mindar-ui-overlay {
  display: none !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: transparent;
  z-index: 2;
}


#imageTargetUI {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: transparent;
  z-index: 2;
}

#imageTargetUI img {
  opacity: 0.6;
  width: 90%;
  align-self: center;
}


#imageTargetUI .inner .scanline {
  position: absolute;
  width: 100%;
  height: 10px;
  background: white;
  animation: move 2s linear infinite;
}

#imageTargetUI .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 40px 40px;
}

#imageTargetUI.hidden {
  display: none;
}

.imgphoto
{
  width: 25%;
  height: auto;
  margin: 230% 0% 0% 60%;
}


.imgswitchcam
{
  position: absolute;
  width: 13%;
  height: auto;
  margin: -232% 0% 0% 11%;
}

.imgshare-exp
{
  position: absolute;
  width: 13%;
  height: auto;
  margin: -232% 0% 0% 122%;
}

/* Codigo artuto */

.button-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 30px;
  z-index: 10;
  pointer-events: auto;
}
.button-container button {
  background-color: white;
  border: none;
  padding: 15px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
}
.preview-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.preview-container img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 10px;
}
.preview-buttons {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}
.preview-buttons button {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.botonpreview {
  cursor: pointer;
  display: inline-block;
  margin: 10px; /* Ajusta el margen entre botones */
}

.botonpreview img {
  width: 50px; /* Ajusta el tamaño de la imagen según tu necesidad */
  height: auto;
}


@media (max-aspect-ratio: 1 / 1) {
  #imageTargetUI.inner {
    width: 60vw;
    height: 80vw;
  }

}

@media (width>1000px) {

  #imageTargetUI .inner {
    width: 30vw;
    height: 40vw;
  }
}


@media (width>=1024px) {

  #imageTargetUI .inner {
    width: 17vw;
    height: 40vw;
  }
}





@media only screen and (max-width: 2560px) {

 



}

@media only screen and (max-width: 1920px) {


}

@media only screen and (max-width: 1422px) {
  .imgphoto
  {
    width: 30%;
    height: auto;
    margin: 309% 0% 0% 272%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }
  
.imgshare-exp
{
  position: absolute;
  width: 25%;
  height: auto;
  margin: -321% 0% 0% 421%;
}

.imgprev
{
  position: absolute;
  margin: -186% 0% 0% 201%;
  width: 30%;
}

.imgnext {
  position: absolute;
  margin: -186% 0% 0% 344%;
  width: 30%;
}

  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 18px 17px;
    transform: scale(1.2);
    margin: -3% 0% 0% 4%;

  }
 

}


@media only screen and (max-width: 1366px) {
  .imgphoto
  {
    width: 30%;
    height: auto;
    margin: 357% 0% 0% 243%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }
  
.imgshare-exp
{
  position: absolute;
  width: 25%;
  height: auto;
  margin: -377% 0% 0% 372%;
}

.imgprev
{
  position: absolute;
  margin: -234% 0% 0% 165%;
  width: 30%;
}

.imgnext {
  position: absolute;
  margin: -234% 0% 0% 318%;
  width: 30%;
}

  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 18px 17px;
    transform: scale(1.3);
    margin: -3% 0% 0% -4%;
  }
 

}



@media only screen and (max-width: 1241px) {
  .imgphoto
  {
    width: 30%;
    height: auto;
    margin: 310% 0% 0% 235%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }
  
.imgshare-exp
{
  position: absolute;
  width: 25%;
  height: auto;
  margin: -319% 0% 0% 372%;
}

.imgprev
{
  position: absolute;
  margin: -186% 0% 0% 165%;
  width: 30%;
}

.imgnext {
  position: absolute;
  margin: -186% 0% 0% 318%;
  width: 30%;
}

  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 18px 17px;
    transform: scale(1.3);
    margin: -3% 0% 0% 4%;
  }
 

}


@media only screen and (max-width: 1194px) {

  .imgphoto
  {
    width: 21%;
    height: auto;
    margin: 289% 0% 0% 215%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }
  
.imgshare-exp
{
  position: absolute;
  width: 25%;
  height: auto;
  margin: -303% 0% 0% 344%;
}

.imgprev
{
  position: absolute;
  margin: -163% 0% 0% 140%;
  width: 25%;
}

.imgnext {
  position: absolute;
  margin: -163% 0% 0% 283%;
  width: 25%;
}

  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 18px 17px;
    transform: scale(1.3);
    margin: -3% 0% 0% -4%;
  }
  
 
}


@media only screen and (max-width: 1024px) {

  .imgphoto
  {
    width: 21%;
    height: auto;
    margin: 265% 0% 0% 181%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }
  
.imgshare-exp
{
  position: absolute;
  width: 25%;
  height: auto;
  margin: -273% 0% 0% 321%;
}

.imgprev
{
  position: absolute;
  margin: -163% 0% 0% 119%;
  width: 25%;
}

.imgnext {
  position: absolute;
  margin: -163% 0% 0% 246%;
  width: 25%;
}

  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 18px 17px;
    transform: scale(1.3);
    margin: -3% 0% 0% -4%;
  }
 
}

@media only screen and (max-width: 1024px) and (max-height: 1366px)  {

  .imgphoto
  {
    width: 30%;
    height: auto;
    margin: 454% 0% 0% 177%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }
  
.imgshare-exp
{
  position: absolute;
  width: 30%;
  height: auto;
  margin: -452% 0% 0% 321%;
}

.imgprev
{
  position: absolute;
  margin: -234% 0% 0% 80%;
  width: 30%;
}

.imgnext {
  position: absolute;
  margin: -234% 0% 0% 268%;
  width: 30%; 
}

  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 18px 17px;
    transform: scale(2.3);
    margin: -3% 0% 0% -4%;
  }
 
}

@media only screen and (max-width: 1024px) and (max-height: 768px)  {

  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 261% 0% 0% 180%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }
  
.imgshare-exp
{
  position: absolute;
  width: 25%;
  height: auto;
  margin: -272% 0% 0% 302%;
}

.imgprev
{
  position: absolute;
  margin: -167% 0% 0% 119%;
  width: 25%;
}

.imgnext {
  position: absolute;
  margin: -167% 0% 0% 241%;
  width: 25%;
}

  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px
px
, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 18px 17px;
    transform: scale(1.3);
    margin: -3% 0% 0% -4%;
  }
 
}


@media only screen and (max-width: 931px) {
  .imgphoto
  {
    width: 30%;
    height: auto;
    margin: 424% 0% 0% 161%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }
  
.imgshare-exp
{
  position: absolute;
  width: 30%;
  height: auto;
  margin: -436% 0% 0% 279%;
}

.imgprev
{
  position: absolute;
  margin: -237% 0% 0% 70%;
  width: 30%;
}

.imgnext {
  position: absolute;
  margin: -237% 0% 0% 253%;
  width: 30%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.4);
  }
  
 
}

@media only screen and (max-width: 889px) {
  .imgphoto
  {
    width: 30%;
    height: auto;
    margin: 457% 0% 0% 148%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }
  
.imgshare-exp
{
  position: absolute;
  width: 30%;
  height: auto;
  margin: -451% 0% 0% 252%;
}

.imgprev
{
  position: absolute;
  margin: -242% 0% 0% 59%;
  width: 30%;
}

.imgnext {
  position: absolute;
  margin: -242% 0% 0% 242%;
  width: 30%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.4);
  }
  
 
}




@media only screen and (max-width: 834px) {
  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 399% 0% 0% 144%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }
  
.imgshare-exp
{
  position: absolute;
  width: 25%;
  height: auto;
  margin: -397% 0% 0% 247%;
}

.imgprev
{
  position: absolute;
  margin: -203% 0% 0% 38%;
  width: 25%;
}

.imgnext {
  position: absolute;
  margin: -203% 0% 0% 242%;
  width: 25%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.4);
  }
  
 
}






@media only screen and (max-width: 768px) {
  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 358% 0% 0% 139%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }
  
.imgshare-exp
{
  position: absolute;
  width: 25%;
  height: auto;
  margin: -368% 0% 0% 237%;
}

.imgprev
{
  position: absolute;
  margin: -203% 0% 0% 38%;
  width: 25%;
}

.imgnext {
  position: absolute;
  margin: -203% 0% 0% 242%;
  width: 25%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.4);
  }
  
 
}

@media only screen and (max-width: 447px) {

  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 272% 0% 0% 74%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }
  
.imgshare-exp
{
  position: absolute;
  width: 20%;
  height: auto;
  margin: -288% 0% 0% 138%;
}


  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.55);
  }
  


}

@media only screen and (max-width: 432px) {

  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 304% 0% 0% 72%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }
  
.imgshare-exp
{
  position: absolute;
  width: 20%;
  height: auto;
  margin: -308% 0% 0% 135%;
}

.imgprev
{
  position: absolute;
  margin: -149% 0% 0% 10%;
  width: 20%; 
}

.imgnext {
  position: absolute;
  margin: -149% 0% 0% 137%;
  width: 20%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.6);
  }
  
}

@media only screen and (max-width: 431px) {

  .imgphoto
  {
    width: 20%;
    height: auto;
    margin: 270% 0% 0% 72%;
  }
  
  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }


  
.imgshare-exp
{
  position: absolute;
  width: 20%;
  height: auto;
  margin: -288% 0% 0% 136%;
}

.imgprev
{
  position: absolute;
  margin: -162% 0% 0% 7%;
  width: 20%;
}

.imgnext {
  position: absolute;
  margin: -162% 0% 0% 131%;
  width: 20%;
}



#imageTargetUI .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px
px
) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  transform: scale(0.6);
  margin: -2% 0% 0% 0%;
}
  

}




@media only screen and (max-width: 430px) {

  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 297% 0% 0% 67%;
  }
  
  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }


  
.imgshare-exp
{
    position: absolute;
    width: 20%;
    height: auto;
    margin: -302% 0% 0% 129%;
}

.imgprev
{
  position: absolute;
  margin: -162% 0% 0% 7%;
  width: 20%;
}

.imgnext {
  position: absolute;
  margin: -162% 0% 0% 131%;
  width: 20%;
}



#imageTargetUI .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px
px
) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  transform: scale(0.6);
  margin: -2% 0% 0% 0%;
}
  

}


@media only screen and (max-width: 428px) {

  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 305% 0% 0% 71%;
  }
  
  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }


  
.imgshare-exp
{
  position: absolute;
  width: 20%;
  height: auto;
  margin: -310% 0% 0% 129%;
}

.imgprev
{
  position: absolute;
  margin: -162% 0% 0% 7%;
  width: 20%;
}

.imgnext {
  position: absolute;
  margin: -162% 0% 0% 131%;
  width: 20%;
}



#imageTargetUI .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px
px
) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  transform: scale(0.6);
  margin: -2% 0% 0% 0%;
}
  

}



@media only screen and (max-width: 414px) {

  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 289% 0% 0% 69%;
  }
  
  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }


  
.imgshare-exp
{
  position: absolute;
  width: 20%;
  height: auto;
  margin: -282% 0% 0% 130%;

}


#imageTargetUI .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px
px
) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  transform: scale(0.6);
  margin: -2% 0% 0% 0%;
}
  
}



@media only screen and (max-width: 414px) and (max-height: 846px){

  .imgphoto
  {
    width: 23%;
    height: auto;
    margin: 283% 0% 0% 71%;
  }
  
  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }


  
.imgshare-exp
{
  position: absolute;
  width: 18%;
  height: auto;
  margin: -293% 0% 0% 128%;

}


#imageTargetUI .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px
px
) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  transform: scale(0.6);
  margin: -2% 0% 0% 0%;
}
  

}


@media only screen and (max-width: 414px) and (max-height: 736px){

  .imgphoto
  {
    width: 20%;
    height: auto;
    margin: 262% 0% 0% 70%;
  }
  
  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }


  
.imgshare-exp
{
  position: absolute;
  width: 18%;
  height: auto;
  margin: -275% 0% 0% 133%;

}


#imageTargetUI .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px
px
) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  transform: scale(0.6);
  margin: -2% 0% 0% 0%;
}
  

}



@media only screen and (max-width: 412px) {

  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 298% 0% 0% 68%;
  }
  
  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }


  
.imgshare-exp
{
  position: absolute;
  width: 18%;
  height: auto;
  margin: -305% 0% 0% 126%;

}


#imageTargetUI .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px
px
) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  transform: scale(0.6);
  margin: -2% 0% 0% 0%;
}
  

}

@media only screen and (max-width: 412px) and (max-height: 860px)
{

  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 284% 0% 0% 65%;
  
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 20%;
  height: auto;
  margin: -299% 0% 0% 126%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.6);
    margin: -10% 0% 0% 0%;
  }

}


@media only screen and (max-width: 412px) and (max-height: 785px)
{

  .imgphoto
  {
    width: 20%;
    height: auto;
    margin: 254% 0% 0% 68%;
  
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 20%;
  height: auto;
  margin: -269% 0% 0% 128%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.55);
    margin: -10% 0% 0% 0%;
  }

}



@media only screen and (max-width: 412px) and (max-height: 732px)
{

  .imgphoto
  {
    width: 20%;
    height: auto;
    margin: 254% 0% 0% 68%;
  
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 20%;
  height: auto;
  margin: -269% 0% 0% 128%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.55);
    margin: -10% 0% 0% 0%;
  }

}




@media only screen and (max-width: 393px) {

  .imgphoto
  {
    width: 23%;
    height: auto;
    margin: 276% 0% 0% 65%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 17%;
  height: auto;
  margin: -283% 0% 0% 123%;
}


  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.6);
    margin: -16% 0% 0% 0%;
  }
  

}


@media only screen and (max-width: 392px) {

  .imgphoto
  {
    width: 23%;
    height: auto;
    margin: 237% 0% 0% 65%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 17%;
  height: auto;
  margin: -254% 0% 0% 123%;
}


  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.55);
    margin: -14% 0% 0% 0%;
  }
  

}


@media only screen and (max-width: 390px) {

  .imgphoto
  {
    width: 23%;
    height: auto;
    margin: 266% 0% 0% 65%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 17%;
  height: auto;
  margin: -270% 0% 0% 123%;
}

.imgnext {
  position: absolute;
  margin: -162% 0% 0% 119%;
  width: 20%;
}

.imgprev {
  position: absolute;
  margin: -162% 0% 0% 13%;
  width: 20%;
}


  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.55);
    margin: -14% 0% 0% 0%;
  }
  

}



@media only screen and (max-width: 384px) {

  .imgphoto
  {
    width: 21%;
    height: auto;
    margin: 267% 0% 0% 62%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 16%;
  height: auto;
  margin: -269% 0% 0% 118%;
}

.imgprev
{
  position: absolute;
  margin: -148% 0% 0% 8%;
  width: 20%;
}

.imgnext {
  position: absolute;
  margin: -148% 0% 0% 122%;
  width: 20%;
}


  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.6);
  }
  


}

@media only screen and (max-width: 375px) {

  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 227% 0% 0% 58%;
  
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 20%;
  height: auto;
  margin: -251% 0% 0% 120%;
}


.imgprev
{
  position: absolute;
  margin: -138% 0% 0% 4%;
  width: 20%;   
}

.imgnext {
  position: absolute;
  margin: -138% 0% 0% 123%;
  width: 20%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.6);
    margin: -10% 0% 0% 0%;
  }
  


}




@media only screen and (max-width: 375px) and  (max-height: 812px) {

  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 259% 0% 0% 58%;
  
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 20%;
  height: auto;
  margin: -271% 0% 0% 120%;
}


.imgprev
{
  position: absolute;
  margin: -138% 0% 0% 4%;
  width: 20%;   
}

.imgnext {
  position: absolute;
  margin: -138% 0% 0% 123%;
  width: 20%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.6);
    margin: -10% 0% 0% 0%;
  }
  


}


@media only screen and (max-width: 375px) and  (max-height: 667px) {

  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 223% 0% 0% 58%;
  
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 20%;
  height: auto;
  margin: -244% 0% 0% 118%;
}


.imgprev
{
  position: absolute;
  margin: -138% 0% 0% 4%;
  width: 20%;   
}

.imgnext {
  position: absolute;
  margin: -138% 0% 0% 123%;
  width: 20%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.55);
    margin: -10% 0% 0% 0%;
  }
  


}



@media only screen and (max-width: 360px) {

  .imgphoto
  {
    width: 25%;
    height: auto;
    margin: 218% 0% 0% 58%;
  
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 20%;
  height: auto;
  margin: -238% 0% 0% 110%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.6);
    margin: -10% 0% 0% 0%;
  }
  

}



@media only screen and (max-width: 360px) and (max-height: 800px)
{

  .imgphoto
  {
    width: 20%;
    height: auto;
    margin: 250% 0% 0% 58%;
  
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 18%;
  height: auto;
  margin: -257% 0% 0% 109%;
}

.imgprev
{
  position: absolute;
  margin: -137% 0% 0% 8%;
  width: 20%;  
}

.imgnext {
  position: absolute;
  margin: -137% 0% 0% 111%;
  width: 20%;
}




  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.6);
    margin: -10% 0% 0% 0%;
  }

}


@media only screen and (max-width: 360px) and (max-height: 780px)
{

  .imgphoto
  {
    width: 20%;
    height: auto;
    margin: 250% 0% 0% 58%;
  
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 18%;
  height: auto;
  margin: -257% 0% 0% 109%;
}

.imgprev
{
  position: absolute;
  margin: -137% 0% 0% 8%;
  width: 20%;  
}

.imgnext {
  position: absolute;
  margin: -137% 0% 0% 111%;
  width: 20%;
}




  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.6);
    margin: -10% 0% 0% 0%;
  }

}



@media only screen and (max-width: 360px) and (max-height: 720px)
{

  .imgphoto
  {
    width: 20%;
    height: auto;
    margin: 238% 0% 0% 58%;
  
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 18%;
  height: auto;
  margin: -248% 0% 0% 109%;
}

.imgprev
{
  position: absolute;
  margin: -137% 0% 0% 8%;
  width: 20%;  
}

.imgnext {
  position: absolute;
  margin: -137% 0% 0% 111%;
  width: 20%;
}




  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.6);
    margin: -10% 0% 0% 0%;
  }

}


@media only screen and (max-width: 360px) and (max-height: 693px)
{

  .imgphoto
  {
    width: 20%;
    height: auto;
    margin: 232% 0% 0% 59%;
  
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 18%;
  height: auto;
  margin: -246% 0% 0% 115%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.6);
    margin: -10% 0% 0% 0%;
  }

}


@media only screen and (max-width: 360px) and (max-height: 640px)
{

  .imgphoto
  {
    width: 22%;
    height: auto;
    margin: 221% 0% 0% 58%;
  
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 18%;
  height: auto;
  margin: -240% 0% 0% 116%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.6);
    margin: -10% 0% 0% 0%;
  }

}



@media only screen and (max-width: 320px) {

  .imgphoto
  {
    width: 20%;
    height: auto;
    margin: 196% 0% 0% 52%;
  }

  .imgswitchcam
  {
    position: absolute;
    width: 13%;
    height: auto;
    margin: -250% 0% 0% 11%;
  }

  
.imgshare-exp
{
  position: absolute;
  width: 15%;
  height: auto;
  margin: -212% 0% 0% 104%;
}



  #imageTargetUI .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to right, white 10px, transparent 10px) 0 0, linear-gradient(to right, white 10px, transparent 10px) 0 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(to bottom, white 10px, transparent 10px) 0 0, linear-gradient(to bottom, white 10px, transparent 10px) 100% 0, linear-gradient(to top, white 10px, transparent 10px) 0 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    transform: scale(0.6);
    margin: -10% 0% 0% 0%;
  }
  


}