.hideDisplay{
  position: relative; /* This makes everything work.*/
  /* Allows you to layer overlapping elements. */
  z-index: 20; 
  color: #000;
  text-decoration: none
}
  
.hideDisplay:hover{
  /* Allows you to layer overlapping elements. */
  z-index: 30; 
}

.hideDisplay span.showDisplayOnHover{
  display: none
}

/* This will only display itself when the
 * user hovers the mouse over the anchor. */
.hideDisplay:hover span.showDisplayOnHover{ 
  display: block;
  position: absolute;
  font-size: 12px;
  
  /* This sets the height of a line of text in the box. */
  line-height: 11px;
  
  /* These position the box where it needs to go. */
  top: 5px; 
  right: 60px; 
  
  /* These adjust the size of the box when it appears. */
  width: auto
  padding: 10px;
  
  border: 1px solid #666666;
  background-color: #D8ECF2; 
  
  /* text color */
  color: #000000;
  text-align: left;
}

span.showBodyOfDisplayOnHover {
  font-size: 12px; 
  font-weight: normal;
  color: #444;
  line-height: 11px; 
}



#work {
    background-image: url("../img/laptop.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 80px;
}

#button-container {
    width: 100%;
}

#resume-button {
    margin-top: 15px;
    margin-bottom: 25px;
    text-align: center;
}

#resume-button a:hover {
    margin-top: 15px;
    margin-bottom: 25px;
    text-align: center;
    color: white;
    background-color: #4E93A8;
}

#resume-button a {
    text-align: center;
    border: 1px solid #4E93A8;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    color: #4E93A8;
}

#work-content-container {
    width:75%;
    position:relative;
    left:12.5%;
    top: 12px;
    /* padding-bottom: 60px; */
}

.hideDisplay {
    margin-bottom: 35px;
    /* display:none; */
    margin-left: 30px;
}

.logo-box {
    /* width:10%; */
    width:6%;
    position:absolute;
    padding-top:0.5%;
    min-width:50px;
}

.logo {
    object-fit:contain;
    max-width: 100%;
    max-height:80px;
    float:right;
    margin-top: 7px;
}

.all-but-logo {
    position:relative;
    /* left:13%; */
    left:70px;
    width: 80%;

}

.resume-entry {
    position:relative;
    top: 0.6vw;
}

.org {
    font-size: 23px;
}

.position {
    color: #EEA04A;
    font-size: 21px;
}

.description {
    display: none;
    font-size: 15px;
    text-align:justify;
}

@media screen and (max-width:980px) {
    .org {
        font-size: 20px;
    }
    .position {
        font-size:18px;
    }

}

@media screen and (max-width: 930px) {
    .description{
        font-size: 13px;
    }
}

.work-images img {
    /* height:200px; */
    object-fit:contain;
    max-width:100%;
    max-height:100%;
}



.resume:before{
    content: "";
    position: absolute;
    top: -8px;
    width: 10px;
    height: 10px;
    background-color: #016E83;
    /* left: 50%; */
    margin-left: -5.5px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

.resume:after{
    content: "";
    position: absolute;
    bottom: -8px;
    width: 10px;
    height: 10px;
    background-color: #016E83;
    /* left: 50%; */
    margin-left: -5.5px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

.resume {
    border-left: 1px solid #016E83;
}