html, body {

height: 100%;
padding: 0;
margin: 0;
font-family: 'source-serif-pro', serif !important;
text-rendering: optimizeLegibility; 
background-color:#000;

}

a {text-decoration:none; color:#fff;}
	
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  width:100%;
  justify-content: flex-end;
  flex-grow: 1;
}	


.header {
  width:100%;
  height:10%;
  background-color:#00C4B3;
  position: relative;
}

.footer {
  width:100%;
  height:15%;
  background-color:#00C4B3;
  position: relative;
}

.headerbase {
  width:100%;
  height:3%;
  background-color:#9578D3;
}

.franno {
	
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
	
	
}


.footercontent {
	
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: agenda, sans-serif;
text-align:center;

font-weight: 600;

font-style: bold;
color:#fff;
	
	
}

.hoverpanel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-size: cover;
  background-size: 100%;
  background-color:black;
  z-index:999;
}

.container1:hover .hoverpanel {
opacity: 1;
}

.hoverpanelcontent {
	
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: agenda, sans-serif;
font-weight: 600;
font-style: normal;
color:#fff;
		
}




.container1 {
  position: relative;
}

.container2 {
  position: relative;
}

.column1 {
  flex: 40%;
  max-width: 100%;
  padding: 0;
  align-self: flex-end;
}


.column2 {
  flex: 20%;
  max-width: 40%;
  padding: 0;
  align-self: flex-end;
}

.flexcolumn2 {
  flex: 20%;
  max-width: 40%;
  padding: 0;
  align-self: flex-end;
}

.column3 {
  flex: 100%;
  padding: 0;
  align-self: flex-end;
  float:left;
}


@media (max-width: 1200px) {
	
  .column1 {
    flex: 66.66666666666%;
      max-width: 100%;
  }
  
    .column2 {
    flex: 33.333333333333%;
  }
  
    .flexcolumn2 {
  flex:50% !important;
  max-width: 50%;
  padding: 0;
  align-self: flex-end;
}
  
  
}




@media (max-width: 750px) {
	
  .column1 {
    flex: 100%;
    max-width: 100%;
  }
  
    .column2 {
    flex: 100%;
    max-width: 100%;
  }
  

  
     .column3 {
    flex: 100%;
    max-width: 100%;
  }
  
}