/* custom AV by: h3xce */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');


body {background: #fff; color: #000423; font-family: 'Rubik', sans-serif;}
html, body { overflow-x: hidden; width: 100%; }

h1 h2 h3 h4 h5 h6 {font-weight: bolder!important;}
header {background: #FBFBFB; padding: 1.5rem 0;}
.bg-light {background: #FBFBFB !important;}
.centrar {text-align: center;}

.logoTop { max-width: 50%;}
a.cta {background: #FBFBFB; color: #845EEC !important; -webkit-border-radius: 10px 10px 10px 10px !important;
border-radius: 10px 10px 10px 10px !important; border-color: #845EEC; border: solid 1px #845EEC;}

.moradito {color: #845EEC;}

.hero {background: url("../img/invitame-invitaciones-bodas.png") #845EEC top right no-repeat; padding: 60px 0; color: #fff;}
.hero h1 {margin-bottom: 40px; margin-top: 20px;}
.hero h1 span { font-size: 29px; display: block;}
.hero a { background: #E57AC3; padding: 14px 40px; text-decoration: none; color: #fff; font-size: 19px; font-weight: 700; margin-top: 100px;
  display: inline-block;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 6px 6px 0 0 #CC67AC;
box-shadow: 6px 6px 0 0 #CC67AC;}
.hero a:hover { background: #CC67AC; text-decoration: none; color: #fff; font-size: 19px; font-weight: 700;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 6px 6px 0 0 #E57AC3;
box-shadow: 6px 6px 0 0 #E57AC3;}

.hero-invitaciones {background: url(../img/bg-circulos.svg) #91DCE8 center no-repeat; background-size: contain; padding: 60px 0; color: #201D4F;}
.hero-invitaciones h1 {margin-bottom: 40px; margin-top: 20px;}
.hero-invitaciones h1 span { font-size: 29px; display: block;}
.hero-invitaciones a { background: #845EEC; padding: 14px 40px; text-decoration: none; color: #fff; font-size: 19px; font-weight: 700;
  display: inline-block; width: 264px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 6px 6px 0 0 #542ac7;
box-shadow: 6px 6px 0 0 #542ac7;}
.hero-invitaciones a:hover { background: #9876f6; text-decoration: none; color: #fff; font-size: 19px; font-weight: 700;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 6px 6px 0 0 #E57AC3;
box-shadow: 6px 6px 0 0 #542ac7;}
.hero-invitaciones img { max-width: 60%;}

.tachao {text-decoration:line-through;}

.hero-precios {background: url(../img/bg-circulos-precios.svg) #A2F8D2 center no-repeat; background-size: contain; padding: 60px 0; color: #201D4F;}
.hero-precios h1 {margin-bottom: 40px; margin-top: 20px;}
.hero-precios h1 span { font-size: 29px; display: block;}
.hero-precios a { background: #E57AC3; padding: 14px 40px; text-decoration: none; color: #fff; font-size: 19px; font-weight: 700; display: block; border: none;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 6px 6px 0 0 #CC67AC;
box-shadow: 6px 6px 0 0 #CC67AC;}
.hero-precios a:hover { background: #CC67AC; text-decoration: none; color: #fff; font-size: 19px; font-weight: 700;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 6px 6px 0 0 #E57AC3;
box-shadow: 6px 6px 0 0 #E57AC3;}
.hero-precios img { max-width: 60%;}

.card-title-bg {background: #9C7EEF; color: #fff; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; padding: 10px 0 0 0;}

.card { border: solid 1px #845EEC; width: 20rem;}
.card-body {-webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; }

.hero-solicitar {background: #845EEC center no-repeat; background-size: contain; padding: 60px 0; color: #fff;}
.hero-solicitar h1 {margin-bottom: 40px; margin-top: 20px;}
.hero-solicitar h1 span { font-size: 29px; display: block;}
.hero-solicitar a { background: #E57AC3; padding: 14px 40px; text-decoration: none; color: #fff; font-size: 19px; font-weight: 700; display: inline-block; border: none;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 6px 6px 0 0 #CC67AC;
box-shadow: 6px 6px 0 0 #CC67AC;}
.hero-solicitar a:hover { background: #CC67AC; text-decoration: none; color: #fff; font-size: 19px; font-weight: 700;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 6px 6px 0 0 #E57AC3;
box-shadow: 6px 6px 0 0 #E57AC3;}
.hero-solicitar img { max-width: 60%;}

.callToAction { background: #F7CB59; padding: 3rem 0;} 
.callToAction h1 { font-size: 29px; color: #201D4F; font-weight: 700; margin-top: 13px; text-align: right;}
.callToAction a { background: #E57AC3; padding: 14px 40px; text-decoration: none; color: #fff; font-size: 19px; font-weight: 700;
  display: inline-block;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 6px 6px 0 0 #CC67AC;
box-shadow: 6px 6px 0 0 #CC67AC;}
.callToAction a:hover { background: #CC67AC; text-decoration: none; color: #fff; font-size: 19px; font-weight: 700;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 6px 6px 0 0 #E57AC3;
box-shadow: 6px 6px 0 0 #E57AC3;}

small { font-size: 9px;}
/* whatsapp */
#whatsapp {
  position: fixed;
  bottom: 20px;
  right:20px;
  z-index: 999999;
}
svg { width: 80px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));}

circle {
  fill: #25d366;
}
path {
  fill: #fff;
}
/* **** */

.subtitle { font-size: 29px;}

.transitions {-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
-ms-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;}

.phoneHome {max-width: 300px;}

.miniSlider { background: url("../img/circulos.png") no-repeat center #FAECC7; padding: 40px 40px 40px 1.5rem;}
.toque { background: url("../img/elipseRojo.png") #F7CB59 no-repeat 390px 340px; padding: 4rem; color: #201D4F;}

.esMas { background: url("../img/circulo-amarillo.png") #F0A79D no-repeat 80px 410px; padding: 4rem; color: #201D4F;}
.esMasPic { background: url("../img/chica-contenta@2.png"); background-size: cover;}

a.pink {background: #E57AC3;
    padding: 14px 40px;
    text-decoration: none;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -webkit-box-shadow: 6px 6px 0 0 #cc67ac;
    box-shadow: 6px 6px 0 0 #cc67ac;}

a.pink:hover { background: #CC67AC;  text-decoration: none; color: #fff; font-size: 19px; font-weight: 700;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 6px 6px 0 0 #E57AC3;
box-shadow: 6px 6px 0 0 #E57AC3;}

.ecoFriendly { background: #A2F8D2; color: #032323; padding: 40px 1.5rem 40px 40px; color: #201D4F;}
.ecoFriendly img { max-width: 200px;}

.bottom { background: #845EEC; color: #fff; padding: 40px 1.5rem 40px 40px; color: #201D4F;}
.logoBottom { margin-top: 50px; width: 222px;}

footer {background: #201D4F; color: #845EEC; padding: 30px 0 10px 0;}
footer a {color: #845EEC; margin-left: 20px;}

.pushbottom2Rem { margin-bottom: 2rem;}

/* Spinner */

#spin {
  color: yellow;
}
#spin:after {
  content:"";
  animation: spin 3s linear infinite;
}
@keyframes spin {
  0% { content:"Bodas"; }
  10% { content:"XV Años"; }
  20% { content:"Fiestas"; }
  30% { content:"Guateques"; }
  40% { content:"Eventos de oficina"; }
  50% { content: "Pedidas de mano"; }
  60% { content: "Sociales"; }
  70% { content: "Pachanga"; }
  80% { content: "Rumba"; }
  90% { content: "Graduaciones"; }
  100% { content: "Fin de año"; }
}




.word {
  font-size:3em;
  font-weight:bold;
  opacity:0;
  position: absolute;
  width: 100%;
  text-align: center;
}

.w1 {
  -webkit-animation: w1anim 20s infinite;
          animation: w1anim 20s infinite;
}

.w2 {
  -webkit-animation: w2anim 20s infinite;
          animation: w2anim 20s infinite;
}

.w3 {
  -webkit-animation: w3anim 20s infinite;
          animation: w3anim 20s infinite;
}

.w4 {
  -webkit-animation: w4anim 20s infinite;
          animation: w4anim 20s infinite;
}

.w5 {
  -webkit-animation: w5anim 20s infinite;
          animation: w5anim 20s infinite;
}



@-webkit-keyframes w1anim {
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  20% {
    opacity:0;
  }
}



@keyframes w1anim {
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  20% {
    opacity:0;
  }
}


@-webkit-keyframes w2anim {
  20%{
    opacity: 0;
  }
  30%{
    opacity: 1;
  }
  40% {
    opacity:0;
  }
}


@keyframes w2anim {
  20%{
    opacity: 0;
  }
  30%{
    opacity: 1;
  }
  40% {
    opacity:0;
  }
}

@-webkit-keyframes w3anim {
  40%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  60% {
    opacity:0;
  }
}

@keyframes w3anim {
  40%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  60% {
    opacity:0;
  }
}

@-webkit-keyframes w4anim {
  60%{
    opacity: 0;
  }
  70%{
    opacity: 1;
  }
  80% {
    opacity:0;
  }
}

@keyframes w4anim {
  60%{
    opacity: 0;
  }
  70%{
    opacity: 1;
  }
  80% {
    opacity:0;
  }
}

@-webkit-keyframes w5anim {
  80%{
    opacity: 0;
  }
  90%{
    opacity: 1;
  }
  100% {
    opacity:0;
  }
}

@keyframes w5anim {
  80%{
    opacity: 0;
  }
  90%{
    opacity: 1;
  }
  100% {
    opacity:0;
  }
}


/* Fixes */



@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    margin-right: 50px; }
}

@media (max-width: 600px) {
    .navbar-light .navbar-brand {
        color: rgba(0,0,0,.9);
        display: contents;
    }
    .cta { text-align: center;}
    .dropdown-menu.show {display: block;margin-bottom: 20px;}

}