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

/* FUENTES */

.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';
	
}

/* TEXTOS */
body {
	.oSans(91%, 400, 1.9em);
	color:#444;
}
h1 {
	.oSans(2.5em, 100, 1.1em);
	display: block;
	text-align: center;
	a {text-decoration:none;}
	font-style: italic;
	color:@color1;
	margin-bottom:1em;
	@media all and (max-width:@tabletv){
		.oSans(2em, 100, 1.1em);
	}
	@media all and (min-width:@tabletv){
		.oSans(2em, 100, 1.1em);
	}
}
h2 {
	.oSans(1.4em, 400, 1.5em);
	margin-bottom:0.5em;
	display: block;
	text-align: center;
	padding-top: 1%;
	border-top:1px solid #ccc;
	color:@color1;
	cursor:pointer;
	&:hover{color:@color2;}
}
h3 {
	.oSans(1em, 300, 1.5em);
	text-transform:uppercase;
}

p {
	margin-bottom:3em;
	text-align:center;
}

/* ATAJOS */
.inner {
	width:90%;
	max-width:1200px;
	padding:2em;
	margin:0 auto;
	background-color:#fff;
	.hidden;
	.bBox;
}
.hidden { overflow:hidden;}
.center {text-align:center;}
.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;}


/* ESTRUCTURA */ 
body {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGUlEQVQIW2O8ePHif319fUYGIAATMIDCAQCQPQQEqJbSwgAAAABJRU5ErkJggg==);
}
footer {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGklEQVQIW2NkQAKMIPb///+NGRkZz4I5MAAASzUEBIm/Y50AAAAASUVORK5CYII=) repeat;
}

/* COLOURS */
@color1: #009ac1;
@color2: #93d4e4;

header {
	width:100%;
	height:100%;
	font-size:0.9em;
	border-bottom:1px solid @color2;
	.inner {
		nav {
			background-color:none;
			float:left;
			width:25%;
			.icons{
				font-size:1.8em;
			}
		}
		.logo {
			float:left;
			width:50%;
			img {
				max-width: 200px;
				width: 100%;
				margin: 0 auto;
				display: block;
			}
		}
		.social {
			float:right;
			font-size:2.5em;
			li { 
				color:@color2;
				float:left;
				margin-left:0.3em;
				&:hover {
					cursor:pointer;
					color:@color1;
				}
			}
		}
	}
}
.menu {
	height:30px;
	.hidden;
	padding-top:3px;
	.icons { cursor:pointer;}
	a:hover { color:@color2;}
}
.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(0);
		}
		img {
			width:100%;
		}
		.phrase {
			position:absolute;
			width:100%;
			.center;
			top:25%;
			color:#fff;
			.oSans(3em,100,1em);
			display:block;
			div {
				font-size:.4em;
				text-transform:uppercase;
				margin-top:.5em;
			}
		}
		span {
			display:block;
			margin-bottom:.5em;
		}
		.icons {
			text-decoration:none;
			font-size:.5em;
			background-color:#fff;
			color:@color1;
			padding:1em 1.1em;
			border-radius:100px;
			-moz-border-radius:100px;
			-webkit-border-radius:100px;
			
		}
		@media all and (max-width:900px) {
			img { display:none;}
			height:300px;
		}
	}
section {
	.breadcrumbs {
		border-bottom:1px solid #ccc;
		display:block;
		font-size: 0.8em;
		li { display:inline;}
		.icons {
			font-size: 1.2em;
			margin-right: .2em;
		}
	}
}
#laempresa p {
	display:none;
}
#dondeestamos > div {
	height:0;
	overflow:hidden;
}
.empresas {
	overflow:hidden;
	div {
		float:left;
		width:100%/3;
		margin:3em 0;
		img {
			width:80%;
			max-width:200px;
			display:block;
			margin:0 auto;
		}
		&:last-of-type {	
			width:100%;
			border-top:1px solid #ccc;
			padding-top:3em;
			margin-top:0;
		}
		@media all and (max-width:@tabletv) {
			width:100%;
			float:none,
		}
	}
}

footer {
	width:100%;
	.hidden;
	color:#fff;
	background-color:@color1;
	border-top: 3px solid @color2;
	font-size:0.8em;
	.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;}
		}
		.look:hover { text-decoration:underline;}
	}
}
.corporapage article { 
	width:65%; 
	margin:0 auto;
	h1 { 
		margin-bottom:1em;
		font-style:normal;
		margin-top:1em;
	}
}

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