#page   {background-color: White; text-shadow: 1px 1px 0 #9fe2ef;}
#page .section {float: left; width: 100%;} /* border:2px solid #6a3341; JJ Aug 2022 */
#page .section > .left {float: left; width: 100%; margin: 0; padding: 0;}
#page .section > .right {float: left; width: 40%; min-height: 248px; background-color: silver; color: White; margin-left: 3px; display: none;}

#page .section .details {}
#page .section .details a {color: dimgray;}
.image {display: none;}
.left_no {float: left; width: 39%; text-align: right; padding: 5px 3px 5px 0;}
.left {float: left; width: 40%; text-align: center; margin-top: 7px; padding: 5px 0 5px 0;}
.right {float: right; width: 60%; text-align: left; padding: 5px 0 5px 0;}
.full {float: left; width: 100%; text-align: center; padding: 5px 0 5px 0;}
.space {float: left; width: 100%; height: 30px;}
.full_gray {float: left; width: 99%; text-align: center; padding: 5px 0 5px 5px; background-color: whitesmoke; text-align: left; margin-top:10%;}

h1      {background-color: white; padding: 10px 0 10px 10px; text-align: left;}
h2      {padding: 10px 0 10px 10px; text-align: left;}

.buttons { margin-top: 2px;}

  .modalBackground
    {
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
    }
    
        .modalPopup2
    {
        background-color: #FFFFFF;
        width: 600px;
        height: 300px;
        border: 3px solid #0DA9D0;
        border-radius: 12px;
        padding:0
      
    }
    .modalPopup
    {
        background-color: #FFFFFF;
        width: 300px;
        border: 3px solid #0DA9D0;
        border-radius: 12px;
        padding:0
      
    }
    .modalPopup .header
    {
        background-color: #2FBDF1;
        height: 30px;
        color: White;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
    .modalPopup .body
    {
        min-height: 50px;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
    }
    .modalPopup .footer
    {
        padding: 6px;
    }
    .modalPopup .yes, .modalPopup .no
    {
        height: 23px;
        color: White;
        line-height: 23px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
    }
    .modalPopup .yes
    {
        background-color: #2FBDF1;
        border: 1px solid #0DA9D0;
    }
    .modalPopup .no
    {
        background-color: #9F9F9F;
        border: 1px solid #5C5C5C;
    }

@media screen and (min-width: 150px) and (max-width: 549px) 
{
    
.center {width: 99%;}
.footer .text {width: 99%;}

    #page .section > .left {width: 100%;}
    #page .section > .right {width: 100%; margin: 0;}
    
    .left_no {width: 100%; text-align: center;}
    .left {width: 100%; text-align: center;}
    .right {width: 100%; text-align: center;}
}

@media screen and (min-width: 550px) and (max-width: 767px)
{
    
.center {width: 99%;}
.footer .text {width: 99%;}

    #page .section > .left {width: 100%;}
    #page .section > .right {width: 100%; margin: 0;}
    
    .left_no {width: 100%; text-align: center;}
    .left {width: 100%; text-align: center;}
    .right {width: 100%; text-align: center;}
}

@media screen and (min-width: 768px) and (max-width: 1024px)
{
    #page .section > .left {width: 70%;}
    #page .section > .right {width: 30%; margin: 0;}
    
    .left_no {width: 39%; text-align: right;}
    .left {width: 39%; text-align: right;}
    .right {width: 55%; text-align: left;}
}

@media screen and (min-width: 1025px)
{
    #page .section > .left {}
    #page .section > .right {max-width: 247px;}
    
    .left_no {}
    .left {}
    .right {}
}


/* Float four columns side by side */
.columnCard {
  float: left;
  width: 100%;
  
}



/* Remove extra left and right margins, due to padding */
.rowCard {margin: 10 10;}

/* Clear floats after the columns */
.rowCard:after {
  content: "";
  display: inline;
  clear: both;
  text-align: center;
}



/* Style the counter cards */
.cardctrl {

  text-align: center;
  background-color: White;
  font-family: MS Reference Sans Serif; font-size: 10pt;
  width:200px;
  display: inline-block;
   padding: 2rem 2rem;
  vertical-align: middle;
}

.simple
       {
           color: Green !important;
           font-family: MS Reference Sans-Serif;
           font-size: 14pt;
          
       }
.simple:hover
       {
           color: black !important;
           font-family: MS Reference Sans-Serif;
           font-size: 14pt;
           text-decoration: none;
           
       }
       
.box {
            background-color: black;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
p {
            font-size: 10pt;
            align-items: center;
        }
 .box a {
            display: inline-block;
            background-color: #fff;
            padding: 15px;
            border-radius: 3px;
        }
.modal {
            align-items: center;
            display: flex;
            justify-content: center;
             background: rgba(211, 211, 211, 0.7);  
            transition: all 0.4s;      
            visibility: hidden;
            opacity: 2;            
             position: fixed;  
              top: 0;
              left: 0;
              left:0;
              right:0;
        }
 .contbox {
            position: relative;
            background: #3a9e52;
            padding: 1em 2em;
            border-radius: 4px;
           
        }
        
 .contbox2 {
            position: absolute;
            background: #3a9e52;
            width: 350px;
            height:390px;
            padding: 0.5em 1em;
            border-radius: 4px;
            margin-top:25%;
            margin-left:40%
        }
.modal:target {
            visibility: visible;
            opacity: 1;
        }
 .box-close {
            position: absolute;
            top: 0;
            right: 5px;
            color: black;
            text-decoration: none;
            font-size: 30px;
            font-weight:bold;
            
        }