/*****
1. FIND and replace  518891  with primary hex value
***/
:root {
	--o-primary: #518891;
	--o-primary-2: #518891f2; /** f2 = 95% **/
	--o-primary-3: #518891d9; /** d9 = 85% **/
}
.logo-index{
	background: url('logo-index.png') no-repeat center; 
	background-size: contain;
}
.logo-inner{ 
	background: url('logo-inner.png') no-repeat left; 
	background-size: contain;
}
.content-box,
.row.dark,
.nav-tabs>li>a.active, 
.nav-tabs>li>a.active:focus, 
.nav-tabs>li>a.active:hover,
.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:focus, 
.nav-tabs>li.active>a:hover,
.nav-tabs>li>a:hover,
.nav-tabs>li>a:active,
.nav-tabs>li>a:active:focus,
.nav-tabs>li>a:focus {
	background-color: var(--o-primary);
} 
footer.index {
    background: var( --o-primary-2 );
}
.tab-bar {
	background: var( --o-primary-3 );
	opacity:1;
}
.login-box a, .orderNum a, 
h1.formLabel, h1.formLabel.faq,
.breadcrumb > .active,
h1.receiptLabel {
	color: var( --o-primary );
}
.btn-primary, .btn-primary:focus, a.btn-primary, .btn-upload,
.btn-secondary, .btn-secondary:focus, a.btn-secondary,
.btn-info
{
	background-color:var( --o-primary-2 );
	background: -webkit-linear-gradient(top, var( --o-primary-2 ) 1%, var(--o-primary) 100%);
	background: -moz-linear-gradient(top,  var( --o-primary-2 ) 1%, var(--o-primary) 100%);
	background: -o-linear-gradient(top,  var( --o-primary-2 ) 1%, var(--o-primary) 100%);
	background: -ms-linear-gradient(top,  var( --o-primary-2 ) 1%, var(--o-primary) 100%);
	background: linear-gradient(to bottom,  var( --o-primary-2 ) 1%, var(--o-primary) 100%);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:active:focus, a.btn-primary:focus, a:hover.btn-primary, a:focus.btn-primary, 
.btn-upload:hover, .btn-upload:active:focus, .btn-upload:focus,
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:active:focus, a:hover.btn-secondary, a:focus.btn-secondary,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info:active:focus
{
	background: var(--o-primary);
}

/******* Small devices (tablets, 768px and up) ********/
@media (min-width: 768px) {
	.content-box {
	    background-color: var( --o-primary-3 );
	}
	.wrapper-index { 
		background: url('background.jpg') left top;
		background-size: cover;
    	background-repeat: no-repeat;
	}
}
/******* Small devices (tablets, 900px and up) ********/
@media (min-width: 900px) {
	footer.index{
	    background: rgba(0,0,0,.25);
	}
}