html, body { margin: 0; padding: 0; font-family: acme, acme-v6-latin-regular, Arial; }
h1  { font-size: 38px; margin: 10px 0 0 100px; color: #203670; }
h2  { font-size: 30px; margin: 10px 0 0 160px; color: #203670; }
p  { font-size: 20px; margin: 10px 240px; 0 0; letter-spacing: 1px;}
ul li { font-size: 20px; margin: 10px 240px; 0 0; letter-spacing: 1px;}

#main {
	background-color: #F2B3BE
	max-width: 1200px;
	width: 1200px;
	margin: 0 auto;
	padding: 1em;
}

/* ----- Header ----- */

	#header {
		background-color: #FAFAF2;
		margin: 10px auto 20px auto;
		padding: 25px;
		position: relative;
		width: 950px;
		-moz-box-shadow: 5px 5px 15px #2A5364;
		box-shadow: 5px 5px 15px #2A5364;
		-moz-border-radius: 10px;
		border-radius: 10px;
		}

	#header-top { background-color: none;
		height: 130px;
		margin: auto;
		position: relative;
		width: 940px;
		}

	.header-top-left {
		width:250px; 
		height:130px;
		background-color: none;
		margin: 0px 0px 0px 0px;
		float: left;
		padding: 10px 5px 0 0px;
		}

	.header-top-right {
		background-color: #FFEBCD;
		width:670px; 
		height:120px;
		margin: 0px;
		float: left;
		padding: 5px 5px 5px 5px;
		}

	#meme  p { clear: both;
		margin: 0 0 0 80px;
		padding: 0px 0 0 0;
		font-size: 18px;
		color: #2B4791;
		font-family: acme, acme-v6-latin-regular, Arial;
		text-shadow: 2px 2px 2px #eee; 
		box-sizing: border-box; 
		width: 100%;
		max-width: 900px;
		}

	#me-me  p { clear: both;
		margin: 0px auto 10px auto;
		padding: 10px 20px;
		color: #9B4D39;
		background: #FDF7F5;
		border: solid 1px #FBE1D5;
		font-size: 24px;
		line-height: 22px;
		border-radius: 4px;
		font-family: acme, acme-v6-latin-regular, Arial;
		box-sizing: border-box;
		text-align: center;
		}


.upper-content{
	width: 1200px;
	margin: 0 auto;
	display: flex; /* equal height of the children */
}


.lower-content{
	margin: 0 auto;
	position: relative;
	width: 1200px;
	font-size: 24px;
}

.content-image{
	float: right;
	margin-left:15px;
}

/* ----- Arrows ----- */

	#previous-arrow {
		height:146px;
		width:199px;
		margin: 180px 10px 0px 16px;
		font-size:32px;
		font-weight:bold;
		background-repeat: no-repeat;
	}

	#previous-text {	margin: 50px 0px 0px 40px; }

	#next-arrow {
		height:146px;
		width:199px;
		margin: 180px 0px 0px 10px;
		font-size:32px;
		font-weight:bold;
		background-repeat: no-repeat;
	}

	#next-text {	margin: 50px 0px 0px 40px; }

	a { color:black;}
	a:hover { color:white;}
	a:visited, a:link, a:active { text-decoration: none; }


#image {
	float:left;
	background-color: #FFFFFF;
	max-width: 750px;
	max-height: 500px;
	width: 750px;
	height: 500px;
	position: relative;
}

#image-home-page {
	float:left;
	background-color: #FFFFFF;
	max-width: 750px;
	max-height: 500px;
	width: 750px;
	height: 500px;
	position: relative;
	background-image: url(../../images/animated-american-flag.gif); 
	background-repeat: no-repeat; 
	background-size: cover;
}

#content {
	margin: 10px auto;
	padding:5px 0px;
	position: relative;
	width: 1200px;
	position: relative;
}



/* ----- Top Navigation ----- */
.nav { margin: 0; padding: 0; list-style: none; }
.nav:before { content: 'Navigation: '; }
.nav li { display: inline; margin: 0 .4em; }


/* ----- Slider ----- */

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

.sceneElement {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    transition-timing-function: ease-in;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.is-exiting .sceneElement {
    transition-timing-function: ease-out;
}

#main[data-transition=fade] .sceneElement {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

#main[data-transition=fade].is-exiting .sceneElement {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

#main[data-transition=moveleft] .sceneElement {
    -webkit-animation-name: moveInFromLeft;
    animation-name: moveInFromLeft;
}

#main[data-transition=moveleft].is-exiting .sceneElement {
    -webkit-animation-name: moveOutToRight;
    animation-name: moveOutToRight;
}

#main[data-transition=moveright] .sceneElement {
    -webkit-animation-name: moveInFromRight;
    animation-name: moveInFromRight;
}

#main[data-transition=moveright].is-exiting .sceneElement {
    -webkit-animation-name: moveOutToLeft;
    animation-name: moveOutToLeft;
}