@charset "UTF-8";
*{
	margin:0;
	padding:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; /* explicació a https://css-tricks.com/box-sizing/ */
}
img{
    max-width:100%;
    height:auto;
    border:0;
}
a:link, a:visited, a:active{
    text-decoration:none;
    color:#000000;
}
.link{
	text-decoration:underline;
	color:#03C;
}
:focus{outline:0}

ul{list-style:none}

h1{padding-top:5px; font-size:1.8em; margin:10px 0;}
h2{font-size:1.3em; margin:10px 0;}

body{
	background:#ffffff;
	font-family:Verdana, sans-serif;
}
header{
	padding-top:15px;
	min-height:200px;
}
.barra {
	position:absolute;
	top:0;
	width:100%;
	height:22px;
	background-color: #060;
	color:#fff;
	text-align:center;
}
.barra a{
	color:#fff;
}	
.container{
	width:90%;
	margin:0 auto;
}
.row{
	float:left;
	padding-bottom:15px;
	width:100%;
}

/*  * * * * * * * * *   */

@keyframes slidy {
0% { left: 0%;}
15% { left: 0%; }
20% { left: -100%; }
35% { left: -100%; }
40% { left: -200%; }
55% { left: -200%; }
60% { left: -300%; }
75% { left: -300%; }
80% { left:-400%; }
95% { left:-400%; }
100% { left:0%; }
}

div#slider { overflow: hidden; }
div#slider figure { 
  width: 500%;
  position: relative;
  animation: 20s slidy infinite; 
}
div#slider figure img { width: 20%; float: left; }

/* ---------------------------------------------------------- */
/* ----------------------- NAVBAR --------------------------- */
/* ---------------------------------------------------------- */

.container .menu{
	display:none;
}

nav ul{
    /* z-index:-1; */
    position:absolute;
	width:90%;
	text-align:right;
	margin-top:20px;
}

nav ul li{ /* linea de menu principal */
	display:inline-block;
	border-radius:25px;
	transition:background-color 0.5s ease;
	font-size:1em;
	margin-right:2px;
	padding:6px;
}
nav ul li:hover{
	background:#360;
}
nav ul li:hover a,
nav ul li:focus a{
	color:#ffffff;
}
nav ul li .children{ /* primer nivell menu */
	display: none;
	background:#ffffff;
	position:absolute;
	width:200px;
	margin:5px 0 0-75px;
	padding:5px 0 0 2px;
	border:solid;
	border-color:#ddd;
	z-index:1000;
}
nav ul li .children2{ /* segon nivell menu */
	display: none;
	background:#eeeeee;
	position: relative;
	width: 183px;
	padding:4px 0 0 2px;
	border-radius:25px;
	z-index:1000;
}
nav ul li .children li{
	display:block;
	border-radius:25px;
	background-color:#eeeeee;
	line-height:38px;
	margin-bottom:5px;
}
nav ul li .children2 li{
	background-color:#ffffff;
}
nav ul li .children li a{
	color:#000000;
}
nav ul li .children2 li a{
	color:#000000!important;
}
nav ul li .children li:hover,
nav ul li .children2 li:hover{
	background:3c8c3c;
}
nav ul li .children li:hover a{
	color:#ffffff;
}
nav ul li .children2 li:hover a{
	color:#ffffff!important;
}

.minimenu {display:none;}

/* ---- FI MENU MAXI ---- */

nav ul li .caret,
.logo{
	float:left;
}
.titol{
	width:90%;
	text-align:center;
	padding-bottom:20px;
}
.titol h1{
	font-family: Arial Black;
	font-size:2em;
	color:#360;
}
.titol p{
	font-style:italic;
	margin-top:-10px;
	font-size:1.2em;
	color:#350;
}
.social{
	float:right;
	margin-top:-30px;
}
.social img{
	margin: 0 2px;
}
.whatsapp{
	display:none;
}

/* ---------------------------------------------------------- */

.thumbnails{
 	list-style:outside none;
	border:none;
	margin-top:10px;
 	display: flex;
 	justify-content: center;
}
.caballos{
 	list-style:outside none;
	border:none;
	margin-top:30px;
	font-size:1.1em;
}
.thumbnails li{
	width:47%;
	float:left;
	text-align:center;
	margin:15px 5px 0 5px;
	background-color:#ffffff; 
}
.caballos li{
	padding:10px;
	width:95%;
	margin-left: 2.5%;
	margin-bottom: 25px;
	border: #360;
    border-style: solid;
	display: flex;
}
.caballos .foto{
	float:left;
	padding-right: 25px;
}
.thumbnails li .descripcio,
.caballos li .descripcio{
	text-align:left;
	min-height:100px;
}
.thumbnails li .descripcio .h,
.caballos li .descripcio .h{
    font-size:1.5em;
    margin-bottom:10px;
    font-weight:bold;
}
.thumbnails .component {margin: 20px 20px 0 20px}
.thumbnails .component .foto {overflow:hidden;}
.thumbnails .component .foto img {transition: all .3s ease-in-out;}
.thumbnails .component:hover .foto img {-webkit-transform:scale(1.2); transform:scale(1.2);}

.rutas{padding-top:30px; width:90%; margin-left:5%; line-height: 1.5em;}
.rutas img{padding:15px;}
.rutas p{padding:15px}

.nosotros{padding-top:30px; width:90%; margin-left:5%; line-height: 1.5em;}
.nosotros img{padding:15px;}
.nosotros p{padding:15px}

.contactar{
	width:60%;
	margin-left:30%;
	margin-top:10px;
	padding-bottom:30px;
}
.contactar img{
	margin:8px 10px 8px 30px;
	vertical-align:middle;
}

/* ---------------------------------------------------------- */

.resumen{
	float:left;
	background-color:#eee;
	margin-top: 25px;
	padding-bottom: 25px;
	padding-left: 6%;
	padding-right: 5%;
	line-height:1.5;
}
.resumen h2{
	color:#360;
}
.resumen p{
	color:#444;
	font-size:0.9em;
}
.resumen a:link,
.resumen a:visited,
.resumen a:active{
    color:#800;
	text-decoration:underline;
}

/* ---------------------------------------------------------- */

footer{
	float:left;
	width:100%;
	background-color:#636363;
	padding:40px 0 20px 0;
	color:#fff;
}
footer .legal{
	float:right;
	margin-right:5%;
	margin-bottom:40px;
}
footer .legal a{
	font-size:1em;
	color:#fff;
}
footer .name{
	margin-left: 5%;
	color:#fff;
}

/* -----------------------------------------------------------------------------------*/
@media screen and (min-width:940px){
.titol h1{font-size:3em;}
.titol p{font-size:1.5em;}
nav ul{text-align:center;margin-top:0;}
.social{margin-top:-50px;}
.thumbnails li{width: 18.5%;}
.thumbnails li .descripcio{min-height: 150px;}
.caballos li{width:80%;margin-left: 10%;}
.contactar{width:50%;margin-left:25%;}
}

/* -----------------------------------------------------------------------------------*/
@media screen and (min-width:1024px){
nav ul li{ /* linea de menu principal */
	font-size:1.2em;
	padding:8px;
}
.caballos li{width:80%;margin-left: 10%;}
.rutas{width:80%;margin-left:10%;}
}

/* -----------------------------------------------------------------------------------*/
@media screen and (min-width:1250px){
.nav-collapse ul{
	margin-top:0;
}
.caballos {margin-top:65px}
.caballos li{width:60%;margin-left: 20%;}
.nav-collapse li a{
	font-size:20px;
	margin-right:5px;
	padding:10px;
}
.fotos-peu{
	display:inline-block;
}
.fotos-peu.img{
	max-width:45%;
}
.contactar{
	width:30%;
	margin-left:35%;
	margin-top:50px;
	padding-bottom:50px;
}
footer .legal li{
	width:24.5%;
}
footer .social{
	margin-right:8%;
}
}