@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;	
	font-family: Arial;
}
@font-face {
    font-family: 'myfont';
    src: url('batik_worldwide_personal_use-webfont.woff2') format('woff2'),
         url('batik_worldwide_personal_use-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
header h2{
	font-family: myfont;
	color:#8792db;
	margin: 50px 50px 50px 25px;
	line-height: 20px;
}
header{
	width:100%;
	height: 130px;
    background-color:#2e3e59;
    text-align: left;
    color: white;
    display: flex;
}
#logo
{
	flex:1 1 20%;
}
nav
{
    padding-left:10px;
	padding-top: 30px;
	flex: 0 0 80%;
	position: relative;
 }
 nav a {
	line-height: 50px;
	height: 50px;
	font-size: 15px;
	display: inline-block;
	position: relative;
	z-index: 1;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	color: white;
	cursor: pointer;
}
nav .animation {
	position: absolute;
	height: 50px;
	margin-top: 30px;
	margin-left: 10px;;
	top: 0;
	z-index: 0;
	transition: all .2s ease 0s;
	border-radius: 7px;
}
a:nth-child(n) {
	width: 100px;
}
nav .start-home, a:nth-child(1):hover~.animation {
	width: 100px;
	left: 0;
	background-color: #8792db;
	cursor: pointer;
}
nav a:nth-child(2):hover~.animation {
	width: 110px;
	left: 100px;
	background-color: #57b3d5;
}
nav a:nth-child(3):hover~.animation {
	width: 100px;
	left: 210px;
	background-color: #8792db;
}
nav a:nth-child(4):hover~.animation {
	width: 95px;
	left: 310px;
	background-color: #57b3d5;
}
ul
{
    margin:0px;
    padding:0px;
    list-style-type: none;
    display: flex;
    justify-content: left;
}
li
{
    display:flex;
    margin: 25px;
}
main{
	width:100%;
	display: flex;	
	flex-direction: row;
	background-color: gray;
}
section{
	flex: 1 1 80%;
	background-color:#57b3d5;
	padding:20px;
}
section h1{
	margin-bottom:25px;	
	font-family: myfont;
	text-align: center;
	font-size: 50px;
	-webkit-animation: glow 2s ease-in-out infinite alternate;
	-moz-animation: glow 2s ease-in-out infinite alternate;
	-animation: glow 2s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
	from {
	 color: #2e3e59;
   text-shadow: 0 0 10px #5c6362, 0 0 20px #b2b9b9, 0 0 30px #bcc0c0, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 90px #00fff2;
 }
 to {
	color:gray;
   text-shadow: 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 80px #00fff2, 0 1 90px #00fff2;
 }
}
aside{
	flex: 0 0 300px;
	background-color:gray;
	color: black;
	padding-top: 25px;
	text-justify: auto;
}
footer{
	width:100%;
	background-color:#2e3e59;
	height:150px;
	padding-top: 20px;;
	min-height: 150px;
	color: white;	
}
article{
	float:left;	
	width:100%;
	display:block;
}
section article:hover{
	background-color:lightgray;
}
article div.articleDtg{
	width:75px;
	height:100px;
	border: 2px solid 2e3e59;
	border-radius:20px;	
	overflow:hidden;
	font-family:arial;
	float:left;
	margin: 0 25px 40px 0;
}
article div.articleDtg div.articleMonth{
	height:38px;
	background-color:#2e3e59;
	/*background: linear-gradient(0deg, rgba(255,103,94,1) 0%, rgba(163,1,1,0.7315301120448179) 100%);*/
	color:white;
	text-align:center;
	font-size:18px;
	text-transform: uppercase;
	
	
	padding-top:10px;	
}
article div.articleDtg div.articleDay{
	height:80px;
	background-color:gray;
	color:black;
	text-align:center;	
	font-size:30px;
	margin-top:-5px;
	padding: 8px;
}
article h2{
	margin-left:20px;
	font-size:24px;	 
	display:block;
	font-family:arial;
}
article address{
	margin:7px 0 0 20px;
	font-size:12px;	 
	display:block;
	font-family:arial;
}
article p{
	margin:15px 0 0 20px;
	font-size:16px;	 
	display:block;
	font-family:arial;
}