:root {
--menu-back: rgb(27, 27, 27);
--color-text: rgb(93, 195, 243);
--main-back: #333;
--hover-color: rgb(8, 161, 250);
--shadow-color: rgb(82, 191, 255);
--menu-color: rgb(93, 195, 243);
--location-start: 300px;
--left-start: 20px;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: var(--main-back);
color: var(--color-text);
}

/*mobile remove blue tap */
input,
textarea,
button,
select,
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}



/*  navmenu stuff */
#myName{
width: 30%;
text-align: left;
padding-left: 50px;
}

.extraList {
width: 12%;
}

.topnav {
overflow: hidden;
background-color: var(--menu-back);
margin: 0;
}

.tabLinks:hover {
font-weight: bold;   
}


.topnav a {
float: left;
display: block;
color: var(--menu-color);
text-align: center;
padding: 14px 0px 14px 0px;
text-decoration: none;
transition: all ease 0.3s;
}

.topnav a:hover {
color: var(--hover-color);
}

.topnav a.active {
color: var(--hover-color);
}

.topnav .icon {
display: none;
width: 0%;
}

.active {
font-weight: bold;
}
#navBurger {
margin-top: -8px;
height: 25px;

}

.bar1, .bar2, .bar3 {
width: 20px;
height: 3px;
background-color: var(--menu-color);
margin: 6px 0;
transition: 0.4s;
}

.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-2px, 7px);
background-color: var(--hover-color);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-5px, -12px);
background-color: var(--hover-color);
}

#navMenu {
width: 0%;
height: 3px;
box-shadow: 1px 3px 3px var(--shadow-color);
z-index: 5;
position: fixed;
top: 0;
}

#navMenu.onStart {
animation: laser 1s, laserHeight 1s 2s;
animation-fill-mode: forwards;
}

@keyframes laser {
100% {
width: 100%;
background-color: var(--menu-back);
}
}

@keyframes laserHeight {
100% {
height: 46px;
}
}

#aboutContainer{
opacity: 0;
width: 50%;
margin: auto;
}

#aboutContainer p{
padding: 0 25px;
font-size: 22px;
}
#profPic{
float: left;
box-shadow: 3px 3px 10px #888888;
border-radius: 50%;
width:300px;
height:300px;
}

/*mobile responsive */
@media screen and (max-width: 850px) {
.topnav a:not(:first-child) {
display: none;

}
.topnav a.icon {
float: right;
display: block;
opacity: 1;
}
}

@media screen and (max-width: 850px) {
.topnav.responsive {
position: relative;
animation: shadowPull 1s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}

.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.projColumn {
width: 90%;
border: 2px solid var(--menu-color);
margin: auto;
margin-top: 5px;
padding: 5px;
}
.projColumn:hover {
height: 400px;
}
.extraList {
opacity: 1;
padding-left: 100%;
}
.topnav.responsive.menuMove {

animation: shadowFill .8s forwards ease-in-out;
-webkit-animation: shadowFill .8s forwards ease-in-out;
}
.textBack{
animation: textToLeft .6s forwards ease-in-out;
-webkit-animation: textToLeft .6s forwards ease-in-out;
}

.textMove{
animation: textToRight 1s forwards ease-in-out;
-webkit-animation: textToRight 1s forwards ease-in-out;
}

.textMove:nth-child(2) { animation-delay: .1s }
.textMove:nth-child(3) { animation-delay: .15s  }
.textMove:nth-child(4) { animation-delay: .2s }
.textMove:nth-child(5) { animation-delay: .25s }
.textMove:nth-child(6) { animation-delay: .3s }
.textBack:nth-child(2) { animation-delay: .1s }
.textBack:nth-child(3) { animation-delay: .15s  }
.textBack:nth-child(4) { animation-delay: .2s }
.textBack:nth-child(5) { animation-delay: .25s }
.textBack:nth-child(6) { animation-delay: .3s }
@keyframes textToRight {
0% {
opacity: 0;
transform: translate(100%, 0%)
}
70% {
opacity: 0;
transform: translate(100%, 0%)
}
100% {
opacity: 1;
transform: translate(0%, 0%)
}
}
@keyframes textToLeft {
0% {
opacity: 1;
transform: translate(0%, 0%)
}
100% {
opacity: 0;
transform: translate(100%, 0%)
}
}

@keyframes shadowFill {
0% {
background: rgba(33,33,33,1.0);
max-height: 46px;
}
100% {
background: rgba(33,33,33,0.9);
max-height: 100vh;
}
}
@keyframes shadowPull {
0% {
background: rgba(33,33,33,0.9);
max-height: 100vh;
}
100% {
background: rgba(33,33,33,1.0);
max-height: 46px;
}
}
#myName {
width: 75%;
padding-left: 10px;
}
#navBurger{
width: 5%;
padding-right: 10px;
}

.topnav.responsive a {
float: none;
display: block;
text-align: left; 
}
.extraList{
width: 100%;

}
.extraList a {
width: 100%;

}
.tabLinks span {
padding-bottom: 5px;
padding-left: 10px;
}
#colorIcon span {
padding-bottom: 5px;
padding-left: 10px;
}

#homeContainer img {
max-width: 50%;
max-height: auto;
}
#goBack img{
max-width: 50%;
max-height: auto;
}
#aboutContainer p{
padding: 0px 25px;
font-size: 16px;
}
#aboutContainer{
width: 90%;
margin: auto;
}
#profPic{
float: left;
box-shadow: 3px 3px 10px #888888;
border-radius: 50%;
width:125px;
height:125px;
}
}


/*div stuff */

@media screen and (min-width: 850px) {
.projColumn {
box-sizing: border-box;
float: left;
width: 50%;
border: 1px solid var(--menu-color);
margin: auto;
margin-top: 5px;
padding: 10px;
}

.projColumn:hover {
background: var(--menu-color);
color: var(--main-back);
border: 1px solid var(--main-back);
}

.projRow:after {
content: "";
display: table;
clear: both;
}
}

#mainMenu {
position:absolute;
top: 46px;
width: 100%;
overflow-y:auto;
}

.tabItems{
display: none;
border-radius: 5px;
text-align: center;
font-size: 1em;
width: 100%;
overflow: scroll;
scrollbar-width: none;
}
::-webkit-scrollbar {
width: 0;  /* Remove scrollbar space */
background: transparent;  /* Optional: just make scrollbar invisible */
}


#homeContainer {
position:fixed;
top: 50px;
width:100%;
}

#goBack {
width:100%;
height: 100%;
text-align: center;
}

#goBack img{
transform: translateX(-50%);
left: 50%;
position: absolute;
}

#successMessage{
font-family: 'Courier New', Courier, monospace;
display: block;
padding-top: 50px;
width: 100%;
font-weight: bold;
font-size: 20px;
color: var(--menu-color);
}

#backMenu {
width: 100%;
height: auto;
box-shadow: 1px 3px 3px var(--shadow-color);
z-index: 100;
}




/* php pages*/
.phpError {
color: rgb(214, 3, 3);
font-weight: bold;
}

#queryTable td, #queryTable th {
border: 1px solid #ddd;
padding: 8px;
}

#queryTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: rgb(86, 182, 226);
color: #333;
}

#queryTable {
border-collapse: collapse;
width: 100%;
}

#queryTable tr:nth-child(even){background-color: #f2f2f2;}

#contactForm label {
font-weight: bold;
width: 100%;
}

#contactForm input, #contactForm textarea{
width: 100%;
}
.contactContainer{
padding: 10px 20px 20px 10px;
}

#contactTitle{
font-weight: bold;
font-size: 18px;
padding: 10px 20px 20px 10px;
border:0 none;
margin-bottom: 10px;
text-align: center;
}

#contactField {
margin: 8px 0;
width: 100%;
}

#subConBut{
width: 100%;
background: rgb(93, 195, 243);
font-weight: bold;
font-size: 18px;
border:0 none;
padding: 25px;
margin-bottom: 10px;
box-shadow: 3px 3px 3px gray;
}

#subConBut:focus{
outline: 0;
background: rgb(237, 248, 252);
color:rgb(86, 182, 226);
border:0 none;
}

input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 8px 0;
border: 1px solid rgba(81, 203, 238, 1);
background-color: rgb(237, 248, 252);
}

input[type=text], input[type=email], input[type=tel], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 8px 0;
border: 1px solid #DDDDDD;
/*box-sizing:border-box;   
box sizing will make inputs not overflow div, important if remove padding from modalContain
*/
}

input[type=submit] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.cube-wrapper {
width: 0;
height: 0;
left: 50%;
bottom: 50%;
position: absolute;
perspective-origin: 0 0;
perspective: 80px;
}
.cube-2 {
-webkit-transform: translate3d(0,0,-100px) scaleX(1.8);
-ms-transform: translate3d(0,0,-100px) scaleX(1.8);
transform: translate3d(0,0,-100px) scaleX(1.8);
transform-style: preserve-3d;
}
.cube {
top: -100px;
position: relative;
transform-style: preserve-3d;
animation-name: rotate;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: rotate;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: rotate;
-moz-animation-duration: 10s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-o-animation-name: rotate;
-o-animation-duration: 10s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
} 


@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate3d(0, 1, 0, 360deg);
transform: rotate3d(0, 1, 0, 360deg);
}
50% {
-webkit-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 0, 360deg);
transform: rotate3d(0, 0, 0, 360deg);
}
}

@-moz-keyframes rotate {
0% {
transform: rotate3d(0, 1, 0, 360deg);
}
50% {
transform: rotate3d(0, 1, 0, 180deg)
}
100% {
transform: rotate3d(0, 0, 0, 360deg);
}
}

@-ms-keyframes rotate {
0% {
transform: rotate3d(0, 1, 0, 360deg);
}
50% {
transform: rotate3d(0, 1, 0, 180deg)
}
100% {
transform: rotate3d(0, 0, 0, 360deg);
}
}

@-o-keyframes rotate {
0% {
transform: rotate3d(0, 1, 0, 360deg);
}
50% {
transform: rotate3d(0, 1, 0, 180deg)
}
100% {
transform: rotate3d(0, 0, 0, 360deg);
}
}

@keyframes rotate {
0% {
transform: rotate3d(0, 1, 0, 360deg);
}
50% {
transform: rotate3d(0, 1, 0, 180deg)
}
100% {
transform: rotate3d(0, 0, 0, 360deg);

}
}

.face {
position: absolute;
background-size: 662.4px 200px;
width: 84px;
height: 200px;
}

#face1 {
-webkit-transform: translateX(-41.4px) translateZ(100px);
transform: translateX(-41.4px) translateZ(100px);
background-position: 0 0;
}
#face2 {
-webkit-transform: translateX(29.2px) translateZ(70.8px) rotateY(45deg);
transform: translateX(29.2px) translateZ(70.8px) rotateY(45deg);
background-position: -82.8px 0;
}
#face3 {
-webkit-transform: translateX(58.5px) rotateY(90deg);
transform: translateX(58.5px) rotateY(90deg);
background-position: -165.6px 0;
}
#face4 {
-webkit-transform: translateX(29.2px) translateZ(-70.8px) rotateY(135deg);
transform: translateX(29.2px) translateZ(-70.8px) rotateY(135deg);
background-position: -248.4px 0;
}
#face5 {
-webkit-transform: translateX(-41.4px) translateZ(-100px) rotateY(180deg);
transform: translateX(-41.4px) translateZ(-100px) rotateY(180deg);
background-position: -331.2px 0;
}
#face6 {
-webkit-transform: translateX(-111.4px) translateZ(-70.8px) rotateY(225deg);
transform: translateX(-111.4px) translateZ(-70.8px) rotateY(225deg);
background-position: -414px 0;
}
#face7 {
-webkit-transform: translateX(-141.4px) rotateY(270deg);
transform: translateX(-141.4px) rotateY(270deg);
background-position: -496.8px 0;
}
#face8 {
-webkit-transform: translateX(-111.4px) translateZ(70px) rotateY(315deg);
transform: translateX(-111.4px) translateZ(70px) rotateY(315deg);
background-position: -579.6px 0;
}

.circle {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.clip-circle {
position: absolute;
padding: 0;
top: -16px;
width: 200px;
height: 200px;
border-radius: 50%;
clip-path: circle(99px at center);
}
.lighting:after {
content: '';
position: absolute;
top: 50px;
left: 67px;
}
.reflection:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
height: 200px;
width: 200px;

}
/*background-image:url(https://i.stack.imgur.com/ayCw7.png);*/
.earth {
position: absolute;
left: 45%;
bottom: 60%;
z-index: 1;
}
.face{
background-image:url(projects.png);
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.earth .clip-circle {
-webkit-transform: rotateX(7deg) rotateZ(15deg);
transform: rotateX(7deg) rotateZ(15deg);
}
.earth .lighting {
box-shadow: -20px -30px 55px 0 rgba(0, 0, 0, 0.9) inset, -75px -100px 150px 0 rgba(0, 0, 0, 0.4) inset, 75px 100px 200px 0 rgba(255, 255, 255, 0.2) inset, -1px -2px 10px 2px rgba(200, 190, 255, 0.2);
}
.earth .lighting:after {
box-shadow: 0 0 150px 51px rgba(255, 255, 255, 0.2), 0 0 26px 10px rgba(255, 255, 255, 0.2);
}

#field {
position: relative;
height: 100%;
background-color: var(--main-back);
color: var(--color-text);
}
#ball1, #ball2, #ball3, #ball4{
position: absolute;
left: 0;
bottom: 50%;
width: 1.5em;
height: 1.5em;
border-radius: 1.5em;
}
.planet { 
background: radial-gradient(circle at 15px 15px, rgb(0, 104, 201), rgb(0, 117, 226), rgb(0, 132, 255));
-webkit-animation: move-map 30s infinite linear;
-moz-animation: move-map 30s infinite linear;
-o-animation: move-map 30s infinite linear;
-ms-animation: move-map 30s infinite linear;
animation: move-map 30s infinite linear;
} 
@-o-keyframes move-map {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-ms-keyframes move-map {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes move-map {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes move-map {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes move-map {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


#modalContainer{
display: none; 
position: fixed; 
z-index: 3; 
padding-top: 100px; 
left: 0;
top: 0;
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgb(0,0,0); 
background-color: rgba(0,0,0,0.4);
}

#projModal {
position: fixed;
border-radius: 1em;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 0%;
height: 0%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
font-size: 22px;
-webkit-animation: animatetop .3s ease-in-out forwards ;
animation: animatetop .3s  ease-in-out forwards;
color: #333;
}

#projectDetails{
opacity: 0;
transition: opacity 1s;
-webkit-transition: opacity 1s; /* Safari */
-moz-transition: opacity 1s;
}

#projectText{
opacity: 0;
transition: opacity 1s;
-webkit-transition: opacity 1s; /* Safari */
-moz-transition: opacity 1s;
}
.removeModal{
-webkit-animation: animateback .2s ease-in-out forwards;
animation: animateback .2s  ease-in-out forwards;
}

@media screen and (min-width: 850px){
@-o-keyframes animatetop {
from {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%} 
to {top:100px; left: 30%; opacity:1; width: 40%; height: auto}
}
@-ms-keyframes animatetop {
from {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%} 
to {top:100px; left: 30%; opacity:1; width: 40%; height: auto}
}
@-moz-keyframes animatetop {
from {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%} 
to {top:100px; left: 30%; opacity:1; width: 40%; height: auto}
}
@-webkit-keyframes animatetop {
from {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%} 
to {top:100px; left: 30%; opacity:1; width: 40%; height: auto}
}

@keyframes animatetop {
from {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%}
to {top:100px; left: 30%; opacity:1; width: 40%; height: auto}
}


@-webkit-keyframes animateback {
from {top:100px; left: 30%; opacity:1; width: 40%; height: auto}
to {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%; width: 0%}
}
@-o-keyframes animateback {
from {top:100px; left: 30%; opacity:1; width: 40%; height: auto}
to {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%; width: 0%}
}
@-ms-keyframes animateback {
from {top:100px; left: 30%; opacity:1; width: 40%; height: auto}
to {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%; width: 0%}
}
@-moz-keyframes animateback {
from {top:100px; left: 30%; opacity:1; width: 40%; height: auto}
to {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%; width: 0%}
}
@keyframes animateback {
from {top:100px; left: 30%; opacity:1; width: 40%; height: auto}
to {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%; width: 0%}
}
}





@media screen and (max-width: 850px){
@-o-keyframes animatetop {
from {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%} 
to {top:100px; left: 10%; opacity:1; width: 80%; height: auto}
}
@-ms-keyframes animatetop {
from {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%} 
to {top:100px; left: 10%; opacity:1; width: 80%; height: auto}
}
@-moz-keyframes animatetop {
from {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%} 
to {top:100px; left: 10%; opacity:1; width: 80%; height: auto}
}
@-webkit-keyframes animatetop {
from {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%} 
to {top:100px; left: 10%; opacity:1; width: 80%; height: auto}
}

@keyframes animatetop {
from {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%}
to {top:100px; left: 10%; opacity:1; width: 80%; height: auto}
}
.earth {
left: 30%;
}
@-webkit-keyframes animateback {
from {top:100px; left: 10%; opacity:1; width: 80%; height: auto}
to {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%; width: 0%}
}
@-o-keyframes animateback {
from {top:100px; left: 10%; opacity:1; width: 80%; height: auto}
to {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%; width: 0%}
}
@-ms-keyframes animateback {
from {top:100px; left: 10%; opacity:1; width: 80%; height: auto}
to {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%; width: 0%}
}
@-moz-keyframes animateback {
from {top:100px; left: 10%; opacity:1; width: 80%; height: auto}
to {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%; width: 0%}
}
@keyframes animateback {
from {top:100px; left: 10%; opacity:1; width: 80%; height: auto}
to {top: var(--location-start); left: var(--left-start); opacity:0; height: 0%; width: 0%}
}
}

.modal-header {
border-top-left-radius: 1em;
border-top-right-radius: 1em;
padding: 8px 16px;
background-color: rgb(0, 132, 255);
color: white;
text-align: center;
}

.closeModal {
float: right;
font-size: 28px;
font-weight: bold;
}

.closeModal:hover,
.closeModal:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.modal-body {
padding: 16px 16px;
text-align: center;
}

/*covid stuff */
#covidModal{
display: none;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.4);
z-index: 4;
position: fixed;
top: 0;
left: 0;
padding-top: 70px;
}



.calcs {
position: relative;
background-color: rgb(255, 255, 255);
color: rgb(27, 27, 27);
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 70%;
box-shadow: -1px 0px 15px 0px rgba(4,162,227,0.77);
height: 70%;
overflow-y: auto;
}
.calcs h5 {  
font-weight: normal;   
color: #146fb6;   
font-size: 16px;  
margin-bottom:.5em;
}
#tabContainer h4 {
color: #146fb6;    
font-size: 16px;
}
.form2 {
border-bottom: 1px solid black;
}
.peoplepick{
width:100%;
}
#submitSection > table{
width: 50%;
}
#tabContainer table {
width: 100%;
color: #333;
}
#tabContainer table label{
font-size: 16px;
}
#tabContainer table input{
font-size: 16px;
}
#disclaim {
border-bottom: 1px solid black;
}
#submitSection{
border-top: 1px solid black;
}
.tab-content {
font-size: 16px;
}
.tab-content h3{
font-size: 16px;
font-weight: bold;
}
#topTable {
border-bottom: 1px solid black;
width: 100% !important;
color: #333;
}
#errorMessage {
color: red;
text-align: center;
width: 100%;
}
#btnSubmit {
background-color:#146fb6; 
font-weight: bold;
font-size: 18px;
border: none;
border-radius: 15px;
box-shadow: 0 5px #999;
outline: none;
margin-left: 40%;
width: 20%;
}

@media screen and (max-width: 700px) {
#btnSubmit {
width: 60%;
margin-left: 20%;
}
#tab1 {
font-size: 12px;
}
#tabContainer table label{
font-size: 12px;
font-weight: bold;
}
#tabContainer table input{
font-size: 12px;
}
}
#btnSubmit:active{
box-shadow: 0 2px #666;
transform: translateY(3px);
}
.tab-content table {
text-align: left;
}
.tab-content table tr > td:first-child{
width:70%;
}
#SelfSymp {
display: none;
}
#FamSymp {
display: none;
}
#plantOnly {
display: none;
}
#specSites {
display: none;
}
#certyifyTable {
width: 100% !important;
}

#certyifyTable label {
display: block;
text-align: right;
}
#certyifyTable td{
width: 50%;
}
.requiredStuff tr:nth-child(even) {
background-color: #f0f5f5;
}
.borderClass {
color: red !important;
font-weight: bold !important;
}
#companyName{
display: none;
}
.blank_row
{
height: 6px;
background-color: #FFFFFF;
}
.modLinks, .modLinks:visited{
text-decoration: none;
color: #333;
}

#ufo {
position: absolute;
top: 60px;
z-index: 2;
}

.logLink, .logLink:visited {
background: rgb(93, 195, 243);
width: 70%;
margin-left: 15%;
margin-right: 15%;
color: white;
font-weight: bold;
font-size: 18px;
border:0 none;
padding: 25px;
margin-bottom: 10px;
box-shadow: 3px 3px 3px gray;
text-align: center;
text-decoration: none;
display: inline-block;
}

.logLink:hover, .logLink:active {
outline: 0;
background: rgb(237, 248, 252);
color:rgb(86, 182, 226);
border:0 none;
}

.recordDisplay{
position: relative;
width: 200px;
height: 150px;
border: 1px solid gray;
transition: width .5s ease-in-out;
margin: auto;
}
.recordDisplay:hover {
width: 90%;
}

.topper {
height: 100%;
width: 100%;
line-height: 1em;
}
.toppic{
width:100%;
height:100%; 
}

.hiddenDetail{
position: absolute;
top: 0;
right: 0;
background: rgba(20, 111, 182, 0.7);
color: #fff;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
transition: opacity .5s, visibility .5s, font-size .5s;
font-size: 1px;
padding: 1px;
}


.recordDisplay:hover .hiddenDetail {
visibility: visible;
opacity: 1;
font-size:.8em;
}

@media screen and (max-width: 850px) {
.recordDisplay:hover .hiddenDetail {
visibility: visible;
opacity: 1;
font-size:.6em;
}
.recordDisplay{
width: 80%;
}
}

#iconDiv a{
color: var(--color-text); 
}
.projTextP {
    border-radius: 10px;
    background: rgb(236, 236, 236);
    box-shadow: 0px 0px 5px 2px rgba(109,109,109,0.51);
    transition: width 1s;
}
.projTextP:hover {
    font-weight: bold;
}