.section-products .hero-headline,
.section-it .hero-headline { margin-right:-1em; }

.page-overview .section-overview .section-hero-intro .hero-copy { width: 845px; }

.section-it .section-content .typography-intro {
	width: 490px;
}

@media only screen and (max-width: 1068px) {

	.page-overview .section-overview .section-hero-intro .hero-copy { width: 588px; }

	.section-it .section-content .typography-intro { width: auto; }

    .page-overview .section-it.section-hero .section-hero-headline-format { width: 380px }
}

@media only screen and (max-width: 735px) {
	.page-overview .section-overview .section-hero-intro .hero-copy { width: 90%; }

	.section-products .hero-headline,
	.section-it .hero-headline { margin-right:auto; }

	.page-overview .section-products .column .intro,
	.page-overview .section-it .column .intro { max-width:none; }
	.page-overview .section-it.section-hero .section-hero-headline-format { width: 100% }

}

/* inspiration section */
.page-overview .section-inspiration.section-hero {
    overflow: hidden;
    background-color: #fafafa;
    min-height: 1150px;
    color: #fff;
}
.page-overview .section-inspiration.section-hero .section-hero-link a {
	color: #fff;
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero {
        min-height: 835px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero {
        min-height: 0
    }
}

.page-overview .section-inspiration.section-hero .section-hero-image {
    width: 2560px;
    height: 1153px;
    background-size: 2560px 1153px;
    background-repeat: no-repeat;
    background-image: url("/jp/education/images/overview/inspiration_large.jpg");
    background-position: center center;
    position: absolute;
    top: 0;
    left: auto;
    bottom: 0;
    width: 100%
}

@media only screen and (-webkinspiration-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkinspiration-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        background-image: url("/jp/education/images/overview/inspiration_large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        width: 1068px;
        height: 835px;
        background-size: 1068px 835px;
        background-repeat: no-repeat;
        background-image: url("/jp/education/images/overview/inspiration_medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkinspiration-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        background-image: url("/jp/education/images/overview/inspiration_medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        width: 736px;
        height: 816px;
        background-size: 736px 886px;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-image: url("/jp/education/images/overview/inspiration_small.jpg")
    }
}

@media only screen and (max-width: 735px) and (-webkinspiration-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        background-image: url("/jp/education/images/overview/inspiration_small_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        position: absolute;
        top: auto;
        bottom: 0
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        width: 100%
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        width: 100%
    }
}


.page-overview .section-inspiration.section-hero .section-hero-content {
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    padding-top: 0;
    padding-bottom: 75px
}

.page-overview .section-inspiration.section-hero .section-hero-content:before,
.page-overview .section-inspiration.section-hero .section-hero-content:after {
    content: ' ';
    display: table
}

.page-overview .section-inspiration.section-hero .section-hero-content:after {
    clear: both
}

@media only screen and (min-width: 1442px) {
    .page-overview .section-inspiration.section-hero .section-hero-content {
        margin-left: auto;
        margin-right: auto;
        width: 980px
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero .section-hero-content {
        margin-left: auto;
        margin-right: auto;
        width: 692px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-content {
        margin-left: auto;
        margin-right: auto;
        width: 87.5%
    }
}

@media only screen and (max-width: 480px) {
    .page-overview .section-inspiration.section-hero .section-hero-content {
        margin-left: auto;
        margin-right: auto;
        width: 90%
    }
}

.page-overview .section-inspiration.section-hero .section-hero-content:not(:last-child) {
    padding-bottom: 0
}

.page-overview .section-inspiration.section-hero .section-hero-headline {
	position: relative; z-index: 1; margin-left: auto; margin-right: auto; width: 980px; padding-top: 0; padding-bottom: 0px; padding-top: 182px
}

.page-overview .section-inspiration.section-hero .section-hero-headline::before,
.page-overview .section-inspiration.section-hero .section-hero-headline::after {
	content: ' '; display: table
}

.page-overview .section-inspiration.section-hero .section-hero-headline::after {
	clear: both
}

@media only screen and (min-width: 1442px) {
	.page-overview .section-inspiration.section-hero .section-hero-headline {
		margin-left: auto; margin-right: auto; width: 980px
	}
}

@media only screen and (max-width: 1068px) {
	.page-overview .section-inspiration.section-hero .section-hero-headline {
		margin-left: auto; margin-right: auto; width: 692px
	}
}

@media only screen and (max-width: 735px) {
	.page-overview .section-inspiration.section-hero .section-hero-headline {
		margin-left: auto; margin-right: auto; width: 87.5%
	}
}

@media only screen and (max-width: 480px) {
	.page-overview .section-inspiration.section-hero .section-hero-headline {
		margin-left: auto; margin-right: auto; width: 90%
	}
}

@media only screen and (max-width: 1068px) {
	.page-overview .section-inspiration.section-hero .section-hero-headline {
		padding-top: 153px
	}
}

@media only screen and (max-width: 735px) {
	.page-overview .section-inspiration.section-hero .section-hero-headline {
		padding-top: 162px
	}
}

.page-overview .section-inspiration.section-hero .section-hero-intro {
	position: relative; z-index: 1; margin-left: auto; margin-right: auto; width: 980px; padding-top: 0; padding-bottom: 0px; padding-top: 17px
}

.page-overview .section-inspiration.section-hero .section-hero-intro::before,
.page-overview .section-inspiration.section-hero .section-hero-intro::after {
	content: ' '; display: table
}

.page-overview .section-inspiration.section-hero .section-hero-intro::after {
	clear: both
}

@media only screen and (min-width: 1442px) {
	.page-overview .section-inspiration.section-hero .section-hero-intro {
		margin-left: auto; margin-right: auto; width: 980px
	}
}

@media only screen and (max-width: 1068px) {
	.page-overview .section-inspiration.section-hero .section-hero-intro {
		margin-left: auto; margin-right: auto; width: 692px
	}
}

@media only screen and (max-width: 735px) {
	.page-overview .section-inspiration.section-hero .section-hero-intro {
		margin-left: auto; margin-right: auto; width: 87.5%
	}
}

@media only screen and (max-width: 480px) {
	.page-overview .section-inspiration.section-hero .section-hero-intro {
		margin-left: auto; margin-right: auto; width: 90%
	}
}

@media only screen and (max-width: 735px) {
	.page-overview .section-inspiration.section-hero .section-hero-intro {
		padding-top: 26px;
	}
}

.page-overview .section-inspiration.section-hero .section-hero-link {
	margin-top: 17px
}

.page-overview .section-inspiration.section-hero .section-hero-link:first-of-type {
	margin-top: 12px
}

.page-overview .section-inspiration.section-hero:before {
    background-repeat: no-repeat;
    background-image: url("/v/education/education/i/images/overview/swatch_code_large.jpg");
    background-repeat: repeat;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
    height: 1650px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .page-overview .section-inspiration.section-hero:before {
        background-image: url("/v/education/education/i/images/overview/swatch_code_large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero:before {
        height: 1250px
    }
}

.page-overview .section-inspiration.section-hero:after {
    background: none;
    position: relative;
    width: 0;
    height: 0;
    z-index: 0
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero:before {
        background: none;
        position: relative;
        width: 0;
        height: 0;
        z-index: 0
    }

    .page-overview .section-inspiration.section-hero:after {
        background-repeat: no-repeat;
        background-image: url("/v/education/education/i/images/overview/swatch_code_large.jpg");
        background-repeat: repeat;
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        z-index: -1;
        height: 1250px
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .page-overview .section-inspiration.section-hero:after {
        background-image: url("/v/education/education/i/images/overview/swatch_code_large_2x.jpg")
    }
}

.page-overview .section-inspiration.section-hero.section-hero-subsection .section-hero-headline {
    padding-top: 100px
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero.section-hero-subsection .section-hero-headline {
        padding-top: 80px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero.section-hero-subsection .section-hero-headline {
        padding-top: 70px
    }
}

.page-overview .section-inspiration.section-hero .section-hero-headline-format {
    width: 410px
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero .section-hero-headline-format {
        width: 390px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-headline-format {
        width: 270px
    }
}

.page-overview .section-inspiration.section-hero .section-hero-intro-format {
    width: 430px
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero .section-hero-intro-format {
        width: 355px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-intro-format {
        width: 90%
    }
}




/**
 * FontSize - headline
 * L - 91%
 * M - 89%
 * S - 87%
 */
.page-overview .section-hero .product-headline {
	font-size: 68px;
}
@media only screen and (max-width: 1068px) {
	.page-overview .section-hero .product-headline {
		font-size: 50px;
	}
}
@media only screen and (max-width: 735px) {
	.page-overview .section-hero .product-headline {
		font-size: 40px;
	}
}