@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400);
.mainContainer{width: 100%;float: left;position: relative;}
.slider1-area.index1 {margin-top: 0 !important;}
.topBar{position: absolute;z-index: 99;background: #fff;padding: 16px 20px 16px 20px;}
.topBar:after{content: '';position: absolute;left: 100%;border-left: solid 39px #fff;border-bottom: solid 80px transparent;top: 0; }
.panelGroup{width: 100%;float: left;}
.panelGroup > div {background-color: rgb(0 33 71);width: 20%;float: left;height: 100px;border-right: 1px solid #ebc818; transition: all ease 0.3s;}
.panelGroup > div:hover {background: #041831;}
.panelGroup > div:last-child{border-right: 0;}
.panelGroup > div > div{width: 100%;height: 100%;display: table;}
.panelGroup > div > div > a {display: table-cell;vertical-align: middle;text-align: center;color: #fbc800;font: 400 18px 'Roboto Condensed';padding: 15px;}
.panelGroup > div > div > a > span{color: #fff;font-size: 13px;width: 100%;float: left;margin: 10px 0 0 0;}
.footer{width: 100%;float: left;text-align: center;padding: 10px 0;font: 400 14px 'Roboto Condensed';}
.footer p{margin: 0; padding: 0}
.footer p a{color: #444;}

@media only screen and (orientation: portrait) {
 
}
@media screen and (max-width: 900px) and (min-width: 360px) {
  .topBar{position: inherit;}
  .topBar a{display: block; text-align: center;}
  .topBar a img{margin: 0 auto;}
  .slider1-area .slide-1 .title1, .slider1-area .slide-2 .title1, .slider1-area .slide-3 .title1, .slider1-area .slide-4 .title1, .slider1-area .slide-5 .title1, .slider1-area .slide-6 .title1{font-size: 16px !important;}
  .panelGroup > div {width: 100%;border-right: 0px solid #ebc818;border-top: 1px solid #ebc818;}
  .footer p{font-size:12px;line-height: 16px;}
}