/*css cookies*/

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
/**/
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
	/*background: #f2f2f2;*/
    
    color:darkslategrey;
	font-family: 'Roboto', sans-serif;
}

/* */
.logo{
    width: 35px;
    height: 29px;
}


/*
Aqui va el css del footer
*/
.containerFooter {
  display: flex;
  flex-direction: column;
  min-height: 10vh;
}

main {
  flex: 1;
}
footer{
    flex: 1;
}
/*
Aqui va el css del final footer
*/



p {
	margin-bottom: 20px;
	line-height: 150%;
}

main {
	margin: 10px auto;
	max-width: 1000px;
	background: #fff;
    color: black;
	min-height: 80vh;
	padding: 20px;
	border-radius: 10px;
}

.card-deck {
    display: flex;
    flex-wrap: wrap;
    margin: 10px auto;
    max-width: 1000px;
    color: black;
    min-height: 80vh;
    padding: 20px;
    border-radius: 10px;
}

.aviso-cookies {
    display: none;
    background: #f2f2f2;
    color: black;
    padding: 20px;
    width: calc(100% - 40px);
    max-width: 300px;
    line-height: 150%;
    border-radius: 10px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    padding-top: 60px;
    box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
    text-align: center;
    font-size: xx-small;
}

.aviso-cookies.activo {
    display: block;
}

.aviso-cookies .galleta {
    max-width: 100px;
    width: 80px;
    height: 80px;
    position: absolute;
    top: -50px;
    left: calc(50% - 30px);
}

.aviso-cookies .titulo, .aviso-cookies .parrafo {
    margin-bottom: 25px;
}

.aviso-cookies .boton {
    display: inline-block;
    padding: 10px 20px; 
    cursor: pointer;
    margin-bottom: 15px;
    font-size: 14px;
}

.aviso-cookies .boton :hover {
    background-color: black;
}

.aviso-cookies .enlace {
    color: #4dbfff;
    text-decoration: none;
    font-size: 14px;
}

.aviso-cookies .enlace:hover {
    text-decoration: underline;
}

.fondo-aviso-cookies{
    display: none;
    background: rgba(0, 0, 0, .20);
    position: fixed;
    z-index: 99;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}

.fondo-aviso-cookies.activo {
    display: block;
}


/*fin de css cookies*/

.container-video{
    margin: 0;
}

/*
#myimg{
    width: 250px;
    height: 250px;
}
*/

#tasks-compartir{
    margin-top: 100px;
    float:right;
    margin-left: 2px;
}


/* css fondo animado*/


.tasks-compartir, .tasks-compartir {
   padding: 5px;
   width: 90%;
   margin-left: auto;
   margin-right: auto;
   margin-top: auto;
   margin-bottom: auto;
  
  
}
.nav-link-dark{
    margin-left: 15px;
    margin-top: 1px;
    color:darkslategrey;
}

.nav-link{
    color:darkslategrey;
}


#task-form, #compartir-form {
   
    padding: 5px 5px 5px 5px;
    color:darkslategrey;
}


h1 {
    color:#778374
}

marquee {
    font-size: 24px;
    font-family: "Cursive", "Courier New", monospace;
    text-align: center;
    color: darkslategrey;
    margin-top: 10px;
}

span{
    color:"darkslategrey" !important;
    
}

.compartir {
    border-radius: 5px;
}





/* fin de css compartir compra*/
#btnDelete{
    
    top: 0px;
    left: 0px;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    font-size: large;
    margin-top: 2px;
}

img{
    height: 340px;
    width: 346px;
   /* border: 2px solid #778374;*/
}

.send i{
    color: #4dbfff;
}

a:visited {
    
    margin-block-start:0%;
    padding: 20px;
    display: flex;
    text-decoration: none;
  }

#tituloImg{
    
    font-size:medium;
    padding: 2px;
    
}

h1 {
    
    align-items: self-end;
    
}
h2{
    color: darkslategrey;
}
/*
.new{
    
    background-color: gold;
    width: 35px;
    height: 15px;
    border: 0.5px solid red;
    border-radius: 70%;
    margin-top: -22px;
    margin-left: 15px;
    font-size: small;   
    
}
*/


/**/
.footer {
    position: fixed;
    height: 40px;
    bottom: 0;
    width: 100%;
}
 /*  margin-block-start: 0%;
   margin: -300px, 300px, 200px, 100px;*/
    
    
/*
.container-post, .tasks-compartir {
    margin-top: 2px;
    padding: 10px;
    width: 100%;
    text-align: center;
    color:darkslategrey;
  }

  .card-body, .card-header, .card-text {
    color:darkslategray;
  }

#desc{
   
    color: black important;
}

.img-reset{
    width: 340px;
    height: 346px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
}*/

/* CARDS NUEVAS/*

/* FIN DE CARDS NUEVAS*/
  
.modal .modal-header .fade{
    
    width: 100%;
    height: 100%;
    font-size: small;
    
    
}
 /* */
.modal-header .fade .modal-dialog{
    width: 100%;
}

.modal-header .fade{
   
    width: 100%;
    height: 100%;
    font-size: small;
    margin: 10px 10px 10px 10px;
    padding: 10px;
    text-align: center;
    color: black;
    background-color: #778374;
    border-radius: 5px;
    
    
}
.registroEvento{
    min-width:  650px;
    padding: 10px 10px 10px 10px;
    position: absolute;
    margin-bottom: auto;
    margin-right: auto;
}

.reset-btn{
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    width: 100%;
    text-align: center;
}

#myimg{
    width: 340px;
    height: 346px;
}

.reset-text{
    color: blanchedalmond;
    font-size: small;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    width: 100%;
    text-align: center;
}

/*CSS Whatsapp*/

.float-wa{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    z-index:100;
}

  /*Codigo de imagen con efecto CSS*/ 
/**/  
.wrap{
    width: 100%;
    margin: 50px, auto;
   /**/ display: flex;
    justify-content: center;
}

.tarjeta-wrap{
    margin: 10px;
    -webkit-perspective: 800;
    perspective: 800;
}

.tarjeta{
    width: 340px;
    height: 346px;
    border-radius: 5px;
   /* background: #778374;*/
    position: relative;
    transform-style: preserve-3d;
    transition: .7s ease;
    -webkit-box-shadow: 0px 10px 15px -5px rgba(0,0,0,0.65);
    -moz-box-shadow: 0px 10px 15px -5px rgba(0,0,0,0.65);
    box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, 0.65);
}

.adelante, .atras{
 width: 100%;
 height: 100%; 
 position: absolute; 
 top: 0;
 left: 0;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden; 
}

.adelante{
    width: 100%;
}

.atras{
    transform: rotateY(180deg);
    
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color:darkslategray;
    text-align: center;
    color: #fff;
    font-family: "open sans";
}

.tarjeta-wrap:hover .tarjeta{
    transform: rotateY(180deg);
}
/**/
.card1{
    width: 100%;
    height: 100%;
    background-image: url("../src/image/QR-twitch.png");
}

.card2{
    width: 100%;
    height: 100%;
    background-image: url("../src/image/whatsapp.jpg");
}
 

.card3{
    width: 100%;
    height: 100%;
    background-image: url("../src/image/ArrozConPicolatFoto.jpg");
}

.card-deck img:hover{
border-radius:50%;
-webkit-border-radius:50%;
box-shadow: 0px 0px 15px 15px #ec731e;
-webkit-box-shadow: 0px 0px 15px 15px #ec731e;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
/**/
.card-title, .card-text, a{
    text-decoration: none;
}

/*CSS banner animacion*/
* {
  margin: 0;
  padding: 0;
 /* background-color: #2f2f2f;*/
}
.main {
  height: 100vh;
  width: 100vw;
  position: relative;
}
.d1 {
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
  background-size: 2700px 1500px;

  height: 30vh;
  width: 15vw;

  background-position: 0 50%;

  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  animation: dd1 10s 1, dd12 10s 1;
  animation-delay: 4s, 14s;
}
.d2 {
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
  background-size: 2700px 1500px;

  height: 50vh;
  width: 25vw;

  background-position: -10vw 50%;
  left: 10vw;

  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  animation: dd2 10s 2;
  animation-delay: 4s;
}
.d3 {
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
  background-size: 2700px 1500px;
  overflow: hidden;

  height: 100vh;
  width: 40vw;
  left: 25vw;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
  background-position: -35vw 50%;

  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  animation: dd3 10s 2;
  animation-delay: 4s;
}
.d4 {
  position: absolute;
  overflow: hidden;
  background-image: url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
  background-size: 2700px 1500px;

  height: 80vh;
  width: 25vw;
  left: 60vw;
  background-position: -70vw 50%;

  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  animation: dd4 10s 2;
  animation-delay: 4s;
}

@keyframes dd1 {
  0% {
  }
  50% {
    width: 95vw;
  }
}
@keyframes dd12 {
  0% {
  }
  50% {
    background-position: Calc(0vw - 40px) 50%;
  }
}
@keyframes dd2 {
  0% {
  }
  50% {
    background-position: Calc(-10vw - 40px) 50%;
  }
}
@keyframes dd3 {
  0% {
  }
  50% {
    background-position: Calc(-35vw - 40px) 50%;
  }
}
@keyframes dd4 {
  0% {
  }
  50% {
    background-position: Calc(-70vw - 40px) 50%;
  }
}

/*fin CSS banner animacion*/