@charset "utf-8";

.top-nav__foil{background-color: var(--thm-light-green);}

.top-nav__left{background-color:rgba(var(--thm-white-rgb),.8);}
.top-nav__left .item{padding:4px 10px; position: relative}
/*.top-nav__left .link.item{font-size:14px;}*/

.top-nav__left .item:not(:last-of-type){border-right:1px solid rgba(var(--thm-light-green-rgb),.8);}
/*.top-nav__left .link.item:hover{color:var(--thm-blue)}*/

.top-nav__left .item:first-of-type{cursor: pointer}

.top-nav__left .item:first-of-type:hover .shift-list{
	visibility: visible;
  opacity: 1;
}

.shift-list{
	position:absolute;
	top:34px;
	background-color: rgba(var(--thm-white-rgb),.95);
	z-index: 111;
	width: 300px;
	border:3px solid rgba(var(--thm-light-green-rgb),.4);
	border-radius: 2px;
	box-shadow: 4px 4px 12px 0 rgba(var(--thm-grey-rgb),.5);
	padding: 20px;
	visibility: collapse;
  opacity: 0;
	transition: all 0.25s ease-in-out;
}
.table__foil{ border: 2px solid rgba(var(--thm-grey-rgb),.15);}

.shift-list .table{
	display: table;
	table-layout: fixed;
	width: 100%;
}

.shift-list .table li{
	display: table-cell;
  padding: 5px 10px;
	border: 2px solid rgba(var(--thm-grey-rgb),.15);
  
}

.top-nav__right {background-image: linear-gradient(rgba(var(--thm-yellow-rgb),.7),rgba(var(--thm-yellow-rgb),1));}
.top-nav__right .item{padding:5px 10px;}
.top-nav__right .item:not(:first-of-type){border-left:1px solid rgba(var(--thm-white-rgb),.3);}
.top-nav__right .item:not(:last-of-type){border-right:1px solid rgba(var(--thm-grey-rgb),.4);}

/*------------ Top Navigation (account) ------------*/
.top-nav__right .account{
	position: relative;
	display:flex;
	flex-direction: column;
	padding:4px 15px;
}

.top-nav__right .account .sub::before{
	content:'\f502';
	font:var(--fa-font-solid);
	color: var(--thm-blue);
	margin-right:10px;
	font-size: 16px;
}

.top-nav__right .account:hover {}
.top-nav__right .account:hover ul{
	visibility:visible;
	opacity: 1
}

.top-nav__right .account ul{
	display: flex;
	flex-flow: column nowrap;
	row-gap:20px;
	background-color: rgba(var(--thm-white-rgb),.95);
	position: absolute;
	top:34px;
	right: 10px;
	z-index: 111;
	min-width: 200px;
	border-radius: 2px;
	box-shadow: 2px 2px 12px rgba(var(--thm-grey-rgb),.4);
	transition: .25s ease-in-out;
	font-weight: normal;
	visibility: hidden;
	opacity: 0;
}

.top-nav__right .account ul{padding:20px;}

.top-nav__right .account ul li a{display:block}
.top-nav__right .account > a{display:flex; align-items: center}
.top-nav__right .account > a > i{font-size:22px;}

.top-nav__right .account .account-nav li {transition: all .25s ease-in-out; padding: 0}
.top-nav__right .account .account-nav li a{color:var(--thm-color);transition: all .25s ease-in-out;padding: 8px 16px;}
.top-nav__right .account .account-nav li:hover{background-color:rgba(var(--thm-yellow-rgb),.15)}
.top-nav__right .account .account-nav li:hover a{color:var(--thm-blue)}
.top-nav__right .account .account-nav li:not(:last-of-type){border-bottom: 1px solid rgba(var(--thm-yellow-rgb),.3);}

/*------- Main Nav ---------*/

.main-nav__foil .logo img{height: 80px;}

.main-nav__foil input,
.main-nav__foil label{display:none}

.main-nav__foil input + label::after {
	content: "\f0c9";
	font:var(--fa-font-solid);
	vertical-align: middle;
	color: rgba(var(--thm-light-green-rgb),.9);
	font-size: 28px;
	line-height: 1em;
	width: 28px;
	text-align: center
}

.main-nav__foil input:checked + label::after {
  content: "\00d7";
	vertical-align: middle;
}

.main-nav a:not(:last-of-type){
	color:var(--thm-white);
	font-size: 20px;
	font-family: var(--thm-font-2);
	transition: all .25s ease-in-out;
	padding-left: 15px;
	padding-right: 15px;
}

.main-nav a:not(:last-of-type)::before{
	content:'|';
	color:transparent;
	position: relative;
	right: 0;
	transition: all .25s ease-in-out;
}

.main-nav a:not(:last-of-type)::after{
	content:'|';
	color:transparent;
	position: relative;
	left:0;
	transition: all .25s ease-in-out;
}

.main-nav a.current:not(:last-of-type),
.main-nav a:not(:last-of-type):hover{color: var(--thm-light-green);}

.main-nav a:not(:last-of-type):hover::before{
	right:15px;
	color: var(--thm-light-green);
}
.main-nav a:not(:last-of-type):hover::after{
	left:15px;
	color: var(--thm-light-green);
}

.main-nav a:last-of-type{
	padding: 10px 15px;
	background-color:var(--thm-light-green);
	color:rgba(var(--thm-black-rgb),.8);
	font-size: 18px;
	font-family: var(--thm-font-2);
	border:1px solid transparent;
	border-radius: 2px;
	transition: all .25s ease-in-out;
}
.main-nav a:last-of-type:hover{
	background-color:transparent;
	border-color:var(--thm-light-green);
	color:var(--thm-light-green);
}



/*------------------------ Intro Section ------------------------------*/
#intro .image img{height: 200px;}

/*------------------------ Home Gallery ------------------------------*/
.gallery__foil {
	background-color: rgba(var(--thm-white-rgb),.85); 
	border-top:3px solid var(--thm-light-green);
}

.gallery__foil.home {
	background-color: rgba(var(--thm-white-rgb),.85); 
	border-top:3px solid var(--thm-light-green);
}

.gallery-card{
	position: relative;
	flex: 1 0 300px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: rgba(var(--thm-light-green-rgb),.7);
	transition: all 500ms linear;
	transition-delay: 0.1s;
	z-index: 1;
}

.gallery-card .counter{
	position: relative;
	display:flex;
	align-items: center;
	justify-content: center;
	color:var(--thm-white);
	font-family: var(--thm-font-2);
	text-shadow:2px 2px var(--thm-black);
	font-size: 20px;
	height: 75px;
	z-index: 2;
}

.gallery-card .counter::before{
	content: "";
	position: absolute;
	top: 0;
	left: 10px;
	right: 10px;
	border-top: 75px solid rgba(var(--thm-green-rgb),.2);
	border-left: 75px solid transparent;
	border-right: 75px solid transparent;
	z-index: -1;
	transition-delay: .1s;
	transition-timing-function: ease-in-out;
	transition-duration: .3s;
	transition-property: all;
}

/*.gallery-card:hover .counter::before{border-top-color: var(--thm-blue);}*/

.gallery-card .content{
	flex: 1 1 auto;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.gallery-card .content .image img{
	width: auto;
	height: 340px;
}

.gallery-card .footer{
  position: relative;
  height: 75px;
	display:flex;
	align-items: center;
	justify-content: center;
/*	color:var(--thm-black);*/
	font-family: var(--thm-font-2);
	
	font-size: 20px;
	z-index: 2;
}

.gallery-card .footer::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    border-bottom: 75px solid rgba(var(--thm-green-rgb), .2);
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;
    z-index: -1;
    transition: all 200ms linear;
    transition-delay: 0.1s;
}
/*.gallery-card:hover .footer::before{border-bottom-color: var(--thm-blue);}*/

/*------------------------ Make Appointment ------------------------------*/
.appointment__foil{border-top:3px solid rgba(var(--thm-golden-rgb),.8)}

.appointment__foil input,
.appointment__foil select,
.appointment__foil textarea{color:rgba(var(--thm-white-rgb),.8);}
.appointment__foil select option{color:var(--thm-color)}

.appointment__foil button:disabled{
	color:rgba(var(--thm-white-rgb),.4);
	background-color: rgba(var(--thm-white-rgb), .3);
  border-color: rgba(var(--thm-white-rgb), .4);
}

.appointment__foil .title{color:var(--thm-white);}

.appointment__foil .step-02 .main{min-width: 640px}

.calender-slots__foil{
	display:flex;
	justify-content:space-between;
	column-gap: 20px;
}
.calender-slots{
	flex:1 1 auto;
	display:flex;
	flex-direction: column;
	row-gap : 20px;
	grid-row-gap: 20px;
}
.calender-slots .slot{
	flex:1 1 auto;
	padding: 8px 16px;
	color:var(--thm-color);
	border:1px solid rgba(var(--thm-white-rgb),.3);
	background-color: rgba(var(--thm-white-rgb),.95);	
	border-radius: 2px;
	transition:all .3s ease-in-out;
	cursor: pointer;
	text-align: center;
	align-content: center;
}
.calender-slots .slot.active,
.calender-slots .slot:hover{
	color: var(--thm-white);
	border-color: rgba(var(--thm-blue-rgb),.8);
	background-color: rgba(var(--thm-blue-rgb),.8);
}

.calender-slots .slot.disabled{background-color: rgba(var(--thm-white-rgb),.3);color:rgba(var(--thm-white-rgb),.4); pointer-events:none;}

/*------------------------ Home FAQ ------------------------------*/
.home-faq__foil{
	background: linear-gradient(to right,rgba(var(--thm-black-rgb),.5) 50%, rgba(var(--thm-black-rgb),.5) 50%), url("../images/bg/bg-05.png"); 
	background-size: cover;
	border-top:3px solid rgba(var(--thm-white-rgb),.9)
}

.hero{
	padding: 30px;
	border-radius:2px;
	background: rgba(var(--thm-white-rgb),.4);
	backdrop-filter:blur(25px) brightness(170%);
}
/*------------------------ Accordian ------------------------------*/
.accordion__foil{
	/*border:1px solid red;*/
	display: flex;
	flex-direction: column;
	row-gap:20px;
	grid-row-gap: 20px;
}

.accordion__foil.home .item{background-color:rgba(var(--thm-white-rgb),.5);backdrop-filter:blur(15px) brightness(170%);}

.accordion__foil .item .header{
	display:flex;
	justify-content: space-between;
	align-items: center;
	column-gap: 30px;
	padding: 20px;
	cursor: pointer;
	transition:all .25s ease-in-out;
	background-color:rgba(var(--thm-white-rgb),.3);
}
.accordion__foil.home .item .header{padding:10px}

.accordion__foil .item .header .title{font-size:18px;}
.accordion__foil .item .header .icon{color:var(--thm-blue);margin-right: 5px;}

.accordion__foil .item .header .icon::before{
	content:'\f053';
	font:var(--fa-font-solid);
	display: inline-block;
	transition: all .3s linear;
}

.accordion__foil .item .header.active{background-color:rgba(var(--thm-white-rgb),.8);}
.accordion__foil .item .header.active .icon::before{rotate:-90deg}

.accordion__foil .item .content{padding:20px;display: none;}
.accordion__foil .item .content.active{display:flex}

/*------------------------ Shop (Products) ------------------------------*/
.products__foil{background-color: rgba(var(--thm-golden-rgb),.9); border-top:3px solid rgba(var(--thm-black-rgb),.8)}

.product-carousel{
	/*border:1px solid blue;*/
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 40px 26px;
}

.product-carousel .card {
	/* Required only for block elements like <li>'s */
	position:relative;
	background:#E8E8E8;
	transition:.3s ease;
}

.product-carousel .card figure img{width: 100%;}

.product-carousel .card:hover{background:#FFA600;}
.product-carousel .card:hover figcaption{border-top:4px solid #E37F00}
.product-carousel .card:hover div.mask{background:rgba(0,0,0,.65);}

	
.product-carousel .card figure,
.product-carousel .card figcaption{position:relative; display:block; transition:all .3s ease-in-out;}
.product-carousel .card figcaption h4{font-weight: 700;}
.product-carousel .card figcaption label{margin-right: 10px;}
.product-carousel .card figcaption strike{color:#999999; margin-right:10px;}
.product-carousel .card div.mask{background:rgba(0,0,0,0);position:absolute; top:0;left:0; right:0;bottom:0; transition:all .3s ease-in-out}

.product-carousel .card div.mask a{
	width:30px; 
	height:30px;
	position: absolute;
	top: 50%;
	transition: all .3s ease-in-out; 
	border-radius:2px;
	font-size: 18px;
	visibility: hidden;
	color: transparent;
}

.product-carousel .card div.mask a:nth-child(1){left: 125px}
/*.product-carousel .card div.mask a:nth-child(2){left: 125px}
.product-carousel .card div.mask a:nth-child(3){right: 0}*/

.product-carousel .card div.mask a:nth-child(1)::before{
	content: '\f217'; 
	font: var(--fa-font-solid);
	padding-left: 5px;
	vertical-align: middle;
}

/*.product-carousel .card div.mask a:nth-child(2)::before{
	content: '\f002';
	font: var(--fa-font-solid);
	padding-left: 6px;
	vertical-align: middle;
}

.product-carousel .card div.mask a:nth-child(3)::before{
	content: '\f1e5';
	font: var(--fa-font-solid);
	padding-left: 6px;
	vertical-align: middle;
}*/

.product-carousel .card:hover div.mask a:nth-child(1),
.product-carousel .card:hover div.mask a:nth-child(2),
.product-carousel .card:hover div.mask a:nth-child(3){visibility:visible; background-color:#fff;color: #E39400;}

/*.product-carousel .card:hover div.mask a:nth-child(1){left:165px; }*/
.product-carousel .card:hover div.mask a:nth-child(3){right:165px;}

.product-carousel .card:hover div.mask a:hover{background-color:dodgerblue;color:#f9f9f9;}
	
.product-carousel .card figcaption{padding:10px; border-top:4px solid #C8C8C8; line-height:1.7em;}
.product-carousel .card div.arrow-right {
	position:absolute;
	right:-1px;
	bottom:-9px;
	width: 0; 
	height: 0; 
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 15px solid #fff;
	transform:rotate(45deg);
}


/*------------------------ General ------------------------------*/

.box-01{
	background-color: rgba(var(--thm-white-rgb),.9); 
	box-shadow: 0 0 12px 4px rgba(var(--thm-grey-rgb),.4); 
	border:1px solid rgba(var(--thm-grey-rgb),.5); 
	border-radius: 4px;
}

.box-02{background-color: rgba(var(--thm-black-rgb),.85); border-radius: 6px; color:rgba(var(--thm-white-rgb),.9)}

.border-01{border:1px solid rgba(var(--thm-golden-rgb),.3); border-radius: 4px;}

.bg-01{
	border-top:3px solid rgba(var(--thm-golden-rgb),1);
	background-image:url("../images/bg/bg-02.png"); 
	background-size: cover;
	background-color: rgba(var(--thm-white-rgb),1);
	background-position: 0 40%;

}

.social-icons{font-size:32px;}

.social-icons .item{
	padding : 10px;
	background-color: rgba(var(--thm-blue-rgb),.9);
	border:1px solid rgba(var(--thm-grey-rgb),.3);
	border-radius: 4px;
	transition: all .3s ease-in-out;
}
.social-icons .item a{transition: all .3s ease-in-out;color:rgba(var(--thm-white-rgb),.9)}

.social-icons .item:hover{background-color: rgba(var(--thm-white-rgb),.9);}
.social-icons .item:hover a{transition: all .3s ease-in-out;color:rgba(var(--thm-blue-rgb),.9)}