/*#main > .header, #main > .main, #page #main > .main{display:block !important;} #main .header .col{display:block !important; float:left !important}*/ /*#main .header {width:100%} #main .header .col{width:25% !important; background-color:red; height:100px} #main .header .col img{display:none}*/ /** * Eric Meyer's Reset CSS v2.0 (https://meyerweb.com/eric/tools/css/reset/) * https://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*-- end: reset css --*/ /*! jQuery UI - v1.11.1 - 2014-09-17 * https://jqueryui.com * Includes: core.css, draggable.css, resizable.css, button.css, datepicker.css, dialog.css, menu.css, selectmenu.css * Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */ .ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-button{display:inline-block;position:relative;padding:0;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2.2em}button.ui-button-icon-only{width:2.4em}.ui-button-icons-only{width:3.4em}button.ui-button-icons-only{width:3.7em}.ui-button .ui-button-text{display:block;line-height:normal}.ui-button-text-only .ui-button-text{padding:.4em 1em}.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text{padding:.4em;text-indent:-9999999px}.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 1em .4em 2.1em}.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 2.1em .4em 1em}.ui-button-text-icons .ui-button-text{padding-left:2.1em;padding-right:2.1em}input.ui-button{padding:.4em 1em}.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon{position:absolute;top:50%;margin-top:-8px}.ui-button-icon-only .ui-icon{left:50%;margin-left:-8px}.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary{left:.5em}.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary{right:.5em}.ui-buttonset{margin-right:7px}.ui-buttonset .ui-button{margin-left:0;margin-right:-.3em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-dialog{overflow:hidden;position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:20px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-se{width:12px;height:12px;right:-5px;bottom:-5px;background-position:16px 16px}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:none}.ui-menu .ui-menu{position:absolute}.ui-menu .ui-menu-item{position:relative;margin:0;padding:3px 1em 3px .4em;cursor:pointer;min-height:0;list-style-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")}.ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-selectmenu-menu{padding:0;margin:0;position:absolute;top:0;left:0;display:none}.ui-selectmenu-menu .ui-menu{overflow:auto;overflow-x:hidden;padding-bottom:1px}.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup{font-size:1em;font-weight:bold;line-height:1.5;padding:2px 0.4em;margin:0.5em 0 0 0;height:auto;border:0}.ui-selectmenu-open{display:block}.ui-selectmenu-button{display:inline-block;overflow:hidden;position:relative;text-decoration:none;cursor:pointer}.ui-selectmenu-button span.ui-icon{right:0.5em;left:auto;margin-top:-8px;position:absolute;top:50%}.ui-selectmenu-button span.ui-selectmenu-text{text-align:left;padding:0.4em 2.1em 0.4em 1em;display:block;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /*-- end: jQuery UI --*/ /*! jQuery UI - v1.11.1 - 2014-09-17 * https://jqueryui.com * Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */ .ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-button{display:inline-block;position:relative;padding:0;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2.2em}button.ui-button-icon-only{width:2.4em}.ui-button-icons-only{width:3.4em}button.ui-button-icons-only{width:3.7em}.ui-button .ui-button-text{display:block;line-height:normal}.ui-button-text-only .ui-button-text{padding:.4em 1em}.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text{padding:.4em;text-indent:-9999999px}.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 1em .4em 2.1em}.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 2.1em .4em 1em}.ui-button-text-icons .ui-button-text{padding-left:2.1em;padding-right:2.1em}input.ui-button{padding:.4em 1em}.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon{position:absolute;top:50%;margin-top:-8px}.ui-button-icon-only .ui-icon{left:50%;margin-left:-8px}.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary{left:.5em}.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary{right:.5em}.ui-buttonset{margin-right:7px}.ui-buttonset .ui-button{margin-left:0;margin-right:-.3em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-dialog{overflow:hidden;position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:20px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-se{width:12px;height:12px;right:-5px;bottom:-5px;background-position:16px 16px}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:none}.ui-menu .ui-menu{position:absolute}.ui-menu .ui-menu-item{position:relative;margin:0;padding:3px 1em 3px .4em;cursor:pointer;min-height:0;list-style-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")}.ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-selectmenu-menu{padding:0;margin:0;position:absolute;top:0;left:0;display:none}.ui-selectmenu-menu .ui-menu{overflow:auto;overflow-x:hidden;padding-bottom:1px}.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup{font-size:1em;font-weight:bold;line-height:1.5;padding:2px 0.4em;margin:0.5em 0 0 0;height:auto;border:0}.ui-selectmenu-open{display:block}.ui-selectmenu-button{display:inline-block;overflow:hidden;position:relative;text-decoration:none;cursor:pointer}.ui-selectmenu-button span.ui-icon{right:0.5em;left:auto;margin-top:-8px;position:absolute;top:50%}.ui-selectmenu-button span.ui-selectmenu-text{text-align:left;padding:0.4em 2.1em 0.4em 1em;display:block;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /*-- end: jQuery UI --*/ /*-- simply scroll --*/ /* * simplyScroll 2 - a scroll-tastic jQuery plugin * * https://logicbox.net/jquery/simplyscroll * * Copyright (c) 2009-2012 Will Kelly - https://logicbox.net * * Dual licensed under the MIT and GPL licenses. * * Last revised: 31/01/2012 * */ /* Default/Master classes Example markup format (for horizontal scroller) Note all DIVs are generated and should not be hard-coded
*/ .simply-scroll-container { /* Container DIV - automatically generated */ position: relative; } .simply-scroll-clip { /* Clip DIV - automatically generated */ position: relative; overflow: hidden; } .simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */ overflow: hidden; margin: 0; padding: 0; list-style: none; } .simply-scroll-list li { padding: 0; margin: 0; list-style: none; } .simply-scroll-list li img { border: none; display: block; } .simply-scroll-btn { position: absolute; background-image: url(../img/buttons.png); width: 42px; height: 44px; z-index:3; cursor: pointer; } .simply-scroll-btn-left { left: 6px; bottom: 6px; background-position: 0 -44px; } .simply-scroll-btn-left.disabled { /*background-position: 0 0 !important;*/ } .simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus { background-position: 0 -88px; } .simply-scroll-btn-right { right: 6px; bottom: 6px; background-position: -84px -44px; } .simply-scroll-btn-right.disabled { /*background-position: -84px 0 !important;*/ } .simply-scroll-btn-right:hover, .simply-scroll-btn-right:focus { background-position: -84px -88px; } .simply-scroll-btn-up { right: 6px; top: 6px; background-position: -126px -44px; } .simply-scroll-btn-up.disabled { background-position: -126px 0 !important; } .simply-scroll-btn-up:hover, .simply-scroll-btn-up:focus { background-position: -126px -88px; } .simply-scroll-btn-down { right: 6px; bottom: 6px; background-position: -42px -44px; } .simply-scroll-btn-down.disabled { background-position: -42px 0 !important; } .simply-scroll-btn-down:hover, .simply-scroll-btn-down:focus { background-position: -42px -88px; } .simply-scroll-btn-pause { right: 6px; bottom: 6px; background-position: -168px -44px; } .simply-scroll-btn-pause:hover, .simply-scroll-btn-pause:focus { background-position: -168px -88px; } .simply-scroll-btn-pause.active { background-position: -84px -44px; } .simply-scroll-btn-pause.active:hover, .simply-scroll-btn-pause.active:focus { background-position: -84px -88px; } /* Custom class modifications - override classees .simply-scroll is default */ .simply-scroll { /* Customisable base class for style override DIV */ width: 367px; height: 90px; margin-bottom: 1em; } .simply-scroll .simply-scroll-clip { width: 367px; height: 200px; } .simply-scroll .simply-scroll-list {} .simply-scroll .simply-scroll-list li { float: left; width: 290px; height: 200px; } .simply-scroll .simply-scroll-list li img {} .simply-scroll .simply-scroll-btn {} .simply-scroll .simply-scroll-btn-left { width:17px; height:30px; background-image:url(../img/lm_sprite-x.png); background-position:0 -996px; top:50%; margin-top:-15px; } .simply-scroll .simply-scroll-btn-left.disabled { -webkit-opacity:0.3; -moz-opacity:0.3; -ms-opacity:0.3; -o-opacity:0.3; opacity:0.3; } .simply-scroll .simply-scroll-btn-left:hover {} .simply-scroll .simply-scroll-btn-right { width:17px; height:30px; background-image:url(../img/lm_sprite-x.png); background-position:0 -1026px; top:50%; margin-top:-15px; } .simply-scroll .simply-scroll-btn-right.disabled { -webkit-opacity:0.3; -moz-opacity:0.3; -ms-opacity:0.3; -o-opacity:0.3; opacity:0.3; } .simply-scroll .simply-scroll-btn-right:hover {} .simply-scroll .simply-scroll-btn-up {} .simply-scroll .simply-scroll-btn-up.disabled {} .simply-scroll .simply-scroll-btn-up:hover {} .simply-scroll .simply-scroll-btn-down {} .simply-scroll .simply-scroll-btn-down.disabled {} .simply-scroll .simply-scroll-btn-down:hover {} /* Vertical scroller example */ .vert { /* wider than clip to position buttons to side */ width: 340px; height: 400px; margin-bottom: 1.5em; } .vert .simply-scroll-clip { width: 290px; height: 400px; } .vert .simply-scroll-list {} .vert .simply-scroll-list li { width: 290px; height: 200px; } .vert .simply-scroll-list li img {} .vert .simply-scroll-btn {} .vert .simply-scroll-btn-up { /* modified btn pos */ right: 0; top: 0; } .vert .simply-scroll-btn-up.disabled {} .vert .simply-scroll-btn-up:hover {} .vert .simply-scroll-btn-down { /* modified btn pos */ right: 0; top: 52px; } .vert .simply-scroll-btn-down.disabled {} .vert .simply-scroll-btn-down:hover {} /* NOTE left-right classes wouldn't be needed on vertical scroller */ /*-- end: simply scroll --*/ /* Basic jQuery Slider essential styles */ ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;} li.bjqs-slide{position:absolute; display:none;} ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;} ul.bjqs-controls.v-centered li a{position:absolute;} ul.bjqs-controls.v-centered li.bjqs-next a{right:0;} ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;} ol.bjqs-markers,ul.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;} ol.bjqs-markers.h-centered,ul.bjqs-markers.h-centered{text-align: center;} ol.bjqs-markers li,ul.bjqs-markers li{display:inline;} ol.bjqs-markers li a,ul.bjqs-markers li a{display:inline-block;} p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;} /*-- end: basic jQuery slider --*/ /*-- font face --*/ @font-face { font-family: 'Kozuka Gothic Pro EL'; src: url('../fonts/Kozuka.eot'); src: url('../fonts/Kozuka.eot?#iefix') format('embedded-opentype'), url('../fonts/Kozuka.woff2') format('woff2'), url('../fonts/Kozuka.woff') format('woff'), url('../fonts/Kozuka.ttf') format('truetype'), url('../fonts/Kozuka.svg#myriad_pro_light') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'caviar_de_dianeregular'; src: url('../fonts/Caviar_de_Diane-webfont.eot'); src: url('../fonts/Caviar_de_Diane-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Caviar_de_Diane-webfont.woff2') format('woff2'), url('../fonts/Caviar_de_Diane-webfont.woff') format('woff'), url('../fonts/Caviar_de_Diane-webfont.ttf') format('truetype'), url('../fonts/Caviar_de_Diane-webfont.svg#caviar_de_dianeregular') format('svg'); font-weight: normal; font-style: normal; } /*-- end: font face --*/ /*-- GLOBAL --*/ *, *:before, *:after, .freeze .defrost, .freeze .defrost *, .frozen .defrost, .frozen .defrost *{ -webkit-transition-property:all; -moz-transition-property:all; -ms-transition-property:all; -o-transition-property:all; transition-property:all; -webkit-transition-duration:500ms; -moz-transition-duration:500ms; -ms-transition-duration:500ms; -o-transition-duration:500ms; transition-duration:500ms; } .freeze, .frozen, .frozen *, .frozen:before, .frozen:after, .frozen *:before, .frozen *:after, .freeze:before, .freeze:after, .ui-button .ui-button *, .ui-button:before, .ui-button:after, .ui-selectmenu-menu, .ui-autocomplete{ -webkit-transition-property:none; -moz-transition-property:none; -ms-transition-property:none; -o-transition-property:none; transition-property:none; } body { /*ENLEVER LE FOND IMAGE*/ /* background-image: url("../img/bg_img_1.jpg"); background-size: cover; background-attachment:fixed;*/ overflow-y:scroll; } body,html,#page{ font-family:Arial, Helvetica, sans-serif; font-size:10px; /*height:100%; position:relative; -05.12.2014*/ } .inner{ width:auto; /*max-width:1200px;*/ margin:0 auto; padding:0 10px; } .breadcrumbs{ border-bottom: 1px solid #969694; font-size: 1.4em; font-weight: bold; line-height: 2em; margin-bottom: 32px; margin-top:1em; } .breadcrumbs.background--dark{ color:white; border-bottom: 1px solid white; } .breadcrumbs a{ text-decoration:none; color:#333333; font-weight:normal; } .breadcrumbs a:first-child{ color:#666666; } .breadcrumbs.background--dark a, .breadcrumbs.background--dark a:first-child{ color:white; } .breadcrumbs a:after { content: ">"; margin-left: 5px; margin-right: 5px; } .hide{ display:none; } h1{ font-size:36px; font-family:'Kozuka Gothic Pro EL',Arial; color:#2C2D2E; /*margin-bottom:32px;*/ text-transform:uppercase; font-weight:normal; } .table, #main > .inner > div.table{ display:table; border-collapse:collapse; width:100%; } .table .col, #main > .inner > div.table .leftCol, #main > .inner > div.table .rightCol{ /*display:table-cell;*/ vertical-align:top; } #main > .inner > div.table .leftCol{ min-width:397px; width:507px; } #product #main > .inner > div.table .leftCol, #product #main > .inner > div.table .rightCol{ width: 48%; } .moreStyle figure {padding: 0 5px;} .deltaStyle figure img {width: 100% !important;height: auto !important;} .inOther figure img {max-width: 100% !important;} @media screen and (max-width:1024px){ #product #main > .inner > div.table{ display: block; } #product #main > .inner > div.table .leftCol, #product #main > .inner > div.table .rightCol{ width: auto; display: block; } } #product #page #main { border-spacing: 0; } #product #page #main .header.inner{ padding: 0; } #product #main > .inner > div.table .leftCol{ } #product #main > .inner > div.table .rightCol{ } button{ cursor:pointer; vertical-align:middle; } #page.disabled{ position:fixed; width:100%; z-index:0; } .blackBoard{ background-image: url("../img/bg_black-25.png"); text-align: center; } .btn{ } img{ color: black; font-size: 1.2em; text-align: center; } /*-- magic blocs --*/ .bloc { position:relative; overflow:hidden; } .bloc:before { position:absolute; top:0; left:0; right:0; bottom:0; content:""; background-image: url("../img/bg_grey-75.png"); z-index: 1; } .bloc:before/*, .bloc figcaption*/{ -webkit-opacity:0; -moz-opacity:0; -ms-opacity:0; -o-opacity:0; opacity:0; } .bloc figcaption{ position:absolute; top:0; left:0; right:0; bottom:0; z-index: 2; } .bloc.active figcaption{ position:absolute; top:0; left:0; right:0; bottom:0; } .bloc.active:before, .bloc.active figcaption{ -webkit-opacity:1; -moz-opacity:1; -ms-opacity:1; -o-opacity:1; opacity:1; } .bloc .title{ left: 0; top:0; bottom:0; right:0; position: absolute; text-align:center; /*display:table;*/ width:100%; height:100%; font-family:'Kozuka Gothic Pro EL',Arial; font-weight:bold; font-size:3.2em; font-size: 2vw; /*font-size: 16px !important;*/ } .block .title{ bottom: 6%; height: auto; left: 3%; position: absolute; right: 3%; top: auto; width: auto; text-align: center; font-size:3.2em; font-size: 2vw; } /* NEW BLOC*/ .otherBloc{display: inline-block;height: 0;width: 49%;padding-bottom: 48.6%; vertical-align: top;} .deltaStyle {width:100% !important; margin-bottom:4px;} .otherStyle{position:relative; left:11px;} .inOther{margin-right:2px;} .rightBlocBLigneColA .imgWrap img{max-width: 125px;} .moreStyle {background-color: #b2b2b2; position: relative; overflow: hidden; float: right; width: 49%; padding-bottom: 19.8%;} .moreStyle figure img{max-width: 100%; height: auto !important;} .moreStyle .title a{bottom: 3%;height: auto;left: 3%;position: absolute;right: 3%;top: auto;width: auto;text-align: center;font-size: 16px; font-weight: normal;} .fr .addpads{padding-bottom: 5.5%; margin-bottom: 4.5% !important;} .an .addpads, .al .addpads, .it .addpads{padding-bottom: 5.5%; margin-bottom: 2.5% !important;} .blocright {/*background:#b2b2b2; */text-align: center; padding-bottom: 5.8%;} .blocright h2 {padding: 10px 0;} .styleLink {line-height: 150%; color: #ffffff; text-transform: uppercase; text-decoration: underline; text-align: center; font-family: 'Kozuka Gothic Pro EL',Arial; font-size: 16px; letter-spacing: 1.3px;} .blocResp {display: none; background: pink;} /*---/NEW BLOC***/ body#home .center .bloc .title, body#home .center .block .title{ font-size:3em; font-size: 1.6vw; /*font-size:16px;*/ } body#home .right .bloc .title, body#home .right .block .title{ /* font-size:3em; font-size: 1.8vw; */ font-size:16px; } body#home .right #other .bloc .title, body#home .right #other .block .title{ /* font-size:3em; font-size: 1vw; */ } body#home.al .right #other .bloc .title a span, body#home.al .right #other .block .title a span{ -ms-word-break: break-all; word-break: break-all; } .block .title a{ text-decoration: none; color: white; font-family:'Kozuka Gothic Pro EL',Arial; text-transform: uppercase; } #other .block .title a{ text-transform:none; } .bloc .title a{ display:block; } .bloc figcaption .title a { bottom: 0; left: 0; position: absolute; right: 0; text-decoration: none; text-transform: uppercase; top: 0; vertical-align: middle; } .bloc figcaption .title a span{ border-bottom: 1px solid white; color: white; display: block; left: 5%; line-height: 150%; position: absolute; right: 5%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); max-width: 100%; } /*-- end: magic blocs --*/ /*-- END: GLOBAL --*/ /*-- espace client --*/ #externalFrame.popin{ left: 50%; max-width: none; position: absolute !important; right: 0; top: 20px; width: auto; width: 980px; padding-bottom: 0; transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); } #externalFrame_login.popin{ left: 50%; max-width: none; position: absolute !important; right: 0; top: 20px; width: auto; width: 980px; padding-bottom: 0; transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); } #externalFrame.popin iframe{ width: 100%; /* height: 440px!important;*/ display: block; overflow: hidden; } #externalFrame_login.popin iframe{ width: 100%; /* height: 100px!important; */ display: block; overflow: hidden; } #externalFrame.popin a.close { background-image: url("../img/lm_sprite-x.png"); color: black; font-size: 1.2em; height: 28px; position: absolute; /*right: 5px;*/ right: 0; top: 5px; width: 28px; background-position: 0 -892px; } #externalFrame_login.popin a.close { background-image: url("../img/lm_sprite-x.png"); color: black; font-size: 1.2em; height: 28px; position: absolute; /*right: 5px;*/ right: 0; top: 5px; width: 28px; background-position: 0 -892px; } #externalFrame.popin a.close:hover { background-position: -28px -892px; } #externalFrame_login.popin a.close:hover { background-position: -28px -892px; } /*-- end: espace client --*/ /*-- form --*/ .form p.line{ margin-bottom:10px; } .form p.line{ } .form p.line > label{ display: inline-block; display:inline!ie7; zoom:1; color: #2c2d2e; font-size: 1.4em; width: 35%; text-align:right; vertical-align:top; height:34px; line-height:34px; } .form p.line > label:after{ display: inline-block; display:inline!ie7; zoom:1; width:20px; content:"" } .form p.line > .inputWrap{ display: inline-block; display:inline!ie7; zoom:1; width: 55%; vertical-align:top; } .form p.line input[type="text"], .form p.line input[type="password"], .form p.line input[type="email"], .form p.line textarea{ background: none repeat scroll 0 0 white; border: medium none; height: 34px; padding-left: 10%; padding-right: 10%; vertical-align: middle; width: 80%; } .form p.line textarea{ padding-top: 10px; height:64px; } .form button{ background-color: #444546; border: medium none; color: white; cursor: pointer; font-size: 16px; margin-left: auto; padding: 10px 20px; text-transform: uppercase; } .form button:hover{ background-color: #2c2d2e; } /*-- end: form --*/ /*-- .popup --*/ .popup{ display:none; -webkit-transition:none; -moz-transition:none; -ms-transition:none; -o-transition:none; transition:none; position:relative; z-index:1; height:100%; width:100%; /*background-image:url("../img/bg_black-80.png");*/ } .popup:before{ background-image: url("../img/bg_black-80.png"); bottom: 0; content: ""; display: block; height: 100%; left: 0; position: fixed; right: 0; } .popin{ display:none; } .popin .header{ display:none; display:block; font-size:1.6em; line-height:130%; background-color:#444444; color:white; font-family: 'ralewaybold'; position:relative; text-align:center; } .popin .header .close{ position:absolute; right:0; /*background-image: url("../img/ymmf_sprite.png");*/ width:27px; height:27px; background-position:-83px -88px; margin-top: -13px; position: absolute; right: 7px; top: 50%; width: 27px; } .popup .popin .header > a.close { /* background-image: url("../img/lm_sprite-x.png");*/ background-position: 0 -892px; } .popup .popin .header > a.close:hover { background-position: -28px -892px; } .popin .main, .popin .header, .popin .footer{ padding:15px; } .popin .footer{ text-align:center; } .popin .footer button+button{ margin-left: 20px; } .popup .popin{ background: none repeat scroll 0 0 #F1EFED; display: block; margin: 0 auto; position: relative; top: 20px; -webkit-box-shadow: 0 0 20px; -moz-box-shadow: 0 0 20px; -ms-box-shadow: 0 0 20px; -o-box-shadow: 0 0 20px; box-shadow: 0 0 20px; /*behavior:url("PIE.htc");*/ max-width:480px; } .popup .popin .header h2{ padding:0; font-family:2em; font-family:arial; } .popup .popin .header { padding-bottom: 10px; padding-top: 10px; } /*-- end: .popup --*/ /*-- HEADER --*/ body #inner > header{ position:relative; z-index:3; } body #inner > header:before{ display:block; background-image:url("../img/bg_white-80.png"); /*height:3px;*/ content:""; } body #inner > header .inner{ bottom: 0; box-sizing: border-box; padding-right: 0; position: absolute; text-align: right; width: 100%; z-index: 4; } body #inner > header #menu2 .inner{ position: static; padding: 0 10px; } body#collection #inner > header .inner{ padding-right: 10px; } body #inner > header ul#lang{ display:inline-block; display:inline!ie7; zoom:1; text-align:left; color:black; font-size:1.4em; position:relative; vertical-align: bottom; } body #inner > header ul#lang:after{ position:absolute; right:16px; top:11px; border:solid 5px transparent; border-top-color:white; content:""; } body #inner > header ul#lang ul { display: none; position: absolute; width: 100%; } body #inner > header ul#lang ul li:hover{ background-image:url("../img/bg_grey-75.png"); } body #inner > header ul#lang ul li:hover a{ color:white; } body #inner > header ul#lang:hover ul { /*display: block;*/ } body #inner > header ul#lang li{ /*background-image: url("../img/bg_black-75.png");*/ } body #inner > header ul#lang li.active{ display:none; } body #inner > header ul#lang li a{ display:inline-block; display:inline!ie7; zoom:1; color: white; display: inline-block; min-width: 100px; padding: 6px 38px 9px 13px; text-decoration: none; padding-top: 0; padding-bottom: 0; height: 31px; line-height: 31px; } body #inner > header ul#lang li a:before{ display:inline-block; display:inline!ie7; zoom:1; width:22px; height:16px; content:""; background-image:url(../img/casal_sprite-x.png); vertical-align: middle; margin-right:13px; } body #inner > header ul#lang li.en > a:before{ background-position:0 0; } body #inner > header ul#lang li.fr > a:before{ background-position:0 -16px; } body #inner > header ul#lang li.it > a:before{ background-position:0 -32px; } body #inner > header ul#lang li.al > a:before{ background-position:-32px -624px; } /*-- user menu --*/ body #page header ul#userMenu{ /* background-image: url(../img/bg_grey-80.png);*/ display: inline-block; display: inline!ie7; zoom:1; position: relative; margin-left: 10px; vertical-align: bottom; } body #page header ul#userMenu a{ display: block; font-size: 1.4em; color: #fff; text-decoration: none; padding-left: 10px; padding-right: 10px; height: 31px; line-height: 31px; } #userMenu a{color:#fff !important} body #page header ul#userMenu > li > a{ padding-right: 40px; text-align: left; } body #page header ul#userMenu > li > a::before { content: ""; display: inline-block; display: inline!ie7; zoom:1; background-image: url("../img/lm_sprite-x.png"); background-position: 0 -302px; height: 20px; vertical-align: middle; width: 16px; margin-right: 10px; } body #page header ul#userMenu > li > a::after { position:absolute; right:16px; top:11px; border:solid 5px transparent; border-top-color:white; content:""; } body #page header ul#userSubMenu{ display: none; position: absolute; width: 100%; } body #page header #userSubMenu .leftSubMenu, body #page header #userSubMenu .rightSubMenu{ /* background-image: url("../img/bg_grey-80.png");*/ display: table-cell; position: relative; vertical-align: middle; background-color: rgba(0, 0, 0, 0.6); } body #page header #userSubMenu .leftSubMenu{ padding-top: 5px; padding-bottom: 5px; } body #page header #userSubMenu .rightSubMenu{ width: 250px; vertical-align: top; } body #page header #userSubMenu{ position: relative; display: none; margin-right: 5px; pointer-events: auto; } body #page header #userSubMenu .userSubMenuInner{ display: table; position: absolute; right: 0; border-spacing: 5px; margin-right: -5px; z-index: 99999999; } body #page header #userSubMenu .rightSubMenu li{ display: block; } body #page header #userSubMenu .rightSubMenu li a { /* background-image: url("../img/bg_grey-80.png");*/ color: white; display: block; font-size: 1.4em; height: 32px; line-height: 32px; text-decoration: none; text-align: left; padding-left: 10px; padding-right: 10px; } body #page header #userSubMenu .rightSubMenu li a:hover { background-image: url(../img/bg_white-80.png); color: #000; } body #page header #userSubMenu .rightSubMenu li a:before{ display: inline-block; display: inline !ie7; zoom:1; vertical-align: top; content: ""; width: 28px; height: 28px; background-image: url("../img/lm_sprite-x.png"); margin-right: 10px; } body #page header #userSubMenu .rightSubMenu li.command a:before { background-position: 0 -2572px; } body #page header #userSubMenu .rightSubMenu li.command a:hover:before { background-position: -28px -2572px; } body #page header #userSubMenu .rightSubMenu li.sample a:before { background-position: 0 -2628px; } body #page header #userSubMenu .rightSubMenu li.sample a:hover:before { background-position: -28px -2628px; } body #page header #userSubMenu .rightSubMenu li.reservation a:before { background-position: 0 -2600px; } body #page header #userSubMenu .rightSubMenu li.reservation a:hover:before { background-position: -28px -2600px; } body #page header #userSubMenu .rightSubMenu li.logout a:before { background-position: 0 -2719px; } body #page header #userSubMenu .rightSubMenu li.logout a:hover:before { background-position: -28px -2719px; } #myPanel .main ul#myPanelLinks{ padding-top: 22px; } body #page header #userSubMenu .leftSubMenu li.link:hover{ -webkit-box-shadow: 0 0 20px -10px black; -moz-box-shadow: 0 0 20px -10px black; -ms-box-shadow: 0 0 20px -10px black; -o-box-shadow: 0 0 20px -10px black; box-shadow: 0 0 20px -10px black; } body #page header #userSubMenu .leftSubMenu li.link strong{ color: #fff; line-height: 2.6em; height: 2.6em; display: block; } body #page header #userSubMenu .leftSubMenu li.link{ /* background-image: url("../img/bg_black-80a.png");*/ display: inline-block; display: inline!ie7; zoom:1; color: white; display: inline-block; font-size: 1.6em; margin: 0 5px; text-align: center; text-transform: uppercase; width: 120px; } body #page header #userSubMenu .leftSubMenu li.link a{ display: block; padding-top: 17px; padding-bottom: 10px; width: 100%; } body #page header #userSubMenu .leftSubMenu li.link a:before{ display: block; content: ""; width: 35px; height: 31px; margin-left: auto; margin-right: auto; background-image: url("../img/lm_sprite.png"); margin-bottom: 17px; } body #page header #userSubMenu .leftSubMenu li.link a:hover{ background-image:url("../img/bg_white-80.png"); } body #page header #userSubMenu .leftSubMenu li.link.command a:before{ background-position: -282px -64px; } body #page header #userSubMenu .leftSubMenu li.link.command a:hover:before{ background-position: -282px -95px; } body #page header #userSubMenu .leftSubMenu li.link.reserve a:before{ background-position: -317px -64px; } body #page header #userSubMenu .leftSubMenu li.link.reserve a:hover:before{ background-position: -317px -95px; } body #page header #userSubMenu .leftSubMenu li.link.sample a:before{ background-position: -352px -64px; } body #page header #userSubMenu .leftSubMenu li.link.sample a:hover:before{ background-position: -352px -95px; } body #page header #userSubMenu .leftSubMenu li.link.stock a:before{ background-position: -387px -64px; } body #page header #userSubMenu .leftSubMenu li.link.stock a:hover:before{ background-position: -387px -95px; } body #page header #userSubMenu .leftSubMenu li.link:nth-child(5) a:before{ background-position: -457px -64px; } body #page header #userSubMenu .leftSubMenu li.link:nth-child(5) a:hover:before{ background-position: -457px -95px; } body #page header #userSubMenu .leftSubMenu li.link.account a:before{ background-position: -422px -64px; } body #page header #userSubMenu .leftSubMenu li.link.account a:hover:before{ background-position: -422px -95px; } body #page header #userSubMenu .leftSubMenu li.link a strong span{ font-family: "Kozuka Gothic Pro EL",Arial; font-size: 14px; line-height: 1; vertical-align: middle; display: inline-block; display: inline!ie7; zoom:1; } body #page header #userSubMenu .leftSubMenu li.link a:hover strong span{ color: #000; } @media screen and (max-width:1005px){ body #page header ul#userMenu{ margin-right: 52px; } } @media screen and (max-width:768px){ body #page header #userSubMenu .leftSubMenu, body #page header #userSubMenu .rightSubMenu{ display: block; width: auto; margin-bottom: 5px; /* background-image: url("../img/bg_black-90.png");*/ background-image: url("../img/bg_grey-80.png"); text-align: left; } body #page header #userSubMenu .rightSubMenu li a{ padding-top: 10px; padding-bottom: 10px; } body #page header ul#userMenu { /* background-image: url("../img/bg_black-90.png");*/ } } /*@media screen and (max-width:480px){*/ @media screen and (max-width:532px){ body #page header ul#lang{ color: black; display: inline-block; font-size: 1.4em; position: relative; text-align: left; vertical-align: top; width: 72px; z-index: 999; } body #page header ul#userMenu { /*display: block;*/ left: 0; margin-left: 0; margin-right: 0; right: 0; } .wrapperMenu #menu2{ top: 114px;} body #inner > header .inner.wrapperMenu{ padding-left: 10px; padding-right: 10px; height:100%; pointer-events: none; } #page header #lang{right:0 !important;} body #page header #userSubMenu .userSubMenuInner { border-spacing: 5px; display: table; margin-left: -5px; margin-right: -5px; position: absolute; right: 0; } body #page header ul#lang li a{ min-width: 0; } body #page header ul#lang a span{ display: none; } } /*-- end: user menu --*/ body #inner > header .logoWrap{ display:inline-block; display:inline!ie7; zoom:1; margin:30px 0 0 71px; text-align:right; } body #inner > header .logoWrap > a{ display:block; /*margin-bottom:20px;*/ width: 50%; } body #inner > header .logoWrap > a img{ display:block; } body#home #inner > header .logoWrap ul#slide-list{ } body#home #inner > header .logoWrap ul#slide-list{ margin-left: auto !important; display: inline-block; display:inline!ie7; zoom:1; margin-bottom: 80px; } body #inner > header .logoWrap ul#slide-list li{ display:inline-block; display:inline!ie7; zoom:1; margin-left:5px; } body #inner > header .logoWrap ul#slide-list a{ background-image:url("../img/casal_sprite-x.png"); width:25px; height:25px; display:block; background-position: -22px -25px; } body #inner > header .logoWrap ul#slide-list li.current-slide a{ background-position: -22px 0; } /*-- END: HEADER --*/ /*-- MAIN --*/ section#main{ position: relative; z-index: 0; margin-bottom:5em; /*margin-bottom:9em; */ } body#home section#main{ /* margin-bottom:0;*/ } section#main .inner{ } section#main .inner > article{ display:block; width:auto; max-width:282px; margin-left:auto; background-image:url("../img/bg_white-80.png"); font-size:1.4em; line-height:150%; } section#main .inner > article #slidecaption{ position:relative; padding:32px 12px; min-height:244px; width:auto; } section#main .inner > article #slidecaption:after{ background-image: url("../img/lm_sprite.png"); background-position: 0 0; bottom: 0; content: ""; height: 119px; position: absolute; width: 282px; left: 0; right: 0; } section#main .inner article h2{ text-transform:uppercase; font-size:24px; text-align:center; margin-bottom:1em; line-height:130%; } section#main .inner article h2 a{ color:black; text-decoration:none; } section#main .inner article h2 a:hover{ text-decoration:underline; } section#main .inner article h3{ font-size:16px; font-weight:bold; } section#main .inner article p{ } /*-- END: MAIN --*/ /*-- FOOTER --*/ #controls-wrapper, #progress-back, #prevslide, #nextslide{ display:none!important; } body #inner > footer { min-width:980px; bottom: 0; left: 0; position: fixed; right: 0; vertical-align: middle; z-index: 3; font-family: 'Kozuka Gothic Pro EL'; } body #inner > footer .ground{ /*background-color: #f1efed;*/ background-color: white; position:relative; z-index:1; } body #inner > footer .ground .inner .inner{ padding:0; } body #inner > footer .roof{ /*background-image: url("../img/bg_white-80.png");*/ background-image: url("../img/bgMenu.png"); bottom:-100%; position: relative; z-index:0; } body #inner > footer .roof.active{ bottom: 0; } body #inner > footer .roof.active.products .inner .menu{ padding-left:100px; } body #inner > footer nav#menu, body #inner > footer nav#secondary, body #inner > footer div.sub{ /*padding-top:10px; padding-bottom:20px;*/ } body #inner > footer nav#menu, body #inner > footer nav#secondary{ display:inline-block; display:inline!ie7; zoom:1; /*width:45%;*/ /*width:39% !important;*/ vertical-align:middle; } body #inner > footer nav#secondary{ /*text-align:right;*/ /*width:54%;*/ /*width:34% !important;*/ } body #inner > footer nav ul li a{ line-height: 32px; height: 32px; display: block; padding-top:13px; padding-bottom:13px; } body #inner > footer nav#menu ul li, body #inner > footer nav#subMenu ul li{ display:inline-block; display:inline!ie7; zoom:1; margin-right:32px; vertical-align:middle; } body #inner > footer nav#subMenu ul li { margin: 0 55px 0 10px; } body #inner > footer nav#menu ul li a, body #inner > footer nav#subMenu ul li a{ text-decoration:none; /*color:#6C6C6C;*/ color:#ffffff; } body #inner > footer nav#menu ul li:hover a, body #inner > footer nav#subMenu ul li:hover a{ /*font-weight:bold;*/ /*color:black;*/ color:#ffffff; } body #inner > footer nav#menu ul li.marcato:hover a, body #inner > footer nav#menu ul li.products:hover a{ cursor:default; } body #inner > footer nav#menu ul li a span, body #inner > footer nav#subMenu ul li a span{ font-size:22px; text-transform:uppercase; } @media screen and (max-width:1700px){ body #inner > footer nav#menu ul li a span, body #inner > footer nav#subMenu ul li a span{ font-size:1.6em; font-size:1.3vw; } } body #inner > footer nav#menu ul li:hover > a span, body #inner > footer nav#subMenu ul li:hover > a span{ text-decoration:underline; } body #inner > footer nav#menu ul li.active a span { text-decoration: underline; } body #inner > footer nav#menu ul li.home a:before{ display:inline-block; display:inline!ie7; zoom:1; /*background-image: url("../img/casal_sprite-x.png");*/ background-image: url(../img/homeBlanc.png); background-position:0 0; /* background-position:0 -50px;*/ background-repeat:no-repeat; content:""; width:33px; height:26px; /*width:33px; height:26px;*/ position:relative; } body #inner > footer nav#menu ul li.home a{ overflow:hidden; } body #inner > footer nav#menu ul li.home a span{ display:none; } body #inner > footer .MenuCasal a.casal:before, body #inner > footer nav#menu ul li.casal > a:before, body #inner > footer nav#menu ul li.products > a:before{ display:inline-block; display:inline!ie7; zoom:1; vertical-align:middle; background-image: url("../img/casal_sprite-x.png"); /* background-image: url("../img/spriteFooter.PNG");*/ /*background-position:-47px 0;*/ background-position:-96px -608px; content:""; width:15px; height:11px; margin-right:7px; } body #inner > footer nav#menu .sub{ /*bottom: 80px; position: absolute; background-image: url("../img/bg_white-80.png"); left: 0; right: 0; */ display:none; } body #inner > footer nav#secondary{ /*background-color:#ECE9E7;*/ /*text-align:center;*/ background-color:#A8AAAC; /*padding-left: 20px;*/ /*max-width: 473px !important;*/ min-width: 473px !important; } body#home #inner > footer nav#secondary{ max-width: 473px !important; min-width: 0 !important; } body #inner > footer nav#secondary .select{ left: 15px;position: relative; } body #inner > footer nav#secondary .inner > ul, body #inner > footer nav#secondary .inner > form{ display:inline-block; display:inline!ie7; zoom:1; vertical-align:middle; } body #inner > footer nav#secondary ul li{ display:inline-block; display:inline!ie7; zoom:1; /* margin-left:14px;*/ } body #inner > footer nav#secondary ul li:first-child{ } body #inner > footer nav#secondary ul li a{ text-decoration:none; color:#6C6C6C; /*color: #ffffff;*/ } body #inner > footer nav#secondary ul li.login{ display: none; } body #inner > footer nav#secondary ul li a span{ font-size:1.2em; font-size:1vw; text-transform:uppercase; vertical-align: middle; } body #inner > footer nav#secondary ul li.login a em{ display: none; } body #inner > footer nav#secondary li a:before{ background-image: url("../img/casal_sprite-x.png"); /*background-image: url("../img/lm_sprite-x.png");*/ /*background-image: url("../img/spriteFooter.PNG");*/ content: ""; height: 32px; width: 32px; display: inline-block; vertical-align: middle; margin-right:10px; } body #inner > footer nav#secondary ul#social li a:before{ background-image: url("../img/lm_sprite-x.png"); } body #inner > footer nav#secondary li.select.selectionFilled a:before{ background-position: -28px -242px; background-image: url("../img/casal_sprite-x.png") !important; height: 28px; } body #inner > footer nav#secondary li.select a:before{ /*background-position: 0 -76px;*/ background-position: 0 -560px; } body #inner > footer nav#secondary li.login a:before{ /*background-position: -32px -76px;*/ background-position: 0 -725px; left: 6px; position: relative; } body #inner > footer nav#secondary li.facebook a:before{ background-position: 0 -108px; /*margin-right:0;*/ /* background-position: 0 -65px;*/ /* height: 32px; width: 39px;*/ } body #inner > footer nav#secondary li.pinterest a:before{ /* background-position: 0 -102px; height: 32px; width: 39px;*/ background-position: -32px -108px; } body #inner > footer nav#secondary li.pinterest span, body #inner > footer nav#secondary li.facebook span{ display:none; } body #inner > footer nav#secondary .inner > form{ /*margin-left:20px;*/ } body #inner > footer nav#secondary .inner > form input{ height:34px; background:white; border:none; vertical-align:middle; padding-left:20px; padding-right:10px; } body #inner > footer nav#secondary .inner > form input#txtSearch{ border-bottom: 1px solid #bfbfbf; border-left: 1px solid #bfbfbf; height: 28px; vertical-align: middle; } body #inner > footer nav#secondary .inner > form button{ height:34px; width:32px; vertical-align:middle; border:none; background-color:#333333; cursor:pointer; height: 30px !important; } #product #inner > footer nav#secondary .inner > form button{ right: 2px !important ;} body #inner > footer nav#secondary .inner > form button{ width:34px; height:34px; position:relative; } body #inner > footer nav#secondary .inner > form button:before{ /* background-image: url("../img/casal_sprite-x.png");*/ background-image: url("../img/lm_sprite-x.png"); background-position:0 -140px; width:32px; height:32px; content:""; position:absolute; top:0; left:1px; } /*-- END: FOOTER --*/ /*-- #mySelection --*/ #mySelection{ background-image:url(../img/bg_black-80.png); position:relative; bottom:-400px; } #mySelection.active{ bottom:0; } #mySelection .header h2{ color: white; font-size: 20px; font-weight: normal; height: 3em; line-height: 3em; margin-bottom: 1px; text-align: center; text-transform: uppercase; } #mySelection .header h2:before{ background-image: url("../img/casal_sprite-x.png"); background-position:0 -560px; display:inline-block; display:inline!ie7; zoom:1; width:28px; height:28px; content:""; vertical-align:-6px; margin-right:10px; } #mySelection .header h2.selectionFilled:before{ background-position:-28px -242px; } #mySelection .header a.close{ display: block; padding: 1em 0; text-align: center; background-image:url(../img/bg_black-50.png); } #mySelection .header a.close:before{ background-image: url("../img/casal_sprite-x.png"); background-position:0 -592px; display:inline-block; display:inline!ie7; zoom:1; content:""; width:3.2em; height:1.6em; } #mySelection .header a.close:hover:before{ background-position:-32px -592px; } #mySelection{ border-bottom:solid 1px black; } #mySelection .main ul{ /*margin-bottom:3em!important;*/ } #mySelection .main ul li{ display:inline-block; display:inline!ie7; zoom:1; vertical-align:top; margin-right:1em; margin-bottom:2em; } #mySelection .main ul li{ margin-right:1em; } #mySelection .main ul li.thumb .imgWrap{ display:inline-block; display:inline!ie7; zoom:1; width:13.2em; height:12.4em; border:solid 1px #666666 } #mySelection .main ul li.thumb figure{ position:relative; } #mySelection .main ul li.thumb figure:after{ background-image:url("../img/bg_white-80.png"); position:absolute; top:0; right:0; width:3.2em; height:3.2em; } #mySelection .main ul li.thumb figcaption{ background-image:url("../img/bg_white-80.png"); padding:1em; text-align:center; } #mySelection .main ul li.thumb figcaption .ref{ font-size:1.4em; display:block; margin-bottom:1em; } #mySelection .main ul li.thumb figcaption strong{ font-size:1.4em; font-weight:bold; } #mySelection .footer{ text-align:right; margin-bottom:3em; } #mySelection .footer button{ background-color:transparent; background-image:url(../img/casal_sprite-x.png); width:28px; height:28px; border:none; margin-left:5px; } #mySelection .footer button.share{ background-position:0 -186px; } #mySelection .footer button.download{ background-position:0 -214px; } #mySelection .footer button.share:hover{ background-position:-28px -186px; } #mySelection .footer button.download:hover{ background-position:-28px -214px; } #mySelection .footer button.moodBoard:before{ display:inline-block; display:inline!ie7; zoom:1; background-image:url(../img/casal_sprite-x.png); background-position:0 -640px; width:28px; height:28px; content:""; vertical-align:middle; margin-right:10px; } #mySelection .footer button.moodBoard{ background-image:none; background-color:#DBD6D2; border:solid 1px #CBC5BE; width:auto; height:31px; vertical-align:middle; color:#575555; padding:0 7px; font-size:1.2em; margin:0; margin-left:10px; } #mySelection .footer button.moodBoard:hover:before{ background-position:-28px -640px; } /*-- end: #mySelection --*/ /*-- mySelection.css --*/ #mySelection .main ul#panelButtons{ max-height:260px!important; overflow-y:scroll; } #mySelection .main ul li.thumb figure{ overflow:hidden; } #mySelection .main ul li.thumb figure ul.opt{ right:-100%; top:5px; position:absolute; margin-bottom:0; } #mySelection .main ul li.thumb:hover figure ul.opt{ right:5px; } #mySelection .main ul li.thumb figure ul.opt li{ display:inline-block; display:inline!ie7; zoom:1; } #mySelection .main ul li.thumb figure ul.opt li{ background-image:url(../img/bg_black-50.png); margin:0; padding:0; } #mySelection .main ul li.thumb figure ul.opt li a{ background-image:url(../img/lm_sprite-x.png); display:block; width:32px; height:32px; background-position:0 -2432px; } #mySelection .main ul li.thumb figure ul.opt li a:hover{ background-position:-32px -2432px; } /*************** SCROLLBAR BASE CSS ***************/ .scroll-wrapper { overflow: hidden !important; padding: 0 !important; position: relative; } .scroll-wrapper > .scroll-content { border: none !important; box-sizing: content-box !important; height: auto; left: 0; margin: 0; max-height: none !important; max-width: none !important; overflow: scroll !important; padding: 0; position: relative !important; top: 0; width: auto !important; } .scroll-wrapper > .scroll-content::-webkit-scrollbar { height: 0; width: 0; } .scroll-element { display: none; } .scroll-element, .scroll-element div { box-sizing: content-box; } .scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible { display: block; } .scroll-element .scroll-bar, .scroll-element .scroll-arrow { cursor: default; } .scroll-textarea { border: 1px solid #cccccc; border-top-color: #999999; } .scroll-textarea > .scroll-content { overflow: hidden !important; } .scroll-textarea > .scroll-content > textarea { border: none !important; box-sizing: border-box; height: 100% !important; margin: 0; max-height: none !important; max-width: none !important; overflow: scroll !important; outline: none; padding: 2px; position: relative !important; top: 0; width: 100% !important; } .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar { height: 0; width: 0; } /*************** SIMPLE INNER SCROLLBAR ***************/ .scrollbar-inner > .scroll-element, .scrollbar-inner > .scroll-element div { border: none; margin: 0; padding: 0; position: absolute; z-index: 10; } .scrollbar-inner > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; } .scrollbar-inner > .scroll-element.scroll-x { bottom: 2px; height: 8px; left: 0; width: 100%; } .scrollbar-inner > .scroll-element.scroll-y { height: 100%; right: 2px; top: 0; width: 8px; z-index: 1; } .scrollbar-inner > .scroll-element .scroll-element_outer { overflow: hidden; } .scrollbar-inner > .scroll-element .scroll-element_outer, .scrollbar-inner > .scroll-element .scroll-element_track, .scrollbar-inner > .scroll-element .scroll-bar { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .scrollbar-inner > .scroll-element .scroll-element_track, .scrollbar-inner > .scroll-element .scroll-bar { /*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); opacity: 0.4;*/ } .scrollbar-inner > .scroll-element .scroll-element_track {background-image:url("../img/bg_white-10.png");} .scrollbar-inner > .scroll-element .scroll-bar { background-color: #919191; } .scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; } .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; } /* update scrollbar offset if both scrolls are visible */ .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; } .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; } .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; } .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; } /*************** SIMPLE OUTER SCROLLBAR ***************/ .scrollbar-outer > .scroll-element, .scrollbar-outer > .scroll-element div { border: none; margin: 0; padding: 0; position: absolute; z-index: 10; } .scrollbar-outer > .scroll-element { background-color: #ffffff; } .scrollbar-outer > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; } .scrollbar-outer > .scroll-element.scroll-x { bottom: 0; height: 12px; left: 0; width: 100%; } .scrollbar-outer > .scroll-element.scroll-y { height: 100%; right: 0; top: 0; width: 12px; } .scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer { height: 8px; top: 2px; } .scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer { left: 2px; width: 8px; } .scrollbar-outer > .scroll-element .scroll-element_outer { overflow: hidden; } .scrollbar-outer > .scroll-element .scroll-element_track { background-color: #eeeeee; } .scrollbar-outer > .scroll-element .scroll-element_outer, .scrollbar-outer > .scroll-element .scroll-element_track, .scrollbar-outer > .scroll-element .scroll-bar { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .scrollbar-outer > .scroll-element .scroll-bar { background-color: #d9d9d9; } .scrollbar-outer > .scroll-element .scroll-bar:hover { background-color: #c2c2c2; } .scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; } /* scrollbar height/width & offset from container borders */ .scrollbar-outer > .scroll-content.scroll-scrolly_visible { left: -12px; margin-left: 12px; } .scrollbar-outer > .scroll-content.scroll-scrollx_visible { top: -12px; margin-top: 12px; } .scrollbar-outer > .scroll-element.scroll-x .scroll-bar { min-width: 10px; } .scrollbar-outer > .scroll-element.scroll-y .scroll-bar { min-height: 10px; } /* update scrollbar offset if both scrolls are visible */ .scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -14px; } .scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -14px; } .scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -14px; } .scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -14px; } /*************** SCROLLBAR MAC OS X ***************/ .scrollbar-macosx > .scroll-element, .scrollbar-macosx > .scroll-element div { background: none; border: none; margin: 0; padding: 0; position: absolute; z-index: 10; } .scrollbar-macosx > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; } .scrollbar-macosx > .scroll-element .scroll-element_track { display: none; } .scrollbar-macosx > .scroll-element .scroll-bar { background-color: #6C6E71; display: block; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .scrollbar-macosx:hover > .scroll-element .scroll-bar, .scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); opacity: 0.7; } .scrollbar-macosx > .scroll-element.scroll-x { bottom: 0px; height: 0px; left: 0; min-width: 100%; overflow: visible; width: 100%; } .scrollbar-macosx > .scroll-element.scroll-y { height: 100%; min-height: 100%; right: 0px; top: 0; width: 0px; } /* scrollbar height/width & offset from container borders */ .scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; } .scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; } .scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; } .scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; } .scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; } .scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; } /* update scrollbar offset if both scrolls are visible */ .scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; } .scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; } /*************** SCROLLBAR LIGHT ***************/ .scrollbar-light > .scroll-element, .scrollbar-light > .scroll-element div { border: none; margin: 0; overflow: hidden; padding: 0; position: absolute; z-index: 10; } .scrollbar-light > .scroll-element { background-color: #ffffff; } .scrollbar-light > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; } .scrollbar-light > .scroll-element .scroll-element_outer { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .scrollbar-light > .scroll-element .scroll-element_size { background: #dbdbdb; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi 8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2 VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaW VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2 Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMC UiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD 0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdm c+); background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dbdbdb), color-stop(100%,#e8e8e8)); background: -webkit-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%); background: -o-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%); background: -ms-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%); background: linear-gradient(to right, #dbdbdb 0%,#e8e8e8 100%); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .scrollbar-light > .scroll-element.scroll-x { bottom: 0; height: 17px; left: 0; min-width: 100%; width: 100%; } .scrollbar-light > .scroll-element.scroll-y { height: 100%; min-height: 100%; right: 0; top: 0; width: 17px; } .scrollbar-light > .scroll-element .scroll-bar { background: #fefefe; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi 8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2 VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaW VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2 Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMC UiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD 0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdm c+); background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fefefe), color-stop(100%,#f5f5f5)); background: -webkit-linear-gradient(left, #fefefe 0%,#f5f5f5 100%); background: -o-linear-gradient(left, #fefefe 0%,#f5f5f5 100%); background: -ms-linear-gradient(left, #fefefe 0%,#f5f5f5 100%); background: linear-gradient(to right, #fefefe 0%,#f5f5f5 100%); border: 1px solid #dbdbdb; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } /* scrollbar height/width & offset from container borders */ .scrollbar-light > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; } .scrollbar-light > .scroll-content.scroll-scrollx_visible { top: -17px; margin-top: 17px; } .scrollbar-light > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 0px; } .scrollbar-light > .scroll-element.scroll-y .scroll-bar { left: 0px; min-height: 10px; width: 10px; } .scrollbar-light > .scroll-element.scroll-x .scroll-element_outer { height: 12px; left: 2px; top: 2px; } .scrollbar-light > .scroll-element.scroll-x .scroll-element_size { left: -4px; } .scrollbar-light > .scroll-element.scroll-y .scroll-element_outer { left: 2px; top: 2px; width: 12px; } .scrollbar-light > .scroll-element.scroll-y .scroll-element_size { top: -4px; } /* update scrollbar offset if both scrolls are visible */ .scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; } .scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; } .scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; } .scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; } /*************** SCROLLBAR RAIL ***************/ .scrollbar-rail > .scroll-element, .scrollbar-rail > .scroll-element div { border: none; margin: 0; overflow: hidden; padding: 0; position: absolute; z-index: 10; } .scrollbar-rail > .scroll-element { background-color: #ffffff; } .scrollbar-rail > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; } .scrollbar-rail > .scroll-element .scroll-element_size { background-color: #999; background-color: rgba(0, 0, 0, 0.3); } .scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-element_size { background-color: #666; background-color: rgba(0, 0, 0, 0.5); } .scrollbar-rail > .scroll-element.scroll-x { bottom: 0; height: 12px; left: 0; min-width: 100%; padding: 3px 0 2px; width: 100%; } .scrollbar-rail > .scroll-element.scroll-y { height: 100%; min-height: 100%; padding: 0 2px 0 3px; right: 0; top: 0; width: 12px; } .scrollbar-rail > .scroll-element .scroll-bar { background-color: #d0b9a0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-bar { box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); } /* scrollbar height/width & offset from container borders */ .scrollbar-rail > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; } .scrollbar-rail > .scroll-content.scroll-scrollx_visible { margin-top: 17px; top: -17px; } .scrollbar-rail > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 1px; } .scrollbar-rail > .scroll-element.scroll-y .scroll-bar { left: 1px; min-height: 10px; width: 10px; } .scrollbar-rail > .scroll-element.scroll-x .scroll-element_outer { height: 15px; left: 5px; } .scrollbar-rail > .scroll-element.scroll-x .scroll-element_size { height: 2px; left: -10px; top: 5px; } .scrollbar-rail > .scroll-element.scroll-y .scroll-element_outer { top: 5px; width: 15px; } .scrollbar-rail > .scroll-element.scroll-y .scroll-element_size { left: 5px; top: -10px; width: 2px; } /* update scrollbar offset if both scrolls are visible */ .scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -25px; } .scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -25px; } .scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -25px; } .scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -25px; } /*************** SCROLLBAR DYNAMIC ***************/ .scrollbar-dynamic > .scroll-element, .scrollbar-dynamic > .scroll-element div { background: none; border: none; margin: 0; padding: 0; position: absolute; z-index: 10; } .scrollbar-dynamic > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; } .scrollbar-dynamic > .scroll-element.scroll-x { bottom: 2px; height: 7px; left: 0; min-width: 100%; width: 100%; } .scrollbar-dynamic > .scroll-element.scroll-y { height: 100%; min-height: 100%; right: 2px; top: 0; width: 7px; } .scrollbar-dynamic > .scroll-element .scroll-element_outer { opacity: 0.3; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } .scrollbar-dynamic > .scroll-element .scroll-element_size { background-color: #cccccc; opacity: 0; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; -ms-transition: opacity 0.2s; transition: opacity 0.2s; } .scrollbar-dynamic > .scroll-element .scroll-bar { background-color: #6c6e71; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } /* scrollbar height/width & offset from container borders */ .scrollbar-dynamic > .scroll-element.scroll-x .scroll-bar { bottom: 0; height: 7px; min-width: 24px; top: auto; } .scrollbar-dynamic > .scroll-element.scroll-y .scroll-bar { left: auto; min-height: 24px; right: 0; width: 7px; } .scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_outer { bottom: 0; top: auto; left: 2px; -webkit-transition: height 0.2s; -moz-transition: height 0.2s; -o-transition: height 0.2s; -ms-transition: height 0.2s; transition: height 0.2s; } .scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_outer { left: auto; right: 0; top: 2px; -webkit-transition: width 0.2s; -moz-transition: width 0.2s; -o-transition: width 0.2s; -ms-transition: width 0.2s; transition: width 0.2s; } .scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size { left: -4px; } .scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size { top: -4px; } /* update scrollbar offset if both scrolls are visible */ .scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; } .scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; } /* hover & drag */ .scrollbar-dynamic > .scroll-element:hover .scroll-element_outer, .scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer { overflow: hidden; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); opacity: 0.7; } .scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-element_size, .scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size { opacity: 1; } .scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar, .scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar { height: 100%; width: 100%; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } .scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer, .scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer { height: 20px; min-height: 7px; } .scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer, .scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer { min-width: 7px; width: 20px; } /*************** SCROLLBAR GOOGLE CHROME ***************/ .scrollbar-chrome > .scroll-element, .scrollbar-chrome > .scroll-element div { border: none; margin: 0; overflow: hidden; padding: 0; position: absolute; z-index: 10; } .scrollbar-chrome > .scroll-element { background-color: #ffffff; } .scrollbar-chrome > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; } .scrollbar-chrome > .scroll-element .scroll-element_outer {} .scrollbar-chrome > .scroll-element .scroll-element_track { background: #f1f1f1; border: 1px solid #dbdbdb; } .scrollbar-chrome > .scroll-element.scroll-x { bottom: 0; height: 16px; left: 0; min-width: 100%; width: 100%; } .scrollbar-chrome > .scroll-element.scroll-y { height: 100%; min-height: 100%; right: 0; top: 0; width: 16px; } .scrollbar-chrome > .scroll-element .scroll-bar { background-color: #d9d9d9; border: 1px solid #bdbdbd; cursor: default; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .scrollbar-chrome > .scroll-element .scroll-bar:hover { background-color: #c2c2c2; border-color: #a9a9a9; } .scrollbar-chrome > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; border-color: #7e7e7e; } /* scrollbar height/width & offset from container borders */ .scrollbar-chrome > .scroll-content.scroll-scrolly_visible { left: -16px; margin-left: 16px; } .scrollbar-chrome > .scroll-content.scroll-scrollx_visible { top: -16px; margin-top: 16px; } .scrollbar-chrome > .scroll-element.scroll-x .scroll-bar { height: 8px; min-width: 10px; top: 3px; } .scrollbar-chrome > .scroll-element.scroll-y .scroll-bar { left: 3px; min-height: 10px; width: 8px; } .scrollbar-chrome > .scroll-element.scroll-x .scroll-element_outer { border-left: 1px solid #dbdbdb; } .scrollbar-chrome > .scroll-element.scroll-x .scroll-element_track { height: 14px; left: -3px; } .scrollbar-chrome > .scroll-element.scroll-x .scroll-element_size { height: 14px; left: -4px; } .scrollbar-chrome > .scroll-element.scroll-y .scroll-element_outer { border-top: 1px solid #dbdbdb; } .scrollbar-chrome > .scroll-element.scroll-y .scroll-element_track { top: -3px; width: 14px; } .scrollbar-chrome > .scroll-element.scroll-y .scroll-element_size { top: -4px; width: 14px; } /* update scrollbar offset if both scrolls are visible */ .scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; } .scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; } .scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; } .scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; } /*-- end: mySelection.css --*/ /*-- home page --*/ body#home #thumb-tray { display: none!important; } body#home #main{ position:relative; width:100%; /*margin-top: -20px;*/ } /*-- end: home page --*/ @charset "UTF-8"; /*! Animate.css - https://daneden.me/animate Licensed under the MIT license - https://opensource.org/licenses/MIT Copyright (c) 2014 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /*-- end: animate.css --*/ /* Supersized - Fullscreen Slideshow jQuery Plugin Version : 3.2.7 Site : www.buildinternet.com/project/supersized Author : Sam Dunn Company : One Mighty Roar (www.onemightyroar.com) License : MIT License / GPL License */ * { margin:0; padding:0; } body#home { background:#fff; /*height:100%; -05.12.2014-*/} img { border:none; } #supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;} #supersized-loader {display:none;} #supersized { display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; } #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; } #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/ #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/ #supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#ffffff; } #supersized a { width:100%; height:100%; display:block; } #supersized li.prevslide { z-index:-20; } #supersized li.activeslide { z-index:-10; } #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; } #supersized li.image-loading img{ visibility:hidden; } #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; } /*-- Supersized - Fullscreen Slideshow jQuery Plugin --*/ /* Supersized - Fullscreen Slideshow jQuery Plugin Version : 3.2.7 Site : www.buildinternet.com/project/supersized Theme : Shutter 1.2 Author : Sam Dunn Company : One Mighty Roar (www.onemightyroar.com) License : MIT License / GPL License */ /* Controls Bar ----------------------------*/ #controls-wrapper { margin:0 auto; height:42px; width:100%; bottom:0px; left:0; z-index:4; background:url(../img/nav-bg.png) repeat-x; position:fixed; } #controls { overflow:hidden; height:100%; position:relative; text-align:left; z-index:5; } #slidecounter { float:left; color:#999; font:14px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow:#000 0 -1px 0; margin:0px 10px 0 15px; line-height:42px; } /*#slidecaption { overflow:hidden; float:left; color:#FFF; font:400 14px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow:#000 1px 1px 2px; margin:0 20px 0 0; line-height:42px; }*/ #navigation { float:right; margin:0px 20px 0 0; } #play-button{ float:left; margin-top:1px;border-right:1px solid #333; background:url('../img/bg-hover.png') repeat-x 0 44px; } #play-button:hover{ background-position:0 1px; cursor:pointer; } #prevslide, #nextslide{ position:absolute; height:43px; width:43px; top:50%; margin-top:-21px; opacity:0.6; } #prevslide{ left:10px; background:url('../img/back.png'); } #nextslide{ right:10px; background:url('../img/forward.png'); } #prevslide:active, #nextslide:active{ margin-top:-19px; } #prevslide:hover, #nextslide:hover{ cursor:pointer; } /*ul#slide-list{ padding:15px 0; float:left; position:absolute; left:50%; }*/ /*ul#slide-list li{ list-style:none; width:12px; height:12px; float:left; margin:0 5px 0 0; }*/ ul#slide-list li.current-slide a, ul#slide-list li.current-slide a:hover{ background-position:0 0px; } /*ul#slide-list li a{ display:block; width:12px; height:12px; background:url('../img/nav-dot.png') no-repeat 0 -24px; }*/ ul#slide-list li a:hover{ background-position:0 -12px; cursor:pointer; } #tray-button{ float:right; margin-top:1px; border-left:1px solid #333; background:url('../img/bg-hover.png') repeat-x 0 44px; } #tray-button:hover{ background-position:0 1px; cursor:pointer; } /* Progress Bar ----------------------------*/ #progress-back{ z-index:5; position:fixed; bottom:42px; left:0; height:8px; width:100%; background:url('../img/progress-back.png') repeat-x; } #progress-bar{ position:relative; height:8px; width:100%; background:url('../img/progress-bar.png') repeat-x; } /* Thumbnail Navigation ----------------------------*/ #nextthumb,#prevthumb { z-index:2; display:none; position:fixed; bottom:61px; height:75px; width:100px; overflow:hidden; background:#ddd; border:1px solid #fff; -webkit-box-shadow:0 0 5px #000; } #nextthumb { right:12px; } #prevthumb { left:12px; } #nextthumb img, #prevthumb img { width:150px; height:auto; } #nextthumb:active, #prevthumb:active { bottom:59px; } #nextthumb:hover, #prevthumb:hover { cursor:pointer; } /* Thumbnail Tray ----------------------------*/ /*#thumb-tray{ position:fixed; z-index:3; bottom:0; left:0; background:url(../img/bg-black.png); height:150px; width:100%; overflow:hidden; text-align:center; -moz-box-shadow: 0px 0px 4px #000; -webkit-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; }*/ #thumb-back, #thumb-forward{ position:absolute; z-index:5; bottom:42px; height:108px; width:40px; } #thumb-back{ left:0; background: url('../img/thumb-back.png') no-repeat center center;} #thumb-forward{ right:0; background:url('../img/thumb-forward.png') no-repeat center center;} #thumb-back:hover, #thumb-forward:hover{ cursor:pointer; background-color:rgba(256,256,256, 0.1); } #thumb-back:hover{ border-right:1px solid rgba(256,256,256, 0.2); } #thumb-forward:hover{ border-left:1px solid rgba(256,256,256, 0.2); } ul#thumb-list{ display:inline-block; list-style:none; position:relative; left:0px; padding:0 0px; } ul#thumb-list li{ background:#111; list-style:none; display:inline; width:150px; height:108px; overflow:hidden; float:left; margin:0; } ul#thumb-list li img { width:200px; height:auto; opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60); -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; } ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img{ opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); } ul#thumb-list li:hover{ cursor:pointer; } /*-- jQuery custom --*/ /*-- jQuery custom --*/ .ui-autocomplete { /* position: absolute; max-height: 160px!important; overflow-y: scroll; overflow-x: hidden; background:none!important; background-image:url("../img/bg_white-80.png")!important;*/ width:240px!important; position: absolute; top: auto !important; bottom: 42px !important; max-height: 160px!important; overflow-y: scroll; overflow-x: hidden; /*overflow:hidden;*/ background:none!important; background-image:url("../img/bg_white-80.png")!important; /*width:300px!important;*/ /*display:block!important;*/ position:fixed!important } .simpleFinder .ui-autocomplete { top: auto !important; bottom: 42px !important; width:300px!important; position:fixed!important } .ui-autocomplete .ui-menu-item{ height: 32px; line-height: 32px; overflow: hidden; vertical-align: middle; padding: 0!important; margin: 0; border: none!important; font-size: 13px; text-transform: none; padding-left: 10px!important; padding-right: 10px!important; width:100% } .ui-autocomplete .ui-menu-item.ui-state-focus{ background:black; color:white; font-size:13px; margin:0; font-weight:normal; } /*-- jQuery custom --*/ .nav-collapse{position: absolute; background:url(../img/nav-collapse.png) no-repeat 0 -5px; right: -46px; width:45px; bottom: 0; height: 100%;display:none} ul li{display:inline-block} #page{ /* min-width:980px;*/ } #page #inner{ /* max-width:1400px;*/ width:100%; margin:0 auto; } #product #page #inner, #thumb-tray{ max-width: 1400px; } /*-- #main --*/ #page #main{ display:block; width:100%; border-spacing:2em; max-width: 1400px; margin:0 auto } #page #main .bloc figure{ bottom: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } #page #main .bloc.portrait figure img, #page #main .block.portrait figure img{ display: block; height: auto; /* max-width: 100%; width: 100%; min-height:100%;*/ width: 100%; min-height: 100%; } #page #main .bloc.landscape figure img, #page #main .block.landscape figure img{ display: block; margin: 0 auto; width: auto; height: 100%; } #page #main .bloc.square figure img, #page #main .block.square figure img{ /* width:auto; height:auto; max-width:100%;*/ height: auto; min-height: 100%; min-width: 100%; width: auto; } #page #main .block figure img{ /* width:100%!important; height:auto!important;*/ } #page #main .left{ height:300px; display:table-cell; width:35.02%; vertical-align:top; margin-left: 40px; } #page #main .left #logo{ margin:0; padding:0; font-size:1em; } #page #main .left #logo .imgWrap{ display:block; width:100%; /*width: 50%;*/ } #page #main .left #logo .imgWrap img{ display:block; /*width:100%;*/ } #page #main .left .bloc#news{ height: 0; /*padding-top: 85%;*/ padding-top: 121%; } #page #main .center{ height:300px; display:table-cell; width:42.75%; vertical-align:top; } #page #main .center .bloc{ display: inline-block; height: 0; width: 49%; padding-bottom: 48.6%; } #page #main .center .bloc.alpha, #page #main .center .bloc.gamma{ /*margin-right:2%;*/ } #page #main .center .bloc.alpha, #page #main .center .bloc.beta{ margin-bottom:2%; } #page #main .right{ height:300px; display:table-cell; width:19.71%; /*Original, modif Tolotra*/ /*vertical-align:bottom;*/ /*Original, modif Tolotra*/ vertical-align:top; } #page #main .right .block{ background-color: #b2b2b2; height: 0; margin-bottom: 2.5%; overflow: hidden; /* Original, modif Tolotra */ /*padding-top: 61%;*/ /* Original, modif Tolotra */ padding-top: 61.5%; position: relative; } #page #main .right .block figure{ left: 3%; position: absolute; top: 3%; bottom: 20%; right: 3%; overflow:hidden; } #page #main .right #find{ margin-bottom:2.5%; /*padding-top: 62%;*/ padding-top: 56%; } #page #main .right #find img, #page #main .right #actus img{ width: 100%; height: auto; } #page #main .right #other .bloc, #page #main .right #other .block{ display: inline-block; height: 0; padding-top: 49%; width: 49%; margin-bottom: 0; } #page #main .right #other .bloc:first-child{ margin-right:2%; } /*-- end: #main --*/ /*-- #aquaclean --*/ #aquaclean{ margin-bottom:10px; } /*-- end: #aquaclean --*/ /*-- wysiwyg --*/ .wysiwyg{ line-height:175%; font-size:14px; text-align:justify; color:#2C2D2E; } .wysiwyg a{ text-decoration:underline; color:#333333; border:none; } .wysiwyg b, .wysiwyg strong{ font-weight:bold; } .wysiwyg i, .wysiwyg em{ font-style:italic; } .wysiwyg strike{ text-decoration:line-through; } .wysiwyg u{ text-decoration:underline; } .wysiwyg a:hover{ border-color:#8FAC52; color:black; } .wysiwyg img{ background: none repeat scroll 0 0 white; border: 1px solid #c3c1c1; height: auto; margin: 10px; max-width: 100%; padding: 10px; } .wysiwyg img[width*="84"]{ width: 80%; margin: 0; padding: 0; } .wysiwyg p, .wysiwyg .block-left2{ padding-bottom:0; margin-bottom:1em; } .wysiwyg h1, .wysiwyg h2, .wysiwyg h3, .wysiwyg h4, .wysiwyg h5, .wysiwyg h6{ border-bottom: 0 none; color: #222222; font-weight: bold; margin-bottom: 0.5em; margin-top: 1em; padding-bottom: 0.2em; position: relative; text-decoration: none; font-weight:normal; text-align:left!important; font-family:'Kozuka Gothic Pro EL',Arial; } .wysiwyg h1{ border-bottom: 1px solid #cccccc; font-size: 24px; font-weight: normal; margin-bottom: 20px; padding-bottom: 12px; } .wysiwyg > h2:first-child{ border-top:none; padding-top:0; } .wysiwyg h2{ font-size:22px; } .wysiwyg h2 > span{ /*background-color:#F9F9F9; display:inline-block; position:relative; padding:0 1.5%;*/ } .wysiwyg h2:before{ /*background-color: #969694; content: ""; height: 1px; left: 0; position: absolute !important; top: 50%; width: 100%; z-index: 0;*/ } .wysiwyg h3{ font-size:20px; } .wysiwyg h4{ font-size:18px; } .wysiwyg h5{ font-size:16px; } .wysiwyg h6{ font-size:14px; } .wysiwyg ul li{ position:relative; margin-bottom:5px; } .wysiwyg ul > li:before{ content: ""; height: 16px; left: -25px; position: absolute; width: 16px; top: 4px; } .wysiwyg ul > li:before{ /* background-image:url(../img/lm_sprite-x.png);*/ background-image:url(../img/listCasal.png); background-position:0 -544px; } .wysiwyg ul ul > li:before{ background-image:url(../img/lm_sprite-x.png); background-position:-16px -544px; } .wysiwyg ul ul ul > li:before{ background-image:url(../img/lm_sprite-x.png); background-position:-32px -544px; } .wysiwyg ul ol{ list-style-image:none; } .wysiwyg ol{ list-style-image:none; list-style-type:upper-alpha } .wysiwyg ol ol{ list-style-type:lower-alpha; } .wysiwyg ol ol ol{ list-style-type:decimal; } .wysiwyg ol{ margin-bottom:2em!important; margin-left:25px; } .wysiwyg li ol{ margin-bottom:1em!important; } .wysiwyg ul{ padding-left: 25px; display:table; margin-bottom: -10px !important; } .wysiwyg li ul{ margin-bottom:1em!important; } .wysiwyg dl dt{ font-weight:bold; font-style:italic; } .wysiwyg dl dd{ border-left: 1px solid #CCCCCC; margin-bottom: 1em; margin-left: 0.5em; padding-left: 1em; } .wysiwyg blockquote, .wysiwyg q{ background-color: #f8f8fa; background-image: url("../img/quote-l.png"); background-position: 10px 10px; background-repeat: no-repeat; border: 1px solid #d1d1d1; clear: both; color: #585859; float: none; margin-bottom: 1em; padding: 10px 50px; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; position:relative; } .wysiwyg code, .wysiwyg pre{ color: #585859; font-family: monospace; margin-bottom: 1em; text-align: left; white-space: normal; } .wysiwyg blockquote:after, .wysiwyg code:after, .wysiwyg q:after{ clear: both; content: ""; display: block; } .wysiwyg blockquote:before, .wysiwyg q:before{ background:none; background-image: url("../img/quote-r.png"); background-position: right bottom; clear: both; content: ""; display: block; position: absolute; width:32px; height:32px; bottom:10px; right:10px; } /*-- fin: wysiwyg --*/ /*-- pagination --*/ .pagination > a{ display:inline-block; display:inline!ie7; zoom:1; background-image: url("../img/lm_sprite-x.png"); border: none!important; display: inline-block; height: 32px; line-height: 32px; margin: 0; overflow: hidden; padding: 0!important; text-indent: 100px; width: 32px; vertical-align: middle; -webkit-opacity:0.75; -moz-opacity:0.75; -ms-opacity:0.75; -o-opacity:0.75; opacity:0.75; } .pagination > a:hover{ -webkit-opacity:1; -moz-opacity:1; -ms-opacity:1; -o-opacity:1; opacity:1; } .pagination > a.first{ background-position:0 -2496px; } .pagination > a.prev{ background-position:0 -2464px } .pagination > a.next{ background-position:-32px -2464px } .pagination > a.last{ background-position:-32px -2496px; } /*-- end: pagination --*/ .wysiwyg a{ text-decoration:underline; color:#333333; border:none; } .main.inner .leftCol{width: auto !important; display:inline-block} .main.inner .rightCol{width: 65% !important;display:inline-block} .resultat .main.inner .rightCol{width:100% !important} .table .col, #main > .inner > div.table .leftCol, #main > .inner > div.table .rightCol{display:table-cell} .table .col.chair.curtain{ display: block; width: 79px; margin-right: -15px;} .right .rightBlocB #other #more{float:right} .right .rightBlocB #other #more img{float:right; max-width: none;max-width: none;width: auto;height: auto;} #mySelection .main ul li.thumb figcaption { background-image: url("../img/bg_white-80.png"); min-height: 70px; padding-bottom: 10px; padding-left: 0; padding-right: 0; padding-top: 10px; text-align: center; width: 134px;} #mySelection .main ul li.thumb figcaption .refSelection{display: block;font-size: 16px; margin-bottom: 11px;} #mySelection .main ul li.thumb figcaption .nameSelection{font-size: 18px;} .bloc.rightBlocBLigneColA.landscape{float:left} /*#contact article .content > h3{font-weight:normal !important}*/ /*RECTIFICATION PAR RAPPORT A LUCIANOMARCATO*/ etoile{color:#FF0000;margin-right:10px} /*lang*/ body #inner > header ul#lang ul li:hover {/*background-image: url("../img/bg_black-75.png");*/background-image: url("../img/bg_white-80.png");} body #inner > header ul#lang li {padding-top: 3px;} /*body #inner > header ul#lang li a body #inner > header ul#lang li a:hover{color:#000000 !important}*/ body #inner > header.listCollection ul#lang li a, body #inner > header ul#lang li ul li a{color:#000000 !important} body #inner > header ul#lang:after{top: 15px;} body #inner > header.listCollection ul#lang:after{border-top-color:#000000;} /*CONTENT*/ #page #main .center .alpha,#page #main .center .gamma {position:relative; right:3px} #page #main .center .beta, #page #main .center .delta{position:relative; left:11px} #page #main .right #other #more{float:right} #page #main .right #other #more img{max-width: 100%;height: auto;} #page #main .right #other .rightBlocBLigneColA{float:left} /*CONTACT*/ #contact #page #main .blackBoard article.contact .content.wysiwyg .contact p > .label, #contact #page #main .blackBoard article.contact .content.wysiwyg .contact p > span{ display: inline-block !important;} #contact #page #main .blackBoard article.contact .content.wysiwyg .contact p { display: block !important; margin:8px 0 } /*COLLECTION*/ #content #main .wysiwyg .block-left2 img{max-width: 132px;} /*PRODUCT FINDER*/ #productFinder #main.containerProduitFinder .rightCol,#collection #main .rightCol{width: 58% !important;} #productFinder #main.containerProduitFinder .table{margin-bottom: 25px !important;} /*FOOTER*/ body #inner > footer nav#secondary .inner > form input#txtSearch{border:1px solid #bfbfbf} body #inner > footer .ground{/*background-color: #ece9e7!important;*/ background-color: #474747!important; } body #inner > footer #menu .inner ul{width: 585px;} #main .inner article.wysiwyg{max-width:none; background:none} footer #sousMenuCasalProduit{position:relative; right:10px} #collection section#main{margin-top:15px; margin-bottom:60px} #product #inner > footer nav#secondary .inner > form{position:relative; right:3px} #product #inner > footer nav#secondary #social{position:relative; right:2px} /*#product #inner > footer nav#secondary ul li{margin-left:12px}*/ #product #inner > footer nav#menu ul li{margin-right:30px} #product #inner > footer nav#secondary .inner > form button:before{/*left:-1px*/} #collection .rightCol .shortcuts .button.active {border: 2px solid #A9AAAE} /*image non-feu*/ #home #main .right #rightClone.rightBlocBLigneColA .imgWrap img{max-width:125px} #home footer nav#secondary #options li a span.selection{display:none} footer nav#secondary #options li a span.selection{ left: -9px; position: relative;} #home .ground .menu{margin-left: 110px;} /*--------------------------------------------RETOUR CLIENT + AMELIORATION------------------------------------------*/ /*---------------index---------------*/ #page #main .left h1#logo{display:none} #page header{height:115px; margin-top: 15px;margin-bottom: 60px; background-image:url(../img/bg_grey-75.png);} /*#page header #lang{bottom: 0;position: absolute !important; right: 20px;} 26.05.2015--*/ #page header #lang{bottom: 0;position: right: 20px;} /*--26.05.2015--*/ #page header .imgWrap{display: block; margin: 0 auto; max-width: 370px; text-align: center;} /*---------------collection---------------*/ header.listCollection{/*background-color:transparent !important;*/ height:auto !important} #page header.listCollection .imgWrap{display:none} #collection #main #colonneA #logo .imgWrap img{max-width:525px} /*---------------footer---------------*/ /*body #inner > footer nav#secondary { background-color: #737373;}*/ body #inner > footer .decouvrezMarcato{display: inline-block; position: absolute;top: 0; right:10px} body #inner > footer .decouvrezMarcato img{ max-width: 250px; position: relative;top: 5px;} /*.decouvrezMarcato:before{content:"D\00E9 couvrez"; color: #5a5a5a;font-family: 'caviar_de_dianeregular'; font-size: 48px;right:5px; position: absolute; top: -35px; transform: rotate(1deg);}*/ /*#product #inner > footer .decouvrezMarcato{right:-5px}*/ body #inner > footer .decouvrezMarcato img{/*max-width:220px*/} .decouvrezMarcato span{color: rgb(90, 90, 90); font-size: 48px; right: 5px; top: -35px; position: absolute; font-family: 'caviar_de_dianeregular'; transform: rotate(1deg);} .chrome body#product #inner > footer nav#secondary{min-width: 504px !important;} body#product #inner > footer nav#secondary #txtSearch{margin-right: -4px;} body#product #inner > footer nav#secondary .facebook{margin-left: 7px !important;} body#product #inner > footer nav#secondary .pinterest{margin-right: 18px !important;} body#collection #inner > footer nav#secondary, body#productFinder #inner > footer nav#secondary, body#contact #inner > footer nav#secondary, body#content #inner > footer nav#secondary, body#actus #inner > footer nav#secondary, body#moodboard #inner > footer nav#secondary{/*width:61% !important*/} body#collection #inner > footer .inner.menu, body#productFinder #inner > footer .inner.menu, body#product #inner > footer .inner.menu, body#contact #inner > footer .inner.menu, body#content #inner > footer .inner.menu, body#actus #inner > footer .inner.menu, body#moodboard #inner > footer .inner.menu{padding-right:0 !important} /*--------------allez-retour client----------------*/ /*-----header-----*/ #page header .imgWrap img{ margin-top: 20px;max-width: 320px;} /*-----footer-----*/ body #inner > footer nav#secondary ul#options li{margin-right:10px} body #inner > footer nav#secondary ul li.facebook{margin-left:10px !important} body #inner > footer nav#secondary ul li.pinterest{margin-right:20px !important} .chrome body #inner > footer nav#secondary ul li.pinterest{margin-right:0 !important} body#home section#main{margin-bottom:8.5em} body #inner > footer nav#menu{margin-left:110px} body#home #inner > footer nav#menu{margin-left:0px !important;} body #inner > footer nav#menu{width: 41%;} body #inner > footer .MenuCasal #subMenu{/*background-color:red !important;*/ width:50%; margin-left:90px} body #inner > footer #sousMenuCasalProduit{/*background-color:red !important;*/width:80%; margin-left:80px} body #inner > footer nav#secondary .inner > form input{height:auto !important; padding:6px} body#collection #inner > footer nav#secondary, body#product #inner > footer nav#secondary, body#productFinder #inner > footer nav#secondary, body#content #inner > footer nav#secondary, body#moodboard #inner > footer nav#secondary, body#actus #inner > footer nav#secondary, body#contact #inner > footer nav#secondary{ margin-left: -50px;/*width: 34% !important;*/} /*--------------------------responsive--------------------------*/ html {-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */} #collection section#main .rightCol #patterns ul .ol .li figcaption strong{font-size:12px} /*-- custom CSS --*/ .nav-collapse{ background: rgba(0, 0, 0, 0) url("../img/nav-collapse.png") no-repeat scroll 0 -5px; bottom: 0; display: none; height: 31px; position: absolute; right: 5px; bottom : 0; width: 45px; z-index: 3; pointer-events: auto; } .croix-collapse{display:none;width:45px; position:absolute;background:url(../img/croix-collapse.png) no-repeat 0 -5px;height: 45px;top: 2px;z-index: 3;} .nav-collapse:hover,.croix-collapse:hover{cursor:pointer} #productFinder .rightCol .header + h2,#productFinder .rightCol .header .aucunProduit{ font-size: 20px;line-height: 130%;margin-bottom: 1em; color:#FF0000} .socialClone{display:none} #productFinder .ui-autocomplete{/*top: 300px !important;*/} body #inner > footer nav#secondary li.pinterest0 a::before { background-position: -1px -2776px; } body #inner > footer nav#secondary li.youtube a::before { background-position: -33px -2781px; top: 5px; position: relative; } body #inner > footer nav#secondary ul li.pinterest { margin-right: 0 !important; } body#product #inner > footer nav#secondary .pinterest { margin-right: 0 !important; } @media screen and (max-width:1230px){ #patterns #palette{max-width: 610px;} .table .leftCol{max-width: 378px;} .ground #menu .inner ul li{margin-right:18px!important} body #page > footer nav#menu, body #page > footer nav#secondary{width:auto} .footer.table .col.chair.curtain, .footer.table .col{} .footer.table ul.col{margin-left: -4px;} body #page > footer nav#secondary .inner > form input{padding: 8.5px;height: auto; font-size: 16px;} input[type="text"]{font-size:14px;} /*fil de fer*/ .breadcrumbs{} #product .table .leftCol{max-width: 100%!important;} body #page > header ul#lang{ right: 40px;} /*moodboard*/ #page .main.inner #container div.kineticjs-content canvas{} #page .main.inner #container div.kineticjs-content{ max-width: 100% !important; overflow:hidden;padding:0!important; margin:0!important} #page .main.inner #container div.kineticjs-content canvas {min-height:100%!important;} #board .footer #res {width: 100%!important;overflow:hidden} #mySelection .footer .inner{} footer .decouvrezMarcato{display:none !important} body#home #inner > footer nav#secondary{width:61% !important} body#home #inner > footer .inner.menu{padding-right:0 !important} } @media screen and (max-width:979px){ #cart{ position: absolute; top: 3px ; right: 220px; } /*---------------------index amelioration---------------------*/ #page header #lang {right: 49px;top:0} #home section#main{display:block !important;margin-top:220px; position:static !important; float:left !important} #home #page section#main{margin-top:180px !important} .otherBloc {padding-bottom: 0;} .rightBlocBLigneColA .imgWrap img{max-width: 100%;} .moreStyle figure {position: absolute !important; left: 0 !important; bottom: 0 !important; top: 20% !important;} .moreStyle figure img {min-height: 0 !important; min-width: 0 !important;} .moreStyle .title {right: 0;} .moreStyle .title a{text-transform: none;} .blocright{padding-top: 0px !important;display: block !important;float: left !important;margin:10px 0px 10px 2.5%;width: 31.7%; padding-bottom: 5.5%; height: 150px;} .blocright figure {/*padding: 0 16%;*/ background-color: #b2b2b2;} .blocright .figClara{height: 70px;} .blocright .figClara img{ height: auto; max-height: 70px; width: auto;} .blocright .figCasalDiff{height: 112px;} .blocright .figCasalDiff img{max-height: 111px; max-width: 100%; width: auto;} .addpads, .moreStyle{padding-bottom: 31.8%; height: auto !important;} .w992none{display: none;} .blocResp {display: block; width: 31.7% !important; margin-left: 15px !important;} .deltaStyle {height: 250px !important;padding-top: 0px !important;width: 96.5% !important;} .inOther figure img {width: 100% !important;} /*reponsive casal*/ .imgWrap span{font-size:18px !important} #page{min-width:100%} #page header{position:absolute !important; width:100%; right:0 !important;margin-top: 20px;} #collection section#main{float:left;margin-top: 170px; margin-bottom:0} #collection .logoWrap, #product .logoWrap, #moodboard .logoWrap{/*display:block !important; margin-left: 35px !important;margin-top: 45px !important; width: 50%;*/} #product .logoWrap, #moodboard .logoWrap, #productFinder .logoWrap{/*margin-left: 10px!important;width: auto!important;*/} #productFinder .logoWrap{/*width:96% !important*/} #collection .logoWrap a img, #product .logoWrap a img, #moodboard .logoWrap a img, #productFinder .logoWrap a img{/*display:block !important;max-width:200px !important*/ } #collection .logoWrap a{width:auto !important} .inner.wrapperMenu > ul {right: 40px;} /*-------------------home page-------------------*/ #home #page header{margin-top:0} #home .title span{font-size:16px} /*#home section#main{display:block !important;margin-top:130px; position:static !important; float:left !important}*/ #home section#main .left #logo{left: 18px; position: absolute;top: 55px;} #home section#main .left #logo img{max-width:200px} #home section#main .center #centerClone{display:none} .leftCloned #centerClone{height:250px !important; overflow:hidden !important} .center .appendRightClone{display:block !important;background-color: #b2b2b2; margin-left: 2px !important;margin-right: 8px !important;} .center .appendRightClone #rightClone{width:100% !important; margin:0 !important} #home section#main .right #rightClone{display:none !important} /*left*/ #home section#main .left{width:30% !important;height: auto;margin-left: 15px !important;} #home section#main .left #news, #home section#main .left .leftCloned{ height: 250px !important; padding-top: 0 !important; margin:10px;width: 92%; } /*center*/ #home section#main .center{width: 64% !important; height:auto;} #home section#main .center .bloc{float: left;width: 47%; height:250px; margin:5px; padding:0 !important} /*right*/ #home section#main .right{margin-left: 16px !important;width: 96% !important; height: auto;margin-top: -10px !important;} #home section#main .right .block {padding-top:0 !important; width: 31.5%; padding-bottom: 5.5%; height: 147px !important; display:block !important; float:left !important; margin:10px; margin-right:0; margin-left:21px } .an .blocright, .al .blocright, .it .blocright {display: none !important;} .ligneTroisColonneA{width: 28.6% !important;margin-left: 10px !important;} #more{margin-left: 22px !important;width: 31.5% !important;} #more figure{} #find figure img{ width: 100% !important;} #home section#main .left, #home section#main .center, #home section#main .right{display:block !important; float:left; margin:5px;} /*-------------------collection-------------------*/ #collection #page header{margin-top:0} #collection section#main div.header{display:block; width:auto; padding:0 30px 0 30px;float:left;} #collection section#main div.header .col{display:block; float:left; width:30.5%;margin:10px; margin-bottom:7px; height:240px; overflow:hidden} #collection section#main div.header .col.col_4{width:97% !important} #collection section#main div.header .col.col_4 figure .imgWrap{width:50%; overflow:hidden; display:block} #collection section#main div.header .col.col_4 figcaption{width:50%; left:auto; top:0} #collection section#main div.header .col.col_4 figcaption .imgWrap{width:100% !important} #collection section#main div.header .col.col_4 .active figcaption {width:100%} #collection section#main div.header .col.col_4 figcaption .imgWrap span{/*margin-top:100px*/} #collection section#main div.header .bloc figure{ height: 240px;} #collection section#main div.header .bloc figure img, #collection section#main div.main .bloc figure img{max-width:none !important; min-height:0 !important; width:auto} #collection section#main div.header .bloc figcaption{} #collection section#main div.main{display:block; float:left;width:92%; padding:0 30px; margin:0; margin-top:0; margin-bottom:60px} #collection section#main div.main .col{display:block;float:left} #collection section#main div.main .col.col_1{width:100%} #collection section#main div.main .col.col_1 #aquaclean, #collection section#main div.main .col.col_1 #velvet{width:48%; float:left; margin:10px 0 10px 10px; height:225px} #collection section#main div.main .col.col_2{width: 61%; margin:3px 5px 5px 0; overflow:hidden} #collection section#main div.main .col.col_2 .table{} #collection section#main div.main .col.col_2 .table #colonneA{display:none} #collection section#main div.main .col.col_2 .table .col.col_1, #collection section#main div.main .col.col_2 .table .col.col_2{height:152px; overflow:hidden; width:100%} #collection section#main div.main .col.col_2 .table .col.col_1 .bloc, #collection section#main div.main .col.col_2 .table .col.col_2 .bloc{height:152px;} #collection section#main div.main .col.col_2 .table .imgWrap{ display: block !important; max-width: 231px !important;} #collection section#main div.main .col.col_2 .table .col.col_1 figure .imgWrap, #collection section#main div.main .col.col_2 .table .col.col_1 figure figcaption, #collection section#main div.main .col.col_2 .table .col.col_2 figure .imgWrap, #collection section#main div.main .col.col_2 .table .col.col_2 figure figcaption{width:50%;display: block; overflow:hidden} #collection section#main div.main .col.col_2 .table .col.col_1 figure figcaption, #collection section#main div.main .col.col_2 .table .col.col_2 figure figcaption{left:auto; top:0} #collection section#main div.main .col.col_2 .table .col.col_1 .active figcaption, #collection section#main div.main .col.col_2 .table .col.col_2 .active figcaption{width:100%} #collection section#main div.main .col.col_2 .table .col.col_1 figcaption .imgWrap, #collection section#main div.main .col.col_2 .table .col.col_2 figcaption .imgWrap{width:100% !important;} #collection section#main div.main .col.col_2 .table .col.col_1 figcaption .imgWrap span, #collection section#main div.main .col.col_2 .table .col.col_2 figcaption .imgWrap span{/*margin-top:70px*/} #collection section#main div.main .col.col_2 #colonneA, #collection section#main div.main .col.col_2 #colonneC{background:none} #collection section#main div.main .col.col_3{height: 476px;margin:10px 0 10px 10px; width:36%} #collection section#main div.main .col.col_3 #veiling.bloc{height:476px} #collection section#main div.main .col.col_3 #veiling.bloc img{height:100%;width: auto;min-width: 100%;} #collection section#main div.main .col.col_2 #colonneB{} #collection section#main div.main .col.col_2 #colonneD{margin-top:14px} /*FICHE COLLECTION*/ #collection #page #main{border-spacing:0 !important} #collection section#main .main.inner{padding:0; width:100%} #collection section#main .main.inner .table{margin:0} #collection section#main .leftCol{padding-left: 10px;} #collection section#main .rightCol{/*background-color:red; */margin-left: 30px;width: 45% !important;} #collection section#main .rightCol .header{margin-top:-10px; padding-left: 7px;padding-right: 0;width: 95%;} #collection section#main .rightCol #patterns{padding-left: 7px; float: right; width: 100% !important;} #collection section#main .rightCol #patterns ul .ol .twins{width:121px !important;} /*-------------------content-------------------*/ #page header, #content #page header, #actus #page header, #contact #page header, #productFinder #page header{margin-top:0;} #content section#main, #actus section#main, #contact section#main, #productFinder section#main{padding-top:130px} #content #inner > header .logoWrap, #actus #inner > header .logoWrap, #contact #inner > header .logoWrap, #productFinder #inner > header .logoWrap{margin-left: 30px; width:90%} #content #inner > header .logoWrap img, #actus #inner > header .logoWrap img, #contact #inner > header .logoWrap img{max-width:200px} /*-------------------product-------------------*/ #product section#main{display:block !important} #product #page header{position:static !important; margin-top:20px} #product #page #main #thumb-tray.load-item.frozen{} /*-------------------moonboard-----------------*/ #moodboard header, #moodboard section#main{display:block !important; float:left !important} #moodboard section#main{margin-top:160px} /*-------------------productFinder-------------------*/ #productFinder .containerProduitFinder .main.inner {padding:0} #productFinder .containerProduitFinder .main.inner .leftCol{min-width: 310px !important;} /*mySelection*/ .kineticjs-content{width:100% !important} /*-------------------footer-------------------*/ footer.main .ground nav#menu, body #inner > footer nav#menu{display:none !important} /*body #inner > footer nav#secondary .inner > form input{height:auto !important; padding:6px}*/ body #inner > footer nav#secondary{min-width:100%;} body #inner > footer nav#secondary ul li a span{font-size:18px} body #inner > footer{min-width:0 !important} /*END CASAL RESPONSIVE/ /*FICHE PRODUIT BAS AVEC FLECHE*/ #product div#thumb-tray.load-item.frozen{padding:10px 20px 0 20px; overflow:hidden} #product div#thumb-tray.load-item.frozen .simply-scroll-btn-left{left: -25px;background-image: url("../img/sliderLeftGris.png"); height: 74px; width: 50px;background-repeat: no-repeat; background-position: left center} #product div#thumb-tray.load-item.frozen .simply-scroll-btn-right{ right: -25px; background-image: url("../img/sliderRightGris.png"); height: 74px; width: 50px; background-repeat: no-repeat; background-position: center right } #product div#thumb-tray.load-item.frozen .simply-scroll-btn{top:17px} /*image slider HP*/ #supersized li.prevslide img, #supersized li.activeslide img, #supersized li img{position: static; max-height:1280px !important} /*image slider HP*/ .open .croix-collapse{} .nav-collapse{display:block} .homeResp{display:block!important;} /*wrapper menu*/ .wrapperMenu #menu2 {position: absolute; background-color: #e5e1de;width: 88%; height: auto !important;left: 5.5%;padding-top:5px;z-index: 1; margin-top: 0x; /*padding-bottom: 20px;*/ } .wrapperMenu #menu2 .decouvrezMarcato > span{display:none} .wrapperMenu #menu2 ul li{background:url(../img/wrapperMenu.png) no-repeat right 15px; line-height: 330%;font-size: 14px;text-transform: uppercase;display: block;} .wrapperMenu #menu2 ul .home{background: url("../img/lm_sprite-x.png")no-repeat 0 -46px; background-size: 60px auto; width: 31px; height: 25px;margin: 6px 0;} .wrapperMenu #menu2 ul li.news,.wrapperMenu #menu2 ul li.contact{background:none} .sousMenuMarcato,.sousMenuProduit{min-height: 100px; margin-bottom:0!important} .wrapperMenu #menu2 ul li a {color: #646464;text-decoration: none;} .sousMenuMarcato li, .sousMenuProduit li {line-height: 340%!important;} .wrapperMenu #menu2 ul .home a{color:transparent} .wrapperMenu #menu2 ul, .wrapperMenu #menu2 .inner.sub{text-align:left; pointer-events: auto;} .wrapperMenu #menu2 .inner.sub li{background-image:none; background-color:#FFFFFF;padding-left: 10px;} /* productFinder */ #productFinder input#ref_prod{height:auto!important; padding:10px;line-height: 1;} .rightCol .pagination > a{width:auto !important; background:none !important;text-indent: 0 !important; display: inline !important;} .containerProduitFinder .table .leftCol{width:40% !important;} .containerProduitFinder .table .rightCol{} .containerProduitFinder .table .rightCol #patterns{height: 280px;padding-left: 10px;} #productFinder .premier,#productFinder .precedent,#productFinder .next,#productFinder .dernier{color:transparent; border:none; padding:0!important} #productFinder .premier:after{content:url(../img/premier.png);} #productFinder .precedent:after{content:url(../img/precedent.png);} #productFinder .next:after{content:url(../img/next.png);} #productFinder .dernier:after{content:url(../img/dernier.png);} #productFinder .premier:after,#productFinder .next:after{position:absolute; right:0} #productFinder .dernier:after{position:absolute; left:0} #productFinder .precedent:after{ left: 0; position: absolute;} .finderPaginationPage{margin:-26px 15px -26px -10px;color: #aaa9a5;font-weight: bold;} body #page > footer nav#menu{display:none;} body #page > header #menu2.open {display: block !important;} /*------------TRAITEMENT D'AMELIORATION------------------*/ /*-----header-----*/ #page header .imgWrap{position:absolute; top:0 } header.listCollection{/*background-color:#8C8C8C !important;*/ height:115px !important} header.listCollection .imgWrap{display:block !important} #home #page header .imgWrap{margin-left:20px } #collection #page header .imgWrap, #product #page header .imgWrap{margin-left:10px } #page header.listCollection .imgWrap{margin-left:35px !important} body#product #inner > footer nav#secondary{width:100% !important} body#collection #inner > footer nav#secondary, body#productFinder #inner > footer nav#secondary, body#contact #inner > footer nav#secondary, body#content #inner > footer nav#secondary, body#actus #inner > footer nav#secondary{width:100% !important} #home #inner > footer .inner.menu, body#collection #inner > footer .inner.menu, body#productFinder #inner > footer .inner.menu, body#product #inner > footer .inner.menu, body#contact #inner > footer .inner.menu, body#content #inner > footer .inner.menu, body#actus #inner > footer .inner.menu, body#moodboard #inner > footer .inner.menu{padding:0 !important} #home .ground .menu{margin-left:0 !important} body#home #inner > footer nav#secondary, body #inner > footer nav#secondary{min-width:100% !important} body #inner > footer nav#secondary{padding-left: 50px;} /*-------------decouvrezMarcato------------------*/ #menu2 .decouvrezMarcato{ background-color: #8c8c8c; text-align: left; pointer-events: auto;} #menu2 .decouvrezMarcato img{max-width:100%} #menu2 .decouvrezMarcato:before{right: 25%; top: 180px;} } @media screen and (max-width:853px){ #product #main .leftCol #datasheet{padding:14px;} #patterns #palette{max-width: 293px;} #patterns #palette ul{margin-left:-53px;} body#home #page > header .logoWrap ul#slide-list{float: left;} .table .leftCol{} .table .leftCol #viewer ul li figure{width:100%} section#main .inner > article{} #home #page section#main{position: absolute;bottom: 120px;right: 10px;} .linux.webkit *, .linux.webkit *:before, .linux.webkit *:after, .linux.webkit .freeze .defrost, .linux.webkit .freeze .defrost *{ /*-- disable css3 transition on android --*/ -webkit-transition-property:none!important; -moz-transition-property:none!important; -ms-transition-property:none!important; -o-transition-property:none!important; transition-property:none!important; } } @media screen and (max-width:767px){ /*RESPONSIVE CASAL*/ .blocright .figClara{height: 72px;} .blocright .figCasalDiff{height: 140px;} .blocright .figCasalDiff img{ max-height: 140px; max-width: 100%;} .blocright .figClara img{width:100%} /*---------------HOME PAGE -------------------*/ #home section#main {} #home section#main .left{margin-left:0 !important} #home section#main .center .bloc{margin-right:0 !important} #home section#main .center .bloc.beta.portrait{margin-left:0 !important} .ligneTroisColonneA{margin-left:-7px !important} #home section#main .right .block{margin-left:15px} #more{margin-left:15px !important} /* #find figure {top: 30% !important;}*/ /*#more figure{left:10% !important}*/ .imgWrap span{font-size:16px !important} /*---------------COLLECTION -------------------*/ #collection section#main div.main{width:auto; padding-right: 10px;} #collection section#main div.header .col{margin-right:0; width: 31%;} #collection section#main div.main .col.col_1 #aquaclean, #collection section#main div.main .col.col_1 #velvet{width: 45.5%;} #collection section#main div.main .col.col_2{width:56%; margin-bottom:0} /*-------------------FICHE COLLECTION-------------------*/ #collection section#main .rightCol{width:100% !important; margin:0 !important} #collection section#main .rightCol #patterns .shortcuts{padding-left:10px} /*---------------PRODUCT FINDER---------------*/ #productFinder #main.containerProduitFinder .rightCol{width:100% !important} #productFinder #main.resultat{margin-bottom:10em} /*FOOTER*/ body #inner > footer nav#secondary{width:auto} body #inner > footer{min-width: 100% !important;} body #inner > footer nav#secondary ul li a span{font-size:15px} .resauxSociaux:hover{cursor:pointer} #social{display:none !important} #social.open,.socialClone{display:block !important} .fr .addpads, .moreStyle {padding-bottom: 0 !important;} .an .addpads, .it .addpads, .al .addpads {padding-bottom: auto !important} .blocright {padding-top: 0px !important;width: 31.5%;padding-bottom: 0px;height: 221px !important;display: block !important;float: left !important; margin: 10px 0px 10px 3%;} #home section#main .right .block{height: 221px !important;} /*.blocright figure { padding: 0 20%;}*/ /*END RESPONSIVE CASAL*/ /*resauxSociaux*/ .resauxSociaux{display:block!important; width:44px; height:44px; background:url(../img/resauxSociaux.png) no-repeat; position: absolute; right: 0;top: 8px;background-size: 35px 35px;} body #page > footer nav#secondary .inner > ul#social{display:none;} body #page > footer nav#secondary .inner > ul#social.open{display:block;} #social{ background-color: #ECE9E7;position: absolute !important; bottom: 58px;right:0} #social li{display:block!important; margin:-6px 1px -6px 6px!important;} section#main .inner > article{max-height: 100%!important;} #patterns #palette{max-width: 585px;} #patterns #palette ul{margin-left:-53px;} body #page > header .logoWrap{} body #page > footer nav#menu{display:none} section#main .inner > article{} header .inner #lang {position: relative;right: 40px;} ul#collection li{ margin-right: 0 !important;} #collection #main > .inner > div.table .leftCol{display:none} article.carte {min-width: 93% !important; padding-top: 100%; width: 100%;} article.carte #carte{left:20px;} article.contact{min-width: 93%;} .blackBoard{display:block!important} /* #product .table .rightCol{display:none!important;} -09.04.2015*/ /*col left*/ /*PRODUIT FINDER JS*/ #productFinder .table .rightCol, #productFinder .table .leftCol{display:block!important;width: auto !important;} #productFinder #search h2.header:hover,.finderFermer:hover{cursor:pointer} #productFinder #search h2.header{background-image: url("../img/productFinderHeader.png");background-position: 202px center; background-repeat: no-repeat;font-size: 1.5em;max-width: 205px; padding-left: 10px; padding-right: 10px;text-align: left;} .finderFermer{background-image: url("../img/lm_sprite-x.png");background-position: -32px -480px;float: right;height: 32px;position: absolute;right: 10px;top: 14px;width: 32px;} #search.closed .finderFermer{background-position: 0 -480px;} .containerProduitFinder .table .rightCol #patterns{ height: 145px;} #search.closed #mainFinder{display:none;} #mySelection body #page > footer {position:relative;} /*body #inner > footer .ground{ background-color: #737373 !important;}*/ } @media screen and (max-width:640px){ #home #page section#main{position:static;} body#home #page > header .logoWrap ul#slide-list{margin-bottom:10px;} .wrapperMenu #menu2{width:100%;left:0;right:0;} .blocright{padding-bottom: 0;} } @media screen and (max-width:568px){ body #page > header .logoWrap { width: 100%; } } @media screen and (max-width:532px){ .blocright .figClara { height: 62px; } .blocright .figCasalDiff { height: 79px; } .blocright .figCasalDiff img { height: auto; max-width: 100%; } /*---------------------index amelioration---------------------*/ #page header .imgWrap{top:40px !important; } #page header .imgWrap img{max-width:250px; margin-top:0 !important} body#home section#main{margin-bottom:2em !important} /*----- index amelioration 04-04---*/ .deltaStyle{margin-left: 3px !important;} .addpads {height: auto;} .blocResp{margin-left:3px !important;} .addpads, .moreStyle {padding-bottom: 0 !important;} .blocright{margin-left: 15px; height: 150px;} .blocright figure {padding:0;} /*---------------------------------*/ /*RESPONSIVE CASAL*/ #page #main{border-spacing:0px !important} /*--------------home page-----------------*/ #home section#main .left{width:100% !important;margin-bottom: -15px;} #home section#main .left #news, #home section#main .left .leftCloned{ width: 47%; margin-right:0 !important; margin-left:5px !important; float:left; height:150px !important; overflow:hidden} #home section#main .left .leftCloned figure{height:150px !important} #home section#main .center{width:98% !important;margin-left: 6px;} #home section#main .center .bloc{margin-left: 2px; margin-right: -10px !important; width:48% ;margin-bottom: 0 !important;height:150px !important} .center .appendRightClone #rightClone{min-width:100% !important;} .center .appendRightClone{margin-left:-1px !important} #home section#main .right{margin-left:5px !important;width:94.5% !important;} #home section#main .right .block{margin-right: -12px;width: 33%; height:150px !important;} .an .right .block {padding-bottom: 0 !important;} .an .right .block, .al .right .block, .it .right .block {padding-bottom: 0 !important;} .ligneTroisColonneA{ margin-right: -12px !important; width: 33% !important;} .bloc figcaption .title a span{/*margin:0 5px !important*/} #more figure img{width: 100% !important;} /*collection*/ #collection section#main div.header{width:100%; padding:0} #collection section#main div.header .col, #collection section#main div.header .col.col_4{width:45% !important; height:150px} #collection section#main div.header .col, #collection section#main div.header .col.col_4{width:45% !important; height:150px} #collection section#main div.header .col.col_4 .active figcaption span{/*margin-top:70px !important*/} #collection section#main div.header .bloc figure{height:150px} #collection section#main div.header .col.col_4 figure .imgWrap{width:auto !important} #collection section#main div.header .col.col_4 figcaption{left:0; top: 84%; width:auto} #collection section#main div.header .col.col_4 figcaption{left:0; top: 74%; width:auto} #collection section#main div.main{padding:0 !important; width:100% !important} #collection section#main div.main .col.col_2{width:49%;margin-top: 13px;margin-bottom: 10px;} #collection section#main div.main .col.col_2 .table {display:block; width:100% !important;margin-left: 10px;} #collection section#main div.main .col.col_2 .table .col.col_1 figure figcaption, #collection section#main div.main .col.col_2 .table .col.col_2 figure figcaption{left:0; top: 52%; width:94% !important} #collection section#main div.main .col.col_2 .table .col.col_1 figure .imgWrap, #collection section#main div.main .col.col_2 .table .col.col_1 figure figcaption, #collection section#main div.main .col.col_2 .table .col.col_2 figure .imgWrap, #collection section#main div.main .col.col_2 .table .col.col_2 figure figcaption{width:100%} #collection section#main div.main .col.col_2 .table .col.col_1 figcaption .imgWrap span, #collection section#main div.main .col.col_2 .table .col.col_2 figcaption .imgWrap span{/*margin-top:7px !important*/} #collection section#main div.main .col.col_2 .table .imgWrap{ display: block !important; max-width: none !important;} #collection section#main div.main .col.col_2 .table .col.col_1 figure figcaption, #collection section#main div.main .col.col_2 .table .col.col_2 figure figcaption{ width: 100%!important; } #collection section#main div.main .col.col_2 #colonneD{margin-top: 10px;} #collection section#main div.main .col.col_3{width: 43.5%;margin-top: 15px;} #collection .logoWrap{margin-left: 0 !important; width: auto;} #collection section#main{margin-top: 140px;} /*contenu*/ #content #inner > header .logoWrap, #actus #inner > header .logoWrap, #contact #inner > header .logoWrap, #productFinder #inner > header .logoWrap{margin-left: 10px; width:90%} /*product*/ #product .table .leftCol{/*background-color:red !important;*/ min-width:50% !important} /*product finder*/ #productFinder .containerProduitFinder .main.inner .leftCol{margin-left: 10px;} #productFinder #main.containerProduitFinder .rightCol{ margin-left: 10px;width: 95% !important;} #productFinder #inner > footer{position:fixed !important} /*FOOTER*/ body #inner > footer{position:static; float:left} body #inner > footer #secondary {margin-left:-10px !important} body #inner > footer #secondary li a span.selection, body #inner > footer #secondary li.login a span{display:none} body #inner > footer nav#secondary .inner > form{margin:0} body #inner > footer nav#secondary .inner > form #txtSearch{max-width:107px; border-radius:0; border:none !important} body #inner > footer nav#secondary ul#options li{margin:0 !important} body #inner > footer nav#secondary{padding-left:0 !important} /*END RESPONSIVE CASAL*/ /*image slider HP*/ #home section#main .left #logo{left:2px} #product #main .leftCol #datasheet .ajoutMaSelection{float:none} #supersized li.prevslide img, #supersized li.activeslide img, #supersized li img{position: relative !important;} /*image slider HP*/ .logoWrap a img{width: 100%;} section#main .inner > article{max-width: 100%;max-height: 240px; overflow:hidden;} .ground .inner.menu{max-height: 60px;} section#main .inner > article #slidecaption:after{height: 180px;} body #page > footer{position: static;bottom: 0;} body #page > footer.main{position: static;bottom: 0;} .vide{height:50px} body#home #main{bottom:0} body #page > footer nav#secondary{ margin-left: -10px; min-width: 303px; text-align: left;} body #page > footer nav#secondary ul li a span{display:none} #home #page section#main{position:static} div.li.pattern .defrost em, div.li.pattern .defrost strong{font-size:16px!important} #thumb-tray #thumb-list{} #thumb-tray #thumb-list li{margin-right: 23px !important;margin-bottom: 15px;} body #page > footer nav#secondary .inner > form {margin-left:0} body #page > footer nav#secondary .inner > form input{max-width: 107px;margin-left: -3px;} #secondary #options .login{margin-left:0} #patterns ul .ol{} #patterns #palette > ul > li .simply-scroll.simply-scroll-container .simply-scroll-clip{width:100%!important} .pagination a{padding:5px!important} #productFinder #patterns.frozen.results{padding-left: 15px;} #patterns.frozen h2{margin-left: -12px;} #product #mySelection div.inner.frozen{padding: 0;} #mySelection{} } @media screen and (max-width:480px){ .form p.line > label:after{display:none;} } @media screen and (max-width:383px){ /*---------------------index amelioration---------------------*/ /*#page header .imgWrap{margin-top: 12%;}*/ .footer.table .col.chair.curtain, .footer.table .col{display:block!important;} .footer.table ul.col{margin-left: -4px;} .popin .main, .popin .header, .popin .footer{padding:15px 0!important} .form p.line > label{width: 42%!important} .form p {display: block;padding-left: 10px;padding-right: 10px;} .form p.line > label{text-align:left;width:auto;display:block;} .form p.line > .inputWrap{display:block;width:auto;} } /*-- POPUP LOGIN --*/ .popin .header{ text-transform: uppercase; font-size: 18px; } .popin .subheader{ font-size: 14px; padding-left: 15px; padding-right: 15px; padding-top: 15px; text-align: center; padding-bottom: 15px; } #login.popin a { font-size: 14px; color: #444444; text-decoration: underline; } #login.popin .footer{ padding-top: 0; } #login.popin .footer a{ display: block; margin-bottom: 30px; } /*-- END: POPUP LOGIN --*/ /*-- #myPanel --*/ #myPanel{ background-image:url(../img/bg_white-75a.png); position:relative; bottom:-400px; } #myPanel .inner { margin: 0 auto; max-width: 1200px; padding: 0 10px; width: auto; } #myPanel.active{ bottom:0; } #myPanel .header h2{ color: white; font-size: 20px; font-weight: normal; height: 3em; line-height: 3em; margin-bottom: 1px; text-align: center; text-transform: uppercase; } #myPanel .header h2:before{ background-image: url("../img/lm_sprite-x.png"); background-position:0 -560px; display:inline-block; display:inline!ie7; zoom:1; width:28px; height:28px; content:""; vertical-align:-6px; margin-right:10px; } #myPanel .header h2.selectionFilled:before{ background-position:-28px -242px; } #myPanel .header a.close{ display: block; padding: 1em 0; text-align: center; background-image:url(../img/bg_white-75a.png); } #myPanel .header a.close:before{ background-image: url("../img/lm_sprite-x.png"); background-position:0 -2556px; display:inline-block; display:inline!ie7; zoom:1; content:""; width:3.2em; height:1.6em; } #myPanel .header a.close:hover:before{ background-position:-32px -2556px; } #myPanel{ border-bottom:solid 1px transparent; } #myPanel .main ul{ /*margin-bottom:3em!important;*/ } #myPanel .main:after{ display: block; content: ""; clear: both; float: none; } #myPanel .main ul li.thumb figure ul.opt { margin-bottom: 0; position: absolute; right: -100%; top: 5px; } #myPanel .main ul li.thumb:hover figure ul.opt{ right: 0%; } #myPanel .main ul li.thumb figure ul.opt li { background-image: url("../img/bg_black-50.png"); margin: 0; padding: 0; } #myPanel .main ul li.thumb figure ul.opt li a { background-image: url("../img/lm_sprite-x.png"); background-position: 0 -2432px; display: block; height: 32px; width: 32px; } #myPanel .main ul li.thumb figure ul.opt li a:hover { background-position:-32px -2432px; } #myPanel .main ul li{ display:inline-block; display:inline!ie7; zoom:1; vertical-align:top; margin-right:1em; margin-bottom:2em; } #myPanel .main ul li a{ color:black; text-decoration:none; } #myPanel .main ul li.thumb .imgWrap{ display:inline-block; display:inline!ie7; zoom:1; width:13.2em; height:12.4em; border:solid 1px #666666 } #myPanel .main ul li.thumb figure{ position:relative; overflow:hidden; } #myPanel .main ul li.thumb figure:after{ background-image:url("../img/bg_white-80.png"); position:absolute; top:0; right:0; width:3.2em; height:3.2em; } #myPanel .main ul li.thumb figcaption{ background-image:url("../img/bg_white-80.png"); /*padding:1em;*/ text-align:center; width: 134px; padding:10px 0; min-height: 70px; } #myPanel .main ul li.thumb figcaption .ref, #myPanel .main ul li.thumb figcaption .refSelection{ font-size:1.4em; display:block; margin-bottom:1em; } #myPanel .main ul li.thumb figcaption strong{ font-size:1.4em; font-weight:bold; color: #000; } #myPanel .main ul#myPanelLinks{ padding-top: 22px; } #myPanel .main ul#myPanelLinks li.link:hover{ -webkit-box-shadow: 0 0 20px -10px black; -moz-box-shadow: 0 0 20px -10px black; -ms-box-shadow: 0 0 20px -10px black; -o-box-shadow: 0 0 20px -10px black; box-shadow: 0 0 20px -10px black; } #myPanel .main ul#myPanelLinks li.link strong{ color: #fff; line-height: 2.6em; height: 2.6em; display: block; } #myPanel .main ul#myPanelLinks li.link{ background-image: url("../img/bg_black-80a.png"); color: white; font-size: 1.6em; text-align: center; text-transform: uppercase; width: 134px; } #myPanel .main ul#myPanelLinks li.link a{ display: inline-block; display: inline!ie7; zoom:1; padding-top: 17px; padding-bottom: 10px; width: 100%; } #myPanel .main ul#myPanelLinks li.link a:before{ display: block; content: ""; width: 70px; height: 64px; margin-left: auto; margin-right: auto; background-image: url("../img/lm_sprite.png"); margin-bottom: 17px; } #myPanel .main ul#myPanelLinks li.link.command a:before{ background-position: -282px 0; } #myPanel .main ul#myPanelLinks li.link.reserve a:before{ background-position: -352px 0; } #myPanel .main ul#myPanelLinks li.link.sample a:before{ background-position: -422px 0; } #myPanel .main ul#myPanelLinks li.link.stock a:before{ background-position: -492px 0; } #myPanel .main ul#myPanelLinks li.link.account a:before{ background-position: -562px 0; } #myPanel .main ul#myPanelLinks li.link a strong span{ line-height: 1.3em; vertical-align: middle; display: inline-block; display: inline!ie7; zoom:1; } #myPanel .main ul#myPanelUserLinks{ float: right; padding-top: 22px; } #myPanel .main ul#myPanelUserLinks li{ display: block; margin-right: 0; margin-bottom: 10px; } #myPanel .main ul#myPanelUserLinks li a.button:before{ display:inline-block; display:inline!ie7; zoom:1; background-image:url(../img/lm_sprite-x.png); background-position:0 -640px; width:28px; height:28px; content:""; vertical-align:middle; margin-right:10px; } #myPanel .main ul#myPanelUserLinks li a.button:hover{ -webkit-box-shadow: 0 0 20px -10px black; -moz-box-shadow: 0 0 20px -10px black; -ms-box-shadow: 0 0 20px -10px black; -o-box-shadow: 0 0 20px -10px black; box-shadow: 0 0 20px -10px black; } #myPanel .main ul#myPanelUserLinks li a.button{ background-image:none; background-color:transparent; background-image: url("../img/bg_black-80a.png"); width:auto; height:31px; line-height: 31px; vertical-align:middle; color:#575555; padding:0 7px; font-size:1.2em; margin:0; margin-left:10px; display: block; color: #CCC; width: 156px; font-family: Arial, sans-serif; margin-left: auto; margin-right: auto } #myPanel .main ul#myPanelUserLinks li.command a.button:before{ background-position:0 -2572px; } #myPanel .main ul#myPanelUserLinks li.command a.button:hover:before{ background-position:-28px -2572px; } #myPanel .main ul#myPanelUserLinks li.reservation a.button:before{ background-position:0 -2600px; } #myPanel .main ul#myPanelUserLinks li.reservation a.button:hover:before{ background-position:-28px -2600px; } #myPanel .main ul#myPanelUserLinks li.sample a.button:before{ background-position:0 -2628px; } #myPanel .main ul#myPanelUserLinks li.sample a.button:hover:before{ background-position:-28px -2628px; } #myPanel .main ul#myPanelUserLinks li.logout a.button:before{ background-position:0 -2719px; } #myPanel .main ul#myPanelUserLinks li.logout a.button:hover:before{ background-position:-28px -2719px; } @media screen and (max-width:850px) and (min-width:480px){ #myPanel .main ul#myPanelLinks{ padding-top: 22px; } #myPanel .main ul#myPanelLinks li{ display: inline-block; display: inline!ie7; zoom:1 } #myPanel .main ul#myPanelLinks li.link:hover{ -webkit-box-shadow: 0 0 20px -10px black; -moz-box-shadow: 0 0 20px -10px black; -ms-box-shadow: 0 0 20px -10px black; -o-box-shadow: 0 0 20px -10px black; box-shadow: 0 0 20px -10px black; } #myPanel .main ul#myPanelLinks li.link strong{ color: #fff; line-height: 2.6em; height: 2.6em; display: block; font-family: "Kozuka Gothic Pro EL",Arial; } #myPanel .main ul#myPanelLinks li.link{ background-image: url("../img/bg_black-80a.png"); color: white; font-size: 1.2em; margin-left: 10px; padding-left: 5px; padding-right: 5px; text-align: center; text-transform: uppercase; width: 75px; } #myPanel .main ul#myPanelLinks li.link a{ display: inline-block; display: inline!ie7; zoom:1; padding-top: 8px; padding-bottom: 5px; width: 100%; } #myPanel .main ul#myPanelLinks li.link a:before{ display: block; content: ""; width: 35px; height: 32px; margin-left: auto; margin-right: auto; background-image: url("../img/lm_sprite.png"); margin-bottom: 8px; } #myPanel .main ul#myPanelLinks li.link.command a:before{ background-position: -282px -64px; } #myPanel .main ul#myPanelLinks li.link.reserve a:before{ background-position: -317px -64px; } #myPanel .main ul#myPanelLinks li.link.sample a:before{ background-position: -352px -64px; } #myPanel .main ul#myPanelLinks li.link.stock a:before{ background-position: -387px -64px; } #myPanel .main ul#myPanelLinks li.link.account a:before{ background-position: -422px -64px; } #myPanel .main ul#myPanelLinks li.link a strong span{ line-height: 1.3em; vertical-align: middle; display: inline-block; display: inline!ie7; zoom:1; } } @media screen and (max-width:480px){ #myPanel .main ul li { margin-left: 5px!important; margin-right: 5px!important; } #myPanel .main ul#myPanelUserLinks{ float: none; } #myPanel .main ul#myPanelLinks{ text-align: center; } } /*-- end: #myPanel --*/ /*-- cart --*/ body #inner > header div#cart{ display: inline-block; display: inline!ie7; zoom: 1; height: 31px; line-height: 31px; vertical-align: top; background-image: url("../img/bg_black-80a.png"); padding-left: 5px; padding-right: 16px; color: #fff; font-size: 14px; } body #inner > header div#cart:before { display: inline-block; display: inline!ie7; zoom: 1; content: ""; width: 42px; height: 31px; vertical-align: middle; background-image: url(../img/lm_sprite-x.png); background-position: 0 -2656px; margin-right: 12px; } body #inner > header.listCollection div#cart{ display: block; float: right; margin: -32px 0 0; } /*-- end: cart --*/ /*#page header.listCollection #lang{right: 100px;}*/ /*-- user buttons --*/ ul.myPanelLinks{ padding-top: 22px; text-align: right; font-family: "Kozuka Gothic Pro EL",Arial; } ul.myPanelLinks li{ display: inline-block; display: inline!ie7; zoom:1 } ul.myPanelLinks li.link:hover{ -webkit-box-shadow: 0 0 20px -10px black; -moz-box-shadow: 0 0 20px -10px black; -ms-box-shadow: 0 0 20px -10px black; -o-box-shadow: 0 0 20px -10px black; box-shadow: 0 0 20px -10px black; } ul.myPanelLinks li.link strong{ color: #fff; line-height: 2.6em; height: 2.6em; display: block; font-family: "Kozuka Gothic Pro EL",Arial; } ul.myPanelLinks li.link{ background-image: url("../img/bg_black-80a.png"); color: white; font-size: 1.2em; margin-left: 10px; padding-left: 5px; padding-right: 5px; text-align: center; text-transform: uppercase; width: 85px; } ul.myPanelLinks li.link a{ display: inline-block; display: inline!ie7; zoom:1; padding-top: 8px; padding-bottom: 5px; width: 100%; cursor: pointer; } ul.myPanelLinks li.link a:before{ display: block; content: ""; width: 35px; height: 32px; margin-left: auto; margin-right: auto; background-image: url("../img/lm_sprite.png"); margin-bottom: 8px; } ul.myPanelLinks li.link.command a:before{ background-position: -282px -64px; } ul.myPanelLinks li.link.reserve a:before{ background-position: -317px -64px; } ul.myPanelLinks li.link.sample a:before{ background-position: -352px -64px; } ul.myPanelLinks li.link.stock a:before{ background-position: -387px -64px; } ul.myPanelLinks li.link a strong span{ line-height: 1.3em; vertical-align: middle; display: inline-block; display: inline!ie7; zoom:1; } /*--#mySlection--*/ #mySelection .main:after{ display: block; content: ""; clear: both; float: none; } #mySelection .main ul.myPanelLinks { float: right; } #mySelection .main ul#listeSelection { max-height: 260px !important; overflow-y: scroll; } /*--#mySlection--*/ /*-- end: user buttons --*/ @media screen and (max-width:360px){ #mySelection .main ul.myPanelLinks{ float: none; margin-left: 20px; margin-right: 20px; text-align: center; } #mySelection .main ul.myPanelLinks li{ display: block; } #mySelection .main ul{ text-align: center; } } /*----------------popup----------------*/ .popin.popupConfirm{ max-width: 600px !important; width: 100% !important; background:rgba(0, 0, 0, 0) url("../img/bg_img_1.jpg") repeat scroll 0 0} a:focus{outline:none !important} body#collection #page header ul#userMenu a{color:#000 !important} .inner.wrapperMenu ul { pointer-events: auto;} /*----userMenu------*/ footer.main #myPanel{display:none !important} @media screen and (max-width:992px){ body #page header #userSubMenu .userSubMenuInner{min-width:100%; width: 100%;} body #page header #userSubMenu .rightSubMenu li{width: 49%; display: inline-block; vertical-align: middle;} body #page header #userSubMenu .rightSubMenu li a{text-align: center; height: auto; margin-bottom: 5px; line-height:110%} body #page header #userSubMenu .rightSubMenu li a::before{display:block; margin: 0 auto;} body #page header #userSubMenu .leftSubMenu li.link{ width: 22.5%;} footer #secondary .inner{/*max-width: 500px;*/ text-align: center;} body#product header .inner.wrapperMenu{ top: 20px;} body#product .nav-collapse{top: 83px;} body#product .wrapperMenu #menu2{top: 114px;} body #inner > header .inner{pointer-events: none;} .popup #externalFrame.popin{max-width: 700px; width: 100%; } .popup #externalFrame_login.popin{max-width: 700px; width: 100%; } #collection .main.table .col_2 #colonneB #printed .title .imgWrap, #collection .main.table .col_2 #colonneC .title .imgWrap, #collection .main.table .col_2 #colonneD .title .imgWrap{display: block; /*min-height: 160px;*/} } @media screen and (max-width:532px){ body #page header #userSubMenu .leftSubMenu li.link{width:45%} footer #secondary .inner{max-width: 320px;} body #inner > footer .ground{background-color: #A8AAAC!important; } body #inner > footer nav#secondary .inner > ul, body #inner > footer nav#secondary .inner > form{margin-right: 40px;} ul.myPanelLinks li.link{width: 100% !important; margin:0 auto; margin-bottom: 10px;} } @media only screen and (max-width: 1024px){ .inOther{width: 48% !important;} .styleLink {font-size: 11px;} .addpads {margin-bottom: 5.5% !important;} .moreStyle{padding-bottom: 20.5%;} } #content .breadcrumbs{margin-bottom:0} #content .wysiwyg img{margin-top:0; padding-top:0} .an .blocright .imgWrap, .it .blocright .imgWrap, .al .blocright .imgWrap{display: block; height: 0; overflow: hidden;} .an .blocright, .al .blocright, .it .blocright {float: left;} .blocClara{ display: block; margin-bottom: 9px;} .btnRead{position: absolute; bottom: 10px; right: 0;} .wysiwygActus ol, .wysiwygActus ul{ padding-left: 380px;} @media only screen and (max-width: 532px){ article .wysiwygActus .imgWrap.main{float:none} .wysiwygActus ol, .wysiwygActus ul{ padding-left: 0;} } #actus #page #main{margin-bottom:80px} /*MODIF TOLOTRA*/ @media only screen and (max-width: 800px),screen and (max-width: 960px){ #rightFirst{ width: 50%; float: left !important; } #actus{ margin-left: 0 !important; width: 100% !important; } .blocright { float: left; width: 48.5%; height: 137px !important; margin-left: 4px; } .blocright .figCasalDiff,.blocright .figCasalDiff img { height: 170px !important; max-height: 170px !important; } .moreStyle{ margin-left: 4px !important; margin-top: -5px !important; max-height: 90px; width: 48.5% !important; } } @media only screen and (max-width: 853px){ .moreStyle{ margin-left: 4px !important; margin-top: -5px !important; max-height: 95px; width: 48.5% !important; } } @media only screen and (max-width: 800px){ .moreStyle{ margin-left: 4px !important; margin-top: -5px !important; max-height: 90px; width: 48.5% !important; } } @media only screen and (max-width: 768px){ .moreStyle{ margin-left: 4px !important; margin-top: -4px !important; max-height: 86px; width: 48.5% !important; } } @media only screen and (max-width: 670px), screen and (max-width: 719px){ #actus{ margin-left: 0 !important; width: 100% !important; } .blocright { float: left; width: 48.5%; height: 137px !important; margin-left: 4px; } .moreStyle{ margin-left: 4px !important; margin-top: 43px !important; max-height: 156px; width: 48.5% !important; } } @media only screen and (max-width: 640px){ #home section#main .right{ margin-left: 5px !important; } #rightFirst{ width: 50%; float: left !important; } #actus{ margin-left: 0 !important; width: 100% !important; } .blocright { float: left; width: 48.5%; height: 137px !important; margin-left: 4px; } .moreStyle{ margin-left: 4px !important; margin-top: 30px !important; max-height: 162px; width: 48.5% !important; } } @media only screen and (max-width: 600px){ .moreStyle{ margin-left: 4px !important; margin-top: 30px !important; max-height: 155px; width: 48.5% !important; } } @media only screen and (max-width: 600px){ .moreStyle{ margin-left: 4px !important; margin-top: 30px !important; max-height: 143px; width: 48.5% !important; } } @media only screen and (max-width: 480px){ .moreStyle{ width: 49% !important; /*max-height: 60px !important;*/ } .moreStyle figure { opacity: 1; top: -10% !important; } .blocright .figCasalDiff,.blocright .figCasalDiff img { height: 150px !important; } .moreStyle{ max-height: 80px !important; margin-top: 10px !important; } } @media only screen and (max-width: 400px){ .moreStyle{ margin-left: 4px !important; margin-top: 12px !important; max-height: 63px !important; width: 48.5% !important; } .moreStyle figure { top: -10% !important; opacity: 0; } } @media screen and (max-width: 360px){ .moreStyle{ width: 49% !important; max-height: 59px !important; margin-top: 10px !important; } #more{ height: 52px !important; } .moreStyle figure { top: -10% !important; opacity: 0; } .blocright .figCasalDiff { height: 150px !important; } } @media only screen and (max-width: 320px){ #rightFirst{ width: 50%; float: left !important; } .figClara img{ width: 100%; } #actus{ margin-left: 0 !important; width: 100% !important; } .blocright { float: left; width: 48.5%; height: 137px !important; margin-left: 4px; } .blocright .figCasalDiff img { max-height: 150px; max-width: 100%; } .blocright .figCasalDiff { height: 150px; } .moreStyle{ width: 49% !important; max-height: 52px !important; margin-top: 10px !important; } #more{ height: 52px !important; } .moreStyle figure { top: -10% !important; opacity: 0; } } #adresse_1 { width: 76%; float: right; margin-right: 17px; margin-left: 20px; margin-bottom: 10px; } #productFinder #page #main .inner { max-width: 1260px; margin-bottom: 9rem; } #productFinder #page #main .inner .leftCol { background-color: #7d7e7f; color: #fff; font-size: 14px; max-width: 362px; margin-right: 15px; width: 100% !important; min-width: unset; } #productFinder #page #main .inner .rightCol { font-size: 14px; max-width: 903px; width:100% !important; } #productFinder #page #main .inner .rightCol #patterns > ul { display: flex; flex-wrap: wrap; } #productFinder #page #main .inner .rightCol #patterns > ul li { margin: 0; border: 0; width:20%; } #productFinder #page #main .inner .rightCol #patterns > ul li a { overflow: hidden; display: flex; justify-content: center; align-items: center; } #productFinder #page #main .inner .rightCol #patterns > ul li a figure { position: relative; border: 1px solid #666; margin: 5px; height: 100%; max-height: 169px; width: 96%; } #productFinder #page #main .inner .rightCol #patterns > ul li a figure figcaption{ height: 12.1em; } #productFinder #page #main .inner .rightCol #patterns { padding: 0 5px; } #productFinder #page #main .inner .rightCol #patterns > ul li a figure img { width: 100%; height: 100%; margin: 0; } #productFinder #page #main .inner .leftCol #search .main { background-image: none !important; padding: 20px 20px 0 !important; } #productFinder #page #main .inner .leftCol #search h1 { text-align: center; padding: 15px 10px; background-color: #2c2d2e; border-bottom: 1px solid #ccc; font-size: 14px; text-transform: lowercase; font-family: Arial, Helvetica, sans-serif; height: auto !important; line-height: 100%; } #productFinder #page #main .inner > .table { display: -ms-flexbox !important; display: flex !important; } #productFinder #page #main .inner .leftCol #search .main .line.keyword { margin: 0; } #productFinder #page #main .inner .leftCol #search .main h3, #productFinder #page #main .inner .leftCol #search .main h4.collapsible { padding-bottom: 0.5rem !important; margin-bottom: 1.5rem !important; margin-right: 0; font-size: 14px; line-height: 100%; } #productFinder #page #main .inner .leftCol #search .main h4.collapsible { padding: 14px !important; margin-bottom: 0 !important; margin-top: 0 !important; } #productFinder #page #main .inner .leftCol #search .main h4.collapsible.active { background: #646565; padding-bottom: 12px !important; margin-bottom: 0 !important; } #search h4.collapsible + div { padding:14px; background-color: #ffffff } #search h4.collapsible + div p { margin-bottom: 10px; } #search h4.collapsible + div label { color: #7d7e7f; padding-left: 8px } #productFinder #page #main .inner .leftCol #search .main .line.keyword input { height: 25px; padding-left: 5px; margin-bottom: 1.5rem !important; font-family: MS Shell Dlg 2; font-size: 13.3333px; color: #000; } #productFinder #page #main .inner .leftCol #search .footer { text-align: left !important; background-image: none !important; padding: 0 20px !important; } #productFinder #page #main .inner .leftCol #search .footer button { font-size: 20px; font-weight: normal !important; text-transform: uppercase; padding: 15px 35px !important; min-height: 47px; vertical-align: middle; display: flex; -webkit-display: flex; -moz-display: flex; -ie-display: flex; -o-display: flex; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; -ie-justify-content: center; -o-justify-content: center; align-items: center; height: auto; margin-left: 0; } .d-flex { display: -ms-flexbox !important; display: flex !important; } body #inner > footer nav#secondary li.youtube a::before { top: 0; } body #inner > footer nav#secondary li.pinterest0 a::before { background-position: 0px -2776px; } body #inner > footer nav#secondary li.youtube a::before { background-position: -32px -2776px; } @media screen and (max-width:767px) { #productFinder #page #main .inner { padding: 15px; } #productFinder #page #main .inner > .table { -webkit-flex-wrap: wrap; -moz-flex-wrap:wrap; -ie-flex-wrap:wrap; -o-flex-wrap:wrap; flex-wrap:wrap; } #productFinder #page #main .inner .leftCol #search { width: 100%; max-width: none; } #productFinder #page #main .inner .leftCol { max-width: 100%; margin-right: 0; } #productFinder #page #main .inner .leftCol #search .main .line.keyword input { width: 98% } #productFinder #page #main .inner .leftCol, #productFinder #page #main .inner .rightCol { margin-left: 0; margin-bottom: 2rem; } #productFinder #page #main .inner .rightCol #patterns > ul li { height: auto; margin-bottom: 1rem; } #productFinder #page #main .inner .rightCol #patterns > ul li a figure figcaption { } #productFinder #page #main .inner .rightCol #patterns > ul li a figure { } #productFinder #page #main .inner .rightCol #patterns > ul li a figure figcaption .defrost { height: 88%; } #productFinder #page #main .inner .rightCol #patterns > ul li a figure figcaption .defrost em { font-size: 12px; } #productFinder #page #main .inner .rightCol #patterns > ul li a figure figcaption .defrost strong{ font-size: 12px; } } @media screen and (max-width:575px) { #productFinder #page #main .inner .rightCol #patterns > ul li { width: 50%; } #productFinder #page #main .inner .rightCol #patterns > ul li a figure figcaption .defrost { height: 50%; } } /* modification 24-02-2021 */ .justify-content-center { -ms-flex-pack: center !important; justify-content: center !important; } .flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .d-flex { display: -ms-flexbox !important; display: flex !important; } /* end modif */ /* modification 04-03-2021 */ .p-2 { padding: 0.5rem !important; } .btn-evo2019 { font-size: 20px; font-weight: normal !important; text-transform: uppercase; padding: 15px 35px !important; min-height: 47px; vertical-align: middle; display: flex; -webkit-display: flex; -moz-display: flex; -ie-display: flex; -o-display: flex; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; -ie-justify-content: center; -o-justify-content: center; align-items: center; background-color: #5a5a5a !important; border: medium none !important; color: #ffffff !important; font-weight: bold !important; padding: 5px 10px !important; cursor: pointer !important; height: auto !important; /* display: block; */ } [class*="iconew"][class*="right"] { margin-left: 10px; } .align-items-center { -ms-flex-align: center !important; align-items: center !important; } .ml-3, .mx-3 { margin-left: 1rem !important; } .mr-3, .mx-3 { margin-right: 1rem !important; } .formfield-checkbox input[type="checkbox"], .formfield-checkbox input[type="radio"] { opacity: 0; z-index: 100; position: absolute; } .formfield-checkbox input[type="radio"] + label::before { background-position: -40px -119px; } .formfield-checkbox input[type="checkbox"] + label::before, .formfield-checkbox input[type="radio"] + label::before { content: " "; display: inline-block; width: 20px; height: 20px; min-width: 20px; position: relative; background-image: url(../img/lm_sprite.png); cursor: pointer; margin-top: 0; margin-right: 10px; vertical-align: top; } .form .footer .button, .form .footer button { margin: 0 3px; } .form .footer .button { background-color: #444546; border: medium none; color: white; cursor: pointer; /* font-size: 16px; */ font-size: 13px; margin-left: auto; padding: 12px 20px; text-transform: uppercase; }