*{
  margin: 0;
  padding: 0;
 }
 .error {color: #FF0000;}
  body,html{
    padding: 0;
    width: 100%;
    resize: none;
    background-color:  rgb(121, 220, 247);    /* #435165; h2*/
    font-family: Arial, Helvetica, sans-serif;
  }
  .formulario {
    text-align: center;
    width: 94%;
    height: auto;
    margin: 13px 0 2px 3%;
    background-color: #5b6e8a;
    border-radius: 2mm;
    scroll-behavior: smooth;
    z-index: 9;
    box-shadow: 0px 0px 14px 10px rgba(59, 54, 54, 0.4);
  }
.formulario span{
   color: #FF0000;
 }
 #welcomeContainer{
  position: fixed;
  width: 100%;
  padding: 1px 0 1px 0;
  color: rgb(23, 94, 138);
  background-color:  transparent;
  border: 0;
  top: 0;
  left: 0;
  margin: auto;
  -webkit-perspective: 650px;
  -moz-perspective: 650px;
  perspective: 650px;
  z-index: 9;
  background-image: linear-gradient(to right, #ee9ff5, rgb(115, 217, 245) );
 }
 .form-in{
  display: none;
  flex-direction: column;
  text-align: center;
  padding-top: 0;
  position: relative;
  background-color: rgb(115, 217, 245);
  background-image: linear-gradient(to right, #ee9ff5, rgb(115, 217, 245) );
 }
 .form-in a {
  width: 94%;
 display: block;
 text-decoration: none;
 background-color: #f6f6f6;
 margin: 7px 0 7px 2.7%;
 border-radius: 0.5em;
 position: relative;
 box-shadow: 1px 1px 0.5px 0.5px rgba(59, 54, 54, 0.4);
}
.a-autodispViedeo{
  width: 100% !important;
  height: 310px;
  border-radius: 0 !important;
  margin: 50px 0 0 0 !important;
  box-shadow:0 0 0 0 !important;
}
.a-autodispViedeo:focus{
  background-color: black;
}
 @keyframes aniGallery {
  0%   { bottom: -700px;left: 0; opacity: 0;}
  100%  { bottom: 0; left: 0; opacity: 1;}
}
 .h3-login{
  font-size: 20px;
   display: inline-block;
   background-color: transparent;
   margin-top:20px;
 }
 .show{
   display: block;
 }
 .divEncrypt{
  position: fixed;
  min-height: 50px;
  max-height: 70px;
  width: 90%;
  background-color: #f7f797;
  left: 5%;
  bottom: 200px;
  display: none;
  text-align: center;
  box-shadow: 10px 6px 0 0 rgba(0,0,0,0.2);
}
.btnEnc{
  width: 50%;
  min-height: 49px;
  max-height: 100%;
  color: white;
  border-style: none;
  -webkit-appearance:normal;
  -moz-appearance:normal;
  appearance: normal;
  word-wrap: break-word;
}
#btnYes{
  font-size: 18px;
  background-color: rgb(8, 112, 172);
}
#btnNo{
  font-size: 18px;
  background-color: rgb(6, 146, 64);
}
 input[type=text],input[type=password] {
  width: 78%;
  height: 39px;
  font-size: 18px;
  padding-left: 5px;
  background-color: #2e3c50; 
  border-style: hidden;
  box-shadow: 10px 6px 0 0 rgba(0,0,0,0.2);
}
.spSuccess{
  width: 90%;
  font-size: 18px;
  padding: 5px;
  margin: 0 0 10px 5%;
  background-color: #afcdf7; 
  color: black;
  position: relative;
  border-style: hidden;
  display: none;
 }
 input[type=text]:focus {
   width: 78%;
   height: 39px;
   background-color: rgb(220, 247, 240);
   outline: none;
 }
 input[type=password]:focus {
   width: 78%;
   height: 39px;
   background-color: rgb(220, 247, 240);
    outline: none;
 }
 #showPassCheckBox{
   width: 22px;
   height: 22px;
   background-color: teal; 
   box-shadow: 8px 5px 0 0 rgba(0,0,0,0.2);
   cursor: pointer;
 }
 #checkboxParag{
  width: 78%;
  text-align: left;
  margin-left: 11%;
 }
  .submit {
    position: relative;
     width: 50px;
     height: 37px;
     margin-right: 5.5%;
     border-style: none;
     border-bottom: 1px solid #dcf8d7;
     border-right: 1px solid #dcf8d7;
     background-color: #2e3c50; 
     background-image: url("favicon.ico");
     background-position: center; 
     background-repeat: no-repeat; 
     background-size:contain;
     cursor: pointer;
     padding: 5px 10px 5px 10px;
     box-shadow: 8px 5px 0 0 rgba(0,0,0,0.2);
  }
  input[type=submit]:hover{
    color: rgb(226, 43, 195);
    background-color: rgb(220, 247, 240);
    border-color:  wheat;
    padding: 6px 10px 6px 10px;
  }
 .contbtnsubmit{
    text-align: right;
    padding-right: 21px;
     }
    .formulario h2{
      width: 79%;
      margin-left: 10%;
      color: lightskyblue;
      background-color: #2e3c50; 
      box-shadow: 10px 6px 0 0 rgba(0,0,0,0.2);
     }
     #Keynett-span{
       color: green;
     }
 #hclose{
    position: fixed;
    top: 3px;
    height: 25px;
    width: 25px;
    margin-left: 3px;
    padding: 2px;
    font-size: 23px;
    color: white;
    background-color:  black;
    animation-name: animatezoom;
    animation-iteration-count: 1;
    animation-duration: 1s;
  }
     #h2info{
 background-color: #dddd11;
 position: fixed;
 top:10px;
 color: rgb(110, 158, 13);
 margin-left: 3%;
}
     .divfila{
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
     }
  /* Add Zoom Animation to body */
.animate {
  -webkit-animation: animatezoom 0.5s;
  animation: animatezoom 0.5s;
  -moz-animation: animatezoom 0.5s;
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}
footer {
  font-size: 10px;
  text-align: center;
  padding: 3px;
  border-radius: 0 0 2mm 2mm ;
}
#notification-header {
	background-color: transparent;
  padding-top: 6px;
    text-align: left;
    margin-left: 5px;
    margin-right: 10px;
}
#notification-icon {
	background: transparent;
	border: 0;
	position: relative;
  width: 33px;
  padding: 0 89% 0 8px ;
	cursor:pointer;
}
#notification-count{
	position: absolute;
    left: 3px;
    top: -6px;
    font-size: 15px;
    color: white;
    font-weight: bold;
} 
/*Zona de Password lost */
.lost-passw-container,.qr-code-container {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */ 
  z-index: 6;
}
.modal-lost-passw ,.qr-code{
  position: fixed;
  background-color: #fefefe;
  margin: 20% 3% 0 3%;
  border: 1px solid #888;
  width: 93%;
  height: auto;
  left: 1.5px;
  text-align: center;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 1s;
  animation-name: slideIn;
  animation-duration: 1s
}
/* The Close Button */
.close {
  color:rgb(202, 160, 96) ;
  float: right;
  margin-right: 4px;
  font-size: 30px;
  font-weight: bold;
  right: 0;
  top: 0;
}
.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}
.txtLostPass{
width: 90%;
padding: 5px;
font-size: 19px;
resize: none;
background-color: rgb(247, 240, 231);
}
.txtLostPass:hover{
  background-color: white;
  color: black;
}
#btnIssue{
  width: 80px;
  height: 30px;
  font-size: 16px;
  color: rgb(114, 78, 24);
  right: 0;
  background-color: rgb(247, 240, 231);
}
#divSubmitIssue{
  text-align: right;
  width: 95%;
  padding-right: 6%;
}
@-webkit-keyframes slideIn {
  0% {top: -700px; opacity: 0} 
  100% {top: 0; opacity: 1}
}

@keyframes slideIn {
 0% {top: -700px; opacity: 0}
100% {top: 0; opacity: 1}
}
.scroll_menue{
  width: 100%;
  min-height: 45px;
  max-height: 150px;
  margin-top: 1px;
  position: relative;
  display: flex;
  background-color:transparent;
  scroll-behavior: smooth;
  -ms-overflow-style: none; 
  scrollbar-width: none; 
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 9;
  -webkit-animation-name: opacityFull;
  -webkit-animation-duration: 1s;
  animation-name: opacityFull;
  animation-duration: 1s;
  -moz-animation-name: opacityFull;
  -moz-animation-duration: 1s;
}
.scroll_menue_in{
  overflow: hidden;
  display:flex;
  min-height: 45px;
  width: 310%;
  position:absolute;
  z-index: 9;
}
.scroll_menue::-webkit-scrollbar {
  display: none;
}
.divMainContText{
  width: 94%;
  height: 85vh;
  float: left;
  display: block;
  color: rgb(7, 49, 7);
  text-align: left;
  margin: 45px 0 5px 4.5%;
  text-decoration: none;
  background-color: transparent;
  position: absolute;
  overflow-y: scroll;
  scroll-behavior: smooth;
  -ms-overflow-style: none; 
  scrollbar-width: none; 
  padding: 0;
}
.divMainContText::-webkit-scrollbar {
  display: none;
}
.divHowToText{
  padding: 10px;
  text-align: left;
}
.infoLink{
  width: auto !important;
  height: 22px !important;
  max-height: 36px !important;
  display: block !important;
  text-align:center !important;
  bottom: 2.3px !important;
  border-radius: 2em !important;
  font-size: 16px !important;
  padding:7px 8px 1px 8px !important;
   margin:10px 4px 0 4px !important;
  box-shadow: 1px 1px 1px 1px rgba(154, 155, 143, 0.4) !important;
}
.sp_search{
  width: 245px;
  display: flex;
  padding: 0;
  margin-left: 5px;
  margin-top: 6px;
  max-height: 32px !important;
  background-color: #ddddd5;
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
  box-shadow: 1px 1px 1px 1px rgba(154, 155, 143, 0.4) !important;
}
.sp_search textarea{
  width: 200px;
  max-height: 30px !important;
 font-size: 18px !important;
  border-style: none;
  outline: none;
  resize: none;
  padding: 6px 0 0 8px !important;
  margin: 0 !important;
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
  background-color: #faf5f5;
}
.sp_search textarea:focus{
  border-style: none;
  outline: none;
}
.a_search{
  width: 40px !important;
  font-size: 18px !important;
  height: 25px !important;
  padding: 0 !important;
  bottom: 2.4px !important;
  border: none !important;
  background-color: #ddddd5 !important;
  box-shadow: 0 0 0 0 !important;
}
.ul_search{
  position: fixed;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #e2eceb;
  font-size: 18px;
  z-index: 9;
  top: 50px;
  left: 38%;
}
.ul_search li{  
  width:100%;
  margin: 0 4px 4px 4px;
  height: auto;
}
.ul_search li:focus{  
  background-color: #dddd11;
}
/* Zona de publicidad-Eventos  */
.display-image{
  position: relative;
  display: block;
  background-color: white;
  overflow: auto;
   margin-top: 46px;
}
.publi_container{
  width: 97%;
  height: 320px auto;
  max-height: 800px;
  font-size: 18px;
  padding: 10px 10px 0 0;
  position: relative;
  text-align: center;
 justify-items: center;
 border-bottom: 2px solid blueviolet;
}
.publi_cont_vid{
  background-color: rgb(242, 203, 242);
}
.publi_cont_img{
  background-color: #abd4eb;
}
.publi_cont_vid a{
  background-color:transparent !important;
}
.event_a{
  padding: 6px 0 6px 0;
  background-color:#c1eef8 !important;
}
#event_img_a{
  height: 280px;
  padding: 0;
  background-color:#c1eef8 !important;
}
.publi_img{
width: 100%;
height: 100%;
border-radius: 0.5em;
margin: 0 !important;
background-image: url("btn_images/zaragoza_Esp.jpg");
background-position: center; 
background-repeat: no-repeat; 
background-size: cover;
resize: both;
object-fit: cover;
}
.publi_vid{
  width: 50% auto;
  height: 55% auto;
  max-width: 96%;
  max-height: 280px;
}
.publi_container marquee{
  width: 96%;
  height: 30px;
  color: #0e0241;
  background-color: transparent;
  font-size: 21px;
  margin: 0 0 10px 4%;
}
.publi_container strong{
font-size: 22px;
}
.publi_container span{
 padding: 2px 0 8px 0;
 }
 .publi_container h1{
  padding: 6px 0 6px 0;
  outline: none !important;
  }
 .publi_container small{
  position: absolute;
 left: 77%;
 bottom: 0;
 opacity: 0.6;
  }
#head_sp{
  position: relative;
  width: 96%;
  margin-left: 2%;
  border-radius: 0.5em;
  background-color: rgb(236, 110, 236); 
  color: whitesmoke;
  padding: 10px 0 10px 0;  
  box-shadow: 1px 1px 0.5px 0.5px rgba(59, 54, 54, 0.4);
}
#head_sp_img{
  position: relative;
  width: 96%;
  margin-left: 2%;
  border-radius: 0.5em;
  background-color: rgb(96, 184, 247); 
  color: whitesmoke;
  padding: 10px 0 10px 0;
  box-shadow: 1px 1px 0.5px 0.5px rgba(59, 54, 54, 0.4);
}
:-webkit-full-screen {
  background-color: black;
}
:-ms-fullscreen {
  background-color: black;
}
:fullscreen {
  background-color: black;
}
/*      info button      */
.info_btn{
  position: absolute;
  background: rgb(246, 245, 245);
  color: #f77a36;
  border-style: solid;
  border-color:rgb(249, 248, 248);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 22px;
  left: 3%;
  bottom: 2%;
  cursor: pointer;
  z-index: 2;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.info_btn:hover{
  outline: none;
 background-color: rgb(246, 245, 245) !important;
}
.info_btn:focus{
  background-color: rgb(246, 245, 245) !important;
}
.info_share-options{
  position: absolute;
  bottom: 4%;
  left: 6%;
  height: auto;
  min-width:70%;
  max-width: 77%;
  font-weight: 500;
  text-align: center;
  transform-origin: bottom left;
  transform: scale(0);
  border-radius: 25px;
  background: rgb(255, 255, 255);
  color: rgb(29, 3, 29);
  padding: 20px 4px 20px 30px;
  font-size: 18px;
  font-family: 'roboto';
  transition: .5s;
  transition-delay: .5s;
  z-index: 1;
}
.info_share-options.active{
  transform: scale(1);
  transition-delay: 0s;
}

.info_share-options.active .social-media
{
  opacity: 1;
  transition: .5s;
  transition-delay: .5s;
}
.info_social-media-btn{
  position:relative;
  display: flex;
  background-color: transparent !important;
  box-shadow: none !important;
  border-style:none !important;
  width:auto;
  min-width:70%;
  padding:0 !important;
  word-wrap: break-word;
}