body{
  background-color: #36393E;
  color: #B1BDA7;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center; /* Safari */
    justify-content:         center; /*space-around*/
  
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap:         wrap;
  
  
    
}
 
.flex-item {
    background-color: grey;
    height: 100px;
    margin: 1px;
    display: flex;
    
  flex-grow: 1;
  
  border: 1px solid rgba(0,0,0,0.5);
	border-bottom: 3px solid rgba(0,0,0,0.5);
	
	
	-moz-border-radius: 3px;
	border-radius: 3px;
	
	background: rgba(0,0,0,.45);
	
	box-shadow: 
        0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
        inset 0 1px rgba(255,255,255,0.3), /* Top light Line */
        inset 0 10px rgba(255,255,255,0.2), /* Top Light Shadow */
        inset 0 10px 20px rgba(255,255,255,0.25), /* Sides Light Shadow */
        inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */
  
}

.flex-item a{  
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.flex-item a img{
  
	max-height: 240px;
	max-width: 200px;
  margin-left: auto; /*centers image*/
  margin-right: auto; /*centers image*/
  
}  

.flex-itemHead {
  flex-grow: 3;
  
  height: 100px;
  margin: 1px;
  display: flex;
  justify-content: center;
  aligh-self: Stretch;
}

/**/

.banner{
  background-image:url("http://maurtopia.com/doombucket/games/images/santabg.png");
  background-size:cover;
  position:relative;
  height:250px;
  margin-bottom: 50px;
  
  text-align:center;
  
}

.banner p{
  margin: 0px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  
  color: #000;
  Font-size: 28px;
}

.content{
  text-align: center;
}

.frameHolder{
  text-align: center;
}

.frameHolder iframe{
  height: 400px;
  width: 510px;
  scrolling: no;
  overflow:hidden;
}
/**/
.flex-itemB {
    background-color: grey;
    height: 75px;
    margin: 1px;
    display: flex;
  width: 125px;
    	max-width: 125px;
  flex-grow: 1;
  
  border: 1px solid rgba(0,0,0,0.5);
	border-bottom: 3px solid rgba(0,0,0,0.5);
	
	
	-moz-border-radius: 3px;
	border-radius: 3px;
	
	background: rgba(0,0,0,.45);
	
	box-shadow: 
        0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
        inset 0 1px rgba(255,255,255,0.3), /* Top light Line */
        inset 0 10px rgba(255,255,255,0.2), /* Top Light Shadow */
        inset 0 10px 20px rgba(255,255,255,0.25), /* Sides Light Shadow */
        inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */
  
}

.flex-itemB a, .flex-itemG a{  
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  
  text-align:center;
  text-decoration:none;
    color: #CCC;
  Font-size: 28px;
}

.flex-itemG a{  
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  
  text-align:center;
  text-decoration:none;
    color: #CCC;
  Font-size: 28px;
}

.flex-itemB a img, .flex-itemG a img{
  
	max-height: 240px;
	max-width: 100px;
  margin-left: auto; /*centers image*/
  margin-right: auto; /*centers image*/
  
}  

.flex-containerB {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around; /* Safari */
    justify-content:         space-around; /*space-around*/
  
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap:         wrap;
  
  
    
}

.flex-itemG {
    background-color: grey;
    height: 75px;
    margin: 1px;
    display: flex;
  width: 100%
  flex-grow: 1;
  
  border: 1px solid rgba(0,0,0,0.5);
	border-bottom: 3px solid rgba(0,0,0,0.5);
	
	
	-moz-border-radius: 3px;
	border-radius: 3px;
	
	background: rgba(0,0,0,.45);
	
	box-shadow: 
        0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
        inset 0 1px rgba(255,255,255,0.3), /* Top light Line */
        inset 0 10px rgba(255,255,255,0.2), /* Top Light Shadow */
        inset 0 10px 20px rgba(255,255,255,0.25), /* Sides Light Shadow */
        inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */
  
}