/* ---------------  Main Start  ----------- */

.ie body, .edge body 
{
    overflow-x: hidden
}


/* ------------------ Audio Player ------------ */

#play-pause-button-01
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-01 :hover, .play-button-01 :visited, .play-button-01 :link, .play-button-01 :active
{
	text-decoration: none;
}

#play-pause-button-02
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-02 :hover, .play-button-02 :visited, .play-button-02 :link, .play-button-02 :active
{
	text-decoration: none;
}

#play-pause-button-02b
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-02b :hover, .play-button-02b :visited, .play-button-02b :link, .play-button-02b :active
{
	text-decoration: none;
}

#play-pause-button-03
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-03 :hover, .play-button-03 :visited, .play-button-03 :link, .play-button-03 :active
{
	text-decoration: none;
}

#play-pause-button-04
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-04 :hover, .play-button-04 :visited, .play-button-04 :link, .play-button-04 :active
{
	text-decoration: none;
}

#play-pause-button-04b
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-04b :hover, .play-button-04b :visited, .play-button-04b :link, .play-button-04b :active
{
	text-decoration: none;
}

#play-pause-button-05
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-05 :hover, .play-button-05 :visited, .play-button-05 :link, .play-button-05 :active
{
	text-decoration: none;
}

#play-pause-button-05b
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-05b :hover, .play-button-05b :visited, .play-button-05b :link, .play-button-05b :active
{
	text-decoration: none;
}

#play-pause-button-06
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-06 :hover, .play-button-06 :visited, .play-button-06 :link, .play-button-06 :active
{
	text-decoration: none;
}

#play-pause-button-06b
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-06b :hover, .play-button-06b :visited, .play-button-06b :link, .play-button-06b :active
{
	text-decoration: none;
}

#play-pause-button-07
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-07 :hover, .play-button-07 :visited, .play-button-07 :link, .play-button-07 :active
{
	text-decoration: none;
}

#play-pause-button-07b
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-07b :hover, .play-button-07b :visited, .play-button-07b :link, .play-button-07b :active
{
	text-decoration: none;
}

#play-pause-button-08
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-08 :hover, .play-button-08 :visited, .play-button-08 :link, .play-button-08 :active
{
	text-decoration: none;
}

#play-pause-button-08b
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-08b :hover, .play-button-08b :visited, .play-button-08b :link, .play-button-08b :active
{
	text-decoration: none;
}

#play-pause-button-09
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-09 :hover, .play-button-09 :visited, .play-button-09 :link, .play-button-09 :active
{
	text-decoration: none;
}

#play-pause-button-10
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-10 :hover, .play-button-10 :visited, .play-button-10 :link, .play-button-10 :active
{
	text-decoration: none;
}

#play-pause-button-10b
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-10b :hover, .play-button-10b :visited, .play-button-10b :link, .play-button-10b :active
{
	text-decoration: none;
}

#play-pause-button-11
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-11 :hover, .play-button-11 :visited, .play-button-11 :link, .play-button-11 :active
{
	text-decoration: none;
}

#play-pause-button-12
{
  font-size: 20px;
  cursor: pointer;
}

.play-button-12 :hover, .play-button-12 :visited, .play-button-12 :link, .play-button-12 :active
{
	text-decoration: none;
}


/* ----------------- End Of Audio ------------------ */


.headline-span 
{
    display: block
}

.section-headline 
{
    color: #cfcfcf
}

.section-headline-black 
{
    color: #000000
}

.section-headline + .section-subheadline {
    margin-top: 0
}


.hero-headline 
{
    color: #ffffff
}

.hero-headline2
{
    color: #8f8f8f
}

.hero-subheadline 
{
    color: #000000
}

.hero-subheadline2 
{
    color: #fafafa 
}

.hero-headline + .hero-subheadline + .hero-subheadline2
{
    margin-top: 0
}

/* --------------- OSTOURA Moving Text ----------- */

/* Speed of the Hero Moving Headline Text adjusted here  */

.animated-headline
{
	opacity: 0;
	-webkit-animation: fademovescale 3s forwards; 
	animation: fademovescale 3s forwards;
	animation-delay: 1s;
}

.animated-subheadline
{
	opacity: 0;
	-webkit-animation: fademovescale 5s forwards; 
	animation: fademovescale 5s forwards;
	animation-delay: 2s;

}

@-webkit-keyframes fademovescale  /* for Safari */
{
	from 
	{
	    -webkit-transition: 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	opacity: 0;
    	-webkit-transform: translateY(200%);	/* 280px */
	}
	to 
	{
    	-webkit-transition: 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	opacity: 1;
    	-webkit-transform: translateY(0%);		/* 15px */
	}
}

@keyframes fademovescale  /* for general browsers */
{	
	from 
	{
	    transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 1.8s linear opacity;
    	opacity: 0;
    	transform: translateY(200%);	/* 280px */
	}
	to 
	{
    	transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 1.8s linear opacity;
    	opacity: 1;
    	transform: translateY(0%);		/* 15px */
	}
}

/* ----------- End Of Moving Text ---------- */



/* --------------- OSTOURA Moving Text 2----------- */

/* Speed of the Hero Moving Headline Text adjusted here  */

.animated2-headline
{
	opacity: 0;
	-webkit-animation: fademovescale2 1s forwards; 
	animation: fademovescale2 1s forwards;
	animation-delay: 0.5s;
}

.animated2-subheadline
{
	opacity: 0;
	-webkit-animation: fademovescale2 2s forwards; 
	animation: fademovescale2 2s forwards;
	animation-delay: 1s;

}

@-webkit-keyframes fademovescale2  /* for Safari */
{
	from 
	{
	    -webkit-transition: 2.8s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 2.8s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 2.8s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	opacity: 0;
    	-webkit-transform: translateY(380%);	/* 280px */
	}
	to 
	{
    	-webkit-transition: 2.8s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 2.8s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 2.8s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	opacity: 1;
    	-webkit-transform: translateY(-170%);		/* 15px */
	}
}

@keyframes fademovescale2  /* for general browsers */
{	
	from 
	{
	    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 2.8s linear opacity;
    	opacity: 0;
    	transform: translateY(380%);	/* 280px */
	}
	to 
	{
    	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 2.8s linear opacity;
    	opacity: 1;
    	transform: translateY(-170%);		/* 15px */
	}
}

/* ----------- End Of Moving Text 2 ---------- */


/* --------------- OSTOURA Moving Photo ----------- */

.animated-Image 
{
	opacity: 0;
	-webkit-animation: fadescale 3s forwards; 
	animation: fadescale 3s forwards;
	animation-delay: 1s;
}

@-webkit-keyframes fadescale  /* for Safari */
{
	from 
	{
	    -webkit-transition: 2.8s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 2.8s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 2.8s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	opacity: 0;
    	-webkit-transform: scaleX(380%);	/* 280px */
	}
	to 
	{
    	-webkit-transition: 2.8s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 2.8s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 2.8s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	opacity: 1;
    	-webkit-transform: scaleX(-20%);		/* 15px */
	}
}

@keyframes fadescale  /* for general browsers */
{	
	from 
	{
	    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 2.8s linear opacity;
    	opacity: 0;
    	transform: scaleX(380%);	/* 280px */
	}
	to 
	{
    	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 2.8s linear opacity;
    	opacity: 1;
    	transform: scaleX(-20%);		/* 15px */
	}
}

/* ----------- End Of Moving Photo ---------- */


/* ----------- section-content ------------ */
.section-content    /* default (large) */
{
    margin-left: auto;
    margin-right: auto;
    width: 980px
}

@media only screen and (min-width: 1442px) /* large_2x */
{
    .section-content 
    {
        margin-left: auto;
        margin-right: auto;
        width: 980px
    }
}

@media only screen and (max-width: 1068px)  /* Medium */
{
    .section-content 
    {
        margin-left: auto;
        margin-right: auto;
        width: 692px
    }
}

@media only screen and (max-width: 735px)  /* small */
{
    .section-content 
    {
        margin-left: auto;
        margin-right: auto;
        width: 87.5%
    }
}

/* ----------- End of section-content ---------- */


/* ---------- section ---------------- */
/* section main pad (vertical space) top and bottom */

.section 
{
    position: relative;
    overflow: hidden
}

.section.pad-top 
{
    padding-top: 140px
}

@media only screen and (max-width: 1068px) 
{
    .section.pad-top 
    {
        padding-top: 120px
    }
}

@media only screen and (max-width: 735px) 
{
    .section.pad-top 
    {
        padding-top: 100px
    }
}

.section.pad-bottom 
{
    padding-bottom: 140px
}

@media only screen and (max-width: 1068px) 
{
    .section.pad-bottom 
    {
        padding-bottom: 120px
    }
}

@media only screen and (max-width: 735px) 
{
    .section.pad-bottom 
    {
        padding-bottom: 100px
    }
}
/* ---------- End of section ----------- */

/* ---------- subsection-wrapper --------- */
/* subsection main pad (vertical space) top and bottom */

.subsection-wrapper.pad-top .section-content 
{
    padding-top: 100px
}

@media only screen and (max-width: 1068px) 
{
    .subsection-wrapper.pad-top .section-content 
    {
        padding-top: 70px
    }
}

@media only screen and (max-width: 735px) 
{
    .subsection-wrapper.pad-top .section-content 
    {
        padding-top: 60px
    }
}

.subsection-wrapper.pad-bottom .section-content 
{
    padding-bottom: 100px
}

@media only screen and (max-width: 1068px) 
{
    .subsection-wrapper.pad-bottom .section-content 
    {
        padding-bottom: 70px
    }
}

@media only screen and (max-width: 735px) 
{
    .subsection-wrapper.pad-bottom .section-content 
    {
        padding-bottom: 60px
    }
}

/* ------------ End of subsection-wrapper ------------- */


/* ------------- content-pad ------------- */
/* Setting content pad margins (top & bottom) */

.content-pad-top 
{
    margin-top: 75px
}

@media only screen and (max-width: 1068px) 
{
    .content-pad-top 
    {
        margin-top: 70px
    }
}

@media only screen and (max-width: 735px) 
{
    .content-pad-top 
    {
        margin-top: 60px
    }
}

.content-pad-bottom 
{
    margin-bottom: 75px
}

@media only screen and (max-width: 1068px) 
{
    .content-pad-bottom 
    {
        margin-bottom: 70px
    }
}

@media only screen and (max-width: 735px) 
{
    .content-pad-bottom 
    {
        margin-bottom: 60px
    }
}

@media only screen and (max-width: 735px)
{
	/* in small(_2x) badge gets under text, this to make margin between */
    .content-pad-bottom-small 
    {
        margin-bottom: 60px
    }
}

/* ----------- End of content-pad -----------  */


/* ----------- sticky-content (only used) ----- */
/* sticky allow the video to stick in place while scrolling play it */

html.css-sticky .sticky-container 
{
    position: relative
}

html.css-sticky .sticky-content 
{
    position: -webkit-sticky;
    position: sticky
}

@media only screen and (max-width: 735px) 
{
    html.css-sticky .sticky-content 
    {
        position: relative
    }
}
/* -------- End sticky-content ------------- */


/* ----- icon container ----------- */

.icon-container 
{
    position: relative;
    font-size: 0;
    margin-top: -40px
}

@media only screen and (max-width: 1068px) 
{
    .icon-container 
    {
        margin-top: -42px
    }
}

@media only screen and (max-width: 735px) 
{
    .icon-container 
    {
        margin-top: -54px
    }
}

.icon-container.pad-top 
{
    margin: 0
}

.icon-container.pad-bottom 
{
    margin-bottom: 40px
}

@media only screen and (max-width: 1068px) 
{
    .icon-container.pad-bottom 
    {
        margin-bottom: 42px
    }
}

@media only screen and (max-width: 735px) 
{
    .icon-container.pad-bottom 
    {
        margin-bottom: 54px
    }
}

.icon-item 
{
    display: inline-block;
    vertical-align: top;
    margin-top: 40px
}

@media only screen and (max-width: 1068px) 
{
    .icon-item 
    {
        margin-top: 42px
    }
}

@media only screen and (max-width: 735px) 
{
    .icon-item 
    {
        margin-top: 54px
    }
}

.icon-content .icon-image 
{
    min-height: 64px; 
    background-position: bottom
}

.icon-content .icon-caption 
{
    margin-top: 10px;
    padding-right: 15%
}

@media only screen and (max-width: 1068px) 
{
    .icon-content .icon-caption 
    {
        padding-right: 14%
    }
}

@media only screen and (max-width: 735px) 
{
    .icon-content .icon-caption 
    {
        margin-top: 9px
    }
}

@media only screen and (max-width: 735px) 
{
    .icon-content .icon-caption 
    {
        max-width: 170px
    }
}

.icons-center .icon-image 
{
    margin-left: auto;
    margin-right: auto
}

.icons-center .icon-caption 
{
    padding: 0 10px;
    text-align: center
}

@media only screen and (max-width: 735px) 
{
    .icons-center .icon-caption 
    {
        padding: 0
    }
}

/* ------------- End of icon-content ------------- */


/* ----- badge -------------- */

.badge 
{
    margin-right: 0
}

@media only screen and (max-width: 735px) 
{
    .badge 
    {
        /* max-width: 150px */
    }
}

.badge .badge-content 
{
    margin-bottom: 0
}

.badge .badge-content .badge-value 
{
    min-height: 64px;
    margin-bottom: -13px
}

@media only screen and (max-width: 1068px) 
{
    .badge .badge-content .badge-value 
    {
        margin-bottom: -10px
    }
}

.badge .badge-content .badge-caption 
{
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 18px;
    padding-right: 15%
}

@media only screen and (max-width: 1068px) 
{
    .badge .badge-content .badge-caption 
    {
        padding-right: 14%
    }
}
/* ------------ End of badge ------------- */




/* --------- video container ------------- */

.video-container 
{
    position: relative
}

.ios.inline-video .video-container 
{
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0)
}

.video-container.has-ended 
{
    -webkit-clip-path: none;
    clip-path: none
}

.video-container .ac-video-poster, .video-container .ac-video-controls,
.video-container .ac-video-blockade 
{
    display: none !important
}

.background-alt .video-container 
{
    border: 1px solid #fafafa
}

.video-container * ::-webkit-media-controls-start-playback-button 
{
    display: none !important;
    -webkit-appearance: none
}

.video-container .video-elm .ac-video-player 
{
    position: static
}

.video-container .video-elm .ac-video-player video.ac-video-media-controller 
{
    max-width: 100%;
    width: auto;
    height: auto
}

.video-container .video-elm .hide-children 
{
    display: none
}
 
/* ----------- End Of video-container ----- */


/* --------- Text Animation Main Function ------------ */
/* Needed for Black Section Moving Up Text And Photos */

div[data-component-list="TextAnimationComponent"] .text-animation-item {
    will-change: opacity, transform;
    -webkit-transition: .75s cubic-bezier(0.25, 0.46, 0.45, 0.94) opacity, .75s cubic-bezier(0.25, 0.46, 0.45, 0.94) transform;
    transition: .75s cubic-bezier(0.25, 0.46, 0.45, 0.94) opacity, .75s cubic-bezier(0.25, 0.46, 0.45, 0.94) transform;
    -webkit-transform: translateY(60px);
    transform: translateY(60px)
}

div[data-component-list="TextAnimationComponent"] .text-animation-item {
    opacity: 0
}

div[data-component-list="TextAnimationComponent"] .badge-caption,
div[data-component-list="TextAnimationComponent"] .hide-figcaption {
    opacity: 0;
    -webkit-transition: .75s cubic-bezier(0.25, 0.46, 0.45, 0.94) opacity;
    transition: .75s cubic-bezier(0.25, 0.46, 0.45, 0.94) opacity;
    will-change: opacity
}

div[data-component-list="TextAnimationComponent"] .js-show-badge {
    opacity: 1
}

div[data-component-list="TextAnimationComponent"] .js-text-animation-item-animate {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1 !important
}

div[data-component-list="TextAnimationComponent"] .js-remove-changes {
    will-change: auto;
    -webkit-transition: none;
    transition: none
}

/* ------------ End of Text Animation Main View -------- */


/* ------------ Hero Align ------------ */

/* OSTOURA Adjusting Hero Align to most top */
/* Remember if Section is Hero (First Section) Use 
a) hero-content-pad-top instead of content-pad-top at the figure wrapper div class
b) hero-pad-top instead of pad-top at the section class
and vise versa */

.hero-content-pad-top 
{
    margin-top: 0px
}

.hero-pad-top 
{
	padding-top: 0px;
    margin-top: 0px
}

.hero-content-pad-bottom 
{
    margin-bottom: 0px
}

.hero-pad-bottom 
{
	padding-bottom: 0px;
    margin-bottom: 0px
}

/* ---- End Of Hero Align  ----- */


/* ------- Section Gray ------------ */

.section-gray .video-container .video-elm {
    width: 100%;
    height: 768px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../media/knx/gray/start/large.jpg");
    margin-left: auto;
    margin-right: auto;
}

@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) {
    .section-gray .video-container .video-elm {
    	/* height: 625px; */
        background-image: url("../media/knx/gray/start/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-gray .video-container .video-elm {
        width: 100%;
        height: 456px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url("../media/knx/gray/start/medium.jpg");
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-gray .video-container .video-elm {
     	/* height: 456px; */
        background-image: url("../media/knx/gray/start/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-gray .video-container .video-elm {
        width: 100%;
        height: 233px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url("../media/knx/gray/start/small.jpg");
    }
}

@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) {
    .section-gray .video-container .video-elm {
     	/* height: 233px; */
        background-image: url("../media/knx/gray/start/small_2x.jpg")
    }
}


html.no-inline-video .section-gray .video-container .video-elm {
    width: 100%;
    /* height: 768px; */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../media/knx/gray/end/large.jpg");
}

@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) {
    html.no-inline-video .section-gray .video-container .video-elm {
        background-image: url("../media/knx/gray/end/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    html.no-inline-video .section-gray .video-container .video-elm {
        width: 100%;
        /* height: 450px; */
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url("../media/knx/gray/end/medium.jpg");
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    html.no-inline-video .section-gray .video-container .video-elm {
        background-image: url("../media/knx/gray/end/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    html.no-inline-video .section-gray .video-container .video-elm {
        width: 100%;
        /* height: 233px; */
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url("../media/knx/gray/end/small.jpg");
    }
}

@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) {
    html.no-inline-video .section-gray .video-container .video-elm {
        background-image: url("../media/knx/gray/end/small_2x.jpg")
    }
}

.section-gray .video-container .image-endframe {
    width: 100%;
    /* height: 768px; */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../media/knx/gray/end/large.jpg");
}

@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) {
    .section-gray .video-container .image-endframe {
        background-image: url("../media/knx/gray/end/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-gray .video-container .image-endframe {
        width: 100%;
        /* height: 450px; */
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url("../media/knx/gray/end/medium.jpg");
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-gray .video-container .image-endframe {
        background-image: url("../media/knx/gray/end/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-gray .video-container .image-endframe {
        width: 100%;
        /* height: 233px; */
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url("../media/knx/gray/end/small.jpg");
    }
}

@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) {
    .section-gray .video-container .image-endframe {
        background-image: url("../media/knx/gray/end/small_2x.jpg")
    }
}

			/* headline Special Style For Gray  */
.section-gray .headline-wrapper {
    position: relative;
    z-index: 2
}

			/* badge Special Style for Gray */
.section-gray .badge-content {
     margin-top: 0 
}


		/* OSTOURA added Icons to The Gray Section */
		
.section-gray .icon-01 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/gray/icon/icon_01.png")
}

@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) {
    .section-gray .icon-01 {
        background-image: url("../media/knx/gray/icon/icon_01.png")
    }
}

.section-gray .icon-02 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/gray/icon/icon_02.png")
}

@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) {
    .section-gray .icon-02 {
        background-image: url("../media/knx/gray/icon/icon_02.png")
    }
}

.section-gray .icon-03 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/gray/icon/icon_03.png")
}

@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) {
    .section-gray .icon-03 {
        background-image: url("../media/knx/gray/icon/icon_03.png")
    }
}

.section-gray .icon-04 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/gray/icon/icon_04.png")
}

@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) {
    .section-gray .icon-04 {
        background-image: url("../media/knx/gray/icon/icon_04.png")
    }
}

.section-gray .icon-05 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/gray/icon/icon_05.png")
}

@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) {
    .section-gray .icon-05 {
        background-image: url("../media/knx/gray/icon/icon_05.png")
    }
}

.section-gray .icon-06 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/gray/icon/icon_06.png")
}

@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) {
    .section-gray .icon-06 {
        background-image: url("../media/knx/gray/icon/icon_06.png")
    }
}
			/* End Of Icon Adding Section */ 


/* ----------- End of Section Gray --------------- */


/* ---------- Section Magenta -------------- */

.section-magenta .video-container {
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 1068px) {
    .section-magenta .video-container {
        width: 750px
    }
}

@media only screen and (max-width: 735px) {
    .section-magenta .video-container {
        width: 344px
    }
}

@media only screen and (max-width: 1068px) {
    .section-magenta .video-container {
        position: relative;
        left: 50%;
        margin-left: -529px
    }
}

@media only screen and (max-width: 1068px) and (max-width: 1068px) {
    .section-magenta .video-container {
        left: 50%;
        margin-left: -375px
    }
}

@media only screen and (max-width: 1068px) and (max-width: 735px) {
    .section-magenta .video-container {
        left: 50%;
        margin-left: -172px
    }
}

.section-magenta .video-container .video-elm {
    width: 1058px;
    height: 700px;
    background-size: 1058px 700px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/magenta/start/large.jpg");
    margin-left: auto;
    margin-right: auto
}

@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) {
    .section-magenta .video-container .video-elm {
        background-image: url("../media/knx/magenta/start/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-magenta .video-container .video-elm {
        width: 750px;
        height: 490px;
        background-size: 750px 490px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/magenta/start/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-magenta .video-container .video-elm {
        background-image: url("../media/knx/magenta/start/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-magenta .video-container .video-elm {
        width: 344px;
        height: 224px;
        background-size: 344px 224px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/magenta/start/small.jpg")
    }
}

@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) {
    .section-magenta .video-container .video-elm {
        background-image: url("../media/knx/magenta/start/small_2x.jpg")
    }
}

html.no-inline-video .section-magenta .video-container .video-elm {
    width: 1058px;
    height: 700px;
    background-size: 1058px 700px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/magenta/end/large.jpg")
}

@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) {
    html.no-inline-video .section-magenta .video-container .video-elm {
        background-image: url("../media/knx/magenta/end/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    html.no-inline-video .section-magenta .video-container .video-elm {
        width: 750px;
        height: 490px;
        background-size: 750px 490px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/magenta/end/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    html.no-inline-video .section-magenta .video-container .video-elm {
        background-image: url("../media/knx/magenta/end/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    html.no-inline-video .section-magenta .video-container .video-elm {
        width: 344px;
        height: 224px;
        background-size: 344px 224px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/magenta/end/small.jpg")
    }
}

@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) {
    html.no-inline-video .section-magenta .video-container .video-elm {
        background-image: url("../media/knx/magenta/end/small_2x.jpg")
    }
}

.section-magenta .video-container .image-endframe {
    width: 1058px;
    height: 700px;
    background-size: 1058px 700px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/magenta/end/large.jpg")
}

@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) {
    .section-magenta .video-container .image-endframe {
        background-image: url("../media/knx/magenta/end/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-magenta .video-container .image-endframe {
        width: 750px;
        height: 490px;
        background-size: 750px 490px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/magenta/end/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-magenta .video-container .image-endframe {
        background-image: url("../media/knx/magenta/end/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-magenta .video-container .image-endframe {
        width: 344px;
        height: 224px;
        background-size: 344px 224px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/magenta/end/small.jpg")
    }
}

@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) {
    .section-magenta .video-container .image-endframe {
        background-image: url("../media/knx/magenta/end/small_2x.jpg")
    }
}



       /* ----- Extra Wrappers Effects ---------- */
.section-magenta {
    overflow: initial;
    z-index: 2
}

.section-magenta .headline-wrapper {
    position: relative;
    z-index: 2;
    /* margin-top: -3.5%; */
}

.section-magenta .figure-wrapper {
    overflow: hidden;
    /* margin-top: 10.5%; */
}

.section-magenta .figure-wrapper video[data-barebones-scrubbable-video] {
    display: none
}

       /* ----- Sticky Wrappers Styling ---------- */

html.scrubbable-video .section-magenta .sticky-wrapper {
    position: relative;
    z-index: -1;
    margin-top: -280px;
    height: calc(900px + 280px + 50px)
}

@media only screen and (max-width: 1068px) {
    html.scrubbable-video .section-magenta .sticky-wrapper {
        margin-top: -200px;
        height: calc(630px + 200px + 50px)
    }
}

@media only screen and (max-width: 735px) {
    html.scrubbable-video .section-magenta .sticky-wrapper {
        margin-top: -90px;
        height: calc(290px + 90px + 20vh)
    }
}

       /* ----- Sticky Content Styling ---------- */

html.scrubbable-video .section-magenta .sticky-content {
    position: -webkit-sticky;
    position: sticky;
    top: 50px
}

@media only screen and (max-width: 1068px) {
    html.scrubbable-video .section-magenta .sticky-content {
        top: 50px
    }
}

@media only screen and (max-width: 735px) {
    html.scrubbable-video .section-magenta .sticky-content {
        top: 20vh
    }
}

			/* ---------- Scrubbable Video Effects ----------- */

html.scrubbable-video .section-magenta .image-magenta-dark.hidden {
    opacity: 0
}

.section-magenta video[data-barebones-scrubbable-video] {
    display: none
}

html.scrubbable-video .section-magenta video[data-barebones-scrubbable-video] {
    display: initial;
    width: 100%;
    height: 100%
}


		/* OSTOURA added Icons to The magenta Section */
		
.section-magenta .icon-magenta0-content {
    position: relative;
    margin-bottom: 40px;
    width: 378px
}

@media only screen and (max-width: 1068px) {
    .section-magenta .icon-magenta0-content {
        margin-bottom: 38px;
        width: 247px
    }
}

@media only screen and (max-width: 735px) {
    .section-magenta .icon-magenta0-content {
        margin-bottom: 38px;
        width: 280px
    }
}

.section-magenta .icon-magenta0-content .icon-magenta0 {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/magenta/icon/magenta0.png");
    min-height: auto
}

@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) {
    .section-magenta .icon-magenta0-content .icon-magenta0 {
        background-image: url("../media/knx/magenta/icon/magenta0.png")
    }
}

.section-magenta .icon-magenta0-content .icon-caption {
    padding-bottom: 10px
}

@media only screen and (max-width: 735px) {
    .section-magenta .custom-bracket {
        margin-left: -35px
    }
}

.section-magenta .icon-caption {
    max-width: 100%
}

.section-magenta .icon-list-wrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0;
    width: 378px
}

@media only screen and (max-width: 1068px) {
    .section-magenta .icon-list-wrapper {
        width: 247px;
        margin-top: -28px
    }
}

@media only screen and (max-width: 735px) {
    .section-magenta .icon-list-wrapper {
        width: 280px
    }
}

@media only screen and (max-width: 1068px) {
    .section-magenta .icon-list-wrapper {
        padding-right: 8px
    }
}

.section-magenta .icon-list-wrapper .icon-item {
    margin-top: 2px
}

@media only screen and (max-width: 1068px) {
    .section-magenta .icon-list-wrapper .icon-item {
        margin-top: 30px
    }
}

.section-magenta .icon-magenta1 {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/magenta/icon/magenta1.png")
}

@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) {
    .section-magenta .icon-magenta1 {
        background-image: url("../media/knx/magenta/icon/magenta1.png")
    }
}

.section-magenta .icon-magenta2 {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/magenta/icon/magenta2.png")
}

@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) {
    .section-magenta .icon-magenta2 {
        background-image: url("../media/knx/magenta/icon/magenta2.png")
    }
}

.section-magenta .icon-magenta3 {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/magenta/icon/magenta3.png")
}

@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) {
    .section-magenta .icon-magenta3 {
        background-image: url("../media/knx/magenta/icon/magenta3.png")
    }
}

.section-magenta .icon-magenta4 {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/magenta/icon/magenta4.png")
}

@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) {
    .section-magenta .icon-magenta4 {
        background-image: url("../media/knx/magenta/icon/magenta4.png")
    }
}
			
			/* OSTOURA End of Icons in The Magenta Section */


/* --------- End Of Section Magenta ------------ */




/* ---------- Section Blue -------------- */

.section-blue .video-container {
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 1068px) {
    .section-blue .video-container {
        width: 750px
    }
}

@media only screen and (max-width: 735px) {
    .section-blue .video-container {
        width: 344px
    }
}

@media only screen and (max-width: 1068px) {
    .section-blue .video-container {
        position: relative;
        left: 50%;
        margin-left: -529px
    }
}

@media only screen and (max-width: 1068px) and (max-width: 1068px) {
    .section-blue .video-container {
        left: 50%;
        margin-left: -375px
    }
}

@media only screen and (max-width: 1068px) and (max-width: 735px) {
    .section-blue .video-container {
        left: 50%;
        margin-left: -172px
    }
}

.section-blue .video-container .video-elm {
    width: 1058px;
    height: 700px;
    background-size: 1058px 700px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/blue/start/large.jpg");
    margin-left: auto;
    margin-right: auto
}

@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) {
    .section-blue .video-container .video-elm {
        background-image: url("../media/knx/blue/start/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-blue .video-container .video-elm {
        width: 750px;
        height: 490px;
        background-size: 750px 490px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/blue/start/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-blue .video-container .video-elm {
        background-image: url("../media/knx/blue/start/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-blue .video-container .video-elm {
        width: 344px;
        height: 224px;
        background-size: 344px 224px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/blue/start/small.jpg")
    }
}

@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) {
    .section-blue .video-container .video-elm {
        background-image: url("../media/knx/blue/start/small_2x.jpg")
    }
}

html.no-inline-video .section-blue .video-container .video-elm {
    width: 1058px;
    height: 700px;
    background-size: 1058px 700px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/blue/end/large.jpg")
}

@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) {
    html.no-inline-video .section-blue .video-container .video-elm {
        background-image: url("../media/knx/blue/end/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    html.no-inline-video .section-blue .video-container .video-elm {
        width: 750px;
        height: 490px;
        background-size: 750px 490px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/blue/end/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    html.no-inline-video .section-blue .video-container .video-elm {
        background-image: url("../media/knx/blue/end/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    html.no-inline-video .section-blue .video-container .video-elm {
        width: 344px;
        height: 224px;
        background-size: 344px 224px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/blue/end/small.jpg")
    }
}

@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) {
    html.no-inline-video .section-blue .video-container .video-elm {
        background-image: url("../media/knx/blue/end/small_2x.jpg")
    }
}

.section-blue .video-container .image-endframe {
    width: 1058px;
    height: 700px;
    background-size: 1058px 700px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/blue/end/large.jpg")
}

@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) {
    .section-blue .video-container .image-endframe {
        background-image: url("../media/knx/blue/end/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-blue .video-container .image-endframe {
        width: 750px;
        height: 490px;
        background-size: 750px 490px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/blue/end/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-blue .video-container .image-endframe {
        background-image: url("../media/knx/blue/end/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-blue .video-container .image-endframe {
        width: 344px;
        height: 224px;
        background-size: 344px 224px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/blue/end/small.jpg")
    }
}

@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) {
    .section-blue .video-container .image-endframe {
        background-image: url("../media/knx/blue/end/small_2x.jpg")
    }
}



       /* ----- Extra Wrappers Effects ---------- */
.section-blue {
    overflow: initial;
    z-index: 2
}

.section-blue .headline-wrapper {
    position: relative;
    z-index: 2;
    /* margin-top: -3.5%;  /* OSTOURA Added to Change Headline Vertical Position */
}

.section-blue .figure-wrapper {
    overflow: hidden;
 	margin-top: -23.2%;  /* OSTOURA Added to Change Video Vertical Position */
}

.section-blue .figure-wrapper video[data-barebones-scrubbable-video] {
    display: none
}

       /* ----- Sticky Wrappers Styling ---------- */

html.scrubbable-video .section-blue .sticky-wrapper {
    position: relative;
    z-index: -1;
    margin-top: -280px;
    height: calc(900px + 280px + 50px)
}

@media only screen and (max-width: 1068px) {
    html.scrubbable-video .section-blue .sticky-wrapper {
        margin-top: -200px;
        height: calc(630px + 200px + 50px)
    }
}

@media only screen and (max-width: 735px) {
    html.scrubbable-video .section-blue .sticky-wrapper {
        margin-top: -90px;
        height: calc(290px + 90px + 20vh)
    }
}

       /* ----- Sticky Content Styling ---------- */

html.scrubbable-video .section-blue .sticky-content {
    position: -webkit-sticky;
    position: sticky;
    top: 50px
}

@media only screen and (max-width: 1068px) {
    html.scrubbable-video .section-blue .sticky-content {
        top: 50px
    }
}

@media only screen and (max-width: 735px) {
    html.scrubbable-video .section-blue .sticky-content {
        top: 20vh
    }
}

			/* ---------- Scrubbable Video Effects ----------- */

html.scrubbable-video .section-blue .image-blue-dark.hidden {
    opacity: 0
}

.section-blue video[data-barebones-scrubbable-video] {
    display: none
}

html.scrubbable-video .section-blue video[data-barebones-scrubbable-video] {
    display: initial;
    width: 100%;
    height: 100%
}


		/* OSTOURA added Icons to The Blue Section */
		
.section-blue .icon-01 {
    width: 200px;
    height: 200px;
    background-size: 200px 200px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/blue/icon/icon_01.png")
}

@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) {
    .section-blue .icon-01 {
        background-image: url("../media/knx/blue/icon/icon_01.png")
    }
}

.section-blue .icon-02 {
    width: 200px;
    height: 200px;
    background-size: 200px 200px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/blue/icon/icon_02.png")
}

@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) {
    .section-blue .icon-02 {
        background-image: url("../media/knx/blue/icon/icon_02.png")
    }
}
			/* OSTOURA End of Icons in The Blue Section */


/* --------- End Of Section Blue ------------ */



/* ------------- Section Red -------------- */

.section-red .video-container {
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 1068px) {
    .section-red .video-container {
        width: 750px
    }
}

@media only screen and (max-width: 735px) {
    .section-red .video-container {
        width: 344px
    }
}

@media only screen and (max-width: 1068px) {
    .section-red .video-container {
        position: relative;
        left: 50%;
        margin-left: -529px
    }
}

@media only screen and (max-width: 1068px) and (max-width: 1068px) {
    .section-red .video-container {
        left: 50%;
        margin-left: -375px
    }
}

@media only screen and (max-width: 1068px) and (max-width: 735px) {
    .section-red .video-container {
        left: 50%;
        margin-left: -172px
    }
}

.section-red .video-container .video-elm {
    width: 1058px;
    height: 594px;
    background-size: 1058px 594px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/start/large.jpg");
    margin-left: auto;
    margin-right: auto
}

@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) {
    .section-red .video-container .video-elm {
        background-image: url("../media/knx/red/start/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-red .video-container .video-elm {
        width: 750px;
        height: 420px;
        background-size: 750px 420px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/red/start/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-red .video-container .video-elm {
        background-image: url("../media/knx/red/start/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-red .video-container .video-elm {
        width: 344px;
        height: 192px;
        background-size: 344px 192px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/red/start/small.jpg")
    }
}

@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) {
    .section-red .video-container .video-elm {
        background-image: url("../media/knx/red/start/small_2x.jpg")
    }
}

html.no-inline-video .section-red .video-container .video-elm {
    width: 1058px;
    height: 594px;
    background-size: 1058px 594px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/end/large.jpg")
}

@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) {
    html.no-inline-video .section-red .video-container .video-elm {
        background-image: url("../media/knx/red/end/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    html.no-inline-video .section-red .video-container .video-elm {
        width: 750px;
        height: 420px;
        background-size: 750px 420px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/red/end/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    html.no-inline-video .section-red .video-container .video-elm {
        background-image: url("../media/knx/red/end/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    html.no-inline-video .section-red .video-container .video-elm {
        width: 344px;
        height: 192px;
        background-size: 344px 192px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/red/end/small.jpg")
    }
}

@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) {
    html.no-inline-video .section-red .video-container .video-elm {
        background-image: url("../media/knx/red/end/small_2x.jpg")
    }
}

.section-red .video-container .image-endframe {
    width: 1058px;
    height: 594px;
    background-size: 1058px 594px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/end/large.jpg")
}

@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) {
    .section-red .video-container .image-endframe {
        background-image: url("../media/knx/red/end/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-red .video-container .image-endframe {
        width: 750px;
        height: 420px;
        background-size: 750px 420px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/red/end/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-red .video-container .image-endframe {
        background-image: url("../media/knx/red/end/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-red .video-container .image-endframe {
        width: 344px;
        height: 192px;
        background-size: 344px 192px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/red/end/small.jpg")
    }
}

@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) {
    .section-red .video-container .image-endframe {
        background-image: url("../media/knx/red/end/small_2x.jpg")
    }
}

		/* OSTOURA added Icons to The Red Section */

.section-red .icon-container {
    margin-left: -40px
}

@media only screen and (max-width: 1068px) {
    .section-red .icon-container {
        margin-left: -17px
    }
}

@media only screen and (max-width: 735px) {
    .section-red .icon-container {
        margin-left: -25px
    }
}

@media only screen and (max-width: 735px) {
    .section-red .icon-container {
        max-width: 360px
    }
}

.section-red .icon-container .icon-image {
    min-height: 70px
}

.section-red .icon-01 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/icon/icon_01.gif")
}

@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) {
    .section-red .icon-01 {
        background-image: url("../media/knx/red/icon/icon_01.gif")
    }
}

.section-red .icon-02 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/icon/icon_02.gif")
}

@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) {
    .section-red .icon-02 {
        background-image: url("../media/knx/red/icon/icon_02.gif")
    }
}

.section-red .icon-03 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/icon/icon_03.gif")
}

@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) {
    .section-red .icon-03 {
        background-image: url("../media/knx/red/icon/icon_03.gif")
    }
}

.section-red .icon-04 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/icon/icon_04.gif")
}

@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) {
    .section-red .icon-04 {
        background-image: url("../media/knx/red/icon/icon_04.gif")
    }
}

.section-red .icon-05 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/icon/icon_05.gif")
}

@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) {
    .section-red .icon-05 {
        background-image: url("../media/knx/red/icon/icon_05.gif")
    }
}

.section-red .icon-06 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/icon/icon_06.gif")
}

@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) {
    .section-red .icon-06 {
        background-image: url("../media/knx/red/icon/icon_06.gif")
    }
}

.section-red .icon-07 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/icon/icon_07.gif")
}

@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) {
    .section-red .icon-07 {
        background-image: url("../media/knx/red/icon/icon_07.gif")
    }
}

.section-red .icon-08 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/icon/icon_08.gif")
}

@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) {
    .section-red .icon-08 {
        background-image: url("../media/knx/red/icon/icon_08.gif")
    }
}

.section-red .icon-09 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/icon/icon_09.gif")
}

@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) {
    .section-red .icon-09 {
        background-image: url("../media/knx/red/icon/icon_09.gif")
    }
}

.section-red .icon-10 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/icon/icon_10.gif")
}

@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) {
    .section-red .icon-10 {
        background-image: url("../media/knx/red/icon/icon_10.gif")
    }
}

.section-red .icon-11 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/icon/icon_11.gif")
}

@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) {
    .section-red .icon-11 {
        background-image: url("../media/knx/red/icon/icon_11.gif")
    }
}

.section-red .icon-12 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/red/icon/icon_12.gif")
}

@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) {
    .section-red .icon-12 {
        background-image: url("../media/knx/red/icon/icon_12.gif")
    }
}

/* -------------- End of Section Pink ------------- */

			/* OSTOURA End of Icons in The Red Section */

/* -------------- End of Section Red ------------- */


/* ------------ Section Green -------------- */

html.ios .section-green .video-container {
    -webkit-clip-path: none;
    clip-path: none
}

.section-green .video-container .video-elm {
    width: 960px;
    height: 600px;
    background-size: 960px 600px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/green/start/large.jpg");
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 35px
}

@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) {
    .section-green .video-container .video-elm {
        background-image: url("../media/knx/green/start/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-green .video-container .video-elm {
        width: 700px;
        height: 438px;
        background-size: 700px 438px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/green/start/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-green .video-container .video-elm {
        background-image: url("../media/knx/green/start/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-green .video-container .video-elm {
        width: 500px;
        height: 312px;
        background-size: 500px 312px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/green/start/small.jpg")
    }
}

@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) {
    .section-green .video-container .video-elm {
        background-image: url("../media/knx/green/start/small_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-green .video-container .video-elm {
        top: 20px
    }
}

@media only screen and (max-width: 735px) {
    .section-green .video-container .video-elm {
        top: 15px
    }
}

html.no-inline-video .section-green .video-container .video-elm {
    width: 960px;
    height: 600px;
    background-size: 960px 600px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/green/end/large.jpg")
}

@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) {
    html.no-inline-video .section-green .video-container .video-elm {
        background-image: url("../media/knx/green/end/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    html.no-inline-video .section-green .video-container .video-elm {
        width: 700px;
        height: 438px;
        background-size: 700px 438px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/green/end/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    html.no-inline-video .section-green .video-container .video-elm {
        background-image: url("../media/knx/green/end/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    html.no-inline-video .section-green .video-container .video-elm {
        width: 500px;
        height: 312px;
        background-size: 500px 312px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/green/end/small.jpg")
    }
}

@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) {
    html.no-inline-video .section-green .video-container .video-elm {
        background-image: url("../media/knx/green/end/small_2x.jpg")
    }
}

.section-green .video-container .image-endframe {
    width: 960px;
    height: 600px;
    background-size: 960px 600px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/green/end/large.jpg")
}

@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) {
    .section-green .video-container .image-endframe {
        background-image: url("../media/knx/green/end/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-green .video-container .image-endframe {
        width: 700px;
        height: 438px;
        background-size: 700px 438px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/green/end/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-green .video-container .image-endframe {
        background-image: url("../media/knx/green/end/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-green .video-container .image-endframe {
        width: 500px;
        height: 312px;
        background-size: 500px 312px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/green/end/small.jpg")
    }
}

@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) {
    .section-green .video-container .image-endframe {
        background-image: url("../media/knx/green/end/small_2x.jpg")
    }
}

    			/* ---- After Effects (Extra Movable Items)--- */

.section-green .figure-wrapper {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 1001px
}

@media only screen and (max-width: 1068px) {
    .section-green .figure-wrapper {
        width: 730px
    }
}

@media only screen and (max-width: 735px) {
    .section-green .figure-wrapper {
        width: 100%
    }
}

@media only screen and (max-width: 735px) {
    .section-green .figure-wrapper {
        height: 296px;
        margin-left: 0;
        max-width: 592px
    }
}

@media only screen and (max-width: 735px) {
    .section-green .figure-wrapper .video-container {
        position: absolute;
        right: 6.25%
    }
}

					/* --- iPhone Effect ----- */

.section-green .figure-wrapper .image-iphone {
    width: 390px;
    height: 196px;
    background-size: 390px 196px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/green/after/large.gif");
    position: absolute;
    bottom: 16%;
    left: 22%;
}

@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) {
    .section-green .figure-wrapper .image-iphone {
        background-image: url("../media/knx/green/after/large_2x.gif")
    }
}

@media only screen and (max-width: 1068px) {
    .section-green .figure-wrapper .image-iphone {
        width: 286px;
        height: 144px;
        background-size: 286px 144px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/green/after/medium.gif")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-green .figure-wrapper .image-iphone {
        background-image: url("../media/knx/green/after/medium_2x.gif")
    }
}

@media only screen and (max-width: 735px) {
    .section-green .figure-wrapper .image-iphone {
        width: 202px;
        height: 102px;
        background-size: 202px 102px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/green/after/small.gif")
    }
}

@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) {
    .section-green .figure-wrapper .image-iphone {
        background-image: url("../media/knx/green/after/small_2x.gif")
    }
}

@media only screen and (max-width: 1068px) {
    .section-green .figure-wrapper .image-iphone {
        left: 22%;
    }
}

@media only screen and (max-width: 735px) {
    .section-green .figure-wrapper .image-iphone {
        left: 22%;
    }
}

.section-green .figure-wrapper .image-iphone {
    -webkit-transition: 2.8s linear opacity, 3.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 2.8s linear opacity, 3.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 3.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 2.8s linear opacity;
    transition: 3.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 2.8s linear opacity, 3.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    opacity: 0;
    -webkit-transform: translateX(80px);
    transform: translateX(80px)
}

html.no-inline-video .section-green .figure-wrapper .image-iphone {
    -webkit-transition: none;
    transition: none;
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.section-green .figure-wrapper .has-ended .image-iphone {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

					/*-- iPad Effect --- */

.section-green .figure-wrapper .image-ipad {
    width: 445px;
    height: 319px;
    background-size: 445px 319px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/green/after2/large.gif");
    position: absolute;
    bottom: 0px;
    left: -8px
}

@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) {
    .section-green .figure-wrapper .image-ipad {
        background-image: url("../media/knx/green/after2/large_2x.gif")
    }
}

@media only screen and (max-width: 1068px) {
    .section-green .figure-wrapper .image-ipad {
        width: 317px;
        height: 227px;
        background-size: 317px 227px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/green/after2/medium.gif")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-green .figure-wrapper .image-ipad {
        background-image: url("../media/knx/green/after2/medium_2x.gif")
    }
}

@media only screen and (max-width: 735px) {
    .section-green .figure-wrapper .image-ipad {
        width: 228px;
        height: 163px;
        background-size: 228px 163px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/green/after2/small.gif")
    }
}

@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) {
    .section-green .figure-wrapper .image-ipad {
        background-image: url("../media/knx/green/after2/small_2x.gif")
    }
}

@media only screen and (max-width: 1068px) {
    .section-green .figure-wrapper .image-ipad {
        left: -4px
    }
}

@media only screen and (max-width: 735px) {
    .section-green .figure-wrapper .image-ipad {
        left: -10px
    }
}

.section-green .figure-wrapper .image-ipad {
    -webkit-transition: 0.28s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 0.28s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 3.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.28s linear opacity;
    transition: 3.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.28s linear opacity, 3.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    opacity: 0;
    -webkit-transform: translateX(-280px);
    transform: translateX(-280px)
}

html.no-inline-video .section-green .figure-wrapper .image-ipad {
    -webkit-transition: none;
    transition: none;
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.section-green .figure-wrapper .has-ended .image-ipad {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

					/* -- Apple Watch Effect --- */

.section-green .figure-wrapper .image-iwatch {
    width: 196px;
    height: 390px;
    background-size: 196px 390px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/green/after3/large.gif");
    position: absolute;
    bottom: 0px;
    left: 12%
}

@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) {
    .section-green .figure-wrapper .image-iwatch {
        background-image: url("../media/knx/green/after3/large_2x.gif")
    }
}

@media only screen and (max-width: 1068px) {
    .section-green .figure-wrapper .image-iwatch {
        width: 144px;
        height: 286px;
        background-size: 144px 286px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/green/after3/medium.gif")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-green .figure-wrapper .image-iwatch {
        background-image: url("../media/knx/green/after3/medium_2x.gif")
    }
}

@media only screen and (max-width: 735px) {
    .section-green .figure-wrapper .image-iwatch {
        width: 102px;
        height: 202px;
        background-size: 102px 202px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/green/after3/small.gif")
    }
}

@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) {
    .section-green .figure-wrapper .image-iwatch {
        background-image: url("../media/knx/green/after3/small_2x.gif")
    }
}

@media only screen and (max-width: 1068px) {
    .section-green .figure-wrapper .image-iwatch {
        left: 12%
    }
}

@media only screen and (max-width: 735px) {
    .section-green .figure-wrapper .image-iwatch {
        left: 12%
    }
}

.section-green .figure-wrapper .image-iwatch {
    -webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    opacity: 0;
    -webkit-transform: translateY(180px);
    transform: translateY(180px)
}

html.no-inline-video .section-green .figure-wrapper .image-iwatch {
    -webkit-transition: none;
    transition: none;
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.section-green .figure-wrapper .has-ended .image-iwatch {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}


					/* --- End Of After Effect --- */


/* --------- End of Section Green ------------ */




/* ----------- Section Yellow ------------ */

.section-yellow .headline-wrapper {
    position: relative;
    z-index: 2;
	padding: 140px 0 0
}

@media only screen and (max-width: 1068px) {
    .section-yellow .headline-wrapper {
       padding: 110px 0 0 
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .headline-wrapper {
       padding: 80px 0 0
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .headline-wrapper .typography-headline-elevated {
       max-width: 400px
    }
}

.section-yellow .figure-wrapper {
    position: relative;
    z-index: 1;
    height: 978px;
    margin-top: -340px
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper {
        height: 722px;
        margin-top: -224px
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper {
        height: 433px;
        margin-top: -145px
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper {
        max-width: 540px
    }
}


					/* OSTOURA  Back Photo1  */

.section-yellow .figure-wrapper .transform-centered-hardware {
    position: absolute;
    z-index: 1;
    top: 43%;
    right: 70%;
    -webkit-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware {
    	top: 45%;
        right: 70%;
        left: auto;
    	-webkit-transform: rotateZ(-5deg);
    	transform: rotateZ(-5deg);
    }
}

.section-yellow .figure-wrapper .transform-centered-hardware .image-hardware-wrapper {
    position: relative;
    width: 800px;
    height: 600px
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper .transform-centered-hardware .image-hardware-wrapper {
        width: 600px;
        height: 450px
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware .image-hardware-wrapper {
        width: 320px;
        height: 240px
    }
}

.section-yellow .figure-wrapper .transform-centered-hardware .image-hardware-top {
    width: 800px;
    height: 600px;
    background-size: 800px 600px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/yellow/backphoto1/large.png");
    position: absolute;
    top: 0;
    left: calc(100% - 20px)
}

@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) {
    .section-yellow .figure-wrapper .transform-centered-hardware .image-hardware-top {
        background-image: url("../media/knx/yellow/backphoto1/large_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper .transform-centered-hardware .image-hardware-top {
        width: 600px;
        height: 450px;
        background-size: 600px 450px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/yellow/backphoto1/medium.png")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-yellow .figure-wrapper .transform-centered-hardware .image-hardware-top {
        background-image: url("../media/knx/yellow/backphoto1/medium_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware .image-hardware-top {
        width: 320px;
        height: 240px;
        background-size: 320px 240px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/yellow/backphoto1/small.png")
    }
}

@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) {
    .section-yellow .figure-wrapper .transform-centered-hardware .image-hardware-top {
        background-image: url("../media/knx/yellow/backphoto1/small_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper .transform-centered-hardware .image-hardware-top {
        left: calc(100% - 15px)
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware .image-hardware-top {
        left: calc(100% - 9px)
    }
}

						/* OSTOURA Added Back Photo2  */

.section-yellow .figure-wrapper .transform-centered-hardware2 {
    position: absolute;
    z-index: 1;
    top: 25%;
    right: 90%;
    -webkit-transform: rotateZ(10deg);
    transform: rotateZ(10deg);

}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware2 {
    	top: 30%;
        right: 90%;
        left: auto;
    	-webkit-transform: rotateZ(10deg);
    	transform: rotateZ(10deg);
    }
}

.section-yellow .figure-wrapper .transform-centered-hardware2 .image-hardware-wrapper {
    position: relative;
    width: 600px;
    height: 600px
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper .transform-centered-hardware2 .image-hardware-wrapper {
        width: 450px;
        height: 450px
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware2 .image-hardware-wrapper {
        width: 240px;
        height: 240px
    }
}


.section-yellow .figure-wrapper .transform-centered-hardware2 .image-hardware-top2 {
    width: 600px;
    height: 600px;
    background-size: 600px 600px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/yellow/backphoto2/large.png");
    position: absolute;
    top: 0;
    left: calc(100% - 20px)
}

@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) {
    .section-yellow .figure-wrapper .transform-centered-hardware2 .image-hardware-top2 {
        background-image: url("../media/knx/yellow/backphoto2/large_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper .transform-centered-hardware2 .image-hardware-top2 {
        width: 450px;
        height: 450px;
        background-size: 450px 450px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/yellow/backphoto2/medium.png")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-yellow .figure-wrapper .transform-centered-hardware2 .image-hardware-top2 {
        background-image: url("../media/knx/yellow/backphoto2/medium_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware2 .image-hardware-top2 {
        width: 240px;
        height: 240px;
        background-size: 240px 240px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/yellow/backphoto2/small.png")
    }
}

@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) {
    .section-yellow .figure-wrapper .transform-centered-hardware2 .image-hardware-top2 {
        background-image: url("../media/knx/yellow/backphoto2/small_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper .transform-centered-hardware2 .image-hardware-top2 {
        left: calc(100% - 15px)
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware2 .image-hardware-top2 {
        left: calc(100% - 9px)
    }
}

						/* OSTOURA fixed Device image  */

.section-yellow .figure-wrapper .transform-centered-hardware3 {
    position: absolute;
    z-index: 1;
    top: 9%;
    right: 18%;
    -webkit-transform: skew(-25deg,5deg);
    transform: skew(-25deg,5deg);
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper .transform-centered-hardware3 {
    position: absolute;
    z-index: 1;
    top: 9%;
    right: 10%;
    -webkit-transform: skew(-25deg,5deg);
    transform: skew(-25deg,5deg);
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware3 {
    top: 16%;
    right: 18%;
    -webkit-transform: skew(-25deg,5deg);
    transform: skew(-25deg,5deg);
    }
}

.section-yellow .figure-wrapper .transform-centered-hardware3 .image-hardware-wrapper {
    position: relative;
    width: 600px;
    height: 430px
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper .transform-centered-hardware3 .image-hardware-wrapper {
        width: 450px;
        height: 320px
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware3 .image-hardware-wrapper {
        width: 240px;
        height: 172px
    }
}


.section-yellow .figure-wrapper .transform-centered-hardware3 .image-hardware-bottom {
    width: 600px;
    height: 430px;
    background-size: 600px 430px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/yellow/fixed/large.png");
    position: absolute;
    left: 0;
    top: calc(100% - 45px)
}

@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) {
    .section-yellow .figure-wrapper .transform-centered-hardware3 .image-hardware-bottom {
        background-image: url("../media/knx/yellow/fixed/large_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper .transform-centered-hardware3 .image-hardware-bottom {
        width: 450px;
        height: 320px;
        background-size: 450px 320px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/yellow/fixed/medium.png")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-yellow .figure-wrapper .transform-centered-hardware3 .image-hardware-bottom {
        background-image: url("../media/knx/yellow/fixed/medium_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware3 .image-hardware-bottom {
        width: 240px;
        height: 172px;
        background-size: 240px 172px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/yellow/fixed/small.png")
    }
}

@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) {
    .section-yellow .figure-wrapper .transform-centered-hardware3 .image-hardware-bottom {
        background-image: url("../media/knx/yellow/fixed/small_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper .transform-centered-hardware3 .image-hardware-bottom {
        top: calc(100% - 33px)
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware3 .image-hardware-bottom {
        top: calc(100% - 14px)
    }
}

							/* OSTOURA Movable hand image  */

.section-yellow .figure-wrapper .transform-centered-hardware4 {
    position: absolute;
    z-index: 1;
    top: 70%;
    right: 60%;
    -webkit-transform: rotateZ(-50deg);
    transform: rotateZ(-50deg);
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware4 {
    	right: 60%;
    	left: auto;
    	-webkit-transform: rotateZ(-50deg);
    	transform: rotateZ(-50deg);

    }
}

.section-yellow .figure-wrapper .transform-centered-hardware4 .image-hardware-wrapper {
    position: relative;
    width: 800px;
    height: 800px
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper .transform-centered-hardware4 .image-hardware-wrapper {
        width: 600px;
        height: 600px
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware4 .image-hardware-wrapper {
        width: 320px;
        height: 320px
    }
}


.section-yellow .figure-wrapper .transform-centered-hardware4 .image-hand {
    width: 1131px;
    height: 800px;
    background-size: 1131px 800px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/yellow/movable/large.png");
    position: absolute;
    z-index: 2;
    right: 84px;
    bottom: 70px
}

@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) {
    .section-yellow .figure-wrapper .transform-centered-hardware4 .image-hand {
        background-image: url("../media/knx/yellow/movable/large_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper .transform-centered-hardware4 .image-hand {
        width: 848px;
        height: 460px;
        background-size: 848px 460px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/yellow/movable/medium.png")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-yellow .figure-wrapper .transform-centered-hardware4 .image-hand {
        background-image: url("../media/knx/yellow/movable/medium_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware4 .image-hand {
        width: 753px;
        height: 355px;
        background-size: 753px 355px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/yellow/movable/small.png")
    }
}

@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) {
    .section-yellow .figure-wrapper .transform-centered-hardware4 .image-hand {
        background-image: url("../media/knx/yellow/movable/small_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-yellow .figure-wrapper .transform-centered-hardware4 .image-hand {
        right: 74px;
        bottom: 41px
    }
}

@media only screen and (max-width: 735px) {
    .section-yellow .figure-wrapper .transform-centered-hardware4 .image-hand {
        right: 46px;
        bottom: 45px
    }
}

.section-yellow .figure-wrapper .transform-centered-hardware .image-hand-extended {
    position: absolute;
    left: -786px;
    top: -870px;
    display: none
}

@media only screen and (min-width: 1442px) {
    .section-yellow .figure-wrapper .transform-centered-hardware .image-hand-extended {
        width: 559px;
        height: 800px;
        background-size: 559px 800px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/yellow/backphoto1/large.png")
    }
}

@media only screen and (min-width: 1442px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1442px) and (min-resolution: 1.5dppx), only screen and (min-width: 1442px) and (min-resolution: 144dpi) {
    .section-yellow .figure-wrapper .transform-centered-hardware .image-hand-extended {
        background-image: url("../media/knx/yellow/backphoto1/large_2x.png")
    }
}

@media only screen and (min-width: 1442px) {
    .section-yellow .figure-wrapper .transform-centered-hardware .image-hand-extended {
        display: block
    }
}

/* ------ End of Section Yellow ------ */



/* ----------- Section Black ---------- */

.section-black {
    overflow: hidden;
    z-index: 2
}

.section-black .image-black-hardware {
    width: 983px;
    height: 405px;
    background-size: 983px 405px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/black/img/large.png");
    position: relative;
    left: 50%;
    margin-left: -491.5px
}

@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) {
    .section-black .image-black-hardware {
        background-image: url("../media/knx/black/img/large_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-black .image-black-hardware {
        width: 737px;
        height: 304px;
        background-size: 737px 304px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/black/img/medium.png")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-black .image-black-hardware {
        background-image: url("../media/knx/black/img/medium_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .section-black .image-black-hardware {
        width: 607px;
        height: 250px;
        background-size: 607px 250px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/black/img/small.png")
    }
}

@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) {
    .section-black .image-black-hardware {
        background-image: url("../media/knx/black/img/small_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-black .image-black-hardware {
        left: 50%;
        margin-left: -368.5px
    }
}

@media only screen and (max-width: 735px) {
    .section-black .image-black-hardware {
        left: 50%;
        margin-left: -303.5px
    }
}

@media only screen and (max-width: 735px) {
    .section-black .image-black-hardware {
        left: auto;
        margin-left: 0
    }
}

.section-black .icon-black0-content {
    position: relative;
    margin-bottom: 40px;
    width: 378px
}

@media only screen and (max-width: 1068px) {
    .section-black .icon-black0-content {
        margin-bottom: 38px;
        width: 247px
    }
}

@media only screen and (max-width: 735px) {
    .section-black .icon-black0-content {
        margin-bottom: 38px;
        width: 280px
    }
}

.section-black .icon-black0-content .icon-black0 {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/black/icon/black0.png");
    min-height: auto
}

@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) {
    .section-black .icon-black0-content .icon-black0 {
        background-image: url("../media/knx/black/icon/black0.png")
    }
}

.section-black .icon-black0-content .icon-caption {
    padding-bottom: 10px
}

@media only screen and (max-width: 735px) {
    .section-black .custom-bracket {
        margin-left: -35px
    }
}

.section-black .icon-caption {
    max-width: 100%
}

.section-black .icon-list-wrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0;
    width: 378px
}

@media only screen and (max-width: 1068px) {
    .section-black .icon-list-wrapper {
        width: 247px;
        margin-top: -28px
    }
}

@media only screen and (max-width: 735px) {
    .section-black .icon-list-wrapper {
        width: 280px
    }
}

@media only screen and (max-width: 1068px) {
    .section-black .icon-list-wrapper {
        padding-right: 8px
    }
}

.section-black .icon-list-wrapper .icon-item {
    margin-top: 2px
}

@media only screen and (max-width: 1068px) {
    .section-black .icon-list-wrapper .icon-item {
        margin-top: 30px
    }
}

.section-black .icon-black1 {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/black/icon/black1.png")
}

@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) {
    .section-black .icon-black1 {
        background-image: url("../media/knx/black/icon/black1.png")
    }
}

.section-black .icon-black2 {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/black/icon/black2.png")
}

@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) {
    .section-black .icon-black2 {
        background-image: url("../media/knx/black/icon/black2.png")
    }
}

.section-black .icon-black3 {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/black/icon/black3.png")
}

@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) {
    .section-black .icon-black3 {
        background-image: url("../media/knx/black/icon/black3.png")
    }
}

.section-black .icon-black4 {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/black/icon/black4.png")
}

@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) {
    .section-black .icon-black4 {
        background-image: url("../media/knx/black/icon/black4.png")
    }
}

/* -------- End Section Black ----------- */



/* ---------------- Section Pink -------------------- */

.section-pink .icon-container {
    margin-left: -40px
}

@media only screen and (max-width: 1068px) {
    .section-pink .icon-container {
        margin-left: -17px
    }
}

@media only screen and (max-width: 735px) {
    .section-pink .icon-container {
        margin-left: -25px
    }
}

@media only screen and (max-width: 735px) {
    .section-pink .icon-container {
        max-width: 360px
    }
}

.section-pink .icon-container .icon-image {
    min-height: 70px
}

.section-pink .icon-01 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_01.png")
}

@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) {
    .section-pink .icon-01 {
        background-image: url("../media/knx/pink/icon_01.png")
    }
}

.section-pink .icon-02 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_02.png")
}

@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) {
    .section-pink .icon-02 {
        background-image: url("../media/knx/pink/icon_02.png")
    }
}

.section-pink .icon-03 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_03.png")
}

@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) {
    .section-pink .icon-03 {
        background-image: url("../media/knx/pink/icon_03.png")
    }
}

.section-pink .icon-04 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_04.png")
}

@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) {
    .section-pink .icon-04 {
        background-image: url("../media/knx/pink/icon_04.png")
    }
}

.section-pink .icon-05 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_05.png")
}

@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) {
    .section-pink .icon-05 {
        background-image: url("../media/knx/pink/icon_05.png")
    }
}

.section-pink .icon-06 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_06.png")
}

@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) {
    .section-pink .icon-06 {
        background-image: url("../media/knx/pink/icon_06.png")
    }
}

.section-pink .icon-07 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_07.png")
}

@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) {
    .section-pink .icon-07 {
        background-image: url("../media/knx/pink/icon_07.png")
    }
}

.section-pink .icon-08 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_08.png")
}

@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) {
    .section-pink .icon-08 {
        background-image: url("../media/knx/pink/icon_08.png")
    }
}

.section-pink .icon-09 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_09.png")
}

@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) {
    .section-pink .icon-09 {
        background-image: url("../media/knx/pink/icon_09.png")
    }
}

.section-pink .icon-10 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_10.png")
}

@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) {
    .section-pink .icon-10 {
        background-image: url("../media/knx/pink/icon_10.png")
    }
}

.section-pink .icon-11 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_11.png")
}

@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) {
    .section-pink .icon-11 {
        background-image: url("../media/knx/pink/icon_11.png")
    }
}

.section-pink .icon-12 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_12.png")
}

@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) {
    .section-pink .icon-12 {
        background-image: url("../media/knx/pink/icon_12.png")
    }
}

.section-pink .icon-13 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_13.png")
}

@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) {
    .section-pink .icon-13 {
        background-image: url("../media/knx/pink/icon_13.png")
    }
}

.section-pink .icon-14 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_14.png")
}

@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) {
    .section-pink .icon-14 {
        background-image: url("../media/knx/pink/icon_14.png")
    }
}

.section-pink .icon-15 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_15.png")
}

@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) {
    .section-pink .icon-15 {
        background-image: url("../media/knx/pink/icon_15.png")
    }
}

.section-pink .icon-16 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_16.png")
}

@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) {
    .section-pink .icon-16 {
        background-image: url("../media/knx/pink/icon_16.png")
    }
}

.section-pink .icon-17 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_17.png")
}

@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) {
    .section-pink .icon-17 {
        background-image: url("../media/knx/pink/icon_17.png")
    }
}

.section-pink .icon-18 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_18.png")
}

@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) {
    .section-pink .icon-18 {
        background-image: url("../media/knx/pink/icon_18.png")
    }
}

.section-pink .icon-19 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_19.png")
}

@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) {
    .section-pink .icon-19 {
        background-image: url("../media/knx/pink/icon_19.png")
    }
}

.section-pink .icon-20 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_20.png")
}

@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) {
    .section-pink .icon-20 {
        background-image: url("../media/knx/pink/icon_20.png")
    }
}

.section-pink .icon-21 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_21.png")
}

@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) {
    .section-pink .icon-21 {
        background-image: url("../media/knx/pink/icon_21.png")
    }
}

.section-pink .icon-22 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_22.png")
}

@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) {
    .section-pink .icon-22 {
        background-image: url("../media/knx/pink/icon_22.png")
    }
}

.section-pink .icon-23 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_23.png")
}

@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) {
    .section-pink .icon-23 {
        background-image: url("../media/knx/pink/icon_23.png")
    }
}

.section-pink .icon-24 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_24.png")
}

@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) {
    .section-pink .icon-24 {
        background-image: url("../media/knx/pink/icon_24.png")
    }
}

.section-pink .icon-25 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_25.png")
}

@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) {
    .section-pink .icon-25 {
        background-image: url("../media/knx/pink/icon_25.png")
    }
}

.section-pink .icon-26 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_26.png")
}

@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) {
    .section-pink .icon-26 {
        background-image: url("../media/knx/pink/icon_26.png")
    }
}

.section-pink .icon-27 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_27.png")
}

@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) {
    .section-pink .icon-27 {
        background-image: url("../media/knx/pink/icon_27.png")
    }
}

.section-pink .icon-28 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_28.png")
}

@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) {
    .section-pink .icon-28 {
        background-image: url("../media/knx/pink/icon_28.png")
    }
}

.section-pink .icon-29 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_29.png")
}

@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) {
    .section-pink .icon-29 {
        background-image: url("../media/knx/pink/icon_29.png")
    }
}

.section-pink .icon-30 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_30.png")
}

@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) {
    .section-pink .icon-30 {
        background-image: url("../media/knx/pink/icon_30.png")
    }
}

.section-pink .icon-31 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_31.png")
}

@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) {
    .section-pink .icon-31 {
        background-image: url("../media/knx/pink/icon_31.png")
    }
}

.section-pink .icon-32 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_32.png")
}

@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) {
    .section-pink .icon-32 {
        background-image: url("../media/knx/pink/icon_32.png")
    }
}

.section-pink .icon-33 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_33.png")
}

@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) {
    .section-pink .icon-33 {
        background-image: url("../media/knx/pink/icon_33.png")
    }
}

.section-pink .icon-34 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_34.png")
}

@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) {
    .section-pink .icon-34 {
        background-image: url("../media/knx/pink/icon_34.png")
    }
}

.section-pink .icon-35 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_35.png")
}

@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) {
    .section-pink .icon-35 {
        background-image: url("../media/knx/pink/icon_35.png")
    }
}

.section-pink .icon-36 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_36.png")
}

@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) {
    .section-pink .icon-36 {
        background-image: url("../media/knx/pink/icon_36.png")
    }
}

.section-pink .icon-37 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_37.png")
}

@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) {
    .section-pink .icon-37 {
        background-image: url("../media/knx/pink/icon_37.png")
    }
}

.section-pink .icon-38 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_38.png")
}

@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) {
    .section-pink .icon-38 {
        background-image: url("../media/knx/pink/icon_38.png")
    }
}

.section-pink .icon-39 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_39.png")
}

@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) {
    .section-pink .icon-39 {
        background-image: url("../media/knx/pink/icon_39.png")
    }
}

.section-pink .icon-40 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_40.png")
}

@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) {
    .section-pink .icon-40 {
        background-image: url("../media/knx/pink/icon_40.png")
    }
}

.section-pink .icon-41 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_41.png")
}

@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) {
    .section-pink .icon-41 {
        background-image: url("../media/knx/pink/icon_41.png")
    }
}

.section-pink .icon-42 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_42.png")
}

@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) {
    .section-pink .icon-42 {
        background-image: url("../media/knx/pink/icon_42.png")
    }
}

.section-pink .icon-43 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_43.png")
}

@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) {
    .section-pink .icon-43 {
        background-image: url("../media/knx/pink/icon_43.png")
    }
}

.section-pink .icon-44 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_44.png")
}

@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) {
    .section-pink .icon-44 {
        background-image: url("../media/knx/pink/icon_44.png")
    }
}

.section-pink .icon-45 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_45.png")
}

@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) {
    .section-pink .icon-45 {
        background-image: url("../media/knx/pink/icon_45.png")
    }
}

.section-pink .icon-46 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_46.png")
}

@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) {
    .section-pink .icon-46 {
        background-image: url("../media/knx/pink/icon_46.png")
    }
}

.section-pink .icon-47 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_47.png")
}

@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) {
    .section-pink .icon-47 {
        background-image: url("../media/knx/pink/icon_47.png")
    }
}

.section-pink .icon-48 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_48.png")
}

@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) {
    .section-pink .icon-48 {
        background-image: url("../media/knx/pink/icon_48.png")
    }
}

.section-pink .icon-49 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_49.png")
}

@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) {
    .section-pink .icon-49 {
        background-image: url("../media/knx/pink/icon_49.png")
    }
}

.section-pink .icon-50 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_50.png")
}

@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) {
    .section-pink .icon-50 {
        background-image: url("../media/knx/pink/icon_50.png")
    }
}

.section-pink .icon-51 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_51.png")
}

@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) {
    .section-pink .icon-51 {
        background-image: url("../media/knx/pink/icon_51.png")
    }
}

.section-pink .icon-52 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_52.png")
}

@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) {
    .section-pink .icon-52 {
        background-image: url("../media/knx/pink/icon_52.png")
    }
}

.section-pink .icon-53 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_53.png")
}

@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) {
    .section-pink .icon-53 {
        background-image: url("../media/knx/pink/icon_53.png")
    }
}

.section-pink .icon-54 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_54.png")
}

@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) {
    .section-pink .icon-54 {
        background-image: url("../media/knx/pink/icon_54.png")
    }
}

.section-pink .icon-55 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_55.png")
}

@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) {
    .section-pink .icon-55 {
        background-image: url("../media/knx/pink/icon_55.png")
    }
}

.section-pink .icon-56 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_56.png")
}

@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) {
    .section-pink .icon-56 {
        background-image: url("../media/knx/pink/icon_56.png")
    }
}

.section-pink .icon-57 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_57.png")
}

@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) {
    .section-pink .icon-57 {
        background-image: url("../media/knx/pink/icon_57.png")
    }
}

.section-pink .icon-58 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_58.png")
}

@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) {
    .section-pink .icon-58 {
        background-image: url("../media/knx/pink/icon_58.png")
    }
}

.section-pink .icon-59 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_59.png")
}

@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) {
    .section-pink .icon-59 {
        background-image: url("../media/knx/pink/icon_59.png")
    }
}

.section-pink .icon-60 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_60.png")
}

@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) {
    .section-pink .icon-60 {
        background-image: url("../media/knx/pink/icon_60.png")
    }
}

.section-pink .icon-61 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_61.png")
}

@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) {
    .section-pink .icon-61 {
        background-image: url("../media/knx/pink/icon_61.png")
    }
}

.section-pink .icon-62 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_62.png")
}

@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) {
    .section-pink .icon-62 {
        background-image: url("../media/knx/pink/icon_62.png")
    }
}

.section-pink .icon-63 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_63.png")
}

@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) {
    .section-pink .icon-63 {
        background-image: url("../media/knx/pink/icon_63.png")
    }
}

.section-pink .icon-64 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_64.png")
}

@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) {
    .section-pink .icon-64 {
        background-image: url("../media/knx/pink/icon_64.png")
    }
}

.section-pink .icon-65 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_65.png")
}

@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) {
    .section-pink .icon-65 {
        background-image: url("../media/knx/pink/icon_65.png")
    }
}

.section-pink .icon-66 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_66.png")
}

@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) {
    .section-pink .icon-66 {
        background-image: url("../media/knx/pink/icon_66.png")
    }
}

.section-pink .icon-67 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_67.png")
}

@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) {
    .section-pink .icon-67 {
        background-image: url("../media/knx/pink/icon_67.png")
    }
}

.section-pink .icon-68 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_68.png")
}

@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) {
    .section-pink .icon-68 {
        background-image: url("../media/knx/pink/icon_68.png")
    }
}

.section-pink .icon-69 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_69.png")
}

@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) {
    .section-pink .icon-69 {
        background-image: url("../media/knx/pink/icon_69.png")
    }
}

.section-pink .icon-70 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_70.png")
}

@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) {
    .section-pink .icon-70 {
        background-image: url("../media/knx/pink/icon_70.png")
    }
}

.section-pink .icon-71 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_71.png")
}

@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) {
    .section-pink .icon-71 {
        background-image: url("../media/knx/pink/icon_71.png")
    }
}

.section-pink .icon-72 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_72.png")
}

@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) {
    .section-pink .icon-72 {
        background-image: url("../media/knx/pink/icon_72.png")
    }
}

.section-pink .icon-73 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_73.png")
}

@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) {
    .section-pink .icon-73 {
        background-image: url("../media/knx/pink/icon_73.png")
    }
}

.section-pink .icon-74 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_74.png")
}

@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) {
    .section-pink .icon-74 {
        background-image: url("../media/knx/pink/icon_74.png")
    }
}

.section-pink .icon-75 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_75.png")
}

@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) {
    .section-pink .icon-75 {
        background-image: url("../media/knx/pink/icon_75.png")
    }
}

.section-pink .icon-76 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_76.png")
}

@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) {
    .section-pink .icon-76 {
        background-image: url("../media/knx/pink/icon_76.png")
    }
}

.section-pink .icon-77 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_77.png")
}

@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) {
    .section-pink .icon-77 {
        background-image: url("../media/knx/pink/icon_77.png")
    }
}

.section-pink .icon-78 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_78.png")
}

@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) {
    .section-pink .icon-78 {
        background-image: url("../media/knx/pink/icon_78.png")
    }
}

.section-pink .icon-79 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_79.png")
}

@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) {
    .section-pink .icon-79 {
        background-image: url("../media/knx/pink/icon_79.png")
    }
}

.section-pink .icon-80 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_80.png")
}

@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) {
    .section-pink .icon-80 {
        background-image: url("../media/knx/pink/icon_80.png")
    }
}

.section-pink .icon-81 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_81.png")
}

@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) {
    .section-pink .icon-81 {
        background-image: url("../media/knx/pink/icon_81.png")
    }
}

.section-pink .icon-82 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_82.png")
}

@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) {
    .section-pink .icon-82 {
        background-image: url("../media/knx/pink/icon_82.png")
    }
}

.section-pink .icon-83 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_83.png")
}

@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) {
    .section-pink .icon-83 {
        background-image: url("../media/knx/pink/icon_83.png")
    }
}

.section-pink .icon-84 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_84.png")
}

@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) {
    .section-pink .icon-84 {
        background-image: url("../media/knx/pink/icon_84.png")
    }
}

.section-pink .icon-85 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_85.png")
}

@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) {
    .section-pink .icon-85 {
        background-image: url("../media/knx/pink/icon_85.png")
    }
}

.section-pink .icon-86 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_86.png")
}

@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) {
    .section-pink .icon-86 {
        background-image: url("../media/knx/pink/icon_86.png")
    }
}

.section-pink .icon-87 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_87.png")
}

@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) {
    .section-pink .icon-87 {
        background-image: url("../media/knx/pink/icon_87.png")
    }
}

.section-pink .icon-88 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_88.png")
}

@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) {
    .section-pink .icon-88 {
        background-image: url("../media/knx/pink/icon_88.png")
    }
}

.section-pink .icon-89 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_89.png")
}

@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) {
    .section-pink .icon-89 {
        background-image: url("../media/knx/pink/icon_89.png")
    }
}

.section-pink .icon-90 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/pink/icon_90.png")
}

@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) {
    .section-pink .icon-90 {
        background-image: url("../media/knx/pink/icon_90.png")
    }
}


/* -------------- End of Section Pink ------------- */


/* --------- Section Orange -------------- */

.section-orange {
    overflow: hidden;
    min-height: 1800px;
    padding-top: 300px
}

@media only screen and (max-width: 1068px) {
    .section-orange {
        min-height: 1400px;
        padding-top: 118px;
        border-bottom: 1px solid #fff
    }
}

@media only screen and (max-width: 735px) {
    .section-orange {
        min-height: auto;
        padding-top: 108px;
        padding-bottom: 30px;
        border-bottom: unset
    }
}

.section-orange .figure-content {
    position: relative;
    z-index: 1
}

@media only screen and (max-width: 735px) {
    .section-orange .figure-content {
        display: none
    }
}

.section-orange .image-orange-wrapper {
    will-change: transform;
    margin: -1320px 0 -180px
}

@media only screen and (max-width: 1068px) {
    .section-orange .image-orange-wrapper {
        margin: -950px 0 -100px
    }
}

@media only screen and (max-width: 735px) {
    .section-orange .image-orange-wrapper {
        margin: 0
    }
}

.section-orange .image-orange-wrapper .image-orange-top {
    width: 1203px;
    height: 1061px;
    background-size: 1203px 1061px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/orange/light_weight_top_large.jpg")
}

@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) {
    .section-orange .image-orange-wrapper .image-orange-top {
        background-image: url("../media/knx/orange/light_weight_top_large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-orange .image-orange-wrapper .image-orange-top {
        width: 848px;
        height: 758px;
        background-size: 848px 758px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/orange/light_weight_top_medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-orange .image-orange-wrapper .image-orange-top {
        background-image: url("../media/knx/orange/light_weight_top_medium_2x.jpg")
    }
}

.section-orange .image-orange-wrapper .image-orange-bottom {
    width: 1203px;
    height: 1061px;
    background-size: 1203px 1061px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/orange/light_weight_large.jpg")
}

@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) {
    .section-orange .image-orange-wrapper .image-orange-bottom {
        background-image: url("../media/knx/orange/light_weight_large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-orange .image-orange-wrapper .image-orange-bottom {
        width: 848px;
        height: 758px;
        background-size: 848px 758px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/orange/light_weight_medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-orange .image-orange-wrapper .image-orange-bottom {
        background-image: url("../media/knx/orange/light_weight_medium_2x.jpg")
    }
}

.section-orange .image-orange {
    display: none
}

@media only screen and (max-width: 735px) {
    .section-orange .image-orange {
        display: block;
        float: right;
        margin: 50px -132px -180px 0
    }
}

@media only screen and (max-width: 735px) and (max-width: 735px) {
    .section-orange .image-orange {
        width: 428px;
        height: 986px;
        background-size: 428px 986px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/orange/light_weight_small.jpg")
    }
}

@media only screen and (max-width: 735px) and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (max-width: 735px) and (min-resolution: 144dpi) {
    .section-orange .image-orange {
        background-image: url("../media/knx/orange/light_weight_small_2x.jpg")
    }
}

.section-orange .subsection-content {
    position: relative;
    z-index: 2;
    min-height: 1110px
}

@media only screen and (max-width: 1068px) {
    .section-orange .subsection-content {
        min-height: auto
    }
}

@media only screen and (max-width: 735px) {
    .section-orange .subsection-content {
        padding-bottom: 80px
    }
}

.section-orange .subsection {
    position: relative;
    z-index: 2;
    margin-top: 44px
}

@media only screen and (max-width: 1068px) {
    .section-orange .subsection {
        margin-top: 26px
    }
}

.section-orange .subsection .badge-content {
    margin-top: 20px
}

@media only screen and (max-width: 1068px) {
    .section-orange .subsection .badge-content {
        margin-top: 17px
    }
}

@media only screen and (max-width: 735px) {
    .section-orange .subsection .badge-content {
        margin-top: 15px
    }
}

@media only screen and (max-width: 735px) {
    .section-orange .subsection .badge-content .badge-caption {
        position: absolute;
        margin-top: -2px
    }
}

.section-orange .subsection .icon-container {
    margin-top: -24px
}

@media only screen and (max-width: 735px) {
    .section-orange .subsection .icon-container {
        margin-top: -12px
    }
}

@media only screen and (max-width: 735px) {
    .section-orange .subsection .icon-item {
        margin-top: 74px
    }
}

@media only screen and (max-width: 735px) {
    .section-orange .subsection .icon-processor-content {
        margin-bottom: -36px
    }
}

.section-orange .subsection .icon-processor-content .icon-processor {
    width: 64px;
    height: 64px;
    background-size: 64px 64px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/orange/orange_i5_large.png")
}

@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) {
    .section-orange .subsection .icon-processor-content .icon-processor {
        background-image: url("../media/knx/orange/orange_i5_large_2x.png")
    }
}

.section-orange .subsection .icon-wireless {
    width: 64px;
    height: 64px;
    background-size: 64px 64px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/orange/orange_wifi_large.png")
}

@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) {
    .section-orange .subsection .icon-wireless {
        background-image: url("../media/knx/orange/orange_wifi_large_2x.png")
    }
}

.section-orange .callout {
    border-top: 1px solid #d6d6d6;
    margin-top: 5px;
    padding-top: 45px
}

@media only screen and (max-width: 735px) {
    .section-orange .callout {
        padding-top: 60px
    }
}

@media only screen and (max-width: 735px) {
    .section-orange .callout {
        margin-top: 30px
    }
}

.section-orange .callout .image-battery {
    width: 56px;
    height: 22px;
    background-size: 56px 22px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/orange/orange_battery_large.png");
    margin-top: 5px
}

@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) {
    .section-orange .callout .image-battery {
        background-image: url("../media/knx/orange/orange_battery_large_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .section-orange .callout .image-battery {
        margin-top: 0;
        margin-bottom: 18px
    }
}

/* --------- End of Section Orange -------------- */


/* -------- Section Brown --------- */

.section-brown .headline-wrapper {
    position: relative;
    z-index: 2;
    pointer-events: none
}

.section-brown .section-headline {
    color: #fff
}

.section-brown .image-brown {
    width: 982px;
    height: 62px;
    background-size: 982px 62px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/brown/large.png");
    position: relative;
    left: 50%;
    margin-left: -491px
}

@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) {
    .section-brown .image-brown {
        background-image: url("../media/knx/brown/large_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-brown .image-brown {
        width: 733px;
        height: 45px;
        background-size: 733px 45px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/brown/medium.png")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-brown .image-brown {
        background-image: url("../media/knx/brown/medium_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .section-brown .image-brown {
        width: 968px;
        height: 63px;
        background-size: 968px 63px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/brown/small.png")
    }
}

@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) {
    .section-brown .image-brown {
        background-image: url("../media/knx/brown/small_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-brown .image-brown {
        left: 50%;
        margin-left: -366.5px
    }
}

@media only screen and (max-width: 735px) {
    .section-brown .image-brown {
        left: 50%;
        margin-left: -484px
    }
}

@media only screen and (max-width: 735px) {
    .section-brown .image-brown {
        left: initial;
        margin-left: auto;
        float: right;
        margin-right: 70px
    }
}

@media only screen and (max-width: 735px) {
    html.ie .section-brown .image-brown {
        margin-right: 60%
    }
}

.section-brown .subsection {
    position: relative;
    z-index: 2
}

.section-brown .badge-content .badge-value {
    margin: -13px 0 2px;
    min-height: 62px
}

@media only screen and (max-width: 1068px) {
    .section-brown .badge-content .badge-value {
        margin: -13px 0 4px;
        min-height: 60px
    }
}

@media only screen and (max-width: 735px) {
    .section-brown .badge-content .badge-value {
        min-height: 59px
    }
}
/* ------ End of Section Brown ---------- */



/* ------------- Section Cyan ---------- */

.section-cyan .video-container .video-elm {
    width: 986px;
    height: 324px;
    background-size: 986px 324px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/cyan/start/large.jpg");
    margin-left: auto;
    margin-right: auto
}

@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) {
    .section-cyan .video-container .video-elm {
        background-image: url("../media/knx/cyan/start/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-cyan .video-container .video-elm {
        width: 698px;
        height: 232px;
        background-size: 698px 232px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/cyan/start/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-cyan .video-container .video-elm {
        background-image: url("../media/knx/cyan/start/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-cyan .video-container .video-elm {
        width: 322px;
        height: 106px;
        background-size: 322px 106px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/cyan/start/small.jpg")
    }
}

@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) {
    .section-cyan .video-container .video-elm {
        background-image: url("../media/knx/cyan/start/small_2x.jpg")
    }
}

html.no-inline-video .section-cyan .video-container .video-elm {
    width: 986px;
    height: 324px;
    background-size: 986px 324px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/cyan/end/large.jpg")
}

@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) {
    html.no-inline-video .section-cyan .video-container .video-elm {
        background-image: url("../media/knx/cyan/end/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    html.no-inline-video .section-cyan .video-container .video-elm {
        width: 698px;
        height: 232px;
        background-size: 698px 232px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/cyan/end/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    html.no-inline-video .section-cyan .video-container .video-elm {
        background-image: url("../media/knx/cyan/end/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    html.no-inline-video .section-cyan .video-container .video-elm {
        width: 322px;
        height: 106px;
        background-size: 322px 106px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/cyan/end/small.jpg")
    }
}

@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) {
    html.no-inline-video .section-cyan .video-container .video-elm {
        background-image: url("../media/knx/cyan/end/small_2x.jpg")
    }
}

.section-cyan .video-container .image-endframe {
    width: 986px;
    height: 324px;
    background-size: 986px 324px;
    background-repeat: no-repeat;
    background-image: url("../media/knx/cyan/end/large.jpg")
}

@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) {
    .section-cyan .video-container .image-endframe {
        background-image: url("../media/knx/cyan/end/large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .section-cyan .video-container .image-endframe {
        width: 698px;
        height: 232px;
        background-size: 698px 232px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/cyan/end/medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-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) {
    .section-cyan .video-container .image-endframe {
        background-image: url("../media/knx/cyan/end/medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .section-cyan .video-container .image-endframe {
        width: 322px;
        height: 106px;
        background-size: 322px 106px;
        background-repeat: no-repeat;
        background-image: url("../media/knx/cyan/end/small.jpg")
    }
}

@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) {
    .section-cyan .video-container .image-endframe {
        background-image: url("../media/knx/cyan/end/small_2x.jpg")
    }
}

.section-cyan .video-container video.ac-video-media-controller {
    left: 0;
    right: 0
}

/* -------- End of Section Cyan ----------- */