.app{
  font-family: 'Open Sans', sans-serif;
}

.app__wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }
body{

}

.logo { float:left; }
#toggle-menu { color:#333333;}
.logoPC {position:absolute; z-index: 1; bottom: 73px; right: 10px; height: 20px;}

/***************************************************************************/
/* Loading Component */

.app__loading {
  position: absolute;
  top: 7.2rem;
  left: 0;
  z-index: 109;
  width: 100%;
}

.loading {
  padding: 0.25rem 0;
  color: white;
  background-color: rgba(84, 0, 0, 0.68);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate3d(0, -1.625rem, 0);
          transform: translate3d(0, -1.625rem, 0);
  transition: all 0.3s cubic-bezier(0.694, 0.0482, 0.335, 1);
}

.loading__msg {
  display: inline-block;
  font-size: 1.15rem;
  line-height: 1.333333333;
  vertical-align: middle;
}

.loading__spinner {
  margin-right: 0.25rem;
  font-size: 1.15rem;
  position: relative;
  text-indent: -9999em;
  border-top: 0.1875rem solid rgba(255, 255, 255, 0.2);
  border-right: 0.1875rem solid rgba(255, 255, 255, 0.2);
  border-bottom: 0.1875rem solid rgba(255, 255, 255, 0.2);
  border-left: 0.1875rem solid white;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-animation: spin 1.2s infinite linear;
          animation: spin 1.2s infinite linear;
}

.loading__spinner, .loading__spinner::after {
  display: inline-block;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }
}

.app__loading.loading--on {
 opacity: 1;
 visibility: visible;
 -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
}
/********** Fi Loading Component */
/****************************************************************************/

/*********** Header Component *****************************/
/*********************************************************************/
.headers{
  display: flex;
  align-items: center;
}

.headers, .headers a{
  color:white;
  padding:0.2em;
}

.headers .menu,.headers .search {
  font-size: 1.7em;
}

.fullscreen{
      font-size: 1.5em;
      cursor:pointer;
}

img.search {
  cursor: pointer;
  margin-right: 10px;
}

.searchField{
    position: absolute;
    right:40px;
    width: 40px;
    color:#666666;
    background-color: #f5f5f5;
    font-size: 17px;
    font-weight: 600;
    margin-right: 4px;
    border-radius: 25px;
    border:none;
    height: 1.4em;
    opacity:0;
    width:0;
    padding-left: 10px;
    transition: opacity .5s;
}

.searchFieldIos{
  height:2.5em!important;
}

input.searchField::placeholder {
    color: #c1c1c1;
    font-weight: 100;
}

.on .searchField{
  position:absolute;
  left:40px;
  width: calc(100vw - 80px);
  opacity:1;
}

.searchField:focus {
  outline: none;
}

.searchResults{
  position: absolute;
  top: 37px;
  opacity: 0;
  display:none;
  right: 40px;
  left: 40px;
  color: #666666;
  background-color: #F5F5F5;
  transition: opacity .5s;
  font-size: 17px;
  font-weight: 400;
  z-index: 1100;
  max-height: 300px;
  overflow-y: auto;
}
.searchResults ul{
  list-style-type: none;
  margin: 0px;
  padding: 2px 10px;

}

.searchResults li span{
  font-size: 11px;
  font-weight: 600;
  margin-left: 10px;
}

.searchResults li small{
  font-size: 75%;
}

.on .searchResults{
    opacity: 1;
    display:block;
}

li.result-2 {
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    padding: 4px;
    background-image: url(http://interior.gencat.cat/web/.content/home/030_arees_dactuacio/proteccio_civil/platges/fsvisor/assets/img/municipi.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position-y: 5px;
    background-position-x: -1px;
    padding-left: 23px;
}

li.result-3 {
    padding-left: 44px;
    padding-bottom: 4px;
    padding-top: 4px;
    background-image: url(http://interior.gencat.cat/web/.content/home/030_arees_dactuacio/proteccio_civil/platges/fsvisor/assets/img/platja.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position-x: 20px;
    background-position-y: 6px;
}

.titol{
  display: inline-block;
  text-align: center;
  width: calc(100vw - 80px);
  margin-top: 0.8vh;
  font-weight: 600;
  font-size: 1.7em;
  color: #f5f5f5;
  opacity:1;
  transition: opacity .5s;
}

.on .titol {
  opacity:0;
}

.menu {
  float:left;
  width: 40px;


}

/********* Fi Header Component ***************************/
/*********************************************************************/

/********** Footer Component */
/****************************************************************************/
.footer-cmp{
  color:#333333;
  width: 100%;
}
.footer-cmp ul{
  padding:0px;
  margin: 0px;
}
.footer-cmp li{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  height:65px;
  font-size: 11px;
  list-style:none;
  float:left;
  text-align: center;
  cursor:pointer;
}

.footer-cmp li:hover,.footer-cmp li.on {
    border: solid 1px #d8d7d7;
    background-color: white;
}

.footer-cmp li img{
  font-size: 3em;
}
.footer-cmp li span{
  display:block;
}
/********** Fi Footer Component */
/****************************************************************************/

/********** Home Component */
/****************************************************************************/
.home-cmp{
  position: absolute;
  z-index: 1;
  display:inline-block;
  width: 100%;
}

.estatFlags{
  color: #F5F5F5;
  padding-top: 2px;
  background-color: #333333;
  font-size: 14px;
  padding:0px 10px 2px 10px;
}

.estats{
  float:right;
}

.estats span {
  font-size: 11px;
  padding-left: 2px;
}

.titolFlags{
  margin-right: 30px
}

.green{
  color:#6D8F35;
  margin-left: 10px;
}
.red{
  color:#C94F40;
  margin-left: 10px;
}
.yellow{
  color:#F7E03C;
  margin-left: 10px;
}
.grey{
  color:#CCCCCC;
  margin-left: 10px;
}

/********** Fi Home Component */
/****************************************************************************/

/********** Message Component */
/****************************************************************************/
.message-cmp{
  background-color: #dc1b1b;
  font-size: 0.9em;
  line-height: 1.3em;
  padding: 7px 10px;
  color: white;
}
.message-cmp a {color:#edff00;}
/********** Fi Message Component */
/****************************************************************************/

/********** Costa Navigation Component */
/****************************************************************************/
.costa-nav{
  position: absolute;
  z-index: 100;
  color: white;
  left: 0px;
  right: 0px;
  text-align: center;
  margin-top: 35px;
  max-width: 500px;
}
.costa-nav ul{
  list-style-type: none;
}
.costa-nav li{
  float:left;
}
.costa-nav-item{
  text-align: left;
  display: inline-flex;
  background-image: url(http://interior.gencat.cat/web/.content/home/030_arees_dactuacio/proteccio_civil/platges/fsvisor/assets/img/pastillacosta.svg);
  padding: 4px 23px;
  background-repeat: no-repeat;
  margin-bottom: 10px;
  margin-right: 0px;
  min-width: 270px;
  cursor:pointer;
}
.costa-nav-item ul {
  padding-left: 10px;
}
.costa-nav-item li {
  width:30px;
}

.costa-nav-item span{
  margin-left: 2px;
  margin-right: 10px;
  white-space: nowrap;
  font-size: 11px;
}

.costa-nav-item > span {
  width:25%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.costa-nav-item li i{
  display:block;
}
.costa-nav-item li span{
  margin-left: 10px;
}

/********** Fi Costa Navigation Component */
/****************************************************************************/

/********** Level Navigation Component */
/****************************************************************************/

.level-nav{
  display:flex;
  background-color: #333333;
  border-bottom: solid 1px rgba(220, 220, 220, 0.29);
  color: #f5f5f5;
  width: 100%;
  /*max-width: 500px;*/
}

.level-nav-item {
  display: inline-flex;
  justify-content: center;
  background-color: #333333;
  border-radius: 6px;
  margin: 4px 2px;
  padding: 4px 6px;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.level-nav-item:hover{
  color: white;
  font-weight: bolder;
}

.level-nav-item.small {
    font-size: 10px;
    margin-top: 7px;
    padding-bottom: 0px;
    margin-bottom: 8px;
}

.level-nav-item.active{
   background-color: #c5041a;
}

/********** Fi Level Navigation Component */
/****************************************************************************/

/********** Beach Navigation Component */
/****************************************************************************/
.beach-view-cmp{
  position: absolute;
  z-index: 1000;
  top: 36px;
  left: 0px;
  right: 0px;
  display: inline;
  text-align: center;
}

.nav-platges-cmp {
  background-color: #c5041a;
  margin: 2px 2px 1px 2px;
  border-radius: 5px;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #f5f5f5;
}

.nav-platges-right:hover,.nav-platges-left:hover {
  color:yellow;
}

.nav-platges-ios {
  top:17px;
}

.nav-platges-right{
  position: absolute;
  right: 15px;
  cursor:pointer
}
.nav-platges-left{
  position: absolute;
  left: 15px;
  transform: rotate(-180.0deg);
  cursor:pointer;
}
.accesibilitat{
  text-align: left;
  margin: 6px;
}

.accesibilitat img {
  height:40px;
  margin-left: 10px;
}
.certificacions {
  margin-right: 12px;
  margin-top: -48px;
}

.certificacions img{ width: 40px;}

.platja-button{
  text-align: right;
  margin-bottom: 20px;
}

.platja-button.on {
  display: inline-flex;
}

.beach-buttons{
  text-align: right;
  display: inline-block;
  position: absolute;
  right: 12px;
  max-width: 400px;
}

.platja-button-desc{
  background-color: rgba(255, 255, 255, 0.8);
  width: 273px;
  margin-right: -10px;
  padding-right: 19px;
  border-radius: 10px;
  text-align: right;
  height: 50px;
  font-weight: 100;
  color: black;
  opacity: 0;
  display: none;
  transition: .3s;
}

.on .platja-button-desc{
    display: block;
    opacity: 1;
}

.platja-button-desc p {
  font-size: 18px;
  font-weight: bold;
  margin: 5px 0px -3px 0px;
}

.platja-button-button{
  cursor: pointer;
  height: 50px;
}

.aigua .platja-button-desc{
  font-size: 10pt;
}
.aigua .platja-button-desc p{
  margin-top: -1px;
}

.temp-aigua{
  margin-top: -18px;
  margin-right: 18px;
  font-size: 11px;
  font-weight: 400;
}

/********** Fi Beach Navigation Component */
/****************************************************************************/

/********** Horari Component */
/****************************************************************************/

.horari-vigilancia-cmp{
  background-color: gainsboro;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bolder;
  padding: 0px 4px 1px;
  display: inline-flex;
  width: calc(33% - 2px);
  margin: 0px 2px 0px 2px;
  float: left;
  text-align: left;
}
.horari-vigilancia-cmp.on{
  background-color: #f5f5f5;
}

.horari-vigilancia-cmp div {
  margin-left: 4px;
}
.horari-vigilancia-cmp  span {
  display: block;
}

.horari-vigilancia-cmp .panel {
  position: absolute;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  right: 2px;
  left: -3px;
  padding: 2px;
  background-color: #f5f5f5;
  border: 1px solid darkgray;
  transition: all 0.4s;
  top: 85px;
  min-height: 400px;
  max-height: 38.5em;
  overflow-y: auto;
}


.horari-vigilancia-cmp.on .panel{
  visibility: visible;
  opacity: 1;
}

.horari-vigilancia-cmp strong {
  font-size: 11px;
}

.horari-vigilancia-cmp .panel span{
  font-size: 16px;
  text-align: left;
  margin-left: 88px;
  line-height: 48px;
}

.horari-vigilancia-cmp .panel img{
  float: left;
  margin: 0.5em;
  width:35px
}

.white-line-separator{
  background-color: white;
  width: 99%;
  height: 2px;
  margin: 5px 0px;
}

.hores {
  width: 35%;
  float: right;
  margin-top: -18px;
  font-size: 10pt!important;
  font-weight: 500;
}

.dies {
    width: 200px;
    font-size: 10pt;
    font-weight: 500;
}

.dies div {
    display: inline;
    font-weight: 100;

}

.horari-vigilancia-cmp .panel span {
  font-size: 16pt;
}

.panel .data strong, .horari .hores{
  font-size: 11pt;
}

.horari {
    clear: both;
    padding-left: 14px;
    font-size: 8pt;
    margin-bottom: 2em;
}


/********** Fi Horari Component */
/****************************************************************************/

/********** Temp Component */
/****************************************************************************/

.temps-cmp{
  background-color: gainsboro;
  left: 2px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bolder;
  padding: 0px 4px 1px;
  display: inline-flex;
  width: 32%;
  margin: 0px 2px 0px 2px;
  line-height: 30px;
}

.temps-cmp.on{
  background-color: #f5f5f5;
}

.temps-cmp div {

}
.temps-cmp  span {
  display: block;
}

.temps-cmp .icon{
  width: 32%;
  text-align: center;
  min-height: 30px;
}

.temps-cmp .panel {
  position: absolute;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  right: 2px;
  left: 1px;
  padding: 2px;
  background-color: #f5f5f5;
  border: 1px solid darkgray;
  transition: all 0.4s;
  top: 85px;
  min-height: 400px;
  max-height: 38.5em;
  overflow-y: auto;
}


.temps-cmp .panel ul{
  list-style-type: lower-roman;
  margin: 0px;
  padding: 5px 20px;
}

.temps-cmp.on .panel{
  visibility: visible;
  opacity: 1;
}

.icon.uva img{
    width:17px;
}
.uva-panel {
    width: 34px;
}

.temps-cmp .panel > small {
    margin-left: 20px;
}

.temps-cmp .info{
    line-height: 18px;
}

.aemet-ico{
  border-radius: 40px;
  padding: 8px;
  background-color: #95b6e9;
  border: 1px solid white;
}

.aemet-ico-small img{
  border-radius: 20px;
  margin-top: -1px!important;
  width: 25px!important;
}

.aemet_cel_desc{
  display: flex!important;
  align-items: center;
}

.panel-titol{
  display: inline!important;
  font-size: 12pt;
}
/********** Fi Temps Component */
/****************************************************************************/



/********** Temp Component */
/****************************************************************************/

.info-cmp{
  background-color: gainsboro;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bolder;
  padding: 0px 0px 1px;
  display: inline-flex;
  margin: 0px 3px 0px 1px;
  line-height: 30px;
  justify-content: center;
  height: 31px;
  width: calc(33% - 3px);
  float: right;
}

.info-cmp.on{
  background-color: #f5f5f5;
}

.info-cmp  span {
  display: block;
}
.info-cmp .panel {
  position: absolute;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  right: 2px;
  left: -3px;
  padding: 2px;
  background-color: #f5f5f5;
  border: 1px solid darkgray;
  transition: all 0.4s;
  top: 85px;
  max-height: calc(100vh - 21.5em);
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: 5px;
}

.info-cmp .panel ul,.temps-cmp .panel ul{
  list-style-type: none;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px;
}

.info-cmp.on .panel,.temps-cmp.on .panel{
  visibility: visible;
  opacity: 1;
}

.info-cmp .panel .titol-fisiques{
  color: black;
  opacity: 1;
  clear: both;
  margin-left: 5px;
  font-size: 10px;
  font-weight: 400;
}
.info-cmp .panel .titol-fisiques spam{
    margin-right: 6px;
}

.info-cmp .panel .titol-fisiques div{
  margin-bottom: -13px;
  font-size: 10px;
  font-weight: bolder;
}

.info-cmp .panel .icones img{
  width:25px;
  margin: 0px 5px 0px 0px;
}

.info{
  background-color: white;
  padding-top: 3px;
  clear: both;
}

.info-box{
  display:flex;
  background-color: #f5f5f5;
  text-align: left;
}

.info-left{
  width: 25%;
  display: inline-block;
  text-align: center;
  padding: 1em;
}


.info-right{
  width: 75%;
  display: inline-block;
  padding: 0px 0px 0px 20px;
}

.info-right spam{
  width: 50%;
  display: inline-block;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px;
  font-size: 10px;
  font-weight: 400;
  color: black;
  line-height: 15px;
}

/********** Fi Temps Component */
/****************************************************************************/


/********** Favorite Component */
/****************************************************************************/
.favorite-cmp{
  position: absolute;
  bottom: 65px;
  z-index: 52;
  left: 0px;
  right: 0px;
  display: none;
  opacity: 0;
}
.favorite-cmp.on{
  display:block;
  opacity: 1;
}
.favorite-cmp > div{
  max-height: 200px;
  overflow-y: auto;
}

.favorite-cmp ul{
  background-color: #fff;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.favorite-cmp li{
  border-bottom: solid 2px #858585;
  padding: 7px;
}

.favorite-cmp li img{
    cursor:poiner;
}

.favorite-cmp li spam{
  width: calc(100% - 40px);
  display: inline-block;
}

.favorite-add{
  background-color: #666;
  color:#f5f5f5;
  padding: 7px;
  cursor:pointer;
}
.favorite-add span,.favorite-cmp li span{
  margin-left: 5px;
}
li.favorite-no-items{
  padding: 0px;
  display: flex;
}
.favorite-no-items span{
  font-size: 11pt;
  font-weight: bolder;
}

.favorite-no-items small{
  white-space: nowrap;
  font-weight: 400;
  display:block;
}
/********** Fi Favorite Component */
/****************************************************************************/

/********** Menu Component */
/****************************************************************************/
.menu-cmp{
  position: absolute;
  right: 0;
  left: 0;
  height: 343px;
  z-index: 1101;
  background-color: #fff;
  transition: .3s;
  display:none;
}
.menu-cmp.on{
  display:block;
  height: auto;
}

.menu-cmp img{
  width: 30px;
  margin: 0px 10px 0px 10px;
}

.menu-checkbox {
  width: 25px;
  position: relative;
  left: -30px;
}

.menu-checkbox label {
	cursor: pointer;
	position: absolute;
	width: 25px;
	height: 25px;
	top: 3;
  left: 0;
	background: #fff;
	border:1px solid #ddd;
}

.menu-checkbox label:after {
	opacity: 0;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 7px;
	left: 7px;
	border: 3px solid #333;
	border-top: none;
	border-right: none;
	transform: rotate(-45deg);
}

.menu-checkbox.on label:after {
	opacity: 1;
}

.service-item{
  padding: 10px;
  margin-left: 27px!important;
}

.iconografia,.sobre,.serveis{
  border-top: solid 1px #bdb7b7;
  padding: 10px;
  max-height: 65vh;
  overflow: auto;
}

.iconografia.on,.sobre.on,.serveis.on{
  background-color: #f5f5f5;
}

.iconografia.on .menu-body,.sobre.on .menu-body,.serveis.on .menu-body{
  display: block;
}

.iconografia .menu-body,.sobre .menu-body,.serveis .menu-body{
  display: none;
}

.iconografia.on:hover,.sobre.on:hover,.serveis.on:hover{
  background-color: white;
}

.iconografia:hover,.sobre:hover,.serveis:hover{
  background-color: #F7E03C;
  cursor:pointer;
}

.menu-body div{
  margin:5px;
  clear:both;
  padding-top: 20px;
}
.menu-body div > img {
  float: left;
}
.menu-body div > span {
  clear: both;
}

.menu-body > span {
  font-weight: bold;
  font-size: 0.9em;
  margin-top: 2em;
  display: block;
}

.headers a.menu.on {
    color: #fddf45;
}
/********** Fi Menu Component */
/****************************************************************************/



/********** Meduses Component */
/****************************************************************************/
.meduses-view-cmp{
  position: absolute;
  margin: -3px 0px 0px 3px;
  padding: 0px 2px 0px 2px;
  height: 20px;
  overflow: hidden;
  border-radius: 2px;
  font-size: 0.8em;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  text-align: left;
}

.meduses-view-cmp span {
  float: right;
  padding: 0px 3px 3px 2px;
  background-color: #c5041a;
  position: relative;
  margin-right: -2px;
  border-radius: 3px;
  color:white;
}

.meduses-view-cmp > ul{
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: left;
}

.meduses-view-cmp li{
  white-space: nowrap;
}

.meduses-view-cmp li i{
  display:none;
}
.meduses-view-cmp > img{
  height: 24px;
  margin-bottom: 4px;
}

.meduses-view-cmp.on li {
    border: 1px solid gainsboro;
    border-radius: 2px;
    margin-bottom: 8px;
    padding: 1px 2px;
}

.meduses-view-cmp.on li:hover{
    background-color: #f7e03c;
}

.meduses-view-cmp.on li i {
    display: block;
    float: right;
    padding: 3px;
}

.meduses-view-cmp.on > span {
    display: none;
}

.meduses-view-cmp.on {
  position: absolute;
  height: auto;
  width: auto;
  background: rgb(255, 255, 255);
  padding: 5px;
  border: 1px solid gainsboro;
  border-radius: 4px;
}
/********** Fi Meduses Component */
/****************************************************************************/


.meduses-viewer {
  position: absolute;
  left: 2px;
  right: 3px;
  top: 86px;
  height: 426px;
  background: rgba(51, 51, 51, 0.95);
  border-radius: 2px;
}

.meduses-viewer .medusa-close{
  color: white;
  position: absolute;
  right: 5px;
  font-size: 1.5em;
  cursor:pointer;
  z-index: 11;
}

.meduses-images {
  position: absolute;
  right: 0px;
  z-index: 10;
}
.meduses-viewer-photo{
  width:75%;
}
.meduses-viewer img{

  border-radius: 2px;
}

.jellyfishesTable {
  color:#f5f5f5;
  width: 100%;
}
.jellyfishesTable h2{
  font-size: 1.2em;
  font-weight: bold;
}

.meduses-body{
  max-height: 362px;
  margin-top: 30px;
  overflow: auto;
  padding: 0px 6px;
}

.meduses-footer{
  position: absolute;
  bottom: 5px;
  text-align: center;
  left: 5px;
  right: 5px;
  color: white;
  font-size: 0.8em;
}

.meduses-footer img{
  height: 20px;
}

.meduses-footer a:link,.meduses-footer a:visited {
  color: white;
}

.meduses-viewer iframe {
  position: absolute;
  border: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 25px);
}



.zoom_in{
  display:none;
  position: absolute;
  z-index: 100;
  left: 10px;
  bottom: 127px;
  cursor: pointer;
}
.zoom_out{
  display:none;
  position: absolute;
  z-index: 100;
  left: 10px;
  bottom: 88px;
  cursor: pointer;
}

.share-cmp ul {
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px;
}
.rrss{
  float: left;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: 3px;
  margin-right: 4px;
  width: 60px;
  border-radius: 4px;
}

.rrss a{
  color: white;
  font-size: 1.8em;
}

.rrss-mail{
    background-color: #0A88FF;
}
.rrss-facebook{
    background-color: #306199;
}
.rrss-whatsapp{
    background-color: #43D854;
}
.rrss-twitter{
    background-color: #26C4F1;
}

.share-cmp{
  position: absolute;
  bottom: 10em;
  opacity: 0;
  visibility: hidden;
  left: 0px;
  right: 0px;
  display: flex;
  justify-content: center;
  transition: 0.4s;
}
.share-cmp.on {
  opacity:1;
  visibility: visible;
  bottom:5em;
}
.header-container{
  background-color: #333333;
  border-bottom:1px solid #DDDDDD;
}

.main-container{
  height:78vh;
}

.footer-container{
  position: absolute;
  background-color: whitesmoke;
  bottom: 0px;
  right: 0px;
  left: 0px;
  color:#333333;
  z-index: 3000;
}

.googleMapsCmp {
  position: absolute;
  bottom: 0;
  top: 86px;
  left: 0;
  right: 0;
}


.platja-labels {
    margin-left: 50px;
    padding-left: 50px;
    text-shadow: 1px 1px 1px black;
    color:white;
    white-space: nowrap;
}
.mun-labels {
    color: white;
    background-color: red;
    padding: 1px 3px;
    border-radius: 3px;
    border: 1px solid #333;
    white-space: nowrap;
    cursor:pointer;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 1px solid #dcdcdc;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}
::-webkit-scrollbar-track {
  background: #f0f0f0;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #dcdcdc;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

@media (min-width: 768px) {
  .estatFlags { width: 35%; display: inline-block; height: 5.5em;}
  .message-cmp{ width: 65%; display: inline-block; vertical-align: top; padding-bottom: 0px;font-size: 1.0em;padding: 6px 10px;height: 5.5em;}
  .titolFlags { font-size: 15pt;clear: both;display: block;padding-top: 5px;}
  .estats { font-size: 15pt;display: block;width: 100%;line-height: 30px;}
  .estats span { font-size: 15pt; padding-left: 2px;}
  .estats .red { margin-left: 0px;}
  .searchResults { left: 268px;}
  .on .searchField { left: 267px; width: calc(100vw - 306px);}
  .app__loading { top: 3.6em;}
  .loading__spinner, .loading__spinner::after {width: 2em; height: 2em;}
  .loading__msg { font-size: 1.5em;}
  .costa-nav-item { background-size: contain; min-width: 400px; }
  .costa-nav-item span { font-size: 11pt;}
  .footer-cmp li { font-size: 14pt; }
  .favorite-cmp { font-size: 16pt;}
  .favorite-no-items span { font-size: 15pt;}
  .favorite-cmp li img { width:35px;}
  .level-nav-item.small { font-size: 13pt;padding-top: 0px;}
  .level-nav-item { font-size: 13pt;}
  .main-container { height: 85vh; }
  .panel img{ width: 50px;}
  .nav-platges-cmp { font-size: 18pt; font-weight: bold;}
  .horari-vigilancia-cmp { font-size: 12pt; }
  .horari-vigilancia-cmp > img{ width: 30px;}
  .horari-vigilancia-cmp .panel,.temps-cmp .panel,.info-cmp .panel { top: 100px;}
  .horari-vigilancia-cmp .panel li { font-size: 13pt;}
  .horari-vigilancia-cmp .panel span {font-size: 16pt;  }
  .temps-cmp, .info-cmp, .horari-vigilancia-cmp {min-height: 44px;}
  .temps-cmp > img{ width:50px!important;}
  .aemet-ico-small img{ border-radius: 20px; margin-top: 5px!important; width: 34px!important;}
  .info-cmp > img{ width:12px!important;}
  .panel .data strong, .horari .hores{ font-size: 11pt;}
  .horari {padding-left: 14px; font-size: 14pt;}
  .info-cmp .panel .icones img,.certificacions img{ width: 40px;}
  .info-cmp .panel .titol-fisiques div { font-size: 15pt; margin-bottom: 4pt;}
  .info-cmp .panel .titol-fisiques{ font-size: 14pt;}
  .info-box { font-size:15pt;}
  .info-left > img{ width: 65px; }
  .info-right spam { font-size: 14pt; }
  .temperatura.icon {font-size: 9pt;margin-top: 7px;}
  .icon.uva img {width: 25px;margin-top: 4px;}
  .icon.temps img {width: 40px;margin-top: 9px;}
  .meduses-viewer{ top: 100px;}
}

@media (min-width: 1024px) {
  .on .searchField { left: auto; width: calc(65% - 45px);}
  .searchResults { left:auto; width: calc(65% - 39px);}
  .costa-nav-item span { font-size: 14pt;}
  .costa-nav-item ul { padding-left: 28px;}
  .beach-view-cmp { top: 91px;}
  .platja-button-desc p { font-size: 18pt;}
  .platja-button-button, .platja-button-button img,.platja-button-desc { height: 70px;}
  .platja-button-desc {font-size: 13pt;}
  .info-box { font-size: 13pt;}
  .info-right spam { font-size: 12pt;}
  .info-cmp .panel {max-height: calc(100vh - 24em);}
  .aigua .platja-button-desc {font-size: 10pt;}
  .googleMapsCmp {height: calc(100vh - 170px);}
  .platja-labels {font-size:10pt;}
  .footer-cmp li { height: 80px;}
  .share-cmp.on { bottom: 6em;}
  .favorite-cmp {bottom: 81px;}
  .logoPC {bottom: 20px; right: 10px; height: 32px;}
  .meduses-viewer {top: 102px; height: 570px; margin-left: -2px;}
  .meduses-body {max-height: 508px;}
}

@media (min-width: 1280px) {
  .titol {
    text-align: left;
    margin-left: 40px;
  }
  .on .titol {
      opacity: 1;
  }
  .level-nav {
      max-width: 480px;
      float: left;
      line-height: 24px;
  }
  .level-nav-item {
      font-size: 11pt;
  }
  .level-nav-item.small {
    font-size: 10pt;
    padding-top: 0px;
  }

  .estats {
    font-size: 11pt;
    display: inline;
    width: auto;
    line-height: 40px;
    white-space: nowrap;
  }

  .estats span {
    font-size: 10pt;
  }

  .titolFlags {
    font-size: 11pt;
    clear: inherit;
    display: inline;
    line-height: 40px;
    padding-top: 5px;
    margin-right: 10px;
  }

  .estatFlags {
    min-width: 316px;
    width: auto;
    display: flex;
    height: 41px;
    border-bottom: 1px solid #646464;
    float: left;
    justify-content: center;
  }
  .estatFlags > div{
    width:316px;
  }

  .links-cmp{
    background-color: #333333;
    line-height: 40px;
    border-bottom: solid 1px #646464;
    text-align: right;
  }

  .links-cmp a{
    color: #f5f5f5;
    padding-right: 10px;
    cursor: pointer;
  }

  .links-cmp img{
    padding-right: 5px;
  }

  .message-cmp {
    width: 40%;
    position: absolute;
    top: 42px;
    z-index: 1;
  }

  .costa-nav {
      left: inherit;
      right: 0px;
      max-width: 340px;
  }
  .googleMapsCmp {
    height: calc(100vh - 89px);
  }
  .favorite-cmp {
    bottom: 0px;
    width: 450px;
  }
  .favorite-cmp li img {
    width: 30px;
  }
  .on .searchField {
    left: auto;
    width: 361px;
    height: 35px;
    border-radius: 13px;
  }
  .searchResults {
    top: 45px;
    width: 365px;
  }
  .on .searchResults {
    opacity: 0;
    display:none;
  }

  .searchResults.pc-on{
      display:block;
      opacity:1;
  }
  .searchResults.pc-off{
      display:none;
      opacity:0;
  }

  .share-cmp.on {
    bottom: 1em;
  }

  .beach-view-cmp {
      width: 500px;
      left: calc(100vw - 500px);
      height: 500px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 7px;
  }

  .info-cmp .panel .titol-fisiques { font-size: 11pt; }
  .info-right spam { font-size: 12pt;}
  .info-box { font-size: 12pt;}

  .zoom_in,.zoom_out{display:block;}

  .menu-cmp{
    right: none;
    width: 40%;
  }
}

@viewport {
  orientation: portrait;
}
@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.rrssb-buttons{box-sizing:border-box;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;height:36px;margin:0;padding:0;width:100%;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-name:fade-in;animation-name:fade-in;-webkit-animation-delay:.2s;animation-delay:.2s}.rrssb-buttons:after{clear:both}.rrssb-buttons:after,.rrssb-buttons:before{content:' ';display:table}.rrssb-buttons li{box-sizing:border-box;float:left;height:100%;line-height:13px;list-style:none;margin:0;padding:0 2px}.rrssb-buttons li.rrssb-email a{background-color:#0a88ff}.rrssb-buttons li.rrssb-email a:hover{background-color:#006ed6}.rrssb-buttons li.rrssb-facebook a{background-color:#306199}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#244872}.rrssb-buttons li.rrssb-tumblr a{background-color:#32506d}.rrssb-buttons li.rrssb-tumblr a:hover{background-color:#22364a}.rrssb-buttons li.rrssb-linkedin a{background-color:#007bb6}.rrssb-buttons li.rrssb-linkedin a:hover{background-color:#005983}.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#0eaad6}.rrssb-buttons li.rrssb-googleplus a{background-color:#e93f2e}.rrssb-buttons li.rrssb-googleplus a:hover{background-color:#ce2616}.rrssb-buttons li.rrssb-youtube a{background-color:#df1c31}.rrssb-buttons li.rrssb-youtube a:hover{background-color:#b21627}.rrssb-buttons li.rrssb-reddit a{background-color:#8bbbe3}.rrssb-buttons li.rrssb-reddit a:hover{background-color:#62a3d9}.rrssb-buttons li.rrssb-pinterest a{background-color:#b81621}.rrssb-buttons li.rrssb-pinterest a:hover{background-color:#8a1119}.rrssb-buttons li.rrssb-pocket a{background-color:#ed4054}.rrssb-buttons li.rrssb-pocket a:hover{background-color:#e4162d}.rrssb-buttons li.rrssb-github a{background-color:#444}.rrssb-buttons li.rrssb-github a:hover{background-color:#2b2b2b}.rrssb-buttons li.rrssb-instagram a{background-color:#125688}.rrssb-buttons li.rrssb-instagram a:hover{background-color:#0c3a5b}.rrssb-buttons li.rrssb-delicious a{background-color:#0b79e5}.rrssb-buttons li.rrssb-delicious a:hover{background-color:#095fb4}.rrssb-buttons li.rrssb-vk a{background-color:#4d71a9}.rrssb-buttons li.rrssb-vk a:hover{background-color:#3d5a86}.rrssb-buttons li.rrssb-hackernews a{background-color:#f60}.rrssb-buttons li.rrssb-hackernews a:hover{background-color:#cc5200}.rrssb-buttons li.rrssb-whatsapp a{background-color:#43d854}.rrssb-buttons li.rrssb-whatsapp a:hover{background-color:#28c039}.rrssb-buttons li.rrssb-print a{background-color:#8d98a2}.rrssb-buttons li.rrssb-print a:hover{background-color:#717f8b}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:700;height:100%;padding:11px 7px 12px 27px;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;width:100%}.rrssb-buttons li a .rrssb-icon{display:block;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .rrssb-icon svg{height:17px;width:17px}.rrssb-buttons li a .rrssb-icon svg circle,.rrssb-buttons li a .rrssb-icon svg path{fill:#fff}.rrssb-buttons li a .rrssb-text{color:#fff}.rrssb-buttons li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,.25)}.rrssb-buttons li.small a{padding:0}.rrssb-buttons li.small a .rrssb-icon{left:auto;margin:0 auto;overflow:hidden;position:relative;top:auto;width:100%}.rrssb-buttons li.small a .rrssb-text{visibility:hidden}.rrssb-buttons.large-format,.rrssb-buttons.large-format li{height:auto}.rrssb-buttons.large-format li a{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:.2em;padding:8.5% 0 8.5% 12%}.rrssb-buttons.large-format li a .rrssb-icon{height:100%;left:7%;padding-top:0;width:12%}.rrssb-buttons.large-format li a .rrssb-icon svg{height:100%;position:absolute;top:0;width:100%}.rrssb-buttons.large-format li a .rrssb-text{-webkit-backface-visibility:hidden;backface-visibility:hidden}.rrssb-buttons.small-format{padding-top:5px}.rrssb-buttons.small-format li{height:80%;padding:0 1px}.rrssb-buttons.small-format li a .rrssb-icon{height:100%;padding-top:0}.rrssb-buttons.small-format li a .rrssb-icon svg{height:48%;position:relative;top:6px;width:80%}.rrssb-buttons.tiny-format{height:22px;position:relative}.rrssb-buttons.tiny-format li{padding-right:7px}.rrssb-buttons.tiny-format li a{background-color:transparent;padding:0}.rrssb-buttons.tiny-format li a .rrssb-icon{height:100%}.rrssb-buttons.tiny-format li a .rrssb-icon svg{height:70%;width:100%}.rrssb-buttons.tiny-format li a:active,.rrssb-buttons.tiny-format li a:hover{background-color:transparent}.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg path{fill:#0a88ff}.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg path{fill:#0054a3}.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg path{fill:#306199}.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg path{fill:#18304b}.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg path{fill:#32506d}.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg path{fill:#121d27}.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg path{fill:#007bb6}.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg path{fill:#003650}.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg path{fill:#26c4f1}.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg path{fill:#0b84a6}.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg path{fill:#e93f2e}.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg path{fill:#a01e11}.rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon svg path{fill:#df1c31}.rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon:hover .rrssb-icon svg path{fill:#84111d}.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg path{fill:#8bbbe3}.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg path{fill:#398bcf}.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg path{fill:#b81621}.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg path{fill:#5d0b11}.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg path{fill:#ed4054}.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg path{fill:#b61124}.rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon svg path{fill:#444}.rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon:hover .rrssb-icon svg path{fill:#111}.rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon svg path{fill:#125688}.rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon:hover .rrssb-icon svg path{fill:#061d2e}.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg path{fill:#0b79e5}.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg path{fill:#064684}.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg path{fill:#4d71a9}.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg path{fill:#2d4263}.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg path{fill:#f60}.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg path{fill:#993d00}.rrssb-buttons.tiny-format li.rrssb-whatsapp a .rrssb-icon svg path{fill:#43d854}.rrssb-buttons.tiny-format li.rrssb-whatsapp a .rrssb-icon:hover .rrssb-icon svg path{fill:#1f962d}.rrssb-buttons.tiny-format li.rrssb-print a .rrssb-icon svg path{fill:#8d98a2}.rrssb-buttons.tiny-format li.rrssb-print a .rrssb-icon:hover .rrssb-icon svg path{fill:#5a656f}
/*# sourceMappingURL=app.bundle.css.map*/