/**
Theme Name: Party Maker
Author: Nora Ferreirós
Author URI: http://en.noraferreiros.com/
Description: A child theme created by a designer for party purposes.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: party-maker
Template: twentytwentyfour
*/

.gradient-text{
 background: -webkit-linear-gradient(330deg, #F89012 26%, blue 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
 strong{
 font-weight:600;
 }
 
.hero-subtitle-margin{
margin-top:-24px!important;}

.meetjd-margin{
margin-top:-32px!important;
margin-left:48px!important;
}

.iconlink svg:hover path {
    fill: blue;
}

#soundcloud{
     background-image: url('../../uploads/2024/10/wave.svg');
     background-position: center center, 50%, 50%;
     background-repeat: no-repeat;
 }

#soundcloud iframe{
    display: flex;
    justify-content: center;
}



#soundcloud p{
        margin-top:-30px;
    }

@media only screen and (max-width: 767px) {
    #soundcloud p{
        margin-top:0;
    }
    #soundcloud h2{
    line-height:1 !important;
}
}

/*-- MARGEN NEGATIVO --*/
.negative-margin{
    margin-top:-28px;
}
@media only screen and (max-width: 768px) {
.negative-margin{
    margin-top:-12px;
}
    
}

/*-- TEXTO QUE GIRA EN UN CÍRCULO --*/
.circle-rotation { position: relative;width: 100%; padding-bottom: 100%; overflow: hidden; }

.circle-rotation text { font-family: var(--wp--preset--font-family--xband-rough); font-size: 1.17em;}

.circle-rotation svg { position: absolute; left: 0; top: 0; width: 100%; height: 540px;

  -webkit-animation-name: rotate;
     -moz-animation-name: rotate;
      -ms-animation-name: rotate;
       -o-animation-name: rotate;
          animation-name: rotate;
  -webkit-animation-duration: 5s;
     -moz-animation-duration: 5s;
      -ms-animation-duration: 5s;
       -o-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
       -o-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
       -o-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

@-webkit-keyframes rotate {
    from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate {
    from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*-- ANIMACIÓN DE TEXTO LATERAL --*/

/* -----------------------------------------------------
   Basic Reset & Global Styles
----------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.text-horizontal-animation {
  display: flex;
  flex-direction: column;
  color: #333;
}

/* The outer container — holds everything in place */
.marquee {
  position: relative;
  width: 100%;
  min-height: 20vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* The moving "track" that slides left to right */
.marquee__track {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
  animation: marquee-scroll 60s linear infinite;
}

/* Animation: moves the track smoothly across the screen */
@keyframes marquee-scroll {
  fomt {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Each block of repeated content (we duplicate it in HTML) */
.marquee__content {
  display: inline-flex;
  flex-shrink: 0; /* Prevents shrinking */
}

/* The list and items inside the marquee */
.marquee__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Base style for all items */
.marquee__item {
  padding: 0 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image-specific item */
.marquee__item--image {
  width: 5rem;
}

/* Image formatting */
.marquee__item--image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text item formatting */
.marquee__item--text p {
  font-family: var(--wp--preset--font-family--xband-rough); 
  font-size: 10rem;
  font-weight: 900;
  text-transform: uppercase;
  background: orange;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
  white-space: nowrap;
  opacity: .6;
  word-spacing: -24px;
}

/*-- ANIMATED GRADIENT BACKGROUND --*/
section-body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/*-- IMG GALLERY --*/
.ghostkit-custom-TArHQ img{
  aspect-ratio: 1.554 !important;
}

/*-- BUTTON HOVER --*/

:active, :hover, :focus {
  outline: 0!important;
  outline-offset: 0;
}
::before,
::after {
  position: absolute;
  content: "";
}

.btn {
  position: relative;
  display: inline-block;
  width: auto; height: auto;
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0px 25px 15px;
  min-width: 150px;
}

.btn span {         
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  top: 0; left: 0;
  width: 100%;
  padding: 15px 20px;
  transition: 0.3s;
}


.btn.hover-border-2::before,
.btn.hover-border-2::after {
  width: 10%; height: 25%;
  transition: 0.35s;
}
.btn.hover-border-2::before {
  bottom: 0; left: 0;
  border-left: 1px solid orange;
  border-bottom: 1px solid orange;
}
.btn.hover-border-2::after {
  top: 0; right: 0;
  border-right: 1px solid orange;
  border-top: 1px solid orange;
}
.btn.hover-border-2:hover::before,
.btn.hover-border-2:hover::after {
  width: 99%;
  height: 99%;
}

/*-- TEXT ANIMATION --*/

div.first-text-animation, div.second-text-animation {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  font-family: var(--wp--preset--font-family--xband-rough);
  font-size: 5em;
  color: white;
}

div.text-animation-container{
  margin: 0 auto;
  max-width: 1200px;
  text-align: center;
}

div.first-text-animation {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 7s infinite;
}

div.second-text-animation {
  width:0px;
  animation: reveal 7s infinite;
}

div.second-text-animation span{
  margin-left:-840px;
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-1000px; }
    20% { margin-left:-1000px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:840px;}
    80% {opacity:1;}
    100% {opacity:0;width:840px;}
}

@media (max-width: 768px) {
div.first-text-animation, div.second-text-animation{
  font-size: 2em;
  display: block;
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:100%;}
    80% {opacity:1;}
    100% {opacity:0;width:100%;}
}
}

/*-- STRIP IMG MARGIN CORRECTION --*/

.img-margin img{
  margin-bottom:-2px;
}

@media (max-width: 768px) {
.wp-container-core-cover-is-layout-639b5052 > .alignfull {
  margin-left:0;
  margin-right: 0;
}
}

/*-- SOUNDCLOUD IFRAME --*/
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width: none;
}