/**
 * GENERAL STYLES
 *
 * Styling of general elements which doesn't belong to a specific area
 *
 * @since 1.0.0
 */

body { min-width: 320px; min-height: 100vh; color: #444; font-weight: 100; }

.page-content { text-align: justify; }
.page-content strong { font-weight: bold; }

h1.page-content-headline,
h2.page-content-headline,
h3.page-content-headline,
h4.page-content-headline,
h5.page-content-headline,
h6.page-content-headline { font-weight: 200; text-align: center; margin: 60px 0 20px; }
h1.page-content-headline > span,
h2.page-content-headline > span,
h3.page-content-headline > span,
h4.page-content-headline > span,
h5.page-content-headline > span,
h6.page-content-headline > span { display: block; width: 20%; height: 1px; background: #444; margin: 10px auto 0; }
h2.page-content-headline { font-size: 1.8rem; }
h3.page-content-headline { font-size: 1.6rem; }
h4.page-content-headline { font-size: 1.4rem; }
h5.page-content-headline { font-size: 1.2rem; }
h6.page-content-headline { font-size: 1rem; }

a { 
	-webkit-transition: color 0.5s ease-in-out;
	-moz-transition: color 0.5s ease-in-out;
	-ms-transition: color 0.5s ease-in-out;
	-o-transition: color 0.5s ease-in-out;
	transition: color 0.5s ease-in-out;
}
a:hover { text-decoration: none; }

#subpage-imprint { margin-bottom: 100px; }

.clear { clear: both; }
 
 
/**
 * HEADER AREA
 *
 * Styles for heading area, containing logo and trusted bades
 *
 * @since 1.0.0
 */

#header-logo, #header-seals { padding-top: 15px; padding-bottom: 15px; }
#header-logo > a { display: inline-block; text-decoration: none; }
#header-logo > a > img { height: 50px; max-height: 50px; max-width: 100%; }

#header-seals { text-align: right; }
#header-seals > img { display: inline-block; margin-left: 15px; max-height: 50px; }
#header-seals > img:first-of-type { margin-left: 0; }


/**
 * HERO IMAGE AREA
 *
 * A full-width banner image with some introduction text on it
 *
 * @since 1.0.0
 */
 
#hero-image { position: relative; background-color: #ddd; background-repeat: no-repeat; background-position: 50%; background-size: cover; background-image: url('../img/hero-image.jpg'); margin-bottom: 50px; }
#hero-image > .overlay-background { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .50); z-index: 5; }
#hero-image-content { position: relative; z-index: 10; }
#hero-image-caption { position: relative; color: #fff; height: 300px; }
#hero-image-caption > h1 { position: relative; top: 50%; font-size: 1.5em; font-size: 2rem; font-weight: 300; text-shadow: 1px 1px 1px #333; text-transform: capitalize; margin: 0; text-align: center;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
#hero-image-caption > h1 > span { display: block; width: 20%; height: 3px; background: #fff; margin: 10px auto 0; -webkit-box-shadow: 1px 1px 3px 0 #333; box-shadow: 1px 1px 3px 0 #333; }


/**
 * ONLINE-SHOP LIST
 *
 * A list of all available TonerPartner online-shops
 *
 * @since 1.0.0
 */
 
#store-list-wrap { position: relative; z-index: 15; -webkit-box-shadow: 0 0 5px 0 #999; box-shadow: 0 0 5px 0 #999; -webkit-border-radius: 8px; border-radius: 8px; overflow: hidden;
	-moz-transform: translateY(-152px);
	-webkit-transform: translateY(-152px);
	-o-transform: translateY(-152px);
	-ms-transform: translateY(-152px);
	transform: translateY(-152px);
}
#store-list-heading { background: #eee; padding: 15px; }
#store-list-heading > h2 { margin: 0; font-weight: 200; font-size: 1.2rem; }
#store-list { background: #f9f9f9; border-width: 0 1px 1px 1px; border-style: solid; border-color: #eee; }
.store-list-row { padding: 8px 15px; }
.store-list-row > .store-list-flag { width: 48px; padding-right: 15px; float: left; min-height: 33px; }
.store-list-row > .store-list-flag > img { width: 33px; }
.store-list-row > .store-list-flag > span { display: none; font-size: 0.8rem; }
.store-list-row > .store-list-country,
.store-list-row > .store-list-url { width: calc(50% - 24px); font-size: 0.8rem; float: left; min-height: 33px; padding: 7px 0; }
.store-list-row > .store-list-country > p { margin-bottom: 0; }
.store-list-row > .store-list-url > a { font-weight: 600; }
#store-list > article:nth-of-type(2n) { background: #f1f1f1; }
#store-list > article.active { background: #dff0d8; }


/**
 * ADVANTAGES AREA
 *
 * Containing some trusted elements with advantages
 *
 * @since 1.0.0
 */
#advantages-area { padding-top: 60px; padding-bottom: 60px; position: relative; z-index: 5; }
#advantages-area > .row { height: 150px; background: #000; }
#advantages-area > .row > #advantages-wrap { width: 1140px; position: absolute; top: 0; bottom: 0; left: 50%; padding: 0 15px;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
#advantages-wrap > div.container-fluid > div.row > div { -webkit-box-shadow: 0 0 5px 0 #999; box-shadow: 0 0 5px 0 #999; position: relative; color: #fff; text-align: center; text-shadow: 1px 1px 1px #777; }
#advantages-wrap > div.container-fluid > div.row > div h4.page-content-headline > i { margin-right: 5px; }
#advantages-wrap > div.container-fluid > div.row > div h4.page-content-headline > span { background: #fff; -webkit-box-shadow: 1px 1px 3px 0 #333; box-shadow: 1px 1px 1px 0 #777; }
#advantages-wrap > div.container-fluid > div.row > div a { color: #ddd; font-weight: bold; }
#advantages-wrap > div.container-fluid > div.row > div a:hover { color: #fff; }
#advantages-wrap > div.container-fluid > div.row > div:nth-of-type(1) { height: 230px; margin: 20px 0; background: #368dbe; -webkit-border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px; z-index: 5; }
#advantages-wrap > div.container-fluid > div.row > div:nth-of-type(2) { height: 270px; margin: 0; background: #b42178; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; z-index: 10; } 
#advantages-wrap > div.container-fluid > div.row > div:nth-of-type(3) { height: 230px; margin: 20px 0; background: #dad00b; -webkit-border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0; z-index: 5; }


/**
 * FOOTER AREA
 *
 * Containing links to legal information
 *
 * @since 1.0.0
 */
#page-footer { margin-top: 50px; font-size: 0.8rem; color: #999; }
#page-footer a { color: #999; }
#page-footer a:hover { color: #666; }
#page-footer p { margin: 0; }
#page-footer .footer-contact { white-space: nowrap; }
#footer-menu, #footer-webtracking { padding-top: 15px; padding-bottom: 15px; }
#footer-webtracking { text-align: right; }
#footer-webtracking button { background: transparent; border: 2px solid #bbb; color: #bbb; cursor: pointer; }