/*This is a 480-767px mediasetting*/
@media screen and (min-width: 480px) and (max-width:767px) 
{

body {
	background-color: #CBD0D8;
	font-family: Arial, Helvetica, Sans-serif;
	font-size: 100%;
	margin-left: 0em;
	margin-right:0em;}

header {  
	padding-bottom: 1em;
	border-bottom:3px solid black;
	margin-top: 0%
	margin-bottom: 2%;}

h1 {
	color: red;
	font-size:150%;
	margin-bottom: 1%;}

.backg {
	top-margin: 1em;
	color: brown;
	text-align: left;}
.ges {
	top-margin: 0em;
	color: brown;
	text-align: left;}

.energysec{
	border:solid;
	border-width:0.5em;
	border-color:black;}

#navbar ul {
	list-style-type:none;}
#navbar ul li {
	float:left;}
#navbar ul li a {
	text-align: center;
	display: block;
	width: 175px;
	padding: 1em 0;
	text-decoration: none;
	background color: grey;
	color: blue;
	font-weight: bold;
	border-right: 2px solid white; }
#navbar ul li a.lastitem {
	border-right:none}

#imggeo {
	height: 90%;
	width: 90%;
	margin-top:3em;
	margin-bottom: 3em;	
	float: left;
	margin-right:1em;}
		
.row {
  	display: flex; }
.column {
  	flex: 25%;
  	padding: 5px;
	width:  232px;
    	height: 140px;
 	object-fit: cover;}
footer {
	font-size: 80%;
	text-align: right;}

.footerimg{
	float: right;
	width: 80%;
	height: 70%;
	padding: 1px;
	margin: 5px
	border: 0.5px solid black;}
}
/*This is a 767px - 1025px mediasetting*/
@media screen and (min-width: 768px) and (max-width:1025px) 
{
body {
	background-color: #CBD0D8;
	font-family: Arial, Helvetica, Sans-serif;
	font-size: 100%;
	margin-left: 0em;
	margin-right:0em;}

header {  
	padding-bottom: 1em;
	border-bottom:3px solid black;
	margin-top: 0%
	margin-bottom: 2%;}

h1 {
	color: red;
	font-size:150%;
	margin-bottom: 1%;}

.backg {
	top-margin: 1em;
	color: brown;
	text-align: left;}
.ges {
	top-margin: 0em;
	color: brown;
	text-align: left;}

.energysec{
	border:solid;
	border-width:0.5em;
	border-color:black;}

#navbar ul {
	list-style-type:none;}
#navbar ul li {
	float:left;}
#navbar ul li a {
	text-align: center;
	display: block;
	width: 175px;
	padding: 1em 0;
	text-decoration: none;
	background color: grey;
	color: blue;
	font-weight: bold;
	border-right: 2px solid white; }
#navbar ul li a.lastitem {
	border-right:none}

#imggeo {
	height: 90%;
	width:90%;
	margin-top:3em;
	margin-bottom: 3em;	
	float: left;
	margin-right:1em;}
		
.row {
  	display: flex; }
.column {
  	flex: 25%;
  	padding: 5px;
	width:  232px;
    	height: 140px;
 	object-fit: cover;}
footer {
	font-size: 80%;
	text-align: right;}

.footerimg{
	float: right;
	width: 80%;
	height: 70%
	padding: 1px;
	margin: 5px
	border: 0.5px solid black;}
}