@charset "UTF-8";
/* CSS Document */
@viewport{
    zoom: 1.0;
    width: device-width;
}

.howtoWrapper {
	
}



.animbox {
	width:  30%;
	margin-right: 5%;
	float:  left;
	position: relative
}

.animbox:last-child {
	margin-right: 0%;
}



.animwrapper {
	width: 90%;
	margin: 0 auto;	
	position: relative;
	overflow: hidden;
	padding-bottom: 30px;
	
}

.animArrow {
	width: 63%;
	margin:  0 auto;
	opacity:  0.5;
}

.smallArrowWrapper {
    position: absolute;
    top: 55%;
    right: -20%;
    z-index: 100;
    width: 20%;
    opacity:  0.5;
}

.animText {
    color: #fff;
    font-size: 25px;
    text-align: center;
    /* margin: 0 auto; */
    font-weight: 600;
    /* padding: 110px; */
}

.animwrapper svg {
	

}

.dude {
	width: 30%;
	/* height: 20%; */
	position: absolute;
	left: 10px;
	bottom: 0;
}

.textwrapper {
	padding: 30px;
	border: 1px  solid #ededed;
	background-color: #fff;
}

.text1 {
	font-size: 25px;
	font-weight: 600;
}

.text2 {
 
}

.button {
	
	border-radius: 5px;
	color: #5cb25f;
	border: 2px solid #5cb25f;
	padding: 10px;
	
	margin: 30px auto 0 auto;
	display: block;
	width: 60%;
  	text-align: center;
	
	-webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
   -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
     -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
        transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
		
}

.button:hover {
	background-color: #5cb25f;
	color: #FFF;
	-webkit-box-shadow: 0px 5px 17px 3px rgba(0,0,0,0.05);
	-moz-box-shadow: 0px 5px 17px 3px rgba(0,0,0,0.05);
	box-shadow: 0px 5px 17px 3px rgba(0,0,0,0.05);
}

/* Portrait and Landscape */
@media only screen and (max-width: 640px) {
	.animbox, .animbox:last-child {
		float: none;
		width:  80%;
		margin: 0 auto;
		
	}
	.animText {
		font-size: 35px;
	}

	.smallArrowWrapper {
		display:  none;
	}

	.animArrow {
		display:  none;
	}


}