body {
  margin: 0px;
  padding: 0px;
  background: #000;
}

.seleccionado{
	border: 5px solid yellow !important;
}
.shared-panel {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0%);
  width: max-content;
  display: none;
}
.shared-panel span {
  margin: 10px 0;
  font-size: 16px;
  font-weight: 600;
}
.shared {
  display: inline-block;
  width: 4em;
  height: 4em;
  margin: 5px 0;
  padding: 0;
  /* Recurso incluido en la descarga del ejemplo */
  float: left;
  margin-right: 5px;
  cursor: pointer;
}
.shared:hover {
  opacity: 0.7;
}
.shared.gallery {
  background-image: url("img/icono_subida.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.shared.ce {
  background-image: url("img/icono_mail.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.shared.wa {
  background-image: url("img/icono_whatsapp.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.shared.sms {
  background-image: url("img/icono_sms.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.shared.fb {
  background-image: url("img/facebook.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.shared.tv {
  background-image: url("img/icono_tv.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.shared.download {
  background-image: url("img/icono_descarga.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.st2 {
  border-radius: 0;
}
.st3 {
  border-radius: 5px;
}
#vid_container {
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
}
.lienzo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
#gui_controls {
  position: fixed;
  background-color: #111; /*rgba(255, 0, 0, 0.5);*/
  z-index: 2;
  bottom: 0;
}
#video_overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: #111;
}
/*  Button style from: 
    https://googlesamples.github.io/web-fundamentals/fundamentals/media/mobile-web-video-playback.html */
button {
  outline: none;
  position: absolute;
  color: white;
  display: block;
  opacity: 1;
  background: transparent;
  border: solid 2px #fff;
  padding: 0;
  text-shadow: 0px 0px 4px black;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: auto;
  z-index: 2;
}
#takePhotoButton {
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  width: 80px;
  height: 80px;
  background-image: url('img/funevent_camara.png');
  border: none;
  background-size: contain;
  cursor: pointer;
  /*border-radius: 5%;
  background-color: rgba(0, 0, 0, 0.5);
	*/
}
#takePhotoButton[aria-pressed='false'] {
  background-image: url('img/funevent_retake.png');
}
#takePhotoButton:active {
  background-color: #fff;
}
#toggleFullScreenButton {
  display: none;
  width: 64px;
  height: 64px;
  background-image: url('img/ic_fullscreen_white_48px.svg');
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
#toggleFullScreenButton[aria-pressed='true'] {
  background-image: url('img/ic_fullscreen_exit_white_48px.svg');
}
#switchCameraButton {
  display: none;
  width: 64px;
  height: 64px;
  background-image: url('img/funevent_selfie.webp');
  border: none;
  background-size: contain;
  cursor: pointer;
  /*
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
	*/
}
#switchCameraButton[aria-pressed='true'] {
  background-image: url('img/funevent_selfie.webp');
}
#marcos {
  bottom: 5em;
  position: relative;
  margin: auto;
}
.marco {
  width: 5em;
  height: 5em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: white;
  border: 3px solid black;
  cursor: pointer;
}
#fondos {
  bottom: 5em;
  position: relative;
  margin: auto;
}
.fondo {
  width: 5em;
  height: 5em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: white;
  border: 3px solid black;
  cursor: pointer;	
}
.hero-text2 {
text-align: center;
top: 25%;
overflow: auto;
color: white !important;
width: 66%;
margin: 0 auto;
position: sticky;
height: 99%;
}
.hero-text {
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px;
  max-height: 90%;
  overflow: auto;
  
}
.hero-text2 button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
  position: inherit;

}
.hero-text button {
outline: 0;
display: inline-block;
cursor: pointer;
position: inherit;
font-size: 150%;
font: 2em trebuchet,arial;
color: black;
text-align: center;
text-decoration: none;
padding: 0 1em;
margin: 3px auto 5px;
background: white;
border: 1px solid #ddd;
border-radius: 20px;
box-shadow: 0 3px 5px #4a4a4a;
text-shadow: none;

}
.hero-text button:hover {
  background-color: #555;
  color: white;
}

@media screen and (orientation: portrait) {
  /* portrait-specific styles */
  /* video_container (video) doesn't respect height... 
       so we will fill it in completely in portrait mode
    */
  #vid_container {
    width: 100%;
    height: 90%;
  }
  #gui_controls {
    width: 100%;
    height: 10%;
    left: 0;
  }
  #switchCameraButton {
    left: calc(20% - 32px);
    top: calc(50% - 32px);
  }
  #toggleFullScreenButton {
    left: calc(80% - 32px);
    top: calc(50% - 32px);
  }
  #lienzo {
    width: 100%;
    z-index: 0;
  }
}
@media screen and (orientation: landscape) {
  #vid_container {
    width: 90%;
    height: 100%;
  }
  #lienzo {
    height: 100%;
    width: auto;
    z-index: 0;
  }
  #vid_container.left {
    left: 20%;
  }
  /* we default to right */
  #gui_controls {
    width: 10%;
    height: 100%;
    right: 0;
  }
  /* for the lefties */
  #gui_controls.left {
    left: 0;
  }
  #switchCameraButton {
    left: calc(50% - 32px);
    top: calc(18% - 32px);
  }
  #toggleFullScreenButton {
    left: calc(50% - 32px);
    top: calc(82% - 32px);
  }
  #marcos {
    left: -5em;
    top: 0;
  }
  #marcos tr {
    display: grid
  }
  #fondos {
    left: -5em;
    top: 0;
  }
  #fondos tr {
    display: grid
  }
}

#segundos{
color:white;
position:absolute;
right:50%;
font-size:128px;
text-shadow:4px 4px grey;
}