html, body { padding: 0; margin: 0; /* height: 100%;*/ } html, body, * { -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .tile:active { outline: 0; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { max-width: 100%; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } #map_canvas img, .google-maps img { max-width: none; } button, input, select, textarea { margin: 0; font-size: 100%; vertical-align: middle; } button, input { line-height: normal; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor: pointer; } input[type="search"] { box-sizing: content-box; appearance: textfield; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } textarea { overflow: auto; vertical-align: top; } input[type=text]::-ms-clear, input[type=email]::-ms-clear, input[type=url]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear, input[type=time]::-ms-clear { display: none; } input[type=password]::-ms-reveal { display: none; } * { border-collapse: collapse; } a { text-decoration: none; } div, p, span { position: relative; } .op-default { background-color: rgba(27, 161, 226, 0.7); } .op-black { background-color: rgba(0, 0, 0, 0.7) !important; } .op-white { background-color: rgba(255, 255, 255, 0.7) !important; } .op-lime { background-color: rgba(164, 196, 0, 0.7) !important; } .op-green { background-color: rgba(96, 169, 23, 0.7) !important; } .op-emerald { background-color: rgba(0, 138, 0, 0.7) !important; } .op-teal { background-color: rgba(0, 171, 169, 0.7) !important; } .op-cyan { background-color: rgba(27, 161, 226, 0.7) !important; } .op-cobalt { background-color: rgba(0, 80, 239, 0.7) !important; } .op-indigo { background-color: rgba(106, 0, 255, 0.7) !important; } .op-violet { background-color: rgba(170, 0, 255, 0.7) !important; } .op-pink { background-color: rgba(220, 79, 173, 0.7) !important; } .op-magenta { background-color: rgba(216, 0, 115, 0.7) !important; } .op-crimson { background-color: rgba(162, 0, 37, 0.7) !important; } .op-red { background-color: rgba(206, 53, 44, 0.7) !important; } .op-orange { background-color: rgba(250, 104, 0, 0.7) !important; } .op-amber { background-color: rgba(240, 163, 10, 0.7) !important; } .op-yellow { background-color: rgba(227, 200, 0, 0.7) !important; } .op-brown { background-color: rgba(130, 90, 44, 0.7) !important; } .op-olive { background-color: rgba(109, 135, 100, 0.7) !important; } .op-steel { background-color: rgba(100, 118, 135, 0.7) !important; } .op-mauve { background-color: rgba(118, 96, 138, 0.7) !important; } .op-taupe { background-color: rgba(135, 121, 78, 0.7) !important; } .op-gray { background-color: rgba(85, 85, 85, 0.7) !important; } .op-dark { background-color: rgba(51, 51, 51, 0.7) !important; } .op-darker { background-color: rgba(34, 34, 34, 0.7) !important; } .op-transparent { background-color: rgba(0, 0, 0, 0.7) !important; } .op-darkBrown { background-color: rgba(99, 54, 47, 0.7) !important; } .op-darkCrimson { background-color: rgba(100, 0, 36, 0.7) !important; } .op-darkMagenta { background-color: rgba(129, 0, 60, 0.7) !important; } .op-darkIndigo { background-color: rgba(75, 0, 150, 0.7) !important; } .op-darkCyan { background-color: rgba(27, 110, 174, 0.7) !important; } .op-darkCobalt { background-color: rgba(0, 53, 106, 0.7) !important; } .op-darkTeal { background-color: rgba(0, 64, 80, 0.7) !important; } .op-darkEmerald { background-color: rgba(0, 62, 0, 0.7) !important; } .op-darkGreen { background-color: rgba(18, 128, 35, 0.7) !important; } .op-darkOrange { background-color: rgba(191, 90, 21, 0.7) !important; } .op-darkRed { background-color: rgba(154, 22, 22, 0.7) !important; } .op-darkPink { background-color: rgba(154, 22, 90, 0.7) !important; } .op-darkViolet { background-color: rgba(87, 22, 154, 0.7) !important; } .op-darkBlue { background-color: rgba(22, 73, 154, 0.7) !important; } .op-lightBlue { background-color: rgba(67, 144, 223, 1) !important; } .op-lightRed { background-color: rgba(218, 90, 83, 0.7) !important; } .op-lightGreen { background-color: rgba(122, 214, 29, 0.7) !important; } .op-lighterBlue { background-color: rgba(0, 204, 255, 0.7) !important; } .op-lightTeal { background-color: rgba(69, 255, 253, 0.7) !important; } .op-lightOlive { background-color: rgba(120, 170, 28, 0.7) !important; } .op-lightOrange { background-color: rgba(194, 144, 8, 0.7) !important; } .op-lightPink { background-color: rgba(244, 114, 208, 0.7) !important; } .op-grayDark { background-color: rgba(51, 51, 51, 0.7) !important; } .op-grayDarker { background-color: rgba(34, 34, 34, 0.7) !important; } .op-grayLight { background-color: rgba(153, 153, 153, 0.7) !important; } .op-grayLighter { background-color: rgba(238, 238, 238, 0.7) !important; } .op-blue { background-color: rgba(0, 175, 240, 0.7) !important; } .bg-black { background: #000000 !important; } .bg-white { background: #ffffff !important; } .bg-lime { background: #a4c400 !important; } .bg-green { background: #60a917 !important; } .bg-emerald { background: #008a00 !important; } .bg-teal { background: #00aba9 !important; } .bg-cyan { background: #1ba1e2 !important; } .bg-cobalt { background: #0050ef !important; } .bg-indigo { background: #6a00ff !important; } .bg-violet { background: #aa00ff !important; } .bg-pink { background: #dc4fad !important; } .bg-magenta { background: #d80073 !important; } .bg-crimson { background: #a20025 !important; } .bg-red { background: #ce352c !important; } .bg-orange { background: #fa6800 !important; } .bg-amber { background: #f0a30a !important; } .bg-yellow { background: #e3c800 !important; } .bg-brown { background: #825a2c !important; } .bg-olive { background: #6d8764 !important; } .bg-steel { background: #647687 !important; } .bg-mauve { background: #76608a !important; } .bg-taupe { background: #87794e !important; } .bg-gray { background: #555555 !important; } .bg-dark { background: #333333 !important; } .bg-darker { background: #222222 !important; } .bg-transparent { background: transparent !important; } .bg-darkBrown { background: #63362f !important; } .bg-darkCrimson { background: #640024 !important; } .bg-darkMagenta { background: #81003c !important; } .bg-darkIndigo { background: #4b0096 !important; } .bg-darkCyan { background: #1b6eae !important; } .bg-darkCobalt { background: #00356a !important; } .bg-darkTeal { background: #004050 !important; } .bg-darkEmerald { background: #003e00 !important; } .bg-darkGreen { background: #128023 !important; } .bg-darkOrange { background: #bf5a15 !important; } .bg-darkRed { background: #9a1616 !important; } .bg-darkPink { background: #9a165a !important; } .bg-darkViolet { background: #57169a !important; } .bg-darkBlue { background: #16499a !important; } .bg-lightBlue { background: #4390df !important; } .bg-lightRed { background: #da5a53 !important; } .bg-lightGreen { background: #7ad61d !important; } .bg-lighterBlue { background: #00ccff !important; } .bg-lightTeal { background: #45fffd !important; } .bg-lightOlive { background: #78aa1c !important; } .bg-lightOrange { background: #c29008 !important; } .bg-lightPink { background: #f472d0 !important; } .bg-grayDark { background: #333333 !important; } .bg-grayDarker { background: #222222 !important; } .bg-grayLight { background: #999999 !important; } .bg-grayLighter { background: #eeeeee !important; } .bg-blue { background: #00aff0 !important; } .fg-black { color: #000000 !important; } .fg-white { color: #ffffff !important; } .fg-lime { color: #a4c400 !important; } .fg-green { color: #60a917 !important; } .fg-emerald { color: #008a00 !important; } .fg-teal { color: #00aba9 !important; } .fg-cyan { color: #1ba1e2 !important; } .fg-cobalt { color: #0050ef !important; } .fg-indigo { color: #6a00ff !important; } .fg-violet { color: #aa00ff !important; } .fg-pink { color: #dc4fad !important; } .fg-magenta { color: #d80073 !important; } .fg-crimson { color: #a20025 !important; } .fg-red { color: #ce352c !important; } .fg-orange { color: #fa6800 !important; } .fg-amber { color: #f0a30a !important; } .fg-yellow { color: #e3c800 !important; } .fg-brown { color: #825a2c !important; } .fg-olive { color: #6d8764 !important; } .fg-steel { color: #647687 !important; } .fg-mauve { color: #76608a !important; } .fg-taupe { color: #87794e !important; } .fg-gray { color: #555555 !important; } .fg-dark { color: #333333 !important; } .fg-darker { color: #222222 !important; } .fg-transparent { color: transparent !important; } .fg-darkBrown { color: #63362f !important; } .fg-darkCrimson { color: #640024 !important; } .fg-darkMagenta { color: #81003c !important; } .fg-darkIndigo { color: #4b0096 !important; } .fg-darkCyan { color: #1b6eae !important; } .fg-darkCobalt { color: #00356a !important; } .fg-darkTeal { color: #004050 !important; } .fg-darkEmerald { color: #003e00 !important; } .fg-darkGreen { color: #128023 !important; } .fg-darkOrange { color: #bf5a15 !important; } .fg-darkRed { color: #9a1616 !important; } .fg-darkPink { color: #9a165a !important; } .fg-darkViolet { color: #57169a !important; } .fg-darkBlue { color: #16499a !important; } .fg-lightBlue { color: #4390df !important; } .fg-lighterBlue { color: #00ccff !important; } .fg-lightTeal { color: #45fffd !important; } .fg-lightOlive { color: #78aa1c !important; } .fg-lightOrange { color: #c29008 !important; } .fg-lightPink { color: #f472d0 !important; } .fg-lightRed { color: #da5a53 !important; } .fg-lightGreen { color: #7ad61d !important; } .fg-grayDark { color: #333333 !important; } .fg-grayDarker { color: #222222 !important; } .fg-grayLight { color: #999999 !important; } .fg-grayLighter { color: #eeeeee !important; } .fg-blue { color: #00aff0 !important; } .ol-black { outline-color: #000000 !important; } .ol-white { outline-color: #ffffff !important; } .ol-lime { outline-color: #a4c400 !important; } .ol-green { outline-color: #60a917 !important; } .ol-emerald { outline-color: #008a00 !important; } .ol-teal { outline-color: #00aba9 !important; } .ol-cyan { outline-color: #1ba1e2 !important; } .ol-cobalt { outline-color: #0050ef !important; } .ol-indigo { outline-color: #6a00ff !important; } .ol-violet { outline-color: #aa00ff !important; } .ol-pink { outline-color: #dc4fad !important; } .ol-magenta { outline-color: #d80073 !important; } .ol-crimson { outline-color: #a20025 !important; } .ol-red { outline-color: #ce352c !important; } .ol-orange { outline-color: #fa6800 !important; } .ol-amber { outline-color: #f0a30a !important; } .ol-yellow { outline-color: #e3c800 !important; } .ol-brown { outline-color: #825a2c !important; } .ol-olive { outline-color: #6d8764 !important; } .ol-steel { outline-color: #647687 !important; } .ol-mauve { outline-color: #76608a !important; } .ol-taupe { outline-color: #87794e !important; } .ol-gray { outline-color: #555555 !important; } .ol-dark { outline-color: #333333 !important; } .ol-darker { outline-color: #222222 !important; } .ol-transparent { outline-color: transparent !important; } .ol-darkBrown { outline-color: #63362f !important; } .ol-darkCrimson { outline-color: #640024 !important; } .ol-darkMagenta { outline-color: #81003c !important; } .ol-darkIndigo { outline-color: #4b0096 !important; } .ol-darkCyan { outline-color: #1b6eae !important; } .ol-darkCobalt { outline-color: #00356a !important; } .ol-darkTeal { outline-color: #004050 !important; } .ol-darkEmerald { outline-color: #003e00 !important; } .ol-darkGreen { outline-color: #128023 !important; } .ol-darkOrange { outline-color: #bf5a15 !important; } .ol-darkRed { outline-color: #9a1616 !important; } .ol-darkPink { outline-color: #9a165a !important; } .ol-darkViolet { outline-color: #57169a !important; } .ol-darkBlue { outline-color: #16499a !important; } .ol-lightBlue { outline-color: #4390df !important; } .ol-lighterBlue { outline-color: #00ccff !important; } .ol-lightTeal { outline-color: #45fffd !important; } .ol-lightOlive { outline-color: #78aa1c !important; } .ol-lightOrange { outline-color: #c29008 !important; } .ol-lightPink { outline-color: #f472d0 !important; } .ol-lightRed { outline-color: #da5a53 !important; } .ol-lightGreen { outline-color: #7ad61d !important; } .ol-grayDark { outline-color: #333333 !important; } .ol-grayDarker { outline-color: #222222 !important; } .ol-grayLight { outline-color: #999999 !important; } .ol-grayLighter { outline-color: #eeeeee !important; } .ol-blue { outline-color: #00aff0 !important; } .bd-black { border-color: #000000 !important; } .bd-white { border-color: #ffffff !important; } .bd-lime { border-color: #a4c400 !important; } .bd-green { border-color: #60a917 !important; } .bd-emerald { border-color: #008a00 !important; } .bd-teal { border-color: #00aba9 !important; } .bd-cyan { border-color: #1ba1e2 !important; } .bd-cobalt { border-color: #0050ef !important; } .bd-indigo { border-color: #6a00ff !important; } .bd-violet { border-color: #aa00ff !important; } .bd-pink { border-color: #dc4fad !important; } .bd-magenta { border-color: #d80073 !important; } .bd-crimson { border-color: #a20025 !important; } .bd-red { border-color: #ce352c !important; } .bd-orange { border-color: #fa6800 !important; } .bd-amber { border-color: #f0a30a !important; } .bd-yellow { border-color: #e3c800 !important; } .bd-brown { border-color: #825a2c !important; } .bd-olive { border-color: #6d8764 !important; } .bd-steel { border-color: #647687 !important; } .bd-mauve { border-color: #76608a !important; } .bd-taupe { border-color: #87794e !important; } .bd-gray { border-color: #555555 !important; } .bd-dark { border-color: #333333 !important; } .bd-darker { border-color: #222222 !important; } .bd-transparent { border-color: transparent !important; } .bd-darkBrown { border-color: #63362f !important; } .bd-darkCrimson { border-color: #640024 !important; } .bd-darkMagenta { border-color: #81003c !important; } .bd-darkIndigo { border-color: #4b0096 !important; } .bd-darkCyan { border-color: #1b6eae !important; } .bd-darkCobalt { border-color: #00356a !important; } .bd-darkTeal { border-color: #004050 !important; } .bd-darkEmerald { border-color: #003e00 !important; } .bd-darkGreen { border-color: #128023 !important; } .bd-darkOrange { border-color: #bf5a15 !important; } .bd-darkRed { border-color: #9a1616 !important; } .bd-darkPink { border-color: #9a165a !important; } .bd-darkViolet { border-color: #57169a !important; } .bd-darkBlue { border-color: #16499a !important; } .bd-lightBlue { border-color: #4390df !important; } .bd-lightTeal { border-color: #45fffd !important; } .bd-lightOlive { border-color: #78aa1c !important; } .bd-lightOrange { border-color: #c29008 !important; } .bd-lightPink { border-color: #f472d0 !important; } .bd-lightRed { border-color: #da5a53 !important; } .bd-lightGreen { border-color: #7ad61d !important; } .bd-grayDark { border-color: #333333 !important; } .bd-grayDarker { border-color: #222222 !important; } .bd-grayLight { border-color: #999999 !important; } .bd-grayLighter { border-color: #eeeeee !important; } .bd-blue { border-color: #00aff0 !important; } .bg-hover-black:hover { background: #000000 !important; } .bg-hover-white:hover { background: #ffffff !important; } .bg-hover-lime:hover { background: #a4c400 !important; } .bg-hover-green:hover { background: #60a917 !important; } .bg-hover-emerald:hover { background: #008a00 !important; } .bg-hover-teal:hover { background: #00aba9 !important; } .bg-hover-cyan:hover { background: #1ba1e2 !important; } .bg-hover-cobalt:hover { background: #0050ef !important; } .bg-hover-indigo:hover { background: #6a00ff !important; } .bg-hover-violet:hover { background: #aa00ff !important; } .bg-hover-pink:hover { background: #dc4fad !important; } .bg-hover-magenta:hover { background: #d80073 !important; } .bg-hover-crimson:hover { background: #a20025 !important; } .bg-hover-red:hover { background: #ce352c !important; } .bg-hover-orange:hover { background: #fa6800 !important; } .bg-hover-amber:hover { background: #f0a30a !important; } .bg-hover-yellow:hover { background: #e3c800 !important; } .bg-hover-brown:hover { background: #825a2c !important; } .bg-hover-olive:hover { background: #6d8764 !important; } .bg-hover-steel:hover { background: #647687 !important; } .bg-hover-mauve:hover { background: #76608a !important; } .bg-hover-taupe:hover { background: #87794e !important; } .bg-hover-gray:hover { background: #555555 !important; } .bg-hover-dark:hover { background: #333333 !important; } .bg-hover-darker:hover { background: #222222 !important; } .bg-hover-transparent:hover { background: transparent !important; } .bg-hover-darkBrown:hover { background: #63362f !important; } .bg-hover-darkCrimson:hover { background: #640024 !important; } .bg-hover-darkMagenta:hover { background: #81003c !important; } .bg-hover-darkIndigo:hover { background: #4b0096 !important; } .bg-hover-darkCyan:hover { background: #1b6eae !important; } .bg-hover-darkCobalt:hover { background: #00356a !important; } .bg-hover-darkTeal:hover { background: #004050 !important; } .bg-hover-darkEmerald:hover { background: #003e00 !important; } .bg-hover-darkGreen:hover { background: #128023 !important; } .bg-hover-darkOrange:hover { background: #bf5a15 !important; } .bg-hover-darkRed:hover { background: #9a1616 !important; } .bg-hover-darkPink:hover { background: #9a165a !important; } .bg-hover-darkViolet:hover { background: #57169a !important; } .bg-hover-darkBlue:hover { background: #16499a !important; } .bg-hover-lightBlue:hover { background: #4390df !important; } .bg-hover-lightTeal:hover { background: #45fffd !important; } .bg-hover-lightOlive:hover { background: #78aa1c !important; } .bg-hover-lightOrange:hover { background: #c29008 !important; } .bg-hover-lightPink:hover { background: #f472d0 !important; } .bg-hover-lightRed:hover { background: #da5a53 !important; } .bg-hover-lightGreen:hover { background: #7ad61d !important; } .bg-hover-grayDark:hover { background: #333333 !important; } .bg-hover-grayDarker:hover { background: #222222 !important; } .bg-hover-grayLight:hover { background: #999999 !important; } .bg-hover-grayLighter:hover { background: #eeeeee !important; } .bg-hover-blue:hover { background: #00aff0 !important; } .fg-hover-black:hover { color: #000000 !important; } .fg-hover-white:hover { color: #ffffff !important; } .fg-hover-lime:hover { color: #a4c400 !important; } .fg-hover-green:hover { color: #60a917 !important; } .fg-hover-emerald:hover { color: #008a00 !important; } .fg-hover-teal:hover { color: #00aba9 !important; } .fg-hover-cyan:hover { color: #1ba1e2 !important; } .fg-hover-cobalt:hover { color: #0050ef !important; } .fg-hover-indigo:hover { color: #6a00ff !important; } .fg-hover-violet:hover { color: #aa00ff !important; } .fg-hover-pink:hover { color: #dc4fad !important; } .fg-hover-magenta:hover { color: #d80073 !important; } .fg-hover-crimson:hover { color: #a20025 !important; } .fg-hover-red:hover { color: #ce352c !important; } .fg-hover-orange:hover { color: #fa6800 !important; } .fg-hover-amber:hover { color: #f0a30a !important; } .fg-hover-yellow:hover { color: #e3c800 !important; } .fg-hover-brown:hover { color: #825a2c !important; } .fg-hover-olive:hover { color: #6d8764 !important; } .fg-hover-steel:hover { color: #647687 !important; } .fg-hover-mauve:hover { color: #76608a !important; } .fg-hover-taupe:hover { color: #87794e !important; } .fg-hover-gray:hover { color: #555555 !important; } .fg-hover-dark:hover { color: #333333 !important; } .fg-hover-darker:hover { color: #222222 !important; } .fg-hover-transparent:hover { color: transparent !important; } .fg-hover-darkBrown:hover { color: #63362f !important; } .fg-hover-darkCrimson:hover { color: #640024 !important; } .fg-hover-darkMagenta:hover { color: #81003c !important; } .fg-hover-darkIndigo:hover { color: #4b0096 !important; } .fg-hover-darkCyan:hover { color: #1b6eae !important; } .fg-hover-darkCobalt:hover { color: #00356a !important; } .fg-hover-darkTeal:hover { color: #004050 !important; } .fg-hover-darkEmerald:hover { color: #003e00 !important; } .fg-hover-darkGreen:hover { color: #128023 !important; } .fg-hover-darkOrange:hover { color: #bf5a15 !important; } .fg-hover-darkRed:hover { color: #9a1616 !important; } .fg-hover-darkPink:hover { color: #9a165a !important; } .fg-hover-darkViolet:hover { color: #57169a !important; } .fg-hover-darkBlue:hover { color: #16499a !important; } .fg-hover-lightBlue:hover { color: #4390df !important; } .fg-hover-lightTeal:hover { color: #45fffd !important; } .fg-hover-lightOlive:hover { color: #78aa1c !important; } .fg-hover-lightOrange:hover { color: #c29008 !important; } .fg-hover-lightPink:hover { color: #f472d0 !important; } .fg-hover-lightRed:hover { color: #da5a53 !important; } .fg-hover-lightGreen:hover { color: #7ad61d !important; } .fg-hover-grayDark:hover { color: #333333 !important; } .fg-hover-grayDarker:hover { color: #222222 !important; } .fg-hover-grayLight:hover { color: #999999 !important; } .fg-hover-grayLighter:hover { color: #eeeeee !important; } .fg-hover-blue:hover { color: #00aff0 !important; } .bg-active-black:active { background: #000000 !important; } .bg-active-white:active { background: #ffffff !important; } .bg-active-lime:active { background: #a4c400 !important; } .bg-active-green:active { background: #60a917 !important; } .bg-active-emerald:active { background: #008a00 !important; } .bg-active-teal:active { background: #00aba9 !important; } .bg-active-cyan:active { background: #1ba1e2 !important; } .bg-active-cobalt:active { background: #0050ef !important; } .bg-active-indigo:active { background: #6a00ff !important; } .bg-active-violet:active { background: #aa00ff !important; } .bg-active-pink:active { background: #dc4fad !important; } .bg-active-magenta:active { background: #d80073 !important; } .bg-active-crimson:active { background: #a20025 !important; } .bg-active-red:active { background: #ce352c !important; } .bg-active-orange:active { background: #fa6800 !important; } .bg-active-amber:active { background: #f0a30a !important; } .bg-active-yellow:active { background: #e3c800 !important; } .bg-active-brown:active { background: #825a2c !important; } .bg-active-olive:active { background: #6d8764 !important; } .bg-active-steel:active { background: #647687 !important; } .bg-active-mauve:active { background: #76608a !important; } .bg-active-taupe:active { background: #87794e !important; } .bg-active-gray:active { background: #555555 !important; } .bg-active-dark:active { background: #333333 !important; } .bg-active-darker:active { background: #222222 !important; } .bg-active-transparent:active { background: transparent !important; } .bg-active-darkBrown:active { background: #63362f !important; } .bg-active-darkCrimson:active { background: #640024 !important; } .bg-active-darkMagenta:active { background: #81003c !important; } .bg-active-darkIndigo:active { background: #4b0096 !important; } .bg-active-darkCyan:active { background: #1b6eae !important; } .bg-active-darkCobalt:active { background: #00356a !important; } .bg-active-darkTeal:active { background: #004050 !important; } .bg-active-darkEmerald:active { background: #003e00 !important; } .bg-active-darkGreen:active { background: #128023 !important; } .bg-active-darkOrange:active { background: #bf5a15 !important; } .bg-active-darkRed:active { background: #9a1616 !important; } .bg-active-darkPink:active { background: #9a165a !important; } .bg-active-darkViolet:active { background: #57169a !important; } .bg-active-darkBlue:active { background: #16499a !important; } .bg-active-lightBlue:active { background: #4390df !important; } .bg-active-lightTeal:active { background: #45fffd !important; } .bg-active-lightOlive:active { background: #78aa1c !important; } .bg-active-lightOrange:active { background: #c29008 !important; } .bg-active-lightPink:active { background: #f472d0 !important; } .bg-active-lightRed:active { background: #da5a53 !important; } .bg-active-lightGreen:active { background: #7ad61d !important; } .bg-active-grayDark:active { background: #333333 !important; } .bg-active-grayDarker:active { background: #222222 !important; } .bg-active-grayLight:active { background: #999999 !important; } .bg-active-grayLighter:active { background: #eeeeee !important; } .bg-active-blue:active { background: #00aff0 !important; } .fg-active-black:active { color: #000000 !important; } .fg-active-white:active { color: #ffffff !important; } .fg-active-lime:active { color: #a4c400 !important; } .fg-active-green:active { color: #60a917 !important; } .fg-active-emerald:active { color: #008a00 !important; } .fg-active-teal:active { color: #00aba9 !important; } .fg-active-cyan:active { color: #1ba1e2 !important; } .fg-active-cobalt:active { color: #0050ef !important; } .fg-active-indigo:active { color: #6a00ff !important; } .fg-active-violet:active { color: #aa00ff !important; } .fg-active-pink:active { color: #dc4fad !important; } .fg-active-magenta:active { color: #d80073 !important; } .fg-active-crimson:active { color: #a20025 !important; } .fg-active-red:active { color: #ce352c !important; } .fg-active-orange:active { color: #fa6800 !important; } .fg-active-amber:active { color: #f0a30a !important; } .fg-active-yellow:active { color: #e3c800 !important; } .fg-active-brown:active { color: #825a2c !important; } .fg-active-olive:active { color: #6d8764 !important; } .fg-active-steel:active { color: #647687 !important; } .fg-active-mauve:active { color: #76608a !important; } .fg-active-taupe:active { color: #87794e !important; } .fg-active-gray:active { color: #555555 !important; } .fg-active-dark:active { color: #333333 !important; } .fg-active-darker:active { color: #222222 !important; } .fg-active-transparent:active { color: transparent !important; } .fg-active-darkBrown:active { color: #63362f !important; } .fg-active-darkCrimson:active { color: #640024 !important; } .fg-active-darkMagenta:active { color: #81003c !important; } .fg-active-darkIndigo:active { color: #4b0096 !important; } .fg-active-darkCyan:active { color: #1b6eae !important; } .fg-active-darkCobalt:active { color: #00356a !important; } .fg-active-darkTeal:active { color: #004050 !important; } .fg-active-darkEmerald:active { color: #003e00 !important; } .fg-active-darkGreen:active { color: #128023 !important; } .fg-active-darkOrange:active { color: #bf5a15 !important; } .fg-active-darkRed:active { color: #9a1616 !important; } .fg-active-darkPink:active { color: #9a165a !important; } .fg-active-darkViolet:active { color: #57169a !important; } .fg-active-darkBlue:active { color: #16499a !important; } .fg-active-lightBlue:active { color: #4390df !important; } .fg-active-lightTeal:active { color: #45fffd !important; } .fg-active-lightOlive:active { color: #78aa1c !important; } .fg-active-lightOrange:active { color: #c29008 !important; } .fg-active-lightPink:active { color: #f472d0 !important; } .fg-active-lightRed:active { color: #da5a53 !important; } .fg-active-lightGreen:active { color: #7ad61d !important; } .fg-active-grayDark:active { color: #333333 !important; } .fg-active-grayDarker:active { color: #222222 !important; } .fg-active-grayLight:active { color: #999999 !important; } .fg-active-grayLighter:active { color: #eeeeee !important; } .fg-active-blue:active { color: #00aff0 !important; } .bg-focus-black:focus { background: #000000 !important; } .bg-focus-white:focus { background: #ffffff !important; } .bg-focus-lime:focus { background: #a4c400 !important; } .bg-focus-green:focus { background: #60a917 !important; } .bg-focus-emerald:focus { background: #008a00 !important; } .bg-focus-teal:focus { background: #00aba9 !important; } .bg-focus-cyan:focus { background: #1ba1e2 !important; } .bg-focus-cobalt:focus { background: #0050ef !important; } .bg-focus-indigo:focus { background: #6a00ff !important; } .bg-focus-violet:focus { background: #aa00ff !important; } .bg-focus-pink:focus { background: #dc4fad !important; } .bg-focus-magenta:focus { background: #d80073 !important; } .bg-focus-crimson:focus { background: #a20025 !important; } .bg-focus-red:focus { background: #ce352c !important; } .bg-focus-orange:focus { background: #fa6800 !important; } .bg-focus-amber:focus { background: #f0a30a !important; } .bg-focus-yellow:focus { background: #e3c800 !important; } .bg-focus-brown:focus { background: #825a2c !important; } .bg-focus-olive:focus { background: #6d8764 !important; } .bg-focus-steel:focus { background: #647687 !important; } .bg-focus-mauve:focus { background: #76608a !important; } .bg-focus-taupe:focus { background: #87794e !important; } .bg-focus-gray:focus { background: #555555 !important; } .bg-focus-dark:focus { background: #333333 !important; } .bg-focus-darker:focus { background: #222222 !important; } .bg-focus-transparent:focus { background: transparent !important; } .bg-focus-darkBrown:focus { background: #63362f !important; } .bg-focus-darkCrimson:focus { background: #640024 !important; } .bg-focus-darkMagenta:focus { background: #81003c !important; } .bg-focus-darkIndigo:focus { background: #4b0096 !important; } .bg-focus-darkCyan:focus { background: #1b6eae !important; } .bg-focus-darkCobalt:focus { background: #00356a !important; } .bg-focus-darkTeal:focus { background: #004050 !important; } .bg-focus-darkEmerald:focus { background: #003e00 !important; } .bg-focus-darkGreen:focus { background: #128023 !important; } .bg-focus-darkOrange:focus { background: #bf5a15 !important; } .bg-focus-darkRed:focus { background: #9a1616 !important; } .bg-focus-darkPink:focus { background: #9a165a !important; } .bg-focus-darkViolet:focus { background: #57169a !important; } .bg-focus-darkBlue:focus { background: #16499a !important; } .bg-focus-lightBlue:focus { background: #4390df !important; } .bg-focus-lightTeal:focus { background: #45fffd !important; } .bg-focus-lightOlive:focus { background: #78aa1c !important; } .bg-focus-lightOrange:focus { background: #c29008 !important; } .bg-focus-lightPink:focus { background: #f472d0 !important; } .bg-focus-lightRed:focus { background: #da5a53 !important; } .bg-focus-lightGreen:focus { background: #7ad61d !important; } .bg-focus-grayDark:focus { background: #333333 !important; } .bg-focus-grayDarker:focus { background: #222222 !important; } .bg-focus-grayLight:focus { background: #999999 !important; } .bg-focus-grayLighter:focus { background: #eeeeee !important; } .bg-focus-blue:focus { background: #00aff0 !important; } .fg-focus-black:focus { color: #000000 !important; } .fg-focus-white:focus { color: #ffffff !important; } .fg-focus-lime:focus { color: #a4c400 !important; } .fg-focus-green:focus { color: #60a917 !important; } .fg-focus-emerald:focus { color: #008a00 !important; } .fg-focus-teal:focus { color: #00aba9 !important; } .fg-focus-cyan:focus { color: #1ba1e2 !important; } .fg-focus-cobalt:focus { color: #0050ef !important; } .fg-focus-indigo:focus { color: #6a00ff !important; } .fg-focus-violet:focus { color: #aa00ff !important; } .fg-focus-pink:focus { color: #dc4fad !important; } .fg-focus-magenta:focus { color: #d80073 !important; } .fg-focus-crimson:focus { color: #a20025 !important; } .fg-focus-red:focus { color: #ce352c !important; } .fg-focus-orange:focus { color: #fa6800 !important; } .fg-focus-amber:focus { color: #f0a30a !important; } .fg-focus-yellow:focus { color: #e3c800 !important; } .fg-focus-brown:focus { color: #825a2c !important; } .fg-focus-olive:focus { color: #6d8764 !important; } .fg-focus-steel:focus { color: #647687 !important; } .fg-focus-mauve:focus { color: #76608a !important; } .fg-focus-taupe:focus { color: #87794e !important; } .fg-focus-gray:focus { color: #555555 !important; } .fg-focus-dark:focus { color: #333333 !important; } .fg-focus-darker:focus { color: #222222 !important; } .fg-focus-transparent:focus { color: transparent !important; } .fg-focus-darkBrown:focus { color: #63362f !important; } .fg-focus-darkCrimson:focus { color: #640024 !important; } .fg-focus-darkMagenta:focus { color: #81003c !important; } .fg-focus-darkIndigo:focus { color: #4b0096 !important; } .fg-focus-darkCyan:focus { color: #1b6eae !important; } .fg-focus-darkCobalt:focus { color: #00356a !important; } .fg-focus-darkTeal:focus { color: #004050 !important; } .fg-focus-darkEmerald:focus { color: #003e00 !important; } .fg-focus-darkGreen:focus { color: #128023 !important; } .fg-focus-darkOrange:focus { color: #bf5a15 !important; } .fg-focus-darkRed:focus { color: #9a1616 !important; } .fg-focus-darkPink:focus { color: #9a165a !important; } .fg-focus-darkViolet:focus { color: #57169a !important; } .fg-focus-darkBlue:focus { color: #16499a !important; } .fg-focus-lightBlue:focus { color: #4390df !important; } .fg-focus-lightTeal:focus { color: #45fffd !important; } .fg-focus-lightOlive:focus { color: #78aa1c !important; } .fg-focus-lightOrange:focus { color: #c29008 !important; } .fg-focus-lightPink:focus { color: #f472d0 !important; } .fg-focus-lightRed:focus { color: #da5a53 !important; } .fg-focus-lightGreen:focus { color: #7ad61d !important; } .fg-focus-grayDark:focus { color: #333333 !important; } .fg-focus-grayDarker:focus { color: #222222 !important; } .fg-focus-grayLight:focus { color: #999999 !important; } .fg-focus-grayLighter:focus { color: #eeeeee !important; } .fg-focus-blue:focus { color: #00aff0 !important; } .tile-area { min-width: 100%; height: 100%; position: relative; padding: 120px 80px 0 0; overflow: hidden; } .tile-area:before, .tile-area:after { display: table; content: ""; } .tile-area:after { clear: both; } .tile-area .tile-area-title { position: fixed; top: 20px; left: 80px; font-weight: 300; font-size: 42px; line-height: 1.1; } .tile-group { margin-left: 80px; min-width: 80px; width: auto; float: left; display: block; padding-top: 40px; position: relative; } .tile-group2 { margin-left: 380px; min-width: 80px; width: auto; float: left; display: block; padding-top: 40px; position: relative; } .tile-group.one { width: 160px; } .tile-group.two, .tile-group.double { width: 320px; } .tile-group.three, .tile-group.triple { width: 480px; } .tile-group.four, .tile-group.quadro { width: 640px; } .tile-group.five { width: 800px; } .tile-group.six { width: 960px; } .tile-group.seven { width: 1120px; } .tile-group .tile-group-title { color: #ffffff; font-size: 18px; line-height: 20px; position: absolute; top: 10px; left: 0; } .tile-container { width: 100%; height: auto; display: block; margin: 0; padding: 0; } .tile-container:before, .tile-container:after { display: table; content: ""; } .tile-container:after { clear: both; } .tile { width: 150px; height: 150px; display: block; float: left; margin: 5px; background-color: #eeeeee; box-shadow: inset 0 0 1px #FFFFCC; cursor: pointer; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tile:hover { outline: #999999 solid 3px; } .tile:active { outline: 0; } .tile.no-outline { outline-color: transparent; } .tile.small-tile { width: 70px; height: 70px; } .tile.wide-tile { width: 310px; height: 150px; } .tile.wide-tile-v { height: 310px; width: 150px; } .tile.large-tile { width: 310px; height: 310px; } .tile.big-tile { width: 470px; height: 470px; } .tile.super-tile { width: 630px; height: 630px; } .tile-square { width: 150px; height: 150px; display: block; float: left; margin: 5px; background-color: #eeeeee; box-shadow: inset 0 0 1px #FFFFCC; cursor: pointer; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: visible; } .tile-square:hover { outline: #999999 solid 3px; } .tile-square:active { outline: 0; } .tile-square.no-outline { outline-color: transparent; } .tile-square.small-tile { width: 70px; height: 70px; } .tile-square.wide-tile { width: 310px; height: 150px; } .tile-square.wide-tile-v { height: 310px; width: 150px; } .tile-square.large-tile { width: 310px; height: 310px; } .tile-square.big-tile { width: 470px; height: 470px; } .tile-square.super-tile { width: 630px; height: 630px; } .tile-square .tile-content.flipVertical { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-square:hover .tile-content.flipVertical, .tile-square.hover .tile-content.flipVertical, .tile-square.flip .tile-content.flipVertical { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-square .tile-content.flipVertical { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-square .tile-content.flipVertical .slide, .tile-square .tile-content.flipVertical .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-square .tile-content.flipVertical .slide { z-index: 2; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .tile-square .tile-content.flipVertical .slide-over { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-square .tile-content.flipHorizontal { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-square:hover .tile-content.flipHorizontal, .tile-square.hover .tile-content.flipHorizontal, .tile-square.flip .tile-content.flipHorizontal { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile-square .tile-content.flipHorizontal { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-square .tile-content.flipHorizontal .slide, .tile-square .tile-content.flipHorizontal .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-square .tile-content.flipHorizontal .slide { z-index: 2; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .tile-square .tile-content.flipHorizontal .slide-over { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile-square .tile-badge { position: absolute; bottom: 0; right: .625rem; padding: .25rem .625rem; z-index: 999; } .tile-square .tile-label { position: absolute; bottom: 0; left: .625rem; padding: .425rem .25rem; z-index: 999; } .tile-small { width: 150px; height: 150px; display: block; float: left; margin: 5px; background-color: #eeeeee; box-shadow: inset 0 0 1px #FFFFCC; cursor: pointer; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: visible; width: 70px; height: 70px; } .tile-small:hover { outline: #999999 solid 3px; } .tile-small:active { outline: 0; } .tile-small.no-outline { outline-color: transparent; } .tile-small.small-tile { width: 70px; height: 70px; } .tile-small.wide-tile { width: 310px; height: 150px; } .tile-small.wide-tile-v { height: 310px; width: 150px; } .tile-small.large-tile { width: 310px; height: 310px; } .tile-small.big-tile { width: 470px; height: 470px; } .tile-small.super-tile { width: 630px; height: 630px; } .tile-small .tile-content.flipVertical { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-small:hover .tile-content.flipVertical, .tile-small.hover .tile-content.flipVertical, .tile-small.flip .tile-content.flipVertical { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-small .tile-content.flipVertical { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-small .tile-content.flipVertical .slide, .tile-small .tile-content.flipVertical .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-small .tile-content.flipVertical .slide { z-index: 2; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .tile-small .tile-content.flipVertical .slide-over { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-small .tile-content.flipHorizontal { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-small:hover .tile-content.flipHorizontal, .tile-small.hover .tile-content.flipHorizontal, .tile-small.flip .tile-content.flipHorizontal { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile-small .tile-content.flipHorizontal { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-small .tile-content.flipHorizontal .slide, .tile-small .tile-content.flipHorizontal .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-small .tile-content.flipHorizontal .slide { z-index: 2; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .tile-small .tile-content.flipHorizontal .slide-over { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile-small .tile-badge { position: absolute; bottom: 0; right: .625rem; padding: .25rem .625rem; z-index: 999; } .tile-small .tile-label { position: absolute; bottom: 0; left: .625rem; padding: .425rem .25rem; z-index: 999; } .tile-wide { width: 150px; display: block; float: left; margin: 5px; background-color: #eeeeee; box-shadow: inset 0 0 1px #FFFFCC; cursor: pointer; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: visible; width: 310px; height: 150px; } .tile-wide:hover { outline: #999999 solid 3px; } .tile-wide:active { outline: 0; } .tile-wide.no-outline { outline-color: transparent; } .tile-wide.small-tile { width: 70px; height: 70px; } .tile-wide.wide-tile { width: 310px; height: 150px; } .tile-wide.wide-tile-v { height: 310px; width: 150px; } .tile-wide.large-tile { width: 310px; height: 310px; } .tile-wide.big-tile { width: 470px; height: 470px; } .tile-wide.super-tile { width: 630px; height: 630px; } .tile-wide .tile-content.flipVertical { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-wide:hover .tile-content.flipVertical, .tile-wide.hover .tile-content.flipVertical, .tile-wide.flip .tile-content.flipVertical { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-wide .tile-content.flipVertical { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-wide .tile-content.flipVertical .slide, .tile-wide .tile-content.flipVertical .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-wide .tile-content.flipVertical .slide { z-index: 2; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .tile-wide .tile-content.flipVertical .slide-over { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-wide .tile-content.flipHorizontal { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-wide:hover .tile-content.flipHorizontal, .tile-wide.hover .tile-content.flipHorizontal, .tile-wide.flip .tile-content.flipHorizontal { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile-wide .tile-content.flipHorizontal { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-wide .tile-content.flipHorizontal .slide, .tile-wide .tile-content.flipHorizontal .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-wide .tile-content.flipHorizontal .slide { z-index: 2; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .tile-wide .tile-content.flipHorizontal .slide-over { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile-wide .tile-badge { position: absolute; bottom: 0; right: .625rem; padding: .25rem .625rem; z-index: 999; } .tile-wide .tile-label { position: absolute; bottom: 0; left: .625rem; padding: .425rem .25rem; z-index: 999; } .tile-large { width: 150px; height: 150px; display: block; float: left; margin: 5px; background-color: #eeeeee; box-shadow: inset 0 0 1px #FFFFCC; cursor: pointer; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: visible; width: 310px; height: 310px; } .tile-large:hover { outline: #999999 solid 3px; } .tile-large:active { outline: 0; } .tile-large.no-outline { outline-color: transparent; } .tile-large.small-tile { width: 70px; height: 70px; } .tile-large.wide-tile { width: 310px; height: 150px; } .tile-large.wide-tile-v { height: 310px; width: 150px; } .tile-large.large-tile { width: 310px; height: 310px; } .tile-large.big-tile { width: 470px; height: 470px; } .tile-large.super-tile { width: 630px; height: 630px; } .tile-large .tile-content.flipVertical { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-large:hover .tile-content.flipVertical, .tile-large.hover .tile-content.flipVertical, .tile-large.flip .tile-content.flipVertical { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-large .tile-content.flipVertical { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-large .tile-content.flipVertical .slide, .tile-large .tile-content.flipVertical .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-large .tile-content.flipVertical .slide { z-index: 2; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .tile-large .tile-content.flipVertical .slide-over { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-large .tile-content.flipHorizontal { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-large:hover .tile-content.flipHorizontal, .tile-large.hover .tile-content.flipHorizontal, .tile-large.flip .tile-content.flipHorizontal { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile-large .tile-content.flipHorizontal { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-large .tile-content.flipHorizontal .slide, .tile-large .tile-content.flipHorizontal .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-large .tile-content.flipHorizontal .slide { z-index: 2; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .tile-large .tile-content.flipHorizontal .slide-over { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile-large .tile-badge { position: absolute; bottom: 0; right: .625rem; padding: .25rem .625rem; z-index: 999; } .tile-large .tile-label { position: absolute; bottom: 0; left: .625rem; padding: .425rem .25rem; z-index: 999; } .tile-big { width: 150px; height: 150px; display: block; float: left; margin: 5px; background-color: #eeeeee; box-shadow: inset 0 0 1px #FFFFCC; cursor: pointer; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: visible; width: 470px; height: 470px; } .tile-big:hover { outline: #999999 solid 3px; } .tile-big:active { outline: 0; } .tile-big.no-outline { outline-color: transparent; } .tile-big.small-tile { width: 70px; height: 70px; } .tile-big.wide-tile { width: 310px; height: 150px; } .tile-big.wide-tile-v { height: 310px; width: 150px; } .tile-big.large-tile { width: 310px; height: 310px; } .tile-big.big-tile { width: 470px; height: 470px; } .tile-big.super-tile { width: 630px; height: 630px; } .tile-big .tile-content.flipVertical { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-big:hover .tile-content.flipVertical, .tile-big.hover .tile-content.flipVertical, .tile-big.flip .tile-content.flipVertical { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-big .tile-content.flipVertical { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-big .tile-content.flipVertical .slide, .tile-big .tile-content.flipVertical .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-big .tile-content.flipVertical .slide { z-index: 2; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .tile-big .tile-content.flipVertical .slide-over { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-big .tile-content.flipHorizontal { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-big:hover .tile-content.flipHorizontal, .tile-big.hover .tile-content.flipHorizontal, .tile-big.flip .tile-content.flipHorizontal { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile-big .tile-content.flipHorizontal { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-big .tile-content.flipHorizontal .slide, .tile-big .tile-content.flipHorizontal .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-big .tile-content.flipHorizontal .slide { z-index: 2; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .tile-big .tile-content.flipHorizontal .slide-over { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile-big .tile-badge { position: absolute; bottom: 0; right: .625rem; padding: .25rem .625rem; z-index: 999; } .tile-big .tile-label { position: absolute; bottom: 0; left: .625rem; padding: .425rem .25rem; z-index: 999; } .tile-super { width: 150px; height: 150px; display: block; float: left; margin: 5px; background-color: #eeeeee; box-shadow: inset 0 0 1px #FFFFCC; cursor: pointer; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: visible; width: 630px; height: 630px; } .tile-super:hover { outline: #999999 solid 3px; } .tile-super:active { outline: 0; } .tile-super.no-outline { outline-color: transparent; } .tile-super.small-tile { width: 70px; height: 70px; } .tile-super.wide-tile { width: 310px; height: 150px; } .tile-super.wide-tile-v { height: 310px; width: 150px; } .tile-super.large-tile { width: 310px; height: 310px; } .tile-super.big-tile { width: 470px; height: 470px; } .tile-super.super-tile { width: 630px; height: 630px; } .tile-super .tile-content.flipVertical { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-super:hover .tile-content.flipVertical, .tile-super.hover .tile-content.flipVertical, .tile-super.flip .tile-content.flipVertical { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-super .tile-content.flipVertical { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-super .tile-content.flipVertical .slide, .tile-super .tile-content.flipVertical .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-super .tile-content.flipVertical .slide { z-index: 2; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .tile-super .tile-content.flipVertical .slide-over { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-super .tile-content.flipHorizontal { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-super:hover .tile-content.flipHorizontal, .tile-super.hover .tile-content.flipHorizontal, .tile-super.flip .tile-content.flipHorizontal { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile-super .tile-content.flipHorizontal { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-super .tile-content.flipHorizontal .slide, .tile-super .tile-content.flipHorizontal .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-super .tile-content.flipHorizontal .slide { z-index: 2; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .tile-super .tile-content.flipHorizontal .slide-over { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile-super .tile-badge { position: absolute; bottom: 0; right: .625rem; padding: .25rem .625rem; z-index: 999; } .tile-super .tile-label { position: absolute; bottom: 0; left: .625rem; padding: .425rem .25rem; z-index: 999; } .tile-small-x { width: 70px; } .tile-square-x { width: 150px; } .tile-wide-x { width: 310px; } .tile-large-x { width: 310px; } .tile-big-x { width: 470px; } .tile-super-x { width: 630px; } .tile-small-y { height: 70px; } .tile-square-y { height: 150px; } .tile-wide-y { height: 310px; } .tile-large-y { height: 310px; } .tile-big-y { height: 470px; } .tile-super-y { height: 630px; } .tile-content { position: absolute; top: 0; left: 0; width: 100%; height: inherit; overflow: hidden; display: none; } .tile-content:first-child { display: block; } .tile-content .live-slide { position: absolute; height: 100%; width: 100%; top: 0; left: 0; display: none; overflow: hidden; } .tile-content .live-slide:nth-child(1) { display: block; } .tile-content.iconic .icon { position: absolute; width: 64px; height: 64px; font-size: 64px; top: 50%; margin-top: -40px; left: 50%; margin-left: -32px; text-align: center; } .tile-small .tile-content.iconic .icon { width: 32px; height: 32px; font-size: 32px; margin-left: -16px; margin-top: -16px; } .tile-content.image-set > img, .tile-content.image-set > .image-container { margin: 0; padding: 0; width: 25% ; height: 50% ; float: left; border: 1px #1e1e1e solid; } .tile-content.image-set > img:first-child, .tile-content.image-set > .image-container:first-child { width: 50% ; float: left; height: 100% ; } .tile-content.slide-up > .slide, .tile-content.slide-down > .slide, .tile-content.slide-up-2 > .slide, .tile-content.slide-down-2 > .slide, .tile-content.slide-left > .slide, .tile-content.slide-right > .slide, .tile-content.slide-left-2 > .slide, .tile-content.slide-right-2 > .slide, .tile-content.slide-up > .slide-over, .tile-content.slide-down > .slide-over, .tile-content.slide-up-2 > .slide-over, .tile-content.slide-down-2 > .slide-over, .tile-content.slide-left > .slide-over, .tile-content.slide-right > .slide-over, .tile-content.slide-left-2 > .slide-over, .tile-content.slide-right-2 > .slide-over { width: 100%; height: inherit; display: block; position: absolute; box-shadow: inset 0 0 1px #FFFFCC; } .tile-content.slide-up > .slide, .tile-content.slide-down > .slide, .tile-content.slide-up-2 > .slide, .tile-content.slide-down-2 > .slide, .tile-content.slide-left > .slide, .tile-content.slide-right > .slide, .tile-content.slide-left-2 > .slide, .tile-content.slide-right-2 > .slide { top: 0; z-index: 1; transition: all 0.3s ease; } .tile-content.slide-up:hover > .slide, .tile-content.slide-down:hover > .slide, .tile-content.slide-up-2:hover > .slide, .tile-content.slide-down-2:hover > .slide, .tile-content.slide-left:hover > .slide, .tile-content.slide-right:hover > .slide, .tile-content.slide-left-2:hover > .slide, .tile-content.slide-right-2:hover > .slide { -webkit-transform: scale(1.5); transform: scale(1.5); transition: all 0.6s ease; } .tile-content.slide-up > .slide-over { top: 100%; z-index: 2; height: 75%; transition: all 0.6s ease; } .tile-content.slide-up:hover > .slide-over { top: 25%; transition: all 0.3s ease; } .tile-content.slide-up-2 > .slide-over { top: 100%; z-index: 2; height: 100%; transition: all 0.3s ease; } .tile-content.slide-up-2:hover > .slide { -webkit-transform: scale(1); transform: scale(1); top: -100%; transition: all 0.4s ease; } .tile-content.slide-up-2:hover > .slide-over { top: 0; transition: all 0.4s ease; } .tile-content.slide-down > .slide-over { top: -100%; z-index: 2; height: 75%; transition: all 0.6s ease; } .tile-content.slide-down:hover > .slide-over { top: 0; transition: all 0.3s ease; } .tile-content.slide-down-2 > .slide-over { top: -100%; z-index: 2; height: 100%; transition: all 0.3s ease; } .tile-content.slide-down-2:hover > .slide { -webkit-transform: scale(1); transform: scale(1); top: 100%; transition: all 0.4s ease; } .tile-content.slide-down-2:hover > .slide-over { top: 0; transition: all 0.4s ease; } .tile-content.slide-left > .slide-over { left: -100%; z-index: 2; width: 75%; height: 100%; transition: all 0.6s ease; } .tile-content.slide-left:hover > .slide-over { left: 0; transition: all 0.3s ease; } .tile-content.slide-left-2 > .slide { left: 0; transition: all 0.3s ease; } .tile-content.slide-left-2 > .slide-over { left: -100%; z-index: 2; width: 100%; height: 100%; transition: all 0.3s ease; } .tile-content.slide-left-2:hover > .slide { -webkit-transform: scale(1); transform: scale(1); left: 100%; transition: all 0.4s ease; } .tile-content.slide-left-2:hover > .slide-over { left: 0; transition: all 0.4s ease; } .tile-content.slide-right > .slide-over { left: 100%; z-index: 2; width: 75%; height: 100%; transition: all 0.6s ease; } .tile-content.slide-right:hover > .slide-over { left: 25%; transition: all 0.3s ease; } .tile-content.slide-right-2 > .slide { left: 0; transition: all 0.3s ease; } .tile-content.slide-right-2 > .slide-over { left: 100%; z-index: 2; width: 100%; height: 100%; transition: all 0.3s ease; } .tile-content.slide-right-2:hover > .slide { -webkit-transform: scale(1); transform: scale(1); left: -100%; transition: all 0.4s ease; } .tile-content.slide-right-2:hover > .slide-over { left: 0; transition: all 0.4s ease; } .tile-content.zooming .slide { box-shadow: inset 0 0 1px #FFFFCC; width: 100%; height: 100%; display: block; position: relative; transition: all 0.6s ease; } .tile-content.zooming .slide:hover { -webkit-transform: scale(1.5); transform: scale(1.5); transition: all 0.6s ease; } .tile-content.zooming-out .slide { width: 100%; height: 100%; display: block; position: relative; -webkit-transform: scale(1.5); transform: scale(1.5); transition: all 0.6s ease; } .tile-content.zooming-out .slide:hover { -webkit-transform: scale(1); transform: scale(1); transition: all 0.6s ease; } .tile-small, .tile, .tile-square, .tile-wide, .tile-large, .tile-big, .tile-super { overflow: visible; } .tile-small .tile-content.flipVertical, .tile .tile-content.flipVertical, .tile-square .tile-content.flipVertical, .tile-wide .tile-content.flipVertical, .tile-large .tile-content.flipVertical, .tile-big .tile-content.flipVertical, .tile-super .tile-content.flipVertical { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-small:hover .tile-content.flipVertical, .tile:hover .tile-content.flipVertical, .tile-square:hover .tile-content.flipVertical, .tile-wide:hover .tile-content.flipVertical, .tile-large:hover .tile-content.flipVertical, .tile-big:hover .tile-content.flipVertical, .tile-super:hover .tile-content.flipVertical, .tile-small.hover .tile-content.flipVertical, .tile.hover .tile-content.flipVertical, .tile-square.hover .tile-content.flipVertical, .tile-wide.hover .tile-content.flipVertical, .tile-large.hover .tile-content.flipVertical, .tile-big.hover .tile-content.flipVertical, .tile-super.hover .tile-content.flipVertical, .tile-small.flip .tile-content.flipVertical, .tile.flip .tile-content.flipVertical, .tile-square.flip .tile-content.flipVertical, .tile-wide.flip .tile-content.flipVertical, .tile-large.flip .tile-content.flipVertical, .tile-big.flip .tile-content.flipVertical, .tile-super.flip .tile-content.flipVertical { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-small .tile-content.flipVertical, .tile .tile-content.flipVertical, .tile-square .tile-content.flipVertical, .tile-wide .tile-content.flipVertical, .tile-large .tile-content.flipVertical, .tile-big .tile-content.flipVertical, .tile-super .tile-content.flipVertical { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-small .tile-content.flipVertical .slide, .tile .tile-content.flipVertical .slide, .tile-square .tile-content.flipVertical .slide, .tile-wide .tile-content.flipVertical .slide, .tile-large .tile-content.flipVertical .slide, .tile-big .tile-content.flipVertical .slide, .tile-super .tile-content.flipVertical .slide, .tile-small .tile-content.flipVertical .slide-over, .tile .tile-content.flipVertical .slide-over, .tile-square .tile-content.flipVertical .slide-over, .tile-wide .tile-content.flipVertical .slide-over, .tile-large .tile-content.flipVertical .slide-over, .tile-big .tile-content.flipVertical .slide-over, .tile-super .tile-content.flipVertical .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-small .tile-content.flipVertical .slide, .tile .tile-content.flipVertical .slide, .tile-square .tile-content.flipVertical .slide, .tile-wide .tile-content.flipVertical .slide, .tile-large .tile-content.flipVertical .slide, .tile-big .tile-content.flipVertical .slide, .tile-super .tile-content.flipVertical .slide { z-index: 2; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .tile-small .tile-content.flipVertical .slide-over, .tile .tile-content.flipVertical .slide-over, .tile-square .tile-content.flipVertical .slide-over, .tile-wide .tile-content.flipVertical .slide-over, .tile-large .tile-content.flipVertical .slide-over, .tile-big .tile-content.flipVertical .slide-over, .tile-super .tile-content.flipVertical .slide-over { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile-small .tile-content.flipHorizontal, .tile .tile-content.flipHorizontal, .tile-square .tile-content.flipHorizontal, .tile-wide .tile-content.flipHorizontal, .tile-large .tile-content.flipHorizontal, .tile-big .tile-content.flipHorizontal, .tile-super .tile-content.flipHorizontal { -webkit-transform: perspective(1000px); transform: perspective(1000px); overflow: visible; } .tile-small:hover .tile-content.flipHorizontal, .tile:hover .tile-content.flipHorizontal, .tile-square:hover .tile-content.flipHorizontal, .tile-wide:hover .tile-content.flipHorizontal, .tile-large:hover .tile-content.flipHorizontal, .tile-big:hover .tile-content.flipHorizontal, .tile-super:hover .tile-content.flipHorizontal, .tile-small.hover .tile-content.flipHorizontal, .tile.hover .tile-content.flipHorizontal, .tile-square.hover .tile-content.flipHorizontal, .tile-wide.hover .tile-content.flipHorizontal, .tile-large.hover .tile-content.flipHorizontal, .tile-big.hover .tile-content.flipHorizontal, .tile-super.hover .tile-content.flipHorizontal, .tile-small.flip .tile-content.flipHorizontal, .tile.flip .tile-content.flipHorizontal, .tile-square.flip .tile-content.flipHorizontal, .tile-wide.flip .tile-content.flipHorizontal, .tile-large.flip .tile-content.flipHorizontal, .tile-big.flip .tile-content.flipHorizontal, .tile-super.flip .tile-content.flipHorizontal { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile-small .tile-content.flipHorizontal, .tile .tile-content.flipHorizontal, .tile-square .tile-content.flipHorizontal, .tile-wide .tile-content.flipHorizontal, .tile-large .tile-content.flipHorizontal, .tile-big .tile-content.flipHorizontal, .tile-super .tile-content.flipHorizontal { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.6s ease; } .tile-small .tile-content.flipHorizontal .slide, .tile .tile-content.flipHorizontal .slide, .tile-square .tile-content.flipHorizontal .slide, .tile-wide .tile-content.flipHorizontal .slide, .tile-large .tile-content.flipHorizontal .slide, .tile-big .tile-content.flipHorizontal .slide, .tile-super .tile-content.flipHorizontal .slide, .tile-small .tile-content.flipHorizontal .slide-over, .tile .tile-content.flipHorizontal .slide-over, .tile-square .tile-content.flipHorizontal .slide-over, .tile-wide .tile-content.flipHorizontal .slide-over, .tile-large .tile-content.flipHorizontal .slide-over, .tile-big .tile-content.flipHorizontal .slide-over, .tile-super .tile-content.flipHorizontal .slide-over { top: 0; left: 0; position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tile-small .tile-content.flipHorizontal .slide, .tile .tile-content.flipHorizontal .slide, .tile-square .tile-content.flipHorizontal .slide, .tile-wide .tile-content.flipHorizontal .slide, .tile-large .tile-content.flipHorizontal .slide, .tile-big .tile-content.flipHorizontal .slide, .tile-super .tile-content.flipHorizontal .slide { z-index: 2; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .tile-small .tile-content.flipHorizontal .slide-over, .tile .tile-content.flipHorizontal .slide-over, .tile-square .tile-content.flipHorizontal .slide-over, .tile-wide .tile-content.flipHorizontal .slide-over, .tile-large .tile-content.flipHorizontal .slide-over, .tile-big .tile-content.flipHorizontal .slide-over, .tile-super .tile-content.flipHorizontal .slide-over { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .tile .tile-badge { position: absolute; bottom: 0; right: .625rem; padding: .25rem .625rem; z-index: 999; } .tile .tile-label { position: absolute; bottom: 0; left: .625rem; padding: .425rem .25rem; z-index: 999; } .tile-content .image-container, .tile-content .carousel { box-shadow: inset 0 0 1px #FFFFCC; width: 100%; height: 100%; } [class*=tile-transform-] { transition: all 0.22s ease; } .tile-transform-right { -webkit-transform-origin: left 50%; transform-origin: left 50%; } .tile.tile-transform-right { -webkit-transform: perspective(500px) rotateY(0.138372rad) !important; transform: perspective(500px) rotateY(0.138372rad) !important; } .tile-wide.tile-transform-right { -webkit-transform: perspective(500px) rotateY(0.069186rad) !important; transform: perspective(500px) rotateY(0.069186rad) !important; } .tile-large.tile-transform-right { -webkit-transform: perspective(500px) rotateY(0.069186rad) !important; transform: perspective(500px) rotateY(0.069186rad) !important; } .tile-big.tile-transform-right { -webkit-transform: perspective(500px) rotateY(0.046124rad) !important; transform: perspective(500px) rotateY(0.046124rad) !important; } .tile-super.tile-transform-right { -webkit-transform: perspective(500px) rotateY(0.034593rad) !important; transform: perspective(500px) rotateY(0.034593rad) !important; } .tile-small.tile-transform-right { -webkit-transform: perspective(500px) rotateY(0.276744rad) !important; transform: perspective(500px) rotateY(0.276744rad) !important; } .tile-transform-left { -webkit-transform-origin: right 50%; transform-origin: right 50%; } .tile.tile-transform-left { -webkit-transform: perspective(500px) rotateY(-0.138372rad) !important; transform: perspective(500px) rotateY(-0.138372rad) !important; } .tile-wide.tile-transform-left { -webkit-transform: perspective(500px) rotateY(-0.069186rad) !important; transform: perspective(500px) rotateY(-0.069186rad) !important; } .tile-large.tile-transform-left { -webkit-transform: perspective(500px) rotateY(-0.069186rad) !important; transform: perspective(500px) rotateY(-0.069186rad) !important; } .tile-big.tile-transform-left { -webkit-transform: perspective(500px) rotateY(-0.046124rad) !important; transform: perspective(500px) rotateY(-0.046124rad) !important; } .tile-super.tile-transform-left { -webkit-transform: perspective(500px) rotateY(-0.034593rad) !important; transform: perspective(500px) rotateY(-0.034593rad) !important; } .tile-small.tile-transform-left { -webkit-transform: perspective(500px) rotateY(-0.276744rad) !important; transform: perspective(500px) rotateY(-0.276744rad) !important; } .tile-transform-top { -webkit-transform-origin: 50% bottom; transform-origin: 50% bottom; } .tile.tile-transform-top { -webkit-transform: perspective(500px) rotateX(0.138372rad) !important; transform: perspective(500px) rotateX(0.138372rad) !important; } .tile-wide.tile-transform-top { -webkit-transform: perspective(500px) rotateX(0.069186rad) !important; transform: perspective(500px) rotateX(0.069186rad) !important; } .tile-large.tile-transform-top { -webkit-transform: perspective(500px) rotateX(0.069186rad) !important; transform: perspective(500px) rotateX(0.069186rad) !important; } .tile-big.tile-transform-top { -webkit-transform: perspective(500px) rotateX(0.046124rad) !important; transform: perspective(500px) rotateX(0.046124rad) !important; } .tile-super.tile-transform-top { -webkit-transform: perspective(500px) rotateX(0.034593rad) !important; transform: perspective(500px) rotateX(0.034593rad) !important; } .tile-small.tile-transform-top { -webkit-transform: perspective(500px) rotateX(0.276744rad) !important; transform: perspective(500px) rotateX(0.276744rad) !important; } .tile-transform-bottom { -webkit-transform-origin: 50% top; transform-origin: 50% top; } .tile.tile-transform-bottom { -webkit-transform: perspective(500px) rotateX(-0.138372rad) !important; transform: perspective(500px) rotateX(-0.138372rad) !important; } .tile-wide.tile-transform-bottom { -webkit-transform: perspective(500px) rotateX(-0.069186rad) !important; transform: perspective(500px) rotateX(-0.069186rad) !important; } .tile-large.tile-transform-bottom { -webkit-transform: perspective(500px) rotateX(-0.069186rad) !important; transform: perspective(500px) rotateX(-0.069186rad) !important; } .tile-big.tile-transform-bottom { -webkit-transform: perspective(500px) rotateX(-0.046124rad) !important; transform: perspective(500px) rotateX(-0.046124rad) !important; } .tile-super.tile-transform-bottom { -webkit-transform: perspective(500px) rotateX(-0.034593rad) !important; transform: perspective(500px) rotateX(-0.034593rad) !important; } .tile-small.tile-transform-bottom { -webkit-transform: perspective(500px) rotateX(-0.276744rad) !important; transform: perspective(500px) rotateX(-0.276744rad) !important; } .tile-area-scheme-dark { background-color: #1d1d1d; } .tile-area-scheme-dark [class*=tile] { outline-color: #373737; } .tile-area-scheme-darkBrown { background-color: #63362f; } .tile-area-scheme-darkBrown [class*=tile] { outline-color: #86493f; } .tile-area-scheme-darkCrimson { background-color: #640024; } .tile-area-scheme-darkCrimson [class*=tile] { outline-color: #970036; } .tile-area-scheme-darkViolet { background-color: #57169a; } .tile-area-scheme-darkViolet [class*=tile] { outline-color: #701cc7; } .tile-area-scheme-darkMagenta { background-color: #81003c; } .tile-area-scheme-darkMagenta [class*=tile] { outline-color: #b40054; } .tile-area-scheme-darkCyan { background-color: #1b6eae; } .tile-area-scheme-darkCyan [class*=tile] { outline-color: #228ada; } .tile-area-scheme-darkCobalt { background-color: #00356a; } .tile-area-scheme-darkCobalt [class*=tile] { outline-color: #004e9d; } .tile-area-scheme-darkTeal { background-color: #004050; } .tile-area-scheme-darkTeal [class*=tile] { outline-color: #006983; } .tile-area-scheme-darkEmerald { background-color: #003e00; } .tile-area-scheme-darkEmerald [class*=tile] { outline-color: #007100; } .tile-area-scheme-darkGreen { background-color: #128023; } .tile-area-scheme-darkGreen [class*=tile] { outline-color: #18ad2f; } .tile-area-scheme-darkOrange { background-color: #bf5a15; } .tile-area-scheme-darkOrange [class*=tile] { outline-color: #e77120; } .tile-area-scheme-darkRed { background-color: #9a1616; } .tile-area-scheme-darkRed [class*=tile] { outline-color: #c71c1c; } .tile-area-scheme-darkPink { background-color: #9a165a; } .tile-area-scheme-darkPink [class*=tile] { outline-color: #c71c74; } .tile-area-scheme-darkIndigo { background-color: #4b0096; } .tile-area-scheme-darkIndigo [class*=tile] { outline-color: #6400c9; } .tile-area-scheme-darkBlue { background-color: #16499a; } .tile-area-scheme-darkBlue [class*=tile] { outline-color: #1c5ec7; } .tile-area-scheme-lightBlue { background-color: #4390df; } .tile-area-scheme-lightBlue [class*=tile] { outline-color: #6faae6; } .tile-area-scheme-lightTeal { background-color: #45fffd; } .tile-area-scheme-lightTeal [class*=tile] { outline-color: #78fffd; } .tile-area-scheme-lightOlive { background-color: #78aa1c; } .tile-area-scheme-lightOlive [class*=tile] { outline-color: #97d623; } .tile-area-scheme-lightOrange { background-color: #c29008; } .tile-area-scheme-lightOrange [class*=tile] { outline-color: #f3b40a; } .tile-area-scheme-lightPink { background-color: #f472d0; } .tile-area-scheme-lightPink [class*=tile] { outline-color: #f8a1e0; } .tile-area-scheme-grayed { background-color: #585858; } .tile-area-scheme-grayed [class*=tile] { outline-color: #727272; } @media screen and (max-width: 640px) { .tile-area:not(.no-responsive-future) { width: 100% ; padding: 0; } .tile-area:not(.no-responsive-future) .tile-area-title { display: none; } .tile-area:not(.no-responsive-future) .tile-group { margin: 0 ; padding: 0 ; float: none; } .tile-area:not(.no-responsive-future) .tile-group .tile-group-title { display: none; } } @media screen and (max-width: 640px) { .tile-container:not(.no-responsive-future) { width: 100% ; } } @media screen and (max-width: 320px) { .tile-big, .tile.big-tile, .tile-super, .tile.super-tile { width: 310px ; } }