/* container */
#metmaincontainer{
  width: 100%;
  margin: 20px auto 0;
  padding: 0 60px;
}
#metmaincontainerborderless{
  width: 100%;
  margin: 0px auto 0;
  padding: 0 10px;
}
.metcontainer {
  width: 100%;
}

.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 0px
}

.table>thead>tr>th {
  padding-top: 13px;
  padding-bottom: 13px;
}

/* lang */
.langbut {
  position: absolute;
  top: 17px;
  right: 20px;
}
.langico.selected {
  border-bottom: 2px solid #104b76;
}


/* topbar */
.topbar {
  margin: 10px 70px;
  padding: 0px 0px 5px;
}

/* navbar */
.navbar {
  min-height: 50px;
  margin-bottom: 0px;
}
/*
.navbar .container {
  margin-left: 30px;
  margin-right: 30px;
}
*/

#bs-example-navbar-collapse-animations{
  margin-left: 30px;
}
#nav-fixed-logo-right {
  margin-right: 45px;
}

/* marquee */ 
.container-custom-marquee {
  width: 100%;
  padding: 0 60px 0 0;
  display: block;
  position: relative;
  clear: both;
}
.marquee-container {
	overflow: hidden;
	box-sizing: border-box;
  padding-top: 8px;
}
.marquee-container span {
  margin-right: 80px;
}


.marquee-container, .container-custom-marquee .row, .container-custom-marquee [class^="col-"] {
  height: 30px;
}

.marquee-title {
  /* background: url(../img/pattern2.svg) repeat scroll 50% bottom, linear-gradient(-45deg, #673C8E, #236295, #9869FF) repeat scroll 0 0 rgba(0, 0, 0, 0);*/
  background-color: rgb(12, 106, 150);
  overflow: hidden;
  padding-top: 4px;
  padding-left: 80px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
}

.bg-marquee-title {
  background-color: rgb(33, 156, 160);
  color: #fff;
}

.bg-marquee-text {
  background-color: rgb(192, 231, 229); /*#3498db;/* #63C3FF; */
  color: #505050;/*#505050;*/
}

/* banner slider */
.metbannerslider {
    height: 325px !important;
}

.premier-height {
  height: 290px !important;
}


/* fotorama */
.met-fotorama-caption{
  padding: 10px 20px;
  margin-bottom: 10px;
  text-align: center;
}



/* eq */
.metalert p {
  padding: 0;
  margin: 0;
}
.eqinfo{
  color: #474b40; 
  font-size: 40px !important; 
  line-height: 45px !important; 
  font-weight: 600 !important; 
  margin-top: 0px !important; 
  padding-top: 0px !important; 
  padding-bottom:0px !important;
  margin-bottom:10px !important;
} 
.eqsubtitle{
  color: teal; 
  font-size: 18px !important; 
  line-height: 20px !important;
  font-weight: 600 !important; 
  padding-top: 0px !important; 
  margin-top:0px !important; 
  padding-bottom:0px !important;
  margin-bottom:14px !important;
}

.eqtime{
  color: #6f7171; 
  font-size: 14px !important; 
  line-height: 14px !important;
  font-weight: 600 !important; 
  padding-top: 0px !important; 
  margin-top:0px !important; 
  padding-bottom:2px !important;
}

.eqtimeago{
  color: #818383; 
  font-size: 12px !important; 
  padding-top: 0px !important; 
  margin-top:0px !important; 
  padding-bottom:0px !important;
  margin-bottom:20px !important;
}

/* news */
.news-content {
  height: 110px; 
}

/* weather spin */
.wscontainer {
  width: 100%; background-color: transparent !important; 
  height: 134px !important;
  display: block;
  overflow-y: hidden !important;
  border-bottom: 4px solid #58b3be;
}
.weatherspin{
  width: 100%;
  display: block;
  min-height: 134px;
  padding: 10px 50px 0;
  background-color:transparent !important;
  background-image: url('../../content/photo/rain-316579_1280.jpg');
  background-repeat: repeat-x;
  background-size: cover;
  color: #fff;
  margin: 0 auto;
}
.weatherspin span {
  font-size: 12px;
}

/* panel */
.metopanel {
    display: block;
    position: relative;
    background-color: #fff;
    border-collapse: collapse;
    box-sizing: border-box;
    margin-bottom: 25px;
}
.metopanel>.content, .metopanel>.heading {
  display: block;
  position: relative;
}
.metopanel>.heading, .metopanel .tile {
  -moz-user-select: none;
  -webkit-user-select: none;
}
.metopanel>.heading {
  padding: .755rem 5.125rem;
  color: #fff;
  background-color: #1ba1e2;
  cursor: default;
  vertical-align: middle;
  z-index: 2;
  height: 3.625rem;
  box-shadow: -1px 6px 6px -6px rgba(0,0,0,.35);
  -ms-user-select: none;
  user-select: none;
  border-collapse: collapse;
}
.metopanel>.heading>.icon {
  position: absolute;
  background-color: #1b6eae;
  top: 0;
  left: 0;
  bottom: 0;
  vertical-align: middle;
  height: 3.625rem;
  width: 4.125rem;
  text-align: center;
  padding: .625rem;
  border-collapse: collapse;
  font-size: 20px;
}
.metopanel>.content {
  background-color: #e8f1f4;
  z-index: 1;
  border-collapse: collapse;
  padding: 14px 14px;
  font-size: 12px;
  overflow-y: scroll;
}

.met-panel:after,.met-panel:before{
  content:"";
  display:table;
  clear:both;
}
.met-panel{
  padding:10px 16px;
  margin-top:16px;
  margin-bottom:16px;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05)
}
.met-panel i {
  font-size: 20px;
  margin-right: 4px;
}

/* ws-panel */
.ws-panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  /*
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
  box-shadow: 0 1px 1px rgba(0,0,0,.05);*/
}
.ws-bg-color {
  color: #fff !important;
  background-color: transparent;
  border-color: transparent;
}

/* panel with tab */
.panel.with-nav-tabs .panel-heading{
  padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs{
border-bottom: none;
}
.panel.with-nav-tabs .nav-justified{
margin-bottom: -1px;
}
/********************************************************************/
/*** PANEL DEFAULT ***/
.panel.with-nav-tabs {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: unset;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.with-nav-tabs.panel-default {
  border-color: #e8f1f4;
}

.with-nav-tabs.panel-default>.panel-heading {
  color: #333;
  background-color: #58b3be;
  border-color: #58b3be;
  border-top-left-radius: unset;
  border-top-right-radius: unset;
}

.with-nav-tabs.panel-default .nav-tabs > li > a,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
  color: #fff;
}
.with-nav-tabs.panel-default .nav-tabs > .open > a,
.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
  color: #fff;
background-color: #58be96;
border-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.active > a,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
color: #555;
background-color: #fff;
border-color: #ddd;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
  background-color: #58b3be;
  border-color: #58be96;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
  color: #fff;   
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
  background-color: #58be96;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
  color: #fff;
  background-color: #58be96;
}

.metopanel>.standard-height {
  height: 390px !important;
}
.metopanel>.premier-height, .panel.with-nav-tabs > .tab-content.premier-height {
  height: 290px !important;
}

.panel.with-nav-tabs > .panel-body > .standard-height  {
  height: 346px !important; /* -44px from metopanel>.standard-height */
}

.metopanel>.smaller-height {
  height: 310px !important;
  overflow: hidden;
}
.panel.with-nav-tabs > .panel-body > .smaller-height  {
  height: 266px !important; /* -44px from metopanel>.smaller-height */
  overflow: hidden;
}

.metbg {
  background: #e8f1f4;
}

.no-scroller {
  overflow: hidden !important;
}

.metopanel > .auto-height, .panel.with-nav-tabs > .panel-body > .auto-height {
  height: auto !important;
}

/*
@import url(https://fonts.googleapis.com/css?family=Dosis:200,400,500,600);
*/
.compass {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
  position: relative;
  font-family: 'Dosis';
  color: #555;
  text-shadow: 1px 1px 1px white;
}
.compass:before {
  font-weight: bold;
  position: absolute;
  text-align: center;
  width: 100%;
  content: "N";
  font-size: 14px;
  top: -2px;
}
.compass .direction {
  height: 100%;
  width: 100%;
  display: block;
  background: #f2f6f5;
  background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
  background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
  background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
  border-radius: 100%;
}
.compass .direction p {
  text-align: center;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 80px;
  display: block;
  margin-top: -45px;
  font-size: 28px;
  font-weight: bold;
}
.compass .direction p span {
  display: block;
  line-height: normal;
  margin-top: -24px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: normal;
}
.compass .arrow {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
}
.compass .arrow:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid red;
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -5px;
  z-index: 99;
}
.compass .arrow.nne {
  transform: rotate(22.5deg);
}
.compass .arrow.ne {
  transform: rotate(45deg);
}
.compass .arrow.ene {
  transform: rotate(67.5deg);
}
.compass .arrow.e {
  transform: rotate(90deg);
}
.compass .arrow.ese {
  transform: rotate(112.5deg);
}
.compass .arrow.se {
  transform: rotate(135deg);
}
.compass .arrow.sse {
  transform: rotate(157.5deg);
}
.compass .arrow.s {
  transform: rotate(180deg);
}
.compass .arrow.ssw {
  transform: rotate(202.5deg);
}
.compass .arrow.sw {
  transform: rotate(-135deg);
}
.compass .arrow.wsw {
  transform: rotate(-114.5deg);
}
.compass .arrow.w {
  transform: rotate(-90deg);
}
.compass .arrow.wnw {
  transform: rotate(-69.5deg);
}
.compass .arrow.nw {
  transform: rotate(-45deg);
}
.compass .arrow.nnw {
  transform: rotate(-24.5deg);
}


/* weather updates */
.metwu {
  color: #fff;
  text-align: center;
  /*font-weight: 300;*/
  font-size: 12px !important;
}

.metwu .inner{
  width: 95%;
  height: 99%;
  min-width: 100px;
  min-height: 200px;
  display: block;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  /*
  border-color: #0cf;
  background: rgba(190, 199, 198, 0.05);
  background: linear-gradient(120deg, #6ac8c1 0%, #a0d07d 100%);

  background: linear-gradient(120deg, rgba(106,200,193, 0.45) 0%, rgba(160,208,125,0.45) 100%);
  
  border-radius: 5px;
    */
}

.metwu .metkola {
  display: none;
}

.metwu .metkola.active {
  display: block;
}

.metwu .arrow {
  color: #337ab7;
  text-align: center;
  font-weight: 700;
  font-size: 32px !important;
  cursor: pointer;
}

.metwu .arrow_left {
  position: absolute;
  top: 42%;
  left: 5px;
}

.metwu .arrow_right {
  position: absolute;
  top: 42%;
  right: 5px;
}

.metwu .inner .title{
  color: #337ab7;
  text-align: center;
  font-weight: 700;
  font-size: 22px !important;
  margin-bottom: 10px;
  padding: 0;
  cursor: pointer;
}

.metwu .inner .title i{
  top: -5px;
}

.metbar {
  background: transparent;
  /*background: #4bc5cf;*/
  color: #333;
  min-height: 34px;
  width: 100%;
  /*border: 1px dashed #fff;*/
  border-bottom: 1px dashed #ccc;
  margin-bottom: 6px;
  margin-right: 0 !important;
  margin-left: 0 !important;
  box-sizing: border-box;
}

.metbar-maru {
  background: -moz-linear-gradient(120deg, #c5279e 0%, #b7dd2c 80%);
  background: -webkit-linear-gradient(120deg, #c5279e 0%, #b7dd2c 80%);
  background: -o-linear-gradient(120deg, #c5279e 0%, #b7dd2c 80%);
  background: -ms-linear-gradient(120deg, #c5279e 0%, #b7dd2c 80%);
  background: linear-gradient(120deg, #c5279e 0%, #b7dd2c 100%);
}

.metbar-aqua {
    background: -moz-linear-gradient(120deg, #4bc5cf 0%, #80c450 80%);
    background: -webkit-linear-gradient(120deg, #4bc5cf 0%, #80c450 80%);
    background: -o-linear-gradient(120deg, #4bc5cf 0%, #80c450 80%);
    background: -ms-linear-gradient(120deg, #4bc5cf 0%, #80c450 80%);
    background: linear-gradient(120deg, #4bc5cf 0%, #80c450 100%);
}

.metbar-green {
  background: -moz-linear-gradient(120deg, #6ac8c1 0%, #80c450 100%);
  background: -webkit-linear-gradient(120deg, #6ac8c1 0%, #a0d07d 100%);
  background: -o-linear-gradient(120deg, #6ac8c1 0%, #a0d07d 100%);
  background: -ms-linear-gradient(120deg, #6ac8c1 0%, #a0d07d 100%);
  background: linear-gradient(120deg, #6ac8c1 0%, #a0d07d 100%);
}

.met5l {
  min-width: 48%;
  max-width: 48%;
  padding: 7px 3%;
  padding-left: 4%;
  float: left;
  display: inline;
  background: transparent;
  text-align: right;
}

.met2m {
  max-width: 20%;
  padding: 7px 4%;
  float: left;
  vertical-align: middle;
  display: inline;
  background: transparent;
  text-align: center;
}

.met5r {
  max-width: 40%;
  padding: 7px;
  padding-right: 5%;
  float: left;
  display: inline;
  text-align: right;
  background: transparent;
  text-align: left;
}

.met6l {
  min-width: 50%;
  max-width: 50%;
  padding: 3% 4%;
  float: left;
  display: inline;
  text-align: right;
  background: transparent;
}
.met6r {
  min-width: 50%;
  max-width: 50%;
  padding: 3% 4%;
  float: right;
  display: inline;
  text-align: left;
  background: transparent;
}

.metleft {
  min-width: 7%;
  max-width: 7%;
  padding: 2%;
  padding-left: 4%;
  float: left;
  display: inline;
  background: transparent;
}

.metmiddle {
  max-width: 34%;
  padding: 2%;
  float: left;
  vertical-align: middle;
  display: inline;
  background: transparent;
}

.metright {
  max-width: 21%;
  padding: 2%;
  padding-right: 5%;
  float: right;
  display: inline;
  text-align: right;
  background: transparent;
}

.metnumber {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  width: 72px;
  height: 72px;
  padding: 7px;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font: 32px 'Dosis';
}


/* emboss panel */

.metbox {
  position: relative;
  max-width: 450px;
  max-height: 750px;
  padding: 3%;
  box-shadow: 0 0 50px white;
  overflow-y: auto;
  background: #4bc5cf;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#4bc5cf, #4b79cf);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#4bc5cf, #4b79cf);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#4bc5cf, #4b79cf);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#4bc5cf, #4b79cf);
  /* Standard syntax */
}
.metbox .location-date {
  text-align: right;
  margin-right: 17px;
}
.metbox .location-date #userLoc {
  font-size: 1.5em;
  margin: 0;
  color: #555aca;
}
.metbox .location-date #today {
  font-size: 1em;
  margin: 0 0 30px;
  color: #104b76;
}
.metbox .main-info {
  color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px white;
  width: 90%;
  margin: auto;
  padding: 10px;
}
.metbox .main-info .main {
  text-align: center;
  border-right: 3px solid white;
}
.metbox .main-info .main h3 {
  text-transform: uppercase;
}
.metbox .main-info .main .icon {
  font-size: 5em;
}
.metbox .main-info .main p {
  font-size: 2em;
  margin-top: -15px;
}
.metbox .main-info .main p span {
  color: #104b76;
  cursor: pointer;
}
.metbox .main-info .secondary {
  padding: 28px 0 10px 25px;
}
.metbox .main-info .secondary .icon {
  font-size: 1.5em;
  display: inline-block;
}
.metbox .main-info .secondary p {
  display: inline;
  margin-left: 20px;
  position: relative;
  top: -5px;
}
.metbox .main-info .secondary .humidity {
  margin-top: 20px;
}
.metbox .main-info .secondary .pressure {
  margin-top: 20px;
}
.metbox .btn-primary {
  position: relative;
  cursor: pointer;
  left: 50%;
  transform: translate(-50%);
  margin: 50px 0 20px;
  color: #555aca;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 7px;
  border-color: rgba(16, 75, 118, 0.5);
}
.metbox .btn-primary:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 3px rgba(85, 90, 202, 0.5);
}
.metbox .details-box {
  display: none;
  color: white;
  width: 90%;
  padding: 20px 5px;
  margin: auto;
  box-shadow: 0 0 1px white;
  border-radius: 7px;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}
.metbox .details-box p {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  margin: 0;
}
.metbox .details-box hr {
  width: 80%;
  margin-top: 10px;
  border: 0;
  height: 3px;
  background-image: linear-gradient(to right, rgba(75, 148, 207, 0.7), white, rgba(75, 148, 207, 0.7));
}
.metbox .details-box dt, .metbox .details-box dd {
  text-align: right;
  margin-right: 12px;
}
.metbox .details-box dd {
  margin-right: 20px;
}

/*
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}
*/

@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100;
  }
}
@keyframes hide {
  0% {
    opacity: 100;
  }
  100% {
    opacity: 0;
  }
}
@media (max-width: 351px) {
  .box .location-date {
    margin-right: 15px;
  }
  .box .main-info .secondary {
    padding: 45px 0 10px 25px;
  }
  .box .main-info .secondary .icon {
    font-size: 1em;
    margin-left: -10px;
  }
  .box .main-info .secondary p {
    top: -3px;
  }
}



/* list */
.metweb ul {
  list-style: none;
  padding: 0;
  margin-top: 0px;
  margin-left: 0px;
  -webkit-padding-start: 0px;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}

.metweb ul li {
  padding: 0;
  margin: 0;
  text-align: left;
  margin-bottom: 12px;
  padding-bottom: 3px;
  padding-left: 1.3em;
}

.metweb ul li:before {
  content: "\f105"; /* FontAwesome Unicode */
  font-family: 'FontAwesome';
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
  color: #337ab7;
}

.metweb ul li a {
  font-weight: bold;
}

.metweb ul li a:hover {
  text-decoration: none;
}

/* misc tab */
.misctab ul {
  list-style: none;
  padding: 0;
  margin-top: 0px;
  margin-left: 0px;
  -webkit-padding-start: 0px;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}

.misctab ul li {
  padding: 0;
  margin: 0;
  text-align: left;
  margin-bottom: 14px;
  padding-bottom: 6px;
  padding-left: 1.3em;
  border-bottom: 1px solid #ccc;
}

.misctab ul li:before {
  content: "\f105"; /* FontAwesome Unicode */
  font-family: 'FontAwesome';
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
  color: #337ab7;
}

.misctab ul li a {
  font-weight: bold;
}

.misctab ul li a:hover {
  text-decoration: none;
}

.misctab p {
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid #ccc;
}


ul.met-border-bottom li {
  border-bottom: 1px solid #ccc !important;
}

/* background */
.bgw-fair {
  /*background: url('../../content/photo/fair.jpeg') no-repeat center center fixed;*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* colors */

.bg-blue {
  color: #fff !important;
  background-color: #03a9f4 !important;
  border-color: #0288d1 !important;
}
.bg-blue > .icon {
  background-color: #0288d1 !important;
}

.bg-orange {
  color: #fff !important;
  background-color: #ef6c00 !important;
  border-color: #e65100 !important;
}
.bg-orange > .icon {
  background-color: #e65100 !important;
}

.bg-yellow {
  color: #fff !important;
  background-color: #fdd835 !important;
  border-color: #fbc02d !important;
}
.bg-yellow > .icon {
  background-color: #fbc02d !important;
}

.bg-red {
  color: #fff !important;
  background-color: #e53935 !important;
  border-color: #b71c1c !important;
}
.bg-red > .icon {
  background-color: #b71c1c !important;
}

.bg-green {
  color: #fff !important;
  background-color: #43a047 !important;
  border-color: #2e7d32 !important;
}
.bg-green > .icon {
  background-color: #2e7d32 !important;
}

.bg-purple {
  color: #fff !important;
  background-color: #5e35b1 !important;
  border-color: #4527a0 !important;
}
.bg-purple > .icon {
  background-color: #4527a0 !important;
}

.bg-cyan {
  color: #fff !important;
  background-color: #18ffff !important;
  border-color: #00b8d4 !important;
}
.bg-cyan > .icon {
  background-color: #00b8d4 !important;
}

.bg-pink {
  color: #fff !important;
  background-color: #d81b60 !important;
  border-color: #ad1457 !important;
}
.bg-pink > .icon {
  background-color: #ad1457 !important;
}

.bg-teal {
  color: #fff !important;
  background-color: #26a69a !important;
  border-color: #00695c !important;
}
.bg-teal > .icon {
  background-color: #00695c !important;
}

.bg-lightblue {
  color: #fff !important;
  background-color: #29b6f6 !important;
  border-color: #039be5 !important;
}
.bg-lightblue > .icon {
  background-color: #039be5 !important;
}

/* spacer */
.padding-top-0 {
  padding-top: 0px !important;
}
.padding-top-5 {
  padding-top: 5px !important;
}
.padding-top-10 {
  padding-top: 10px !important;
}
.padding-top-20 {
  padding-top: 20px !important;
}
.padding-top-30 {
  padding-top: 40px !important;
}
.padding-top-40 {
  padding-top: 40px !important;
}
.padding-top-50 {
  padding-top: 50px !important;
}
.padding-top-70 {
  padding-top: 70px !important;
}


.padding-right-0 {
  padding-right: 0px !important;
}

.padding-bottom-0 {
  padding-bottom: 0px !important;
}
.padding-bottom-5 {
  padding-bottom: 5px !important;
}
.padding-bottom-10 {
  padding-bottom: 10px !important;
}
.padding-bottom-20 {
  padding-bottom: 20px !important;
}
.padding-bottom-30 {
  padding-bottom: 40px !important;
}
.padding-bottom-40 {
  padding-bottom: 40px !important;
}
.padding-bottom-50 {
  padding-bottom: 50px !important;
}
.padding-bottom-70 {
  padding-bottom: 70px !important;
}
.padding-bottom-100 {
  padding-bottom: 100px !important;
}

.padding-left-0 {
  padding-left: 0px !important;
}


.margin-top-n25 {
  margin-top: -20px !important;
}
.margin-top-0 {
  margin-top: 0px !important;
}
.margin-top-5 {
  margin-top: 5px !important;
}
.margin-top-10 {
  margin-top: 10px !important;
}
.margin-top-15 {
  margin-top: 15px !important;
}
.margin-top-20 {
  margin-top: 20px !important;
}
.margin-top-25 {
  margin-top: 25px !important;
}
.margin-top-30 {
  margin-top: 30px !important;
}
.margin-top-35 {
  margin-top: 35px !important;
}
.margin-top-40 {
  margin-top: 40px !important;
}
.margin-top-50 {
  margin-top: 50px !important;
}
.margin-top-70 {
  margin-top: 70px !important;
}

.margin-bottom-n25 {
  margin-bottom: -20px !important;
}
.margin-bottom-0 {
  margin-bottom: 0px !important;
}
.margin-bottom-5 {
  margin-bottom: 5px !important;
}
.margin-bottom-10 {
  margin-bottom: 10px !important;
}
.margin-bottom-15 {
  margin-bottom: 15px !important;
}
.margin-bottom-20 {
  margin-bottom: 20px !important;
}
.margin-bottom-25 {
  margin-bottom: 25px !important;
}
.margin-bottom-30 {
  margin-bottom: 30px !important;
}
.margin-bottom-40 {
  margin-bottom: 40px !important;
}
.margin-bottom-50 {
  margin-bottom: 50px !important;
}
.margin-bottom-70 {
  margin-bottom: 70px !important;
}

.margin-left-0 {
  margin-left: 0px !important;
}


.margin-right-0 {
  margin-right: 0px !important;
}

/* bordering */
.no-border {
  border: 0 !important;
}

.footnote {
  color: #5e5e5e;
  font-weight: 300;
  font-size: 11px;
}

/* footer */

footer{
  width:100%;
  font-size:80%;
  line-height:1.8em;
  color:#666;
  clear:both;
  margin-top: 40px;
}
.footer-borderless {
  margin-top: 0px !important;
}
#footer-collapse{
  margin-left:-25px;
  margin-right:20px;
  vertical-align:top;
  font-size:200%;
  display:inline-block
}
#footer-collapse a,#footer-collapse a:visited{
  color:#888
}
#footer-collapse a:hover{
  color:#333;
  text-decoration:none
}
footer.collapsed #footer-links{
  display:none
}
footer.collapsed #footer-bottom{
  background-color:#f7f7f7;
  border-top:2px solid #e1e1e1
}
footer.collapsed #footer-collapse{
  display:inline-block
}
.no-js footer.collapsed #footer-collapse,.no-js #footer-collapse{
  display:none
}
.no-js footer.collapsed #footer-links{
  display:block
}
.no-js footer.collapsed #footer-bottom{
  background-color:#e1e1e1
}
#footer-links{
  padding:40px 0;
  background-color:#f7f7f7
}
#footer-bottom{
  background-color:#e1e1e1;
  color:#333;
  padding:25px 40px 20px 40px
}
footer div{
  vertical-align:top
}
#footer-contact{
  padding:0 20px 20px 20px;
  display:table;
  max-width:200px
}
#footer-contact-icon{
  display:table-cell;
  padding-top:5px;
  padding-right:20px
}
#footer-contact-numbers{
  display:table-cell;
  padding-top:0
}
#footer-contact-numbers strong{
  font-size: 14px;
}
#footer-contact-copyright{
  /*display:none;*/
  padding-left: 20px;
}
footer ul li{
  padding:1px 0;
  margin:0;
  list-style-type:none;
  font-size:100%;
  line-height:2
}
footer ul{
  padding:0;
  margin:0;
  list-style:none
}
footer p{
  margin:0;
  padding-bottom:5px;
  line-height:1.5;
  font-size:95%
}
footer .top{
  font-weight:600;
  text-transform:uppercase;
  font-size:120%;
  padding-bottom:5px
}
footer .links a,footer .links a:visited{
  color:#717171;
  text-decoration:none
}
footer .links a:hover{
  color:#555;
  text-decoration:underline
}
footer .links li.top a,footer .links li.top a:visited{
  color:#555;
  text-decoration:none
}
footer .links{
  display:inline-block;
  width:19%;
  padding-left:60px
}
#footer-nav{
  display:none;
  padding:0 20px 20px 20px
}
#footer-logo{
  margin:45px 15px 10px 20px
}
.footer-legal-links{
  font-size:90%;
}
.footer-legal-links a{
  color:#555
}
#footer-langs{
  margin:25px 15px 0 60px
}
#footer-langs a,#footer-langs a:visited{
  color:#717171
}
#footer-langs span.icon-earth{
  font-size:200%;
  vertical-align:middle;
  padding-right:10px
}
.footer-contact{
  display:inline-block
}
footer .social-icons{
  padding-right: 20px; 
  float:right;
  font-size:140%;
  padding-top:0px;
  width:25%;
  text-align:right
}
footer .social-icons span{
  color:#888
}
footer .social-icons a:hover{
  text-decoration:none
}

.social-icons{
  float:right
}
.social-icons span{
  display:inline-block;
  margin-left:2px;
  font-size:165%;
  color:#84a6cb;
  -webkit-transition:all 200ms ease-in-out 0s;
  -moz-transition:all 200ms ease-in-out 0s;
  -ms-transition:all 200ms ease-in-out 0s;
  -o-transition:all 200ms ease-in-out 0s;
  transition:all 200ms ease-in-out 0s
}
/* Style all font awesome icons */
.fa-social {
  padding: 5px 10px;
  font-size: 20px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
}

/* Add a hover effect if you want */
.fa-social:hover {
  opacity: 0.7;
  color: #fff;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}

/* Instagram */
.fa-instagram {
  background: rgb(218, 65, 73);
  color: white;
}

/* font size */
.marquee-container-st {
  padding-top: 8px;
}

.marquee-content {
  font-size: 12px;
}

.ws-temp, .ws-text {
  font-size: 12px;
}

.navbar-default .navbar-nav>li>a {
  font-size: 12px;
}

/* misc */
.fixed-width {
  min-width: 280px !important; 
}

/* to top */
#toTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 30px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 9999; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: teal; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
}

#toTop:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}


@media only screen and (max-width:920px){
  footer ul li{
      font-size:90%
  }
  #footer-links{
      padding:15px 0
  }
  footer .links{
      padding-left:20px
  }
  #footer-bottom{
      padding:15px 20px
  }
  #footer-langs{
      margin:15px 15px 0 20px
  }
  #footer-logo{
      margin:25px 15px 10px 20px
  }
  #footer-collapse{
      margin-left:0;
      margin-right:0;
      position:absolute;
      right:20px
  }
  #footer-contact-copyright{
      padding-right:40px
  }
  #footer-collapse~div.social-icons{
      padding-right:40px;
      width:auto
  }
}
@media only screen and (max-width:800px){
  footer .social-icons{
      float:none;
      width:100%;
      text-align:left;
      margin-top:10px;
      padding-left:0
  }
}
@media only screen and (max-width:750px){
  footer .links{
      display:none
  }
  #footer-nav{
      display:block
  }
}

/* overwrite */
.lSSlideOuter .lSPager.lSpg>li a {
  background-color: #e1e1e1;
}

.social-bottom{
  margin: 20px 5px; 
  display: none;
}
.mobile-bottom ,.mobile-apps-bottom{
  display: none;
}

.size-7  { font-size: 7px }
.size-8  { font-size: 8px }
.size-9  { font-size: 9px }
.size-10 { font-size: 10px }
.size-11 { font-size: 11px }
.size-12 { font-size: 12px }
.size-14 { font-size: 14px }
.size-16 { font-size: 16px }
.size-18 { font-size: 18px }
.size-20 { font-size: 20px }
.size-22 { font-size: 22px }
.size-25 { font-size: 25px }
.size-26 { font-size: 26px }
.size-28 { font-size: 28px }
.size-29 { font-size: 29px }
.size-32 { font-size: 32px }
.size-34 { font-size: 34px }
.size-36 { font-size: 36px }
.size-38 { font-size: 38px }
.size-42 { font-size: 42px }
.size-44 { font-size: 44px }
.size-50 { font-size: 50px }

@media only screen and (max-width:1380px){
  .mobile-top{
    display: none;
  }
  .mobile-bottom{
    display: block;
  }
}

@media only screen and (max-width:1280px){
  .mobile-apps-bottom{
    display: block;
  }
}

@media only screen and (max-width:880px){
  .social-top{
    display: none;
  }
  .social-bottom{
    display: block;
  }
  .mobile-bottom{
    display: block;
  }
}

@media only screen and (max-width:768px){
  .mobile-apps-bottom{
    display: none;
  }
}




/* tiny device screen Samsung Galaxy S2, Samsung Galaxy S2 */
@media only screen and (max-width:400px){ 
  #metmaincontainer{
    padding: 0 0px !important;
  }
  .fixed-width {
    min-width: 100% !important; 
  }
}

/* Please check at https://mydevice.io/devices/ for device dimension guides */

/* smaller device screen Samsung Galaxy S2, Samsung Galaxy S2 */
@media only screen and (max-width:375px){ 
  #metmaincontainer{
    padding: 0 0px !important;
  }
  .fixed-width {
    min-width: 100% !important; 
  }
  .container-custom-marquee {
    padding: 0 !important;
  }
  .marquee-title{
    text-align: center;
    padding-left: 0px; 
  }
}

/* smaller device screen Samsung Galaxy S2, Samsung Galaxy S2 */
@media only screen and (max-width:480px){ 
  #metmaincontainer{
    padding: 0 0px !important;
  }
  .fixed-width {
    min-width: 100% !important; 
  }
  .container-custom-marquee {
    padding: 0 !important;
  }
  .marquee-title{
    text-align: center;
    padding-left: 0px; 
  }
}

/* smaller device screen iphone 4 */
@media only screen and (max-width:640px){ 
  #metmaincontainer{
    padding: 0 0px !important;
  }
  .fixed-width {
    min-width: 100% !important; 
  }
  .container-custom-marquee {
    padding: 0 !important;
    overflow: hidden !important;
  }
  .marquee-title{
    text-align: center;
    padding-left: 0px; 
  }
}

/* medium size like Apple iPhone 6, 6s */
@media only screen and (max-width:750px){ 
  #metmaincontainer{
    padding: 0 10px !important;
  }
  .fixed-width {
    min-width: 100% !important; 
  }
  .container-custom-marquee {
    padding: 0 !important;
    overflow: hidden !important;
  }
  .marquee-title{
    text-align: center;
    padding-left: 0px; 
  }
}


/* medium size like Apple ipad */
@media only screen and (max-width:780px){ 
  .topbar{
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  #top-right-bar{
    display: none;
  }
  .fixed-width {
    min-width: 100% !important; 
  }
  .form-group {
    min-width: 100% !important;
  }
  #metmaincontainer{
    padding: 0 10px !important;
  }
  .container-custom-marquee {
    padding: 0 !important;
    overflow: hidden !important;
  }
  .marquee-title{
    text-align: center;
    padding-left: 0px; 
  }
  .wscontainer {
    height: 125px !important;
  }
  .metopanel>.premier-height {
    height: auto !important;
  }
  .metopanel>.standard-height {
    height: auto !important;
  }
  .metopanel>.smaller-height {
    height: auto !important;
  }
  .panel.with-nav-tabs > .panel-body > .smaller-height  {
    height: auto !important;
  }
  .met-toggle-mobile{
    display: block;
  }
  .social-icons {
    float: left;
    padding-left: 20px;
  }
  #footer-nav {
    padding-left: 40px;
  }
  
}


/* big device screen on landscape mode like ipad */
@media only screen and (max-width:1024px){ 
  footer .social-icons{
    padding-right: 5px; 
    float:right;
    font-size:140%;
    padding-top:0px;
    width:40%;
    text-align:right
  }
}