[mn="1000"]{ --ttlClru_default: var(--secttlclr); &.btn_full{ .taste .btn{ width: 100%; border-radius: 50px; } } ._ittl{ .h4{ color: var(--ttlClru_default); } } ._subttl { text-align: var(--ttlalign); } .txtbx~.txtbx { margin-top: 30px; } ._content { margin: 0; } ._imgobj { text-align: center; margin: 15px 0; } .taste { margin: 15px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: var(--secalign); } .ttlbx { margin: 0 0 45px; border-left: 9px solid var(--clr01); padding-left: 21px; text-align: left; font-family: var(--ft-t1); .h4 { text-align: inherit; } } } [mn="8901"]{ display: none !important; }[mn="8005"] { --secpt: 6px; --secpb: 6px; --secbgclr: var(--clr01x, #fff); line-height: 1; z-index: 5; /* border-bottom: 3px solid var(--clr01); */ .mediabx:not(.mediabx-coloricon) { --a-pd: 6px; --iconclr: var(--clr01x, #000); --iconhovclr: var(--clr01x, #fff); --bgclr: var(--clr01x, transparent); --bghovclr: var(--clr02, #fff); --mediaborder: 2px solid var(--iconclr); --mediahovborder: 2px solid var(--clr02, #fff); --square: 35px; &>*{ gap: 6px } } .mediabx a { margin: 0px; border-radius: 50%; } .logo { margin: 0 0 } .logo img { max-height: 45px } .logo ._imgobj img { max-height: 21px } } [mn="8005"], .dekstickbx{ .container{ max-width: 1200px; } } /* ======================= */ nav { line-height: 1; text-transform: uppercase; font-weight: bold; a.btn{ --btnbgclr: var(--clr01, #000) !important; --btnbgclrhov: var(--clr02) !important; --btnborderclr: var(--btnbgclr) !important; --btnborderclrhov: var(--btnbgclrhov) !important; transition: .6s all ease; color: #fff !important; justify-content: flex-start !important; padding-left: 21px !important; color: #fff; &:hover{ color: #fff!important; } &::after{ /* display: none; */ } } } nav :is(ul, li){ list-style: none; list-style-type: none; margin: 0; padding: 0; display: inline-flex; /* justify-content: center; */ align-items: center; flex-wrap: wrap; } nav a { display: inline-flex; justify-content: center; align-items: center; font-family: var(--ft-nav); /* text-transform: uppercase; */ text-decoration: none; color: inherit; i{ margin-left: 6px; } } nav a:hover, nav a.active{ color: var(--clr01) !important; text-decoration: none; } nav li li a:hover, nav li li a.active{ color: var(--clr01) } nav > ul > li { /* margin: 0 12px 0 0; padding: 0 12px 0 0; */ position: relative } nav > ul > li:hover { z-index: 10; } @media (max-width: 767px) { nav > ul > li > ul { padding: 0 0 0 12px; } nav > ul > li > ul li { width: 100%; font-size: 80%; } nav > ul > li > ul li ~ li { border-top: 1px solid #eee } nav > ul > li > ul a { text-transform: initial; width: 100%; justify-content: flex-start; } } @media (min-width: 767px) { nav > ul { gap: 21px; width: 100%; justify-content: space-evenly; } nav > ul > li > a { padding: 3px; margin: 0 1px; position: relative; color: #000 !important; font-size: 80%; } /* nav > ul > li > a.active, */ nav > ul > li > a:hover{ color: var(--clr01, #fff) } nav > ul > li > a.active:not(.btn):after, nav > ul > li > a:not(.btn):hover:after { content: ''; color: inherit; position: absolute; height: 3px; width: calc(100% - 21px); left: 50%; bottom: -6px; translate: -50% 0; background-color: var(--clr01, transparent); } nav > ul > li > ul { position: absolute; bottom: -30px; right: 50%; translate: 50% 100%; scale: 1 0; /* display: none; */ min-width: 250px; background-color: rgba(0,0,0,.85); color: #ccc; border: 0 solid #eee; padding: 0; transition: .6s all .3s ease ; display: block; transform-origin: top; & ul{ padding-left: 15px; } } nav > ul > li:hover > ul { transition: .6s all ease; scale: 1 1; } nav > ul > li > ul a { text-transform: initial; width: 100%; justify-content: flex-start; padding: 9px; } nav ul li li a:hover, nav ul li li a.active { background-color: #555 !important; color: #fff !important; } nav > ul > li > ul li { width: 100%; justify-content: flex-start; } nav > ul > li > ul li ~ li { /* margin-top: 9px; */ } } .dekstopnav .main > * { padding: 3px 0 } .mobilenav .mediabx:not(.mediabx-coloricon) a { --bgclr: transparent; --iconclr: #fff; --iconhovclr: #fff; padding: 0; } .mobilenav { position: fixed; height: 100vh; background-color: rgba(0 0 0 / 50%); z-index: 50; padding: 0 0 0 0; width: 100% !important; display: block; translate: 101% 0; opacity: 0; transition: .6s all .3s ease; top: 0; left: 0; } .mobilestickbx { position: fixed; top: 0; left: 0; padding: 8px 15px; width: 100% !important; z-index: 50; /* border-bottom: 1px solid #ccc; */ background-color: var(--clr01x, #fff); min-height: 65px; display: flex; align-items: center; line-height: 1; border-bottom: 3px solid var(--clr01); } .mobilestickbx img { max-height: 70px; max-width: calc(100% - 45px); } .mobilestickbx ._imgobj { display: none } .mobilenav .mediabx:not(.mediabx-coloricon) a { padding: 8px; --iconclr: #fff; --iconhovclr: #fff; --bgclr: var(--clr02,#fff); --bghovclr: var(--clr01,#fff); --square: 35px; margin: 0; border-radius: 50%; } .mobilenav nav a { flex: 0 0 100%; width: 100%; justify-content: flex-start; color: inherit; text-decoration: none; padding: 6px 0; padding: 9px 0; font-size: 120%; } .mobilenav.active { translate: 0 0; opacity: 1; transition: .3s all ease; } .mobilenavw { transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1); height: 100vh; background-color: #fff; width: calc(100% - 90px) !important; display: block; overflow: hidden; overflow-y: auto; translate: 101% 0; opacity: 0; max-width: 400px; margin-left: auto; } .mobilenav.active .mobilenavw { transition: .9s all .3s cubic-bezier(0.075, 0.82, 0.165, 1); translate: 0 0; opacity: 1; } .mobilenav nav{ padding: 60px 24px 15px; } .mobilenav .infobx { padding: 0 24px 60px; } .mobilenav .infow { border-top: 1px solid #ccc; padding: 21px 0 0; } .mobilenav nav :is(ul, li) { margin: 0; width: 100%; } .mobilenav nav > ul > li { flex: 0 0 100%; } .mobilenav nav a { flex: 0 0 100%; width: 100%; justify-content: flex-start; color: inherit; text-decoration: none; } /* ===================== */ .menuburger { --square: 35px; --height: 3px; --top: 9px; --vpadding: 15px; --bgclr: #555; --radius: 5px; position: fixed; width: var(--square)!important; height: var(--square); top: var(--vpadding); right: calc(var(--vpadding) + 0px); transition-duration: 0.5s; display: flex; align-items: center; z-index: 55; scale: 0.7; } .menuburger .icon { --bgclr: var(--clr01, #fff); transition-duration: 0.5s; position: relative; height: var(--height); width: var(--square); top: 0; background-color: var(--bgclr); border-radius: var(--radius) } .menuburger .icon:before { transition-duration: 0.5s; position: absolute; width: var(--square); height: var(--height); background-color: var(--bgclr); content: ""; top: calc(-1 * var(--top)); border-radius: var(--radius) } .menuburger .icon:after { transition-duration: 0.5s; position: absolute; width: calc(var(--square) / 2); height: var(--height); background-color: var(--bgclr); content: ""; top: var(--top); border-radius: var(--radius); right: 0; } .menuburger.open .icon { transition-duration: 0.5s; transform: rotateZ(360deg); --bgclr: var(--clr01) } .menuburger.open .icon:before { transform: rotateZ(45deg) scaleX(0.75) translate(var(--top), -6px); } .menuburger.open .icon:after { width: var(--square); transform: rotateZ(-45deg) scaleX(0.75) translate(var(--top), 6px); } .mobilestickbxp, .dekstickbx { width: 100% !important; } .dekstickbx { padding: 9px 0; position: fixed; left: 0; top: 0; z-index: 10; background-color: var(--clr01x, #fff); /* color: #fff; */ /* border-bottom: 1px solid #eee; */ transition: 2s all cubic-bezier(0.075, 0.82, 0.165, 1); translate: 0 -101%; color: var(--clr01x, inherit); & nav{ /* color: #fff */ } } body.scrolled .dekstickbx { translate: 0 0; } .dekstickbx .logo img { max-height: 45px; } .dekstickbx .logo ._imgobj img { max-height: 15px; } .logo { line-height: 1; } @media (max-width: 767px) { .dekstickbx, [mn="8005"] { display: none; } } @media (min-width: 767px) { .menuburger, .mobilestickbxp, .mobilestickbx, .mobilenav { display: none !important; } } .sidetabbx { z-index: 55; position: fixed; right: 0; top: 300px; font-family: var(--ft-t1); line-height: 1; rotate: -90deg; transform-origin: right bottom; .tabbtn { border: 2px solid #000; border-radius: 9px 9px 0 0; padding: 6px 9px; background: rgb(255,255,255); /* background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(204,204,204,1) 100%); */ cursor: pointer; } .bimgw { width: 30px; margin: 0 3px 0 0; .iconchat { background-image: url(_src/chat.png); } } } /* ================== */ /* ================== */ .navdropbx { position: absolute; background-color: rgba(255, 255, 255, .9); bottom: 0; left: 0; translate: 0 100%; line-height: 1; .container { max-width: 800px; } & .nav{ padding: 15px 0; color: var(--clr01x, #464646); font-family: var(--ft-t1); text-transform: initial; a{ &:hover{ text-decoration: underline; color: var(--clr01, #555); } } ol{ position: relative; margin: 0; padding: 0; font-family: var(--ft-b1); & li{ margin: 6px 0; } } &>ol{ display: flex; & li{ list-style-image: url(_src/right-angle.png?d) !important; } &>li{ display: block; &~&{ margin-left: 45px; } } } } } .withTemplate{ ul{ @media(width>767px){ display: none; } } } /* ====================== */ /* ====================== */ .mobileMediaTop { width: 100% !important; display: none; .mediatop { padding: 6px 0; background-color: #ddd; width: 100% !important; } .mediabx{ --bgclr: #333; --mediaborderradius: 3px; &>*{ gap: 3px; } } } .mobilenavbx{ width: 100% !important; } /* @media(width>767px){ nav>ul{ max-width: 100%; justify-content: space-between; } } body.home { [mn="8005"]{ background-color: transparent; position: absolute; top: 0; left: 0; } } */ .mobilenav nav .addedmenu a { padding: 15px; text-align: center; border: 1px solid #eee; justify-content: center; } .addedmenu{ a{ gap: 6px; .bimgbx{ line-height: 0; .bimgw{ width: 25px; } } } } .btn_admin.btn{ --btnbgclr: var(--clr01); --btnbgclrhov: var(--clr01); --btnborderclr: var(--btnbgclr); --btnborderclrhov: var(--btnbgclrhov); --btnclr: var(--clr01x, #fff); } .sticky_image{ position: fixed; right: 0; bottom: 250px; z-index: 45; max-width: 30%; @media(width<=575px){ bottom: 95px; right: auto; left: 15px; } } /* nav .addedmenu a { border-radius: 50px; background-color: var(--clr01); color: #fff } nav .addedmenu a:hover { background-color: var(--clr02); } nav .addedmenu a:after { display: none; } */ [mn="8231"] { margin-top: auto; padding-bottom: 0; } [mn="8231"] .sitemap { ul { --div: 100%; list-style-type: none; list-style: none; margin: 0; padding: 0; } ._content>ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; text-align: inherit; } ._content>ul>li { flex: 0 0 var(--div); max-width: var(--div); margin: 0 0 6px } li~li { margin: 3px 0 0 } } [mn="8231"] ._imgobj { margin: 0 0 15px } [mn="8231"] a { color: inherit; text-decoration: none; } [mn="8231"] .mediabx { margin: 0 0 9px; a { --iconclr: var(--clr01x, #fff); --iconhovclr: var(--clr01x, #fff); --bgclr: var(--clr02x, transparent); --bghovclr: var(--clr01, #fff); --mediaborder: 2px solid #fff; --mediahovborder: 2px solid var(--clr01); --square: 30px; padding: 6px; margin: 0; border-radius: 50%; } } [mn="8231"] .ttl { margin: 0px 0 9px; text-transform: uppercase; font-family: var(--ft-t2); line-height: 1; } [mn="8231"] .copyright { font-size: 80%; } [mn="8231"] .copyright>* { padding: 30px 15px; } [mn="8231"] .copyrightw>* { flex: 0 0 100%; } [mn="8231"] a { text-underline-offset: 3px; } [mn="8231"] a:hover { text-decoration: underline; } @media (max-width: 991px) { [mn="8231"] .empty { display: none; } [mn="8231"] .sitemap ul { --div: 100%; } } @media (max-width: 767px) { [mn="8231"] .copyrightw { justify-content: center; } [mn="8231"] .copyrightw .mediabx>* { justify-content: center; } [mn="8231"] .copyrightw>* { flex: 0 0 100%; max-width: 100%; } [mn="8231"] .sitemap ul { --div: 100%; } [mn="8231"] .newsletterbx { width: 250px; margin: 0 auto; } [mn="8231"] .newsletterbx, [mn="8231"] { text-align: center } } @media (max-width: 575px) { [mn="8231"] .sitemap ul { --div: 100%; } } /* ================== */ [mn="8231"] .line { border-top: 1px solid #fff; } [mn="8231"] .contactbx { border-top: 1px solid #fff; margin: 30px 0 0; .divbx{ --div: 120px; line-height: 1; text-align: left; & ~ & { margin-top: 6px; } } .contactm { flex: 0 0 50%; max-width: 50%; padding: 30px 15px 15px; &:nth-child(1) { flex: 0 0 40%; max-width: 40%; border-right: 1px solid #fff; } &:nth-child(2) { flex: 0 0 30%; max-width: 30%; border-right: 1px solid #fff; } &:nth-child(3) { flex: 0 0 30%; max-width: 30%; } } @media(width<=575px){ } @media(width<=575px){ .contactm { flex: 0 0 100% !important; max-width: 100% !important; border: 0 !important; & ~ & { border-top: 1px solid #fff !important } } } } [mn="5000"] { .taste { margin: 21px 0 0; } .follow-us{ text-align: center; margin: 30px 0 0; .mediabx{ &>*{ justify-content: center; } } } .noticebx{ font-size: 90%; } .contactinfobx { line-height: 1.1; .ttldecor- { display: none!important; } ._ittl { margin: 0 0 9px; } .title { font-size: 120%; font-family: var(--ft-t1); margin: 3px 0 9px } @media (width <= 767px) { text-align: center; .iconbx { ._imgobj { margin: 0; } .bimgw { max-width: 60px; } .icon-{ flex: 0 0 100%; max-width: 100%; } } } } } [mn="1007"] { --gradStart_default: var(--secbgclr); --gradEnd_default: rgba(255, 255, 255, 0); padding: 0; .itm { &.lr-w { flex: 0 0 100%; max-width: 100%; flex-direction: row-reverse; padding: 0; } .l, .r { flex: 0 0 50%; max-width: 50%; position: relative; @media(width<575px) { flex: 0 0 100%; max-width: 100% } } .l { min-height: 300px; &:after { content: ''; left: 0; bottom: 0; position: absolute; display: block; height: 100%; width: 250px; background: rgb(236, 241, 243); background: linear-gradient(90deg, var(--gradStart_default) 0%, var(--gradEnd_default) 100%); } @media(width<=575px) { &:after { display: none } } } } .textbx { padding: 0 0 0 0; width: 600px; max-width: 100%; margin: 0 auto; @media(width>575px){ padding: 30px 0; } } ._content { border: 0; } .floatingbg { position: absolute; left: 0; top: 0; height: 100% } @media (max-width: 575px) { .textbx { padding: 0 0 0 0 !important } .floatingbg { position: inherit; padding: 15px } } .rowbxlist { --ObjImgPadu: var(--ObjImgPadu_default, 15px 0); @media (width <= 1200px) { --ObjImgPadu: var(--ObjImgPadu_1200, 30px 0); } @media (width <= 991px) { --ObjImgPadu: var(--ObjImgPadu_991, 30px 0); } @media (width <= 767px) { --ObjImgPadu: var(--ObjImgPadu_767, 30px 0); } @media (width <= 575px) { --ObjImgPadu: var(--ObjImgPadu_575, 30px 0); } /* ================================ */ /* ================================ */ padding: var(--ObjImgPadu); .rowcont { min-height: auto; } .rowcont { @media(width>=575px){ min-height: 65vh; } } } &.dsg_1 { .rowbxlist:nth-child(even) { .rowcont { .row { flex-direction: row-reverse; } } .lr-w { flex-direction: initial; } .l { &:after { background: linear-gradient(90deg, var(--gradEnd_default) 0%, var(--gradStart_default) 100%); left: auto; right: 0; } } } } &.dsg_2 { .rowbxlist:nth-child(odd) { .rowcont { .row { flex-direction: row-reverse; } } .lr-w { flex-direction: initial; } .l { &:after { background: linear-gradient(90deg, var(--gradEnd_default) 0%, var(--gradStart_default) 100%); left: auto; right: 0; } } } } } [mn="1008"]{ z-index: var(--zIndex_default, 1); --listTtlSize_default: var(--ttlsize); --listAlignItm_default: center; &.image_int{ @media (width>767px) { ._imgobj img { max-width: initial; } } } .rowbx{ --ObjImgMaru: var(--ObjImgMaru_default, 0); @media (width <= 1200px) { --ObjImgMaru: var(--ObjImgMaru_1200, 0); } @media (width <= 991px) { --ObjImgMaru: var(--ObjImgMaru_991, 0); } @media (width <= 767px) { --ObjImgMaru: var(--ObjImgMaru_767, 0); } @media (width <= 575px) { --ObjImgMaru: var(--ObjImgMaru_575, 0); } /* ================================== */ /* ================================== */ &>*.row{ align-items: var(--listAlignItm_default); } ._ittl{ --ttlalign: left; margin: var(--listingTtlMarg_default, 0 0 18px); & * { text-align: var(--listingTtlAlg_default); } & .h4 { color: var(--listingTtlClr_default, var(--secttlclr)); font-size: var(--listTtlSize_default); } } ._imgobj { text-align: center; @media(width>767px){ display: flex; justify-content: flex-end; } img{ margin: var(--ObjImgMaru); } } &~&{ margin-top: 30px; } @media (max-width: 1100px) { ._imgobj img { max-height: 600px; } } ._imgobj { margin: 0; line-height: 0 } @media (max-width: 767px) { ._imgobj { margin: 0 0 15px; } ._imgobj img { max-height: unset; } } } &.dsg_1{ .rowbx:nth-child(even){ .row{ flex-direction: row-reverse; } ._imgobj { @media(width>767px){ justify-content: flex-start; } } } } &.dsg_2{ .rowbx:nth-child(odd){ .row{ flex-direction: row-reverse; } ._imgobj { @media(width>767px){ justify-content: flex-start; } } } .rowbx:nth-child(even){ ._imgobj { @media(width>767px){ justify-content: flex-end; } } } ._imgobj{ @media(width>767px){ display: flex; justify-content: flex-start; } } } } /* ============================ */ /* // customise */ [mn="1008"]{ &.contentbx_340{ .contentbx{ max-width: 340px; } } /* .txtbx{ border-left: 1px solid #ccc; padding-left: 35px; &::after{ content: ''; position: absolute; height: 60px; width: 6px; background-color: #000; top: 0; left: 0; translate: -50% 0; } } */ } [mn="3102"] { img { width: 100%; } .btm { margin-top: auto; padding-top: 30px; } } [mn="3102"] .mySwiper { overflow: visible; .swiper-slide>*:is(a, .hov):hover { cursor: pointer; .bimg { scale: 1.1; } } .swiper-slide .bimgbx { display: flex; justify-content: center; align-items: flex-end; } .swiper-slide ._imgobj { margin: 0 } .swiper-pagination { position: relative; margin: 15px 0 0; } .swiper-button-lock { display: none !important; } .swiper-button-next, .swiper-button-prev { aspect-ratio: 1 / 1 !important; background-color: transparent; width: 35px; height: auto; border-radius: 50%; position: relative; margin: 0; display: inline-flex; left: unset; right: unset; border: 2px solid var(--clr02x, #fff); } .swiper-button-next:after, .swiper-button-prev:after { color: var(--clr02x, #fff); font-size: 15px; } .swiper-pagination-bullet-active { background-color: var(--clr01); } } /* ======================== */ .licht.licht_3102 { .h4 { color: #000; } .contm { width: 900px; } ._imgobj { text-align: center; } .galbx.categorylistbx { --listset-count: 3; --listset-gap: 9px; margin: 21px 0; .bimgbx { line-height: 0; .bimgw { overflow: clip; border-radius: 9px; border: 1px solid #ddd; padding: 9px; .bimg{ background-size: contain; padding-top: 100%; } } } } .mainobjectimgbx{ .bimgbx { line-height: 0; .bimgw { overflow: clip; border-radius: 21px; border: 1px solid #ddd; padding: 15px; } } } } /* Customisation */ /* ======================== */ [mn="3102"] .mySwiper { --bgclr_1: #522163; --bgclr_2: #8100ab; line-height: 1; .swiper-slide { padding: 21px; border-radius: 15px; overflow: clip; color: #fff; background-image: linear-gradient(15deg, var(--bgclr_2) 0%, var(--bgclr_1) 100%); ._subttl { color: inherit; font-family: inherit; margin: 0 0 9px; } .btn { --btnbgclr: var(--clr02x, transparent); --btnbgclrhov: var(--clr01); --btnborderclr: var(--btnclr); --btnborderclrhov: var(--btnbgclrhov); --btnclr: var(--clr03x, #fff); --btnclrhov: var(--clr03x, #fff); } } }[mn="7067"] { .categorylistbx { --listset-count: 3; --listset-gap: 21px; @media(width<=767px){ --listset-count: 2; } @media(width<=575px){ --listset-count: 1; } .categorylistw { } .categorybx{ background-image: url(_src/7067_bg.jpg); padding: 21px; text-align: center; overflow: clip; border-radius: 15px; background-position: bottom center; .btm{ margin-top: auto; padding-top: 30px; } ._subttl{ font-family: inherit; color: inherit; } .title{ font-family: var(--ft-t1); } .bimg{ padding-top: 65%; } } } } [mn="4304"] .imgbx { line-height: 0; * { margin: 0; } img{ width: 100%; } } [mn="4304"] .iframebx { height: 70vh; cursor: pointer; background-attachment: fixed; .playbtnbx{ position: absolute; left: 50%; top: 50%; translate: -50% -50%; gap: 15px; text-align: center; .btnplay { /* background-image: url(src/play_button.png); */ content: url(src/4304_play_button_2.png); transition: .6s all ease; max-width: 100%; width: 150px; } ._ittl{ width: auto; margin: 0!important; } .h4{ color: #fff; font-size: 150%; } } } .licht4304.licht{ .contbx > .contbx-w{ padding: 0; } .contbx { aspect-ratio: 16/9; } .contm { background-color: #fff; } } [mn="7068"] { [dna="1"]{ &.categorylistbx{ --listset-count: 3; @media(width<=991px){ --listset-count: 2; } } &.categorylistw{ } &.categorybx{ &:first-child{ @media(width<=991px){ flex: 0 0 100%; max-width: 100%; } } } } [dna="2"]{ &.categorylistbx{ --listset-count: 1; } &.categorylistw{ } &.categorybx{ .categoryw{ padding-top: 75%; color: #fff; border-radius: 15px; overflow: clip; @media(width>991px){ padding-top: 60%; } } h4{ color: inherit; margin: 0 0; font-size: 150%; @media(width<=575px){ font-size: 100%; } } } } .infobx{ position: absolute; bottom: 0; left: 0; background-image: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); padding: 15px; } }