/* Your CSS starts here */
/* === UNIVERSAL MEDIA PROTECTION === */
img {
  position: relative;
   -webkit-user-select:none;          /* legacy Safari/Chrome */
  -moz-user-select:none;             /* legacy Firefox */
  -ms-user-select:none;              /* legacy IE/Edge */
  user-select:none;                  /* modern browsers - stop Prevent text/image selection  */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events:none;
}
.setWi400{
  width:400px;
  height:400px;
}
.setWib400{
  width:400px;
  height:400px;
  border:1px solid #000;
  border-radius: 6px;
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.3),       /* subtle depth */
    0 8px 20px rgba(55,0,10,0.4),  /* vibrant glow */
    inset 0 0 10px rgba(55,55,255,0.2); /* inner highlight */
  margin-bottom:2rem;
  text-align:center;
}
.tac{
  text-align:center;
}

/* Target Blog Img only - post thumbnail */
.post-image-container img.iconhover {
width:400px;
position:relative;
border: 2px solid #000 !important;
  border-radius: 6px;
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.3),       /* subtle depth */
    0 8px 20px rgba(55,0,10,0.4),  /* vibrant glow */
    inset 0 0 10px rgba(55,55,255,0.2); /* inner highlight */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.post-image-container img.iconhover:hover,.post-image-container:hover img.iconhover {
  transform: scale(1.05);
  box-shadow: 
    0 6px 12px rgba(0,0,0,0.4),
    0 12px 30px rgba(255,0,100,0.6),
    inset 0 0 15px rgba(255,255,255,0.3);
}

/* Base V-Card logo styling */
#thelogo img {
  pointer-events:auto !important;    /* allow link clicks if wrapped in <a> */
  -webkit-user-drag:none;            /* stop drag in WebKit browsers - Chrome, Safari, Edge */
  -webkit-user-select:none;          /* legacy Safari/Chrome */
  -moz-user-select:none;             /* legacy Firefox */
  -ms-user-select:none;              /* legacy IE/Edge */
  user-select:none;                  /* modern browsers - stop Prevent text/image selection  */
  transform: scale(1);               /*  base size */
  transition: transform 0.3s ease;   /* smooth animation */
  -webkit-touch-callout: none;
}

#thelogo img:hover {
  animation: wobble 0.6s ease;       /* Hover wobble */
}
/* Define the wobble keyframes */
@keyframes wobble {
  0%   { transform: scale(1) rotate(0deg); }
  15%  { transform: scale(1.05) rotate(3deg); }
  30%  { transform: scale(1.05) rotate(-3deg); }
  45%  { transform: scale(1.05) rotate(2deg); }
  60%  { transform: scale(1.05) rotate(-2deg); }
  75%  { transform: scale(1.04) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}


/* Click wobble (active state) */
#thelogo img:active {
  animation: wobble 0.6s ease;
}
/* END OF VISiting Card */

/* Video */
video{
  pointer-events:auto;
  position: relative;
}
/* === BLOCK INTERACTION ON NON-BEAM IMAGES === */
img:not(.beam) {
  pointer-events: none;
}
/* === RESTORE INTERACTION FOR LINKED IMAGES === */
a img:not(.beam) {
  pointer-events: auto;
}
/* === RESTORE FULL INTERACTION FOR .beam === */
img.beam, video.beam {
  display: block;
  position: relative;
  pointer-events: auto;
  user-select: auto;
  -webkit-user-drag: auto;
  -webkit-touch-callout: default;
}
/* === INVISIBLE OVERLAY SEAL FOR .beam ONLY === */
/*img.beam::after, video.beam::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /*background: rgba(255, 255, 255, 0.9);*/
  pointer-events: none;
  z-index: 10;
}*/
/*.post-thumbnail a {
  position: relative;
  display: inline-block;
}*/
a img {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  /*outline: 11px dashed red;*/
}


a::after {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  /*outline: 11px dashed red;*/
  background: rgba(255, 255, 255, 0.9);
}


.beam {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: auto; /* keep clickable if wrapped in a link */
}

img.downy {
  display: block;
  pointer-events: none;
  /*user-select: auto;
  -webkit-user-drag: auto;
  -webkit-touch-callout: default;*/
}

/* === BUTTONS DIV & CLASSES - Style for poster-download buttons === */
.download-area {
  display: flex;               
  gap: 20px;                   
  justify-content: center;     
  flex-wrap: wrap;             
}
.download-block {
  padding: 0;                 
  display: flex;               
  flex-direction: column;      
  margin: 15px 0 20px 0;       
  gap: 6px;                    
  align-items: center;         
}
.poster-download {
  position: relative;  
 background: linear-gradient(to bottom,
  rgba(255,255,255,0.5) 20%,
  rgba(255,255,255,0) 50%,
  rgba(255,255,255,0.1) 100%
), #00f;

  display: block;               
  width: auto;                  
  max-width: 300px;             
  /*margin: 10px auto 20px;*/   
  padding: 12px 20px;           
  font-size: 1.6rem;            
  border-radius: 6px;           
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6),
              0 4px 8px rgba(0,0,0,0.3);
  color: #fff;                 
  border: 1px solid #000;      
  cursor: pointer;              
  text-align: center;          
  text-decoration: none;        
}

/* === TEXT ON TOP === */
.texty_butTex {
  position: relative;
  z-index: 100;
  outline: 2px dashed #ff0;
  background:red;
}

.file-size {
  display: block;       /* forces note onto its own line under the button */
  margin-top: 4px;      /* small gap above the note */
  font-size: 0.85em;    /* slightly smaller text than normal */
  color: #666;          /* medium gray for subtle contrast */
  text-align: left;   /* center the note under the button */
}


.poster-download:hover,
.poster-download:focus {
  background: linear-gradient(to bottom,
  rgba(255,255,255,0.5) 20%,
  rgba(255,255,255,0) 50%,
  rgba(255,255,255,0.1) 100%
), #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7),
              0 6px 12px rgba(0,0,0,0.4);
  transform: scale(1.05);
  transition: all 0.3s ease;   /* smooth animation for color + zoom */
  background-color: #003366;   /* even darker on hover */
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.6);  /* green glow shadow */
  color:#fff;
}

/* === ON PHONES MAKE FULL WIDTH === */
/* On phones, make buttons full width */
@media (max-width: 600px) {

.download-area {
    gap: 1px;          /* smaller gap on phones */
    flex-direction: column; /* force vertical stacking */
    align-items: center;    /* keep them centered */
  }

  .download-block {
    margin-top: 10px;       /* small gap above block */
    margin-bottom: 15px;    /* tighter spacing between blocks */
    padding: 0;             /* no inner padding */
  }

  button.poster-download {
    width: 100%;            /* button fills full width */
    max-width: 320px;        /* remove desktop limit */
    margin: 0 0 10px;       /* bottom margin for spacing */
    font-size: 1.8rem;      /* larger text for readability */
  }

  .file-size {
    margin-top: 0;          /* no extra gap above note */
    font-size: 1em;         /* slightly larger caption text */
  }
}



/* === WEBSITE NORMAL CSS NOW FOLLOWS === */


/* All your CSS goes here */
  figure.blogs_centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 33px auto !important;
    padding: 0;
  }

  figure.blogs_centered img {
    width: 100% !important;
    height: auto;
    display: block;
  }
  
  
  
 figure.blogs_centered figcaption.my-cap {
  width: 100%;
  max-width: none;
  display: block;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.95em;
  color: #444;
  font-style: italic;
  margin-top: 0.5em;
  padding: 0 1em;
}
  
  
  figure.blogs_centered figcaption {
  position:relative;
  text-align: center !important;
    width: 100%;
  max-width: none;
  display: block;
  box-sizing: border-box;
  font-size: 0.9em;
  line-height: 1.4;
  color: #555;
  font-style: italic;
  margin-top: 0.5em;
  padding: 0 1em;
}

/* ============================================================
             START of - MARK YELLOW BACKGROUNDS
============================================================ */

    .mark_special{
        background:#ff0;
        border:3px dashed #000;
        color:#fff;
        text-align:center;
        border-radius:8px;
        box-shadow:2px 4px 5px #777;
        display:block;
        padding:0px 12px;
        display: block;
        width: 100%;
        box-sizing: border-box;
        line-height: 1.4;
        word-wrap: break-word;
    }
        .mark_special h2{
        font-size: clamp(18px, 3vw, 28px);
        color:#000;
        }
        
        
       .MarkyMark{
        font-weight:bold;
        border:1px solid #000000;
		border-radius:8px;
        text-align:center;
        text-transform:uppercase;
        font-size:1.4rem;
        line-height:1.5;
        overflow:hidden;
    }
    .MarkyMark a{
    display:block;
    animation:MarkyColWechsel 50s ease-in-out 2 forwards;
    padding:1rem;
    width:100%;
    height:100%;
    }

@keyframes MarkyColWechsel{
	0%{background:#FF00FF;color:#FFFFFF;}
	5%{background:#FF00FF;color:#FFFFFF;}
	20%{background:#FF00FF;color:#FFFFFF;}
	25%{background:orange;color:#000000;}
	45%{background:orange;color:#000000;}
	50%{background:orange;color:#000000;}
	75%{background:orange;color:#000000;}
	80%{background:#0000FF;color:#FFFFFF;}
	85%{background:#0000FF;color:#FFFFFF;}
	95%{background:#0000FF;color:#FFFFFF;}
	100%{background:#0000FF;color:#FFFFFF;}
}
/* ============================================================
             END  of - MARK YELLOW BACKGROUNDS
============================================================ */


        .black{
        color:#000;
        padding:0.5em 1em;
        border:3px dashed #00f;
        box-shadow:2px 3px 5px #f00;
        display: inline-block; /* ensures transform works properly */
        animation: slowPulse 33s ease-in-out infinite;
        color: #000;
        font-weight: bold;
        font-style:normal;
        }
        
        .imblack{
        display: inline-block; /* ensures transform works properly */
        animation: slowPulse 8s ease-in-out infinite;
        }
        
        .mark_special a{
        color:#00f;
        text-decoration: #00f 3px solid underline;
        }
        
        .w90{
        width:90%;
        }
        .bluey_to{
        color:#00f;
        font-style:italic;
        }
        .redey_to{
        color:#f00;
        }
      
      
      



 .icon-phone { 
             color: green !important; 
             margin-right: 15px; 
             }
 .icon-email { 
             color: blue; 
             margin-right: 5px; 
             }
   .icon-doc { 
             color: darkgray; 
             margin-right: 5px; 
             }
        a.callbtn, .email-button, .privacy-button {
            display: inline-flex;
            align-items: center;
            padding: 10px 15px;
            background-color:white !important;
            color: black;
            font-weight: bold;
 	        text-decoration:none;
            border: 2px solid #000 !important;
            border-radius: 5px;
            transition: 0.3s ease;
            padding-left:22px !important;
        }
     .callbtn:hover, .email-button:hover, .privacy-button:hover {
            background-color: beige;
        }
	a .phoNum{
	color:#00f;
	margin-left: 5px;
	border-bottom:1px solid #00f;
	}
.nextEvents{
	color:#f00;
	background:#ff0;
	border:3px dashed #000;
}
.phone_tapToCall_padding{
	margin-top:-25px;
	margin-left:9px;
}
.footLinksBlus {
    text-decoration:underline 2px #00f !important;
    color:red !important;
}




.page-id-38 h1.entry-title {
    text-align: left !important;
}



/* ============================================================
    START of - MAIN PAGE - H3-H4-H5 Fomt Sizes
============================================================ */


h3.h3main_page,
h4.h4main_page,
h5.h5main_page,
h6.h6main_page,
p.p1main_page,
p.p2main_page,
p.p3main_page,
p.p4main_page,
p.p5main_page,
p.p6main_page,
p.p7main_page{
    font-size: 2rem;
	color:#00f;
	font-weight:bold;
	margin-top:4rem;
	text-align:center;
	line-height:1.6;
}

p.p6_upper{
    margin-top:-6rem;
}

p.main_dundydo{
    margin-top:-1rem !important;
}
a.main_a_contact{
    border-bottom:3px solid #00f;
}

p.main_glyphes{
     padding:0;
     font-size: 3rem; 
     margin: 0.3rem 0 1rem 0; 
     text-align: center;
     /*border:1px solid red;*/
     width:auto;
}

span.trik_trak{
    font-size:8rem;
}
span.trik_trak_zwei{
    font-size:6rem;
}

/* ============================================================
    END of - MAIN PAGE - H3-H4-H5 Fomt Sizes
============================================================ */

/* ============================================================
    START of - MAIN BLOG PAGE - TITLES
============================================================ */

.blog .entry-title,
.blog .entry-summary,
.blog .entry-content {
    text-align: left;
}

/* ============================================================
    END of - MAIN BLOG PAGE - TITLES
============================================================ */


/* ============================================================
    START of - ABOUT PAGE - H3-H4-H5 Fomt Sizes
============================================================ */

h3.h3bachata-about,
h4.h4bachata-about,
h5.h5bachata-about,
h6.h6bachata-about,
p.latin-counts{
    font-size: 2rem;
	color:#00f;
	font-weight:bold;
	margin-top:4rem;
	text-align:center;
}

p.latin-counts_2{
    font-size: 2rem;
	color:#00f;
	font-weight:bold;
	margin-top:8rem;
	text-align:center;
}

/* ============================================================
       END of - ABOUT PAGE - H3-H4-H5 Fomt Sizes
============================================================ */



/* ============================================================
   BLOG LAYOUT ENHANCEMENTS – added June 2025 by Sir Paul & Coppy
   Includes image centering, caption styling, blockquotes, and float helpers
============================================================ */

/* 1. Default image centering for blog content */
figure.blogs_centered {
  display: flex;
  flex-direction: column; /* ⬅️ Stack vertically */
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  outline:1px soid red !important;
}

figure.blogs_centered img {
  width: 100% !important;
  height: auto;
  display: block;
min-width:90% !important;
  margin:0 auto;
}
/* ----------------------------------------
   ALIGNMENT HELPERS FOR BLOG IMAGES
   Use these to manually float images left/right 
   when needed instead of default centered alignment
---------------------------------------- */

/* 2. Optional alignment overrides */
.align-left {
  float: left;
  margin: 0 1.5em 1em 0;
}

.align-right {
  float: right;
  margin: 0 0 1em 1.5em;
}

/* ----------------------------------------
   IMAGE CAPTION STYLE
   Add <p class="caption"> under images
---------------------------------------- */
/* 3. Styled image captions (used with <p class="caption">) */
.caption {
  text-align: center;
  font-size: 0.9em;
  color: #666;
  margin-top: 0.5em;
  font-style: italic;
}

/* 4. Optional soft frame for images */
.framed {
  border: 1px solid #ddd;
  padding: 5px;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.05);
}

/* 5. Elegant blockquote styling */
blockquote {
  font-style: italic;
  color: #555;
  border-left: 4px solid #ccc;
  padding: 1em 1.5em;
  margin: 1.5em 0;
  background: #f9f9f9;
}


.post img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.wp-block-image.aligncenter,
figure.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.wp-block-image.aligncenter img {
  display: block;
  margin: 0 auto;
}



/* ============================================================
   FOOTER WIDGET BUTTONS – added July 2025 by Sir Coppy & Paul
   Includes tip tools & images
============================================================ */
 .phone_button {
        position:relative;
        left:1em;
        display: inline-flex;
        min-width: 260px;         /* Ensures the button doesn’t shrink too small */
        /*max-width: 390px;*/     /* Prevents overflow on mobile */
        width: auto;              /* Shrinks or grows to fit the content */
        align-items: center;
        gap: 1em;
        padding: 0.6em 0.1em 0.6em 2.8em;
        background: #fff;
        color: #000;
        border: 1px solid #000;
        border-radius: 6px;
        font-weight: bold;
        text-decoration: none;
        transition: background 0.3s;
        box-shadow: 0 4px 6px rgba(145, 45, 120, 0.3); /* subtle shadow */
        transition: box-shadow 0.3s ease-in-out;
        margin:0;
        /*margin-bottom:0.4em;*/
}
     .phone_button:hover {
       background-color: #b2f2bb;
       color: #004d40;
       scale:1.08;
       transition: all 0.5s ease-in-out;
}
.site-footer a {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* subtle shadow */
  transition: box-shadow 0.3s ease-in-out;
  border-radius: 4px; /* optional for rounded corners */
}

.site-footer a:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 255, 0.45); /* stronger on hover */
}


    .footercol1 .phone_icon {
       width: 2em;
       height: auto;
       flex-shrink: 0;
       margin-left:-1.3em;
       margin-right:0.6em;
}
   .phone_text {
      display: inline-block;
}
    .blu {
      color: #00f;
}
   .red_hyph {
      color: #f00; /* Or red, your call! */
}
   .more{
      width:3em; 
}
   .undy{
      text-decoration:underline solid #00f 2px;
}


 .tooltip-text{
              display:none;
              }



/* ============================================================
              What 3 Words
============================================================ */

a.undyblu{
   position:relative;
   text-decoration: none; 
   /*border-bottom: 2px solid #00f;    
   padding-bottom: 2px;*/
}



.underline-wrap {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    box-sizing: border-box;
	 
}

.underline-svg {
    width: 100%;
    height: 100%;
    position: absolute; 
    top: 0; 
    left: 0; 
}

.underline-line {
    stroke-width: 2;
    stroke: blue;
    animation: runway 12s linear infinite;
}

@keyframes runway {
    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 100 0;
    }
    30% {
        stroke-dashoffset: -60;
        stroke-dasharray: 20 2;
    }
    50% {
        stroke-dashoffset: -60;
        stroke-dasharray: 20 2;
    }
   60% {
        stroke-dashoffset: 0;
        stroke-dasharray: 100 0;
    }
   100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 100 0;
    }
}
}

/* ============================================================
              What 3 Words
============================================================ */




/* ============================================================
   FOOTER WIDGET BUTTONS TOOLTIP – added July 2025 by Sir Coppy & Paul
   Includes tip tools & images
============================================================ */

.tooltip-text {
  position: absolute;
  top: -55px; /* Adjust as needed for alignment */
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 999;
  pointer-events: none;
}

.phone_button:hover .tooltip-text,
.phone_button:focus .tooltip-text {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}

.tooltip-text::after {
  content: "";
  position: absolute;
  top: calc(100% - 2px); /* Tucks arrow neatly into tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

@keyframes slowPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05); /* scale up by 5% */
  }
  100% {
    transform: scale(1);
  }
}


.mehr_padd{
	padding:1rem 2rem 0 2rem;
}
.pudy2{
	padding-bottom:1rem;
}
a.spacy{
	margin: 0 1rem;
	line-height:1.9;
}
.lht{
	line-height:1;
}
.leftx{
	text-align:left;
}
a.marb{
	margin-bottom:.7rem;
	display:block;
}
.move-higher{
	margin-top:-5rem;
}
.headExMarg{
	margin:-4rem auto 0 auto;
	width:88%;
}



/* ============================================================
              H2 TITLES ON EVERY PAGE
============================================================ */

.entry-title,body.home h2,.Headers-other,h5.Headers-other,.h6.Headers-other {
  font-size:2.5rem !important;
  padding:0;
  display: inline-block;
  color: black; /* final resting state */
  opacity: 0;   /* start invisible for fade-in */
  -webkit-text-stroke: 0.5px black; /* crisp black outline */
  text-stroke: 0.5px black;         /* future-proof */
  animation:
    sparrowFadeIn 1s ease forwards,
    sparrowGlow 33s ease-in-out forwards;
    line-height:1.3;
    text-align:left;
}



h5.redyRed,h6.redyRed {
  font-size:2.5rem !important;
  padding:0;
  display: inline-block;
  color:#FF0000 !important;
  opacity: 0;
  -webkit-text-stroke: 0.5px black;
  text-stroke: 0.5px black;
  animation:
    sparrowFadeIn 1s ease forwards,
    sparrowGlow 33s ease-in-out forwards;
    line-height:1.3;
    text-align:left;
}


/* ============================================================
          START SPAN CLASS HALF in the H2 TITLES
============================================================ */

.nostroke {
   -webkit-text-stroke:0; /* crisp black outline */
   text-stroke:0;         /* future-proof */
   font-weight:bold;
}


/* ============================================================
          END of SPAN CLASS HALF in the H2 TITLES
============================================================ */

/* ============================================================
              H2 TITLES ON MAIN PAGE
============================================================ */

body.home h2{
    padding:1rem;
  animation:
    sparrowFadeIn 1s ease forwards,
    sparrowGlow 33s ease-in-out forwards;
    /*backCol 4.7s ease-out 0.5s forwards;*/
}
@keyframes sparrowFadeIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes sparrowGlow {
  0%   { color: black; }
  20%   { color: black; }
  25%  { color: #ff6600;}   /* orange */
  45%  { color: #ff6600;}   /* orange */
  50%  { color: #0000ff;}   /* teal */
  70%  { color: #0000ff;}   /* teal */
  75%  { color: #ff00aa; }   /* magenta */
  95%  { color: #ff00aa; }   /* magenta */
  100% { color: black; }
}
@keyframes backCol {
  0%   { background:#fff;}
  50%  { background:#000;-webkit-text-stroke: 1px #fff; color:#fff;}
  80%  { background:#000;-webkit-text-stroke: 1px #fff;color:#fff; } 
  100%  { background:#fff; } 
}

/* ============================================================
             END of H2 TITLES ON MAIN PAGE
============================================================ */

/* ============================================================
             END of H2 TITLES ON EVERY PAGE
============================================================ */



/* ============================================================
    START of WES & MEL FLAME ANIMATION - SPAN
============================================================ */     
      
      
.torch-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.fx-title {
  font-size: 3em;
  position: relative;
  z-index: 1;
  color: black;
  text-shadow: 1px 1px 0 white;
  -webkit-text-stroke: 1px #f0f;
}

.torch-glow {
  position: absolute;
  top: 0;
  left: 0%;
  height: 100%;
  width: 100%;
  background: linear-gradient(120deg, rgba(255,255,0,0.2), rgba(255,255,255,0.5), rgba(255,0,0,0.2));
  z-index: 2;
  pointer-events: none;
  animation: sweepTorch 4s linear infinite;
  mix-blend-mode: screen;
  filter: blur(4px);
  outline: 2px dashed red;
}


@keyframes sweepTorch {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}



.entry-title {
  text-align: center;
  /*outline: 1px dashed lime;*/
}



@keyframes slideInTopLeft {
  0% {
    transform: translate(-100%, -100%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes colorFlow {
  0%   { color: #000000; }
  20%  { color: #000000; }
  25%  { color: #0000FF; }
  45%  { color: #0000FF; }
  50%  { color: #FF00FF; }
  75%  { color: #FF00FF; }
  80%  { color: #0000FF; }
  95%  { color: #0000FF; }
  100% { color: #000000; }
}

@keyframes halfwayPulse {
  0%, 49% {
    transform: scale(1);
  }
  /*50% {
    transform: scale(1.5);
  }*/
  51%, 100% {
    transform: scale(1);
  }
}

@keyframes lightbulbSweepRTL {
  0%   { left: 100%; }
  100% { left: -50%; }
}

@keyframes pulseGlow {
  0%, 100% {
    text-shadow: 0 0 6px rgba(0,119,182,0.4), 0 0 12px rgba(0,180,216,0.3);
  }
  50% {
    text-shadow: 0 0 12px rgba(0,119,182,0.6), 0 0 24px rgba(0,180,216,0.4);
  }
}


.wesmel_flame {
  font-size: clamp(30px, 5vw, 35px);
  font-weight: bold;
  display: inline-block;
  text-align: left;
  position: relative;

  color: #a2d2ff;
  transform: scale(1);
  opacity: 1;
  transition: transform 0.3s ease-in-out;

  -webkit-text-stroke: 1px #000;
  /*text-shadow: 0 0 6px rgba(255,105,0,0.4), 0 0 12px rgba(255,0,0,0.4);*/

  animation:
    slideInTopLeft 14s ease-out forwards,
    colorFlow 28s ease-in-out forwards,
    halfwayPulse 14s ease-in-out forwards;
}

.wesmel_flame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  animation: lightbulbSweepRTL 7.5s ease-in-out forwards;
}

/*.pulseOnHover:hover {
  animation: pulseGlow 2.5s ease-in-out infinite;
  cursor: pointer;
}*/


/* ============================================================
    END of WES & MEL FLAME ANIMATION - SPAN
============================================================ */



.gulSchild {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  font-size: 2.5rem;
  font-weight: bold;
  -webkit-text-stroke: 1px black;
}

.gulSchild .word {
  opacity: 0;
  transform: scale(0.8);
  animation: wordReveal 1s ease forwards;
}

.gulSchild .word:nth-child(1) { animation-delay: 0s; }   /* Gulval */
.gulSchild .word:nth-child(2) { animation-delay: 3.2s; } /* Village */
.gulSchild .word:nth-child(3) { animation-delay: 6.4s; } /* Hall */

@keyframes wordReveal {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.2); } /* scale up like a beat */
  100% { opacity: 1; transform: scale(1); }   /* settle back to normal */
}


.gulSchild2 {
  display: inline-block;
  position: relative;
  opacity: 0;
  transform: translateX(100%);   /* start off-screen right */
  -webkit-text-stroke: 1px black;
  animation: hallSlide 4s ease-out forwards;
}

@keyframes hallSlide {
  0%   { opacity: 0; transform: translateX(100%); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); } /* rests centered */
}


.gulSchild3 {
  text-align: center; /* keeps the h3 centered on the page */
	overflow: hidden;  
}

.gulSchild3 .slideWrapper {
  display: inline-block;
  overflow: hidden;          /* curtains */
  white-space: nowrap;       /* prevent line wrap during slide */
}

.gulSchild3 .slideText {
  display: inline-block;
  opacity: 0;
  transform: translateX(100%);   /* start off-screen right */
  -webkit-text-stroke: 1px black;
  animation: hallSlide3 12s ease-out forwards;
}

@keyframes hallSlide3 {
  0%   { opacity: 0; transform: translateX(100%); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); } /* text rests centered */
}


/* ============================================================
             TEXT COLORS
============================================================ */
.rot{
color:#f00;
font: bold 1.5rem Arial, sans-serif;
-webkit-text-stroke:1px #fff;
  font-weight: 600;
  font-size: 2.5rem;
}

.yel{
color:#ff0;
font: bold 2rem Arial, sans-serif;
-webkit-text-stroke:1px #fff;
}


.schwarzy{
  color:#000;
}

.bluey{
  color:#00f;
}


/* ============================================================
             END of TEXT COLORS
============================================================ */


.DanceTeacherLatin-footer a{
  text-decoration:underline;
  text-decoration-color:#00f;
  color:#000;
}



/* =================== CHRISTMAS VIDEO =================== */
.ft-video-wrap {
  position: relative;
  width: 320px;
  height: 180px; /* change this to the exact height you want */
  overflow: hidden;
  background: #000;
}

.ft-video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block;
	pointer-events: auto; 
}



/* =================== Footer Phone email Buttons =================== */
.phone_button {
  display: inline-flex;        /* align icon + text */
  align-items: center;         /* vertical centering */
  justify-content: center;
  min-height: 48px;            /* set a consistent height */
  padding: 8px 16px;           /* adjust spacing */
  box-sizing: border-box;
}
.email_button{
  padding: 18px 16px !important;
}


/* =================== 2026 What 3 Words Location =================== */
.upyup{
	margin-top:-4rem;
}
h3.kle{
	font-size:2.1rem;
	border:2px solid #000;
	padding:1.5rem 0;
	animation:slowy 33s ease 5 forwards;
	background:#ffffff;
}
.centy{
	text-align:center;
	font-size:2rem;
}
@keyframes slowy{
	0%{
		box-shadow:3px 3px 11px #cdedef;
		transform:scale(1);
	}
	50%{
		box-shadow:3px 3px 11px teal;
		transform:scale(1.03);
	}
	100%{
				box-shadow:3px 3px 11px #cdedef;
		transform:scale(1);
	}
}

/* =================== End of 2026 What 3 Words Location =================== */


/* Tablet & small laptops */
@media (min-width: 768px) {
  .phone_button {
    width: auto;        /* shrink to fit content */
    display: inline-flex;
    align-items: center;
    gap: 8px;           /* space between icon and text */
    padding: 8px 16px;
    font-size: 0.95rem;
  }
  .email_button{
  padding: 18px 16px !important;
}
}

/* Larger laptops & desktops */
@media (min-width: 1200px) {
  .phone_button {
    font-size: 1.1rem;  /* slightly larger text */
    padding: 10px 20px;
    max-width: 300px;   /* cap width so it doesn’t stretch too far */
  }
  .email_button{
  padding: 18px 16px !important;
}
}


/* =================== Start of 2026 - EVENTS PAGE SETUP LINKS =================== */

/* Base list styling */
.events-list-numbered {
  position:relative;
  counter-reset: event-counter;
  list-style: none;
  margin: 1.5em 0;
  border:1px solid #000000;
	overflow:hidden;
	padding:0 0 33px 0;
}

/* Each item */
.events-list-numbered li {
   margin: 0;
	 box-sizing:border-box;
	border-left:6px solid transparent;
  counter-increment: event-counter;
  position:relative;
	left:0px;
	right:0px;
  padding: 18px 16px 18px 70px; /* extra space between number + text */
  border-bottom: 1px solid #000000;
  transition: border-left 0.2s ease, background 0.2s ease;
	width:102%;
}

/* Number styling */
.events-list-numbered li::before {
  content: counter(event-counter) "";
  position: absolute;
  left: 15px; /* moves number rightwards */
  top: 20px;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 1.3rem;
  color: #FFFF00;
	background:#FF0000;
	border:#000000 1px solid;
  border-radius:50%;
	padding:0 6px;
	pointer-events: none;
	font-family:Arial,Tahoma;
}

/* Alternating backgrounds */
.events-list-numbered li:nth-child(odd) {
  background: #fafafa;
}

.events-list-numbered li:nth-child(even) {
  background: #f0f0f0;
}
.events-list-numbered li:last-of-type {
  border-bottom:none;
}

/* Hover left border (desktop only) */
@media (hover: hover) {
  .events-list-numbered li:hover {
    border-left: 6px solid #FF0000;
    background: #ADD7EC;
  }
}

/* Link styling */
.events-list-numbered li a {
	display:block;
	line-height:1.9;
  text-decoration-line: underline; 
	text-decoration-color: #0000FF; 
	text-decoration-thickness: 2px; 
	/* makes the underline clearly visible */ text-decoration-skip-ink: none; 
	/* optional: prevents gaps around letters */ 
	padding: 18px 45px 18px 60px;
  color: #0000FF !important;
  font-weight: 600;
	background:transparent;
	height:100%;
	width:100% !important;
	display:block;
	position:absolute;
	top:0;
	right:0;
  bottom:0;
	left:0px;
}

.events-list-numbered li a:hover {
  text-decoration-color: #FF0000; 
}

/* Excerpt text */
.events-list-numbered .event-excerpt {
	position:relative;
  margin: 69px 0 0 0;
  color: #000000;
  font-size: 1.45rem;
	pointer-events:none;
}

.events-list-numbered p.footer-frame{
	margin:0;
	padding:0;
	color:#ffff00;
	text-align:center;
	font-size:1.95rem;
	line-height:33px;
	height:33px;
	width:100%;
	box-sizing:border-box;
	background:#7A2E22;
	position:absolute;
	right:0px;
	bottom:0px;
	left:0px;
}
/* =================== END of 2026 - EVENTS PAGE SETUP LINKS =================== */