* {  
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  margin:0;	
  }
body {
  background:none repeat scroll 0 0 #2E6290;
  font-size:100%;
  font-family:"Open Sans",Arial,sans-serif;
  color:#444;
  }
   @font-face {
    font-family: Urdu1;
    src: url(../font/nafees-nastaleeq-regular-1.ttf);
	}
	@font-face {
    font-family: Urdu2;
    src: url(../font/microsoft-uighur-regular-1.ttf);
	}@font-face {
    font-family: Urdu3;
    src: url(../font/zohar-unicode-regular-1.ttf);
	}
	
	.urdu{
	font-family: Urdu1;
	font-size:0.8em;
	font-weight:normal;
  }
  .google-maps {
            position: relative;
            padding-bottom: 60%; 
            height: autoo;
            overflow: hidden;
			
        }
        .google-maps iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }
/*index page loader*/
	
		.loader {
 border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #6495ed;
  border-bottom: 5px solid #f60;
 width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin-top:20px;
  margin-left:40%;
  margin-right:40%;
  text-align: center;
}
.loading-text {
  width: 90px;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 45px);
  text-align: center;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 
/*index page loader*/
.round-image_event{
	  background-image: url('../images/pakistan_flag.gif');
	background-repeat: no-repeat;
	background-position: center;
    border-radius: 50%;
    width: 100px;
    height: 100px;
	border: 2px solid #f60;
	margin-left:100px;
	margin-right:100px;
	
}

#scrollup {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #f60;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 30px;
  border: 3px solid #ffffff;
     font-size: 1.8em;
 
}

#scrollup:hover {
  background-color: #000000;
   border: 3px solid #ffffff;
   color: #f60;
   font-size: 1.8em; 
  }
 .scrolling_nav_right{
  display:block;
  width:85%;
  max-width:90%;
  background-color: #ffffb3;
  float: left;
  padding:5px;
  border: 0px solid #f60;
  border-radius:0px;
  }
.scrolling_nav_left{
  display:block;
 min-width:15%;
   max-width:50%;
  background-color: #f60;
  float:left;
  text-align: left;
  padding:5px;
  border: 0px solid white;
  border-radius:0px;
  
}
.scrolling_p{
	font-weight:bold; 
	font-size:13px; 
	color:#2E6290; 
	font-family:Lucida Console, Monaco, monospace;
	
}
.scrolling_up{
	background: url(img/scrollingup.jpg) no-repeat top;
	padding: 15px;
}
.tech h1, h2, h3, h4, h6 {
  color:#444;
  font-weight: bold;
  margin:0.2em 0 0.2em 0;    
}
.tech_span {
	color :#85846f;
	
}
.tech_nav{
  display:block;
  width:100%;
  background:#dfddb9;
  color: black;
  font-weight:bold;
	
 
}
.tech_nav_left{
	float:left; 
	width:50%;
	border:0px solid black;
	text-align:left;
	background:#dfddb9;
	padding:  19px 12px 19px 12px;
	
	
}
.tech_nav_right{
	float:right; 
	width:50%;
	border:0px solid black;
	text-align:right;
	background:#dfddb9;
	padding:  16px 12px 15px 12px;
	
	
}
.tech_table {
  
  border:0px solid #2E6290;
  border-collapse:collapse;
  border-spacing:0;
  text-align:left;
  width:100%;
 
}
.tech_table tr {


}
.tech_table tr:hover{background-color:#f5f5f5 ;}
/*.tech_table tr td{
	padding:0.5em;
	background-color: #fff;
	border:1px solid #2E6290;
	text-align: center;
	font-size:1.0em;
	font-weight: NORMAL;
	color:  black;
	
	} */

.tech_table tr th {
	color:  #000000;
	background: #8fbcbc;
	text-align: center;
	font-size:0.6em;
	border:2px solid #FFFFFF;
	border-radius: 5px  5px  5px  5px;
	
	text-transform: uppercase;
	padding: 5px 8px;
	border-collapse:separate;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	-ms-border-radius: 7px;
	-webkit-border-radius: 7px;
	
	
	}
	.tech_table tr td {
	color:  #000000;
	padding: 3px 5px;
	background: #f2f2f2 ;
	text-align: center;
	font-size:0.75em;
	border:2px solid #FFFFFF;
	font-weight:normal;
	
	}
/*	.tech_table a {
    background-color:#2E6290;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    display: inline-block;
    font-weight: bold;
    padding: 3px 3px;
    text-decoration: none;
    text-transform: uppercase;
}

.tech_table a:hover {
	background-color: #FF8533;
}
*/
.tech_table button-reversed { 
    background-color: #2E6290;
	
}



.tech_table a button-forward { 
    background-color: #2E6290;
}
 
.tech_table a button-reversed:hover {
	background-color: #214769;
}
/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
.met_nav{
  display:block;
  width:100%;
  background:#dfddb9;
  color: white;
  font-weight:bold;
	
 
}
.met_nav_left{
	float:left; 
	width:50%;
	border:0px solid black;
	text-align:left;
	background:#d9d9d9;
	padding:  19px 12px 19px 12px;
	
	
}
.met_nav_right{
	float:right; 
	width:50%;
	border:0px solid black;
	text-align:right;
	background:#d9d9d9;
	padding:  15px 12px 15px 12px;
	
	
}
h1, h2, h3, h4, h5, h6 {
  color:#444;
  font-weight: normal;
  margin:0.2em 0 0.2em 0;    
}
h1 {font-size:2.4em;}
h2 {font-size:2em;}  
h3 {font-size:1.6em;}  
h4 {font-size:1.2em;}  
h5 {font-size:1em;}  
h6 {font-size:0.9em;}    
a, a:link, a:visited, a:hover, a:active {
  text-decoration:none;
  color:#444;
}
p {
    display: block;
    margin-top: 0em;
    margin-bottom: 0em;
    margin-left: 0;
    margin-right: 0;
}
.imgintro {
  border:0px solid #F60;
  display:inline;
  height:75px;
  min-width:55px;
  
  width:auto;
 
  margin-top:0px;

}
img {
  border:0;
  display:inline;
  height:auto;
  max-width:95%;
  width:auto;
 
}
.owl-item img, .full-img {
  max-width: none;
  width:95%;
}  
.df{
	color:red;
	font-family: digital-7;
	font-size: 30px
}
a.button {
    background-color:#F60;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    display: inline-block;
    font-weight: bold;
    
    text-decoration: none;
    text-transform: uppercase;
}

a.button:hover {
	background-color: #FF8533;
}

a.button-reversed { 
    background-color: #2E6290;
}



a.button-forward { 
    background-color: #2E6290;
}

a.button-reversed:hover {
	background-color: #214769;
}
@font-face {
    font-family:'digital-7';
    src: url('font/digital-7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


table {
  background:none repeat scroll 0 0 #fff;
  border:1px solid #D0D0D0;
  border-collapse:collapse;
  border-spacing:0;
  text-align:left;
  width:100%;
}

table tr td, table tr th {padding:0.5em;}
table tfoot, table thead {background:none repeat scroll 0 0 #e0e0e0;}
table tr:nth-of-type(2n) {background:none repeat scroll 0 0 #e0e0e0;} /* Diff color evert next line*/
th {border-right:0px solid #fff;}
td {border-right:0px solid #e0e0e0;}
.logotable {
  
  border:0px solid #2E6290;
  border-collapse:collapse;
  border-spacing:0;
  text-align:left;
  width:98%;
}
.logotable tr{
  
  padding:0.0em;
}
.logotable td{
  
padding:0.0em;
}
.reltable {
  
  
  border-width:3px;	
  border-collapse:collapse;
  border-style:groove;
 
  border-color:#F8F8F8;
  border-spacing:0px;
  text-align:left;
  width:95%;
}
.reltable tr:hover{background-color:#f5f5f5;}
.reltable tr td{
	padding:0.5em;
	background-color: #fff;
	border:1px solid #2E6290;
	font-size:1.0em;
	font-weight: bold;
	color:  black;
	text-align: center;
	
	} 

.reltable tr th {
	color:  #00008B;
	background: #F8F8F8 ;
	text-align: left;
	font-size:0.9em;
	border:1px solid #2E6290;
	
	
	}
	.reltable a {
    background-color:#2E6290;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    display: inline-block;
    font-weight: bold;
    padding: 8px 25px;
    text-decoration: none;
    text-transform: uppercase;
}
.reltable a:hover {
	background-color: #FF8533;
}

.reltablet button-reversed { 
    background-color: #2E6290;
}



.reltable a button-forward { 
    background-color: #2E6290;
}
 
.reltable a button-reversed:hover {
	background-color: #214769;
}
.hourlytable {
  
  
  border-width:3px;	
  border-collapse:collapse;
  border-style:groove;
 
  border-color:#F8F8F8;
  border-spacing:0px;
  text-align:left;
  width:95%;
}

.hourlytable tr:hover{background-color:#f5f5f5}
.hourlytable tr td{
	padding:0.5em;
	background-color: #ffffff;
	border-right:5px solid #F8F8F8;
	width: 25%;
	
	font-weight: bold;
	color:  black;
	text-align: center;
	/*font-family: digital-7;*/
	font-size:1.0em;
	} 

.hourlytable tr th {
	color:  #FFFFFF;
	border-right:5px solid #F8F8F8;
	background-color: #2E6290;
	text-align: center;
	font-size:0.9em;
	font-weight: bold;
	width: 25%;
	
	}
.archive_heading{
	text-align:left;
	background: -moz-linear-gradient(#bbd0f7, #2E6290);
	background:-webkit-linear-gradient(#bbd0f7, #2E6290);
	padding:0.5em;
	width:98%;

	}
	.archive_heading_rainfall{
	text-align:left;

	background:linear-gradient(to right,#2E6290,#00b300);
	padding:0.5em;
	width:98%;

	}
.archive_span_station{
	vertical-align:middle;
	font-size:1.3em; 
	font-weight:bold; 
	color:white;
}
.archive_span_parameter{
	vertical-align:middle;  
	font-size:0.8em; 
	color:white;
}
.datatable {

  border:0px solid #2E6290;  
 text-align:left;
  width:98%;
   max-width:98%;
   border-collapse: separate;
}
.datatable tr{
border-bottom:0px solid #214769;



}



.datatable tr td{
	padding:0.3em;
	background-color: #F8F8F8;
	border:1px solid #fff;
	text-align: center;
	font-size:0.70em;
	font-weight: bold;
	/*color:  #00008B;*/
	color:  #000000;
	
	} 
	
.datatable tr th {
	color:  #000000;
	background: #bbd0f7 ;
	text-align: center;
	font-size:0.9em;
	border:1px solid #ffffff;
	vertical-align:middle;
/*	border:0px solid #2E6290; 
background: #f2f2f2 ;*/
	
	}
	
.datatable  tbody  tr:hover  td {
 border-top-color: #f60c; 
 border-bottom-color: #f60c; 
 border-left:0px;
 border-right:0px;
 color:#f60c;
 font-size: 0.8em; 
 padding:0em;}
.datatable  tbody  tr:hover  td:first-child {border-left:1px solid; border-left-color: #f60c; }
.datatable tbody tr:hover td:last-child  { border-right:1px solid;border-right-color: #f60c; }

.datatable  tbody  tr:hover  th { border-top-color: #f60c; border-bottom-color: #f60c; }
.datatable  tbody  tr:hover  th:first-child { border-left-color: #f60c; }


	.datatable a {
    background-color:#2E6290;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    display: inline-block;
    font-weight: bold;
    padding: 8px 25px;
    text-decoration: none;
    text-transform: uppercase;
}
.datatable a:hover {
	background-color: #FF8533;
}

.datatablet button-reversed { 
    background-color: #2E6290;
}



.datatable a button-forward { 
    background-color: #2E6290;
}
 
.datatable a button-reversed:hover {
	background-color: #214769;
}
.box_square{
	width:10px;
	height:10px;
}
.box_rectangular{
	width:50px;
	height:10px;
}
 
.red{
	background:#f00;
}
.green{
	background:#0f0;
}
.blue{
	background:#00f;
}

	.mapdatatable {
  
  
  text-align:left;
  width:100%;
}
.mapdatatable tr{
border-bottom:1px solid #214769;

}
tr:hover{background-color:#f5f5f5;}
.mapdatatable tr td{
	padding:0.5em;
	background-color: #fff;
	 vertical-align: baseline;
	font-size:1.0em;
	font-weight: bold;
	color:  black;
	
	} 

.mapdatatable tr th {
	color:  #00008B;
	background: #F8F8F8 ;
	text-align: left;
	font-family:verdana;
	font-size:0.75em;
	 padding:0.5em;
	
	 vertical-align: baseline;
	
	}


/* RWS CSS Start Here*/
.snav{
  display:block;
  width:100%;
  background:#9ACD32;
  text-align: center;
  
}
	
	.rwstable{
  
  border:1px solid #D0D0D0;
  border-collapse:collapse;
  border-spacing:0;
  text-align:left;
  width:100%;
  overflow:none;
}
tr:hover{background-color:#f5f5f5}
.rwstable tr td{
	padding:0.2em;
	background-color: #fff;
	text-align:center;
	font-size:0.5em;
	font-weight: bold;
	color:  black;
	font-family:Verdana;
	
	
	} 

.rwstable tr th {
	color:  #00008B;
	background: #F8F8F8 ;
	text-align: center;
	font-size:0.45em;
	font-weight: bold;
	font-family:Verdana;
	}
	.rwstable tr:hover{background-color:#ffff99;}
	
	div#tips a  {
	text-decoration:none;
	border-bottom:0px solid green;
	color:#000;
}

div#tips a:hover {
	color: #FFFFFF;
	background: #6495ED;
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 5px 5px 5px 5px;
}
div#tips a span {display: none;}
div#tips a:hover span {
	display: block;
	position: absolute;
	left: 10%;
	width: 0px;
	padding: 5px;
	margin: 10px;
	z-index: 100;
	color: #0000CC;
	
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	border: 0px solid #666666;
	text-decoration: none;
}
div#tips p {position:relative}
	
/* RWS CSS End Here*/
#my-div
{
    width    : 700px;
    height   : 300px;
    overflow : hidden;
    position : relative;
}

#my-iframe
{
    position : absolute;
    top      : -180px;
    left     : -175px;
	bottom     : -175px;
    width    : 1280px;
    height   : 1200px;
}
/* Show user & station CSS Start Here*/

 {
  
  border:0px solid #2E6290;
  border-collapse:collapse;
  border-spacing:0;
  text-align:left;
  width:100%;
 
}
.sttable tr {


}
.sttable tr:hover{background-color:#f5f5f5 ;}
/*.sttable tr td{
	padding:0.5em;
	background-color: #fff;
	border:1px solid #2E6290;
	text-align: center;
	font-size:1.0em;
	font-weight: NORMAL;
	color:  black;
	
	} */

.sttable tr th {
	color:  #FFFFFF;
	background: #6c9dc6;
	text-align: center;
	font-size:0.7em;
	font-weight:bold;
	border:2px solid #FFFFFF;
	border-radius: 5px  5px  5px  5px;
	
	text-transform: uppercase;
	padding: 5px 8px;
	border-collapse:separate;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	-ms-border-radius: 7px;
	-webkit-border-radius: 7px;
	
	
	}
	.sttable tr td {
	color:  #000000;
	padding: 3px 5px;
	background: #F8F8F8 ;
	text-align: center;
	font-size:0.7em;
	border:2px solid #FFFFFF;
	
	}
	.sttable a {
   
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    display: inline-block;
    font-weight: bold;
    padding: 3px 3px;
    text-decoration: none;
    text-transform: uppercase;
}
.sttable a:hover {
	-moz-box-shadow: 0 0 10px #ccc;
		-webkit-box-shadow: 0 0 10px #ccc;
		box-shadow: 0 0 10px #ccc;
}

.sttablet button-reversed { 
    background-color: #2E6290;
}



.sttable a button-forward { 
    background-color: #2E6290;
}
 
.sttable a button-reversed:hover {
	background-color: #214769;
}
.gis {
width:100%;
height:500px;
border: 0px solid green;

}
.gis_p {
width:100%;
height:200px;
border: 0px solid red;
	

}


.para{
width: 30%;
height: 490px;
border: 0px solid #2E6290;
border-radius: 4px;
    padding: 5px;
float:left;
}

.para p{
color:#2E6290;
text-align:left;
font-family:verdana;
text-align: justify;
text-justify: inter-word;
font-weight:normal;
font-size:0.9em;

}
div.zoomin { 
	width: 60%;
    height: 500px;
	float:left;
	border: 0px solid #2E6290;
	 
	}
	div.dgkhan_module_portion_a{ 
	width: 50%;
	border: 0px solid #2E6290;
	float:left;
	 
	}
	div.dgkhan_module_portion_b{ 
	width: 50%;	
  	border: 0px solid #2E6290;
	float:right;
	 
	}
	
	.para_secondary{
width: 100%;
height: auto;
border: 0px solid #2E6290;
border-radius: 4px;
border-bottom : 0px solid #f60;
    padding: 5px;
float:left;
}
.para_secondary p{
color:#2E6290;
text-align:left;
font-family:verdana;
text-align: justify;
text-justify: inter-word;
font-weight:normal;
font-size:0.9em;
padding: 5px;

}
	
div.zoomin img { 
border-radius: 8px;
	width: 95%;
	max-width: 100%;
    height: 490px;
	float:left;
	 -webkit-transition: all 2s ease;
		-moz-transition: all 2s ease;
		 -ms-transition: all 2s ease;
			transition:  all 2s ease; 
			 
			 
} 
div.zoomin img:hover {
  width: 100%;
   height: 500px;  
   
 }

div.img {
    border: 1px solid #ccc;
	width:100%;
    height:auto;
	border-radius: 8px;
	
	
}


div.img:hover {
    border: 2px solid #f60;
	
	
}


div.desc {
    padding: 0px;
    text-align: center;
	font-weight:BOLD;
	color: #2E6290;
	font-family: verdana;
	font-size: SMALL;
}


* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 15.99999%;
}
.responsiveheading-s{

display:block;
}
@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
	.responsiveheading-s{

display:none;
}
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
	.responsiveheading-s{display:block;}
.responsiveheading-m{display:none;}
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 15%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width:900px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

/* .datatable tfoot, .datatable thead {background:none repeat scroll 0 0 #e0e0e0;}
.datatable tr:nth-of-type(2n) {background:none repeat scroll 0 0 #e0e0e0;} Diff color evert next line
.datatableth {border-right:0px solid #fff;}
.datatabletd {border-right:0px solid #e0e0e0;}*/

.size-960 .line {
  margin:0 auto;
  max-width:75em;
  padding:0 0.625em;
}
.size-1140 .line {
  margin:0 auto;
  max-width:75.25em;
  padding:0 0.625em;
}
.size-1145 .line {
  margin:0 auto;
  max-width:75.25em;
  padding:0 0.625em;
}

.size-960.align-content-left .line,.size-1140.align-content-left .line {margin-left:0;}
form {line-height:1.0em;}
nav {
  display:block;
  width:100%;
  background:#292F33;
  
}
.heading_nav{
  display:block;
  width:100%;
  background:#d9e6f2;
 
   border-radius: 90px 90px 0px 0px;
  
}
.stationnav {
  display:block;
  width:100%;
  background:#d9e6f2;
  border-radius: 15px 15px 0px 0px;
  
}
.footernav {
  display:block;
  width:100%;
  background:#d9e6f2;
  border-radius: 0px 0px 15px 15px;
  
}

.line::after, nav::after,.stationnav::after, .center::after, .box::after, .margin::after {
  clear:both;
  content:".";
  display:block;
  height:0;
  line-height:0;
  visibility:hidden;
}
.top-nav-station ul {padding:0;}
.top-nav-station ul ul {
  position:absolute;
  background:#262626;
}
.top-nav-station li {
  float:left;
  list-style:none outside none;
  cursor:pointer;
}
.top-nav-station li a {
  padding:0.4em 1.0em 0.4em 1.0em;
  display:block;
  color:#000000; 
  font-size:0.8em;
  font-family:verdana;
  font-weight: bold;
   border-right:1px solid white;
}

.top-nav-station li ul li a {
  background:none repeat scroll 0 0 #ffffff;
  min-width:100%;
  padding:0.8em 0.0em 0.8em 0.0em; 
  border: 1px solid #d9e6f2;
  font-size:0.6em;
  font-family:verdana;
}
.top-nav-station li a:hover{background:#6495ED;}
.top-nav-station li ul {display:none;}

.top-nav-station li ul li {
  float:none;
  list-style:none outside none;
  min-width:100%;
  padding:0;
}
.top-nav-station  li ul li ul li {
  float:none;
  list-style:none outside none;
  min-width:100%;
  padding:0;
}
.top-nav ul {padding:0;}
.top-nav ul ul {
  position:absolute;
  background:#262626;
}
.top-nav li {
  float:left;
  list-style:none outside none;
  cursor:pointer;
}
.top-nav li a {
  padding:0.8em;
  display:block;
  color:#fff; 
  font-weight: bold;
}

.top-nav li ul li a {
  background:none repeat scroll 0 0 #000;
  min-width:100%;
  padding:0.6em;
}
.top-nav li a:hover {background:#6495ED;}
.top-nav li ul {display:none;}
.top-nav li ul li {
  float:none;
  list-style:none outside none;
  min-width:100%;
  padding:0;
}
.top-nav li ul li ul li {
  float:none;
  list-style:none outside none;
  min-width:100%;
  padding:0;
}
.top-nav-2 ul {padding:0;}
.top-nav-2 ul ul {
  position:absolute;
  background:#262626;
}
.top-nav-2 li {
  float:right;
  list-style:none outside none;
  cursor:pointer;
}
.top-nav-2 li a {
  padding:0.8em;
  display:block;
  color:#fff; 
  font-weight: bold;
}
.top-nav-2 li ul li a {
  background:none repeat scroll 0 0 #000;
  min-width:100%;
  padding:0.625em;
}
.top-nav-2 li a:hover {background:#6495ED;}
.top-nav-2 li ul {display:none;}
.top-nav-2 li ul li {
  float:none;
  list-style:none outside none;
  min-width:100%;
  padding:0;
}
.top-nav-2 li ul li ul li {
  float:none;
  list-style:none outside none;
  min-width:100%;
  padding:0;
}
.top-nav-tech ul {padding:0;}
.top-nav-tech ul ul {
  position:absolute;
  background:#262626;
}
.top-nav-tech li {
  float:left;
  list-style:none outside none;
  cursor:pointer;
}
.top-nav-tech li a {
  padding:0.8em;
  display:block;
  color:#fff; 
  font-weight: bold;
}

.top-nav-tech li ul li a {
  background:none repeat scroll 0 0 #9fc6c6;/**/
  min-width:100%;
  padding:0.4em;
  border-bottom:1px solid #fff;
  border-radius:0px;
  color:#000;
  font-size:0.9em;
  
}
.top-nav-tech li a:hover {border:0px solid #ffaf4d ;border-radius:2px;background:#444; color:#fff;} /*#dfddb9*/
.top-nav-tech li ul {display:none;}
.top-nav-tech li ul li {
  float:none;
  list-style:none outside none;
  min-width:100%;
  padding:0;
}
.top-nav-tech li ul li ul li {
  float:none;
  list-style:none outside none;
  min-width:100%;
  padding:0;
}
.top-nav-admin ul {padding:0;}
.top-nav-admin ul ul {
  position:absolute;
  background:#262626;
}
.top-nav-admin li {
  float:left;
  list-style:none outside none;
  cursor:pointer;
}
.top-nav-admin li a {
  padding:0.8em;
  display:block;
  color:#fff; 
  font-weight: bold;
}

.top-nav-admin li ul li a {
  background:none repeat scroll 0 0 #CCD6DD;/**/
  min-width:100%;
  padding:0.4em;
  border-bottom:1px solid #fff;
  border-radius:0px;
  color:#000;
  font-size:0.9em;
  
}
.top-nav-admin li a:hover{border:0px solid #E1E8ED ;border-radius:2px;background:#444; color:#fff;} /*#dfddb9*/
.top-nav-admin li ul {display:none;}
.top-nav-admin li ul li {
  float:none;
  list-style:none outside none;
  min-width:100%;
  padding:0;
}
.top-nav-admin li ul li ul li {
  float:none;
  list-style:none outside none;
  min-width:100%;
  padding:0;
}
.count-number {
  background:none repeat scroll 0 0 #777;
  -webkit-border-radius:10em;
  -moz-border-radius:10em;
  border-radius:10em;
  display:none;
  font-size:0.7em;
  line-height:1.8em;
  margin-left:0.3125em;
  text-align:center;
  width:1.8em;  
  color:#fff; 
  margin-bottom:-0.3125em; 
}
ul.chevron .count-number {display:none;}
ul.chevron .submenu > a:after, ul.chevron .sub-submenu > a:after,ul.chevron .aside-submenu > a:after, ul.chevron .aside-sub-submenu > a:after {
  content:"\f004";
  display:inline-block;
  font-family:mfg;
  font-size:0.7em;
  margin:0 0.625em;
}

.top-nav-admin.active-item a {background:none repeat scroll 0 0 #999;}
.top-nav-tech .active-item a {background:none repeat scroll 0 0 #999;}
.top-nav-station .active-item a {background:none repeat scroll 0 0 #999;}
.top-nav .active-item a {background:none repeat scroll 0 0 #999;}/*
.aside-nav > ul > li.active-item > a:link, .aside-nav > ul > li.active-item > a:visited {
  background:none repeat scroll 0 0 #f2f2f2;
  color:#000;

}*/

   
@media screen and (min-width:769px) {
.responsiveheading-s{

display:none;
}
.vendor_text{text-align:center;}
.vendor_text_team{text-align:right;}
  .aside-nav .count-number {
	 margin-left:-1.25em;	
	 float:right;	
  }
  .top-nav li:hover > ul {
	 display:block;
	 z-index:10;
  }  
.top-nav li:hover > ul ul {
    left:100%;
    margin:-2.5em 0;
    width:100%;
  } 
   .top-nav-station li:hover > ul {
	 display:block;
	 z-index:10;
  }  
.top-nav-station li:hover > ul ul {
    left:100%;
    margin:-2.5em 0;
    width:100%;
  }
.top-nav-tech li:hover > ul {
	 display:block;
	 z-index:10;
  }  
.top-nav-tech li:hover > ul ul {
    left:100%;
    margin:-2.5em 0;
    width:100%;
  }   
  .top-nav-admin li:hover > ul {
	 display:block;
	 z-index:10;
  }  
.top-nav-admin li:hover > ul ul {
    left:100%;
    margin:-2.5em 0;
    width:100%;
  }   
   .top-nav-2 li:hover > ul {
	 display:block;
	 z-index:10;
  }  
.top-nav-2 li:hover > ul ul {
    left:100%;
    margin:-2.5em 0;
    width:100%;
  } 
}
.nav-text {display:none;}
.aside-nav li li a, .aside-nav li li.active-item a, .aside-nav li li.aside-sub-submenu li a, 

.top-nav .active-item a, .top-nav li a, .aside-nav li a, .top-nav li ul li a, .top-nav li a,.top-nav li a, .top-nav li ul li a, .top-nav li ul li ul li a {
  transition:background 0.20s linear 0s;
  -o-transition:background 0.20s linear 0s;
  -ms-transition:background 0.20s linear 0s;
  -moz-transition:background 0.20s linear 0s;
  -webkit-transition:background 0.20s linear 0s;
}
.top-nav-2 .active-item a, .top-nav-2 li a, .aside-nav-2 li a, .top-nav-2 li ul li a, .top-nav-2 li a,.top-nav-2 li a, .top-nav-2 li ul li a, .top-nav-2 li ul li ul li a {
  transition:background 0.20s linear 0s;
  -o-transition:background 0.20s linear 0s;
  -ms-transition:background 0.20s linear 0s;
  -moz-transition:background 0.20s linear 0s;
  -webkit-transition:background 0.20s linear 0s;
}
.top-nav-tech.active-item a, .top-nav-tech  li a, .aside-nav li a, .top-nav-tech li ul li a, .top-nav-tech li a,.top-nav-tech li a, .top-nav-tech li ul li a, .top-nav-tech li ul li ul li a {
  transition:background 0.20s linear 0s;
  -o-transition:background 0.20s linear 0s;
  -ms-transition:background 0.20s linear 0s;
  -moz-transition:background 0.20s linear 0s;
  -webkit-transition:background 0.20s linear 0s;
}

.aside-nav ul {
 /* background:#e8e8e8; 
  background:#B0C4DE;
  background:#f60;
 background:linear-gradient(to left, #ffffff -10%, #006600 103%);*/
 background:#f60;
  padding:2px 0 0 0;
  
}

.aside-nav li {
  list-style:none outside none;
  cursor:pointer;
  
}

.aside-nav li a {
  display:block;
  padding:0.5em;
  border-bottom:1px solid #d2d2d2; 
  font-weight: bold;
  color:white;  
   text-transform: capitalize;
  
} 
.aside-nav ul li  ul li a {

  display:block;
  padding:0.5em;
  border-bottom:0px solid #d2d2d2; 
  font-weight: bold;
  color:black;  
   text-transform: capitalize;
   
  /* border-left:solid 3px #F60;
  border-right:solid 3px #F60; */
}
.aside-nav ul li  ul li ul li a {
  display:block;
  padding:0.5em;
  border-bottom:1px solid #d2d2d2; 
  font-weight: normal;
  color:white;
  margin-top:0px;  
   text-transform: capitalize;
  
  
  
  /* border-left:solid 3px #F60;
  border-right:solid 3px #F60; */
}
.aside-nav > ul > li:last-child a {border-bottom:0 none;}
.aside-nav li > ul {
  height:0;
  display:block;
  position:relative;
  background:white;
   overflow:hidden;
  
}

.aside-nav li ul  a{
  display:block;
  padding:0.5em;
  border-bottom:1px solid #d2d2d2; 
  font-weight: bold;
  color:white;
  background:#B0C4DE;/* District Background*/
}

.aside-nav li ul ul {
  border:0;
  background:#fff;
}
.aside-nav ul ul a {padding:0.5em 1.25em;}
.aside-nav .active-item a {background:none repeat scroll 0 0 #999;}
.aside-nav li li a:hover, .aside-nav li li.active-item > a, .aside-nav li li.aside-sub-submenu li a:hover {
  color:#000;
  background-color:#f2f2f2;
  font-size:1.0em;
 
}

/*.aside-nav ul  li a:hover {
background-color:#6495ED;
color:#000; 
font-size:1.0em;

 }*/
 .aside-nav ul  li ul li a {

 font-weight:normal;font-size:1em;color:#fff;

 }
 

 .aside-nav ul  li ul li :hover {
background-color:#f2f2f2;
color:#000; 
font-size:1.0em;

 }

.aside-nav li li a:hover:before, .aside-nav li li.active-item a:before {
  content:"\f006";
  display:inline-block;
  font-family:"mfg";
  font-size:0.6em;
  margin:0 0.625em 0 -1.0em;
  width:0.625em;
}
.aside-nav li li a:link{background:#51A5BA;}
.aside-nav li li a:active {background:#f2f2f2;color:#000;}

.aside-nav .show-aside-ul, .aside-nav .active-aside-item  {
  display:block;  
  height:auto;
}
.aside-nav .active-item a {background:none repeat scroll 0 0 #f2f2f2;}
.aside-nav > ul > li.active-item > a:link, .aside-nav > ul > li.active-item > a:visited {
  background:none repeat scroll 0 0 #f2f2f2;
  color:#000;

}
.padding {
  display:list-item;
  list-style:none outside none;
  padding:10px;
}
.met_margin {margin:0em 0em;}	
.margin {margin:0em 0em 0em -0.625em;}
.line {clear:left;}
.line .line {padding:0;}
.hide-l {display:none;}
.box {
  background:none repeat scroll 0 0 #fff;
  display:block;
  padding:0.5em;
  width:100%;
}
footer .footer-bottom {
	padding: 8px;
	text-align: center;
	background-color: #292F33;
}

footer .footer-bottom p {
	text-align: center;
}

footer .footer-bottom p, footer .footer-bottom p a {
	color: white;
}



.margin-bottom {margin-bottom:1.25em;}
.s-1, .s-2,.s-five,.s-3, .s-4, .s-5, .s-6, .s-7, .s-8, .s-9, .s-10, .s-11, .s-12, .m-1, .m-2, .m-five, .m-3, .m-4, .m-5, .m-6, .m-7, .m-8, .m-9, .m-10, .m-11, .m-12, .l-1, .l-2, .l-five, .l-3, .l-4, .l-5, .l-6, .l-7, .l-8, .l-9, .l-10, .l-11, .l-12 {
  float:left;
  position:relative;
}
.l-offset-1 {margin-left:8.3333%;}
.l-offset-2 {margin-left:16.6666%;}
.l-offset-five {margin-left:16.6666%;}
.l-offset-3 {margin-left:25%;}
.l-offset-4 {margin-left:33.3333%;}
.l-offset-5 {margin-left:41.6666%;}
.l-offset-6 {margin-left:50%;}
.l-offset-7 {margin-left:58.3333%;}
.l-offset-8 {margin-left:66.6666%;}
.l-offset-9 {margin-left:75%;}
.l-offset-10 {margin-left:83.3333%;}
.l-offset-11 {margin-left:91.6666%;}
.l-offset-12 {margin-left:100%;} 

.s-1 {width:8.3333%;}
.s-2 {width:16.6666%;}
.s-five {width:16.6666%;}
.s-3 {width:25%;}
.s-4 {width:33.3333%;}
.s-5 {width:41.6666%;}
.s-6 {width:50%;}
.s-7 {width:58.3333%;}
.s-8 {width:66.6666%;}
.s-9 {width:75%;}
.s-10 {width:83.3333%;}
.s-11 {width:91.6666%;}
.s-12 {width:100%;}
.margin > .s-1,.margin > .s-2,.margin > .s-five,.margin > .s-3,.margin > .s-4,.margin > .s-5,.margin > .s-6,.margin > .s-7,.margin > .s-8,.margin > .s-9,.margin > .s-10,.margin > .s-11,.margin > .s-12,
.margin > .m-1,.margin > .m-2,.margin > .m-five,.margin > .m-3,.margin > .m-4,.margin > .m-5,.margin > .m-6,.margin > .m-7,.margin > .m-8,.margin > .m-9,.margin > .m-10,.margin > .m-11,.margin > .m-12,
.margin > .l-1,.margin > .l-2,.margin > .l-five,.margin > .l-3,.margin > .l-4,.margin > .l-5,.margin > .l-6,.margin > .l-7,.margin > .l-8,.margin > .l-9,.margin > .l-10,.margin > .l-11,.margin > .l-12 {padding:0 0.625em;}
.m-1 {width:8.3333%;}
.m-2 {width:16.6666%;}
.m-five {width:20%;}
.m-3 {width:25%;}
.m-4 {width:33.3333%;}
.m-5 {width:41.6666%;}
.m-6 {width:50%;}
.m-7 {width:58.3333%;}
.m-8 {width:66.6666%;}
.m-9 {width:75%;}
.m-10 {width:83.3333%;}
.m-11 {width:91.6666%;}
.m-12 {width:100%;}
.l-1 {width:8.3333%;}
.l-2h {width:30.6666%;}
.l-2 {width:16.6666%;}
.l-five {width:20%;}
.l-3 {width:25%;}
.l-4 {width:50%;}
.l-4h {width:50%;}
.l-5 {width:41.6666%;}
.l-6 {width:50%;}
.l-7 {width:58.3333%;}
.l-8 {width:66.6666%;}
.l-9 {width:75%;}
.l-10 {width:65%;}
.l-11 {width:91.6666%;}
.l-12 {width:100%;}
.l-13 {width:100%;}
.right {float:right;} 
@media screen and (max-width:768px) {
.vendor_text{text-align:center;}
.vendor_text_team{text-align:right;}
.size-960 {max-width:768px;}
.size-1140 {max-width:768px;}
.hide-l {display:block;}
.hide-s {display:block;}
nav {
  display:block;
  cursor:pointer;
  line-height:3em;
}
.top-nav li a {background:none repeat scroll 0 0 #4a4a4a;}
.top-nav > ul {
  height:0;
  max-width:100%;
  overflow:hidden;
  position:relative;
  z-index:999;
}
.top-nav > ul.show-menu {height:auto;}
.top-nav ul ul {
  left:0;
  margin-top:0;
  position:relative;
  right:0;
} 
.top-nav li ul li a {min-width:100%;}
.top-nav li {
  float:none;
  list-style:none outside none;
  padding:0;
}
.top-nav li a {
  border-top:1px solid #333;
  color:#fff;
  display:block;
  padding:0.625em;
  text-decoration:none;
}
.top-nav li ul li a {border-top:1px solid #878787;}
.top-nav li ul li ul li a {border-top:1px solid #989898;}
.top-nav li a:hover {
  background:none repeat scroll 0 0 #8b8b8b;
  color:#fff;
  
}
.top-nav li ul,.top-nav li ul li ul {
  display:block;  
  overflow:hidden; 
  height:0;   
} 
.top-nav > ul ul.show-ul {
  display:block;
  height:auto;  
}
.top-nav li ul li a {
  background:none repeat scroll 0 0 #9d9d9d;
  padding:0.625em;
}
.top-nav li ul li ul li a {
  background:none repeat scroll 0 0 #d7d7d7;
  color:#222;
   
}
.top-nav-2 li a {background:none repeat scroll 0 0 #4a4a4a;}
.top-nav-2 > ul {
  height:0;
  max-width:100%;
  overflow:hidden;
  position:relative;
  z-index:999;
}
.top-nav-2 > ul.show-menu {height:auto;}
.top-nav-2 ul ul {
  left:0;
  margin-top:0;
  position:relative;
  right:0;
} 
.top-nav-2 li ul li a {min-width:100%;}
.top-nav-2 li {
  float:none;
  list-style:none outside none;
  padding:0;
}
.top-nav-2 li a {
  border-top:1px solid #333;
  color:#fff;
  display:block;
  padding:0.625em;
  text-decoration:none;
}
.top-nav-2 li ul li a {border-top:1px solid #878787;}
.top-nav-2 li ul li ul li a {border-top:1px solid #989898;}
.top-nav-2 li a:hover {
  background:none repeat scroll 0 0 #8b8b8b;
  color:#fff;
}
.top-nav-2 li ul,.top-nav-2 li ul li ul {
  display:block;  
  overflow:hidden; 
  height:0;   
} 
.top-nav-2 > ul ul.show-ul {
  display:block;
  height:auto;  
}
.top-nav-2 li ul li a {
  background:none repeat scroll 0 0 #9d9d9d;
  padding:0.625em;
}
.top-nav-2 li ul li ul li a {
  background:none repeat scroll 0 0 #d7d7d7;
  color:#222;
}
.nav-text {
  color:#fff;
  display:block;
  font-size:1.2em;
  line-height:3em;
  margin-right:0.625em;
  max-width:100%;
  text-align:right;
  vertical-align:middle;
}
.nav-text:after {
  content:"\f008";
  font-family:"mfg";
  font-size:1.1em;
  margin-left:0.5em;
  text-align:right;
}
.l-offset-1,.l-offset-2,.l-offset-five,.l-offset-3,.l-offset-4,.l-offset-5,.l-offset-6,.l-offset-7,.l-offset-8,.l-offset-9,.l-offset-10,.l-offset-11,.l-offset-12{margin-left:0;}
.m-offset-1 {margin-left:8.3333%;}
.m-offset-2 {margin-left:16.6666%;}
.m-offset-five {margin-left:16.6666%;}
.m-offset-3 {margin-left:25%;}
.m-offset-4 {margin-left:33.3333%;}
.m-offset-5 {margin-left:41.6666%;}
.m-offset-6 {margin-left:50%;}
.m-offset-7 {margin-left:58.3333%;}
.m-offset-8 {margin-left:66.6666%;}
.m-offset-9 {margin-left:75%;}
.m-offset-10 {margin-left:83.3333%;}
.m-offset-11 {margin-left:91.6666%;}
.m-offset-12 {margin-left:100%;} 
.l-1 {width:8.3333%;}
.l-2 {width:16.6666%;}
.l-five {width:20%;}
.l-3 {width:25%;}
.l-4 {width:33.3333%;}
.l-5 {width:41.6666%;}
.l-6 {width:50%;}
.l-7 {width:58.3333%;}
.l-8 {width:66.6666%;}
.l-9 {width:75%;}
.l-10 {width:83.3333%;}
.l-11 {width:91.6666%;}
.l-12 {width:100%;}
.s-1 {width:8.3333%;}
.s-2 {width:16.6666%;}
.s-five {width:20%;}
.s-3 {width:25%;}
.s-4 {width:33.3333%;}
.s-5 {width:41.6666%;}
.s-6 {width:50%;}
.s-7 {width:58.3333%;}
.s-8 {width:66.6666%;}
.s-9 {width:75%;}
.s-10 {width:83.3333%;}
.s-11 {width:91.6666%;}
.s-12 {width:100%}
.m-1 {width:8.3333%;}
.m-2 {width:16.6666%;}
.m-five {width:20%;}
.m-3 {width:25%;}
.m-4 {width:33.3333%;}
.m-5 {width:41.6666%;}
.m-6 {width:50%;}
.m-7 {width:58.3333%;}
.m-8 {width:66.6666%;}
.m-9 {width:75%;}
.m-10 {width:83.3333%;}
.m-11 {width:91.6666%;}
.m-12 {width:100%}
}
@media screen and (max-width:480px) {

.size-960 {max-width:480px;}
.size-1140 {max-width:480px;}
.hide-l {display:block;}
.hide-m {display:block;}
.hide-s {display:none;}
.vendor_text{text-align:center;}
.vendor_text_team{text-align:center;}
.responsiveheading-s{display:block;}
.responsiveheading-m{display:none;}

h1 {font-size:1.2em;}
img {
  border:0;
  display:inline-block;
  height:auto;
  max-width:60px;
  margin-left:10px;
  
}
.box {
  background:none repeat scroll 0 0 #fff;
  display:block;
  padding:0.5em;
  width:100%;
  text-align:center;
}

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

.count-number {margin-right:-1.25em;} 
.l-offset-1,.l-offset-2,.l-offset-five,.l-offset-3,.l-offset-4,.l-offset-5,.l-offset-6,.l-offset-7,.l-offset-8,.l-offset-9,.l-offset-10,.l-offset-11,.l-offset-12,
.m-offset-1,.m-offset-2,.m-offset-five,.m-offset-3,.m-offset-4,.m-offset-5,.m-offset-6,.m-offset-7,.m-offset-8,.m-offset-9,.m-offset-10,.m-offset-11,.m-offset-12 {margin-left:0;}
.s-offset-1 {margin-left:8.3333%;}
.s-offset-2 {margin-left:16.6666%;}
.s-offset-five {margin-left:16.6666%;}
.s-offset-3 {margin-left:25%;}
.s-offset-4 {margin-left:33.3333%;}
.s-offset-5 {margin-left:41.6666%;}
.s-offset-6 {margin-left:50%;}
.s-offset-7 {margin-left:58.3333%;}
.s-offset-8 {margin-left:66.6666%;}
.s-offset-9 {margin-left:75%;}
.s-offset-10 {margin-left:83.3333%;}
.s-offset-11 {margin-left:91.6666%;}
.s-offset-12 {margin-left:100%;} 
.l-1 {width:8.3333%;}
.l-2 {width:16.6666%;}
.l-five {width:20%;}
.l-3 {width:25%;}
.l-4 {width:33.3333%;}
.l-4 {width:33.3333%;}
.l-5 {width:41.6666%;}
.l-6 {width:50%;}
.l-7 {width:58.3333%;}
.l-8 {width:66.6666%;}
.l-9 {width:75%;}
.l-10 {width:83.3333%;}
.l-11 {width:91.6666%;}
.l-12 {width:100%;}
.m-1 {width:8.3333%;}
.m-2 {width:16.6666%;}
.m-five {width:20%;}
.m-3 {width:25%;}
.m-4 {width:33.3333%;}
.m-5 {width:41.6666%;}

.m-6 {width:50%;}
.m-7 {width:58.3333%;}
.m-8 {width:66.6666%;}
.m-9 {width:75%;}
.m-10 {width:83.3333%;}
.m-11 {width:91.6666%;}
.m-12 {width:100%}
.s-1 {width:8.3333%;}
.s-2 {width:16.6666%;}
.s-five {width:20%;}
.s-3 {width:25%;}
.s-4 {width:33.3333%;}
.s-5 {width:41.6666%;}
.s-6 {width:50%;}
.s-7 {width:58.3333%;}
.s-8 {width:66.6666%;}
.s-9 {width:75%;}
.s-10 {width:83.3333%;}
.s-11 {width:91.6666%;}
.s-12 {width:100%}
} 
 
.center {
  float:none;
  margin:0 auto;
  display:block;
}

.scroll-left {
 height: 50px;	
 overflow: hidden;
 position: relative;
 color:#000000;
background-color:#FF0000;
}
.scroll-left p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 10s linear infinite;
 -webkit-animation: scroll-left 10s linear infinite;
 animation: scroll-left 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}