@charset "utf-8";

@import url("//hello.myfonts.net/count/41bc43");
  
@font-face {
	font-family: "sofia-pro";
	src: url('../webfonts/SofiaProRegular/font.woff2') format('woff2'), url('../webfonts/SofiaProRegular/font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: "sofia-pro";
	src: url('../webfonts/SofiaProRegularitalic/font.woff2') format('woff2'), url('../webfonts/SofiaProRegularitalic/font.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
	font-family: "sofia-pro";
	src: url('../webfonts/SofiaProBold/font.woff2') format('woff2'), url('../webfonts/SofiaProBold/font.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
	font-family: "sofia-pro";
	src: url('../bold/SofiaProBolditalic/font.woff2') format('woff2'), url('../webfonts/SofiaProBolditalic/font.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

html { 
	margin: 0px;
	min-height: 100%;
}
 
:focus {
	 outline:0; 
	 -moz-outline:0; 
} 

img {
	vertical-align: baseline;
}

span,div {
	zoom: 1;
}			   

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

img {
	display: block;
}

a {
	zoom: 1;
	color: inherit;
}
	
a img {
	border-width: 0px;
}	   

a:hover  {
	color: inherit;
}

form {
	margin: 0px;
	padding: 0px;
}
	
sup { 
	vertical-align: baseline;
	position: relative;
	top: -0.5em;
	font-size: 70%;
}

ul {
	padding-left: 1.5em;
}

html {
	overflow-x: hidden;
}	 	

body {	 
	box-sizing: border-box;
	position: relative;
	margin: 0;
	padding: 0px;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: sofia-pro,sans-serif;
	font-size: 15px;
	line-height: 1.2;
	background-color: #e5eaed;
	color: black;
	min-height: 100vh;
	padding-bottom: 17vw;
	overflow-x: hidden;
}	 

/**** HEADER ****/

.header {
	display: inline-block;
	position: absolute;
	z-index: 99;
	right: -10vw;
	top: -32vw;
	width: 50vw;
	height: 50vw;
	border-radius: 50%;
	background-color: white;
}

.header .logo {
	display: inline-block;
	position: absolute;
	left: 14.5vw;
	top: 35.7vw;
	width: 19.1vw;
	text-decoration: none;
}	

/**** MAIN ****/

.main {
	position: relative;
	font-size: 0;
}

.panel { 
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	vertical-align: top;
	width: 50%;
	height: 33vw;
	font-size: 1.5vw;
	line-height: 1.12;
	overflow: hidden;
	color: white;
	padding: 4vw;
}

.panel.big { width: 100%; height: 42.5vw; }

.panel.col-1 { background-color: #01304b; }
.panel.col-2 { background-color: #015068; }
.panel.col-3 { background-color: #012738; }

.panel h1 { 
	font-size: 2.8em;
	margin-top: 3.5em;
	margin-bottom: 0.3em;
	max-width: 60%;
	color: #60efc0;
}

.panel h2 { 
	font-size: 2.2em;
	max-width: 85%;
	margin-top: 0.1em;
	margin-bottom: 0.3em;
}

.panel a { color: #60efc0; }
.panel a:hover { color: white; }

.panel .cornerlink {
	position: absolute;
	right: 8%;
	bottom: 7%;
}

.panel .cornerlogo {
	position: absolute;
	left: -8%;
	bottom: -52%;
	width: 53%;
	height: 78%;
	border-radius: 50%;
	background-color: white;
}

.panel .cornerlogo .logo-eda { 
	position: absolute;
	left: 30%;
	top: 14%;
	width: 47%;
}

.panel .cornerlogo .logo-ebutilities { 
	position: absolute;
	left: 30%;
	top: 16%;
	width: 41%;
}

.textpage { 
	min-height: 61vw;
	font-size: 1.5vw;
	line-height: 1.12;
	background-color: #01304b;
	color: white;
	padding: 4vw;
	padding-bottom: 10vw;
}

.textpage p { max-width: 70%; }

.textpage h1 { 
	font-size: 2.8em;
	margin-top: 3.5em;
	margin-bottom: 0.3em;
	max-width: 60%;
	color: #60efc0;
}

/**** FOOTER ****/

.footer {
	position: absolute;
	left: 1.8vw;
	bottom: 1.5vw;
	width: calc(100% - 3.6vw);
	color: #01304b;
	/* padding: 10vw 1.8vw 1vw 1.8vw; */
	font-size: 1.6vw;
}

.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }

.footer .footermenu {
	position: absolute;
	right: 0;
	bottom: 0;
	text-align: right;
	margin: 0;
	padding: 0;
}

.footer .footermenu li { 
	display: inline-block;
	list-style: none;
	margin-left: 1em;
}

/**** SMALL SCREENS ****/

@media only screen and (max-width: 800px) {	
	body { padding-bottom: 36vw; }
	.header { right: -10vw; top: -38vw; width: 62vw; height: 62vw; }
	.header .logo { left: 14.5vw; top: 41.5vw; width: 30vw; }	
	.panel { width: 100% !important; height: 63vw !important; font-size: 3vw; padding: 7.5vw; }
	.panel h1 { font-size: 2.2em; max-width: none; margin-top: 3.1em; }
	.textpage { font-size: 3vw; padding: 7.5vw; padding-bottom: 30vw; }
	.textpage p { max-width: none; }
	.textpage h1 { max-width: none; font-size: 2.2em; }
	.footer { font-size: 2.6vw; text-align: center; padding-bottom: 6vw; }
	.footer .footermenu { position: relative; margin-top: 1em; top: 0; right: 0; text-align: center; padding-top: 1vw; }
	.footer .footermenu li { margin-left: 0.5em; margin-right: 0.5em; } 
}