@font-face {
  font-family: 'DINNextLTW23-Light';
  src: url('../fonts/DINNextLTW23-Light.ttf');
  src: url('../fonts/DINNextLTW23-Light.svg');
  src: url('../fonts/DINNextLTW23-Light.eot');
  src: url('../fonts/DINNextLTW23-Light.woff');
}
@font-face {
  font-family: 'TheSans-Plain';
  src: url('../fonts/TheSans-Plain.ttf');
  src: url('../fonts/TheSans-Plain.svg');
  src: url('../fonts/TheSans-Plain.eot');
  src: url('../fonts/TheSans-Plain.woff');
}


body{
	width: 100%;
	height: 100%;
  	font-family: 'TheSans-Plain';
  	background: #F3F3F3;
}

html {
  position: relative;
  min-height: 100%;
}


ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

a:hover{
	text-decoration: none!important;
}

button{
	cursor: pointer;
}

select:focus , button:focus{
	outline: 0;
}
main {
    background: none !important;
}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 6px;
    background: #fff;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 0px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #1b5996;
}
::-webkit-scrollbar-thumb:window-inactive {
  background: #1b5996;
}


/*#app{
	background: #fff;
}
*/
/*Home*/

.header{
	box-shadow: 0px 0px 5px 0px #d2d2d2;
	position: relative;
	background: #fff;
	padding-bottom: 15px;
}

.header .navbar{
	padding: 0;
}

.header .navbar-brand{
	width: 170px;
	height: auto;
	display: block;
	padding-top: 15px;
	margin: 0;
}

.header .navbar-brand img{
	width: 100%;
}

.header .logo-env a.logo-1{
	width: 250px;
	height: auto;
	display: inline-block;
	margin-right: 25px;
	line-height: 64px;
}

.header .logo-env a.logo-1 img{
	width: 100%;
}

.header .logo-env a.logo-2{
	width: 150px;
	height: auto;
	display: inline-block;
	margin-right: 20px;
}

.header .logo-env a.logo-2 img{
	width: 100%;
}

.navbar-nav li{
	margin-right: 10px;
	border-top: 0;
}


.navbar-nav li a{
	display: block;
	font-size: 16px;
	text-align: center;
	line-height: 55px;
	padding: 18px 15px 10px 45px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	position: relative;
	transition: 0.3s;
}

.navbar-nav li a{
	color: #8B8B8B;
}

.navbar-text li a.lang{
    background: #2577BA;
    padding: 26px 15px;
    border-radius: 0;
    color: #fff;
    font-size: 20px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    transition: 0.3s;
}

.navbar-text li a.lang:hover{
	color: #8B8B8B;
	background: #F3F3F3 ;
}

.navbar-nav li a.home{
	background: #F3F3F3 url(../images/home.svg) no-repeat;
    background-size: 30px;
    background-position: 10px;
}
.navbar-nav li a.home:hover , .navbar-nav li a.home.active{
	background: #2577BA url(../images/home_h.svg) no-repeat;
    background-size: 30px;
    background-position: 10px;
    color: #fff;
}

.navbar-nav li a.forecast{
	background: #F3F3F3 url(../images/forcast.png) no-repeat;
    background-size: 30px;
    background-position: 10px;
}
.navbar-nav li a.forecast:hover , .navbar-nav li a.forecast.active{
	background: #2577BA url(../images/forcast-h.png) no-repeat;
    background-size: 30px;
    background-position: 10px;
    color: #fff;
}

.navbar-nav li a.tools{
	background: #F3F3F3 url(../images/analysis.svg) no-repeat;
    background-size: 23px;
    background-position: 10px;
}

.navbar-nav li a.tools:hover , .navbar-nav li a.active{
	background: #2577BA url(../images/analysish.svg) no-repeat;
    background-size: 23px;
    background-position: 10px;
    color: #fff;

}

.navbar-nav li a.live{
	background: #F3F3F3 url(../images/stations.png) no-repeat;
    background-size: 30px;
    background-position: 10px;
}
.navbar-nav li a.live:hover , .navbar-nav li a.live.active{
	background: #2577BA url(../images/stations_h.png) no-repeat;
    background-size: 30px;
    background-position: 10px;
    color: #fff;
}

.map img{
	width: 100%;
}


.time-map{
	background: #2577ba;
	padding: 10px 0 115px 0;
	position: relative;
	overflow: hidden;
}

.time-map:before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 20px;
    z-index: 0;
}

.time-map:after{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: url(../images/back-time.svg) no-repeat;
    width: 100%;
    height: 110px;
    z-index: 0;
    background-position: center;
}

.tabs-time{
	display: flex;
	width: 360px;
	height: 37px;
	overflow: hidden;
	margin: auto;
	background: #2577ba;
	border-radius: 8px;
	z-index: 10;
	box-shadow: 0px 0px 8px 0px rgba(105, 122, 145, 0.48);
	position: absolute;
    top: 14px;
    left: 20px;
	transition: 0.4s;
}

/*.tabs-time:hover{*/
/*	width: 360px;*/
/*}*/

.tabs-time a{
	display: inline-block;
	padding: 5px 0;
	width: 120px;
	color: #e2e9fc;
	font-size: 18px;
	text-align: center;
	position: relative;
}

/*.tabs-time #tomorrow , .tabs-time #after_tomorrow{*/
/*	display: none;*/
/*	opacity: 0;*/
/*	width: 0;*/
/*	transition: 0.5s;*/
/*}*/

/*.tabs-time:hover #tomorrow , .tabs-time:hover #after_tomorrow{*/
/*	width: 120px;*/
/*	display: inline-block;*/
/*	opacity: 1;*/
/*}*/

.tabs-time a:after{
	content: '';
	position: absolute;
	right: 0;
	top: 5%;
    width: 1px;
    height: 90%;
    background: #a8a8a8;
    border-radius: 30px;
}

/*.tabs-time a:last-child:after{*/
/*	display: none;*/
/*}*/

.tabs-time a:before{
    content: '';
    position: absolute;
    bottom: 5px;
    width: 75%;
    height: 1px;
    background: #ffffff;
    border-radius: 50px;
    right: 0;
    left: 0;
    opacity: 0;
    margin: auto;
    transition: 0.3s;
}

.tabs-time a.active:before{
    opacity: 1;
}


/*.tabs-time #today:after{*/
/*	opacity: 0;*/
/*}*/

/*.tabs-time:hover #today:after{*/
/*	opacity: 1;*/
/*}*/

.tabs-time a:hover , .tabs-time a.active{
	color: #fff;
}

/*.tabs-time a:hover:before , .tabs-time a.active:before{*/
/*	opacity: 1;*/
/*	bottom: 3px;*/
/*}*/

.navigation-time{
    margin: auto;
    padding: 15px 100px 15px 0;
    position: relative;
    /*top: -15px;*/
    background: #fff;
    text-align: center;
}

.navigation-time span{
	color: #c6c6c5;
	display: inline-block;
	margin-right: 20px;
}

.navigation-time .btn-blue{
	display: inline-block;
    background: #2577ba;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    padding: 5px;
    box-shadow: 0px 0px 8px 0px #686868;
    line-height: 23px;
}

.navigation-time .btn-blue img{
	width: 100%;
}

.navigation-time .btn-blue.play-nav{
	padding: 8px;
	line-height: 17px;
}

.navigation-time #spin{
    width: 35px;
    height: 35px;
    margin: 0 15px;
    position: absolute;
    top: 5px;
}


.navigation-time .fa-spin{
	color: #2577ba;
    font-size: 25px;
}

.navigation-time .btn-blue.play-nav img{
	width: auto;
    height: 100%;
    position: relative;
    left: 2px;
}

.navigation-time .timer{
	display: inline-block;
	text-align: center;
	margin: 0 20px;
}

.navigation-time .timer input{
	border: 0;
	text-align: center;
	color: #c6c6c5;
	font-size: 16px;
	margin: 0 15px;
    position: relative;
    top: 3px;
}


.navigation-time .timer input[type=time]::-webkit-inner-spin-button,
.navigation-time .timer input[type=time]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.navigation-time .timer input[type="time"]::-webkit-clear-button {
    display: none;
}

.navigation-time .timer span{
	display: inline-block;
	margin: 0 20px;
}

.navigation-time .timer a{
	width: 25px;
	height: 25px;
	background: #c6c6c5;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 10px;
    display: inline-block;
    padding: 5px;
}

.navigation-time .timer a img{
	width: 100%;
}


/*footer*/

.footer{
	background: #2577BA;
	padding: 30px 0;
}

.footer ul{
	display: inline-block;
	position: relative;
}

.footer ul li{

}

.footer ul li a{
	color: #fff;
	font-size: 16px;
}

.footer ul li a:hover{
	color: #93cae2;
}

.footer a.logo-footer{
	width: 160px;
	display: block;
	overflow: hidden;
	position: relative;
	top: 10px;
}

.footer a.logo-footer img{
	width: 100%;
}

.footer a.logo-footer.logo-footer-env{
	margin-right: 0;
}

.footer a.logo-footer.logo-footer-env img{
	width: 112px;
	height: auto;
}


.footer .app-download h3{
	color: #fff;
	font-size: 18px;
	margin: 0 0 15px 0;
}

.footer .app-download a{
	display: inline-block;
	width: 120px;
}

.footer .app-download a:last-child{
	margin-left: 10px;
}

.footer .app-download a img{
	width: 100%;
}

.gmnoprint{
    top: 55px;
    left: auto !important;
    right: -30px;
}
.gm-style-cc{
	display: none;
}

/* Sticky footer styles
-------------------------------------------------- */

#app{
	height: 100%;
	min-height: 100vh;
	padding-bottom: 180px;
}

.footer{
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 10;
}




/*links
.links .content-links{
	background: #fff;
	padding: 30px;
	border-radius: 10px;
	margin: 110px 0 76px 0;
	box-shadow: 0px 0px 10px 3px #dee2e0;
}

.content-links.content-down{
	margin-top: 60px;
}

.links .content-links h3{
	font-size: 20px;
	color: #444444;
	margin: 0 0 30px 0;
	text-transform: uppercase;
}

.links .content-links img{
	margin: 0 auto 15px auto;
	display: table;
	max-height: 300px;
}

.gm-svpc , .gm-control-active.gm-fullscreen-control , .gmnoprint.gm-style-mtc{
	display: none !important;
}

#latest-map{
	height: 100% !important;
}

.map--arcgis .fa-cog.fa-spin{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 50%;
	color: #5099f7;
}

.links .content-links .item{
	margin-bottom: 30px;
}

.links .content-links .item:last-child{
	margin-bottom: 0;
}


.links .content-links .item .link-img{
	display: block;
	float: left;
	margin-right: 10px;
	width: 190px;
	height: 140px;
	overflow: hidden;
}

.links .content-links .item .link-img img{
	width: 100%;
	height: 100%;
	transition: 0.5s;
}

.links .content-links .item .link-img:hover img{
	transform: scale(1.1);
}

.links .content-links .item h4{
	margin: 0 0 10px 0;
}


.links .content-links .item h4 a{
	color: #444444;
	font-size: 16px;
	display: inline-block;
	font-weight: 600;
	text-transform: capitalize;
}

.links .content-links .item h4 a:hover{
	color: #008636;
}

.links .content-links .item h6{
	color: #74aef9;
	margin: 0;
}

.links .content-links .item p{
	color: #c2bebe;
	margin: 0;
	text-align: justify;
	height: 70px;
	overflow: hidden;
}

/*analysis*/

.analysis  .head-analysis{
	background: #fff;
	padding: 30px 30px 0 30px;
	border-radius: 10px;
	margin: 76px 0 10px 0;
}

.analysis  .head-analysis .form-group{
	margin-bottom: 5px;
}

.head-analysis .col-form-label{
	font-size: 16px;
	color: #828282;
}


.input_form{
    background: #f3f3f3 url(../images/drop.svg) no-repeat;
    background-size: 10px;
    background-position: 97%;
	border: 1px solid transparent;
	border-radius: 10px;
	width: 100%;
	height: 40px;
	padding: 7px 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	color: #828282;
	text-align: center;
}

.has-danger select ,.has-danger select.form-control:focus{
	border: 1px solid #ec0202;
}

.form-control:focus{
	background: #f3f3f3;
}

.btn-analysis{
    background: #f3f3f3;
	border: 0;
	border-radius: 10px;
	width: 100%;
	height: 40px;
	padding: 7px 10px;
	color: #828282;
	text-align: center;
	display: block;
	margin-bottom: 25px;
}


.head-analysis .form-label{
	font-size: 14px;
	color: #c2bebe;
	height: 50px;
	overflow: hidden;
}

.blue-c{
	background: #599ef7;
	color: #fff;
}


.content-analysis{
	background: #fff;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 50px;
    position: relative;
    min-height: 400px;
}

.content-analysis h3{
	margin-bottom: 20px;
}

.content-analysis h3 small{
	color: #347bd6;
	float: right;
}

.content-analysis p{
	color: #696969;
}

.loader{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	color: #599ef7;
	margin-top: -24.5px;
	text-align: center;
}

.loader p{
    font-size: 20px;
    text-align: center;
    text-transform: capitalize;
    background: #f3f7f5;
    padding: 5px 20px;
    color: #585858;
    display: table;
    margin: -55px auto 20px auto;
    border: 1px solid #e4e4e4;
    border-radius: 7px;
}

.content-analysis p a{
	text-decoration: underline;
	color: #8cb91f;
	text-transform: uppercase;
}

.content-analysis p img{
	width: 300px;
	height: auto;
	display: block;
}

/*quality*/

.quality .tabs-quality{
	margin: 76px 0;
}


.tabs-quality .nav-tabs .nav-link{
	background: #d0d0d0;
	color: #2a2a2a;
	border: 0;
	margin-right: 3px;
	height: 50px;
	line-height: 35px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	transition: 0.3s;
}

.tabs-quality .nav-tabs .nav-item.show .nav-link, .tabs-quality .nav-tabs .nav-link.active{
	background: #fff;
	color: #609429;
}

.tabs-quality .nav-tabs{
	border-bottom: 0;
	margin: auto;
}

.tabs-quality .nav-tabs .nav-item{
	float: left;
	margin-bottom: 0;
}

.tabs-quality .tab-content{
	background: #fff;
	color: #454545;
	padding: 15px;
	min-height: 300px;
	border-radius: 10px;
}

.tabs-quality .nav{
	display: table;
}

.map{
	position: relative;
	height: calc(100vh - 86px) !important;
}

.map .container{
	overflow: visible !important;
}

.esriSimpleSliderTL{
	top: 50% !important;
	margin-top: -31px !important;
}

#gis-basemap-switcher{
	bottom: auto !important;
	top: 50px !important;
	right: 0px !important;
	left: auto !important;
	width: 90px;
	opacity: 0.5;
}

#gis-basemap-switcher:hover{
	opacity: 1;
}

#gis-basemap-switcher a{
    background: #fff !important;
    border-radius: 5px !important;
    border: 1px solid #9f9f9f !important;
    color: #adadad !important;
    transition: 0.3s;
    display: block !important;
    text-align: center;
    margin-bottom: 5px;
}

#gis-basemap-switcher a:hover{
	background: #599ef7 !important;
	color: #fff !important;
}

.bands{
	position: fixed;
	bottom: 0;
	right: 20px;
	z-index: 10;
}

.band{
	display: inline-block !important;
	width: auto  !important;
	min-width: 60px !important;
}

.bandlabel{
	padding: 5px !important;
	display: table !important;
	text-align: center;
	margin: auto;
	color: #fff;
	font-weight: 500;
}

.station .modal-header{
	padding: 5px 15px;
}

.station .modal-title{
	font-size: 16px;
}

.station .modal-body{
	padding: 7px 15px;
	overflow: hidden;
}

.station .info-station p{
	padding: 0;
	margin-bottom: 0;
}

.station .info-block label{
	margin-bottom: 0;
}

.station .info-block{
	padding: 10px 0;
	border-bottom: 1px solid #e9ecef;
}

.station .info-block:last-child{
	border-bottom: 0;
}

.slider-station{
	margin-bottom: 5px;
}

.slider-station.owl-carousel .owl-item img{
	height: 250px !important;
	width: auto !important;
	margin: auto !important;
}

.slider-station.owl-carousel .owl-nav button.owl-next, .slider-station.owl-carousel .owl-nav button.owl-prev{
	font-size: 35px !important;
    color: #adadad !important;
    position: absolute;
    top: 40%;
    right: 10px;
    margin: auto;
    text-align: center;
    z-index: 999 !important;
}

.slider-station.owl-carousel .owl-nav .owl-prev {
    right: auto;
    left: 10px;
}

.station .close{
	margin-bottom: 0;
	opacity: 1;
}

.station .close:focus, .station .close:hover{
	opacity: 1;
}

/*.station.modal{
	right: 50px;
	left: auto;
}*/

.date_range_group input[type=radio]{
	width: 20px;
	height: 20px;
	background: #f3f3f3;
	border: 2px solid #d7d7d7;
	border-radius: 50%;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	top: 4px;
	transition: 0.3s;
}

.date_range_group input[type=radio]:focus, .date_range_group input[type=radio]:checked{
	background: #2577ba;
	outline: 0;
}

.form-check-label{
	cursor: pointer;
}

.oa-controls-input select{
	background: #f3f3f3 url(../images/drop.svg) no-repeat;
    background-size: 10px;
    background-position: 90%;
    border: 0;
    border-radius: 10px;
    height: 40px;
    padding: 7px 10px;
    -webkit-appearance: none;
	-moz-appearance: none;
    color: #828282;
    text-align: center;
}

.block-more-option{
	padding: 15px;
	border: 1px solid #b7b7b7;
	border-radius: 10px;
	margin-bottom: 10px;
}


.more_ptions{
	position: relative;
	margin-bottom: 25px;
}

.block-more-option label{
	color: #828282;
	font-size: 16px;
	margin-bottom: 15px;
}

.block-more-option select{
	background: #f3f3f3 url(../images/drop.svg) no-repeat;
    background-size: 10px;
    background-position: 90%;
    border: 0;
    border-radius: 10px;
    width: 100%;
    height: 40px;
    padding: 7px 10px;
    -webkit-appearance: none;
	-moz-appearance: none;
    color: #828282;
}

.more_ptions label{
	color: #a3a3a3;
	position: relative;
	display: table;
	margin: auto;
	text-align: center;
	padding: 0 40px;
	background: #fff;
	font-weight: 500;
}

.more_ptions:before{
	content: '';
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	width: 100%;
	height: 1px;
	background: #ebebeb;
}

.analysis_option{
	margin-top: 20px;
}

.analysis_option .check-analysis{
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
}

.analysis_option .check-analysis img{
	width: 100%;
	height: 116px;
	border-radius: 10px;
}

.analysis_option .check-analysis input{
	position: absolute;
	width: 100%;
	height: 116px;
	top: 0;
	left: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: 0.3s;
	border: 3px solid #b7b7b7;
	border-radius: 10px;
	cursor: pointer;
}

.analysis_option .check-analysis label{
	font-size: 16px;
	color: #828282;
	display: block;
	text-align: center;
	margin-top: 5px;
}

.analysis_option .check-analysis input:focus , .analysis_option .check-analysis input:checked{
	border: 5px solid #2577ba;
	border-radius: 10px;
	outline: 0;
}



.block-more-option .text-md-right{
	margin-right: 10px;
}

.cu-block-more .block-more-option {
	min-height: 126px;
}

.cu-block-more .block-more-option label{
	cursor: pointer;
}

.cu-block-more .block-more-option input[type=checkbox]{
    width: 20px;
    height: 20px;
    background: #f3f3f3;
    border: 2px solid #d7d7d7;
    -webkit-appearance: none;
	-moz-appearance: none;
    position: relative;
    top: 5px;
    transition: 0.3s;
}

.cu-block-more .block-more-option input[type=checkbox]:checked {
    background: #8cb91f;
    outline: 0;
}


/*
Map Css*/

.esriSimpleSliderTL{
	left: auto !important;
	right: -200px;
}

.sidebar{
	background: #fff;
    position: absolute;
    top: 100px;
    left: 20px;
    width: 130px;
    z-index: 10;
    box-shadow: 1px 0px 5px 0px #adadad;
    border-radius: 15px;
    overflow: hidden;
}

.sidebar .scroll{
    position: relative;
}

.sidebar ul{
	border-top: 1px solid #1b5996;
}

.sidebar ul:first-child{
	border-top: 0;
}

.sidebar ul li{
	display: block;
	/*border-bottom: 1px solid #f4f3ee;*/
	position: relative;
}


.sidebar ul li a{
	display: block;
	padding: 10px 0 10px 40px;
	color: #757575;
	background:  url(http://aq.riyadhenv.gov.sa/public/website/images/quality.svg) no-repeat;
    background-size: 25px;
    background-position: 8px;
    transition: 0.3s;
    font-weight: bold;
}

.sidebar-content{
	border-radius: 10px;
}


.sidebar ul li a.active,
.sidebar ul li a:hover{
	color: #fff;
   	background: #61a3f8 url(http://aq.riyadhenv.gov.sa/public/website/images/quality-h.svg) no-repeat;
    background-size: 25px;
    background-position: 8px;
}

.sidebar ul li .sub-menu{
	overflow: hidden;
	color: #4d82d5;
	font-weight: bold;
}


.sidebar ul li .sub-menu li{
	border-bottom: 1px solid #fff;
}

/*.sidebar ul li .sub-menu.show{
	height: auto;
	opacity: 1;
}*/

.sidebar ul.sub-menu li a{
	background: none;
	padding: 10px 5px 5px 10px;
	color: #4f99f7;
	font-size: 15px;
	transition: 0.3s;
	text-align: center;
}

.sidebar ul li .sub-menu li a:hover , .sidebar ul li .sub-menu li a.active{
	background: #2577ba;
	color: #fff;
}

.navigation{
	display: table;
	margin: auto;
}

.navigation .pagination li{
    position: relative;
    display: block;
    margin-left: -1px;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
}
.navigation .pagination li span , .navigation .pagination li a{
	font-size: 18px;
    padding: 5px 15px;
    line-height: 40px;
}

.navigation .pagination .disabled{
    margin-left: -1px;
    line-height: 40px;
    color: #d2d2d2;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.navigation .pagination .active{
	color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}


#map-tooltip .tooltip{
	opacity: 1 !important;
}



/*AQ Index*/

.navbar-nav ul li a.aq {
	background: url(../images/aq.svg) no-repeat;
	background-size: 30px;
	background-position: 15px;
	transition: 0.3s;
}


.navbar-nav ul li a.aq:hover{
	background: #61a3f8 url(../images/aq-h.svg) no-repeat;
	background-size: 30px;
	background-position: 15px;
}


/*.slider{
	border-radius: 10px;
	position: relative;
	margin-bottom: 30px;
	margin-top: 76px;
}

.slider img{
	border-radius: 10px;
}

.slider .note{
	position: absolute;
	bottom: 20px;
	left: 0;
	background: #000000b5;
	padding: 10px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	color: #fff;
}

.slider .note h3{
	font-size: 18px;
	margin: 0 0 10px 0;
}

.slider .note p{
	font-size: 16px;
	margin-bottom: 0;
}

.slider .owl-nav .owl-next, .slider .owl-nav .owl-prev {
	font-size: 50px !important;
	color: #7e7e7e !important;
	position: absolute;
	top: 47%;
	right: -50px;
}

.slider .owl-nav .owl-prev {
	right: auto;
	left: -50px;
	border-radius: 0;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	text-align: right;
}

.slider .owl-nav .owl-next:hover, .slider .owl-nav .owl-prev:hover{
	color: #599ef7 !important;
}

.slider .item{
	border-radius: 15px;
	position: relative;
	overflow: hidden;
	height: 500px;
}

.slider .item video{
	width: 100%;
	height: auto;
}

.slider .item .info-status{
	position: absolute;
	top: 120px;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 10;
	direction: rtl;
	font-family: 'DINNextLTW23-Light';
}

.slider .item .title-status{
	width: 300px;
	margin: 0 0 60px 120px;
	text-align: center;
	float: left;
}

.slider .item .title-status h3{
	font-size: 40px;
	color: #fff;
	margin: 0;
}

.slider .item .title-status span{
	font-size: 120px;
	display: block;
	color: #fff;
	font-weight: 400;
    line-height: 110px;
}

.slider .item .title-status img{
	float: left;
	width: 100px;
	margin-right: 15px;
	position: relative;
    top: 30px;
}

.slider .item .row{
	width: 76%;
    margin: auto;
}

.slider .item .block-read{
	text-align: center;
}

.slider .item .block-read img{
	width: 40px;
	margin: 0 auto 10px auto;
}

.slider .item .block-read h3{
	color: #fff;
	font-size: 16px;
	margin: 0;
}

.slider .item .block-read span{
	font-size: 40px;
	color: #fff;
	display: block;
	line-height: 50px;
}*/

.content-analysis .option-form{
	margin-bottom: 30px;
}

.content-analysis .option-form .input_form{
	background-position: 97%;
}

.content-analysis .charts{
	background: #fbfbfb;
	padding: 30px;
	border-radius: 10px;
	margin-bottom: 40px;
	margin: 0 auto 30px auto;
	overflow: hidden;
}

.content-analysis .charts a{
	display: table;
	margin: auto;
}

.content-analysis .charts img{
	width: 100%;
	display: table;
	padding: 0 20px;
	margin: auto;
	height: auto !important;
}

.content-analysis .charts h3{
	color: #5e5e5e;
	font-size: 18px;
	text-align: center;
	margin: 10px 0;
}

.btn-sidebar{
    background: #8cb91f;
    border: 0;
    width: 45px;
    height: 45px;
    line-height: 45px;
    padding: 3px;
    position: absolute;
    top: 15px;
    right: 10px;
    display: none;
    z-index: 20;
    font-size: 26px;
    color: #fff;
}

.active-menu .btn-sidebar i:before{
    content: "\f057";
    font-size: 26px;
}


.links .content-links .panel-heading{
	font-size: 24px;
    text-transform: capitalize;
    margin: 0 0 10px 0;
}

.status{
	position: absolute;
	bottom: 55px;
	right: 20px;
	z-index: 10;
	width: 600px;
	padding: 25px 10px 23px 10px;
	background: #fff;
}

.status ul{
	position: relative;
}

.status ul li{
	width: 20%;
	height: 10px;
	background: #53a358;
	position: absolute;
}

.status ul li:first-child{
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.status ul li span{
	position: absolute;
    left: 0;
    top: -23px;
    font-size: 18px;
    color: #53a358;
}


.status ul li:nth-child(2){
	background: #a8c65b;
	left: 20%;
}

.status ul li:nth-child(3){
	background: #f8ea5f;
	left: 40%;
}

.status ul li:nth-child(4){
	background: #efaf4d;
	left: 60%;
}

.status ul li:last-child{
	background: #d9483a;
	left: 80%;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}


.status ul li:last-child span{
    left: auto;
    right: 0;
    color: #d9483a;
    top: -26px;
}

.status-rain{
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 10;
	width: 700px;
	padding: 25px;
	background: #fff;
}

.status-rain ul{
	position: relative;
}

.status-rain ul li{
	width: 10%;
	height: 10px;
	background: #2dfbfe;
	position: absolute;
}

.status-rain ul li:first-child{
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.status-rain ul li:nth-child(2){
	background: #26e7fd;
	left: 10%;
}

.status-rain ul li:nth-child(3){
	background: #27cefa;
	left: 20%;
}

.status-rain ul li:nth-child(4){
	background: #50b0f0;
	left: 30%;
}

.status-rain ul li:nth-child(5){
	background: #659bf8;
	left: 40%;
}

.status-rain ul li:nth-child(6){
	background: #8381f3;
	left: 50%;
}

.status-rain ul li:nth-child(7){
	background: #9b69f3;
	left: 60%;
}

.status-rain ul li:nth-child(8){
	background: #b84df7;
	left: 70%;
}

.status-rain ul li:nth-child(9){
	background: #cf34f2;
	left: 80%;
}

.status-rain ul li:last-child{
	background: #ea14f6;
	left: 90%;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.status-rain ul li span{
	position: relative;
    top: -23px;
	left: -30%;
	font-size: 14px;
	color: #6d6d6d;
	font-size: 13px;
}

.status-rain ul li span i{
	font-style: normal;
	font-size: 11px;
}

.status-rain ul li span.last{
    right: -55%;
    left: auto;
    top: -47px;
}


/*New css*/

.main-pages .page-details{
	padding: 15px;
	margin: 15px 0;
	box-shadow: 0px 0px 5px 0px #d6d6d6;
	background: #fff;
}

.main-pages .page-details .panel-heading h3{
	text-transform: capitalize;
	color: #1b5996;
	border-bottom: 1px solid #f3f7f5;
    margin-bottom: 5px;
}

.main-pages .page-details  .panel-body p{
	font-size: 16px;
    color: #696969;
    margin: 0;
    text-transform: capitalize;
}

.page-section-details{
	padding: 10px 20px;
	margin: 0;
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
	background: #ffffff;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.page-section-details h3, .page-section-details h4, .page-section-details h5, .page-section-details h6{
	text-transform: capitalize;
	color: #1b5996;
	border-bottom: 1px solid #f3f7f5;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.section_item_content{
	overflow: hidden;
}

.section_item_content ul{
    list-style: inherit;
    padding-inline-start: 40px;
}

.page-section-details p{
    font-size: 18px;
    color: #696969;
    margin: 10px 22px 10px 10px;
    text-transform: capitalize;
}
.title-page{
	background: #2577ba;
    color: #fff;
    padding: 5px 20px;
    display: table;
    font-size: 30px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.image-align-center{
	text-align: center;
}

.image-align-left img , img.image-align-left{
	text-align: left;
	float: left;
	margin-right: 15px;
}

.image-align-right img , img.image-align-right{
	text-align: right;
	float: right;
	margin-left: 15px;
}

.page-section-details a{
	display: inline-block;
}

.main-pages hr{
	border-top: 1px solid #f3f7f5;
}


/*Css Home Page*/


/* New Silder */

.slider .item img{
	max-height: 450px;
}

.slider.owl-carousel .owl-dots{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

.slider.owl-carousel button.owl-dot{
	width: 10px;
	height: 10px;
	background: #fff;
	border: 1px solid #707070;
	border-radius: 50%;
	margin-right: 10px;
}

.slider.owl-carousel button.owl-dot.active{
	border: 1px solid #fff;
	background: #2577BA;
}

.pollution-tabs{
	background: #fff;
	padding: 30px 0 60px 0;
}

.pollution-tabs .nav-tabs{
	border: 0;
	margin-bottom: 40px;
}

.pollution-tabs .nav-tabs .nav-link{
	font-size: 18px;
	color: #2577BA;
	border-radius: 15px;
	min-width: 120px;
	background: none;
	margin-right: 15px;
	text-align: center;
	text-transform: capitalize;
	border: 1px solid #2577BA;
	padding: 2px 25px;
}
.pollution-tabs .nav-tabs .nav-link:hover{
	background: #2577BA;
	color: #fff;
}
.pollution-tabs .nav-tabs .nav-link.active{
	background: #3276B7;
	color: #fff;
}

.pollution-tabs .tab-content article h2{
	color: #2577BA;
	font-size: 32px;
	margin: 0 0 10px 0;
	text-transform: capitalize;
}

.pollution-tabs .tab-content article p{
	color: #767676;
	font-size: 18px;
	margin-bottom: 20px;
}

a.more-home{
	color: #2577BA;
	font-size: 18px;
	display: block;
	border: 1px solid #2577BA;
	float: right;
	padding: 0 10px;
	border-radius: 10px;
}

a.more-home:hover{
	background: #2577BA;
	color: #fff;
}

.network{
	padding: 30px 0;
}

.network h1.title{
	font-size: 32px;
	color: #2577BA;
	margin: 0 0 20px 0;
	text-transform: capitalize;
}

.network article{
	position: relative;
}

.network article a{
	display: block;
	height: 143px;
	border-radius: 10px;
	margin-bottom: 15px;
	overflow: hidden;
}

.network article img{
	width: 100%;
	height: auto;
	max-height: 143px;
	transition: 0.6s;
}

.network article a:hover img{
	transform: scale(1.1);
}

.network article h2{
	color: #707070;
	font-size: 22px;
	margin: 0 0 5px 0;
	text-transform: capitalize;
}

.network article p{
	color: #767676;
	font-size: 14px;
	max-height: 65px;
	overflow: hidden;
	margin: 0;
}

.about-air-quality{
	margin-bottom: 50px;
}

.about-air-quality .about-apps{
	background: #fff;
	padding: 40px;
	border-radius: 10px;
	position: relative;
	height: 580px;
}

.about-air-quality .about-apps img.logo{
	width: 150px;
	margin-bottom: 40px;
	margin-top: 7px;
}

.about-air-quality .about-apps p{
	color: #767676;
	font-size: 14px;
	width: 40%;
	margin-bottom: 40px;
}

.about-air-quality .about-apps img.myapps{
	width: 55%;
	height: auto;
	float: right;
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.about-air-quality .about-apps .download-apps{
	position: absolute;
	bottom: 40px;
	left: 40px;
	width: 55%;
}

.about-air-quality .about-apps .download-apps p{
	color: #717171;
	font-size: 16px;
	margin-bottom: 5px;
	width: 55%;
}

.about-air-quality .about-apps .download-apps a{
	width: 100px;
	display: inline-block;
	margin-right: 15px;
}

.about-air-quality .about-apps .download-apps a img{
	width: 100%;
}

.air-quality-index{
	background: #fff;
	padding: 40px;
	border-radius: 10px;
	position: relative;
	height: 580px;
}

.air-quality-index h1{
	color: #2577BA;
	font-size: 32px;
	float: left;
	margin: 0 0 20px 0;
}


.air-quality-index .nav-tabs .nav-link{
	font-size: 18px;
	color: #A9A9A9;
	border: 0;
}

.air-quality-index .nav-tabs .nav-link:hover{
	border: 0;
	color: #2577BA;
}

.air-quality-index .nav-tabs .nav-link.active{
	background: #F4F4F4;
	border: 0;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	color: #2577BA;
}

.air-quality-index .nav-tabs{
	border: 0;
}

.air-quality-index .tab-content{
	background: #F4F4F4;
	padding: 30px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	margin-bottom: 20px;
}

.air-quality-index  .tab-content img{
	width: 300px;
	height: auto;
	max-height: 220px;
	display: table;
	margin: 0 auto 30px auto;
}

.air-quality-index  .tab-content p{
	color: #A5A5A5;
	font-size: 14px;
	text-align: center;
	margin-bottom: 0;
	max-height: 65px;
	overflow: hidden;
}

.air-quality-index .barameter{
	width: 100%;
}

/*css contact us
*/

.address-info , .contact-form{
	background: #fff;
	padding: 40px;
	border-radius: 10px;
/* height: 430px;*/
	margin-bottom: 30px;
}

.address-info .block-info i{
	color: #2577ba;
	font-size: 20px;
	float: left;
	margin-right: 5px;
	margin-top: 3px;
}

.address-info .block-info label{
	font-size: 18px;
	color: #8B8B8B;
	font-weight: 500;
	text-transform: uppercase;
}

.address-info .block-info span{
	margin-left: 22px;
	color: #2577ba;
}

.contact-form  .form-group label{
	color: #2577ba;
	font-weight: 500;
	margin-bottom: 5px;
}

.contact-form .form-control{
	border-radius: 10px;
	height: 40px;
	border: 1px solid #2577ba;
}

.contact-form textarea.form-control{
	height: 150px;
}

.contact-form button{
	background: #2577ba;
	border-radius: 10px;
	height: 40px;
}

.contact-form button:hover{
	background: #155182;
	color: #fff;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.gm-style .gm-style-mtc div{
	right: 40px !important;
}

.latest-update{
    background: #2577ba;
    color: #fff;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    border-radius: 15px;
    padding: 10px 15px;
}

.bg-primary{
	background-color: #7CADD5!important;
}
.btn.bg-primary:hover{
	background-color: #2577ba !important;
}
.bg-light{
	background-color: #F3F3F3!important;
}

.rounded{
	border-radius: 10px !important;
}

.overview-tabs .nav-tabs .nav-link{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 0;
	color: #8B8B8B;
	font-size: 18px;
}

.overview-tabs .nav-tabs .nav-item.show .nav-link, .overview-tabs .nav-tabs .nav-link.active{
	background: #2577BA !important;
	color: #fff;
}

.nav-tabs .nav-item{
    margin-bottom: 0px;
}
.overview-tabs .nav-tabs {
    border-bottom: 0;
    margin-bottom: 20px;
    border-bottom: solid 1px gray;
}

.overview-tabs .tab-content p{
	color: #767676;
	font-size: 18px;
    margin-bottom: 0;


}

.overview-tabs .tab-content a.btn-link{
	font-size: 14px;
	padding: 10px 0;
    height: 100px;
}
.breadcrumb-pages{
	background: #00B1FF url(../images/breadcrumb.jpg) no-repeat;
	background-size: cover;
	padding: 20px 0;
	margin-bottom: 50px;
}
.breadcrumb-pages .breadcrumb{
	background: none;
	padding: 0;
	margin: 0;
}
.breadcrumb-pages .breadcrumb .breadcrumb-item a , .breadcrumb-pages .breadcrumb-item.active , .breadcrumb-item+.breadcrumb-item::before{
	color: #fff;
}
.nav-page{
	margin-bottom: 30px;
}
.nav-page a{
	color: #8F8F8F;
	border-radius: 10px;
	border: 1px solid #8F8F8F;
	padding: 3px 10px;
	width: 100px;
	text-align: center;
}
.content-page h2{
	color: #2577BA;
	font-size: 25px;
	margin: 0 0 10px 0;
}
.content-page p{
	color: #767676;
	margin-bottom: 20px;
}
.content-page img{
	width: 100%;
	max-width: 500px;
}
.content-page .card{
	border: 1px solid #E8E8E8;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 20px;
}
.content-page .card-header{
	color: #767676;
	font-size: 14px;
	padding: 10px;
	font-weight: 400;
	background: #E8E8E8;
	border: 0;
	/*min-height: 62px;*/
}
.content-page .card-body{
	padding: 10px;
	min-height: 70px;
}
.content-page .card-body p{
	margin-bottom: 5px;
}
.station-block{
	margin-bottom: 70px;
}
.station-block h2{
	color: #2577BA;
    font-size: 22px;
    margin: 0 0 10px 0;
}

.station-block img{
	width: 100%;
}

.experimental_btn{
    z-index: 10;
    left: auto;
    /*top: 12px;*/
    margin: 0;
    position: absolute;
    right: 20px;
}

#experimental .modal-title{
	margin: auto;
}

#experimental .modal-header .close{
	opacity: 1;
	margin-left: 0;
	position: absolute;
}
#experimental .modal-header .close span{
	color: #fff;
	margin: 0;
}

/*
Media
*/

/*@media (min-width: 1390px){
	.status , .status-rain{
		bottom: 20%;
	}
}*/

@media (max-width: 1024px){

	.tabs-quality .nav-tabs .nav-link{
		padding: 10px 7px;
	}

	.active-menu .navbar-nav{
		opacity: 1;
		z-index: 9999;
		display: block;
	}

	.content-analysis .sidebar{
		position: relative;
	    top: auto;
	    left: auto;
	    width: auto;
	    height: auto;
	    box-shadow: none;
	    margin-bottom: 15px;
	}

	.content-analysis .sidebar ul li{
		float: left;
		margin: 0 10px;
	}
	.content-analysis .sidebar ul li .sub-menu li a{
		padding-right: 5px;
	}

	.header .brand{
		margin-right: 20px;
	}
	.navbar-nav ul li{
		margin-right: 10px;
    	padding-right: 10px;
	}
	.navbar-nav ul li:last-child{
		float: none;
		display: inline-block;
	}
	.status-rain , .status{
		position: absolute;
		right: 50%;
		margin: auto;
		display: table;
		bottom: 0;
		transform: translateX(50%);
		border: 1px solid #b9b9b9;
    }

	.footer .app-download a {
	    width: 95px;
	}

	.map{
		height: 100vh !important;
	}

	.network article a{
		height: 117px;
	}

}

@media (max-width: 992px){
	.footer .app-download h3{
		font-size: 15px;
	}
	.footer .app-download a:last-child{
		margin: 10px 0 0 0;
	}
}


@media (max-width: 768px){
	.footer{
		position: static;
	}

	.footer ul{
		display: table;
		margin: auto;
	}
	.footer a.logo-footer{
		position: static;
		margin: 15px 0;
	}
	.content-analysis .charts img{
		width: 100% !important;
	}
	.analysis_option .check-analysis input,.analysis_option .check-analysis img{
		height: 70px;
	}


	.header{
		overflow: hidden;
	}
	.header .container {
    	width: 100% !important;
	}
	.header .brand{
		display: table;
		margin: auto;
		float: none;
	}
	.navbar-nav{
		left: auto;
	}
	.navbar-nav ul li:last-child{
		position: absolute;
		right: -50px;
		top: 0;
	}
	.navbar-nav li a{
		text-align: left;
		border-radius: 0;
		padding: 5px 15px 5px 70px;
	}
	.navbar-text{
		display: block;
		padding: 0;
	}

	.navbar-text li a.lang{
		display: block;
		padding: 5px 15px 10px 15px;
	}
	.navbar-nav li{
		margin-right: 0;
	}

	.network article{
		margin-bottom: 30px;
	}

	.about-apps{
		margin-bottom: 30px;
	}
	.about-air-quality .about-apps img.myapps{
		width: 50%;
	}

	#app{
		padding-bottom: 0;
	}

	.overview-tabs .nav-tabs .nav-item{
		margin-right: 0 !important;
		width: 25%;
	}
	.overview-tabs .nav-tabs .nav-link{
		font-size: 14px;
		height: 45px;
		display: flex !important;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

}

@media (max-width: 500px){
	.footer ul li{
		margin-right: 20px;
	}

	.header .brand{
		width: 120px;
		top: 0;
	}
	.header .logo-env a.logo-1{
		width: 160px;
	}

	.header .logo-env a.logo-2{
		width: 80px;
		margin-right: 60px;
	}

	.navbar-nav ul{
		display: block;
	}


	.navbar-nav ul li a{
		min-width: inherit;
		font-size: 14px;
		min-height: 51px;
	}
	.footer ul li:last-child{
		margin-right: 0;
	}

	.links .content-links{
		margin: 115px 0;
	}

	.links .content-links h3{
		text-align: center;
	}

	.links .content-links .item .link-img{
		float: none;
		display: table;
		margin: 0 auto 10px auto;
	}

	.links .content-links .item h4 a{
		display: block;
		text-align: center;
	}
	.links .content-links .item {
	    padding-bottom: 30px;
	    border-bottom: 1px solid #ebf1ee;
	}
	.links .content-links .item:last-child{
		border-bottom: 0;
	}

	.analysis .head-analysis{
		margin-top: 30px;
		padding: 30px;
	}

	.date-custom{
		width: 32% !important;
	}

	.analysis_option.analysis_group .col-2{
		max-width: 24.666667%;
		flex: auto;
	}

	.analysis_option .check-analysis label{
		font-size: 12px;
	}

	.content-analysis{
		padding: 7px;
	}

	.content-analysis p{
		padding: 10px;
	}

	.band{
		min-width: 50px !important;
		font-size: 16px;
	}

	.header .brand{
		float: none;
		display: table;
		margin: auto;
	}

	.navbar-nav ul li:last-child{
		right: 0;
    	top: -70px;
	}

	.time-map {
	    padding: 10px 0 65px 0;
	}
	.time-map:after{
		height: 80px;
	}
	.navbar-nav ul li{
		margin-right: 0;
		padding-right: 0;
	}
	.navbar-nav ul li a{
		padding-right: 7px;
	}

	.footer a.logo-footer{
		margin-bottom: 15px;
	}
	.footer ul{
		display: inline-block;
	}
	.tabs-time:hover ,.tabs-time{
		width: 90%;
		top: 5px;
	}
	.tabs-time:hover #tomorrow, .tabs-time:hover #after_tomorrow , .tabs-time #tomorrow, .tabs-time #after_tomorrow{
		width: 120px;
	    display: inline-block;
	    opacity: 1;
	}

	.tabs-time #today:after{
    	opacity: 1;
	}
	.navigation-time{
		right: auto;
		text-align: center;
	}
	.navigation-time .timer input{
		width: 105px;
		margin: 0 5px;
		background: none;
		text-align: center;
	}
	.status , .status-rain{
		width: 100%;
	}
	.status-rain ul li span{
		font-size: 10px;
	}
	.status-rain ul li span i{
		font-size: 7px;
	}

	.footer .app-download{
		margin-top: 15px;
	}

	.footer .app-download h3{
		margin: 0;
	}
	.map {
    	height: 80vh !important;
	}
	#app{
		padding-bottom: 0;
	}

	.network article a{
		height: 143px;
	}
	.pollution-tabs .nav-tabs .nav-link{
		margin-right: 3px;
	}
	.about-air-quality .about-apps{
		padding: 20px;
	    height: auto;
	}
	.air-quality-index .tab-content{
		padding: 15px;
	}
	.air-quality-index .tab-content img{
		width: 100%;
		height: auto;
		max-height: 300px;
	}
	.air-quality-index{
		height: auto;
		padding: 20px;
	}
	.about-air-quality .about-apps .download-apps a{
		margin: 0 0 10px 0;
	}
	.navigation-time{
		padding: 10px;
	}
	.navigation-time .timer{
		margin: 0 10px;
	}
	.latest-update{
		top: 55px;
	}
	.tabs-time:hover, .tabs-time{
		top: 60px;
	}
	#gis-basemap-switcher{
		top: 160px !important;
	}
	.gmnoprint{
		display: none;
	}
	.btn-verview .btn{
		height: 85px;
	    display: flex !important;
	    justify-content: center;
	    align-items: center;
	}
	.about-air-quality .about-apps p{
		margin-bottom: 55px;
	}
	.about-air-quality .about-apps .download-apps{
		position: relative;
	    bottom: 40px;
	    left: 0;
	}
	.overview-tabs .nav-tabs .nav-link{
		font-size: 12px;
		height: 75px;
		padding: 3px;

	}
	.network article a {
		height: auto;
	}
	.network article img{
		height: auto;
		max-height: inherit;
	}
		.about-air-quality .about-apps p {
    		width: 100%;
    		margin-bottom: 20px;
		}

		.about-air-quality .about-apps img.myapps{
			width: 80%;
			height: auto;
			float: none;
			position: static;
		}
		.about-air-quality .about-apps .download-apps{
			position: static;
			width: 100%;
    		margin-top: 40px;
		}
		.about-air-quality .about-apps img.logo {
		    margin-bottom: 20px;
		}
		.overview-tabs .nav-tabs .nav-link{
			border-radius: 0;
		}
		.about-air-quality .about-apps .download-apps p{
			width: 100%;
		}
		.experimental_btn{
			left: 0;
    		top: -40px;
		}
}















 .element {
	float: left;
	margin-right: 15px;
	position: relative;
	top: 30px;
 }

  .element svg{
	width: 100px;
	height: 100px;
  }

.white {fill:#FFFFFF}
.gray {fill:#E0E0E0}
.yellow {fill:#FFEB3B}


.main-pages{
    font-family: 'TheSans-Plain' !important;}

.text-content p{
    margin-bottom: 0;
}