/* Basic */

body {

	color: #67727e;

	font-family: 'Roboto', sans-serif;

	font-size: 14px;

	line-height: 1.5;

	font-weight: 300;

	-webkit-font-smoothing: antialiased;

	background: url("../img/bg.jpg") repeat scroll 0 0 #e9e6e0;

	min-height: 600px;

	/*padding-top: 48px;*/}



h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {

    font-weight: 700;

    color: #67727e;}



a:not(.btn) {

    color: #67727e;

    -webkit-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;}



a:not(.btn):hover, a:not(.btn):focus {

    outline: none;

    text-decoration: none;

    color: #1abc9c;}



iframe {

    border: 0;}



input,

button,

select,

textarea {

    font-family: 'Lato', sans-serif;}



.center {

	text-align: center;

	margin: 0 auto;

	float: none;}



ul {

  list-style: none;}



.wrapper2 {

	margin-bottom: 30px;

	margin-top: 10px;}



.img-responsive {

    margin: 0 auto;}



.justify {

	text-align:justify;

	text-justify:inter-word;}



/* Buttons

 * -------------------------- */

.btn {

    font-family: 'Montserrat', sans-serif;

    -webkit-transition: all 0.2s ease;

    transition: all 0.2s ease;

    text-transform: uppercase;

    font-weight: 700;

    font-size: 12px;

    padding: 7px 12px;}



.btn-lg {

    padding: 14px 16px;

    font-size: 14px;}



.btn-sm,

.btn-xs {

    padding: 8px 10px;

    font-size: 10px;}



.btn-xs {

    padding: 5px 8px;}



/* Flat Buttons

 * -------------------------- */

.flat-default,

.flat-default:hover,

.flat-default:active {

    border: 2px solid #bdc3c7;}



.flat-default, .flat-default.btn-bordered:hover {

    background-color: #bdc3c7;

    color: #ffffff;}



.flat-default:hover,  .flat-default.btn-bordered {

    background-color: transparent;

    color: #bdc3c7;}



.flat-primary,

.flat-primary:hover,

.flat-primary:active {

    border: 2px solid rgb(26, 188, 156);}



.flat-primary, .flat-primary.btn-bordered:hover {

    background-color: rgb(26, 188, 156);

    color: #ffffff;}



.flat-primary:hover,  .flat-primary.btn-bordered {

    background-color: transparent;

    color: rgb(26, 188, 156);}



.flat-success,

.flat-success:hover,

.flat-success:active {

    border: 2px solid rgb(46, 204, 113);}



.flat-success, .flat-success.btn-bordered:hover {

    background-color: rgb(46, 204, 113);

    color: #ffffff;}



.flat-success:hover,  .flat-success.btn-bordered {

    background-color: transparent;

    color: rgb(46, 204, 113);}



.flat-info,

.flat-info:hover,

.flat-info:active {

    border: 2px solid rgb(52, 152, 219);}



.flat-info, .flat-info.btn-bordered:hover {

    background-color: rgb(52, 152, 219);

    color: #ffffff;}



.flat-info:hover,  .flat-info.btn-bordered {

    background-color: transparent;

    color: rgb(52, 152, 219);}



.flat-warning,

.flat-warning:hover,

.flat-warning:active {

    border: 2px solid rgb(241, 196, 15);}



.flat-warning, .flat-warning.btn-bordered:hover {

    background-color: rgb(241, 196, 15);

    color: #ffffff;}



.flat-warning:hover,  .flat-warning.btn-bordered {

    background-color: transparent;

    color: rgb(241, 196, 15);}



.flat-danger,

.flat-danger:hover,

.flat-danger:active {

    border: 2px solid rgb(231, 76, 60);}



.flat-danger, .flat-danger.btn-bordered:hover {

    background-color: rgb(231, 76, 60);

    color: #ffffff;}



.flat-danger:hover,  .flat-danger.btn-bordered {

    background-color: transparent;

    color: rgb(231, 76, 60);}



.flat-inverse,

.flat-inverse:hover,

.flat-inverse:active {

    border: 2px solid rgb(52, 73, 94);}



.flat-inverse, .flat-inverse.btn-bordered:hover {

    background-color: rgb(52, 73, 94);

    color: #ffffff;}



.flat-inverse:hover,  .flat-inverse.btn-bordered {

    background-color: transparent;

    color: rgb(52, 73, 94);}



.flat-color,

.flat-color:hover,

.flat-color:active {

    border: 2px solid #2ecc71;}



.flat-color, .flat-color.btn-bordered:hover {

    background-color: #2ecc71;

    color: #ffffff;}



.flat-color:hover,  .flat-color.btn-bordered {

    background-color: transparent;

    color: #2ecc71;}



.btn-flat:not(.btn-rounded) {

    border-radius: 0;}



/* Fixed Navbar

================================================== */

.navbar-default {

	border: 0;

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

    background-color: #ffffff;

    margin-bottom: 0;

    border-radius: 0;}



.navbar-toggle {

    border-radius: 0;}



.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {

	background-color: #1abc9c;

	border-color: #1abc9c;}



.navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar {

    background-color: #ffffff;}



.nav-justified > li > a {

	font-weight: 400;}



@media (max-width: 767px) {

	.navbar-collapse {

        border-top: 0;

		padding-left: 0px;

		padding-right: 0px;

    }

	.navbar-collapse.in {

        overflow-y: visible;

    }

	.nav-justified {

        padding-top: 15px;

        padding-bottom: 15px;

		background-color: #414E57;

    }

	.navbar-default .nav-justified > li > a {

		color: #bdc3c7;

        font-size: 13px;

    }

	.navbar-default .nav-justified > li > a:hover, .navbar-default .nav-justified > li > a:focus {

        color: #ffffff;

		background-color: #1abc9c;

    }

	.navbar-default .nav-justified .open .dropdown-menu > .active > a, .navbar-default .nav-justified .open .dropdown-menu > .active > a:hover, .navbar-default .nav-justified .open .dropdown-menu > .active > a:focus, .navbar-default .nav-justified > .active > a, .navbar-default .nav-justified > .active > a:hover, .navbar-default .nav-justified > .active > a:focus, .navbar-default .nav-justified > .open > a, .navbar-default .nav-justified > .open > a:hover, .navbar-default .nav-justified > .open > a:focus {

        color: #bdc3c7;

    }

}



@media (min-width: 768px) {

	.navbar {

		min-height: 20px;

	}

	.navbar-collapse {

		padding-left: 0px;

		padding-right: 0px;

		margin-left: -15px;

		margin-right: -15px;		

	}

	.navbar-default {

        -webkit-transition: all 0.2s ease-in-out;

        transition: all 0.2s ease-in-out;

		

    }

	

	.navbar-default .nav-justified > li > a {

		*font-weight: 700;

		background-color: #ffffff;

		font-size: 14px;

		line-height: 2;

    }

	.navbar-default ..nav-justified > li > a:hover, .navbar-default .nav-justified > li > a:focus {

        color: #1abc9c;

    }

	.navbar-default .nav-justified > .open > a, .navbar-default .nav-justified > .open > a:hover, .navbar-default .nav-justified > .open > a:focus {

        background-color: transparent;

        color: #1abc9c;

    }

	.navbar-default .nav-justified > .active > a, .navbar-default .nav-justified > .active > a:hover, .navbar-default .nav-justified > .active > a:focus {

        color: #444;

        *background-color: #1abc9c;

    }

	

	.nav-justified > li:last-child > a {

        padding-right: 0;

    }

	.nav-justified > li.active:last-child > a {

        padding-right: 18px;

    }

}



/* Site Tittle

================================================== */

#site-title {

  padding-top: 40px;

	background: url("../images/bg.jpg") repeat scroll 0 0 #e9e6e0;

	padding-bottom: 0px;}



.site-logo{

	margin: 0 auto;

	padding: 30px 0;

	text-align: center;}



/* Boxed

================================================== */

.boxed {

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

    background-color: #ffffff;

	padding: 20px;

	border-bottom: 3px solid #1abc9c;}



  .boxed2 {

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

    background-color: #ffffff;

  padding: 20px 20px;

  border-bottom: 3px solid #1abc9c;}



#site-title-boxed {

	background: url("../images/bg.jpg") repeat-x #414e57;}



/* Welcome

================================================== */

#welcome{

	padding: 10px 0 ;

	background-color: #414e57;

}



.welcome {

	padding: 12px 0 30px 0;

	text-align: center;

}



.welcome h1 {

	font-size: 36px;

	color: #ffffff;

	padding-bottom: 8px;

	font-weight: 300;

}



.welcome p {

	font-size: 16px;

	color: #ffffff;

}



.booknow {

	padding-left: 150px;

	padding-right: 150px;

	padding-bottom: 40px;

	margin-top: -5px;

}



/* Footer 1

================================================== */

#footer-1 {

    padding: 20px 0;

    position: relative;

	background-color: #bbdefa;

  color: #000000;

}



#footer-1 h4 {

  color: #000000;

}



/*#footer-1:before {

    position: absolute;

    display: block;

    width: 0;

    height: 0;

    border-color: transparent;

    border-style: solid;

    border-width: 10px;

    border-bottom-width: 0;

    border-top-color: #1abc9c;

    top: 0;

    left: 50%;

    content: "";

    margin-left: -5px;

}*/



.wrap-foot {

    padding: 20px 0;

    overflow: hidden;

}



.wrap-foot p:last-child {

    margin-bottom: 0;

}



.foot-title {

    position: relative;

    margin: 0;

    margin-bottom: 35px;

    line-height: 10px;

    font-weight: 700;

	font-size: 18px;

	color: #000000;

}



.foot-title:before {

    content: "";

    width: 35px;

    height: 3px;

    background-color: #1abc9c;

    display: block;

    position: absolute;

    bottom: -15px;

    left: 0;

}



.follow-foot {

    padding-left: 0;

    list-style: none;

    overflow: hidden;

    margin-bottom: 0;

	margin-top: 20px;

}



.follow-foot > li {

    float: left;

    margin-bottom: 5px;

    width: 100%;

}



.follow-foot > li:last-child {

    margin-bottom: 0;

}



.follow-foot h4 {

    margin: 0;

    font-size: 19px;

	font-weight: 700;

	color: #000000;

}



.follow-foot h4 small {

	display: block;

    margin-top: 5px;

	color: #67727e;

	line-height: 1.5;

}



.follow-foot h5 {

    margin: 0;

    font-size: 14px;

	font-weight: 400;

	color: #000000;

}



.follow-foot h5 small {

	display: block;

	margin-top: 7px;

	color: #67727e;

}



.social-links {

	padding-top: 10px;

    padding-left: 0;

    list-style: none;

    font-size: 17px;

    margin: 0;}



.social-links > li {

    display: inline-block;}



.social-links > li a {

    width: 30px;

    height: 30px;

    display: block;

    text-align: center;

    line-height: 30px;

    border-radius: 30px;

	color: #67727e;

    background-color: #e8eef1}



.social-links > li a:hover {

    width: 30px;

    height: 30px;

    display: block;

    text-align: center;

    line-height: 30px;

    border-radius:30px;

	color: #ffffff;

    background-color: #1abc9c}

		/* Footer 1ab

================================================== */

#footer-1ab {

    padding: 20px 0;

    position: relative;

	background-color: #bbdefa;

  color: #FFFFFF;

}



#footer-1 h4 {

  color: #FFFFFF;

}



/*#footer-1:before {

    position: absolute;

    display: block;

    width: 0;

    height: 0;

    border-color: transparent;

    border-style: solid;

    border-width: 10px;

    border-bottom-width: 0;

    border-top-color: #1abc9c;

    top: 0;

    left: 50%;

    content: "";

    margin-left: -5px;

}*/



.wrap-foot {

    padding: 20px 0;

    overflow: hidden;

}



.wrap-foot p:last-child {

    margin-bottom: 0;

}



.foot-title {

    position: relative;

    margin: 0;

    margin-bottom: 35px;

    line-height: 10px;

    font-weight: 700;

	font-size: 18px;

	color: #ffffff;

}



.foot-title:before {

    content: "";

    width: 35px;

    height: 3px;

    background-color: #1abc9c;

    display: block;

    position: absolute;

    bottom: -15px;

    left: 0;

}



.follow-foot {

    padding-left: 0;

    list-style: none;

    overflow: hidden;

    margin-bottom: 0;

	margin-top: 20px;

}



.follow-foot > li {

    float: left;

    margin-bottom: 5px;

    width: 100%;

}



.follow-foot > li:last-child {

    margin-bottom: 0;

}



.follow-foot h4 {

    margin: 0;

    font-size: 19px;

	font-weight: 700;

	color: #414e57;

}



.follow-foot h4 small {

	display: block;

    margin-top: 5px;

	color: #67727e;

	line-height: 1.5;

}



.follow-foot h5 {

    margin: 0;

    font-size: 14px;

	font-weight: 400;

	color: #ff0000;

}



.follow-foot h5 small {

	display: block;

	margin-top: 7px;

	color: #ff0000;

}



.social-links {

	padding-top: 10px;

    padding-left: 0;

    list-style: none;

    font-size: 17px;

    margin: 0;}



.social-links > li {

    display: inline-block;}



.social-links > li a {

    width: 30px;

    height: 30px;

    display: block;

    text-align: center;

    line-height: 30px;

    border-radius: 30px;

	color: #67727e;

    background-color: #e8eef1}



.social-links > li a:hover {

    width: 30px;

    height: 30px;

    display: block;

    text-align: center;

    line-height: 30px;

    border-radius:30px;

	color: #ffffff;

    background-color: #1abc9c}

	
	
	/* Footer 1a

================================================== */

#footer-1a {

    padding: 20px 0;

    position: relative;

	background-color: #f5f5f5;

  color: #FFFFFF;

}



#footer-1 h4 {

  color: #FFFFFF;

}



/*#footer-1:before {

    position: absolute;

    display: block;

    width: 0;

    height: 0;

    border-color: transparent;

    border-style: solid;

    border-width: 10px;

    border-bottom-width: 0;

    border-top-color: #1abc9c;

    top: 0;

    left: 50%;

    content: "";

    margin-left: -5px;

}*/



.wrap-foot {

    padding: 20px 0;

    overflow: hidden;

}



.wrap-foot p:last-child {

    margin-bottom: 0;

}



.foot-title {

    position: relative;

    margin: 0;

    margin-bottom: 35px;

    line-height: 10px;

    font-weight: 700;

	font-size: 18px;

	color: #ffffff;

}



.foot-title:before {

    content: "";

    width: 35px;

    height: 3px;

    background-color: #1abc9c;

    display: block;

    position: absolute;

    bottom: -15px;

    left: 0;

}



.follow-foot {

    padding-left: 0;

    list-style: none;

    overflow: hidden;

    margin-bottom: 0;

	margin-top: 20px;

}



.follow-foot > li {

    float: left;

    margin-bottom: 5px;

    width: 100%;

}



.follow-foot > li:last-child {

    margin-bottom: 0;

}



.follow-foot h4 {

    margin: 0;

    font-size: 19px;

	font-weight: 700;

	color: #414e57;

}



.follow-foot h4 small {

	display: block;

    margin-top: 5px;

	color: #67727e;

	line-height: 1.5;

}



.follow-foot h5 {

    margin: 0;

    font-size: 14px;

	font-weight: 400;

	color: #ff0000;

}



.follow-foot h5 small {

	display: block;

	margin-top: 7px;

	color: #ff0000;

}



.social-links {

	padding-top: 10px;

    padding-left: 0;

    list-style: none;

    font-size: 17px;

    margin: 0;}



.social-links > li {

    display: inline-block;}



.social-links > li a {

    width: 30px;

    height: 30px;

    display: block;

    text-align: center;

    line-height: 30px;

    border-radius: 30px;

	color: #67727e;

    background-color: #e8eef1}



.social-links > li a:hover {

    width: 30px;

    height: 30px;

    display: block;

    text-align: center;

    line-height: 30px;

    border-radius:30px;

	color: #ffffff;

    background-color: #1abc9c}

	

/* Map & Promotion

================================================== */

#map-canvas {

	margin-top: 25px;

	width: 280px;

	height: 160px;

	border: 5px solid #ffffff;

	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);}



.promotion img{

	margin-top: 15px;

}	



/* Footer 2

================================================== */

#footer-2 {

	background-color: #0000ff}



.bottom-links {

	padding-top: 10px;

    padding-left: 0;

    list-style: none;

    font-size: 13px;

	font-weight: 500;

    margin: 0;

	margin-bottom: 10px;}



.bottom-links > li {

    display: inline-block;

	padding-right: 10px;}



.bottom-links > li a {

	font-weight: 500;

    display: block;

	color: #d3dae1;}



.bottom-links > li a:hover {

    display: block;

	color: #1abc9c;}



.copiret {

	padding-top: 10px;

	float: right;

	color: #d3dae1;

	font-size: 13px;

	font-weight: 500;}	



.copiret a {

	color: #d3dae1;

	font-weight: 500;}



/* Subpage

================================================== */

.subtitle h4  {

	margin-top: 0px;

	font-size: 18px;

	color: #414e57;

}



/* Tabs

================================================== */

.tabs-left, .tabs-right {

    border-bottom: none;

    padding-top: 2px;

}

.tabs-left {

    border-right: 1px solid #ddd;

}

.tabs-right {

    border-left: 1px solid #ddd;

}

.tabs-left>li, .tabs-right>li {

    float: none;

    margin-bottom: 2px;

}

.tabs-left>li {

    margin-right: -1px;

}

.tabs-right>li {

    margin-left: -1px;

}

.tabs-left>li.active>a, .tabs-left>li.active>a:hover, .tabs-left>li.active>a:focus {

	font-weight: 500;

    border-bottom-color: #ddd;

    border-right-color: transparent;

}

.tabs-right>li.active>a, .tabs-right>li.active>a:hover, .tabs-right>li.active>a:focus {

    border-bottom: 1px solid #ddd;

    border-left-color: transparent;

}

.tabs-left>li>a {

    border-radius: 4px 0 0 4px;

	font-weight: 500;

    margin-right: 0;

    display:block;

}

.tabs-right>li>a {

    border-radius: 0 4px 4px 0;

    margin-right: 0;

}



/* Tabs Konten

================================================== */

.flex-control-nav {

	visibility: hidden;

}



.tanya {

	margin-left: -35px;

	padding-bottom: 30px;

}



.tanya li {

    padding: 10px 0;

    border-bottom: 1px solid #ecf0f1;

	}

	

.tanya li:first-child {

    padding-top: 0;}



.tanya li:last-child {

    padding-bottom: 0;

    border-bottom: 0;}



.tanya h6 {

    width: 100px;

    float: left;

	font-size: 14px;

    font-weight: 400;

    color: #666666;

    margin: 0;

    line-height: 1.5;}



.tanya .jawab {

    font-weight: 400;

	font-size: 14px;

    color: #666666;

    margin-left: 110px;}



.jawab:before {

	content: ":";

	margin-right: 10px;}



/* #Google Map

================================================== */

.google-map {

    padding: 0;

}

.google-map-2 {

    padding-bottom: 0;

	margin-bottom: 20px; 

}



/* #Contact

================================================== */

.contact-form .form-control {

    margin-bottom: 20px;

}



/* #Menu

================================================== */

.menu-item-wrapper {

    padding-bottom: 10px;

	padding-top: 10px;}

	

.menu-item {

    overflow: hidden;

    -webkit-transition: all 0.2s ease;

    transition: all 0.2s ease;}

	

.menu-item .menu-thumb {

    position: relative;

    overflow: hidden;}

	

.menu-item .menu-thumb img {

	border: 1px solid #efefef;

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

    background-color: #ffffff;

	padding: 3px;	

}

	

.menu-item:hover .menu-thumb img {

	border: 1px solid #efefef;

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

	box-shadow: inset 0 0 3px rgba(65,78,87,0.3);

    background-color: #ffffff;

	padding: 3px; }	

	

.menu-item .menu-content {

    text-align: center;

    padding: 20px 20px;

    background-color: #ffffff;}	

	

.menu-item .menu-content h5 {

    margin: 0;

	font-size: 16px;

	font-weight: 700;}

	

.menu-item .menu-content p {

    margin: 5px 0 10px 0;}

	

/* About

================================================== */

.about {

	margin-bottom: 30px;

}



.about img {

	border: 1px solid #efefef;

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.01);

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

    background-color: #ffffff;

	padding: 3px;	

	margin-bottom: 20px;

}



.about h2 {

	font-size: 20px;

	margin-top: 30px;

	margin-bottom: 20px;

}



#myCarousel {

	margin-bottom: 20px;

}



.carousel-inner > .item.active > img,

.carousel-inner > .item.active > a > img {

  border-radius: 0px;

}

@media (max-width: 767px) {

  .carousel-inner > .item.active > img {

    border-radius: 6px 6px 0 0;

  }

}

.carousel-inner > .item.active.left > img,

.carousel-inner > .item.active.right > img,

.carousel-inner > .item.active.left > a > img,

.carousel-inner > .item.active.right > a > img {

  border-radius: 0;

}

.carousel-control {

  position: absolute;

  top: 45%;

  font-size: 20px;

  line-height: 28px;

  color: #ffffff;

  text-indent: 1px;

  border: 3px solid #ffffff;

  height: 40px;

  right: 15px;

  margin-top: -20px;

  text-align: center;

  width: 40px;

  outline: none !important;

  border-radius: 23px;

  opacity: 0.5;

  filter: alpha(opacity=50);

  font-size: 30px;

  font-weight: 700;

}

.carousel-control.left,

.carousel-control.right {

  background: none #2c3e50;

}

.carousel-control.left {

  text-indent: -1px;

  left: 15px;

}

.carousel-control.right {

  left: auto;

  right: 15px;

}

.carousel-indicators {

  bottom: auto;

  left: auto;

  margin: 0;

  right: 16px;

  top: 16px;

  width: auto;

  line-height: 8px;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  -o-user-select: none;

  user-select: none;

}

.carousel-indicators li {

  vertical-align: top;

  border: none;

  width: 8px;

  height: 8px;

  margin: 0 0 0 6px;

  background-color: #2c3e50;

  background-color: rgba(44, 62, 80, 0.5);

}

.carousel-indicators li.active {

  background-color: #fff;

  width: 8px;

  height: 8px;

  margin: 0 0 0 6px;

}

.carousel-caption {

  padding: 20px 19px 22px;

  background: #243342;

  background: rgba(36, 51, 66, 0.7);

  left: 0;

  right: 0;

  bottom: 0;

  text-align: left;

  border-radius: 0 0 6px 6px;

  text-shadow: none;

}

.carousel-caption h3,

.carousel-caption p {

  color: #ffffff;

}

.carousel-caption h3 {

  font-size: 18px;

  line-height: 20px;

  margin: 0 0 5px;

}

.carousel-caption p {

  font-size: 15px;

  line-height: 20px;

  margin-bottom: 0;

}

@media (max-width: 767px) {

  .carousel-caption {

    position: static;

  }

}



.fui-arrow-right:before {

  content: '\203a';

}

.fui-arrow-left:before {

  content: '\2039';

}



#prom {

	background: #ffffff;

	border: 5px solid #ffffff;

	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

	height: 160px;

	width: 100%;

	margin: 40px auto 0;

	overflow: visible;

	position: relative;

	margin-top:25px

}



#mask {

	overflow: hidden;

	height: 150px; 

}



#prom ul {

   margin: 0;

   padding: 0;

   position: relative;

}



#prom li { 

   width: 100%;  /* Width Image */

   height: 160px; /* Height Image */

   position: absolute;

   top: -150px;	/* Original Position - Outside of the prom */

   list-style: none;

}

#prom li.firstanimation {

   animation: cycle 25s linear infinite;		

}



#prom li.secondanimation {

   animation: cycletwo 25s linear infinite;	

}



#prom li.thirdanimation {

   animation: cyclethree 25s linear infinite;		

}



#prom li.fourthanimation {

   animation: cyclefour 25s linear infinite;		

}



#prom li.fifthanimation {

   animation: cyclefive 25s linear infinite;		

}



@keyframes cycle {

   0%  { top: 0px; } /* When you start the slide, the first image is already visible */

   4%  { top: 0px; } /* Original Position */

   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */

   20% { top: 150px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */

   21% { top: -150px; opacity: 0; z-index: -1; } /* Return to Original Position */

   92% { top: -150px; opacity: 0; z-index: 0; }

   96% { top: -150px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/

   100%{ top: 0px; opacity: 1; }

}



@keyframes cycletwo {

   0%  { top: -150px; opacity: 0; } /* Original Position */

   16% { top: -150px; opacity: 0; }/* Starts moving after 16% to this position */

   20% { top: 0px; opacity: 1; }

   24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/

   36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */

   40% { top: 150px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */

   41% { top: -150px; opacity: 0; z-index: -1; }   /* Return to Original Position */

   100%{ top: -150px; opacity: 0; z-index: -1; }

}



@keyframes cyclethree {

   0%  { top: -150px; opacity: 0; }

   36% { top: -150px; opacity: 0; }

   40% { top: 0px; opacity: 1; }

   44% { top: 0px; opacity: 1; } 

   56% { top: 0px; opacity: 1; } 

   60% { top: 150px; opacity: 0; z-index: 0; }

   61% { top: -150px; opacity: 0; z-index: -1; } 

   100%{ top: -150px; opacity: 0; z-index: -1; }

}



@keyframes cyclefour {

   0%  { top: -150px; opacity: 0; }

   56% { top: -150px; opacity: 0; }

   60% { top: 0px; opacity: 1; }

   64% { top: 0px; opacity: 1; }

   76% { top: 0px; opacity: 1; z-index: 0; }

   80% { top: 150px; opacity: 0; z-index: 0; }

   81% { top: -150px; opacity: 0; z-index: -1; }

   100%{ top: -150px; opacity: 0; z-index: -1; }

}

@keyframes cyclefive {

   0%  { top: -150px; opacity: 0; }

   76% { top: -150px; opacity: 0; }

   80% { top: 0px; opacity: 1; }

   84% { top: 0px; opacity: 1; }

   96% { top: 0px; opacity: 1; z-index: 0; }

   100%{ top: 150px; opacity: 0; z-index: 0; }

}



.progress-bar { 

   position: relative;

   top: -5px;

   width: 100%; 

   height: 5px;

   background: #000;

   animation: fullexpand 25s ease-out infinite;

}



@keyframes fullexpand {

   /* In these keyframes, the progress-bar is stationary */

   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }



   /* In these keyframes, the progress-bar starts to come alive */

   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }



   /* In these keyframes, the progress-bar moves forward for 3 seconds */

   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }



   /* In these keyframes, the progress-bar has finished his path */

   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }



   /* In these keyframes, the progress-bar will disappear and then resume the cycle */

   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }

}



#prom .tooltip {

   background: rgba(0,0,0,0.7);

   width: 280px;

   height: 150px;

   position: relative;

   bottom: -160px;

}



#prom .tooltip h1 {

   color: #fff;

   font-size: 24px;

   font-weight: 280;

   line-height: 150px;

   padding: 0 0 0 10px;

   z-index: 9999;

}



#prom .tooltip {

   transition: all 0.3s ease-in-out; 

}



#prom li#first: hover .tooltip, 

#prom li#second: hover .tooltip, 

#prom li#third: hover .tooltip, 

#prom li#fourth: hover .tooltip, 

#prom li#fifth: hover .tooltip {

   left: 0px;

}



#prom: hover li, 

#prom: hover .progress-bar {

   animation-play-state: paused;

}



.newsletter form {

	/*background:#252626;

	border:1px solid #252626;

	border-bottom:1px solid #474b4c;

	border-radius:4px;

	overflow:hidden;

	padding:2px;*/

}



.newsletter {

	background-color: #1abc9c;

}



.message {

	padding: 30px 0 30px 0;

	color: #ffffff;

	line-height: 1.5;	

}



.message h2 {

	font-size: 24px;

	color: #fff;

}



.message h4 {

	font-weight: normal;

	font-size: 14px;

	color: #fff;

}



.sub-nl {

	padding-top: 30px;

}



.message .form-control {

    border-width: 2px;

    border-radius: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

    border-color: #ffffff;

}



.message .form-control:focus {

    border-color: #18aac0;

    -webkit-box-shadow: none;

    box-shadow: none;

}



.btn-nw {

    padding: 5px 20px;

    font-size: 14px;

}



.loginform {

  padding: 10px;

}



.nav > li {

  padding: 0px 0px;

}



.navbar-nav > li > a {

  color: #158cba !important;

  margin-left: 10px;

}







.navbar-nav > li > a:hover {

  color: #317589;

}



.list-newmember {

  font-size: 11px;

}



h4.ngawur {

  margin-top: 0px !important;

}



.picgal {

  margin-bottom: 20px;

}



#dropdownlogin {

  min-width: 200px !important;

}



.navbar-form {

  background: #FFFFFF;

}



#topheader {

  background: #264348;

  padding: 10px;

  color:#FFFFFF;

}



#mainnavigation {

  padding: 10px;

}