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

/* Enable (show) the standard buttong/controls within the html video */
/* video::-webkit-media-controls-enclosure {display:block !important; } */
/* video::-webkit-media-controls-enclosure {display:block; } */

/* disable (hide) the fullscreen button within the video controls */
video::-webkit-media-controls-fullscreen-button { display: none; }

/* mobile portrait layout ********************************************/
/* body {font-size: 90%;} */


/* ---------------------*/
.mainWrapper {
	position: relative; 
	display: flex;  
	flex-direction: column; 
	/* constrain button width */
	align-items: center;
	/* Center items vertically */
	justify-content: space-evenly; 
	
	justify-self: center;

	margin-top: 5px;	
	height: 350px;
	width: 350px;
	
	/* font-size: 95%; */
	
	/* inflate bubble */
	border-radius: 50%;
	transform: scale(1);
	opacity: 1;
	transition: opacity 3s ease-out, transform 2.5s ease-out;

	background-color: transparent;
}

.mainWrapperDeflate {
	height: 350px;
	width: 350px;
	border-radius: 50%;
	transform: scale(0);
	opacity: 0;
	transition: opacity 1s ease-in-out, transform 1.5s ease-in;
}
.mainWrapperHide {
	transform: scale(0);
	opacity: 0;
	transition: opacity 1s ease-in, transform 1.5s;
}
.mainWrapperBackgroundSet {
	background: radial-gradient(circle farthest-side at center, 
		white 0%,
		white 75%,
		var(--gradientBackgroundColor2) 78%, 
		var(--gradientBackgroundColor3) 83%,
		var(--gradientBackgroundColor5) 95%, 
		var(--buttonWrapperBorderColor) 100%
	);
}
.mainWrapperRectangle {
	height: 325px;
	max-width: 375px;
	border: solid 25px var(--buttonWrapperBorderColor);
	border-radius: 6px;
	margin-top: 15px;
	transform: scale(1);
	opacity: 1;
	/* final color */
	background-color: white;

	transition: border-radius 4s ease-in-out,
		/* background-color 500ms ease-in, */
		transform 2s ease-in-out, 
		opacity 2s ease;
}

/* .mainWrapperShadow { */
	/* box-shadow: 2px 2px 3px 4px var(--mainBackgroundColor); */
/* } */


.btnHomePage {
	display: block;
	width: 215px;
	font-size: 16px;
	margin:0;	
	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; */
}
.btnHomePageHide {
	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;
}
.btnHomePageShow {
	display: block;
	transform: scale(1);
	z-index: 1;
	opacity:1;
	-webkit-transition: all 2s ease-in-out;
	transition: all 2s ease-in-out; 
}
.btnHomePageMouseOver {
	cursor:pointer;
	box-shadow: var(--btnHomePageBoxShadow) var(--mainTextColor); 
	transition: none;
}
.btnHomePageMouseOut {
	cursor:auto;
	box-shadow: none; 
	box-shadow: var(--btnHomePageBoxShadow) var(--msgBoxShadowColor);
	transition: none;
}

img{
      display:block;
      height: 100%;
      width: 100%;
      object-fit:scale-down;
}
.imgLogoWrapper {
	display:block;
   	position: relative;
    height: 65px;
    width: 65px;
    align-self: center;
    justify-self: center;
    align-items: center;

    border: 7px solid  white;
    border-radius: 0px;
    box-shadow: 0px 0px 3px 15px var(--buttonWrapperBorderColor);
}
.divBrandingWrapper {
    display: flex;
    flex-direction: column;
    align-self: center;
    text-align: center;
    margin-top: 23%;
    height:77%;
	font-size: var(--brandingWrapperFontSize);
}
    
.imgExploreMenuWrapper {
    display:block;
    position: relative;
	height: auto;
    width: 96%;
	margin-top: 5px;
}
.divExploreMenu {
    position: absolute;
    display:flex;
	height: 100%;
    width: 100%;
	font-size: 15px;
	font-size: 1em;

	border: solid 1px var(--buttonWrapperBorderColor);
	
	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;
}

.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;
    }
}




/* ------------------- */
/* 
.msgBox {
	font-size: 1em;
	display:block;
	position:absolute;
	z-index:-1;
	top:auto;
	bottom: 0;
	left: 0;
	height: auto; 
	width: auto;
	max-width: 97vw;
	border: none;
	border-radius: 0.8em;
	box-shadow: var(--btnHomePageBoxShadow) var(--msgBoxShadowColor); 
	margin:  0.5em;  
	padding: 0.4em; 
	color: var(--msgBoxColor);
	background-color: var(--msgBoxBackgroundColor);
} */

/* .msgBoxShow {
	z-index:550;
	opacity:1;
	-webkit-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out; 
} */

/* .msgBoxHide {
	z-index:-1;
	opacity:0;
	-webkit-transition: all 1000ms ease-in-out;
	transition: all 1000ms ease-in-out; 
} */


/* 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) ******************************************/
.divBrandingWrapper{font-size: var(--brandingWrapperFontSize);}

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

/* mobile portrait layout (360px to 374px) ******************************************/
@media only screen and (min-width: 360px) {
	.divBrandingWrapper{font-size: var(--brandingWrapperFontSize);}
}

/* mobile portrait layout (375px to 411px) ******************************************/
@media only screen and (min-width: 375px) {
	.divBrandingWrapper{font-size: var(--brandingWrapperFontSize);}
}


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


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

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

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

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

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


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

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


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

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

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

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

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

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

}

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

}

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

}

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

}

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

}

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

}

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

}

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

}

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

}


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

}

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

}

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

}

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

}

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

}


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

}

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

}

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

}

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

}

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

}

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