/*
Theme Name: ESPALET-MB
Theme URI: http://www.espalet.eu
Author: Net314
Author URI: https://wordpress.org/
Description: Description
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: espalet

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others. 3
*/

body,html {
	background: transparent;
  font-family: 'Open Sans', sans-serif;
}

/*=============================================
=            TOOLS            =
=============================================*/

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.container-full {
  width: 100%;
  margin: 0 auto;
}

img.responsive {
  max-width: 100%;
  height: auto;
}


/*=====  End of TOOLS  ======*/


/*=============================================
=            HEADER            =
=============================================*/

#prenav {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px;
  background: url("images/fondo_header.jpg");
}
.pre-header {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background: #ffffffb6;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
}
.logo-dcha {
  display: flex;
  align-items: center;
  justify-content: left;
  width: 20%;
  float:left;
}
.logo-izda {
  display: flex;
  align-items: center;
  justify-content: right;
  width: 20%;
  float:left;
}
.logo-dcha img, .logo-izda img {
  max-width: 100%;
  height: auto;
}

.centro {
  text-align: center;
  width: 60%;
  float:left;
}



@media screen and (max-width:768px) {
  
  h1.title-header {
    font-size: 26px;
  }

  .logo-dcha img, .logo-izda img {
    max-height: 45px;
    width: auto;
    max-width: 100%;
  }
}

@media screen and (max-width:768px) {
  h1.title-header {
    font-size: 18px;
  }
  .logo-izda {
    width: 10%;
  }
  .centro {
    width: 70%;
  }
  .logo-dcha {
    width: 20%;
  }
  
}


/*=====  End of HEADER  ======*/



/*=============================================
=            PORTADA            =
=============================================*/

h2.home-title {
  font-size: 1.5em;
  background:  #085993;
  color: #fff;
  padding: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
	font-family: 'Quicksand', sans-serif;
}

.home {
  text-align: center;
}
.container.home {
  box-sizing: border-box;
  padding: 0px;
  margin-top: 60px;
}

/* Carretera */
.carretera-mapa {
  position: relative;
  overflow: hidden;
}
.carretera-mapa-base {
  position: relative;
  width: 100%;
	height: 100%;
	overflow: hidden;
  top: 0px;
  background: red;
}
.carretera-imagen {
  position: relative;
  z-index: 100;
}
.carretera-tramos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: grey;
  z-index: 50;
}
.tramo {
  display:block;
  float:left;
  width: 100%;
}
.tramo.tb-abierta  {
  background-color: rgb(128, 128, 128);
}
.tramo.tb-incidencias  {
  background-color: orange;
}
.tramo.tb-cerrada  {
  background-color: red;
} 
.carretera-imagen img {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border: 2px solid #ccc;
}
.carretera-estado, 
.carretera-avisos,
.carretera-leyenda, 
.carretera-otros-pasos {
  box-sizing: border-box;
  display: block;
  padding: 5px;
  text-align: left;
  border: 2px solid #ccc;
  margin-bottom: 10px;
}
.carretera-avisos {
  padding: 20px;
}
.carretera-avisos h5 {
  font-weight: bold;
}

.carretera-avisos p {
  padding-left: 20px;
}
.color {
  height: 1em;
  width: 1em;
  border-radius: 50%;
  display: inline-block;
  vertical-align: center;
}
.tb-abierta .color {
  background-color: green;
}
.tb-incidencias .color {
  background-color: orange;
}
.tb-cerrada .color {
  background-color: red;
}
h3.carretera-title {
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 3px;
  margin-top: 3px;
}
.carretera-leyenda ul {
  list-style:none;
  padding-left: 10px;
  margin:0px;
}
.carretera-leyenda ul li span.linea.abierta {
  color: grey;
}
.carretera-leyenda ul li span.linea.incidencias {
  color: orange;
}
.carretera-leyenda ul li span.linea.cerrada {
  color: red;
}

.carretera-otros-pasos ul {
  list-style:none;
  padding-left: 10px;
  margin:0px;
  font-weight: normal;
}

a.carretera-webcam {
  position: absolute;
  top: 0;
  left: 0;
  width: 4%;
  display:block;
  overflow: hidden;
  background: rgb(157, 240, 243);
  border-radius: 50%;
  border: 1px solid #000;
  box-sizing: border-box;
  z-index: 120;
  cursor: pointer;
  opacity: 1;
}
a img.webcam {
  width: 12px;
  height: 12px;
  display:inline-block;
  overflow: hidden;
  background: rgb(157, 240, 243);
  border-radius: 50%;
  border: 1px solid #000;
  cursor: pointer;
  opacity: 1;
}
a.carretera-webcam:hover {
  border: 1px solid #000;
  background: #085993;
}
a.carretera-webcam img {
  width: 100%;
  height: auto;
  float:left;
}


/* Webcam */

.imgwebcam img {
  width: 100%;
  height: auto;
}




/* Noticias */
.col-wrapper {
  padding: 30px;
}
.noticia-item,.contrato-item {
  text-align: left;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;

}


/* Avisos */
.avisos ul {
  list-style: none;
  text-align: left;
  padding: 0px;
}

.avisos ul li {
  display: block;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}



/* Proyectos */

.container-proyectos {
  background-color: #ccc;
  padding-top: 20px;
  padding-bottom: 60px;
}

.container-proyectos h3 {
	font-size: 18px;
	min-height: 2em;
}

.container-proyectos .img-circle {
  max-width: 80%; margin: auto;
}


/* Logos */

.container-logos {
  margin-top: 40px;
  padding-top: 20px;
  margin-bottom: 20px;
  
}

/* Twitter */

.twitter-w{
  height: 300px;
  max-height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
}

/*=====  End of PORTADA  ======*/



/*=============================================
=            FOOTER            =
=============================================*/

.pie-pagina {
  border-top: 1px solid #808080;
  margin-top: 40px;
}
footer {
  padding: 20px;
  border-top: 1px solid #ccc;
  text-align: center;
  background:  #085993;
  color: #fff;

}

/*=====  End of FOOTER  ======*/




/*=============================================
=            PÁGINAS            =
=============================================*/


/* Default */

.box-menu-hijos ul{
  box-sizing: border-box;
  border: 2px solid #ccc;
  padding-top: 10px;
  padding-bottom: 10px;
}
h3.menu-hijos {
  font-size: 14px;
  font-weight: bold;
  background: #085993;
  color: #fff;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 0px
}


/*=====  End of PÁGINAS  ======*/


/*=============================================
=            Noticias, contratos            =
=============================================*/

h1.single {
  font-size: 20px;
  font-weight: bold;
}
h2.list-items {
  font-size: 20px;
  font-weight: bold;
}
/*=====  End of Noticias, contratos  ======*/


/*=============================================
=            WIDGETS            =
=============================================*/

h1.widget-title {
  font-size: 14px;
  font-weight: bold;
  background: #085993;
  color: #fff;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 0px
}
.widget ul {
  box-sizing: border-box;
  border: 2px solid #ccc;
  padding-top: 10px;
  padding-bottom: 10px;
}

.custom-search, .widget_search {
  overflow: hidden;
}
#searchform input[type=text]{

  width: 70%;
  float:left;

}

#searchform input[type=submit]{

  width: 25%;
  float:right;

}
/*=====  End of WIDGETS  ======*/



/*=============================================
=            PIE            =
=============================================*/

ul.footer-centered {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

ul.footer-centered li {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}
ul.footer-centered li a {
  text-decoration: none;
  color: #fff;
}
/*=====  End of PIE  ======*/



/*=============================================
=            NAVIGATION BAR            =
=============================================*/

/* Add a black background color to the top navigation */
.topnav {
  background-color: #085993;
  overflow: hidden;
  padding-bottom: 0px;
}
/* Right-aligned section inside the top navigation */
.topnav-centered {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
/* Style the links inside the navigation bar */
.topnav-centered ul {
  list-style: none;
  padding-left: 0px;
}
.topnav-centered ul li  {
  display: inline-block;
}
.topnav li a,.topnav a.icon {
  display: inline-block;
  color: #FFF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}


/* Add an active class to highlight the current page */
.active {
  font-weight: bold;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav a.icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}


/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #064470;
  color: white;
}




/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1024px) {
  .topnav-centered {
    float: left;
    width: auto;
  }

  .topnav-centered a {
    float:left;
    display: block;
  }

  .topnav-centered li:not(:first-child) {
    display: none;
    
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1024px) {
  
  .topnav.responsive {position: relative; width: auto;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive .topnav-right {
      float: none;
    }
  .topnav.responsive li {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/*=====  End of NAVIGATION BAR  ======*/