/*
	Ubuntu:300,300i,400,500,700
*/

html {
	font-size: 16px;
}

body {
	font-family: 'Ubuntu', sans-serif;
	font-size: 16px;
	line-height: 1.25rem;
	color: #474747;
}

h1 {
	font-size: 2.75rem;
	font-weight: 300;
	margin-bottom: 40px;
	color: #B20202;
}

header h1 {
	font-size: 3.25rem;
	/*font-weight: 300;*/
	letter-spacing: -0.07143rem;
	color: #fff;
	margin-bottom: 8px;
}

h2 {
	font-size: 2.75rem;
	font-weight: 300;
	color: #963c3c;
	margin-bottom: 40px;
}

#intro h2 {
	margin-top: 70px;
}

h4 {
	font-size: 1.375rem;
	text-transform: uppercase;
}

h5 {
	position: relative;
	font-size: 1rem;
	font-weight: 400;
	/*text-transform: uppercase;*/
}

h6 {
	font-size: 0.8571rem;
	text-transform: uppercase;
	color: #389AC2;
}

.related h6 {
	margin-bottom: 20px;
}


p, li {
	font-size: 1rem;
	line-height: 1.75rem;
	font-weight: 400;
}

p.lead-in {
	font-size: 2rem;
	line-height: 2.875rem;
	font-style: italic;
	color: #963c3c;
}

.related p {
	font-size: 1rem;
	line-height: 1.6rem;
}

main ul {
	margin-top: 20px;
	padding-left: 22px;
}

main li {
	margin-bottom: 10px;
}


a {
	color: #963c3c;
	/*transition: all .35s;*/
	transition: color .15s ease-in-out,
	background-color .15s ease-in-out,
	border-color .15s ease-in-out,
	box-shadow .15s ease-in-out;
}

a:hover {
	color: #B20202;
	text-decoration: none;
}

a.btn:hover {
	opacity: 1;
}

hr {
    margin-top: 3rem;
    margin-bottom: 3rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}

hr.tall {
    margin-top: 6rem;
    margin-bottom: 6rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}

.spacer {
    padding-bottom: 3rem;
}

.btn {
	font-weight: 500;
	border: 1px solid transparent;
	border-radius: 1px;
	padding: .75rem 1rem;
	font-size: 1rem;
	line-height: 1.5;
	text-transform: uppercase;
	/*width: 100px;*/
}

.btn-primary {
	color: #474747;
	background-color: #ffffff;
	border-color: #ffffff;
}

.btn-primary:hover {
	color: #474747;
	background-color: #ffffff;
	border-color: #ffffff;
}

.btn span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn span:after {
  font-family: FontAwesome;
  font-size: 1.4rem;
  line-height: 1.5rem;
  content: '\f105';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btn:hover span {
  padding-right: 25px;
}

.btn:hover span:after {
  opacity: 1;
  right: 0;
}

.gray {
	background-color: #F5F5F5;
}




/*
	###################################
	HEADER / NAVIGATION
	###################################
*/

.bg-light {
    /* background: rgb(230,230,230) !important; */
    background: linear-gradient(0deg, rgba(230,230,230,1) 0%, rgba(250,250,250,1) 100%) !important;
    border-bottom: 7px solid #B20202;
}

.navbar-brand {
	margin-left: 1rem;
}

.navbar-brand img {
	height:70px;
}

.navbar {
    padding: 3rem 1rem;
}

.navbar-nav {
    padding-top: 0rem;
}

.navbar-light .navbar-nav .nav-link {
    font-size: 1.125rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #474747;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.navbar-light .navbar-nav .nav-link:before {
	content: '';
	position: absolute;
	left: 0px;
	top: 0px;
	height: 45px;
	background-color: #D5D5D5;
	width: 1px;
}

.navbar-light .navbar-nav .nav-item:first-child .nav-link:before {
	display: none;
}

.navbar-light .navbar-nav .last .nav-link:after {
	content: '';
	position: absolute;
	right: 0px; top: -100px;
	height: 130px;
	background-color: #D5D5D5;
	width: 1px;
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
    color: #474747;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #B20202;
}

.dropdown-menu {
    padding: 1rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: .25rem;
}

.dropdown-item {
	font-size: 0.875rem;
	text-transform: uppercase;
    padding: .25rem 1.5rem;
    font-weight: 400;
    color: #474747;
}

.dropdown-item .fas {
	margin-right: 5px;
}

img.dropdown-item {
	display: inline-block;
	margin-top: 20px;
}

.dropdown-menu img.dropdown-item:first-child {
	margin-top: 0px;
}


img.dropdown-item {
	margin-bottom: 10px;
}

img.dropdown-item#oki {
	width: 102px;
}

img.dropdown-item#xerox {
	width: 130px;
}

img.dropdown-item#kardex-group {
	width: 180px;
}

img.dropdown-item#kardex-remstar {
	width: 210px;
}



/*
	###################################
	FOOTER
	###################################
*/

section#callout-support .container {
	margin-top: 30px;
	padding: 30px 0;
	background-color: #B20202;
	font-size: 1.875rem;
	font-weight: 500;
	color: #ffffff;
	text-align: center;
}

section#callout-support .container span {
	display: inline-block;
	font-size: 1.75rem;
	font-weight: 300;
	margin-left: 20px;
}

section#callout-support .container img,
section#callout-support .container .btn {
	margin-left: 20px;
}

footer {
	color: #fff;
	margin-top: 30px;
}

footer .container {
	padding: 0 30px;
	background-color: #181818;
	border-bottom: 10px solid #B20202;
}

footer #footer-top {
	padding-top: 20px; 
	padding-bottom: 20px; 
}

footer #footer-top img {
	height: 40px;
}

footer #footer-middle {
	padding-top: 30px; 
}

footer #footer-bottom {
	padding: 20px 0;
	text-transform: uppercase;
	border-top: 1px solid #BABABA;
}

footer #footer-bottom ul.list-inline {
	margin-bottom: 0;
}

footer #footer-bottom,
footer #footer-bottom a {
	font-size: 0.875rem; 
	color: #BABABA;
}

footer ul#footer-menu-main {
    /*column-count: 3;*/
}

footer ul#footer-menu-main a {
    margin-right: 20px;
}

footer ul#social-links a {
    font-size: 2.3rem;
    margin-left: 1.5rem;
    color: #BABABA;
}

footer .nav-footer a {
    display: inline-block;
    margin-bottom: 14px;
}

footer a {
	color: #fff;
	text-transform: uppercase;
}

footer a:hover,
footer ul#social-links a:hover,
footer #footer-bottom a:hover {
	color: #E5E5E5;
	text-decoration: none;
}


/*
	###################################
	JUMBOTRONS
	###################################
*/

#homepage .jumbotron {
  background-image: url("../images/bg-homepage.jpg");
  background-size: cover;
  background-position: bottom;
  min-height: 250px;
  height: auto;
  margin-bottom: 0;
}

#news .jumbotron {
  background-image: url("../images/bg-default-red.jpg");
}

#contact .jumbotron {
  background-image: url("../images/bg-default-green.jpg");
}

.jumbotron {
  background-image: url("../images/bg-default.jpg");
  background-size: cover;
  background-position: bottom;
  /*background-attachment: fixed;*/
  height: 335px;
  border-radius: 0;
  margin-bottom: 90px;
}

@media (min-width: 576px) {
	.jumbotron {
	    padding: 2rem 2rem;
	}
}


/*
	###################################
	HOMEPAGE
	###################################
*/

#homepage .call-out {
	/* background-color: #892057; */
	background: rgb(230,230,230);
    background: linear-gradient(0deg, rgba(230,230,230,1) 0%, rgba(255,255,255,1) 100%);
	padding: 55px 35px;
}

#homepage .call-out h1 {
	font-size: 2.5rem;
	color: #B20202;
	line-height: 2.625rem;
	font-weight: 300;
	margin-bottom: 20px;
}

#homepage .call-out p {
	display: block;
	font-size: 0.875rem;
	line-height: 1.5rem;
	/*color: #fff;*/
	margin-bottom: 20px;
}

#homepage #overview {
	padding-top: 30px;
}

/*
#homepage #overview .card-deck .card:first-child {
	margin-left: 0;
	background-color: #00296A;
}

#homepage #overview .card-deck .card:last-child {
	margin-right: 0;
	background-color: #474747;
}
*/

#homepage #overview .card {
	margin: 0px 10px 30px 10px;
	border: 0;
	border-radius: 0;
	/* background-color: #892057; */
	background: rgb(230,230,230);
    background: linear-gradient(0deg, rgba(230,230,230,1) 0%, rgba(255,255,255,1) 100%);
    border-bottom: 4px solid #B20202;
}

#homepage #overview .card .card-header,
#homepage #overview .card .card-footer {
	padding: 0;
	border: 0;
	background-color: inherit;
}

#homepage #overview .card .card-footer {
	padding: 0 0 0 35px;
}

#homepage #overview .card .card-body {
	padding: 25px 35px;
}

#homepage #overview .card .card-body a {
	display: block;
	margin-top: 10px;
}

#homepage #overview h5 {
	font-size: 1.5rem;
	color: #B20202;
	/*font-weight: 400;*/
	margin-bottom: 10px;
}

#homepage #overview p {
	font-size: 0.875rem;
	line-height: 1.5rem;
	/*color: #ffffff;*/
	margin-bottom: 0px;
}

/*
#homepage #overview .solution-wide:last-child {
	background-color: #00296A;
}
*/

#homepage #overview .solution-wide {
	/*background-color: #892057;*/
	background: rgb(230,230,230);
    background: linear-gradient(0deg, rgba(230,230,230,1) 0%, rgba(255,255,255,1) 100%);
	margin-bottom: 30px;
	min-height: 350px;
	border-bottom: 4px solid #B20202;
}

#homepage #overview .solution-wide .solution-image {
	padding: 0;
}

#homepage #overview .card-img-top {
	border-top-left-radius: 0; 
	border-top-right-radius: 0;
	filter: grayscale(40%);
}

#homepage #overview img {
	height: 100%;
}

#homepage #overview .solution-wide .solution-body {
	padding: 35px;
}

#homepage #overview .solution-wide .solution-body h5 {
	font-size: 1.75rem;
}

#homepage #overview .solution-wide .solution-body p {
	font-size: 0.875rem;
	line-height: 1.5rem;
	margin-bottom: 35px;
}

#homepage #news-reel {
	font-size: 1rem;
}

#homepage #news-reel .container {
	padding: 40px 50px 30px 50px;
	background-color: #F5F5F5;
}

#homepage #news-reel .container div {
	padding-left: 0px;
}

#homepage #news-reel .container > div:first-child {
	margin-bottom: 40px;
	border-bottom: 3px solid #ccc;
}

#homepage #news-reel h4 {
	position: relative;
	color: #474747;
}

#homepage #news-reel .news-item {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #E0E0E0;
}

#homepage #news-reel a {
	color: #D0021B;
}

#homepage #news-reel a:hover {
	color: #ad0015;
}


/*
	###################################
	ABOUT US
	###################################
*/


section#partners {
	margin-top: 120px;
	margin-bottom: 80px;
	padding-bottom: 80px
}

section#partners h2 {
	margin-top: 80px;
	margin-bottom: 100px;
}

section#partners img.partner-logo {
	margin-bottom: 50px;
}

section#partners .partner-images img {
	margin-bottom: 30px;
}

section#partners h5 {
	margin-top: 50px;
}

section#partners .fas {
	margin-right: 5px;
}



/*
	###################################
	SOLUTIONS
	###################################
*/

#solution #intro, 
#solutions-list #intro {
	margin-top: 60px;
}

#solution #intro img.solution-logo, 
#solutions-list #intro img.solution-logo {
	margin-top: 15px;
	margin-bottom: 50px;
}

#solution #intro p.lead-in, 
#solutions-list #intro p.lead-in {
	margin-bottom: 50px;
}

section#solution-highlights {
	margin-top: 120px;
	margin-bottom: 120px;
	padding-bottom: 80px
}

#solutions-list section#solution-highlights {
	padding-top: 120px
}

section#solution-highlights h2 {
	margin-top: 80px;
	margin-bottom: 100px;
}

section#solution-highlights h5 {
	margin-top: 50px;
}

section#solution-highlights .solution-description {
	margin-bottom: 50px;
}

section#solution-highlights .solution-highlight {
	margin-bottom: 80px;
}

section#solution-highlights .solution-highlight h5 {
	font-size: 1.125rem;
	margin-top: 20px;
}

#solutions-list section#solution-highlights .solution-highlight h5 {
	color: #0875AD;
	font-size: 1.625rem;
	font-weight: 400;
	text-transform: none;
	margin-top: 30px;
}

section#solution-highlights .solution-highlight p {
	font-size: 0.875rem;
	line-height: 1.25rem;
	margin-top: 10px;
}

section#solution-highlights .solution-highlight p .fas {
	margin-right: 5px;
}

/*  GRID  */

section#product-grid {
	margin-bottom: 80px;
}

section#product-grid h2 {
	margin-bottom: 80px;
}

section#product-grid .product-overview-row:nth-child(even) .product-overview:nth-child(odd),
section#product-grid .product-overview-row:nth-child(odd) .product-overview:nth-child(even){
  background-color: #F5F5F5;
}

@media (max-width: 992px) {
	section#product-grid .product-overview-row:nth-child(even) .product-overview:nth-child(odd),
	section#product-grid .product-overview-row:nth-child(odd) .product-overview:nth-child(odd){
	  background-color: #F5F5F5;
	}
	section#product-grid .product-overview-row:nth-child(odd) .product-overview:nth-child(even),
	section#product-grid .product-overview-row:nth-child(even) .product-overview:nth-child(even){
	  background-color: #fff;
	}
}

section#product-grid .product-overview {
	padding: 50px 50px 30px;
}

section#product-grid .img-fluid,
section#product-list .img-fluid {
	/*mix-blend-mode: darken;*/
	mix-blend-mode: multiply;
}

 section#product-grid .product-highlight {
 	font-size: 1.875rem;
 	font-weight: 700;
 	margin-top: 30px;
 }

 section#product-grid .product-highlight small {
 	display: block;
 	font-size: 0.875rem;
 	text-transform: uppercase;
 	margin-bottom: 5px;
 }

 section#product-grid .product-highlight sup {
 	font-size: 0.7rem;
 	font-weight: 400;
 	top: -1rem;
 }

  section#product-grid .product-description {
 	margin-top: 50px;
 }

  section#product-grid .product-description h5 {
 	text-transform: none;
 }

  section#product-grid .product-description p,
  section#product-grid .product-description li   {
 	font-size: 0.875rem;
 	line-height: 1.25rem;
 }

 section#product-grid .product-description a.product-link,
 section#product-list a.product-link,
 .solution-highlight a.product-link {
	display: block;
	font-size: 1rem;
	margin-bottom: 5px;
 }

 section#product-grid .product-description a.product-link .fas,
  section#product-list a.product-link .fas,
 .solution-highlight a.product-link .fas  {
	margin-right: 5px;
}


/*  LIST  */


section#product-list {
	margin-top: 120px;
	margin-bottom: 80px;
	padding-bottom: 50px;
}

section#product-list h2 {
	margin-top: 80px;
	margin-bottom: 100px;
}

section#product-list h3 {
	margin-bottom: 30px;
}


/*
	###################################
	TEXT PAGES
	###################################
*/



/*
	###################################
	NEWS LIST
	###################################
*/

section#news-list {
    margin-top: 80px;
}

.news-item {
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.news-date {
	font-size: 1rem;
    color: #963c3c;
}

.news-item h5 {
	font-size: 1.25rem;
	font-weight: 700;
    text-transform: none;
    margin-top: 0;
    margin-bottom: 15px;
}

.news-item h5 a {
    color: #963c3c;
}

.news-item h5 a:hover {
    color: #B20202;
}

.news-item p {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.news-item p > a {
    display: block;
    margin-top: 5px;
}


/*
	###################################
	CONTACT
	###################################
*/

section#contact-form {
	margin-top: 80px;
}

.contact-information p {
	margin-bottom: 40px;
}


.contact{
	max-width: 970px;
	margin:50px auto 0;
}

input,textarea,button{
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.contact form .form{
	width:100%;
	height: auto;
	padding:15px 15px 12px;
	font-size:18px;
	margin-bottom:18px;
	color:#7f7f7f;
	letter-spacing: 0.5px;
}

.light-form{
	background:#fafafa;
	border:1px solid #eeeeee;
}

.dark-form{
	background-color:transparent;
	border:1px solid #2e2e2e;
}

.contact form .textarea{
	height: 201px;
	max-width: 100%;
	max-height: 201px;
}

.contact form button.contact-form-button{
	margin-bottom:0;
}

#subscribe form .subscribe-form{
	width:100%;
	height: auto;
	padding:15px 15px 12px;
	font-size:18px;
	margin-bottom:18px;
	color:#7f7f7f;
	letter-spacing: 0.5px;
}

/* Actives, Focuses and Rollovers */

.contact form .form:active,
.contact form .form:focus{
	outline: none;
}

.contact form button.contact-form-button:hover{
	color:white;
}

.contact form .light-form:hover{
	border-color:#dadada;
}

/* Message For Mail */

.mail-message-area{
	width:100%;
	padding:0 15px;
}

.mail-message{
	width: 100%;
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	transition: all 0.7s;
	margin:0 auto;
	border-radius: 0;
}

.not-visible-message{
	height:0px;
	opacity: 0;
}

.visible-message{
	height:auto;
	opacity: 1;
	margin:25px auto 0;
}

.contact span {
	display:none;
	font-size:12px;
	line-height:30px;
	color:red;
}

section#contact-map .container-fluid {
	padding: 0;
}

.map-responsive{
    overflow:hidden;
    padding-bottom:50%;
    position:relative;
    height:0;
    margin: 100px -15px 0;
    /*margin-bottom: -100px;*/
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}