/*  
Theme Name: CEA
Theme URI: http://www.factorn.com
Version: 1.0.0
Author: factor ñ
Author URI: http://www.factorn.com
*/

@pagewidth: 1200px;
@color: #0b4c61;
@actioncolor: #dbab61;
@textcolor: #868684;
@lightcolor: #f0f0f0;
@darkgray: #667079;
@font: 'Open Sans', sans-serif;
@bigfont: 'Montserrat', sans-serif;
@borderradius: 5px;
@borderwidth: 2px;
@buttonpadding: 10px;
@shadow: 10px 10px 30px 0 rgba(0,0,0,.2);




/************************************ RESET ************************************************/
* {margin: 0; padding: 0; border: 0; outline: 0; list-style: none; text-decoration: none; outline: none; box-sizing: border-box;}
body {position: relative; overflow-x: hidden;}
img {max-width: 100%; height: auto;}




/************************************ MIXIN ************************************************/
.pagewidth {width: @pagewidth; max-width: 100%; margin-left: auto; margin-right: auto;}
.fullwidth {margin-left: -50vw; margin-right: -50vw; padding-left: 50vw; padding-right: 50vw;}
.transition {-webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease;}

.ui_color {background: @color; border: @borderwidth solid @color; color: white;}
.ui_colorghost {background: none; border: @borderwidth solid @color; color: @color;}
.ui_action {background: @actioncolor; border: @borderwidth solid @actioncolor; color: white;}
.ui_actionghost {background: none; border: @borderwidth solid @actioncolor; color: @actioncolor;}

.imagehover {opacity: 0.6;}
.clear:before, .clear:after {content: ' '; display: table; clear: both;}
.shadow {-webkit-box-shadow: @shadow; box-shadow: @shadow;}

.alignleft {float: left; margin: 0 2rem 2rem 0;}
.alignright {float: right; margin: 0 0 2rem 2rem;}
.aligncenter {display: block; margin: 0 auto 2rem auto; text-align: center;}




/************************************ TEXTO ************************************************/
body {.pagewidth; max-width: 92%; font-family: @font; font-size: 95%; vertical-align: baseline; color: @textcolor;}

h1 {font-family: @bigfont; font-size: 180%; border-bottom: @borderwidth solid; padding-bottom: 15px; font-weight: normal; line-height: 1.2em; margin-bottom: 1em; color: @color;}
h2 {font-family: @bigfont; font-size: 120%; font-weight: normal; border-top: @borderwidth solid; padding: 10px 15px; margin: 3em 0 1em; color: white; background: @color;}
h3 {font-family: @bigfont; font-size: 110%; border-bottom: @borderwidth solid; padding-bottom: 15px; font-weight: normal; color: @color;}
h4 {font-family: @bigfont; font-size: 110%; font-weight: normal; color: @color;}

small {font-size: 90%;}

a {color: @color;}
a:hover {color: lighten(@color, 20%);}




/************************************ SOCIAL ************************************************/
.topbar {
	.fullwidth; line-height: 30px; border-bottom: 1px solid @lightcolor; text-align: right;
	div {.pagewidth;}
	img {.transition; width: 18px; height: 18px; margin-top: -3px; vertical-align: middle;}
	img:hover {.imagehover;}
	form {display: inline-block;}
	input {width: 150px; height: 30px; padding: 0 @buttonpadding*2; margin: 0 0 0 15px; border: 0; background: url('images/ico_search.svg') no-repeat 100%-5px center @lightcolor; background-size: 18px 18px;}
}




/************************************ HEADER ************************************************/
header {
	.fullwidth; padding-top: 30px; padding-bottom: 30px; background: url('images/header.jpg') no-repeat center center @color; background-size: auto 100%;

	img {.transition; vertical-align: middle;}
	img:hover {.imagehover;}
}




/************************************ NAV ************************************************/
nav {
	.fullwidth; height: 50px; line-height: 50px; margin-bottom: 30px; background: @darkgray;

	.menu {display: flex; background: #ccc;}
	.menu > li {flex: 1 1 auto; position: relative;}
	.menu > li > a {.transition; display: block; padding: 0 20px; border-left: 1px solid lighten(@darkgray, 10%); color: #fff; background: @darkgray; text-align: center; white-space: nowrap;}
	.menu > li > a:hover {background: lighten(@darkgray, 10%);}
	.menu > li:hover .sub-menu {display: flex;}
	.menu > li:last-child a {border-right: 1px solid lighten(@darkgray, 10%);}
	.menu > li:last-of-type a:hover {background: lighten(@actioncolor, 20%);}
	
	.sub-menu {.shadow; display: none; width: 100%; position: absolute; top: 50px; z-index: 1000000; min-width: 200px; line-height: normal; flex-direction: column; flex-wrap: wrap; background: white; border-radius: @borderradius; overflow: hidden;}
	.sub-menu a {display: block; border: 0; border-top: 1px solid @lightcolor; padding: @buttonpadding*0.75 @buttonpadding*2; color: @textcolor;}
	.sub-menu a:hover {background: @lightcolor; color: @color;}
	
	.responsiveMenuSelect {position: absolute; height: 50px; border: 10px solid @darkgray; margin: 0; padding: 0; color: white; background: @darkgray;}
	.responsiveMenuSelect:focus {border-color: lighten(@color, 20%); background: lighten(@color, 20%);}
	.responsiveMenuSelect option {padding: 3px 5px; background: white; color: @textcolor; border-bottom: 1px solid @lightcolor;}
	.responsiveMenuSelect option:hover {background: @color;}
}




/************************************ ARTICLE ************************************************/
section {
	.pagewidth;
	
	.responsive-slider.flexslider .slides img {float: left;}
	.slide-title {display: none !important;}
}
article {
	.destacado {.fullwidth; background: no-repeat center center @color; background-size: cover; background-attachment: fixed; padding-top: 10vw; padding-bottom: 10vw; margin-bottom: 50px; text-align: center;}
	.destacado div {.pagewidth; width: @pagewidth*0.66; padding: 5vw; border: @borderwidth solid white; color: white; font-size: 2rem;}

	.post_date {font-size: small; margin: 15px 0; opacity: .6;}

	.attachment-large {display: block; margin: 0 auto 30px;}
	.attachment-thumbnail {width: 100%;}
	
	hr {margin: 50px 0 30px 0; border-top: @borderwidth solid @lightcolor;}
	ul, ol, p {margin: 0 0 2rem 0; padding: 0;}
	li {list-style: disc; margin-left: 20px;}

	.pagination {clear: both; text-align: center; margin-top: 30px;}
	.pagination .page-numbers {margin: 0 1px;}
	.pagination .current {font-weight: bold;}
	
	.grid {display: flex; flex-wrap: wrap; margin: 0 -15px;}
	.grid > div {flex: 1 1 400px; padding: 0 15px 30px;}
	.grid img {width: 100%; height: auto; margin-bottom: 10px;}
	
	.grid.small {margin: 0 -2.5px; text-align: center;}
	.grid.small > div {position: relative; flex: 1 1 25%; width: 25%; max-width: 25%; padding: 0 2.5px 15px;}
	
	.directorio > div {flex: 0 0 25%;}
	
	.animated_hover {display: block; position: relative; perspective: 600px;}
	.animated_hover img {.transition; -webkit-transition: all .2s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease;}
	.animated_hover:hover img {transform: rotateY(180deg);}
	
	.empresa {display: flex; align-items: center; justify-content: center; width: 100%; height: 200px; margin: 0 auto 12px; border: 2px solid @lightcolor; padding: 10%;}
	.empresa img {width: auto; height: auto; max-height: 100%; max-width: 100%;}
	
	h2.global {background: @darkgray;}
	h3.global {color: @darkgray; border-color: @darkgray;}
	a.global {color: @darkgray; border-color: @darkgray;}
}




/************************************ SIDEBAR ************************************************/
aside {
	.widget .attachment-full {margin-bottom: -30px;}
	
	.widget {margin-bottom: 30px;}
	.widget h4 {padding: 30px 0 10px;}
	.widget li {list-style: none; margin: 0;}
	.widget li a {display: block; padding: 5px 0; border-top: 1px solid @lightcolor; color: @textcolor;}
	.widget li a:hover {color: @color}
	
	.provincias a {display: block; padding: 5px 10px; background: @lightcolor; margin-bottom: 2px; color: @textcolor; border-left: 30px solid @color;}
	.provincias a:hover {color: @color;}
	.provincias .sevilla {border-color: #b81626;}
	.provincias .malaga {border-color: #0b4c62;}
	.provincias .cordoba {border-color: #92005f;}
	.provincias .granada {border-color: #750921;}
	.provincias .almeria {border-color: #f49b2f;}
	.provincias .huelva {border-color: #008083;}
	.provincias .jaen {border-color: #566b30;}
	.provincias .cadiz {border-color: #b0a557;}
}




/************************************ PRE FOOTER ************************************************/
.prefooter {
	.fullwidth; background: @lightcolor; text-align: center; padding-top: 30px; padding-bottom: 30px;
	img {margin: 0 25px;}
}




/************************************ CALENDAR ************************************************/
#wp-calendar {width: 100%; padding: 5px 20px 16px; background: @darkgray; color: white;}
#wp-calendar caption {width: 100%; padding: 15px 20px 0; background: @darkgray; color: white; font-size: large;}
#wp-calendar thead th {font-size: 11px; padding-bottom: 4px;}
#wp-calendar tbody td {padding: 0; line-height: 25px; text-align: center; background: white; color: @textcolor;}
#wp-calendar tbody td a {display: block; background: @actioncolor; color: white;}
#wp-calendar tbody #today {background: @color; color: white;}
#wp-calendar tbody td:empty {visibility: hidden;}
#wp-calendar tfoot {padding-top: 5px;}
#wp-calendar tfoot td:last-child {text-align: right;}
#wp-calendar tfoot a {color: white;}
#wp-calendar .pad {background: none;}




/************************************ FOOTER ************************************************/
footer {
	.fullwidth; padding-top: 50px; padding-bottom: 50px; background: @color; color: white; border-bottom: 5px solid @darkgray;
	* {color: white;}
	h4 {padding-bottom: 20px; margin-bottom: 0; border-bottom: @borderwidth solid white; margin-bottom: 10px;}
	.widget li {list-style: none; margin: 0;}
	.widget li a {.transition; color: white;}
	.widget li a:hover {color: lighten(@color, 20%);}
}




/************************************ FORMULARIOS ************************************************/
form {}
input, textarea, select {
	display: inline-block;
	font-size: 1rem;
	font-family: @font;
	color: @textcolor;
	white-space: nowrap;
	background: @lightcolor;
	padding: @buttonpadding @buttonpadding;
	border: 1px solid darken(@lightcolor, 10%);
	margin: 0 5px 5px 0;
}
textarea {
	width: 100%;
	height: 200px;
	line-height: inherit;
	white-space: inherit;
	padding: 8px;
	margin-bottom: 20px;
	resize: none;
}
input:focus, textarea:focus, select:focus {
	border-color: @actioncolor;
}
input[type=checkbox], input[type=radio] {
	padding: inherit;
	line-height: inherit;
	height: inherit;
}
input[type=submit] {.button;}
input[type=submit]:hover {.ui_color;}




/************************************ BOTONES ************************************************/
.button {
	.ui_colorghost;
	.transition;
	font-family: @bigfont;
	display: inline-block;
	padding: @buttonpadding @buttonpadding*2.5;
	margin: 0 5px 20px 0;
	border-radius: @borderradius;
	font-size: 1.2rem;
	line-height: inherit;
	height: inherit;
	cursor: pointer;
}
.button:hover {.ui_color}
.button.small {padding: @buttonpadding*0.5 @buttonpadding*1.2; font-size: .7rem; font-weight: bold; text-transform: uppercase; font-family: @font;}
.button.big {padding: @buttonpadding*2 @buttonpadding*4; font-size: 1.4rem;}
.button.blockbutton {display: block; margin: 0 0 5px; border: 0; background: @lightcolor;}
.button.blockbutton:hover {color: white; background: @color;}



/************************************ MEDIA QUERIES ************************************************/
@media print {
	.topbar, nav, aside, .prefooter, footer {display: none;}
	article {width: 100%;}
}
@media all and (max-width: 920px){
	html, body {overflow-x: hidden;}
	.m-hide {display: none;}
	.directorio > div {flex: 0 0 33.33% !important; width: 33.33%;}
	article .grid.small > div {flex: 1 1 100%; width: 100%; max-width: 100%;}
}
@media all and (max-width: 768px){
	h1 {font-size: 2.2rem;}
	h2 {font-size: 1.8rem;}
	h3 {font-size: 1.2rem;}
	.s-hide {display: none;}
	.directorio > div {flex: 0 0 50% !important; width: 50%;}
}
@media all and (max-width: 480px){
	.xs-hide {display: none;}
	.directorio > div {flex: 0 0 100% !important; width: 100%;}
}