/*****

Dashboard Buttons

*****/

/**** Flex Structure ****/

.column-4 { display: flex; flex-wrap: wrap; margin-bottom: -15px; }
.column-4 a.btn-1 { margin: 0 15px 15px 0; width: calc(25% - 11.25px); }
.column-4 a.btn-1:nth-child(4), .column-4 a.btn-1:nth-child(8), .column-4 a.btn-1:nth-child(12) { margin-right: 0; }

.column-3 { display: flex; flex-wrap: wrap; margin-bottom: -15px; }
.column-3 a.btn-1 { margin: 0 15px 15px 0; width: calc(100% / 3 - 10px); }
.column-3 a.btn-1:nth-child(3), .column-3 a.btn-1:nth-child(6), .column-3 a.btn-1:nth-child(9) { margin-right: 0; }

.column-2 { display: flex; flex-wrap: wrap; margin-bottom: -15px; }
.column-2 a.btn-1 { margin: 0 15px 15px 0; width: calc(100% / 2 - 7.5px); }
.column-2 a.btn-1:nth-child(even) { margin-right: 0; }

/**** Button Structure ****/

a.btn-1 { width: 100%; height: 100px; padding: 15px; border-radius: 8px; border: 1.5px solid #00a15f; }

/**** Fonts ****/

a.btn-1 { font-size: 16px; color: #fff; font-family: "Open Sans Condensed", Open-Sans, sans-serif; text-transform: uppercase; font-weight: 700; text-align: center; text-decoration: none; }

/**** Flex Defaults ****/

a.btn-1 { display: flex; align-items: center; justify-content: center; }

/**** Appearance ****/

a.btn-1 { background: #00a15f; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25); float: left; }

/**** Hover Effect ****/

a.btn-1 { transition: all 0.3s ease-in-out; }
a.btn-1:hover, a.btn-1:focus { transition: background 0.3s ease-in-out; }
a.btn-1:hover, a.btn-1:focus { color: #00a15f; }
a.btn-1:hover, a.btn-1:focus { text-decoration: none; background: white; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); }
a.btn-1:active { transform: scale(0.98); }

/***** Media Queries *****/

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

	.column-4 a.btn-1 { width: calc(50% - 7.5px); float: left; margin-top: 15px; }
	.column-4 a.btn-1:nth-child(even) { margin-right: 0; }
	.column-4 a.btn-1:nth-child(1), .column-4 a.btn-1:nth-child(2) { margin-top: 0; }
	
}

@media screen and (max-width: 530px) {
	
	.column-3 { flex-direction: column; }
	.column-3 a.btn-1 { width: 100%; margin-right: 0; }

}

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

	.column-2 a.btn-1 { margin: 0 0 15px 0; width: 100%; }
	
}

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

	.column-4 { flex-direction: column; }
	.column-4 a.btn-1 { width: 100%; margin-right: 0; }
	.column-4 a.btn-1:nth-child(2) { margin-top: 15px; }
	
}