@charset "utf-8";
body{
	background: #9F0909;
}
.icona{
	width: 100%;
}
.icona img{
	position: absolute;
	width: 30%;
	left: 10%;
	top:4vw;
}
.caixa1{
	position: relative;
	top: 16vw;
    left: 0%;
	width: 100%;
}
#m1,#m2,#m3,#m4,#m5,#m6 {
    width: 100%;    
}
.xarxes{
    position:absolute;
	width: 30%;
    height: 8vw;
	top: 6vw;
    left: 58%;
    z-index: 1000;
}
#fbk{
    position:relative;
	height: 100%;
	left: 0%;
    padding-right: 2vw;
}
#inst{
    position:relative;
	height: 100%;
	left: -5%;    
    padding-left: 2vw;
}
.copy{
	position: absolute;
	top: 8vw;
	right: 4vw;
	color: white;
	font-family: 'Gabriela';
	text-align: center;
	font-size: 3vw;
    z-index: 1000;
}
.exemples{
    position: relative;
    display: block;
    top: 20vw;
    width: 80%;
    left: 10%;
    color: white;
	font-family: 'Gabriela';
	text-align: center;
	font-size: 6vw;
}
.qr1{
    position: relative;
    width: 100%;
    top: 22vw;
    text-align: center;
}
.qr2,.qr3,.qr4{
    position: relative;
    width: 100%;
    top: 24vw;
}
#codi1{
    position: relative;
    width: 28%;
}
#codi2,#codi3,#codi4,#codi5,#codi6,#codi7,#codi8,#codi9,#codi10{
    position: relative;
    width: 28%;
    padding: 2vw;
}

@media (min-width: 840px) and (max-width: 1200px){
.icona img{
	position: absolute;
	width: 30%;
	left: 10%;
	top:4vw;
}
.caixa1{
	position: relative;
	top: 18vw;
    left: 0%;
	width: 100%;	
}
    #m1,#m2,#m3,#m4,#m5,#m6 {
    width: 100%;    
}
.xarxes{
    position:absolute;
	width: 30%;
    height: 5vw;
	top: 6vw;
    left: 62%;
}
#fbk{
    position:relative;
	height: 100%;
	left: 0%;
    padding-right: 2vw;
}
#inst{
    position:relative;
	height: 100%;
	left: -5%;    
    padding-left: 2vw;
}
.copy{
	position: absolute;
	top: 7vw;
	right: 4vw;
	color: white;
	font-family: 'Gabriela';
	text-align: center;
	font-size: 3vw;
}
.exemples{
    position: relative;
    display: block;
    top: 19vw;
    width: 80%;
    left: 10%;
    color: white;
	font-family: 'Gabriela';
	text-align: center;
	font-size: 3vw;
}
.qr1{
    position: relative;
    width: 100%;
    top: 21vw;
    text-align: center;
}
.qr2,.qr3,.qr4{
    position: relative;
    width: 100%;
    top: 22vw;
    text-align: center;
}
#codi1{
    position: relative;
    width: 20%;
}
#codi2,#codi3,#codi4,#codi5,#codi6,#codi7,#codi8,#codi9,#codi10{
    position: relative;
    width: 20%;
    padding: 4vw;
}
}
@media (min-width: 1200px) {
.icona img{
	position: absolute;
	width: 13%;
	left: 10%;
	top:1.2vw;
}
.caixa1{
	position: relative;
	top: 7vw;
	width: 100%;
	left: 0%;
}
#m1,#m2,#m3,#m4,#m5,#m6 {
    width: 100%;    
}
.xarxes{
    position:absolute;
	width: 30%;
    height: 4vw;
	top: 2vw;
    left: 68%;
}
#fbk{
    position:relative;
	height: 100%;
	left: 0%;
    padding-right: 2vw;
}
#inst{
    position:relative;
	height: 100%;
	left: -5%;    
    padding-left: 2vw;
}
.copy{
	position: absolute;
	top: 3vw;
	right: 3vw;
	color: white;
	font-family: 'Gabriela';
	text-align: center;
	font-size: 2.4vw;
}
.exemples{
    position: relative;
    display: block;
    top: 7vw;
    width: 80%;
    left: 10%;
    color: white;
	font-family: 'Gabriela';
	text-align: center;
	font-size: 3vw;
}
.qr1{
    position: relative;
    width: 100%;
    top: 9vw;
    text-align: center;
}
.qr2,.qr3,.qr4{
    position: relative;
    width: 100%;
    top: 10vw;
    text-align: center;
}
#codi1{
    position: relative;
    width: 20%;
}
#codi2,#codi3,#codi4,#codi5,#codi6,#codi7,#codi8,#codi9,#codi10{
    position: relative;
    width: 20%;
    padding: 4vw;
}
}