/*!
 * 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: #111;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.5em;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,e2e2e2+8,333333+25,333333+75,d1d1d1+90,fefefe+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(226,226,226,1) 8%, rgba(51,51,51,1) 25%, rgba(51,51,51,1) 75%, rgba(209,209,209,1) 90%, rgba(254,254,254,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(226,226,226,1) 8%,rgba(51,51,51,1) 25%,rgba(51,51,51,1) 75%,rgba(209,209,209,1) 90%,rgba(254,254,254,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(226,226,226,1) 8%,rgba(51,51,51,1) 25%,rgba(51,51,51,1) 75%,rgba(209,209,209,1) 90%,rgba(254,254,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fefefe',GradientType=1 ); /* IE6-9 */


}

/* generic links */
a {
    color: #666;
    text-decoration: none;
}

a:focus, a:hover { 
	color: #ff5700; text-decoration: none;
}


.col-lg-3.rules a {line-height: 2em}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	line-height: 1.5em;
	margin-bottom: 20px;
	margin-top: 0;
	font-weight:500;
	font-family: Roboto, sans-serif;
	color: #111111;
}

.h2, h2 {font-size: 25px; text-transform: uppercase; letter-spacing: 0em}

.h3, h3 {font-size: 18px; background: #3f465a; padding-top: 1em; padding-bottom: 1em; color: #fff; text-transform: uppercase}

.h4, h4 {font-size: 20px; color: #008EB6}

.h5, h5 {font-size: 20px; text-transform: uppercase; color: #111;}

.h6, h6 {font-size: 17px; color: #111;}

ul li a:link {color: #0867E3}
ul li a:hover {color: #0BA2EB}

.page-header {
    border-bottom: 1px solid #eee;
    margin: 10px 10px 30px;
    padding-bottom: 9px;
}

p {
	text-align: justify;
    text-justify: inter-word;
}

.page-container {
	padding-top: 4em;
	padding-bottom: 4em;
	background: #fff;
}

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

.join-button-bg {background: #fff;}


.cashier-bg01 {
	background: #fff;
	padding: 1em;
	border: 1px solid #ccc;
	padding: 2em;
	min-height: 290px;
}

.cashier-bg02 {
	background: #ededed;
	padding: 1em;
	border: 1px solid #ccc;
	padding: 2em;
	min-height: 290px;
}

/* equal height columns for cashier page */
.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

/************* custom margin bottom classes to create vertical space ****************/
.margin-bottom-20 { margin-bottom: 2.0em; }
.margin-bottom-30 { margin-bottom: 3.0em; }
.margin-bottom-40 { margin-bottom: 4.0em; }
.margin-bottom-50 { margin-bottom: 5.0em; }

.margin-top-10 { margin-top: 1.0em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-30 { margin-top: 3.0em; }
.margin-top-40 { margin-top: 4.0em; }
.margin-top-50 { margin-top: 5.0em; }



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


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

#myCarousel {padding: 0px}

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

header.carousel {
    height: 55%;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
    height: 100%;
}

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.jpg');
}

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

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

header.carousel .item:nth-child(4) .fill{
    background-image: url('../img/custom_site/slider-index-04.jpg');
}

/**************************
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;
}


/* this style makes homepage carousell vertically taller 70% or whatever you want */
header.carousel.tallercarousel {height:70%; min-height: 350px;}



/*************** carousel-promo ***************/

#carousel-promo.carousel.slide div.carousel-inner {border-radius: 4px;}




/* Container needed to position the button. Adjust the width as needed */
.container-promo {
  position: relative;
}

/* Make the image responsive */
.container-promo img {
  width: 100%;
  height: auto;
  margin-bottom: 1em;
  margin-top: 1em;
  border: 2px solid #ff5700;
}

/* Style the button and place it in the middle of the container/image */

.container-promo .btn {
  position: absolute;
  top: 75%;
  left: 93%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.container-promo .btn:hover {
  background-color: #fff;
  color: #ff5700;
} 

@media(max-width:991px) {
    .container-promo .btn {
		  position: absolute;
		  top: 50%;
		  left: 20%;
		  transform: translate(-50%, -50%);
		  -ms-transform: translate(-50%, -50%);
		}
}


/********** thumbnails **********/

.thumbnail { 
	background: #222;
	padding: 10px;
	border: none;
}

.thumbnail p{ 
	color: #888;
	font-size: 21px;
	padding-bottom: 30px;
}

.thumbnail h4{ 
	text-align: left;
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}




/*****************************************************************************
**************** Nav New Styles ****************
*****************************************************************************/


.navbar-brand { height: 90px;}
.navbar-nav > li > a { padding-top: 6px; padding-bottom: 6px;}
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {margin-left: 15px;}
.navbar-text {margin-right: 0px; margin-top: 33px;}
.navbar-inverse {
	margin-bottom: 0; 
	border: 0;
	border-radius: 0;
	background: #0f1827;
	padding-bottom: 1em;
	padding-top: 1em;
}
.navbar p {color: #fff}

/**** toggle menu mobile ****/

.navbar-inverse  .navbar-toggle {
    margin-top: 25px;
    margin-right: 0px;
	margin-left: 1px;
	border-color: #ff5700
}

ul.nav.navbar-nav li a:link {color: #ccc;}
ul.nav.navbar-nav li a:visited {color: #ccc;}
ul.nav.navbar-nav li a:hover {color: #ff5700; background: #3f465a}
ul.nav.navbar-nav li a:active {color: #ccc; background: #000}




/****************** buttons ******************/


.btn {padding: 7px 12px; border-radius: 0px;}

.navbar-inverse .btn {margin-left: 1px; margin-right: 1px; margin-top: 25px}

@media(max-width:991px) {
    .menubuttons { text-align: center; margin-top: 0px; margin-bottom: 15px;}
	.menulogo { text-align: center; margin-left: auto; margin-right: auto; display: block}
}

.btn-warning { 
	background: #E81418; 
	border: 0; font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-radius: 4px;
}
.btn-warning:hover { background: #D04447; background: #3f465a;}


.btn-primary { 
	background: #ff5700;
	border: 0; font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-radius: 4px;
}
.btn-primary:hover { border: 0; background: #3f465a;}


.btn-secondary { 
	background: #232b3c;
	border: 0;
	border-right: 1px solid #0f1827;
	border-left: 1px solid #0f1827;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #fff;
	padding-bottom: 1.5em;
	padding-top: 1.5em;
	font-size: 12px;
}

.btn-secondary:hover {background: #3f465a; border: 0; color: #ff5700}
.btn-secondary.active {background: #3f465a; border: 0; color: #ff5700}


/*start styles for secondary buttons menu */
/*remove gutter from columns - main menu buttons */
.no-gutter {
  margin-right: 0px;
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
}

.no-gutter > [class*="col-"] {
  margin-right: 0px;
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
}

/********************************************
**************** Footer *********************
*********************************************/

/* Footer Styles */

footer {
    margin: 50px 0 0 0;
}

.footer-links {background: #0f1827; color: #fff; padding-top: 1em; padding-bottom: 0.5em;}

.footer-info {background: #1e2738; color: #787d87; padding-top: 1em; padding-bottom: 0.5em;}


/* Responsive Styles */

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel {
        height: 30%;
    }
	
	.center-block h3 {display: none;}
	
}