/** /* ============================================================== /* Index of contents: /* ============================================================== */ /* A) Materialize CSS Framework /* B) Theme Styles /*============================================================*/ /* 1. Generic styles /* 2. Typography /* 3. Menus /* 4. Breadcrumb /* 5. Collapsible /* 6. listenon /* 7. author /* 8. widgets /* 9. footer /* 10. item metas /* 11. comments /* 12. part archive item /* 13. share /* 14. playlist /* 15. text shortened /* 16. lineup /* 17. tracklist /* 18. animation /* 19. 3dfx /* 21. morphicon /* 22. layer bottom /* 23. videobackground /* 24. slick-slider /* 25. pagination /* 26. musicplayer /* 27. form /* 28. booking /* 29. menu-social /* 30. socialcounter /* 31. related /* 32. visual composer /* 33. visual composer verticalmenu /* 34. part event inline /* 35. short image /* 36. 404 /* 37. short slider /* 38. gallery /* 39. perspectiveCard /* 40. loadmore /* 41. qtplaces /* 42. ajax /* 43. tablet /* 44. desktop /* 45. Contact Form 7 ============================================================*/ /** /* ================================================================ /* A) Materialize CSS Framework /* ================================================================ */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** 1. Set default font family to sans-serif. 2. Prevent iOS and IE text size adjust after device orientation change, without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** Improve readability of focused elements when they are also in an active/hover state. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** Contain overflow in all browsers. */ pre { overflow: auto; } /** Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */ /** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */ input { line-height: normal; } /** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width. 1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ } /** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } ul { list-style-type: none; } ul.browser-default { list-style-type: initial; } a { color: #00ced0; text-decoration: none; -webkit-tap-highlight-color: transparent; } .valign-wrapper { display: flex; align-items: center; } .valign-wrapper .valign { display: block; } ul { padding: 0; } ul li { list-style-type: none; } .clearfix { clear: both; } .z-depth-0 { box-shadow: none !important; } .z-depth-1, .collapsible, .dropdown-content, .btn-floating, .btn, .btn-large, nav { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .z-depth-1-half, .btn-floating:hover, .btn:hover, .btn-large:hover { box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); } .z-depth-2 { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .z-depth-3 { box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); } .z-depth-4 { box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); } .z-depth-5 { box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22); } .hoverable { transition: box-shadow .25s; box-shadow: 0; } .hoverable:hover { transition: box-shadow .25s; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .divider { height: 1px; overflow: hidden; } blockquote { margin: 20px 0; padding-left: 1.5rem; border-left: 5px solid #00ced0; } i { line-height: inherit; } i.left { float: left; margin-right: 15px; } i.right { float: right; margin-left: 15px; } i.tiny { font-size: 1rem; } i.small { font-size: 2rem; } i.medium { font-size: 4rem; } i.large { font-size: 6rem; } img.responsive-img, video.responsive-video { max-width: 100%; height: auto; } @media only screen and (max-width : 992px) { .pagination { width: 100%; } .pagination li.prev, .pagination li.next { width: 10%; } .pagination li.pages { width: 80%; overflow: hidden; white-space: nowrap; } } .breadcrumb { font-size: 18px; color: rgba(255, 255, 255, 0.7); } .breadcrumb i, .breadcrumb [class^="mdi-"], .breadcrumb [class*="mdi-"], .breadcrumb i.material-icons { display: inline-block; float: left; font-size: 24px; } .breadcrumb:before { content: '\E5CC'; color: rgba(255, 255, 255, 0.7); vertical-align: top; display: inline-block; font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 25px; margin: 0 10px 0 8px; -webkit-font-smoothing: antialiased; } .breadcrumb:first-child:before { display: none; } .breadcrumb:last-child { color: #fff; } .parallax-container { position: relative; overflow: hidden; height: 500px; } .parallax { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .parallax img { display: none; position: absolute; left: 50%; bottom: 0; min-width: 100%; min-height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transform: translateX(-50%); } .pin-top, .pin-bottom { position: relative; } .pinned { position: fixed !important; } /********************* Transition Classes */ ul.staggered-list li { opacity: 0; } .fade-in { opacity: 0; transform-origin: 0 50%; } /********************* Media Query Classes */ @media only screen and (max-width : 600px) { .hide-on-small-only, .hide-on-small-and-down { display: none !important; } } @media only screen and (max-width : 992px) { .hide-on-med-and-down { display: none !important; } } @media only screen and (max-width : 1200px) { .hide-on-large-and-down { display: none !important; } } @media only screen and (max-width : 1200px) { .hide-on-xl-and-down { display: none !important; } } @media only screen and (min-width : 768px) { .hide-on-med-and-up { display: none !important; } } @media only screen and (min-width: 600px) and (max-width: 992px) { .hide-on-med-only { display: none !important; } } @media only screen and (min-width : 1201px) { .hide-on-large-only { display: none !important; } } @media only screen and (min-width : 1201px) { .hide-on-xl-only { display: none !important; } } @media only screen and (min-width : 1201px) { .show-on-large { display: block !important; } } @media only screen and (min-width: 600px) and (max-width: 992px) { .show-on-medium { display: block !important; } } @media only screen and (max-width : 600px) { .show-on-small { display: block !important; } } @media only screen and (min-width : 768px) { .show-on-medium-and-up { display: block !important; } } @media only screen and (max-width : 992px) { .show-on-medium-and-down { display: block !important; } } @media only screen and (max-width : 600px) { .center-on-small-only { text-align: center; } } footer.page-footer { margin-top: 20px; padding-top: 20px; } footer.page-footer .footer-copyright { overflow: hidden; height: 50px; line-height: 50px; color: rgba(255, 255, 255, 0.8); background-color: rgba(51, 51, 51, 0.08); } table, th, td { border: none; } table { width: 100%; display: table; } table.bordered > thead > tr, table.bordered > tbody > tr { border-bottom: 1px solid #d0d0d0; } table.striped > tbody > tr:nth-child(odd) { background-color: #f2f2f2; } table.striped > tbody > tr > td { border-radius: 0; } table.highlight > tbody > tr { transition: background-color .25s ease; } table.highlight > tbody > tr:hover { background-color: #f2f2f2; } table.centered thead tr th, table.centered tbody tr td { text-align: center; } thead { border-bottom: 1px solid #d0d0d0; } td, th { padding: 15px 5px; display: table-cell; text-align: left; vertical-align: middle; border-radius: 2px; } @media only screen and (max-width : 992px) { table.responsive-table { width: 100%; border-collapse: collapse; border-spacing: 0; display: block; position: relative; /* sort out borders */ } table.responsive-table td:empty:before { content: '\00a0'; } table.responsive-table th, table.responsive-table td { margin: 0; vertical-align: top; } table.responsive-table th { text-align: left; } table.responsive-table thead { display: block; float: left; } table.responsive-table thead tr { display: block; padding: 0 10px 0 0; } table.responsive-table thead tr th::before { content: "\00a0"; } table.responsive-table tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; } table.responsive-table tbody tr { display: inline-block; vertical-align: top; } table.responsive-table th { display: block; text-align: right; } table.responsive-table td { display: block; min-height: 1.25em; text-align: left; } table.responsive-table tr { padding: 0 10px; } table.responsive-table thead { border: 0; border-right: 1px solid #d0d0d0; } table.responsive-table.bordered th { border-bottom: 0; border-left: 0; } table.responsive-table.bordered td { border-left: 0; border-right: 0; border-bottom: 0; } table.responsive-table.bordered tr { border: 0; } table.responsive-table.bordered tbody tr { border-right: 1px solid #d0d0d0; } } .secondary-content { float: right; color: #ff0d51; } .collapsible .collection { margin: 0; border: none; } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .progress { position: relative; height: 4px; display: block; width: 100%; background-color: rgba(100, 100, 100, 0.3); border-radius: 2px; margin: 0.5rem 0 1rem 0; overflow: hidden; } .progress .determinate { position: absolute; top: 0; left: 0; bottom: 0; background-color: #ff0d51; transition: width .3s linear; } .progress .indeterminate { background-color: #ff0d51; } .progress .indeterminate:before { content: ''; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } .progress .indeterminate:after { content: ''; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation-delay: 1.15s; } @keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } /******************* Utility Classes */ .hide { display: none !important; } .left-align { text-align: left; } .right-align { text-align: right; } .center, .center-align { text-align: center; } .left { float: left !important; } .right { float: right !important; } .no-select, input[type=range], input[type=range] + .thumb { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .circle { border-radius: 50%; } .center-block { display: block; margin-left: auto; margin-right: auto; } .truncate { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .no-padding { padding: 0 !important; } .container { margin: 0 auto; max-width: 1280px; width: 90%; } @media only screen and (min-width : 768px) { .container { width: 85%; } } @media only screen and (min-width : 1201px) { .container { width: 70%; } } .container .row { margin-left: -0.75rem; margin-right: -0.75rem; } .section { padding-top: 1rem; padding-bottom: 1rem; } .section.no-pad { padding: 0; } .section.no-pad-bot { padding-bottom: 0; } .section.no-pad-top { padding-top: 0; } .row { margin-left: auto; margin-right: auto; margin-bottom: 20px; } .row:after { content: ""; display: table; clear: both; } .row .col, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .qt-item { float: left; box-sizing: border-box; padding: 0 0.75rem; } .row .col[class*="push-"], .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .qt-item[class*="push-"], .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .qt-item[class*="push-"], .row .col[class*="pull-"], .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .qt-item[class*="pull-"], .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .qt-item[class*="pull-"] { position: relative; } .row .col.s1, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .s1.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .s1.qt-item { width: 8.3333333333%; margin-left: auto; left: auto; right: auto; } .row .col.s2, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .s2.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .s2.qt-item { width: 16.6666666667%; margin-left: auto; left: auto; right: auto; } .row .col.s3, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .s3.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .s3.qt-item { width: 25%; margin-left: auto; left: auto; right: auto; } .row .col.s4, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .s4.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .s4.qt-item { width: 33.3333333333%; margin-left: auto; left: auto; right: auto; } .row .col.s5, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .s5.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .s5.qt-item { width: 41.6666666667%; margin-left: auto; left: auto; right: auto; } .row .col.s6, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .s6.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .s6.qt-item { width: 50%; margin-left: auto; left: auto; right: auto; } .row .col.s7, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .s7.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .s7.qt-item { width: 58.3333333333%; margin-left: auto; left: auto; right: auto; } .row .col.s8, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .s8.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .s8.qt-item { width: 66.6666666667%; margin-left: auto; left: auto; right: auto; } .row .col.s9, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .s9.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .s9.qt-item { width: 75%; margin-left: auto; left: auto; right: auto; } .row .col.s10, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .s10.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .s10.qt-item { width: 83.3333333333%; margin-left: auto; left: auto; right: auto; } .row .col.s11, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .s11.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .s11.qt-item { width: 91.6666666667%; margin-left: auto; left: auto; right: auto; } .row .col.s12, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .qt-item { width: 100%; margin-left: auto; left: auto; right: auto; } .row .col.offset-s1, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-s1.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-s1.qt-item { margin-left: 8.3333333333%; } .row .col.pull-s1, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-s1.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-s1.qt-item { right: 8.3333333333%; } .row .col.push-s1, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-s1.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-s1.qt-item { left: 8.3333333333%; } .row .col.offset-s2, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-s2.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-s2.qt-item { margin-left: 16.6666666667%; } .row .col.pull-s2, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-s2.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-s2.qt-item { right: 16.6666666667%; } .row .col.push-s2, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-s2.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-s2.qt-item { left: 16.6666666667%; } .row .col.offset-s3, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-s3.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-s3.qt-item { margin-left: 25%; } .row .col.pull-s3, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-s3.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-s3.qt-item { right: 25%; } .row .col.push-s3, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-s3.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-s3.qt-item { left: 25%; } .row .col.offset-s4, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-s4.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-s4.qt-item { margin-left: 33.3333333333%; } .row .col.pull-s4, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-s4.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-s4.qt-item { right: 33.3333333333%; } .row .col.push-s4, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-s4.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-s4.qt-item { left: 33.3333333333%; } .row .col.offset-s5, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-s5.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-s5.qt-item { margin-left: 41.6666666667%; } .row .col.pull-s5, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-s5.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-s5.qt-item { right: 41.6666666667%; } .row .col.push-s5, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-s5.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-s5.qt-item { left: 41.6666666667%; } .row .col.offset-s6, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-s6.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-s6.qt-item { margin-left: 50%; } .row .col.pull-s6, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-s6.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-s6.qt-item { right: 50%; } .row .col.push-s6, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-s6.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-s6.qt-item { left: 50%; } .row .col.offset-s7, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-s7.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-s7.qt-item { margin-left: 58.3333333333%; } .row .col.pull-s7, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-s7.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-s7.qt-item { right: 58.3333333333%; } .row .col.push-s7, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-s7.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-s7.qt-item { left: 58.3333333333%; } .row .col.offset-s8, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-s8.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-s8.qt-item { margin-left: 66.6666666667%; } .row .col.pull-s8, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-s8.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-s8.qt-item { right: 66.6666666667%; } .row .col.push-s8, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-s8.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-s8.qt-item { left: 66.6666666667%; } .row .col.offset-s9, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-s9.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-s9.qt-item { margin-left: 75%; } .row .col.pull-s9, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-s9.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-s9.qt-item { right: 75%; } .row .col.push-s9, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-s9.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-s9.qt-item { left: 75%; } .row .col.offset-s10, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-s10.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-s10.qt-item { margin-left: 83.3333333333%; } .row .col.pull-s10, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-s10.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-s10.qt-item { right: 83.3333333333%; } .row .col.push-s10, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-s10.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-s10.qt-item { left: 83.3333333333%; } .row .col.offset-s11, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-s11.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-s11.qt-item { margin-left: 91.6666666667%; } .row .col.pull-s11, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-s11.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-s11.qt-item { right: 91.6666666667%; } .row .col.push-s11, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-s11.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-s11.qt-item { left: 91.6666666667%; } .row .col.offset-s12, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-s12.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-s12.qt-item { margin-left: 100%; } .row .col.pull-s12, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-s12.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-s12.qt-item { right: 100%; } .row .col.push-s12, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-s12.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-s12.qt-item { left: 100%; } @media only screen and (min-width : 768px) { .row .col.m1, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .m1.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .m1.qt-item { width: 8.3333333333%; margin-left: auto; left: auto; right: auto; } .row .col.m2, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .m2.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .m2.qt-item { width: 16.6666666667%; margin-left: auto; left: auto; right: auto; } .row .col.m3, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .m3.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .m3.qt-item { width: 25%; margin-left: auto; left: auto; right: auto; } .row .col.m4, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .m4.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .m4.qt-item { width: 33.3333333333%; margin-left: auto; left: auto; right: auto; } .row .col.m5, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .m5.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .m5.qt-item { width: 41.6666666667%; margin-left: auto; left: auto; right: auto; } .row .col.m6, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .m6.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .m6.qt-item { width: 50%; margin-left: auto; left: auto; right: auto; } .row .col.m7, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .m7.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .m7.qt-item { width: 58.3333333333%; margin-left: auto; left: auto; right: auto; } .row .col.m8, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .m8.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .m8.qt-item { width: 66.6666666667%; margin-left: auto; left: auto; right: auto; } .row .col.m9, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .m9.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .m9.qt-item { width: 75%; margin-left: auto; left: auto; right: auto; } .row .col.m10, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .m10.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .m10.qt-item { width: 83.3333333333%; margin-left: auto; left: auto; right: auto; } .row .col.m11, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .m11.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .m11.qt-item { width: 91.6666666667%; margin-left: auto; left: auto; right: auto; } .row .col.m12, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .m12.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .m12.qt-item { width: 100%; margin-left: auto; left: auto; right: auto; } .row .col.offset-m1, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-m1.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-m1.qt-item { margin-left: 8.3333333333%; } .row .col.pull-m1, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-m1.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-m1.qt-item { right: 8.3333333333%; } .row .col.push-m1, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-m1.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-m1.qt-item { left: 8.3333333333%; } .row .col.offset-m2, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-m2.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-m2.qt-item { margin-left: 16.6666666667%; } .row .col.pull-m2, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-m2.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-m2.qt-item { right: 16.6666666667%; } .row .col.push-m2, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-m2.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-m2.qt-item { left: 16.6666666667%; } .row .col.offset-m3, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-m3.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-m3.qt-item { margin-left: 25%; } .row .col.pull-m3, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-m3.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-m3.qt-item { right: 25%; } .row .col.push-m3, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-m3.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-m3.qt-item { left: 25%; } .row .col.offset-m4, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-m4.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-m4.qt-item { margin-left: 33.3333333333%; } .row .col.pull-m4, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-m4.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-m4.qt-item { right: 33.3333333333%; } .row .col.push-m4, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-m4.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-m4.qt-item { left: 33.3333333333%; } .row .col.offset-m5, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-m5.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-m5.qt-item { margin-left: 41.6666666667%; } .row .col.pull-m5, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-m5.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-m5.qt-item { right: 41.6666666667%; } .row .col.push-m5, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-m5.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-m5.qt-item { left: 41.6666666667%; } .row .col.offset-m6, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-m6.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-m6.qt-item { margin-left: 50%; } .row .col.pull-m6, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-m6.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-m6.qt-item { right: 50%; } .row .col.push-m6, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-m6.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-m6.qt-item { left: 50%; } .row .col.offset-m7, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-m7.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-m7.qt-item { margin-left: 58.3333333333%; } .row .col.pull-m7, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-m7.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-m7.qt-item { right: 58.3333333333%; } .row .col.push-m7, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-m7.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-m7.qt-item { left: 58.3333333333%; } .row .col.offset-m8, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-m8.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-m8.qt-item { margin-left: 66.6666666667%; } .row .col.pull-m8, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-m8.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-m8.qt-item { right: 66.6666666667%; } .row .col.push-m8, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-m8.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-m8.qt-item { left: 66.6666666667%; } .row .col.offset-m9, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-m9.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-m9.qt-item { margin-left: 75%; } .row .col.pull-m9, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-m9.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-m9.qt-item { right: 75%; } .row .col.push-m9, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-m9.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-m9.qt-item { left: 75%; } .row .col.offset-m10, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-m10.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-m10.qt-item { margin-left: 83.3333333333%; } .row .col.pull-m10, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-m10.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-m10.qt-item { right: 83.3333333333%; } .row .col.push-m10, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-m10.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-m10.qt-item { left: 83.3333333333%; } .row .col.offset-m11, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-m11.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-m11.qt-item { margin-left: 91.6666666667%; } .row .col.pull-m11, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-m11.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-m11.qt-item { right: 91.6666666667%; } .row .col.push-m11, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-m11.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-m11.qt-item { left: 91.6666666667%; } .row .col.offset-m12, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-m12.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-m12.qt-item { margin-left: 100%; } .row .col.pull-m12, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-m12.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-m12.qt-item { right: 100%; } .row .col.push-m12, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-m12.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-m12.qt-item { left: 100%; } } @media only screen and (min-width : 1201px) { .row .col.l1, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .l1.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .l1.qt-item { width: 8.3333333333%; margin-left: auto; left: auto; right: auto; } .row .col.l2, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .l2.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .l2.qt-item { width: 16.6666666667%; margin-left: auto; left: auto; right: auto; } .row .col.l3, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .l3.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .l3.qt-item { width: 25%; margin-left: auto; left: auto; right: auto; } .row .col.l4, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .l4.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .l4.qt-item { width: 33.3333333333%; margin-left: auto; left: auto; right: auto; } .row .col.l5, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .l5.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .l5.qt-item { width: 41.6666666667%; margin-left: auto; left: auto; right: auto; } .row .col.l6, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .l6.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .l6.qt-item { width: 50%; margin-left: auto; left: auto; right: auto; } .row .col.l7, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .l7.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .l7.qt-item { width: 58.3333333333%; margin-left: auto; left: auto; right: auto; } .row .col.l8, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .l8.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .l8.qt-item { width: 66.6666666667%; margin-left: auto; left: auto; right: auto; } .row .col.l9, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .l9.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .l9.qt-item { width: 75%; margin-left: auto; left: auto; right: auto; } .row .col.l10, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .l10.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .l10.qt-item { width: 83.3333333333%; margin-left: auto; left: auto; right: auto; } .row .col.l11, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .l11.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .l11.qt-item { width: 91.6666666667%; margin-left: auto; left: auto; right: auto; } .row .col.l12, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .l12.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .l12.qt-item { width: 100%; margin-left: auto; left: auto; right: auto; } .row .col.offset-l1, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-l1.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-l1.qt-item { margin-left: 8.3333333333%; } .row .col.pull-l1, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-l1.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-l1.qt-item { right: 8.3333333333%; } .row .col.push-l1, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-l1.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-l1.qt-item { left: 8.3333333333%; } .row .col.offset-l2, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-l2.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-l2.qt-item { margin-left: 16.6666666667%; } .row .col.pull-l2, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-l2.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-l2.qt-item { right: 16.6666666667%; } .row .col.push-l2, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-l2.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-l2.qt-item { left: 16.6666666667%; } .row .col.offset-l3, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-l3.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-l3.qt-item { margin-left: 25%; } .row .col.pull-l3, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-l3.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-l3.qt-item { right: 25%; } .row .col.push-l3, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-l3.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-l3.qt-item { left: 25%; } .row .col.offset-l4, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-l4.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-l4.qt-item { margin-left: 33.3333333333%; } .row .col.pull-l4, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-l4.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-l4.qt-item { right: 33.3333333333%; } .row .col.push-l4, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-l4.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-l4.qt-item { left: 33.3333333333%; } .row .col.offset-l5, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-l5.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-l5.qt-item { margin-left: 41.6666666667%; } .row .col.pull-l5, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-l5.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-l5.qt-item { right: 41.6666666667%; } .row .col.push-l5, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-l5.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-l5.qt-item { left: 41.6666666667%; } .row .col.offset-l6, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-l6.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-l6.qt-item { margin-left: 50%; } .row .col.pull-l6, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-l6.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-l6.qt-item { right: 50%; } .row .col.push-l6, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-l6.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-l6.qt-item { left: 50%; } .row .col.offset-l7, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-l7.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-l7.qt-item { margin-left: 58.3333333333%; } .row .col.pull-l7, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-l7.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-l7.qt-item { right: 58.3333333333%; } .row .col.push-l7, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-l7.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-l7.qt-item { left: 58.3333333333%; } .row .col.offset-l8, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-l8.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-l8.qt-item { margin-left: 66.6666666667%; } .row .col.pull-l8, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-l8.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-l8.qt-item { right: 66.6666666667%; } .row .col.push-l8, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-l8.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-l8.qt-item { left: 66.6666666667%; } .row .col.offset-l9, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-l9.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-l9.qt-item { margin-left: 75%; } .row .col.pull-l9, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-l9.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-l9.qt-item { right: 75%; } .row .col.push-l9, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-l9.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-l9.qt-item { left: 75%; } .row .col.offset-l10, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-l10.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-l10.qt-item { margin-left: 83.3333333333%; } .row .col.pull-l10, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-l10.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-l10.qt-item { right: 83.3333333333%; } .row .col.push-l10, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-l10.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-l10.qt-item { left: 83.3333333333%; } .row .col.offset-l11, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-l11.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-l11.qt-item { margin-left: 91.6666666667%; } .row .col.pull-l11, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-l11.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-l11.qt-item { right: 91.6666666667%; } .row .col.push-l11, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-l11.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-l11.qt-item { left: 91.6666666667%; } .row .col.offset-l12, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .offset-l12.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .offset-l12.qt-item { margin-left: 100%; } .row .col.pull-l12, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .pull-l12.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .pull-l12.qt-item { right: 100%; } .row .col.push-l12, .row .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .push-l12.qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .row .push-l12.qt-item { left: 100%; } } nav { width: 100%; height: 56px; line-height: 56px; } nav a { color: #fff; } nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons { display: block; font-size: 2rem; height: 56px; line-height: 56px; } nav .nav-wrapper { position: relative; height: 100%; } @media only screen and (min-width : 1201px) { nav a.button-collapse { display: none; } } nav .button-collapse { float: left; position: relative; z-index: 1; height: 56px; } nav .button-collapse i { font-size: 2.7rem; height: 56px; line-height: 56px; } nav .brand-logo { position: absolute; color: #fff; display: inline-block; font-size: 2.1rem; padding: 0; white-space: nowrap; } nav .brand-logo.center { left: 50%; transform: translateX(-50%); } @media only screen and (max-width : 992px) { nav .brand-logo { left: 50%; transform: translateX(-50%); } nav .brand-logo.left, nav .brand-logo.right { padding: 0; transform: none; } nav .brand-logo.left { left: 0.5rem; } nav .brand-logo.right { right: 0.5rem; left: auto; } } nav .brand-logo.right { right: 0.5rem; padding: 0; } nav ul { margin: 0; } nav ul li { transition: background-color .3s; float: left; padding: 0; } nav ul li.active { background-color: rgba(0, 0, 0, 0.1); } nav ul a { transition: background-color .3s; font-size: 13px; color: #fff; display: inline-block; padding: 0 15px; cursor: pointer; } nav ul a.btn, nav ul a.btn-large, nav ul a.btn-flat, nav ul a.btn-floating { margin-top: -2px; margin-left: 15px; margin-right: 15px; } nav ul.left { float: left; } nav .input-field { margin: 0; } nav .input-field input { height: 100%; font-size: 1.2rem; border: none; padding-left: 2rem; } nav .input-field input:focus, nav .input-field input[type=text]:valid, nav .input-field input[type=password]:valid, nav .input-field input[type=email]:valid, nav .input-field input[type=url]:valid, nav .input-field input[type=date]:valid { border: none; box-shadow: none; } nav .input-field label { top: 0; left: 0; } nav .input-field label i { color: rgba(255, 255, 255, 0.7); transition: color .3s; } nav .input-field label.active i, nav .input-field input:placeholder-shown + label i { color: #fff; } nav .input-field label.active, nav .input-field input:placeholder-shown + label { transform: translateY(0); } .navbar-fixed { position: relative; height: 56px; z-index: 998; } .navbar-fixed nav { position: fixed; } @media only screen and (min-width : 768px) { nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i { height: 64px; line-height: 64px; } .navbar-fixed { height: 64px; } } .tabs { display: flex; position: relative; overflow-x: auto; overflow-y: hidden; height: 48px; background-color: #fff; margin: 0 auto !important; width: 100%; white-space: nowrap; } .tabs .tab { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; display: block; float: left; text-align: center; line-height: 48px; height: 48px; padding: 0; margin: 0; text-transform: uppercase; text-overflow: ellipsis; overflow: hidden; letter-spacing: .8px; width: 15%; } .tabs .tab a { color: #00ced0; display: block; width: 100%; height: 100%; text-overflow: ellipsis; overflow: hidden; transition: color .28s ease; } .tabs .tab a:hover { color: #37fdff; } .tabs .tab a i { font-size: 18px; } .tabs .tab.disabled a { color: #37fdff; cursor: default; } .tabs .indicator { position: absolute; bottom: 0; height: 2px; background-color: #00fcff; will-change: left, right; } .material-tooltip { padding: 10px 8px; font-size: 1rem; z-index: 2000; background-color: transparent; border-radius: 2px; color: #fff; min-height: 36px; line-height: 120%; opacity: 0; position: absolute; text-align: center; max-width: calc(100% - 4px); overflow: hidden; left: 0; top: 0; pointer-events: none; visibility: hidden; } .backdrop { position: absolute; opacity: 0; height: 7px; width: 14px; border-radius: 0 0 50% 50%; background-color: #323232; z-index: -1; transform-origin: 50% 0%; visibility: hidden; } .btn, .btn-large, .btn-flat { border: none; border-radius: 2px; display: inline-block; height: 36px; line-height: 36px; outline: 0; padding: 0 2rem; text-transform: uppercase; vertical-align: middle; -webkit-tap-highlight-color: transparent; } .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn:disabled .btn-large:disabled, .btn-large:disabled .btn-large:disabled, .btn-floating:disabled { background-color: #DFDFDF !important; box-shadow: none; color: #9F9F9F !important; cursor: default; } .btn.disabled *, .btn-floating.disabled *, .btn-large.disabled *, .btn:disabled .btn-large:disabled *, .btn-large:disabled .btn-large:disabled *, .btn-floating:disabled * { pointer-events: none; } .btn.disabled:hover, .btn-floating.disabled:hover, .btn-large.disabled:hover, .btn:disabled .btn-large:disabled:hover, .btn-large:disabled .btn-large:disabled:hover, .btn-floating:disabled:hover { background-color: #DFDFDF !important; color: #9F9F9F !important; } .btn i, .btn-floating i, .btn-large i, .btn-flat i { font-size: 1.3rem; line-height: inherit; } .btn, .btn-large { text-decoration: none; color: #fff; text-align: center; letter-spacing: .5px; transition: .2s ease-out; cursor: pointer; } .btn-floating { display: inline-block; color: #fff; position: relative; overflow: hidden; z-index: 1; width: 37px; height: 37px; line-height: 37px; padding: 0; border-radius: 50%; transition: .3s; cursor: pointer; vertical-align: middle; } .btn-floating i { width: inherit; display: inline-block; text-align: center; color: #fff; font-size: 1.6rem; line-height: 37px; } .btn-floating:before { border-radius: 0; } .btn-floating.btn-large { width: 55.5px; height: 55.5px; } .btn-floating.btn-large i { line-height: 55.5px; } button.btn-floating { border: none; } .fixed-action-btn { position: fixed; right: 23px; bottom: 23px; padding-top: 15px; margin-bottom: 0; z-index: 998; } .fixed-action-btn.active ul, input:placeholder-shown + label.fixed-action-btn ul { visibility: visible; } .fixed-action-btn.horizontal { padding: 0 0 0 15px; } .fixed-action-btn.horizontal ul { text-align: right; right: 64px; top: 50%; transform: translateY(-50%); height: 100%; left: auto; width: 500px; /*width 100% only goes to width of button container */ } .fixed-action-btn.horizontal ul li { display: inline-block; margin: 15px 15px 0 0; } .fixed-action-btn ul { left: 0; right: 0; text-align: center; position: absolute; bottom: 64px; margin: 0; visibility: hidden; } .fixed-action-btn ul li { margin-bottom: 15px; } .fixed-action-btn ul a.btn-floating { opacity: 0; } .btn-flat { box-shadow: none; background-color: transparent; color: #343434; cursor: pointer; } .btn-flat.disabled { color: #b3b3b3; cursor: default; } .btn-large { height: 54px; line-height: 54px; } .btn-large i { font-size: 1.6rem; } .btn-block { display: block; } .dropdown-content { background-color: #fff; margin: 0; display: none; min-width: 100px; max-height: 650px; overflow-y: auto; opacity: 0; position: absolute; z-index: 999; will-change: width, height; } .dropdown-content li { clear: both; cursor: pointer; min-height: 50px; line-height: 1.5rem; width: 100%; text-align: left; text-transform: none; } .dropdown-content li:hover, .dropdown-content li.active, .dropdown-content li.selected { background-color: #eee; } .dropdown-content li.active.selected { background-color: #e1e1e1; } .dropdown-content li.divider { min-height: 0; height: 1px; } .dropdown-content li > a, .dropdown-content li > span { font-size: 16px; color: #ff0d51; display: block; line-height: 22px; padding: 14px 16px; } .dropdown-content li > span > label { top: 1px; left: 3px; height: 18px; } .dropdown-content li > a > i { height: inherit; line-height: inherit; } .collapsible { margin: 0.5rem 0 1rem 0; } .collapsible-header { display: block; cursor: pointer; min-height: 3rem; line-height: 3rem; } .collapsible-header i { width: 2rem; font-size: 1.6rem; line-height: 3rem; display: block; float: left; text-align: center; margin-right: 1rem; } .collapsible-body { display: none; box-sizing: border-box; } .side-nav .collapsible, .side-nav.fixed .collapsible { border: none; box-shadow: none; } .side-nav .collapsible li, .side-nav.fixed .collapsible li { padding: 0; } .side-nav .collapsible-header, .side-nav.fixed .collapsible-header { border: none; line-height: inherit; height: inherit; } .side-nav .collapsible-header:hover, .side-nav.fixed .collapsible-header:hover { background-color: rgba(0, 0, 0, 0.05); } .side-nav .collapsible-header i, .side-nav.fixed .collapsible-header i { line-height: inherit; } .side-nav .collapsible-body, .side-nav.fixed .collapsible-body { border: 0; } .collapsible.popout { border: none; box-shadow: none; } .collapsible.popout > li { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); margin: 0 24px; transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .collapsible.popout > li.active { box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); margin: 16px 0; } select:focus { outline: 1px solid rgba(50, 50, 50, 0.5); } button:focus { outline: none; } label { font-size: 0.8rem; } /* Text Inputs + Textarea ========================================================================== */ /* Style Placeholders */ ::-webkit-input-placeholder { color: rgba(50, 50, 50, 0.5); } :-moz-placeholder { /* Firefox 18- */ color: rgba(50, 50, 50, 0.5); } ::-moz-placeholder { /* Firefox 19+ */ color: rgba(50, 50, 50, 0.5); } :-ms-input-placeholder { color: rgba(50, 50, 50, 0.5); } /* Text inputs */ input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea { background-color: transparent; border: none; border-bottom: 2px solid rgba(100, 100, 100, 0.5); border-radius: 0; outline: none; height: 3rem; width: 100%; font-size: 1rem; margin: 0 0 15px 0; padding: 0; box-shadow: none; box-sizing: content-box; transition: all 0.3s; } input:not([type]):disabled, input[readonly="readonly"]:not([type]), input[type=text]:disabled, input[type=text][readonly="readonly"], input[type=password]:disabled, input[type=password][readonly="readonly"], input[type=email]:disabled, input[type=email][readonly="readonly"], input[type=url]:disabled, input[type=url][readonly="readonly"], input[type=time]:disabled, input[type=time][readonly="readonly"], input[type=date]:disabled, input[type=date][readonly="readonly"], input[type=datetime]:disabled, input[type=datetime][readonly="readonly"], input[type=datetime-local]:disabled, input[type=datetime-local][readonly="readonly"], input[type=tel]:disabled, input[type=tel][readonly="readonly"], input[type=number]:disabled, input[type=number][readonly="readonly"], input[type=search]:disabled, input[type=search][readonly="readonly"], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly="readonly"] { color: #00ced0; border-bottom: 1px dotted rgba(0, 0, 0, 0.26); } input:not([type]):disabled + label, input[readonly="readonly"]:not([type]) + label, input[type=text]:disabled + label, input[type=text][readonly="readonly"] + label, input[type=password]:disabled + label, input[type=password][readonly="readonly"] + label, input[type=email]:disabled + label, input[type=email][readonly="readonly"] + label, input[type=url]:disabled + label, input[type=url][readonly="readonly"] + label, input[type=time]:disabled + label, input[type=time][readonly="readonly"] + label, input[type=date]:disabled + label, input[type=date][readonly="readonly"] + label, input[type=datetime]:disabled + label, input[type=datetime][readonly="readonly"] + label, input[type=datetime-local]:disabled + label, input[type=datetime-local][readonly="readonly"] + label, input[type=tel]:disabled + label, input[type=tel][readonly="readonly"] + label, input[type=number]:disabled + label, input[type=number][readonly="readonly"] + label, input[type=search]:disabled + label, input[type=search][readonly="readonly"] + label, textarea.materialize-textarea:disabled + label, textarea.materialize-textarea[readonly="readonly"] + label { color: rgba(0, 0, 0, 0.26); } input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { border-bottom: 2px solid rgba(100, 100, 100, 0.5); border-color: #00ced0; box-shadow: none; } input:not([type]):focus:not([readonly]) + label, input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label { color: #00ced0; } input.valid:not([type]), input.valid:not([type]):focus, input.valid[type=text], input.valid[type=text]:focus, input.valid[type=password], input.valid[type=password]:focus, input.valid[type=email], input.valid[type=email]:focus, input.valid[type=url], input.valid[type=url]:focus, input.valid[type=time], input.valid[type=time]:focus, input.valid[type=date], input.valid[type=date]:focus, input.valid[type=datetime], input.valid[type=datetime]:focus, input.valid[type=datetime-local], input.valid[type=datetime-local]:focus, input.valid[type=tel], input.valid[type=tel]:focus, input.valid[type=number], input.valid[type=number]:focus, input.valid[type=search], input.valid[type=search]:focus, textarea.materialize-textarea.valid, textarea.materialize-textarea.valid:focus { border-bottom: 2px solid #4caf50; box-shadow: none; } input.valid:not([type]) + label:after, input.valid:not([type]):focus + label:after, input.valid[type=text] + label:after, input.valid[type=text]:focus + label:after, input.valid[type=password] + label:after, input.valid[type=password]:focus + label:after, input.valid[type=email] + label:after, input.valid[type=email]:focus + label:after, input.valid[type=url] + label:after, input.valid[type=url]:focus + label:after, input.valid[type=time] + label:after, input.valid[type=time]:focus + label:after, input.valid[type=date] + label:after, input.valid[type=date]:focus + label:after, input.valid[type=datetime] + label:after, input.valid[type=datetime]:focus + label:after, input.valid[type=datetime-local] + label:after, input.valid[type=datetime-local]:focus + label:after, input.valid[type=tel] + label:after, input.valid[type=tel]:focus + label:after, input.valid[type=number] + label:after, input.valid[type=number]:focus + label:after, input.valid[type=search] + label:after, input.valid[type=search]:focus + label:after, textarea.materialize-textarea.valid + label:after, textarea.materialize-textarea.valid:focus + label:after { content: attr(data-success); color: #4caf50; opacity: 1; } input.invalid:not([type]), input.invalid:not([type]):focus, input.invalid[type=text], input.invalid[type=text]:focus, input.invalid[type=password], input.invalid[type=password]:focus, input.invalid[type=email], input.invalid[type=email]:focus, input.invalid[type=url], input.invalid[type=url]:focus, input.invalid[type=time], input.invalid[type=time]:focus, input.invalid[type=date], input.invalid[type=date]:focus, input.invalid[type=datetime], input.invalid[type=datetime]:focus, input.invalid[type=datetime-local], input.invalid[type=datetime-local]:focus, input.invalid[type=tel], input.invalid[type=tel]:focus, input.invalid[type=number], input.invalid[type=number]:focus, input.invalid[type=search], input.invalid[type=search]:focus, textarea.materialize-textarea.invalid, textarea.materialize-textarea.invalid:focus { border-bottom: 1px solid #f00; box-shadow: 0 1px 0 0 #f00; } input.invalid:not([type]) + label:after, input.invalid:not([type]):focus + label:after, input.invalid[type=text] + label:after, input.invalid[type=text]:focus + label:after, input.invalid[type=password] + label:after, input.invalid[type=password]:focus + label:after, input.invalid[type=email] + label:after, input.invalid[type=email]:focus + label:after, input.invalid[type=url] + label:after, input.invalid[type=url]:focus + label:after, input.invalid[type=time] + label:after, input.invalid[type=time]:focus + label:after, input.invalid[type=date] + label:after, input.invalid[type=date]:focus + label:after, input.invalid[type=datetime] + label:after, input.invalid[type=datetime]:focus + label:after, input.invalid[type=datetime-local] + label:after, input.invalid[type=datetime-local]:focus + label:after, input.invalid[type=tel] + label:after, input.invalid[type=tel]:focus + label:after, input.invalid[type=number] + label:after, input.invalid[type=number]:focus + label:after, input.invalid[type=search] + label:after, input.invalid[type=search]:focus + label:after, textarea.materialize-textarea.invalid + label:after, textarea.materialize-textarea.invalid:focus + label:after { content: attr(data-error); color: #f00; opacity: 1; } input.validate:not([type]) + label, input.validate[type=text] + label, input.validate[type=password] + label, input.validate[type=email] + label, input.validate[type=url] + label, input.validate[type=time] + label, input.validate[type=date] + label, input.validate[type=datetime] + label, input.validate[type=datetime-local] + label, input.validate[type=tel] + label, input.validate[type=number] + label, input.validate[type=search] + label, textarea.materialize-textarea.validate + label { width: 100%; pointer-events: none; } input:not([type]) + label:after, input[type=text] + label:after, input[type=password] + label:after, input[type=email] + label:after, input[type=url] + label:after, input[type=time] + label:after, input[type=date] + label:after, input[type=datetime] + label:after, input[type=datetime-local] + label:after, input[type=tel] + label:after, input[type=number] + label:after, input[type=search] + label:after, textarea.materialize-textarea + label:after { display: block; content: ""; position: absolute; top: 65px; opacity: 0; transition: .2s opacity ease-out, .2s color ease-out; } .input-field { position: relative; margin-top: 1rem; } .input-field label { color: color("grey", "base"); position: absolute; top: 0.6rem; left: 0.75rem; font-size: 1rem; cursor: text; transition: .2s ease-out; } .input-field label.active, .input-field input:placeholder-shown + label { font-size: 0.8rem; transform: translateY(-140%); } .input-field .prefix { position: absolute; width: 3rem; font-size: 2rem; transition: color .2s; } .input-field .prefix.active, .input-field input:placeholder-shown + label.prefix { color: #00ced0; } .input-field .prefix ~ input, .input-field .prefix ~ textarea { margin-left: 3rem; width: 92%; width: calc(100% - 3rem); } .input-field .prefix ~ textarea { padding-top: .8rem; } .input-field .prefix ~ label { margin-left: 3rem; } @media only screen and (max-width : 992px) { .input-field .prefix ~ input { width: 86%; width: calc(100% - 3rem); } } @media only screen and (max-width : 600px) { .input-field .prefix ~ input { width: 80%; width: calc(100% - 3rem); } } /* Search Field */ .input-field input[type=search] { display: block; line-height: inherit; padding-left: 4rem; width: calc(100% - 4rem); } .input-field input[type=search]:focus { background-color: #fff; border: 0; box-shadow: none; color: #444; } .input-field input[type=search]:focus + label i, .input-field input[type=search]:focus ~ .mdi-navigation-close, .input-field input[type=search]:focus ~ .material-icons { color: #444; } .input-field input[type=search] + label { left: 1rem; } .input-field input[type=search] ~ .mdi-navigation-close, .input-field input[type=search] ~ .material-icons { position: absolute; top: 0; right: 1rem; color: transparent; cursor: pointer; font-size: 2rem; transition: .3s color; } /* Textarea */ textarea { width: 100%; height: 3rem; background-color: transparent; } textarea.materialize-textarea { overflow-y: hidden; /* prevents scroll bar flash */ padding: 1.6rem 0; /* prevents text jump on Enter keypress */ resize: none; min-height: 3rem; } .hiddendiv { display: none; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */ padding-top: 1.2rem; /* prevents text jump on Enter keypress */ } /* Radio Buttons ========================================================================== */ [type="radio"]:not(:checked), [type="radio"]:checked { position: absolute; left: -9999px; opacity: 0; } [type="radio"]:not(:checked) + label, [type="radio"]:checked + label { position: relative; padding-left: 35px; cursor: pointer; display: inline-block; height: 25px; line-height: 25px; font-size: 1rem; transition: .28s ease; -khtml-user-select: none; /* webkit (konqueror) browsers */ user-select: none; } [type="radio"] + label:before, [type="radio"] + label:after { content: ''; position: absolute; left: 0; top: 0; margin: 4px; width: 16px; height: 16px; z-index: 0; transition: .28s ease; } /* Unchecked styles */ [type="radio"]:not(:checked) + label:before, [type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:before, [type="radio"]:checked + label:after, .with-gap[type="radio"]:checked + label:before, .with-gap[type="radio"]:checked + label:after { border-radius: 50%; } [type="radio"]:not(:checked) + label:before, [type="radio"]:not(:checked) + label:after { border: 2px solid #5a5a5a; } [type="radio"]:not(:checked) + label:after { z-index: -1; transform: scale(0); } /* Checked styles */ [type="radio"]:checked + label:before { border: 2px solid transparent; } [type="radio"]:checked + label:after, .with-gap[type="radio"]:checked + label:before, .with-gap[type="radio"]:checked + label:after { border: 2px solid #ff0d51; } [type="radio"]:checked + label:after, .with-gap[type="radio"]:checked + label:after { background-color: #ff0d51; z-index: 0; } [type="radio"]:checked + label:after { transform: scale(1.02); } /* Radio With gap */ .with-gap[type="radio"]:checked + label:after { transform: scale(0.5); } /* Focused styles */ .tabbed[type="radio"]:focus + label:before { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); } /* Disabled Radio With gap */ .with-gap[type="radio"]:disabled:checked + label:before { border: 2px solid rgba(0, 0, 0, 0.26); } .with-gap[type="radio"]:disabled:checked + label:after { border: none; background-color: rgba(0, 0, 0, 0.26); } /* Disabled style */ [type="radio"]:disabled:not(:checked) + label:before, [type="radio"]:disabled:checked + label:before { background-color: transparent; border-color: rgba(0, 0, 0, 0.26); } [type="radio"]:disabled + label { color: rgba(0, 0, 0, 0.26); } [type="radio"]:disabled:not(:checked) + label:before { border-color: rgba(0, 0, 0, 0.26); } [type="radio"]:disabled:checked + label:after { background-color: rgba(0, 0, 0, 0.26); border-color: #BDBDBD; } /* Checkboxes ========================================================================== */ /* CUSTOM CSS CHECKBOXES */ form p { margin-bottom: 10px; text-align: left; } form p:last-child { margin-bottom: 0; } /* Remove default checkbox */ [type="checkbox"]:not(:checked), [type="checkbox"]:checked { position: absolute; left: -9999px; opacity: 0; } [type="checkbox"] { /* checkbox aspect */ } [type="checkbox"] + label { position: relative; padding-left: 35px; cursor: pointer; display: inline-block; height: 25px; line-height: 25px; font-size: 1rem; -webkit-user-select: none; /* webkit (safari, chrome) browsers */ -moz-user-select: none; /* mozilla browsers */ -khtml-user-select: none; /* webkit (konqueror) browsers */ -ms-user-select: none; /* IE10+ */ } [type="checkbox"] + label:before, [type="checkbox"]:not(.filled-in) + label:after { content: ''; position: absolute; top: 0; left: 0; width: 18px; height: 18px; z-index: 0; border: 2px solid #5a5a5a; border-radius: 1px; margin-top: 2px; transition: .2s; } [type="checkbox"]:not(.filled-in) + label:after { border: 0; transform: scale(0); } [type="checkbox"]:not(:checked):disabled + label:before { border: none; background-color: rgba(0, 0, 0, 0.26); } .tabbed[type="checkbox"]:focus + label:after { transform: scale(1); border: 0; border-radius: 50%; box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1); } [type="checkbox"]:checked + label:before { top: -4px; left: -5px; width: 12px; height: 22px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid #ff0d51; border-bottom: 2px solid #ff0d51; transform: rotate(40deg); backface-visibility: hidden; transform-origin: 100% 100%; } [type="checkbox"]:checked:disabled + label:before { border-right: 2px solid rgba(0, 0, 0, 0.26); border-bottom: 2px solid rgba(0, 0, 0, 0.26); } /* Indeterminate checkbox */ [type="checkbox"]:indeterminate + label:before { top: -11px; left: -12px; width: 10px; height: 22px; border-top: none; border-left: none; border-right: 2px solid #ff0d51; border-bottom: none; transform: rotate(90deg); backface-visibility: hidden; transform-origin: 100% 100%; } [type="checkbox"]:indeterminate:disabled + label:before { border-right: 2px solid rgba(0, 0, 0, 0.26); background-color: transparent; } .filled-in[type="checkbox"] + label:after { border-radius: 2px; } .filled-in[type="checkbox"] + label:before, .filled-in[type="checkbox"] + label:after { content: ''; left: 0; position: absolute; /* .1s delay is for check animation */ transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s; z-index: 1; } .filled-in[type="checkbox"]:not(:checked) + label:before { width: 0; height: 0; border: 3px solid transparent; left: 6px; top: 10px; -webkit-transform: rotateZ(37deg); transform: rotateZ(37deg); -webkit-transform-origin: 20% 40%; transform-origin: 100% 100%; } .filled-in[type="checkbox"]:not(:checked) + label:after { height: 20px; width: 20px; background-color: transparent; border: 2px solid #5a5a5a; top: 0px; z-index: 0; } .filled-in[type="checkbox"]:checked + label:before { top: 0; left: 1px; width: 8px; height: 13px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotateZ(37deg); transform: rotateZ(37deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } .filled-in[type="checkbox"]:checked + label:after { top: 0; width: 20px; height: 20px; border: 2px solid #ff0d51; background-color: #ff0d51; z-index: 0; } .filled-in.tabbed[type="checkbox"]:focus + label:after { border-radius: 2px; border-color: #5a5a5a; background-color: rgba(0, 0, 0, 0.1); } .filled-in.tabbed[type="checkbox"]:checked:focus + label:after { border-radius: 2px; background-color: #ff0d51; border-color: #ff0d51; } .filled-in[type="checkbox"]:disabled:not(:checked) + label:before { background-color: transparent; border: 2px solid transparent; } .filled-in[type="checkbox"]:disabled:not(:checked) + label:after { border-color: transparent; background-color: #BDBDBD; } .filled-in[type="checkbox"]:disabled:checked + label:before { background-color: transparent; } .filled-in[type="checkbox"]:disabled:checked + label:after { background-color: #BDBDBD; border-color: #BDBDBD; } /* Select Field ========================================================================== */ select { display: none; } select.browser-default { display: block; } select { background-color: rgba(255, 255, 255, 0.9); width: 100%; padding: 5px; border: 1px solid #f2f2f2; border-radius: 2px; height: 3rem; } .select-label { position: absolute; } .select-wrapper { position: relative; } .select-wrapper input.select-dropdown { position: relative; cursor: pointer; background-color: transparent; border: none; border-bottom: 2px solid rgba(100, 100, 100, 0.5); outline: none; height: 3rem; line-height: 3rem; width: 100%; font-size: 1rem; margin: 0 0 15px 0; padding: 0; display: block; } .select-wrapper span.caret { color: initial; position: absolute; right: 0; top: 16px; font-size: 10px; } .select-wrapper span.caret.disabled { color: rgba(0, 0, 0, 0.26); } .select-wrapper + label { position: absolute; top: -14px; font-size: 0.8rem; } select:disabled { color: rgba(0, 0, 0, 0.3); } .select-wrapper input.select-dropdown:disabled { color: rgba(0, 0, 0, 0.3); cursor: default; -webkit-user-select: none; /* webkit (safari, chrome) browsers */ -moz-user-select: none; /* mozilla browsers */ -ms-user-select: none; /* IE10+ */ border-bottom: 1px solid rgba(0, 0, 0, 0.3); } .select-wrapper i { color: rgba(0, 0, 0, 0.3); } .select-dropdown li.disabled, .select-dropdown li.disabled > span, .select-dropdown li.optgroup { color: rgba(0, 0, 0, 0.3); background-color: transparent; } .prefix ~ .select-wrapper { margin-left: 3rem; width: 92%; width: calc(100% - 3rem); } .prefix ~ label { margin-left: 3rem; } .select-dropdown li img { height: 40px; width: 40px; margin: 5px 15px; float: right; } .select-dropdown li.optgroup { border-top: 1px solid #eee; } .select-dropdown li.optgroup.selected > span { color: rgba(0, 0, 0, 0.7); } .select-dropdown li.optgroup > span { color: rgba(0, 0, 0, 0.4); } .select-dropdown li.optgroup ~ li.optgroup-option { padding-left: 1rem; } /* File Input ========================================================================== */ .file-field { position: relative; } .file-field .file-path-wrapper { overflow: hidden; padding-left: 10px; } .file-field input.file-path { width: 100%; } .file-field .btn, .file-field .btn-large { float: left; height: 3rem; line-height: 3rem; } .file-field span { cursor: pointer; } .file-field input[type=file] { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } /* Range ========================================================================== */ .range-field { position: relative; } input[type=range], input[type=range] + .thumb { cursor: pointer; } input[type=range] { position: relative; background-color: transparent; border: none; outline: none; width: 100%; margin: 15px 0; padding: 0; } input[type=range]:focus { outline: none; } input[type=range] + .thumb { position: absolute; border: none; height: 0; width: 0; border-radius: 50%; background-color: #ff0d51; top: 10px; margin-left: -6px; transform-origin: 50% 50%; transform: rotate(-45deg); } input[type=range] + .thumb .value { display: block; width: 30px; text-align: center; color: #ff0d51; font-size: 0; transform: rotate(45deg); } input[type=range] + .thumb.active, input[type=range]:placeholder-shown + label.thumb { border-radius: 50% 50% 50% 0; } input[type=range] + .thumb.active .value, input[type=range]:placeholder-shown + label.thumb .value { color: #fff; margin-left: -1px; margin-top: 8px; font-size: 10px; } input[type=range] { -webkit-appearance: none; } input[type=range]::-webkit-slider-runnable-track { height: 3px; background: #c2c0c2; border: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 14px; width: 14px; border-radius: 50%; background-color: #ff0d51; transform-origin: 50% 50%; margin: -5px 0 0 0; transition: .3s; } input[type=range]:focus::-webkit-slider-runnable-track { background: #ccc; } input[type=range] { /* fix for FF unable to apply focus style bug */ border: 1px solid white; /*required for proper track sizing in FF*/ } input[type=range]::-moz-range-track { height: 3px; background: #ddd; border: none; } input[type=range]::-moz-range-thumb { border: none; height: 14px; width: 14px; border-radius: 50%; background: #ff0d51; margin-top: -5px; } input[type=range]:-moz-focusring { outline: 1px solid #fff; outline-offset: -1px; } input[type=range]:focus::-moz-range-track { background: #ccc; } input[type=range]::-ms-track { height: 3px; background: transparent; border-color: transparent; border-width: 6px 0; /*remove default tick marks*/ color: transparent; } input[type=range]::-ms-fill-lower { background: #777; } input[type=range]::-ms-fill-upper { background: #ddd; } input[type=range]::-ms-thumb { border: none; height: 14px; width: 14px; border-radius: 50%; background: #ff0d51; } input[type=range]:focus::-ms-fill-lower { background: #888; } input[type=range]:focus::-ms-fill-upper { background: #ccc; } .side-nav { position: fixed; width: 240px; left: 0; top: 0; margin: 0; transform: translateX(-100%); height: 100%; height: calc(100% + 60px); height: -moz-calc(100%); padding-bottom: 60px; background-color: #fff; z-index: 12000; backface-visibility: hidden; overflow-y: auto; will-change: transform; backface-visibility: hidden; transform: translateX(-105%); } .side-nav.right-aligned { right: 0; transform: translateX(105%); left: auto; transform: translateX(100%); } .side-nav .collapsible { margin: 0; } /* = Mobile Nav ==============================================================*/ .drag-target { height: 100%; width: 10px; position: fixed; top: 0; z-index: 998; } .side-nav.fixed a { display: block; padding: 0 30px; color: #444; } .side-nav.fixed { left: 0; transform: translateX(0); position: fixed; } .side-nav.fixed.right-aligned { right: 0; left: auto; } @media only screen and (max-width : 992px) { .side-nav.fixed { transform: translateX(-105%); } .side-nav.fixed.right-aligned { transform: translateX(105%); } } .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active { background-color: #00ced0; } .side-nav .collapsible-body li.active a, .side-nav.fixed .collapsible-body li.active a { color: #fff; } #sidenav-overlay { position: fixed; top: 0; left: 0; right: 0; height: 120vh; background-color: rgba(0, 0, 0, 0.5); z-index: 320; will-change: opacity; } /* @license Copyright (c) 2014 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */ /**************************/ /* STYLES FOR THE SPINNER */ /**************************/ /* Constants: STROKEWIDTH = 3px ARCSIZE = 270 degrees (amount of circle the arc takes up) ARCTIME = 1333ms (time it takes to expand and contract arc) ARCSTARTROT = 216 degrees (how much the start location of the arc should rotate each time, 216 gives us a 5 pointed star shape (it's 360/5 * 3). For a 7 pointed star, we might do 360/7 * 3 = 154.286) CONTAINERWIDTH = 28px SHRINK_TIME = 400ms */ .preloader-wrapper { display: inline-block; position: relative; width: 48px; height: 48px; } .preloader-wrapper.small { width: 36px; height: 36px; } .preloader-wrapper.big { width: 64px; height: 64px; } .preloader-wrapper.active, input:placeholder-shown + label.preloader-wrapper { /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ -webkit-animation: container-rotate 1568ms linear infinite; animation: container-rotate 1568ms linear infinite; } @-webkit-keyframes container-rotate { to { -webkit-transform: rotate(360deg); } } @keyframes container-rotate { to { transform: rotate(360deg); } } .spinner-layer { position: absolute; width: 100%; height: 100%; opacity: 0; border-color: #ff0d51; } .spinner-blue, .spinner-blue-only { border-color: #4285f4; } .spinner-red, .spinner-red-only { border-color: #db4437; } .spinner-yellow, .spinner-yellow-only { border-color: #f4b400; } .spinner-green, .spinner-green-only { border-color: #0f9d58; } /** IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't guarantee that the animation will start _exactly_ after that value. So we avoid using animation-delay and instead set custom keyframes for each color (as redundant as it seems). We write out each animation in full (instead of separating animation-name, animation-duration, etc.) because under the polyfill, Safari does not recognize those specific properties properly, treats them as -webkit-animation, and overrides the other animation rules. See https://github.com/Polymer/platform/issues/53. */ .active .spinner-layer.spinner-blue, input:placeholder-shown + label .spinner-layer.spinner-blue { /* durations: 4 * ARCTIME */ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .active .spinner-layer.spinner-red, input:placeholder-shown + label .spinner-layer.spinner-red { /* durations: 4 * ARCTIME */ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .active .spinner-layer.spinner-yellow, input:placeholder-shown + label .spinner-layer.spinner-yellow { /* durations: 4 * ARCTIME */ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .active .spinner-layer.spinner-green, input:placeholder-shown + label .spinner-layer.spinner-green { /* durations: 4 * ARCTIME */ -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .active .spinner-layer, input:placeholder-shown + label .spinner-layer, .active .spinner-layer.spinner-blue-only, .active .spinner-layer.spinner-red-only, .active .spinner-layer.spinner-yellow-only, .active .spinner-layer.spinner-green-only { /* durations: 4 * ARCTIME */ opacity: 1; -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } @-webkit-keyframes fill-unfill-rotate { 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */ 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */ 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */ 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */ 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */ 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */ 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */ to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */ } @keyframes fill-unfill-rotate { 12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */ 25% { transform: rotate(270deg); } /* 1 * ARCSIZE */ 37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */ 50% { transform: rotate(540deg); } /* 2 * ARCSIZE */ 62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */ 75% { transform: rotate(810deg); } /* 3 * ARCSIZE */ 87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */ to { transform: rotate(1080deg); } /* 4 * ARCSIZE */ } @-webkit-keyframes blue-fade-in-out { from { opacity: 1; } 25% { opacity: 1; } 26% { opacity: 0; } 89% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes blue-fade-in-out { from { opacity: 1; } 25% { opacity: 1; } 26% { opacity: 0; } 89% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes red-fade-in-out { from { opacity: 0; } 15% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } } @keyframes red-fade-in-out { from { opacity: 0; } 15% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } } @-webkit-keyframes yellow-fade-in-out { from { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 1; } 76% { opacity: 0; } } @keyframes yellow-fade-in-out { from { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 1; } 76% { opacity: 0; } } @-webkit-keyframes green-fade-in-out { from { opacity: 0; } 65% { opacity: 0; } 75% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } @keyframes green-fade-in-out { from { opacity: 0; } 65% { opacity: 0; } 75% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } /** Patch the gap that appear between the two adjacent div.circle-clipper while the spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11). */ .gap-patch { position: absolute; top: 0; left: 45%; width: 10%; height: 100%; overflow: hidden; border-color: inherit; } .gap-patch .circle { width: 1000%; left: -450%; } .circle-clipper { display: inline-block; position: relative; width: 50%; height: 100%; overflow: hidden; border-color: inherit; } .circle-clipper .circle { width: 200%; height: 100%; border-width: 3px; /* STROKEWIDTH */ border-style: solid; border-color: inherit; border-bottom-color: transparent !important; border-radius: 50%; -webkit-animation: none; animation: none; position: absolute; top: 0; right: 0; bottom: 0; } .circle-clipper.left .circle { left: 0; border-right-color: transparent !important; -webkit-transform: rotate(129deg); transform: rotate(129deg); } .circle-clipper.right .circle { left: -100%; border-left-color: transparent !important; -webkit-transform: rotate(-129deg); transform: rotate(-129deg); } .active .circle-clipper.left .circle, input:placeholder-shown + label .circle-clipper.left .circle { /* duration: ARCTIME */ -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .active .circle-clipper.right .circle, input:placeholder-shown + label .circle-clipper.right .circle { /* duration: ARCTIME */ -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } @-webkit-keyframes left-spin { from { -webkit-transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); } } @keyframes left-spin { from { transform: rotate(130deg); } 50% { transform: rotate(-5deg); } to { transform: rotate(130deg); } } @-webkit-keyframes right-spin { from { -webkit-transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); } } @keyframes right-spin { from { transform: rotate(-130deg); } 50% { transform: rotate(5deg); } to { transform: rotate(-130deg); } } #spinnerContainer.cooldown { /* duration: SHRINK_TIME */ -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1); animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1); } @-webkit-keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } .slider { position: relative; height: 400px; width: 100%; } .slider.fullscreen { height: 100%; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .slider.fullscreen ul.slides { height: 100%; } .slider.fullscreen ul.indicators { z-index: 2; bottom: 30px; } .slider .slides { background-color: color("grey", "base"); margin: 0; height: 400px; } .slider .slides li { opacity: 0; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: inherit; overflow: hidden; } .slider .slides li img { height: 100%; width: 100%; background-size: cover; background-position: center; } .slider .slides li .caption { color: #fff; position: absolute; top: 15%; left: 15%; width: 70%; opacity: 0; } .slider .slides li .caption p { color: color("grey", "lighten-2"); } .slider .slides li.active { z-index: 2; } .slider .indicators { position: absolute; text-align: center; left: 0; right: 0; bottom: 0; margin: 0; } .slider .indicators .indicator-item { display: inline-block; position: relative; cursor: pointer; height: 16px; width: 16px; margin: 0 12px; transition: background-color .3s; border-radius: 50%; } .carousel { overflow: hidden; position: relative; width: 100%; height: 400px; perspective: 500px; transform-style: preserve-3d; transform-origin: 0% 50%; } .carousel .carousel-item { width: 200px; position: absolute; top: 0; left: 0; } .carousel .carousel-item img { width: 100%; } .carousel.carousel-slider { top: 0; left: 0; height: 0; } .carousel.carousel-slider .carousel-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* ================================================================ /* B) Theme Styles /*================================================================*/ /* 1. Generic styles ======================================================*/ /* 01. Generic styles ========================================================================== */ *, :before, :after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-backface-visibility: hidden; margin: 0; padding: 0; outline: none !important; } .qt-bodybg { background-attachment: fixed; opacity: 1; z-index: 0; width: 100%; height: 100%; position: fixed; } .qt-bodybg::after { display: block; content: " "; width: 100%; height: 100%; top: 0; left: 0; background: black; opacity: 0.6; } .valign-wrapper { display: block; } .qt-relative { position: relative; } iframe { border: none; } .qt-clearfix { border: none; clear: both; } .qt-clearfix::after, .qt-clearfix::before { display: block; width: 100%; clear: both; content: " "; } .qt-body { z-index: 2; } .qt-hidden { display: none; } .qt-invisible { opacity: 0; } a { outline: none !important; } a.qt-imglink { display: block; background: black; overflow: hidden; line-height: 0; margin: 0; } a.qt-imglink img { will-change: filter; filter: brightness(100%); transition: filter 0.3s ease; will-change: filter; } a.qt-imglink:hover img { filter: brightness(130%); } .qt-featuredimage { margin-bottom: 1rem; } .qt-container { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 0.75rem; } .qt-container .row { margin-left: -0.75rem; margin-right: -0.75rem; } .qt-container .row.qt-masonry { padding-bottom: 2rem; } .qt-container-l { max-width: 100%; padding: 0 1rem; } .qt-parentcontainer { position: relative; } .qt-parentcontainer .qt-main { position: relative; padding: 80px 0 50px 0; } .qt-parentcontainer .qt-main .qt-main-contents { position: relative; z-index: 10; overflow: hidden; } .qt-parentcontainer .qt-main .qt-main-contents > .qt-caption { margin-top: 0; } .qt-parentcontainer .qt-main .qt-main-contents > .vc_row { margin: 0; overflow-x: hidden; } .qt-parentcontainer .qt-main .qt-main-contents.qt-single-members { overflow: visible; } .qt-parentcontainer .qt-main .qt-main-contents-masonry { overflow: hidden; } .qt-parentcontainer .qt-main .qt-pagebg-in { position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 100vh; width: 100vw; z-index: 0; opacity: 0; transition: opacity 0.5s, filter 0.5s; will-change: opacity, filter; filter: blur(50px); } .qt-parentcontainer .qt-main .qt-pagebg-in.qt-bgloaded { opacity: 1; filter: blur(0px); } .qt-parentcontainer .qt-main.qt-page-visualcomposer { min-height: 50vh; padding: 0; } .qt-header-bg { position: absolute; z-index: 0; background: black; background-repeat: no-repeat; background-size: cover; background-position: center center; transform: scale(1); will-change: opacity, transform; opacity: 0; transition: opacity 1.35s, transform 0.5s ease; } .qt-header-bg img { display: none; } .qt-header-bg.qt-bgloaded { opacity: 1; } .qt-card { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); border-radius: 4px; overflow: hidden; } .qt-card .collapsible, .qt-layer-bottom .collapsible { box-shadow: none; } .row { margin: 0 -0.75em; } .qt-img-responsive { max-width: 100%; height: auto; } .qt-rotate-90 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); display: inline-block; } .qt-paddedcontent { padding: 1rem; } .qt-paddedcontent .qt-caption-small:first-child { margin-top: 0; } .qt-paddedcontent-s { padding: 1rem; } [data-bgimage] { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; width: 100%; height: 100%; display: block; top: 0; left: 0; background-repeat: no-repeat; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); } [data-parallax="1"] { background-position: center top; background-repeat: no-repeat; background-attachment: fixed; transition: background-position 0.1s; } .qt-blur-bg { filter: blur(7px); -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); } img { max-width: 100%; height: auto; display: inline-block; } img.qt-feat-hor { width: 100%; } img.qt-feat-ver { width: auto; max-height: 80%; max-height: 80vh; } /* Spacers ==========================================================================*/ .qt-spacer-l { padding-top: 2.4rem; } .qt-spacer-m { padding-top: 1.6rem; } .qt-spacer-s { padding-top: 1rem; } .qt-spacer-xs { padding-top: 0.6rem; } hr[class^="qt-spacer"] { height: 0; border: none; background: transparent; } .qt-vertical-padding-l { padding: 2.4rem 0 1.8rem 0; } .qt-vertical-padding-m { padding: 1.6rem 0 1.3rem 0; } .qt-vertical-padding-s { padding: 1rem 0; } /* Common items ==========================================================================*/ .qt-playbtn { width: 80px; height: 80px; position: absolute; top: 50%; left: 50%; z-index: 10; margin-left: -40px; margin-top: -40px; line-height: 80px; text-align: center; border: 3px solid #fff; border-radius: 50%; font-size: 34px; color: #fff; transform: scale(1); } .qt-playbtn i { text-align: center; line-height: 80px; height: 80px; top: 0; padding-left: 5px; transform: scale(1); } .qt-playbtn:hover { opacity: 1 !important; animation: none; transform: scale(1.1); } .qt-scrollbarstyle ::-webkit-scrollbar { width: 2px; height: 2px; } .qt-scrollbarstyle ::-webkit-scrollbar-button { width: 0px; height: 0px; } .qt-scrollbarstyle ::-webkit-scrollbar-thumb { background: #999; border: 0px none #999; border-radius: 0px; } .qt-scrollbarstyle ::-webkit-scrollbar-thumb:hover { background: #999; } .qt-scrollbarstyle ::-webkit-scrollbar-thumb:active { background: #000000; } .qt-scrollbarstyle ::-webkit-scrollbar-track { background: #666666; border: 0px none #999; border-radius: 0; } .qt-scrollbarstyle ::-webkit-scrollbar-track:hover { background: #666666; } .qt-scrollbarstyle ::-webkit-scrollbar-track:active { background: #333333; } .qt-scrollbarstyle ::-webkit-scrollbar-corner { background: transparent; } [class*="qt-darken-bg-"] { display: block; position: absolute; width: 100%; height: 100%; content: " "; background: #000; top: 0; left: 0; opacity: 0; } #qtPageBg [class*="qt-darken-bg-"] { position: fixed; } .qt-darken-bg-10 { opacity: 0.1; } .qt-darken-bg-20 { opacity: 0.2; } .qt-darken-bg-30 { opacity: 0.3; } .qt-darken-bg-40 { opacity: 0.4; } .qt-darken-bg-50 { opacity: 0.5; } .qt-darken-bg-60 { opacity: 0.6; } .qt-darken-bg-70 { opacity: 0.7; } .qt-darken-bg-80 { opacity: 0.8; } .qt-darken-bg-90 { opacity: 0.9; } .qt-pageheader { padding: 30px 0 70px 0; z-index: 100; position: relative; } .qt-pageheader .qt-featuredimage { margin-bottom: 5px; } .col.s12.valign-wrapper, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .valign-wrapper.qt-item { margin-left: -0.7rem; margin-right: -0.7rem; } /**! 2.Typography ======================================================*/ /* 01. WordPress Core 02. Custom template Typography */ a:-webkit-any-link { cursor: pointer; } * { word-break: break-word; } /* = 01. WordPress Core ==============================================================*/ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter, .qt-center { text-align: center !important; display: block; } .alignright, .qt-right { float: right; margin: 5px 0 20px 20px; } .alignleft, .qt-left { float: left; margin: 15px 20px 20px 0; } a img.alignright { float: right; margin: 15px 0 20px 20px; } a img.alignnone { margin: 15px 20px 20px 0; } a img.alignleft { float: left; margin: 15px 20px 20px 0; } a img.aligncenter, img.aligncenter, .wp-caption.aligncenter { display: block; margin-left: auto; margin-right: auto; } /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } .qt-page-contents .sticky { position: initial; } .bypostauthor { margin: 1em; } .post-password-form { margin-bottom: 1.5rem; } /* 02. Custom template Typography ========================================================================== */ body, html { font-size: 16px; line-height: 1.5em; } body strong, html strong { font-weight: 700; } .qt-small, .qt-details { font-size: 13px; text-rendering: optimizeLegibility; line-height: 1.5em; } .qt-center { text-align: center; } .qt-right { text-align: right; } .qt-caps { text-transform: uppercase; } /* TITLES */ h1, h2, h3, h4, h5, h6, .qt-btn, .qt-wp-pagination ul.page-numbers li a, .qt-wp-pagination ul.page-numbers li > span, .qt-capfont, .qt-fontsize-h1, .qt-fontsize-h2, .qt-fontsize-h3, .qt-fontsize-h4, .qt-fontsize-h5, .qt-fontsize-h6 { line-height: 1.15em; margin: 0.9em 0 0.38em 0; padding: 0; } h6, .qt-fontsize-h6 { font-size: 0.8rem; } h5, .qt-fontsize-h5 { font-size: 1rem; } h4, .qt-fontsize-h4 { font-size: 1.125rem; } h3, .qt-fontsize-h3, h2.widgettitle { font-size: 1.375rem; } h2, .qt-fontsize-h2 { font-size: 1.625rem; } h1, .qt-fontsize-h1 { font-size: 2rem; } .qt-fontsize-h0 { font-size: 2.4rem; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } i { opacity: 1; margin: 0; position: relative; display: inline-flex; vertical-align: text-top; font-size: 1.4em; } .material-icons { font-size: inherit; } .qt-caption { margin: 0.4em 0 0.1em 0; } .qt-sectiontitle, h2.widgettitle { position: relative; display: inline; padding-right: 10px; font-weight: 200; } .qt-sectiontitle::after, h2.widgettitle::after { display: block; width: 5px; height: 5px; content: " "; background: white; display: inline-block; margin-left: 3px; } p i { position: relative; top: 0.25rem; } /* 03. Various elements ========================================================================== */ .qt-the-content { line-height: 1.9em; } .qt-the-content p + h1, .qt-the-content ol + h1, .qt-the-content ul + h1, .qt-the-content blockquote + h1, .qt-the-content table + h1, .qt-the-content dl + h1, .qt-the-content h1 + h1, .qt-the-content h2 + h1, .qt-the-content h3 + h1, .qt-the-content h4 + h1, .qt-the-content h5 + h1, .qt-the-content h6 + h1 { margin-top: 1em; } .qt-the-content p + h2, .qt-the-content ol + h2, .qt-the-content ul + h2, .qt-the-content blockquote + h2, .qt-the-content table + h2, .qt-the-content dl + h2, .qt-the-content h1 + h2, .qt-the-content h2 + h2, .qt-the-content h3 + h2, .qt-the-content h4 + h2, .qt-the-content h5 + h2, .qt-the-content h6 + h2 { margin-top: 1em; } .qt-the-content p + h3, .qt-the-content ol + h3, .qt-the-content ul + h3, .qt-the-content blockquote + h3, .qt-the-content table + h3, .qt-the-content dl + h3, .qt-the-content h1 + h3, .qt-the-content h2 + h3, .qt-the-content h3 + h3, .qt-the-content h4 + h3, .qt-the-content h5 + h3, .qt-the-content h6 + h3 { margin-top: 1em; } .qt-the-content p + h4, .qt-the-content ol + h4, .qt-the-content ul + h4, .qt-the-content blockquote + h4, .qt-the-content table + h4, .qt-the-content dl + h4, .qt-the-content h1 + h4, .qt-the-content h2 + h4, .qt-the-content h3 + h4, .qt-the-content h4 + h4, .qt-the-content h5 + h4, .qt-the-content h6 + h4 { margin-top: 1em; } .qt-the-content p + h5, .qt-the-content ol + h5, .qt-the-content ul + h5, .qt-the-content blockquote + h5, .qt-the-content table + h5, .qt-the-content dl + h5, .qt-the-content h1 + h5, .qt-the-content h2 + h5, .qt-the-content h3 + h5, .qt-the-content h4 + h5, .qt-the-content h5 + h5, .qt-the-content h6 + h5 { margin-top: 1em; } .qt-the-content p + h6, .qt-the-content ol + h6, .qt-the-content ul + h6, .qt-the-content blockquote + h6, .qt-the-content table + h6, .qt-the-content dl + h6, .qt-the-content h1 + h6, .qt-the-content h2 + h6, .qt-the-content h3 + h6, .qt-the-content h4 + h6, .qt-the-content h5 + h6, .qt-the-content h6 + h6 { margin-top: 1em; } .qt-the-content p + p, .qt-the-content p + ul, .qt-the-content p + ol, .qt-the-content p + img, .qt-the-content p + iframe, .qt-the-content ol + p, .qt-the-content ol + ul, .qt-the-content ol + ol, .qt-the-content ol + img, .qt-the-content ol + iframe, .qt-the-content ul + p, .qt-the-content ul + ul, .qt-the-content ul + ol, .qt-the-content ul + img, .qt-the-content ul + iframe, .qt-the-content blockquote + p, .qt-the-content blockquote + ul, .qt-the-content blockquote + ol, .qt-the-content blockquote + img, .qt-the-content blockquote + iframe, .qt-the-content table + p, .qt-the-content table + ul, .qt-the-content table + ol, .qt-the-content table + img, .qt-the-content table + iframe, .qt-the-content dl + p, .qt-the-content dl + ul, .qt-the-content dl + ol, .qt-the-content dl + img, .qt-the-content dl + iframe, .qt-the-content h1 + p, .qt-the-content h1 + ul, .qt-the-content h1 + ol, .qt-the-content h1 + img, .qt-the-content h1 + iframe, .qt-the-content h2 + p, .qt-the-content h2 + ul, .qt-the-content h2 + ol, .qt-the-content h2 + img, .qt-the-content h2 + iframe, .qt-the-content h3 + p, .qt-the-content h3 + ul, .qt-the-content h3 + ol, .qt-the-content h3 + img, .qt-the-content h3 + iframe, .qt-the-content h4 + p, .qt-the-content h4 + ul, .qt-the-content h4 + ol, .qt-the-content h4 + img, .qt-the-content h4 + iframe, .qt-the-content h5 + p, .qt-the-content h5 + ul, .qt-the-content h5 + ol, .qt-the-content h5 + img, .qt-the-content h5 + iframe, .qt-the-content h6 + p, .qt-the-content h6 + ul, .qt-the-content h6 + ol, .qt-the-content h6 + img, .qt-the-content h6 + iframe { margin-top: 1.4em; } .qt-the-content hr { clear: both; margin: 0.5em 0; } .qt-the-content p q { font-style: italic; } .qt-the-content p i { position: initial; font-size: inherit; top: 0; position: initial; display: inline; vertical-align: initial; } .qt-the-content ol > li { list-style-type: decimal; } .qt-the-content ul, .qt-the-content ol { margin-left: 26px; } .qt-the-content ul li, .qt-the-content ol li { padding: 8px 16px; } .qt-the-content ul > li { list-style-type: square; } .qt-the-content img[class*="wp-image"] { border: 1px solid #555; } .qt-the-content dl:not(.gallery-item) dt { font-weight: bold; } .qt-the-content dl:not(.gallery-item) dt, .qt-the-content dl:not(.gallery-item) dd { margin-top: 1rem; } .qt-the-content dl:not(.gallery-item) dt + dd { margin: 0; } .qt-the-content dl:not(.gallery-item) dd, .qt-the-content dl:not(.gallery-item) dt { padding-left: 1rem; border-left: 6px solid; line-height: 1.1em; padding: 0 0 0 1rem; } .qt-the-content dl:not(.gallery-item) dd { padding-top: 0.5em; line-height: 1.4em; } .qt-the-content dl:not(.gallery-item) dd iframe { margin: 1rem 0; } .qt-the-content table { border-collapse: initial; border-bottom: 1px solid; font-size: 15px; line-height: 1.3em; } .qt-the-content table td, .qt-the-content table th { padding: 15px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-collapse: initial; border-radius: 0; border-color: inherit; } .qt-the-content table th { border-bottom: 2px solid rgba(0, 0, 0, 0.3); border-color: inherit; } .qt-the-content table tr:first-child { border-top: 1px solid rgba(0, 0, 0, 0.2); border-color: inherit; } .qt-the-content iframe { max-width: 100%; } .qt-the-content address { margin: 2rem 0.5rem; } .qt-the-content::after { display: block; content: " "; width: 100%; clear: both; } .qt-the-content code, .qt-the-content pre { line-height: 1.4em; padding: 1rem; margin: 1rem 0; display: block; background: rgba(150, 150, 150, 0.3); overflow-x: auto; } .qt-the-content code { display: inline; line-height: inherit; padding: 0 4px; background: none; } .qt-the-content a { cursor: pointer; } .qt-the-content blockquote { font-size: 1.414rem; } .qt-the-content blockquote p { font-size: 1.414rem; } /* Captions ==========================================================================*/ .qt-caption-small { position: relative; padding-bottom: 1rem; } .qt-caption-small::after { display: block; width: 30px; height: 5px; border-bottom: 4px solid; position: absolute; left: 0; bottom: 0; content: " "; } /* Bottom line deco caption ==========================================================================*/ .qt-bottom-textdeco { padding-bottom: 1rem; border-bottom: 0.3em solid rgba(0, 0, 0, 0.3); } .qt-negative .qt-bottom-textdeco { border-color: rgba(255, 255, 255, 0.3); } /* Buttons ==========================================================================*/ .qt-btn, .qt-wp-pagination ul.page-numbers li a, .qt-wp-pagination ul.page-numbers li > span, input[type="button"], input[type="submit"] { cursor: pointer; display: inline-block; text-transform: uppercase; padding: 0 0.9rem; line-height: 1.6rem; min-height: 1.15rem; height: auto; font-size: 13px; text-rendering: optimizeLegibility; position: relative; box-sizing: border-box; letter-spacing: 0.08em; border: none; border-radius: 4px; text-align: center; margin-top: 0; transition: all 0.14s; } .qt-btn.qt-full, .qt-wp-pagination ul.page-numbers li a.qt-full, .qt-wp-pagination ul.page-numbers li > span.qt-full, input.qt-full[type="button"], input.qt-full[type="submit"] { width: 100%; } .qt-btn i, .qt-wp-pagination ul.page-numbers li a i, .qt-wp-pagination ul.page-numbers li > span i, input[type="button"] i, input[type="submit"] i { opacity: 1; margin: 0; position: relative; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-inline-flex; vertical-align: middle; /*text-top;*/ font-size: 1.4em; top: 0; } .qt-btn i.qt-i-txt, .qt-wp-pagination ul.page-numbers li a i.qt-i-txt, .qt-wp-pagination ul.page-numbers li > span i.qt-i-txt, input[type="button"] i.qt-i-txt, input[type="submit"] i.qt-i-txt { margin-right: 0.7rem; } .qt-btn.qt-btn-s, .qt-wp-pagination ul.page-numbers li a.qt-btn-s, .qt-wp-pagination ul.page-numbers li > span.qt-btn-s, input.qt-btn-s[type="button"], input.qt-btn-s[type="submit"] { height: auto; line-height: 1.2rem; font-size: 11px; padding: 0 0.4rem; min-width: 1rem; min-height: 1rem; text-rendering: optimizeLegibility; } .qt-btn.qt-btn-l, .qt-wp-pagination ul.page-numbers li a.qt-btn-l, .qt-wp-pagination ul.page-numbers li > span.qt-btn-l, input.qt-btn-l[type="button"], input.qt-btn-l[type="submit"] { height: auto; line-height: 2.25rem; padding: 0 1rem; min-width: 2.25rem; min-height: 2.25rem; } .qt-btn.qt-btn-xl, .qt-wp-pagination ul.page-numbers li a.qt-btn-xl, .qt-wp-pagination ul.page-numbers li > span.qt-btn-xl, input.qt-btn-xl[type="button"], input.qt-btn-xl[type="submit"] { height: auto; line-height: 3.357rem; padding: 0 1.2rem; min-width: 3.357rem; min-height: 3.357rem; } .qt-btn.qt-btn-ghost, .qt-wp-pagination ul.page-numbers li a.qt-btn-ghost, .qt-wp-pagination ul.page-numbers li > span.qt-btn-ghost, input.qt-btn-ghost[type="button"], input.qt-btn-ghost[type="submit"] { background-color: transparent; border: 0.1rem solid #fff; border-color: inherit; text-align: center; align-items: center; } .qt-btn.qt-btn-ghost.qt-btn-s, .qt-wp-pagination ul.page-numbers li a.qt-btn-ghost.qt-btn-s, .qt-wp-pagination ul.page-numbers li > span.qt-btn-ghost.qt-btn-s, input.qt-btn-ghost.qt-btn-s[type="button"], input.qt-btn-ghost.qt-btn-s[type="submit"] { height: 1.2rem; line-height: 1rem; } .qt-btn.qt-btn-ghost.qt-btn-l, .qt-wp-pagination ul.page-numbers li a.qt-btn-ghost.qt-btn-l, .qt-wp-pagination ul.page-numbers li > span.qt-btn-ghost.qt-btn-l, input.qt-btn-ghost.qt-btn-l[type="button"], input.qt-btn-ghost.qt-btn-l[type="submit"] { line-height: 2.05rem; } .qt-btn.qt-btn-ghost.qt-btn-xl, .qt-wp-pagination ul.page-numbers li a.qt-btn-ghost.qt-btn-xl, .qt-wp-pagination ul.page-numbers li > span.qt-btn-ghost.qt-btn-xl, input.qt-btn-ghost.qt-btn-xl[type="button"], input.qt-btn-ghost.qt-btn-xl[type="submit"] { line-height: 3.157rem; } .qt-btn:hover, .qt-wp-pagination ul.page-numbers li a:hover, .qt-wp-pagination ul.page-numbers li > span:hover, input[type="button"]:hover, input[type="submit"]:hover { background-position-x: 2%; } .qt-btn.qt-disabled, .qt-wp-pagination ul.page-numbers li a.qt-disabled, .qt-wp-pagination ul.page-numbers li > span.qt-disabled, .qt-wp-pagination ul.page-numbers li > span.current, .qt-btn.qt-disabled:hover, input.qt-disabled[type="button"], input.qt-disabled[type="button"]:hover, input.qt-disabled[type="submit"], input.qt-disabled[type="submit"]:hover { background: #999; color: ccc; cursor: default; } .qt-btn-done { display: none; color: #cddc39 !important; border-color: transparent; background: transparent; } .qt-btn-done.active, input:placeholder-shown + label.qt-btn-done { display: inline-block; } .qt-btn-primary, .qt-btn-secondary, .qt-wp-pagination ul.page-numbers li a, .qt-wp-pagination ul.page-numbers li > span, .qt-btn-secondary a, .qt-btn-ghost { color: #fff; } .qt-btn-block { display: block; text-align: center; } .qt-text-shadow { text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6); } .qt-text-shadow.small { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .qt-text-shadow .qt-btn, .qt-text-shadow .qt-wp-pagination ul.page-numbers li a, .qt-wp-pagination ul.page-numbers li .qt-text-shadow a, .qt-text-shadow .qt-wp-pagination ul.page-numbers li > span, .qt-wp-pagination ul.page-numbers .qt-text-shadow li > span { text-shadow: none; } .btn-floating i { vertical-align: middle; text-align: center; width: 100%; } .qt-negative .qt-btn.qt-btn-ghost, .qt-negative .qt-wp-pagination ul.page-numbers li a.qt-btn-ghost, .qt-wp-pagination ul.page-numbers li .qt-negative a.qt-btn-ghost, .qt-negative .qt-wp-pagination ul.page-numbers li > span.qt-btn-ghost, .qt-wp-pagination ul.page-numbers .qt-negative li > span.qt-btn-ghost { color: #fff; } /* Ellipsis ==========================================================================*/ .qt-ellipsis { display: block; /* Fallback for non-webkit */ display: -webkit-box; max-width: 100%; height: 1.2em; /* Fallback for non-webkit */ line-height: 1.5em; -webkit-line-clamp: 1; box-orient: vertical; /*! autoprefixer: off */ -webkit-box-orient: vertical; /*! autoprefixer: on */ /* autoprefixer: on */ overflow: hidden; text-overflow: ellipsis; box-sizing: content-box; } .qt-ellipsis.qt-t { line-height: 1.2em; height: 1.2em; /* Fallback for non-webkit */ } .qt-ellipsis-2 { display: block; /* Fallback for non-webkit */ display: -webkit-box; max-width: 100%; height: 3em; /* Fallback for non-webkit */ line-height: 1.5em; -webkit-line-clamp: 2; /*! autoprefixer: off */ -webkit-box-orient: vertical; /*! autoprefixer: on */ overflow: hidden; text-overflow: ellipsis; box-sizing: content-box; } .qt-ellipsis-2.qt-t { line-height: 1.2em; height: 2.4em; /* Fallback for non-webkit */ } .qt-ellipsis-3 { display: block; /* Fallback for non-webkit */ display: -webkit-box; max-width: 100%; height: 4.5em; /* Fallback for non-webkit */ line-height: 1.5em; -webkit-line-clamp: 3; /*! autoprefixer: off */ -webkit-box-orient: vertical; /*! autoprefixer: on */ overflow: hidden; text-overflow: ellipsis; box-sizing: content-box; } .qt-ellipsis-3.qt-t { line-height: 1.2em; height: 3.6em; /* Fallback for non-webkit */ } .qt-text-secondary { opacity: 0.8; } /* Tags ========================================== */ .qt-tags, .tagcloud { font-size: 11px; line-height: 1rem; margin: 0; } .qt-tags a, .tagcloud a { padding: 0.1em 0.4rem; text-transform: uppercase; display: inline-block; margin: 0 3px 4px 0; text-rendering: optimizeLegibility; letter-spacing: 0.02em; line-height: 1.5em; color: #fff; border-radius: 2px; } .tagcloud { margin: 0.7rem 0; } .qt-content-aside .qt-tags a, .tagcloud a { color: #fff; } .qt-capseparator { display: inline-block; clear: both; border: none; border-top: 6px solid; width: 50px; height: 6px; margin: 1rem 0 1rem 0; } .qt-dropdown-content { min-width: 200px; } .qt-countdown { position: relative; font-size: 3rem; margin: 1rem 0 0 0; font-weight: 100; padding: 0; display: block; clear: both; line-height: 1em; vertical-align: text-top; letter-spacing: -0.05em; } .qt-countdown span { font-size: 0.2em; padding-left: 0.2em; font-weight: bold; vertical-align: text-top; position: relative; top: -0.4em; } .qt-posttags { padding-top: 1rem; } .qt-posttags hr { border: none; border-top: 2px solid #555; margin-bottom: 1rem; } .qt-desktopmenu, .qt-side-nav, .qt-menu-footer, .qt-details, .qt-btn, .qt-wp-pagination ul.page-numbers li a, .qt-wp-pagination ul.page-numbers li > span, .qt-item-metas { font-size: 13px; } blockquote { font-size: 1rem; position: relative; border: none; margin: 36px 0; min-height: 3rem; padding: 0 1.5rem 0 0; letter-spacing: 0.02em; text-align: center; font-style: italic; border-top: 2px solid rgba(100, 100, 100, 0.33); border-bottom: 2px solid rgba(100, 100, 100, 0.33); position: relative; } blockquote p { font-weight: light; font-size: 1.2rem; line-height: 1.5em; padding: 30px 0; margin: 0 5px; position: relative; } blockquote cite { text-align: center; font-size: 13px; font-style: initial; font-weight: bold; opacity: 0.6; clear: both; margin: 1.4rem 0; width: 100%; display: block; position: absolute; bottom: -80px; } blockquote acronym { font-style: italic; } blockquote q { line-height: 1.4em; font-style: italic; } blockquote kbd, blockquote code, blockquote pre, blockquote var { padding: 4px 14px 6px 14px; background: rgba(100, 100, 100, 0.2); border-radius: 3px; margin: 14px 0 30px; } .qt-social-list { list-style: none; margin: 0 -2px; } .qt-social-list li { display: inline; padding: 0 3px; } .qt-social-list li a { width: 51px; height: 51px; text-align: center; padding: 0; line-height: 51px; font-size: 17px; } .qt-icons-circle { border-radius: 50%; border: 3px solid #000; border-color: inherit; display: block; width: 40px; height: 40px; line-height: 40px; font-size: 32px; text-align: center; box-sizing: content-box; vertical-align: middle; } /** Default colors */ .qt-content-secondary, .qt-content-accent, .qt-btn-secondary, .qt-wp-pagination ul.page-numbers li a, .qt-wp-pagination ul.page-numbers li > span, .qt-btn-primary, .qt-content-aside .qt-btn-primary, .qt-content-aside .qt-btn-secondary, .qt-wp-pagination ul.page-numbers .qt-content-aside li > span { color: #fff; } .qt-negative, .qt-part-archive-item.qt-open .qt-headings { color: #fff; } .qt-negative h1, .qt-negative h2, .qt-negative h3, .qt-negative h4, .qt-negative h5, .qt-negative h6, .qt-part-archive-item.qt-open .qt-headings h1, .qt-part-archive-item.qt-open .qt-headings h2, .qt-part-archive-item.qt-open .qt-headings h3, .qt-part-archive-item.qt-open .qt-headings h4, .qt-part-archive-item.qt-open .qt-headings h5, .qt-part-archive-item.qt-open .qt-headings h6 { color: #fff; } .qt-paper .qt-negative h1, .qt-paper .qt-negative h2, .qt-paper .qt-negative h3, .qt-paper .qt-negative h4, .qt-paper .qt-negative h5, .qt-paper .qt-negative h6 { color: #fff; } /**! 3. Menus ======================================================*/ /* 04. Menu ========================================================================== */ nav .button-collapse i { font-size: 1.4em; } /* Menu bar ============================*/ nav.qt-menubar { position: relative; z-index: 300; margin: 0; padding: 0; display: block; } nav.qt-menubar .qt-btn, nav.qt-menubar .qt-wp-pagination ul.page-numbers li a, .qt-wp-pagination ul.page-numbers li nav.qt-menubar a, nav.qt-menubar .qt-wp-pagination ul.page-numbers li > span, .qt-wp-pagination ul.page-numbers nav.qt-menubar li > span { border-radius: 0; } nav.qt-menubar ul { margin: 0; } nav.qt-menubar ul .qt-logo-text { position: relative; float: left; max-height: 100%; width: auto; } nav.qt-menubar ul .qt-logo-text img { max-height: 64px; margin: 0 30px; } nav.qt-menubar ul .qt-btn, nav.qt-menubar .qt-wp-pagination ul.page-numbers li a, .qt-wp-pagination nav.qt-menubar ul.page-numbers li a, nav.qt-menubar .qt-wp-pagination ul.page-numbers li > span, .qt-wp-pagination nav.qt-menubar ul.page-numbers li > span { margin: 0; } nav.qt-menubar .qt-menutrigger a { margin-left: 40px; padding: 0; } nav.qt-menubar .qt-menutrigger a i { font-size: 32px; line-height: 32px; top: 8px; } .qt-mobilemenu { height: 56px; position: relative; z-index: 2001; position: fixed; top: 0px; transition: top .35s ease; width: 100%; } .qt-mobilemenu .qt-logo-text { height: 56px; width: 70%; position: absolute; left: 15%; z-index: 100; display: inline-block; vertical-align: middle; line-height: 56px; } .qt-mobilemenu .qt-logo-text h2 { margin: 0; padding: 0; line-height: 56px; vertical-align: middle; } .qt-mobilemenu .qt-logo-text img { width: auto; max-height: 100%; margin: auto; vertical-align: middle; display: inline-block; } .qt-mobilemenu .qt-btn, .qt-mobilemenu .qt-wp-pagination ul.page-numbers li a, .qt-wp-pagination ul.page-numbers li .qt-mobilemenu a, .qt-mobilemenu .qt-wp-pagination ul.page-numbers li > span, .qt-wp-pagination ul.page-numbers .qt-mobilemenu li > span { margin: 0; } .qt-mobilemenu #qt3dswitch i { transform: rotate(0deg); transition: transform 0.2s; } .qt-mobilemenu #qt3dswitch.active i, .qt-mobilemenu input:placeholder-shown + label#qt3dswitch i { transform: rotate(180deg); } .qt-mobilemenu.qt-down { top: -70px; } .qt-mobilemenu.qt-up { top: 0px; } /* Side nav ============================*/ .side-nav { width: 273px; } ul.qt-side-nav { margin: 0; margin-left: 0; padding-top: 0; padding-bottom: 80px; /** Offcanvas menu */ } ul.qt-side-nav li { float: none; line-height: 1.3em; display: block; position: relative; padding: 0; margin: 0; } ul.qt-side-nav li.qt-social-linkicon { width: 44px; display: inline-block; float: left; } ul.qt-side-nav li.qt-social-linkicon a i { font-size: 28px; } ul.qt-side-nav li.qt-mdiv { display: block; float: none; width: 100%; clear: both; } ul.qt-side-nav li.qt-offcanvas-header { padding: 2rem 0; } ul.qt-side-nav li.active { background-color: rgba(0, 0, 0, 0.05); } ul.qt-side-nav li a { display: block; position: relative; width: 100%; height: auto; min-height: 41px; line-height: inherit; padding: 0.707rem 1rem; text-rendering: auto; font-size: 14px; } ul.qt-side-nav li a:hover { background-color: rgba(0, 0, 0, 0.05); } ul.qt-side-nav li a.btn, ul.qt-side-nav li a.btn-large, ul.qt-side-nav li a.btn-flat, ul.qt-side-nav li a.btn-floating { margin: 10px 15px; } ul.qt-side-nav li a.btn, ul.qt-side-nav li a.btn-large, ul.qt-side-nav li a.btn-floating { color: #fff; } ul.qt-side-nav li a.btn-flat { color: #343434; } ul.qt-side-nav li a.qt-logo-text { font-size: 18px; line-height: 1.1em; } ul.qt-side-nav li.qt-social-linkicon { width: 40px; margin: 0 0 1rem 0.75rem; } ul.qt-side-nav li.qt-social-linkicon a { padding: 0; width: 40px; height: 40px; line-height: 40px; text-align: center; padding: 0; } ul.qt-side-nav li.qt-social-linkicon a i.qt-socialicon { font-size: 18px; line-height: 40px; display: inline; vertical-align: middle; } ul.qt-side-nav li.menu-item-has-children .qt-openthis { float: right; font-size: 24px; transition: transform 0.2s ease; will-change: transform; position: absolute; right: 0; top: 0.2rem; z-index: 3000; cursor: pointer; width: 41px; height: 41px; line-height: 41px; text-align: center; display: inline-block; padding: 0; top: 0; } ul.qt-side-nav li.menu-item-has-children .qt-openthis i { line-height: 41px; vertical-align: middle; } ul.qt-side-nav li.menu-item-has-children > ul li a:not(.qt-openthis) { padding-left: 28px; position: relative; } ul.qt-side-nav li.menu-item-has-children > ul li a:not(.qt-openthis)::before { display: block; width: 4px; height: 4px; content: " "; background: #fff; left: 16px; top: 50%; margin-top: -1px; position: absolute; } ul.qt-side-nav li.menu-item-has-children > ul li li a { padding-left: 37px; } ul.qt-side-nav li.menu-item-has-children > ul li li a::before { width: 15px; height: 1px; } ul.qt-side-nav li.menu-item-has-children.open { height: auto; } ul.qt-side-nav li.menu-item-has-children.open > ul { display: block; } ul.qt-side-nav li.menu-item-has-children.open > .qt-openthis { transform: rotate(180deg); } ul.qt-side-nav li.current-menu-item > a { background-color: #999; } ul.qt-side-nav li ul { margin: 0; padding: 0; display: none; } ul.qt-side-nav li .qt-closesidenav { padding: 0.7rem; line-height: 30px; vertical-align: middle; display: block; cursor: pointer; } ul.qt-side-nav li .qt-closesidenav i { font-size: 22px; line-height: 30px; display: inline; float: left; margin-right: 5px; } ul.qt-side-nav.qt-menu-offc { text-transform: none; padding: 1rem 0; border-top: 4px solid; border-bottom: 4px solid; margin: 1rem 0; } ul.qt-side-nav.qt-menu-offc > li > a:not(.qt-openthis) { padding-left: 0; display: inline-block; position: relative; } ul.qt-side-nav.qt-menu-offc > li > a:not(.qt-openthis)::after { display: inline-block; content: " "; width: 6px; height: 6px; border-bottom: 6px solid; margin-left: 5px; } ul.qt-side-nav.qt-menu-offc li { padding: 10px 0; } ul.qt-side-nav.qt-menu-offc li a { font-size: 2.3em; line-height: 1em; color: inherit; } ul.qt-side-nav.qt-menu-offc li.current-menu-item > a { background: transparent; } ul.qt-side-nav.qt-menu-offc li.menu-item-has-children .qt-openthis { background-color: transparent; border-radius: 50%; width: 44px; height: 44px; top: 7px; box-sizing: content-box; opacity: 0.7; } ul.qt-side-nav.qt-menu-offc li.menu-item-has-children .qt-openthis i { line-height: 44px; width: 44px; height: 44px; display: inline-block; top: 0; vertical-align: middle; } ul.qt-side-nav.qt-menu-offc li.menu-item-has-children > ul { padding-top: 1rem; } ul.qt-side-nav.qt-menu-offc li.menu-item-has-children > ul > li { padding: 2px 0; height: auto; min-height: 0; } ul.qt-side-nav.qt-menu-offc li.menu-item-has-children > ul > li .qt-openthis, ul.qt-side-nav.qt-menu-offc li.menu-item-has-children > ul > li .qt-openthis i { width: auto; height: 1rem; line-height: 1rem; min-height: 1rem; text-align: center; } ul.qt-side-nav.qt-menu-offc li.menu-item-has-children > ul > li > a:not(.qt-openthis) { padding: 0.5em 0 0.5em 44px; font-size: 1.2em; opacity: 0.7; line-height: 1em; min-height: 0; } ul.qt-side-nav.qt-menu-offc li.menu-item-has-children > ul > li > a:not(.qt-openthis)::before { width: 16px; height: 1px; top: 1em; } ul.qt-side-nav.qt-menu-offc li.menu-item-has-children > ul > li ul { padding-left: 30px; } ul.qt-menu-secondary { overflow: hidden; height: auto; vertical-align: bottom; transform: height 0.8s ease; } #qtBody.qt-user-logged .qt-menubar { top: 32px; } #qtBody.qt-user-logged .qt-mobilemenu { top: 46px; } #qtBody.qt-user-logged .qt-mobilemenu.qt-down { top: -70px; } #qtBody.qt-user-logged .qt-mobilemenu.qt-up { top: 46px; } #qtBody.qt-user-logged ul.qt-side-nav { padding-top: 50px; } /**! 4. Breadcrumb ======================================================*/ ul.qt-breadcrumb { margin: 5px 0 0 0; padding: 0; position: relative; line-height: 11px; display: block; clear: both; text-align: right; overflow: hidden; opacity: 1; transition: opacity 0.3s; } ul.qt-breadcrumb li { line-height: 11px; display: inline-block; font-size: 11px; padding: 0; font-size: 11px; opacity: 0.6; float: none; } ul.qt-breadcrumb li a, ul.qt-breadcrumb li span { color: inherit; padding: 0; font-size: 11px; padding: 0 4px; } ul.qt-breadcrumb li:first-child a, ul.qt-breadcrumb li:first-child span { padding-left: 0; } /**! 5. Collapsible ======================================================*/ ul.qt-collapsible { margin: 0 0 1rem 0; padding: 0; } ul.qt-collapsible li { list-style: none; } ul.qt-collapsible li .qt-collapsible-header { position: relative; margin: 0; padding: 30px; display: block; } ul.qt-collapsible li .qt-collapsible-header i { position: absolute; right: 5px; top: 30px; font-size: 23px; } /**! 6. listenon ======================================================*/ .qt-listenon .qt-collapsible-body { overflow: hidden; } .qt-listenon .qt-collapsible-body .qt-listenlink { width: 50%; padding: 30px 4px; margin: 0; display: inline-block; float: left; text-align: center; border-top: 2px solid rgba(200, 200, 200, 0.05); overflow: hidden; text-overflow: ellipsis; } .qt-listenon .qt-collapsible-body .qt-listenlink:nth-child(odd) { border-right: 2px solid rgba(200, 200, 200, 0.05); } /**! 7. author ======================================================*/ /* Author */ .qt-post-author { margin-top: 2rem; display: table; } .qt-post-author a.qt-author-thumbnail { width: 110px; height: 110px; display: block; float: none; margin: 50px auto; } .qt-post-author a.qt-author-thumbnail img { width: 100%; height: auto; } .qt-post-author .qt-post-author-data { display: block; float: none; width: 100%; padding: 0; } .qt-post-author .qt-post-author-data .qt-authorheader { line-height: 1em; border-bottom: 2px solid #555; padding: 0 0 1rem 0; } .qt-post-author .qt-post-author-data .qt-authorheader .qt-authorname { display: inline-block; text-rendering: auto; } .qt-post-author .qt-post-author-data .qt-authorheader .qt-authorsocial { display: inline-block; float: right; margin: 0; } .qt-post-author .qt-post-author-data .qt-authorheader .qt-authorsocial a { color: inherit; line-height: 50px; height: 50px; vertical-align: middle; display: inline-flex; } .qt-post-author .qt-post-author-data .qt-authorheader .qt-authorsocial a i { font-size: 18px; display: inline; vertical-align: middle; margin: 0 2px; opacity: 0.6; } .qt-post-author .qt-post-author-data .qt-authorheader .qt-authorsocial a:hover i { opacity: 1; } .qt-post-author .qt-post-author-data .qt-post-author-bio { margin-top: 0.5rem; margin-bottom: -0.5rem; } .qt-post-author .qt-post-author-link { padding-top: 2rem; } .qt-post-author .qt-post-author-link a.qt-btn { width: 100%; } /**! 8. widgets ======================================================*/ ul.qt-sidebar-main.qt-collapsible { margin-bottom: 0; } .qt-widget { margin-bottom: 1.8rem; list-style: none; padding: 0; margin: 0.2rem 0 1.4rem 0; /* theselect */ font-size: 15px; letter-spacing: 0.03em; line-height: 1.5em; /* Custom widgets formatting */ } .qt-widget .qt-widget-title { position: relative; margin: 0 0 0.4em 0; border-bottom: 4px solid; padding-bottom: 0.4em; } .qt-widget .qt-widget-title span { position: relative; z-index: 2; } .qt-widget .qt-widget-title::after { display: inline-block; width: 5px; height: 5px; background: #fff; border: none; position: relative; right: -8px; bottom: 0; z-index: 1; content: " "; transition: width 0.2s ease-out; } .qt-widget.active .collapsible-header i, input:placeholder-shown + label.qt-widget .collapsible-header i { transform: rotate(180deg); } .qt-widget .qt-inline-textdeco { margin-bottom: 0.5em; } .qt-widget .wp-caption.alignnone { margin: 0; padding: 0; max-width: 100%; } .qt-widget a.btn:hover, .qt-widget a.btn-large:hover { text-decoration: none; } .qt-widget .recentcomments a { font-style: italic; } .qt-widget cite { font-size: .9em; } .qt-widget .qt-panel-contents > ul { margin-top: 0; padding-left: 0; margin: 0; } .qt-widget table caption { text-align: left; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget), .qt-widget ul.menu { margin: 8px 0 0 0; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li, .qt-widget ul.menu li { list-style-type: none; border-bottom: 2px solid rgba(100, 100, 100, 0.3); padding: 0.3rem 0; margin: 0; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li:last-child, .qt-widget ul.menu li:last-child { border-bottom: none; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li ul, .qt-widget ul.menu li ul { padding-left: 1rem; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li.cat-item:first-child, .qt-widget ul.menu li.cat-item:first-child { padding-top: 0; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li:first-child, .qt-widget ul.menu li:first-child { padding-top: 0; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li:last-child, .qt-widget ul.menu li:last-child { border: none; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li.cat-item, .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li.cat-item li.cat-item, .qt-widget ul.menu li.cat-item, .qt-widget ul.menu li.cat-item li.cat-item { text-align: right; display: block; clear: both; overflow: hidden; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li.cat-item::before, .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li.cat-item li.cat-item::before, .qt-widget ul.menu li.cat-item::before, .qt-widget ul.menu li.cat-item li.cat-item::before { font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; content: "keyboard_arrow_right"; position: relative; float: left; top: 0.3rem; margin-right: 0.5rem; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li.cat-item li.cat-item, .qt-widget ul.menu li.cat-item li.cat-item { border: none; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li.cat-item:last-child, .qt-widget ul.menu li.cat-item:last-child { border: none; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li.cat-item a, .qt-widget ul.menu li.cat-item a { display: inline-block; border-bottom: none; float: left; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li.page_item, .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li.page_item li, .qt-widget ul.menu li.page_item, .qt-widget ul.menu li.page_item li { margin-left: 15px; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li.page_item li, .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) aside li.menu-item li, .qt-widget ul.menu li.page_item li, .qt-widget ul.menu aside li.menu-item li { list-style-type: circle; margin-left: 8px; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li a.qt-blocklink, .qt-widget ul.menu li a.qt-blocklink { display: block; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) li.recentcomments, .qt-widget ul.menu li.recentcomments { padding: 0.5rem 0; } .qt-widget ul:not(.qt-tags):not(.qt-archives-widget) > li.page_item, .qt-widget ul.menu > li.page_item { margin-left: 0; } .qt-widget > ul { margin: 0; padding: 0; } .qt-widget ul.menu { margin: 0; padding: 0; } .qt-widget ul.menu li.menu-item { text-align: left; display: block; clear: both; overflow: hidden; padding: 0; border: none; } .qt-widget ul.menu li.menu-item > ul { margin-top: 0; } .qt-widget ul.menu li.menu-item a { padding: 10px 0; display: block; min-height: 32px; border-bottom: 2px solid rgba(100, 100, 100, 0.3); } .qt-widget ul.menu li.menu-item a::before { font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; content: "keyboard_arrow_right"; position: relative; float: left; top: 0.3rem; margin-right: 0.5rem; color: inherit; } .qt-widget ul.menu li.menu-item a:empty { display: none; } .qt-widget.widget_rss .rss-date { font-size: 11px; margin-bottom: 4px; } .qt-widget.widget_rss li a.rsswidget { background: transparent; color: inherit; border-bottom: 2px solid; border-color: inherit; display: block; font-weight: bold; font-size: 16px; display: block; margin-top: 12px; padding-bottom: 3px; } .qt-widget.widget_rss li a.rsswidget:hover { text-decoration: none; } .qt-widget select { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; padding: 8px 10px; line-height: 1.4em; margin: 18px 0; width: 100%; word-break: break-all; position: relative; box-sizing: border-box; border-radius: 0px; outline: none; color: #444; } .qt-widget select::after { content: "keyboard_arrow_right"; display: block; font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; position: absolute; top: 4px; right: 4px; color: #222; font-size: 10px; } .qt-widget .textwidget .wp-caption { margin: 1rem 0; } .qt-widget input[type="text"] { width: 100%; padding: 7px 10px; box-sizing: border-box; } .qt-widget > ul { margin: 0 0 20px 0; } .qt-widget .readalllink { padding-top: 10px; } .qt-widget .calendar_wrap caption { font-size: 1.2em; text-transform: uppercase; } .qt-widget .calendar_wrap td { padding: 4px; } .qt-widget-sponsor { text-align: center; } .qt-widget-sponsor a { padding: 20px; width: 100%; height: auto; display: block; } .qt-widget-sponsor a img { width: 100%; height: auto; } .qt-widget-contacts p { padding: 0.5rem 0 0 0; } .qt-widget-contacts p:first-of-type { padding-top: 0; } .qt-widget-contacts i { font-size: 1.414rem; position: relative; top: 0.28rem; margin-right: 0.7rem; } .qt-widget .qt-post-archive-item .qt-item-layers .qt-overlay .qt-item-title { padding: 1em 2em 2.3em 2em; } .qt-widget .qt-widget-event .qt-part-archive-item.qt-event-vertical-widget { margin-bottom: 1rem; } .qt-widget-social li { display: block; overflow: hidden; border-bottom: none !important; } .qt-widget-social li h5 { padding: 0.2rem 0 0.2rem 0; font-size: 15px; } .qt-widget-social li > a.qt-socialicon { display: inline-block; float: left; margin-right: 0.7rem; padding: 0; width: 2.8rem; height: 2.8rem; text-align: center; line-height: 2.8rem; } .qt-widget-social li > a.qt-socialicon.qt-socialicon-fb { background-color: #516dac; } .qt-widget-social li > a.qt-socialicon.qt-socialicon-tw { background-color: #29c5f6; } .qt-widget-social li > a.qt-socialicon.qt-socialicon-yt { background-color: #e34c41; } .qt-widget-social li > a.qt-socialicon.qt-socialicon-ig { background-color: #974b00; } .qt-widget-social li > a.qt-socialicon i { font-size: 2rem; line-height: 3rem; color: #fff; opacity: 1; } .qt-widget-social li > a.qt-socialicon i::before { padding-left: 3px; } .qt-widget-search .qt-searchform input { box-sizing: border-box; padding: 10px 0 0 0; } .qt-widget-search .qt-searchform label { left: 0; } .qt-paddedcontent > .qt-widgets > .qt-widget:last-child { margin-bottom: 0; } /**! 9. footer ======================================================*/ /* 06. Footer ========================================================================== */ .qt-footercontainer { position: relative; z-index: 100; } .qt-footer-bottom { padding: 2.5rem 0 6rem 0; } .qt-footer-bottom .qt-menu-social { padding: 1rem 0 0.4rem 0; } .qt-footer-bottom .qt-menu-footer { margin: 0.5rem 0 0 0; padding: 0; line-height: 1em; } .qt-footer-bottom .qt-menu-footer li { display: inline; line-height: 1em; height: 2.828; padding: 0; } .qt-footer-bottom .qt-menu-footer li::after { display: inline; content: " / "; opacity: 0.3; } .qt-footer-bottom .qt-menu-footer li:last-child::after { display: none; } .qt-footer-bottom .qt-menu-footer li a { line-height: 1.414; } .qt-footer-bottom .qt-menu-footer li a i { font-size: 1.414; opacity: 1; } .qt-list-chevron li::before { display: inline; font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; content: "keyboard_arrow_right"; position: relative; top: 0.11em; margin-right: 0.2em; } .qt-footer-widgets-container { position: relative; z-index: 2; margin-top: 0; } .qt-footer-widgets-container .qt-container-l { position: relative; z-index: 2; } .qt-footer-widgets-container .qt-footer-widgets { padding: 5rem 0; width: 100%; top: 50%; } .qt-footer-widgets-container .qt-footer-widgets::after { display: block; content: " "; top: 0; left: 0; background: #000; opacity: 0.5; width: 100%; height: 100%; z-index: 0; position: absolute; } .qt-footer-widgets-container .qt-container { position: relative; z-index: 2; } .qt-footer-widgets-container .qt-footer-twitter { text-align: center; } .qt-footer-widgets-container .qt-footer-twitter .qt-tweet-featured .qt-tweet-content { font-size: 32px; line-height: 1.2em; padding: 1rem 0; font-style: italic; opacity: 0.6; } .qt-btn.qt-scrollupbtn, .qt-wp-pagination ul.page-numbers li a.qt-scrollupbtn, .qt-wp-pagination ul.page-numbers li > span.qt-scrollupbtn { float: left; margin: 10px 10px 0 0; } .qt-related-section { position: relative; z-index: 2; } /**! 10. item metas ======================================================*/ .qt-item-metas { width: 100%; text-align: left; display: table; line-height: 30px; margin: 0; display: block; clear: both; opacity: .7; } .qt-item-metas i { font-size: 1.2em; vertical-align: middle; margin-left: 10px; opacity: 0.6; } .qt-item-metas i:first-of-type { margin-left: 0; } .qt-item-metas a { font-weight: strong; } .qt-item-metas a:hover { border-bottom: 1px solid; } .qt-item-metas.qt-small, .qt-item-metas.qt-details { font-size: 10px; line-height: 1em; margin: 4px 0 0 0; } .qt-item-metas.qt-small i, .qt-item-metas.qt-details i { font-size: 1em; opacity: 1; } /**! 11. comments ======================================================*/ .qt-commentsblock h3 + p.qt-item-metas.qt-commentscount { margin-top: 0; padding-top: 0; } .qt-commentscaption { margin-bottom: 0; } .qt-part-post-comments .qt-comment-list { margin: 0; padding: 0; } .qt-part-post-comments .qt-comment-list li.qt-comment-item { list-style: none; padding: 0; margin: 0; display: block; border-bottom: 2px solid rgba(100, 100, 100, 0.3); padding-bottom: 40px; padding-top: 40px; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-comment-image .qt-user-icon { font-size: 40px; opacity: 0.6; padding-top: 8px; } .qt-part-post-comments .qt-comment-list li.qt-comment-item #respond { clear: both; padding-top: 20px; } .qt-part-post-comments .qt-comment-list li.qt-comment-item.parent .comment-content { margin-bottom: 1rem; } .qt-part-post-comments .qt-comment-list li.qt-comment-item ul.children { margin-left: 1rem; } .qt-part-post-comments .qt-comment-list li.qt-comment-item ul.children li.qt-comment-item { margin-top: 1rem; padding-top: 1rem; clear: both; padding-bottom: 1rem; } .qt-part-post-comments .qt-comment-list li.qt-comment-item ul.children li.qt-comment-item:first-child { border-top: 1px dotted rgba(100, 100, 100, 0.3); } .qt-part-post-comments .qt-comment-list li.qt-comment-item ul.children li.qt-comment-item:last-child { border-bottom: none; padding-bottom: 0; } .qt-part-post-comments .qt-comment-list li.qt-comment-item:first-child { padding-top: 0; } .qt-part-post-comments .qt-comment-list li.qt-comment-item:last-child { border-bottom: 2px solid rgba(100, 100, 100, 0.3); padding-bottom: 1rem; margin-bottom: 1.4rem; } .qt-part-post-comments .qt-comment-list li.qt-comment-item::after { display: table; width: 100%; content: " "; clear: both; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-the-content { margin: 1rem 0; line-height: 1.7em; font-size: 1rem; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-the-content h6 { font-size: 0.889rem; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-the-content h5 { font-size: 1rem; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-the-content h4 { font-size: 1.125rem; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-the-content h3 { font-size: 1.266rem; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-the-content h2 { font-size: 1.424rem; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-the-content h1 { font-size: 1.602rem; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-comment-image { width: 40px; float: left; display: block; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-comment-image img { width: 100%; height: auto; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-comment-text { width: calc(100% - 40px); float: left; padding-left: 1.4rem; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-comment-text .qt-commentheader { margin-top: 0; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-comment-text .qt-commentheader a, .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-comment-text .qt-commentdetails a { color: inherit; } .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-comment-text .qt-small, .qt-part-post-comments .qt-comment-list li.qt-comment-item .qt-comment-text .qt-details { opacity: 0.5; margin-top: 0.2rem; } .comment-respond form .input-field label { left: 0; } .comment-respond form textarea { padding: 1rem 0; border-width: 2px; height: 5rem; } .comment-respond .qt-cancel-reply { float: right; } .comment-respond .qt-cancel-reply i { color: #f00; } p.qt-comment-notes { font-size: 13px; opacity: 0.5; margin-top: 0 !important; } p.logged-in-as { margin: 0.5rem 0 1.2rem 0; } .input-field label.active, .input-field input:placeholder-shown + label { font-size: 13px; } /**! 12. part archive item ======================================================*/ .qt-part-archive-item { /* ======================== RELEASE ======================== */ /* ======================== ARTIST ======================== */ /* ======================== EVENT ======================== */ /* ======================== PODCAST ======================== */ /* ======================== INLINE ITEM ======================== */ /* ======================== INLINE ITEM ======================== */ /* ======================== OPEN STATE ======================== */ /* ======================== LARGE ======================== */ /* ======================== CHART ITEM ======================== */ } .qt-part-archive-item [data-activatecard] { cursor: pointer; } .qt-part-archive-item.qt-carditem { padding-top: 143%; position: relative; margin-bottom: 1rem; border-radius: 4px; } .qt-part-archive-item.qt-carditem .qt-headings .qt-item-metas { text-align: center; font-size: 13px; } .qt-part-archive-item.qt-carditem .qt-embeddedplayer { height: 0; overflow: hidden; } .qt-part-archive-item.qt-carditem .qt-actbtns { z-index: 100; } .qt-part-archive-item.qt-carditem .qt-dropdown-content { left: 1rem !important; } .qt-part-archive-item .qt-thumbnail { display: block; line-height: 0; background: #000; } .qt-part-archive-item .qt-iteminner { border-radius: 4px; overflow: hidden; height: 100%; width: 100%; position: absolute; top: 0; } .qt-part-archive-item .qt-actionbtn { display: none; } .qt-part-archive-item .qt-card-bg { position: absolute; z-index: 0; background: black; background-repeat: no-repeat; background-size: cover; background-position: center center; transform: scale(1); will-change: opacity, transform; opacity: 0; transition: opacity 1.35s, transform 0.5s ease; filter: blur(4px) grayscale(60%); background-position: center; } .qt-part-archive-item .qt-card-bg img { display: none; } .qt-part-archive-item .qt-card-bg.qt-bgloaded { opacity: 0.3; } .qt-part-archive-item .qt-imagelink { display: block; height: 56%; content: " "; width: 100%; position: relative; z-index: 1; border-radius: 4px 4px 0 0; overflow: hidden; will-change: height; transition: height 0.2s; } .qt-part-archive-item .qt-imagelink .qt-header-bg { transform: scale(1); filter: brightness(100%); will-change: transform; transition: transform 0.2s ease, filter 0.2s; } .qt-part-archive-item .qt-header { border-radius: 4px 4px 0 0; text-align: center; background-color: rgba(0, 0, 0, 0); transition: background-color 0.2s; will-change: text-align; height: 44%; transition: height 0.2s; will-change: height; position: relative; z-index: 2; } .qt-part-archive-item .qt-header .qt-headings { border-radius: 4px 4px 0 0; padding: 1.4rem 0.7rem; height: 100%; } .qt-part-archive-item .qt-header .qt-headings .qt-title { margin: 0.45em 0 0.7rem 0; word-break: break-word; } .qt-part-archive-item .qt-header .qt-headings .qt-item-metas { display: block; } .qt-part-archive-item .qt-header .qt-headings .qt-capseparator { margin-top: 0.7rem; margin-bottom: 0; } .qt-part-archive-item .qt-header .qt-headings .qt-close { position: absolute; top: 10px; right: 10px; z-index: 10; display: none; font-size: 22px; cursor: pointer; } .qt-part-archive-item .qt-header .qt-actionbtn { position: absolute; bottom: -30px; z-index: 1000; right: 0; width: 100%; text-align: right; top: auto; right: 22px; } .qt-part-archive-item .qt-content { height: 0%; will-change: height; transition: height 0.2s; overflow: hidden; padding: 2rem 0 2rem 0; z-index: 1; position: relative; x-index: 10; } .qt-part-archive-item .qt-content .qt-summary { font-size: 15px; padding: 0 2rem; height: calc(100% - 2.5rem); overflow-y: auto; overflow-x: hidden; margin-bottom: 0.2rem; line-height: 1.8; } .qt-part-archive-item .qt-content .qt-item-metas { padding: 0 2rem; } .qt-part-archive-item i { opacity: 0.7; } .qt-part-archive-item .btn-floating i { opacity: 1; } .qt-part-archive-item.qt-release .qt-imagelink { padding-top: 100%; transition: padding 0.2s ease; will-change: padding-top; height: auto; } .qt-part-archive-item.qt-release .qt-header { height: 30%; } .qt-part-archive-item.qt-release .qt-content { padding: 0; } .qt-part-archive-item.qt-release .qt-summary { padding: 0; margin-bottom: 0; height: 100%; } .qt-part-archive-item.qt-artist .qt-imagelink { padding-top: 100%; transition: padding 0.2s ease; will-change: padding-top; height: auto; } .qt-part-archive-item.qt-artist .qt-header { height: 35%; } .qt-part-archive-item.qt-event .qt-imagelink { height: 72%; } .qt-part-archive-item.qt-event .qt-summary { /* margin-bottom: 1rem; height: 100%; */ } .qt-part-archive-item.qt-event .qt-header { height: 30%; } .qt-part-archive-item.qt-event .qt-content { padding-top: 2%; } .qt-part-archive-item.qt-podcast .qt-donut { width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; display: block; position: relative; overflow: hidden; transform: scale(0); transition: scale 0.3s ease; will-change: scale; } .qt-part-archive-item.qt-podcast .qt-donut .qt-podcast-quickplayer { display: inline-flex; vertical-align: middle; border-radius: 50%; font-size: 60px; display: block; color: #fff; text-align: center; line-height: 100px; position: relative; left: 50px; top: 50px; overflow: hidden; width: 100px; height: 100px; background: rgba(0, 0, 0, 0.2); z-index: 200; } .qt-part-archive-item.qt-podcast .qt-donut .qt-podcast-quickplayer i { z-index: 1; opacity: 1; font-size: 50px; vertical-align: middle; margin-top: -0.3em; } .qt-part-archive-item.qt-podcast .qt-donut::after { display: block; position: absolute; content: " "; width: 100%; height: 100%; border: 30px solid rgba(255, 255, 255, 0.07); left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; border-radius: 50%; } .qt-part-archive-item.qt-podcast .qt-donut img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; } .qt-part-archive-item.qt-podcast .qt-donut svg { position: absolute !important; margin: 0 auto; z-index: 100; border-radius: 50%; overflow: hidden; cursor: crosshair; } .qt-part-archive-item.qt-podcast .qt-donut svg path { position: absolute; left: 50%; margin-left: -100px; } .qt-part-archive-item.qt-podcast .qt-imagelink { padding-top: 100%; transition: padding 0.2s ease; will-change: padding-top; height: auto; } .qt-part-archive-item.qt-podcast .qt-summary { margin-bottom: 1rem; height: 100%; } .qt-part-archive-item.qt-podcast .qt-header { height: 30%; } .qt-part-archive-item.qt-podcast .qt-header .qt-actionbtn { bottom: -55px; } .qt-part-archive-item.qt-podcast .qt-content { padding-top: 0; } .qt-part-archive-item.qt-item-inline { border-radius: 0; height: auto; clear: both; width: 100%; display: block; padding-top: 0.7rem; } .qt-part-archive-item.qt-item-inline a { cursor: pointer; } .qt-part-archive-item.qt-item-inline .qt-item-metas { margin: 0; padding: 0; clear: none; line-height: 1em; padding-top: 0.2em; font-size: 11px; } .qt-part-archive-item.qt-item-inline .qt-tit { margin: 0; } .qt-part-archive-item.qt-item-inline .qt-inlineimg { width: 60px; float: left; overflow: hidden; margin-right: 8px; position: relative; z-index: 2; display: block; border-radius: 4px; line-height: 0; } .qt-part-archive-item.qt-release-small { border-radius: 0; height: auto; padding-bottom: 0.3rem; padding-top: 0.7rem; } .qt-part-archive-item.qt-release-small .qt-thumbactions { display: block; border-radius: 4px; line-height: 0; overflow: hidden; margin-bottom: 0.5rem; position: relative; padding-top: 100%; overflow-y: hidden; } .qt-part-archive-item.qt-release-small .qt-thumbactions img { transition: 0.3s; will-change: filter; filter: brightness(100%); position: relative; width: 100%; height: auto; position: absolute; top: 0; left: 0; } .qt-part-archive-item.qt-release-small .qt-thumbactions a.qt-playthis { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity 0.2s; } .qt-part-archive-item.qt-release-small .qt-thumbactions a.qt-playthis i { color: #fff; top: 50%; left: 50%; margin: -20px 0 0 -20px; opacity: 1; } .qt-part-archive-item.qt-release-small .qt-thumbactions a.qt-add, .qt-part-archive-item.qt-release-small .qt-thumbactions a.qt-cartbt, .qt-part-archive-item.qt-release-small .qt-thumbactions a.added_to_cart { position: absolute; width: 28px; height: 28px; line-height: 28px; text-align: center; bottom: -30px; left: 0; z-index: 3; transition: bottom 0.2s; } .qt-part-archive-item.qt-release-small .qt-thumbactions a.qt-add i, .qt-part-archive-item.qt-release-small .qt-thumbactions a.qt-cartbt i, .qt-part-archive-item.qt-release-small .qt-thumbactions a.added_to_cart i { font-size: 20px; color: #fff; opacity: 1; } .qt-part-archive-item.qt-release-small .qt-thumbactions a.qt-cartbt { left: auto; right: 0; } .qt-part-archive-item.qt-release-small .qt-thumbactions a.added_to_cart { bottom: 0; left: auto; right: 0; float: right; position: absolute !important; text-align: center; width: 28px; } .qt-part-archive-item.qt-release-small .qt-thumbactions a.added_to_cart::after { width: 28px; left: auto; } .qt-part-archive-item.qt-release-small .qt-thumbactions:hover img { filter: brightness(80%); } .qt-part-archive-item.qt-release-small .qt-thumbactions:hover a { opacity: 1; } .qt-part-archive-item.qt-release-small .qt-thumbactions:hover a.qt-add, .qt-part-archive-item.qt-release-small .qt-thumbactions:hover a.qt-cartbt { bottom: 0; } .qt-part-archive-item.qt-release-small .qt-inlineimg { width: 60px; float: left; border-radius: 4px; overflow: hidden; margin-right: 8px; } .qt-part-archive-item.qt-release-small .qt-tit { margin: 0; } .qt-part-archive-item.qt-open { /* ======================== RELEASE OPEN ======================== */ /* ======================== EVENT OPEN ======================== */ /* ======================== ARTIST OPEN ======================== */ /* ======================== PODCAST OPEN ======================== */ } .qt-part-archive-item.qt-open .qt-animation { top: -1px; } .qt-part-archive-item.qt-open .qt-ho { display: none; } .qt-part-archive-item.qt-open .qt-embeddedplayer { height: auto; } .qt-part-archive-item.qt-open .qt-iteminner .qt-actionbtn { display: block; } .qt-part-archive-item.qt-open .qt-iteminner .qt-card-bg.qt-bgloaded { opacity: 0.07; } .qt-part-archive-item.qt-open .qt-iteminner .qt-headings { padding-left: 2rem; } .qt-part-archive-item.qt-open .qt-iteminner .qt-headings .qt-item-metas { text-align: left; } .qt-part-archive-item.qt-open .qt-iteminner .qt-header { text-align: left; height: calc(44% - 40px); } .qt-part-archive-item.qt-open .qt-iteminner .qt-header .qt-tags a { background-color: #fff; color: #999; } .qt-part-archive-item.qt-open .qt-iteminner .qt-header .qt-capseparator { color: #fff; } .qt-part-archive-item.qt-open .qt-iteminner .qt-header .qt-close { display: block; } .qt-part-archive-item.qt-open .qt-iteminner .qt-imagelink { height: 0%; } .qt-part-archive-item.qt-open .qt-iteminner .qt-imagelink .qt-header-bg { transform: scale(1); } .qt-part-archive-item.qt-open .qt-iteminner .qt-content { height: 56%; } .qt-part-archive-item.qt-open.qt-release .qt-imagelink { padding-top: 0%; } .qt-part-archive-item.qt-open.qt-event .qt-header { height: 25%; } .qt-part-archive-item.qt-open.qt-event .qt-content { height: 67%; } .qt-part-archive-item.qt-open.qt-artist .qt-header { height: 25%; } .qt-part-archive-item.qt-open.qt-artist .qt-imagelink { padding-top: 0%; } .qt-part-archive-item.qt-open.qt-artist .qt-content { height: 67%; } .qt-part-archive-item.qt-open.qt-podcast .qt-donut { transform: scale(1); } .qt-part-archive-item.qt-open.qt-podcast .qt-imagelink { padding-top: 0%; } .qt-part-archive-item.qt-open.qt-podcast .qt-header { height: 320px; } .qt-part-archive-item.qt-open.qt-podcast .qt-content { height: calc(100% - 360px); } .qt-part-archive-item.qt-part-archive-item-large { position: relative; overflow: hidden; } .qt-part-archive-item.qt-part-archive-item-large .qt-thumbnail { background: #000; } .qt-part-archive-item.qt-part-archive-item-large .qt-thumbnail img { opacity: 0.77; } .qt-part-archive-item.qt-part-archive-item-large .qt-headings { padding-bottom: 1rem; } .qt-part-archive-item.qt-part-archive-item-large .qt-headings .qt-tit { margin-top: 3px; } .qt-part-archive-item.qt-part-archive-item-large .qt-headings .qt-item-metas { opacity: 0.55; } .qt-part-archive-item.qt-part-archive-item-large .qt-headings h3, .qt-part-archive-item.qt-part-archive-item-large .qt-headings h4 { margin-bottom: 0; } .qt-part-archive-item.qt-part-archive-item-large .qt-sticky-bookmark { position: absolute; z-index: 3; top: 8px; right: 10px; opacity: 1; width: 30px; height: 30px; color: #fff; font-size: 30px; } .qt-part-archive-item.qt-part-archive-item-large .qt-sticky-bg { position: absolute; content: " "; display: block; width: 150px; height: 60px; z-index: 2; transform: rotate(45deg); right: -65px; top: 0; } .qt-part-archive-item__chart .qt-content .qt-summary { padding: 0; border: 1px solid rgba(100, 100, 100, 0.4); border-left: none; border-right: none; } .qt-part-archive-item__chart .qt-track-mini { border-bottom: 1px solid rgba(100, 100, 100, 0.4); padding: 0.7rem 1.3rem; } .qt-part-archive-item__chart .qt-track-mini .qt-pos { display: inline-block; float: left; width: 50px; height: 40px; line-height: 40px; font-size: 20px; text-align: center; border-right: 1px solid rgba(100, 100, 100, 0.4); margin-right: 0.7rem; } .qt-part-archive-item__chart .qt-track-mini h5 { margin: 0; } .qt-glass-card { margin: 0.7rem 0 0.2rem 0; position: relative; filter: brightness(100%); transform: filter 0.3s; border-radius: 4px; background-color: #121212; } .qt-glass-card a { color: #fff !important; } .qt-glass-card h5 { color: #fff; } .qt-glass-card:hover { filter: brightness(130%); } .qt-glass-card a.qt-content { position: relative; z-index: 10; color: #fff; display: block; padding: 1rem 1.4rem 2.5rem 1.8rem; min-height: 180px; } .qt-glass-card .qt-item-metas { line-height: 1.1em; } .qt-glass-card::after { display: block; content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; opacity: 0.8; z-index: 1; background: -moz-linear-gradient(top, black 0%, black 30%, rgba(0, 0, 0, 0) 99%, rgba(0, 0, 0, 0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, black 0%, black 30%, rgba(0, 0, 0, 0) 99%, rgba(0, 0, 0, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, black 0%, black 30%, rgba(0, 0, 0, 0) 99%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ } .qt-grid-item { margin: 1rem 0 0 0; padding-bottom: 1; border-radius: 4px; margin-bottom: 0; } .qt-grid-item h4 { margin-bottom: 0; } .qt-grid-item header.qt-headings, .qt-grid-item .qt-summary, .qt-grid-item footer { padding: 1.4rem; } .qt-grid-item .qt-summary, .qt-grid-item footer { padding-top: 0; } .qt-grid-item-split { margin: 1rem 0 0 0; padding-bottom: 1; border-radius: 4px; overflow: hidden; margin-bottom: 0; } .qt-grid-item-split:first-child { margin-top: 0; } .qt-grid-item-split .qt-fi { display: block; line-height: 0; } .qt-grid-item-split h4 { margin-bottom: 0; } .qt-grid-item-split header.qt-headings { padding: 0.7em 1.4em 0 0; } .qt-grid-item-split footer { padding: 0; } .qt-grid-item-split .qt-cont { padding: 0 30px 20px 30px; } .qt-grid-item-split .qt-cont.m12 { padding-left: 1.4rem; } .qt-scrl { font-size: 13px; line-height: 1.7em; padding: 0 1rem; } /**! 13. part share ======================================================*/ .qt-part-share { width: 100%; display: table; table-layout: fixed; margin-bottom: 1rem; } .qt-part-share a { display: table-cell; line-height: 50px; text-align: center; text-align: center; vertical-align: middle; margin: 0; color: #fff; line-height: 50px; } .qt-part-share a:hover { filter: brightness(1.3); color: #fff; } .qt-part-share .qt-capfont-thin { font-size: 13px; } .qt-btn-fb { background-color: #3e5b98; } .qt-btn-tw { background-color: #4da7de; } .qt-btn-gp { background-color: #dd4b39; } .qt-btn-pi { background-color: #c92619; } .qt-btn-wu { background-color: #25D366; } /**! 14. part playlist ======================================================*/ ul.qt-playlist { margin: 0; padding: 0; position: relative; z-index: 10; } ul.qt-playlist li { list-style: none; padding: 0; line-height: 1.2em; clear: both; display: block; border-bottom: 2px solid rgba(200, 200, 200, 0.3); position: relative; } ul.qt-playlist li img { position: absolute; z-index: 0; height: 68px; width: 68px; left: 0; top: 0; } ul.qt-playlist li [data-autoembed] { position: relative; top: 5px; } ul.qt-playlist li.qtmusicplayer-played { cursor: crosshair; } ul.qt-playlist li:hover .qt-mplayer-track-minicue { display: block; } ul.qt-playlist li::after { display: block; clear: both; width: 100%; content: " "; } ul.qt-playlist li .qt-play, ul.qt-playlist li .qt-cart { display: inline-block; float: left; width: 68px; height: 68px; text-align: center; line-height: 68px; display: inline-block; z-index: 20; position: relative; vertical-align: baseline; } ul.qt-playlist li .qt-play i, ul.qt-playlist li .qt-cart i { vertical-align: baseline; line-height: 68px; font-size: 36px; } ul.qt-playlist li .qt-play-noclick { pointer-events: none; } ul.qt-playlist li .qt-cart { color: inherit; } ul.qt-playlist li .qt-cart i { font-size: 24px; } ul.qt-playlist li .qt-price { font-size: 12px; padding-left: 3px; padding-right: 3px; width: 80%; left: 0; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; } ul.qt-playlist li p { width: calc(100% - 140px); float: left; padding-left: 22px; padding-top: .8rem; position: relative; z-index: 2; pointer-events: none; } ul.qt-playlist li .qt-tit { font-size: 13px; font-weight: bold; } ul.qt-playlist li .qt-art { font-size: 11px; } ul.qt-playlist li .qt-art a { color: inherit; } ul.qt-playlist li .qt-art i { display: inline-flex; vertical-align: baseline; transform: translateY(-1px); margin-right: 4px; } ul.qt-playlist li .qt-tit, ul.qt-playlist li .qt-art { max-width: 100%; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; } ul.qt-playlist li .qtmusicplayer-del { display: none; } .qt-mplayer-track-adv, .qt-mplayer-track-det { position: absolute; display: block; width: 0%; height: 100%; top: 0; left: 0; z-index: 1; content: " "; opacity: .8; } .qt-mplayer-track-minicue { position: absolute; display: block; width: 1px; opacity: 0.5; height: 100%; top: 0; left: 0; z-index: -1; content: " "; background: #fff; transition: left 0.02s ease; display: none; } .qt-mplayer-track-det { width: 100%; z-index: 2; } .qt-playlist-large ul.qt-playlist li .qt-tit { font-size: 1.2rem; line-height: 1.3rem; font-weight: bold; } .qt-playlist-large ul.qt-playlist li .qt-art a { color: inherit; } .qt-play.qt-link-sec.qtmusicplayer-play-btn { color: white; text-shadow: 0 0 8px rgba(0, 0, 0, 0.7); opacity: 0.9; transition: all 0.3s; } /**! 15. text shortened ======================================================*/ .qt-text-shortened { position: relative; } .qt-text-shortened .qt-text { height: 3.6em; overflow: hidden; position: relative; transition: height 0.2s ease; will-change: height; padding-bottom: 1rem; } .qt-text-shortened .qt-text.qt-tall { height: 24em; } .qt-text-shortened .qt-shorten-trigger { position: relative; padding-top: 1.4rem; width: 100%; } .qt-text-shortened .qt-shorten-trigger i { line-height: inherit; } .qt-text-shortened .qt-less { display: none; } .qt-text-shortened.active .qt-text, input:placeholder-shown + label.qt-text-shortened .qt-text { max-height: none; height: auto; } .qt-text-shortened.active .qt-less, input:placeholder-shown + label.qt-text-shortened .qt-less { display: block; } .qt-text-shortened.active .qt-more, input:placeholder-shown + label.qt-text-shortened .qt-more { display: none; } .qt-text-shortened.active .qt-shorten-trigger, input:placeholder-shown + label.qt-text-shortened .qt-shorten-trigger { background: transparent; } /**! 16. lineup ======================================================*/ .qt-lineup { margin: 0; } .qt-lineup li { list-style: none; } .qt-lineup-full a.qt-lineup-item { width: 100%; display: table; margin-bottom: 2px; height: 250px; vertical-align: middle; text-align: center; } .qt-lineup-full a.qt-lineup-item::after { display: block; clear: both; width: 100%; content: " "; } .qt-lineup-full a.qt-lineup-item::last-child { margin-bottom: 0; } .qt-lineup-full a.qt-lineup-item div { display: table-cell; vertical-align: middle; background: rgba(0, 0, 0, 0.3); transition: background 0.2s; } .qt-lineup-full a.qt-lineup-item h4 { vertical-align: middle; } .qt-lineup-full a.qt-lineup-item .qt-item-metas { text-align: center; } .qt-lineup-full a.qt-lineup-item:hover div { background: rgba(0, 0, 0, 0.1); } /**! 17. tracklist ======================================================*/ .qt-tracklist { margin: 1rem 0; } .qt-tracklist li { list-style: none; margin: 0.3em 0; } .qt-tracklist li a { cursor: pointer; } .qt-tracklist li i.material-icons { font-size: 1.4em; } /**! 18. animation ======================================================*/ .qt-animation { height: 50px; display: block; z-index: 1; position: relative; } /**! 19. 3dfx ======================================================*/ .qt-3dfx { transform: translateX(0%); transition: transform 0.3s ease; } .qt-3dfx-on { transform: translateX(-90%); z-index: 300; } .qt-3dfx-on .qt-3dfx-Close { display: block; opacity: 0.5; } .qt-desktopmenu li, .qt-menu-secondary { transition: opacity 0.3s; } .qt-3dfx-enabled .qt-menu-secondary, .qt-3dfx-enabled .qt-menubar-center .qt-menu-secondary li { opacity: 0; } .qt-3dfx-enabled .qt-desktopmenu li { opacity: 0; } .qt-3dfx-enabled .qt-desktopmenu li.qt-3dswitch, .qt-3dfx-enabled .qt-menubar-center .qt-menu-secondary, .qt-3dfx-enabled .qt-menubar-center .qt-menu-secondary li.qt-3dswitch { opacity: 1; } .qt-3dfx-enabled ul.qt-breadcrumb { opacity: 0; } /**! 21. morphicon ======================================================*/ .qt-morphbtn { display: block; position: relative; height: 56px; width: 40px; line-height: 56px; text-align: center; padding-top: 4px; } .qt-morphbtn i { z-index: 121; cursor: pointer; margin: 0 auto; width: 22px; height: 22px; display: inline-block; transform: none; } .qt-morphbtn i .qt-top, .qt-morphbtn i .qt-middle, .qt-morphbtn i .qt-bottom { backface-visibility: hidden; position: absolute; left: 0; border-top: 2px solid white; width: 22px; transition: 0.3s; } .qt-morphbtn i .qt-top { top: 0; } .qt-morphbtn i .qt-middle { top: 6px; } .qt-morphbtn i .qt-bottom { top: 12px; } .qt-morphbtn.active i .qt-top, input:placeholder-shown + label.qt-morphbtn i .qt-top { backface-visibility: hidden; top: 6px; transform: rotate(45deg); } .qt-morphbtn.active i .qt-middle, input:placeholder-shown + label.qt-morphbtn i .qt-middle { opacity: 0; } .qt-morphbtn.active i .qt-bottom, input:placeholder-shown + label.qt-morphbtn i .qt-bottom { backface-visibility: hidden; top: 6px; transform: rotate(-45deg); } /**! 22. layer bottom ======================================================*/ .qt-layer-bottom { position: fixed; top: 60px; width: 100%; overflow: auto; left: 100%; height: calc(100% - 50px); overflow-x: hidden; overflow-y: auto; transition: opacity 0.38s, left 0.38s ease; opacity: 1; display: block; padding: 20px 0 120px 0; z-index: 2; } .qt-layer-bottom::-webkit-scrollbar { width: 2px; height: 2px; } .qt-layer-bottom::-webkit-scrollbar-button { width: 0px; height: 0px; } .qt-layer-bottom::-webkit-scrollbar-thumb { background: #999; border: 0px none #999; border-radius: 0px; } .qt-layer-bottom::-webkit-scrollbar-thumb:hover { background: #999; } .qt-layer-bottom::-webkit-scrollbar-thumb:active { background: #000000; } .qt-layer-bottom::-webkit-scrollbar-track { background: #666666; border: 0px none #999; border-radius: 0; } .qt-layer-bottom::-webkit-scrollbar-track:hover { background: #666666; } .qt-layer-bottom::-webkit-scrollbar-track:active { background: #333333; } .qt-layer-bottom::-webkit-scrollbar-corner { background: transparent; } .qt-layer-bottom.active, input:placeholder-shown + label.qt-layer-bottom { left: 0%; opacity: 1; } /**! 23. videobackground ======================================================*/ .qt-videobg { position: fixed; background: transparent; width: 100%; height: 100%; z-index: 0; top: 0; opacity: 0; } .qt-videobg::after { background: black; position: absolute; z-index: 10; opacity: 0.4; width: 100%; height: 100%; top: 0; left: 0; content: " "; display: block; } .ytplayer-container { top: 0; z-index: -1; } .background-video { background-position: top center; background-repeat: no-repeat; bottom: 0; left: 0; overflow: hidden; position: fixed; right: 0; top: 0; } video, source { bottom: 0; left: 0; min-height: 100%; min-width: 100%; position: absolute; } .loaded .ytplayer-container { display: block; } .loaded .placeholder-image { opacity: 0; } .ytplayer-container { bottom: 0; height: 100%; left: 0; min-width: 100%; overflow: hidden; position: absolute; right: 0; top: 0; z-index: 3; } .placeholder-image { height: 100%; left: 0; min-height: 100%; min-width: 100%; position: fixed; top: 0; z-index: 1; } .ytplayer-shield { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2; } /**! 24. slick slider ======================================================*/ /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } .slick-slide.qt-item-card { max-width: 500px; max-width: 90vw; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .qt-slickslider-outercontainer .qt-slickslider-container { position: relative; } .qt-slickslider-outercontainer .qt-slickslider-container.qt-singleslide { margin: 0 -1rem; } .qt-slickslider-outercontainer .qt-slickslider-container.qt-singleslide .slick-slider .qt-item { margin: 0 1rem; } .qt-slickslider-outercontainer .slick-slider { /* This is for sliders with multiple items, to use the cols padding of materializecss */ } .qt-slickslider-outercontainer .slick-slider .qt-item { padding-top: 1rem; margin: 0 0 1rem 0; outline: none; backface-visibility: hidden; } .qt-slickslider-outercontainer .slick-slider .qt-item.qt-slick-opacity-fx { opacity: 0.5; transition: opacity 0.3s; transition-delay: 0.3s; } .qt-slickslider-outercontainer .slick-slider .qt-item.slick-center { opacity: 1; } .qt-slickslider-outercontainer .slick-slider .qt-item.qt-slick-scale-fx { transition: opacity 0.3s, transform 0.3s; transition-delay: 0.1s; transform: scale(0.8); } .qt-slickslider-outercontainer .slick-slider .qt-item.slick-center { transform: scale(1); } .qt-slickslider-outercontainer .slick-slider .qt-card-featured { padding-bottom: 15px; } .qt-slickslider-outercontainer .qt-carouselcontrols i { font-size: 28px; width: 28px; cursor: pointer; } .qt-slickslider-outercontainer .slick-dots { position: absolute; top: -61px; right: 85px; width: calc(30% - 60px); display: flex; } .qt-slickslider-outercontainer .slick-dots li { display: table-cell; width: 100%; text-align: center; overflow: hidden; background: none; background-color: none; padding: 23px 0 0 0; list-style: none; flex-grow: 1; flex-shrink: 1; flex-basis: 0; flex: 1 1 0; } .qt-slickslider-outercontainer .slick-dots li button { display: block; content: " "; background: #fff; opacity: 0.7; height: 4px; width: auto; color: transparent; border: none; width: 100%; } .qt-slickslider-outercontainer .slick-dots li.slick-active button { opacity: 1; } .qt-slickslider-outercontainer__center { margin-bottom: 40px; } .qt-slickslider-outercontainer__center .qt-carouselcontrols { position: absolute; top: 50%; width: 100%; background: red; } .qt-slickslider-outercontainer__center .qt-carouselcontrols i { position: absolute; left: -40px; width: 50px; height: 50px; line-height: 0; background: transparent; display: inline-block; text-align: center; content: " "; transform: rotate(135deg); border-right: 3px solid; border-bottom: 3px solid; transition: border 0.2s ease; border-radius: 6px; } .qt-slickslider-outercontainer__center .qt-carouselcontrols i::after { display: block; border: 3px solid; content: " "; width: 8px; height: 8px; position: absolute; top: 50%; left: 50%; margin: -3px 0 0 -3px; border-radius: 2px; transition: margin 0.3s ease; } .qt-slickslider-outercontainer__center .qt-carouselcontrols i:last-child { left: auto; right: -40px; transform: rotate(-45deg); } .qt-slickslider-outercontainer__center .qt-carouselcontrols i:hover { border-right: 4px solid; border-bottom: 4px solid; } .qt-slickslider-outercontainer__center .qt-carouselcontrols i:hover::after { margin: -0px 0 0 -0px; } .qt-slickslider-outercontainer__center .slick-dots { top: auto; left: 35%; width: 30%; right: auto; } .qt-slickslider-outercontainer__center .slick-dots li { padding-top: 1rem; } .qt-negative .qt-slickslider-outercontainer .slick-dots li button { background: #fff; } /**! 25. pagination ======================================================*/ .qt-wp-pagination { float: none; clear: both; width: 100%; text-align: center; margin: 2rem 0 3rem 0; } .qt-wp-pagination::before { content: " "; display: table; clear: both; width: 100%; height: 1rem; float: none; } .qt-wp-pagination--tracklist { margin: 30px 0 !important; padding: 0 0 30px 0 !important; } .qt-wp-pagination--tracklist::before { display: none; } .qt-wp-pagination ul.page-numbers { text-align: center; display: block; clear: both; padding: 0; } .qt-wp-pagination ul.page-numbers li { display: inline-block; font-size: 1.2rem; border-radius: 2px; text-align: center; margin: 0 3px; line-height: 1rem; vertical-align: middle; } .qt-wp-pagination ul.page-numbers li a, .qt-wp-pagination ul.page-numbers li > span { padding: 0 8px; min-width: 1.5rem; margin: 0; line-height: 1.5rem; height: 1.5rem; } .qt-wp-pagination ul.page-numbers li.disabled a { cursor: default; } .qt-wp-pagination ul.page-numbers li i { margin-top: -1px; padding: 0; } .qt-wp-pagination ul.page-numbers li.pages ul li { display: inline-block; float: none; } .qt-masonry .qt-wp-pagination { position: absolute; bottom: 0; display: block; clear: both; } .qt-masonry .qt-wp-pagination::before { content: " "; display: table; clear: both; width: 100%; height: 1rem; } .qt-masonry .qt-wp-pagination .qt-loadmore-container { padding-top: 1rem; display: block; clear: both; } .qt-masonry .qt-wp-pagination .qt-loadmore-container .qt-btn, .qt-masonry .qt-wp-pagination .qt-loadmore-container ul.page-numbers li a, .qt-masonry .qt-wp-pagination ul.page-numbers li .qt-loadmore-container a, .qt-masonry .qt-wp-pagination .qt-loadmore-container ul.page-numbers li > span, .qt-masonry .qt-wp-pagination ul.page-numbers .qt-loadmore-container li > span { margin-top: 1rem; } .qt-masonry .qt-wp-pagination .qt-loadmore-container span { text-align: center; } /**! 26. musicplayer ======================================================*/ .qt-mplayer { z-index: 2001; /* Track ================================= */ /* Single album ================================= */ /* Playlist ================================= */ /* Waveform since 1.9 ================================= */ } .qt-mplayer__debugger { position: fixed; z-index: 9999999; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 10px; width: 200px; display: block; height: 300px; font-size: 8px; line-height: 1.3em; overflow: auto; } .qt-mplayer__triucco { position: fixed; top: 52px; left: 0; background: rgba(0, 0, 0, 0) !important; font-size: 0.1px; width: 100%; width: 100vw; display: block; height: 100vh; z-index: 999999; /* position: fixed; top: 61vh; left: 5vw; opacity: 0.8; text-align: left; padding: 20px; // vertical-align: bottom; width: 90%; width: 90vw; overflow: hidden; line-height: 33vh; display: block; height: 33vh; z-index: 999999; opacity: 0.9; text-align: center; h2 { margin-top: 15vh; } */ } .qt-mplayer__triucco h2 { display: none; } .qt-mplayer__fullwaveform { display: none; } .qt-mplayer__header-play span.qt-play { font-size: 90px; margin: 0; height: 90px; overflow: hidden; line-height: 90px; display: inline-block; } .qt-mplayer__playlistcontainer { position: fixed; top: 100%; width: 100%; height: 100%; height: 100vh; z-index: 2001; display: block; margin: 0; transition: top 0.5s ease; will-change: transform; padding-bottom: 60px; overflow-x: hidden; overflow-y: auto; transition-timing-function: cubic-bezier(0.42, 0, 0.1, 1); } .qt-mplayer__controls { height: 60px; position: fixed; top: auto; bottom: 0; width: 100%; z-index: 2002; transition: all 0.2s ease; -webkit-transform: translateZ(0); background: #000; } .qt-mplayer__controllayer { display: block; width: 100%; position: relative; top: 0; left: 0; z-index: 2002; height: 60px; } .qt-mplayer__waves { position: fixed; width: 100%; background: transparent; height: 80px; z-index: 100; content: " "; display: block; bottom: 0; left: 0; overflow: visible; } .qt-mplayer__play, .qt-mplayer__volume, .qt-mplayer__cart, .qt-mplayer__prev, .qt-mplayer__next, .qt-mplayer__playlistbtn, .qt-mplayer__cover { display: block; width: 60px; height: 60px; line-height: 60px; font-size: 24px; float: left; text-align: center; color: #fff; cursor: pointer; } .qt-mplayer__play i, .qt-mplayer__volume i, .qt-mplayer__cart i, .qt-mplayer__prev i, .qt-mplayer__next i, .qt-mplayer__playlistbtn i, .qt-mplayer__cover i { vertical-align: -2px; } .qt-mplayer__notification { position: absolute; color: #fff; top: 0; right: 1px; font-size: 18px; line-height: 54px; width: 58px; height: 58px; padding: 0 3px; font-weight: bold; transform: scale(0); transition: transform 0.1s; will-change: transform; display: inline-block; top: 0%; left: 0%; margin-left: 0; margin-top: 1px; box-shadow: none; } .qt-mplayer__notification.active, input:placeholder-shown + label.qt-mplayer__notification { transform: scale(1); } .qt-mplayer__notification.active::after, input:placeholder-shown + label.qt-mplayer__notification::after, .qt-mplayer__notification.active::before, input:placeholder-shown + label.qt-mplayer__notification::before { top: 3px; left: 3px; width: 54px; height: 54px; display: block; content: " "; border-radius: 50%; border: 3px solid; position: absolute; border-top-color: transparent; border-bottom-color: transparent; animation: rotationspin 0.8s infinite linear; -webkit-animation: rotationspin 0.8s infinite linear; } .qt-mplayer__notification.qtmp-spinner { width: 60px; height: 60px; top: 0px; left: 0px; } .qt-mplayer__notification.qtmp-spinner::after, .qt-mplayer__notification.qtmp-spinner::before { width: 50px; height: 50px; display: block; content: " "; border-radius: 50%; border: 6px solid; top: 5px; left: 5px; position: absolute; border-top-color: transparent; border-bottom-color: transparent; animation: rotationspin 1s infinite linear; -webkit-animation: rotationspin 1s infinite linear; } .qt-mplayer__notification.qtmp-spinner::before { width: 34px; height: 34px; top: 13px; left: 13px; border: 4px solid; border-top-color: transparent; border-bottom-color: transparent; animation: rotationspinRev 2.6s infinite linear; -webkit-animation: rotationspinRev 2.6s infinite linear; } @-webkit-keyframes rotationspin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-webkit-keyframes rotationspinRev { from { -webkit-transform: rotate(270deg); } to { -webkit-transform: rotate(90deg); } } .qt-mplayer__play { position: relative; overflow: hidden; } .qt-mplayer__volume { display: none; } .qt-mplayer__cart { display: none; } .qt-mplayer__cover { display: none; } .qt-mplayer__cover img { width: 100%; height: 100%; } .qt-mplayer__prev { display: none; } .qt-mplayer__next { display: none; } .qt-mplayer__playlistbtn { float: right; } .qt-mplayer__track { width: calc(100% - 180px); padding: 0 10px; display: block; float: left; text-transform: uppercase; cursor: crosshair; position: relative; height: 100%; } .qt-mplayer__track:hover .qt-mplayer-track-minicue { display: block; } .qt-mplayer__rowone { display: block; white-space: nowrap; line-height: 1.2em; padding: 6px 0 0 0; color: #fff; margin-top: 2px; position: relative; z-index: 2; pointer-events: none; } .qt-mplayer__rowtwo { font-size: 13px; display: block; white-space: nowrap; line-height: 13px; padding: 5px 0 0 0; font-weight: bold; position: relative; color: #fff; z-index: 2; pointer-events: none; } .qt-mplayer__title, .qt-mplayer__artist { width: 80%; display: inline-block; overflow: hidden; text-overflow: ellipsis; } .qt-mplayer__time, .qt-mplayer__length { display: block; width: 20%; position: absolute; top: 4px; right: 0; font-size: 11px; font-weight: normal; text-align: right; line-height: inherit; } .qt-mplayer__album { text-align: center; line-height: 1; width: 100%; height: auto; display: block; position: relative; padding-top: 100%; } .qt-mplayer__album img { position: absolute; width: 100%; height: auto; top: 0; left: 0; } .qt-mplayer__album::after { display: block; content: " "; width: 100%; height: 60%; position: absolute; z-index: 1; bottom: 0; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 98%, rgba(0, 0, 0, 0.65) 99%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 98%, rgba(0, 0, 0, 0.65) 99%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 98%, rgba(0, 0, 0, 0.65) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .qt-mplayer__album a { position: absolute; z-index: 10; bottom: 20px; margin: 0 15%; width: 70%; left: 0; } .qt-mplayer__playlist { width: 100%; text-align: left; } .qt-mplayer__playlist ul.qt-playlist { padding-bottom: 70px; } .qt-mplayer__playlist ul.qt-playlist li { padding: 0; } .qt-mplayer__btnspacer { display: inline-block; float: left; margin-right: 20px; } .qt-mplayer__waveform, .qt-mplayer__waveformp { position: fixed; width: 100%; background: transparent; height: 130px; z-index: 100; content: " "; display: block; bottom: -65px; left: 0; overflow: visible; pointer-events: none; width: 0%; overflow: hidden; transition: width 0.6s ease; } .qt-mplayer__waveform canvas, .qt-mplayer__waveformp canvas { width: 100%; width: 100vw; height: 100%; opacity: 0.3; position: absolute; } .qt-mplayer__waveform.loaded, .qt-mplayer__waveformp.loaded { width: 100%; width: 100vw; } .qt-mplayer__waveformp { width: 30%; overflow: hidden; } .qt-mplayer__waveformp img { width: auto; opacity: 0.3; max-width: 100vw; } .qt-play { cursor: pointer; } #qtBody.qt-mplayer-active { height: 100% !important; height: 100vh !important; overflow: hidden; } #qtBody.qt-mplayer-active .qt-mplayer__playlistcontainer { top: 0%; transition: top 0.7s ease; } @media only screen and (min-width : 768px) { .qt-mplayer__play, .qt-mplayer__volume, .qt-mplayer__cart, .qt-mplayer__prev, .qt-mplayer__next, .qt-mplayer__playlist, .qt-mplayer__cover { display: block; float: left; } .qt-mplayer__volume, .qt-mplayer__cart, .qt-mplayer__prev, .qt-mplayer__next, .qt-mplayer__cover { width: 60px; } .qt-mplayer__volume i, .qt-mplayer__cart i, .qt-mplayer__prev i, .qt-mplayer__next i, .qt-mplayer__cover i { opacity: 1; } .qt-mplayer__track { width: calc(100% - 420px); } } @media only screen and (min-width: 1201px) { .qt-mplayer__fullwaveform { position: fixed; width: 100%; height: 120px; bottom: 0; left: 0; display: block; z-index: 1000; overflow: hidden; pointer-events: none; } .qt-mplayer__fullwaveform > canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; opacity: 0.3; } .qt-mplayer__fullwaveform #qtwaveformClone { clip-path: polygon(0 0, 5% 0, 5% 100%, 0% 100%); opacity: 1; } .qt-mplayer__footerlodge { display: block; height: 130px; background: #000; position: relative; content: " "; clear: both; } .qt-mplayer__controls { border-radius: 4px; box-sizing: content-box; width: 100%; overflow: hidden; left: 20px; padding: 0; bottom: 30px; background: rgba(0, 0, 0, 0); transition: width 1.7s ease; width: calc(0% + 60px); overflow: hidden; transition-timing-function: cubic-bezier(0.2, 1, 0.2, 1); } .qt-mplayer__playlistcontainer { padding: 70px; } .qt-mplayer__playlistcontainer ul.qt-playlist li { overflow: hidden; max-height: 80px; transition: max-height .2s ease-in; } .qt-mplayer__playlistcontainer ul.qt-playlist li .qtmusicplayer-del { display: block; position: absolute; top: 50%; font-size: 30px; margin-top: -20px; cursor: pointer; right: -40px; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 2px; opacity: 0; transition: opacity .2s; } .qt-mplayer__playlistcontainer ul.qt-playlist li:not(.qt-deleted):hover { overflow: visible; } .qt-mplayer__playlistcontainer ul.qt-playlist li:not(.qt-deleted):hover .qtmusicplayer-del { opacity: 1; } .qt-mplayer__playlistcontainer ul.qt-playlist li.qt-deleted { overflow: hidden; max-height: 0px; } .qt-mplayer__playlistcontainer ul.qt-playlist li.qt-deleted:hover { overflow: hidden; max-height: 0px; } .qt-mplayer__play { border-radius: 4px; } .qt-mplayer__waves { height: 130px; pointer-events: none; } .qt-mplayer__play, .qt-mplayer__volume, .qt-mplayer__cart, .qt-mplayer__prev, .qt-mplayer__next, .qt-mplayer__playlist, .qt-mplayer__cover { display: block; float: left; } .qt-mplayer__volume, .qt-mplayer__cart, .qt-mplayer__prev, .qt-mplayer__next, .qt-mplayer__cover { width: 60px; } .qt-mplayer__volume i, .qt-mplayer__cart i, .qt-mplayer__prev i, .qt-mplayer__next i, .qt-mplayer__cover i { opacity: 1; } .qt-mplayer__track { width: calc(100% - 420px); transition: width 0.2s ease; height: 100%; } .qt-mplayer__title, .qt-mplayer__artist { width: calc(100% - 60px); opacity: 1; transition: width 0.05s, opacity 0.1s; } .qt-mplayer__time, .qt-mplayer__length { font-size: 13px; float: right; display: inline-block; } .qt-mplayer__track { display: block; position: relative; margin-top: 0; } .qt-mplayer__rowone { margin: 2px 0 2px 0; } .qt-mplayer__volume { position: relative; cursor: crosshair; width: 60px; } .qt-mplayer__volume i { position: relative; z-index: 3; } .qt-mplayer__volfill, .qt-mplayer__volcursor { display: block; width: 100%; height: 100%; content: " "; position: absolute; top: auto; left: 0; z-index: 0; bottom: 0; } .qt-mplayer__volcursor { height: 1px; background: #fff; opacity: 0.6; z-index: 1; display: none; } .qt-mplayer__volume:hover .qt-mplayer__volcursor { display: block; } .qt-mplayer__cart, .qt-mplayer__cover, .qt-mplayer__time, .qt-mplayer__length, .qt-mplayer__volume, .qt-mplayer__prev, .qt-mplayer__next, .qt-mplayer__playlistbtn, .qt-mplayer__track { opacity: 1; } .qt-mplayer__playlistcontainer { top: 100%; } .qt-mplayer__controls { width: 60px; height: 60px; overflow: hidden; word-break: keep-all; } .qt-mplayer__controls::after { display: none; content: " "; position: fixed; width: 130%; width: 130vw; height: 350px; z-index: 0; top: 350px; left: -70px; transition: top 0.3s ease; will-change: top; } .qt-mplayer__controllayer { display: block; height: 60px; border-radius: 4px; transition-delay: 0.0s; overflow: visible; background: black; width: 100%; } .qt-mplayer .qt-mplayer__play { border-radius: 4px 0 0 4px; } .qt-mplayer .qt-mplayer__playlistbtn { border-radius: 0 4px 4px 0; } .qt-mplayer::after { top: 30px; } .qt-mplayer__controls.open { width: calc(100% - 40px); } .qt-mplayer-active .qt-mplayer__playlistcontainer { top: 0%; } .qt-mplayer-active .qt-mplayer__controls { width: calc(100% - 40px); } .qt-mplayer-active .qt-mplayer__controls .qt-mplayer__controllayer { overflow: visible; background: black; } .qt-mplayer-active .qt-mplayer__controls .qt-mplayer__controllayer { width: 100%; overflow: visible; } .qt-mplayer-active .qt-mplayer__controls .qt-mplayer__play { border-radius: 4px 0 0 4px; } .qt-mplayer-active .qt-mplayer__controls .qt-mplayer__playlistbtn { border-radius: 0 4px 4px 0; } } @media only screen and (min-width: 1420px) { .qt-mplayer__controls { left: 70px; } .qt-mplayer__controls.open { width: calc(100% - 140px); } .qt-mplayer-active .qt-mplayer__controls { width: calc(100% - 140px); } } @media only screen and (min-width: 1201px) and (min-width: 1420px) { .qt-mplayer--large .qt-mplayer__controls { left: 0; bottom: 0; width: 100%; height: 70px; border-radius: 0; } .qt-mplayer--large .qt-mplayer__play, .qt-mplayer--large .qt-mplayer__volume, .qt-mplayer--large .qt-mplayer__cart, .qt-mplayer--large .qt-mplayer__prev, .qt-mplayer--large .qt-mplayer__next, .qt-mplayer--large .qt-mplayer__playlistbtn, .qt-mplayer--large .qt-mplayer__cover { width: 70px; height: 70px; line-height: 70px; border-radius: 0; } .qt-mplayer--large .qt-mplayer__track { padding-left: 20px; } .qt-mplayer--large .qt-mplayer__notification { width: 68px; height: 68px; } .qt-mplayer--large .qt-mplayer__controllayer { height: 68px; display: flex; border-radius: 0; } .qt-mplayer--large .qt-mplayer__rowone { font-size: 18px; padding-top: 12px; line-height: 19px; } .qt-mplayer--large .qt-mplayer__rowtwo { font-size: 14px; } .qt-mplayer--large .qt-mplayer__notification.active.qtmp-spinner::before, .qt-mplayer--large input:placeholder-shown + label.qt-mplayer__notification.qtmp-spinner::before { top: 18px; left: 18px; } .qt-mplayer--large .qt-mplayer__notification.active.qtmp-spinner::after, .qt-mplayer--large input:placeholder-shown + label.qt-mplayer__notification.qtmp-spinner::after { top: 10px; left: 10px; } .qt-mplayer__fullwaveform--large { height: 70px; position: absolute; z-index: 1; } #qtBody.qt-body-player-large { padding-bottom: 70px; } } /* since 2020 09 04 for ios13 */ #qtmusicplayer.qt-mplayer-mobile .qt-mplayer__controls { opacity: 0.2; transform: translateY(100px); } .qt-mplayer-enabled #qtmusicplayer.qt-mplayer-mobile .qt-mplayer__controls { opacity: 1; transform: translateY(0px); } /**! 27. form ======================================================*/ form p { margin-top: 1em; } form p:first-child { margin-top: 0; } input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea { border-radius: 0; box-sizing: border-box; margin-bottom: 0; margin-top: 0; border-width: 2px; border-color: inherit; } .input-field { padding-top: 0.5rem; } .input-field:first-child { padding-top: 0; } /* Input fields ==========================================================================*/ input.qt-input-s[type="text"] { line-height: 1.2rem; font-size: 13px; height: 1.2rem; padding: 0 8px; box-sizing: border-box; } input.qt-input-l[type="text"] { line-height: 2.25rem; font-size: 1rem; height: 2.25rem; padding: 0 1rem; margin: 0; } input.qt-input-xl[type="text"] { height: 3.357rem; line-height: 3.357rem; font-size: 1rem; padding: 0; } .qt-newsletter-form input:not([type]), .qt-newsletter-form input[type=text], .qt-newsletter-form input[type=password], .qt-newsletter-form input[type=email], .qt-newsletter-form input[type=url], .qt-newsletter-form input[type=time], .qt-newsletter-form input[type=date], .qt-newsletter-form input[type=datetime], .qt-newsletter-form input[type=datetime-local], .qt-newsletter-form input[type=tel], .qt-newsletter-form input[type=number], .qt-newsletter-form input[type=search], .qt-newsletter-form textarea.materialize-textarea { padding: 5px; box-sizing: border-box; border-width: 4px; } input.qt-input-fullwidth, .input-field .prefix ~ input.qt-input-fullwidth { width: 100%; } .input-field label { left: 0; top: 1rem; } .input-field label.active, .input-field input:placeholder-shown + label { transform: translateY(-80%); } form .col.input-field label, form .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .input-field.qt-item label, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple form .input-field.qt-item label { left: 0.75rem; } .input-field .prefix ~ input, .input-field .prefix ~ textarea { padding-left: 3rem; margin-left: 0; } .input-field .prefix { padding-top: 0.5rem; } textarea { border: 2px solid; margin-top: 4px; } /** Materialize fix for external forms */ label input[type=checkbox]:not(:checked), label input[type=checkbox]:checked, label input[type=radio] { position: initial; opacity: 1; } ::-webkit-input-placeholder { color: inherit; opacity: 0.6; } :-moz-placeholder { /* Firefox 18- */ color: inherit; opacity: 0.6; } ::-moz-placeholder { /* Firefox 19+ */ color: inherit; opacity: 0.6; } :-ms-input-placeholder { color: inherit; opacity: 0.6; } .qt-negative { /* Style Placeholders */ } .qt-negative ::-webkit-input-placeholder { color: #fff; } .qt-negative :-moz-placeholder { /* Firefox 18- */ color: #fff; } .qt-negative ::-moz-placeholder { /* Firefox 19+ */ color: #fff; } .qt-negative :-ms-input-placeholder { color: #fff; } .qt-negative .qt-newsletter-form * { border-color: #fff; } .qt-contactform-error { background: red; color: #fff; padding: 0.2rem 1rem 0.5rem 1rem; } .qt-contactform-success { background: green; color: #fff; padding: 0.2rem 1rem 0.5rem 1rem; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: inset 0 0 0 500px white !important; } input:-webkit-autofill + label { font-size: 0.8rem; -webkit-transform: translateY(-140%); transform: translateY(-140%); } input.wpcf7-submit { padding: 10px 24px; } /**! 28. booking ======================================================*/ .qt-booking-contacts h6 { opacity: 0.6; margin: 1rem 0 0 0; } .qt-booking-contacts h5 { margin: 3px 0 1rem 0; } .qt-bookingform .row { margin-top: 8px; } .qt-bookingform .input-field label { top: 0.5rem; } /**! 29. menu social ======================================================*/ .qt-menu-social { font-size: 18px; margin-left: 0; line-height: 36px; } .qt-menu-social.qt-artsocial a:not(:hover) { color: inherit; } li.qt-social-linkicon { margin: 0 2px; padding: 0; list-style: none; display: inline-block; } li.qt-social-linkicon a { display: inline-block; border-radius: 50%; border: 2px solid; width: 29px; height: 29px; line-height: 29px; vertical-align: middle; text-align: center; box-sizing: content-box; } li.qt-social-linkicon a i { color: #fff; display: block; position: relative; top: 2px; font-size: 16px; width: 29px; text-align: center; height: 29px; line-height: 29px; } .qt-scounter { font-size: 13px; margin: 0 0 0 10px; } .qt-scounter span { top: 0.1em; position: relative; } li.qt-soc-count { display: inline-block; padding: 0; list-style-type: none; float: none; box-sizing: content-box; margin: 0 0 0 5px; } li.qt-soc-count a { padding: 0; line-height: 30px; text-align: center; } li.qt-soc-count a span { line-height: 23px; display: inline-block; float: left; font-size: 11px; padding-left: 14px; margin-top: -28px; transform: rotate(-45deg) translateY(-25px) translateX(10px); position: absolute; border-bottom: 1px solid #fff; transition: opacity 0.2s; color: inherit; } li.qt-soc-count a:hover span { opacity: 1; } /**! 30. socialcounter ======================================================*/ /**! 31. related ======================================================*/ .qt-related { padding: 1rem; border: none; clear: both; } .qt-related .qt-related-item { margin-bottom: 1rem; } .qt-related .qt-related-item > a { border-radius: 4px; overflow: hidden; display: block; cursor: pointer; padding: 3rem 1rem; height: 190px; position: relative; } .qt-related .qt-related-item > a::after { content: " "; display: block; background: #000; opacity: 0.4; z-index: 1; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: opacity 0.2s; } .qt-related .qt-related-item > a:hover::after { opacity: 0; } .qt-related .qt-related-item > a h5 { position: relative; z-index: 2; margin: 2rem 0 0 0; padding: 0; } .qt-related .qt-related-item > a .qt-item-metas { text-align: center; margin: 0; padding: 0; color: #fff; position: relative; z-index: 2; } .qt-related .qt-related-item > a .qt-content-secondary.qt-item-metas { position: absolute; top: 0; left: 0; display: inline-block; width: auto; padding: 0 8px; z-index: 3; opacity: 1; } /**! 32. Visual Composer ======================================================*/ .vc_row-o-full-height { min-height: 100%; min-height: 100vh; } .qt-vc-row-container { width: 100%; overflow-x: hidden; } .vc_col-has-fill > .vc_column-inner, .vc_row-has-fill + .vc_row-full-width + .vc_row > .vc_column_container > .vc_column-inner, .vc_row-has-fill + .vc_row > .vc_column_container > .vc_column-inner, .vc_row-has-fill + .vc_vc_row > .vc_row > .vc_vc_column > .vc_column_container > .vc_column-inner, .vc_row-has-fill + .vc_vc_row_inner > .vc_row > .vc_vc_column_inner > .vc_column_container > .vc_column-inner, .vc_row-has-fill > .vc_column_container > .vc_column-inner, .vc_row-has-fill > .vc_row > .vc_vc_column > .vc_column_container > .vc_column-inner, .vc_row-has-fill > .vc_vc_column_inner > .vc_column_container > .vc_column-inner, .vc_section.vc_section-has-fill, .vc_section.vc_section-has-fill + .vc_row-full-width + .vc_section, .vc_section.vc_section-has-fill + .vc_section { padding-top: 0; } .vc_parallax .vc_parallax-inner { transition: top 0.15s; will-change: top; transform: translateX(0); } .vc_video-bg-container > .vc_column-inner { position: relative; z-index: 10; } .qt-container .qt-slickslider-outercontainer { margin-left: -0.75rem; margin-right: -0.75rem; } /**! 33. Visual Composer Vertical Menu ======================================================*/ /** Only visible in Desktop (makes no sense in mobile) */ .qt-vc_verticalmenu { display: none; } /**! 34. part event inline ======================================================*/ .qt-part-event-inline { border-bottom: 2px solid; border-color: inherit; border-left: none; border-right: none; padding: 1.4rem 0 1rem 0; } .qt-part-event-inline:first-of-type { border-top: 2px solid white; border-color: inherit; margin-top: 1rem; } .qt-part-event-inline h3 { margin: 0; } .qt-caption.qt-caption-event { margin-bottom: 0; } .qt-event-actions { padding-top: 1rem; } .qt-event-actions a { margin: 0 4px; } /**! 35. shortcode image ======================================================*/ .qt-short-image { display: inline-block; } .qt-short-image a { display: block; line-height: 0; } .qt-short-image a img { display: block; width: 100%; height: auto; } /**! 36. 404 ======================================================*/ /* = 404 ==============================================*/ .qt-404-container { min-height: 80%; min-height: 80vh; padding: 150px 0 90px 0; } .qt-404-container .qt-errorcode { text-align: center; display: block; clear: both; font-size: 4em; line-height: 1em; } /**! 37. shortcode slider ======================================================*/ .qt-material-slider { opacity: 1; transition: opacity 0.3s; position: relative; } .qt-material-slider.active, input:placeholder-shown + label.qt-material-slider { opacity: 1; } .qt-material-slider .qt-control-arrows { position: absolute; top: 1rem; left: 1rem; z-index: 500; padding-left: 0; } .qt-material-slider .qt-control-arrows a { color: #fff; } .qt-material-slider .indicators { z-index: 100; width: 100%; margin: 0; padding: 0; border-radius: 0; height: 12px; line-height: 12px; bottom: 8px; padding-right: 4px; text-align: right; max-width: 200px; right: 4px; left: auto; } .qt-material-slider .indicators li.indicator-item { border-radius: 0; height: 12px; margin: 0 0 0 4px; line-height: 12px; width: 12px; border-radius: 4px; } .qt-material-slider .indicator-item { background-color: #fff; } .qt-material-slider .slides li { background: #101010; } .qt-material-slider .slides li .qt-slidecaption { display: table; height: 100%; width: 100%; left: 0; top: 100%; transition: top 0.3s ease; } .qt-material-slider .slides li .qt-slidecaption .qt-txt { display: table-cell; vertical-align: top; padding: 80px 1.4rem 0 1.4rem; } .qt-material-slider .slides li .qt-slidecaption .qt-txt h3, .qt-material-slider .slides li .qt-slidecaption .qt-txt h4, .qt-material-slider .slides li .qt-slidecaption .qt-txt p { margin: 0; opacity: 0; transform: translateY(100px) translateZ(0); transition: transform 0.7s ease, opacity 0.6s; line-height: 1.05em; will-change: transform; } .qt-material-slider .slides li .qt-slidecaption .qt-txt h4 { transition-delay: 0.7s; margin-top: 0.5em; padding-left: 0px; } .qt-material-slider .slides li .qt-slidecaption .qt-txt h3 { transition-delay: 0.9s; } .qt-material-slider .slides li .qt-slidecaption .qt-txt p { transition-delay: 1.2s; margin-top: 1rem; } .qt-material-slider .slides li .qt-slidecaption .qt-txt .qt-link { border-bottom: 2px solid; padding-bottom: 3px; } .qt-material-slider .slides li .qt-slidecaption .qt-txt .qt-link i { top: 0em; margin-left: 4px; } .qt-material-slider .slides li .qt-slidecaption .qt-txt .qt-link:hover { filter: brightness(130%); } .qt-material-slider .slides li img { opacity: .6; transform: scale(1.3); transition: transform 0.5s; } .qt-material-slider .slides li.active img { transform: scale(1); } .qt-material-slider .slides li.active .qt-slidecaption { top: 0%; } .qt-material-slider .slides li.active .qt-slidecaption h1, .qt-material-slider .slides li.active .qt-slidecaption h2, .qt-material-slider .slides li.active .qt-slidecaption h3, .qt-material-slider .slides li.active .qt-slidecaption h4, .qt-material-slider .slides li.active .qt-slidecaption h5 { color: #fff; } .qt-material-slider .slides li.active .qt-slidecaption .qt-txt h3, .qt-material-slider .slides li.active .qt-slidecaption .qt-txt h4, .qt-material-slider .slides li.active .qt-slidecaption .qt-txt p { transform: translateY(0px) translateZ(0); opacity: 1; } .qt-template-page-visualcomposer .qt-vc-row-container > .vc_row > .wpb_column > .vc_column-inner > .wpb_wrapper > .qt-material-slider .slides li .qt-slidecaption .qt-txt { padding-top: 120px; } .qt-template-page-visualcomposer .qt-vc-row-container > .vc_row > .wpb_column > .vc_column-inner > .wpb_wrapper > .qt-material-slider .qt-control-arrows { top: 90px; left: 20px; } /**! 38. gallery ======================================================*/ .qt-kentha-gallery { display: flex; flex-wrap: wrap; } .qt-kentha-gallery a { width: 250px; margin: 0px; flex-grow: 1; line-height: 0; display: block; overflow: hidden; background: #000; overflow: hidden; position: relative; } .qt-kentha-gallery a i { display: block; color: #fff; font-size: 50px; top: 50%; position: absolute; left: 50%; margin: -20px 0 0 -20px; transition: opacity 0.3s; z-index: 3; opacity: 0; } .qt-kentha-gallery a img { opacity: 1; transition: opacity 0.3s; width: 100%; height: auto; } .qt-kentha-gallery a:hover img { opacity: 0.5; } .qt-kentha-gallery a:hover i { opacity: 1; } .qt-kentha-gallery a:nth-last-child(9) ~ div { height: 0; } .qt-kentha-gallery.qt-ss a { width: 150px; } .qt-kentha-gallery.qt-sl a { width: 390px; } .wp-caption { background: #555; color: #ccc; border: 1px solid #555; max-width: 96%; /* Image does not overflow the content area */ padding: 6px; text-align: center; margin: 1rem 0; max-width: 100%; } .wp-caption.alignnone, .wp-caption.alignleft { margin: 15px 20px 20px 0; } .wp-caption.alignright { margin: 15px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 100%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 12px; line-height: 17px; margin: 0; padding: 0 4px; color: #fff; text-align: center; line-height: 2em; } .gallery-caption { white-space: pre-line; margin-top: -18px; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption .wp-caption-text { margin-bottom: 0.8075em; margin-top: 0.8075em; } .qt-frame { display: block; content: " "; width: 100%; height: 100%; position: absolute; z-index: 4; margin: 0px; top: 0; left: 0; opacity: 0; transition: opacity 0.2s, width 0.2s, height 0.2s, margin 0.2s; } a:hover > .qt-frame { opacity: 1; width: calc(100% - 30px); height: calc(100% - 30px); margin: 15px; } /** WordPress native gallery */ .gallery { margin: -5px !important; margin-bottom: 0; } .gallery .gallery-item { padding: 5px; margin-top: 0 !important; } .gallery .gallery-item .gallery-icon { margin: 0; } .gallery .gallery-item .gallery-icon img { border: none !important; padding: 0; will-change: filter; filter: brightness(100%); transition: filter 0.3s ease; will-change: filter; } .gallery .gallery-item .gallery-icon a { line-height: 0; display: inline-block; } .gallery .gallery-item .gallery-icon a:hover img { filter: brightness(130%); } .qt-flexbin { display: flex; overflow: hidden; flex-wrap: wrap; } .qt-flexbin:after { content: ''; flex-grow: 999999999; min-width: 300px; height: 0; } .qt-flexbin > * { position: relative; display: block; height: 300px; margin: 2.5px; flex-grow: 1; } .qt-flexbin > * > img { height: 300px; object-fit: cover; max-width: 100%; min-width: 100%; vertical-align: bottom; } .qt-flexbin.flexbin-margin { margin: 2.5px; } .qt-flexbin a { background: #000; overflow: hidden; } .qt-flexbin a img { opacity: 1; transition: opacity 0.3s; } .qt-flexbin a i { display: block; color: #fff; font-size: 50px; top: 50%; position: absolute; left: 50%; margin: -20px 0 0 -20px; transition: opacity 0.2s; opacity: 0; } .qt-flexbin a:hover img { opacity: 0.5; } .qt-flexbin a:hover i { opacity: 1; } @media (max-width: 980px) { .qt-flexbin { display: flex; overflow: hidden; flex-wrap: wrap; } .qt-flexbin:after { content: ''; flex-grow: 999999999; min-width: 150px; height: 0; } .qt-flexbin > * { position: relative; display: block; height: 150px; margin: 2.5px; flex-grow: 1; } .qt-flexbin > * > img { height: 150px; object-fit: cover; max-width: 100%; min-width: 100%; vertical-align: bottom; } .qt-flexbin.flexbin-margin { margin: 2.5px; } } @media (max-width: 400px) { .qt-flexbin { display: flex; overflow: hidden; flex-wrap: wrap; } .qt-flexbin:after { content: ''; flex-grow: 999999999; min-width: 100px; height: 0; } .qt-flexbin > * { position: relative; display: block; height: 100px; margin: 2.5px; flex-grow: 1; } .qt-flexbin > * > img { height: 100px; object-fit: cover; max-width: 100%; min-width: 100%; vertical-align: bottom; } .qt-flexbin.flexbin-margin { margin: 2.5px; } } .qt-mediagallery { position: relative; margin: 0 0.05rem; } .qt-mediagallery .col, .qt-mediagallery .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .qt-item, .qt-slickslider-outercontainer .slick-slider.qt-slickslider-multiple .qt-mediagallery .qt-item { padding: 0; } .qt-mediagallery a { display: block; width: 100%; padding-top: 56%; position: relative; overflow: hidden; background: rgba(0, 0, 0, 0); transition: background 0.2s; } .qt-mediagallery a i { display: block; color: #fff; font-size: 50px; top: 50%; position: absolute; left: 50%; margin: -20px 0 0 -20px; transition: opacity 0.3s; opacity: 0; } .qt-mediagallery a .qt-t { position: absolute; color: #fff; padding: 2% 5%; z-index: 10; top: 0; width: 100%; left: 0; line-height: 1.05em; opacity: 0; transition: opacity 0.2s; } .qt-mediagallery a:hover { background: rgba(0, 0, 0, 0.5); } .qt-mediagallery a:hover i { opacity: 1; } .qt-mediagallery a:hover .qt-t { opacity: 1; } /**! 39. perspectiveCard ======================================================*/ .qt-perspectivecard-wrapper { position: relative; min-height: 350px; width: 100%; height: 100%; height: calc(100vh - 60px); top: 0; left: 0; overflow: hidden; } .qt-perspectivecard-wrapper * { box-sizing: border-box; } .qt-perspectivecard { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: transform 0.15s ease; } .qt-perspectivecard__bg2, .qt-perspectivecard__bg3, .qt-perspectivecard__bg4, .qt-perspectivecard__fg1, .qt-perspectivecard__fg2 { display: block; content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; transition: transform 0.15s ease; background-size: contain; } .qt-perspectivecard__fg1, .qt-perspectivecard__fg2 { z-index: 20; transition: transform 0.15s ease; } .qt-perspectivecard__cover { width: 280px; height: 280px; position: absolute; box-shadow: -20px 30px 30px 0 rgba(0, 0, 0, 0.54); overflow: hidden; position: absolute; top: 50%; left: 50%; position: relative; z-index: 10; max-width: 90%; margin: 0; transition: transform 0.15s ease; margin: -140px 0 0 -140px; } .qt-perspectivecard p { position: absolute; z-index: 50; top: 63%; text-align: center; display: block; width: 100%; transition: transform 0.15s ease; } .qt-perspectivecard p a i { position: relative; top: 0; } /**! 40. loadmore ======================================================*/ .qt-loadmore-container a i { animation: rotation 2s infinite linear; -webkit-animation: rotation 2s infinite linear; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(359deg); } to { -webkit-transform: rotate(0deg); } } /**! 41. qtplaces ======================================================*/ .markercontents h5 { color: #000; } .qtPlaces-container .qtPlaces-list .qtPlaces-entry a.roundbtn i { line-height: 0.9em; } .qtPlaces-container .qtPlaces-menuswitch i { top: 0; width: 100%; text-align: center; margin: 0; vertical-align: baseline; line-height: 1em; } /**! 42. ajax ======================================================*/ .qt-kenthapreloader-icon { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.2); top: 0; left: 0; z-index: 100000; opacity: 0; display: none; transition: opacity 0.2s; } .qt-kenthapreloader-icon.qt-visible { display: block; opacity: 1; } .qt-kenthapreloader-icon .preloader-wrapper { position: absolute; top: 50%; left: 50%; margin: -32px 0 0 -32px; } .qt-kenthapreloader-icon .preloader-wrapper .spinner-layer { border-color: #fff; } .qt-kenthapreloader-window { position: fixed; z-index: 99999999; width: 100%; height: 100%; top: 0; left: 0%; overflow: hidden; transition-delay: 2s; transition: left 0.5s; } .qt-kenthapreloader-window::after { display: block; content: " "; width: 100%; height: 100%; top: 0; left: 0; background: #000; transition: transform 4s ease; transform: translateX(0%); transition-timing-function: cubic-bezier(0.1, 1, 0.8, 1); transition-delay: 0.8s; } .qt-kenthapreloader-window .qt-kenthapreloader-icon { transition-delay: 0.3s; transform: scale(1); transition: transform 0.2s; } .qt-kenthapreloader-window.qt-done { left: -100%; } .qt-kenthapreloader-window.qt-done::after { transform: translateX(-100%); } .qt-kenthapreloader-window.qt-done .qt-kenthapreloader-icon { transform: scale(0); } .qt-body-preloading > * { opacity: 0; } .qt-body-preloading > * .qt-kenthapreloader-window { display: block; } /**! 43. tablet ======================================================*/ @media only screen and (min-width : 768px) and (max-width : 1200px) { /** Part archive item */ .qt-part-archive-item .qt-header .qt-headings { padding: 0.5rem 1.5rem; } .qt-footer-bottom .qt-menu-social { padding-top: 20px; } .qt-mplayer__btnspacer { display: none; } .qt-perspectivecard-wrapper { height: calc(100vh - 60px); } .qt-main-contents .qt-pageheader { height: calc(100% - 140px); height: calc(100vh - 140px); min-height: auto; text-align: center; display: table; width: 100%; vertical-align: middle; padding-top: 6%; } .qt-main-contents .qt-pageheader .qt-item-metas { text-align: center; } .qt-main-contents .qt-pageheader__in { display: table-cell; vertical-align: middle; will-change: padding; } .qt-main-contents .qt-pageheader__in img { max-width: 80%; margin: 0 auto; } #qtBody.qt-user-logged .qt-menubar { top: 32px; } #qtBody.qt-user-logged .qt-mobilemenu { top: 32px; } #qtBody.qt-user-logged .qt-mobilemenu.qt-down { top: -70px; } #qtBody.qt-user-logged .qt-mobilemenu.qt-up { top: 32px; } /** iPad ======================================================================================== */ .is_ipad .qt-layer-bottom { top: 160px; height: calc(100% - 60px); } } /**! 44. tablet ======================================================*/ /* General link styles */ .qt-textfx-wrap { margin: 0; } .qt-txtfx { outline: none; text-decoration: none; position: relative; line-height: 2; color: #9e9ba4; display: inline-block; z-index: 2; height: 2; overflow: hidden; margin: 0; } /* tokyo ==================================================================*/ .qt-txtfx--tokyo { text-transform: uppercase; overflow: hidden; line-height: 0.9; color: #c5c2b8; } .qt-txtfx--tokyo.qt-txtfxstart { color: #c5c2b8; } .qt-txtfx--tokyo::after { content: ''; position: absolute; height: 16px; width: 100%; top: 50%; margin-top: -8px; right: 0; background: #F9F9F9; transform: translate3d(-100%, 0, 0); transition: transform 0.4s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .qt-txtfx--tokyo.qt-txtfxstart::after { transform: translate3d(102%, 0, 0); } .qt-txtfx--tokyo::before { content: attr(data-letters); position: absolute; z-index: 2; overflow: hidden; color: #424242; white-space: nowrap; width: 0%; transition: width 0.4s 0.3s; } .qt-txtfx--tokyo.qt-txtfxstart::before { width: 100%; } /* london ==================================================================*/ .qt-txtfx--london { padding: 0 10px 20px; transition: color 0.5s; } .qt-txtfx--london.qt-txtfxstart { color: #1e1a1b; } .qt-txtfx--london::before { content: ''; position: absolute; height: 2px; width: 120%; top: 50%; margin-top: -18px; left: -10%; z-index: -1; background: #F9F9F9; transform: rotate3d(0, 0, 1, 45deg) scale3d(0, 1, 1); transition: transform 0.5s; } .qt-txtfx--london.qt-txtfxstart::before { transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); } .qt-txtfx--london span { position: absolute; right: 15px; color: #e53369; bottom: 0; opacity: 0; transform: translate3d(-10px, -10px, 0); transition: transform 0.5s, opacity 0.5s; } .qt-txtfx--london.qt-txtfxstart span { opacity: 1; transform: translate3d(0, 0, 0); } /* paris ==================================================================*/ .qt-txtfx--paris { text-transform: uppercase; color: #3A4945; padding: 0 0 0.125em; } .qt-txtfx--paris::before, .qt-txtfx--paris::after { content: ''; width: 100%; height: 3px; z-index: -1; background: #3A4945; position: absolute; transform: scale3d(0, 1, 1); transition: transform 0.5s; } .qt-txtfx--paris::before { right: 0; top: 0; transform-origin: 100% 50%; } .qt-txtfx--paris::after { left: 0; bottom: 0; transform-origin: 0 50%; } .qt-txtfx--paris.qt-txtfxstart::before, .qt-txtfx--paris.qt-txtfxstart::after { transform: scale3d(1, 1, 1); } .qt-txtfx--paris span { position: relative; transition: color 0.5s; } .qt-txtfx--paris.qt-txtfxstart span { color: transparent; } .qt-txtfx--paris span::before, .qt-txtfx--paris span::after { position: absolute; color: #fff; opacity: 0; transition: transform 0.5s, opacity 0.5s; } .qt-txtfx--paris span::before { content: attr(data-letters-l); left: 0; transform: translate3d(-5px, 0, 0); } .qt-txtfx--paris span::after { content: attr(data-letters-r); right: 0; transform: translate3d(5px, 0, 0); } .qt-txtfx--paris.qt-txtfxstart span::before, .qt-txtfx--paris.qt-txtfxstart span::after { opacity: 1; transform: translate3d(0, 0, 0); } /* ibiza ==================================================================*/ .qt-txtfx--ibiza { overflow: hidden; padding: 0 10px; line-height: 1.2em; color: #242424; } .qt-txtfx--ibiza.qt-txtfxstart { color: #242424; } .qt-txtfx--ibiza::after { content: ''; position: absolute; height: 100%; width: 100%; top: 0; right: 0; z-index: -1; background: #242424; transform: translate3d(101%, 0, 0); transition: transform 0.5s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .qt-txtfx--ibiza.qt-txtfxstart::after { transform: translate3d(0, 0, 0); } .qt-txtfx--ibiza span { display: block; position: relative; } .qt-txtfx--ibiza span::before { content: attr(data-letters); position: absolute; color: #fff; left: 0; overflow: hidden; white-space: nowrap; width: 0%; transition: width 0.5s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .qt-txtfx--ibiza.qt-txtfxstart span::before { width: 100%; } /* newyork ==================================================================*/ .qt-txtfx--newyork { color: #81a689; transition: color 0.5s 0.25s; overflow: hidden; } .qt-txtfx--newyork.qt-txtfxstart { transition: none; color: transparent !important; } .qt-txtfx--newyork::before { content: ''; width: 100%; height: 6px; margin: -3px 0 0 0; background: #fff; position: absolute; left: 0; top: 50%; transform: translate3d(-100%, 0, 0); transition: transform 0.4s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .qt-txtfx--newyork.qt-txtfxstart::before { transform: translate3d(101%, 0, 0); } .qt-txtfx--newyork span { position: absolute; height: 50%; width: 100%; left: 0; top: 0; overflow: hidden; } .qt-txtfx--newyork span::before { content: attr(data-letters); color: red; position: absolute; left: 0; width: 100%; color: #fff; transition: transform 0.5s; } .qt-txtfx--newyork span:nth-child(2) { top: 50%; } .qt-txtfx--newyork span:first-child::before { top: 0; transform: translate3d(0, 100%, 0); } .qt-txtfx--newyork span:nth-child(2)::before { bottom: 0; transform: translate3d(0, -100%, 0); } .qt-txtfx--newyork.qt-txtfxstart span::before { transition-delay: 0.3s; transform: translate3d(0, 0, 0); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } /* oslo ==================================================================*/ .qt-txtfx--oslo { color: #D3D3D3; text-transform: uppercase; overflow: hidden; padding: 0 0 10px; } .qt-txtfx--oslo::before { content: ''; position: absolute; height: 100%; width: 100%; border-width: 2px 0; border-color: #282828; border-style: solid; left: 0; transform: translate3d(-101%, 0, 0); transition: transform 0.5s; } .qt-txtfx--oslo.qt-txtfxstart::before { transform: translate3d(0, 0, 0); } .qt-txtfx--oslo span { display: inline-block; position: relative; transform: perspective(1000px) rotate3d(0, 1, 0, 0deg); transition: transform 0.5s, color 0.5s; } .qt-txtfx--oslo.qt-txtfxstart span { color: #1e1a1b; transform: perspective(1000px) rotate3d(0, 1, 0, 360deg); } .qt-txtfx--oslo span:nth-child(4), .qt-txtfx--oslo.qt-txtfxstart span:first-child { transition-delay: 0s; } .qt-txtfx--oslo span:nth-child(3), .qt-txtfx--oslo.qt-txtfxstart span:nth-child(2) { transition-delay: 0.1s; } .qt-txtfx--oslo span:nth-child(2), .qt-txtfx--oslo.qt-txtfxstart span:nth-child(3) { transition-delay: 0.2s; } .qt-txtfx--oslo span:first-child, .qt-txtfx--oslo.qt-txtfxstart span:nth-child(4) { transition-delay: 0.3s; } /**! 45. ContactForm 7 ======================================================*/ #qtBody .wpcf7 select { display: initial; background: #fff; color: #222; height: auto; } #qtBody .wpcf7 textarea { padding: 1.4rem; min-height: 5rem; } #qtBody .wpcf7 [type="checkbox"]:not(:checked), #qtBody .wpcf7 [type="checkbox"]:checked, #qtBody .wpcf7 label input[type=checkbox]:not(:checked), #qtBody .wpcf7 label input[type=checkbox]:checked, #qtBody .wpcf7 label input[type=radio], #qtBody .wpcf7 [type="radio"]:not(:checked), #qtBody .wpcf7 [type="radio"]:checked { position: initial; left: 0; opacity: 1; } #qtBody .wpcf7 span.wpcf7-list-item { margin: 0 1rem 0 0; } /**! 46. Chart voting ======================================================*/ .qt-chartvote { display: table-cell; width: 50px; margin: 0; padding: 0; text-align: center; line-height: 20px; height: 100%; background: white; vertical-align: bottom; } .qt-chartvote i { font-size: 25px; display: inline; position: normal; float: none; margin: 0; line-height: 25px; top: 0; padding: 0; font-size: 45px; } .qt-chartvote i:before { line-height: 0; } .qt-chartvote-link, .qt-chartvote-number { display: block; width: 100%; clear: both; text-align: center; padding: 4px 0; height: 33%; vertical-align: middle; } .qt-chartvote-number { line-height: 1.5em; background: #fff; color: #222; font-size: 12px; } .qt-chartvote-link { background: #fff; color: #7bc71e; } .qt-chartvote-link:hover { background: #fff; color: #8cff00; } .qt-chartvote .qt-down { color: red; } .qt-chartvote .qt-down:hover { color: #ce0000; } /**! 46. Social icons ======================================================*/ .qt-short-socialicon i { font-size: 1.7em !important; vertical-align: middle !important; } .qt-short-socialicon.qt-big-icons { font-size: 2.5em; } /*# sourceMappingURL=qt-main.css.map */