/*

Global Styles for Lady D Web Site
---------------------------------

NOTES:

1. 1036px is used for the desktop breakpoint to prevent the video and photo link text from going to two lines.
   Another alternative would be to make the link text smaller between 768 and 1036.


*/


/* Animations */

@keyframes fade-splash {
	0%   {opacity: 1.0;}
	100% {opacity: 0.0;}
}

.fade-out {
	transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
    opacity: 0;
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
    -webkit-animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



/* Fonts */

@font-face {
	font-family: base;
	src: url('fonts/Vollkorn-Regular.ttf');
}

@font-face {
	font-family: base-bold;
	src: url('fonts/Vollkorn-Bold.ttf');
}

@font-face {
	font-family: base-italic;
	src: url('fonts/Vollkorn-Italic.ttf');
}

@font-face {
	font-family: title;
	src: url('fonts/Limelight.ttf');
}

@font-face {
	font-family: menu-link;
	src: url('fonts/Limelight.ttf');
}

@font-face {
	font-family: headline;
	src: url('fonts/Limelight.ttf');
}

/*
@font-face {
	font-family: title;
	src: url('fonts/komika_axis.ttf');
}

@font-face {
	font-family: headline;
	src: url('fonts/komika_axis.ttf');
}

@font-face {
	font-family: menu-link;
	src: url('fonts/Shrikhand-Regular.otf');
}

@font-face {
	font-family: menu-link;
	src: url('fonts/Shrikhand-Regular.otf');
}

	text-shadow: 2px 2px 4px #000000;

b {
	font-family: base-bold;
}
*/

.headline
{
	margin-top: 4px;
	line-height: 120%;
	font-family: headline;
	font-size: 24pt;
	color: black;
	text-align: center;
	padding-left: 4px;
	padding-right: 4px;
}

.slogan {
	font-family: title;
	font-size: 14pt !important;
	width: 100%; 
	text-align: center; 
	font-size: 18pt; 
	padding-top: 45px;
}

.slogan-splash {
	font-family: title;
	font-size: 14pt !important;
	width: 100%; 
	text-align: center; 
	font-size: 18pt; 
	margin-top: -30px;			/* pink border of logo takes up space, this adjusts */
}

.facebook-wide-video {
	width: 360px;
	height: 180px;
}

.facebook-wide-video-local {			/* to eliminate black vertical margins */
	width: 360px !important;
	height: 200px !important;
}

.small-header
{
	font-family: headline;
	font-size: 16pt;
	color: black;
	text-align: center;
	padding-left: 4px;
	padding-right: 4px;
}

.to-top-link {
	width: 100%;
	padding-bottom: 10px;
	font-size: 10px;
	font-family: base;
	color: white;
}

.article-text
{
	max-width: 600px;
	font-family: base;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

.center-para 
{
	text-align: center;
	padding-left: 4px;
	padding-right: 4px;
}

.large-portrait {
	width: 50%;
	box-shadow: 0 0 10px 0 rgba(0,0,0,1.0);		/* From RuPaul's site, as requested */
}

.photo-viewer {
	visibility: collapse; 
	position: absolute; 
	top: 0px; 
	left: 0px; 
	opacity: 0.5; 
	width: 100%; 
	height: 100%;   /* 148% */ 
	background-color: black;
    z-index: 2900;
}

.photo-viewer-topper {
    visibility: collapse;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);	
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 3000;
}

.social-outer {
	text-align: center; 
	width: 100%; 
	height: 100px; 
}

.social-inner {
	margin-left: auto; 
	margin-right: auto; 
	height: 100px; 
}

.social-icon {
	height: 50px;
	width: auto;
}

/* Overall layout */

html {
    /* To make use of full height of page*/
	background-color: #ffbfda;					/* the page's 'real' background color */
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100%;
	margin: 0;
	color: black;					/* default text color */
	font-size: 14pt;
	height: 100%;
	width: 100%;				      

	/* page transition */
	animation: fadeIn 0.5s ease-in;
    -webkit-animation: fadeIn 0.5s ease-in;
}

td {
	padding-top: 5px;
	padding-bottom: 5px;
}

.body-type {
	font-family: base;
}

.body-text {
	max-width: 600px;
}

.centered {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);

	font-size: 20px;
	padding: 5px;
	z-index: 100;
}

.centered-h {
	position: fixed;
	left: 50%;
	transform: translate(-50%, 0%);
	-webkit-transform: translate(-50%, 0%);
	-moz-transform: translate(-50%, 0%);
	-o-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);

	font-size: 20px;
	padding: 5px;
	z-index: 100;
}


/*********************/
/* Responsive Layout */
/*********************/

/******************************************************/
/*                    MOBILE FIRST                    */
/******************************************************/

/* Links */

a {
	text-decoration: none;
}

/* unvisited link */
a:link {
	color: white;
}

/* visited link */
a:visited {
	color: white;
}

/* mouse over link */
a:hover {
	color: red;
}

/* selected link */
a:active {
	color: red;
}

/* Special colors */

/* for the desktop version, mainly - links at the top of the page are blank and this
	override was needed to make the footer links visible in white */
#footer-link-white {
	width: 100%;
	background-color: black;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-right: 10px;
	font-family: base;
	color: white;
}

#close-button-video {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	background-color: black;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-right: 10px;
	font-family: base;
	color: white;
}

.close-button-black {
	width: 100%;
	text-align: center;
	background-color: black;
	padding-top: 2px;
	padding-bottom: 2px;
	font-family: base;
	color: white;
}

#fine-print-link {
	width: 100%;
	font-family: base;
	color: white;
}

#lavender-link {
	color: darkgreen;
}

#green-link {
	color: darkgreen;
	text-decoration: underline;
	font-family: base;
}

#yellow-link {
	color: yellow;
}


/* Mobile First */

/*
* {
	box-sizing: border-box;
}
body {
	margin: 0px;
	padding: 0px;
	border-style: none;
	height: 100%;
	width: 100%;
}

*/


table {
	width: 100%;
	height: 100%;
}

.table-left-column {            /* use with td tags only */
	width: 35%;
	background-color: yellow;
	text-align: center;
	color: black;
}

.table-right-column {           /* use with td tags only */
	width: 65%;
	background-color: green;
	text-align: center;
	color: black;
}


/* Applies To All - altered according to media query below */

.page-title {
	font-family: title;
	font-size: 32pt;
	width: 100%;
	text-align: center;
	margin-top: 5px;
	color: white;
	text-shadow: 2px 2px 2px #000000;
}

.menu-button {
	visibility: visible;
}

.menu-button-area {
	position: absolute;
	top: 10px;
	left: 10px;
	visibility: visible;
}

.menu-area {
	visibility: collapse;		/* visibility of this is triggered by width on the media statement like an if/then */
	width: 100%;
	text-align: center; 
	height: 0px;
}

.menu-drop-down {
	z-index: 1000;
	height: 290px;          /* set according to number of items - originally 300px */
	width: 200px;           /* right pad not working */
	padding-top: 5px;
	margin-top: 5px;
	background-color: black;
	color: white;
	position: absolute;
	top: 40px;
	left: 10.5px;
	visibility: hidden;
}

.menu-option {				/* left to right across page - desktop - not 100% - padding on either side? */
	display: none;
	font-family: menu-link;
	text-align: center;
	color: black;
	height: 40px;
	float: left;
}

.menu-drop-down-option {				/* drop-down in box */
	font-family: menu-link;
	width: auto;
	text-align: left;
	height: 20px;
	padding: 10px;
	color: white;
}

/* body-area has a right margin to account for the vertical scroll bar */
.body-area {
	width: 100%;
	margin-top: 5px;
	margin-right: 20px;
}

.body-area-centered {
	width: 100%;
	margin-top: 5px;
	margin-right: 20px;
	text-align: center;
}

.about-header {
	font-size: 12pt;
	font-weight: bold;
}

.about-info {             /* changes per layout */
	font-size: 10pt;
	color: white;
	text-align: left;
	width: 350px;
	margin-left: auto;
	margin-right: auto;
}

.product-info {             /* changes per layout */
	color: white;
	text-align: center;
	width: 100%;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 20px;
	padding-bottom: 40px;
}

.product-text {         /* in use? */
	text-align: left;
}

.screen-shot-wrap {
	width: 100%; 
	margin-top: 12pt;
	margin-left: auto; 
	margin-right: auto;
}

.screen-shot {              /* maximums apply for tablet, desktop */
	width: 200px;
	height: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px;
	border-style: solid;
	border-color: white;
	background-color: black;
}

.product-left-column {
	width: 45%;
}

.product-right-column {
	width: 55%;
	background-color: black;
	padding-left: 20px;
	padding-right: 20px;
}

/* set a minimum height if not enough content */

.photo-scroller {
	width: 360px;					/* adjusted for iPhone 6S - was 420 = (190+10 margin) twice plus 10 either side */ 
	margin-left: auto; 
	margin-right: auto;
}

.photo-scroller-thumb {
	width: 163px;				/* adjusted for tests on iPhone 6s - smaller than the Galaxy S9 */
	height: auto;
	padding: 0px;
	margin: 8px;
	box-shadow: 0 0 10px 0 rgba(0,0,0,1.0);		/* From RuPaul's site, as requested */
	cursor: pointer;
}

.topic-area {
	max-width: 100%;
	border: 0px;
	border-style: none;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 10px;
	padding-bottom: 2px;
}

/* mainly for the home page */
.feature-area-parent {
	position: relative; 
	width: 100%; 
	background-color: #ffbfda;
	margin-left: auto;
	margin-right: auto;
}

.feature-area-child {
	/* nothing required for mobile version */
	margin-left: auto;
	margin-right: auto;
}

.home-page-photo {
	text-align: center;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	width: 250px;
	height: auto;
	box-shadow: 0 0 10px 0 rgba(0,0,0,1.0);		/* From RuPaul's site, as requested */
}

.home-page-margins {					/* use this to adjust space for social media line */
	margin-left: auto; 					/* too bad margin-top and margin-bottom don't work this easily */
	margin-right: auto;
	text-align: center;
	margin-bottom: 0px;
}

/* footer-area is the container that has the full background color */
/* footer-content doesn't fill the background color all the way    */

.footer-area {
	width: 100%;
	height: 100px;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	background-color: black;
	color: white;
}

.footer-content-right {
	width: 100%;
	text-align: center;
	height: 100px;
	color: white;
	vertical-align: middle;
	padding-right: 10px;
	padding-top: 14px;
}

.footer-link {
	margin-right: 15px;
}

.logo-resize {
	width: auto;
	height: 250px;
}

.logo-resize-pop-in {
	animation-name: logo-resize-pop-in-anim; 
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	text-align: center;
	background-repeat: no-repeat;
	background-image: url('img/logo-1.png'); 
	width: 250px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	background-size: contain;
}

@keyframes logo-resize-pop-in-anim {
	0%   {height: 0px; width:auto;}
	100% {height: 250px; width:auto;}
}

.slogan-pop-in {
	font-family: title;
	visibility: collapse;
	/*
	animation-name: slogan-pop-in-anim; 
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	*/
}

@keyframes slogan-pop-in-anim {
	0%   {opacity: 0.0;}
	30%  {opacity: 0.0;}
	100% {opacity: 1.0;}
}


.logo-image {
	width: 100px;
	height: 100px;
}

.ad-copy-text {
	font-size: 9pt;
	padding-left: 8px;
	padding-right: 8px;
}

.app-title {
	font-size: 14pt;
	font-family: base-bold;
	margin-bottom: 10px;
}

.badges {
	margin-top: 20px;
}

.app-store-badge {
	width: 153px;
	height: auto;
}

.google-badge {
	width: 176px;
	height: auto;
}

.win-store-badge {
	width: 153px;
	height: auto;
}

.amazon-badge {
	width: 153px;
	height: auto;
	margin-top: 10px;
}

.bullet-list-1 {
	width:95%; 
	text-align:left; 
	margin-left:auto; 
	margin-right:auto;
}

.angular-heading {
	color: white;
	font-weight: bold;
}

.angular-heading-center {
	color: white;
	font-weight: bold;
	text-align: center;
}

.angular-data-value {
	color: white;
}

.angular-data-value-bold {
	font-weight: bold;
	color: white;
}

.angular-platform {
	text-align: center;
	color: white;
	width: 50px;
}

.angular-table {
	font-size: 10pt;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}


/******************************************************/
/*                       TABLET                       */
/******************************************************/

@media only screen and (min-width: 768px) and (max-width: 1036px) {

	.large-portrait {
		width: 30%;
		box-shadow: 0 0 10px 0 rgba(0,0,0,1.0);		/* From RuPaul's site, as requested */
	}

	.home-page-margins {					/* use this to adjust space for social media line */
		margin-left: auto; 					/* too bad margin-top and margin-bottom don't work this easily */
		margin-right: auto;
		text-align: center;
		margin-bottom: 570px;
		width: 824px;						/* will center with wide margins on largest pages */
	}

	.topic-area {
		border: 0px;
		border-style: none;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 10px;
		padding-bottom: 2px;
	}

	.photo-scroller {
		width: 770px; 
		margin-left: auto; 
		margin-right: auto;
	}

	.photo-scroller-thumb {
		width: 240px;
		height: auto;
		padding: 0px;
		margin: 8px;
		box-shadow: 0 0 10px 0 rgba(0,0,0,1.0);		/* From RuPaul's site, as requested */
	}

	.photo-viewer {
		visibility: collapse; 
		position: absolute; 
		top: 0px; 
		left: 0px; 
		opacity: 0.5; 
		width: 100%; 
		height: 100%;   /* 148% */ 
		background-color: black;
		z-index: 2900;
	}
	
	.photo-viewer-topper {
		visibility: collapse;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);	
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		z-index: 3000;
	}
	
	.feature-area-parent {
		position: relative; 
		height: 550px; 
		width: 50%; 
		float: left; 
		background-color: #FFBFDA;
	}

	.feature-area-child {
		position: absolute; 
		top: 50%; 
		transform: translateY(-50%);
	}

	.home-page-photo {
		text-align: center;
		width: 364px;
		margin: 0px;
		box-shadow: 0 0 10px 0 rgba(0,0,0,1.0);		/* From RuPaul's site, as requested */
	}
	
	.slogan {
		font-size: 18pt !important;
		width: 100%; 
		text-align: center; 
		font-size: 18pt; 
		padding-top: 45px;
	}

	.slogan-splash {
		font-family: title;
		font-size: 14pt !important;
		width: 100%; 
		text-align: center; 
		font-size: 18pt; 
		margin-top: -30px;			/* pink border of logo takes up space, this adjusts */
	}
	
	.facebook-wide-video {
		width: 480px;
		height: 243px;
	}
	
	.facebook-wide-video-local {			/* to eliminate black vertical margins */
		width: 640px !important;
		height: 360px !important;
	}
	
	.social-outer {
		text-align: center; 
		width: 100%; 
		height: 100px; 
		background-color: yellow; 
	}
	
	.social-inner {
		margin-left: auto; 
		margin-right: auto; 
		height: 100px; 
	}
	
	.social-icon {
		height: 50px;
		width: auto;
	}
	
	
	/* Links */

	a {
		text-decoration: none;
	}

	/* unvisited link */
	a:link {
		color: white;
	}

	/* visited link */
	a:visited {
		color: white;
	}

	/* mouse over link */
	a:hover {
		color: red;
	}

	/* selected link */
	a:active {
		color: red;
	}

	.page-title {
		font-family: title;
		font-size: 40pt;
		width: 100%;
		text-align: center;
		color: white;
		text-shadow: 2px 2px 2px #000000;
	}
	
	.body-area {
		width: 100%;
		margin-top: 20px;
	}

	.menu-button {
		visibility: visible;
	}
	
	.menu-button-area {
		position: absolute;
		top: 10px;
		left: 10px;
		visibility: visible;
	}
	
	/* try to make this evenly divisible or Tablet gets wonky */

	/* menu-option was here */

	.logo-resize {
		width: 250px;
		height: auto;
	}
	
	.logo-resize-pop-in {
		animation-name: logo-resize-pop-in-anim; 
		animation-duration: 0.5s;
		animation-timing-function: ease-in-out;
		text-align: center;
		background-repeat: no-repeat;
		background-image: url('img/logo-1.png'); 
		width: 225px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		background-size: contain;
	}

	@keyframes logo-resize-pop-in-anim {
		0%   {height: 0px; width:auto;}
		100% {height: 225px; width:auto;}
	}
	
	.slogan-pop-in {
		font-family: title;
		visibility: collapse;
		/*
		animation-name: slogan-pop-in-anim; 
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
		*/
	}
	
	/*
	.slogan-pop-in {
		animation-name: slogan-pop-in-anim; 
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}
	*/

	@keyframes slogan-pop-in-anim {
		0%   {opacity: 0.0;}
		30%  {opacity: 0.0;}
		100% {opacity: 1.0;}
	}
	
	
	/* footer-area is the container that has the full background color */
	/* footer-content doesn't fill the background color all the way    */

	.footer-area {
		width: 100%;
		height: 100px;
		margin-top: 0px;
		margin-bottom: 0px;
		text-align: center;
		background-color: black;
		color: white;
	}
	
	.footer-content {
		background-color: black;
		font-size: 12pt;
		width: 100%;
		height: 100px;
		text-align: left;
		color: white;
		vertical-align: middle;
		padding-left: 10px;
	}
	
	.logo-image {
		width: 300px;
		height: 300px;
	}

	.ad-copy-text {
		font-size: 20pt;
		padding-left: 30px;
		padding-right: 30px;
	}

	.app-title {
		font-size: 26pt;
		font-family: base-bold;
		margin-bottom: 20px;
	}

	.screen-shot {              /* maximums apply for tablet, desktop */
		width: 350px;
		height: auto;
	}

	.product-left-column {
		width: 15%;
	}

	.product-right-column {
		width: 85%;
	}

	.product-info {
		font-size: 18pt;
		color: white;
		text-align: center;
		width: 100%;
		padding-left: 40px;
		padding-right: 40px;
		padding-top: 20px;
		padding-bottom: 40px;
	}

	.bullet-list-1 {
		width:50%; 
		text-align:left; 
		margin-left:auto; 
		margin-right:auto;
	}

	.angular-platform {
		text-align: center;
		color: white;
		width: 70px;
	}

	.angular-table {
		font-size: 14pt;
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
	}

	.about-header {
		font-size: 18pt;
		font-weight: bold;
	}

	.about-info {             /* changes per layout */
		font-size: 14pt;
		color: white;
		text-align: left;
		width: 800px;
		margin-left: auto;
		margin-right: auto;
	}

}


/******************************************************/
/*                      DESKTOP                       */
/******************************************************/

/*    Each section floats to the left in one line     */

@media only screen and (min-width: 1036px) {

	.open-menu-option {
		width: 100%;
		background-color: green;
	}

	.gold-menu-option-link {
		width: 100%;
		background-color: green;
	}

	.large-portrait {
		width: 400px;
		box-shadow: 0 0 10px 0 rgba(0,0,0,1.0);		/* From RuPaul's site, as requested */
	}

	.home-page-photo {
		text-align: center;
		width: 364px;
		margin: 0px;
		box-shadow: 0 0 10px 0 rgba(0,0,0,1.0);		/* From RuPaul's site, as requested */
	}

	.home-page-margins {
		background-color: red;
		margin-left: auto; 					/* too bad margin-top and margin-bottom don't work this easily */
		margin-right: auto;
		text-align: center;
		margin-bottom: 570px;
		width: 824px;						/* will center with wide margins on largest pages */
	}

	.topic-area {
		width: 100%;					
		border: 0px;
		border-style: none;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 10px;
		padding-bottom: 2px;
	}

	.photo-scroller {
		width: 770px; 
		margin-left: auto; 
		margin-right: auto;
	}

	.photo-scroller-thumb {
		width: 240px;
		height: auto;
		padding: 0px;
		margin: 8px;
		box-shadow: 0 0 10px 0 rgba(0,0,0,1.0);		/* From RuPaul's site, as requested */
	}
	
	.photo-viewer {
		visibility: collapse; 
		position: absolute; 
		top: 0px; 
		left: 0px; 
		opacity: 0.5; 
		width: 100%; 
		height: 100%;   /* 175% - needs to match the height of the entire page to cover everything */ 
		background-color: black;
		z-index: 2900;
	}
	
	.photo-viewer-topper {
		cursor: pointer;
		visibility: collapse;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);	
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		z-index: 3000;
	}

	.feature-area-parent {
		position: relative; 
		height: 550px; 
		width: 50%; 
		float: left; 
		background-color: #FFBFDA;
	}
	
	.feature-area-child {
		position: absolute; 
		top: 50%; 
		transform: translateY(-50%);
	}

	.home-page-photo {
		text-align: center;
		width: 364px;
		margin: 0px;
	}

	.home-page-margins {
		margin-left: auto; 					/* too bad margin-top and margin-bottom don't work this easily */
		margin-right: auto;
		text-align: center;
		width: 824px;						/* will center with wide margins on largest pages */
	}

	.slogan {
		font-size: 18pt !important;
		width: 100%; 
		text-align: center; 
		font-size: 18pt; 
		padding-top: 45px;
	}

	.slogan-splash {
		font-family: title;
		font-size: 14pt !important;
		width: 100%; 
		text-align: center; 
		font-size: 18pt; 
		margin-top: -30px;			/* pink border of logo takes up space, this adjusts */
	}
	
	.facebook-wide-video {			/* size of the frame */
		width: 640px;
		height: 320px;
	}
	
	.facebook-wide-video-local {			/* to eliminate black vertical margins */
		width: 640px !important;
		height: 360px !important;
	}
	
	.social-icon {
		height: 75px;
		width: auto;
	}
	
	
	/* Links */

	a {
		text-decoration: none;
	}

	/* unvisited link */
	/* must stay black because of the on-screen menu */
	a:link {
		color: black;
	}

	/* visited link */
	a:visited {
		color: black;
	}

	/* mouse over link */
	a:hover {
		color: red;
	}

	/* selected link */
	a:active {
		color: red;
	}

	.page-title {
		font-family: title;
		font-size: 48pt;
		width: 100%;
		text-align: center;
		color: white;
		text-shadow: 2px 2px 2px #000000;
		margin-top: -5px;
		margin-bottom: 5px;
	}

	.body-area {
		width: 100%;
		margin-top: 20px;
	}

	.menu-button {
		visibility: hidden;
	}

	.menu-button-area {
		visibility: hidden;
	}

	.menu-area {
		visibility: visible;
		margin-top: 10px;
		margin-bottom: 50px;
		width: 100%;
		height: 10px;
		text-align: center; 
	}

	/* try to make this evenly divisible or Tablet gets wonky */

	.menu-test-link {
		font-family: menu-link;
		text-align: center;
		margin-left: 0px;
		margin-right: 0px;
	}

	.menu-test-gold-bar {
		width: 100%;
		text-align: center;
		padding-left: 0px;
		padding-right: 0px;
		margin-top: -15px;
	}

	.menu-option {				/* left to right across page - desktop - not 100% - padding on either side? */
		display: inline-flex;		/* was: inline-flex */
		font-family: menu-link;
		text-align: center;
		background-color: red;
		color: black;
		height: 24px;
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.logo-resize {
		width: 350px;
		height: auto;
	}
	
	.logo-resize-pop-in {
		animation-name: logo-resize-pop-in-anim; 
		animation-duration: 0.5s;
		animation-timing-function: ease-in-out;
		text-align: center;
		background-repeat: no-repeat;
		background-image: url('img/logo-1.png'); 
		width: 300px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		background-size: contain;
	}
	
	@keyframes logo-resize-pop-in-anim {
		0%   {height: 0px; width:auto;}
		100% {height: 300px; width:auto;}
	}
	
	.slogan-pop-in {
		font-family: title;
		visibility: collapse;
		/*
		animation-name: slogan-pop-in-anim; 
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
		*/
	}

	/*
	.slogan-pop-in {
		animation-name: slogan-pop-in-anim; 
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}
	*/
	
	@keyframes slogan-pop-in-anim {
		0%   {opacity: 0.0;}
		30%  {opacity: 0.0;}
		100% {opacity: 1.0;}
	}
	
	
	/* footer-area is the container that has the full background color */
	/* footer-content doesn't fill the background color all the way    */

	.footer-area {
		width: 100%;
		height: 100px;
		margin-top: 0px;
		margin-bottom: 0px;
		text-align: center;
		background-color: black;
		color: white;
	}
	
	.logo-image {
		width: 300px;
		height: 300px;
	}

	.ad-copy-text {
		font-size: 20pt;
		padding-left: 30px;
		padding-right: 30px;
	}

	.app-title {
		font-size: 26pt;
		font-family: base-bold;
		margin-bottom: 20px;
	}

	.screen-shot {              /* maximums apply for tablet, desktop */
		width: 350px;
		height: auto;
	}

	.product-left-column {
		width: 15%;
	}

	.product-right-column {
		width: 85%;
	}

	.product-info {
		font-size: 18pt;
		color: white;
		text-align: center;
		width: 100%;
		padding-left: 40px;
		padding-right: 40px;
		padding-top: 20px;
		padding-bottom: 40px;
	}

	.bullet-list-1 {
		width:50%; 
		text-align:left; 
		margin-left:auto; 
		margin-right:auto;
	}

	.angular-platform {
		text-align: center;
		color: white;
		width: 70px;
	}

	.angular-table {
		font-size: 14pt;
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
	}

	.about-header {
		font-size: 18pt;
		font-weight: bold;
	}

	.about-info {             /* changes per layout */
		font-size: 14pt;
		color: white;
		text-align: left;
		width: 800px;
		margin-left: auto;
		margin-right: auto;
	}

}