/*  CSS for Liberador */

/*  Global defaults -------------------------- */

html {
	width: 100%;
	height: 100%;
}
body{
	background-color: rgb(240,240,240); /* ERASE AFTERWARDS */
	font-family: "Helvetica Neue", Helvetica, Ariel, sans-serif;
	font-size: 1em;
}

h1 {
	font-weight: bold;
	font-size: 1.2em;
}
a {
	text-decoration: none;
}
footer {
	font-size: 0.8em;
}

button {
	line-height: 1.8em;	
	background: rgb(80,80,80);
	border-style: solid;
	border-width: 0.05em;
	border-color: rgb(200,200,200);
	border-radius: 0.4em;
	margin: 1em 1em;
	padding: 0.6em 0.6em;
	color: rgb(255,255,255);
	font-size: 0.8em;
}


/* --------------------------------------------- */
/* HEADER MOBILE-FIRST (optimally 320-420px) */

header {
	background:rgb(20,40,80);
	color: rgb(255,255,235);
	line-height: 4em;
}

#logo {
	font-size: 180%;
	color: inherit;
}

#hamburger {
	font-size: 180%;
	margin: 0 1em 0 0;
	width: 1em;
	float: right;
	display: block;
    cursor: pointer;
}

#toggle{
	display: none;
}

header nav a {
	font-size: 100%;									
	color: inherit;
	margin: 0 2em;
	text-align: left;
	width: 100%;
	display: block;
}

.navtop {
	display: none;
}

#toggle:checked + .navtop {
	display: block;
}

.material-icons {
    vertical-align: -0.3em; 
}

/*  HEADER TABLET:  media query breakpoint at 576px (36em) optimally for 600-800px ------ */

@media only screen and (min-width: 36em) {
    body { background-color: yellow; }

}

/*  HEADER LAPTOP:  media query breakpoint at 832px (52em) ------ */

@media only screen and (min-width: 52em) {
	body { background-color: orange; }
    header {
    	/*  create flexbox for 3 header elements  */
		display: flex;
		align-items: center;
		justify-content: space-between;
    }

    #hamburger {
    	display: none;
    }

    header nav a {
    	margin: 0;
		text-align: left;
		padding: 0.6em;
		clear: right;
		display: inline;
	}

	.navtop {
	display: block;
	}

}

/* WRAPPER for the rest of the website */

.wrapper {
	width: 100%;
	display: grid;
	grid-auto-rows: minmax(3.5em,auto);
  	grid-column-gap: 0.6em;
  	grid-row-gap: 1em;
  	grid-template-areas:
  	'main' 
  	'aside'
  	'section_insurance'
  	'article_insurance'
  	'section_energy'
  	'article_energy'
  	'section_telecom'
  	'article_telecom'
  	'section_mortgage'
  	'article_mortgage'
  	'footer'; 
 }

main {
	grid-area: main;
}

aside {
	grid-area: aside;
	background: rgb(220,220,220);
}

section {

}
#section_insurance {
	grid-area: section_insurance;
}
#section_energy {
	grid-area: section_energy;
}
#section_telecom {
	grid-area: section_telecom;
}
#section_mortgage {
	grid-area: section_mortgage;
}
article {
	background:Fuchsia;
}
#article_insurance {
	grid-area: article_insurance;
}
#article_energy {
	grid-area: article_energy;
}
#article_telecom {
	grid-area: article_telecom;
}
#article_mortgage {
	grid-area: article_mortgage;
}

footer {
	grid-area: footer;
	background:LightGrey;
}

/* MAIN MOBILE FIRST */

main {
	align: center;
}
#pitch {
	font-size: 130%;
	font-weight: bold;
	color: Green;
	text-align: center;
} 
.responsive_image {
	width: 80%;
	height: auto;
	display: block;
	margin: auto;	
	margin-top: 1em;
	margin-bottom: 0.4em;
}

aside {
	padding: 0.7em;
}
aside nav a {
display: block;
}
.button_aside {
	background: rgb(30,70,130);
	font-size: 100%;
	color: rgb(255,255,235);
	width: 10em;
	padding: 0.7em 0em;
	margin: 0.7em;
	border-radius: 0.3em;
	border-top: 0.06em solid #969696;
	box-shadow: 0.06em 0.12em rgb(220,220,250);
	margin-left: auto;
	margin-right: auto;
}

/*  MAIN TABLET:  media query breakpoint at 576px (36em) optimally for 600-800px ------ */

@media only screen and (min-width: 36em) {

	body { background-color: rgb(240,240,240); }
	.wrapper {
		grid-template-areas:
		  	'main main main main aside aside'
		  	'article_insurance article_insurance article_insurance section_insurance section_insurance section_insurance'
		  	'section_energy section_energy section_energy article_energy article_energy article_energy'
		 	'section_telecom section_telecom section_telecom article_telecom article_telecom article_telecom'
		 	'section_mortgage section_mortgage section_mortgage article_mortgage article_mortgage article_mortgage'
		  	'footer footer footer footer footer footer'; 
}
	#pitch {
		font-size: 160%;
	}
	.button_aside {
		padding: 1.0sem 0em;
		margin: 1.5em;
	}
}

/*  MAIN LAPTOP:  media query breakpoint at 832px (52em) ------ */

@media only screen and (min-width: 52em) {

	body { background-color: rgb(240,240,240); }
	.button_aside {
		padding: 1.1em 0em;
		margin: 2.5em;
	}
}

/* SECTIONS (input forms) MOBILE FIRST */

section {
	background: rgb(259,259,259);
	border-style: solid;
	border-width: 0.05em;
	border-color: rgb(200,200,200);
	border-radius: 0.3em;
	margin: 0.2em 0.3em 0.2em 0.3em;
	padding: 0.8em 0.8em;
}

.input_box {
	font-family: "Helvetica Neue", Helvetica, Ariel, sans-serif;
	font-size: 0.9em;
	color: rgb(100,100,100);
	border-radius: 0.2em;
	border: 0.07em solid;
	border-color: rgb(200,200,200);		
	height: 2em;
	width: 98%;
	margin: 0.2em 0em 0.2em 0em;
	padding: 0em 0em 0em 0.5em;
}

.select_box {
	border-radius: 0.2em;
	border: 0.07em solid;
	border-color: rgb(200,200,200);		
	height: 2em;
	width: 100%;
	margin: 0.2em 0em 0.2em 0em;
}

section select {
	font-family: "Helvetica Neue", Helvetica, Ariel, sans-serif;
	font-size: 0.9em;
	color: rgb(100,100,100);
	width: 98%;
	height: 98%;
	background: transparent;
	border: transparent;
}
section button {
	float: right;
}

article {
	background: rgb(220,220,250);
	border-style: solid;
	border-width: 0.05em;
	border-color: rgb(200,200,200);
	border-radius: 0.3em;
	margin: 0.2em 0.3em 0.2em 0.3em;
	padding: 0.8em 0.8em;
	line-height: 1.2em;
}
article li {
	list-style-type: circle;
	list-style-position: inside;
	line-height: 2em;
}
#section_insurance {

}

/* ARTICLES (input forms) MOBILE FIRST */

#article_insurance {
	
}

/* FOOTER MOBILE FIRST */

footer span {
	margin: 1em;
	float: left;
}

.navfooter a {
	float: right;
	margin: 1em 0.8em;
	color: rgb(5,5,5);
}