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

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


.headline-span 
{
    display: block
}

.section-headline 
{
    color: #cfcfcf
}

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


.hero-headline 
{
    color: #ffffff
}

.hero-subheadline 
{
    color: #000000
}

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

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

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

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

.animated-subheadline
{
	opacity: 0;
	-webkit-animation: fademovescale 7s forwards; 
	animation: fademovescale 7s forwards;
	animation-delay: 4s;

}

@-webkit-keyframes fademovescale  /* 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(210%);		/* 15px */
	}
}

@keyframes fademovescale  /* 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(210%);		/* 15px */
	}
}

/* ----------- End Of Hero Text Section ---------- */


/* --------------- 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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/gray/icon/icon_06.png")
    }
}
			/* End Of Icon Adding Section */ 


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



/* ---------- 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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/blue/end/small_2x.jpg")
    }
}



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

.section-blue .headline-wrapper {
    position: relative;
    z-index: 2
}

.section-blue .figure-wrapper {
    overflow: hidden
}

.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%
}



/* --------- 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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/red/end/small_2x.jpg")
    }
}

/* -------------- 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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/green/after/large.png");
    position: absolute;
    bottom: 0;
    right: -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-iphone {
        background-image: url("../media/allinone/green/after/large_2x.png")
    }
}

@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/allinone/green/after/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-green .figure-wrapper .image-iphone {
        background-image: url("../media/allinone/green/after/medium_2x.png")
    }
}

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

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

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

.section-green .figure-wrapper .image-iphone {
    -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: 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/allinone/green/after2/large.png");
    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/allinone/green/after2/large_2x.png")
    }
}

@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/allinone/green/after2/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-green .figure-wrapper .image-ipad {
        background-image: url("../media/allinone/green/after2/medium_2x.png")
    }
}

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

@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/allinone/green/after3/large.png");
    position: absolute;
    bottom: -35px;
    left: -10%
}

@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/allinone/green/after3/large_2x.png")
    }
}

@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/allinone/green/after3/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-green .figure-wrapper .image-iwatch {
        background-image: url("../media/allinone/green/after3/medium_2x.png")
    }
}

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

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

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

.section-green .figure-wrapper .image-iwatch {
    -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: translateY(80px);
    transform: translateY(80px)
}

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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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: 81px;
    background-size: 983px 81px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/black/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/allinone/black/large_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .section-black .image-black-hardware {
        width: 737px;
        height: 61px;
        background-size: 737px 61px;
        background-repeat: no-repeat;
        background-image: url("../media/allinone/black/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/allinone/black/medium_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .section-black .image-black-hardware {
        width: 607px;
        height: 51px;
        background-size: 607px 51px;
        background-repeat: no-repeat;
        background-image: url("../media/allinone/black/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/allinone/black/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/allinone/black/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/allinone/black/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/allinone/black/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/allinone/black/black1.png")
    }
}

.section-black .icon-black2 {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/black/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/allinone/black/black2.png")
    }
}

.section-black .icon-black3 {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/black/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/allinone/black/black3.png")
    }
}

.section-black .icon-black4 {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/black/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/allinone/black/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/allinone/pink/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-pink .icon-01 {
        background-image: url("../media/allinone/pink/icon_01.gif")
    }
}

.section-pink .icon-02 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/pink/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-pink .icon-02 {
        background-image: url("../media/allinone/pink/icon_02.gif")
    }
}

.section-pink .icon-03 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/pink/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-pink .icon-03 {
        background-image: url("../media/allinone/pink/icon_03.gif")
    }
}

.section-pink .icon-04 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/pink/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-pink .icon-04 {
        background-image: url("../media/allinone/pink/icon_04.gif")
    }
}

.section-pink .icon-05 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/pink/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-pink .icon-05 {
        background-image: url("../media/allinone/pink/icon_05.gif")
    }
}

.section-pink .icon-06 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/pink/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-pink .icon-06 {
        background-image: url("../media/allinone/pink/icon_06.gif")
    }
}

.section-pink .icon-07 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/pink/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-pink .icon-07 {
        background-image: url("../media/allinone/pink/icon_07.gif")
    }
}

.section-pink .icon-08 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/pink/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-pink .icon-08 {
        background-image: url("../media/allinone/pink/icon_08.gif")
    }
}

.section-pink .icon-09 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/pink/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-pink .icon-09 {
        background-image: url("../media/allinone/pink/icon_09.gif")
    }
}

.section-pink .icon-10 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/pink/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-pink .icon-10 {
        background-image: url("../media/allinone/pink/icon_10.gif")
    }
}

.section-pink .icon-11 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/pink/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-pink .icon-11 {
        background-image: url("../media/allinone/pink/icon_11.gif")
    }
}

.section-pink .icon-12 {
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-image: url("../media/allinone/pink/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-pink .icon-12 {
        background-image: url("../media/allinone/pink/icon_12.gif")
    }
}

/* -------------- 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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/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/allinone/cyan/end/small_2x.jpg")
    }
}

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

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