/*
Theme Name: Pino Theme
Version: 1.0
Description: Plantilla para Grupo Pino.
Template: Pino Theme
*/

/* FUENTES */
/*.oSans */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

.oSans(@size, @weight, @line) {
	font-family: 'Open Sans', sans-serif;
	font-size:@size;
	font-weight:@weight;
	line-height:@line;
}
/* Iconos */
@font-face {
  font-family: 'icons';
  src: url('../fonts/icons.ttf');
  font-weight: normal;
  font-style: normal;
}
.icons {
	font-family:'icons';

	text-decoration:none;
}

/* TEXTOS */
body {
	.oSans(91%, 400, 1.9em);
	color:#444;
}
h1 {
	.oSans(2.5em, 100, 1.1em);
	margin-bottom:0.5em;
	a {text-decoration:none;}
	@media all and (max-width:@tabletv){
		.oSans(2em, 300, 1.1em);
	}
	@media all and (min-width:@tabletv){
		.oSans(2.5em, 300, 1.1em);
	}
}
h2 {
	.oSans(1.4em, 400, 1.5em);
	margin-bottom:0.5em;
}
h3 {
	.oSans(0.9em, 300, 1.5em);
	text-transform:uppercase;
}
p { margin-bottom:3em; }

.zona {	color: #aaa; 
	a { text-decoration:none;}
}

.txtSmall { .oSans(0.9em, 400, 1.6em); }

/* ATAJOS */
.inner {
	width:90%;
	max-width:1200px;
	padding:2em;
	margin:0 auto;
	background-color:#fff;
	.hidden;
	.bBox;
	@media (max-width: 768px) {
		padding:1em;
	}
}
.hidden { overflow:hidden;}
.center {text-align:center;}
.bt { 
	display:block;
	background-color:@color1;
	padding:1em;
	color:#fff;
}
.bBox {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.transparent(@value) {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@value)";
	filter: alpha(opacity=@value);
	-moz-opacity:@value/100;
	-khtml-opacity: @value/100;
	opacity: @value/100;
}
*:hover {transition:.3s ease-out;}

.w100 {
	width:100%;
	float:none;
}

/* COLORES */
@color1:#ce4831;
@color2:#ddccae;

/* ESTRUCTURA */ 
select, input[type="search"], input[type="text"], textarea {
	width:100%;
	background: #fbfbfb;
	padding: 1px 3px 1px 7px;
	border: 1px solid #ccc;
	.oSans(0.8em, 400, 1.7em);
}
select {
	-webkit-appearance: none;
	background-image: url(../images/arrowSelect.png);
	background-position: 93% 61%;
	background-repeat: no-repeat;
	outline: none;
	border-radius:0;
	
}
input[type="search"] {
	border: 1px solid #ccc;
	-webkit-appearance: none;
	border-radius:0;
}
body {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGUlEQVQIW2O8ePHif319fUYGIAATMIDCAQCQPQQEqJbSwgAAAABJRU5ErkJggg==);
}
.searchBox, footer {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGklEQVQIW2NkQAKMIPb///+NGRkZz4I5MAAASzUEBIm/Y50AAAAASUVORK5CYII=) repeat;
}

header {
	width:100%;
	height:100%;
	font-size:0.9em;
	border-bottom:1px solid @color1;
	.inner {
		nav {
			@media all and (max-width:@tabletv) {
				.w100;
				height:auto;
			}
			background-color:none;
			float:left;
			width:25%;
			min-height:1px;
			.icons{
				font-size:1.8em;
			}
			height: 30px;
			padding-top: 3px;
			}
			.menu {
				height: 30px;
				overflow: hidden;
				padding-top: 3px;
				.iconMovil { cursor:pointer; color:@color1;}
				a:hover { color:@color1;}
			}

		.logo {
			float:left;
			width:50%;
			img {
				max-width: 200px;
				width: 100%;
				margin: 0 auto;
				display: block;
			}
			@media all and (max-width:@tabletv) {
				.w100;
			}
		}
		.social {
			float:right;
			font-size:2.5em;
			li { 
				color:@color2;
				float:left;
				margin-left:0.3em;
				margin-bottom:0.3em;
				&:hover {
					cursor:pointer;
					color:@color1;
				}
			}
			@media all and (max-width:@tabletv) {
				float:none;
				width:auto;
				display: table;
				margin: 1em auto 0 auto;
			}
		}
	}
}
section {
	overflow:hidden;
	h1, h3 { color:@color1; }
	h2 { color:@color2;}
	a:hover {color:@color1;}
	.breadcrumbs {
		border-bottom:1px solid #ccc;
		margin-bottom:1.5em;
		display:block;
		font-size:0.8em;
		li { display:inline;}
		.icons { font-size:1.2em; margin-right:.2em;}
	}
	.searchCol {
		.block { margin-bottom:1.5em;}
		ul {font-size:0.8em;}
		margin-right:5%;
		float:left;
		@media all and (max-width:@tabletv) {
			display:none;
		}
		@media all and (min-width:@tabletv) and (max-width:@tableth) {
			width:25%;
		}
		@media all and (min-width:@tableth) {
			width:15%;
		}
		.icons {
			display:table;
			margin:0 auto 1em auto;
			padding: .6em;
			line-height: .8em;
			border-radius: 100px;
			background-color: @color1;
			color: #fff;
			font-size: 2em;
			border: 0px;
			cursor: pointer;
		}
		.tags {
			border-top:1px solid #ccc;
			padding-top:1em;
		}
	}
	.content {
		float:left;
		@media all and (max-width:@tabletv) {
			width:100%;
			float:none;
		}
		@media all and (min-width:@tabletv) and (max-width:@tableth) {
			width:70%;
		}
		@media all and (min-width:@tableth) {
			width:80%;
		}
	}
	.searchMobile {
		@media all and (min-width:@tabletv) {
			display:none;
		}
	}
	article {
	
		&:first-of-type { margin-top:0;}
	}
	&>.inner { padding-top:1em;}
}
.pagination {clear:both;}
.excerpt {
	.txtSmall; color: #888;
	}
footer {
	width:100%;
	.hidden;
	color:#fff;
	background-color:@color1;
	border-top: 3px solid @color2;
	.txtSmall;
	.inner {background-color:transparent; padding:2em;}
	h3 { color:@color2; font-size:1.3em;}
	.col {
		width:100%/4;
		float:left;
		ul {list-style:disc; margin-left:1.3em;}
		a:hover{color:@color2;}
		@media all and (max-width:@tabletv) {
			float:none;
			width:100%;
			text-align:center;
			margin-top:3em;
			ul { list-style:none; margin-left:0;}
		}
	}
	.credits {
		.hidden;
		padding:1em 0;
		color:#fff;
		div {
			width:100%/3;
			float:left;
			&:last-of-type {text-align:right;}
		}
		.icons { 
			font-size:6em;
			color:@color2;
			&:hover { color:#fff;}
		}
	}
}

/*  SECCIONES */
.home {
	h1 {
		display:block;
		text-align:center;
		margin-bottom: 1em;
		font-style: italic;
		font-size:2em;
	}
	h2 {
		display:block;
		text-align:center;
		border-top:1px solid @color2;
		padding-top:1%;
		text-decoration:underline;
		cursor:pointer;
		text-decoration:none;
		&:hover { color:@color2;}
	}
	#laempresa p { display:none; text-align:center;}
	#dondeestamos p {text-align:center;}
	#dondeestamos > div { height:0; overflow:hidden;}
	.inner { 

		@media all and (min-width:@tabletv) {
			padding-top:4em;
			padding-bottom:4em;
		}
		@media all and (min-width:@tableth) {
			padding-top:6em;
			padding-bottom:6em;
		}
	}
}
.slide {
	width:100%;
	background-color:@color1;
	position:relative;
	&:before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color:darken(@color2,40%);
		.transparent(60);
	}
	.searchBox {
		position:absolute;
		width:50%;
		max-width:500px;
		background-color:@color1;
		margin:0 auto;
		.bBox;
		color:#fff !important;
		.searchBt { font-size:2.5em; border:0;}
		@media all and (max-width:@phone) {
			width:90%;
			padding:5%;
		}
		@media all and (min-width:@phone) and (max-width:@tabletv) {
			width:70%;
			padding:2%;
		}
		@media all and (min-width:@tabletv) {
			padding:2%;
		}
		.selects {
			float:left;
			width:70%;
			span { 
				width:40%; 
				text-align:right; 
				display:inline-block; 
				margin-right:5%; 
				font-size:0.8em;
			}
			select { 
				border-color: darken(@color1, 10%);
				width:50% !important; 
			}
			@media all and (max-width:900px) {
				float:none;
				width:100%;
				margin-bottom:1em;
			}
		}
		.icons {
			float:left;
			padding:.6em;
			line-height:.8em;
			border-radius:100px;
			background-color:#fff;
			margin-left: 5%;
			color:@color1;
			
			@media all and (max-width:900px) {
				display:table;
				float:none;
				margin:0 auto;
				text-align:center;

			}
		}
	}
	img {
		width:100%;
		@media all and (max-width:900px) {
			display:none;
		}
	}
	@media all and (max-width:900px) {
		min-height:350px;
	}
}
.property {
	.block { margin-bottom:2em; }
	h1 { margin-bottom:0;}
	.summary {
		margin-top:1em;
		.hidden;
		.gallery {	
			float:left;
			margin-right:3%;
			@media all and (max-width:@phone) {
				width:100%; 
				float:none;
				margin-bottom:2em;
			}
			@media all and (min-width:@phone) and (max-width:@tabletv) {
				width:63%;
				margin-right:3%;
				float:left;
			}
			@media all and (min-width:@tabletv) and (max-width:@tableth) {
				width:100%; 
				float:none;
				margin-bottom:2em;
			}
			@media all and (min-width:@tableth){
				width:63%;
				margin-right:3%;
				float:left;
			}
			ul {
				.hidden;
				
				li {
					width:94%/3;
					float:left;
					margin-right:3%;
					margin-bottom:2%;
					&:first-of-type {
						width:100%;
						float:none;
						margin-right:0;
						img { padding:2%;}
					}
					&:nth-child(4n) {
						margin-right:0;
					}
					img { 
						width:100%; 
						height:auto; 
						border:1px solid #ccc; 
						padding:7%; 
						.bBox; 
					}
				}
				@media all and (max-width:@tabletv) {
					li { 
						margin-right:0;
						&:first-of-type {
							img { 
								padding:3%;
							}
						}
						width:97%/2;
						&:nth-child(2n) {
							margin-right:3%;
						}
					 
					}
				}
			}
		}
		.extract {	
			h2 { margin-bottom:0; line-height:1em;}		
			a {.txtSmall;}
			.excerpt { margin-top:1em;}
			@media all and (max-width:@phone) {
				width:100%; 
				float:none;
			}
			@media all and (min-width:@phone) and (max-width:@tabletv) {
				width:34%;
				float:left;
			}
			@media all and (min-width:@tabletv) and (max-width:@tableth) {
				width:100%; 
				float:none;
			}
			@media all and (min-width:@tableth) {
				width:34%;
				float:left;
			}
		}
	}
	.contact {
		width:50%;
		input, textarea { margin-bottom:1em; .bBox;}
		textarea { min-height:10em;}
		@media all and (max-width:@tabletv) {
			width:100%;
		}
		.legalterms { font-size:.8em; line-height:1.4em; color: #bbb;}
	}
}

.properties {
	.results {
		.hidden;
		li { 
			margin:0 3% 3% 0;
			min-height:520px;
			float:left;
			border:1px solid #ccc;
			.bBox;
			padding:1.5%;
			.thumb { height:11em; overflow:hidden; margin-bottom:1em;}
			img { width:100%; height:auto; }
			.propTitle { font-weight:400; line-height:1.4em; margin-top:1em; }
			.excerpt a {
				color:@color1; 
				display:block;
				margin-top:1em;
			}
			@media all and (max-width:@phone) {
				width:100%;
				margin-right:0;
				padding:5%;
			}
			@media all and (min-width:@phone) and (max-width:@tabletv) {
				width:97%/2;
				padding:4%;
				&:nth-child(2n) { margin-right:0;}
			}
			@media all and (min-width:@tabletv) and (max-width:@tableth) {
				width:97%/2;
				&:nth-child(2n) { margin-right:0;}
			}
			@media all and (min-width:@tableth) {
				width:94%/3;
				&:nth-child(3n) { margin-right:0;}
			}
		}
	}
}

.page {
	.content { 
		h1 { text-align:center;}
		margin:0 auto;
		width:65%;
		float:none;
		}	
}




/* RESPONSIVE */
/* Breakpoints */
@phone:480px;
@tabletv:768px;
@tableth:980px;
@desktop:1200px;
@bigdesktop:1300px;