/* Estils Varón Textil SL */
/* No modificables des del CMS */
@media all{

body {
	position:relative;
	font-family: 'Roboto Condensed', sans-serif;
	/* font-family: Dosis, Arial, Helvetica, Times New Roman; */
	font-size: 14px; color:#333333; line-height:24px;
	background-color: #ffffff;
	margin: 0px; padding: 0px;
	}
	a{ color:#6699cc; text-decoration:none; }
	a:link { color:#6699cc; text-decoration:none;}
	a:visited { color:#6699cc; text-decoration:none; }
	a:active { color:#99ccff; text-decoration:none; }
	a:hover { color:#99ccff; text-decoration:none; }
	a{ transition:0.3s;
		-o-transition:.3s;
		-ms-transition:.3s;
		-moz-transition:.3s;
		-webkit-transition:.3s;
		}

img{
	border:0;
	vertical-align:top;
	max-width:100%;
	}
.imgh { transition: 0.4s; }
.imgh:hover { opacity: 0.65; }

/*
#general {
	background-color: #transparent;
	width:100%;
	margin: 0px auto; padding: 0px;
	margin-top:100px;
	}
*/
	
/* Logos */
#logo{
	z-index:1000;
	position:fixed;
	top:20px; left:25px;
}
#logo img {
	height:100px;
}

#logo_nom {
	z-index:1000;
	position:fixed;
	top:32px;
	left:118px;
	opacity:0;
	transition:4s;
	transition-delay: 5s;
}
#logo_nom:hover, #logo:hover + #logo_nom {
	opacity:1;
	transition:1s;
}




	/* Content portada */
	#cover{
		position: absolute;
		top: 0; left: 0;
		width:100%; height:100vh;
		background-color:transparent;
	}
	#centrat{
		position: absolute;
		top: 40%; left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color:transparent;
		margin: 0 auto;
		padding: 0;
		text-align:center;
		line-height:30px;
	}
	
	/* MENÚ INDEX */
	.menu00index {
		display: block;
		position: absolute;
			top:70%; left:50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		width: 100%;
		color:#ffffff;
		background-color:transparent;
		opacity:0.30;
		transition: all .5s ease;
	}

	.menu00index ul {
		list-style-type: none;
		margin: 0 auto; padding: 0;
		overflow: hidden;
		background-color:transparent;
		text-align:center;
	}
		.menu00index li {
			display: inline-block;
			margin: 0px; padding: 0px;
			font-size:20px;
			letter-spacing:2px;
			background-color:transparent;
		}
		.menu00index li a {
			display: block;
			color: white;
			text-align: center;
			margin: 0px; padding: 30px;
			text-decoration: none;
			text-shadow:0px 1px 1px rgba(102,102,102,0.6);
			background-color:transparent;
		}
		.menu00index li a:hover {
			color: #5588ff;
		}
			.menu00index:hover {
				opacity:1;
				transition: all .5s ease;
			}









/* MENÚ SUPERIOR */
#menu {
	display:block;
}
.menu00superior {
	z-index:100;
	position:absolute;
		top:-150px;
		left:0px;
		width:100%;
		height:300px;
		padding:0px 0px 0px 0px;
		background-color:transparent;
		transition:all .5s ease;
}
.menu00dec {
	position:absolute;
		top:-150px; left:0px;
		width:100%; height:250px;
		padding:0px 0px 0px 0px;
		background-color:transparent;
		transition:all .5s ease;
}
	.menu00deg {
		width:100%;
		height:250px;
		/* background: linear-gradient(to bottom, rgba(74,114,177,1) 0%, rgba(108,159,60,1) 100%); */
		background: linear-gradient(to bottom, #4a72b1 0%, #70a83b 100%);
	}
	.degcolor{
		/* fill:#4a72b1; */
		fill:#70a83b;
	}
.menu_nav {
	z-index:1010;
	position:absolute;
	right:20px;
	transition:all .5s ease;
}
	.menu_nav ul {
		display:block;
		top: 0;
		width: 100%;
		height:150px;
		list-style-type: none;
		margin: 0;
		padding: 0;
		background-color:transparent;
		/* background: linear-gradient(to bottom, rgba(51,125,238,1) 0%, rgba(51,190,238,1) 100%); */
		overflow: hidden;
	}
	.menu_nav li {
		display: table-cell;
		float: right;
		margin-right: 10px;
		/* border-bottom: 0px solid #99ccff; */
		
		box-shadow: 5px 10px 10px rgba(0,0,0,0.1);
	}
	.menu_nav li a {
		display: table-cell;
		height:90px;
		font-size: 18px;
		color: #4a72b1;
		letter-spacing:2px;
		vertical-align: middle;
		margin: 100px 100px;
		padding: 15px 15px;
		text-decoration: none;
		background: linear-gradient(to bottom, #d0d0d0 0%, #f8f8f8 100%);
		border-radius: 0 0 4px 4px;
	}
	.menu_nav li a:hover:not(.active) {
		height:100px;
	}
	.menu_nav .active a {
		color: #ffffff;
		height:90px;
		background: linear-gradient(to bottom, #4a72b1 0%, #f8f8f8 100%);
	}
		/* Desplegable // Dropdown */
		.dropdown-content {
			display: none;
			position: absolute;
			right:0;
			min-width: 160px;
			z-index: 1;
		}
		.dropdown-content a {
			text-decoration: none;
			display: block;
			text-align: left;
		}
		.dropdown:hover .dropdown-content {
			display: block;
		}
		
		.menu00superior:hover {
			top:0px;
			transition: all .5s ease;
		}
		.menu00superior:hover ~ #logo_nom {
			opacity:1;
			transition: all .5s ease;
		}
		
		#logo:hover ~ .menu00superior {
			top:0px;
			transition: all .5s ease;
		}






/* MENÚ DESPLEGABLE MÒBIL */
#menu00 {
	display:none;
}
.menu00desplegable {
	z-index:100;
	position:absolute;
		top:-420px;
		left:0px;
		width:100%;
		height:410px;
		padding:0px 0px 0px 0px;
		/*
		background-color:#3399ee;
		background: linear-gradient(to bottom, rgba(51,125,238,1) 0%, rgba(51,190,238,1) 100%);
		*/
		/* background: linear-gradient(to bottom, rgba(74,114,177,1) 0%, rgba(108,159,60,1) 100%); */
		background: linear-gradient(to bottom, #4a72b1 0%, #70a83b 100%);
		
		box-shadow: 0px 0px 25px rgba(0,0,0,0.6);
		transition:all .5s ease;
}
.menu00desplegable ul {
	top: 0; width: 100%;
	list-style-type: none;
	margin: 0; padding: 0;
	overflow: hidden;
}
.menu00desplegable li {
	float: left;
	width:100%;
	border-bottom: 1px solid #99ccff;
}
.menu00desplegable li a {
	display: block;
	font-size: 20px; color: #ffffff;
	letter-spacing:2px;
	text-align: left;
	padding: 15px 15px;
	text-decoration: none;
	background-color:transparent;
}
.menu00desplegable li a:hover:not(.active) {
	color: #6699ff;
	background-color: #e1efff;
}
.menu00desplegable .active a {
	color: #6699ff;
	background-color: #ffffff;
}

	.idiomes_desplegable {
		display:inline;
		padding: 20px;
		margin: 0px;
		font-size: 20px;
	}
	.idiomes_desplegable a{ color:#ffffff; text-decoration:none; }
	.idiomes_desplegable a:link { color:#ffffff; text-decoration:none;}
	.idiomes_desplegable a:visited { color:#ffffff; text-decoration:none; }
	.idiomes_desplegable a:active { color:#99ccff; text-decoration:none; }
	.idiomes_desplegable a:hover { color:#99ccff; text-decoration:none; }

	/* Botó */
	#hamburguesa00des {
		z-index:100;
		position:fixed;
		top:5px; right:10px;
		padding: 15px 8px 0px 0px;
		font-family: Times New Roman;
		color:#ffffff;
		font-size: 80px; font-weight: bold;
		text-align:right;
		background-color: transparent;
		transition: all .5s ease;
		text-shadow:0px 0px 10px rgba(51,51,51,0.5);
	}
	#hamburguesa00des:hover {
		color:;
	}
	#hamburguesa00des:active {
		color:;
	}
	
	.fonsenfosquit {
		z-index:100;
		display:none;
		position:fixed;
		left: 0; top: 0; right: 0;  bottom: 0;
		width:100%;
		height:100%;
		background-color:#000000;
		opacity:0;
		transition: all .4s ease;
	}
	
	#hamburguesa00des > .checkbox {
		display:none; /* Ocultem el checkbox */
	}
	
	.checkbox {
		display:none; /* Ocultem el checkbox */
	}
		.checkbox:checked ~ .menu00desplegable {
			top:0px;
			position:fixed;
		}
		.checkbox:checked ~ .fonsenfosquit {
			display:block;
			opacity:0.5;
			transition: all .4s ease;
			transition-delay:0s;
		}
		.checkbox:checked ~ #logo_nom {
			opacity:1;
			transition:1s;
		}
		


	header {
		margin: 0px;
		padding: 0px;
		min-height:0px;
		border: 0px solid #336699;
		border-radius: 0px;
		background: #transparent;
		clear:both;
	}
	.blanc {
		color:#ffffff;
	}
	.blanc a{ color:#ffffff; text-decoration:none; }
	.blanc a:link { color:#ffffff; text-decoration:none;}
	.blanc a:visited { color:#ffffff; text-decoration:none; }
	.blanc a:active { color:#ffffff; text-decoration:none; }
	.blanc a:hover { color:#ffffff; text-decoration:none; }
	
	#main {
		width:100%;
		height:100%;
		min-height: 10px;
		margin: 0px;
		padding: 0px;
		display: -webkit-flex;
		display: flex;
			-webkit-flex-flow: row;
			flex-flow: row;
	}
	
	/* Capa de fons de PORTADA // Cover */
	#superior{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100vh;
		display: block;
		margin: 0px;
		padding: 0px;
	}
	
	#central1, #central2, #inferior {
		display: block;
		margin: 0px;
		padding: 0px;
		min-height: 0px;
		background: #transparent;
	}
	
	#main > article {
		margin: 0px;
		margin-top: 110px;
		padding: 40px;
		border: 0px solid #336699;
		border-radius: 0pt;
		background: #transparent;
			-webkit-flex: 3 1 62%;
					flex: 3 1 62%;
			-webkit-order: 2;
					order: 2;
	}
  
	#main > nav {
		margin: 0px;
		padding: 0px;
		height: 100vh;
		border: 0px solid #336699;
		border-radius: 0pt;
		background: #transparent;
			-webkit-flex: 1 6 38%;
					flex: 1 6 38%;
			-webkit-order: 1;
					order: 1;
	}
  
	/* ASIDE Desplegable */
	/* #main > aside { */
	aside {
		z-index:100;
		position: fixed;
		top: 0;
		width: 70%;
		right: -75%;
		height: 100vh;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #6699cc;
		transition:all .5s ease;
		/*
			-webkit-flex: 1 6 0%;
					flex: 1 6 0%;
			-webkit-order: 3;
					order: 3;
		*/
	}
	
	.aside_capsa{
		padding:8px;
		height:98vh;
	}
	
	.hamburguesa_aside {
		z-index: 10;
		position: fixed;
		display: inline;
		top: 180px;
		right: -10px;
		width: 40px;
		height: 100px;
		text-align: left;
		border-radius: 8px 0 0 8px;
		background-color: #6699cc;
			color: var(--menu-color);
			padding: 10px;
			font-family: Times New Roman;
			font-size: 20px;
			/* font-weight: bold; */
		transition: all .5s ease;
	}
	
		/* HAMBURGUESA i CHECKBOX */
		.checkbox:checked ~ aside {
			position:fixed; /* Fixem el menú lateral perquè es desplaci quan fem scroll */
			right: 0px; /* Eliminem el right negatiu perquè el menú torni a la posició original */
		}
		/* Fa que tot el fons sigui clicable
		.checkbox:checked ~ .hamburguesa_aside {
			width: 100%;
			height: 100%;
		}
		*/
		/* Fem que l'hamburguesa es desplaci enganxada al menú */
		.checkbox:checked ~ .hamburguesa_aside { 
			right: 70%;
			position: fixed;
		}
   
footer {
	display: flex;
	margin: 0px;
	padding: 15px;
	min-height: 10px;
	border: 0px solid #transparent;
	border-radius: 0pt;
	background: #transparent;
	}
   
footer > article {
	margin: 0px;
	padding: 15px;
	border: 0px solid #336699;
	border-radius: 0pt;
	background: #transparent;
	-webkit-flex: 3 1 60%;
			flex: 3 1 60%;
	-webkit-order: 2;
			order: 2;
	}

/* Cookies */
#cookies {
	z-index: 100;
	position: fixed;
	display:flex;
	bottom: 0px;
	left: 0px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-color: var(--font-link);
	font-size: var(--text-height14);
	color: var(--font-color);
	line-height: var(--line-height22);
}
#cookies a:link { color: var(--font-active-link); text-decoration: none }
#cookies a:visited { color: var(--font-active-link); text-decoration: none }
#cookies a:active { color: var(--font-link); text-decoration: none }
#cookies a:hover { color: var(--font-link); text-decoration: none }

	/* Capses i requadres */
	#capsa {
		/* float:left; */
		/* display: block; display: inline-block; */
		margin: 0px;
		padding: var(--page-margin-half);
	}

	#contenidor01 { float:left;
		width:100%;
		margin:0px; padding:0px;
		background-color:transparent;
	}
	#contenidor02 { float:left;
		width:50%;
		margin:0px; padding:0px;
		background-color:transparent;
	}
	#contenidor23 { float:left;
		width:66.6666666666%;
		margin:0px; padding:0px;
		background-color:transparent;
	}
	#contenidor03 { float:left;
		width:33.3333333333%;
		margin:0px; padding:0px;
		background-color:transparent;
	}
	#contenidor34 { float:left;
		width:75%;
		margin:0px; padding:0px;
		background-color:transparent;
	}
	#contenidor04 { float:left;
		width:25%;
		margin:0px; padding:0px;
		background-color:transparent;
	}
	#contenidor25 { float:left;
		width:40%;
		margin:0px; padding:0px;
		background-color:transparent;
	}
	#contenidor35 { float:left;
		width:60%;
		margin:0px; padding:0px;
		background-color:transparent;
	}
	#contenidor05 { float:left;
		width:20%;
		margin:0px; padding:0px;
		background-color:transparent;
	}
	#contenidor06 { float:left;
		width:16.6666666666%;
		margin:0px; padding:0px;
		background-color:transparent;
	}
	#capsa00 { float:left;
		width:100%;
		margin:0px; padding:0px;
		word-wrap: break-word; /* Trenca paraules llarges */
	}
	#capsa01 {
		float:left;
		margin:0px; padding:30px;
	}
	#capsa02 { float:left;
		margin:0px; padding:0px;
		clear:both;
	}
	#capsa03 { float:left;
		margin:0px; padding:0px 0px 0px 15px;
		word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
		overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
	}
	#capsa04 { float:left;
		margin:0 0 15px 0; padding:0px;
		/* height:20vh; */
		height:0; padding-bottom:60%;
		clear:both;
		transition:1s;
	}
	#capsa04:hover {
		opacity:0.5;
		transition:1s;
	}
	
	#quadre00im { float:left;
		width:100%; height:100vh;
		margin: 0;
		/* padding-bottom:100vh; */
	}
	#quadre00imp { float:left;
		width:22%; height:0;
		margin:0 6px 6px 0; padding-bottom:16%;
		cursor:pointer;
	}
	#capsa00galeria {
		float: left;
		width: 100%;
		/* height: 25vh; */
		height: 0;
		margin: 0px;
		padding: 0px;
		padding-bottom:70%;
		cursor: pointer;
		transition: 0.4s;
		word-wrap: break-word; /* Trenca paraules llarges */
	}
	#capsa00galeria:hover {
		opacity: 0.65;
	}
	
	
	/* Slideshow */
	#slide {
		position: relative; 
		width:100%; height:100%;
		margin:0px; padding:0px;
		/* height:0; padding-bottom:40%; */
	}
	#slide > div {
		position: absolute; 
		top: 0px; left: 0px; right: 0px; bottom: 0px;
		width:100%;
		margin:0px; padding:0px;
		background-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
	}
	/* Slideshow a pantalla completa
	#slide00 {
		position: relative; 
		width:100%; height:100vh;
		margin:0px; padding:0px;
	}
	#slide00 > div {
		position: absolute; 
		top: 0px; left: 0px; right: 0px; bottom: 0px;
		width:100%;
		margin:0px; padding:0px;
	}
	 */
	 
.text000 { color:#ffffff;
	font-size:35px; line-height:35px;
	letter-spacing:2px;
	text-shadow:0px 1px 1px rgba(102,102,102,0.4);
	}
.text000p { color:#ffffff;
	font-size:18px; line-height:30px;
	letter-spacing:2px;
	text-shadow:0px 1px 1px rgba(102,102,102,0.4);
	}
.text01 {
	text-align:justify;
	margin-bottom:15px;
	}

.taula01 table {
	border:0;
}
.taula01 td, 
.taula01 th {
	padding:6px 10px; margin:0px;
    border-bottom: 1px solid #cccccc;
}
.taula01 tr.border_bottom td {
	border-bottom:1px solid #f4f4f4;
}
.taula01 tr:hover { background-color:transparent; }


	
	
	h1{
		font-size:32px;
		line-height:0px;
		letter-spacing:1px;
		font-weight: bold;
	}
	.web_title{
		font-size:32px;
		line-height:0px;
		text-shadow:0px 2px 2px rgba(102,102,102,0.3);
	}
	.web_subtitle{
		font-size: 14px;
		line-height:24px;
		text-shadow:0px 2px 2px rgba(102,102,102,0.3);
	}
	.im_portada{
		height: 20vh;
	}
	
	h2{
		font-size:20px; line-height:24px;
		letter-spacing:1px;
		font-weight: bold;
		text-shadow:0px 2px 2px rgba(102,102,102,0.3);
	}
	
	h3{
		font-size:18px; line-height:22px;
		letter-spacing:1px;
		font-weight: bold;
		text-shadow:0px 2px 2px rgba(102,102,102,0.3);
	}
	
	q {
	}
	
	hr{ width:100%;
		border:none;
		height:1px;
		background-color:#6699cc;
		clear:both;
	}
	
	form,
	fieldset{
		border:0;
		padding:0;
		margin:0;
	}
	input{
		background:#ffffff;
		font:14px/17px Arial, Helvetica, sans-serif;  /*14px/17px*/
		color:#333333;
		padding:5px; margin:0;
		border:1px solid #3399ee;
			resize:none;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
	}
	textarea{
		background:#ffffff;
		font:14px/17px Arial, Helvetica, sans-serif;  /*14px/17px*/
		color:#333333;
		width:96%;
		padding:5px; margin:0;
		border:1px solid #3399ee;
			resize:none;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
	}
	
	button{
		float: left;
		display: inline block;
		width:;
		height:;
		margin: 0 4px 4px 0;
		padding: 6px;
		font-size: var(--text-height12);
		color: var(--background-color);
		/* font-weight: bold; */
		text-decoration: none;
		background-color: var(--font-link);
			border: solid 1px var(--font-color);
			border-radius: 4px;
			transition: 0.4s;
	}
		button[type=submit]{
			cursor: pointer;
		}
		button[type=submit]:hover {
			opacity: 0.5;
		}
	
	.formaform[type="text"], .formaform[type="email"]{
		width: 96%;
	}
	.formaform00[type="text"]{
		width:0; margin:0; padding:0; border:0;
	}
	
	* +html input,
	* +html textarea,
	* +html .textField{
		width:;
		padding:0;
	}
	::-webkit-input-placeholder {
		color:    #444;
	}
	:-moz-placeholder {
		color:    #444;
	}



}






@media all and (max-width: 1024px){

}



@media all and (max-width: 960px){

	#logo_nom {
		left:110px;
		opacity:1;
	}
	#logo img {
		height:90px;
	}
	
	.web_title{
		font-size:26px;
		text-shadow:0px 2px 2px rgba(102,102,102,0.45);
	}
	.web_subtitle{
		font-size: 14px;
		line-height:18px;
		text-shadow:0px 2px 2px rgba(102,102,102,0.45);
	}
	
	#menu {
		display:none;
	}
	.menu00index {
		display:none;
	}
	#menu00 {
		display:block;
	}
	
	#main, #page {
	-webkit-flex-flow: column;
		flex-flow: column;
	}

	/* Return them to document order
	#main > article, #main > nav, #main > aside {
		-webkit-order: 0;
				order: 0;
	}
	 */
	
	#main > nav {
		height: 40vh; /* No fa res ?? */
	}
	
	#main > article {
		margin-top: 0px;
		/* padding:25px; */
	}
	
	body {
		overflow-x: hidden;
		overflow-y: scroll;
		}
		
	#capsa {
		margin: 0px;
	}
	article #capsa01{ /* var(--page-margin-half) */
		/* Eliminem els marges extres laterals
			Afecta a "sobre-nosaltres"
			abans: var(--page-margin-half) */
		padding: var(--page-margin) 0px;
	}
		
	#contenidor02 { width:100%; }
	#contenidor23 { width:100%; }
	#contenidor03 { width:100%; }
	#contenidor34 { width:50%; }
	#contenidor04 { width:50%; }
	#contenidor25 { width:50%; }
	#contenidor35 { width:50%; }
	#contenidor05 { width:50%; }
	#contenidor06 { width:50%; }
	
	#cookies {
		display:block;
		font-size: var(--text-height12);
		line-height: var(--line-height18);
	}
	
	#cookies > #capsa {
		clear: both;
	}
	
}


@media all and (max-width: 780px){
	
	#logo_nom {
		left:85px;
		opacity:1;
	}
	#logo img {
		height:65px;
	}
	
	.web_title{
		font-size:22px;
		text-shadow:0px 2px 2px rgba(102,102,102,0.45);
	}
	.web_subtitle{
		font-size: 11px;
		line-height:16px;
		text-shadow:0px 2px 2px rgba(102,102,102,0.45);
	}


@media all and (max-width: 504px){
	
	body {
		/* font-size: 12px;
		line-height:18px; */
		}
	
	#contenidor02 { width:100%; }
	#contenidor23 { width:100%; }
	#contenidor03 { width:100%; }
	#contenidor34 { width:100%; }
	#contenidor04 { width:100%; }
	#contenidor25 { width:100%; }
	#contenidor35 { width:100%; }
	#contenidor05 { width:100%; }
	#contenidor06 { width:100%; }
	
	.text000 { font-size:22px; line-height:25px; }
	.text000p { font-size:14px; line-height:20px; }
	
}



@media all and (max-width: 320px){
	
	#contenidor02 { width:100%; }
	#contenidor23 { width:100%; }
	#contenidor03 { width:100%; }
	#contenidor34 { width:100%; }
	#contenidor04 { width:100%; }
	#contenidor25 { width:100%; }
	#contenidor35 { width:100%; }
	#contenidor05 { width:100%; }
	#contenidor06 { width:100%; }
	
}



@media all
	and (min-device-width: 768px)
	and (max-device-width: 1024px){
	#content{padding:0;}
}