@font-face {
  font-family: 'aller_lightregular';
  src: url("../fonts/aller-light-webfont.eot");
  src: url("../fonts/aller-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/aller-light-webfont.woff") format("woff"), url("../fonts/aller-light-webfont.ttf") format("truetype"), url("../fonts/aller-light-webfont.svg#aller_lightregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'aller_lightitalic';
  src: url("../fonts/aller-lightitalic-webfont.eot");
  src: url("../fonts/aller-lightitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/aller-lightitalic-webfont.woff") format("woff"), url("../fonts/aller-lightitalic-webfont.ttf") format("truetype"), url("../fonts/aller-lightitalic-webfont.svg#aller_lightitalic") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'aller_bold';
  src: url("../fonts/aller-bold-webfont.eot");
  src: url("../fonts/aller-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/aller-bold-webfont.woff") format("woff"), url("../fonts/aller_bd-webfont.ttf") format("truetype"), url("../fonts/aller-bold-webfont.svg#aller_bold") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'cof-icons';
  src: url("../fonts/icomoon.eot?-q5s67w");
  src: url("../fonts/icomoon.eot?#iefix-q5s67w") format("embedded-opentype"), url("../fonts/icomoon.woff?-q5s67w") format("woff"), url("../fonts/icomoon.ttf?-q5s67w") format("truetype"), url("../fonts/icomoon.svg?-q5s67w#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot?-d0eeye");
  src: url("../fonts/icomoon.eot?#iefix-d0eeye") format("embedded-opentype"), url("../fonts/icomoon.woff?-d0eeye") format("woff"), url("../fonts/icomoon.ttf?-d0eeye") format("truetype"), url("../fonts/icomoon.svg?-d0eeye#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-email21:before {
  content: "\e600"; }

.icon-newspaper7:before {
  content: "\e601"; }

.icon-password14:before {
  content: "\e602"; }

.icon-plain14:before {
  content: "\e603"; }

.icon-user182:before {
  content: "\e604"; }

a {
  outline: medium none;
  text-decoration: none; }

p {
  color: #4b585b;
  font-size: .8em;
  padding: 0;
  margin: 0;
  margin-bottom: 8px; }

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%; }

h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: normal; }

h5.titulo-estrella, h5.titulo-nube, h5.titulo-llistat, h5.titulo-arbol, h5.titulo-contacto, h5.titulo-transporte, h5.titulo-correo {
  font-size: 1.1em;
  border-bottom: 1px solid #b7c6c9;
  color: #5e7074;
  font-family: "aller_lightregular";
  margin: 0 0 20px;
  padding: 0 0 0.2em 1.6em;
  position: relative; }

.titulo-estrella:before {
  background: url("../images/custom/iconos/star.png") no-repeat left top !important;
  content: "";
  height: 20px;
  left: 3px;
  position: absolute;
  top: -2px;
  width: 20px; }

.btn {
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: .8em;
  height: 32px;
  line-height: 32px;
  outline: 0;
  padding: 0 22px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'aller_lightregular'; }

.btn:hover {
  background-color: #c0610c; }

.btn-naranja {
  background-color: #e67e22; }

input {
  height: 32px;
  padding-left: 0.5em;
  padding-right: 0.5em; }

select, input[type="text"], input[type="email"], input[type="password"] {
  background-color: #ffffff;
  border: 1px solid #d5dfe1;
  color: #aeb5b7;
  font-family: "aller_lightregular";
  font-size: 0.8em;
  line-height: 32px;
  outline: 0 none;
  width: 100%; }

body {
  font-family: "aller_lightregular";
  font-size: 16px;
  background-color: #f4f6f4;
  padding-top: 20px;
  padding-bottom: 90px;
  padding-left: 1%;
  padding-right: 1%;
  border-top: 4px solid #00b2d9; }

#wrapper {
  background-color: #ffffff;
  margin: 0 auto;
  max-width: 940px;
  padding-bottom: 20px;
  padding-top: 44px;
  width: 100%;
  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

/* #navigation, #footer{
    display: none;
} */
#banner {
  background-color: #00A9A1;
  height: 39px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  margin-bottom: 20px;
  position: relative; }

#heading {
  display: table;
  width: 100%;
  background: none repeat scroll 0 0 #00B2D9; }

.logo-container, .titulo-superior, .logo-container, .titulo-superior-izq {
  display: table-cell;
  text-align: left;
  width: 10%; }

.titulo-superior {
  vertical-align: middle;
  font-size: 1.2em;
  color: #ffffff;
  width: 90%;
  padding-left: 10px; }

.titulo-superior-izq {
  background-color: #00a9a1;
  color: #ffffff;
  font-size: 0.8em;
  padding-left: 30px;
  padding-right: 10px;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap; }

.logo {
  background: none repeat scroll 0 0 #FFFFFF;
  display: block;
  padding: 0 20px;
  width: 217px; }

#navigation {
  display: block;
  position: absolute;
  right: 25px;
  top: -30px; }

#navigation ul li {
  display: inline-block;
  line-height: 11px;
  list-style: outside none none;
  padding: 0 5px; }

#navigation ul li:last-of-type {
  border-left: 1px solid #c8c8c8;
  padding-left: 8px; }

#navigation ul li a {
  font-size: 0.7em;
  color: #00a9a1; }

#navigation ul li a:hover {
  color: #c8c8c8; }

#navigation ul li.selected a {
  color: #c8c8c8; }

#footer {
  float: left;
  margin-bottom: 30px;
  margin-top: 40px;
  width: 100%;
  font-size: 0.7em;
  color: #00a9a1;
  text-align: center; }

.col-izquierda {
  background-color: #ffffff;
  margin-bottom: 0px;
  overflow: hidden;
  padding: 0 1%;
  padding-top: 30px;
  padding-bottom: 25px;
  width: 100%; }

.portlet-topper {
  display: none; }

/* .img-splash{
    display: block;
    float: left;
    margin: 0 1%;
    position: relative;
    width: 31.33%;
} */
img {
  border: medium none;
  height: auto;
  vertical-align: top;
  width: 100%; }

.col-derecha {
  margin: 0 auto;
  width: 100%;
  padding: 0;
  padding-left: 1%;
  padding-right: 1%; }

.verde {
  color: #00a9a1; }

#progressbar {
  background-color: #B7B7B7;
  height: 4px;
  width: 100%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

#indicator {
  width: 0px;
  background-color: #00a9a1;
  height: 4px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

#progressnum {
  text-align: left; }

.destacados {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%; }

.destacado {
  display: block;
  position: relative;
  width: 49%;
  float: left; }

.destacado.last {
  margin-left: 2%; }

.destacado img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

.webs-container {
  display: block;
  position: relative;
  width: 100%;
  padding: 0px; }

.webs-box {
  display: block;
  position: relative;
  width: 32%;
  margin-right: 2%;
  float: left; }

.webs-box.last {
  margin: 0px; }

.webs-title {
  display: block;
  position: relative;
  background-color: #00a9a1;
  padding: 12px;
  width: 100%;
  color: #ffffff;
  font-size: 1.1em; }

.webs-images {
  display: block;
  position: relative;
  margin-top: 22px;
  width: 100%; }

.webs-images img {
  width: 100%;
  height: auto; }

.last .webs-images img {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

.webs-text {
  display: block;
  position: relative;
  width: 100%;
  color: #105b7a;
  font-size: 0.8em;
  padding: 10px 12px;
  background-color: #f3f9fa;
  margin-top: 20px;
  line-height: inherit;
  font-family: "aller_lightregular"; }

.icon-newspaper7 {
  padding-left: 44px; }

.webs-text.icon-newspaper7:before {
  display: block;
  font-size: 24px;
  left: 10px;
  margin-top: -12px;
  position: absolute;
  top: 50%;
  font-family: "icomoon";
  line-height: 1; }

.webs_enlaces a {
  width: 100%;
  display: block;
  position: relative;
  margin-top: 20px;
  text-align: center; }

.webs-text-form {
  background-color: #f3f9fa;
  color: #105b7a;
  font-size: 0.95em;
  padding: 22px 12px 12px; }

.webs-formulario .webs-text {
  margin-top: 0;
  margin-bottom: 20px;
  padding-top: 31px;
  padding-bottom: 27px; }

.webs-box-form {
  background-color: #f3f9fa;
  color: #105b7a;
  padding: 0px 12px; }

.webs-box-form label {
  color: #4b585b;
  font-size: 0.9em;
  margin-bottom: 6px;
  display: block; }

.webs-olv-pass {
  background-color: #f3f9fa;
  border-bottom: 1px solid #d5dfe1;
  padding: 12px; }

.webs-olv-pass a {
  color: #04918a;
  font-size: 0.75em; }

.webs-olv-pass a:hover {
  color: #aeb5b7; }

.row {
  margin-bottom: 0;
  margin-top: 0;
  max-width: none;
  width: 100%;
  overflow: hidden; }

.column-form {
  display: block;
  float: left;
  margin-left: 6%;
  position: relative; }

.column-form:first-child {
  margin-left: 0; }

.med-float {
  width: 47%; }

.confirmar input {
  display: block;
  position: relative;
  width: 100%; }

/* ********** MODIFICACI� LOGIN FORM **************/
.usuari, .clau, .pin, .telefon {
  margin-bottom: 1em; }

.usuari:after, .clau:after, .pin:after, .telefon::after {
  /*content: "\e604";*/
  display: block;
  position: absolute;
  bottom: 7px;
  left: 6px;
  color: #d5dfe1;
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.usuari::after {
  content: "\ebad"; }

.telefon::after {
  content: "\e970"; }

.clau:after {
  content: "\e97b"; }

.pin:after {
  content: "\e979"; }

.usuari input, .clau input, .pin input, .telefon input {
  padding-left: 28px; }

.column-form.pin {
  width: 100%; }

.usuari.error input, .clau.error input, .pin.error input, .telefon.error input {
  background-color: #fae6e6;
  border: 1px solid #f2bfad;
  color: #f29380; }

.usuari.error:after, .clau.error:after, .pin.error:after, .telefon.error:after {
  color: #f29380; }

/* ********************************** fi MODIFICACI� LOGIN FORM ************************/
.webs-text.error {
  color: #ea4810;
  font-size: 0.75em;
  padding-left: 12px;
  padding-bottom: 44px; }

.webs-text.error:before {
  display: none; }

/* ************************************************************************************************************************************************************ */
/* ******************************************************************** COMIENZA EL RESPONSIVE **************************************************************** */
/* ************************************************************************************************************************************************************ */
/* ************************************************************************************************************************************************************ */
/* ************************************************************************************************************************************************************************* */
/* ************************************************************************************************************************************************************************* */
@media only screen and (max-width: 670px) {
  body {
    padding: 0 0 90px; }

  #wrapper {
    border-radius: 5px;
    padding-top: 38px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px; }

  #banner {
    background-color: #ffffff;
    height: auto;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0px;
    position: relative;
    width: 100%; }

  #heading {
    background: none;
    display: block; }

  #navigation {
    right: 9px; }

  .logo-container, .titulo-superior, .logo-container, .titulo-superior-izq {
    clear: both;
    display: block;
    position: relative;
    text-align: left;
    width: 100%; }

  .titulo-superior {
    background-color: #00b2d9;
    padding: 5px 14px; }

  .logo-container {
    padding-bottom: 14px;
    text-align: center; }

  .logo {
    margin: 0 auto; }

  .titulo-superior-izq {
    padding: 9px 14px; }

  .col-izquierda {
    padding: 25px 14px; }

  .webs-box {
    display: block;
    float: none;
    margin-right: 0;
    position: relative;
    width: 100%;
    margin-bottom: 30px; }

  .webs-text-form {
    padding: 12px; }

  .webs-text {
    margin-top: 14px; }

  .webs-formulario .webs-text {
    margin-bottom: 16px;
    padding-bottom: 22px;
    padding-top: 22px; }

  .webs-images {
    margin-top: 16px; }

  .webs_enlaces a {
    margin-top: 16px; }

  .destacado {
    width: 100%;
    margin-left: 0px;
    float: none; }

  .destacado.last {
    width: 100%;
    margin-left: 0px;
    margin-top: 14px;
    margin-bottom: 10px; }

  .col-derecha {
    margin: 0 auto;
    padding: 0 14px;
    width: 100%; }

  #footer {
    padding: 0 14px; } }
/* ************************************************************************************************************************************************************************* */
/* ************************************************************************************************************************************************************************* */
/* ************************************************************************************************************************************************************************* */
@media only screen and (max-width: 320px) {
  #wrapper {
    min-width: 310px; } }