:root {
        --dcc_main_color1: #adf;
        --dcc_main_color2: #8bf;
        --dcc_main_color3: #279;
    }

h1, h2, h3, h4, h5, h6 {  font-family: 'Amatic SC', cursive;}
#absolute_container { width: 98%; margin: auto; }
body {  margin: 0; padding: 0;}
body, p { font-family: 'Josefin Sans', sans-serif; font-size: 18px; }
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }
.clear { clear: both; }
.center { text-align: center; }


/* ******************* TABLE STYLINGS ******************* */
table {
    border-collapse: collapse;
    width: 90%; margin: auto; text-align: center; 
}

td, th { 
    border: 1px solid #dddddd;
    padding: 8px;
}
th { text-align: center;}
tr:nth-child(odd)  { text-align: left;
    background-color: #fff;
}
tr:nth-child(even) { text-align: left;
    background-color: #bef !important;
}

/* ******************* INPUT STYLINGS ******************* */
input, select {
 border: 2px solid #adf;
 border-radius: 4px;
 font-size: 1em; 
    }
input[type=button], input[type=submit], input[type=reset] {
 background-color: #adf;
 border: none;
 color: black  ;
 padding: 6px;
 text-decoration: none;
 margin: 4px 4px;
 padding-left: 20px; padding-right: 20px; 
 cursor: pointer;
 }
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { color: white; background-color: #8bf;}
    
/* ******************* Flexible display divs for all pages ******************* */
.flexHalf { float: left; width: 49%; margin: 0; padding: 0; }
.flexThird{ float: left; width: 33%; margin: 0; padding: 0; }
.flexTwoThird{ float: left; width: 66%; margin: 0; padding: 0; }
    


/* ******************* HEADER STYLINGS ******************* */
#absolute_header {
    width: 100%; /*background: #ffdfdf;*/ border: solid; border-width: 0px 0px 3px 0px;  border-bottom-color: #279;
    box-sizing: border-box; 
    }
#absolute_header h3 { text-align: left; }
#absolute_header_top { background-color: #adf;
    background-image: url('../covelogo.png');
    background-position: top center; 
    background-repeat: no-repeat;  
    background-size: auto 100%;
    }
#absolute_header #leftDiv { float: left;  width: 3%; height: 1px;  }
#absolute_header #centerDiv { width: 90%; float: left; /*background: #ddffdd; */text-align: center;  }
#absolute_header #rightDiv { float: right; width: 3%; margin: 0px; padding: 10px 10px 10px 0px;/*background: #ddeeff;*/  }
#absolute_header #rightDiv img { width: 100%; height: auto; }
#absolute_header #absolute_body {
    border: solid; border-width: 0px 0px 0px 0px;
    /*border-top-color: #279;*/
    background-color: #adf;
    padding-bottom: 1em; padding-top: 1em; }
#absolute_header a { color: #16a;  text-decoration: none;}
#absolute_header a:hover { color: #000; }


/* ******************* BODY STYLINGS ******************* */

#dcc_container { width: 80%; margin: auto; }
.force_white { background: #fff !important; }
.buttonEntry { width: 25%; float: left; margin: 0; padding: 0; margin-bottom: 0.5em; }
.buttonEntry .bEntry{border: solid; border-width: 3px 3px 3px 3px;  border-color: #279;
    width: 95%; margin: auto; 
    box-shadow: 0px 0px 0px #ccc;
    border-radius: 12px;
    
    display: flex;  align-items:center; text-align: center;
    font-size: 1.2em;
    background: #fff; transition: border-color 0.5s, background 0.5s;
          }
.buttonEntry .bEntry:hover {  border-color: #000; background: #8ef;}
/*.buttonEntry img{ width: 25%; height: auto; padding: 0; padding-left: 5%; text-align: center; display: inline;  }*/
.buttonEntry .imgDiv { width: 25%; float: left; margin: 0; padding: 0; }
.buttonEntry .imgDiv:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.buttonEntry .imgDiv img{ padding: 6px; width: 100%; height: auto;  margin: 0; padding: 0;}
.buttonEntry .txtDiv { width: 75%; margin: 0; padding: 0;
    /*display: flex;  align-items:center; */text-align: center;}

.clear { clear: both; }
.center { text-align: center; }

.dcc_borderColor { border-color: #8ef !important; }

 @media only screen and (max-width: 1600px){    .mobile_full_width { width: 60% !important; }  }

 @media only screen and (max-width: 1200px){    .mobile_full_width { width: 80% !important; }  }
 
 @media only screen and (max-width: 800px){
    .mobile_full_width { width: 100% !important; }
    .buttonEntry { width: 100%; }
    #dcc_container { width: 95%; }
    #absolute_header #rightDiv { float: right; width: 8%; margin: 0px; padding: 10px 10px 10px 0px;/*background: #ddeeff;*/  }
    .flexHalf { float: left; width: 100%; margin: 0; padding: 0; }
    .flexThird{ float: left; width: 100%; margin: 0; padding: 0; }
    .flexTwoThird{ float: left; width: 100%; margin: 0; padding: 0; }
    .hide_on_mobile { display: none !important; }
    }