#masthead .top-bar {
  background-color: #fff;
  border-bottom: 1px solid #8c8c8c;
}

.main-navigation > div li a {
  color: #000;
  font-size: 1em;
}

.main-navigation > div li:hover > a {
  color: #8c8c8c;
}

.page-layout-no-masthead-margin #masthead {
  border-bottom: 1px solid #e4e4e4;
}

.lsow-accordion.style3 .lsow-panel .lsow-panel-title {
  color: #000;
}

.lsow-accordion.style3 .lsow-panel:hover .lsow-panel-title {
  color: 	#c48a24;
}


#colophon {
  background-color: 	#000;
}


#colophon .site-info {
  color: 	#fff;
  border-top: 1px solid #8c8c8c;
}
  

#colophon .site-info a:hover {
  color: #00a76a;
}

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: black;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: black; 
    color: white; 
    border: 2px solid black;
}

.button1:hover {
    background-color: #008CBA;
    color: white;
}

.button2 {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: #008CBA;
    color: white;
  border: 2px solid #fff
}

.button3 {
    background-color: #4CAF50; 
    color: white; 
    border: 2px solid #4CAF50;
}

.button3:hover {
    background-color: #f44336;
    color: white;
}

.button4 {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
    background-color: #008CBA;
    color: WHITE;
    border: 2px solid #008CBA;
}

.button5:hover {
    background-color: #47c0e7;
    color: black;
  border: 2px solid #fff
}

.button6{
 background-color: #008CBA;
    color: WHITE;
    border: 2px solid #008CBA;
}

.button6hover {
    background-color: #008CBA;
    color: white;
}

 #timeline{
        display: flex;
        background-color: #031625;      
      }
      
      #timeline:hover .t1-item{
        width: 23.3333%;
        
      }
    
      .t1-item{
     transform: translate3d(0,0,0);
        position: relative;
        width: 25%;
        height: 50vh;
        min-height:300px;
        color: white;
        overflow: hidden;
        transition: widht 0.5s ease;
        
      }
      
      .t1-item:before, .t1-item:after{
        transform: translate3d(0,0,0)
          content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
   }
      
      .t1-item:after{
        background: rgba(3,22,37,0.85);
        opacity: 1;
        transition: opacity 0.5s ease;
      }
      
      .t1-item:before{
       background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1)75%);
        z-index: 1;
          opacity: 0;
          transform: translate3d(0,0,0) translateY(50%);
           transition: opacity 0.5s ease,
            transform 0.5s ease;
      }
      
        .t1-item:hove{
            width: 30% !important;
        }
      
        .t1-item:hover:after{
            opacity: 0; 
        }
        
          .t1-item:hover:before{
            opacity: 1;
              transform: translate3d(0,0,0) translateY(0);
              transition: opacity 1s ease, transform 1s ease 0.25s;
        }
        
        .t1-item:hover .t1-content{
            opacity: 1;
            transform: translateY(0);
            transition: all 0.75s ease 0.5s;
            
        }
        
        .t1-item:hover .t1-bg{
            filter: grayscale(0);
            
        }
        
        .t1-content{
            transform: translate3d(0,0,0) translateY(25px);
            position: relative;
            z-index: 1;
            text-align: center;
            margin: 0.1618em;
            top: 55%;
            opacity: 0;            
        }
        
        .t1-content h1{
        font-family: tahoma;
        text-transform: uppercase;
        color: #0B4C8F;
        font-size: 1.44rem;
        font-weight: normal;            
        }
    
        .t1-year{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            z-index: 1;
            border-bottom: 1px solid white;
        }
        
        .t1-year p{
            font-family: tahoma;
            font-size: 1.628rem;
            line-height: 0;
        }
        
        .t1-bg{
            transform: translate3d(0,0,0);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-size: cover;
            background-position: center center;
            transition: filter 0.5s ease;
            filter: grayscale(100%);
        }

/* relevant styles */
.img__wrap {
  position: relative;
  height: 105px;
  width: 200px;
}

.img__description_layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(36, 62, 206, 0.6);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description_layer {
  visibility: visible;
  opacity: 1;
}

.img__description {
  transition: .2s;
  transform: translateY(1em);
}

.img__wrap:hover .img__description {
  transform: translateY(0);
}

@media (max-width: 768px){
	.mobile-hidden {
		display: none;
	}
}