body {
font-family: 'Lobster Two', sans-serif;
font-size:18px;
margin:0 auto;
}

a {
color:#1177FF;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}

aside {
float:right;
padding-right:2%;
}
aside img {
width:20px;
margin-top:15px;
vertical-align:bottom;
}

header {
padding:4px 0 2px 0;
margin-bottom:1px;
background:linear-gradient(to bottom, #f29 0%, #f8b 100%);
text-align:center;
color:#fff;
text-shadow:1px 1px black;
font-size:2em;
}
header img {
margin:0 15px -4px 0;
width:40px;
}
header a {
color:#fff;
text-decoration:none;
}

nav {
margin-bottom:9px;
background:linear-gradient(to bottom, #f8a 0%, #fff 100%);
text-align:center;
text-shadow:1px 1px black;
font-size:1em;
}
nav ul {
margin:0;
padding:0;
}
nav li {
display:inline;
}
nav li a {
padding:1px 1%;
color:#c56;
}
nav li a:hover {
background:linear-gradient(to bottom, #f8a 0%, #fff 50%);
}
nav form {
display:inline;
}
nav select {
padding:1px 0 1px 0.5%;
background:linear-gradient(to bottom, #f8a 0%, #fff 100%);
font-size:1em;
font-family: 'Lobster Two', sans-serif;
color:#c56;
text-shadow:1px 1px black;
text-align:center;
border:none;
cursor:pointer;
}
nav select:hover {
background:linear-gradient(to bottom, #f8a 0%, #fff 50%);
text-decoration:underline;
}

article {
margin:0 2%;
}

h1 {
margin:9px;
text-align:center;
font-size:1.3em;
}

h2 {
margin:3px;
font-size:1.1em;
font-weight:normal;
}

footer {
margin:2px;
text-align:center;
font-size:0.8em;
}

.xampuext {
position:relative;
display:inline-block;
vertical-align:top;
width:49%;
margin-top:22px;
margin-right:1%;
}
.xampuimgolor {
position:absolute;
top:-25px;
right:90px;
background-size:contain;
width:49px;
height:42px;
}
.xampuint {
border:2px solid #f29;
border-radius:10px;
padding:8px;
min-height:230px;
}

.hover:hover {
opacity:0.7;
}

.ininoia {
float:left;
width:30%;
max-width:110px;
margin-right:10px;
}

.catolor {
float:left;
width:35%;
max-width:210px;
}



/*MediaQueries*/
@media (max-device-width:739px) {
.xampuext {
width:100%;
}
}

@media (max-device-width:479px) {
.max480 {
display:none;
}
/*treure el padding-left de 1px perquè és quasiigual a 0.5% sobre 320px i aprofito per treure el select després de nav perquè amb nav ja aplica sobre tot
nav select {
padding-left:1px;
font-size:0.8em;
}
*/
nav {
font-size:0.8em;
}
}