/* DEFAULT */
body { background: white; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; }

/* HERO */
#features .feature p { font-size: 18px; color: #555971; }
#features .features_hero { height: calc(100vh - 60px); position: relative; }
#features .features_hero:before { left: 0; top: 0; right: 380px; bottom: 100px; background: #f1f7fd; position: absolute; content: ''; z-index: 2; }
#features .features_hero:after { width: 202px; height: 202px; top: 30%; right: 279px; background: url(../img/features/img_try_demo.png) no-repeat left center; position: absolute; content: ''; z-index: 1; }

#features .features_hero .entry { width: 100%; height: 45%; left: 0; top: 0; padding-left: 290px; padding-right: 380px; position: absolute; z-index: 3; }
#features .features_hero .entry .title { font-size: 50px; font-weight: 700; color: #091c2e; line-height: 1.2; }

#features .features_hero .images { width: 100%; height: 55%; left: 0; bottom: 0; position: absolute; z-index: 4; }
#features .features_hero .images .image { border-radius: 10px; background-color: #091c2e; background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; }
#features .features_hero .images .image.image_1 { width: 250px; height: 250px; left: 0; top: 0; }
#features .features_hero .images .image.image_2 { width: calc(100% - 1160px); height: 100%; left: 290px; top: 0; }
#features .features_hero .images .image.image_3 { width: 450px; height: 300px; right: 380px; bottom: 0; }
#features .features_hero .images .image.image_4 { width: 300px; height: 200px; right: 40px; bottom: 100px; }

/* CONTENT */
#features .features_content .feature { min-height: 100vh; padding-left: calc((100% - 1200px) /2); padding-right: calc((100% - 1200px) /2); position: relative; }
#features .features_content .feature:after { height: 1px; left: calc((100% - 1200px) /2); right: calc((100% - 1200px) /2); bottom: 0; background: rgba(0 0 0 / 10%); position: absolute; content: ''; }

#features .feature .feature_wrap { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: center; }
#features .feature .feature_wrap .wrap_left { width: 50%; padding: 0 4%; position: relative; order: 1; }
#features .feature .feature_wrap .wrap_right { width: 50%; padding: 0 4%; position: relative; order: 2; }

#features .feature:nth-child(even) .feature_wrap .wrap_left { order: 2; }
#features .feature:nth-child(even) .feature_wrap .wrap_right { order: 1; }

#features .feature .feature_wrap .feature_title { margin-bottom: 30px; font-size: 40px; font-weight: 700; color: #091c2e; line-height: 1.2; }
#features .feature .feature_wrap .feature_subtitle { margin-bottom: 20px; font-size: 14px; font-weight: 700; text-transform: uppercase; color: #a3b4cc; line-height: 1; }

#features .feature .mobile_wrap { height: 100%; position: relative; background: red; }
#features .feature .mobile { width: 280px; height: 600px; left: 50%; top: 50%; background: white; position: absolute; overflow: hidden; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -moz-box-shadow: 30px 40px 40px rgba(0 0 0 / 20%); -webkit-box-shadow: 30px 40px 40px rgba(0 0 0 / 20%); box-shadow: 30px 40px 40px rgba(0 0 0 / 20%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
#features .feature .mobile img { width: 100%; height: auto; display: block; }
#features .feature .mobile .time { height: 12px; left: 15px; top: 19px; font-size: 13px; font-weight: 700; text-transform: uppercase; color: #464646; line-height: 1; position: absolute; }
#features .feature .mobile .device_button { width: 130px; height: 6px; left: 50%; bottom: 8px; background: #091c2e; position: absolute; z-index: 2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
#features .feature .mobile .battery { width: 24px; height: 12px; right: 15px; top: 18px; background: url(../img/features/icon_mobile_battery.svg) no-repeat right center; background-size: auto 100%; position: absolute; z-index: 2; }

#features .feature .screenshot { width: 280px; height: auto; left: 50%; top: 50%; /*padding-top: 38px;*/ background: white; position: absolute; overflow: hidden; -moz-box-shadow: 30px 40px 40px rgba(0 0 0 / 20%); -webkit-box-shadow: 30px 40px 40px rgba(0 0 0 / 20%); box-shadow: 30px 40px 40px rgba(0 0 0 / 20%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
/*#features .feature .screenshot:before { width: 100%; height: 38px; left: 0; top: 0; background: url(images/features/browser.png) no-repeat center; position: absolute; content: ''; -moz-box-shadow: 0 2px 3px rgba(0 0 0 / 20%); -webkit-box-shadow: 0 2px 3px rgba(0 0 0 / 20%); box-shadow: 0 2px 3px rgba(0 0 0 / 20%); }*/
#features .feature .screenshot img { width: 100%; height: auto; display: block; }

#features .feature .icons { width: 280px; height: 600px; left: 50%; top: 50%; position: absolute; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#features .feature .icons .icon { position: absolute; -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }
#features .feature .icons .icon.icon_1 { width: 0; height: 0; left: 20px; top: 20px; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid #c60649; }
#features .feature .icons .icon.icon_2 { width: 40px; height: 40px; left: 20px; top: 20px; background: #02caca; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
#features .feature .icons .icon.icon_3 { width: 80px; height: 80px; left: 20px; bottom: 20px; background: url(../img/features/icon_template.svg) no-repeat center; background-size: auto 100%; }
#features .feature.two .icons .icon.icon_3 { background-image: url(../img/features/icon_process_management.svg); }
#features .feature .icons .icon.icon_4 { width: 0; height: 0; right: 20px; bottom: 10%; border-top: 30px solid transparent; border-left: 60px solid #091c2e; border-bottom: 30px solid transparent; } 
#features .feature .icons .icon.icon_5 { width: 20px; height: 20px; right: 20px; bottom: 30%; background: #02caca; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

/* Reveal */
#features .feature.reveal .icons .icon.icon_1 { left: -30%; top: -10%; -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }
#features .feature.reveal .icons .icon.icon_2 { top: -15%; }
#features .feature.reveal .icons .icon.icon_3 { left: -30%; bottom: -10%; -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }
#features .feature.reveal .icons .icon.icon_4 { right: -30%; }
#features .feature.reveal .icons .icon.icon_5 { right: -30%; }


#features .feature.reveal .icons.desktop-view .icon.icon_1 { left: -30%; top: 13%; -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }
#features .feature.reveal .icons.desktop-view .icon.icon_2 { top: 13%; }
#features .feature.reveal .icons.desktop-view .icon.icon_3 { left: -30%; bottom: 7%; -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }
#features .feature.reveal .icons.desktop-view .icon.icon_4 { right: -30%; }
#features .feature.reveal .icons.desktop-view .icon.icon_5 { right: -20%; bottom: 24%; }




/*
-----------
	RWD
-----------
*/
@media only screen and (max-width: 1440px) { 

	/* HERO */
	#features .features_hero .images .image.image_2 { width: calc(100% - 670px); }
	#features .features_hero .images .image.image_3 { display: none; }
	
	#features .features_hero .entry { padding-left: 100px; }
	#features .features_hero .entry .title { font-size: 40px; }
}

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

	/* HERO */
	#features .features_hero:before { right: 300px; }
	#features .features_hero:after { right: 200px; }
	
	#features .features_hero .entry { padding-left: 40px; padding-right: 340px; }

	#features .features_hero .images .image.image_2 { width: calc(100% - 590px); }
	#features .features_hero .images .image.image_4 { width: 220px; height: 150px; }
}

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

	/* HERO */
	#features .features_hero .entry { padding-left: 20px; }
	
	/* CONTENT */
	#features .feature .feature_wrap .wrap_left, 
	#features .feature .feature_wrap .wrap_right { padding: 0 20px; }
	#features .feature .feature_wrap .feature_title { font-size: 30px; }
	
	#features .feature .icons, 
	#features .feature .mobile, 
	#features .feature .screenshot { zoom: 90%; }
}

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

	/* HERO */
	#features .features_hero:before { right: 300px; }
	#features .features_hero:after { right: 200px; }
	
	#features .features_hero .entry .title { font-size: 30px; }

	#features .features_hero .images .image.image_1 { width: calc(100% - 300px); height: 100%; top: auto; bottom: 0; }
	#features .features_hero .images .image.image_2 { display: none; }
	#features .features_hero .images .image.image_4 { bottom: 40px; }
	
	/* CONTENT */
	#features .feature .icons, 
	#features .feature .mobile, 
	#features .feature .screenshot { zoom: 80%; }
}

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

	/* HERO */
	#features .features_hero { height: auto; }
	#features .features_hero:before { right: 60px; bottom: 0; }
	#features .features_hero:after { right: 10px; }
	
	#features .features_hero .entry { padding: 70px 70px 70px 20px; left: auto; top: auto; position: relative; }
	#features .features_hero .entry .vertical_middle { top: auto; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

	#features .features_hero .images { height: auto; left: auto; bottom: auto; position: relative; }
	#features .features_hero .images .image.image_1 { width: calc(100% - 60px); height: auto; top: auto; left: auto; bottom: auto; position: relative; }
	#features .features_hero .images .image.image_1:before { padding-top: 50%; display: block; content: ''; }
	#features .features_hero .images .image.image_2 { display: none; }
	#features .features_hero .images .image.image_4 { display: none; }
	
	/* CONTENT */
	#features .features_content .feature { min-height: auto; }
	#features .feature .feature_wrap { min-height: auto; align-items: normal; }
	#features .feature .feature_wrap .wrap_left { width: 100%; padding: 50px 20px; order: 2; }
	
	#features .feature .feature_wrap .wrap_right { width: 100%; padding: 50px 20px; order: 1; }
	
	#features .feature .icons, 
	#features .feature .mobile, 
	#features .feature .screenshot { zoom: 70%; }
	
	#features .feature .mobile, 
	#features .feature .screenshot { position: relative; }
}

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

	/* HERO */
	#features .features_hero:before { right: 0; }
	#features .features_hero:after { right: 10px; }
	
	#features .features_hero .entry { padding: 50px 20px; text-align: center; }

	#features .features_hero .images .image.image_1 { width: 100%; }
	
	/* CONTENT */
	#features .features_content .feature { min-height: auto; }
	#features .feature .feature_wrap { min-height: auto; align-items: normal; }
	#features .feature .feature_wrap .wrap_left { width: 100%; padding: 50px 20px; order: 2; }
	
	#features .feature .feature_wrap .wrap_right { width: 100%; padding: 50px 20px; order: 1; }
}

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

	/* HERO */
	#features .features_hero .entry .title { font-size: 25px; }
	#features .features_hero .entry .button { height: auto; padding: 15px 20px; line-height: 20px; }

	#features .features_hero .images .image.image_1 { width: 100%; }
}