/* ------------------------------------------------------------ *\
	Ico
\* ------------------------------------------------------------ */

i[class*="ico"] { display: inline-block; vertical-align: middle; background-size: 100% 100%; 
	-webkit-transition: .5s; 
	     -o-transition: .5s; 
	        transition: .5s; 
}

.ico-solar-1 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-1.gif); opacity: 1; }
.ico-solar-2 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-2.gif); opacity: 1; }
.ico-solar-3 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-3.gif); opacity: 1; }
.ico-solar-4 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-4.gif); opacity: 1; }
.ico-solar-5 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-5.gif); opacity: 1; }
.ico-solar-6 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-6.gif); opacity: 1; }
.ico-solar-7 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-7.gif); opacity: 1; }
.ico-solar-8 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-8.gif); opacity: 1; }
.ico-solar-9 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-9.gif); opacity: 1; }
.ico-solar-10 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-10.gif); opacity: 1; }
.ico-solar-11 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-11.gif); opacity: 1; }
.ico-solar-12 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-12.gif); opacity: 1; }
.ico-solar-13 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-13.gif); opacity: 1; }
.ico-solar-14 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-14.gif); opacity: 1; }
.ico-solar-15 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-15.gif); opacity: 1; }
.ico-solar-16 { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-16.gif); opacity: 1; }

.ico-solar-1_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-1_hover.gif); opacity: 0; }
.ico-solar-2_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-2_hover.gif); opacity: 0; }
.ico-solar-3_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-3_hover.gif); opacity: 0; }
.ico-solar-4_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-4_hover.gif); opacity: 0; }
.ico-solar-5_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-5_hover.gif); opacity: 0; }
.ico-solar-6_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-6_hover.gif); opacity: 0; }
.ico-solar-7_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-7_hover.gif); opacity: 0; }
.ico-solar-8_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-8_hover.gif); opacity: 0; }
.ico-solar-9_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-9_hover.gif); opacity: 0; }
.ico-solar-10_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-10_hover.gif); opacity: 0; }
.ico-solar-11_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-11_hover.gif); opacity: 0; }
.ico-solar-12_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-12_hover.gif); opacity: 0; }
.ico-solar-13_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-13_hover.gif); opacity: 0; }
.ico-solar-14_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-14_hover.gif); opacity: 0; }
.ico-solar-15_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-15_hover.gif); opacity: 0; }
.ico-solar-16_hover { width: 141px; height: 141px; background-image: url(/img/learn_about/ico-solar-16_hover.gif); opacity: 0; }

a:hover .ico-solar-1,
a:hover .ico-solar-2,
a:hover .ico-solar-3,
a:hover .ico-solar-4,
a:hover .ico-solar-5,
a:hover .ico-solar-6,
a:hover .ico-solar-7,
a:hover .ico-solar-8,
a:hover .ico-solar-9,
a:hover .ico-solar-10,
a:hover .ico-solar-11,
a:hover .ico-solar-12,
a:hover .ico-solar-13,
a:hover .ico-solar-14,
a:hover .ico-solar-15,
a:hover .ico-solar-16 { opacity: 0; }

a:hover .ico-solar-1_hover,
a:hover .ico-solar-2_hover,
a:hover .ico-solar-3_hover,
a:hover .ico-solar-4_hover,
a:hover .ico-solar-5_hover,
a:hover .ico-solar-6_hover,
a:hover .ico-solar-7_hover,
a:hover .ico-solar-8_hover,
a:hover .ico-solar-9_hover,
a:hover .ico-solar-10_hover,
a:hover .ico-solar-11_hover,
a:hover .ico-solar-12_hover,
a:hover .ico-solar-13_hover,
a:hover .ico-solar-14_hover,
a:hover .ico-solar-15_hover,
a:hover .ico-solar-16_hover { opacity: 1; }

/* ------------------------------------------------------------ *\
	List Steps
\* ------------------------------------------------------------ */

.list-steps { padding: 0 0 15px 11px; margin: 0 -19px; font-size: 13px; list-style-type: none; }
.list-steps:after { content: ''; display: block; clear: both; }

.list-steps li { display: inline-block; position: relative; width: 141px; margin: 0 19px 22px; vertical-align: top; }
.list-steps strong { position: relative; display: block; width: 141px; height: 141px; margin: 0 auto 10px; }
.list-steps li:after { content: ''; position: absolute; width: 54px; height: 14px; top: 70px; left: 100%; margin-top: -7px; background: url(/img/learn_about/arrow.png) no-repeat 0 0; }
.list-steps li:nth-child(4n+4):after { content: ''; position: absolute; width: 772px; height: 244px; top: 76px; right: -25px; left: auto; background: url(/img/learn_about/newline-arrow.png) no-repeat 0 0; z-index: 0; }
.list-steps li:nth-child(4n+4) i:after { display: none; }
.list-steps li:last-child:after { display: none; }
.list-steps i { position: absolute; display: block; top: 0; left: 0; z-index: 10; }
.list-steps a { display: block; text-decoration: none; }
.list-steps a:hover span { color: #387ef9; }
.list-steps span { position: relative; display: block; opacity: .8; line-height: 1.18; color: #000; z-index: 10; 
	-webkit-transition: .5s; 
	     -o-transition: .5s; 
	        transition: .5s; 
}

/* ------------------------------------------------------------ *\
	Btn Start
\* ------------------------------------------------------------ */

.start-tag { position: relative; display: inline-block; padding: 13px 26px 6px; margin: 9px 0 36px 22px; border: 1px solid #dedede; border-radius: 5px; font-family: 'Helvetica Neue Bold', sans-serif; font-size: 14px; line-height: 1; font-weight: 700; color: #808285; text-transform: uppercase; text-decoration: none; background: #f2f2f2; 
	-webkit-transition: .5s; 
	     -o-transition: .5s; 
	        transition: .5s; 
}
.start-tag:after { content: ''; position: absolute; width: 23px; height: 134px; top: 13px; left: -24px; background: url(/img/learn_about/btn-arrow.png) no-repeat 0 0; }

@media(max-width: 1023px){
	
	/* ------------------------------------------------------------ *\
		List Steps
	\* ------------------------------------------------------------ */
	
	.list-steps { padding-left: 22px; margin: 0 -18px; }

	.content .list-steps li { margin: 0 18px 22px; }
	.list-steps li:after { width: 40px; height: 10px; 
		-webkit-background-size: 100% 100%; 
		        background-size: 100% 100%; 
	}
	.list-steps li:nth-child(4n+4):after { width: 729px; height: 234px; right: -24px; 
		-webkit-background-size: 100% 100%; 
		        background-size: 100% 100%; 
	}
}

@media(max-width: 767px){
	
	/* ------------------------------------------------------------ *\
		List Steps
	\* ------------------------------------------------------------ */
	
	.content .list-steps { padding: 0; }
	.content .list-steps li { display: block; min-height: 196px; margin: 0 auto 20px; text-align: center; }
	.content .list-steps li:last-child { margin-bottom: 0; }
	.content .list-steps li:after { content: ''; width: 772px; height: 244px; top: 76px; right: -25px; left: auto; background: url(/img/learn_about/arrow-mobile.png) no-repeat 0 0; }

	/* ------------------------------------------------------------ *\
		Btn Start
	\* ------------------------------------------------------------ */
	
	.start-tag { display: block; max-width: 141px; margin: 9px auto 36px; text-align: center; 
		-webkit-box-sizing: border-box; 
		   -moz-box-sizing: border-box; 
		        box-sizing: border-box; 
	}
	.start-tag:after { content: ''; width: 36px; height: 14px; top: auto; bottom: -26px; left: 51px; background: url(/img/learn_about/arrow.png) no-repeat 0 0; 
		-webkit-transform: rotate(90deg); 
		    -ms-transform: rotate(90deg); 
		     -o-transform: rotate(90deg); 
		        transform: rotate(90deg); 
		-webkit-background-size: 100% 100%; 
		        background-size: 100% 100%; 
	}
}