/* Add a black background color to the top navigation */
.topnav {
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {  
  
  text-align: center;  
  text-decoration: underline;
}

.topnav a:hover  {
  background-color: #666;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: black;
}

.imgContainer{
   width:20%; /*container-width*/
   height:100%;
   overflow:hidden; /*hide bounds of image */
   margin:0;   /*reset margin of figure tag*/
   float:left;
}

/*
.imgContainer img {
     display:block; *remove inline-block spaces*
     margin:0 -100px;
     width:177%; *make image streatch*
}
*/

.alligator {

  object-fit: cover;
  

  width: 100%;  
}

.alligatorTop
{
	object-position: 50% 10%;
}

.alligatorCenter
{
	object-position: 50% 50%;
}

.alligatorBottom
{
	object-position: 50% 100%;
}

.responsiveMenu:hover {
	/*background-color: #00f; */
}

.navigationTD
{
    
}

.projectItems
{
    border-spacing:5px;
}

.projectItems .upperDiv
{
    display:flex;
    width:100%;
    height:50%;
}

.projectItems .lowerDiv
{
    display:flex;
    width:100%;
    height:50%;
    vertical-align:bottom;
}

.projectItems .upperText
{
    width:100%;
    vertical-align:top;
    display:inline-block;
    line-height: 1.5;
    align-self:flex-start;
    text-align:left;
    background-color:rgba(255,255,255,0.8);
    margin-top:0px;
    padding-left:6px;
}


.projectItems .lowerText
{
    width:100%;
    line-height:26px;
    vertical-align:middle;
    display:inline-block;
    align-self:flex-end;
    text-align:right;
    background-color:rgba(255,255,255,0.8);
    margin-bottom:0px;
    padding-right:6px;
}

.projectItems td
{
    width:33%;
    height:160px;
    padding:0px;
    background-color:#FFF6DA;
    background-size:cover;
    font-weight:bold;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  /*padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 0px solid #888;
  width: 800px;
  height:70%;
}

/**
Portrait 1:1 and below (3/4, 2/3, 9/16, 9/19, etc)
Portrait 1:1 and below (0.75, 0.666, 0.5625, 0.479, etc)
**/
@media (max-aspect-ratio: 1/1) {
    .topnav {
        
    }
    
    .MainNav
    {
        height:100px;
        display: grid; 
    }
    
    .MainNav tr
    {
        display:contents;
    }
    
    .MainNav td
    {
        display:block;
    }
    
    .navigationTDTitle
    {
        width:100%;
    }
}

/**
Landscape 1:1 and above (4/3, 3/2, 16/9, 19/9, etc)
Landscape 1:1 and above (1.33, 1.5, 1.777, 2.111, etc)
**/
@media (min-aspect-ratio: 1/1) /*and (max-aspect-ratio: 4/3) */
{
    .topnav {
        height:80%;
    }
}