.button{
	font:18px Fjalla One,sans-serif;

	/* A semi-transparent text shadow */
	text-shadow:1px 1px 0 rgba(255,255,255,0.4);
	
	/* Overriding the default underline styling of the links */
	text-decoration:none !important;
	white-space:nowrap;
	
	display:inline-block;
	vertical-align:baseline;
	position:relative;
	cursor:pointer;
	padding:10px 20px;
	
	background-repeat:no-repeat;

	/* The following two rules are fallbacks, in case
	   the browser does not support multiple backgrounds. */

	background-position:bottom left;
	background-image:url('button_bg.png');
	
	/* Multiple backgrounds version. The background images
	   are defined individually in color classes */
	
	background-position:bottom left, top right, 0 0, 0 0;
	background-clip:border-box;
	
	/* Applying a default border raidus of 8px */
	
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	
	/* A 1px highlight inside of the button */
	
	-moz-box-shadow:0 0 1px #fff inset;
	-webkit-box-shadow:0 0 1px #fff inset;
	box-shadow:0 0 1px #fff inset;
	
	/* Animating the background positions with CSS3 */
	/* Currently works only in Safari/Chrome */
	
	-webkit-transition:background-position 1s;
	-moz-transition:background-position 1s;
	transition:background-position 1s;
}

.button:hover{
	
	/* The first rule is a fallback, in case the browser
	   does not support multiple backgrounds
	*/
	
	background-position:top left;
	background-position:top left, bottom right, 0 0, 0 0;
}

.button:active{
	/* Moving the button 1px to the bottom when clicked */
	bottom:-1px;
}

/* The three buttons sizes */
@media (max-width: 1039px) {
    .button.medium {
        font-size: 18px;
    }
}
@media (max-width: 1000px) {
    .button.medium {
        font-size: 13px;
    }
}
@media (max-width: 767px) {
    .button.medium {
        font-size: 12px;
    }
}
@media (max-width: 479px) {
    .button.medium {
        font-size: 10px;
    }
}
/*.button.big		{ font-size:30px;}
.button.medium	{ font-size:20px;}
.button.small	{ font-size:13px;}*/

/* A more rounded button */

.button.rounded{
	-moz-border-radius:4em;
	-webkit-border-radius:4em;
	border-radius:4em;
}


/* Defining four button colors */
/* Green Button */

.green.button {
    color: inherit !important;
    border: 1px solid #96a37b !important;
    background-color: #79be1e;
    background-image: url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
    background-image: url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

    .green.button:hover {
        background-color: #89d228;
        background-image: url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
        background-image: url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
    }
/*------------End Here Green button Code-----------------*/

/* --------------Start  Here Blue Button--------------- */

.blue.button{
	color:inherit !important;
	border:1px solid #74e8f7 !important;	
	background-color: #34cee2;
	
	background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(28, 239, 255,1) 0,rgba(28, 239, 255,0) 100px),-moz-linear-gradient(#74eef7, #18a0b2);
	background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(28, 239, 255,1)), to(rgba(28, 239, 255,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#74eef7), to(#18a0b2));
}

.blue.button:hover{
	background-color:#89d228;
	
	background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(74, 228, 239,1) 0,rgba(74, 228, 239,0) 100px),-moz-linear-gradient(#87f6ff, #1fa8ba);
	background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(74, 228, 239,1)), to(rgba(74, 228, 239,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#87f6ff), to(#1fa8ba));
}
/*----------------End Here Blue Button Code-------------*/

/* --------------Start  Here Red Button--------------- */

.red.button {
    color: inherit !important;
    border: 1px solid #e899a7 !important;
    background-color: #ed234f;
    background-image: url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(244, 66, 131,1) 0,rgba(244, 66, 131,0) 100px),-moz-linear-gradient(#ff91b9, #ea3358);
    background-image: url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(244, 66, 131,1)), to(rgba(244, 66, 131,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff91b9), to(#ea3358));
}

.red.button:hover {
        background-color: #c1173c;
        background-image: url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(252, 93, 135,1) 0,rgba(252, 93, 135,0) 100px),-moz-linear-gradient(#ef7393, #f76087);
        background-image: url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(252, 93, 135,1)), to(rgba(252, 93, 135,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ef7393), to(#f76087));
    }
/*----------------End Here Red Button Code-------------*/

/* ---------------Start Here High Contrast----------- */

.contrast.button {
    color: inherit !important;
    border: 1px solid #5e5e52 !important;
    background-color: #d3d3c6;    
    background-image: url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(178, 178, 171,1) 0,rgba(178, 178, 171,0) 100px),-moz-linear-gradient(#c4c4ba, #a0a098);
    background-image: url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(178, 178, 171,1)), to(rgba(178, 178, 171,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c4c4ba), to(#a0a098));
}

    .contrast.button:hover {
        background-color: #adada6;
        background-image: url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(237, 237, 232,1) 0,rgba(237, 237, 232,0) 100px),-moz-linear-gradient(#c4c4ba, #96968d);
        background-image: url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(237, 237, 232,1)), to(rgba(237, 237, 232,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c4c4ba), to(#96968d));
    }
/*------------End Here High Contrast Code-----------------*/
/* Orange Button */

.orange.button{
	color:#693e0a !important;
	border:1px solid #bea280 !important;	
	background-color: #e38d27;
	
	background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
	background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.orange.button:hover{
	background-color:#ec9732;
	
	background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
	background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.gray.button{
	color:#525252 !important;
	border:1px solid #a5a5a5 !important;	
	background-color: #a9adb1;
	
	background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
	background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.gray.button:hover{
	background-color:#b6bbc0;
	
	background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
	background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}







/*****************************************Font size button************************************/





.fontbtn {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  -webkit-box-shadow: 0px 1px 3px #ffffff;
  -moz-box-shadow: 0px 1px 3px #ffffff;
  box-shadow: 0px 1px 3px #ffffff;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  background: #2f98de;
  padding: 1px 4px 1px 4px;
  border: solid #ffffff 1px;
  text-decoration: none;
}

.fontbtn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}