/*! --------------------------------------------------
*   
*   OSRAM
*   TABLE OF CONTENTS
*
*   fonts
*   general
*   header
*   page content
*   page layout
*   highlight blocks
*   paragraphs
*      - intro text
*      - icon left
*      - image right
*      - video
*   homepage
*
*   ! try not to overwrite the CEBEO site
*
*   -------------------------------------------------- */




/*! --------------------------------------------------
    #fonts
    -------------------------------------------------- */

	/* PT Sans - regular */

	@font-face {
		font-family: 'PT Sans';
		src: url('fonts/pt-sans/ptsans-regular-webfont.eot');
		src: url('fonts/pt-sans/ptsans-regular-webfont.eot?#iefix') format('embedded-opentype'),
		     url('fonts/pt-sans/ptsans-regular-webfont.woff') format('woff'),
		     url('fonts/pt-sans/ptsans-regular-webfont.ttf') format('truetype'),
		     url('fonts/pt-sans/ptsans-regular-webfont.svg#pt_sans_regular') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	/* PT Sans - italic */
	
	@font-face {
		font-family: 'PT Sans';
		src: url('fonts/pt-sans/ptsans-italic-webfont.eot');
		src: url('fonts/pt-sans/ptsans-italic-webfont.eot?#iefix') format('embedded-opentype'),
		     url('fonts/pt-sans/ptsans-italic-webfont.woff') format('woff'),
		     url('fonts/pt-sans/ptsans-italic-webfont.ttf') format('truetype'),
		     url('fonts/pt-sans/ptsans-italic-webfont.svg#pt_sans_italic') format('svg');
		font-weight: normal;
		font-style: italic;
	}

	/* PT Sans - bold */
	
	@font-face {
		font-family: 'PT Sans';
		src: url('fonts/pt-sans/ptsans-bold-webfont.eot');
		src: url('fonts/pt-sans/ptsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
		     url('fonts/pt-sans/ptsans-bold-webfont.woff') format('woff'),
		     url('fonts/pt-sans/ptsans-bold-webfont.ttf') format('truetype'),
		     url('fonts/pt-sans/ptsans-bold-webfont.svg#pt_sans_italic') format('svg');
		font-weight: bold;
		font-style: normal;
	}

	/* PT Sans - bold italic */
	
	@font-face {
		font-family: 'PT Sans';
		src: url('fonts/pt-sans/ptsans-bolditalic-webfont.eot');
		src: url('fonts/pt-sans/ptsans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
		     url('fonts/pt-sans/ptsans-bolditalic-webfont.woff') format('woff'),
		     url('fonts/pt-sans/ptsans-bolditalic-webfont.ttf') format('truetype'),
		     url('fonts/pt-sans/ptsans-bolditalic-webfont.svg#pt_sans_bolditalic') format('svg');
		font-weight: bold;
		font-style: italic;
	}




/*! --------------------------------------------------
    #general
    -------------------------------------------------- */

	/* resets */

	.node-type-osram-homepage #middle .field-name-field-text,
	.node-type-osram-subpage #middle .field-name-field-text {
		margin: 0;
		padding: 0;
	}

	.node-type-osram-homepage #middle ul,
	.node-type-osram-homepage #middle ol,
	.node-type-osram-subpage #middle ul,
	.node-type-osram-subpage #middle ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.node-type-osram-homepage #middle ul li,
	.node-type-osram-homepage #middle ol li,
	.node-type-osram-subpage #middle ul li,
	.node-type-osram-subpage #middle ol li {
		list-style-image: none;
	}

	/* set font */

	.node-type-osram-homepage #main,
	.node-type-osram-homepage #main p,
	.node-type-osram-subpage #main,
	.node-type-osram-subpage #main p,
	#middle .field-name-osram-nl-menu .menu .leaf,
	#middle .field-name-osram-fr-menu .menu .leaf,
	.node-type-osram-homepage #middle ul li, 
	.node-type-osram-subpage #middle ul li,
	.node-type-osram-homepage #middle ol li,
	.node-type-osram-subpage #middle ol li,
	.node-type-osram-homepage #middle h2, .node-type-osram-homepage #middle h3, .node-type-osram-homepage #middle h4,
	.node-type-osram-subpage #middle h2, .node-type-osram-subpage #middle h3, .node-type-osram-subpage #middle h4 {
		font-family: 'PT Sans', Arial, sans-serif;
		font-weight: normal;
		font-style: normal;
		text-transform: none;
		font-size: 13px;
		color: #333;
	}

	/* hide main title */

	.node-type-osram-homepage #middle > h1,
	.node-type-osram-subpage #middle > h1 {
		display: none;
	}

	/* headings */

	.node-type-osram-homepage #middle h2,
	.node-type-osram-subpage #middle h2 {
		font-size: 20px;
		font-weight: normal;
		color: #3c3c3c;
		margin: 0; margin-bottom: 20px;
		padding: 0; padding-left: 20px; padding-bottom: 10px;
		border-bottom: 1px solid #ccc;
		background-image: none;
	}

	.node-type-osram-homepage #middle h3,
	.node-type-osram-subpage #middle h3 {
		font-size: 15px;
		font-weight: normal;
		text-transform: uppercase;
		color: #3c3c3c;
		margin: 0; margin-bottom: 20px;
	}

	/* buttons */

	.node-type-osram-homepage #middle .field-name-field-call-to-action,
	.node-type-osram-subpage #middle .field-name-field-call-to-action {
		display: block;
		margin-top: 20px;
	}

	.node-type-osram-homepage #middle .field-name-field-call-to-action a,
	.node-type-osram-subpage #middle .field-name-field-call-to-action a {
		display: inline-block;
		text-decoration: none;
		background: #f60;
		color: #fff;
		padding: 8px 16px;
		font-size: 13px;
		line-height: 1;
		border: 1px solid #f60;
		transition: all 0.1s ease;
	}

	.node-type-osram-homepage #middle .field-name-field-call-to-action a:hover,
	.node-type-osram-homepage #middle .field-name-field-call-to-action a:focus,
	.node-type-osram-subpage #middle .field-name-field-call-to-action a:hover,
	.node-type-osram-subpage #middle .field-name-field-call-to-action a:focus {
		background: #fff;
		color: #f60;
		border-color: #f60;
	}


	

/*! --------------------------------------------------
    #header
    -------------------------------------------------- */

	.osram-header {
		display: block;
	}

	/* orange menu bar */

	.osram-header__menubar {
		background: #f60;
		color: #fff;
		overflow: hidden;
		height: 76px;
		padding: 0 10px;
	}

		/** menu **/

		.field-name-osram-nl-menu,
		.field-name-osram-fr-menu {
			float: left;
			margin-top: 23px;
		}

		.field-name-osram-nl-menu .menu,
		.field-name-osram-fr-menu .menu {
			margin: 0;
			padding:0;
			list-style: none;
			overflow: hidden;
		}

		#middle .field-name-osram-nl-menu .menu .leaf,
		#middle .field-name-osram-fr-menu .menu .leaf {
			float: left;
			margin-right: 20px;
			list-style: none;
		}

		#middle .field-name-osram-nl-menu .menu .leaf.last,
		#middle .field-name-osram-fr-menu .menu .leaf.last {
			margin-right: 0;
		}

		#middle .field-name-osram-nl-menu .menu .leaf a,
		#middle .field-name-osram-fr-menu .menu .leaf a {
			display: block;
			font-size: 15px;
			color: #fff;
			text-decoration: none;
			padding: 4px 12px;
			border: 1px solid #fff;
			transition: background 0.1s ease, color 0.1s ease;
		}

		#middle .field-name-osram-nl-menu .menu .leaf a:hover,
		#middle .field-name-osram-nl-menu .menu .leaf a:focus,
		#middle .field-name-osram-nl-menu .menu .leaf a.active,
		#middle .field-name-osram-fr-menu .menu .leaf a:hover,
		#middle .field-name-osram-fr-menu .menu .leaf a:focus,
		#middle .field-name-osram-fr-menu .menu .leaf a.active {
			background: #fff;
			color: #f60;
		}

		/** image link **/

		.group-ledvance-link {
			float: right;
			display: block;
			transition: opacity 0.1s ease;
			max-width: 220px;
		}

		.group-ledvance-link:hover,
		.group-ledvance-link:focus {
			opacity: 0.9;
		}

		.group-ledvance-link img {
			display: block;
			margin: 0 auto;
			width: auto !important;
			height: 76px !important;
		}

	/* image */

	#middle .osram-header__mainimage {
		display: block;
	}

	#middle .osram-header__mainimage img {
		display: block;
		width: 100% !important; /* overwrite inline size */
		height: auto !important; /* overwrite inline size */
	}

	/* osram logo's */

	.osram-header__logozone {
		overflow: hidden;
		padding: 25px 10px;
	}

	.osram-header__logozone .field-name-field-logos {
		float: right;
		overflow: hidden;
	}

	.osram-header__logozone .field-name-field-logos > div {
		float: left;
		margin-left: 12px;
	}

	.osram-header__logozone .field-name-field-logos > div:first-child {
		margin-left: 0;
	}

	.osram-header__logozone .field-name-field-logos > div .group-link-group {
		display: block;
		transition: opacity 0.1s ease;
	}

	.osram-header__logozone .field-name-field-logos > div .group-link-group:hover,
	.osram-header__logozone .field-name-field-logos > div .group-link-group:focus {
		opacity: 0.9;
	}

	.osram-header__logozone .field-name-field-logos img {
		display: block;
		width: auto !important;
		height: 36px !important;
	}

	/* media queries */

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

		.osram-header__menubar {
			height: auto;
		}

		.field-name-osram-nl-menu, 
		.field-name-osram-fr-menu {
			float: none;
		}

		#middle .field-name-osram-nl-menu .menu, 
		#middle .field-name-osram-fr-menu .menu {
			text-align: center;		
		}

		#middle .field-name-osram-nl-menu .menu .leaf, 
		#middle .field-name-osram-fr-menu .menu .leaf {
			float: none;
			display: inline-block;
			padding-right: 0;
		}

		.group-ledvance-link {
			float: none;
			margin: 10px auto 0;
		}

		.group-ledvance-link img {
			height: 36px !important;
		}

	} /* max-width: 599px */


	

/*! --------------------------------------------------
    #page content
    -------------------------------------------------- */

	/* intro text */

	.osram-content-intro {
		margin: 0  20px 20px;
	}

	/* text content */

	/** paragraphs **/

	.node-type-osram-homepage #middle .entity-paragraphs-item p,
	.node-type-osram-subpage #middle .entity-paragraphs-item p {
		margin: 0;
		margin-bottom: 1em;
	}

	.node-type-osram-homepage #middle .entity-paragraphs-item p:last-child,
	.node-type-osram-subpage #middle .entity-paragraphs-item p:last-child {
		margin-bottom: 0;
	}

	/** lists **/

	.node-type-osram-homepage #middle .entity-paragraphs-item ul,
	.node-type-osram-homepage #middle .entity-paragraphs-item ol,
	.node-type-osram-subpage #middle .entity-paragraphs-item ul,
	.node-type-osram-subpage #middle .entity-paragraphs-item ol {
		display: block;
		margin-bottom: 1em;
	}

	.node-type-osram-homepage #middle .entity-paragraphs-item ul,
	.node-type-osram-subpage #middle .entity-paragraphs-item ul {
		padding-left: 15px;
	}

	.node-type-osram-homepage #middle .entity-paragraphs-item ul li,
	.node-type-osram-subpage #middle .entity-paragraphs-item ul li {
		padding-left: 10px;
		background: url('../images/osram/list.gif') no-repeat 0 8px;
	}

	.node-type-osram-homepage #middle .entity-paragraphs-item ol,
	.node-type-osram-subpage #middle .entity-paragraphs-item ol {
		padding-left: 25px;
	}

	.node-type-osram-homepage #middle .entity-paragraphs-item ol li,
	.node-type-osram-subpage #middle .entity-paragraphs-item ol li {
		list-style: outside decimal;
	}




/*! --------------------------------------------------
    #page layout
    -------------------------------------------------- */

	/* page groups */

	.osram-subpage-content > .paragraphs-items > .field-type-paragraphs > .field-items > .field-item {
		display: block;
	}

	.osram-subpage-content > .paragraphs-items > .field-type-paragraphs > .field-items > .field-item + .field-item {
		margin-top: 10px;
	}

	/* main paragraphs zone */

	.osram-content-paragraphs {
		padding: 0 20px;
	}

	.osram-content-paragraphs > .paragraphs-items > .field-name-field-paragraphs {
		overflow: hidden;
		margin: 0 -10px;
		margin-bottom: 10px;
	}

	.osram-content-paragraphs > .paragraphs-items > .field-name-field-paragraphs > div {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		clear: both;
	}

	.osram-content-paragraphs > .paragraphs-items > .field-name-field-paragraphs > .block-highlight {
		float: left;
		width: 50%;
		clear: none;
	}

	.osram-content-paragraphs > .paragraphs-items > .field-name-field-paragraphs > div > .entity-paragraphs-item {
		border: 1px solid #ccc;
		padding: 20px;
	}

	.osram-content-paragraphs > .paragraphs-items > .field-name-field-paragraphs > .block-highlight > .entity-paragraphs-item {
		padding: 0;
	}




/*! --------------------------------------------------
    #highlight blocks
    -------------------------------------------------- */

	.block-highlight {
		position: relative;
	}

	.block-highlight > .entity-paragraphs-item {
		height: 126px;
		overflow: hidden;
	}

	.block-highlight__initialcontent {
		display: block;
		overflow: hidden;
		padding: 20px;
	}

	.block-highlight__initialcontent__left {
		float: left;
		width: 90px;
		margin-right: 20px;
	}

	.block-highlight__initialcontent__left img {
		display: block;
		width: 100% !important;
		height: auto !important;
	}

	.block-highlight__initialcontent__right {
		float: none;
		margin-left: 110px;
	}

	.block-highlight__initialcontent__right .block-title {
		font-weight: bold;
		margin-bottom: 1em;
	}

	.block-highlight__fullcontent {
		display: none;
	}

	/* media queries */

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

		.block-highlight > .entity-paragraphs-item {
			height: 171px;
		}

	} /* max-width: 939px */

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

		.osram-content-paragraphs > .paragraphs-items > .field-name-field-paragraphs > .block-highlight {
			float: none;
			width: 100%;
			clear: left;
		}

		.block-highlight > .entity-paragraphs-item {
			height: auto;
		}

	} /* max-width: 767px */

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

		.block-highlight__initialcontent__left {
			float: none;
			max-width: 100%;
			margin-right: 0; margin-bottom: 20px;
		}

		.block-highlight__initialcontent__right {
			margin-left: 0;
		}

	} /* max-width: 479px*/

	/* javascript block */

	.block-highlight.clickable > div {
		cursor: pointer;
		transition: all 0.2s ease-out;
	}

	.block-highlight.clickable > div:hover {
		box-shadow: 0 0 0 2px  rgba(0,0,0,0.2);
	}

	.block-highlight.open {
		position: relative;
	}

	.block-highlight.open:after {
		content: '';
		display: block;
		position: absolute;
		bottom: -11px;
		left: 40px;
		border: solid transparent;
		height: 0; width: 0;
		pointer-events: none;
		border-color: rgba(136, 183, 213, 0);
		border-bottom-color: #ccc;
		border-width: 26px;
	}

	.block-highlight.open.right:after {
		left: auto;
		right: 40px;
	}

	.block-highlight-expander {
		float: left;
		width: 100%;
		clear: left;
		animation: showthis 0.5s ease;
    	animation-fill-mode: both;
		position: relative;
	}

	@keyframes showthis {
		from {
			visibility: hidden;
			opacity: 0;
		}
		to {
			visibility: visible;
			opacity: 1;
		}
	}

	.block-highlight-expander__inner {
		border: 1px solid #ccc;
		padding: 20px;
	}

	.block-highlight-expander .field-item {
		margin-bottom: 20px;
	}

	.block-highlight-expander .field-item:last-child {
		margin-bottom: 0;
	}




/*! --------------------------------------------------
    #paragraphs - intro text
    -------------------------------------------------- */

	.node-type-osram-subpage .paragraphs-item-intro-text {
		display: block;
	}

	.node-type-osram-subpage .paragraphs-item-intro-text .block-title {
		font-weight: bold;
		margin-bottom: 1em;
	}




/*! --------------------------------------------------
    #paragraphs - icon left
    -------------------------------------------------- */

	.node-type-osram-subpage .paragraphs-item-icon-left {
		display: block;
		overflow: hidden;
	}

	/** icon zone **/

	.node-type-osram-subpage .paragraphs-item-icon-left .group-left {
		float: left;
		width: 90px;
		margin-right: 20px;
	}

	.node-type-osram-subpage .paragraphs-item-icon-left .group-left img {
		display: block;
		width: 90px !important;
		height: auto !important;
	}

	/** text zone **/

	.node-type-osram-subpage .paragraphs-item-icon-left .group-right {
		float: none;
		margin-left: 110px;
	}

	.node-type-osram-subpage .paragraphs-item-icon-left .group-right .block-title {
		font-weight: bold;
		margin-bottom: 1em;
	}




/*! --------------------------------------------------
    #paragraphs - image right
    -------------------------------------------------- */

	.node-type-osram-subpage .paragraphs-item-image-right {
		display: block;
		overflow: hidden;
	}

	.node-type-osram-subpage .paragraphs-item-image-right .group-left,
	.node-type-osram-subpage .paragraphs-item-image-right .group-right {
		float: left;
		box-sizing: border-box;
	}

	.node-type-osram-subpage .paragraphs-item-image-right .group-left {
		width: 50%;
		padding-right: 20px;
	}

	.node-type-osram-subpage .paragraphs-item-image-right .group-right {
		width: 50%;
		overflow: hidden;
	}

	.node-type-osram-subpage .paragraphs-item-image-right .group-right .field-name-field-image-right {
		float: right;
	}

	.node-type-osram-subpage .paragraphs-item-image-right .group-right img {
		display: block;
		max-width: 100%;
		width: auto !important;
		height: auto !important;
	}

	.node-type-osram-subpage .field-name-field-extra-image-below-the-text {
		margin-top: 20px;
	}

	.node-type-osram-subpage .field-name-field-extra-image-below-the-text img {
		display: block;
		max-width: 100%;
		width: auto !important;
		height: auto !important;
	}
	
	/* media queries */

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

		.node-type-osram-subpage .paragraphs-item-image-right .group-left,
		.node-type-osram-subpage .paragraphs-item-image-right .group-right {
			float: none;
			width: 100%;
		}

		.node-type-osram-subpage .paragraphs-item-image-right .group-left {
			margin-bottom: 20px;
			padding-right: 0;
		}

		.node-type-osram-subpage .paragraphs-item-image-right .group-right .field-name-field-image-right {
			float: none;
		}

	} /* max-width: 599px */




/*! --------------------------------------------------
    #paragraphs - video
    -------------------------------------------------- */

	.node-type-osram-subpage .paragraphs-item-video {
		display: block;
	}

	.node-type-osram-subpage .paragraphs-item-video .block-title {
		font-weight: bold;
		margin-bottom: 1em;
	}

	.node-type-osram-subpage .paragraphs-item-video .player {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
	}

	.node-type-osram-subpage .paragraphs-item-video .video-container .player iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}




/*! --------------------------------------------------
    #homepage
    -------------------------------------------------- */

	.osram-hp-characterzone {
		overflow: hidden;
		margin-top: 60px;
		padding: 0 20px; padding-bottom: 20px;
	}

	.osram-hp-characterzone__left {
		float: left;
		width: 50%;
		position: relative;
	}

	.osram-hp-characterzone__left .field-name-field-left-character {
		margin-top: 130px;
	}

	.osram-hp-characterzone__left .field-name-field-left-character img {
		display: block;
		width: 120px !important;
		height: auto !important;
	}

	.osram-hp-characterzone__left .field-name-field-dialog {
		position: absolute;
		top: 0;
		left: 120px;
	}

	.osram-hp-characterzone__left .field-name-field-dialog img {
		display: block;
		width: 283px !important;
		height: auto !important;
	}

	.osram-hp-characterzone__right {
		float: left;
		width: 50%;
		overflow: hidden;
		position: relative;
	}

	.osram-hp-characterzone__right .field-name-field-right-character {
		float: right;
		margin-top: 40px;
	}

	.osram-hp-characterzone__right .field-name-field-right-character img {
		display: block;
		width: 177px !important;
		height: auto !important;
	}

	.osram-hp-characterzone__right .paragraphs-items-field-highlight-links {
		position: absolute;
		top: 0;
		right: 128px;
		background: url('../images/osram/dialog-empty.png') no-repeat center center;
		width: 308px;
		height: 250px;
	}

	.osram-hp-characterzone__right .field-name-field-highlight-links {
		overflow: hidden;
		position: relative;
		top: 56px;
		left: 34px;
	}

	.osram-hp-characterzone__right .field-name-field-highlight-links .block-linked_image {
		float: left;
		margin-right: 20px;
	}
	
	.osram-hp-characterzone__right .field-name-field-highlight-links .block-linked_image:last-child {
		margin-right: 0;
	}

	.osram-hp-characterzone__right .field-name-field-highlight-links img {
		width: 80px !important;
		height: auto !important;
	}

	/* media queries */

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

		.osram-hp-characterzone__left {
			float: none;
			width: 100%;
		}

		.osram-hp-characterzone__left .field-name-field-left-character {
			margin-top: 0;
		}

		.osram-hp-characterzone__right {
			float: none;
			width: 100%;
		}

	} /* max-width: 939px */

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

		.osram-hp-characterzone__right .paragraphs-items-field-highlight-links {
			top: 18px;
			background-size: contain;
			width: 220px; height: 160px;
		}

		.osram-hp-characterzone__right .field-name-field-highlight-links .block-linked_image {
			margin-right: 10px;
		}

		.osram-hp-characterzone__right .field-name-field-highlight-links {
			top: 42px;
			left: 38px;
		}

		.osram-hp-characterzone__right .field-name-field-highlight-links img {
			width: 50px !important;
		}

		.osram-hp-characterzone__right .field-name-field-right-character {
			margin-top: 0;
		}
		
	} /* max-width: 599px */

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

		.osram-hp-characterzone__left .field-name-field-left-character img {
			width: 80px !important;
		}

		.osram-hp-characterzone__left .field-name-field-dialog {
			left: 80px;
		}

		.osram-hp-characterzone__right .paragraphs-items-field-highlight-links {
			position: relative;
			top: auto; right: auto;
		}

		.osram-hp-characterzone__right .field-name-field-right-character img {
			margin-top: -118px;
			position: relative;
			right: -46px;
			z-index: -1
		}

	} /* max-width: 479px */
