@charset "utf-8";
/* CSS Document */
*{
 font-family: 'Gabriela';	
}
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
body{
	height:1000px;
}
.icona{
	width:100%;
}
.icona img{
	position: absolute;
	width: 10%;
	left: 5%;
	top:2vw;
}
.veu{
	position: relative;
	left: 95%;
	width:5%;
}
#veu{
	width: 100%;
}

.titular{
	position:relative;
	width:90%;
	left: 5%;
	text-align:center;
	font-size: 5vw;
	font-weight: 300;
}
#foto1{
	position:relative;
	width:90%;
	left: 5%;
	
}#foto2{
	position:relative;
	max-width: 95%;
	max-height: 30%;
	left: 2vw;		
}
#foto3{
	position:relative;
	max-width: 95%;
	max-height: 30%;
	left: 2vw;	
}
#foto4{
	position:relative;
	max-width: 95%;
	max-height: 30%;
	left: 2vw;	
}
#foto5{
	position:relative;
	max-width: 95%;
	max-height: 30%;
	left: 2vw;	
}#foto6{
	position:relative;
	max-width: 95%;
	max-height: 30%;
	left: 2vw;	
}
.parrf{
	position:relative;
	width:95%;
	left: 3%;
	text-align:left;
	font-size: 5vw;
}
.color1{
	display: block;
	background-color: brown;
	position:relative;
	width:75%;
	height: 24vw;
	left: 5%;
	text-align:center;
	font-size: 4.3vw;
	font-weight: 600;
	padding: 3vw;
	padding-top: 5vw;
}
#edicio{
	position:relative;
	width:10%;
	left: 90%;
	top: -20vw;
}
.parrf2{
	position:relative;
	width:80%;
	left: 3%;
	top: -10vw;
	text-align:left;
	font-size: 5vw;
}
#girar{
	position:relative;
	width:10%;
	left: 110%;
	top: 0vw;
}
#retallar{
	position:relative;
	width:10%;
	left: 110%;
	top: 0vw;
}
#llums{
	position:relative;
	width:10%;
	left: 110%;
	top: 0vw;
}
#controls-llums{
	position:relative;
	width:140%;
	left: -20%;
	top: 0.3vw;
}
#nata{
	position:relative;
	width:100%;
	left: 0%;
	top: -8vw;
}
.exemple{
	display: block;
	position:relative;
	width:90%;
	height: 20vw;
	left: 2%;
	top: -6vw;
	text-align:center;
	background-color: brown;
	font-size: 4vw;
	color: white;
	font-weight: 600;
	padding: 3vw;
	padding-top: 4vw;
	margin-bottom: 10vw;
}
#ombres{
	position:relative;
	width:10%;
	left: 110%;
	top: 0vw;
}
#brillos{
	position:relative;
	width:10%;
	left: 110%;
	top: 0vw;
}
#saturacio{
	position:relative;
	width:10%;
	left: 110%;
	top: 0vw;
}

@media (min-width: 640px) and (max-width: 1200px){
.icona{
	width:100%;
}
.icona img{
	position: absolute;
	width: 15%;
	left: 5%;
	top:2vw;
}
.veu{
	position: relative;
	left: 95%;
	width:5%;
}
#veu{
	width: 100%;
}

.titular{
	position:relative;
	width:80%;
	left: 10%;
	text-align:center;
	font-size: 3.5vw;
	font-weight: 600;
}
.parrf{
	position:relative;
	width:90%;
	left: 5%;
	text-align:left;
	font-size: 3vw;
}
.color1{
	display: block;
	background-color: brown;
	position:relative;
	width:70%;
	height: 6vw;
	left: 5%;
	text-align:center;
	font-size: 3vw;
	font-weight: 600;
	padding: 4vw;
}
#edicio{
	position:relative;
	width:10%;
	left: 90%;
	top: -10vw;
}
.parrf2{
	position:relative;
	width:80%;
	left: 5%;
	top: -10vw;
	text-align:left;
	font-size: 3vw;
}
#girar{
	position:relative;
	width:10%;
	left: 100%;
	top: 0vw;
}
#retallar{
	position:relative;
	width:10%;
	left: 100%;
	top: 0vw;
}
#llums{
	position:relative;
	width:10%;
	left: 100%;
	top: 0vw;
}
#controls-llums{
	position:relative;
	width:120%;
	left: -10%;
	top: 0.4vw;
}
#nata{
	position:relative;
	width:100%;
	left: 0%;
	top: -8vw;
}
.exemple{
	display: block;
	position:relative;
	width:90%;
	height: 10vw;
	left: 2%;
	top: -6vw;
	text-align:center;
	background-color: brown;
	font-size: 3vw;
	color: white;
	font-weight: 600;
	padding-top: 4vw;
	margin-bottom: 10vw;
}
#ombres{
	position:relative;
	width:10%;
	left: 100%;
	top: 0vw;
}
#brillos{
	position:relative;
	width:10%;
	left: 100%;
	top: 0vw;
}
#saturacio{
	position:relative;
	width:10%;
	left: 100%;
	top: 0vw;
}
}
@media (min-width: 1200px) {
.icona{
	width:100%;
}
.icona img{
	position: absolute;
	width: 10%;
	left: 5%;
	top:2vw;
}
.veu{
	position: relative;
	left: 95%;
	width:5%;
}
#veu{
	width: 100%;
}

.titular{
	position:relative;
	width:80%;
	left: 10%;
	text-align:center;
	font-size: 2.8vw;
	font-weight: 600;
}
.parrf{
	position:relative;
	width:90%;
	left: 5%;
	text-align:left;
	font-size: 2vw;
}
.color1{
	display: block;
	background-color: brown;
	position:relative;
	width:70%;
	height: 5vw;
	left: 5%;
	text-align:center;
	font-size: 2.5vw;
	font-weight: 600;
	padding-top: 2vw;
}
#edicio{
	position:relative;
	width:6%;
	left: 90%;
	top: -8vw;
}
.parrf2{
	position:relative;
	width:80%;
	left: 5%;
	top: -7vw;
	text-align:left;
	font-size: 2vw;
}
#girar{
	position:relative;
	width:6%;
	left: 102%;
	top: 0vw;
}
#retallar{
	position:relative;
	width:6%;
	left: 102%;
	top: 0vw;
}
#llums{
	position:relative;
	width:6%;
	left: 102%;
	top: 0vw;
}
#controls-llums{
	position:relative;
	width:90%;
	left: 5%;
	top: 0.4vw;
}
#nata{
	position:relative;
	width:80%;
	left: 10%;
	top: -8vw;
}
.exemple{
	display: block;
	position:relative;
	width:80%;
	height: 5vw;
	left: 10%;
	top: -6vw;
	text-align:center;
	background-color: brown;
	font-size: 2vw;
	color: white;
	font-weight: 600;
	padding-top: 2.2vw;
	margin-bottom: 10vw;
}
#ombres{
	position:relative;
	width:6%;
	left: 102%;
	top: -3vw;
}
#brillos{
	position:relative;
	width:6%;
	left: 102%;
	top: -3vw;
}
#saturacio{
	position:relative;
	width:6%;
	left: 102%;
	top: -3vw;
}
}