@charset "utf-8";
/* CSS Document */
@import url('bootstrap.css');
@import url('jasny-bootstrap.min.css');
@import url('navmenu-push.css');
@import url('slick.css');
@import url('slick-theme.css');
@import url('font-awesome.min.css');

body {
	font-family: 'Open Sans';
	line-height: 1.5;
	font-size:16px;
	color: #000 !important;
	color: rgba(255,255,255,0.87);
	background: #FFF url(bg.jpg) repeat ;
  /*  -webkit-background-size: cover; 
    -moz-background-size: cover;    
    -o-background-size: cover;      
    background-size: cover;     */    
	background-position: 100% 0% !important
	}

a:hover{
	text-decoration: none;
}

/**************Home****************************/

.navmenu-default, .navbar-default .navbar-offcanvas{
	
background: #00b1c4; /* Old browsers */	
}

.navbar-default {  
background: #FFF; /* Old browsers */
border-color:transparent;
}
.navbar-toggle .icon-bar{
	background-color: #00b1c4 !important;
	}

.search-form .form-group {
  float: right !important;
  transition: all 0.35s, border-radius 0s;
  width: 32px;
  height: 32px;
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius: 25px;
  border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
  padding-right: 20px;
  border: 0 none;
  background: transparent;
  box-shadow: none;
  display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
  display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
  /* Firefox 18- */
  display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
  /* Firefox 19+ */
  display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
  display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
  width: 100%;
  border-radius: 4px 25px 25px 4px;
}
.search-form .form-group .form-control-feedback {
  position: absolute;
  top: -1px;
  right: -2px;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 29px !important;
  text-align: center;
  color: #00b1c4 !important;
  left: initial;
  font-size: 14px;
}


.blac {
	height: 40px;
    position: relative;
    float: right;
    padding: 5px 5px 0px;    
    margin-right: 8px;
    margin-bottom: 0px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
   	display: block;
	color: #00b1c4 !important;
	font-weight: bold;
	/*background: #242B35;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;*/
}


/****************Home**********************/
.page-body{
	margin-top:50px;
	position: relative;
	padding-bottom: 50px;

}


.page-container{
	margin-top:0px;
	
}
.item img{
	border-radius: 8px;	
}
.carousel-indicators{
	bottom: -10px;
	
}
.carousel-control {
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: 0;
    width: 5%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    background-color: rgba(0,0,0,0);
    filter: alpha(opacity=50);
    opacity: .5;
}


.nav-pills{
	background-color: transparent;
	margin-top: 10px;
}

.nav-pills > li > a { 
	color: #00b1c4;
    background-color: #FFF;
	border-radius: 8px;
	border: solid #00b1c4 1px !important;
	margin-right: 5px;
	text-transform: uppercase;
	font-style: italic;
	font-weight: bold;
	font-size: calc(9px + (18 - 9) * ((100vw - 300px) / (1600 - 300))) !important;
	
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #FFF;
  background-color: #00b1c4;
  border-radius: none;

}
.nav-pills > li a.active {
 color: #FFF;
 background-color: #00b1c4;
 border-radius: none;

}
.col-tab-4{
	width: 33.33%;
	text-align: center;
	margin: 0px !important;
}

.tab{
	background-color: transparent !important;
   background:transparent !important;
	
}

.cat{
	position: relative;
	border-radius: 8px;	
	margin-top: 10px;
}

.cat img{
	border-radius: 8px;	
}
.cat .head{
	position: absolute;
	background-color: rgba(0, 177, 196, .7);
	width: 100%;
	top:0;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300))) !important;
	font-style: italic;
	padding: 1%;
	color: #fff;	
}

.responsive {
	background:  #ebe6f0;
	margin-top: 10px;
}

.responsive2 {
	background:  #ebe6f0;
	margin-top: 10px;
}

   .slick-slide {
      margin: 0px 10px;
    }

    .slick-slide img {
      width: 100%;
		
    }

    .slick-prev:before,
    .slick-next:before {
      color: #936717;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: 1;
    }

    .slick-active {
      opacity: 1;
    }

    .slick-current {
      opacity: 1;
    }

.banner{
	width: 100%;
	margin:10px auto;
	}
.banner a img{
	width: 100% !important;
		}


.footer{
	background: #00b1c4;
	color: #FFF;
	text-align: center;
	font-size: calc(11px + (18 - 11) * ((100vw - 300px) / (1600 - 300))) !important;
	font-style: italic;
	padding: 5px;
	position: fixed;
	bottom: 0;
	width: 100%;
}

.navbar-brand {
    position: absolute;
    width: 100%;
	
    left: 0;
    text-align: center;
    margin: auto;
	z-index: -10;
}
 .site-title {
	text-align:center;
	margin:0 auto;	
	padding:10px 0px 7px 0px  !important
	}

/****************02 inside**********************/
.heading{
	
	background-color:#00b1c4;
	border-radius: 8px;
	font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300))) !important;
	font-style: italic;
	padding: 1%;
	color: #fff;
	margin-top: 10px;
}
.top_10{
	margin-top: 10px;	
	
}

.icon{
	width: 100%;
	margin:10px auto;
	position: relative;
	}
.icon a img{
	width: 100% !important;
		}

.icon .tittle{
	background: rgba(0,0,0,0.7);
	color: #fff;
	position: absolute;
	width: 100%;
	padding: 1%;
	bottom: 0;
	font-size: calc(10px + (18 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
	font-weight: bold;
	
}
#triangle {
    width: 0;
    height: 0;
    border-top: 40px solid #00b1c4;
    border-left: 0px solid transparent;
    border-right: 40px solid transparent;
	position: absolute;
	top: 10px;
}

#triangle .fa{
	position: absolute;
	top: -35px;
	left: 4px;
	color: #fff;
	
}

#triangle .fa.active{
	color: #ffff00 !important
}

.heading2{
	
	background-color:#b2e7ed;
	font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300))) !important;
	font-style: italic;
	padding: 1%;
	color: #000;
	margin: 10px auto;
	border-bottom: solid #d2bfe1 1px;
	border-top: solid #d2bfe1 1px;
	text-align: center;
}


/****************MSISDN**********************/

.text{
	color: #00b1c4;
	font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300))) !important;
	text-align: center;
	
}

.form-group input[type='text'] {
  background: #000;
	color: #fff;
	text-align: center;
	border-radius: 8px;
	height: 40px;
	line-height: 40px;
	margin: 10px auto; 
}

.but {
	  display: block;
	  margin: 10px  auto;
	  max-width:220px;
	  width: 90%;
	  font-family: sans-serif;
	 font-size: calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300))) !important;
	  appearance: none;
	  box-shadow: none;
	  color:#FFF;
	  padding:10px 5px ;
	  font-weight:bold;
	  border-radius:15px;
	  cursor:pointer;
	  border: #005952 solid 1px !important;
	  text-decoration:none;
	  text-align:center;
	  text-transform:uppercase;
	 outline: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
	background: #99ff00;
background: -moz-linear-gradient(top, #99ff00 0%, #417b00 100%);
background: -webkit-linear-gradient(top, #99ff00 0%,#417b00 100%);
background: linear-gradient(to bottom, #99ff00 0%,#417b00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ff00', endColorstr='#417b00',GradientType=0 );
	text-shadow: 1px 1px 1px #000;
  }

