/*
Theme Name: Tryffelsvinet 2026
Theme URI: http://www.pixelbruket.se/webbyra-i-ystad/responsiv-webbdesign/
Author: Pixelbruket
Author URI: http://www.pixelbruket.se/
Description: Ett skräddarsytt tema från Pixelbruket
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column
Text Domain: pxlbrk

*/


@media screen and (max-width: 640px) {
	.menysektion_special{flex: 1 1 100% !important;}

}

@media screen and (max-width: 800px) {
	body{font-size: 14px !important;}
	.col-4{width: 100% !important;}
	.col-6, .grid-6{width: 100% !important;}
	.col-8{width: 100% !important;}
}

@media screen and (max-width: 960px) {
	body{padding: 0 !important; }
	header{width: 100vw !important; height: auto !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important;}
	.logo{width: 7em !important; border-radius: 3.5em; box-shadow: var(--shadow); }
	ul.menu{padding: 0 calc(50% - 180px) !important;}
	ul.menu > li{flex: 1 1 100% !important;}
	ul.menu > li.socialicon{flex: 0 0 auto !important;}
	nav{width: 100vw !important; top:100vh !important; bottom: auto !important; background-color: var(--lighter) !important; align-content: flex-start !important;}
	nav.active{top: 12em !important; box-shadow: var(--shadow);}
	.nav-btn{display: flex !important;}

	.grid-6{flex: 1 1 100% !important;}
	.layout_img_bg{min-height: 100vw !important;}
	.layout_text, .grid_content{padding: 4rem 2rem !important; text-align: center !important; justify-content: center !important;}
	h1,h2,h3,h4{justify-content: center !important;}

	.meny{padding: 2rem !important;}

}

html{
	font-size: 16px;
}
*, *::before, *::after{box-sizing: border-box;}

body{
	width:100vw; 
	padding: 0 0 0 540px; 
	margin: 0 !important;
	color: var(--dark);
	font-family: var(--main-font); 
	font-weight: 400; 
	font-size: 1rem;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}


a{color: inherit; text-decoration: none;}
a img { border: none; }
p{font-size: var(--p-size); line-height: 1.5em; margin:0 0 1em 0; display: block; width: 100%;}
p a{text-decoration: underline;}
h1,h2,h3,h4{font-family: var(--heading-font); font-weight: 700; display: block; width: 100%;  margin: 0 0 0.5em 0; padding: 0; line-height: 1.25em; letter-spacing: 0.015em;}
h1{font-size:2.5rem;}
h2{font-size:2.2rem;}
h3{font-size:1.6rem;}
h4{font-size:1.3em;}
p a:hover{color: inherit; text-decoration: underline;}









.nopadding{padding: 0 !important;}
.nomargin{margin: 0 !important;}
.doublepadding{padding: 2rem;}
.center{text-align: center !important;}
.bold{font-weight: 700;}
.caps{text-transform: uppercase;}





.white_bg{background-color: #fff;}
.creambg{background-color: #F4DAC8;}

.black_text{color: #000;}
.white_text{color: #fff;}


.ease{-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease;  transition: all 0.5s ease;}






/*********** Main elements ***********/

header{
	display: flex;
	width: 548px;
	height: 100vh;
	position: fixed;
	padding: 1rem;
	top:0;
	left: 0;
	z-index: 10;
	background-color: var(--lighter);
	background-image: url('images/texture-01.svg');
	justify-content: center;
	align-items: center;
	mask-image: url('images/edge.svg');
	mask-size: 100% auto;
	mask-repeat: repeat-y;
	mask-position: right center;
	box-shadow: var(--shadow);
}

nav{
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	justify-content: center;
	width: 548px;
	height: 100vh;
	padding: 1rem;
	position: fixed;
	top:0;
	bottom:0;
	left: 0;
	z-index: 15;
	transition: all 0.5s ease-in-out;
}
header.texture{
	background-color: var(--lighter);
}
main{
	display: flex;
	flex: 1 1 100%;
	flex-direction:column;
	overflow: hidden;
}

.logo{
	display: block;
	width: 75%;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
}
.logo::after{
	display: block;
	content: '';
	padding-bottom: 130%;

}

.wrapper{
	display: flex;
	flex: 0 0 100%;
	flex-direction: row;
	flex-wrap: wrap;
	position: relative;
	padding: 0 var(--screen-padding);
	z-index: 1;
}



.parallax-window {
    width: 100%;
    float: left;
    position: relative;
    overflow: hidden;
}


.fullimage,
.fullimage img{
	width: 100%;
	height: auto;
	display: block;
}


/*********** NAV ***********/




ul.menu{
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-family: var(--main-font);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex: 1 1 100%;
	justify-content: center;
	align-items: center;
	padding: 0;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1em;
}
ul.menu > li{
	margin:0;
	padding: 0.5rem 1rem;
	position: relative;
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	align-items: center;
}
ul.menu > li > a{
	padding: 0;
	display: block;
	color: var(--dark);
}
ul.menu li:hover > a{
	text-decoration: none;
}	

ul.nav-top{
	font-weight: 700;
}

ul.nav-bot{
}
	
.menu-icon-before::before{
	font-family: var(--fa);
	display: inline-block;
	margin-right: 0.5em;
}
	
	

.icon-location::before{content: '\f3c5';}
.icon-extern::before{content: '\f08e';}
.icon-boka::before{content: '\f2e6';}
.icon-hotell::before{content: '\f236';}

.nav-btn{
	display: none;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	font-weight: 700;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	box-shadow: var(--shadow);
	background-color: var(--lighter);
	position: absolute;
	top: 1rem;
	right: 1rem;
	background-size: 100% auto;
	background-position: center center;
	background-repeat: no-repeat;
}
.nav-btn-bars{
	width: 2rem;
	height: 2rem;
	transition: all 0.25s ease-out;
	position: relative;
}

.nav-btn-bars span{
	width: 2rem;
	height: 0.45rem;
	display: block;
	background-color: var(--dark);
	transition: all 0.25s ease-out;
	position: absolute;
	left: 50%; 
	transform: translateX(-50%);
}

.nav-btn-top{
	mask: url(images/nav-gaffel.svg); 
	top:0; 
}
.nav-btn-mid{
	mask: url(images/nav-sked.svg); 
	top:50%; 
	transform: translate(-50%,-50%) !important;
}
.nav-btn-bot{
	mask: url(images/nav-kniv.svg); 
	bottom:0; 
}

.nav-btn.clicked .nav-btn-top{
	left: 50%;
	top: 50%; 
	transform: translate(-50%,-50%) rotate(315deg);
}
.nav-btn.clicked .nav-btn-mid{
	width: 0;
	height: 0;
}

.nav-btn.clicked .nav-btn-bot{
	left: 50%;
	top: 50%; 
	transform: translate(-50%,-50%) rotate(-135deg);
}





/******* BILDER *******/


table.viner{
	width: 100%;
	float: left;
	border-collapse: collapse;
	margin-bottom: 0.5em;
	border-spacing: 0 !important;
}
table.viner td{
	font-size: 0.9em;
}

td.viner_namn{
	font-weight: 700;
	padding: 0.5em 0 0 0;
}
td.viner_druva{
	width: auto;
	white-space: nowrap;
	padding: 0 0 0.2em 0;
}
td.viner_pris{
	width: 52px;
	text-align:right;
	padding-bottom: 0.2em;
}

h2.viner_rubrik,
h3.viner_rubrik,
h4.viner_rubrik{
	margin: 0.5em 0 0 0 !important;
	padding: 0 !important;
	text-transform: uppercase;
	display: block;
	width: 100%;
	float: left;
}

/******* BILDER *******/


.slider{
	position: relative;
	width: 100%;
	float: left;
	padding:0;
	margin: 0;
	box-sizing: border-box;
    z-index: 0;
	}
.slider:after{
	width: 100vw;
	height: 100vh; 
	position: fixed !important;
	top:0;
	left:0;
    background-color: rgba(0, 0, 0, 0.7);
    display: block;
    content: '';
    z-index: 1;
}

.slide{
	width:100vw !important;
	height: 100vh !important;
	box-sizing: border-box;
	position: relative;
	display: block;
	background-size: auto 100vw;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.hero{
	width: 100%;
	float: left;
	position: relative;
	display: block;
	color: #fff;
	background-color: #333;
	overflow: hidden;
}
.hero:after{
	content: '';
	padding-bottom: 50%;
	display: block;
}

.toppbild{
	width: 100%;
	height: auto;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%; 
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	z-index: 1;
	opacity: 0.8;
}

.overlay{
	position: absolute;
	top:0;
	right:0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1;

	
}









/************ MEDDELANDE  ************/



.meddelande{
	width: 100%;
	float: left;
	display: block;
	padding: 15px 15px 15px 50px;
	margin:0;
	position:relative;
	font-size: 0.9em;
}
.meddelande::before{
	font-family: var(--fa);
	display:block;
	position: absolute;
	left:10px;
	top: 50%; 
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 20px;
	content: '\f05a';
	font-weight: 900;
}


.meddelande_text{
	width: 100%;
	display: block;
	font-size:0.9em;
	padding: 0;
	margin: 0;
	text-align: center;
}








/******* AKTIVITETER *******/



.card_aktivitet{
	width: 100%;
	float: left;
	display: block;
	position: relative;
}
.card_aktivitet_content{
	width: 100%;
	float: left;
	padding: 1rem;
	
}
.card_aktivitet_content h2{
	font-size: 1.25rem;
}





/***** JOBS *****/


ul.jobs_list{
	width: 100%;
	float: left;
	padding: 0;
	margin: 0;
	list-style-type: none;
	
}
ul.jobs_list li{
	width: 100%;
	float: left;
	padding: 5px 0;
	margin: 0;
	
}
.jobs_wrapper{
	width: 100%;
	display: block;
	position: relative;
	padding: 15px 60px 15px 0;
	font-size: 1.2em;
	background-color: #fff;
}
.jobs_wrapper:after{
	font-family: var(--fa);
	display:block;
	content:'\f061';
	position: absolute;
	right: 15px;
	top:50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);

	
}

.jobs_title{
	margin: 0;
	padding: 0;
	font-size: 1.2em;
	
}

.jobs_link{
	text-transform:uppercase; 
	font-weight: 700;
	letter-spacing: 0.05em;
	font-size: 10px;
}





/*********** ACCORDION ***********/

.accordion{
	width: 100%;
	float: left;
	border-top:2px solid #000;
	border-bottom:2px solid #000;
}

accordionwrapper{
	width: 100%;
	float: left;
	margin:0 0 1rem 0;
	background-color: transparent;
}


.accordionheading{
	background-color: transparent;
	line-height: 1.5em;
	padding: 1rem 0;
	margin: 0 !important;
	border-radius: 0 !important;
	text-transform: none;
	width: 100%;
	float:left;
	display: block;
	position: relative;
	outline: none;
}

.accordionheading h3{
	font-family: var(--main-font);
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0;
	padding: 0 0 0 2rem;	
}
.accordionheading h3::before{
	font-family: var(--fa);
	content: '\f05a';
	position: absolute;
	left:0;
	top: 50%; 
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);

}


.accordionheading:after{
	font-family: var(--fa);
	content: '\2b';
	position: absolute;
	font-weight: 900;
	font-size: 1rem;
	display: block;
	text-align: left;
	right:0;
	top: 50%; 
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);

}
.accordionheading.ui-state-active:after{
	content: '\f068';
}


.accordioncontent{
	width: 100%;
	background-color: transparent;
	padding: 1rem 0;
	float: left;
	display: block;
	position: relative;
	font-size: 1em;
	line-height: 1.5em;
}





/******* ICONS ******/

.icon, .socialicon{position: relative; font-size: 1em; padding: 0; font-weight: 400; }

.icon::before {
	font-family: var(--fa);
	display:inline-block;
	font-weight: 400;
	margin: 0 0.5em 0 0;
}
.socialicon::before {
	font-family: var(--fab);
	display:inline-block;
}

.telefon::before{content: '\f095';}
.mobil::before{content: '\f10b';}
.epost::before{content: '\f0e0' ;}
.adress::before{content: '\f041';}
.bestick::before{content: '\f2e7';}
.facebook::before{content: '\f39e';}
.google::before{content: '\f0d5';}
.instagram::before{content: '\f16d';}
.linkedin::before{content: '\f0e1';}
.github::before{content: '\f09b';}
.pinterest::before{content: '\f0d2';}
.twitter::before{content: '\f099';}
.youtube::before{content: '\f167';}
.spotify::before{content: '\f1bc';}
.cloud::before{content: '\f381';}
.mailchimp::before{content: '\f59e';}

.apple::before{content: '\f179';}
.googleplay::before{content: '\f3ab';}





/******* FOOTER ******/

footer{
	flex: 1 1 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: relative;
	padding: 2rem var(--screen-padding);
	background-color: var(--dark);
	color: var(--lighter);
}



footer .icon,
footer .socialicon{
	display: inline-block !important;
	font-size: var(--p-size)!important;
	padding: 0.25rem 1rem !important;
	white-space: nowrap;
}

footer .icon::before,
footer .socialicon::before{
	margin: 0 0.25em 0 0 !important;
}

/* footer::before{
	width: 10rem;
	height: 13rem;
	content: '';
	background-image: var(--logo-sticker);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center top;
	position: absolute;
	top: -6.5rem;
	left: 50%; 
	transform: translateX(-50%);
	box-shadow: var(--shadow);
	z-index: 5;
	border-radius: 6.5rem;
} */

.footer-logo{
	width: 8rem;
	height: 11rem;
	background-image: var(--logo-neg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center top;
	z-index: 5;
	margin: 0 0 2rem 0;
}

.credit{
	text-align: center;
	font-size: 10px;
	line-height: 1.3em;
	opacity: 1;
	position: relative;
}

.credit span{
	padding: 2rem 0 0 0;
}


.credit a{text-decoration: underline;}






/******* GOOGLE MAPS ********/

.acf-map {
    border: none;
    margin:  0;
    position: relative;
    width: 100%;
    height: 300px;
    float:left;

}




/******* 404 ********/

.error_wrapper{
	width: 100%; 
	float:left;
	position: relative;  
	overflow: hidden;
	background-image:url('images/404.jpg');
	background-position: center center;
	background-repeat:no-repeat;
	background-size: auto 100%;
}
.error_wrapper{
  content: "";
  display: block;
  padding-bottom: 66.666666%;
  border-radius: 0;
  overflow: hidden;
}

.error_content{
	width:100%;
	max-width:800px;
	color:#000 !important;
	text-align:center;
	position: absolute;
	height: auto;
	right: 50%; 
	top: 50%;
	-webkit-transform: translate(50%,-50%);
	-moz-transform: translate(50%,-50%);
	-ms-transform: translate(50%,-50%);
	-o-transform: translate(50%,-50%);
	transform: translate(50%,-50%);
	z-index: 100;
	}

.error_content h1{
	font-weight:700;
	text-align:center;
	}
.error_content p{
	font-weight:400;
	text-align:center;
	}






/* fixes potential theme css conflict */
.full-map img {
   max-width: inherit !important;
}




/* =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: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}