@keyframes pulsate {
    0% { opacity: 0.3;}
    50% {opacity: 1.0;}
    100% {opacity: 0.3;}

}

@keyframes taadaa { 
  0% {
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}

.path-stslider h1{
	font-size: 1.4em;
	margin-bottom: 1em;

}
.path-stslider h2{
	font-size: 1.9em;

}
#block-head h2{
color: #fff;
font-weight: 300;
font-size: 1.1em;
}
.path-stslider footer.site-footer,
.path-stslider #header{
	display: none;
}


.flexslider .views-label-nid-1,
.flexslider .views-label-nid-3{
	text-align: center;
	display: block;
	width: 100%;
	    margin: 10px 0;
    font-family: 'Rubik';
    font-weight: 600;
    font-size: 1.2em;
}

.flexslider .valuec {
    font-size: 2.2em;
    top: 39%;

}
.flexslider .views-field-nid-1,
.flexslider .views-field-nid-3{
	width: 50%;
	float: left;

}
.marker-cluster-small div {
	border: solid 1px #fff;
}
.marker-cluster-small {
    background-color: rgb(8, 200, 214, 1);
     animation: taadaa 2s ease-out;
    -webkit-animation: taadaa 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0;
}
h1.title{
	margin-top: 30px;
}
.lusco {
    animation: pulsate 2s ease-out;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0;
}

.maintopmanu  .menu {
	display: flex;
    flex-direction: row;
}
.maintopmanu  .menu  li{
	list-style: none;
}
.maintopmanu .menu .menu-item a {
    text-transform: uppercase;
       padding-right: 0rem;
    padding-left: 0rem;
    padding-bottom: .5rem;
    color: #fff;
}
.maintopmanu .menu .menu-item.menu-item--active-trail a,
#block-mainnavigation .nav .active a.active  {
    color: #fff;
    border-bottom: solid 4px #306180;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0rem;
    padding-left: 0rem;
    padding-bottom: .5rem;
}

.maintopmanu .menu .menu-item,
#block-mainnavigation .nav-item {
    list-style: none;
           padding-right: .5rem;
    padding-left: .5rem;
      padding-bottom: .5rem;
}

.col-lg-10{
	padding-right: 30px;
}
.gouge10  {
	
	width: 320px;
	height: auto;
	margin: auto;
	padding-top: 15px;
}
.gouge25 {
	
		width: 320px;
	height: auto;
	margin: auto;
	padding-top: 15px;
}
#block-menustarazagora,
#block-mainnavigation{
	margin-top: 15px;
}
#block-metrics-content{
	margin-bottom: 25px;
	margin-top: 15px;
}
.navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-xl {
  -ms-flex-wrap: nowrap;
  flex-wrap: wrap;
}

.navbar-brand {
height: 95px;
float: left;
margin-right: 79px;
text-align: center;
width: 10%;
}

.navbar-brand .img-fluid {
  max-width: 78%;
  height: auto;
}


#block-head{
  float: left;
  width: 100%;
  width: 82%;
}

.topmenu{
	width: 100%;
}

.leaflet-popup h4{
	font-size: 1.1em;
}
.leaflet-popup .views-label {
font-weight: bold;
}
.EasyPieChartPercentFieldFormatter canvas{
	transform: rotate(-90deg);
	z-index: 100;
}

.field--name-field-charts .views-field-field-pm10{
	    width: 320px;
    background: url(images/10.png)  no-repeat 0 0 scroll transparent;
    height: 230px;
    padding: 16px 0;
}

}
.leaflet-popup .views-field-field-pm2-5{	
	text-align: left;

}
.link a{
	margin: 10px 0;
	display: block;

}
.container.view-location-metrics.chartdate {
  text-align: center;
  width: 100%;
  font-weight: bold;
  font-size: 1.5em;
  color: #306180;
}
.chartdate .view-content.row{
    margin-right: 0;
    margin-left: 0;
    justify-content: center;

}
#navbar-main .nav-item a{
	text-transform: uppercase;
	color: #fff;

}
.highcharts-data-label tspan{ background: red; }
.btn {

    border-radius:0;
}
.highcharts-text-outline{
	display: none;
}
.h2, h2 {
    font-size: 1.3rem;
}
.field--name-field-charts .field__item{
	float: left;
	width: 100%;
	margin-bottom: 15px;

}

.field--name-field-charts{

	border-left: solid 1px #51cbd7;
	float: left;
}


.EasyPieChartPercentFieldFormatter{
	position: relative;
	text-align: center;
}
.valuec {
    position: absolute;
    top: 41%;
    text-align: center;
    width: 100%;
    font-size: 1.2em;
    font-weight: bold;
   z-index: 1000000;

}
.tabletabel  footer,
.chart10,
.chart25,
#block-views-block-location-comp-block-1 {
	margin: 30px 0;
	float: left;
	width: 100%;

}
.field--name-dynamic-token-fieldnode-legend{
	margin: 30px 0 0 0;
}

.legendgroup{
	width: 100%;
	float: left;
	font-size: .8em;
	margin-bottom: 10px;
}
.legendgroup h4{
	font-size: 14px;

}
.views-field-field-pm2-5.yellow .EasyPieChartPercentFieldFormatter canvas{
	filter: hue-rotate(334deg) brightness(99%) saturate(189%);
	
}
#block-views-block-location-metrics2-block-1{
	margin-top: 30px;
}
.comp{
float: left;
	width: 100%;	
}
.table {
     margin-bottom: 0;
}

.chartdate header {
	line-height: 18px;
margin: 0 0 10px 0;

}

.tabletabel footer{
	font-size: .8em;
}

.legenditem{
	display: block;
	float: left;
	margin-right: 12px;
	display: flex;
	flex-direction: row;
}
.field--name-field-snimki img{
	width: 100%;
	height: auto;
}
.legendbox{
	width: 20px;
	height: 20px;
	background: #f2f2f2;
	margin-right: 6px;
	margin-left: ;
}
.legendbox.lightgreen {
	background: #08c8d6;

}
.legendbox.green {
	background: #5fb526;

}
.legendbox.yellow{
	background: #faad00;

}
.legendbox.orange{
	background: #f58003;

}
.legendbox.red{
	background: #d0380b;

}
.legendbox.purple{
	background: #730bd0;

}
.chart10 {
	background: url(images/fp10na.png) no-repeat scroll 15px 0  transparent;
	background-size: cover;
}
.comp {
	background: url(images/fpcom2na.png) no-repeat scroll 15px 0  transparent;
	background-size: cover;
}

.chart25 {
	background: url(images/fp25na.png) no-repeat scroll 15px 0  transparent;
	background-size: cover;
}

.tabletabel {
	padding: 15px  0;
}

h1{
	margin: 30px 0;
}
.chartdate,
.field--name-field-charts .views-field-field-pm2-5 {
	text-align: center;

}
.layout__region--second-above{
	padding-left: 30px;
}
.attachment.attachment-after .views-element-container{
	margin: 30px 0;
}

.field--name-field-charts .field__item .viewsreference--view-title{
text-align: center;
margin-bottom: 5px;
font-family: 'Rubik';
font-weight: 600;
}

.view-location-metrics .viewsreference--view-title{
	 text-align: center;
}

.charts-google{
	width: 100%;
}

.field--name-field-charts {
	padding: 0 10px;
}
.bb-chart-arcs .bb-chart-arcs-background {
    fill: #f2f2f2;
    stroke: none;
}
.highcharts-root{
	width: 100%;
}
.highcharts-button {
	display: none;
}

#block-views-block-location-metrics2-block-1 .table td.views-field-field-metric-data {
    padding: 0.5rem;
    	font-size: 14px;
line-height: 14px;
}

#block-views-block-location-metrics2-block-1 td.views-field-field-pm2-5,
#block-views-block-location-metrics2-block-1 td.views-field-field-pm10{
	color: #000;
	padding: 0px;
	font-size: 14px;
line-height: 31px;
}
#block-views-block-location-metrics2-block-1 td div.lightgreen{
	background: #08c8d6;
	color: #000;
}
.gauge.lightgreen canvas,
.leaflet-marker-icon.lightgreen{
	    filter: hue-rotate(88deg)  saturate(130%) contrast(1);

}
 
#block-views-block-location-metrics2-block-1 td div.green{
	background: #5fb526;
	color: #fff;
}
.gauge.yellow canvas,
.leaflet-marker-icon.yellow{
    filter: hue-rotate(322deg) saturate(386%);
}

#block-views-block-location-metrics2-block-1 div.yellow{
	background: #faad00;
	color: #fff;
}
.gauge.red canvas,
.leaflet-marker-icon.red{
	    filter:  hue-rotate(-90deg) saturate(333%);
}

#block-views-block-location-metrics2-block-1 div.red{
	background: #d0380b;
	color: #fff;
}
  .gauge.purple canvas,
  .leaflet-marker-icon.purple{  filter: hue-rotate(154deg) saturate(350%);
}
#block-views-block-location-metrics2-block-1 div.purple{
	background: #7b26b5;
	color: #fff;
}
.block {
	float: left;
	width: 100%;
}
.view-filters{

margin-bottom: 15px;
background: #fbfbfb;
}
 .view-content .table {
background: #fbfbfb;
padding: 15px;
}
.table td.views-field-field-pm2-5.yellow,
.table td.views-field-field-pm10.yellow{
	background: #faad00;
	color: #000;
}

.table td.views-field-field-pm2-5.orange,
.table td.views-field-field-pm10.orange{	
	background: #f58003;
	color: #000;

}

.table td.views-field-field-pm2-5.red,
.table td.views-field-field-pm10.red{
	background: #dc1515;
	color: #fff;

}

.table td.views-field-field-pm2-5.black,
.table td.views-field-field-pm10.black{
	background: #0d244f;
	color: #fff;

}

.highcharts-container,
.charts-highchart{
	width: 100% !important;
	float: left;

}


.view-location-metrics .views-element-container{
	float: left;
	width: 100%;

}


#block-bootstrap-barrio-subtheme-views-block-location-metrics-block-1,
.container.view-location-metrics{

float: left;
width: 100%;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#CollapsingNavbar ul{
	padding-left: 0px;
	padding-top: 20px;
}

@media only screen and (max-width: 600px) {
#block-bootstrap-barrio-subtheme-views-block-location-metrics-block-1{

float: left;
width: 100%;
padding: 0px !important;
}
.maintopmanu .menu {
  display: flex;
  flex-direction: column;
}
.maintopmanu .menu .menu-item, #block-mainnavigation .nav-item {

margin-bottom: 1rem;
}

.navbar .container{
	display: block;

}
#CollapsingNavbar{
	width: 100%;
	float: left;
}

.nav-item{
width: 100%;
}
#main-wrapper{
	display: flex;
	flex-direction: column;

}
.legenditem{
	width: 100%;
	margin-bottom: 15px;
}
#full{
order: -1;

}

.field--name-field-charts {
	padding-top: 20px;
    border-left: none;
    float: left;
     border-top: solid 1px #51cbd7;
}

.table th{
	font-size: .6em;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.tabletabel {
    padding: 10px;
    background: #f2f2f2;
}
.field--name-field-charts {
    padding: 0;
    padding-top: 30px;
}

.EasyPieChartPercentFieldFormatter{
	max-width: 240px;
	margin: auto;
}
.container.chartdate,
.container.chart10,
.container.chart25{
	padding: 0px;

}
.h2, h2 {
    font-size: 1.1rem;
}
.chart10 {
    background: url(images/fp10na.png) no-repeat scroll -7px 100% transparent;
       
    background-size: auto;
}


.gouge10,
 .gouge25{
    width: 100%;
    height: auto;
    margin: 0;

}
.h1, h1 {
    font-size: 1.5rem;
}

#edit-actions button{
	width: 100%;
	margin-bottom: 30px;
}