/* Popup close button */

:root {
    --color: #f03861;
    --color2: #A3A3A3;
    --bg-color: #fff;
    --bg-color3: #E9E9E9;
    --bg-color2: rgba(0, 0, 0, 0.3);
  }

  .close-button-2 {
    height: 50px;
    width: 50px;
    position: relative;
    box-sizing: border-box;
    line-height: 50px;
    display: inline-block;
    border: solid 0 var(--bg-color3);
    border-radius: 50px;
    transition: all 0.25s ease-out;
    margin-bottom: 20px;
    float: left;
    background-color: var(--bg-color3);
    cursor: pointer;
  }
  
  .close-button-2:before {
    transform: rotate(-45deg);
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -2px;
    margin-left: -13px;
    display: block;
    height: 4px;
    width: 25px;
    background-color: var(--color2);
    transition: all 0.25s ease-out;
    border-radius: 30px;
  }
  
  .close-button-2:after {
    transform: rotate(-135deg);
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -2px;
    margin-left: -13px;
    display: block;
    height: 4px;
    width: 25px;
    background-color: var(--color2);
    transition: all 0.25s ease-out;
    border-radius: 30px;
  }
  
  .close-button-2:hover {
    border: solid 25px var(--color2);
  }
  
  .close-button-2:hover:before {
    transform: rotate(45deg);
  }
  
  .close-button-2:hover:after {
    transform: rotate(-45deg);
  }
  
  .close-button {
    height: 50px;
    width: 50px;
    position: relative;
    box-sizing: border-box;
    line-height: 50px;
    display: inline-block;
    border: solid 0 var(--bg-color);
    border-radius: 50px;
    transition: all 0.25s ease-out;
    margin-bottom: 20px;
    float: left;
    cursor: pointer;
  }
  
  .close-button:before {
    transform: rotate(-45deg);
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -2px;
    margin-left: -13px;
    display: block;
    height: 4px;
    width: 25px;
    background-color: var(--color);
    transition: all 0.25s ease-out;
    border-radius: 30px;
  }
  
  .close-button:after {
    transform: rotate(-135deg);
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -2px;
    margin-left: -13px;
    display: block;
    height: 4px;
    width: 25px;
    background-color: var(--color);
    transition: all 0.25s ease-out;
    border-radius: 30px;
  }
  
  .close-button:hover {
    border: solid 25px var(--color);
  }
  
  .close-button:hover:before {
    transform: rotate(45deg);
  }
  
  .close-button:hover:after {
    transform: rotate(-45deg);
  }
  
  .v4 {
    /* background-color: var(--bg-color2); */
    border: 0;
  }
  
  .v4:hover {
    background-color: var(--bg-color2);
    border: 0;
  }