@charset "UTF-8";
/* 
Mirandes i Grabolosa
www.mig-marketing.com
*/

body {
	background-color: #fff;
	font-family:Tahoma, Geneva, sans-serif;
	font-style:normal;
	text-align:left;
	font-variant: normal;
	/* color: #bbb; fins el 6/4/16 */
	color:gray;
	font-size:16px;
	font-weight: 100;
	margin: 0;
	padding: 0;
	letter-spacing:1px;
}

p {
	font-size:16px;
	font-weight:normal;
    /* color:#bbb; fins el 6/4/16 */
	color:gray;
	margin:0;
	padding:0 0 10px 0;
}

td {
	font-size:16px;
	font-weight:normal;
	/* color: #bbb; fins el 6/4/16 */
	color:gray;
	margin: 0;
	padding: 0;
}

.h1Portada {
	font-size: 140px;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

.h2Portada {
	font-size:18px;
	font-weight:normal;
	text-align:left;
	margin: 0;
	padding: 0;
}

.h1Interior {
	font-size:30px;
	font-weight:normal;
	text-align:left;
	margin:0 0 20px 0;
	padding: 0;
}


.h2Interior, h3 {
	font-size: 16px;
	font-weight:normal;
	color: gray;
	margin:0;
	padding:15px 0 10px 0;
	text-align: left;
}

.avantitol {
	font-size: 12px;
    font-weight:normal;
	margin:0 auto 5px auto;
	padding: 0;
}

figcaption {
	font-size: 10px;
    font-weight:normal;
	margin:0 auto 5px auto;
	padding: 0;
}

img { border:0; }
  
/* LINKS */
#actiu { color: gray; }
a { outline:0; text-decoration: none;}
a:link, a:visited { color: gray; }
a:hover { color: #333; text-decoration: none;}

.fora { 
	position:absolute; 
	top:0; left:0;
	margin:0; padding:0;
	font-size:5px;
	text-indent:-9999px; 
}

/* HTML5 display rule */
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary 
{ display: block; }

/*PRINCIPAL*/
#text {
	margin: 0 auto;
	width:90%; /* 90% del parent element */
	max-width:800px;
	min-width:10px;/* el min-width dels phones és 320 */
	text-align: left;
}

#escitExplicacio {
	font-size:14px;
	font-style: italic;
}


/* LOGO */
#logo{
	margin:0 auto;
	margin-top: 90px;
	margin-bottom:50px;
	width:60px; height:60px;
	display:block;
}

@media screen and (max-width: 700px) {
#logo{
	margin-top:50px;
	margin-bottom:30px;
}
}


#logo a {position:relative; display:inline-block;}

#logo a:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0;}

/* PEU */
#peu {
	position:relative;
	margin:0 auto;
	width:90%;
	max-width:800px;
	margin-bottom:25px;
	font-size:11px;
	border-top:1px solid #ccc;
}

#idioma{ position:absolute; left:0px; top:10px; }
#direccio{ margin:0px auto; padding:10px 0; text-align:center; }
#contacte{ position:absolute; right:0px; text-align:right; top:10px; }

#mig { 
	width:80%; max-width:300px; 
	margin:20px auto 0 auto; padding:7px; 
	text-align:center; 
	color:#ccc;  
	border-top:1px solid #ccc;
}

#mig p{ 
	display:inline-block;
	margin:0; padding:0;
	font-size:9px;
	letter-spacing:1px;
}

#peuPortada .contingut {
	margin:0px auto;
	width:80%;
	padding:20px 0;
}

@media screen and (max-width: 600px) {
#idioma{ position:relative; margin:0 auto; top:0px; padding:10px 10px 0 10px; text-align:center; }
#direccio{ position:relative; margin:0px auto; top:0px; padding:10px 10px 0 10px; text-align:center; }
#contacte{ position:relative; margin:0 auto; top:0px; padding:10px 10px 10px 10px; text-align:center; }
}

/*MENU*/
#menu {
	position:absolute;
	bottom: 30px;
	width:560px;
	padding: 0;
	font-size:18px;
	font-weight:bold;
	color: #4B2673;
}

#menu ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

#menu li{
	float: left;
	margin-left: 0;
	margin-right:40px;
	padding: 0;
}


/*FLETXA GRAN COLOR*/
#fletxa{
	width:60px;
	margin: 0 auto;
	margin-top:90px;
	margin-bottom:90px;
	display:block; /*important per posar el id en un link*/
}

/* em sembla que no és necessari en el nou sistema:
#fletxa a {position:relative; display:inline-block;}
#fletxa a:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0;}
*/


@media screen and (max-width: 700px) {
#fletxa{
	margin-top:50px;
	margin-bottom:40px;
}
}

/*NS PETITS*/
.boto{
	font-size: 18px;
	font-weight:normal;
	margin: 0;
	padding: 0;
	text-align: left;
}

a:link.boto , a:visited.boto { color: gray;}
a:hover.boto { color:#666; }

.boto2{
	font-size: 18px;
	width:350px;
	font-weight:normal;
	margin: 0;
	padding: 0;
	text-align: left;
}


/*Especial diferenciat pel iPad*/
@media screen and (device-width:768px) {
  a:hover {
	  color: gray;
  }		
}



/* CARTA */
.cartaPagina p {text-align:left; padding:0 0 15px 0;}

/* Especial diferenciat pel iPad */
@media screen and (device-width:768px) {
  .cartaPagina a:hover {
	  color: gray;
  }		
}

/* ESCOLA */
escolaPagina p { padding:0 0 15px 0; }
escolaPagina h4{font-style:italic;color:gray;font-size:14px;}
escolaPagina .boto{width:200px;}

escolaPagina #anys {
	margin:0 auto;
	width:280px;
}

escolaPagina #anys a {
	font-size:16px;
	padding:0 10px;
}

/*Especial diferenciat pel iPad*/
@media screen and (device-width:768px) {
  escolaPagina a:hover {
	  color: gray;
  }		
}

/* ESCRITS */
.anteriors {
	float:left; 
	width: 95%; max-width:400px;
	list-style-type: none;
	margin:0; 
	padding:0 0 30px 0;
}

/* em sembla que s'ha de borrar. Ho deixo comentat uns dies per si un cas 
@media screen and (max-width: 400px) {
#logo { width:100%; }
}
*/

/* PORTADA */

/* GENERAL */
.floater {
	float:left; 
	width:100%; height:50%; 
}

.contingut {
	position:relative;
	margin:auto; 
	clear:both; 
	width:90%;
}

.amunt{
	position:absolute;
	top: 0px; left:50%;
	margin-left:-115px;
	width:30px; height:20px;
	cursor:pointer;
	
	background:url('../img/amunt-avall/amunt.png');
	background-image:url('../img/amunt-avall/amunt.svg'), none;
	background-repeat:no-repeat;
	background-position:center center; 
	padding:30px 100px;
	opacity:0;
}

.avall{
	position:absolute;
	bottom: 0px; left:50%;
	margin-left:-115px;
	width:30px; height:20px;
	cursor:pointer;
	
	background:url('../img/amunt-avall/avall.png');
	background-image:url('../img/amunt-avall/avall.svg'), none;
	background-repeat:no-repeat;
	background-position:center center; 
	padding:30px 100px;
	opacity:0;
}
#podcast .avall{ opacity:1; }

/* ESCRIT */
#escrit .floater { margin-bottom:-150px; } /* la mitat del height del que centra. Més amunt perquè hi ha la fletxa */ 
#escrit .contingut {
	max-width:510px;
	height:260px;
}
section#escrit {
	position:absolute;
	top:100%;
	width:100%; height:100%;
	background-color: #00632E;
} 
#escrit .h1Portada {color:#2DA75C; margin-left:-10px;}
#escrit .h2Portada {color:#2DA75C; display:inline-block; }
#escrit a:link, #escrit a:visited {color: #2DA75C;}
#escrit a:hover {text-decoration:none; color:#097733;}

/*Especial diferenciat pel iPad*/
@media screen and (device-width:768px) {
#escrit a:hover {
	color: #2DA75C;
}
}

@media screen and (max-width: 600px) {
#escrit .floater { margin-bottom:-140px; }
#escrit .contingut { height:220px; }
#escrit .avall{
	margin-left:-110px;
	bottom:5px;
	width:20px; height:15px;
	
	background:url('../img/amunt-avall/avall2.png');
	background-image:url('../img/amunt-avall/avall2.svg'), none;
	background-repeat:no-repeat;
	background-position:center center;
}
#escrit .avall{ opacity:1; }
}

@media screen and (max-width: 440px) {
#escrit .floater { margin-bottom:-105px; }
#escrit .contingut { height:190px; }
}

/* PODCAST */
#podcast  .floater { margin-bottom:-125px; }
#podcast .contingut {
	max-width:580px;
	height:250px;
}
section#podcast {
	position:absolute;
	top:0%;
	width:100%; height:100%;
	background-color:#622181;
}

#titolBotons{
	width:100%;
	max-width:500px;
	height:20px; line-height:20px;
	text-align:left;
}

#titol{
	float:left;
	font-size:18px;
	font-weight:normal;
	color:#AE89BA;
	text-align:left;	
}

.block, .block1, .block2 { display:inline-block; }

#podcast .block2 { 
	position: relative;
	width:157px; height:23px; line-height:23px;
	color: #AE89BA;
	font-size:18px;
	display:none; /* per sense javaScript */
}

#podcast .block2 #botons{
	position: absolute;
	top:2px; right:0;
	width:20px; height:20px; line-height:20px;
	margin-left:5px; 
	cursor:pointer;
}

.boto{ width:100%; max-width:530px; color: #AE89BA; }

.play{
	position:absolute;
	top:0; left:0;
	width:20px; height:20px;
	background:url('../img/audio/play.png');
	background-image:url('../img/audio/play.svg'), none;
	background-repeat:no-repeat;
}
.stop{
	position:absolute;
	top:0; left:0;
	width:20px; height:20px;
	background:url('../img/audio/stop.png');
	background-image:url('../img/audio/stop.svg'), none;
	background-repeat:no-repeat;
}

embed {margin-top:-5px; margin-right:-150px;}

#podcast .h1Portada {color: #AE89BA;margin-left:-8px;}
#podcast .h2Portada {color: #AE89BA;}

#podcast a:link, #podcast a:visited {color:#AE89BA;}
#podcast a:hover {text-decoration:none; color:#7D41A0;}

#audio { margin:20px 0 0 0;  }

@media screen and (max-width: 650px) {
#podcast .floater { margin-bottom:-120px; }
#podcast .contingut { height:240px; }
#podcast .h1Portada { font-size:100px; line-height:100px; }
}
@media screen and (max-width: 500px) {
#podcast  .floater { margin-bottom:-100px; }
#podcast .contingut { height:200px; }
#podcast .h1Portada { font-size:80px; line-height:80px; }
}
@media screen and (max-width: 370px) {
#podcast .h1Portada { font-size:60px; line-height:60px; }
}

/* CARTA */
#carta .floater { margin-bottom:-130px; /* la mitat del height del que centra */ }
#carta .contingut {
	max-width:480px;
	height:260px;
}
section#carta {
	position:absolute;
	top:200%;
	width:100%; height:100%;
	background-color: #BE0A26;
} 
#carta .h1Portada {color:#ED7A71; margin-left:-10px;}
#carta .h2Portada {color:#ED7A71;}
#carta a:link, #carta a:visited {color: #ED7A71;}
#carta a:hover {text-decoration:none; color:#D12C4B;}

@media screen and (max-width: 600px) {
#carta .floater { margin-bottom:-110px; }
#carta .contingut { height:220px; }
}
@media screen and (max-width: 440px) {
#carta .floater { margin-bottom:-95px; }
#carta .contingut { height:190px; }
}

/* GOA */
#goa .floater { margin-bottom:-140px; }
#goa .contingut {
	max-width:565px;
	height:280px;
}
section#goa {
	position:absolute;
	top:300%;
	width:100%; height:100%;
	background-color:#DD8505;
}

#goa .h1Portada{color: #FCC54B;margin-left:-10px;}
#goa .h2Portada {color: #FCC54B;}

#goa a:link, #goa a:visited {color: #FCC54B;}
#goa a:hover {text-decoration:none; color:#ED9B2F;}

@media screen and (max-width: 600px) {
#goa .floater { margin-bottom:-120px; }
#goa .contingut { height:240px; }
}
@media screen and (max-width: 440px) {
#goa .floater { margin-bottom:-95px; }
#goa .contingut { height:190px; }
}

/* ALTRES */
#altres .floater { margin-bottom:-90px; }
#altres .contingut {
	max-width:530px;
	height:180px;
}

section#altres {
	position:absolute;
	top:400%;
	width:100%; height:100%;
	background-color:#0C3183;
}

#altres .h1Portada{font-size:80px; line-height:80px; margin-left:-7px;}
#altres a:link, #altres a:visited {color: #5685D8;}
#altres a:hover {text-decoration:none; color:#275FAF;}
/*Especial diferenciat pel iPad*/
@media screen and (device-width:768px) {
#altres a:hover { color: #5685D8; }		
}

@media screen and (max-width: 700px) {
#altres .floater { margin-bottom:-70px; }
#altres .contingut { width:415px; height:140px; }
#altres .h1Portada { font-size:50px; line-height:50px; margin-left:0px; text-align:center;}
}
@media screen and (max-width: 440px) {
#altres .floater { margin-bottom:-60px; }
#altres .contingut { width:350px; height:120px; }
#altres .h1Portada { font-size:40px; line-height:40px; text-align:center; }
}
@media screen and (max-width: 350px) {
#altres .contingut { width:300px; }
#altres .h1Portada { font-size:30px; line-height:30px; }
}

/* GENERAL */
@media screen and (max-width: 600px) {
	.amunt{
		margin-left:-110px;
		top:5px;
		width:20px; height:15px;

		background:url('../img/amunt-avall/amunt2.png');
		background-image:url('../img/amunt-avall/amunt2.svg'), none;
		background-repeat:no-repeat;
		background-position:center center;
	}

	.avall{
		margin-left:-110px;
		bottom:5px;
		width:20px; height:15px;

		background:url('../img/amunt-avall/avall2.png');
		background-image:url('../img/amunt-avall/avall2.svg'), none;
		background-repeat:no-repeat;
		background-position:center center;
	}
	#escrit .avall{ opacity:1; }

	#escrit .h1Portada, #podcast .h1Portada, #goa .h1Portada
	{ margin-left:-6px; }

	.h1Portada { font-size:100px; margin-left:20px; }
}/*fi mediaquery 600*/

@media screen and (max-width: 440px) {
.h1Portada { font-size:80px; line-height:80px; }
}

@media screen and (max-width: 320px) {
.h1Portada { font-size:67px; line-height:70px; }
}

/* MIG PEU */
#peuPortada {
	position:absolute;
	top:500%;
	width:100%;
	text-align:center;
	background:#0C3183;
	opacity: 0.9;
  	filter: alpha(opacity = 90);
}

#peuPortada .contingut {
	margin:0px auto;
	width:80%;
	padding:20px 0;
}

#peuPortada .contingut p {
	font-size:10px;
	color:#5685D8;
	letter-spacing:1px;
	margin:0; padding:0;
	display:inline-block;	
}
#peuPortada .contingut #actiu{ color:#5685D8; }
#peuPortada .contingut a:link { color: #5685D8; }
#peuPortada .contingut a:visited { color: #5685D8; }
#peuPortada .contingut a:hover { color: #275FAF;}

/* SUBSCRIUTE */
#intro {
	width:90%;
	max-width:500px;
	margin:0 auto 30px auto;
	text-align:center;
	color:gray;
	/* font-size:13px; */
}

#intro2 {
	width:90%;
	/* max-width:500px;*/
	margin:30px auto 0 auto;
	text-align:center;
	color:gray;
	/* font-size:13px; */
}

/* subscriute form */

/* Primer anul·lem el comportament per defecte: */
input, textarea, submit {-webkit-appearance: none;}

#form1 { 
	margin:20px auto;
	width:90%;
    max-width:300px;
}

.input1 {
	-webkit-appearance: none;
	
	/* responsive */
	width:90%;
    max-width:300px;
		
	/* aspecte del input */
    border: none; 
	border:thin solid #ccc;
	border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
	
	/* text en el input */
    padding:5px;
	color:#d8d8d8;
    font-size:15px; letter-spacing: 1px;
	
	/* separació entre inputs */
	margin:0 0 7px 0;
}

/*
#enviar {
	width:80px; height:30px; line-height:30px;
    padding:0;
	margin:1px 0 0 0; 
    background: #ececec;
    border: none;
	border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
	
	color:#b1b1b1;
	font-size:15px; letter-spacing:0px;
	cursor:pointer;
}
*/


.input1:focus { 
	outline:none;
    border: none; 
	border:thin solid gray;
}

/* subscriute resposta */
#intro {
	margin:0 auto 30px auto;
	width:90%;
	max-width:500px;
	text-align:center;
	color:gray;
}

#intro2 {
	margin:30px auto 0 auto;
	width:90%;
	max-width:500px;
	text-align:center;
	color:gray;
}

/* SUBSCRIU EMERGENT */
#sobre {
	position:fixed;
	top:50px; right:50px;
	width:50px; height:30px;
	z-index:5;
	cursor:pointer;
	
	background:url('../img/social/sobre.png');
	background-image:url('../img/social/sobre.svg'), none;
	background-repeat:no-repeat;
}

/*
#sobre{
	position:fixed;
	top:50px; right:50px;
	width:50px; height:30px;
	z-index:5;
	cursor:pointer;
}
*/

@media screen and (max-width: 700px) {
#sobre{ top:30px; right:30px;}
}

@media screen and (max-width: 600px) {
#sobre{ top:20px; right:20px;}
}

@media screen and (max-width: 400px) {
#sobre{ 
	top:15px; right:15px;
	background-size:90% 90%;
	background-position:center;
}
}

#subscripcio, #resposta {
	/* centrar */
	position:fixed;
	margin:auto;
	top:0; bottom:0;
	left:0; right:0;
	
	/* prevent div from overflowing main window */
	max-width:100%;
	max-height:100%;
	overflow:hidden;
	
	width:220px; height:165px;
	padding:40px;
	text-align:center;
	color:#b1b1b1;
	background-color:#f2f2f2;
	z-index:2;
	display:none;
	
	border-radius:5px 0 0 0;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

#resposta p {
	position:absolute;
	top:100px; left:0;
	width:300px;
	margin:0; padding:0;
	text-align:center;
	color:#b1b1b1;
}

#subscripcio1{ font-size:15px; margin-bottom:15px;}
#subscripcio2{ font-size:12px; }

#fonsTrans{
	position:fixed;
	width:100%; height:100%;
	background-color:#fff;
	opacity:0.2; filter:alpha(opacity = 30);
	z-index:1;
	display:none;
}

/* form */
input, textarea, submit { -webkit-appearance: none;}

input[type="text"] {
	position:relative;
	margin:0 auto 15px auto;
	width:220px; 
	height:28px; /* 2 px menys que el submit perquè té border */
	padding:0px;
    font-size:15px; letter-spacing:0px;
	text-align:center; color:#b1b1b1;
    border: none; 
	border:thin solid #d8d8d8;
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
	background: #fff;
}

#enviar {
    position:relative;
	margin:0 auto 15px auto;
	width:70px; height:30px; line-height:30px;
	padding:0px;
    font-size:15px; letter-spacing:0px;
    border: none;
    color:white;
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
	background:#b1b1b1;
	cursor:pointer;
}