/* Quick Links/Home Page Content */


/* Uses Grid System to organize cards */
#quick-links{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;	
  align-items: center;
  margin-left: 5%;
}




/*Smaller Screens Grid System*/
@media (max-width: 990px) {
	#quick-links {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  
	}
	
}
@media (max-width: 700px) {
	#quick-links{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(8, 1fr);
		margin-left: 15%;
		
	}
	.region--content{
		width: 100%;
	}
	.dissapear {
		display: none;
	}
	#forms {
		margin-top: 5%;
	}
	#resources{
		margin-top: 5%;
	}
	hr{
		width: 75%;
	}
	#special{
		grid-area: 12 / 1/ 12  /1 !important;
	}
}



/* For the Animal Transfer Card */


#animal-transfer {
	background-image: url('/themes/olac/images/mouse2_good.jpg');
	background-size: contain;
	background-repeat: no-repeat;
	height: 197px;
	width: 295px;
	display: block;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	cursor: pointer;
	transform: none;
}

#animal-transfer > div > p{
	display: flex;
	width: 100%;
	height: auto;
	justify-content: center;
	background-color: #00488c;
	color: white;
	align-items: flex-end;
	box-shadow: none;
	transition: color 300ms ease;
}
#animal-transfer > div {
	height: 100%;
	display: flex;
	align-items: flex-end;
	width: 100%;
	justify-content: center;
}
#animal-transfer > div > p:hover{
	color: #FDB515;
	background-color: #00488c;
	cursor: pointer;
	text-decoration: underline #FDB515;
}



/* Fort non animal Transfer card */
#non-animal{
	background-image: url('/themes/olac/images/non-animal.png');
	background-size: contain;
	background-repeat: no-repeat;
	height: 197px;
	width: 295px;
	display: block;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

	cursor: pointer;
	transform: none;
}
#non-animal > div > p {
	display: flex;
	width: 100%;
	height: auto;
	justify-content: center;
	background-color: #00488c;
	color: white;
	align-items: flex-end;
	box-shadow: none;
	transition: color 300ms ease;
}
#non-animal > div {
	height: 100%;
	display: flex;
	align-items: flex-end;
	width: 100%;
	justify-content: center;
}
#non-animal > div > p:hover{
	color: #FDB515;
	background-color: #00488c;
	cursor: pointer;
	text-decoration: underline #FDB515;
}



/* For Cayuse */
#cayuse{
	background-image: url('/themes/olac/images/cayuse.jpg');
	background-size: contain;
	background-repeat: no-repeat;
	height: 197px;
	width: 295px;
	display: block;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

	cursor: pointer;
	transform: none;
}
#cayuse> div > p {
	display: flex;
	width: 100%;
	height: auto;
	justify-content: center;
	background-color: #00488c;
	color: white;
	align-items: flex-end;
	box-shadow: none;
	transition: color 300ms ease;
}
#cayuse > div {
	height: 100%;
	display: flex;
	align-items: flex-end;
	width: 100%;
	justify-content: center;
}
#cayuse > div > p:hover{
	color: #FDB515;
	background-color: #00488c;
	cursor: pointer;
	text-decoration: underline #FDB515;
}





/* For Pharmacy */

#pharmacy{
	background-image: url('/themes/olac/images/pharmacy_no_mark.png');
	background-size: contain;
	background-repeat: no-repeat;
	height: 197px;
	width: 295px;
	display: block;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	margin-right: 50px;
	cursor: pointer;
	transform: none;
}
#pharmacy > div > p {
	display: flex;
	width: 100%;
	height: auto;
	justify-content: center;
	background-color: #00488c;
	color: white;
	align-items: flex-end;
	box-shadow: none;
	transition: color 300ms ease;
}
#pharmacy > div {
	height: 100%;
	display: flex;
	align-items: flex-end;
	width: 100%;
	justify-content: center;
}
#pharmacy > div > p:hover{
	color: #FDB515;
	background-color: #00488c;
	cursor: pointer;
	text-decoration: underline #FDB515;
}



/* For Recharge  */
#recharge{
	background-image: url('/themes/olac/images/recharge_no_mark_0.png');
	background-size: contain;
	background-repeat: no-repeat;
  height: 225px;
	width: 300px;
	display: block;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	margin-right: 50px;
	margin-bottom: 10px;
	cursor: pointer;
	transform: none;
}
#recharge > div > p {
	display: flex;
	width: 100%;
	height: auto;
	justify-content: center;
	background-color: #00488c;
	color: white;
	align-items: flex-end;
	box-shadow: none;
	transition: color 300ms ease;
}
#recharge> div {
	height: 100%;
	display: flex;
	align-items: flex-end;
	width: 100%;
	justify-content: center;
}
#recharge  > div > p:hover{
	color: #FDB515;
	background-color: #00488c;
	cursor: pointer;
	text-decoration: underline #FDB515;
}




/* For Research  */

#research{
	background-image: url('/themes/olac/images/research_no_mark.png');
	background-size: contain;
	background-repeat: no-repeat;
	height: 225px;
	width: 300px;
	display: block;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	margin-right: 50px;
	cursor: pointer;
	transform: none;
}
#research > div > p {
	display: flex;
	width: 100%;
	height: auto;
	justify-content: center;
	background-color: #00488c;
	color: white;
	align-items: flex-end;
	box-shadow: none;
	transition: color 300ms ease;
}
#research > div {
	height: 100%;
	display: flex;
	align-items: flex-end;
	width: 100%;
	justify-content: center;
}
#research  > div > p:hover{
	color: #FDB515;
	background-color: #00488c;
	cursor: pointer;
	text-decoration: underline #FDB515;
}


/* For Special  */
#special{
	background-image: url('/themes/olac/images/special_services_request_no_mark.png');
	background-size: contain;
	background-repeat: no-repeat;
	height: 225px;
	width: 300px;
	display: block;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	margin-right: 50px;
	cursor: pointer;
	transform: none;
	grid-area: 5 / 2 / 5 / 2
}
#special > div > p {
	display: flex;
	width: 100%;
	height: auto;
	justify-content: center;
	background-color: #00488c;
	color: white;
	align-items: flex-end;
	box-shadow: none;
	transition: color 300ms ease;
}
#special > div {
	height: 100%;
	display: flex;
	align-items: flex-end;
	width: 100%;
	justify-content: center;
}
#special  > div > p:hover{
	color: #FDB515;
	background-color: #00488c;
	cursor: pointer;
	text-decoration: underline #FDB515;
}


/* Olac's Training */
#training{
		background-image: url('/themes/olac/images/training_no_mark.png');
	background-size: contain;
	background-repeat: no-repeat;
	height: 225px;
	width: 300px;
	display: block;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	margin-right: 50px;
	cursor: pointer;
	transform: none;
}
#training > div > p {
	display: flex;
	width: 100%;
	height: auto;
	justify-content: center;
	background-color: #00488c;
	color: white;
	align-items: flex-end;
	box-shadow: none;
	transition: color 300ms ease;
}
#training > div {
	height: 100%;
	display: flex;
	align-items: flex-end;
	width: 100%;
	justify-content: center;
}
#training  > div > p:hover{
	color: #FDB515;
	background-color: #00488c;
	cursor: pointer;
	text-decoration: underline #FDB515;
}


/*Logic Handling for the overall page*/
#goat {
	display: none;
}
.mission-text{
	display: none;
}

.secondary-nav__menu{
    display: block;
    font-size: 20px;
     
}
.site-main {
	display: none;
}


/* Forms section */
#forms{
		background-image: url('/themes/olac/images/forms_no_mark.png');
	background-size: contain;
	background-repeat: no-repeat;
	height: 225px;
	width: 300px;
	display: block;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	margin-right: 50px;
	cursor: pointer;
	transform: none;
}
#forms > div > p {
	display: flex;
	width: 100%;
	height: auto;
	justify-content: center;
	background-color: #00488c;
	color: white;
	align-items: flex-end;
	box-shadow: none;
	transition: color 300ms ease;
}
#forms > div {
	height: 100%;
	display: flex;
	align-items: flex-end;
	width: 100%;
	justify-content: center;
}
#forms  > div > p:hover{
	color: #FDB515;
	background-color: #00488c;
	cursor: pointer;
	text-decoration: underline #FDB515;
}

/* Resources  */
#resources{
		background-image: url('/themes/olac/images/pi_resources_no_mark.png');
	background-size: cover;
	background-repeat: no-repeat;
	height: 225px;
	width: 300px;
	display: block;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	margin-right: 50px;
	cursor: pointer;
	transform: none;

}
#resources > div > p {
	display: flex;
	width: 100%;
	height: auto;
	justify-content: center;
	background-color: #00488c;
	color: white;
	align-items: flex-end;
	box-shadow: none;
	transition: color 300ms ease;
}
#resources > div {
	height: 100%;
	display: flex;
	align-items: flex-end;
	width: 100%;
	justify-content: center;
}
#resources  > div > p:hover{
	color: #FDB515;
	background-color: #00488c;
	cursor: pointer;
	text-decoration: underline #FDB515;
}