<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
/*
Theme Name: Takács Vendégház Sopron | 2025
Theme URI: https://www.takacs-vendeghaz.hu/
Author: tigaman.hu
Author URI: https://example.com
Description: Sopron történelmi belvárosának közvetlen közelében található vendégház az egykori poncihter negyed egyik hangulatos utcájában található. A régi épület teljes felújításával, törekedve a környék hangulatának megőrzésére, alakítottuk ki az apartmanokat.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tkacs-vendeghaz
Tags: Sopron, történelmi belváros, vendégház, poncihter negyed, hangulatos utca, régi épület, felújítás, apartmanok, két ágyas apartman, fürdőszoba, wc, konyhasarok, emelet, külső falépcső, földszint, könnyen megközelíthető, városközpont, 14.00, 10.00, belvárosi séták, borozói látogatások, kirándulások, régió, nevezetességek, helységek, borászatok, Soproni hegység, Fertőpart, kerékpár utak, túrák, Fertő tó, Ausztria, vízi sportok, Bécs, Pozsony
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;family=Karla:ital,wght@0,200..800;1,200..800&amp;family=Oswald:wght@200..700&amp;display=swap');
@import url("font-awesome.min.css");
@import url("slider.css");
@import url("mobil-menu.css");
body {
	margin: 0;
	padding: 0;
	font-family: "Karla", sans-serif;
	font-size: 1vw;
	background-image: url(images/bg.png), url(images/bg.png);
	background-size: 25px auto, 50px auto;
	background-attachment: scroll, fixed;
}
.clear {
	clear: both;
}
h1,h2,h3,h4,h5,h6 {
	font-family: "Barlow", sans-serif;
	text-transform: uppercase;
	font-weight: 400;
}
.letter-spacing {
  letter-spacing: 0.35vw; /* Adjust this value as needed */
}
.khaki {
	background-color: #715D4C;
}
.khakilight {
	background-color: #F7F2EE;
}

.gray{
	background-color: #D3D3D3;
}

blockquote {
	position: relative;
	color: rgba(75,57,41,1); /* Barna árnyalat */
	font-size: 300%;
	font-weight: 300;
	text-align: center;
	padding: 50px 0;

	width: 100%;
	margin: 80px auto;
	border-top: 1px solid rgba(75,57,41,.5);
	border-bottom: 1px solid rgba(75,57,41,.5);


}

/* Dekoratív idézojel */
blockquote:after {
	position: absolute;
	content: "\f10e";
	color: rgba(75,57,41,.75);
	font-size: 300%;
	bottom: -70px;
	right: 2%;
	font-family: 'FontAwesome';
}

@media all and (min-width: 600px) {
    blockquote {
        font-size: 2rem;
        max-width: 70%;
    }
}
#menu {
	margin: 0;
	position: sticky;
	top: 0px;
	z-index: 3;
	box-shadow: 0 5px 5px -5px #333;
}


.menu {
	display: flex;
	justify-content: center; /* Center the entire menu */
	align-items: center;
	font-family: "Barlow", sans-serif;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 90%;
	position: sticky;
	top: 0px;
	z-index: 2;
	width: 100%;
	background-color: #F7F2EE;
	padding: .5em 0;
}

.menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center; /* Center the li items */
}

.menu li {
	position: relative;
	display: inline-block;

	margin: 0 1em;
}

.menu li a {
  display: block;
  padding: 10px 5px;
  color: #000;
  text-decoration: none;
}
.menu li a:hover {
	color: #CEAC92;
	transition: .4s ease-in-out;
}

		
/* submenu  */
.menu li:hover &gt; ul {
	display: flex;
	flex-direction: column;
	animation: slide-in 0.3s ease-in-out;
	z-index: 2;
}
.menu ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	background-color: #CEAC92;
}


.menu ul ul li {
	position: relative;
	margin: 0;
	list-style-type: none;
	border-bottom: 1px solid rgba(255, 255, 255, .9);	

}
.menu ul ul a {
  padding: 1em 2em;
  color: #fff;
  display: block;
  text-decoration: none;
  font-size: 90%;
  letter-spacing: .3em; 
  white-space: nowrap; 
  background-image: linear-gradient(to left, #CEAC92 50%, #666666 50%);  
  background-size: 200% 100%; 
  transition: background-position 0.5s ease;

}

.menu ul ul a:hover {
	background-position: -100% 0; /* Move the background position to the left */
	color: #FFFFFF;
}



.menu li &gt; a:after {
	content: '+';
	position: absolute;
	right: -5px;
	top: 45%;
	transform: translateY(-50%);
	font-size: 150%;
	opacity: 1;
	color: #CEAC92;
}
.menu li &gt; a:only-child:after { content: ''; }
@keyframes slide-in {
    0% {
        transform: translateX(-10px); /* Change translateY to translateX */
        opacity: 0;
    }
    50% {
        transform: translateX(0); /* Change translateY to translateX */
        opacity: 1;
    }
    70% {
        transform: translateX(-5px); /* Change translateY to translateX */
    }
    100% {
        transform: translateX(0); /* Change translateY to translateX */
    }
}

#header {

	width: 100%;				
}

.logo {
	position: fixed;
	top: 25%;
	left: 50%;
	transform: translate(-50%, -25%);
	width: 30%;
	transition: all 0.6s ease;	
	z-index: 10;	
}

.logo.scrolled {
	width: 0%;

	transition: all 0.6s ease;
}
.logo img {
	width: 100%;
	height: auto;

}
.header {
	position: relative;
	width: 100%;
	height: 50vh;
	overflow: hidden;
      filter: blur(5px); /* Blur hatás */
	  	transition: all 0.6s ease;
		
}
.header:hover {

      filter: blur(0px); /* Blur hatás */

	  	transition: all 0.6s ease;
}

.header-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  -webkit-animation-name: kenburns;
  animation-name: kenburns;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;
  animation-duration: 16s;
  opacity: 1;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.header-image:nth-child(1) {
  -webkit-animation-name: kenburns-1;
  animation-name: kenburns-1;
  z-index: 3;
}

.header-image:nth-child(2) {
  -webkit-animation-name: kenburns-2;
  animation-name: kenburns-2;
  z-index: 2;
}

.header-image:nth-child(3) {
  -webkit-animation-name: kenburns-3;
  animation-name: kenburns-3;
  z-index: 1;
}

.header-image:nth-child(4) {
  -webkit-animation-name: kenburns-4;
  animation-name: kenburns-4;
  z-index: 0;
}
 @-webkit-keyframes 
kenburns-1 {  0% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 1.5625% {
 opacity: 1;
}
 23.4375% {
 opacity: 1;
}
 26.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 98.4375% {
 opacity: 0;
 -webkit-transform: scale(1.21176);
 transform: scale(1.21176);
}
 100% {
 opacity: 1;
}
}
 @keyframes 
kenburns-1 {  0% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 1.5625% {
 opacity: 1;
}
 23.4375% {
 opacity: 1;
}
 26.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 98.4375% {
 opacity: 0;
 -webkit-transform: scale(1.21176);
 transform: scale(1.21176);
}
 100% {
 opacity: 1;
}
}
@-webkit-keyframes 
kenburns-2 {  23.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 26.5625% {
 opacity: 1;
}
 48.4375% {
 opacity: 1;
}
 51.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
}
@keyframes 
kenburns-2 {  23.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 26.5625% {
 opacity: 1;
}
 48.4375% {
 opacity: 1;
}
 51.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
}
@-webkit-keyframes 
kenburns-3 {  48.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 51.5625% {
 opacity: 1;
}
 73.4375% {
 opacity: 1;
}
 76.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
}
@keyframes 
kenburns-3 {  48.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 51.5625% {
 opacity: 1;
}
 73.4375% {
 opacity: 1;
}
 76.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
}
@-webkit-keyframes 
kenburns-4 {  73.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 76.5625% {
 opacity: 1;
}
 98.4375% {
 opacity: 1;
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
}
@keyframes 
kenburns-4 {  73.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 76.5625% {
 opacity: 1;
}
 98.4375% {
 opacity: 1;
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
}





.items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(33.333% - (2 * 1em / 3)), 1fr));
    gap: 1em;
    padding: 1em;
    box-sizing: border-box;
}

.item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding-bottom: 66.6667%; /* 2:3 aspect ratio (height is 2/3 of the width) */
    height: 0; /* Height is controlled by padding-bottom */
}

.item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without overflow */
    display: block;
    transition: transform 0.3s ease-in-out;
    transform-origin: center center;
}

.item:hover img {
    transform: scale(1.1); /* Slight zoom effect on hover */
}

.itemtitle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.7);
    padding: 1em 2em;
    font-size: 90%;
    text-transform: uppercase;
    text-align: center;
    font-weight: 500;
}


.button {
	display: inline-block;
	padding: 10px 20px;
	background: linear-gradient(to right, #666 50%, #CEAC92 50%);
	background-size: 200% 100%;
	background-position: right bottom;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	font-size: 120%;
	border: none;
	transition: background-position 0.5s, color 0.5s;
	font-family: "Barlow", sans-serif;
	text-transform: uppercase;
	font-weight: 500;
/*	position: absolute;
	right: 1em;
	bottom: 1em;*/
}

.button:hover {
	background-position: left bottom;
	/* [disabled]color: #CEAC92; */
}


#content {
	min-height: 50vh;
	width: 96%;
	margin: 0 auto 0 auto;
}

.fleft {
	width: 70%;
	float: left;
	margin: 0 0 0 0;
}



.content {
	margin: 1em auto;
	padding: 1em 2em 2em 2em;
	width: calc(80% - 4em - 4px);
	border: 2px solid rgba(0,0,0,.1);
	background-color: #F7F2EE;
	font-size: 120%;
}

.content a  {
	color: #4B3929;
	text-decoration: none;
}


.blog-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(33.333% - (2 * 1em / 3)), 1fr));
    gap: 1em;
    padding: 1em;
    box-sizing: border-box;	
	font-family: 'Barlow', sans-serif;
}

.blog-post {
	display: flex;
	flex-direction: column;
	background-color: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	overflow: hidden;
	transition: transform 0.3s ease-in-out;
	cursor: pointer;
}

.blog-post:hover {
	transform: translateY(-5px);
}

.blog-post-image-container {
    width: 100%;
    padding-top: 66.67%; /* 3:2 aspect ratio (width:height) */
    position: relative;
    overflow: hidden;
}

.blog-post-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
    transform-origin: center;
}

.blog-post:hover .blog-post-image-container img {
    transform: scale(1.2);
}

.blog-post-details {
    flex: 1;
    padding: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blog-post-date {
	color: #888;
	font-size: 120%;
	background-color: rgba(255,255,255,.75);
	position: absolute;
	left: 0px;
	top: 10%;
	padding: .5em;
}

.blog-post-category {
	color: #CEAC92;
	font-size: 120%;
	margin: 0 0 10px 0;
	font-weight: 500;
}

.blog-post-details h2 {
    color: #333;
    margin: 0 0 10px 0;
}

.blog-post-details p {
    color: #555;
    font-size: 1rem;
    margin: 0 0 15px 0;
    flex-grow: 1;
}







.sidebar {
	width: calc(30% - 1em);
	float: left;
	margin: 1em 0 0 1em;

}

.box {
	width: calc(100% - 4px);
	border: 2px solid rgba(0,0,0,.1);
	background-color: #F7F2EE;

	margin: 0 0 1em 0;	
}

.boxtitle {
	background-color: #3B3834;
	color: #DEDAD3;
	margin: 0 0 .5em 0;
	padding: .5em .5em .5em 1em;
}
.boxcontent {
	padding: 0 1em 1em 1em;
	width: calc(100% - 2em);
}

 .boxcontent form div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }

  .boxcontent input[type="text"],
  .boxcontent input[type="submit"] {
	height: 40px;
	margin: 5px;
	box-sizing: border-box;
	border: 0;
  }

.boxcontent input[type="text"] {
	width: 85%;
	padding: 0 0 0 10px;
	color: #000000;
	background-color: rgba(255,255,255,0.5);
	transition: 1.3s ease;	
box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25) inset;	

}
.boxcontent input[type="text"]:focus {
	background-color: rgba(255,255,255,0.1);
	outline: none;
	color: #FFFFFF;
	transition: 0.6s ease;	
	
}
#searchsubmit {
	width: calc(15% - 5px);
	font-size: 0;
	color: #FFFFFF;
	cursor: pointer;
	background-color: #3B3834;
	background-image: url(images/search.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 25px auto;
	transition: background-color .4s ease;	
}
#searchsubmit:hover {
	background-color: #FF0000;
	transition: background-color .4s ease;
}

.boxcontent ul {
	margin: 0 0 0 0%;
	padding: 0;
	list-style-type: none;
	text-transform: uppercase;	font-size: 120%;
}
.boxcontent ul li a {
	color: #FFFFFF;
	display: block;
	transition: background-position .3s;
	background-image: linear-gradient(to left, #CEAC92 50%, #3B3834 50%);
	background-size: 200% 200%;
	margin: 0;
	text-decoration: none;
	padding: 0.25em 1em 0.25em 1em;
	margin: 2px 0;

}

.boxcontent ul li a:hover {
	background-position: 100% 0
}


.boxcontent li a:hover {
	background-position: 100% 0
}







#footer {
	min-height: 100px;
	width: 100%;
	position: relative;
	background-color: #715D4C;
	font-family: "Barlow", sans-serif;	
	box-shadow: inset 0px 5px 25px 5px rgba(0,0,0,.5);

}





.footer {
	padding: 3em  0;
}

.footer .copyright {
	text-align: center;
	margin: 0em 0;
	font-size: 80%;
	color: rgba(255,255,255,1);
        }
		
.footer .copyright a {
	color: rgba(255,255,255,1);
	font-weight: 800;
	text-decoration: none;
        }





.scroll-to-top {
	display: none;
	position: fixed;
	bottom: 10px;
	right: 50%;
	transform: translateX(50%);
	cursor: pointer;
	width: 30px;
	border-radius: 25%;
	border: 1px solid rgba(255,255,255,1);
}
.scroll-to-top img {
	width: 100%;
	height: auto;	

}
.show {
    display: block;
    opacity: 1;
    transition: opacity .6s ease;
}

.hide {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Középre igazítás */
  align-items: flex-start; /* Igazítás fentről */
}

.gallery dl {
  flex-basis: calc(25.00% - 2%);
  margin: 1%;
  box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Egyesíti a képet és a feliratot egy oszlopba */
  align-items: center; /* Középre igazítja az elemeket */
}

.gallery-icon a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  border-bottom-color: rgba(255, 255, 255, 0);
}

.gallery-icon img {
  display: block;
  width: 90%;
  height: auto;
  transition: transform 0.3s ease-in-out;
  margin: 0 0 1em 0; /* Kép alatti margó */
}

.gallery-icon:hover img {
  transform: scale(1.1);
}

.gallery-caption {
	text-align: center;
	background-color: #F7F2EE;
	color: #25190D;
	padding: 3px 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	font-size: 80%;
	transition: background-color .4s ease-in-out;
	width: 90%; /* A felirat teljes szélességben megjelenik */
}

.gallery-item:hover .gallery-caption {
	background-color: #FFFFFF;
	float: left;
}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 80%;
    line-height: 17px;
    margin: 0;

    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}
.mobil{
	display: none;
}
.nomobil{
	display: inline;
}
/* mobil*/
@media screen and (max-width: 768px) {
.mobil{
	display: inline;
}
.nomobil{
	display: none;
}
body {
	font-size: 12px;

}
#header,#menu {
	display: none;
}

#content {
	min-height: 50vh;
	width: 96%;
}

.fleft {
	width: 100%;
}
.content {
	margin: 1em 0em 1em 0em;
	padding: 10px;
	width: calc(100% - 22px);


}

.items {
        grid-template-columns: 1fr; /* One item per row */
}

.blog-container {
        grid-template-columns: 1fr; /* One item per row */

}


.sidebar {
	width: calc(100% - 2em);
	float: left;
	margin: 0em 1em 0 1em;

}


.top-section {
                flex-direction: column;
}

.top-section div{

                width: 90%;
}
.icon-wrapper {
                grid-template-columns: repeat(2, 1fr);
}
.footer .container {
                flex-direction: column;
                text-align: center;
}


.gallery {
	margin: 3em 0 0 0;
}

.gallery dl {
  flex-basis: calc(33.00% - 2%);

}
}
</pre></body></html>