body
{
    width:98%;
    margin-left:auto;
    margin-right:auto;
}




.pad8
{
    padding:8px;

}

.card-meta {
    color: #666;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.headerSmall  {
    font-size:1.7em;
}

.headerSmaller {
    font-size: 1.4em;
}


.smallmargins {
    width:95%;
    margin-left:2%;
    margin-right:3%;
}


#registerLink {
    position: absolute;
    top: 8px;  
    right :35px;
}


#logoutButton {
    position: absolute;
    top: 35px;
    right: 35px;
}

#centerButton {
    width: 50%;
    margin: 0 auto;
}


.media-icon-display {
    width:95%;
   text-shadow: 2px 2px 5px #222222;
}



.tabletextlarge {
    font-size: 1.2em;
    color: #222222;
    font-family: Arial, Helvetica, sans-serif;
}


.colorred  {
    color:red;
         }

.colordarkblue {
    color: darkblue;
}

.colordodgerblue {
    color: dodgerblue;
}

.colordarkgreen{
    color:darkgreen;
}

.colororangered {
    color:orangered
}


.colorRed {
    color: red;
}

#catalogLink {
    position: absolute;
    top: 50px;  
    right :35px;
}


.flexinput::-webkit-input-placeholder {
    font-family: "Asap", sans-serif;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.flexinput {
    width: 95%;
    display: block;
    border: none;
    padding: 10px 0;
    border-bottom: solid 1px #28aadc;
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.09, 1);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #28aadc 4%);
    background-position: -800px 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #0e6252;
    font-weight: bold;
}

/* Previous: .flexinput:focus, .flexinput:valid */
.flexinput:focus {
    box-shadow: none;
    outline: none;
    background-position: 0 0;
}

/* Previous: .flexinput:focus::-webkit-input-placeholder, .flexinput:valid::-webkit-input-placeholder */
.flexinput:focus::-webkit-input-placeholder {
    color: #28aadc;
    font-size: 9px;
    transform: translateY(-13px);
    visibility: visible !important;
    opacity: 1;
}

.flexinput::placeholder {
    font-weight: normal;
    opacity: 0.5;
}

.flexinput:-ms-input-placeholder, .flexinput::-ms-input-placeholder {
    font-weight: normal;
    opacity: 0.5;
}

.hiden {
    visibility: hidden;
}

.simpleButton{
    padding:1.05rem 2.75rem;
    color:#28aadc;
    background-color:#fff;
    border-radius:12rem;
    border:.2rem solid #28aadc;
    text-transform: uppercase;
    cursor:pointer;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
}

.simpleButton:hover{
    background-color: #28aadc;
    color: white;
}

.cardShadow{
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}