*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
img{
  max-width:100%;
}
h2{
  font-size:2.5em;
}
.container{
  width:90%;
  margin:auto;
}
header{
  color:#fff;
  position:absolute;
  display:flex;
  flex-flow: row wrap;
  width:100%;
  top:0;
  left:0;
  z-index:9;
}
header .container{
  display:flex;
  flex-flow: row wrap;
  align-items:center;
  padding:15px 0;
}
.logo{
  font-size:20px;
  text-transform:uppercase;
  font-weight:bold;
}
.logo a{
  color:#fff;
  text-decoration:none;
}.logo a img{ max-width: 90px;}


section{
  padding: 40px 0;
float: left;
width: 100%;
margin: 0 0 0 0;
}
.hero-banner{
background:url("../images/flora-playbanner.png") no-repeat center center;
  background-size: cover;
  height:auto;
  display:flex;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:0;
	padding: 15% 0;
}
.hero-banner:after{
  content:"";
  display:block;
  background:rgba(0,0,0,0.5);
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}
.hero-banner h2{
  color:#fff;
  position:relative;
  z-index:1;
}
.about{
  text-align:center;
  line-height:2;
}

.games_box {
  margin: 0 1% 15px 1%;
	padding: 0;
  float: left;
  width: 100%;
  position: relative;
  box-shadow: 0 0 3px 0 #000;
  border-radius: 10px;
	
ms-flex: 0 0 23%;
flex: 0 0 23%;
max-width: 23%;

	
}

*, ::before, ::after {
  box-sizing: border-box;
}
.clr{clear: both;}

.games_box img{
    border-radius: 10px 10px 0px 0px;
}
.games_box .store_link{
margin: -40px 0 0px 0;
padding: 0px 0px;
float: left;
width: 100%;
position: absolute;
text-align: center;
}
.games_box .store_link img{
width: 35%;  
border-radius: 0px 0px 0px 0px;
}
.games_box h3{
	    font-family: 'Montserrat', sans-serif;
	color: #000000;
	margin: 10px 0 10px 0;
	padding: 0 10px;
	font-size: 16px;
	text-align: center;
	font-weight:700;
	float: left;min-height: 65px;
	width: 100%;
}
.games_box h3 a{
    	color: #000000;text-decoration: none;
outline: none;
}
a{
 text-decoration: none;
outline: none;
}
.copy_right{
background: #25f7fa;
padding: 1% 2%;
text-align: center;
margin: 0;
float: left;
width: 100%;
    font-family: 'Montserrat', sans-serif;
color: #000;
font-size: 15px;
}
.about h2{
	font-family: 'Montserrat', sans-serif;
color: #000000;
float: left;
width: 100%;
margin: 0 0 30px 0;
padding: 0;
font-size: 32px;
text-transform: uppercase;
}
.page_area{
    float: left;
width: 100%;
margin: 30px 0 30px 0;
padding: 0;
}

.page_area h3{
	    font-family: 'Montserrat', sans-serif;
	color: #000000;
	margin: 10px 0 10px 0;
	padding: 0 10px;
	font-size: 16px;
	text-align: center;
	font-weight:700;
	float: left;min-height: 65px;
	width: 100%;
}


header.fixed {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  opacity:0;
  visibility:hidden;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
  transform:translate(0, -200px);
}
header.fixed nav a, header.fixed .logo a{
  color:#333;
}
header.in-view{
  opacity:1;
  visibility:visible;
  transition: all 0.3s ease;
  transform:translate(0, 0);
}
@media only screen and (max-width: 640px) {
  header.fixed{
    position:relative;
  }
}