@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,500;0,600;0,700;1,400&display=swap'); @font-face{font-family:Feather;src:url(Feather.ttf?sdxovp) format('truetype'),url(Feather.woff?sdxovp) format('woff'),url(Feather.svg?sdxovp#Feather) format('svg');font-weight:400;font-style:normal}.fe{font-family:Feather!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fe-activity:before{content:"\e900"}.fe-airplay:before{content:"\e901"}.fe-alert-circle:before{content:"\e902"}.fe-alert-octagon:before{content:"\e903"}.fe-alert-triangle:before{content:"\e904"}.fe-align-center:before{content:"\e905"}.fe-align-justify:before{content:"\e906"}.fe-align-left:before{content:"\e907"}.fe-align-right:before{content:"\e908"}.fe-anchor:before{content:"\e909"}.fe-aperture:before{content:"\e90a"}.fe-archive:before{content:"\e90b"}.fe-arrow-down:before{content:"\e90c"}.fe-arrow-down-circle:before{content:"\e90d"}.fe-arrow-down-left:before{content:"\e90e"}.fe-arrow-down-right:before{content:"\e90f"}.fe-arrow-left:before{content:"\e910"}.fe-arrow-left-circle:before{content:"\e911"}.fe-arrow-right:before{content:"\e912"}.fe-arrow-right-circle:before{content:"\e913"}.fe-arrow-up:before{content:"\e914"}.fe-arrow-up-circle:before{content:"\e915"}.fe-arrow-up-left:before{content:"\e916"}.fe-arrow-up-right:before{content:"\e917"}.fe-at-sign:before{content:"\e918"}.fe-award:before{content:"\e919"}.fe-bar-chart:before{content:"\e91a"}.fe-bar-chart-2:before{content:"\e91b"}.fe-battery:before{content:"\e91c"}.fe-battery-charging:before{content:"\e91d"}.fe-bell:before{content:"\e91e"}.fe-bell-off:before{content:"\e91f"}.fe-bluetooth:before{content:"\e920"}.fe-bold:before{content:"\e921"}.fe-book:before{content:"\e922"}.fe-book-open:before{content:"\e923"}.fe-bookmark:before{content:"\e924"}.fe-box:before{content:"\e925"}.fe-briefcase:before{content:"\e926"}.fe-calendar:before{content:"\e927"}.fe-camera:before{content:"\e928"}.fe-camera-off:before{content:"\e929"}.fe-cast:before{content:"\e92a"}.fe-check:before{content:"\e92b"}.fe-check-circle:before{content:"\e92c"}.fe-check-square:before{content:"\e92d"}.fe-chevron-down:before{content:"\e92e"}.fe-chevron-left:before{content:"\e92f"}.fe-chevron-right:before{content:"\e930"}.fe-chevron-up:before{content:"\e931"}.fe-chevrons-down:before{content:"\e932"}.fe-chevrons-left:before{content:"\e933"}.fe-chevrons-right:before{content:"\e934"}.fe-chevrons-up:before{content:"\e935"}.fe-chrome:before{content:"\e936"}.fe-circle:before{content:"\e937"}.fe-clipboard:before{content:"\e938"}.fe-clock:before{content:"\e939"}.fe-cloud:before{content:"\e93a"}.fe-cloud-drizzle:before{content:"\e93b"}.fe-cloud-lightning:before{content:"\e93c"}.fe-cloud-off:before{content:"\e93d"}.fe-cloud-rain:before{content:"\e93e"}.fe-cloud-snow:before{content:"\e93f"}.fe-code:before{content:"\e940"}.fe-codepen:before{content:"\e941"}.fe-command:before{content:"\e942"}.fe-compass:before{content:"\e943"}.fe-copy:before{content:"\e944"}.fe-corner-down-left:before{content:"\e945"}.fe-corner-down-right:before{content:"\e946"}.fe-corner-left-down:before{content:"\e947"}.fe-corner-left-up:before{content:"\e948"}.fe-corner-right-down:before{content:"\e949"}.fe-corner-right-up:before{content:"\e94a"}.fe-corner-up-left:before{content:"\e94b"}.fe-corner-up-right:before{content:"\e94c"}.fe-cpu:before{content:"\e94d"}.fe-credit-card:before{content:"\e94e"}.fe-crop:before{content:"\e94f"}.fe-crosshair:before{content:"\e950"}.fe-database:before{content:"\e951"}.fe-delete:before{content:"\e952"}.fe-disc:before{content:"\e953"}.fe-dollar-sign:before{content:"\e954"}.fe-download:before{content:"\e955"}.fe-download-cloud:before{content:"\e956"}.fe-droplet:before{content:"\e957"}.fe-edit:before{content:"\e958"}.fe-edit-2:before{content:"\e959"}.fe-edit-3:before{content:"\e95a"}.fe-external-link:before{content:"\e95b"}.fe-eye:before{content:"\e95c"}.fe-eye-off:before{content:"\e95d"}.fe-facebook:before{content:"\e95e"}.fe-fast-forward:before{content:"\e95f"}.fe-feather:before{content:"\e960"}.fe-file:before{content:"\e961"}.fe-file-minus:before{content:"\e962"}.fe-file-plus:before{content:"\e963"}.fe-file-text:before{content:"\e964"}.fe-film:before{content:"\e965"}.fe-filter:before{content:"\e966"}.fe-flag:before{content:"\e967"}.fe-folder:before{content:"\e968"}.fe-folder-minus:before{content:"\e969"}.fe-folder-plus:before{content:"\e96a"}.fe-gift:before{content:"\e96b"}.fe-git-branch:before{content:"\e96c"}.fe-git-commit:before{content:"\e96d"}.fe-git-merge:before{content:"\e96e"}.fe-git-pull-request:before{content:"\e96f"}.fe-github:before{content:"\e970"}.fe-gitlab:before{content:"\e971"}.fe-globe:before{content:"\e972"}.fe-grid:before{content:"\e973"}.fe-hard-drive:before{content:"\e974"}.fe-hash:before{content:"\e975"}.fe-headphones:before{content:"\e976"}.fe-heart:before{content:"\e977"}.fe-help-circle:before{content:"\e978"}.fe-home:before{content:"\e979"}.fe-image:before{content:"\e97a"}.fe-inbox:before{content:"\e97b"}.fe-info:before{content:"\e97c"}.fe-instagram:before{content:"\e97d"}.fe-italic:before{content:"\e97e"}.fe-layers:before{content:"\e97f"}.fe-layout:before{content:"\e980"}.fe-life-buoy:before{content:"\e981"}.fe-link:before{content:"\e982"}.fe-link-2:before{content:"\e983"}.fe-linkedin:before{content:"\e984"}.fe-list:before{content:"\e985"}.fe-loader:before{content:"\e986"}.fe-lock:before{content:"\e987"}.fe-log-in:before{content:"\e988"}.fe-log-out:before{content:"\e989"}.fe-mail:before{content:"\e98a"}.fe-map:before{content:"\e98b"}.fe-map-pin:before{content:"\e98c"}.fe-maximize:before{content:"\e98d"}.fe-maximize-2:before{content:"\e98e"}.fe-menu:before{content:"\e98f"}.fe-message-circle:before{content:"\e990"}.fe-message-square:before{content:"\e991"}.fe-mic:before{content:"\e992"}.fe-mic-off:before{content:"\e993"}.fe-minimize:before{content:"\e994"}.fe-minimize-2:before{content:"\e995"}.fe-minus:before{content:"\e996"}.fe-minus-circle:before{content:"\e997"}.fe-minus-square:before{content:"\e998"}.fe-monitor:before{content:"\e999"}.fe-moon:before{content:"\e99a"}.fe-more-horizontal:before{content:"\e99b"}.fe-more-vertical:before{content:"\e99c"}.fe-move:before{content:"\e99d"}.fe-music:before{content:"\e99e"}.fe-navigation:before{content:"\e99f"}.fe-navigation-2:before{content:"\e9a0"}.fe-octagon:before{content:"\e9a1"}.fe-package:before{content:"\e9a2"}.fe-paperclip:before{content:"\e9a3"}.fe-pause:before{content:"\e9a4"}.fe-pause-circle:before{content:"\e9a5"}.fe-percent:before{content:"\e9a6"}.fe-phone:before{content:"\e9a7"}.fe-phone-call:before{content:"\e9a8"}.fe-phone-forwarded:before{content:"\e9a9"}.fe-phone-incoming:before{content:"\e9aa"}.fe-phone-missed:before{content:"\e9ab"}.fe-phone-off:before{content:"\e9ac"}.fe-phone-outgoing:before{content:"\e9ad"}.fe-pie-chart:before{content:"\e9ae"}.fe-play:before{content:"\e9af"}.fe-play-circle:before{content:"\e9b0"}.fe-plus:before{content:"\e9b1"}.fe-plus-circle:before{content:"\e9b2"}.fe-plus-square:before{content:"\e9b3"}.fe-pocket:before{content:"\e9b4"}.fe-power:before{content:"\e9b5"}.fe-printer:before{content:"\e9b6"}.fe-radio:before{content:"\e9b7"}.fe-refresh-ccw:before{content:"\e9b8"}.fe-refresh-cw:before{content:"\e9b9"}.fe-repeat:before{content:"\e9ba"}.fe-rewind:before{content:"\e9bb"}.fe-rotate-ccw:before{content:"\e9bc"}.fe-rotate-cw:before{content:"\e9bd"}.fe-rss:before{content:"\e9be"}.fe-save:before{content:"\e9bf"}.fe-scissors:before{content:"\e9c0"}.fe-search:before{content:"\e9c1"}.fe-send:before{content:"\e9c2"}.fe-server:before{content:"\e9c3"}.fe-settings:before{content:"\e9c4"}.fe-share:before{content:"\e9c5"}.fe-share-2:before{content:"\e9c6"}.fe-shield:before{content:"\e9c7"}.fe-shield-off:before{content:"\e9c8"}.fe-shopping-bag:before{content:"\e9c9"}.fe-shopping-cart:before{content:"\e9ca"}.fe-shuffle:before{content:"\e9cb"}.fe-sidebar:before{content:"\e9cc"}.fe-skip-back:before{content:"\e9cd"}.fe-skip-forward:before{content:"\e9ce"}.fe-slack:before{content:"\e9cf"}.fe-slash:before{content:"\e9d0"}.fe-sliders:before{content:"\e9d1"}.fe-smartphone:before{content:"\e9d2"}.fe-speaker:before{content:"\e9d3"}.fe-square:before{content:"\e9d4"}.fe-star:before{content:"\e9d5"}.fe-stop-circle:before{content:"\e9d6"}.fe-sun:before{content:"\e9d7"}.fe-sunrise:before{content:"\e9d8"}.fe-sunset:before{content:"\e9d9"}.fe-tablet:before{content:"\e9da"}.fe-tag:before{content:"\e9db"}.fe-target:before{content:"\e9dc"}.fe-terminal:before{content:"\e9dd"}.fe-thermometer:before{content:"\e9de"}.fe-thumbs-down:before{content:"\e9df"}.fe-thumbs-up:before{content:"\e9e0"}.fe-toggle-left:before{content:"\e9e1"}.fe-toggle-right:before{content:"\e9e2"}.fe-trash:before{content:"\e9e3"}.fe-trash-2:before{content:"\e9e4"}.fe-trending-down:before{content:"\e9e5"}.fe-trending-up:before{content:"\e9e6"}.fe-triangle:before{content:"\e9e7"}.fe-truck:before{content:"\e9e8"}.fe-tv:before{content:"\e9e9"}.fe-twitter:before{content:"\e9ea"}.fe-type:before{content:"\e9eb"}.fe-umbrella:before{content:"\e9ec"}.fe-underline:before{content:"\e9ed"}.fe-unlock:before{content:"\e9ee"}.fe-upload:before{content:"\e9ef"}.fe-upload-cloud:before{content:"\e9f0"}.fe-user:before{content:"\e9f1"}.fe-user-check:before{content:"\e9f2"}.fe-user-minus:before{content:"\e9f3"}.fe-user-plus:before{content:"\e9f4"}.fe-user-x:before{content:"\e9f5"}.fe-users:before{content:"\e9f6"}.fe-video:before{content:"\e9f7"}.fe-video-off:before{content:"\e9f8"}.fe-voicemail:before{content:"\e9f9"}.fe-volume:before{content:"\e9fa"}.fe-volume-1:before{content:"\e9fb"}.fe-volume-2:before{content:"\e9fc"}.fe-volume-x:before{content:"\e9fd"}.fe-watch:before{content:"\e9fe"}.fe-wifi:before{content:"\e9ff"}.fe-wifi-off:before{content:"\ea00"}.fe-wind:before{content:"\ea01"}.fe-x:before{content:"\ea02"}.fe-x-circle:before{content:"\ea03"}.fe-x-square:before{content:"\ea04"}.fe-youtube:before{content:"\ea05"}.fe-zap:before{content:"\ea06"}.fe-zap-off:before{content:"\ea07"}.fe-zoom-in:before{content:"\ea08"}.fe-zoom-out:before{content:"\ea09"} :root { --c-black: hsl(240, 8%, 10%); --c-white: hsl(0, 0%, 100%); --c-lightgray: hsla(240,4%,95%,1); --c-mediumgray: hsl(240,1%,83%); --c-gray: hsl(240,1%,70%); --c-darkgray: hsl(240,1%,48%); --c-dark: hsl(240,4%,20%); --c-labelgray: hsl(240,1%,40%); /*--Primary--*/ --c-primary-lighter: hsl(220,90%,70%); --c-primary-light: hsl(220, 90%, 63%); --c-primary: hsl(220, 90%, 56%); --c-primary-dark: hsl(220, 90%, 49%); --c-primary-darker: hsl(220, 90%, 42%); --c-primary-shadow: hsl(220,90%,90%); --c-primary-shadow2: hsla(220,90%,56%,0.5); /*--Accent--*/ --c-accent-lighter: hsl(349, 75%, 67%); --c-accent-light: hsl(349, 75%, 59%); --c-accent: hsl(349, 75%, 51%); --c-accent-dark: hsl(349, 75%, 44%); --c-accent-darker: hsl(349, 75%, 36%); --c-accent-shadow: hsl(349, 75%, 90%); /*--Success--*/ --c-success-lighter: hsl(94, 48%, 74%); --c-success-light: hsl(94, 48%, 65%); --c-success: hsl(94, 48%, 56%); --c-success-dark: hsl(94, 48%, 48%); --c-success-darker: hsl(94, 48%, 42%); --c-success-shadow: hsl(94, 48%, 85%); --c-success-shadow2: hsl(94, 48%, 85%,0.5); /*--Error--*/ --c-error-lighter: hsl(349, 75%, 67%); --c-error-light: hsl(349, 75%, 59%); --c-error: hsl(349, 75%, 51%); --c-error-dark: hsl(349, 75%, 44%); --c-error-darker: hsl(349, 75%, 36%); --c-error-shadow: hsl(349, 75%, 90%); /*--Warning--*/ --c-warning-lighter: hsl(46, 100%, 80%); --c-warning-light: hsl(46, 100%, 71%); --c-warning: hsl(46, 100%, 61%); --c-warning-dark: hsl(46, 100%, 50%); --c-warning-darker: hsl(46, 100%, 47%); --c-warning-shadow: hsl(46, 100%, 90%); --fs-xxxxl: 3.815em; --fs-xxxl: 3.052em; --fs-xxl: 2.441em; --fs-xl: 1.953em; --fs-lg: 1.563em; --fs-md: 1.25em; --fs-base: 1.1em; --fs-sm: 0.9em; --fs-sm2: 0.8em; --fs-sm3: 0.75em; --fs-xs: 0.7em; --ipt-radius: 0; --ipt-radius-sm: 0.2em; --btn-radius: 0; --tr-all-02s: all 0.2s ease; --tr-all-03s: all 0.3s ease; --nav-box-shadow: 0 10px 20px rgba(0,0,0,0.2); --box-shadow: 0 0 20px rgba(0,0,0,0.2); --navstart-width: 180px; /*-- pl. a navigációs sávval egy vonalban levő logo block szélessége --*/ --navend-width: 180px; /*-- pl. a navigációs sávval egy vonalban levő ikonos block szélessége --*/ --space-unit: 1.25em; --gaphalf: 0.5em; --gap: 0.75em; --gap1: 1em; --gap2: 1.5em; --gap15: 1.5em; --gap3: 2em; --space-xxxxs: calc(0.125 * var(--space-unit)); --space-xxxs: calc(0.25 * var(--space-unit)); --space-xxs: calc(0.375 * var(--space-unit)); --space-xs: calc(0.5 * var(--space-unit)); --space-sm: calc(0.75 * var(--space-unit)); --space-md: calc(1.25 * var(--space-unit)); --space-lg: calc(2 * var(--space-unit)); --space-xl: calc(3.25 * var(--space-unit)); --space-xxl: calc(5.25 * var(--space-unit)); --space-xxxl: calc(8.5 * var(--space-unit)); --space-xxxxl: calc(13.75 * var(--space-unit)); --c-gold: #c1a586; --c-goldlight: #c1a586; --c-golddark: #b99d11; --c-red: red; } /*--NORMALIZE--*/ * {margin: 0;padding: 0;} article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display: block;} audio,canvas,video{display: inline-block;} audio:not([controls]){display: none;height: 0;} [hidden]{display: none;} html{font-family: sans-serif;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;} body{margin: 0;} a {cursor: pointer;} a:focus {outline: thin dotted;} a:active,a:hover {outline: 0;} abbr[title]{border-bottom: 1px dotted;} b,strong{font-weight: bold;} dfn{ font-style: italic;} hr{-moz-box-sizing: content-box;box-sizing: content-box;height: 0;} mark{background: #ff0;color: #333;} code,kbd,pre,samp{font-family: monospace,serif;font-size: 1em;} pre{white-space: pre-wrap;} q{quotes: "\201C" "\201D" "\2018" "\2019";} sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;} sup{top: -0.5em;} sub{bottom: -0.25em;} img{border: 0;} svg:not(:root){overflow: hidden;} figure{margin: 0;} legend{border: 0;padding: 0;} button,input,select,textarea{font-family: inherit;font-size: 100%;margin: 0;outline: 0;} button,input{line-height: normal;} button,select{text-transform: none;} button,html input[type="button"],input[type="reset"],input[type="submit"]{ -webkit-appearance: button;cursor: pointer;} button[disabled],html input[disabled]{cursor: default;} input[type="checkbox"],input[type="radio"]{box-sizing: border-box;padding: 0;} input[type="search"] {-webkit-appearance: textfield;-moz-box-sizing: content-box;-webkit-box-sizing: content-box;box-sizing: content-box;} input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance: none;} button::-moz-focus-inner,input::-moz-focus-inner{border: 0;padding: 0;} textarea{overflow: auto;vertical-align: top;} table{border-collapse: collapse;border-spacing: 0;} ul, li {list-style: none;display: inline-block;} :after, :before { box-sizing: border-box; } ul, ol, li, div, input, form, fieldset, textarea, button, select, label, nav, p, article, header {box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; float: left;} a, span {box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;} p a, p span {float: none;} /*--NORMALIZ END--*/ body { width: 100%;text-align: center;font-family: 'Jost', Roboto, Arial, sans-serif;font-size: 1em;font-weight: 300;line-height: 1.4;} body.stopscroll, html.stopscroll {overflow-y: hidden;} a {color: var(--c-primary); outline: 0 !important;} p {text-align: left; width: 100%;} /*--demohoz--*/ body {min-height: 1000px;} /*---demos---*/ .demo-container { padding: 40px 20%; text-align: left; width: 100%; display: inline-block; } .demo-container-title { font-size: 1em; color: var(--c-white); padding: 10px 10px; width: 100%; margin-bottom: 20px; background: var(--c-dark); } .demo-subtitle { font-size: 0.8em; color: var(--c-darkgray); padding: 5px 0; width: 100%; border-top: 1px solid var(--c-lightgray); margin-top: 30px; } .demo-form fieldset {width: 100%;} .demo-form {padding: 20px 20%;} .demo-form input, .demo-form textarea {width: 100%;} .demo-form .box50 {width: 50%; padding: 0 20px 0 0;} .demo-body-spacer {width: 100%; height: 1200px;} .dlist {width: 100%; padding: 3px 0;float: left;} .clear2 {width: 100%; padding: 0; height: 30px; float: left;} .demo-banner {width: 100%; position: relative; max-height: 80vh; overflow: hidden; margin-bottom: 30px;} .demo-banner:before { width: 100%; content: ''; position: absolute; top: 0; left: 0; height: 35%; z-index: 50; background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); display: inline-block; } .demo-banner img {width: 100%;} /*---color-bg--class---*/ .primary-lighter {background: var(--c-primary-lighter);} .primary-light {background: var(--c-primary-light);} .primary {background: var(--c-primary);} .primary-dark {background: var(--c-primary-dark);} .primary-darker {background: var(--c-primary-darker);} .primary-shadow {background: var(--c-primary-shadow);} .accent-lighter {background: var(--c-accent-lighter);} .accent-light {background: var(--c-accent-light);} .accent {background: var(--c-accent);} .accent-dark {background: var(--c-accent-dark);} .accent-darker {background: var(--c-accent-darker);} .accent-shadow {background: var(--c-accent-shadow);} .success-lighter {background: var(--c-success-lighter);} .success-light {background: var(--c-success-light);} .success {background: var(--c-success);} .success-dark {background: var(--c-success-dark);} .success-darker {background: var(--c-success-darker);} .success-shadow {background: var(--c-success-shadow);} .warning-lighter {background: var(--c-warning-lighter); color: rgba(0,0,0,0.5);} .warning-light {background: var(--c-warning-light); color: rgba(0,0,0,0.5);} .warning {background: var(--c-warning); color: rgba(0,0,0,0.5);} .warning-dark {background: var(--c-warning-dark); color: rgba(0,0,0,0.5);} .warning-darker {background: var(--c-warning-darker); color: rgba(0,0,0,0.5);} .warning-shadow {background: var(--c-warning-shadow); color: rgba(0,0,0,0.5);} /*---text color class---*/ .tc-lightgray {color: var(--c-lightgray);} .tc-mediumgray {color: var(--c-mediumgray);} .tc-gray {color: var(--c-gray);} .tc-darkgray {color: var(--c-darkgray);} .tc-dark {color: var(--c-dark);} /*---Header---*/ .header-wrapper {width: 100%;float: none;position: fixed;text-align:center;z-index: 500;} .pos-abs {position: absolute;} .header {width: 1280px;display: inline-block;vertical-align: top; float: none; padding: 0 var(--gap);} .header-bottom {background: var(--c-primary);width: 100%;position: relative; vertical-align: top;} .header-top {background: var(--c-primary);height: 30px; line-height: 30px; padding: 0 10px; text-align: left; font-size: var(--fs-sm); color: white; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.3); } /*--pl másodlagos menü telefonszám, email cím hírlevél subscribe stb.-hez---*/ .topnav {width: 60%;} .topnav a {color: #fff;font-size: var(--fs-sm3);text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 var(--gap);text-decoration: none;} .topnav a:hover {text-decoration: underline;} .header-top .header-phone {float: right; font-size: var(--fs-base); font-weight: bold;} .logo-wrapper {width: var(--navstart-width); display: flex; justify-content: center; align-items: center; color: white; height: 60px; overflow: hidden; position: relative;} .page-logo {text-decoration: none; font-size: 1.5em; font-weight: bold; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff;} .page-logo.invert {color: var(--c-primary); position: absolute; top: 100%;} .navend-wrapper {width: var(--navend-width); display: flex; justify-content: center; align-items: center; color: white; height: 60px; text-align: right; float: right; padding-right: 15px;} /*---Navigation-Horizontal-Base //kesobb osszevonom --*/ #mainnav {width: calc(100% - (var(--navstart-width) + var(--navend-width))); } /* kivonva a logo es a nav utani elemek taroloinak szelesseget */ #navigation {position: relative; z-index: 550; padding-right: 40px;height: 60px; overflow: hidden;} #navigation:hover {overflow: visible;} #navigation > li {position: relative;} #navigation > li.more {width: 60px;text-align: center;display: none;} #navigation > li {background: var(--c-primary);position: relative;} #navigation > li:hover { background: var(--c-primary-darker); } #navigation > li > a { color: var(--c-white); text-decoration: none; padding: 20px; line-height: 20px; height: 60px; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; position: relative; } #navigation > li.has-subnav > a {padding-right: 45px;} #navigation > li.has-subnav > a:after { content: ''; width: 10px; height: 10px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg) translateX(-10px); display: inline-block; position: absolute; top: 50%; right: 10px; } .subnav-wrapper {position: absolute;left: 0;height: 0;top: 100%;overflow: hidden;width: 220px;background: var(--c-white);box-shadow: var(--nav-box-shadow);} .subnav {width: 100%;} .subnav li {width: 100%;border-bottom: 1px solid rgba(0,0,0,0.1); } .subnav li:last-child {border-bottom: 0;} .subnav li a {text-align: left;padding: 8px 20px;text-decoration: none;font-size: 0.9em;width: 100%; color: var(--c-darkgray);} .subnav li:hover {background: var(--c-primary-lighter); } .subnav li:hover > a {color: var(--c-white);} #navigation li:hover .subnav-wrapper {height: auto;} #navigation > li.more { color: var(--c-white); text-decoration: none; padding: 20px 5px; line-height: 20px; position: absolute; top: 0; right: 0; width: 40px; } #navigation > ul#overflow { opacity: 0; visibility: hidden; position: absolute; text-align: left; -webkit-transition-duration: .3s; transition-duration: .3s; } #navigation > li.more:hover ul#overflow {opacity: 1;visibility: visible;} #navigation > ul#overflow > li > a {white-space: nowrap;} /*--Ha az almenüvel rendelkező főmenű bekerül az overflow menübe---*/ #navigation > li.more:hover > .subnav-wrapper {overflow: visible;} #navigation > li.more:hover > .subnav-wrapper > .subnav > li.has-subnav {position: relative;} #navigation > li.more:hover > .subnav-wrapper > .subnav > li.has-subnav > .subnav-wrapper {top: 0; left: -100%; display: none; /*border-right: 4px solid var(--c-primary-lighter);*/} #navigation > li.more:hover > .subnav-wrapper > .subnav > li.has-subnav:hover > .subnav-wrapper {display: inline-block;} #navigation > li.more:hover > .subnav-wrapper > .subnav > li a {padding-right: 20px;padding-left:35px} #navigation > li.more:hover > .subnav-wrapper > .subnav > li.has-subnav > a:after { content: ''; width: 10px; height: 10px; border-right: 1px solid var(--c-darkgray); border-bottom: 1px solid var(--c-darkgray); transform: rotate(135deg) translateX(-10px); display: inline-block; position: absolute; top: 55%; left: 10px; } #navigation > li.more:hover > .subnav-wrapper > .subnav > li.has-subnav:hover > a:after {border-color: white;} /*---header first/home page transparent version---*/ .transparent-header .header-bottom {background: transparent; border: 1px solid rgba(255,255,255,0.4); border-left: 0; border-right: 0; } .transparent-header .header-top {background: transparent;} .transparent-header .header-wrapper.sticky .header-bottom:after, .transparent-header.full-width-header .header-wrapper.sticky:after { content: ''; position: absolute; height: 15px; bottom: -15px; left: 0; width: 100%; background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); display: inline-block; z-index: 50; } .transparent-header #navigation > li {background: transparent; border-left: 1px solid rgba(255,255,255,0.4);} .transparent-header #navigation > li:hover {background: var(--c-primary);} .transparent-header .header-wrapper, .transparent-header .header-wrapper .header-bottom, .transparent-header .header-wrapper .page-logo {transition: var(--tr-all-03s);} .transparent-header .sticky #navigation > li > a, .transparent-header .sticky #navigation > li.more {color: var(--c-primary);} .transparent-header .sticky #navigation > li:hover > a, .transparent-header .sticky #navigation > li.more:hover {color: #fff;} .transparent-header .sticky .header-bottom {background: #fff; border-bottom: 0;} .transparent-header .sticky .page-logo {transform: translateY(-60px);} .transparent-header .sticky #navigation > li.has-subnav > a:after {border-color:var(--c-primary);} .transparent-header .sticky #navigation > li.has-subnav:hover > a:after {border-color: #fff;} .transparent-header .sticky .navend-wrapper {color:var(--c-primary);} /*---itt kell egy olyan kikötés, vagy szabály, ha a többi oldal fejléce alapból más színű---*/ .transparent-header.full-width-header .header-wrapper.sticky .header-bottom:after {display: none;} .transparent-header.full-width-header .header-wrapper.sticky {background-color: #fff;} /*---ha kilógna a viewportból---*/ .edge ul {right:0;} .edge .subnav-wrapper {left: auto; right: 0;} /*---nav base---*/ .wrap { padding-right: var(--gap); padding-left: var(--gap); margin-right: auto; margin-right: auto; margin-left: auto; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; max-width: 1280px; } .wrap.wrap100 {max-width: 100%;} nav {display: block;} .navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--gap2) var(--gap); width: 100%; } .navbar-brand { display: inline-block; margin-right: 1rem; font-size: 1.75em; line-height: inherit; white-space: nowrap; color: #000; text-decoration: none; font-weight: bold; } .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; } .navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; margin-left: auto !important; margin-right: auto !important; } /*--cms menu rules--*/ .mainnav-collapse > .dublino-business-top-menu > ul { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; margin-left: auto !important; margin-right: auto !important; } .navbar-nav a {color: var(--c-dark); text-decoration: none;} /*--cms menu rules--*/ .mainnav-collapse > .dublino-business-top-menu > ul a { text-decoration: none; } .navbar-nav .nav-item {display: inline-block;} /*--cms menu rules--*/ .mainnav-collapse > .dublino-business-top-menu > ul > li { display: inline-block; } .nav-link {display: block;padding: var(--gap);} /*--cms menu rules--*/ .mainnav-collapse > .dublino-business-top-menu > ul > a { display: block;padding: var(--gap);; } .navbar-nav .nav-link { font-weight: 500; outline: 0; box-shadow: none; padding-right: 0; padding-left: 0; } /*--cms menu rules--*/ .mainnav-collapse > .dublino-business-top-menu > ul > a { font-weight: 500; outline: 0; box-shadow: none; padding-right: 0; padding-left: 0; } .arrow-link { padding-right: var(--gap2) !important; background-image: url('../img/svg/select.svg'); background-size: 10px auto; background-repeat: no-repeat; background-position: right 0.5em center; } .just-icons {margin-right: 5px !important;} .just-icons li {margin-right: -1rem !important; position: relative;} .just-icons li .fe { display: inline-block; vertical-align: -.1em; } .navbar-nav.just-icons li a span.cart-count { position: absolute; background: var(--c-accent); font-size: 11px; line-height: 19px; width: auto; min-width: 18px; height: 18px; padding: 0 5px; text-align: center; border-radius: 50%; top: 5px; right: 5px; color: #fff; text-indent: 0; z-index: 10; } .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: ""; background: no-repeat center center; background-size: 100% 100%; margin-right: var(--gap2); position: relative; } .menu-toggle { background: transparent; border: 0; display: flex; margin-left: var(--gap); margin-right: 0; } /*.navbar-toggler-icon { background-image: url('../img/navtoggle.svg');}*/ .menu-toggle .navbar-toggler-icon {/*background-image: url('../img/navtoggle-dark.svg');*/margin-right: 0;} .space-between {justify-content: space-between;} .stretch-items {display: flex; align-items: stretch; width: 100%;} .navbar-boxed {padding-top: 0;} .navbar-boxed .wrap {align-items: stretch;} .navbar-boxed .navbar-container {display: flex; position: relative;} .navbar-boxed .navbar-container.w20 {width: 20%;} .navbar-boxed .navbar-container.w80 {width: 80%;} .navbar-boxed .navbar-form {padding-left: 0;padding-right: 0;align-items: stretch;display: flex;} .navbar-boxed .category-toggle {padding: var(--gap) var(--gap2); font-size: 1em;line-height: 1.5;width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; justify-content: left; background: var(--c-dark);} .navbar-boxed .category-toggle:hover {box-shadow: none !important;} .navbar-boxed .category-toggle:focus {z-index: 10;} .navbar-form * {box-sizing: border-box; -webkit-box-sizing: border-box;} .navbar-form input[type=search] {width: 50%; padding: var(--gap);line-height: 1.5;} .navbar-form input[type=search]:focus, .navbar-form select:focus {z-index: 10;} .navbar-form select {width: 40%; margin-left: -1px; padding: var(--gap) var(--gap2) var(--gap) var(--gap);line-height: 1.5;} .navbar-form .btn { width: calc(10% + 2px); margin-left: -1px; margin-top: 0; padding: var(--gap);line-height: 1.5;} .navbar-form select option {padding-left: var(--gap); line-height: 1.5;} .navbar-brand img {margin: 10px 20px 0 20px; max-width: 160px;} /*---navigation dropdowns & panels---*/ .dropdown { width: 100%; position: absolute; top: 100%; left: 0; } .dropdown-menu { width: 100%;text-align: left; border: 1px solid var(--c-mediumgray); display: none; z-index: 300; position: relative; background: #fff; } .dropdown.active .dropdown-menu {display: inline-block;} .dropdown-menu .dropdown-item:last-child {border-bottom: 0;} .dropdown-item { display: block; width: 100%; padding: var(--gap) 40px var(--gap) var(--gap2); clear: both; font-weight: 400; color: #111; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; position: relative; text-decoration: none; border-bottom: 1px solid var(--c-mediumgray); } .dropdown-toggle::after, .dropright-toggle::after { position: absolute; background-image: url(../img/svg/select.svg); content: ''; width: 10px; height: 10px; background-size: 10px auto; background-repeat: no-repeat; background-position: center; right: var(--gap2); top: 50%; margin-top: -5px; } .dropright-toggle::after {transform: rotate(-90deg);} .dropdown .nav-icon.fe {vertical-align: top; line-height: inherit !important; padding-right: var(--gap2);} .dropdown-panel { width: calc(100% + 1px); position: absolute; top: 0; left: -1px; padding: var(--gap2); background: var(--c-white); border: 1px solid var(--c-mediumgray); border-top: 0; display: none; z-index: 320; } .panel-list-container { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .panel-list-wrapper {width: 25%; padding: 10px; text-align: left;} .panel-list-title {font-weight: 500; font-size: 16px; width: 100%; position: relative; padding-bottom: 20px;} .v-container .panel-list-title {padding-bottom: 5px; padding-top: 10px;} .panel-list-title a {color: var(--c-dark);} .panel-list {width: 100%;} .panel-list li {width: 100%;} .panel-list li a {font-size: var(--fs-sm); line-height: 18px; padding: 3px 0; text-decoration: none; color: var(--c-dark); font-weight: 300; width: 100%;} .panel-list li a:hover, .panel-list-title a:hover {color: var(--c-black); text-decoration: none;} .has-dropdown .dropdown .panel-list a {padding: 5px 0; -webkit-backface-visibility: vissible; backface-visibility: visible;} .has-dropdown {position: relative;} .has-dropdown .dropdown { background: #fff; border: 1px solid var(--c-mediumgray); padding: var(--gap); width: auto; min-width: 200px; z-index: 400; left: 50%; top: 100%; transform: translate(-50%,10%); visibility: hidden; opacity: 0; transition: var(--tr-all-02s); transition-property: visibility,transform,opacity; } .has-dropdown:hover .dropdown {visibility: visible;transform: translate(-50%,0);opacity: 1;} /*.has-dropdown.active .dropdown */ .has-dropdown .dropdown.col-1 {min-width: 200px;} .has-dropdown .dropdown.col-2 {min-width: 400px;} .has-dropdown .dropdown.col-3 {min-width: 600px;} .col-1 .panel-list-wrapper {width: 100%;} .col-2 .panel-list-wrapper {width: 50%;} .col-3 .panel-list-wrapper {width: 33.33%;} .has-dropdown:hover .nav-link, .nav-link:hover {color: var(--c-accent);} /*---navbar-topbar--*/ .navbar.navbar-topbar { padding: 0 var(--gap); border-bottom: 1px solid var(--mediumgray); background: var(--c-lightgray); font-size: var(--fs-sm); } .navbar.navbar-topbar .nav-icon { width: 18px; height: 18px; float: left; vertical-align: top; margin-right: var(--gap); } .navbar-topbar .dropdown, .navbar-topbar .dropdown.col-1 { min-width: auto; width: auto; padding: 0; } .navbar-topbar .dropdown .panel-list-wrapper, .navbar-topbar .dropdown .panel-list li {padding: 0;} .navbar-topbar .dropdown .panel-list li a { white-space: nowrap; display: flex; padding: var(--gap); border-bottom: 1px solid var(--c-mediumgray); } .topbar-toggle {background: transparent;border: 0;display: flex;margin-left: auto;} .topbar-toggle .navbar-toggler-icon {margin-right: 0;} .topbar-toggle .fe {line-height: 1.4;} .navbar-expand { flex-flow: row nowrap; justify-content: flex-start; } .navbar-expand .wrap { max-width: 100%; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; } .navbar-expand .navbar-nav .nav-link {padding-right: 1rem;padding-left: 1rem;} .navbar-expand .navbar-nav {flex-direction: row;} /*--cms menu rules--*/ .dublino-business-top-menu > ul > li {position: relative;} .dublino-business-top-menu > ul > li > ul {position: absolute;padding: var(--gap);width: auto;min-width: 200px;z-index: 400;left: 50%;top: 100%;transform: translate(-50%,10%);visibility: hidden;opacity: 0;background: var(--c-dark);border: 1px solid var(--c-dark);} .dublino-business-top-menu > ul > li > div > a {display: block;padding: var(--gap);color: #111;font-weight: 500;padding-right: 1rem; padding-left: 1rem;} .dublino-business-top-menu > ul > li > div > a:hover {color: var(--c-gold);} .dublino-business-top-menu > ul > li:hover > ul {visibility: visible;transform: translate(-50%,0);opacity: 1;transition: var(--tr-all-02s);transition-property: visibility,transform,opacity;} .dublino-business-top-menu > ul > li > ul > li {width: 100%;} .dublino-business-top-menu > ul > li > ul > li a {color: var(--c-goldlight);line-height: 16px; padding: 5px 0;font-size: 15px;float: left;width: 100%;text-align: left;vertical-align: top;} .dublino-business-top-menu > ul > li > ul > li a:hover {color: #fff;text-decoration: underline;} .dublino-business-product-menu {width: 100%;position: absolute;top: 100%;left: 0;} .dublino-business-product-menu > ul {width: 100%;text-align: left;border: 1px solid var(--c-mediumgray); display: none;z-index: 300;position: relative; background: #fff;} .dublino-business-product-menu.active > ul {display: inline-block;} /*---mod to relative 2022-05-16--*/ .dublino-business-product-menu > ul > li {width: 100%; position: relative;} .dublino-business-product-menu > ul > li > div > a { display: block; width: 100%; padding: var(--gap) 40px var(--gap) 50px; clear: both; font-weight: 400; color: #111; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; position: relative; text-decoration: none; border-bottom: 1px solid var(--c-mediumgray); } .dublino-business-product-menu > ul > li.active > div > a {color: #fff;} .dublino-business-product-menu > ul > li:last-child > div > a {border-bottom: 0;} .dublino-business-product-menu > ul > li > div > a::after { position: absolute; background-image: url(../img/svg/select.svg); content: ''; width: 10px; height: 10px; background-size: 10px auto; background-repeat: no-repeat; background-position: center; right: var(--gap2); top: 50%; margin-top: -5px; } .dublino-business-product-menu > ul > li > div > a::after {transform: rotate(-90deg);} .dublino-business-product-menu > ul > li .nav-icon.fe {vertical-align: top; line-height: inherit !important; padding-right: var(--gap2);} .dublino-business-product-menu > ul > li .nav-icon.fe svg {fill: var(--c-goldlight);height: 24px;width: auto;} .dublino-business-product-menu > ul > li > div {position: relative;} .dublino-business-product-menu > ul > li > div > img { height: 24px; width: auto; position: absolute; top: 50%; margin-top: -12px; left: 25px; margin-left: -12px; } .dublino-business-product-menu > ul > li:hover > div > img, .dublino-business-product-menu > ul > li.active > div > img {filter: brightness(10) grayscale(100%);} .dublino-business-product-menu > ul > li > div {width: 100%; float: left;} /*---cms boxed menu - submenu panel---*/ .dublino-business-product-menu > ul > li > ul { max-width: 1200px; position: absolute; top: 0; left: 100%; z-index: 300; padding-left: 200px; background: var(--c-dark); color: #fff; padding: var(--gap2); display: flex; flex-direction: row; flex-wrap: wrap; visibility: hidden; opacity: 0; transform: translateY(-10px); } /*---width szamolasa--*/ .dublino-business-product-menu > ul > li > ul { width: calc((1280px - var(--gap2)) - (((1280px - var(--gap2)) / 5) - 2px)); } .dublino-business-product-menu > ul > li > ul.active { opacity: 1; visibility: visible; transform: translateY(-1px); transition: all 0.3s ease; transition-property: visibility,transform,opacity; } .dublino-business-product-menu > ul > li > ul > li { width: 25%; padding: 10px; text-align: left; } .dublino-business-product-menu > ul > li > ul > li > div {width: 100%;} .dublino-business-product-menu > ul > li > ul > li > div a {width: 100%; color: #fff;font-size: 18px; font-family: 'Montserrat'; text-decoration: none; font-weight: 500;} .dublino-business-product-menu > ul > li > ul > li > div a:hover {text-decoration: underline;} .dublino-business-product-menu > ul > li > ul > li > ul, .dublino-business-product-menu > ul > li > ul > li > ul > li, .dublino-business-product-menu > ul > li > ul > li > ul > li div {width: 100%;} .dublino-business-product-menu > ul > li > ul > li > ul > li div a { font-size: var(--fs-sm); line-height: 18px; padding: 3px 0; text-decoration: none; color: var(--c-dark); font-weight: 300; width: 100%; } .dublino-business-product-menu > ul > li > ul > li > ul > li div a:hover {text-decoration: underline;} /*---cms menu - dublino specific--*/ .dublino-business-product-menu > ul {background: var(--c-dark); border: 1px solid var(--c-dark);border-top: 1px solid rgba(255,255,255,0.2);} .dublino-business-product-menu > ul > li > div > a {color: var(--c-goldlight); border-bottom: 1px solid rgba(255,255,255,0.2); line-height: 24px;} .dublino-business-product-menu > ul > li > div > a:hover {color: var(--c-white);} .dublino-business-product-menu > ul > li > div > a::after {filter: invert(100%);} .dublino-business-product-menu > ul > li > ul > li > ul > li div a {color: var(--c-goldlight);line-height: 18px;padding: 8px 0;font-size: 15px;float: left;} /*---search-panel---*/ .search-container { display: flex; width: 100%; position: fixed; text-align:center; background: #fff; z-index: 9000; transform: translateY(-110%); } .search-container.active {transform: translateY(0);transition: transform 0.3s ease;} .search-container .wrap {padding: calc(2 * var(--gap2)) var(--gap);} .search-container form { width: 100%; text-align: left; position: relative; } .search-container form fieldset {margin-bottom: 0;} .search-container .input-wrap { width: 100%; position: relative; } .search-container form legend {font-size: var(--fs-base); color: var(--c-darkgray);} .search-container input {box-sizing: border-box; border: 0 !important; border-bottom: 1px solid var(--c-mediumgray) !important; padding-left: 0 !important; line-height: 2; font-size: 1.5em !important;} .search-container form button { position: absolute; top: 0; right: 0; margin: 0; height: 100%; border: 0; box-shadow: none; background: transparent; } .search-container form button:hover {box-shadow: none;} .search-container form button span {font-size: 1.5em;} @media screen and (min-width: 1000px){ .navbar:not(.navbar-vertical).navbar-expand-xl .navbar-nav:first-child {margin-left: -1rem;} .navbar-expand-xl .navbar-collapse {display: flex!important;flex-basis: auto;} .navbar-expand-xl .navbar-nav {flex-direction: row;} .navbar-expand-xl {flex-flow: row nowrap;justify-content: flex-start;} .navbar-expand-xl .navbar-nav .nav-link {padding-right: 1rem;padding-left: 1rem;} /*--cms menu rules--*/ .navbar:not(.navbar-vertical).navbar-expand-xl > .dublino-business-top-menu > ul:first-child {margin-left: -1rem;} .navbar-expand-xl .navbar-collapse {display: flex!important;flex-basis: auto;} .navbar-expand-xl .dublino-business-top-menu > ul {flex-direction: row;} .navbar-expand-xl {flex-flow: row nowrap;justify-content: flex-start;} .navbar-expand-xl .dublino-business-top-menu > ul li a {padding-right: 1rem;padding-left: 1rem;} } .h-container {width: 100%;} /*---vartical nav---*/ .v-container { width: 300px; height: 100%; height: 100vh; display: flex; text-align: left; padding: var(--gap2); padding-right: 0; position: relative; border-right: 1px solid #eee; } .sticky-left { position: -webkit-sticky; position: sticky; top: 0; overflow-y: auto; } .v-container * { width: 100%; } .v-container .navbar-brand {margin-right: 0;} .v-container .wrap { flex-direction: column; display: flex; flex-wrap: wrap; } .v-container .dropdown { width: 100% !important; min-width: 100% !important; border: 0; position: relative; padding: 0; display: none; transform: translate(0,0); visibility: visible; opacity: 1; left: 0; } .v-container .has-dropdown:hover .dropdown { transform: translate(0,0); } .navbar-vertical { align-items: baseline; justify-content: flex-start; padding-top: 0; padding-bottom: 0; } .navbar-vertical .panel-list-wrapper { width: 100% !important; padding: 0; } .v-container .has-dropdown a {padding-right: var(--gap2);} .v-container .has-dropdown a i {width: var(--gap2); text-align:center; position: absolute; right: 0; transition: all 0.1s ease;font-size: 1.1em; margin-top: 2px;} .v-container .has-dropdown.active > a {color: var(--c-accent);} .v-container .has-dropdown.active a i {transform: rotate(180deg);} .v-container .mainnav-collapse > .navbar-nav > li > a {font-size: 1.1em;} .v-container .mainnav-collapse {margin: 5em 0;} .navbar-form.line-search { align-items: stretch; display:flex; max-width: 550px; border-bottom: 1px solid #111; } .navbar-form.line-search input { position: relative; flex: 1 1 0%; min-width: 0; margin-bottom: 0; border: 0; } .navbar-form.line-search input:focus, .navbar-form.line-search input:hover, .navbar-form.line-search button.btn:hover, .navbar-form.line-search button.btn {border: 0 !important; box-shadow: none !important; } /*---layout main wrappers ---*/ .page-container {width: 100%;} .page-wrapper {width: 100%; text-align: center; background: #fff; display: flex; flex-direction: column;} .page-wrapper.distance-left {width: calc(100% - 300px); float: right;} .page-content {width: 1280px; min-height: 1000px; background: #fff; display: inline-block; float: none; vertical-align: top;} .wrap100 .page-content {width: 100%; padding: 0 var(--gap);} .has-shadow {box-shadow: 0 10px 10px rgba(0,0,0,0.1);} .page-content.has-shadow {box-shadow: 0 0 10px rgba(0,0,0,0.1);} .pageoverlay {position: fixed;top: 0;left: 0;bottom: 0;right: 0; width: 100%;height: 100%;background-color: rgba(0,0,0,0.7);z-index: 7500;visibility: hidden;opacity: 0;transition: var(--tr-all-03s);} .pageoverlay.active {opacity: 1;visibility: visible;} /*---common styles--*/ .page-row {width: 100%; padding: var(--gap) var(--gap2); } .product .page-row {padding: var(--gap) 0;} .row {width: 100%; float: left;} .w33 {width: 33.333%;} .w20 {width: 20%;} .w30 {width: 30%;} .w40 {width: 40%;} .w50 {width: 50%;} .w100 {width: 100%;} .bx100 {width: 100%; display: flex; flex-wrap: wrap;} .bx20 {width: 20%; padding: 20px; display: flex; color: #fff;} .bx-shadow {padding: 20px;} .pd-side10 {width: 100%; padding: var(--gap) 10%;} .pd-side20 {width: 100%; padding: var(--gap) 20%;} .box50, .form-l, .box-l, .form-r, .box-r {width: 50%; padding-bottom: var(--gap);} .box100 {width: 100%; padding-bottom: var(--gap);} .form-l, .box-l {padding-right: var(--gap); padding-bottom: var(--gap);} .form-r, .box-r {padding-left: var(--gap); padding-bottom: var(--gap);} .fl-r {float: right !important;} .fl-l {float: left;} .fl-n {float: none;} .tx-r, .text-r {text-align: right;} .tx-l {text-align: left;} .tx-c {text-align:center;} .col-25 {width: 25%;} .col-75 {width: 75%;} .wrap100 .col-25 {width: 20%;} .wrap100 .col-75 {width: 80%;} .c25c75 .col-75 {padding-left: var(--gap); margin-top: var(--gap2);} .c25c75 .col-25 {padding-right: var(--gap); margin-top: var(--gap2);} .mt10 {margin-top: 10px;} .mt20 {margin-top: 20px;} .mt30 {margin-top: 30px;} .mt40 {margin-top: 40px;} .pt10 {padding-top: 10px;} .pt20 {padding-top: 20px;} .pt30 {padding-top: 30px;} .pt40 {padding-top: 40px;} .pt60 {padding-top: 60px;} .pt70 {padding-top: 70px;} .pt95 {padding-top: 95px;} .pb10 {padding-bottom: 10px;} .pb20 {padding-bottom: 20px;} .pb30 {padding-bottom: 30px;} .pb40 {padding-bottom: 40px;} .pb60 {padding-bottom: 60px;} .pb70 {padding-bottom: 70px;} .gap {gap: var(--gap);} .pb-g {padding-bottom: var(--gap);} .pt-g {padding-top: var(--gap);} .pl-g {padding-left: var(--gap);} .pr-g {padding-right: var(--gap);} .pr-0 {padding-right: 0 !important} .pl-0 {padding-left: 0 !important} .mr-0 {margin-right: 0 !important;} .ml-0 {margin-left: 0 !important;} .no-margin {margin: 0 !important;} .mt-g {margin-top: var(--gap);} .mb-g {margin-bottom: var(--gap);} .ml-g {margin-left: var(--gap);} .mr-g {margin-right: var(--gap);} .mr-auto, .mx-auto {margin-right: auto!important;} .ml-auto, .mx-auto {margin-left: auto!important;} .per25 {width: 25%;} .per75 {width: 75%;} .clear {clear: both; float: left; width: 100%;} hr {width: 100%; height: 1px; border: 0; background: var(--c-mediumgray);} .flex-grow {flex-grow: 1;} .flex {display: flex;} .self-end {align-self: end;} .justify-end {justify-content: flex-end;} .justify-center {justify-content: center;} .align-center {align-items: center;} .flex-row {flex-direction: row!important;} .position-sticky {position: -webkit-sticky!important;position: sticky!important;} /*---Buttons---*/ .btn { font-size: 1em; line-height: 1.2; text-decoration: none; -webkit-font-smoothing: antialiased; padding: 10px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-flex; position: relative; white-space: nowrap; justify-content: center; align-items: center; border-radius: var(--btn-radius); border: 0; transition: var(--tr-all-02s); background: var(--c-white); /*box-shadow: 0 1px 1px rgba(0,0,0,0.2);*/ cursor: pointer; float:left; border: 1px solid #000; } .btn:hover {box-shadow: 0 5px 5px rgba(0,0,0,0.1);} .btn-light {color: var(--c-black);background: var(--c-lightgray);} .btn-primary {color: var(--c-white);background: var(--c-primary); border: 0;} .btn-accent {color: var(--c-white);background: var(--c-accent); border: 0;} .btn-sm {font-size: 0.7em; padding: 6px 15px;} .btn-md {font-size: 1.2em; padding: 12px 25px;} .btn-lg {font-size: 1.4em; padding: 15px 30px;} .btn-disabled {opacity: 0.6;cursor: not-allowed;} .btn.btn-disabled, .btn.btn-disabled:hover {box-shadow: none;} .btn.btn-disabled:active {transform: translate(0,0);box-shadow: none;} .btn-icon span:nth-child(2) {padding-left: calc(0.5 * var(--gap));} .btic {width: 1em; height: 1em; align-items: center;} .btic svg {display: inline-block; max-width: 1em; max-height: 1em} .text-desktop-hidden {width: 0; overflow: hidden; display: none;} .btn-outline { border: 1px solid var(--c-mediumgray); } /*---social login--*/ #netorigo_login_buttons { width: 100%; } .netorigo_login_button { box-sizing: border-box; position: relative; margin: 0.2em 0; padding: 0 15px 0 55px; border: none; text-align: left; line-height: 40px; white-space: nowrap; border-radius: 0.2em; font-size: 18px; color: #FFF; width: 50%; display: block; } .netorigo_login_button:before { content: ""; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 40px; height: 100%; } .netorigo_login_button:focus {outline: none;} .netorigo_login_button:active {box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);} /* Facebook */ .netorigo_login_button-Facebook {background-color: #4C69BA;background-image: linear-gradient(#4C69BA, #3B55A0);text-shadow: 0 -1px 0 #354C8C;} .netorigo_login_button-Facebook:before { border-right: #364e92 1px solid; background-image: url('../img/svg/facebook-logo.svg'); background-repeat: no-repeat; background-position: center; background-size: 25px auto; } .netorigo_login_button-Facebook:hover, .netorigo_login_button-Facebook:focus { background-color: #5B7BD5; background-image: linear-gradient(#5B7BD5, #4864B1); } /* Google */ .netorigo_login_button-Google {background: #DD4B39;} .netorigo_login_button-Google:before { border-right: #BB3F30 1px solid; background-image: url('../img/svg/google-logo.svg'); background-repeat: no-repeat; background-position: center; background-size: 25px auto; } .netorigo_login_button-Google:hover, .netorigo_login_button-Google:focus {background: #E74B37;} /*---Text size---*/ .fs-huge {font-size: var(--fs-xxxxl); font-weight: bold;} .fs-display {font-size: var(--fs-xxxl); font-weight: bold;} h1 {font-size: var(--fs-xxl);} h2 {font-size: var(--fs-xl); font-weight: 500;} h3 {font-size: var(--fs-lg);} h4 {font-size: var(--fs-md);} h5 {font-size: var(--fs-base);} p {font-size: var(--fs-base); font-weight: 300;} .fs-md {font-size: var(--fs-md);} .fs-lg {font-size: var(--fs-lg);} .fs-base {font-size: var(--fs-base);} .fs-sm {font-size: var(--fs-sm);} .fs-sm2 {font-size: var(--fs-sm2);} .fs-sm3 {font-size: var(--fs-sm3);} .fs-xs {font-size: var(--fs-xs);} /*---Form---*/ form {width: 100%;} fieldset {border: 0; width: 100%; margin-bottom: 40px;} fieldset legend {width: 100%; font-size: var(--fs-md); padding-bottom: 5px;} .form-legend {font-weight: bold; padding-bottom: 10px; width: 100%; float: left;} ul.inputlist li, .form-group .form-check {width: 100%; padding: 5px 0; text-align: left;} ul.inputlist li label, .form-group .form-check .form-check-label {position: relative;cursor: pointer;padding-left: 28px;font-weight: 400;color: var(--c-labelgray);-webkit-font-smoothing: antialiased;width: 100%;} .togglebox {width: 100%; overflow: hidden; display: none;} .togglebox.active {display: inline-block;} ::-webkit-input-placeholder {color: #bbb;} input:focus::-webkit-input-placeholder {color: transparent;} input[type="checkbox"], input[type="radio"] {position: absolute;left: -999em;} input[type="checkbox"] + label:before { content: ""; display: inline-block; width: 20px; height: 20px; border: 1px solid var(--c-mediumgray); border-radius: 0; position: absolute; top: calc((1.4em - 20px)/2); left: 0; } input[type="radio"] + label:before { content: ""; display: inline-block; width: 20px; height: 20px; border: 1px solid var(--c-mediumgray); border-radius: 100%; position: absolute; top: calc((1.4em - 20px)/2); left: 0; } input[type="radio"]:active + label:before { border: 1px solid var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-shadow); } input[type="checkbox"]:focus + label:before, input[type="checkbox"]:active + label:before { border: 1px solid var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-shadow); } input[type="radio"]:checked + label:before { content: ""; background-color: var(--c-primary); border-color: var(--c-primary); background-image: url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PGcgY2xhc3M9J25jLWljb24td3JhcHBlcicgZmlsbD0nI2ZmZmZmZic+PGNpcmNsZSBjeD0nOCcgY3k9JzgnIHI9JzgnIGZpbGw9JyNmZmZmZmYnPjwvY2lyY2xlPjwvZz48L3N2Zz4=); background-size: 8px 8px; background-repeat: no-repeat; background-position: center; } input[type="checkbox"]:checked + label:before { content: ""; background-color: var(--c-primary); border-color: var(--c-primary); background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMicgdmlld0JveD0nMCAwIDEyIDEyJz48cG9seWxpbmUgcG9pbnRzPScxIDYuNSA0IDkuNSAxMSAyLjUnIGZpbGw9J25vbmUnIHN0cm9rZT0nI0ZGRkZGRicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2Utd2lkdGg9JzInLz48L3N2Zz4=); background-size: 70%; background-repeat: no-repeat; background-position: center 40%; } select, input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="password"], input[type="email"], textarea { border: 1px solid var(--c-mediumgray); border-radius: var(--ipt-radius); -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: var(--gap); background-color: var(--c-white); transition: var(--tr-all-02s); font-size: 1em; line-height: 1.2; /*--???---*/ width: 100%; } select:focus, input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { border: 1px solid var(--c-dark); } select.error, select.error:focus, input[type="text"].error, input[type="text"].error:focus, input[type="search"].error, input[type="search"].error:focus, input[type="number"].error, input[type="number"].error:focus, input[type="date"].error, input[type="date"].error:focus, input[type="password"].error, input[type="password"].error:focus, input[type="email"].error, input[type="email"].error:focus, textarea.error, textarea.error:focus { border: 1px solid var(--c-error); } .iptnum {width: auto !important;} form input[disabled] {cursor: not-allowed;} select {padding-right: 40px;} .select { -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; background-image: url('../img/svg/select.svg'); background-size: 10px auto; background-repeat: no-repeat; background-position: right 1.5em center; } .listorder .select {background-position: right 1em center;} textarea {resize: vertical;min-height: 80px;} .input-number {width: 5em;position: relative;} .input-number input {padding-right: 0} .input-number .input-number-btns { position: absolute; height: calc(100% - 2px); background: #fff; width: 35px; top:1px; right: 1px; } .input-number-btns .increase, .input-number-btns .decrease { width: 100%; height: 50%; border: 0; font-size: 11px; line-height: 16px; border-radius: var(--ipt-radius); position: absolute; background: var(--c-mediumgray); color: var(--c-black); text-decoration: none; text-align:center; } .input-number-btns .increase {top: 0;} .input-number-btns .decrease {bottom: 0;} .input-number-btns .increase:hover, .input-number-btns .decrease:hover {background: var(--c-primary); color:var(--c-white);} .input-number-horizontal {width: 8em;position: relative;border: 1px solid var(--c-mediumgray); border-radius: var(--ipt-radius);} .input-number-horizontal.small {width: 120px; margin-top: 5px; border-width: 1px;} .input-number-horizontal input {width: 100%; text-align: center; border: 0;} .input-number-horizontal.small input { padding: 6px 10px; font-size: 0.8em; } .input-number-horizontal input:focus {border: 0;box-shadow: none;} .input-number:focus-within input, .input-number-horizontal:focus-within {border: 1px solid var(--c-primary); transition: var(--tr-all-02s);} .input-number-horizontal button {width: 2em; position: absolute; height: 100%;border: 0;} .input-number-horizontal.small button {width: 1.7em;} .input-number-horizontal button:after {content: ''; width: 100%; height: 100%; background-repeat: no-repeat;background-size: 14px auto; background-position: center; top: 0; left: 0; position: absolute;} .input-number-horizontal.small button:after {background-size: 10px auto;} .input-number-horizontal.small .increase:after {background-size: 8px auto;} .input-number-horizontal .decrease {left: 0;} .input-number-horizontal .increase {right: 0;} .input-number-horizontal .decrease:after {background-image: url(../img/svg/minus.svg);} .input-number-horizontal .increase:after {background-image: url(../img/svg/plus.svg); } .input-number-horizontal.small button:after {/*background: none;*/} .input-number-horizontal.small .decrease:after {/*content: '-';*/ color: #000} .input-number-horizontal.small .increase:after {/*content: '+';*/ color: #000} .input-number-horizontal button:hover {background: var(--c-primary);} .input-number-horizontal button:hover:after {filter: invert(100);} .input-number-horizontal:focus-within button:hover, .input-number-horizontal button:active {border-radius: 0;} .input-password {position: relative;width: 100%;} .input-password input {padding-right: 50px; width: 100%;} .input-password button {position: absolute; right: 4px; background: transparent; height: 80%; width: 40px; top: 50%; transform: translate(0,-50%); border: 0;} .pass-show, .pass-hide {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 30px auto;} .pass-hide {display: none; background-image: url('../img/svg/pass-hide.svg');} .pass-show {background-image: url('../img/svg/pass-show.svg');} form .btn {margin-top: 10px;} /*---Costum Style for noUislider--*/ .rangeslider-wrapper {padding: 0 4px;width: 100%; float: left; margin-bottom: 10px} .rangeslider.noUi-horizontal {margin: 30px 0 15px 0;height: 8px;background-color: var(--c-mediumgray);border: 0;box-shadow: none;border-radius: 4px;width: 100%;} .rangeslider.noUi-horizontal .noUi-origin {border-radius: 4px;height: 8px;border: 0;background: var(--c-mediumgray); box-shadow: none;} .rangeslider.noUi-horizontal .noUi-connect {background: var(--c-primary);} .rangeslider.noUi-horizontal .noUi-handle { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); background: var(--c-white); top: -8px; display: inline-block; box-shadow: 0 3px 6px rgba(0,0,0,0.2); } .rangeslider.noUi-horizontal .noUi-handle-lower {left: -4px; right: 0;} .rangeslider.noUi-horizontal .noUi-handle-upper {left: -22px; right: 0;} .rangeslider.noUi-horizontal .noUi-handle:before, .rangeslider.noUi-horizontal .noUi-handle:after {display: none;} .rangeslider.noUi-horizontal .noUi-handle:hover {cursor: grab;} .rangeslider.noUi-horizontal .noUi-handle:active {box-shadow: 0 3px 6px rgba(0,0,0,0.2), 0 0 0 3px var(--c-primary-shadow2); cursor: grabbing;} .rangeslider-wrapper .noUi-tooltip { display: none; position: absolute; border: 0; border-radius: 2px; background: #000; color: #fff; padding: 0 6px; height: 22px; line-height: 22px; text-align: center; font-size: 12px; opacity: 0; left: 50%; transform: translateX(-50%) scale(0,0); -webkit-transform: translateX(-50%) scale(0,0); -moz-transform: translateX(-50%), scale(0,0); visibility: hidden; transition: var(--tr-all-02s); -webkit-transition: var(--tr-all-02s); -moz-transition: var(--tr-all-02s); } .rangeslider-wrapper .noUi-horizontal .noUi-handle-lower:active .noUi-tooltip, .rangeslider-wrapper .noUi-horizontal .noUi-handle-upper:active .noUi-tooltip {opacity: 1;display: block; visibility: visible; transform: translateX(-50%) scale(1,1);-webkit-transform: translateX(-50%) scale(1,1);-moz-transform: translateX(-50%) scale(1,1);} .rangeslider-wrapper .noUi-tooltip:after { content: ''; bottom: -6px; position:absolute; width: 0; height: 0; border-style: solid; border-width: 6px 6px 0 6px; border-color: #000 transparent transparent transparent; left: 50%; margin-left: -6px; } .rangeslider-wrapper .noUi-horizontal .noUi-handle-lower .noUi-tooltip {top: -32px;} .rangeslider-wrapper .noUi-horizontal .noUi-handle-upper .noUi-tooltip {top: -32px;} .rangeslider-wrapper .rangetag {font-size: 0.6em;} .rangeslider-wrapper .rangetag.right {float: right;} /*---choice buttons--*/ .choice-btn {width: 100%; margin: 5px 0;} .choice-btn label {width: 100%;position: relative;cursor: pointer; padding: 15px 15px 15px 60px; border: 1px solid var(--c-mediumgray);border-radius: var(--ipt-radius); transition: var(--tr-all-02s);} .choice-btn:hover label {border: 1px solid var(--c-gray);} .choice-btn:focus-within label {border: 1px solid var(--c-primary);box-shadow: 0 0 0 2px var(--c-primary-shadow);} .choice-btn input[type="radio"]:checked + label {border: 1px solid var(--c-primary);} .choice-btn input[type="radio"] + label:before {top: 50%; margin-top: -9px; left: 20px;} .choice-btn .choice-text {width:65%;} .choice-btn .choice-text p {width: 100%;} .choice-btn .choice-text p:nth-child(1) {font-weight: 400;} .choice-btn .choice-text p:nth-child(2) {font-weight: 400; font-size: 0.8em; color: var(--c-darkgray);} .choice-btn .choice-price {width: 35%; float: right; text-align:right;} .choice-btn .choice-price p:nth-child(1) {font-weight: 400; text-align: right;} /*---choice with accordian---*/ .accordion-wrapper .choice-btn label, .accordion-wrapper .choice-btn:hover label, .accordion-wrapper .choice-btn:focus-within label, .accordion-wrapper .choice-btn input[type="radio"]:checked + label {border: 0; box-shadow: none;} .accordion-wrapper, .accordion-box {width: 100%;} .accordion-wrapper { border: 1px solid var(--c-mediumgray); border-radius: var(--ipt-radius); } .accordion-wrapper .accordion-box {margin: 0; border-bottom: 1px solid var(--c-mediumgray);} .accordion-wrapper .accordion-box:last-child {border-bottom: 0;} .accordion-inner { border-top: 1px solid var(--c-mediumgray); width: 100%; padding: 20px; background-color: var(--c-lightgray); } /*---switch buttons---*/ .swl {width: 100%; border-top: 2px solid var(--c-mediumgray); margin: 30px 0;} .swl li {width: 100%; border-bottom: 1px solid var(--c-mediumgray); padding: 5px 10px; display: flex; align-items: center;} .swl li:hover {background: var(--c-lightgray);} .swl-name {font-size: var(--fs-sm); width: 75%;} .swl-ipt {width: 25%; float: right; text-align: right;} .switch-btn { --switch-width: 48px; --switch-height: 24px; --switch-padding: 2px; --switch-animation-duration: 0.2s; } .switch-btn {position: relative;display: inline-flex;flex-shrink: 0; align-items: center;width: var(--switch-width);height: var(--switch-height);border-radius: 50em;padding: var(--switch-padding) 0;box-sizing: content-box;} .switch-btn input {margin: 0;padding: 0;opacity: 0;height: 0;width: 0;pointer-events: none;position: absolute;left: 0;top: 0;} .switch-btn input[type="checkbox"] + label:before {display: none;} .switch-btn label { width: 100%; height: 100%; color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: var(--c-mediumgray); border-radius: inherit; z-index: 1; transition: var(--tr-all-03s); overflow: hidden; } .switch-btn input:focus+label, .switch-btn input:active+label {box-shadow: 0 0 0 2px rgba(0,0,0,0.1);} .sw { position: absolute; background-color: var(--c-white); width: calc(var(--switch-height) - var(--switch-padding) * 2); height: calc(var(--switch-height) - var(--switch-padding) * 2); border-radius: 50%; z-index: 2; pointer-events: none; box-shadow: none; left: 2px; transition: var(--tr-all-02s); will-change: left; } .switch-btn input:checked+label {background-color: var(--c-primary);} .switch-btn input:checked:focus+label, .switch-btn input:checked:active+label {box-shadow: 0 0 0 2px var(--c-primary-shadow);} .switch-btn input:checked+label+.sw {left: calc(100% - var(--switch-height) + var(--switch-padding));} label.iptlbl {width: 100%;padding-bottom: 5px;font-size: var(--fs-sm); text-align: left; color: var(--c-labelgray);} label.iptlbl {} .msg-wrapper, .msg-wrapper p {width: 100%;} .msg-success {padding: 10px; border-radius: var(--ipt-radius); background: var(--c-success-lighter); margin-top: 10px;} .msg-warning {padding: 10px; border-radius: var(--ipt-radius); background: var(--c-warning-lighter); margin-top: 10px;} .msg-error {padding: 10px; border-radius: var(--ipt-radius); background: var(--c-accent-shadow); margin-top: 10px;} /*---tabs---*/ .tabbox-wrapper {width: 100%; margin: var(--gap2) 0; overflow: hidden;} .tabnav {width: 100%; position: relative;} .tabnav li a {padding: calc(0.7 * var(--gap)) var(--gap); text-decoration: none; color: var(--c-darkgray); position: relative;} .tabnav li.selected a {color: var(--c-black); text-decoration: underline;} .panel-wrapper {width: 100%; display: inline-block; float: left;} .panel {display: inline-block; width: 100%; float: left; padding: var(--gap2); text-align: left;} .tabbox-wrapper .panel:not(.active) {height: 0; overflow: hidden; padding: 0; border: 0;} .sliderwrap .panel {padding: 0; position: relative; padding: 30px 0; height: auto; overflow: visible;} .sliderwrap .panel:not(.active) {height: 0; overflow: hidden; padding: 0;} .sliderwrap .tabnav li {float: none;} .sliderwrap .tabnav li a {text-decoration: none; font-weight: 500; font-size: var(--fs-base); border-bottom: 1px solid #fff;} .sliderwrap .tabnav li.selected a {border-bottom: 1px solid #111;} .panel.active {display: inline-block;} .tab-style-line .tabnav:before {border-bottom: 2px solid var(--c-mediumgray); content:''; width: 100%; bottom: 0; left: 0; z-index: 0; position: absolute;} .tab-style-line .tabnav li.selected {border-bottom: 2px solid var(--c-primary); position: relative; z-index: 2;} .tab-style-line .tabnav li a {text-decoration: none;} .tab-style-line .tabnav li.selected > a {color: var(--c-primary);} .tab-style-ear .tabnav {border-bottom: 2px solid var(--c-mediumgray);} .tab-style-ear .tabnav li {border: 2px solid transparent; border-bottom: 0; border-radius: var(--ipt-radius) var(--ipt-radius) 0 0;} .tab-style-ear .tabnav li:not(.selected):hover {background: var(--c-lightgray);} .tab-style-ear .tabnav li.selected {border: 2px solid var(--c-mediumgray); border-bottom: 0; position: relative; z-index: 2; background: var(--c-white);} .tab-style-ear .tabnav li a {text-decoration: none;} .tab-style-ear .tabnav li.selected > a {color: var(--c-primary);} .tab-style-ear .tabnav li.selected > a:before {border-bottom: 2px solid var(--c-white); content:''; width: 100%; bottom: -2px; left: 0; z-index: 0; position: absolute;} .tab-style-box .panel {border: 2px solid var(--c-mediumgray);} .tab-style-box .tabnav {background: var(--c-mediumgray); width: auto;border-radius: var(--ipt-radius) var(--ipt-radius) 0 0;} .tab-style-box .tabnav li {border: 2px solid transparent; border-bottom: 0; } .tab-style-box .tabnav li:not(.selected):hover {background: var(--c-lightgray);} .tab-style-box .tabnav li.selected {border: 2px solid var(--c-mediumgray); border-bottom: 2px solid var(--c-white); border-bottom-width: 0; position: relative; z-index: 2; background: var(--c-white);} .tab-style-box .tabnav li a {text-decoration: none; color: var(--c-dar);} .tab-style-box .tabnav li.selected > a {color: var(--c-primary);} .tab-style-box .tabnav li.selected > a:before {border-bottom: 2px solid var(--c-white); content:''; width: 100%; bottom: -2px; left: 0; z-index: 0; position: absolute;} .tab-style-box .tabnav li:first-child {border-radius: var(--ipt-radius) 0 0 0;} .tab-style-box .tabnav li:last-child {border-radius: 0 var(--ipt-radius) 0 0;} .tab-style-vertical .tabnav {width: 25%; float: left; padding-right: var(--gap2); } .tab-style-vertical .panel {padding: 0 var(--gap2);} .tab-style-vertical .panel-wrapper {width: 75%; float: right;} .tab-style-vertical .tabnav li {width: 100%;} .tab-style-vertical .tabnav li a {text-decoration: none; width: 100%;display: flex;align-items: center;} .tab-style-vertical .tabnav li.selected {background: var(--c-primary);} .tab-style-vertical .tabnav li.selected a {color: var(--c-white);} .tab-style-vertical.tab-dark .tabnav {border-left: 2px solid var(--c-mediumgray);} .tab-style-vertical.tab-dark .tabnav li.selected {background: var(--c-lightgray);} .tab-style-vertical.tab-dark .tabnav li.selected a {color: var(--c-dark); font-weight: 500;} .tab-style-vertical.tab-dark .tabnav li.selected a:before {border-left: 2px solid var(--c-primary); content:''; height: 100%; left: -2px; top: 0; z-index: 0; position: absolute;} .tabnav li a svg.icon {display: inline-block;color: inherit;width: 1em; height: 1em;line-height: 1;flex-shrink: 0;max-width: initial;fill-color: currentColor;margin-right: var(--gap);} .tabs-centered {text-align: center;} .tabs-centered li {float: none; vertical-align: top; } .accordion-wrapper2, .accordion, .accordion-title, .accordion-panel, .ac-in { float: left; width: 100%; } .accordion-wrapper2 {border-top: 1px solid #ddd; margin: var(--gap2) 0;} .accordion {border-bottom: 1px solid #ddd;} .accordion-title {padding: var(--gap) 0; font-weight: 500;} .accordion-title .fe {float: right; width: var(--gap2); text-align: center; line-height: 1.4; transition: transform 0.2s ease;} .ac-in {padding-bottom: var(--gap2);} .accordion-panel {display: none;} .accordion-title.active .fe {transform: rotate(180deg);} /*---responsive-table---*/ .responsive-table {width: 100%;} .th-hidden {display: none; font-weight: 600;} .responsive-table th, .responsive-table td {padding: var(--space-sm); transition: background-color .2s;} .responsive-table tr {border-bottom: 1px solid #eee; } .responsive-table thead tr {border-bottom: 1px solid var(--c-mediumgray); } .responsive-table tr:hover td {background-color: var(--c-lightgray);} .order-status, .item-status {padding: calc(0.3 * var(--gap)) calc(0.5 * var(--gap)); background: #ddd; font-size: var(--fs-sm2); font-style: normal; border-radius: var(--ipt-radius-sm);} .order-status.inprogress, .item-status.primary {background: var(--c-primary-shadow);} .order-status.delivered, .item-status.instock {background: var(--c-success-shadow);} .order-status.shipped {background: var(--c-warning-shadow);} .order-status.canceled, .item-status.outofstock {background: var(--c-accent-shadow);} .account-panel h2 {margin-bottom: calc(0.75 * var(--gap2));} .td-item {gap: var(--space-sm);display: flex;align-items: center; max-width: 350px;} .td-item img {width: var(--size-xxl,6rem);} .td-item div p {color: var(--c-darkgray);} .td-item div p.item-name a {color: var(--c-dark); font-weight: 600;} .ico-btn { display: flex; align-items: center; justify-content: center; height: var(--gap3); width: var(--gap3); border-radius: 50%; cursor: pointer; transition: background-color .2s; color: var(--c-dark); position: relative; float: right; } .ico-btn:hover { background-color: var(--c-mediumgray); } .ico-btn svg {width: 0.9em; height: 0.9em;} .ico-btn span { position: absolute; top: 115%; left: 50%; transform: translate(-50%,0); background: var(--c-dark); color: var(--c-white); font-size: var(--fs-xs); padding: 5px; border-radius: 2px; display: none; } .ico-btn:hover span {display: inline-block;} .table {width: 100%;} .table thead th {font-weight: 500;vertical-align: middle;border-width: 1px;font-size: 0.9em;} .table tbody td {font-size: 0.9em;} .table-bordered td, .table-bordered th {border: 1px solid #e5e5e5;padding: var(--gap);} /*---this is for contact form sample---*/ .contact-form {text-align: left;} .contact-form .form-l .box100 {padding: 30px 0; border-bottom: 1px solid #ddd;} .contact-form .box100 h4 {padding-bottom: 7px;font-size: var(--fs-base);} .contact-form .form-r {padding-top: 20px;} .contact-form .form-r .box100 {padding: 10px 0;} .contact-form .form-r input, .contact-form .form-r textarea {width: 100%;} .contact-form .form-r textarea {min-height: 200px;} /*---footer form sample---*/ .footer-form {padding: 15px 0; width: 100%;} .footer-form input {width: 100%;} .footer-form .btn {margin-top: 10px;} /*---subscribe sample---*/ .subscribe-block {padding-top: 60px !important;} .subscribe-block .imgblock {width: 60px; height: 60px; display: inline-block;} .subscribe-block .imgblock * {width: 60px;} .subscribe-block h2 {padding: 10px 0;} .subscribe-block p {text-align: center;width: 100%} .subscribe-block form {padding: 20px 0;} .subscribe-block form input {width: calc(75% - 10px);} .subscribe-block form button {width: 25%; float: right;} /*---signup sample---*/ .signup-block {padding-top: var(--gap2) !important;} .signup-block h2 {padding: 10px 0;} .signup-block p {text-align: center;width: 100%} .signup-block form {padding: 20px 0;} .signup-block form input {width: 100%;} .signup-block button[type="submit"] {float: right;width: 100%;} .signup-block legend {text-align:left;} /*---toggle-btn---*/ .toggle-btn {border: 1px solid #ddd; transition: var(--tr-all-02s); cursor: pointer; position: relative;} .toggle-btn:hover {border-color: var(--c--dark);z-index: 10;} .toggle-btn:active, .toggle-btn:focus {border-color: var(--c--dark); } .filter-toggle { float: left; padding: var(--gap); /*background-size: 16px auto; background-position: center; background-repeat: no-repeat; background-image: url('../img/filter.svg');*/ } .layout-toggle {float: right;overflow: hidden;} .layout-toggle a { padding: var(--gap); overflow: hidden; outline: none; float: left;} .layout-toggle a span {/*background-size: 16px auto; background-position: center; background-repeat: no-repeat;*/float: left; width: 100%; height: 100%; opacity: 0.3;} .layout-toggle a:nth-child(1) span {/*background-image: url('../img/switch-grid.svg');*/} .layout-toggle a:nth-child(2) span {/*background-image: url('../img/switch-list.svg');*/} .layout-toggle:focus-within {z-index: 10;position: relative;} .filter-toggle, .layout-toggle a span:before { font-size: 1em; line-height: 1.2;} .layout-toggle a.active {background: var(--c-lightgray);} .layout-toggle a.active span {opacity: 1;} /*---filter order etc.---*/ .filter-order {width: 100%; padding: var(--gap) 0; border-bottom: 1px solid #ddd; display: inline-block;} /*---list filter---*/ .col-filter {} .cf-title { padding: var(--gap); width: 100%; background: var(--c-lightgray); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .filter-close { position: absolute; top: 10px; right: 10px; display: flex; } .filter-wrapper { width: 100%; min-height: 600px; margin-top: 15px; /*font-size: var(--fs-sm3);*/ text-align: left; } .filter-wrapper .form-check-label { text-transform: capitalize; } .filter-section { width: 100%; float: left; /*border-top: 1px solid #ddd;*/ font-size: var(--fs-sm); } .filter-section:last-child {border-bottom: 1px solid #ddd;} .fs-content { width: 100%; float: left; /*display: none;*/ display: inline-block; visibility: hidden; height: 0; } .fs-content .rangeslider-wrapper {margin-top: -20px;} .open .fs-content {visibility: visible; height: auto;} .fs-content .inner { opacity: 0; position: relative; transform: translateY(-10px); width: 100%; visibility: hidden; float: left; } .open .fs-content .inner { opacity: 1; visibility: visible; transform: translateY(0); transition: all 0.3s ease; } .fs-title, .form-group > label { width: 100%; float: left; padding: 15px 0; line-height: 1.2; cursor: pointer; position: relative; } .filter-section ul {margin-bottom: 10px; width: 100%;} .has-subchks ul {padding-left: 15px; margin-bottom: 0; display: none;} .has-subchks ul.open {display: inline-block;} .has-subchks input[type="checkbox"]:checked + label + ul {display: inline-block;} .has-subchks ul li label { line-height: 1.5;} .has-subchks {position: relative;} .has-subchks label {padding-right: 20px;} .has-subchks > label {font-weight: 500; color: var(--c-dark);} .has-subchks > label:after { content: ''; width: 20px; height: 20px; line-height: 0.9; font-size: 20px; text-align: center; position: absolute; top: 1px; right: 0; background-image: url('../img/svg/close2.svg'); background-size: 10px auto; background-position: center; background-repeat: no-repeat; pointer-events: none; transform: rotate(45deg); transition: var(--tr-all-03s); } .has-subchks > label:after {opacity: 0.5;} .has-subchks > input[type="checkbox"]:checked + label:after {transform: rotate(-90deg);} .fs-title .ac-icon { position: absolute; top: 15px; right: 0; width: 16px; height: 16px; } .ac-icon .x-nue { will-change: transform; -webkit-transform-origin: 8px 8px; transform-origin: 8px 8px; } .ac-icon .x-nue, .ac-icon .x-nue>* { transition: stroke-dashoffset .3s,-webkit-transform .3s; transition: transform .3s,stroke-dashoffset .3s; transition: transform .3s,stroke-dashoffset .3s,-webkit-transform .3s; transition-timing-function: var(--ease-out); } .ac-icon .x-nue>* { stroke-dasharray: 17; -webkit-transform: translateY(3px); transform: translateY(3px); } .ac-icon .x-nue >*:first-child { stroke-dashoffset: 8.5; } .ac-icon .x-nue >*:last-child { stroke-dashoffset: 8.5; } .open .ac-icon .x-nue { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .open .ac-icon .x-nue *:first-child, .open .ac-icon .x-nue *:last-child { stroke-dashoffset: 0; -webkit-transform: translateY(0px); transform: translateY(0px); } /*---az eredeti fs-title es ac-icon helyett---*/ .filter-wrapper .form-group-title {position: relative; width: 100%; border-top: 1px solid #ddd;} .filter-wrapper .form-group-title:after { position: absolute; top: 15px; right: 0; width: 16px; height: 16px; } .filter-wrapper .form-group-title:after { content: ''; background-image: url('../img/svg/filterblock-toggle.svg'); background-repeat: no-repeat; background-position: center; transition: transform 0.2s ease; } .filter-wrapper .form-group.close .form-group-title:after { transform: rotate(45deg); background-size: 80% auto; } .filter-wrapper .form-group { width: 100%; float: left; /*display: none;*/ display: inline-block; } .filter-wrapper .form-group-inner {visibility: visible; height: auto; width: 100%;padding-bottom: var(--gap);} .filter-wrapper .form-group.close .form-group-inner { visibility: hidden; height: 0; padding-bottom: 0; } .filter-wrapper .form-group .form-group-inner div { opacity: 1; visibility: visible; transform: translateY(0); transition: all 0.3s ease; } .filter-wrapper .form-group.close .form-group-inner div { opacity: 0; transform: translateY(-10px); width: 100%; visibility: hidden; float: left; transition: none; } /*---list items---*/ .list-wrapper {width: 100%;} .itemlist {width: 100%; display: flex;flex-wrap: wrap; margin-bottom: var(--gap);} .col-75 .list-wrapper {padding-left: 0; overflow: hidden;} .col-75 .itemlist {width: calc(100% + var(--gap2)); margin-left: calc(-1 * var(--gap));} /*-- ha nincs talalat--*/ .itemlist > p {font-weight: bold; text-align: center; float: left; width: 100%; padding: var(--gap2) var(--gap);} .itemlist li {display: flex; padding: var(--gap); width:33.333%;} .items-in-row-5 li {width: 25%;} .items-in-row-4 li {width: 25%;} .travellist li {transition: box-shadow 0.3s ease;} .travellist li:hover {background: #fff; /*box-shadow: 0 5px 20px rgba(0,0,0,0.5);*/} .it-box {display: flex;flex-direction: column; align-content: stretch;flex-wrap: wrap; width: 100%; position: relative;padding-bottom: 80px; min-height: 400px;} .it-img {width: 100%; height: 300px; overflow: hidden; } .it-img-wrap {width: 100%; height: 300px; overflow: hidden; position: relative;} .it-img img {width: 100%; height: 100%; object-fit: cover; object-position: center center;} .p-item .it-img {background-color: var(--c-primary-lighter);} .p-item .it-img img {object-fit: cover; transition: all 2s ease; transform: scale(1,1);} .p-item:hover .it-img img {transform: scale(1.1,1.1);} .no-bg .it-img {background: transparent;} .no-bg:hover .it-img img {filter: none;} .it-wrap {width: 100%; text-align: left; position: relative; display: flex; flex-wrap: wrap; flex: 1;} .t-item .it-img img {transition: transform 3s ease;} .t-item:hover .it-img img {transform: scale(1.1, 1.1);} .it-top {width: 100%; padding-top: var(--gap2);} .it-lead.fs-sm p {font-size: var(--fs-sm);color: #666;} .it-no-lead .it-lead {display: none;} .it-no-lead .it-box {padding-bottom: 50px;} .it-title {text-decoration: none; margin-bottom: 10px; width: 100%; float: left;} .it-top .it-ct {font-size: var(--fs-sm); color: #969696 !important; width: 100%; text-decoration: none; font-weight: 500; padding-bottom: 3px; float: left;} .it-title h3 {font-size: var(--fs-base); letter-spacing: 0; font-weight: 500; color:var(--c-black);} .it-abs { position: absolute; bottom: 0; left: 0; width: 100%; /*border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;*/ padding: 10px 0; display: flex; align-items: center; height: 70px; justify-content: space-between; z-index: 25; } .it-price { float: left; width: 50%; text-align: left; } .it-lbl { width: 100%; padding: 10px 0 5px 0; font-size: var(--fs-sm3); color: var(--c-darkgray); } .o-price {font-size: var(--fs-xs); text-decoration: line-through; color: gray; width: 100%; min-height: 15px;} .a-price {font-size: var(--fs-base); color: #ff6f61; color: var(--c-accent); width: 100%; font-weight: 500;} .t-item .it-bottom {align-self: flex-end; width: 100%;} .travellist .it-img { height: 280px;} .no-btn .btn.add-to-cart {display: none;} .it-action { width: 100%; position: absolute; text-align:center; display: flex; justify-content: center; top: 100%; transition: all 0.1s ease 0.2s; } .it-action .icon-btn { float: none; text-align:center; background: #fff; color: var(--c-primary); border-radius: 50%; margin: 20px 5px; visibility: hidden; transform: translateY(10px); opacity: 0; } .it-action .icon-btn span {height: 40px; width: 40px; line-height: 40px; display: inline-block;} .it-box .it-img-wrap:hover .it-action {transform: translateY(-100%); transition: none;} .it-box .it-img-wrap .it-action .icon-btn:nth-child(1) {transition: all 0.1s ease; } .it-box .it-img-wrap .it-action .icon-btn:nth-child(2) {transition: all 0.1s ease 0.05s;} .it-box .it-img-wrap .it-action .icon-btn:nth-child(3) {transition: all 0.1s ease 0.1s;} .it-box .it-img-wrap:hover .it-action .icon-btn {transform: translateY(0); visibility: visible; opacity: 1; transition-property: transform, visibility, opacity;} .icon-btn:hover {background: var(--c-primary); color: #fff;} /*---list2---*/ .list2 {display: inline-block; flex-wrap: nowrap;} .list2 li { padding: 15px; width:100%; border-bottom: 1px solid #ddd; } .list2 .it-box {flex-direction: row;display: flex;flex-wrap: wrap;padding-bottom: 0;justify-content: space-between; min-height: 100px;} .list2 .it-top {padding-top: 0;} .list2 .it-img {width: 33%; border: 1px solid #ddd; } .list2 .it-img-wrap {width: 33%;} .list2 .it-img-wrap .it-img {width: 100%;} .list2 .it-wrap {width: 65%; float: right; padding-bottom: 70px; flex: none;} .list2 .it-abs {width: 65%; right: 0;left: auto; border-bottom: 0; bottom: -10px; height: 60px;} .travellist.list2 li {border-bottom: 1px solid #ddd;} .travellist.list2 li:hover {border-bottom: 1px solid #fff !important;} /*---it-calendar---*/ .it-calendar {width: 100%;font-size: 10px;color: #fff;} .it-calendar span, .it-calendar a {height: 22px;line-height: 23px;text-align: center;width: calc(16.666% - 1px);padding: 0;margin: 0 1px 1px 0;background-color: #fff;text-decoration: none;position: relative;font-weight: 500;border-radius: 0;font-size: 10px;} .it-calendar span {cursor: default;background-color: #ddd;color: var(--c-darkgray);} .it-calendar a {background-color: var(--c-primary-lighter);color: #fff;} .it-calendar a.bestmpr {background-color: var(--c-success);color: #fff;} .it-calendar a small, .it-calendar span small { position: absolute; bottom: 30px; width: 130px; padding: 8px 8px; border-radius: 2px; background: var(--c-dark); color: #fff; left: 0; font-size: 12px; line-height: 17px; font-weight: 300; text-align: center; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display: none; z-index: 10000; } .it-calendar a small:after, .it-calendar span small:after { width: 0; height: 0; border-style: solid; border-width: 6px 8px 0 8px; border-color: var(--c-dark) transparent transparent transparent; content: ''; left: 5px; bottom: -5px; position: absolute; } .it-calendar span small b:after { content: 'Nincsen indulás';font-weight: 300; } .it-calendar a:hover small, .it-calendar span:hover small {display: inline-block;animation: fadeInUp 0.2s ease;-webkit-animation: fadeInUp 0.2s ease;} .it-calendar a small b {display: inline-block;padding-top: 4px;font-size: 16px;} .it-calendar a.bestmpr small b {color: var(--c-success);} .list2 .it-calendar {width: 50%;} /*---item slider---*/ .sliderwrap {max-width: 1280px; padding: 0; display: inline-block; margin: 0 auto; padding-bottom: 30px; padding-top: 60px;} .sliderbox {position: relative; width: 100%; } .item-slider {width: 100%; display: inline-block; overflow: hidden;} .item-slider .item {padding: var(--gap);} .item-slider .owl-dots {position: absolute; bottom: -50px; padding: 20px; left: 50%; transform: translateX(-50%)} .item-slider .owl-dots button {width: 10px; height: 10px; margin: 10px 5px; border-radius: 50%;transform: translate(0,2px); transition: var(--tr-all-02s); border: 0; outline: none;} .item-slider .owl-dots button.active {background-color: var(--c-accent);} .item-slider .owl-nav {position: absolute; top:-30px; height: 0; width: 100%;} .item-slider .owl-nav button {width: 30px; height: 30px; top: 0; border-radius: 0; border: 0;position: absolute; background-color: var(--c-lightgray);line-height: 60px; text-align:center; transition: var(--tr-all-02s);} .item-slider .owl-nav button:hover {background-color: var(--c-dark) !important;} .item-slider .owl-nav button span {text-indent: -300px; overflow: hidden; float: left; height: 30px; width: 30px;background-repeat: no-repeat; background-position:center; background-size: auto 20px;filter: invert(1);transition: var(--tr-all-02s);} .item-slider .owl-nav button.owl-prev {right: calc(30px + var(--gap1))} .item-slider .owl-nav button.owl-next {right: var(--gap);} .item-slider .owl-nav button.owl-prev span {background-image: url('/img/svg/arrow-prev.svg'); filter: invert(0);} .item-slider .owl-nav button.owl-next span {background-image: url('/img/svg/arrow-next.svg');filter: invert(0); } .item-slider .owl-nav button:hover span {filter: invert(100);} /*---trustlist--*/ .trustlist {width: 100%;border-bottom: 1px solid var(--c-mediumgray);} .trustlist li {width: 25%;padding: var(--gap);display: flex;} .trustlist li i.fe {margin-right: var(--gap2); color: var(--c-primary); line-height: 1.4;} .trustlist li div {text-align: left;} .trustlist li div h6 {font-size: 1em;color: var(--c-dark);} .trustlist li div p {font-size: 1em;} .banner { width: 100%; padding: var(--gap2); min-height: 100px; display: flex; justify-content: center; align-items: center; background-color: var(--c-dark); /*background-image: url(../img/svg/pattern-1.svg);*/ margin: var(--gap) 0; text-align: center; } .banner-text {width: 100%;} .banner-title { font-size: var(--fs-xl); font-weight: 500; color: #fff; width: 100%; } .banner p { color: #fff; width: 100%; text-align:center; } .banner-wide { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; background: #eee; min-height: 500px; overflow: hidden; margin: var(--gap) 0; } .banner-wide .wrap {flex-wrap: wrap;justify-content: space-between!important;} .banner-wide .banner-text { text-align: left; padding: var(--gap2) 0; width: 40%; font-weight: 400; line-height: 1.5; } .banner-wide .banner-img-box { width: 50%; height: 100%; } .banner-wide .banner-img-box .banner-img { width: 50vw !important; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } .banner-wide .banner-img-box.img-right .banner-img { float: right; } /*---brandlist---*/ .brandlist {width: 100%;display: flex;flex-wrap: wrap;} .brandlist li {width: 16.666%; padding: var(--gap);display: flex;} .brandlist li a {background: #fff; padding: var(--gap2); width: 100%;transition: all 0.2s ease;backface-visibility: hidden;} .brandlist li a img {width: 100%; max-height: 1.5em; max-width: 100%; width: auto; vertical-align: middle;} .brandbox {min-height: 0; padding: calc(2 * var(--gap2)) 0; margin: 0;} .brandlist li a:hover {transform: translateY(-5px);box-shadow: 0 10px 10px rgba(0,0,0,0.1);} /*---pagination---*/ .pawerwrapp {margin: 2px 10px; } .pager {height: auto; display: inline-block;} .pager .first_link, .pager .previous_link, .pager .last_link, .pager .next_link , .pager a, .alt_pager a, .page_link, .ellipse, .page_link.active_page, .pager .disabled { text-align: center; margin: 0 0 0 0; color: var(--c-dark); text-decoration: none; float: left; text-align: center; margin-right: 3px; padding: var(--gap) var(--gap1); font-size: var(--fs-base); min-width: calc((2 * var(--gap)) + 1.2em); } .pager a.active_page:visited {color: #fff;} .page_link.active_page {background: var(--c-dark); color: #fff; text-align: center;} .pager .ellipse {float: left;margin: 0;text-align: center;background: transparent;margin-right: 1px;} .pager a:hover {background: var(--c-lightgray);} .pager svg { height: 1em; width: 1em; line-height: 20px; flex-shrink: 0; float: left; } .pager .previous_link:hover, .pager .next_link:hover {} .pager .disabled {color: #ccc;} .listorder {width: auto;position: relative; margin-right: -1px;} .listorder:before {display: none;} .listorder:focus-whitin {z-index: 10;} /*--WebShop specific--*/ .header-search-wrapper {width: 50%;padding: 10px;} .searchform { border: 1px solid var(--c-primary-darker); text-align: left; width: 100%; position:relative; overflow: hidden; } .searchform input {border: 0 !important; box-shadow: none !important; width: 70%; } .searchform select {width: 30%; border: 0; border-left: 1px solid var(--c-gray); box-shadow: none !important; background-position: right 1em center;} .searchform select, .searchform input {box-sizing: border-box; border-radius: 0;} .hamburger {position: absolute;height: 2px;width: 24px; top: 50%;left: 50%;margin-left: -12px;margin-top: -1px;/*background: rgba(255,255,255,0.7);*/ transition: var(--tr-all-02s); background-size: 200% 100%; background-image: linear-gradient(to right, rgba(255,255,255,1) 50%, transparent 50%); /*transition: background-position 1s;*/ } .hamburger:before, .hamburger:after {content: '';background: rgba(255,255,255,1);height: 2px;width: 100%;position: absolute;left: 0;transition: var(--tr-all-02s);} .hamburger:before {top: -7px; transform-origin: 50% 50%;} .hamburger:after {bottom: -7px; transform-origin: 50% 50%;} .hamburger.dark {background-image: linear-gradient(to right, rgba(0,0,0,1) 50%, transparent 50%);} .hamburger.dark:before, .hamburger.dark:after {background: rgba(0,0,0,1);} .shop-ct-btn { width: 50px; margin-top: 10px; border-radius: var(--ipt-radius); border: 1px solid var(--c-primary-darker); position: relative; cursor:pointer; font-size: 1em; line-height: 1.2; appearance: none; padding: var(--gap); text-indent: -300px; overflow: hidden; } .shop-ct-btn.active {border-color: #fff;} .active .hamburger {/*background: transparent !important;*/ background-position: 100% 0;} .active .hamburger:before {transform: rotate(45deg); top: 0} .active .hamburger:after {transform: rotate(-45deg); bottom: 0;} .shop-ct-wrapper { text-align: left; background: #fff; overflow: auto; box-shadow: 0 10px 20px rgba(0,0,0,0.2); position: absolute; top: 50px; left: 0; z-index: 480; width: 100%; padding: 15px; visibility:hidden; opacity: 0; transition: var(--tr-all-03s); display: flex; flex-wrap: wrap; } .shop-ct-wrapper.active {visibility: visible;transform: translateY(10px);opacity: 1;} .shop-ct-list-wrapper {width: 20%; padding: 10px;} .shop-ct-list-title {font-weight: 500; font-size: 16px; color: #111; width: 100%; position: relative; padding-bottom: 20px;} .shop-ct-list {width: 100%;} .shop-ct-list li {width: 100%;} .shop-ct-list li a {font-size: var(--fs-sm); line-height: 18px; padding: 3px 0; text-decoration: none; color: var(--c-dark); font-weight: 300;} .shop-ct-list li a:hover {color: var(--c-primary); text-decoration: underline;} .search-toggle-bg { width: 40px; height: 40px; float: right; background-image: url(../img/svg/search.svg); background-position: center; background-size: 20px auto; background-repeat: no-repeat; filter: invert(100%); top: 10px; right: 10px; position: absolute; display: none; transition: var(--tr-all-02s); } .search-toggle-bg.active { background-image: url(../img/svg/close2.svg); } .search-toggle { width: 40px; height: 40px; float: right; top: 10px; right: 10px; position: absolute; display: none; transition: var(--tr-all-02s); color: #fff; } .search-toggle svg {width: 30px;height: 30px;margin: 5px;} .search-toggle .yx-nco {transform-origin: 12px 12px;transform: rotate(0deg);transition: transform .3s var(--ease-out);} .svgbtn .yx-nco>* {transition: transform .3s ease-in-out, stroke-dashoffset .3s,opacity .3s;} .search-toggle .yx-nco>*:nth-child(1) {stroke-dashoffset: 34;stroke-dasharray: 24;} .search-toggle .yx-nco>*:nth-child(2) {stroke-dashoffset: 24;stroke-dasharray: 24;} .search-toggle .yx-nco>*:nth-child(3) { transform-origin: 9.5px 9.5px; transform: rotate(45deg); stroke-dashoffset: 84; stroke-dasharray: 42; opacity: 1; } .search-toggle.active .yx-nco {transform: rotate(-90deg);} .search-toggle .yx-nco {transform-origin: 12px 12px;transform: rotate(0deg);transition: transform .3s ease-out;} .svgbtn .yx-nco {stroke-width: 1.5px;} .search-toggle.active .yx-nco>*:nth-child(1) {stroke-dashoffset: 48;} .search-toggle .yx-nco>*:nth-child(1) {stroke-dashoffset: 34;stroke-dasharray: 24;} .search-toggle.active .yx-nco>*:nth-child(2) {stroke-dashoffset: 48;} .search-toggle .yx-nco>*:nth-child(2) {stroke-dashoffset: 24;stroke-dasharray: 24;} .search-toggle.active .yx-nco>*:nth-child(3) {stroke-dashoffset: 42;opacity: 0;} .search-toggle .yx-nco>*:nth-child(3) { transform-origin: 9.5px 9.5px; transform: rotate(45deg); stroke-dashoffset: 84; stroke-dasharray: 42; opacity: 1; } /*---drawer---*/ .drawer {position: fixed;top: 0;bottom: 0;width: 500px;background: #fff;flex-direction: column;display: flex;z-index: 8000;transition: var(--tr-all-03s);box-shadow: var(--box-shadow);} .drawer-left {left: -550px;} .drawer-right {right: -550px;} .drawer-right.active {transform: translateX(-550px); } .drawer-top {padding:var(--gap);width: 100%;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);display: flex;align-items: center;justify-content: space-between;flex-shrink: 0;} .drawer-title {float: left;} .drawer-bottom {display: flex;align-items: center;padding: 10px 15px;width: 100%;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; flex-wrap: wrap; flex-shrink: 0; } .drawer-close {float: right;} .drawer-inner {width: 100%;height: 100%;float: left;text-align: left;overflow: auto;-ms-scroll-chaining: none;overscroll-behavior: contain;-webkit-overflow-scrolling: touch;} .drawer-cart .drawer-bottom .btn {width: 100%;} .drawer-cart .drawer-bottom .btn:last-child {margin-top: 10px;} /*---cart items---*/ .cart-list {width: 100%; float:left;padding: 10px 15px;} .cart-subtotal .cart-list {padding: 0;} .cart-item {width: 100%; float: left;border-bottom: 1px solid var(--c-lightgray);padding: 10px 0; display: grid; grid-template-columns: 80px 1fr auto; grid-gap: var(--space-xs);align-items: start;} .cart-img {width: auto;height: 80px;border-radius: var(--ipt-radius); overflow: hidden;} .cart-img img {object-fit: contain; object-position: center; width: 100%; height: 100%;} .cart-item h2 {text-align: left;} .cart-item h2 a {color: var(--c-dark);} .cart-item h2 + p {margin-top: 5px;} .cart-item .cart-item-end p {margin-bottom: 5px; text-align: right} .cart-item .cart-item-end a {text-decoration: none; font-weight: 300; width: auto;} .cart-left {width: 60%; padding-right: 20px; text-align: left;} .cart-right {width: 40%; padding-left: 20px; text-align: left;} .cart-right.position-sticky {top: 0;} .cart-wrapper .cart-item:first-child {border-top: 1px solid var(--c-lightgray);} .cart-wrapper .cart-list {padding: 10px 0;} .cart-wrapper .cart-item {grid-template-columns: 140px 50% auto; padding: var(--gap) 0;} .cart-wrapper .cart-img {width: auto; height: 140px; object-fit: contain;} .cart-wrapper .cart-item h2 {font-size: var(--fs-md); width: 100%;} .cart-wrapper .cart-item p {width: 100%;} .cart-wrapper .cart-item-end p {font-size: var(--fs-md);} .cart-wrapper .cart-item .input-number-horizontal {margin-top: 10px;} .cart-subtotal {width: 100%; border-radius: var(--ipt-radius); background: var(--c-lightgray); padding: 20px; margin-top: 10px; font-weight: 300;} .cart-subtotal .btn {width: 100%; margin-top: 10px;} .cart-subtotal .w100:last-child {font-weight: 600;} .cart-choices {width: 100%; border-radius: var(--ipt-radius); background: var(--c-lightgray); padding: 20px; margin-top: 10px;} .cart-choices h4 svg {width: 30px; float: left; margin-right: 10px;} .cart-choices ul {padding-left: 40px; margin-top: 10px; font-weight: 200; } .cart-choices ul li label {color: var(--c-dark);} .coupon-code-wrapp {width: 100%; padding: 0 0 10px 0; border: 1px solid var(--c-mediumgray); margin-bottom: 20px; border-width: 1px 0 ;} .coupon-code-wrapp input {width: 63%; margin-top: 10px;} .coupon-code-wrapp .btn {width: 33%;} /*--autocomplete list--*/ .autocomplete-suggestions { text-align: left; background: #fff; overflow: auto; box-shadow: 0 10px 20px rgba(0,0,0,0.2);} .autocomplete-suggestion { padding: 5px 10px; white-space: nowrap; overflow: hidden; cursor: pointer; border-bottom: 1px solid #ddd; width: 100%;} .autocomplete-selected { background: #F0F0F0; } .autocomplete-suggestions strong { font-weight: normal; color: var(--c-primary); } .autocomplete-group { padding: 2px 5px; } .autocomplete-group strong { display: block; border-bottom: 1px solid #000; } .mobil-menu-btn {left: 10px;width: 40px;height: 40px;position: absolute;top: 10px;z-index: 800; display: none; cursor: pointer;} .mobil-menu-btn.active .hamburger:after, .mobil-menu-btn.active .hamburger:before {background: var(--c-gray);} .mtgl, .mtgl2 {position: absolute;top: 0;left: 0;height: 36px;width: 100%;display: none;z-index: 550;} /*---footer---*/ .footer-wrapper {width: 100%; text-align:center;} .footer {float: none; width: 100%; max-width: 1280px; background-color: var(--c-white); padding: var(--gap2) var(--gap2); vertical-align: top; border-top: 1px solid #ddd;display: inline-block;} .footer-wrapper .wrap {padding: var(--gap2); float: none;} .footer-wrapper.footer-fw .wrap {padding: var(--gap);} .footer-nav-wrapper {width: 65%; text-align: left;} .footer-nav { width: 100%; display: flex; flex-wrap: wrap; } .footer-nav > li {width: 25%; float: left; padding-right: var(--gap); padding-bottom: var(--gap);} .footer h4 {font-size: var(--fs-base); margin-bottom: var(--gap);} .footer-nav > li > ul {width: 100%;} .footer-nav > li > ul li {width: 100%;} .footer-nav > li > ul li a {width: 100%; padding: calc(0.5 * var(--gap)) 0; font-size: var(--fs-sm); text-decoration: none; color: var(--c-darkgray);} .footer-nav > li > ul li a:hover {color: #111; text-decoration: underline;} .dublino-business-footer-menu > ul { width: 100%; display: flex; flex-wrap: wrap; } .dublino-business-footer-menu > ul > li {width: 25%; float: left; padding-right: var(--gap); padding-bottom: var(--gap);} .dublino-business-footer-menu > ul > li > div {float: left; width: 100%;} .dublino-business-footer-menu > ul > li > div > a {font-size: var(--fs-base); margin-bottom: var(--gap); width: 100%; float: left; margin-bottom: var(--gap2);} .dublino-business-footer-menu > ul > li > ul {width: 100%;} .dublino-business-footer-menu > ul > li > ul li {width: 100%; float: left;} .dublino-business-footer-menu > ul > li > ul > li > div {float: left; width: 100%; display: inline-block;} .dublino-business-footer-menu > ul > li > ul li a {width: 100%; padding: calc(0.5 * var(--gap)) 0; font-size: var(--fs-sm); text-decoration: none; color: var(--c-darkgray);float: left;} .dublino-business-footer-menu > ul > li > ul li a:hover {color: #111; text-decoration: underline;} .footer-bg-dark .dublino-business-footer-menu > ul > li > div > a {color: #fff; text-decoration: none; font-family: 'Montserrat'; font-weight: 500; text-transform: uppercase;font-size: 15px;letter-spacing: 2px;} .footer-bg-dark .dublino-business-footer-menu > ul > li > ul li a {color: rgba(255,255,255,0.7);} .footer-bg-dark .dublino-business-footer-menu > ul > li > ul li a:hover {color: #fff;} .footer-bottom {border-top: 1px solid #ddd;width: 100%; padding: var(--gap2) 0; margin-top: var(--gap); font-size: 13px; float: left; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .fb-text {width: auto; display: flex; gap: var(--gap);} .fb-text span, .fb-text a {} .fb-text span {color: var(--c-darkgray);} .fb-text a {color: var(--c-dark);} .fb-icons {float: right; padding: var(--gap) 0;} .fb-icons a {width: 30px; height: 30px; text-decoration: none; display: inline-block; font-weight: 300;font-size: 18px; line-height: 33px; margin: 0 0 calc(0.5 * var(--gap)) var(--gap); background: var(--c-primary); font-weight: normal; color: #fff; border-radius: 50%; text-align:center; } .footer-right {width: 35%; text-align: left;} .footer-logo {float: right; width: 100%; text-align: left; margin-bottom: var(--gap);} .footer-logo {color: var(--c-primary);} .footer-logo .page-logo {width: auto; float: left;} .footer-wrapper.footer-fw {margin-top: 50px; width: 100%;} .footer-bg-dark {background-color: var(--c-dark);} .footer-bg-dark .footer {border-top: 0;padding: calc(2 * var(--gap)) 0;background-color: transparent; color: #fff;} .footer-bg-dark .footer-bottom {border-top: 1px solid rgba(255,255,255,0.2);} .footer-bg-dark .fb-text a {color: rgba(255,255,255,0.7);} .footer-bg-dark .fb-text span {color: rgba(255,255,255,0.4);} .footer-bg-dark .fb-icons a {background-color: rgba(255,255,255,0.2);} .footer-bg-dark .footer-nav > li > ul li a {color: rgba(255,255,255,0.7);} .footer-bg-dark .footer-nav > li > ul li a:hover {color: #fff;} .footer-bg-dark .footer-logo {color: var(--c-white);} .footer-wrapper.footer-pd {padding: calc(2 * var(--gap)); vertical-align: top;} .fb-power {display: flex; align-items: center;} .fb-power-item {color: var(--c-darkgray); align-items: center; display: flex;padding-right: var(--gap2);} .fb-power a {float: none; color: #fff; align-items: center; display: flex; text-decoration: none;} .fb-power a img {margin: 0 var(--gaphalf); filter: saturate(0);} .fb-power a:hover img {filter: saturate(1);} .fb-power .powerdby img {height: 20px;} .fb-power .supportedby img {height: 34px;} /*---icons base---*/ .svg-icon {margin: 20px; width: 50px; height: 50px;} .svg-icon svg {width: 50px; max-width: 50px; display: inline-block; float: left;} .icon-payment {width: 32px;} /*---sliders---*/ .tr-gradient-top { background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#00000000',GradientType=0 ); } .tr-gradient-bottom { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); } .bb-wrapper .bb:before { width: 100%; content: ''; position: absolute; top: 0; left: 0; height: 35%; z-index: 10; background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); display: inline-block; } .bb-wrapper .bb.no-before:before { display: none; } /*---billboard - majd külön css-be kerül, mert ez csak spec oldalakon jelenik meg pl. home---*/ .bb-wrapper {width: 100%; overflow: hidden; position:relative; z-index: 5; margin-bottom: var(--gap); background: #000; display: inline-block;} .bb-wrapper, .bb-wrapper .bb, .bb-wrapper .owl-carousel, .bb-wrapper .owl-stage, .bb-wrapper .owl-stage-outer, .bb-wrapper .owl-item {height: 70vh; overflow: hidden;} .bb {width: 100%; float: left; outline: none; position:relative;} .bb-inner {position: absolute; bottom: 0; left: 0; right: 0; width: 100%; text-align: left; padding: 100px 70px 60px 70px; color: #fff;} .bb-inner > div {width: 70%; text-shadow: 2px 3px 5px rgba(0,0,0,0.5); clear: left;} .bb-title {font-size: var(--fs-xxxxl); line-height: 1.25; font-weight: 700; letter-spacing: 0;} .bb-text {font-size: var(--fs-md); padding-bottom: 20px;} .bb-price-original {font-size: var(--fs-base); text-decoration: line-through; color: rgba(255,255,255,0.7);} .bb-price {font-size: var(--fs-lg); font-weight: 500;} .bb-price.attention {background: var(--c-accent); padding: 10px 20px; width: auto; margin-bottom: 5px; position: relative; transform: skewX(-10deg); margin-left: -5px;} .bb-price span {float: none; margin-left: 0} .bb-price-small {font-size: var(--fs-sm);} .bb-wrapper .owl-dots {position: absolute; bottom: 0; padding: 20px; left: 50%; transform: translateX(-50%)} .bb-wrapper .owl-dots button {width: 18px; height: 18px; margin: 10px 5px; border-radius: 50%;transform: translate(0,2px); box-shadow: 0 0 0 2px rgba(0,0,0,0.1); transition: var(--tr-all-02s);} .bb-wrapper .owl-dots button.active {background-color: var(--c-accent);} .bb-wrapper .owl-dots button:hover {box-shadow: 0 0 0 5px rgba(255,255,255,0.3);} .owl-nav {outline: none;} .bb-wrapper .owl-nav {position: absolute; top: 50%; height: 0; width: 100%;} .bb-wrapper .owl-nav button {width: 60px; height: 60px; top: -30px; border-radius: 50%; position: absolute; background-color: transparent;line-height: 60px; text-align:center; transition: var(--tr-all-02s);} .bb-wrapper .owl-nav button:hover {background-color: rgba(255,255,255,0.7) !important;} .bb-wrapper .owl-nav button span {text-indent: -300px; overflow: hidden; height: 60px; width: 60px;background-repeat: no-repeat; background-position:center; background-size: 30px auto;filter: invert(1);transition: var(--tr-all-02s);} .bb-wrapper .owl-nav button.owl-prev {left: 10px;} .bb-wrapper .owl-nav button.owl-next {right: 10px;} .bb-wrapper .owl-nav button.owl-prev span {background-image: url('../img/svg/arrow-prev.svg'); float: left;} .bb-wrapper .owl-nav button.owl-next span {background-image: url('../img/svg/arrow-next.svg'); float: left;} .bb-wrapper .owl-nav button:hover span {filter: invert(0);} .owl-nav button.disabled {opacity: 0;} .video-bg video { position: relative; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-height: 100%; min-width: 100%; height: auto; width: auto; max-width: none; object-fit: cover; height: 100%; width: 100%; } /*---youtube---*/ .yt-wrapper { position: absolute; height: 100%; width: 120%; top: -10%; left: -10%; padding-bottom: 58%; background: #000; } .yt-wrapper:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); } .yt-wrapper iframe {width: 100%;height: 100%; position: absolute; left: 0; top:0;} /*---full width--slider---*/ .full-width-header .bb-wrapper, .full-width-header .bb-wrapper .bb, .full-width-header .bb-wrapper .owl-carousel, .full-width-header .bb-wrapper .owl-stage, .full-width-header .bb-wrapper .owl-stage-outer, .full-width-header .bb-wrapper .owl-item {height: 70vh;} .full-width-header .bb-wrapper .bb-inner {width: 100%; padding: 100px calc(((100% - 1280px)/2) + var(--gap)) 60px calc(((100% - 1280px)/2) + var(--gap));} .full-width-header .bb-inner-stage {position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;} .full-width-header .bb-inner-stage .bb-stage-box {width: 100%; max-width: 1280px; text-align: left; padding: var(--gap);} .bb-text-left {color: #fff; width: 50%;} .bb-btn.tile-more {padding: var(--gap1) var(--gap2); display: inline-block; margin-top: var(--gap); background: #111;} .bb-btn.tile-more:hover i {transform: translateX(calc(0.5 * var(--gap)));} .bb img {object-fit: cover; object-position: center center; height: 100%; width: 100%; } .display-01 { font-size: 7em; font-weight: 500; line-height: 1.2; width: 100%; } .display-02 { font-size: 5em; font-weight: 500; line-height: 1.2; width: 100%; } /*---articles---*/ mark {padding: 0 3px;} mark.mk1 {background: var(--c-accent-shadow);} mark.mk2 {background: var(--c-primary-shadow);} mark.mk3 {background: var(--c-warning-lighter);} article hr {margin: var(--gap2) 0; border: 0; background: var(--c-mediumgray); height: 1px;} article header {width: 100%;} article {width: 100%; padding: var(--gap2) calc(4 * var(--gap2)); font-weight: 600;line-height: 1.8em;} article p {width: 100%; float: none; margin-bottom: var(--gap2); color: var(--c-dark); font-size: var(--fs-md);} article h2 {margin: var(--gap) 0; width: 100%; text-align: left; line-height: 1.25;} article blockquote {padding-left: 1em; border-left: 4px solid var(--c-mediumgray); text-align: left; margin-bottom: 1.25em; font-size: var(--fs-md);} article img {margin: 0 auto;} .art-meta {width: 100%; font-size: var(--fs-xs); text-transform: uppercase; color: var(--c-gray); text-align: center;} .art-title {width: 100%;} .art-title h1 {font-size: var(--fs-xxxl); line-height: 1.2; margin-bottom: 0.3em; letter-spacing: 0px; } .art-meta p, .art-title p {margin-bottom: 0; text-align:center;} .art-title p {font-weight: 400;} article p a {float: none;} .block-right {width: 50%;float: right;} .block-left {width: 50%;float: left;} article figure {padding: 5px 0; } article figure.block-right {margin: 0 0 0 var(--gap);} article figure.block-left {margin: 0 var(--gap) 0 0;} article figure img {width: 100%; vertical-align: top;} article figure figcaption {padding: 5px 5px 0 5px; font-size: var(--fs-sm2);vertical-align: top;} article .double-figure {width: calc(100% + var(--gap));margin-left: calc(-1 * var(--gap));display: flex;flex-wrap: wrap;} .double-figure * {margin-bottom: var(--gap);margin-left: var(--gap);} article .col {flex-grow: 1;flex-basis: 0;max-width: 100%;} article .col img {margin: 0;} article .art-text p {text-align: left;} article .art-text ul, article .art-text ol { text-align: left; width: 100%; padding-bottom: var(--gap2); padding-left: var(--gap2); } article .art-text ul li {list-style: disc outside; } article .art-text ol li {list-style: decimal outside;} article .art-text ol li, article .art-text ul li{ display: list-item; width: 100%; padding: calc(0.3 * var(--gap)) 0; font-weight: 400; line-height: 1.8em; font-size: var(--fs-md); } .author {width: 100%;} .author-img {width: 80px; height: 80px; float: left;} .author-img img {width: 100%; float: left; border-radius: 50%;} .author-text {width: calc(100% - 120px); float: right; text-align: left;} .author-text p {margin-bottom: 0; font-size: var(--fs-sm);} /*--embeded video--*/ .video-wrapper {position: relative;padding-bottom: 56.25%;height: 0;margin-bottom: var(--gap); display: inline-block;width: 100%;} .video-wrapper iframe {width: 100%; height: 100%;position: absolute;top: 0;left: 0;right: 0;} /*---article wide header img a version---*/ .body-article2 .page-wrapper {background: #eee;} .body-article2 .page-content {margin-top: -200px; position: relative; z-index: 10;} .body-article2 .article-main-img {width: 100%; height: 70vh;} .body-article2 .article-main-img img {object-fit: cover; object-position: center center; width: 100%; height: 100%; display: none;} /*--article wide header img b version--*/ .body-article2 .article-main-img { background-image: url(../img/intro-img-6.jpg); background-size: 100%; background-attachment: fixed; background-repeat: no-repeat; background-position: bottom center; } .body-article2 article figure.block-outset {margin-left: calc(-8 * var(--space-unit)); width: calc(100% + (200px + (7.65 * var(--space-unit))));} .body-article2 article figure.block-right.block-outset { margin-left: 20px; margin-right: calc(-8 * var(--space-unit)); width: 60%; float: right;} .body-article2 article figure.block-left.block-outset { margin-right: 20px; margin-left: calc(-8 * var(--space-unit)); width: 60%;} .body-article2 article .double-figure.block-outset {margin-left: calc((-8 * var(--space-unit)) - (1 * var(--gap))); width: calc(100% + (200px + (8.25 * var(--space-unit))));} article .block-outset iframe, article .block-outset img {box-shadow: 0 3px 10px rgba(0,0,0,0.2);} .body-article2 .article-main-img.yt-video {overflow: hidden;z-index: 1;position: relative;} .body-article2 .article-main-img.yt-video .yt-wrapper {position: absolute;height: 0;padding-bottom: 56.6%;width: 110%;left: -5%;} .body-article2 .article-main-img.yt-video .yt-wrapper:before { z-index: 8;} .body-article2 .article-main-img.yt-video .yt-wrapper iframe {width: 100%; height: 100%;position: absolute;top: 0;left: 0;right: 0;} /*---breadcrumb---*/ .breadcrumb { display: flex; flex-wrap: wrap; padding: 0 0; margin-bottom: 1.5rem; list-style: none; background-color: transparent; font-size: var(--fs-sm2); color: var(--c-darkgray); } .breadcrumb li {display: inline-block;float: left;} .breadcrumb li + li:before {display: inline-block;float: left; padding-right: var(--gap); color: inherit;content: '/';} .breadcrumb li + li:before {padding-left: var(--gap);} .breadcrumb li a {color: inherit;} /*---product page---*/ .product h1 {font-size: var(--fs-xl); font-weight: 500;} .product-left, .product-right {text-align: left;} .product-left {width: 50%; padding-right: var(--gap);} .product-right {width: 50%; padding-left: var(--gap);} .product-right .pb-g {padding-bottom: var(--gap2);} .product-price {display: flex; align-items: center; gap: var(--gap);} .original-price {font-size: var(--fs-sm); color: var(--c-darkgray); text-decoration: line-through;} .actual-price {color: var(--c-accent); font-weight: bold;} .stock-info {color: var(--c-success-darker); font-size: var(--fs-sm);} /*---formhoz átrakni---*/ .select-label {font-size: var(--fs-sm); padding-bottom: calc(0.5 * var(--gap)); color: var(--c-darkgray); display: inline-block; width: 100%; clear: both; float: left;} .selected-data-text {font-weight: 500; color: var(--c-dark);display: inline-block; } .select-list {width: 100%; float: left;} .select-list li {float: left;} .select-list li.selected a {box-shadow: 0 0 0 1px var(--c-black);} .select-list li a {overflow: hidden; float: left;} .select-img li {width: 12.5%; padding-right: var(--gap); padding-bottom: var(--gap);} .select-img li a {width: 100%; padding: 50%; position: relative; } .select-img li a img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; object-position: center;} .select-img li.selected a {box-shadow: none;} .select-img li.selected a:after {position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--c-black);} .select-color li {width: var(--gap2); padding-right: 0; margin-right: var(--gap); margin-bottom: var(--gap); } .select-color li a {width: 100%; padding: 50%; position: relative;} .select-color li a span {width: 100%; height: 100%; position: absolute; top: 0; left: 0;} .select-color li.selected a {box-shadow: 0 0 0 1px var(--c-black);} .select-color li.selected a span {box-shadow: inset 0 0 0 2px var(--c-white);} .select-color.rounded li a, .select-color.rounded li a span {border-radius: 50%;} .select-tag li {width: auto; padding-right: 0; margin-right: var(--gap); margin-bottom: var(--gap); } .select-tag li a {width: 100%; text-decoration: none; text-align: center; min-width: calc(1.5 * var(--gap2)); padding: calc(0.5 * var(--gap)) calc(0.7 * var(--gap)); position: relative; box-shadow: 0 0 0 1px var(--c-mediumgray); color: var(--c-darkgray); font-size:var(--fs-sm);} .select-tag li a span {float: none;text-decoration: none;} .select-tag li.selected a {box-shadow: 0 0 0 1px var(--c-black); color: var(--c-dark);} .select-tag li a.ofs {box-shadow: 0 0 0 1px var(--c-lightgray);} .select-list li a.ofs {cursor: default;} .select-list li a.ofs img, .select-list li a.ofs span {opacity: 0.25; cursor: default;} .select-list li a.ofs:after {content: ''; width: 200%; height: 0; border: 1px solid var(--c-accent); position: absolute; transform: rotate(-45deg); left: -50%; top: 50%;} .select-list.select-size li a { min-width: calc(1.5 * var(--gap2)); padding: var(--gap) var(--gap1); } .product-buttons {display: flex; align-items: center; gap: var(--gap); align-items: stretch;} .product-buttons .btn-wish {min-height: calc(1.2em + 20px);} #section1, #section2, #section3, #section4, #section5 { border-bottom: 1px solid #ddd; padding-top: var(--gap2);; width: 100%; min-height: 200px; text-align: left; } .section:last-child {border-bottom: 0 !important;} .section {position: relative;} .anchorpoint { position: absolute; width: 0; height: 100px; left: 0; top:0; } /*---product--inner-navigation--*/ /*.nav-distance {float: left;height: 60px;width: 100%;margin-top: var(--gap);}*/ .nav-distance.small {/*height: 0;margin-top: 0;*/} .pagenav-wrapper {float: left;width: 100%;text-align: center;z-index: 200;top: 0;} .pagenav-wrapper.position-sticky {top: 0;} .pagenav {width: 100%; float: none; transition: var(--tr-all-03s);max-width: 1280px;margin: 0 auto;position: relative;} .pagenav-wrapper.fixed .pagenav {height: 40px;border-bottom: 0; } .pagenav-wrapper.fixed .pagenav:after {position: absolute;content: '';bottom: -10px;height: 10px;width: 100%;left: 0; background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00000000',GradientType=0 ); } .pagenav ul {width: 100%;list-style: none;border-bottom: 2px solid var(--c-primary);background: #fff;} .pagenav-wrapper.fixed .pagenav ul {border-bottom: 0;} .pagenav ul li {width: 20%;list-style: none;float: left;padding: var(--gap) var(--gap) 0 0;position: relative;} .pagenav-wrapper.fixed .pagenav ul li {padding: 0;} .pagenav ul li a {padding: 0 var(--gap);width: 100%;height: 50px;line-height: 50px;display: inline-block;float: left; font-size: var(--fs-sm); font-weight: 500; text-transform: uppercase; border-bottom: 0; background: var(--c-lightgray); overflow: hidden; text-align: center; color: var(--c-dark); } .pagenav-wrapper.fixed .pagenav ul li a {height: 40px;height: 40px;line-height: 40px;border: 0 !important; border-radius: 0;} .pagenav ul li a span {width: 100%; text-overflow: ellipsis; } .pagenav ul li.selected a { background: var(--c-primary); color: #fff; position: relative; z-index: 50; } /*---product rating static---*/ .product-rating {width: 100%; display: flex; gap: var(--gap);} .product-rating div {float: left;display: inline-block;} .rating-text {} .rating-text, .rating-text a {font-size: 14px;line-height: 20px; height: 20px; margin-right: 5px;} .rating-stars {position: relative;height: 20px;width: 80px;} .rating-stars i {width: 16px;height: 16px;float: left;font-style: normal;position: relative;} .rating-stars i:before {font-size: 16px;line-height: 20px;position: absolute;top: 0;left: 0;width: 100%;text-align:center;color: var(--c-mediumgray);content: '\2605';} .actual-rate {position: absolute;top: 0;left: 0;height: 100%;z-index: 5;display: block;overflow: hidden;white-space: nowrap;line-height: 0; font-size: 0;} .actual-rate i {display: inline-block; float: none; margin: 0 0;} .actual-rate.rate1 {width: 16px;} .actual-rate.rate15 {width: 24px;} .actual-rate.rate2 {width: 32px;} .actual-rate.rate25 {width: 40px;} .actual-rate.rate3 {width: 48px;} .actual-rate.rate35 {width: 56px;} .actual-rate.rate4 {width: 64px;} .actual-rate.rate45 {width: 72px;} .actual-ratte.rate5 {width: 80px;} .actual-rate i:before {color: var(--c-accent);} /*---product-gallery with owl carousel---*/ .product-gallery-wrapper {position: relative;padding: 50%;float: left;} .product-photos {position: absolute !important;height: 80%;left: 0;top: 0;width: 100%;overflow: hidden;} .product-thumbnails {position: absolute !important;height: 20%;left: 0;bottom: 0;overflow: hidden;} .product-gallery-wrapper .owl-carousel .owl-item a {background: var(--c-lightgray);} .product-gallery-wrapper .owl-carousel .owl-stage-outer, .product-gallery-wrapper .owl-carousel .owl-stage, .product-gallery-wrapper .owl-carousel .owl-item, .product-gallery-wrapper .owl-carousel .owl-item a, .product-gallery-wrapper .owl-carousel .owl-item div {height: 100%;} .product-gallery-wrapper .owl-carousel .owl-item div {width: 100%;} .product-gallery-wrapper .owl-carousel .owl-item a img, .product-gallery-wrapper .owl-carousel .owl-item img {height: 100%;width: 100%;object-fit: contain;object-position: center;max-width: initial;} .product-thumbnails {padding-top: 5px;} .product-thumbnails .owl-item div {border: 2px solid transparent; height: 100%;} .product-thumbnails .owl-item.synced div {border-bottom: 2px solid var(--c-black);} .product-thumbnails.owl-carousel .owl-item a img {object-fit:cover; object-position: 50% 0;} .product-photos .owl-nav {position: absolute; top: 50%; height: 0; width: 100%;} .product-photos .owl-nav button {width: 60px; height: 60px; top: -30px; border-radius: 50%; position: absolute; background-color: transparent;line-height: 60px; text-align:center; transition: var(--tr-all-02s);} .product-photos .owl-nav button:hover {background-color: rgba(255,255,255,0.7) !important;} .product-photos .owl-nav button span {text-indent: -300px; overflow: hidden; height: 60px; width: 60px;background-repeat: no-repeat; background-position:center; background-size: 30px auto;filter: invert(0);transition: var(--tr-all-02s);} .product-photos .owl-nav button.owl-prev {left: 10px;} .product-photos .owl-nav button.owl-next {right: 10px;} .product-photos .owl-nav button.owl-prev span {background-image: url('../img/svg/arrow-prev.svg'); float: left;} .product-photos .owl-nav button.owl-next span {background-image: url('../img/svg/arrow-next.svg'); float: left;} .product-photos .owl-nav button:hover span {filter: invert(0);} .product-photos .video-slide {width: 100%; height: 100%; position: relative; background: #111; display: flex; align-items: center; justify-content: center; } .product-photos .video-slide iframe {width: 100%;} .product-photos .video-slide video { width: 100%; height: 100%; } .owl-video {width: 100%;} .stack-gallery {padding: 0;} .stack-gallery .product-photo { width: 100%; float: left; margin-bottom: var(--gap); } .stack-gallery .product-photo a, .stack-gallery .product-photo img {width: 100%;} /*---popups---*/ .popup { min-width: 400px; min-height: 200px; max-height: 80vh; position: fixed; z-index: 8000; flex-direction: column; display: flex; top: 50%; left: 50%; visibility: hidden; opacity: 0; transform: translate(-50%,-60%); background: var(--c-white); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); transition: var(--tr-all-02s); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .popup.active { visibility: visible; opacity: 1; transform: translate(-50%,-50%); } .popup-top { padding: var(--gap); padding-left: var(--gap2); width: 100%; background: var(--c-lightgray); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .popup-inner { width: 100%; height: 100%; float: left; text-align: left; overflow: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--gap); } .popup-bottom { display: flex; align-items: center; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; flex-wrap: wrap; flex-shrink: 0; padding: var(--gap); background: var(--white); } /*---tiles---*/ .tiles-wrapper {width: 100%;float: left;margin: 0 auto;padding: 0;display: flex; flex-direction: row;flex-wrap: wrap;max-width: 1280px;} .tiles-wrapper.tiles-fw {max-width: 100%; padding: 0 var(--gap);} .tile {display: flex;padding: var(--gap);width: 33.333%;float: left;justify-content: flex-start;height: auto;min-height: 320px;} .tile-lg {width: 66.66%;min-height: 490px;} .tile-lg50 {width: 50%;min-height: 490px;} .tile-inner { height: 100%; width: 100%; display: inline-block; margin: 0; background: var(--c-mediumgray); position: relative; display: flex; height: auto; justify-content: center; align-items: center; } .tile-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .tile-bg:after { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 3; } .tile.light .tile-bg:after {background: rgba(0,0,0,0.05);} .tile-bg-img { height: 100%; width: calc(100% + var(--gap)); background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 2; position: absolute; transition: transform 0.3s ease; } .tile-textbox {z-index: 5;color: #fff;padding: var(--gap2); } .tile.light .tile-textbox {color: #111;} .tile-textbox.w100 {padding: var(--gap2) calc(2* var(--gap2));} .tile-textbox h5 {font-size: 1.5em; font-weight: 500;} .tile-textbox .tile-more {font-size: var(--fs-base);} .tile:hover .tile-bg-img {transform: translateX(calc(-1 * var(--gap)));} .tile-more {padding: var(--gap) 0; float: none;} .tile-more i {transition: transform 0.3s ease; } .tile:hover .tile-more i {transform: translateX(var(--gap));} /*---animations---*/ @-webkit-keyframes fadeInDown {0% {opacity: 0;-moz-transform: translateY(-20px);} 100% {opacity: 1;-moz-transform: translateY(0);}} @-moz-keyframes fadeInDown {0% {opacity: 0;-moz-transform: translateY(-20px);} 100% {opacity: 1;-moz-transform: translateY(0);}} @-o-keyframes fadeInDown {0% {opacity: 0;-o-transform: translateY(-20px);}100% {opacity: 1;-o-transform: translateY(0);}} @keyframes fadeInDown {0% {opacity: 0;transform: translateY(-20px);}100% {opacity: 1;transform: translateY(0);}} .animated.fadeInDown {-webkit-animation-name: fadeInDown;-moz-animation-name: fadeInDown;-o-animation-name: fadeInDown;animation-name: fadeInDown;} @-webkit-keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translateY(20px);}100% {opacity: 1;-webkit-transform: translateY(0);}} @-moz-keyframes fadeInUp {0% {opacity: 0;-moz-transform: translateY(20px);} 100% {opacity: 1;-moz-transform: translateY(0);}} @-o-keyframes fadeInUp {0% {opacity: 0;-o-transform: translateY(20px);}100% {opacity: 1;-o-transform: translateY(0);}} @keyframes fadeInUp {0% {opacity: 0;transform: translateY(20px);}100% {opacity: 1;transform: translateY(0);}} .animated.fadeInUp {-webkit-animation-name: fadeInUp;-moz-animation-name: fadeInUp;-o-animation-name: fadeInUp;animation-name: fadeInUp;} .desktop-hide {display: none ;} .desktop-hide-flex {display: none ;} /*---media queries---*/ @media screen and (max-width: 1600px){ .wrap100 .items-in-row-4 li {width: 33.333%;} .wrap100 .items-in-row-4.list2 li {width: 100%;} } @media screen and (max-width: 1550px){ /*---article---*/ .body-article2 article figure.block-outset {margin-left: 0; width: 100%;} .body-article2 article figure.block-right.block-outset { margin-left: var(--gap); margin-right: 0; width: 50%; float: right;} .body-article2 article figure.block-left.block-outset { margin-right: var(--gap); margin-left: 0; width: 50%;} .body-article2 article .double-figure.block-outset {width: calc(100% + var(--gap));margin-left: calc(-1 * var(--gap));display: flex;flex-wrap: wrap;} article .block-outset iframe, article .block-outset img { box-shadow: none; } } @media screen and (max-width: 1400px){ .header, .page-content {width: 100%; padding: 0;} .pt95 {padding-top: 95px;} .footer {width: 100%; max-width: 100%;} .footer-fw .footer {padding: var(--gap2);} .wrap {width: 100%;max-width: 100%; } .distance-left .wrap {padding-right: var(--gap);padding-left: var(--gap);} .distance-left .list-wrapper {padding-right: var(--gap);padding-left: var(--gap);} .distance-left .col-75 .list-wrapper {padding-right: 0;} .page-content.c25c75 {padding: 0 var(--gap);} /*---billboard slider---*/ .full-width-header .bb-wrapper .bb-inner {width: 100%; padding: 100px 60px 60px 60px;} /*---article---*/ .body-article2 .article-main-img {background-position: bottom center; background-size: cover; height: 40vh; background-attachment: scroll;} .body-article2 .page-content {margin-top: 0;} .pagenav {max-width: 100%;} .navbar-boxed .navbar-container.w20 {width: 250px;} .navbar-boxed .navbar-container.w80 {width: calc(100% - 250px);} .sliderwrap { max-width: 100%; width: 100%; } .banner-wide .banner-text {padding: calc(2 * var(--gap2)); width: 50%;} .full-width-header .bb-inner-stage .bb-stage-box {width: 100%; max-width: 1280px; text-align: left; padding: var(--gap) calc(2* var(--gap2));} .v-container {width: 260px;} .page-wrapper.distance-left {width: calc(100% - 260px);} .wrap.footer-wrap {padding-left: 0; padding-right: 0;} .wrap100 .col-25 {width: 25%} .wrap100 .col-75 {width: 75%;} /*---width szamolasa--*/ .dublino-business-product-menu > ul > li > ul { width: calc((100vw - (2 * var(--gap2))) - (((100vw - (2 * var(--gap2))) / 3.8))); } } @media screen and (max-width: 1300px){ .distance-left .itemlist li {width:33.33%} } @media screen and (max-width: 1200px){ /*---billboard slider---*/ .bb-title {font-size: var(--fs-xxxl);} .body-article2 .article-main-img.yt-video .yt-wrapper { position: absolute; height: 0; padding-bottom: 90%; width: 180%; top: -15%; left: -40%;} .list2 .it-calendar {width: 60%;} .it-calendar span, .it-calendar a {width: calc(25% - 1px);} .list2 .it-calendar span, .list2 .it-calendar a {width: calc(16.666% - 1px);} .panel-list-wrapper {width: 25%; padding: 10px; text-align: left;} .items-in-row-5 li {width: 25%;} .page-wrapper.distance-left {width: 100%;} .distance-left .itemlist li {width:25%} .distance-left .col-75 .itemlist li {width: 33.333%;} .distance-left .col-75 .itemlist.list2 li {width: 100%;} .distance-left .navbar-expand .just-icons {width: auto;} .distance-left .navbar-expand .navbar-nav.just-icons li { margin-right: 0 !important; display: flex; } .v-container .menu-toggle {width: 1.5em;} .v-container {width: 100%; position: relative; height: auto; padding: var(--gap);} .v-container .navbar-brand {width: auto;} .v-container .navbar-vertical .wrap {flex-wrap: wrap;align-items: center;justify-content: space-between;flex-direction: unset; padding: 0;} .v-container .desktop-hide {display:inline-block;} .v-container .navbar-collapse {display: none;} .v-container .mainnav-collapse {margin: 0 0;} } /*--ipad x-pro miatt--*/ @media screen and (max-width: 1200px) and (min-height: 1200px){ /*---billboard slider---*/ .bb-wrapper, .bb-wrapper .bb, .bb-wrapper .owl-carousel, .bb-wrapper .owl-stage, .bb-wrapper .owl-stage-outer, .bb-wrapper .owl-item {height: 40vh !important;} } @media screen and (min-width: 1001px){ .transparent-header .header-wrapper.sticky {transform: translateY(-30px);} } @media screen and (max-width: 1000px){ :root { --fs-xxxxl: 2.986em; --fs-xxxl: 2.488em; --fs-xxl: 2.074em; --fs-xl: 1.728em; --fs-lg: 1.44em; --fs-md: 1.2em; --fs-base: 1em; --fs-sm: 0.833em; --fs-sm2: 0.8em; --fs-sm3: 0.7em; --fs-xs: 0.694em; } body {font-size: 1em;} .demo-container {padding: 20px;} .demo-form {padding: 20px 0;} body .bx100 {font-size: 0.8em; line-height: 1.2;} .bx20, .bx-shadow {padding: 10px;} .page-wrapper {transition: var(--tr-all-03s);} .pt95 {padding-top: 60px;} .logo-wrapper {margin-left: 60px;} .logo-wrapper .page-logo {justify-content: left;} .header-top {margin-top: -30px;} .transparent-header .header-wrapper.sticky {transform: none;} /*.transparent-header .header-wrapper.sticky .mobil-menu-btn .hamburger, */ .transparent-header .header-wrapper.sticky .mobil-menu-btn .hamburger:after, .transparent-header .header-wrapper.sticky .mobil-menu-btn .hamburger:before, /*.shop-ct-btn.active .hamburger,*/ .shop-ct-btn.active .hamburger:before, .shop-ct-btn.active .hamburger:after {background: var(--c-gray);} .transparent-header .header-wrapper.sticky .mobil-menu-btn .hamburger, .shop-ct-btn.active .hamburger { background-image: linear-gradient(to right, var(--c-gray) 50%, transparent 50%); } /*--köv sor ideiglenes megoldás--*/ .topnav {display: none;} .mobil-menu-btn {display: inline-block;} #mainnav {position: fixed;left: 0;top: 0;bottom: 0;height: 100%;width: 260px;left: -280px; transition: var(--tr-all-03s);z-index: 200; background: #fff; padding: 60px 0; box-shadow: 0 0 10px rgba(0,0,0,0.2); } #mainnav.active {transform: translateX(280px);} .transparent-header .sticky #mainnav {height: 100% !important; display: inline-block; position: fixed;} .transparent-header .sticky #navigation {height: 100% !important; display: inline-block; position: relative;} .transparent-header .sticky #navigation li a {color: var(--c-darkgray);} #navigation {width: 100%; height: 100%; overflow: auto !important; display: inline-block; padding-right: 0;} #navigation li {width: 100%; height: auto; background: transparent; border-bottom: 1px solid rgba(0,0,0,0.1);} #navigation li a {padding: 8px 20px;height: auto; color: var(--c-darkgray); width: 100%; text-align: left;} #navigation li:hover {background: transparent;} #navigation li:hover > a {color: #fff; background: var(--c-primary-dark);} #navigation li.has-subnav > .subnav-wrapper {position: relative;width: 100%; max-height: 0; box-shadow: none;border-top: 1px solid rgba(0,0,0,0.1); transition: all 0.5s ease;} #navigation > li.has-subnav > a:after {border-color: var(--c-darkgray);} #navigation > li.has-subnav:hover > a:after {border-color: var(--c-white);} /*--mobilon ne hoverre menjen az almenü--*/ .mtgl, .mtgl2 {display: inline-block;} #navigation > li.has-subnav.active > .subnav-wrapper {height: auto; max-height: 1000px;} #navigation > li.has-subnav.active a:after {transform: rotate(-135deg); right: 15px; top: 45%;} #navigation > li.has-subnav {border-bottom: 0;} #navigation > li.has-subnav:hover .subnav-wrapper li {color: var(--c-darkgray);} #navigation > li.has-subnav .subnav-wrapper li a {padding-left: 40px;} #navigation > li.has-subnav:hover .subnav-wrapper li:hover {background: var(--c-primary);} .header-search-wrapper { position: absolute; top: 55px; background-color: var(--c-primary); width: 100%; visibility: hidden; left: 0; opacity: 0; transition: var(--tr-all-03s); } .header-search-wrapper.active {visibility: visible; transform: translateY(5px); opacity: 1;} .mt60 {margin-top: 60px;} .shop-ct-btn {position: absolute; top: 10px; left: 10px; margin-top: 0; border: 0; height: 40px; width: 40px;z-index: 1000;} .shop-ct-list-wrapper {width: 100%; padding: 0;} .shop-ct-list {max-height: 0; overflow: hidden; transition: all 0.5s ease;} .shop-ct-wrapper {height: 100%; position: fixed; left: -280px; width: 260px; padding: 60px 0; visibility: hidden;opacity: 1;top:0;} .wrapper-overflow {height: 100%; overflow: auto; width: 100%;} .shop-ct-list-wrapper.active .shop-ct-list {max-height: 600px;transition: all 1s ease;} .shop-ct-wrapper.active {transform: translate(280px,0);} .shop-ct-list-title {padding: 0;} .shop-ct-list-title a {padding: 8px 20px;float: left; text-decoration: none; color: var(--c-darkgray);border-bottom: 1px solid rgba(0,0,0,0.1); width: 100%;} .shop-ct-list-title:after { content: '';width: 10px; height: 10px; border-right: 1px solid var(--c-darkgray); border-bottom: 1px solid var(--c-darkgray); transform: rotate(45deg) translateX(-10px); display: inline-block; position: absolute; top: 50%; right: 10px; } .shop-ct-list-wrapper.active .shop-ct-list-title:after {transform: rotate(-135deg); right: 15px; top: 45%;} .shop-ct-list li {border-bottom: 1px solid rgba(0,0,0,0.1);} .shop-ct-list li a {padding: 8px 20px 8px 40px;float: left; width: 100%;} .search-toggle {display: inline-block;} .navbar-boxed .wrap {flex-wrap: wrap;} .navbar-boxed .navbar-container.w20 {width: 100%;} .navbar-boxed .navbar-container.w80 {width: 100%;} .navbar-boxed .navbar-container.w80 .dropdown {top: 0; bottom: auto;} .dropdown-panel {width: 100%; left: 0; z-index: 400;} .navbar-nav {width: 100%;} .navbar-nav.just-icons {flex-direction: row;} .navbar-nav.just-icons li {margin-right: 1rem !important;display: flex;} .navbar-expand-xl .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .navbar-nav .nav-link {padding: calc(0.7 * var(--gap)) 0; float: none; text-align: left;} .navbar-collapse {display: none;} .has-dropdown .dropdown { position: relative; visibility: visible; opacity: 1; left: auto; top: auto; transform: translate(0,0); min-width: 100% !important; width: 100%; border: 0; display: none; } .has-dropdown.active .dropdown {display: inline-block;} .has-dropdown:hover .dropdown { transform: translate(0,0); } .has-dropdown.active .nav-link, .nav-link:hover {color: var(--c-accent);} .v-container {padding-bottom: 0;} .navbar-vertical { padding: var(--gap) var(--gap);} /*--cms menu rules--*/ .dublino-business-top-menu > ul {border-top: 1px solid rgba(0,0,0,0.5);} .dublino-business-top-menu, .dublino-business-top-menu > ul, .dublino-business-top-menu > ul > li {width: 100%;} .dublino-business-top-menu > ul > li > div, .dublino-business-top-menu > ul > li > div > a {padding-left: 0; width: 100%; float: left; text-align: left;} .dublino-business-top-menu > ul > li {border-bottom: 1px solid rgba(0,0,0,0.5);} .dublino-business-top-menu > ul > li > ul {position: relative;visibility: visible;opacity: 1;left: auto;top: auto;transform: translate(0,0);min-width: 100% !important; width: 100%; border: 0;display: none;} .dublino-business-top-menu > ul > li:hover > ul {transform: translate(0,0);} .dublino-business-top-menu > ul > li:hover > ul, .dublino-business-top-menu > ul > li.active > ul {display: inline-block;} .dublino-business-top-menu > ul > li > ul > li, .dublino-business-top-menu > ul > li > ul > li > div, .dublino-business-top-menu > ul > li > ul > li > div > a {width: 100%;float: left;} .dublino-business-product-menu > ul > li > ul {display: none; position: relative;visibility: visible; opacity: 1;transform: translate(0,0); left: auto; right: auto; width: 100% !important;} .dublino-business-product-menu > ul > li.active > ul {display: flex; border-bottom: 1px solid rgba(255,255,255,0.2); border-top: 1px dashed rgba(255,255,255,0.2);} .dublino-business-product-menu > ul > li > div > a::after {transform: rotate(0); transition: all 0.2s ease;} .dublino-business-product-menu > ul > li.active > div > a::after {transform: rotate(180deg);} .footer-logo {float: left; margin-bottom: var(--gap2);} .footer-nav-wrapper {width: 100%;} .footer-right {width: 50%;} .pd-side10 {padding: var(--gap) var(--gap);} .pd-side20 {padding: var(--gap) var(--gap);} .contact-form {padding: var(--gap) var(--gap);} .bb-title {font-size: var(--fs-xxl); letter-spacing: 0;} .yt-wrapper {height: 120%;width: 180%;top: -10%;left: -40%;} /*---article---*/ article {padding: var(--gap) var(--gap2);} /*---search-list---*/ .col-25 {display: none;} .c25c75 .col-75 {width: 100%; padding: 0;} .col-75 .list-wrapper {padding-left: 0;} .wrap100 .col-25 {width: 100%; } .filter-order {padding: var(--gap) 0;} .col-25 select[name=order] {margin-bottom: var(--gap);} .desktop-hide {display: inline-block;} .desktop-hide-flex {display: flex;} .mobil-hide {display: none;} .col-filter { position: fixed; top: 0; left: 0; bottom: 0; background: #fff; width: 100%; padding: 0; height: 100%; z-index: 800; padding-right: 0 !important; flex-direction: column; display: none; margin-top: 0 !important; } .col-filter.active { display: flex; } .filter-section:nth-child(1) {border-top: 0;} .filter-wrapper { width: 100%; padding: 0; height: 100%; overflow-y: scroll; margin-top: 0; min-height: 0; border-top: 1px solid #ddd; padding: var(--gap); } .it-calendar a small, .it-calendar span small {display: none !important;} .pagerwrapp {width: 100%; text-align:center;} .pager {float: none;} .cart-left, .cart-right {padding: 0; width: 100%;} .product-left, .product-right {width: 100%; padding: 0 0 var(--gap) 0;} .text-desktop-hidden {width: auto; display: inline-block;} .tab-style-vertical .tabnav {width: 100%; padding-right: 0;} .tab-style-vertical .panel-wrapper {width: 100%;} .tab-style-vertical .panel {padding: var(--gap2) 0;} .tile {width: 50%;} .trustlist li {width: 50%;} .distance-left .itemlist li {width:33.33%} } @media screen and (max-width: 800px){ /*body {font-size: 1em; }*/ .footer-nav > li {width: 50%;} .fb-text, .fb-power {width: 100%; text-align:center; justify-content: center;} .fb-power {margin: var(--gap2) 0;} .fb-text span, .fb-text a {float: none; margin: 5px; display: inline-block;} .fb-icons {float: left; width: 100%; text-align:center;} .fb-icons a {float: none; display: inline-block; } .footer-right {width: 100%;} .form-l, .form-r {width: 100%; padding-left: 0; padding-right: 0;} .contact-form .form-l .box100 {padding: var(--gap) 0;} .pd-side10, .pd-side20 {padding: var(--gap) var(--gap);} h1 {font-size: var(--fs-xl); } h2 {font-size: var(--fs-lg); line-height: 1.2;} /*---billboard slider---*/ .bb-inner, .full-width-header .bb-wrapper .bb-inner {padding: calc(2 * var(--gap)) var(--gap) var(--gap2) var(--gap);} .bb-wrapper .owl-dots {bottom: 0; padding: var(--gap) calc(0.5 * var(--gap));} .bb-wrapper .owl-dots button {width: 10px; height: 10px; margin: calc(0.4 * var(--gap)) calc(0.4 * var(--gap));} .bb-wrapper .owl-nav {display: none;} .bb-inner > div {width: 100%;} .bb-title {max-height: 112px; overflow: hidden; font-size: var(--fs-xl);} .bb-text {font-size: var(--fs-base);} .bb-wrapper, .bb-wrapper .bb, .bb-wrapper .owl-carousel, .bb-wrapper .owl-stage, .bb-wrapper .owl-stage-outer, .bb-wrapper .owl-item {height: 320px !important; min-height: 320px !important;} .yt-wrapper {height: 120%;width: 200%;top: -10%;left: -50%;} .display-01 {font-size: 4em;} .display-02 {font-size: 3em;} .bb-text-left {width: 70%;} .bb-title.display-01 {font-size: 4em;} .full-width-header .bb-inner-stage .bb-stage-box { width: 100%; max-width: 1280px; text-align: left; padding: var(--gap) var(--gap2) ; } /*---article---*/ article {padding: var(--gap); line-height: 1.5;} article p, article ul li, article ol li {font-size: var(--fs-base);} .body-article2 article figure.block-left.block-outset, .body-article2 article figure.block-right.block-outset, article figure.block-right, article figure.block-left {width: 100%; float: left; margin: 0} .body-article2 article .double-figure.block-outset, article .double-figure {width: 100%; margin-left: 0; display: inline-block;} .double-figure * {margin: 0; width: 100%; display: inline-block; float: left; flex-grow: 0; flex-basis: 0;} .art-title h1 {font-size: var(--fs-xl); text-align: left;} article blockquote {line-height: 1.5;} .body-article2 .article-main-img {height: 35vh;} .body-article2 .article-main-img.yt-video .yt-wrapper { position: absolute; height: 0; padding-bottom: 90%; width: 180%; top: -15%; left: -40%; } article .pd-side10 {padding: var(--gap) 0;} .author-img {width: 60px; height: 60px;} .author-text {width: calc(100% - 80px);} /*---search-list---*/ .c25c75 .col-75 {width: 100%; padding: 0;} .itemlist li {width: 50%;} .distance-left .itemlist li {width: 50%;} .distance-left .col-75 .itemlist li {width: 50%;} .list2 li {width: 100%;} .it-wrap {padding-right: var(--gap);} .list2 .it-calendar {width: 100%;} .list2 .it-img {height: 200px;} .list2 .it-img-wrap {height: 200px;} .travellist li:hover {background: #fff; box-shadow: none;} .pagenav-wrapper .pagenav ul { width: 100%; white-space: nowrap !important; overflow-x: scroll !important; overflow-y: hidden !important; text-align:left; } .pagenav-wrapper .pagenav ul li { width: auto; padding: 0; margin: 0; list-style: none; float: none; vertical-align: top !important; white-space: normal !important; } .pagenav ul li a {font-size: var(--fs-xs);padding: 0 var(--gap2);} .responsive-table { border-collapse: separate; border-spacing: 0 var(--space-md); } .responsive-table thead {display: none;} .responsive-table .th-hidden {display: inline-block; float: left; text-align: left;} .responsive-table tr {background-color: var(--c-lightgray); border-bottom: 0; margin-bottom: var(--gap);} .responsive-table td {display: flex;justify-content: space-between; text-align: right; position: relative;} .responsive-table td::after { content: ''; position: absolute; bottom: 0; left: var(--space-md); width: calc(100% - (2 * var(--gap))); left: var(--gap); height: 1px; background-color: var(--c-mediumgray); } .responsive-table td:last-child::after {display: none;} .responsive-table td:last-child {text-align: right; justify-content: flex-end;} .responsive-table p.address {text-align: right; float: right;} .responsive-table p.payment {text-align: right; float: right; width: auto;} .td-item {gap: var(--space-sm);display: inline-block;align-items: stretch; max-width: 400px; text-align: right;} .td-item div p {text-align: right;} .navbar-form select {display: none;} .navbar-form input[type=search] {width: 85%;} .navbar-form .btn {width: 15%;} .panel-list-wrapper {width: 33.33%;} .tile {width: 100%;} .banner-wide {min-height: 320px;} .brandlist li {width: 25%;} .pager .first_link, .pager .previous_link, .pager .last_link, .pager .next_link, .pager a, .alt_pager a, .page_link, .ellipse, .page_link.active_page, .disabled { padding: 7px 10px; min-width: 34px; } .dublino-business-footer-menu > ul {border-bottom: 1px solid rgba(255,255,255,0.2); margin-bottom: var(--gap2);} .dublino-business-footer-menu > ul > li {width: 100%; padding-bottom: 0;padding-right: 0; cursor: pointer;} .dublino-business-footer-menu > ul > li > div > a {margin-bottom: var(--gap); position: relative;padding-top: var(--gap); border-top: 1px solid rgba(255,255,255,0.2);} .dublino-business-footer-menu > ul > li > div > a:after { position: absolute; background-image: url(../img/svg/select.svg); content: ''; width: 10px; height: 10px; background-size: 10px auto; background-repeat: no-repeat; background-position: center; right: var(--gap2); top: 50%; margin-top: 0; filter: invert(1); } .dublino-business-footer-menu > ul > li > ul {overflow: hidden; max-height: 0; transition: max-height 0.6s ease;} .dublino-business-footer-menu > ul > li > ul > li:last-child {padding-bottom: var(--gap2);} .dublino-business-footer-menu > ul > li.active > ul {max-height: 600px; transition: max-height 1s ease; } .dublino-business-product-menu > ul > li > ul > li {width: 33.333%;} .dublino-business-footer-menu > ul > li.active > div > a:after { transform: rotate(180deg); } } @media screen and (max-width: 600px){ .logo-wrapper {width: 35%;} .navend-wrapper {width: 35%;} .subscribe-block form input {width: 100%;} .subscribe-block form button {width: 100%; float: right; margin-top: var(--gap);} .dropdown-panel {padding: var(--gap);} .panel-list-wrapper {width: 50%;} /*---search-list---*/ .itemlist li {width: 50%; padding: var(--gap) calc(0.5 * var(--gap));} .list2 li {width: 100%;} .list-wrapper, .sliderwrap { padding-left: calc(0.5 * var(--gap)); padding-right: calc(0.5 * var(--gap)); } .distance-left .list-wrapper, .distance-left .col-75 .list-wrapper, .col-75 .list-wrapper {padding-right: calc(0.5 * var(--gap));padding-left: calc(0.5 * var(--gap));} /*.it-img {height: 200px;}*/ .it-title h3 {letter-spacing: 0;} .it-top p.fs-sm3 {font-size: var(--fs-sm);} .it-abs {display: inline-block;} .it-price {width: 55%;} .o-price {font-size: 0.6em;} .a-price {font-size: 0.9em;} .it-abs .btn {padding: calc(0.5 * var(--gap)) var(--gap);} .it-img, .it-img-wrap {height: 220px;} .list2 .it-img, .list2 .it-img-wrap {width: 27%; height: 120px;} .list2 .it-img-wrap .it-img {width: 100%;} .list2 .it-wrap, .list2 .it-abs {width: 70%;} .it-no-lead.list2 .it-img-wrap {width: 35%;} .it-no-lead.list2 .it-wrap {width: 62%;} .it-no-lead.list2 .it-abs {width: 62%;} .it-action .icon-btn span { height: 30px; width: 30px; line-height: 30px; } .drawer {width: 100%;} .drawer-right {right: -110%;} .drawer-cart.active {transform: translateX(-110%);} .input-number-horizontal.small {width: 60%;} .cart-item {grid-template-columns: 20% 50% 25%;} .cart-wrapper .cart-item {grid-template-columns: 20% 50% 25%; } .cart-wrapper .cart-item h2, .cart-wrapper .cart-item-end p {font-size: var(--fs-base);} .page-row {padding: var(--gap) 0;} .product-buttons {flex-wrap: wrap;} .product-buttons .input-number {width: 40%;} .product-buttons .btn-wish {width: 100%; align-self: flex-end} .responsive-table th, .responsive-table td {font-size: 0.9em;} .col-3 .panel-list-wrapper {width: 50%;} .item-slider .item {padding: var(--gap) calc(0.5 * var(--gap));} .trustlist li {width: 100%;} .banner-wide .banner-img-box {display: none;} .banner-wide .banner-text {width: 100%; padding: var(--gap2);} .brandlist li {width: 33.33%;} .tiles-wrapper.tiles-fw {padding: 0;} .tile {padding-top: 0;} .mainnav-collapse .has-dropdown .dropdown {padding: 0;} .distance-left .navbar .wrap, .navbar-vertical, .navbar-expand-xl .wrap, .navbar-boxed .wrap {padding: 0;} .v-container {padding-top: var(--gap2);} .page-content.c25c75 { padding: 0 0; } .loginBtn { font-size: 16px; text-align: left;} .dublino-business-product-menu > ul > li > ul > li {width: 50%;} } @media screen and (max-width: 410px){ .footer-nav > li {width: 100%;} article p, article ul li, article ol li {font-size: var(--fs-sm);} /*---search-list---*/ .distance-left .col-75 .itemlist li, .itemlist li {width:100%} .list2 .it-wrap {padding-right: 0;} .it-no-lead.list2 .it-img-wrap {width: 40%;} .it-no-lead.list2 .it-wrap {width: 57%;} .it-no-lead.list2 .it-abs {width: 57%;} .input-number-horizontal.small {width: 80%;} .page-row {padding: var(--gap);} .coupon-code-wrapp .btn, .coupon-code-wrapp input {width: 100%;} .brandlist li {width: 50%;} .dublino-business-product-menu > ul > li > ul > li {width: 100%;} } @media screen and (max-width: 360px){ .list2 .it-img-wrap {height: 120px; width: 25%;} .list2 .it-img {width: 25%} .list2 .it-img-wrap .it-img {width: 100%} .list2 .it-wrap, .list2 .it-abs {width: 72%;} .list2 .it-calendar span, .list2 .it-calendar a {width: calc(25% - 1px);} .responsive-table th, .responsive-table td {font-size: 0.9em;} } @media screen and (max-width: 300px){ /*---article---*/ .body-article2 .article-main-img {height: 30vh;} /*---billboard---*/ .bb-wrapper, .bb-wrapper .bb, .bb-wrapper .owl-carousel, .bb-wrapper .owl-stage, .bb-wrapper .owl-stage-outer, .bb-wrapper .owl-item {height: 50vh !important;} } #search-form ul{ position: absolute; top: 51px; background: black; width: 100%; text-align: left; height: auto; color: white; min-height:30px; z-index: 500; } #search-form ul li{ width: 100%; color: white; vertical-align: middle; line-height: 30px; padding: 5px; } #search-form ul li:hover{ background: var(--c-gold); } #search-form ul li a { color: white; text-decoration: none; display: inline-block; float: left; width: 100%; line-height: 14px; font-size: 12px; justify-content: center; } #search-form ul li a img { color: white; vertical-align: middle; margin-right: 20px; width: 50px; } .spinner-container { text-align: center; display: flex; width: 100%; justify-content: center; } .spinner-container i { font-size: 1.6rem; } .fa-spin { -webkit-animation: fa-spin 2s linear infinite; animation: fa-spin 2s linear infinite } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } .error { color: var(--c-red); } .sticky-cart { position: fixed !important; margin: 20px; display: flex; width: 50px; height: 50px; right: 0; background: #999; border-radius: 50%; z-index: 9999; padding: 4px; } @media screen and (max-width: 1000px) { .sticky-cart { bottom: 0 !important; } } .sticky-cart:hover { background: rgba(0,0,0,1); } .sticky-cart a { color: #fff; text-decoration: unset; } .sticky-cart:hover a { color: #fff; text-decoration: unset; } .fixed { } @media screen and (max-width: 1000px) { .fixed { z-index: 99; background:#fff; position: fixed; } }