@charset "utf-8";

.button {
	display: inline-block;
	border-radius: 4px;
	background: #666666;
	background-color: #666666;
	border: thin solid #ffffff;
	text-align: center;
	vertical-align: middle;
	color: #ffffff;
	text-decoration: none;
	padding-top: 2%;
	padding-right: 5%;
	padding-bottom: 2%;
	padding-left: 5%;
	float: left;

	background: 
	text-shadow: #333333 1px 1px 1px;
	background-position: bottom;
	transition:all 0.5s;
	cursor:pointer;
	font-family: Lato, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	margin-top: 2%;
}
.button span {
	cursor: pointer;
	display:inline-block;
	position:relative;
	transition: 0.5s;
}
.button span:after {
	content:'\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;

}
.button:hover span { 
	padding-right: 25px;
	}
.button:hover span:after {
	opacity:1;
	right:0;
}
.button2 {
	display: inline-block;
	border-radius: 4px;
	background: #666666;
	background-color: #FFFFFF;
	border: thin solid #1fa3ff;
	text-align: center;
	vertical-align: middle;
	color: #000000;
	text-decoration: none;
	padding-top: 2%;
	padding-right: 5%;
	padding-bottom: 2%;
	padding-left: 5%;
	float: right;
	margin-right: 2%;
	

	background: 
	text-shadow: #333333 1px 1px 1px;
	background-position: bottom;
	transition:all 0.5s;
	cursor:pointer;
	font-family: "Lato, sans-serif";
	font-size: 100%;
	font-style: normal;
}

.button2 span {
	cursor: pointer;
	display:inline-block;
	position:relative;
	transition: 0.5s;
}
.button2 span:after {
	content:'\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}
.button2:hover span {
	padding-right: 25px;
	}
.button2:hover span:after {
	opacity:1;
	right:0;
}

.button3 {
	display: inline-block;
	border-radius: 4px;
	background-color: #1fa3ff;
	text-align: center;
	vertical-align: middle;
	color: #FFFFFF;
	text-decoration: none;
	padding-top: 2%;
	padding-right: 5%;
	padding-bottom: 2%;
	padding-left: 5%;

	

	background: 
	text-shadow: #333333 1px 1px 1px;
	background-position: bottom;
	transition:all 0.5s;
	cursor:pointer;
	font-family: Lato, sans-serif;
	font-size: 100%;
	font-style: normal;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	margin-left: 3%;
	font-variant: small-caps;
}

.button3 span {
	cursor: pointer;
	display:inline-block;
	position:relative;
	transition: 0.5s;
}
.button3 span:after {
	content:'\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}
.button3:hover span {
	padding-right: 25px;
	}
.button3:hover span:after {
	opacity:1;
	right:0;
}

/*MEDIA QUERY*/
@media only screen and (max-width: 320px) {


}
/*MEDIA QUERY*/
@media only screen and (max-width : 780px) {
.button {
	display: inline-block;
	border-radius: 4px;
	background: #666666;
	background-color: #666666;
	border: thin solid #ffffff;
	text-align: center;
	vertical-align: middle;
	color: #ffffff;
	text-decoration: none;
	padding-top: 1%;
	padding-right: 3%;
	padding-bottom: 1%;
	padding-left: 3%;
	float: left;
	text-shadow: #333333 1px 1px 1px;
	background-position: top;
	transition:all 0.5s;
	cursor:pointer;
	font-family: Lato, sans-serif;
	font-size: 12px;
	font-style: normal;
	
	}
.button span {
	cursor: pointer;
	display:inline-block;
	position:relative;
	transition: 0.5s;
}
.button span:after {
	content:'\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;

}
.button:hover span { 
	padding-right: 25px;
	}
.button:hover span:after {
	opacity:1;
	right:0;
}

}