/***************		Slideshow container		***************/


.slideshow-container {
  width: 100%;
  height: 100vh;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  background: transparent;
}

.mySlides {
  width: 100%;
  height: 100vh;
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  bottom: 0;
  font-family: 'Varela Round', sans-serif;
  color: #f5f5f5;

  animation: 1.8s fade;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 45%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #d5d5d5;
  text-shadow: -1px 1px 1px #164B5E;
  font-weight: bold;
  font-size: 1em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
}

.PuntosSlider {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin: 30px 0 0;
  text-align: center;
  margin: 0;
  background: transparent;
  opacity: 0.5;
  bottom: 20px;
  position: absolute;
  animation: slidebottom 2.8s;
  z-index: 5000;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}



.Decoration {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}



/* ******************   ALINEACION :: SLIDER   ******************** */



.MaskLeft {
  /*  SLIDE :: LEFT  */
  width: 100%;
  height: auto;
  margin: 0;
  padding: 30px 0 0 10%;
  text-align: left;
  background: transparent;
  position: absolute;
  bottom: 20%;

}

.MaskCenter {
  /*  SLIDE :: CENTER  */
  width: 80%;
  height: 100%;
  position: relative;
  top: 40vh;
  margin: 0 auto;
  padding: 0 0 0 0;
  text-align: center;


}

.MaskRight {
  /*  SLIDE :: RIGHT  */
  width: 100%;
  height: auto;
  margin: 0;
  text-align: right;
  padding: 30px 10% 0 0;

  position: absolute;
  bottom: 20%;
  background: transparent;

}

 




/***************  GRADIENT :: SLIDERS ***************/

.template {
  width: 100%;
  height: 100%;
  margin: 0;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#638093+15,638093+15,ddf1f9+65,feffff+100&1+0,0.9+15,1+100 */
  background: -moz-linear-gradient(top, rgba(99, 128, 147, 1) 0%, rgba(99, 128, 147, 0.96) 15%, rgba(221, 241, 249, 0.5) 55%, rgba(254, 255, 255, 0.9) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(99, 128, 147, 1) 0%, rgba(99, 128, 147, 0.96) 15%, rgba(221, 241, 249, 0.5) 55%, rgba(254, 255, 255, 0.9) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(99, 128, 147, 1) 0%, rgba(99, 128, 147, 0.96) 15%, rgba(221, 241, 249, 0.5) 55%, rgba(254, 255, 255, 0.9) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#638093', endColorstr='#feffff', GradientType=0);
  /* IE6-9 */

}


.DarkNight {
  width: 100%;
  height: 100%;
  margin: 0 0 0;
  padding: 0;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1c2226+0,23538a+100&1+0,0.8+38,0.7+58,0.6+95 */
  background: -moz-linear-gradient(top, rgba(28, 34, 38, 1) 0%, rgba(31, 53, 76, 0.8) 38%, rgba(32, 63, 96, 0.7) 58%, rgba(35, 81, 133, 0.6) 95%, rgba(35, 83, 138, 0.6) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(28, 34, 38, 1) 0%, rgba(31, 53, 76, 0.8) 38%, rgba(32, 63, 96, 0.7) 58%, rgba(35, 81, 133, 0.6) 95%, rgba(35, 83, 138, 0.6) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(28, 34, 38, 1) 0%, rgba(31, 53, 76, 0.8) 38%, rgba(32, 63, 96, 0.7) 58%, rgba(35, 81, 133, 0.6) 95%, rgba(35, 83, 138, 0.6) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c2226', endColorstr='#9923538a', GradientType=0);
  /* IE6-9 */

}

.BlueMask {
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 1;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#43a1c6+0,356aa0+100&1+0,0.96+20,0.96+50,0.96+80,0.96+100 */
  background: -moz-linear-gradient(45deg, rgba(67, 161, 198, 1) 0%, rgba(64, 150, 190, 0.96) 20%, rgba(60, 134, 179, 0.96) 50%, rgba(56, 117, 168, 0.96) 80%, rgba(53, 106, 160, 0.96) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, rgba(67, 161, 198, 1) 0%, rgba(64, 150, 190, 0.96) 20%, rgba(60, 134, 179, 0.96) 50%, rgba(56, 117, 168, 0.96) 80%, rgba(53, 106, 160, 0.96) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, rgba(67, 161, 198, 1) 0%, rgba(64, 150, 190, 0.96) 20%, rgba(60, 134, 179, 0.96) 50%, rgba(56, 117, 168, 0.96) 80%, rgba(53, 106, 160, 0.96) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#43a1c6', endColorstr='#f5356aa0', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */


}

.Dark {
  width: 100%;
  height: 100%;
  margin: 0 0 0;
  padding: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3f4c6b+0,050a0f+99&0.9+0,0.98+100 */
  background: linear-gradient(45deg, rgba(63, 76, 107, 0.9) 0%, rgba(5, 10, 15, 0.98) 99%, rgba(5, 10, 15, 0.98) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

.BlueToLight {
  width: 100%;
  height: 100%;
  margin: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,80edc6+100&0.8+0,0.8+100 */
  background: -moz-linear-gradient(-45deg, rgba(30, 87, 153, 0.8) 0%, rgba(128, 237, 198, 0.8) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(30, 87, 153, 0.8) 0%, rgba(128, 237, 198, 0.8) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(30, 87, 153, 0.8) 0%, rgba(128, 237, 198, 0.8) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc1e5799', endColorstr='#cc80edc6', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */


}


/*********** effects from *************/

.LightToOrange {
  width: 100%;
  height: 100%;
  margin: 0 0 0;
  padding: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00b7ea+0,fc9300+100&0.7+0,0.7+100 */
  background: -moz-linear-gradient(45deg, rgba(0, 183, 234, 0.7) 0%, rgba(252, 147, 0, 0.4) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, rgba(0, 183, 234, 0.7) 0%, rgba(252, 147, 0, 0.4) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, rgba(0, 183, 234, 0.7) 0%, rgba(252, 147, 0, 0.4) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b300b7ea', endColorstr='#b3fc9300', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */

}


.OrangeToBlue {
  width: 100%;
  height: 100%;
  margin: 0 0 0;
  padding: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fc9300+0,004370+100&0.7+0,0.7+100 */
  background: -moz-linear-gradient(45deg, rgba(252, 147, 0, 0.7) 0%, rgba(0, 67, 112, 0.7) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, rgba(252, 147, 0, 0.7) 0%, rgba(0, 67, 112, 0.7) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, rgba(252, 147, 0, 0.7) 0%, rgba(0, 67, 112, 0.7) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3fc9300', endColorstr='#b3004370', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */

}

/***********************/

.Sunny1 {
  width: 100%;
  height: 100%;
  margin: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff920a+0,fc4b4b+100&0.5+0,0.8+100 */
  background: -moz-linear-gradient(45deg, rgba(255, 146, 10, 0.5) 0%, rgba(252, 75, 75, 0.8) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, rgba(255, 146, 10, 0.5) 0%, rgba(252, 75, 75, 0.8) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, rgba(255, 146, 10, 0.5) 0%, rgba(252, 75, 75, 0.8) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ff920a', endColorstr='#ccfc4b4b', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */

}




/***************  BACKGROUNDS :: SLIDERS ***************/

/* INDEX :: HOME */

/*    BACKGROUNDS :: SLIDERS    */
.bgs1 {
  background-image: url('/mx/img/bgUs.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  transition: background-color 1s ease;
  margin: 0;
  height: auto;
  padding: 0;
}

/* EVENTOS */
.bg21 {

  background-image: url('/mx/img/bg21.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  transition: background-color 1s ease;
  margin: 0;
  padding: 0;
}

.bg22 {

  background-image: url('/mx/img/bgs22.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: background-color 1s ease;
  margin: 0;
  padding: 0;
}

.bg23 {

  background-image: url('/mx/img/bgs23.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: background-color 1s ease;
  margin: 0;
  padding: 0;
}

/* STANDS */

.bgs31 {
  /*SLIDER 3 :: SLIDE STANDS  :: 1 */

  background-image: url('/mx/img/s31.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  transition: background-color 1s ease;
  margin: 0;
  padding: 0;
}

.bgs32 {
  /*SLIDER 3 :: SLIDE STANDS  :: 2 */
  background-image: url('/mx/img/bgs32.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  transition: background-color 1s ease;
  margin: 0;
  padding: 0;
}

.bgs33 {
  /*SLIDER 3 :: SLIDE STANDS  :: 3 */
  background-image: url('/mx/img/s3.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  transition: background-color 1s ease;
  margin: 0;
  padding: 0;
}

/* ARTICULOS PROMO */

.bgp1 {
  /*SLIDER 4 :: SLIDE ARTICULOS PROMO  :: 1 */
  background-image: url('/mx/img/p6.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  margin: 0;
  padding: 0;
  transition: background-color 1s ease;
}

.bgp2 {
  /*SLIDER 4 :: SLIDE ARTICULOS PROMO  :: 1 */
  background-image: url('/mx/img/p7.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  margin: 0;
  padding: 0;

}


.bgp3 {
  /*SLIDER 4 :: SLIDE ARTICULOS PROMO  :: 1 */
  background-image: url('/mx/img/wall.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
  transition: background-color 1s ease;
}


/* EDECANES */

.bg51 {
  /* EDECANES */
  background-image: url('/mx/img/bg51.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
}

.bg52 {
  background-image: url('/mx/img/bg52.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
}

/****************** SLIDER TEXT ************************/

 


/*************** SliderButton ****************/

.SliderButton {
  width: auto;
  height: 60px;
  line-height: 60px; 
  margin: 20px auto;
  padding: 0 50px;
  color: #fff;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
  font-size: 1rem;
  font-family: 'Varela Round', sans-serif;
  letter-spacing: 0.1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  transition: 0.5s;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00b7ea+0,8eccce+100 */
  background: #00b7ea;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #00b7ea 0%, #8eccce 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #00b7ea 0%, #8eccce 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #00b7ea 0%, #8eccce 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea', endColorstr='#8eccce', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */

}


.SliderButton:hover {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00b7ea+0,8eccce+100 */
  background: #8eccce;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #8eccce 0%, #00b7ea 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #8eccce 0%, #00b7ea 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #8eccce 0%, #00b7ea 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8eccce', endColorstr='#00b7ea', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */

  -webkit-box-shadow: 0px 0px 20px -3px rgba(54, 153, 199, 1);
  -moz-box-shadow: 0px 0px 20px -3px rgba(54, 153, 199, 1);
  box-shadow: 0px 0px 20px -3px rgba(54, 153, 199, 1);

}