#headline {
padding: 0.8em;
font-family: Roboto,sans-serif;
color: black;
background-image: url(../foto/sfondi/sfondo5.gif);
}
#headline {
padding: 20px 5%;
}
#headline #blurb {
float: left;
font-weight: 200;
width: 50%;
font-size: 18px;
padding-right: 10px;
}
#headline #register {
padding: 20px;
float: right;
width: 50%;
font-weight: 300;
}
#headline br {
clear: both;
}
.container {
max-width: 800px;
}
#section1 {
width: 50%;
float: right;
padding-right: 1em;
}
#section2 {
margin: 1%;
}

@media (query) {
/* CSS Rules used when query matches */
}


<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)"
href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)"
href="landscape.css">
<style>
@media (min-width: 500px) and (max-width: 600px) {
h1 {
color: fuchsia;
}

.desc:after {
content:" In fact, it's between 500px and 600px wide.";
}
}



@media
screen and (max-width: 600px) { table thead { display: none; } table td
{ display: block; position: relative; padding-left: 50%; padding-top:
13px; padding-bottom: 13px; text-align: left; background: #e9e9e9; }
table td:before { content: attr(data-th) " :"; display: inline-block;
color: #000000; background: #e9e9e9; border-right: 2px solid
transparent; position: absolute; top: 0; left: 0; bottom: 0; width:
33%; max-height: 100%; font-size: 16px; font-weight: 300; padding-left:
13px; padding-top: 13px; } }


text.css
h1 {font-family: Arial, Helvetica, sans-serif; font-size: 14pt; color:
black}

h2 {font-family: Arial, Helvetica, sans-serif; font-size: 12pt; color:
black}

h3 {font-family: Arial, Helvetica, sans-serif; font-size: 11pt; color:
black}

h4 {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color:
black}

h6 {font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: black}


.google-maps {
  position: relative;
  padding-bottom: 75%; // Definisco l'aspect ratio
  height: 0;
  overflow: hidden;
}
.google-maps > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
