:root { 
	--btnHomePageBoxShadow: 1px 1px 4px 4px;
	/* use px for sizing of font to ensure override of any em sizes being inherited */
	--endMessageFontSize: 17px;
}


/* ---------------------*/

.divEndWrapper {
    position: relative;
	display:flex;
	height: 100%;
    width: 100%;
	max-width: 350px; 

	/* font-size: 15px; */
	/* font-size: 1em; */

	border: solid 8px var(--buttonWrapperBorderColor);
	border-radius: 20px;
	margin-top: 8px;
	padding-bottom: 8px;
	
	flex-direction: column; 
    justify-self: center;
    /* center content */
	align-items: center;

    text-align: center;

    /* Center items vertically */
	justify-content: center; 
	
	background-color: white;
    /* z-index: 1000; */
    opacity:0;
}



.btnEnd {
	display: block;
	width: 215px;
	font-size: 16px;
	margin:0;
	margin-top: 0.7em;
	margin-bottom: 0.7em;	
	text-align: center;
	cursor: default;
	-webkit-user-select: none;
	user-select: none;

	border: solid;
	border-color: var(--msgBoxBackgroundColor);
	border-width: 0.05em;
	border-radius: 0.5em;
	box-shadow: var(--btnHomePageBoxShadow) var(--msgBoxShadowColor); 
	padding: 0.4em;   /* all four sides */
	color: var(--msgBoxColor);
	background-color: var(--msgBoxBackgroundColor);
	/* opacity:0; */
	/* z-index: -1; */
}
.btnEndHide {
	display: block;
	transform: scale(0.1, 0.1);
	opacity:0;
	z-index: -1;
	-webkit-transition: opacity 800ms ease-out, transform 800ms ease-out;
	transition: opacity 800ms ease-out, transform 800ms ease-out;
}
.btnEndShow {
	display: block;
	transform: scale(1);
	z-index: 1;
	opacity:1;
	-webkit-transition: all 2s ease-in-out;
	transition: all 2s ease-in-out; 
}
.btnEndMouseOver {
	cursor:pointer;
	box-shadow: var(--btnHomePageBoxShadow) var(--mainTextColor); 
	transition: none;
}
.btnEndMouseOut {
	cursor:auto;
	box-shadow: none; 
	box-shadow: var(--btnHomePageBoxShadow) var(--msgBoxShadowColor);
	transition: none;
}


.slide-in {animation: slideIn 0.75s ease forwards;}
.slide-out {animation: slideOut 0.75s ease forwards;}

@keyframes slideIn {
    0% {
    	transform: translateX(-100%);
    	opacity: 0;
    }
    100% {
	    transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* mobile layout (478px or less *****************************************/
.mainContainer {width: 100% margin 0;}
/* .btnDonate {width: auto; margin-left: 0;} */
/* .btnShare {width: auto; margin-left: 0;} */
/* .msgBox {font-size: 1em;} */


/* mobile portrait layout (less than 320px) ******************************************/
.divEndMessage{font-size: var(--endMessageFontSize);
	line-height: 1.4em;
	margin: 0.4em;
	/* margin-top: 0.4em; */
	margin-bottom: 1em;
}

.divEndWrapper {max-width: 310px;}

/* mobile portrait layout (320px to 359px) *** iPhone 4 ***************************************/
@media only screen and (min-width: 320px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
	.divEndWrapper {max-width: 310px;}
}

/* mobile portrait layout (360px to 374px) ******************************************/
@media only screen and (min-width: 360px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
	.divEndWrapper {max-width: 336px;}
}

/* mobile portrait layout (375px to 411px) ******************************************/
@media only screen and (min-width: 375px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
	.divEndWrapper {max-width: 350px;}
}


/* mobile landscape layout (412px to 479px) ******************************************/
@media only screen and (min-width: 412px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}


/* mobile landscape layout iPhone 4 (480px) ******************************************/
@media only screen and (min-width: 480px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}

/* mobile landscape layout (481px to 568px) ******************************************/
@media only screen and (min-width: 481px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}

/* mobile landscape layout (568px to 639px **********************************************/
@media only screen and (min-width: 568px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}

/* mobile landscape layout (640px to 657px) **********************************************/
@media only screen and (min-width: 640px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}

/* mobile landscape layout (658px to 666px) **************************************************/
@media only screen and (min-width: 658px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}


/* iPhoneSE / iPhone 6/7/8- landscape layout (667px to 712x) **************************************************/
@media only screen and (min-width: 667px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}

/* Galaxy Tab 4 - portrait layout (712px to 716px) **************************************************/
@media only screen and (min-width: 712px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}


/* mobile Galaxy Fold landscape layout (717px to 735px) **** Also Surface Duo ****************************/
@media only screen and (min-width: 717px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}

/* iPhone 6/7/8 Plus - landscape layout (736px to 739px) **************************************************/
@media only screen and (min-width: 736px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}

/* mobile Galaxy S8 landscape layout 740px (740px to 744px) **************************************************/
@media only screen and (min-width: 740px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}

/* Pixel 4 landscape layout 745px x 353px (745px to 767px) **************************************************/
@media only screen and (min-width: 745px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}

/* landscape layout 746px (746px to 767px) **************************************************/
@media only screen and (min-width: 746px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}

/* iPad Mini - portrait layout (768px to 785px) **************************************************/
@media only screen and (min-width: 768px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* Pixel 3 XL - landscape layout (786px) **************************************************/
@media only screen and (min-width: 786px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/*  - landscape layout (787px to 811px) **************************************************/
@media only screen and (min-width: 787px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* iPhone-X - landscape layout (812px to 819px) **************************************************/
@media only screen and (min-width: 812px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* iPad Air - portrait layout 820px x 1180px) (820 to 821) **************************************************/
@media only screen and (min-width: 820px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* landscape layout (821 to 844) **************************************************/
@media only screen and (min-width: 821px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* mobile iPhone-12 Pro - landscape layout (844x to 851px) **************************************************/
@media only screen and (min-width: 844px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* Pixl-5 - landscape layout (851px to 853px) **************************************************/
@media only screen and (min-width: 851px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* landscape layout (854px to 896px) **************************************************/
@media only screen and (min-width: 854px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}


/* iPhoneXR - landscape layout (896px to 899px)  -- odd height only 414px ******************/
@media only screen and (min-width: 896px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* Surface Pro - portrait layout 912px (900 to 913px)  **********************************/
@media only screen and (min-width: 900px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* Galaxy A51/71 / Galaxy S20 - landscape layout (914px to 917px)  -- odd height only 414px ******************/
@media only screen and (min-width: 914px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* tablet landscape layout (917px to 999) ********************************************************/
@media only screen and (min-width: 917px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* tablet landscape layout (1000px to 1099) ********************************************************/
@media only screen and (min-width: 1000px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}


/* tablet landscape layout (1100px to 1199) ********************************************************/
@media only screen and (min-width: 1100px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* tablet landscape layout (1200px to 1399) ********************************************************/
@media only screen and (min-width: 1200px) {
	.divExploreMenu {font-size: 80%;}
	/* .divEndMessage{font-size: 80%;} */
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* high def computer landscape layout (1400px to 1599) *****************************************************/
@media only screen and (min-width: 1400px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* high def computer landscape layout (1600px to 1899) *****************************************************/
@media only screen and (min-width: 1600px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* high def computer landscape layout (1900px or more) *****************************************************/
@media only screen and (min-width: 1900px) {
	.divEndMessage{font-size: var(--endMessageFontSize);}

}

/* Samsung S10E landscape layout (2280px x 1080 or more) *****************************************************/
@media only screen and (min-width: 2280px) and (max-width: 2280) {
	.divEndMessage{font-size: var(--endMessageFontSize);}
}