.divMarquee {
	height: 300px;
	padding:0px 0px;
	background-color:#000;
	position:relative;
}
.imageMarquee {
	height: 200px;
    background-image: url(../images/martusreel_v2.webp);
    animation: imageMovement 600s linear infinite;
    background-size: cover;
    animation-direction: reverse;
    position: absolute;
    z-index: 40;
    width: 100%;
	top:60px;
}

.magia {
	position: absolute;
    top: 0px;
    font-family: Praise;
    font-size: 2.7rem;
    text-align: center;
    color: #fff;
    width: 100%;
}

.magia2 {
	position: absolute;
    bottom: 15px;
    font-family: Praise;
    font-size: 1.8rem;
    text-align: center;
    color: #fff;
    width: 100%;
}


.magia img {
	display:inline-block;
	vertical-align:middle;
	height:70px;
	padding:0px 0px;
	animation: cambiarOpacidad 2s infinite alternate;
}

@media (min-width: 768px) {
	.magia {
		top: -0.5vw;
		font-size: 6vw;
	}

	.magia2 {
		bottom: 2vw;
		font-size: 4vw;
	}
	
	.magia img {
		height:8vw;
		padding:0px 20px;
	}
}

@keyframes cambiarOpacidad {
  from {
    opacity: 1; /* 100% de opacidad */
  }
  to {
    opacity: 0.7; /* 50% de opacidad */
  }
}

.gradient {
    height:100%;
    width:100%;
    background: linear-gradient(90deg, #df398d, #85539a, #33b7c6);
    background-size: 200% 200%;
    -webkit-animation: Animation 5s ease infinite;
    -moz-animation: Animation 5s ease infinite;
    animation: Animation 5s ease infinite;
}

.gradient_static {
    height:100%;
    width:100%;
    background: linear-gradient(90deg, #85539a, #33b7c6, #33b7c6);
    background-size: 200% 200%;
}

@-webkit-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@-moz-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@keyframes Animation { 
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@keyframes imageMovement {
    100% {
        background-position-x: 25000px; /* width of the image */
    }        
}
@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}
.stars, .twinkling, .clouds {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}
.stars {
  background-size:cover;
  background:rgba(0,0,0,0.1) url(../images/stars.webp) repeat top center;
  z-index:0;
}
.clouds{
    background:transparent url(../images/clouds3.webp) repeat top center;
    z-index:3;
  -moz-animation:move-clouds-back 700s linear infinite;
  -ms-animation:move-clouds-back 700s linear infinite;
  -o-animation:move-clouds-back 700s linear infinite;
  -webkit-animation:move-clouds-back 700s linear infinite;
  animation:move-clouds-back 700s linear infinite;
  filter:contrast(7);
  animation-direction: reverse;
}
.outlet {
	background-color:red;
	background-image:url('../images/brujilla.webp');
	background-size:cover;
	background-position:center center;
	padding:40px 20px;
	text-align:center;
	box-shadow:0px 0px 12px rgba(0,0,0,0.3);
}
.exclude {
	background-color:red;
	background-image:url('../images/exclusivos.webp');
	background-size:cover;
	background-position:center center;
	padding:40px 20px;
	text-align:center;
	box-shadow:0px 0px 12px rgba(0,0,0,0.3);
}
.outlet a, .exclude a {
	display: inline-block;
    text-align: center;
    margin: 0 auto;
}
.outlet h2, .exclude h2 {
	font-size:50px;
	line-height:56px;
	color:#fff;
	text-shadow:0px 0px 4px #000;
}
.outlet h3, .exclude h3 {
	font-size:32px;
	line-height:46px;
	color:#fff;
	text-shadow:0px 0px 4px #000;
}
.outlet ul, .exclude ul {
	color:#fff;
	text-shadow:0px 0px 4px #000;
	font-size: 16px;
    line-height: 22px;
}
@media (min-width: 768px) {
	.outlet, .exclude {
		text-align:left;
	}
	
	.outlet a, .exclude a {
		margin: 0px;
	}
}
@keyframes move-background {
  0% {
    background-size: 200vh;
  }
  25% {
    background-size: 210vh;
  }
  50% {
    background-size: 200vh;
  }
  75% {
    background-size: 210vh;
  }
  100% {
    background-size: 200vh;
  }
}

.descubrir {
	width:120px;
   position:absolute;
   bottom:25px;
}

@media (max-width: 768px) {
	.descubrir {
		right:25px;
	}
}