/*!
 * Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* fonts */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic);

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');

/***************************
************** Global Styles 
****************************/

html,
body {
    height: 100%;
	color: #cccccc;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 14px;
	line-height: 1.8em;
	font-weight: 300;
	
	
	background-image: url("../img/custom_site/bg-body.png");
	background-repeat: repeat-x;
	background-position: top;
	background-color: #E7E7E7;
}

p {padding-bottom: 0.5em}


/*//// Navigation ///*/

nav { 
	margin-top: 80px;
	font-size: 12px;
}

.navbar { 
	margin-bottom: 0;
}


/* Navigation | vertical line separator */

@media only screen and (min-width: 992px) {
  .navbar .navbar-nav .nav-item .nav-link {
    padding: 0 01em;
  }
  .navbar .navbar-nav .nav-item:not(:last-child) .nav-link {
    border-right: 1px solid #ffffff;
  }
}

/* Navigation link color and hover */
ul.nav a.nav-link {color: #ffffff}

ul.nav a:hover.nav-link {color: #D1D1D1}


/* top padding links on nav-bar */
 .navbar-right {
    padding-top: 14px;
}

@media only screen and (max-width: 991px) {
	  .navbar-right {
    	padding-top: 0;
	}
}

/*
.bg-navbar {
	background: #ff0000;
    background: linear-gradient(180deg,rgba(255, 0, 0, 1) 0%, rgba(179, 7, 0, 1) 81%);
}
*/

.navbar-inverse {
	border: none;
	border-radius: 0px;
	
	background: #ff0000;
    background: linear-gradient(180deg,rgba(255, 0, 0, 1) 0%, rgba(179, 7, 0, 1) 81%);
}

/* ////// navbar brand logo ////// */

.navbar-brand {
  background: url("../img/custom_site/logo-pph.software.png") center / contain no-repeat;
  width: 512px; 
  height: 131px;
  text-indent: -5000px;
  margin-top: -80px
}

@media only screen and (max-width: 1200px) {
	  .navbar-brand {
	  width: 321px; 
	  height: 82px;
	  text-indent: -5000px;
	  margin-top: -27px
	 }
	nav {
	  margin-top: 45px;
	}
	
}

@media only screen and (max-width: 991px) {
	  .navbar-brand {
	  width: 300px; 
	  height: 77px;
	  text-indent: -5000px;
	  margin-top: -25px
	 }
		
	nav {
	  margin-top: 45px;
	}
}

@media only screen and (max-width: 767px) {
	  .navbar-brand {
	  width: 300px; 
	  height: 77px;
	  text-indent: -5000px;
	  margin-top: -27px
	 }
		
	nav {
	  margin-top: 40px;
	}
	
}


/* links body default */

a:link {color: #F30 }
a:hover {color: #F30}
a:visited {color: #F30}
a:active {color: #F30}


/* Top right links */

.top-right-links {
	position: absolute;
    top: 0;
    right: 0;
    padding-top: 40px;
	padding-right: 20px;
	color: #333;
}

.top-right-links ul.list-inline li a { color: #888;}
.top-right-links ul.list-inline li a:hover { color: #fff;}


.col-centered{
    float: none;
    margin: 0 auto;
}


@media only screen and (max-width: 1200px) {
	.top-right-links {
	padding-right: 8px;
	padding-top: 6px;
	}
}

@media only screen and (max-width: 991px) {
	.top-right-links {
	padding-right: 8px;
	padding-top: 6px;
	}
}

.dark-bg {
	
	background-color: #121212;
	padding-top: 50px;
	padding-bottom: 50px;
}

h1, h2, h3, h4, h5 { color: #ffffff; padding-bottom: 10px}

hr {
	border: 1px solid #555;
}



/*****************************************************************************
**************** Home Page Carousel from modern-business bootstrap ***********
******************************************************************************/


/*.carousel-control { display: none;}*/

.carousel-indicators li { border: 1px solid #555;}
.carousel-indicators .active { background-color: #555;}

header.carousel {
    height: 50%;
    margin-bottom: 0px;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
    height: 100%;
	
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
}

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

header.carousel .item:nth-child(1) .fill{
    background-image: url('../img/custom_site/slider-index-01.png');
}

header.carousel .item:nth-child(2) .fill{
    background-image: url('../img/custom_site/slider-index-02.png');
}

header.carousel .item:nth-child(3) .fill{
    background-image: url('../img/custom_site/slider-index-03.png');
}



/**************************
caption vertically centered on bootstrap slider
http://jsfiddle.net/n86hLyLu/1/
**************************/
.carousel-caption {
    position: absolute;
    top: 0;
	height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
	margin-bottom: 20px;
	text-align:center;
	letter-spacing: 0.3em;
}


#myCarousel3 {
	background-color: #222222;
}

#myCarousel3 img {max-height: 398px;}

/******************************************************/


/* img menu */
.img-menu { display: inline}




footer {
	background-color: #E7E7E7;
	background-image: url("../img/custom_site/bg-footer.png");
	background-repeat: repeat-x;
	background-position: top;
}

footer {
	color: #444
}

footer a {
	color: #444
}

.menu-footer {
	padding-top: 30px;
	padding-bottom: 50px;
}

footer a.nav-link {
	color: #333;
}

footer a:hover.nav-link {
	color: #F30;
	text-decoration: none;
}

footer .menu-footer ul.list-inline li.nav-item {
	padding-left: 0;
	padding-right: 0;
}

/* Footer Menu | vertical line separator */

@media only screen and (min-width: 992px) {
  footer li.nav-item a.nav-link {
    padding: 0 01em;
  }
  footer li.nav-item:not(:last-child) .nav-link {
    border-right: 1px solid #333;
  }
}


.footer-banner img {
	margin-bottom: 40px;
}


/* responsive styles */

@media(max-width:991px) {
			
}


/* Responsive Styles */

@media(max-width:991px) {
    
}
.btn-login{
	color: #fff;
	border-right: none !important;
    border: 2px solid #fff !important;
    font-weight: 600;
}
@media(max-width:767px) {
    

    header.carousel {
        height: 30%;
		max-height: 200px;
    }
	
	.center-block h3 {display: none;}
	
	
	.btn-login{
		border: none !important;
		font-weight: unset !important;
	}
}