/* Pen-specific styles */
html, body{
  height: 100%;
}
section {
  height: 98%;
}
body {
  color: #fff;
  font-family: sans-serif;
  font-size: 1.25rem;
  line-height: 150%;
  text-align: center;
  text-shadow: 0 2px 2px #b6701e;
}

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem 0;
}

/* Pattern styles */
.container {
 /* display: flex; */
	
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;	
	
}

.left-half {
  /*
  flex: 1;
  padding: 1rem;
  */
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;
	
}
.right-half {
  /*	
  flex: 1;
  padding: 1rem;
  */
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;	
}

a{text-decoration:none;}
/*Add the following compatibility code for IE as you can't animate background-size in IE*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
	.textOverImage{background-size:cover!important;}
}
.textOverImage{
    position:relative;
    float:left;
	width: 50%;
    margin:0px;
    background-size:100%;
    background-position:center;
    transition:0.5s;
    overflow:hidden;
    border-radius:4px;
    box-shadow:0 0 4px #000;
  }
  
  .textOverImage:hover{
    background-size:110%;
  }
  
.textOverImage:before{
  position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    transform:translateY(90%);/*use transform:translateY(100%); to remove footer*/
    background-color:rgba(0,0,0,0.3);
    color:#fff;
    padding:0 8px;
    content:attr(data-title);
    transition:0.5s 0.1s;
    color:#fff;
    font-weight:bold;
    font-size:1.5em;
}

  .textOverImage:after{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    color:#fff;
    padding:8px;
    content:attr(data-text);
	white-space: pre;    
    transition:0.5s;
    padding-top:2em;
    margin-top:8px;
    transform:translateY(100%);
    opacity:0;
  }
  
  .textOverImage:hover:after{
    transform:translateY(0);
    transition:0.5s 0.1s;
    opacity:1;
  }
.textOverImage:hover:before{
    transform:translateY(0);
    padding:8px;
    background-color:rgba(0,0,0,0.6);
    transition:0.5s;
}