.expanded{
	transition: height 200ms ease-in-out 100ms;}

#white{
	color: white;}

.additional{
		display: none;}

/*========================== TEXTBOX ==========================*/

.textbox{
	z-index: 21;
	vertical-align: top;
	position: relative;}

.textbox button{
	width: auto;
	position: relative;
	text-transform: uppercase;
	text-decoration: none;
	display: block;
	left: 50%;
	margin: 10px 0 10px 0;
	transform: translateX(-50%);}

.textbox p{
	transition: opacity 200ms ease-in-out 100ms;
	position: relative;
	margin: 20px 20px 0 20px;
	padding: 0 0 0 0;}

.layers .textbox h1{
	transition: opacity 200ms ease-in-out 100ms;
	position: relative;
	margin: 1rem 1rem 0 1rem;
	padding: 0 0 0 0;}

.layers .textbox h2,
.layers .textbox h3{
	margin: 20px;}

.textbox a{
	color: #f47920;}

.textbox a,
.textbox a:hover button{
	text-decoration: none;}

.textbox a:hover{
	/*text-decoration: underline;*/
	color: #f47920;}

.textbox.left{
	left: 25%;
	float: left;
	transform: translateX(-50%);
	width: 460px;}

.textbox.right{
	right: 25%;
	float: right;
	transform: translateX(50%);
	width: 460px;}

.textbox.center{
	left: 50%;
	float: left;
	transform: translateX(-50%);
	width: 500px;
	text-align: center;}

.textbox ul{
	list-style-image: url(../img/bullet.png);
	margin: 0 0 0 0;}

/*========================== HANDLE ==========================*/

#handle{
	position: relative;
	z-index: 21;
	background-image: url(../img/handle.png);
	background-repeat: no-repeat;
	background-position: top center;
	transition: width 400ms ease-in-out 100ms,
				background-position 300ms ease-in-out;
	cursor: pointer;
	margin: 1rem 20px 0 20px;
	width: 140px;
	height: 30px;}

#handle.clicked{
	width: 80px;
	transition: width 200ms ease-in-out 300ms,
				background-position 300ms ease-in-out;
	background-position: bottom center;}

#handle.left{
	left: 0;
	float: left;}

#handle.right{
	right: 0;
	float: right;}

#handle.center{
	left: 50%;
	float: left;}

#handle.onWhite{
	background-color: rgba(0,0,0,0.2);}

#handle.onWhite:hover{
	background-color: rgba(0,0,0,0.4);}

#handle.onGrey{
	background-color: rgba(0,0,0,0.4);
	background-image: url(../img/handlewhite.png);}

#handle.onGrey:hover{
	background-color: rgba(0,0,0,0.6);}

#handle:hover{
	transition: background-color 200ms ease-in-out;
	background-color: rgba(0,0,0,0.4);}

/*========================== LAYER 1 ==========================*/

.layer01{
	height: 400px;
	background-color: white;
	overflow: hidden;}

.layer01.expanded{
	transition: height 200ms ease-in-out 0ms;
	height: 730px;}

.layer01 .textbox{
	top: 20px;
	transition: top 300ms ease-out;}

.layer01.expanded .textbox{
	top: 0;
	transition: top 300ms ease-out;}

.layer01 img{
	position: absolute;
	padding: 0 0 0 0;
	top: 10px;
	height: 660px;
	right: 50%;
	float: right;
	transition: height 300ms ease-in-out 100ms;
	transform: translate(+100%, 0%);}

/*========================== LAYER 2 ==========================*/

.layer02{
	background-image: url(../img/features/02_contacts_orange.png);
	background-color: #f47920;
	background-position: top;
	background-size: 100%;
	background-attachment: fixed;
	transition: height 200ms ease-in-out 0ms;
	height: 400px;}

.layer02.expanded{
	transition: height 200ms ease-in-out 0ms;
	height: 840px;}

.layer02 #handle{
	background-color: rgba(255,255,255,1.0);}

.layer02 #handle:hover{
	background-color: rgba(255,255,255,0.9);}

.layer02 .textbox.right{
	width: 500px;
	transition: top 300ms ease-out;}

.layer02.expanded .textbox.right{
	top: 0;
	transition: top 300ms ease-out;}

.layer02 img{
	opacity: 0;
	transition: opacity 600ms ease-in-out;
	position: absolute;
	float: left;
	left: 30%;
	top: 50%;
	width: 150px;
	transform: translate(-50%, -50%);}

.layer02 .grey{
	right: 25%;
	float: right;
	transform: translateX(50%);
	width: 500px;
	z-index: 2;
	position: absolute;
	background-color: rgba(104,13,0,0.6);
	background-blend-mode: multiply;
	height: 100%;}

.layer02 button{
	clear: both;}

.layer02 .textbox h1{
	color: white;}

.layer02 .textbox h2{
	color: white;}

.layer02 .textbox p{
	color: white;}

.layer02 .textbox ul li{
	color: white;}
/*
.additional{
	opacity: 0.0;
	transition: opacity 200ms ease-in-out 100ms;}
*/
/*========================== LAYER 3 ==========================*/

.layer03{
	background-color: white;
	width: 100%;
	height: 350px;}

.layer03.expanded{
	height: 460px;}

.layer03 .textbox{
	top: 80px;
	transition: top 300ms ease-out;}

.layer03.expanded .textbox{
	top: 0;
	transition: top 300ms ease-out;}

.layer03 .textbox h3{
	margin-bottom: 0;}

.layer03 .devices{
	position: absolute;
	width: 500px;
	height: 250px;
	bottom: 50%;
	right: 50%;
	float: right;
	transform: translate(100%, 50%);
	transition: bottom 200ms ease-in-out;}

.layer03.expanded .devices{
	display: block;}

.devices.smartphone{
	opacity: 0;
	z-index: 3;
	animation-duration: 600ms;
	animation-delay: 0;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.layer03.expanded .devices.pc{
	transition: bottom 200ms ease-in-out;
	bottom: 60%;}

.layer03.expanded .devices.smartphone{
	transition: bottom 200ms ease-in-out;
	bottom: 40%;}

.devices.tablet{
	opacity: 0;
	z-index: 2;
	animation-duration: 600ms;
	animation-delay: 200ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.devices.pc{
	opacity: 0;
	z-index: 1;
	animation-duration: 600ms;
	animation-delay: 400ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.animation{
	animation-name: DeviceFrames;}

@keyframes DeviceFrames{
	0% {
		right: 30%;
		opacity: 0.0;}
	100% {
		right: 50%;
		opacity: 1.0;}}

/*========================== LAYER 4 ==========================*/

.layer04{
	overflow: hidden;
	position: relative;
	background-color: #939597;
	width: 100%;
	height: 360px;}

.layer04 iframe{
	z-index: 22;
	left: 25%;
	top: 50%;
	float: left;
	transform: translate(-50%, -50%);
	transition: opacity 200ms ease-in-out;
	position: absolute;
	width: 40%;
	height: 80%;}

.layer04.expanded{
	height: 700px;}

.layer04 img{
	position: absolute;
	float: left;
	left: 25%;
	width: 450px;
	top: 50%;
	transition: width 200ms ease-in-out;
	transform: translate(-50%, -50%);}

.layer04.expanded img{
	width: 550px;}

.layer04 .textbox{
	top: 46px;
	transition: top 300ms ease-out;}

.layer04.expanded .textbox{
	top: 0;
	transition: top 300ms ease-out;}

.layer04 .textbox a{
	color: white;}

.layer04 .textbox h1{
	color: white;}

.layer04 .textbox p{
	color: white;}

/*========================== LAYER 5 ==========================*/

.layer05{
	background-color: #e6e7e8;
	height: 360px;}

.layer05.expanded{
	height: 680px;}

.layer05 .textbox{
	top: 80px;
	transition: top 300ms ease-out;
	height: 650px;}

.layer05.expanded .textbox{
	top: 0;
	transition: top 300ms ease-out;}

.layer05 .textbox h1{
	font-size: 38px;}

.crm{
	position: absolute;
	padding: 0 0 0 0;
	top: 450px;
	transform: translateY(-50%);
	transition: top 800ms ease-in-out;
	left: 50%;
	float: right;
	width: 800px;}

.crm.slide{
	top: 350px;}

.layer05.expanded .crm{
	top: 50%;
	transform: translateY(-50%);}



/*========================== LAYER 6 ==========================*/

.layer06{
	background-color: #f47920;
	width: 100%;
	height: 300px;}

.layer06 .textbox{
	top: 40px;
	color: white;
	width: 400px;}

.layer06 .textbox h1{
	color: white;}

.layer06 .footprint{
	top: 50%;
	left: 25%;
	float: left;
	transform: translate(-50%, -50%);
	position: absolute;
	width: 250px;
	height: 250px;}

.footprint img{
	width: 250px;
	height: 250px;}

.footprint.leftfoot{
	opacity: 0;
	z-index: 1;
	animation-duration: 600ms;
	animation-delay: 0ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.footprint.rightfoot{
	opacity: 0;
	z-index: 2;
	animation-duration: 600ms;
	animation-delay: 100ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.footprint.heartleft{
	opacity: 0;
	z-index: 3;
	animation-duration: 600ms;
	animation-delay: 200ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.footprint.heartright{
	opacity: 0;
	z-index: 4;
	animation-duration: 600ms;
	animation-delay: 300ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;}

.footanimation{
	animation-name: FootFrames;}

@keyframes FootFrames{
	0% {
		opacity: 0.0;}
	100% {
		opacity: 1.0;}}

/*========================== LAYER 7 ==========================*/

.layer07{
	background-image: url(../img/features/07_blackboard.png);
	background-color: black;
	background-position: 0 0;
	background-size: cover;
	background-attachment: fixed;
	transition:	height 200ms ease-in-out 100ms;
	height: 420px;
	text-align: center;}

.layer07 button{
	position: relative;
	display: block;
	clear: both;
	margin: 2rem auto 1rem auto;
	width: 400px;
	opacity: 0.0;
	transition: margin 200ms ease-in-out,
				opacity 300ms ease-in-out 150ms}

	.layer07.expanded button{
		opacity: 1;
		transition: margin 200ms ease-in-out,
					opacity 300ms ease-in-out 150ms}

.layer07 #handle{
	position: absolute;
	bottom: 30px;
	right: 5%;
	display: block;
	clear: both;
	transition: background-color 100ms ease-in-out;
	border: 2px solid #f47920;}

.layer07 #handle:hover{
	background-color: #f47920;
	color: white;}

.layer07 .textbox{
	color: white;
	left: 75%;
	transition:	left 400ms ease-in-out 200ms,
				transform 400ms ease-out 200ms;
	width: 400px;
	padding-bottom: 2rem;}

	.layer07.expanded .textbox.left{
		left: 50%;
		transition:	left 400ms ease-in-out,
					transform 400ms ease-out;
		transform: translate(-600px, 0%);}

.layer07 .textbox.left.desktop{
	transition-delay: 100ms;}

.layer07 .textbox.left.mobile{
	transition-delay: 0ms;}

	.layer07.expanded .textbox.left.mobile{
		transition-delay: 200ms;}

.layer07 .textbox h1,
.layer07 .textbox p,
.layer07 .textbox ul{
	text-align: left;
	color: white;}

.layer07 .meme{
	position: absolute;
	bottom: 0;
	left: 0;
	float: left;
	margin-top: -80px;
	height: 460px;
	overflow: hidden;
	transition:	left 300ms ease-in-out;}

.layer07.expanded .meme{
	transition:	left 300ms ease-in-out;
	left: -150px;}

.layer07 .meme img{
	height: 460px;}



/*========================== LAYER 8 ==========================*/

.layer08{
	height: 400px;
	width: 100%;
	background-color: #e7e7e8;
	transition:	height 200ms ease-in-out 100ms;
	overflow: hidden;}

.layer08.expanded{
	height: 670px;
	transition:	height 200ms ease-in-out 100ms;}

.layer08 .textbox{
	top: 50px;
	transition: top 300ms ease-out;
	width: 500px;}

.layer08.expanded .textbox{
	top: 0;
	transition: top 300ms ease-out;}

.layer08 .coin{
	z-index: 5;
	position: absolute;
	width: 130px;
	height: 105px;
	top: 0;
	right: 25%;
	transform: translateX(81px);
	float: right;}

.layer08 .coin img{
	top: 160px;
	position: absolute;
	width: 130px;}

.layer08.expanded .coin{
	height: 240px;
	transition: height 200ms ease-in-out 100ms;}

.layer08 .pig{
	position: absolute;
	width: 400px;
	float: right;
	top: 50%;
	right: 25%;
	transform: translate(50%, -50%);}
.textbox .ai-features-home-button {
    left: initial;
    transform: none;
    display: inline-block; 
    font-size: 1em;
}
.textbox .ai-features-button {
    left: initial;
    transform: none;
    display: inline-block; 
    background-color: #FFF8E1;
    font-size: 1em;
    color: #404040;
}

.ai-feature-layer01{
	height: 460px;
	background-color: #FFEDB3;
	overflow: hidden;
}

.ai-feature-layer01.expanded{
	transition: height 200ms ease-in-out 0ms;
	height: 730px;}

.ai-feature-layer01 .layer-wrapper {
    width: 1050px;
    margin: 0 auto;
    height: 100%;
}
.ai-feature-layer01 .textbox{
	top: 20px;
	transition: top 300ms ease-out;
}

.ai-feature-layer01.expanded .textbox{
	top: 0;
	transition: top 300ms ease-out;}
.ai-feature-layer01 .textbox.right {
    transform: none;
    right: 0px;
    float: none;
    width: 50%;
}
.ai-feature-layer01 .textbox.left {
    transform: none;
    left: 0px;
    width: 50%;
}
.ai-feature-layer01 img{
	padding: 0 0 0 0;
	top: 10px;
        width: 100%;
	transition: height 300ms ease-in-out 100ms;
}

/*========================== LAYER 2 ==========================*/

.ai-feature-layer02{
	height: 400px;}
.ai-feature-layer02 .layer-wrapper {
    width: 1050px;
    margin: 0 auto;
}
.ai-feature-layer02.expanded{
	transition: height 200ms ease-in-out 0ms;
	height: 840px;}

.ai-feature-layer02 #handle{
	background-color: rgba(255,255,255,1.0);}

.ai-feature-layer02 #handle:hover{
	background-color: rgba(255,255,255,0.9);}

.ai-feature-layer02 .textbox.right{
	transition: top 300ms ease-out;
        right: 0px;
        transform: none;
        float: none;
        width: 50%;
}

.ai-feature-layer02 .textbox.left{
        left: 0px;
        transform: none;
        width: 50%;
}

.ai-feature-layer02.expanded .textbox.right{
	top: 0;
	transition: top 300ms ease-out;}

.ai-feature-layer02 img{
	float: left;}

.ai-feature-layer02 .grey{
	right: 25%;
	float: right;
	transform: translateX(50%);
	width: 500px;
	z-index: 2;
	position: absolute;
	background-color: rgba(104,13,0,0.6);
	background-blend-mode: multiply;
	height: 100%;}

.ai-feature-layer02 button{
	clear: both;}

.ai-feature-layer02 .textbox h1{
	}

.ai-feature-layer02 .textbox h2{
	color: white;}

.ai-feature-layer02 .textbox p{
	}

.ai-feature-layer02 .textbox ul li{
	}
/*
.additional{
	opacity: 0.0;
	transition: opacity 200ms ease-in-out 100ms;}
*/
/*========================== LAYER 3 ==========================*/

.ai-feature-layer03{
	background-color: #D5E4AB;
	width: 100%;
	height: 350px;}
.ai-feature-layer03 .layer-wrapper {
    width: 1050px;
    margin: 0 auto;
}
.ai-feature-layer03.expanded{
	height: 460px;}

.ai-feature-layer03 .textbox{
	transition: top 300ms ease-out;}
.ai-feature-layer03 .textbox.right {
    right: 0px;
    transform: none;
    float: none;
    width: 50%;
}
.ai-feature-layer03 .textbox.left {
    left: 0px;
    transform: none;
    width: 50%;
}
.ai-feature-layer03.expanded .textbox{
	top: 0;
	transition: top 300ms ease-out;}

.ai-feature-layer03 .textbox h3{
	margin-bottom: 0;}

.ai-feature-layer03 .devices{
	position: absolute;
	width: 500px;
	height: 250px;
	bottom: 50%;
	right: 50%;
	float: right;
	transform: translate(100%, 50%);
	transition: bottom 200ms ease-in-out;}

.ai-feature-layer03.expanded .devices{
	display: block;}


.ai-feature-layer03.expanded .devices.pc{
	transition: bottom 200ms ease-in-out;
	bottom: 60%;}

.ai-feature-layer03.expanded .devices.smartphone{
	transition: bottom 200ms ease-in-out;
	bottom: 40%;}
.ai-feature-layer03 .textbox.right .ul-left {
    float: left;
    width:50%;
    padding: 0px;
}
.ai-feature-layer03 .textbox.right .ul-right {
    float: left;
    width: 50%;
    padding: 0px;
}

@media screen and (max-width: 1680px){
	.layer07.expanded .meme{
		left: -200px;}
}

@media screen and (max-width: 1440px){
	.layer07.expanded .meme{
		left: -400px;}}

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

	.layer07.expanded .textbox.left{
		transform: translate(-400px, 0%);}

	.layer07.expanded{
		height: 720px;}

	.layer07.expanded .mobile{
		padding-left: 400px;}

	.layer07 .meme{
		left: -100px;}

	.layer07.expanded .meme{
	left: -100px;}
 
}
@media screen and (max-width: 1050px){
    .crm{
        width: 600px;
    }

    .crm.slide{
        top: 300px;
    }
    .ai-feature-layer01 .layer-wrapper {
        width: 800px;
        margin: 0 auto;
    }
    .ai-feature-layer02 .layer-wrapper {
        width: 800px;
        margin: 0 auto;
    }
    .ai-feature-layer03 .layer-wrapper {
        width: 800px;
        margin: 0 auto;
    }
}

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

    /*========================== GENERAL LAYERS ==========================*/

    .headerImage .rotation .textbox{
        padding: 0rem;
    }

    .textbox{
        padding: 2rem;
    }

    .textbox #handle{
        margin: 1rem 0 0 0;
    }

    .textbox.left{
        left: 0;
        float: left;
        transform: translateX(0%);
    }

    .textbox.right{
        right: 0;
        float: right;
        transform: initial;
    }

    .textbox.center{
        left: 0;
        float: left;
        transform: initial;
        text-align: center;
    }

    .layers .textbox h1{
        font-size: 1.8rem;
        line-height: 2rem;
    }

    .layers .textbox h1{
        margin: 0;
        padding: 0;
    }

    .layers .textbox h2{
        margin: 0;
        padding: 1rem 0 1rem 0;
    }

    .layers .textbox p{
        margin: 0;
        padding: 1rem 0 0 0;
    }
    /*
            .additional{
                    display: none;}
    */
    /*========================== LAYER 1 ==========================*/

    .layer01{
        height: initial;
        width: inherit;
        background-color: white;
        overflow: hidden;
    }

    .layer01.expanded{
        height: initial;
    }

    .layer01 .textbox{
        top: initial;
        width: 80%;
        transition: top 300ms ease-out;
    }

    .layer01 .textbox ul{
        margin-bottom: 10px;
    }

    .layer01 img{
        display: none;
    }

    /*========================== LAYER 2 ==========================*/

    .layer02{
        height: initial;
    }

    .layer02.expanded{
        height: initial;
    }

    .layer02 .textbox.right{
        width: initial;
        top: initial;
    }

    .layer02 .grey{
        right: 0;
        transform: initial;
        width: 100%;
    }

    .layer02 img{
        display: none;
    }

    /*========================== LAYER 3 ==========================*/

    .layer03{
        height: initial;
    }

    .layer03.expanded{
        height: initial;
    }

    .layer03 .textbox{
        top: 0;
        width: initial;
    }

    .layer03 .devices{
        display: none;
    }

    .layer03.expanded .devices{
        display: none;
    }

    /*========================== LAYER 4 ==========================*/

    .layer04{
        height: initial;
    }

    .layer04.expanded{
        height: initial;
    }

    .layer04 img{
        display: none;
    }

    .layer04 .textbox{
        top: 0;
        width: initial;
        height: initial;
    }

    /*========================== LAYER 5 ==========================*/

    .layer05{
        height: initial;
    }

    .layer05.expanded{
        height: initial;
    }

    .layer05 .textbox{
        top: initial;
        width: initial;
        height: initial;
    }

    .layer05.expanded .textbox{
        top: 0;
        transition: top 300ms ease-out;
    }

    .layer05 .textbox h1{
    }

    .crm{
        display: none;
    }

    /*========================== LAYER 6 ==========================*/

    .layer06{
        height: initial;
    }

    .layer06 .textbox{
        top: 0;
        width: initial;
    }

    .layer06 .textbox h1{
        color: white;
    }

    .layer06 .footprint{
        display: none;
    }

    /*========================== LAYER 7 ==========================*/

    .layer07{
        background-image: none;
        height: initial;
    }

    .layer07.expanded{
        height: initial;
    }

    .layer07.expanded button{
        display: block;
        position: relative;
        width: 80%;
        bottom: initial;
        margin: 0 auto 1rem auto;
        transform: translate(0,0);
    }

    .layer07 .textbox{
        left: 0;
        padding: 1rem 2rem 1rem 2rem;
        width: initial;
    }

    .layer07.expanded .textbox.left{
        left: 0;
        padding: 1rem 2rem 1rem 2rem;
        transform: translate(0, 0);
    }

    .layer07 #handle{
        position: relative;
        bottom: initial;
        right: initial;
        margin: 0 auto 1rem auto;
    }

    .layer07.expanded #handle{
        margin: 0 auto 1rem auto;
    }

    .layer07 .meme{
        display: none;
    }

    /*========================== LAYER 8 ==========================*/

    .layer08{
        height: initial;
    }

    .layer08.expanded{
        height: initial;
    }

    .layer08 .textbox{
        top: 0;
        width: initial;
    }

    .layer08.expanded .textbox{
        top: 0;
        transition: top 300ms ease-out;
    }

    .layer08 .coin{
        display: none;
    }


    .layer08 .pig{
        display: none;
    }




    /*========================== LAYER 1 ==========================*/

    .ai-feature-layer01{
        height: 730px;
        background-color: #FFEDB3;
        overflow: hidden;
    }
    .ai-feature-layer01 .layer-wrapper {
        width: 100%;
        margin: 0 auto;
    }
    .ai-feature-layer01 .textbox {
        width: 100%;
        margin: 0 auto;
    }
    .ai-feature-layer01.expanded{
        transition: height 200ms ease-in-out 0ms;
        height: 730px;
    }

    .ai-feature-layer01 .textbox{
        top: 20px;
        transition: top 300ms ease-out;
        padding: 10px;
    }

    .ai-feature-layer01.expanded .textbox{
        top: 0;
        transition: top 300ms ease-out;
    }

    .ai-feature-layer01 img{
        padding: 0 0 0 0;
        top: 10px;
        transition: height 300ms ease-in-out 100ms;
        width: auto;
    }
    .ai-feature-layer01 .textbox.right {
        float: left;
        text-align: center;
        width: 100%;
    }
    .ai-feature-layer01 .textbox.left {
        width: 100%;
    }
    /*========================== LAYER 2 ==========================*/

    .ai-feature-layer02{
        height: 1020px;
    }

    .ai-feature-layer02.expanded{
        transition: height 200ms ease-in-out 0ms;
        height: 1020px;
    }
    .ai-feature-layer02 .layer-wrapper {
        width: 100%;
        margin: 0 auto;
    }
    .ai-feature-layer02 .textbox {
        width: 100%;
        margin: 0 auto;
    }
    .ai-feature-layer02 #handle{
        background-color: rgba(255,255,255,1.0);
    }

    .ai-feature-layer02 #handle:hover{
        background-color: rgba(255,255,255,0.9);
    }

    .ai-feature-layer02 .textbox.right{
        width: 100%;
        transition: top 300ms ease-out;
    }
    .ai-feature-layer02 .textbox.left{
        width: 100%;
        transition: top 300ms ease-out;
    }

    .ai-feature-layer02.expanded .textbox.right{
        top: 0;
        transition: top 300ms ease-out;
    }

    .ai-feature-layer02 img{
        float: left;
        width: auto;
    }

    .ai-feature-layer02 button{
        clear: both;
    }

    .ai-feature-layer02 .textbox h1{
    }

    .ai-feature-layer02 .textbox h2{
        color: white;
    }

    .ai-feature-layer02 .textbox p{
    }

    .ai-feature-layer02 .textbox ul li{
       
    }

    /*========================== LAYER 3 ==========================*/

    .ai-feature-layer03{
        height: 740px;
    }

    .ai-feature-layer03.expanded{
        height: 740px;
    }

    .ai-feature-layer03 .textbox{
        top: 0;
        width: 100%;
    }
    .ai-feature-layer03 .layer-wrapper {
        width: 100%;
        margin: 0 auto;
    }
    .ai-feature-layer03 .textbox.right{
        width: 100%;
    }
    .ai-feature-layer03 .textbox.left{
        width: 100%;
    }
    
}

@media screen and (max-width: 500px){
    .ai-feature-layer01 img{
        width: 100%;
    }
    .ai-feature-layer03 {
        height: 820px;
    }
    .ai-feature-layer03 .textbox.right .ul-left {
        float: left;
    }
    .ai-feature-layer03 .textbox.right .ul-right {
        float: left;
    }
}