@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none !important;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}


/* Custom CSS
 * --------------------------------------- */
body{
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	color: #333;
	color: rgba(0,0,0,0.5);
}


.HomePage h1{
	font-size: 4em;
	text-align:center;
	padding: 0px 0px 20px 0px;
	font-family: 'Nunito', sans-serif !important;
	color: #fff;
	margin:0 auto;
	width:60%;
	
}

.HomePage h2{
	font-size: 2em;
	text-align:center;
	color: #fff;
	padding: 0px 0px 20px 0px;
}

.HomePage p{
	width: 66%;
	color: #fff;
	padding-bottom:10px;
	text-align:center;
	margin:0 auto;
	font-size: 1.6em;
	font-weight:300;
	line-height:1.6em;
	font-family: 'Roboto', sans-serif !important;
}


.slide_HomePage_number {
    width: 95px;
    height: 100px;
    line-height: 45px;
    margin:0px 0px 0px 0px;
	color:#fff;
	background-color:#ff5f5f;
	padding:3px 10px;
	border-radius:5px;
	text-transform:none !important;
}



.intro h1{
	font-size: 6em;
	text-align:center;
	padding: 0px 0px 20px 0px;
	font-family: 'Nunito', sans-serif;
	color: #505b69;
	margin:0;
	
}

.intro h2{
	font-size: 3em;
	text-align:center;
	padding: 0px 0px 20px 0px;
}

p{
	font-size: 1.2em;
	text-align:left;
}

.intro p{
	width: 60%;
    font-size:1.2em !important;
	color: #505b69;
	padding-bottom:10px;
	text-align:center;
	margin:0 auto;
	font-family: 'Roboto', sans-serif !important;
}

.intro span { text-align:center !important; }

.slide_intro_number {
    width: 95px;
    height: 100px;
    line-height: 95px;
    margin:0px 0px 20px 0px;
	border:#505b69 5px solid;
	color:#505b69;
	padding:10px 15px;
	border-radius:20px;
	font-family: 'Nunito', sans-serif !important;
}

.section{
	text-align:center;
	font-family: 'Roboto', sans-serif !important;
}

#footer{
	position: absolute;
	height: 40px;
	display:block;
	width: 100%;
	z-index:9;
	text-align:center;
	color: #666;
	padding: 10px 0;
	font-size:12px;
	bottom:0 !important;
}


/* Defining each section background and styles
	* --------------------------------------- */
	#section0{
		background-image: url(../img/bg1.jpg);
		padding: 30% 0 0 0;
	}
	#section1{
		/*background-image: url(img/bg3.jpg);*/
		background-color:#fff;
		padding: 6% 0 0 0;
	}
	
	#section1 h1 {font-family: 'Nunito', sans-serif !important;}
	
	#section2{
		/*background-image: url(img/bg3.jpg);*/
		background-color:#fff;
		padding: 6% 0 0 0;
	}
	#section2 h1 {font-family: 'Nunito', sans-serif !important;}	
	#section3{
		/*background-image: url(img/bg4.jpg);*/
		background-color:#fff;
		padding: 6% 0 0 0;
	}
	#section3 h1 {font-family: 'Nunito', sans-serif !important;}






/****** View Steps - Start ******/

/* Boucing Arrow Animation */
@keyframes arrowbounce {
	from {
		-webkit-transform:translateY(0);
		-moz-transform:translateY(0);
		transform:translateY(0);
	}
	to {
		-webkit-transform:translateY(-20px);
		-moz-transform:translateY(-20px);
		transform:translateY(-20px);
	}
}
@-moz-keyframes arrowbounce {
	/* Firefox */ from {
		-webkit-transform:translateY(0);
		-moz-transform:translateY(0);
		transform:translateY(0);
	}
	to {
		-webkit-transform:translateY(-20px);
		-moz-transform:translateY(-20px);
		transform:translateY(-20px);
	}
}
@-webkit-keyframes arrowbounce {
	/* Safari and Chrome */ from {
		-webkit-transform:translateY(0);
		-moz-transform:translateY(0);
		transform:translateY(0);
	}
	to {
		-webkit-transform:translateY(-20px);
		-moz-transform:translateY(-20px);
		transform:translateY(-20px);
	}
}
@-o-keyframes arrowbounce {
	/* Opera */ from {
		-webkit-transform:translateY(0);
		-moz-transform:translateY(0);
		transform:translateY(0);
	}
	to {
		-webkit-transform:translateY(-20px);
		-moz-transform:translateY(-20px);
		transform:translateY(-20px);
	}
}

.scrollto {
	padding: 100px 0px 0px 0px;
	display:block;
	color:#FFF;
	text-decoration:none;
	width:250px;
	margin:0 auto;
	border-bottom: none;
}
.scrollto--arrow {
	padding:10px;
}
.scrollto--arrow img {
	animation:arrowbounce 1s alternate infinite;
	-moz-animation:arrowbounce 1s alternate infinite;
	/* Firefox */-webkit-animation:arrowbounce 1s alternate infinite;
	/* Safari and Chrome */-o-animation: arrowbounce 1s alternate infinite;
	/* Opera */
}

.scrollto .view-steps { font-size:16px !important; opacity:0.5; }

/* 

/****** View Steps - Start ******/


.btn-padding { padding-top:20px; }

.req-demo-1 { background-color:#32bea6 !important; color:#FFFFFF; padding:5px 10px; }
 .req-demo-1:hover, .req-demo-1:focus, .req-demo-1:active { background-color: #32bea6; color:#FFFFFF; }
 
 .req-demo-2 { background-color:#ff5f5f !important; color:#FFFFFF; padding:5px 10px; }
 .req-demo-2:hover, .req-demo-2:focus, .req-demo-2:active { background-color: #ff5f5f; color:#FFFFFF; }
 
 .req-demo-3 { background-color:#157efb !important; color:#FFFFFF; padding:5px 10px; }
 .req-demo-3:hover, .req-demo-3:focus, .req-demo-3:active { background-color: #157efb; color:#FFFFFF; }
 
  
 .req-demo-4 { color:#157efb; border: 2px #157efb solid; padding:5px 10px; }
 .req-demo-4:hover, .req-demo-4:focus, .req-demo-4:active { color:#157efb; border: 2px #157efb solid; }
 
 
 

 .image.right { float: right; margin-bottom: 2em; margin-left: 4em; margin-right: 0; margin-top: 0; }
 .image.left { float: left; margin-bottom: 2em; margin-left: 0; margin-right: 4em; margin-top: 0; }


/****** Mouse Button - Start ******/
.intro-scroller { position: absolute; left: -20px; text-align: center; z-index: 9999; width: 100%; bottom:60px; margin:0 auto; }
.intro-scroller p{color:#767d86;}
a.inner-link { color: #767d86; text-decoration: none; }


.mouse-icon { border: 2px solid; border-radius: 15px; bottom: 70px; height: 50px; left: 0; margin: 0 auto; position: absolute; right: 0;
width: 27px; cursor: pointer; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; }

.mouse-icon:hover {opacity: 0.3 !important;-webkit-transition: all .3s;-moz-transition: all .3s;-ms-transition: all .3s;-o-transition: all .3s;transition: all .3s;}

.mouse-icon .wheel { -webkit-animation: 1.7s ease 0s normal none infinite magic-mouse-icon; -moz-animation: 1.7s ease 0s normal none infinite magic-mouse-icon; -o-animation: 1.7s ease 0s normal none infinite magic-mouse-icon; animation: 1.7s ease 0s normal none infinite magic-mouse-icon; border-radius: 30%; background: #767d86; height: 12px; left: 0; margin-left: auto; margin-right: auto;
margin-top: 6px; right: 0; width: 5px; }



.mouse-icon { background: none; border: 2px solid; border-radius: 15px; bottom: 0px; height: 44px; left: 0; margin: 0 auto; position: absolute; right: 0; width: 30px; cursor: pointer; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; }
.mouse-icon:hover{ opacity: 0.8 !important; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; }
.mouse-icon .wheel { -webkit-animation: 1.7s ease 0s normal none infinite magic-mouse-icon; -moz-animation: 1.7s ease 0s normal none infinite magic-mouse-icon; -o-animation: 1.7s ease 0s normal none infinite magic-mouse-icon; animation: 1.7s ease 0s normal none infinite magic-mouse-icon; border-radius: 30%; background:#767d86; height: 12px; left: 0; margin-left: auto; margin-right: auto; margin-top: 6px; right: 0; width: 6px; }

@-moz-keyframes magic-mouse-icon { 0% { margin-top: 6px; opacity: 0;} 30% { opacity: 1;} 100% { margin-top: 18px; opacity: 0;} }
@-webkit-keyframes magic-mouse-icon { 0% { margin-top: 6px; opacity: 0;} 30% { opacity: 1;} 100% { margin-top: 18px; opacity: 0;} }
@-o-keyframes magic-mouse-icon { 0% { margin-top: 6px; opacity: 0;} 30%  { opacity: 1;} 100% { margin-top: 18px; opacity: 0;} }
@keyframes magic-mouse-icon { 0%   { margin-top: 6px; opacity: 0;} 30%  { opacity: 1;} 100% { margin-top: 18px; opacity: 0;} }