* {
    box-sizing: border-box;
    margin:0;
}

html, body {
	padding: 0;
	font: 16px/1.5em "Helvetica Neue", Helvetica, sans-serif;
	height: 100%;
}

body ul li {
	text-align: left;
}

#my_wrapper {
	/* min-height: 100%; */
	height: auto !important;
	/* height: 100%; */
	margin: 0 auto 1%; 
	max-width: 95%;	
	/* max-width: 460px; */
	overflow: auto;
}

.my_container {
	max-width: 95%;
	text-align: center;
	font-family: Helvetica, sans-serif;
}

/* Header */
.my_header {
	margin-top: 2.8em;
	padding-left: 3%;
	padding-right: 3%;
}

.my_header p {
	color: #36343f;
	pointer-events: none;
	text-align: left;
}

.my_header p a {
	text-decoration: none;
}

.my_header #logo {
	font-size: 1.2em;
	color: rgba(136,0,0,0.9);
	font-family: 'Palatino Linotype';
}

.my_header #logo:hover {
	text-decoration: none;
}

.my_ul {
	text-align: right;
}

.my_li{
	display: inline-block;
	border: 1px solid rgba(136,0,0,0.9);
	width: 6em;
	padding: 0.2em 0.9em;
	font-size: 0.8em;
	text-align: center;
	border-radius: 0.5em;
	color: rgba(136,0,0,0.9);
	text-decoration: none;
}

.my_li:hover {
	background-color: rgba(136,0,0,0.9);
	color: white;
}


@media (min-width: 768px) {
	#wrapper {
		max-width: 700px;
	}

	.my_container {
		max-width: 100%;
	}

	.my_header {		
		padding-left: 0;
		padding-right: 0;
	}

	.my_header p {
		font-size: 2.0em;
	}

}

@media (min-width: 1000px) {
	#my_wrapper {
		max-width: 950px; 
	}

	.my_container {
		max-width: 100%;
	}
}






.clearfix:after {
	content: "";
	display: table;
	clear: both;
	margin-bottom: 80px;
}


/* Section */
.section {
	margin-top: 6em;
}

.section ul {	
	text-align: center;
	margin-left: -1.8em;
}

.section a {
	text-decoration: none;
}

.icon {
	width: 3em;
	height: auto;
}


/* Footer */
.my_push {
   	height: 3em;   /* Height of the footer */
}

.my_footer {
	padding-top: 1.8em;
	padding-bottom: 1.5em;
	background-color: #36343f;
	color: #fff;
   	height: 5em;   /* Height of the footer */
}

.my_footer p {
	text-align: center;
	margin: auto;
}