.flex-container > div {
  margin:8px;
    width:100%;
    
}


.flex-container {
  display: flex;
  flex-direction: row;

}


.flex-container2 > div {
  margin: 0px;
    
}


.flex-container2 {
  display: flex;
  flex-direction: row;
    margin:0px;

}


.flex1 {
  flex: 50%;
      display:flex;
  justify-content: center;
  align-items: center;
    border: 1px  solid #333;
      background-image: url("hardwood.jpg");
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);

}

.flex1:hover {
  flex: 50%;
    border: 1px  solid #666;
      background-image: url("darkhardwood.jpg");
    background-size: contain;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5)inset;

}



.flexbutton {
  display: block;
  width: 100%;
  padding: 10px;
  color: #999;
  font-size: 12px;
  text-decoration: none;
  text-shadow: 3px 3px 3px #000;
  cursor: pointer;
  background-image: url("hardwood.jpg");
}


.flexbutton:hover {
  color: #EEE;
  text-shadow: 0px 0px 5px #FFF;
  text-decoration: none;
}

/* Remove the old .flexbutton a rules – not needed */









.flex-container2 > div {
        width:100%;
      margin:0px;

}



.flex2 {
  background-color: #222;
  flex: 50%;
    border: 1px  solid #333;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5) ;
position:relative;
          margin:20px;
    padding-bottom:30px;
border-top-left-radius: 10px;
    border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.flex2:hover {
  flex: 50%;
    border: 1px solid #EEE;
      filter: brightness(130%);
color: #FFF;
    box-shadow: 0px 0px 10px 0px rgba(256, 256, 256, 0.8) ;




    

}


.flexbutton2 {
    display:block;
color: #666;
font-size: 12px;
text-decoration: none; 
    padding:6px;
    text-align: center;
       
      margin:10px;


}

.flexbutton2:hover {
color: #EEE;
    text-decoration: none;
            border-radius: 20px;



}


.flex3 {
  background-color: #222;
  flex: 50%;
    border: 1px  solid #333;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5) ;
position:relative;
          margin:20px;
    padding-bottom:30px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.responsive-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* key: scale to fit, never distort */
  width: 100%;
  height: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;






}

.imgshadow {
    position: absolute;
    width: 100%;
    height: 100%;
   top: 0;
    left: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


.imgshadow:hover {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.2) inset;
    top: 0;
    left: 0;

}


.responsive-image:hover {
  width: 100%;
  height: 100%;
 

}

.frontimagecover{ /* DIV that contains the textual description inside .slide */
position: absolute;
bottom: 0px;
left:0px;
padding-top:5px;
padding-bottom:3px;
clear:both;
text-align: center;
width:100%;
height:30px;
margin:0px;
overflow:hidden;
font-family: "helvetica-neue-lt-pro", sans-serif;
font-weight: 400;
font-style: normal;
text-shadow: 3px 3px 3px #000;
z-index:1;
border-top: 0px solid #333;
border-bottom: 0px solid #333;
background-image:url("wood.png");
font-size:  12px; 
line-height: 22px;
color: #999;
        border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

}




.imagecover{ /* DIV that contains the textual description inside .slide */
position: absolute;
bottom: 0px;
left:0px;
padding-top:5px;
padding-bottom:3px;
clear:both;
text-align: center;
width:100%;
height:20px;
margin:0px;
overflow:hidden;
font-family: "helvetica-neue-lt-pro", sans-serif;
font-weight: 400;
font-style: normal;
text-shadow: 3px 3px 3px #000;
z-index:1;
border-top: 0px solid #333;
border-bottom: 0px solid #333;
background-color: rgba(0, 0, 0, 0.5);  
      background-image: url("hardwood.jpg");

font-size:  12px; 
line-height: 12px;
color: #999;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

}


.fimagecover{ /* DIV that contains the textual description inside .slide */
position: absolute;
bottom: 0px;
left:0px;
padding-top:15px;
padding-bottom:3px;
clear:both;
text-align: center;
width:100%;
height:38px;
margin:0px;
overflow:hidden;
font-family: "helvetica-neue-lt-pro", sans-serif;
font-weight: 400;
font-style: normal;
text-shadow: 3px 3px 3px #000;
z-index:1;
border-top: 0px solid #333;
border-bottom: 0px solid #333;
background-color: #333; 
  background-image: url("hardwood.jpg");

font-size:  12px; 
line-height: 12px;
color: #999;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


.fimagecover:hover{ 
color: #FFFFFF;
    border: 1px solid #FFF;
}


.imagecover:hover{ 
color: #FFFFFF;
    border-bottom: 1px solid #FFF;
}



.frontlinks {
margin-left:auto;
margin-right:auto;
margin-top: 0px;
border-radius: 0px;
text-align: center;
color:#CCC;



}


@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
    
}


@media (max-width: 1000px) {
    
.flex-container2 {
flex-direction: column;


}

}


    

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
.frontlinks{ 
       width:100%;
}
    
    .imagecover{ 
font-size:  16px;
}
    
.flex-container > div {


    width:98%;
          margin-left:1%;
          margin-right:1%;

}
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 601px) {
.frontlinks{ 
width:100%;

} 
    
    
.imagecover{ 
font-size:  12px;
}
    
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.frontlinks{ 
width:100%;
} 
      
.imagecover{ 
font-size:  14px;
}
    
}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.frontlinks{ 
width:100%;
}
    
.imagecover{ 
font-size:  15px;
}
    
}
    
    /* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1930px) {
.frontlinks{ 
width:100%;
}

.imagecover{ 
font-size:  18px;
}
    
}