/* --- Vendor for Legacy buttons --- */

/* --- Image Links --- */
.btn-flowers:after { background-image: url(../images/btn-flower.png); }
.btn-flowers { background-image: url(../images/flowers2.jpg); z-index: 3!important; }

.btn-cards:after { background-image: url(../images/btn-card.png); }
.btn-cards { background-image: url(../images/sympathy-card.jpg); z-index: 2!important; }

.btn-gifts:after { background-image: url(../images/btn-gift8.png); }
.btn-gifts { background-image: url(../images/gifts-bg8.jpg); z-index: 1!important; }

.btn-tree:after { background-image: url(../images/btn-gift9.png); }
.btn-tree { background-image: url(../images/gifts-bg9.jpg); z-index: 4!important; }


.obit-links .btn-flowers, 
.obit-links .btn-cards, 
.obit-links .btn-gifts, 
.obit-links .btn-tree {
	position: relative; display: block!important;
	flex-direction: column!important;
	border-radius: 3px; border-top: none!important;
	margin: 0 0 1.5em; 
	padding: 1em 30px 1em 1em!important;
	background-size: 150%; background-position: left 15%;
	min-width: 43%;
}
.btn-flowers:after, 
.btn-cards:after, 
.btn-gifts:after,
.btn-tree:after {
	position: absolute; z-index: 4; content: " ";
	top: 0; right: -25px;
	width: 45%; height: 125%; max-width: 110px;
	pointer-events: none;
	background-size: 100%; background-repeat: no-repeat;
	background-position-x: 0; background-position-y: bottom;
}

/* --- TREE BTN ONLY --- */
.obit-links .btn-tree { background-position: right 10%!important; text-shadow: 0 0 4px rgb(255,255,255); }
.obit-links .btn-tree:after { z-index: -1; top: auto; bottom: 0; right: 0; width: 70%; max-width: 120px; }
/* -------------------------------- */

.btn-flowers .btn-title:before, 
.btn-cards .btn-title:before, 
.btn-gifts .btn-title:before,
.btn-tree .btn-title:before {
	position: absolute; z-index: -1; content: " ";
	top: 0; right: 0; bottom: 0; left: 0;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.6);
	transition: all 250ms ease-in-out; 
}
.btn-flowers .btn-title, .btn-flowers .btn-subtitle,
.btn-cards .btn-title, .btn-cards .btn-subtitle,
.btn-gifts .btn-title, .btn-gifts .btn-subtitle,
.btn-tree .btn-title, .btn-tree .btn-subtitle { color: black; padding-bottom: 0; text-shadow: 0 0 4px rgb(255,255,255); }

.btn-flowers .btn-title, 
.btn-cards .btn-title, 
.btn-gifts .btn-title,
.btn-tree .btn-title {
	line-height: 1;
	font-size: 1.4em;
	text-transform: uppercase;
	margin-bottom: 5px;
	font-weight: normal;
	font-style: normal;
}

.btn-flowers .btn-subtitle, 
.btn-cards .btn-subtitle, 
.btn-gifts .btn-subtitle,
.btn-tree .btn-subtitle { line-height: 1.3;  margin: 0; padding-bottom: 7px; color: black; }

.btn-flowers:hover .btn-title:before, 
.btn-cards:hover .btn-title:before, 
.btn-gifts:hover .btn-title:before,
.btn-tree:hover .btn-title:before { background-color: rgba(255, 255, 255, 0.4); }

.btn-flowers:hover, .btn-flowers:focus, 	
.btn-cards:hover, .btn-cards:focus, 	
.btn-gifts:focus, .btn-gifts:hover,	
.btn-tree:focus, .btn-tree:hover { text-decoration: none!important; }


/* --- Media Query Mobile --- */
@media screen and (max-width: 768px) { 

	.obit-links .btn-flowers, 
	.obit-links .btn-cards, 
	.obit-links .btn-gifts, 
	.obit-links .btn-tree { margin: 0 0 .7em!important; min-width: 90%; border-radius: 7px!important; }

	.btn-flowers .btn-title:before, 
	.btn-cards .btn-title:before, 
	.btn-gifts .btn-title:before,
	.btn-tree .btn-title:before { border-radius: 7px!important; }

	.btn-flowers:after, .btn-cards:after, .btn-gifts:after { right: -15px; top:-10px; }
	.btn-tree:after { }
}
/* --- Media Query iPad --- */
@media screen and (device-width: 768px) { 

	.obit-links { width: 100%; }
	.btn-flowers:after, .btn-cards:after, .btn-gifts:after { right: 10px; }
	.btn-tree:after { }
}
@media screen and (device-width: 768px) and (orientation: portrait) {

	.btn-flowers:after, .btn-cards:after, .btn-gifts:after { right: -15px; top: -20px; }
	.btn-tree:after { }
}