[data-accordion-element-content] {height: auto; overflow: hidden; transition: height 0.5s;}

* {box-sizing: border-box;}

body {background: radial-gradient(#000 16%, transparent 17%),radial-gradient(#444 16%, transparent 17%) 0px 1px,radial-gradient(#000 16%, transparent 17%) 8px 8px,radial-gradient(#444 16%, transparent 17%) 8px 9px;
	background-color: #422727; background-size: 16px 16px; overflow: scroll;}

a {text-decoration: none;}

.logo {width: 100%; font-size: 2em; text-align: center; margin-top: 20px;}
.logo img {height: 120px;}

.focim {color: yellow; width: 100%; font-size: 1.9em; text-align: center; margin-top: 10px;}

.card {width: 50%; margin: 30px auto; border-radius: 2px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);}
@media (max-width: 767px) {
	.card {width: 98%;}
}

article {position: relative; font-family: "Roboto", sans-serif; transition: all 0.3s; margin: 10px;}
article.selected {transform: scale(1.1); box-shadow: 0 0 5px rgba(2, 2, 2, 0.4); z-index: 2;}

h1 {position: relative; background: #3F51B5; padding: 20px 60px 20px 20px; font-size: 1.4em; line-height: 1.6em; color: #fff; overflow: hidden; transition: background 0.3s; border-radius: 20px;}
h1:hover, .selected h1 {cursor: pointer;}
h1:before, h1:after {content: ""; position: absolute; right: 0; top: 50%; margin-top: -1px; margin-right: 30px; width: 20px; height: 2px; background: #fff; transition: transform 0.3s;}
h1:before {transform: rotate(0deg); -webkit-animation: close-line-one-in 0.8s forwards; animation: close-line-one-in 0.8s forwards;}
.selected h1:before {-webkit-animation: close-line-one-out 0.8s forwards; animation: close-line-one-out 0.8s forwards;}
h1:after {transform: rotate(90deg); -webkit-animation: close-line-two-in 0.8s forwards; animation: close-line-two-in 0.8s forwards;}
.selected h1:after {-webkit-animation: close-line-two-out 0.8s forwards; animation: close-line-two-out 0.8s forwards;}
@media (max-width: 767px) {
	h1 {font-size: 1.1em; line-height: 1.4em;}
}

.content {opacity: 0; transform: translateY(20px); transition: all ease-out 0.4s 0.1s;}
.selected .content {transform: translateY(0); opacity: 1;}
.collapsed .content {display: none;}

p {padding: 25px 30px 40px; background: #E8EAF6; font-size: 16px; line-height: 24px; color: #000; width: 96%; margin: 0 auto; border-radius: 10px; text-align: justify;}
p::first-letter {font-size: 150%;}

h1.mento {background: red; color: white; border: 5px solid white;}
h1.mento:hover {background: blue;}
h1.mento:before, h1.mento:after {background: white;}

.tuzolto {background: white; color: red; border: 5px solid red;}
.tuzolto:hover {background: blue; color: white; border: 5px solid white;}
.tuzolto:before, .tuzolto:after {background: red;}

.rendor {background: white; color: blue; border: 5px solid blue;}
.rendor:hover {background: red; color: white; border: 5px solid white;}
.rendor:before, .rendor:after {background: blue;}

.segelyhivo {background: blue; color: white; border: 5px solid white;}
.segelyhivo:hover {background: red; color: white; border: 5px solid white;}

.patika {background: white; color: green; border: 5px solid green;}
.patika:hover {background: red; color: white; border: 5px solid white;}
.patika:before, .patika:after {background: green;}

.visszagomb {padding:10px; font-size: 1.4em; border: 5px solid red; border-radius: 10px; margin-bottom: 50px;}

@-webkit-keyframes close-line-one-out {
	0%, 50% {transform: translateX(0);}
	75% {transform: translateX(50px);}
	76% {transform: translateX(50px) translateY(50px);}
	100% {transform: rotate(45deg);}
}
@keyframes close-line-one-out {
	0%, 50% {transform: translateX(0);}
	75% {transform: translateX(50px);}
	76% {transform: translateX(50px) translateY(50px);}
	100% {transform: rotate(45deg);}
}

@-webkit-keyframes close-line-one-in {
	0%, 20% {transform: rotate(45deg);}
	60% {transform: translateX(50px) translateY(50px) rotate(45deg);}
	61% {transform: translateX(50px);}
	100% {transform: rotate(0deg);}
}
@keyframes close-line-one-in {
	0%, 20% {transform: rotate(45deg);}
	60% {transform: translateX(50px) translateY(50px) rotate(45deg);}
	61% {transform: translateX(50px);}
	100% {transform: rotate(0deg);}
}

@-webkit-keyframes close-line-two-out {
	0%, 50% {transform: rotate(90deg);}
	75% {transform: translateY(-50px) rotate(90deg);}
	76% {transform: translateY(-50px) translateX(50px) rotate(90deg);}
	100% {transform: rotate(135deg);}
}
@keyframes close-line-two-out {
	0%, 50% {transform: rotate(90deg);}
	75% {transform: translateY(-50px) rotate(90deg);}
	76% {transform: translateY(-50px) translateX(50px) rotate(90deg);}
	100% {transform: rotate(135deg);}
}
@-webkit-keyframes close-line-two-in {
	0% {transform: rotate(135deg);}
	50% {transform: translateY(-50px) translateX(50px) rotate(135deg);}
	51% {transform: translateY(-50px) rotate(90deg);}
	100% {transform: rotate(90deg);}
}

@keyframes close-line-two-in {
	0% {transform: rotate(135deg);}
	50% {transform: translateY(-50px) translateX(50px) rotate(135deg);}
	51% {transform: translateY(-50px) rotate(90deg);}
	100% {transform: rotate(90deg);}
}