@charset "utf-8";

/* CSS Document */

#twdcmfruwindow {
	display: none;
	background-color: #FFFFFF;
	width: calc(100% - 100px);
	height: auto;
	place-items: center;
        box-sizing: content-box;
	position: absolute;
	top: 5px;
	animation: fancyAnimation 2s ease-in-out; /* Két lépés, 2 másodperc alatt */
	transition: top 1s ease-in-out; /* Add egy átmenetet a top tulajdonságért */
	padding: 50px;
	box-shadow: 0 -5px 5px -5px #333,
	0 5px 5px -5px #333;
	z-index: 999999;
}


@keyframes fancyAnimation {
    0% {
        top: -100%;
    }

    100% {
         top: 5px;     	
}
}

.twdcmfrumessage {
	display: block;
	padding: 0 0 0px 0;color: #666;
}

.twdcmfrumessage a {
	text-decoration: none; /* Remove the default underline */
	position: relative; /* Add position relative to contain the pseudo-element */
	color: #000;
	font-weight: bold;
}

.twdcmfrumessage a::after {
	content: ''; /* Add a pseudo-element */
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0; /* Start with 0 width */
	height: 2px; /* Adjust the height as needed */
	background-color: #666; /* Change the color to your desired color */
	transition: width 0.3s ease; /* Add a smooth transition for width */
}

.twdcmfrumessage a:hover::after {
    width: 100%; /* Increase the width to 100% on hover */
}


#twdcmfrucloseButton {
position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
	width: 50px;
	height: 50px;
	background-size: cover;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 24 24' fill='%23888888' %3E%3Cpath d='M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM15.36 14.3C15.65 14.59 15.65 15.07 15.36 15.36C15.21 15.51 15.02 15.58 14.83 15.58C14.64 15.58 14.45 15.51 14.3 15.36L12 13.06L9.7 15.36C9.55 15.51 9.36 15.58 9.17 15.58C8.98 15.58 8.79 15.51 8.64 15.36C8.35 15.07 8.35 14.59 8.64 14.3L10.94 12L8.64 9.7C8.35 9.41 8.35 8.93 8.64 8.64C8.93 8.35 9.41 8.35 9.7 8.64L12 10.94L14.3 8.64C14.59 8.35 15.07 8.35 15.36 8.64C15.65 8.93 15.65 9.41 15.36 9.7L13.06 12L15.36 14.3Z'/%3E%3C/svg%3E");
}

#twdcmfrucloseButton:hover {

  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 24 24' fill='%23FF0000'%3E%3Cpath d='M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM15.36 14.3C15.65 14.59 15.65 15.07 15.36 15.36C15.21 15.51 15.02 15.58 14.83 15.58C14.64 15.58 14.45 15.51 14.3 15.36L12 13.06L9.7 15.36C9.55 15.51 9.36 15.58 9.17 15.58C8.98 15.58 8.79 15.51 8.64 15.36C8.35 15.07 8.35 14.59 8.64 14.3L10.94 12L8.64 9.7C8.35 9.41 8.35 8.93 8.64 8.64C8.93 8.35 9.41 8.35 9.7 8.64L12 10.94L14.3 8.64C14.59 8.35 15.07 8.35 15.36 8.64C15.65 8.93 15.65 9.41 15.36 9.7L13.06 12L15.36 14.3Z'/%3E%3C/svg%3E");
}

#twdcmfruwindow.hidden {
    top: -100%; /* Visszaállítás a kezdeti pozícióba a felső részről */
}
.twdcmfrubutton-container {
	display: flex;
	justify-content: center;
	margin: 10px 0;    

}

 a.twdcmfrubutton {
	background-color: #FFFFFF;
	padding: 7px  10px;
	text-transform: uppercase;
	color: #000000;
	font-weight: 300;
	transition: background-position .3s;
	background-image: linear-gradient(to left, black 50%, transparent 50%);
	background-size: 200% 200%;
	margin: 5px 5px;
	text-decoration: none;
	border: 1px solid black;
	text-align: center;
}

 a.twdcmfrubutton:hover {
    background-position: 100% 0;
	color: rgba(255,255,255,1);
}

@media screen and (max-width: 980px) {
.twdcmfrubutton-container {
	flex-direction: column; 
}
}