/* general styling */

:root {
  --font-family: system-ui;

  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

  --clr-primary-300: hsl(219, 76%, 55%);
  --clr-primary-400: hsl(219, 76%, 40%);
  --clr-primary-500: hsl(219, 76%, 25%);
  --clr-secondary-300: hsl(269, 75%, 55%);
  --clr-secondary-400: hsl(269, 75%, 40%);
  --clr-secondary-500: hsl(269, 75%, 25%);
  --clr-accent-300: hsl(358, 72%, 65%);
  --clr-accent-400: hsl(358, 72%, 50%);
  --clr-accent-500: hsl(358, 72%, 35%);

  --clr-1: #052b2f;
  --clr-2: #073438;
  --clr-3: #0e4b50;
  --clr-4: #2d8f85;
  --clr-5: #637c54;
  --clr-6: #0036d0;
  --clr-7: #ffffff;
}

.purpgrade {
  background: linear-gradient(
    135deg,
    hsla(259, 80%, 33%, 1) 16%,
    hsla(263, 88%, 36%, 1) 52%,
    hsla(268, 100%, 42%, 1) 86%
  );
  color: #ddd;
}


/*Has statements*/
/* Div Has Fun if needed
div:has(h1) {
    background-color: tan;

}
div:has(p) {
    background-color: #002020;

}
div:has(p:empty) {
    background-color: firebrick;

}
div:has(card) {
    background-color: firebrick;

}*/

/* scroll bar and cursor hidden*/

/*html {
  cursor: none;
  overflow: hidden;
}/*


/* text demo */
.image-text {

  background-image: url("../assets/img/mandala2.art.2023-260x260.gif");
  background-size: 200%;
  background-position: center;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  line-height: 1.4;
  font-family: 'Roselyn', serif;
  font-size: 3.5rem;
  padding-left: 0em;
  margin-left: 0em;
  padding-right: 0em;
  margin-right: 0em;


 text-shadow: 1px 1px 1px rgba(0,0,0,0.20),
 1px 1px 1px rgba(255,255,255,0.1),
  1px 1px 1px rgba(255,255,255,0.1),
              1px 3px 3px rgba(225.73, 255.59, 245.04,0.20),
              0 2px 2px rgb(225.73, 105.59, 245.04, 0.20), 
              0 4px 4px rgba(0,0,0,0.40),
              0 8px 8px rgba(0,0,0, 1.58),
              1px 14px 14px rgba(255,0,255,0.58),
              0px 16px 16px rgba(0,0,0,1.80);
            
             

}
.image-text2 {

  background-image: url("../assets/img/mandala2.art.2023-260x260.gif");
  background-size: 50%;
  background-position: center;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  line-height: 1.4;
  font-family: 'Roselyn', serif;
  font-size: 4.5rem;
  padding-left: 5em;
  margin-left: -5em;
  padding-right: 5em;
  margin-right: -5em;
 text-shadow: 0 1px 1px rgba(0,0,0,0.12), 
              0 2px 2px rgba(0,0,0,0.12), 
              0 4px 4px rgba(0,0,0,0.12), 
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);

}

.gradient-text {
  background-image: linear-gradient(90deg, red, blue);
  background-clip: text;
  color: transparent;
  font-size: var(--fs-700);
  font-weight: 900;
 
  line-height: 1.5;
}

.page-title {
  text-shadow: 2px 2px 0 var(--clr-accent-400),
    4px 4px 0 var(--clr-secondary-400), 6px 6px 0 var(--clr-primary-400);
}

.gradient-text2 {
  background-image: linear-gradient(90deg, red, blue);
  background-clip: text;
  color: transparent;
  font-size: 8rem;
  font-weight: 900;
  line-height: 1.5;
}

.page-title2 {
  text-shadow: 2px 2px 0 var(--clr-7),

    4px 4px 0 var(--clr-secondary-400), 6px 6px 0 var(--clr-primary-300);
  }
/*My page title*/
.page-title2 {
  color: tan;
  text-align: center;
  font-size: var(--fs-900);
  line-height: 1.05;
  text-transform: uppercase;
  font-weight: 900;
}

.page-title2 > span {
  position: relative;
}

.page-title2 > span > span {
  position: absolute;
  width: max-content;
  bottom: 0.725em;
  right: -7ch;
  rotate: -8deg;

  text-transform: none;
  font-weight: 300;
  font-size: 0.325em;
  font-family: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual,
    cursive;
}


/* demo hr */


/* demo button 
.btn {
  display: inline-block;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--clr-primary-500);
  text-decoration: none;
  background: white;
  padding: 0.75em 2.5em;

  border: 4px solid transparent;
  outline: 3px solid currentColor;
  outline-offset: -6px;

  transition: 500ms;
}

.btn:hover,
.btn:focus {
  color: white;
  outline-offset: 0px;
  background: var(--clr-primary-400);
  border-color: var(--clr-primary-300);
  box-shadow: inset 0 0 0 5px var(--clr-primary-400),
    inset 0 0 0 10px var(--clr-primary-500);
}*/
/* demo page title */

.page-title span span {
  text-shadow: 0 0 0;
}
.page-title { 
text-shadow: 
2px 2px 0 var( --bs-info-text-emphasis),
4px 4px 0  var(--bs-warning-text-emphasis),
6px 6px 0  var(--bs-danger-text-emphasis);


 }

 /* demo link effects */
.fancy-link-1 {
  text-decoration: none;
  background-image: linear-gradient(90deg, red, blue, yellow);
  background-size: 0% 3px;
  background-position: left 1.4em;
  background-repeat: no-repeat;
  padding-block-end: 0.25em;
  transition: color 500ms, background-size 500ms;
}

.fancy-link-1:hover,
.fancy-link-1:focus {
  color: white;
  background-size: 100% 3px;
}

.fancy-link-2 {
  text-decoration: none;
  background-image: linear-gradient(90deg, red, blue 50%, currentColor 50%);
  background-size: 200% 3px;
  background-position: right 1.4em;
  background-repeat: no-repeat;
  padding-block-end: 0.25em;
  transition: color 500ms, background-position 500ms;
}

.fancy-link-2:hover,
.fancy-link-2:focus {
  color: white;
  background-position: left 1.4em;

}

.fancy-link-3 {

  text-decoration: none;
  /*background-image: linear-gradient(90deg, red, blue 50%, currentColor 50%);*/
  background-size: 200% 3px;
  background-position: right 1.4em;
  background-repeat: no-repeat;
  padding-block-end: 0.25em;
  transition: color 500ms, background-position 500ms;
}

.fancy-link-3:hover,
.fancy-link-3:focus {
  color: #f0a2fc;
  background-position: left 1.4em;

}


/*}

body {
  margin: 0;
  color: #ddd;
  font-family: var(--font-family);
  font-size: var(--fs-400);
  line-height: 1.6;
  padding-block: 6rem;
}*/



/*My page title*/
.page-title {
  color: white;
  text-align: center;
  font-size: var(--fs-900);
  line-height: 1.05;
  text-transform: uppercase;
  font-weight: 900;
}

.page-title > span {
  position: relative;
}

.page-title > span > span {
  position: absolute;
  width: max-content;
  bottom: 0.725em;
  right: -7ch;
  rotate: -8deg;

  text-transform: none;
  font-weight: 300;
  font-size: 0.325em;
  font-family: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual,
    cursive;
}

.section-title {
  font-size: var(--fs-800);
  line-height: 1.1;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


/* Auto Columns*/
.columns { 
/*user setting */
--min-column-size: 200px;
--column-count:4;

--gap: 2rem;

/*calculations */
--breakpoint: calc(var(--min-column-size) * var(--column-count) + (var(--gap) * (var(--column-count) - 1 )) );
--column-size: calc((100% / var(--column-count)) - var(--gap));

display: grid;
gap: var(--gap);

 grid-template-columns: repeat(
    auto-fit, 
    minmax(
        min( max(var(--column-size), (100% - var(--breakpoint)) * -999 ), 100%),
        1fr)
);

}


#dgreenback {
 background: hsl(209, 50%, 18.75%);



       }
       


#seethrough {
 background: transparent;



       }

video .nonprof {
  object-fit: cover;
 position: absolute;
 isolation:isolate;
top:0;
  right: 0;
  bottom: 0;
  width: min(390ch, 100% - 4rem);
  margin-bottom:0;
  height: 300cqi;
  width: 300cqi;
  z-index: -1;
       }

video.sampback {
  object-fit:cover;

 isolation:isolate;
  top:-2rem;
  right: 0;
  bottom: 0;
  width: min(390ch, 100% - 0rem);
  margin-bottom:10px;
  height: 100%;
  width: 100%;
  /* height: 100cqi;
  width: 100cqi;*/
  z-index: -1;
}

video.backz2 {

  object-fit:cover;
  position: fixed;
  isolation:isolate;
  top:0;
  left: 0;
  right:0;
  bottom:0;
   width: min(390ch, 100% - 1rem);
  z-index: -1;
  height: 100%;
  width: 100%;
}



/* Main Accordion*/
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 500ms;
}

.accordion-content[aria-hidden="false"] {
  grid-template-rows: 1fr;
}

.accordion-content > div {
  overflow: hidden;
}
/*neon glass button*/
.glassbuttn{
  /* background styles */
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: darkgreen; /*for compatibility with older browsers*/
  background-image: linear-gradient(darkgreen,lightgreen);
 border: 0.2rem solid #8d9f00;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

  /* text styles */
  text-decoration: none;
  color: white;
  font-size: 25px;
  font-family: sans-serif;
  font-weight: 100;

  border-radius: 2rem;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
}
.glassbuttn:after{
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 5px);
  height: 48%;
  background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
  border-radius: 1rem;
 
  text-shadow: 0px -1px #333;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);


}
.glassbuttn:hover
{
  background: linear-gradient(#6d1cc3,#0fa);
  border: 0.2rem solid #9f9f9f;
   -webkit-transform: scale(0.98, 0.98);
  transform: scale(0.98, 0.98);
}


.glassbuttn:hover::after {
    opacity: 1;
}
/*GLASS BOX EFFECT*/

.glassBox1 {
  &, & * { box-sizing: border-box; transition: 400ms; }
  width: 100%;
  height: 400px;
  max-width: 300px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-right-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
  padding: 15px;
  position: relative;
  @include flex-center;
  flex-direction: column;
  &__imgBox {
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
  &__title {
    text-align: center;
    margin-top: 15px;
    color: #FFF;
    font-size: 20px;
    font-weight: 400;
    font-family: "Lato";
  }
  &__content {
    position: absolute;
    right: 15px; bottom: 15px; left: 15px;
    text-align: center;
    color: #FFF;
    font-size: 14px;
    font-family: "Lato";
    letter-spacing: .1em;
    opacity: 0;
  }
  &:hover &__imgBox {
    transform: translateY(-50px);
  }
  &:hover &__imgBox img {
    transform: translate(-20px, -40px) rotate(-15deg) scale(1.4);
  }
  &:hover &__title {
    //margin-top: 40px;
  }
}
/* other styles 

body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}*/
section {
  padding-block: 1rem;
  /*background: lightblue;*/
}
.diagonalback {
    background-image:linear-gradient(45deg,
        #12c2e9,
        #c471ed,
        #f64f59);
    position:relative;
    isolation:isolate;
      
   }
.diagonalgrey {
    background-image:linear-gradient(45deg,
        #05313b,
        #280739,
        #3d0307);
       position:relative;
    isolation:isolate;
      
   }
.diagonalwavy {

    position:relative;
    isolation:isolate;
    padding:1rem;
    background-image:linear-gradient( to right,
        #05313b,
        #280739,
        #05313b);
       
     --mask:
    radial-gradient(65.74px at 50% 88.50px,#000 99%,#0000 101%) calc(50% - 60px) 0/120px 51% repeat-x,
    radial-gradient(65.74px at 50% -58.5px,#0000 99%,#000 101%) 50% 30px/120px calc(51% - 30px) repeat-x,
    radial-gradient(65.74px at 50% calc(100% - 88.50px),#000 99%,#0000 101%) calc(50% - 60px) 100%/120px 51% repeat-x,
    radial-gradient(65.74px at 50% calc(100% + 58.50px),#0000 99%,#000 101%) 50% calc(100% - 30px)/120px calc(51% - 30px) repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
      
   }
      /*mask wave created with https://css-generators.com/wavy-shapes/*/
    .wavy {

      position: relative;

      background: linear-gradient(
        to right,
        #00f260,
        #0575e6);

  --mask:
    radial-gradient(65.74px at 50% 88.50px,#000 99%,#0000 101%) calc(50% - 60px) 0/120px 51% repeat-x,
    radial-gradient(65.74px at 50% -58.5px,#0000 99%,#000 101%) 50% 30px/120px calc(51% - 30px) repeat-x,
    radial-gradient(65.74px at 50% calc(100% - 88.50px),#000 99%,#0000 101%) calc(50% - 60px) 100%/120px 51% repeat-x,
    radial-gradient(65.74px at 50% calc(100% + 58.50px),#0000 99%,#000 101%) 50% calc(100% - 30px)/120px calc(51% - 30px) repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}
    
   
      /*mask wave created with https://css-generators.com/wavy-shapes/*/
    .arrowback {

      position: relative;
border-radius: 5rem;
width:100%;
      background: linear-gradient(
        to right,
        #00fffd,
        #0575e6,
        white);


  
}
.wrapper {
  width: min(390ch, 100% - 0.5rem);
  margin-inline: auto;

 
   }

.glasssquare {
  /*background: #121212;*/
  color: #effeef;
  padding: 1rem;
background: rgba(0, 101.1, 159.38, 0.65);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(95.625, 196.73, 255, 0.52);
  border-right-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
    background-color: rgba(207.19, 207.19, 207.19, 0.04);

}
  

.accordion {
  /*background: #121212;padding: 1rem;*/
  color: #effeef;
  padding:0;
background: rgba(0, 101.1, 159.38, 0.65);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(95.625, 196.73, 255, 0.52);
  border-right-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
    background-color: rgba(207.19, 207.19, 207.19, 0.04);

}

.accordion-panel {
  padding: 0rem;
  border: 0px solid green;
   
}

.accordion h2 {
  position: relative;
}

  .hero { 

  container-type: size;
  background-color: var(--clr-neutral-900);
  background-image: var(--gradient-1);
  background-blend-mode: mulitply;
  padding: 5rem 0;
  height:80vh 
}
  .hero-title { 
    color: var(--clr-primary-300);
    font-size: clamp(2.875ren, 25cqb + 0.5rem, 5rem);
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 0.25em;
}
.hero-img {
    height: 80cqb;
    box-shadow: 3px 3px 25px 5px rgba(0, 0,0,0);
}
.hero-text { 
    line-height: 1.7;
    margin: 0 0 1.5em;

}

  .hero-mojo { 

  container-type: size;
  background-color: var(--clr-neutral-900);
  background-image: var(--gradient-1);
  background-blend-mode: mulitply;

 padding: 5rem 0;
  height:60vh 

}
.hero-img-mojo {
height: 50cqb;
    box-shadow: 3px 3px 25px 5px rgba(0, 0,0,0);
   
}
.article__title { 
 color: hsl(250 75% 80%);
  margin:0;
  margin-block-end:5rem;
 }
 .article__subtitle { 
    margin: 0;
     margin-block-end:5rem;
    font-size:1.75rem;
    font-weight:600;

}
 .article__title:has(+ .article__subtitle) { 
    color:lime;
   

 }
 .article__title:not(:has(+ .article__subtitle)) { 
    color:pink;
   margin-block-end:5rem;

  }
 
.image-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 50rem;
  margin-inline: auto;
}

.image-gallery > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;

  transition: scale 350ms ease, opacity 350ms linear;
}

.image-gallery:has(img:hover) img:not(:hover) {
  scale: 0.8;
  opacity: 0.7;
}
/*A main page sizing that is responsive*/

.superpage {

  container-type:inline-size;
  margin-inline:auto;
  width:100%;
  padding:1rem;
  border:5px solid hsl(0 0% 95% / 0.9 );
  font-size: 5cqi;
   
 }
 .container[data-type="narrow"] {
 	max-width: 350px;
 }

 .container[data-type="medium"] {
 	max-width: 600px;
 }
 .container[data-type="wide"] {
 	max-width: 850px;
  }

.superpage p {

  padding: 0.5em;
  background: var(--clr-primary-300);
  color:var(--clr-neutral-100);
  font-size: 5cqi;
   
 }
 @container (min-width: 375px) { 
 	.superpage p  {
 	}
 }
 @container (min-width: 625px) { 
 	.superpage p  {
 	}
 }
 /*Call to Action sizing*/
 .call-to-action {
 	display:grid;
 	gap: 1rem;
 	background-image:var(--gradient-2);
 	padding:10cqi;
 }
.call-to-action > :where(h1, h2, h3) {
color:red;
line-height:1.1;
font-size: clamp(2.5rem, 10cqi + 0.5rem, 5rem);
 }
 .call-to-action > * {
 	margin:0;
 }
 @container (inline-size >= 700px) {
 	.call-to-action > :not(.btn) {
 		grid-column: 1 / 2;
 	}
.call-to-action > .btn {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
	align-self: center;
}
 /* My custom cards*/

 .card { 
    box-shadow: 0 0 1rem rgb(0 0 0 / 0.2);

  }
  /*.card:has(.video) {
    display: grid;
    grid-template-columns: 150px 1fr;
    }*/
  .card:has(.img) {
    display: grid;
    grid-template-columns: 150px 1fr;
     }
  .card:has(.icon) {
    padding:1rem;
   }
    
  .card:has(.icon) > .card__content {
    padding:0;
   }
  .card__content {
    padding:1rem;
  }

}
 /* The Spinning Mandalas*/
.mandala_swirl {
position: relative;

}
 #bigman {
     opacity: 0.8;
  position: absolute;
margin: 0 auto;

	 top: 15px;
     right: 0;
     bottom: 0;
     left: 0;
    width:260px;
    
 }
 /* MY layered mandalas - Blue Mandala*/
 #bluman{
     opacity: 0.9;
     position: absolute;
    margin: 0 auto;
	 top: 87px;
     right: 0;
     bottom: 0;
     left: 0;
     width:120px;
    
 }
 /* MY layered mandalas - Main Mandala*/
 #smallman {
     opacity: 1;
     position: absolute;
     margin: 0 auto;
 top: 120px;
     right: 0;
     bottom: 0;
     left: 0;
    width:53px;
    
  
 }
 /* MY layered mandalas - Rainbow splash*/
 #rays {
   opacity: 1; 
   position: absolute; 
 margin: 0 auto;
	 top: 30px;
     right: 0;
     bottom: 0;
     left: 0;
   width:320px;
   
    
 }
 /* MY layered mandalas*/
 #sunbutta {
   position: absolute;
    margin: 0 auto;
 top: 45px;
     right: 0;
     bottom: 0;
     left: 0;


 }
 
 
 @keyframes spinning {
     from {
         transform: rotate(0deg)
     }
     to {
         transform: rotate(-360deg)
     }
 }
 .spinr {
     animation-name: spinning;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     /* linear | ease | ease-in | ease-out | ease-in-out */
     animation-timing-function: linear;
 }
 .fade-out-img {
     animation: myfadeout 4s;
 }
 @keyframes myfadeout {
     0% {
         opacity: 1;
     }
     100% {
         opacity: 0;
     }
 }
 .myspin {
     animation: myspin 2s infinite linear
 }
 @keyframes myspin {
     0% {
         transform: rotate(0deg)
     }
     100% {
         transform: rotate(359deg)
     }
 }
 /* Added second spin */
 
 .myspin2 {
     animation: myspin 4s infinite linear
 }
 @keyframes myspin2 {
     0% {
         transform: rotate(0deg)
     }
     100% {
         transform: rotate(359deg)
     }
 }
 .myanimate-fading {
     animation: fading 7s infinite
 }
 @keyframes fading {
     0% {
         opacity: 0
     }
     50% {
         opacity: 1
     }
     100% {
         opacity: 0
     }
 }
 .myanimate-opacity {
     animation: opac 0.9s
 }
 @keyframes opac {
     from {
         opacity: 0
     }
     to {
         opacity: 1
     }
 }
 
 .myanimate-fading-slo {
     animation: fading 11s infinite
 }
 @keyframes fading {
     0% {
         opacity: 0
     }
     50% {
         opacity: 1
     }
     100% {
         opacity: 0
     }
 }
 .myanimate-opacity {
     animation: opac 0.9s
 }
 @keyframes opac {
     from {
         opacity: 0
     }
     to {
         opacity: 1
     }
 }
 /* My Custom Made Button for Entrance Page */
 .btn-my {
    position: absolute;
   content: hidden;
   border: 0px solid black;

 }
 
 /* My Custom Made Button for Entrance Page */
 .btn-my::before {
   

    
border-radius: 50rem;
 }
 
 .btn-my:hover, 
 .btn-my:focus
 {
 
   width:13rem;
    height:13rem;
 
  opacity: 0.8;
  background-image: url("../assets/img/sun_nav2.png");
  background-size: cover;
  background-position: center;

border-radius: 50rem;
 }
 
 /* My Button for Entrance Page */
 #touch {
position: absolute;

margin: 0 auto;
right:0;
top:1em;
 left:0;
width:45%;

 }
 .hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  /*background-color: black;*/
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  /*position: absolute;*/
  z-index: 1;
  /*left: 0;
  top: 110%;*/
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}


/*# sourceMappingURL=bootstrap.min.css.map */