@charset "utf-8";
/* CSS Document */

/**** Sheriff's Button ****/

/*** Column Structure ***/

nav.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 100%; }
.z1 { float: left; width: 24%; margin-right: 0.66%; margin-bottom: -30px; }
.z2, .z3 { float: left; width: 24%; margin: 0 0.66%; margin-bottom: -30px; }
.z4 { float: left; width: 24%; margin-left: 0.66%; margin-bottom: -30px; }
.home-btn-container { column-count: 4; }
.btn-container { width: 100%;  -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; margin-bottom: 15px; }
.ht { width: calc(100% - 15px); }
.second { margin: 0 15px; }

/*** Button Structure ***/

a.s-button, a.s-button:visited { 
box-sizing: border-box;
height: 115px;
padding: 0 30px;
background: #4a4a4a; 
border-bottom: 10px solid #4a3320;
transition: all .22s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
justify-content: center;
align-items: center;
font-family: century gothic, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: normal;
margin-bottom: 15px;
text-align: center; 
color: white;
width: 100%;
text-decoration: none;
float: left;
}

a.s-button.alt-button, a.s-button.alt-button:visited {
background: #4a3320; 
border-color: #4a4a4a;
}

/*** Hover / Focus Effects ***/

a.s-button .fa, a.s-button:hover .text, a.s-button:focus .text, a.s-button img { display: none; opacity: 1; transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); }
a.s-button .text, a.s-button:hover .fa, a.s-button:focus .fa, a.s-button:hover img { display: block; opacity: 1; transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); }

a.s-button:hover, a.s-button:focus { 
border-radius: 3px;
box-shadow: 0 3px 6px rgba(0,0,0,0.5);
border-bottom: 10px solid #ffa901;
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
color: white;
text-decoration: none;
}

/*** Media Queries ***/

@media only screen and (max-width: 990px) {

    a.s-button, a.s-button:visited { font-size: 18px; }

}

@media only screen and (max-width: 850px) {
	
	.z1 { width: 48%; margin: 0 1% 0 0; }
	.z2 { width: 48%; margin: 0 0 0 1%; }
	.z3 { width: 48%; margin: 0 1% -30px 0; }
	.z4	{ width: 48%; margin: 0 0 -30px 1%; }

}

@media only screen and (max-width: 730px) {
	
	.home-btn-container { column-count: 2; }
	
}

@media only screen and (max-width: 580px) {
	
	nav.btn { display: block; }
	.ht { width: 100%; }
	.second { margin: 0 0 15px 0; }
}
	
}

@media only screen and (max-width: 500px) {
	
a.s-button, a.s-button:visited { font-size: 17px; }	
}

@media only screen and (max-width: 370px) {
	
	.z1, .z2, .z3, .z4 { width: 100%; margin: 0; }
	.z4 { margin-bottom: -30px; }
	.home-btn-container { column-count: 1; }
	
}