html {
	margin: 0;
	padding: 0;
	background: #a53235;
overflow-x: hidden;
overflow-y: hidden;	
	
	}

.container {
	max-width: 100vw;
	max-height: 100vh;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	color: #fff;
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 25vh 10vh 30vh 30vh 05vh;
	grid-template-areas:  "ca ca"
     						        "st st"
							          "lo l1"
							          "lo l2"
							          "ro ro";
	
}

#cab {
  background: #a53235;
  grid-area: ca;
  display: flex;
  justify-content: center;
  align-items: center;
      
}

#sub {
  background: #a53235;
  grid-area: st;  
  display: flex;
  justify-content: center;
  align-items: center;
	
}
#log {
  background: #a53235;
  grid-area: lo;  
  display: flex;
  justify-content: end;
  align-items: center;

}
#lo1 {
  background: #a53235;
  grid-area: l1;  
  display: flex;
  justify-content: start;
  align-items: center;
}
#lo2 {
  background: #a53235;
  grid-area: l2; 
  display: flex;
  justify-content: start;
  align-items: center;    
}
#rod {
  background: #a53235;
  grid-area: ro;  
  display: flex;
  justify-content: center;
  align-items: flex-start;
  color: rgb(54, 27, 27);
}

@media only screen and (max-width: 600px) {
.container {
	color: #fff;
	display:grid;
	grid-template-columns: 100%;
	grid-template-rows: 50vh 05vh 20vh 20vh 05vh;
	grid-template-areas:  "lo"
     						        "st"
							          "l1"
                        "l2"
							          "ro";
	
}  

#log {
	background: #a53235;
	grid-area: lo;  
	display: flex;
	justify-content: center;
	align-items: center;
  
  }
  #lo1 {
	background: #a53235;
	grid-area: l1;  
	display: flex;
	justify-content: center;
	align-items: center;
  }
  #lo2 {
	background: #a53235;
	grid-area: l2; 
	display: flex;
	justify-content: center;
	align-items: center;    
  }

  
}