/* html {
  background-color: teal;
} */

#container {
    position: relative;
    width: 300px; 
    height: 250px;
    cursor: pointer;
    overflow: hidden;
    background-color: black;
  }

  #visual {
    width: 300px; 
    height: 250px;
    position: absolute;
    background-image: url("img/visual.jpg");
    background-size: cover; 
    /* background-image: url("backup.jpg");   */
    /* background-color: white; */
  }

  #cta {
    width: 300px; 
    height: 250px;
    position: absolute;
    background-image: url("img/cta.png");   
    background-size: cover;   
  }


  #borders,#logoCta {
    width: 300px; 
    height: 250px;
    position: absolute;
  }

  #whiteBorder {
    fill:none;
    stroke:white;
    stroke-width:1;
  }

  #whiteBorder-redGlow { 
    fill:none;
    stroke:red;
    stroke-width:2;
    filter: url(#red-glow);
  }

  #yellowBorder {
    fill:none;
    stroke:#f4ce31;
    stroke-width:2;
    stroke-dasharray:10 10;
  }



  #logo-red {
    width: 240px; 
    bottom:30px;
    left:30px;
    position: absolute;
    stroke:red;
    fill:none;
    filter: url(#red-glow);
    visibility: visible;   /* hidden  */
  }

  #dashed-logo {
    width: 240px; 
    bottom: 30px;
    left: 30px;
    position: absolute;
    stroke: #f4ce31;
    stroke-dasharray:10 10;
    visibility: visible;
  }

  #mask {
    width: 240px; 
    bottom: 30px;
    left:30px;
    position: absolute;
    fill: aqua;
  }