@font-face {
	font-family: 'Futura';
	src: url('../fonts/futura/FuturaStd-Bold.eot');
	src: local('☺'), url('../fonts/futura/FuturaStd-Bold.woff') format('woff'), url('../fonts/futura/FuturaStd-Bold.ttf') format('truetype'), url('../fonts/futura/FuturaStd-Bold.svg') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Futura';
	src: url('../fonts/futura/FuturaStd-Medium.eot');
	src: local('☺'), url('../fonts/futura/FuturaStd-Medium.woff') format('woff'), url('../fonts/futura/FuturaStd-Medium.ttf') format('truetype'), url('../fonts/futura/FuturaStd-Medium.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

html, body {margin: 0; font-family: 'Futura' !important;}
.left {margin-left: 35px;}
.clear{clear:both;}
.main {width: 100%; min-height: 100%; background: url("../img/fons-principal.png") center center fixed;}
.main p {text-align: center; color: #fff; font-size: 30px; font-weight: bold; margin:0px; }
a.marta{float:right;}
a.jordi{float:left;}
.continguthome{max-width:700px;width:100%;height:400px; margin:auto;}
.botoprincipal {background-color: transparent; border: solid 2px #fff; color: #fff; margin-top: 200px; padding: 20px 30px; font-size: 15px; font-size: 20px; font-family: 'Futura';text-decoration:none;}
.botoprincipal.jordi:hover {background-color: #fff; color: rgb(167,202,205);}
.botoprincipal.marta:hover {background-color: #fff; color: rgb(219,182,196);}
.lletra-gris {color: rgb(138,138,138);}

#soc {width: 64%; float: left; font-size: 25px; font-weight: bold; margin: 35px;}
#soc.jordi {color: rgb(167,202,205);}
#soc.marta {color: rgb(219,182,196);}
#back {float: left; margin-top: 19px;}
#back.jordi img {border: solid 2px rgb(167,202,205); padding: 13px;}
#back.marta img {border: solid 2px rgb(219,182,196); padding: 13px;}
#back:hover {opacity: 0.7;}
#subs {width: 25%; float: right; padding-bottom: 15px; padding-right: 15px;}
#video {width: 100%; height: 500px; clear: both; background-image: url("../img/jordi.jpg"); background-size: cover; margin-bottom: 25px;}
.videomarta {width: 100%; height: 500px; clear: both; background-image: url("../img/marta.jpg") !important; background-size: cover; margin-bottom: 25px;}

#text {width: 750px;}

#subs button {cursor: pointer; background-color: transparent; padding: 20px 35px; margin-top: 20px; font-size: 16px; font-family: 'Futura';}
.jordi#subs button {color: rgb(219,182,196); border: solid 2px rgb(219,182,196);}
.jordi#subs button:hover {color: #fff; background-color: rgb(219,182,196);}
.marta#subs button {color: rgb(167,202,205); border: solid 2px rgb(167,202,205);}
.marta#subs button:hover {color: #fff; background-color: rgb(167,202,205);}
#video a {font-weight: bold; display: inline-block; text-decoration: none; cursor: pointer; position: relative; margin-left: 45%; margin-top: 17%; background-color: transparent; border: solid 2px #fff; color: #fff; font-size: 15px; padding: 25px 40px; font-family: 'Futura';}
#video a:hover {background-color: #fff; color: #000;}
#aporta {margin-top: 10px; width: 100%;}
#llista {width: 750px; margin-left: 35px !important;}
#llista form {font-family: 'Futura' !important; color: rgb(138,138,138);}
#llista pre {margin-top: 15px; margin-bottom: 0px;}
input {font-family: 'Futura' !important;}
select {padding: 8px;
border: none;
background-color: rgb(236,236,236);
color: rgb(138,138,138);
margin: 15px 0px;}
.titolForm {font-weight: bold;}
#no {font-family: 'Futura';}
.jordi #no {color: rgb(167,202,205);}
.marta #no {color: rgb(219,182,196);}

#compartir > p {  color: rgb(138,138,138); font-size: 16px; text-align: left; margin-bottom: 8px;}
#compartir img:hover {opacity: 0.7;}

input[type=text], input[type=email]{font-size: 16px; border: 0; background-color: rgb(236,236,236); padding: 12px; margin-right: 5px; margin-top: 15px; width: 265px;}
input[type=submit] {font-size: 17px;}
.jordi input[type=submit]:hover {background-color: rgb(167,202,205) !important; color: #fff !important;}
.marta input[type=submit]:hover {background-color: rgb(219,182,196) !important; color: #fff !important;}
.jordi input[type=submit] {background-color: transparent; color: rgb(167,202,205); border: solid 2px rgb(167,202,205); padding: 8px 35px; cursor: pointer;}
.marta input[type=submit] {background-color: transparent; color: rgb(219,182,196); border: solid 2px rgb(219,182,196); padding: 8px 35px; cursor: pointer;}
.marta.lupa {background-repeat:no-repeat;
	background-image: url("../img/lupa.png");
  height:52px;
  width:52px;
  background-position:top; background-size: 100% !important;}
 .marta.lupa:hover {background-position: bottom;background-color:#f00;}
 
 input[type=radio] {display: none;}
 #llista-inside {overflow: scroll; overflow-x: hidden; height: 250px;}
 .nomcanco {padding: 10px 10px; background-color: #fff;}
 .nomautor {padding: 10px 10px; }
 .label-llista {cursor: pointer; display: block; font-size: 16px; padding: 10px 0; background-color: rgb(240,240,240);
            border-bottom: solid 1px rgb(230,230,230);
            border-left: solid 1px rgb(230,230,230);
            border-right: solid 1px rgb(230,230,230);
            font-family: 'Futura';
 }
 #llista > form > pre > div > label:nth-child(2) {margin-top: 10px; border-top: solid 1px rgb(230,230,230);}
 #mail {margin-bottom: 40px;}
 #mail ~ input[type=submit] {margin-top: 16px; margin-left: 5px;}
 #mail-error {  margin-left: 10px; margin-top: 25px; position: absolute;}
 
 .jordi input[type=radio]:checked + label {color: #fff; background-color: rgb(147,182,185); border: solid rgb(230,230,230) 1px; border-top: none !important;}
 .jordi input[type=radio]:checked + label .nomcanco {background-color: rgb(167,202,205);}
 .marta input[type=radio]:checked + label {color: #fff; background-color: rgb(199,162,176); border: solid rgb(230,230,230) 1px; border-top: none !important;}
 .marta input[type=radio]:checked + label .nomcanco {background-color: rgb(219,182,196);}
 
@media screen and (max-width: 1545px) {#soc {width: 60%;} #subs {width: 26%;}}
@media screen and (max-width: 1305px) {#soc {width: 46%;} #subs {width: 34%;}

}

 @media screen and (max-width: 600px) {
 * {overflow-x: hidden;}
 a.botoprincipal {font-size: 15px; padding: 10px 15px; margin-top: 100px;}
 .continguthome {max-width: 315px;}
 #soc {width: 100%;}
 #back {display: none;}
 #subs {width: 100%; padding-right: 0px;}
 #subs button {margin: 0 15px; margin-bottom: 10px; font-size: 15px; padding: 12px;}
 #video {width: auto; height: auto;}
 #video a {margin: 10% 35%; padding: 15px 25px;}
 #text {width: 85%;}
 #aporta {width: 100%;}
 input[type=text], input[type=email] {width: 100%; margin-bottom: 10px;}
 input[type=submit] {text-align: center;}
 #llista {width: 100%;}
 #llista form {width: 85%;}
 #llista-inside {height: auto; overflow: hidden;}
 .label-llista {background-color: #fff; padding: 0px;}
 .nomcanco {display: block;}
 .nomautor {display: block; font-size: 13px; margin-top: -15px;}
 .jordi input[type=radio]:checked + label {background-color: rgb(167,202,205);}
 .marta input[type=radio]:checked + label {background-color: rgb(219,182,196);}
 #mail {margin-bottom: 0px;}
 #mail-error {position: inherit;}
 }
 input.error{border:1px solid #f00;}
 .error{color:#f00;}