/*IMPORTANT

Apply the CSS wrapper from materialize
*/

div {
	display: block;
}

.pokemon-img {
	width:25%;
	float: left;
	display: inline;
	align-content: center;
	overflow: hidden;
}


.pokemon-img > img {
	width:100%;
	height:auto;
	overflow: hidden;
}

.pokemon-content {
	width:70%;
	float: right;
	display: inline;
}

.pokemon-container {
	display: block;
	width:100%;
}

.myaccordion {
/*	padding-left:15%;
	padding-right:15%;*/
	padding-top:5px;
}

.mypanel {
	display: block;
	border-width: 1.5px;
	border-radius: 10px;
	border-style: solid;
	border-color: #0288d1 ;
	margin: 20px 0px 20px 0px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.mypanel:hover {
	display: block;
	box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.16), 0 13px 30px 0 rgba(0, 0, 0, 0.15);
}

.mypanel > .mypanel-title:hover {
	font-size:30px;
	background-color: #0277bd ;
	padding:10px 5px 10px 5px;
	border-color: blue;
	cursor: pointer;
	border-radius: 6px 6px 0px 0px;
}

.mypanel > .mypanel-title {
	font-size:30px;
	background-color: #0288d1;
	padding:10px 5px 10px 5px;
	border-color: blue;
	border-radius: 6px 6px 0px 0px;
	cursor: pointer;
}

.mypanel > .mypanel-body {
	overflow: hidden;
	opacity: 0;
	max-height: 0px;
	font-size:20px;
	padding:0px 5px 10px 5px;
	border-radius: 0px 0px 6px 6px;
	/*background-color: #f2f2f2;*/
	transition: 0.4s;
}

.mypanel > .mypanel-body.show {
	opacity: 1;
	height: auto;
	max-height: 1000px;
	font-size:20px;
	padding:10px 5px 10px 5px;
	border-radius: 0px 0px 6px 6px;
	/*background-color: #f2f2f2;*/
	transition: 0.7s;
}
/*
body {
	font-family: "Comic Sans MS",cursive,Sans-serif;
}
*/