@import url('https://fonts.googleapis.com/css?family=hostiko:400,500,600');
 
  @font-face {
    font-family: 'hostiko';
    src: url('/portal/templates/hostiko-02/fonts/hostiko.eot');
    src: url('http://mehrwebdesign.com/portal/templates/hostiko-02/fonts/hostiko.eot?#iefix') format('embedded-opentype'),
    url('/portal/templates/hostiko-02/fonts/hostiko.woff') format('woff'),
    url('/portal/templates/hostiko-02/fonts/hostiko.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/****************************/
/******Generic Classess******/
/****************************/
 ul{
     margin: 0;
     padding: 0;
}
 #sub-page{
     position:relative;
}
/*******************/
/******Top Bar******/
/*******************/
 .header{
     position: absolute;
     top: 0;
     z-index: 2;
     width:100%;
}
#front-page .affix-top{
	background-color:transparent !important;
}
#front-page .affix{
	background-color:#030f28 !important;
}
#blog-page .top_nav.affix, #sub-page .top_nav.affix{
	background-color:#030f28;
}
.top_bar_inner .right_bar, .top_bar_inner .left_bar {
     margin: 0px;
}
 .top_bar_inner .left_bar li:first-child{
     position:relative;
     padding-left:20px;
}
 .top_bar_inner .left_bar li:first-child:before{
     content:"\f003";
     font-family: FontAwesome;
     position:absolute;
     left:0;
     color:#fff;
     font-size:14px;
}
 .top_bar_inner .right_bar li, .top_bar_inner .left_bar li {
     float: left;
     padding: 0 16px;
     line-height:20px;
}
 .top_bar_inner .right_bar li .top_bar_inner .right_bar li img, .top_bar_inner .left_bar li img {
     margin-right: 13px;
}
 .top_bar_inner .right_bar li img, .top_bar_inner .left_bar li {
     border: none;
}
 .top_bar_inner .right_bar li a, .top_bar_inner .left_bar li {
     font-size: 14px;
     font-weight: 400;
     text-decoration: none;
     color:#222328;
}
 .top_bar_inner .right_bar li a:hover{
     color: #f43775;
}
 .top_bar_inner .left_bar li {
     float: left;
     padding: 0 10px;
     color: #f43775;
     font-weight:500;
}
 .top_bar_inner .right_bar li{
     padding-right: 0px;
     position: relative;
     padding-right: 10px;
     position:relative;
     border-right:solid 1px #fff;
}
 .top_bar_inner .left_bar li a {
     font-size: 14px;
     color: #fff;
     font-weight: 500;
     text-decoration:none;
     font-family: 'hostiko', sans-serif;
}
 .top_nav .navbar-right li:first-child a {
     margin-right: 0px;
}
 .top_bar_inner .left_bar li a:hover{
     text-decoration:underline;
}
 .navbar-brand {
     display: table;
     margin-left: 0px !important;
}
 .no_padding {
     padding: 0;
}
 .top_bar_inner .right_bar li a {
     text-transform: capitalize;
     font-family: 'hostiko', sans-serif;
     color:#fff !important;
     font-weight:500 !important;
}
 .top_bar_inner .right_bar{
     margin: 0;
     margin-top:5px;
}
 .top_bar_inner .right_bar li{
     padding: 0 15px;
     line-height:11px;
}
 .top_bar_inner .right_bar li:last-child{
     padding-right:0;
     border-right:0;
}
 .top_nav .navbar-right li{
     padding-right: 0;
}
 .top_bar_inner .right_bar li .dropdown-menu{
     background: rgba(0,0,0,0.6);
     border-radius: 0;
     top: 37px;
     border: none;
}
 .top_bar_inner .right_bar li .dropdown-menu li{
     float: left;
     width: 100%;
     border: none;
     text-align: left;
     padding: 0 ;
}
 .top_bar_inner .right_bar li .dropdown-menu li a{
     color: #fff;
}
 .right_bar li:first-child{
     border-left:none;
}
/**************************/
/******Top Navigation******/
/**************************/
 .top_nav {
     float: left;
     width: 100%;
     z-index:2;
     padding: 30px 0 13px;
     margin-bottom: 0px;
     border: none !important;
     border-radius:0;
	background-color:#030f28;
}
 .top_nav .navbar-right {
     padding-top: 0;
}
 .top_nav .navbar-right li {
     float: right;
}
 .top_nav .navbar-right li a {
     padding: 0px;
     margin: 0 10px;
     font-size: 16px;
     font-weight: 700;
     color: #232323;
     position: relative 
}
 .top_nav .navbar-right li a:hover {
     color: #00b2f2;
}
 .top_nav .navbar-right li a:hover:after {
     content: "";
     position: absolute;
     height: 2px;
     width: 100%;
     left: 0;
     bottom: -5px;
     background-color: #00b2f2;
}
 .top_bar_inner .left_bar li img{
     display:none;
}
 .top_bar_inner .left_bar li:nth-child(2){
     display:none;
}
 .top_nav .navbar-collapse {
     float: left !important;
     background: none !important;
     border: none !important;
     padding-left:0;
}
 .top_nav ul{
     margin-top:2px;
}
 .top_nav .navbar-nav > li{
     margin:0 4px;
}
 .top_nav .navbar-nav > li > a{
     font-size: 14px;
     line-height: 16px;
     color: #fff;
     font-weight: 600;
     padding:7px 9px 8px 10px;
     transition: all ease-in-out 0.6s;
     font-family: 'hostiko', sans-serif;
     text-transform:uppercase;
}
 .top_nav .navbar-nav > li:last-child{
     margin-right: 0;
     padding-right:0;
}
 .top_nav .navbar-nav li a:hover{
     color:#fff;
}
 .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
     color: #fff !important;
     background: none !important;
     border:solid 2px #fff;
}
 .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
     background: transparent;
}
 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
     background: rgba(0,0,0,0.3) ;
     color: #ffffff;
}
 .dropdown-menu > li > a {
     color: #ffffff;
     padding: 10px 25px;
}
 .dropdown-menu li:last-child a{
     border-bottom: none !important;
}
 .dropdown-menu {
     background:rgba(0,0,0,0.7);
     ;
     color: #ffffff;
     top: 50px;
     left:0;
     padding: 15px;
     min-width:200px;
     margin:0;
}
 .dropdown-menu:before{
     border-left: 11px solid transparent;
     border-right: 11px solid transparent;
     border-bottom-width: 10px;
     border-bottom-style: solid;
     border-bottom:10px solid rgba(0,0,0,0.7);
     content: "";
     height: 0;
     width: 0;
     position: absolute;
     top: -11px;
     left: 10px;
}
 .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
     background:#0197f6;
}
 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
     background: rgba(0,0,0,0.5) ;
     color: #fff;
}
 .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
     color:#fff;
     outline:none;
}
 .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{
     color:#d7263d;
     outline:none;
}
 .top_nav .navbar-nav > li:last-child .dropdown-menu{
     left:auto;
     right:0;
}
 .top_nav .navbar-nav > li:last-child .dropdown-menu:before{
     left:auto;
     right:20px;
}
/******************************/
/******Reponsive Classess******/
/******************************/
 @media screen and (max-width: 1199px){
     .top_nav{
         text-align: center;
    }
     .top_nav .navbar-nav > li{
         margin-right: 0;
    }
	.navbar-header {
		width:100%
		}
     .navbar-brand{
         height: auto;
         float: none;
         width:100%;
         vertical-align: top;
		 text-align:center;
    }
	.navbar-brand>img {
    display: inline-block;
}
     .top_nav .navbar-collapse{
         width: 100%;
    }
     .top_nav .navbar-nav {
         margin: 20px 0 0;
         width: 100%;
    }
     .navbar-nav > li {
         float: none;
         display: inline-block;
         vertical-align: top;
    }
     .dropdown-menu{
         top:45px;
    }
}
 @media screen and (max-width: 991px){
     .top_nav .navbar-collapse{
         width: 100%;
    }
     .top_nav .navbar-nav > li{
         float: none;
         padding: 8px 0;
         display: inline-block;
    }
     .top_nav{
         text-align: center;
    }
     .navbar-default .navbar-brand{
         display: inline-block;
         float: none !important;
    }
     .top_nav .navbar-nav{
         width: 100%;
         margin: 10px 0 0;
    }
     .dropdown-menu{
         top:25px;
    }
	.top_nav .navbar-nav > li > a {
	    padding: 7px 0px 7px 0;
		font-size:12px;
	}
}
 @media screen and (max-width: 767px) {
     .top_bar_inner .right_bar li{
         display: inline-block;
         padding: 0 10px;
    }
     .top_nav{
         padding: 15px;
    }
     .navbar-toggle{
         margin:0;
         left: -30px;
    }
     .top_nav .navbar-nav{
         margin: 0;

    }
     .top_bar_inner .right_bar li:first-child{
         border-right: none;
    }
     .navbar-default .navbar-toggle{
         background: #00abf0;
         border-color: #00abf0;
         border-radius: 0px;
         margin-right: 0;
    }
     .top_nav .navbar-nav > li{
         margin: 0;
         padding: 0;
    }
     .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
         background: #d7263d ;
         border-color: #d7263d ;
    }
     .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
         color: #d7263d ;
    }
     .navbar-default .navbar-brand {
         float: left !important;
         position: relative;
         z-index: 5;
    }
     .top_bar {
         padding: 10px 0 12px;
    }
     .top_nav .navbar-collapse {
         width: 250px;
         right: 30px;
         padding: 0;
         top: 62px;
         z-index: 9999;
         position: absolute;
         background: none !important;
    }
     .navbar-default .navbar-nav .open .dropdown-menu > li > a {
         color: #fff;
    }
     .top_nav .navbar-nav{
         background: rgba(0,0,0,0.7) !important;
    }
     .top_nav .navbar-nav > li{
         float: right;
         width: 100%;
         text-align: right;
    }
     .top_nav .navbar-nav > li a{
         color: #fff;
         font-size: 14px;
         padding: 14px 8%;
    }
     .top_bar_inner .right_bar li .dropdown-menu{
         left: inherit;
         right: 0;
    }
     .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
         background: #fcb100 !important;
         box-shadow: none !important;
         color: #fff !important;
    }
     .navbar-default .navbar-toggle .icon-bar{
         background-color: #fff;
    }
     .top_bar_inner .right_bar li .dropdown-menu{
         left:inherit;
         right: 0;
         top: 31px;
    }
     #search input[type="search"]{
         font-size: 40px;
         margin: 0 auto;
    }
     #search .btn{
         left: 0;
         right: 0;
         margin: 70px auto 0;
    }
     .top_bar_inner .right_bar li:first-child:before{
         left:-10px;
    }
     .top_nav .navbar-nav > li > a:hover{
         background:rgba(0,0,0,0.5);
         color:#fff;
    }
     .top_nav .navbar-nav:before{
         border-left: 11px solid transparent;
         border-right: 11px solid transparent;
         border-bottom-width: 10px;
         border-bottom-style: solid;
         border-bottom:10px solid rgba(0,0,0,0.7);
         content: "";
         height: 0;
         width: 0;
         position: absolute;
         top: -10px;
         right: 12px;
    }
     .navbar-collapse.in{
         overflow-y:visible;
    }
     .navbar-default .navbar-nav .open .dropdown-menu>li>a{
         font-size:14px;
         padding:5px 0;
    }
     .navbar-default .navbar-nav .open .dropdown-menu{
         background: #0197f6;
         padding: 0px 18px 4px;
         border-radius: 0;
    }
     .navbar-default .navbar-nav .open .dropdown-menu:before{
         display:none;
    }
     .hamburger{
         position: relative;
         z-index: 999;
         float: right;
         margin:0px 0 0;
    }
     .hamburger .line{
         width: 40px;
         height: 5px;
         background-color: #fff;
         display: block;
         margin: 4px auto;
         -webkit-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
         transition: all 0.3s ease-in-out;
    }
     .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
         background:#0197f6;
         color:#fff !important;
    }
     .navbar-default .navbar-nav .open .dropdown-menu>.active>a, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{
         background:none;
         color:#fff;
    }
     .navbar-nav>li:last-child>.dropdown-menu{
         left:auto !important;
         right:0 !important;
    }
     .hamburger:hover{
         cursor: pointer;
    }
     #hamburger-6.is-active{
         -webkit-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
         transition: all 0.3s ease-in-out;
         -webkit-transition-delay: 0.6s;
         -o-transition-delay: 0.6s;
         transition-delay: 0.6s;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
         transform: rotate(45deg);
    }
     #hamburger-6.is-active .line:nth-child(2){
         width: 0px;
    }
     #hamburger-6.is-active .line:nth-child(1), #hamburger-6.is-active .line:nth-child(3){
         -webkit-transition-delay: 0.3s;
         -o-transition-delay: 0.3s;
         transition-delay: 0.3s;
    }
     #hamburger-6.is-active .line:nth-child(1){
         -webkit-transform: translateY(10px);
         -ms-transform: translateY(10px);
         -o-transform: translateY(10px);
         transform: translateY(10px);
    }
     #hamburger-6.is-active .line:nth-child(3){
         -webkit-transform: translateY(-8px) rotate(90deg);
         -ms-transform: translateY(-8px) rotate(90deg);
         -o-transform: translateY(-8px) rotate(90deg);
         transform: translateY(-8px) rotate(90deg);
    }
     .navbar-brand {
         width: auto;
     }
}
 @media screen and (max-width: 600px){
     .top_bar_inner .left_bar li:last-child{
         display: none;
    }
     .top_bar_inner .right_bar li{
         padding: 0 5px;
    }
     .top_bar_inner .right_bar li:last-child{
         padding-right: 0;
    }
     .top_bar_inner .left_bar li img{
         margin-right: 5px;
    }
     .top_bar_inner .right_bar li:first-child{
         padding-right: 5px;
    }
}
 @media screen and (max-width:480px){
     .navbar-default .navbar-toggle{
         margin: 0;
    }
     .navbar-brand{
         height: auto;
    }
     .navbar-default .navbar-toggle{
         top: 0px !important;
    }
     .top_bar_inner .left_bar{
         display: none;
    }
     .custom-menu-class{
         width: 100%;
         text-align: center;
    }
     .top_bar_inner .right_bar li{
         float:none;
         display: inline-block;
         vertical-align: top;
    }
}