:root {
  /* declare --foo: bar */
  /* use "cssproperty: var(--foo)" to get "cssproperty: bar" */
  --jm-highlight-pink: #ff0028;
  --jm-highlight-purple: #510071;
}

body {
    margin: 0;
    /* padding-top: 111px; */
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 18px;
    /* font-family: 'BenchNine', sans-serif; */
    background-color: #fff;
    color: black;
}

span.busy-indicator {
  position: absolute; 
  top: 10px; 
  right: 10px;
  z-index: 5000;
}

nav {
  padding-top: 10px;
  padding-bottom: 20px;
}

nav a.nav-item {
  color: var(--jm-highlight-purple);
}

footer {
  border-top: solid var(--jm-highlight-pink) 5px;
  font-size: 18px;
  margin-top: 10px;
  padding-top: 20px;
  padding-bottom: 15px;
  background-color: darkgray;
}

footer a:visited,
footer a {
  color: var(--jm-highlight-purple);
  text-decoration: none;
}

footer a:hover {
  color: var(--jm-highlight-pink);
  text-decoration: underline;
}

footer ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

a:hover,
a:visited,
a {
    color: blue;
    text-decoration: none;
}

.legal p {
  text-align: justify;
  text-justify: inter-word;
}

.legal .fas {
  /* display: block;
  margin-left: auto;
  margin-right: auto; */
  width: 50px;
}

.legal a:hover,
.legal a:visited,
.legal a {
  color: var(--kw-text);
  text-decoration: underline;
  font-weight: 900;
}

.legal ul {
  list-style: square;
}

/* .overlapping-heart {
    background-image: "../img/497px-Heart_icon_red_hollow.svg.png"    
} */

div.ooverlapping-heart {
    /* width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center; */

    float: left; 
    position: relative;
    z-index: 2;
  }
  
  div.overlapping-heart > img {
    /* vertical-align: middle;
    z-index: -100; */

    position: absolute; 
    top: 0; 
    right: 0;
    z-index: 0;
  }

  /* .containerdiv {  } 
.cornerimage { position: absolute; top: 0; right: 0; } */

/* SOURCE: https://stackoverflow.com/questions/31669656/css-shapes-with-text-inside-it */
.shape{
    text-align:center;
    background-color:rgba(3,78,136,0.7);
    width:90%;
    height:150px;
    line-height:60px;
    color:white;
    margin:20px auto;
    position:relative;
    /* transform: rotate(-45deg);     */
  }
  .shape:before{
    content:"";
    width:0px;
    height:0px;
    border-top:60px solid rgba(3,78,136,0.7);
    border-left:60px solid transparent;
    position:absolute;
    right:100%;
    top:0px;
  }



/* SOURCE: https://css-tricks.com/examples/ShapesOfCSS/ */
#heart {
position: relative;
width: 100%;
height: 300px;
}
#heart:before,
#heart:after {
position: absolute;
top: 50%;
left: 50%;
margin-left: -30px; /* half img-width - border-radius */
margin-top: -120px; /* half img-height */
content: "";
width: 180px;
height: 240px;
background: red;
-moz-border-radius: 120px 120px 0 0;
border-radius: 120px 120px 0 0;
-webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
     -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
}
#heart:after {
margin-left: -205px; /* img width + margin-left */
-webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
        transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
   -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
     -o-transform-origin: 100% 100%;
        transform-origin :100% 100%;
}

/* SOURCE: https://css-tricks.com/hearts-in-html-and-css/ */
.container-heart {
    position: relative;
    width: 100%;
    height: 300px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: solid 3px blue;
}

.heart {    
    background-color: red;
    display: inline-block;
    height: 200px;
    width: 200px;
    margin: 0 10px;
    position: relative;
    top: 50%;
    left: 50% -100px;
    /* top: 100px;
    left: 150px; */
    transform: rotate(-45deg);    
  }
  
  .heart:before,
  .heart:after {
    content: "";
    background-color: red;
    border-radius: 50%;    
    height: 200px;
    width: 200px;
    position: absolute;    
  }
  
  .heart:before {
    top: -100px;
    left: 0;
    background-color: green;
  }
  
  .heart:after {
    top: 0;
    left: 100px;    
    background-color: blue;
  }