.btns,
	.btns:link,
	.btns:visited 		{   border-radius:0.25em; border-style:solid; border-width:1px; display:inline-block;
	    	    		     margin-bottom:0.5em; padding:7px 1.5em; 
	    					text-decoration:none; text-transform:uppercase; text-decoration:none!important;
						    -webkit-transition: color 0.4s, background-color 0.4s, border 0.4s;
						    		transition: color 0.4s, background-color 0.4s, border 0.4s; }

	.btns:hover,
	.btns:focus 		{   color:#7FDBFF; border: 1px solid #7FDBFF; text-decoration:none!important;
							 -webkit-transition: background-color 0.3s, color 0.3s, border 0.3s;
							         transition: background-color 0.3s, color 0.3s, border 0.3s;  }

	.btns:active 		{	-webkit-transition: background-color 0.3s, color 0.3s, border 0.3s;
	   							    transition: background-color 0.3s, color 0.3s, border 0.3s; }

	/*

	    Sizes

	    Small  = .btns--s
	    Medium = .btns--m
	    Large  = .btns--l

	    Code:
	    <a href="#" class="btns btns--s">
	    <a href="#" class="btns btns--m">
	    <a href="#" class="btns btns--l">

	*/

	.btns--xs 	{ font-size:11px; padding:6px 10px; top:-2px;}
	.btns--s 	{ font-size:12px; }
	.btns--m 	{ font-size:14px; }
	.btns--l 	{ font-size:16px; padding:5px 20px!important; height:40px; line-height:1.8;
					    -webkit-border-radius: 3px;
                           -moz-border-radius: 3px;
                                border-radius: 3px;}

	.adj-btns-go  	{ line-height:1.6; padding:6px 10px!important; margin:0!important; top:-2px!important; display:inline; height:32px;}

	/*
		Layout utility for responsive buttons

	    Code:
	    <a href="#" class="btns btns--full">
	  */

	.btns--full,
	.btns--full:link 	{ border-radius:0.25em; display:block; margin-left:auto; margin-right:auto;
						  text-align:center; width:100%;}

	/* Code:
	    <a href="#" class="btns btns--black">
	    <a href="#" class="btns btns--white">
	    <a href="#" class="btns btns--gray">
	    <a href="#" class="btns btns--gray-dark">
	    <a href="#" class="btns btns--gray-border">
	    <a href="#" class="btns btns--blue">
	---------------------------------------------*/
	  
	/* black
	---------------------------------------------*/
	.btns--black,
	.btns--black:link,
	.btns--black:visited 	{ color:#fff; background-color:#111}

	.btns--black:hover,
	.btns--black:focus 		{ color:#fff; background-color:#444; border-color:#444}

	.btns--black:active 	{ color:#fff; background-color:#999; border-color:#999}


	/* white
	---------------------------------------------*/
	.btns--white,
	.btns--white:link,
	.btns--white:visited 	{ color:#111; background-color:#fff}

	.btns--white:hover,
	.btns--white:focus 		{ color: #111;
			       background-color: rgba(255, 255, 255, 0.7);
			           border-color: rgba(255, 255, 255, 0.7); }

	 .btns--white:active 	{ color: #111;
				   background-color: rgba(255, 255, 255, 0.9);
					   border-color: rgba(255, 255, 255, 0.9); }


	/* Gray
	---------------------------------------------*/
	.btns--gray:link,
	.btns--gray:visited 	{ background-color:#ececec; border-color:#f0f0f0; color:#333}

	.btns--gray:hover,
	.btns--gray:focus 		{ background-color:#ddd; border-color:#ddd; color:#444}

	.btns--gray:active 		{ background-color:#ccc; border-color:#ccc; color:#444}


	/* Gray border
	---------------------------------------------*/
	.btns--gray-border:link,
	.btns--gray-border:visited 	{ background-color:#fff; border-color:#555; border-width:2px; color:#555}

	.btns--gray-border:hover,
	.btns--gray-border:focus 	{ background-color:#fff; border-color:#ddd; color:#777}

	.btns--gray-border:active 	{ background-color:#ccc; border-color:#ccc; color:#444}


	/* Gray dark gray
	---------------------------------------------*/
	.btns--gray-dark:link,
	.btns--gray-dark:visited 	{ background-color:#555; color:#eee; }

	.btns--gray-dark:hover,
	.btns--gray-dark:focus 		{ background-color: var(--dark-gray-color);
								      border-color: var(--dark-gray-color);
										     color: #eee; }

	.btns--gray-dark:active 	{ background-color:#777; border-color:#777; color:#eee; }


	/* Blue
	---------------------------------------------*/
	#body.theme1 .btns--blue:link,
	#body.theme1 .btns--blue:visited 	{ color:#fff; background-color:#13426b}
	  
	#body.theme1 .btns--blue:hover,
	#body.theme1 .btns--blue:focus 		{ color:#fff !important; background-color:#0063aa; border-color:#0063aa}

	#body.theme1 .btns--blue:active 	{ color:#fff; background-color:#001F3F; border-color: #001F3F}


	#body.theme2 .btns--blue:link,
	#body.theme2 .btns--blue:visited 	{ color:#fff; background-color:#0a6785}
	  
	#body.theme2 .btns--blue:hover,
	#body.theme2 .btns--blue:focus 		{ color:#fff !important; background-color:#307b94; border-color:#1b6279}

	#body.theme2 .btns--blue:active 	{ color:#fff; background-color:#001F3F; border-color: #1b6279}



	/* common
	===================================================*/
		/* common (gray)
		-----------*/
		#body.theme1 .gray-style .btns--com,
		#body.theme1 .gray-style .btns--com:link,
		#body.theme1 .gray-style .btns--com:visited,
		#body.theme2 .gray-style .btns--com,
		#body.theme2 .gray-style .btns--com:link,
		#body.theme2 .gray-style .btns--com:visited  	{ color:#fff; background-color:#666}

		#body.theme1 .gray-style .btns--com:hover,
		#body.theme1 .gray-style .btns--com:focus,
		#body.theme2 .gray-style .btns--com:hover,
		#body.theme2 .gray-style .btns--com:focus 		{ color: #111;
										       background-color: rgba(187, 187, 187, 0.7);
										           border-color: rgba(187, 187, 187, 0.7); }

		#body.theme1 .gray-style .btns--com:active,
		#body.theme2 .gray-style .btns--com:active 	{ color: #111;
										   background-color: rgba(187, 187, 187, 0.9);
											   border-color: rgba(187, 187, 187, 0.9); }

		/* common (theme1)
		-----------*/
		#body.theme1 .theme-style .btns--com,
		#body.theme1 .theme-style .btns--com:link,
		#body.theme1 .theme-style .btns--com:visited, 
		#body.theme1 .white-style .btns--com,
		#body.theme1 .white-style .btns--com:link,
		#body.theme1 .white-style .btns--com:visited	{ color:#fff; background-color:#13426b}

		#body.theme1 .theme-style .btns--com:hover,
		#body.theme1 .theme-style .btns--com:focus,
		#body.theme1 .white-style .btns--com:hover,
		#body.theme1 .white-style .btns--com:focus  		{ color: #fff;
										       background-color: #0063aa; border-color: #0063aa }

		#body.theme1 .theme-style .btns--com:active,
		#body.theme1 .white-style .btns--com:active 	{ color: #fff;
											   background-color: #001F3F; border-color: #001F3F}


		/* common (theme2)
		-----------*/
		#body.theme2 .theme-style .btns--com,
		#body.theme2 .theme-style .btns--com:link,
		#body.theme2 .theme-style .btns--com:visited,
		#body.theme2 .white-style .btns--com,
		#body.theme2 .white-style .btns--com:link,
		#body.theme2 .white-style .btns--com:visited 	{ color:#fff; background-color:#0a6785}

		#body.theme2 .theme-style .btns--com:hover,
		#body.theme2 .theme-style .btns--com:focus,
		#body.theme2 .white-style .btns--com:hover,
		#body.theme2 .white-style .btns--com:focus 		{ color: #fff;
										       background-color: #307b94; border-color: #1b6279 }

		#body.theme2 .theme-style .btns--com:active,
		#body.theme2 .white-style .btns--com:active 	{ color: #fff;
											   background-color: #001F3F; border-color: #1b6279}



	/* ==========================================================================
		Media
	============================================================================= */

	@media only screen and (max-width: 767px) {
	.btns--xs       { font-size:10px!important}
	.adj-btns-go  	{ height:30px;}

	}