/** * material-design-lite - Material Design Components in CSS, JS and HTML * @version v1.3.0 * @license Apache-2.0 * @copyright 2015 Google, Inc. * @link https://github.com/google/material-design-lite */ @charset "UTF-8"; /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Material Design Lite */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html { color: rgba(0,0,0, 0.87); font-size: 1em; line-height: 1.4; } /* * Remove text-shadow in selection highlight: * https://twitter.com/miketaylr/status/12228805301 * * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between audio, canvas, iframes, * images, videos and the bottom of their containers: * https://github.com/h5bp/html5-boilerplate/issues/440 */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Browser Upgrade Prompt ========================================================================== */ .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Author's custom styles ========================================================================== */ /* ========================================================================== Helper classes ========================================================================== */ /* * Hide visually and from screen readers: */ .hidden { display: none !important; } /* * Hide only visually, but have it available for screen readers: * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screen readers, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: http://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ @media print { *, *:before, *:after, *:first-letter { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ -webkit-box-shadow: none !important; box-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* * Printing Tables: * http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Remove the unwanted box around FAB buttons */ /* More info: http://goo.gl/IPwKi */ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu, .mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } /* * Make html take up the entire screen * Then set touch-action to avoid touch delay on mobile IE */ html { width: 100%; height: 100%; -ms-touch-action: manipulation; touch-action: manipulation; } /* * Make body take up the entire screen * Remove body margin so layout containers don't cause extra overflow. */ body { width: 100%; min-height: 100%; margin: 0; } /* * Main display reset for IE support. * Source: http://weblog.west-wind.com/posts/2015/Jan/12/main-HTML5-Tag-not-working-in-Internet-Explorer-91011 */ main { display: block; } /* * Apply no display to elements with the hidden attribute. * IE 9 and 10 support. */ *[hidden] { display: none !important; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ html, body { font-family: "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; } h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; } /** * Styles for HTML elements */ h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 56px; font-weight: 400; line-height: 1.35; letter-spacing: -0.02em; opacity: 0.54; font-size: 0.6em; } h1 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 56px; font-weight: 400; line-height: 1.35; letter-spacing: -0.02em; margin-top: 24px; margin-bottom: 24px; } h2 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 45px; font-weight: 400; line-height: 48px; margin-top: 24px; margin-bottom: 24px; } h3 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 34px; font-weight: 400; line-height: 40px; margin-top: 24px; margin-bottom: 24px; } h4 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; -moz-osx-font-smoothing: grayscale; margin-top: 24px; margin-bottom: 16px; } h5 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; margin-top: 24px; margin-bottom: 16px; } h6 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0.04em; margin-top: 24px; margin-bottom: 16px; } p { font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; margin-bottom: 16px; } a { color: rgb(255,64,129); font-weight: 500; } blockquote { font-family: "Roboto", "Helvetica", "Arial", sans-serif; position: relative; font-size: 24px; font-weight: 300; font-style: italic; line-height: 1.35; letter-spacing: 0.08em; } blockquote:before { position: absolute; left: -0.5em; content: '\201C'; } blockquote:after { content: '\201D'; margin-left: -0.05em; } mark { background-color: #f4ff81; } dt { font-weight: 700; } address { font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0; font-style: normal; } ul, ol { font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; } /** * Class Name Styles */ .mdl-typography--display-4 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 112px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; } .mdl-typography--display-4-color-contrast { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 112px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; opacity: 0.54; } .mdl-typography--display-3 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 56px; font-weight: 400; line-height: 1.35; letter-spacing: -0.02em; } .mdl-typography--display-3-color-contrast { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 56px; font-weight: 400; line-height: 1.35; letter-spacing: -0.02em; opacity: 0.54; } .mdl-typography--display-2 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 45px; font-weight: 400; line-height: 48px; } .mdl-typography--display-2-color-contrast { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 45px; font-weight: 400; line-height: 48px; opacity: 0.54; } .mdl-typography--display-1 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 34px; font-weight: 400; line-height: 40px; } .mdl-typography--display-1-color-contrast { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 34px; font-weight: 400; line-height: 40px; opacity: 0.54; } .mdl-typography--headline { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; -moz-osx-font-smoothing: grayscale; } .mdl-typography--headline-color-contrast { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; -moz-osx-font-smoothing: grayscale; opacity: 0.87; } .mdl-typography--title { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; } .mdl-typography--title-color-contrast { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; opacity: 0.87; } .mdl-typography--subhead { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0.04em; } .mdl-typography--subhead-color-contrast { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0.04em; opacity: 0.87; } .mdl-typography--body-2 { font-size: 14px; font-weight: bold; line-height: 24px; letter-spacing: 0; } .mdl-typography--body-2-color-contrast { font-size: 14px; font-weight: bold; line-height: 24px; letter-spacing: 0; opacity: 0.87; } .mdl-typography--body-1 { font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; } .mdl-typography--body-1-color-contrast { font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; opacity: 0.87; } .mdl-typography--body-2-force-preferred-font { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 500; line-height: 24px; letter-spacing: 0; } .mdl-typography--body-2-force-preferred-font-color-contrast { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 500; line-height: 24px; letter-spacing: 0; opacity: 0.87; } .mdl-typography--body-1-force-preferred-font { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; } .mdl-typography--body-1-force-preferred-font-color-contrast { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; opacity: 0.87; } .mdl-typography--caption { font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0; } .mdl-typography--caption-force-preferred-font { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0; } .mdl-typography--caption-color-contrast { font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0; opacity: 0.54; } .mdl-typography--caption-force-preferred-font-color-contrast { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0; opacity: 0.54; } .mdl-typography--menu { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0; } .mdl-typography--menu-color-contrast { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0; opacity: 0.87; } .mdl-typography--button { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: 0; } .mdl-typography--button-color-contrast { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: 0; opacity: 0.87; } .mdl-typography--text-left { text-align: left; } .mdl-typography--text-right { text-align: right; } .mdl-typography--text-center { text-align: center; } .mdl-typography--text-justify { text-align: justify; } .mdl-typography--text-nowrap { white-space: nowrap; } .mdl-typography--text-lowercase { text-transform: lowercase; } .mdl-typography--text-uppercase { text-transform: uppercase; } .mdl-typography--text-capitalize { text-transform: capitalize; } .mdl-typography--font-thin { font-weight: 200 !important; } .mdl-typography--font-light { font-weight: 300 !important; } .mdl-typography--font-regular { font-weight: 400 !important; } .mdl-typography--font-medium { font-weight: 500 !important; } .mdl-typography--font-bold { font-weight: 700 !important; } .mdl-typography--font-black { font-weight: 900 !important; } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; word-wrap: normal; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ .mdl-color-text--red { color: rgb(244,67,54) !important; } .mdl-color--red { background-color: rgb(244,67,54) !important; } .mdl-color-text--red-50 { color: rgb(255,235,238) !important; } .mdl-color--red-50 { background-color: rgb(255,235,238) !important; } .mdl-color-text--red-100 { color: rgb(255,205,210) !important; } .mdl-color--red-100 { background-color: rgb(255,205,210) !important; } .mdl-color-text--red-200 { color: rgb(239,154,154) !important; } .mdl-color--red-200 { background-color: rgb(239,154,154) !important; } .mdl-color-text--red-300 { color: rgb(229,115,115) !important; } .mdl-color--red-300 { background-color: rgb(229,115,115) !important; } .mdl-color-text--red-400 { color: rgb(239,83,80) !important; } .mdl-color--red-400 { background-color: rgb(239,83,80) !important; } .mdl-color-text--red-500 { color: rgb(244,67,54) !important; } .mdl-color--red-500 { background-color: rgb(244,67,54) !important; } .mdl-color-text--red-600 { color: rgb(229,57,53) !important; } .mdl-color--red-600 { background-color: rgb(229,57,53) !important; } .mdl-color-text--red-700 { color: rgb(211,47,47) !important; } .mdl-color--red-700 { background-color: rgb(211,47,47) !important; } .mdl-color-text--red-800 { color: rgb(198,40,40) !important; } .mdl-color--red-800 { background-color: rgb(198,40,40) !important; } .mdl-color-text--red-900 { color: rgb(183,28,28) !important; } .mdl-color--red-900 { background-color: rgb(183,28,28) !important; } .mdl-color-text--red-A100 { color: rgb(255,138,128) !important; } .mdl-color--red-A100 { background-color: rgb(255,138,128) !important; } .mdl-color-text--red-A200 { color: rgb(255,82,82) !important; } .mdl-color--red-A200 { background-color: rgb(255,82,82) !important; } .mdl-color-text--red-A400 { color: rgb(255,23,68) !important; } .mdl-color--red-A400 { background-color: rgb(255,23,68) !important; } .mdl-color-text--red-A700 { color: rgb(213,0,0) !important; } .mdl-color--red-A700 { background-color: rgb(213,0,0) !important; } .mdl-color-text--pink { color: rgb(233,30,99) !important; } .mdl-color--pink { background-color: rgb(233,30,99) !important; } .mdl-color-text--pink-50 { color: rgb(252,228,236) !important; } .mdl-color--pink-50 { background-color: rgb(252,228,236) !important; } .mdl-color-text--pink-100 { color: rgb(248,187,208) !important; } .mdl-color--pink-100 { background-color: rgb(248,187,208) !important; } .mdl-color-text--pink-200 { color: rgb(244,143,177) !important; } .mdl-color--pink-200 { background-color: rgb(244,143,177) !important; } .mdl-color-text--pink-300 { color: rgb(240,98,146) !important; } .mdl-color--pink-300 { background-color: rgb(240,98,146) !important; } .mdl-color-text--pink-400 { color: rgb(236,64,122) !important; } .mdl-color--pink-400 { background-color: rgb(236,64,122) !important; } .mdl-color-text--pink-500 { color: rgb(233,30,99) !important; } .mdl-color--pink-500 { background-color: rgb(233,30,99) !important; } .mdl-color-text--pink-600 { color: rgb(216,27,96) !important; } .mdl-color--pink-600 { background-color: rgb(216,27,96) !important; } .mdl-color-text--pink-700 { color: rgb(194,24,91) !important; } .mdl-color--pink-700 { background-color: rgb(194,24,91) !important; } .mdl-color-text--pink-800 { color: rgb(173,20,87) !important; } .mdl-color--pink-800 { background-color: rgb(173,20,87) !important; } .mdl-color-text--pink-900 { color: rgb(136,14,79) !important; } .mdl-color--pink-900 { background-color: rgb(136,14,79) !important; } .mdl-color-text--pink-A100 { color: rgb(255,128,171) !important; } .mdl-color--pink-A100 { background-color: rgb(255,128,171) !important; } .mdl-color-text--pink-A200 { color: rgb(255,64,129) !important; } .mdl-color--pink-A200 { background-color: rgb(255,64,129) !important; } .mdl-color-text--pink-A400 { color: rgb(245,0,87) !important; } .mdl-color--pink-A400 { background-color: rgb(245,0,87) !important; } .mdl-color-text--pink-A700 { color: rgb(197,17,98) !important; } .mdl-color--pink-A700 { background-color: rgb(197,17,98) !important; } .mdl-color-text--purple { color: rgb(156,39,176) !important; } .mdl-color--purple { background-color: rgb(156,39,176) !important; } .mdl-color-text--purple-50 { color: rgb(243,229,245) !important; } .mdl-color--purple-50 { background-color: rgb(243,229,245) !important; } .mdl-color-text--purple-100 { color: rgb(225,190,231) !important; } .mdl-color--purple-100 { background-color: rgb(225,190,231) !important; } .mdl-color-text--purple-200 { color: rgb(206,147,216) !important; } .mdl-color--purple-200 { background-color: rgb(206,147,216) !important; } .mdl-color-text--purple-300 { color: rgb(186,104,200) !important; } .mdl-color--purple-300 { background-color: rgb(186,104,200) !important; } .mdl-color-text--purple-400 { color: rgb(171,71,188) !important; } .mdl-color--purple-400 { background-color: rgb(171,71,188) !important; } .mdl-color-text--purple-500 { color: rgb(156,39,176) !important; } .mdl-color--purple-500 { background-color: rgb(156,39,176) !important; } .mdl-color-text--purple-600 { color: rgb(142,36,170) !important; } .mdl-color--purple-600 { background-color: rgb(142,36,170) !important; } .mdl-color-text--purple-700 { color: rgb(123,31,162) !important; } .mdl-color--purple-700 { background-color: rgb(123,31,162) !important; } .mdl-color-text--purple-800 { color: rgb(106,27,154) !important; } .mdl-color--purple-800 { background-color: rgb(106,27,154) !important; } .mdl-color-text--purple-900 { color: rgb(74,20,140) !important; } .mdl-color--purple-900 { background-color: rgb(74,20,140) !important; } .mdl-color-text--purple-A100 { color: rgb(234,128,252) !important; } .mdl-color--purple-A100 { background-color: rgb(234,128,252) !important; } .mdl-color-text--purple-A200 { color: rgb(224,64,251) !important; } .mdl-color--purple-A200 { background-color: rgb(224,64,251) !important; } .mdl-color-text--purple-A400 { color: rgb(213,0,249) !important; } .mdl-color--purple-A400 { background-color: rgb(213,0,249) !important; } .mdl-color-text--purple-A700 { color: rgb(170,0,255) !important; } .mdl-color--purple-A700 { background-color: rgb(170,0,255) !important; } .mdl-color-text--deep-purple { color: rgb(103,58,183) !important; } .mdl-color--deep-purple { background-color: rgb(103,58,183) !important; } .mdl-color-text--deep-purple-50 { color: rgb(237,231,246) !important; } .mdl-color--deep-purple-50 { background-color: rgb(237,231,246) !important; } .mdl-color-text--deep-purple-100 { color: rgb(209,196,233) !important; } .mdl-color--deep-purple-100 { background-color: rgb(209,196,233) !important; } .mdl-color-text--deep-purple-200 { color: rgb(179,157,219) !important; } .mdl-color--deep-purple-200 { background-color: rgb(179,157,219) !important; } .mdl-color-text--deep-purple-300 { color: rgb(149,117,205) !important; } .mdl-color--deep-purple-300 { background-color: rgb(149,117,205) !important; } .mdl-color-text--deep-purple-400 { color: rgb(126,87,194) !important; } .mdl-color--deep-purple-400 { background-color: rgb(126,87,194) !important; } .mdl-color-text--deep-purple-500 { color: rgb(103,58,183) !important; } .mdl-color--deep-purple-500 { background-color: rgb(103,58,183) !important; } .mdl-color-text--deep-purple-600 { color: rgb(94,53,177) !important; } .mdl-color--deep-purple-600 { background-color: rgb(94,53,177) !important; } .mdl-color-text--deep-purple-700 { color: rgb(81,45,168) !important; } .mdl-color--deep-purple-700 { background-color: rgb(81,45,168) !important; } .mdl-color-text--deep-purple-800 { color: rgb(69,39,160) !important; } .mdl-color--deep-purple-800 { background-color: rgb(69,39,160) !important; } .mdl-color-text--deep-purple-900 { color: rgb(49,27,146) !important; } .mdl-color--deep-purple-900 { background-color: rgb(49,27,146) !important; } .mdl-color-text--deep-purple-A100 { color: rgb(179,136,255) !important; } .mdl-color--deep-purple-A100 { background-color: rgb(179,136,255) !important; } .mdl-color-text--deep-purple-A200 { color: rgb(124,77,255) !important; } .mdl-color--deep-purple-A200 { background-color: rgb(124,77,255) !important; } .mdl-color-text--deep-purple-A400 { color: rgb(101,31,255) !important; } .mdl-color--deep-purple-A400 { background-color: rgb(101,31,255) !important; } .mdl-color-text--deep-purple-A700 { color: rgb(98,0,234) !important; } .mdl-color--deep-purple-A700 { background-color: rgb(98,0,234) !important; } .mdl-color-text--indigo { color: rgb(63,81,181) !important; } .mdl-color--indigo { background-color: rgb(63,81,181) !important; } .mdl-color-text--indigo-50 { color: rgb(232,234,246) !important; } .mdl-color--indigo-50 { background-color: rgb(232,234,246) !important; } .mdl-color-text--indigo-100 { color: rgb(197,202,233) !important; } .mdl-color--indigo-100 { background-color: rgb(197,202,233) !important; } .mdl-color-text--indigo-200 { color: rgb(159,168,218) !important; } .mdl-color--indigo-200 { background-color: rgb(159,168,218) !important; } .mdl-color-text--indigo-300 { color: rgb(121,134,203) !important; } .mdl-color--indigo-300 { background-color: rgb(121,134,203) !important; } .mdl-color-text--indigo-400 { color: rgb(92,107,192) !important; } .mdl-color--indigo-400 { background-color: rgb(92,107,192) !important; } .mdl-color-text--indigo-500 { color: rgb(63,81,181) !important; } .mdl-color--indigo-500 { background-color: rgb(63,81,181) !important; } .mdl-color-text--indigo-600 { color: rgb(57,73,171) !important; } .mdl-color--indigo-600 { background-color: rgb(57,73,171) !important; } .mdl-color-text--indigo-700 { color: rgb(48,63,159) !important; } .mdl-color--indigo-700 { background-color: rgb(48,63,159) !important; } .mdl-color-text--indigo-800 { color: rgb(40,53,147) !important; } .mdl-color--indigo-800 { background-color: rgb(40,53,147) !important; } .mdl-color-text--indigo-900 { color: rgb(26,35,126) !important; } .mdl-color--indigo-900 { background-color: rgb(26,35,126) !important; } .mdl-color-text--indigo-A100 { color: rgb(140,158,255) !important; } .mdl-color--indigo-A100 { background-color: rgb(140,158,255) !important; } .mdl-color-text--indigo-A200 { color: rgb(83,109,254) !important; } .mdl-color--indigo-A200 { background-color: rgb(83,109,254) !important; } .mdl-color-text--indigo-A400 { color: rgb(61,90,254) !important; } .mdl-color--indigo-A400 { background-color: rgb(61,90,254) !important; } .mdl-color-text--indigo-A700 { color: rgb(48,79,254) !important; } .mdl-color--indigo-A700 { background-color: rgb(48,79,254) !important; } .mdl-color-text--blue { color: rgb(33,150,243) !important; } .mdl-color--blue { background-color: rgb(33,150,243) !important; } .mdl-color-text--blue-50 { color: rgb(227,242,253) !important; } .mdl-color--blue-50 { background-color: rgb(227,242,253) !important; } .mdl-color-text--blue-100 { color: rgb(187,222,251) !important; } .mdl-color--blue-100 { background-color: rgb(187,222,251) !important; } .mdl-color-text--blue-200 { color: rgb(144,202,249) !important; } .mdl-color--blue-200 { background-color: rgb(144,202,249) !important; } .mdl-color-text--blue-300 { color: rgb(100,181,246) !important; } .mdl-color--blue-300 { background-color: rgb(100,181,246) !important; } .mdl-color-text--blue-400 { color: rgb(66,165,245) !important; } .mdl-color--blue-400 { background-color: rgb(66,165,245) !important; } .mdl-color-text--blue-500 { color: rgb(33,150,243) !important; } .mdl-color--blue-500 { background-color: rgb(33,150,243) !important; } .mdl-color-text--blue-600 { color: rgb(30,136,229) !important; } .mdl-color--blue-600 { background-color: rgb(30,136,229) !important; } .mdl-color-text--blue-700 { color: rgb(25,118,210) !important; } .mdl-color--blue-700 { background-color: rgb(25,118,210) !important; } .mdl-color-text--blue-800 { color: rgb(21,101,192) !important; } .mdl-color--blue-800 { background-color: rgb(21,101,192) !important; } .mdl-color-text--blue-900 { color: rgb(13,71,161) !important; } .mdl-color--blue-900 { background-color: rgb(13,71,161) !important; } .mdl-color-text--blue-A100 { color: rgb(130,177,255) !important; } .mdl-color--blue-A100 { background-color: rgb(130,177,255) !important; } .mdl-color-text--blue-A200 { color: rgb(68,138,255) !important; } .mdl-color--blue-A200 { background-color: rgb(68,138,255) !important; } .mdl-color-text--blue-A400 { color: rgb(41,121,255) !important; } .mdl-color--blue-A400 { background-color: rgb(41,121,255) !important; } .mdl-color-text--blue-A700 { color: rgb(41,98,255) !important; } .mdl-color--blue-A700 { background-color: rgb(41,98,255) !important; } .mdl-color-text--light-blue { color: rgb(3,169,244) !important; } .mdl-color--light-blue { background-color: rgb(3,169,244) !important; } .mdl-color-text--light-blue-50 { color: rgb(225,245,254) !important; } .mdl-color--light-blue-50 { background-color: rgb(225,245,254) !important; } .mdl-color-text--light-blue-100 { color: rgb(179,229,252) !important; } .mdl-color--light-blue-100 { background-color: rgb(179,229,252) !important; } .mdl-color-text--light-blue-200 { color: rgb(129,212,250) !important; } .mdl-color--light-blue-200 { background-color: rgb(129,212,250) !important; } .mdl-color-text--light-blue-300 { color: rgb(79,195,247) !important; } .mdl-color--light-blue-300 { background-color: rgb(79,195,247) !important; } .mdl-color-text--light-blue-400 { color: rgb(41,182,246) !important; } .mdl-color--light-blue-400 { background-color: rgb(41,182,246) !important; } .mdl-color-text--light-blue-500 { color: rgb(3,169,244) !important; } .mdl-color--light-blue-500 { background-color: rgb(3,169,244) !important; } .mdl-color-text--light-blue-600 { color: rgb(3,155,229) !important; } .mdl-color--light-blue-600 { background-color: rgb(3,155,229) !important; } .mdl-color-text--light-blue-700 { color: rgb(2,136,209) !important; } .mdl-color--light-blue-700 { background-color: rgb(2,136,209) !important; } .mdl-color-text--light-blue-800 { color: rgb(2,119,189) !important; } .mdl-color--light-blue-800 { background-color: rgb(2,119,189) !important; } .mdl-color-text--light-blue-900 { color: rgb(1,87,155) !important; } .mdl-color--light-blue-900 { background-color: rgb(1,87,155) !important; } .mdl-color-text--light-blue-A100 { color: rgb(128,216,255) !important; } .mdl-color--light-blue-A100 { background-color: rgb(128,216,255) !important; } .mdl-color-text--light-blue-A200 { color: rgb(64,196,255) !important; } .mdl-color--light-blue-A200 { background-color: rgb(64,196,255) !important; } .mdl-color-text--light-blue-A400 { color: rgb(0,176,255) !important; } .mdl-color--light-blue-A400 { background-color: rgb(0,176,255) !important; } .mdl-color-text--light-blue-A700 { color: rgb(0,145,234) !important; } .mdl-color--light-blue-A700 { background-color: rgb(0,145,234) !important; } .mdl-color-text--cyan { color: rgb(0,188,212) !important; } .mdl-color--cyan { background-color: rgb(0,188,212) !important; } .mdl-color-text--cyan-50 { color: rgb(224,247,250) !important; } .mdl-color--cyan-50 { background-color: rgb(224,247,250) !important; } .mdl-color-text--cyan-100 { color: rgb(178,235,242) !important; } .mdl-color--cyan-100 { background-color: rgb(178,235,242) !important; } .mdl-color-text--cyan-200 { color: rgb(128,222,234) !important; } .mdl-color--cyan-200 { background-color: rgb(128,222,234) !important; } .mdl-color-text--cyan-300 { color: rgb(77,208,225) !important; } .mdl-color--cyan-300 { background-color: rgb(77,208,225) !important; } .mdl-color-text--cyan-400 { color: rgb(38,198,218) !important; } .mdl-color--cyan-400 { background-color: rgb(38,198,218) !important; } .mdl-color-text--cyan-500 { color: rgb(0,188,212) !important; } .mdl-color--cyan-500 { background-color: rgb(0,188,212) !important; } .mdl-color-text--cyan-600 { color: rgb(0,172,193) !important; } .mdl-color--cyan-600 { background-color: rgb(0,172,193) !important; } .mdl-color-text--cyan-700 { color: rgb(0,151,167) !important; } .mdl-color--cyan-700 { background-color: rgb(0,151,167) !important; } .mdl-color-text--cyan-800 { color: rgb(0,131,143) !important; } .mdl-color--cyan-800 { background-color: rgb(0,131,143) !important; } .mdl-color-text--cyan-900 { color: rgb(0,96,100) !important; } .mdl-color--cyan-900 { background-color: rgb(0,96,100) !important; } .mdl-color-text--cyan-A100 { color: rgb(132,255,255) !important; } .mdl-color--cyan-A100 { background-color: rgb(132,255,255) !important; } .mdl-color-text--cyan-A200 { color: rgb(24,255,255) !important; } .mdl-color--cyan-A200 { background-color: rgb(24,255,255) !important; } .mdl-color-text--cyan-A400 { color: rgb(0,229,255) !important; } .mdl-color--cyan-A400 { background-color: rgb(0,229,255) !important; } .mdl-color-text--cyan-A700 { color: rgb(0,184,212) !important; } .mdl-color--cyan-A700 { background-color: rgb(0,184,212) !important; } .mdl-color-text--teal { color: rgb(0,150,136) !important; } .mdl-color--teal { background-color: rgb(0,150,136) !important; } .mdl-color-text--teal-50 { color: rgb(224,242,241) !important; } .mdl-color--teal-50 { background-color: rgb(224,242,241) !important; } .mdl-color-text--teal-100 { color: rgb(178,223,219) !important; } .mdl-color--teal-100 { background-color: rgb(178,223,219) !important; } .mdl-color-text--teal-200 { color: rgb(128,203,196) !important; } .mdl-color--teal-200 { background-color: rgb(128,203,196) !important; } .mdl-color-text--teal-300 { color: rgb(77,182,172) !important; } .mdl-color--teal-300 { background-color: rgb(77,182,172) !important; } .mdl-color-text--teal-400 { color: rgb(38,166,154) !important; } .mdl-color--teal-400 { background-color: rgb(38,166,154) !important; } .mdl-color-text--teal-500 { color: rgb(0,150,136) !important; } .mdl-color--teal-500 { background-color: rgb(0,150,136) !important; } .mdl-color-text--teal-600 { color: rgb(0,137,123) !important; } .mdl-color--teal-600 { background-color: rgb(0,137,123) !important; } .mdl-color-text--teal-700 { color: rgb(0,121,107) !important; } .mdl-color--teal-700 { background-color: rgb(0,121,107) !important; } .mdl-color-text--teal-800 { color: rgb(0,105,92) !important; } .mdl-color--teal-800 { background-color: rgb(0,105,92) !important; } .mdl-color-text--teal-900 { color: rgb(0,77,64) !important; } .mdl-color--teal-900 { background-color: rgb(0,77,64) !important; } .mdl-color-text--teal-A100 { color: rgb(167,255,235) !important; } .mdl-color--teal-A100 { background-color: rgb(167,255,235) !important; } .mdl-color-text--teal-A200 { color: rgb(100,255,218) !important; } .mdl-color--teal-A200 { background-color: rgb(100,255,218) !important; } .mdl-color-text--teal-A400 { color: rgb(29,233,182) !important; } .mdl-color--teal-A400 { background-color: rgb(29,233,182) !important; } .mdl-color-text--teal-A700 { color: rgb(0,191,165) !important; } .mdl-color--teal-A700 { background-color: rgb(0,191,165) !important; } .mdl-color-text--green { color: rgb(76,175,80) !important; } .mdl-color--green { background-color: rgb(76,175,80) !important; } .mdl-color-text--green-50 { color: rgb(232,245,233) !important; } .mdl-color--green-50 { background-color: rgb(232,245,233) !important; } .mdl-color-text--green-100 { color: rgb(200,230,201) !important; } .mdl-color--green-100 { background-color: rgb(200,230,201) !important; } .mdl-color-text--green-200 { color: rgb(165,214,167) !important; } .mdl-color--green-200 { background-color: rgb(165,214,167) !important; } .mdl-color-text--green-300 { color: rgb(129,199,132) !important; } .mdl-color--green-300 { background-color: rgb(129,199,132) !important; } .mdl-color-text--green-400 { color: rgb(102,187,106) !important; } .mdl-color--green-400 { background-color: rgb(102,187,106) !important; } .mdl-color-text--green-500 { color: rgb(76,175,80) !important; } .mdl-color--green-500 { background-color: rgb(76,175,80) !important; } .mdl-color-text--green-600 { color: rgb(67,160,71) !important; } .mdl-color--green-600 { background-color: rgb(67,160,71) !important; } .mdl-color-text--green-700 { color: rgb(56,142,60) !important; } .mdl-color--green-700 { background-color: rgb(56,142,60) !important; } .mdl-color-text--green-800 { color: rgb(46,125,50) !important; } .mdl-color--green-800 { background-color: rgb(46,125,50) !important; } .mdl-color-text--green-900 { color: rgb(27,94,32) !important; } .mdl-color--green-900 { background-color: rgb(27,94,32) !important; } .mdl-color-text--green-A100 { color: rgb(185,246,202) !important; } .mdl-color--green-A100 { background-color: rgb(185,246,202) !important; } .mdl-color-text--green-A200 { color: rgb(105,240,174) !important; } .mdl-color--green-A200 { background-color: rgb(105,240,174) !important; } .mdl-color-text--green-A400 { color: rgb(0,230,118) !important; } .mdl-color--green-A400 { background-color: rgb(0,230,118) !important; } .mdl-color-text--green-A700 { color: rgb(0,200,83) !important; } .mdl-color--green-A700 { background-color: rgb(0,200,83) !important; } .mdl-color-text--light-green { color: rgb(139,195,74) !important; } .mdl-color--light-green { background-color: rgb(139,195,74) !important; } .mdl-color-text--light-green-50 { color: rgb(241,248,233) !important; } .mdl-color--light-green-50 { background-color: rgb(241,248,233) !important; } .mdl-color-text--light-green-100 { color: rgb(220,237,200) !important; } .mdl-color--light-green-100 { background-color: rgb(220,237,200) !important; } .mdl-color-text--light-green-200 { color: rgb(197,225,165) !important; } .mdl-color--light-green-200 { background-color: rgb(197,225,165) !important; } .mdl-color-text--light-green-300 { color: rgb(174,213,129) !important; } .mdl-color--light-green-300 { background-color: rgb(174,213,129) !important; } .mdl-color-text--light-green-400 { color: rgb(156,204,101) !important; } .mdl-color--light-green-400 { background-color: rgb(156,204,101) !important; } .mdl-color-text--light-green-500 { color: rgb(139,195,74) !important; } .mdl-color--light-green-500 { background-color: rgb(139,195,74) !important; } .mdl-color-text--light-green-600 { color: rgb(124,179,66) !important; } .mdl-color--light-green-600 { background-color: rgb(124,179,66) !important; } .mdl-color-text--light-green-700 { color: rgb(104,159,56) !important; } .mdl-color--light-green-700 { background-color: rgb(104,159,56) !important; } .mdl-color-text--light-green-800 { color: rgb(85,139,47) !important; } .mdl-color--light-green-800 { background-color: rgb(85,139,47) !important; } .mdl-color-text--light-green-900 { color: rgb(51,105,30) !important; } .mdl-color--light-green-900 { background-color: rgb(51,105,30) !important; } .mdl-color-text--light-green-A100 { color: rgb(204,255,144) !important; } .mdl-color--light-green-A100 { background-color: rgb(204,255,144) !important; } .mdl-color-text--light-green-A200 { color: rgb(178,255,89) !important; } .mdl-color--light-green-A200 { background-color: rgb(178,255,89) !important; } .mdl-color-text--light-green-A400 { color: rgb(118,255,3) !important; } .mdl-color--light-green-A400 { background-color: rgb(118,255,3) !important; } .mdl-color-text--light-green-A700 { color: rgb(100,221,23) !important; } .mdl-color--light-green-A700 { background-color: rgb(100,221,23) !important; } .mdl-color-text--lime { color: rgb(205,220,57) !important; } .mdl-color--lime { background-color: rgb(205,220,57) !important; } .mdl-color-text--lime-50 { color: rgb(249,251,231) !important; } .mdl-color--lime-50 { background-color: rgb(249,251,231) !important; } .mdl-color-text--lime-100 { color: rgb(240,244,195) !important; } .mdl-color--lime-100 { background-color: rgb(240,244,195) !important; } .mdl-color-text--lime-200 { color: rgb(230,238,156) !important; } .mdl-color--lime-200 { background-color: rgb(230,238,156) !important; } .mdl-color-text--lime-300 { color: rgb(220,231,117) !important; } .mdl-color--lime-300 { background-color: rgb(220,231,117) !important; } .mdl-color-text--lime-400 { color: rgb(212,225,87) !important; } .mdl-color--lime-400 { background-color: rgb(212,225,87) !important; } .mdl-color-text--lime-500 { color: rgb(205,220,57) !important; } .mdl-color--lime-500 { background-color: rgb(205,220,57) !important; } .mdl-color-text--lime-600 { color: rgb(192,202,51) !important; } .mdl-color--lime-600 { background-color: rgb(192,202,51) !important; } .mdl-color-text--lime-700 { color: rgb(175,180,43) !important; } .mdl-color--lime-700 { background-color: rgb(175,180,43) !important; } .mdl-color-text--lime-800 { color: rgb(158,157,36) !important; } .mdl-color--lime-800 { background-color: rgb(158,157,36) !important; } .mdl-color-text--lime-900 { color: rgb(130,119,23) !important; } .mdl-color--lime-900 { background-color: rgb(130,119,23) !important; } .mdl-color-text--lime-A100 { color: rgb(244,255,129) !important; } .mdl-color--lime-A100 { background-color: rgb(244,255,129) !important; } .mdl-color-text--lime-A200 { color: rgb(238,255,65) !important; } .mdl-color--lime-A200 { background-color: rgb(238,255,65) !important; } .mdl-color-text--lime-A400 { color: rgb(198,255,0) !important; } .mdl-color--lime-A400 { background-color: rgb(198,255,0) !important; } .mdl-color-text--lime-A700 { color: rgb(174,234,0) !important; } .mdl-color--lime-A700 { background-color: rgb(174,234,0) !important; } .mdl-color-text--yellow { color: rgb(255,235,59) !important; } .mdl-color--yellow { background-color: rgb(255,235,59) !important; } .mdl-color-text--yellow-50 { color: rgb(255,253,231) !important; } .mdl-color--yellow-50 { background-color: rgb(255,253,231) !important; } .mdl-color-text--yellow-100 { color: rgb(255,249,196) !important; } .mdl-color--yellow-100 { background-color: rgb(255,249,196) !important; } .mdl-color-text--yellow-200 { color: rgb(255,245,157) !important; } .mdl-color--yellow-200 { background-color: rgb(255,245,157) !important; } .mdl-color-text--yellow-300 { color: rgb(255,241,118) !important; } .mdl-color--yellow-300 { background-color: rgb(255,241,118) !important; } .mdl-color-text--yellow-400 { color: rgb(255,238,88) !important; } .mdl-color--yellow-400 { background-color: rgb(255,238,88) !important; } .mdl-color-text--yellow-500 { color: rgb(255,235,59) !important; } .mdl-color--yellow-500 { background-color: rgb(255,235,59) !important; } .mdl-color-text--yellow-600 { color: rgb(253,216,53) !important; } .mdl-color--yellow-600 { background-color: rgb(253,216,53) !important; } .mdl-color-text--yellow-700 { color: rgb(251,192,45) !important; } .mdl-color--yellow-700 { background-color: rgb(251,192,45) !important; } .mdl-color-text--yellow-800 { color: rgb(249,168,37) !important; } .mdl-color--yellow-800 { background-color: rgb(249,168,37) !important; } .mdl-color-text--yellow-900 { color: rgb(245,127,23) !important; } .mdl-color--yellow-900 { background-color: rgb(245,127,23) !important; } .mdl-color-text--yellow-A100 { color: rgb(255,255,141) !important; } .mdl-color--yellow-A100 { background-color: rgb(255,255,141) !important; } .mdl-color-text--yellow-A200 { color: rgb(255,255,0) !important; } .mdl-color--yellow-A200 { background-color: rgb(255,255,0) !important; } .mdl-color-text--yellow-A400 { color: rgb(255,234,0) !important; } .mdl-color--yellow-A400 { background-color: rgb(255,234,0) !important; } .mdl-color-text--yellow-A700 { color: rgb(255,214,0) !important; } .mdl-color--yellow-A700 { background-color: rgb(255,214,0) !important; } .mdl-color-text--amber { color: rgb(255,193,7) !important; } .mdl-color--amber { background-color: rgb(255,193,7) !important; } .mdl-color-text--amber-50 { color: rgb(255,248,225) !important; } .mdl-color--amber-50 { background-color: rgb(255,248,225) !important; } .mdl-color-text--amber-100 { color: rgb(255,236,179) !important; } .mdl-color--amber-100 { background-color: rgb(255,236,179) !important; } .mdl-color-text--amber-200 { color: rgb(255,224,130) !important; } .mdl-color--amber-200 { background-color: rgb(255,224,130) !important; } .mdl-color-text--amber-300 { color: rgb(255,213,79) !important; } .mdl-color--amber-300 { background-color: rgb(255,213,79) !important; } .mdl-color-text--amber-400 { color: rgb(255,202,40) !important; } .mdl-color--amber-400 { background-color: rgb(255,202,40) !important; } .mdl-color-text--amber-500 { color: rgb(255,193,7) !important; } .mdl-color--amber-500 { background-color: rgb(255,193,7) !important; } .mdl-color-text--amber-600 { color: rgb(255,179,0) !important; } .mdl-color--amber-600 { background-color: rgb(255,179,0) !important; } .mdl-color-text--amber-700 { color: rgb(255,160,0) !important; } .mdl-color--amber-700 { background-color: rgb(255,160,0) !important; } .mdl-color-text--amber-800 { color: rgb(255,143,0) !important; } .mdl-color--amber-800 { background-color: rgb(255,143,0) !important; } .mdl-color-text--amber-900 { color: rgb(255,111,0) !important; } .mdl-color--amber-900 { background-color: rgb(255,111,0) !important; } .mdl-color-text--amber-A100 { color: rgb(255,229,127) !important; } .mdl-color--amber-A100 { background-color: rgb(255,229,127) !important; } .mdl-color-text--amber-A200 { color: rgb(255,215,64) !important; } .mdl-color--amber-A200 { background-color: rgb(255,215,64) !important; } .mdl-color-text--amber-A400 { color: rgb(255,196,0) !important; } .mdl-color--amber-A400 { background-color: rgb(255,196,0) !important; } .mdl-color-text--amber-A700 { color: rgb(255,171,0) !important; } .mdl-color--amber-A700 { background-color: rgb(255,171,0) !important; } .mdl-color-text--orange { color: rgb(255,152,0) !important; } .mdl-color--orange { background-color: rgb(255,152,0) !important; } .mdl-color-text--orange-50 { color: rgb(255,243,224) !important; } .mdl-color--orange-50 { background-color: rgb(255,243,224) !important; } .mdl-color-text--orange-100 { color: rgb(255,224,178) !important; } .mdl-color--orange-100 { background-color: rgb(255,224,178) !important; } .mdl-color-text--orange-200 { color: rgb(255,204,128) !important; } .mdl-color--orange-200 { background-color: rgb(255,204,128) !important; } .mdl-color-text--orange-300 { color: rgb(255,183,77) !important; } .mdl-color--orange-300 { background-color: rgb(255,183,77) !important; } .mdl-color-text--orange-400 { color: rgb(255,167,38) !important; } .mdl-color--orange-400 { background-color: rgb(255,167,38) !important; } .mdl-color-text--orange-500 { color: rgb(255,152,0) !important; } .mdl-color--orange-500 { background-color: rgb(255,152,0) !important; } .mdl-color-text--orange-600 { color: rgb(251,140,0) !important; } .mdl-color--orange-600 { background-color: rgb(251,140,0) !important; } .mdl-color-text--orange-700 { color: rgb(245,124,0) !important; } .mdl-color--orange-700 { background-color: rgb(245,124,0) !important; } .mdl-color-text--orange-800 { color: rgb(239,108,0) !important; } .mdl-color--orange-800 { background-color: rgb(239,108,0) !important; } .mdl-color-text--orange-900 { color: rgb(230,81,0) !important; } .mdl-color--orange-900 { background-color: rgb(230,81,0) !important; } .mdl-color-text--orange-A100 { color: rgb(255,209,128) !important; } .mdl-color--orange-A100 { background-color: rgb(255,209,128) !important; } .mdl-color-text--orange-A200 { color: rgb(255,171,64) !important; } .mdl-color--orange-A200 { background-color: rgb(255,171,64) !important; } .mdl-color-text--orange-A400 { color: rgb(255,145,0) !important; } .mdl-color--orange-A400 { background-color: rgb(255,145,0) !important; } .mdl-color-text--orange-A700 { color: rgb(255,109,0) !important; } .mdl-color--orange-A700 { background-color: rgb(255,109,0) !important; } .mdl-color-text--deep-orange { color: rgb(255,87,34) !important; } .mdl-color--deep-orange { background-color: rgb(255,87,34) !important; } .mdl-color-text--deep-orange-50 { color: rgb(251,233,231) !important; } .mdl-color--deep-orange-50 { background-color: rgb(251,233,231) !important; } .mdl-color-text--deep-orange-100 { color: rgb(255,204,188) !important; } .mdl-color--deep-orange-100 { background-color: rgb(255,204,188) !important; } .mdl-color-text--deep-orange-200 { color: rgb(255,171,145) !important; } .mdl-color--deep-orange-200 { background-color: rgb(255,171,145) !important; } .mdl-color-text--deep-orange-300 { color: rgb(255,138,101) !important; } .mdl-color--deep-orange-300 { background-color: rgb(255,138,101) !important; } .mdl-color-text--deep-orange-400 { color: rgb(255,112,67) !important; } .mdl-color--deep-orange-400 { background-color: rgb(255,112,67) !important; } .mdl-color-text--deep-orange-500 { color: rgb(255,87,34) !important; } .mdl-color--deep-orange-500 { background-color: rgb(255,87,34) !important; } .mdl-color-text--deep-orange-600 { color: rgb(244,81,30) !important; } .mdl-color--deep-orange-600 { background-color: rgb(244,81,30) !important; } .mdl-color-text--deep-orange-700 { color: rgb(230,74,25) !important; } .mdl-color--deep-orange-700 { background-color: rgb(230,74,25) !important; } .mdl-color-text--deep-orange-800 { color: rgb(216,67,21) !important; } .mdl-color--deep-orange-800 { background-color: rgb(216,67,21) !important; } .mdl-color-text--deep-orange-900 { color: rgb(191,54,12) !important; } .mdl-color--deep-orange-900 { background-color: rgb(191,54,12) !important; } .mdl-color-text--deep-orange-A100 { color: rgb(255,158,128) !important; } .mdl-color--deep-orange-A100 { background-color: rgb(255,158,128) !important; } .mdl-color-text--deep-orange-A200 { color: rgb(255,110,64) !important; } .mdl-color--deep-orange-A200 { background-color: rgb(255,110,64) !important; } .mdl-color-text--deep-orange-A400 { color: rgb(255,61,0) !important; } .mdl-color--deep-orange-A400 { background-color: rgb(255,61,0) !important; } .mdl-color-text--deep-orange-A700 { color: rgb(221,44,0) !important; } .mdl-color--deep-orange-A700 { background-color: rgb(221,44,0) !important; } .mdl-color-text--brown { color: rgb(121,85,72) !important; } .mdl-color--brown { background-color: rgb(121,85,72) !important; } .mdl-color-text--brown-50 { color: rgb(239,235,233) !important; } .mdl-color--brown-50 { background-color: rgb(239,235,233) !important; } .mdl-color-text--brown-100 { color: rgb(215,204,200) !important; } .mdl-color--brown-100 { background-color: rgb(215,204,200) !important; } .mdl-color-text--brown-200 { color: rgb(188,170,164) !important; } .mdl-color--brown-200 { background-color: rgb(188,170,164) !important; } .mdl-color-text--brown-300 { color: rgb(161,136,127) !important; } .mdl-color--brown-300 { background-color: rgb(161,136,127) !important; } .mdl-color-text--brown-400 { color: rgb(141,110,99) !important; } .mdl-color--brown-400 { background-color: rgb(141,110,99) !important; } .mdl-color-text--brown-500 { color: rgb(121,85,72) !important; } .mdl-color--brown-500 { background-color: rgb(121,85,72) !important; } .mdl-color-text--brown-600 { color: rgb(109,76,65) !important; } .mdl-color--brown-600 { background-color: rgb(109,76,65) !important; } .mdl-color-text--brown-700 { color: rgb(93,64,55) !important; } .mdl-color--brown-700 { background-color: rgb(93,64,55) !important; } .mdl-color-text--brown-800 { color: rgb(78,52,46) !important; } .mdl-color--brown-800 { background-color: rgb(78,52,46) !important; } .mdl-color-text--brown-900 { color: rgb(62,39,35) !important; } .mdl-color--brown-900 { background-color: rgb(62,39,35) !important; } .mdl-color-text--grey { color: rgb(158,158,158) !important; } .mdl-color--grey { background-color: rgb(158,158,158) !important; } .mdl-color-text--grey-50 { color: rgb(250,250,250) !important; } .mdl-color--grey-50 { background-color: rgb(250,250,250) !important; } .mdl-color-text--grey-100 { color: rgb(245,245,245) !important; } .mdl-color--grey-100 { background-color: rgb(245,245,245) !important; } .mdl-color-text--grey-200 { color: rgb(238,238,238) !important; } .mdl-color--grey-200 { background-color: rgb(238,238,238) !important; } .mdl-color-text--grey-300 { color: rgb(224,224,224) !important; } .mdl-color--grey-300 { background-color: rgb(224,224,224) !important; } .mdl-color-text--grey-400 { color: rgb(189,189,189) !important; } .mdl-color--grey-400 { background-color: rgb(189,189,189) !important; } .mdl-color-text--grey-500 { color: rgb(158,158,158) !important; } .mdl-color--grey-500 { background-color: rgb(158,158,158) !important; } .mdl-color-text--grey-600 { color: rgb(117,117,117) !important; } .mdl-color--grey-600 { background-color: rgb(117,117,117) !important; } .mdl-color-text--grey-700 { color: rgb(97,97,97) !important; } .mdl-color--grey-700 { background-color: rgb(97,97,97) !important; } .mdl-color-text--grey-800 { color: rgb(66,66,66) !important; } .mdl-color--grey-800 { background-color: rgb(66,66,66) !important; } .mdl-color-text--grey-900 { color: rgb(33,33,33) !important; } .mdl-color--grey-900 { background-color: rgb(33,33,33) !important; } .mdl-color-text--blue-grey { color: rgb(96,125,139) !important; } .mdl-color--blue-grey { background-color: rgb(96,125,139) !important; } .mdl-color-text--blue-grey-50 { color: rgb(236,239,241) !important; } .mdl-color--blue-grey-50 { background-color: rgb(236,239,241) !important; } .mdl-color-text--blue-grey-100 { color: rgb(207,216,220) !important; } .mdl-color--blue-grey-100 { background-color: rgb(207,216,220) !important; } .mdl-color-text--blue-grey-200 { color: rgb(176,190,197) !important; } .mdl-color--blue-grey-200 { background-color: rgb(176,190,197) !important; } .mdl-color-text--blue-grey-300 { color: rgb(144,164,174) !important; } .mdl-color--blue-grey-300 { background-color: rgb(144,164,174) !important; } .mdl-color-text--blue-grey-400 { color: rgb(120,144,156) !important; } .mdl-color--blue-grey-400 { background-color: rgb(120,144,156) !important; } .mdl-color-text--blue-grey-500 { color: rgb(96,125,139) !important; } .mdl-color--blue-grey-500 { background-color: rgb(96,125,139) !important; } .mdl-color-text--blue-grey-600 { color: rgb(84,110,122) !important; } .mdl-color--blue-grey-600 { background-color: rgb(84,110,122) !important; } .mdl-color-text--blue-grey-700 { color: rgb(69,90,100) !important; } .mdl-color--blue-grey-700 { background-color: rgb(69,90,100) !important; } .mdl-color-text--blue-grey-800 { color: rgb(55,71,79) !important; } .mdl-color--blue-grey-800 { background-color: rgb(55,71,79) !important; } .mdl-color-text--blue-grey-900 { color: rgb(38,50,56) !important; } .mdl-color--blue-grey-900 { background-color: rgb(38,50,56) !important; } .mdl-color--black { background-color: rgb(0,0,0) !important; } .mdl-color-text--black { color: rgb(0,0,0) !important; } .mdl-color--white { background-color: rgb(255,255,255) !important; } .mdl-color-text--white { color: rgb(255,255,255) !important; } .mdl-color--primary { background-color: rgb(63,81,181) !important; } .mdl-color--primary-contrast { background-color: rgb(255,255,255) !important; } .mdl-color--primary-dark { background-color: rgb(48,63,159) !important; } .mdl-color--accent { background-color: rgb(255,64,129) !important; } .mdl-color--accent-contrast { background-color: rgb(255,255,255) !important; } .mdl-color-text--primary { color: rgb(63,81,181) !important; } .mdl-color-text--primary-contrast { color: rgb(255,255,255) !important; } .mdl-color-text--primary-dark { color: rgb(48,63,159) !important; } .mdl-color-text--accent { color: rgb(255,64,129) !important; } .mdl-color-text--accent-contrast { color: rgb(255,255,255) !important; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ .mdl-ripple { background: rgb(0,0,0); border-radius: 50%; height: 50px; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50px; overflow: hidden; } .mdl-ripple.is-animating { transition: width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1); -webkit-transition: width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1); } .mdl-ripple.is-visible { opacity: 0.3; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ .mdl-animation--default { -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .mdl-animation--fast-out-slow-in { -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .mdl-animation--linear-out-slow-in { -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .mdl-animation--fast-out-linear-in { -webkit-transition-timing-function: cubic-bezier(0.4, 0, 1, 1); transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ .mdl-badge { position: relative; white-space: nowrap; margin-right: 24px; } .mdl-badge:not([data-badge]) { margin-right: auto; } .mdl-badge[data-badge]:after { content: attr(data-badge); display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; position: absolute; top: -11px; right: -24px; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 600; font-size: 12px; width: 22px; height: 22px; border-radius: 50%; background: rgb(255,64,129); color: rgb(255,255,255); } .mdl-button .mdl-badge[data-badge]:after { top: -10px; right: -5px; } .mdl-badge.mdl-badge--no-background[data-badge]:after { color: rgb(255,64,129); background: rgba(255,255,255,0.2); -webkit-box-shadow: 0 0 1px gray; box-shadow: 0 0 1px gray; } .mdl-badge.mdl-badge--overlap { margin-right: 10px; } .mdl-badge.mdl-badge--overlap:after { right: -10px; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-button { background: transparent; border: none; border-radius: 2px; color: rgb(0,0,0); position: relative; height: 36px; margin: 0; min-width: 64px; padding: 0 16px; display: inline-block; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: 0; overflow: hidden; will-change: box-shadow; -webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1); transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1); transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1); outline: none; cursor: pointer; text-decoration: none; text-align: center; line-height: 36px; vertical-align: middle; } .mdl-button::-moz-focus-inner { border: 0; } .mdl-button:hover { background-color: rgba(158,158,158, 0.20); } .mdl-button:focus:not(:active) { background-color: rgba(0,0,0, 0.12); } .mdl-button:active { background-color: rgba(158,158,158, 0.40); } .mdl-button.mdl-button--colored { color: rgb(63,81,181); } .mdl-button.mdl-button--colored:focus:not(:active) { background-color: rgba(0,0,0, 0.12); } input.mdl-button[type="submit"] { -webkit-appearance: none; } .mdl-button--raised { background: rgba(158,158,158, 0.20); -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .mdl-button--raised:active { -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); background-color: rgba(158,158,158, 0.40); } .mdl-button--raised:focus:not(:active) { -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36); box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36); background-color: rgba(158,158,158, 0.40); } .mdl-button--raised.mdl-button--colored { background: rgb(63,81,181); color: rgb(255,255,255); } .mdl-button--raised.mdl-button--colored:hover { background-color: rgb(63,81,181); } .mdl-button--raised.mdl-button--colored:active { background-color: rgb(63,81,181); } .mdl-button--raised.mdl-button--colored:focus:not(:active) { background-color: rgb(63,81,181); } .mdl-button--raised.mdl-button--colored .mdl-ripple { background: rgb(255,255,255); } .mdl-button--fab { border-radius: 50%; font-size: 24px; height: 56px; margin: auto; min-width: 56px; width: 56px; padding: 0; overflow: hidden; background: rgba(158,158,158, 0.20); -webkit-box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); position: relative; line-height: normal; } .mdl-button--fab .material-icons { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-12px, -12px); transform: translate(-12px, -12px); line-height: 24px; width: 24px; } .mdl-button--fab.mdl-button--mini-fab { height: 40px; min-width: 40px; width: 40px; } .mdl-button--fab .mdl-button__ripple-container { border-radius: 50%; -webkit-mask-image: -webkit-radial-gradient(circle, white, black); } .mdl-button--fab:active { -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); background-color: rgba(158,158,158, 0.40); } .mdl-button--fab:focus:not(:active) { -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36); box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36); background-color: rgba(158,158,158, 0.40); } .mdl-button--fab.mdl-button--colored { background: rgb(255,64,129); color: rgb(255,255,255); } .mdl-button--fab.mdl-button--colored:hover { background-color: rgb(255,64,129); } .mdl-button--fab.mdl-button--colored:focus:not(:active) { background-color: rgb(255,64,129); } .mdl-button--fab.mdl-button--colored:active { background-color: rgb(255,64,129); } .mdl-button--fab.mdl-button--colored .mdl-ripple { background: rgb(255,255,255); } .mdl-button--icon { border-radius: 50%; font-size: 24px; height: 32px; margin-left: 0; margin-right: 0; min-width: 32px; width: 32px; padding: 0; overflow: hidden; color: inherit; line-height: normal; } .mdl-button--icon .material-icons { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-12px, -12px); transform: translate(-12px, -12px); line-height: 24px; width: 24px; } .mdl-button--icon.mdl-button--mini-icon { height: 24px; min-width: 24px; width: 24px; } .mdl-button--icon.mdl-button--mini-icon .material-icons { top: 0px; left: 0px; } .mdl-button--icon .mdl-button__ripple-container { border-radius: 50%; -webkit-mask-image: -webkit-radial-gradient(circle, white, black); } .mdl-button__ripple-container { display: block; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 0; overflow: hidden; } .mdl-button[disabled] .mdl-button__ripple-container .mdl-ripple, .mdl-button.mdl-button--disabled .mdl-button__ripple-container .mdl-ripple { background-color: transparent; } .mdl-button--primary.mdl-button--primary { color: rgb(63,81,181); } .mdl-button--primary.mdl-button--primary .mdl-ripple { background: rgb(255,255,255); } .mdl-button--primary.mdl-button--primary.mdl-button--raised, .mdl-button--primary.mdl-button--primary.mdl-button--fab { color: rgb(255,255,255); background-color: rgb(63,81,181); } .mdl-button--accent.mdl-button--accent { color: rgb(255,64,129); } .mdl-button--accent.mdl-button--accent .mdl-ripple { background: rgb(255,255,255); } .mdl-button--accent.mdl-button--accent.mdl-button--raised, .mdl-button--accent.mdl-button--accent.mdl-button--fab { color: rgb(255,255,255); background-color: rgb(255,64,129); } .mdl-button[disabled][disabled], .mdl-button.mdl-button--disabled.mdl-button--disabled { color: rgba(0,0,0, 0.26); cursor: default; background-color: transparent; } .mdl-button--fab[disabled][disabled], .mdl-button--fab.mdl-button--disabled.mdl-button--disabled { background-color: rgba(0,0,0, 0.12); color: rgba(0,0,0, 0.26); } .mdl-button--raised[disabled][disabled], .mdl-button--raised.mdl-button--disabled.mdl-button--disabled { background-color: rgba(0,0,0, 0.12); color: rgba(0,0,0, 0.26); -webkit-box-shadow: none; box-shadow: none; } .mdl-button--colored[disabled][disabled], .mdl-button--colored.mdl-button--disabled.mdl-button--disabled { color: rgba(0,0,0, 0.26); } .mdl-button .material-icons { vertical-align: middle; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ .mdl-card { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; font-size: 16px; font-weight: 400; min-height: 200px; overflow: hidden; width: 330px; z-index: 1; position: relative; background: rgb(255,255,255); border-radius: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mdl-card__media { background-color: rgb(255,64,129); background-repeat: repeat; background-position: 50% 50%; background-size: cover; background-origin: padding-box; background-attachment: scroll; -webkit-box-sizing: border-box; box-sizing: border-box; } .mdl-card__title { -ms-flex-align: center; -webkit-box-align: center; align-items: center; color: rgb(0,0,0); display: block; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: stretch; -webkit-box-pack: stretch; justify-content: stretch; line-height: normal; padding: 16px 16px; -webkit-perspective-origin: 165px 56px; perspective-origin: 165px 56px; -webkit-transform-origin: 165px 56px; transform-origin: 165px 56px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mdl-card__title.mdl-card--border { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .mdl-card__title-text { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; color: inherit; display: block; display: -ms-flexbox; display: -webkit-box; display: flex; font-size: 24px; font-weight: 300; line-height: normal; overflow: hidden; -webkit-transform-origin: 149px 48px; transform-origin: 149px 48px; margin: 0; } .mdl-card__subtitle-text { font-size: 14px; color: rgba(0,0,0, 0.54); margin: 0; } .mdl-card__supporting-text { color: rgba(0,0,0, 0.54); font-size: 1rem; line-height: 18px; overflow: hidden; padding: 16px 16px; width: 90%; } .mdl-card__supporting-text.mdl-card--border { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .mdl-card__actions { font-size: 16px; line-height: normal; width: 100%; background-color: transparent; padding: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mdl-card__actions.mdl-card--border { border-top: 1px solid rgba(0, 0, 0, 0.1); } .mdl-card--expand { -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; } .mdl-card__menu { position: absolute; right: 16px; top: 16px; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-checkbox { position: relative; z-index: 1; vertical-align: middle; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 24px; margin: 0; padding: 0; } .mdl-checkbox.is-upgraded { padding-left: 24px; } .mdl-checkbox__input { line-height: 24px; } .mdl-checkbox.is-upgraded .mdl-checkbox__input { position: absolute; width: 0; height: 0; margin: 0; padding: 0; opacity: 0; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; } .mdl-checkbox__box-outline { position: absolute; top: 3px; left: 0; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 16px; height: 16px; margin: 0; cursor: pointer; overflow: hidden; border: 2px solid rgba(0,0,0, 0.54); border-radius: 2px; z-index: 2; } .mdl-checkbox.is-checked .mdl-checkbox__box-outline { border: 2px solid rgb(63,81,181); } fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline, .mdl-checkbox.is-disabled .mdl-checkbox__box-outline { border: 2px solid rgba(0,0,0, 0.26); cursor: auto; } .mdl-checkbox__focus-helper { position: absolute; top: 3px; left: 0; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; background-color: transparent; } .mdl-checkbox.is-focused .mdl-checkbox__focus-helper { -webkit-box-shadow: 0 0 0px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 0 0px 8px rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1); } .mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper { -webkit-box-shadow: 0 0 0px 8px rgba(63,81,181, 0.26); box-shadow: 0 0 0px 8px rgba(63,81,181, 0.26); background-color: rgba(63,81,181, 0.26); } .mdl-checkbox__tick-outline { position: absolute; top: 0; left: 0; height: 100%; width: 100%; -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gMCwwIDAsMSAxLDEgMSwwIDAsMCB6IE0gMC44NTM0Mzc1LDAuMTY3MTg3NSAwLjk1OTY4NzUsMC4yNzMxMjUgMC40MjkzNzUsMC44MDM0Mzc1IDAuMzIzMTI1LDAuOTA5Njg3NSAwLjIxNzE4NzUsMC44MDM0Mzc1IDAuMDQwMzEyNSwwLjYyNjg3NSAwLjE0NjU2MjUsMC41MjA2MjUgMC4zMjMxMjUsMC42OTc1IDAuODUzNDM3NSwwLjE2NzE4NzUgeiIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDwvY2xpcFBhdGg+CiAgICA8bWFzayBpZD0ibWFzayIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgbWFza0NvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDAsMCAwLDEgMSwxIDEsMCAwLDAgeiBNIDAuODUzNDM3NSwwLjE2NzE4NzUgMC45NTk2ODc1LDAuMjczMTI1IDAuNDI5Mzc1LDAuODAzNDM3NSAwLjMyMzEyNSwwLjkwOTY4NzUgMC4yMTcxODc1LDAuODAzNDM3NSAwLjA0MDMxMjUsMC42MjY4NzUgMC4xNDY1NjI1LDAuNTIwNjI1IDAuMzIzMTI1LDAuNjk3NSAwLjg1MzQzNzUsMC4xNjcxODc1IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgogIDxyZWN0CiAgICAgd2lkdGg9IjEiCiAgICAgaGVpZ2h0PSIxIgogICAgIHg9IjAiCiAgICAgeT0iMCIKICAgICBjbGlwLXBhdGg9InVybCgjY2xpcCkiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg=="); mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gMCwwIDAsMSAxLDEgMSwwIDAsMCB6IE0gMC44NTM0Mzc1LDAuMTY3MTg3NSAwLjk1OTY4NzUsMC4yNzMxMjUgMC40MjkzNzUsMC44MDM0Mzc1IDAuMzIzMTI1LDAuOTA5Njg3NSAwLjIxNzE4NzUsMC44MDM0Mzc1IDAuMDQwMzEyNSwwLjYyNjg3NSAwLjE0NjU2MjUsMC41MjA2MjUgMC4zMjMxMjUsMC42OTc1IDAuODUzNDM3NSwwLjE2NzE4NzUgeiIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDwvY2xpcFBhdGg+CiAgICA8bWFzayBpZD0ibWFzayIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgbWFza0NvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDAsMCAwLDEgMSwxIDEsMCAwLDAgeiBNIDAuODUzNDM3NSwwLjE2NzE4NzUgMC45NTk2ODc1LDAuMjczMTI1IDAuNDI5Mzc1LDAuODAzNDM3NSAwLjMyMzEyNSwwLjkwOTY4NzUgMC4yMTcxODc1LDAuODAzNDM3NSAwLjA0MDMxMjUsMC42MjY4NzUgMC4xNDY1NjI1LDAuNTIwNjI1IDAuMzIzMTI1LDAuNjk3NSAwLjg1MzQzNzUsMC4xNjcxODc1IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgogIDxyZWN0CiAgICAgd2lkdGg9IjEiCiAgICAgaGVpZ2h0PSIxIgogICAgIHg9IjAiCiAgICAgeT0iMCIKICAgICBjbGlwLXBhdGg9InVybCgjY2xpcCkiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg=="); background: transparent; -webkit-transition-duration: 0.28s; transition-duration: 0.28s; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-property: background; transition-property: background; } .mdl-checkbox.is-checked .mdl-checkbox__tick-outline { background: rgb(63,81,181) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K"); } fieldset[disabled] .mdl-checkbox.is-checked .mdl-checkbox__tick-outline, .mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline { background: rgba(0,0,0, 0.26) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K"); } .mdl-checkbox__label { position: relative; cursor: pointer; font-size: 16px; line-height: 24px; margin: 0; } fieldset[disabled] .mdl-checkbox .mdl-checkbox__label, .mdl-checkbox.is-disabled .mdl-checkbox__label { color: rgba(0,0,0, 0.26); cursor: auto; } .mdl-checkbox__ripple-container { position: absolute; z-index: 2; top: -6px; left: -10px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(circle, white, black); } .mdl-checkbox__ripple-container .mdl-ripple { background: rgb(63,81,181); } fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container, .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container { cursor: auto; } fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container .mdl-ripple, .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container .mdl-ripple { background: transparent; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-chip { height: 32px; font-family: "Roboto", "Helvetica", "Arial", sans-serif; line-height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background-color: #dedede; display: inline-block; color: rgba(0,0,0, 0.87); margin: 2px 0; font-size: 0; white-space: nowrap; } .mdl-chip__text { font-size: 13px; vertical-align: middle; display: inline-block; } .mdl-chip__action { height: 24px; width: 24px; background: transparent; opacity: 0.54; display: inline-block; cursor: pointer; text-align: center; vertical-align: middle; padding: 0; margin: 0 0 0 4px; font-size: 13px; text-decoration: none; color: rgba(0,0,0, 0.87); border: none; outline: none; overflow: hidden; } .mdl-chip__contact { height: 32px; width: 32px; border-radius: 16px; display: inline-block; vertical-align: middle; margin-right: 8px; overflow: hidden; text-align: center; font-size: 18px; line-height: 32px; } .mdl-chip:focus { outline: 0; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .mdl-chip:active { background-color: #d6d6d6; } .mdl-chip--deletable { padding-right: 4px; } .mdl-chip--contact { padding-left: 0; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-data-table { position: relative; border: 1px solid rgba(0, 0, 0, 0.12); border-collapse: collapse; white-space: nowrap; font-size: 13px; background-color: rgb(255,255,255); } .mdl-data-table thead { padding-bottom: 3px; } .mdl-data-table thead .mdl-data-table__select { margin-top: 0; } .mdl-data-table tbody tr { position: relative; height: 48px; -webkit-transition-duration: 0.28s; transition-duration: 0.28s; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-property: background-color; transition-property: background-color; } .mdl-data-table tbody tr.is-selected { background-color: #e0e0e0; } .mdl-data-table tbody tr:hover { background-color: #eeeeee; } .mdl-data-table td, .mdl-data-table th { padding: 0 18px 12px 18px; text-align: right; } .mdl-data-table td:first-of-type, .mdl-data-table th:first-of-type { padding-left: 24px; } .mdl-data-table td:last-of-type, .mdl-data-table th:last-of-type { padding-right: 24px; } .mdl-data-table td { position: relative; vertical-align: middle; height: 48px; border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding-top: 12px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mdl-data-table td .mdl-data-table__select { vertical-align: middle; } .mdl-data-table th { position: relative; vertical-align: bottom; text-overflow: ellipsis; font-size: 14px; font-weight: bold; line-height: 24px; letter-spacing: 0; height: 48px; font-size: 12px; color: rgba(0, 0, 0, 0.54); padding-bottom: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mdl-data-table th.mdl-data-table__header--sorted-ascending, .mdl-data-table th.mdl-data-table__header--sorted-descending { color: rgba(0, 0, 0, 0.87); } .mdl-data-table th.mdl-data-table__header--sorted-ascending:before, .mdl-data-table th.mdl-data-table__header--sorted-descending:before { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; word-wrap: normal; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-size: 16px; content: "\E5D8"; margin-right: 5px; vertical-align: sub; } .mdl-data-table th.mdl-data-table__header--sorted-ascending:hover, .mdl-data-table th.mdl-data-table__header--sorted-descending:hover { cursor: pointer; } .mdl-data-table th.mdl-data-table__header--sorted-ascending:hover:before, .mdl-data-table th.mdl-data-table__header--sorted-descending:hover:before { color: rgba(0, 0, 0, 0.26); } .mdl-data-table th.mdl-data-table__header--sorted-descending:before { content: "\E5DB"; } .mdl-data-table__select { width: 16px; } .mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric { text-align: left; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-dialog { border: none; -webkit-box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); width: 280px; } .mdl-dialog__title { padding: 24px 24px 0; margin: 0; font-size: 2.5rem; } .mdl-dialog__actions { padding: 8px 8px 8px 24px; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row-reverse; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse; -ms-flex-wrap: wrap; flex-wrap: wrap; } .mdl-dialog__actions > * { margin-right: 8px; height: 36px; } .mdl-dialog__actions > *:first-child { margin-right: 0; } .mdl-dialog__actions--full-width { padding: 0 0 8px 0; } .mdl-dialog__actions--full-width > * { height: 48px; -ms-flex: 0 0 100%; -webkit-box-flex: 0; flex: 0 0 100%; padding-right: 16px; margin-right: 0; text-align: right; } .mdl-dialog__content { padding: 20px 24px 24px 24px; color: rgba(0,0,0, 0.54); } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-mega-footer { padding: 16px 40px; color: rgb(158,158,158); background-color: rgb(66,66,66); } .mdl-mega-footer--top-section:after, .mdl-mega-footer--middle-section:after, .mdl-mega-footer--bottom-section:after, .mdl-mega-footer__top-section:after, .mdl-mega-footer__middle-section:after, .mdl-mega-footer__bottom-section:after { content: ''; display: block; clear: both; } .mdl-mega-footer--left-section, .mdl-mega-footer__left-section { margin-bottom: 16px; } .mdl-mega-footer--right-section, .mdl-mega-footer__right-section { margin-bottom: 16px; } .mdl-mega-footer--right-section a, .mdl-mega-footer__right-section a { display: block; margin-bottom: 16px; color: inherit; text-decoration: none; } @media screen and (min-width: 760px) { .mdl-mega-footer--left-section, .mdl-mega-footer__left-section { float: left; } .mdl-mega-footer--right-section, .mdl-mega-footer__right-section { float: right; } .mdl-mega-footer--right-section a, .mdl-mega-footer__right-section a { display: inline-block; margin-left: 16px; line-height: 36px; vertical-align: middle; } } .mdl-mega-footer--social-btn, .mdl-mega-footer__social-btn { width: 36px; height: 36px; padding: 0; margin: 0; background-color: rgb(158,158,158); border: none; } .mdl-mega-footer--drop-down-section, .mdl-mega-footer__drop-down-section { display: block; position: relative; } @media screen and (min-width: 760px) { .mdl-mega-footer--drop-down-section, .mdl-mega-footer__drop-down-section { width: 33%; } .mdl-mega-footer--drop-down-section:nth-child(1), .mdl-mega-footer--drop-down-section:nth-child(2), .mdl-mega-footer__drop-down-section:nth-child(1), .mdl-mega-footer__drop-down-section:nth-child(2) { float: left; } .mdl-mega-footer--drop-down-section:nth-child(3), .mdl-mega-footer__drop-down-section:nth-child(3) { float: right; } .mdl-mega-footer--drop-down-section:nth-child(3):after, .mdl-mega-footer__drop-down-section:nth-child(3):after { clear: right; } .mdl-mega-footer--drop-down-section:nth-child(4), .mdl-mega-footer__drop-down-section:nth-child(4) { clear: right; float: right; } .mdl-mega-footer--middle-section:after, .mdl-mega-footer__middle-section:after { content: ''; display: block; clear: both; } .mdl-mega-footer--bottom-section, .mdl-mega-footer__bottom-section { padding-top: 0; } } @media screen and (min-width: 1024px) { .mdl-mega-footer--drop-down-section, .mdl-mega-footer--drop-down-section:nth-child(3), .mdl-mega-footer--drop-down-section:nth-child(4), .mdl-mega-footer__drop-down-section, .mdl-mega-footer__drop-down-section:nth-child(3), .mdl-mega-footer__drop-down-section:nth-child(4) { width: 24%; float: left; } } .mdl-mega-footer--heading-checkbox, .mdl-mega-footer__heading-checkbox { position: absolute; width: 100%; height: 55.8px; padding: 32px; margin: 0; margin-top: -16px; cursor: pointer; z-index: 1; opacity: 0; } .mdl-mega-footer--heading-checkbox + .mdl-mega-footer--heading:after, .mdl-mega-footer--heading-checkbox + .mdl-mega-footer__heading:after, .mdl-mega-footer__heading-checkbox + .mdl-mega-footer--heading:after, .mdl-mega-footer__heading-checkbox + .mdl-mega-footer__heading:after { font-family: 'Material Icons'; content: '\E5CE'; } .mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer--link-list, .mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer__link-list, .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list, .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list, .mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer--link-list, .mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer__link-list, .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list, .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list { display: none; } .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading:after, .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading:after, .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading:after, .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading:after { font-family: 'Material Icons'; content: '\E5CF'; } .mdl-mega-footer--heading, .mdl-mega-footer__heading { position: relative; width: 100%; padding-right: 39.8px; margin-bottom: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; line-height: 23.8px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: rgb(224,224,224); } .mdl-mega-footer--heading:after, .mdl-mega-footer__heading:after { content: ''; position: absolute; top: 0; right: 0; display: block; width: 23.8px; height: 23.8px; background-size: cover; } .mdl-mega-footer--link-list, .mdl-mega-footer__link-list { list-style: none; margin: 0; padding: 0; margin-bottom: 32px; } .mdl-mega-footer--link-list:after, .mdl-mega-footer__link-list:after { clear: both; display: block; content: ''; } .mdl-mega-footer--link-list li, .mdl-mega-footer__link-list li { font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; line-height: 20px; } .mdl-mega-footer--link-list a, .mdl-mega-footer__link-list a { color: inherit; text-decoration: none; white-space: nowrap; } @media screen and (min-width: 760px) { .mdl-mega-footer--heading-checkbox, .mdl-mega-footer__heading-checkbox { display: none; } .mdl-mega-footer--heading-checkbox + .mdl-mega-footer--heading:after, .mdl-mega-footer--heading-checkbox + .mdl-mega-footer__heading:after, .mdl-mega-footer__heading-checkbox + .mdl-mega-footer--heading:after, .mdl-mega-footer__heading-checkbox + .mdl-mega-footer__heading:after { content: ''; } .mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer--link-list, .mdl-mega-footer--heading-checkbox:checked ~ .mdl-mega-footer__link-list, .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list, .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list, .mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer--link-list, .mdl-mega-footer__heading-checkbox:checked ~ .mdl-mega-footer__link-list, .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading + .mdl-mega-footer__link-list, .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading + .mdl-mega-footer--link-list { display: block; } .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer--heading:after, .mdl-mega-footer--heading-checkbox:checked + .mdl-mega-footer__heading:after, .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer--heading:after, .mdl-mega-footer__heading-checkbox:checked + .mdl-mega-footer__heading:after { content: ''; } } .mdl-mega-footer--bottom-section, .mdl-mega-footer__bottom-section { padding-top: 16px; margin-bottom: 16px; } .mdl-logo { margin-bottom: 16px; color: white; } .mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li, .mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li { float: left; margin-bottom: 0; margin-right: 16px; } @media screen and (min-width: 760px) { .mdl-logo { float: left; margin-bottom: 0; margin-right: 16px; } } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ .mdl-mini-footer { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-flow: row wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; padding: 32px 16px; color: rgb(158,158,158); background-color: rgb(66,66,66); } .mdl-mini-footer:after { content: ''; display: block; } .mdl-mini-footer .mdl-logo { line-height: 36px; } .mdl-mini-footer--link-list, .mdl-mini-footer__link-list { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-flow: row nowrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row nowrap; list-style: none; margin: 0; padding: 0; } .mdl-mini-footer--link-list li, .mdl-mini-footer__link-list li { margin-bottom: 0; margin-right: 16px; } @media screen and (min-width: 760px) { .mdl-mini-footer--link-list li, .mdl-mini-footer__link-list li { line-height: 36px; } } .mdl-mini-footer--link-list a, .mdl-mini-footer__link-list a { color: inherit; text-decoration: none; white-space: nowrap; } .mdl-mini-footer--left-section, .mdl-mini-footer__left-section { display: inline-block; -ms-flex-order: 0; -webkit-box-ordinal-group: 1; order: 0; } .mdl-mini-footer--right-section, .mdl-mini-footer__right-section { display: inline-block; -ms-flex-order: 1; -webkit-box-ordinal-group: 2; order: 1; } .mdl-mini-footer--social-btn, .mdl-mini-footer__social-btn { width: 36px; height: 36px; padding: 0; margin: 0; background-color: rgb(158,158,158); border: none; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ .mdl-icon-toggle { position: relative; z-index: 1; vertical-align: middle; display: inline-block; height: 32px; margin: 0; padding: 0; } .mdl-icon-toggle__input { line-height: 32px; } .mdl-icon-toggle.is-upgraded .mdl-icon-toggle__input { position: absolute; width: 0; height: 0; margin: 0; padding: 0; opacity: 0; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; } .mdl-icon-toggle__label { display: inline-block; position: relative; cursor: pointer; height: 32px; width: 32px; min-width: 32px; color: rgb(97,97,97); border-radius: 50%; padding: 0; margin-left: 0; margin-right: 0; text-align: center; background-color: transparent; will-change: background-color; -webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .mdl-icon-toggle__label.material-icons { line-height: 32px; font-size: 24px; } .mdl-icon-toggle.is-checked .mdl-icon-toggle__label { color: rgb(63,81,181); } .mdl-icon-toggle.is-disabled .mdl-icon-toggle__label { color: rgba(0,0,0, 0.26); cursor: auto; -webkit-transition: none; transition: none; } .mdl-icon-toggle.is-focused .mdl-icon-toggle__label { background-color: rgba(0,0,0, 0.12); } .mdl-icon-toggle.is-focused.is-checked .mdl-icon-toggle__label { background-color: rgba(63,81,181, 0.26); } .mdl-icon-toggle__ripple-container { position: absolute; z-index: 2; top: -2px; left: -2px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(circle, white, black); } .mdl-icon-toggle__ripple-container .mdl-ripple { background: rgb(97,97,97); } .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container { cursor: auto; } .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container .mdl-ripple { background: transparent; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-list { display: block; padding: 8px 0; list-style: none; } .mdl-list__item { font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0.04em; line-height: 1; display: -ms-flexbox; display: -webkit-box; display: flex; min-height: 48px; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-align: center; -webkit-box-align: center; align-items: center; padding: 16px; cursor: default; color: rgba(0,0,0, 0.87); overflow: hidden; } .mdl-list__item .mdl-list__item-primary-content { -ms-flex-order: 0; -webkit-box-ordinal-group: 1; order: 0; -ms-flex-positive: 2; -webkit-box-flex: 2; flex-grow: 2; text-decoration: none; -webkit-box-sizing: border-box; box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -webkit-box-align: center; align-items: center; } .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-icon { margin-right: 32px; } .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-avatar { margin-right: 16px; } .mdl-list__item .mdl-list__item-secondary-content { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-flow: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column; -ms-flex-align: end; -webkit-box-align: end; align-items: flex-end; margin-left: 16px; } .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-action label { display: inline; } .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-info { font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0; color: rgba(0,0,0, 0.54); } .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-sub-header { padding: 0 0 0 16px; } .mdl-list__item-icon, .mdl-list__item-icon.material-icons { height: 24px; width: 24px; font-size: 24px; -webkit-box-sizing: border-box; box-sizing: border-box; color: rgb(117,117,117); } .mdl-list__item-avatar, .mdl-list__item-avatar.material-icons { height: 40px; width: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; background-color: rgb(117,117,117); font-size: 40px; color: white; } .mdl-list__item--two-line { height: 72px; } .mdl-list__item--two-line .mdl-list__item-primary-content { height: 36px; line-height: 20px; display: block; } .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-avatar { float: left; } .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-icon { float: left; margin-top: 6px; } .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-secondary-content { height: 36px; } .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-sub-title { font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; line-height: 18px; color: rgba(0,0,0, 0.54); display: block; padding: 0; } .mdl-list__item--three-line { height: 88px; } .mdl-list__item--three-line .mdl-list__item-primary-content { height: 52px; line-height: 20px; display: block; } .mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-avatar, .mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-icon { float: left; } .mdl-list__item--three-line .mdl-list__item-secondary-content { height: 52px; } .mdl-list__item--three-line .mdl-list__item-text-body { font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; line-height: 18px; height: 52px; color: rgba(0,0,0, 0.54); display: block; padding: 0; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-menu__container { display: block; margin: 0; padding: 0; border: none; position: absolute; overflow: visible; height: 0; width: 0; visibility: hidden; z-index: -1; } .mdl-menu__container.is-visible, .mdl-menu__container.is-animating { z-index: 999; visibility: visible; } .mdl-menu__outline { display: block; background: rgb(255,255,255); margin: 0; padding: 0; border: none; border-radius: 2px; position: absolute; top: 0; left: 0; overflow: hidden; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); will-change: transform; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } .mdl-menu__container.is-visible .mdl-menu__outline { opacity: 1; -webkit-transform: scale(1); transform: scale(1); z-index: 999; } .mdl-menu__outline.mdl-menu--bottom-right { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .mdl-menu__outline.mdl-menu--top-left { -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .mdl-menu__outline.mdl-menu--top-right { -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } .mdl-menu { position: absolute; list-style: none; top: 0; left: 0; height: auto; width: auto; min-width: 124px; padding: 8px 0; margin: 0; opacity: 0; clip: rect(0 0 0 0); z-index: -1; } .mdl-menu__container.is-visible .mdl-menu { opacity: 1; z-index: 999; } .mdl-menu.is-animating { -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), clip 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), clip 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mdl-menu.mdl-menu--bottom-right { left: auto; right: 0; } .mdl-menu.mdl-menu--top-left { top: auto; bottom: 0; } .mdl-menu.mdl-menu--top-right { top: auto; left: auto; bottom: 0; right: 0; } .mdl-menu.mdl-menu--unaligned { top: auto; left: auto; } .mdl-menu__item { display: block; border: none; color: rgba(0,0,0, 0.87); background-color: transparent; text-align: left; margin: 0; padding: 0 16px; outline-color: rgb(189,189,189); position: relative; overflow: hidden; font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; text-decoration: none; cursor: pointer; height: 48px; line-height: 48px; white-space: nowrap; opacity: 0; -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mdl-menu__container.is-visible .mdl-menu__item { opacity: 1; } .mdl-menu__item::-moz-focus-inner { border: 0; } .mdl-menu__item--full-bleed-divider { border-bottom: 1px solid rgba(0,0,0, 0.12); } .mdl-menu__item[disabled], .mdl-menu__item[data-mdl-disabled] { color: rgb(189,189,189); background-color: transparent; cursor: auto; } .mdl-menu__item[disabled]:hover, .mdl-menu__item[data-mdl-disabled]:hover { background-color: transparent; } .mdl-menu__item[disabled]:focus, .mdl-menu__item[data-mdl-disabled]:focus { background-color: transparent; } .mdl-menu__item[disabled] .mdl-ripple, .mdl-menu__item[data-mdl-disabled] .mdl-ripple { background: transparent; } .mdl-menu__item:hover { background-color: rgb(238,238,238); } .mdl-menu__item:focus { outline: none; background-color: rgb(238,238,238); } .mdl-menu__item:active { background-color: rgb(224,224,224); } .mdl-menu__item--ripple-container { display: block; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 0; overflow: hidden; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ .mdl-progress { display: block; position: relative; height: 4px; width: 500px; max-width: 100%; } .mdl-progress > .bar { display: block; position: absolute; top: 0; bottom: 0; width: 0%; -webkit-transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .mdl-progress > .progressbar { background-color: rgb(63,81,181); z-index: 1; left: 0; } .mdl-progress > .bufferbar { background-image: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255, 0.7)), to(rgba(255,255,255, 0.7))), -webkit-gradient(linear, left top, right top, from(rgb(63,81,181)), to(rgb(63,81,181))); background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(63,81,181), rgb(63,81,181)); z-index: 0; left: 0; } .mdl-progress > .auxbar { right: 0; } @supports (-webkit-appearance: none) { .mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar, .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar { background-image: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255, 0.7)), to(rgba(255,255,255, 0.7))), -webkit-gradient(linear, left top, right top, from(rgb(63,81,181)), to(rgb(63,81,181))); background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(63,81,181), rgb(63,81,181)); -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo="); mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo="); } } .mdl-progress:not(.mdl-progress--indeterminate) > .auxbar, .mdl-progress:not(.mdl-progress__indeterminate) > .auxbar { background-image: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255, 0.9)), to(rgba(255,255,255, 0.9))), -webkit-gradient(linear, left top, right top, from(rgb(63,81,181)), to(rgb(63,81,181))); background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(63,81,181), rgb(63,81,181)); } .mdl-progress.mdl-progress--indeterminate > .bar1, .mdl-progress.mdl-progress__indeterminate > .bar1 { background-color: rgb(63,81,181); -webkit-animation-name: indeterminate1; animation-name: indeterminate1; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .mdl-progress.mdl-progress--indeterminate > .bar3, .mdl-progress.mdl-progress__indeterminate > .bar3 { background-image: none; background-color: rgb(63,81,181); -webkit-animation-name: indeterminate2; animation-name: indeterminate2; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes indeterminate1 { 0% { left: 0%; width: 0%; } 50% { left: 25%; width: 75%; } 75% { left: 100%; width: 0%; } } @keyframes indeterminate1 { 0% { left: 0%; width: 0%; } 50% { left: 25%; width: 75%; } 75% { left: 100%; width: 0%; } } @-webkit-keyframes indeterminate2 { 0% { left: 0%; width: 0%; } 50% { left: 0%; width: 0%; } 75% { left: 0%; width: 25%; } 100% { left: 100%; width: 0%; } } @keyframes indeterminate2 { 0% { left: 0%; width: 0%; } 50% { left: 0%; width: 0%; } 75% { left: 0%; width: 25%; } 100% { left: 100%; width: 0%; } } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-navigation { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-sizing: border-box; box-sizing: border-box; } .mdl-navigation__link { color: rgb(66,66,66); text-decoration: none; margin: 0; font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; opacity: 0.87; } .mdl-navigation__link .material-icons { vertical-align: middle; } .mdl-layout { width: 100%; height: 100%; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; overflow-y: auto; overflow-x: hidden; position: relative; -webkit-overflow-scrolling: touch; } .mdl-layout.is-small-screen .mdl-layout--large-screen-only { display: none; } .mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only { display: none; } .mdl-layout__container { position: absolute; width: 100%; height: 100%; } .mdl-layout__title, .mdl-layout-title { display: block; position: relative; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; font-weight: 400; -webkit-box-sizing: border-box; box-sizing: border-box; } .mdl-layout-spacer { -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; } .mdl-layout__drawer { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 240px; height: 100%; max-height: 100%; position: absolute; top: 0; left: 0; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -webkit-box-sizing: border-box; box-sizing: border-box; border-right: 1px solid rgb(224,224,224); background: rgb(250,250,250); -webkit-transform: translateX(-250px); transform: translateX(-250px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: -webkit-transform; -webkit-transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; color: rgb(66,66,66); overflow: visible; overflow-y: auto; z-index: 5; } .mdl-layout__drawer.is-visible { -webkit-transform: translateX(0); transform: translateX(0); } .mdl-layout__drawer.is-visible ~ .mdl-layout__content.mdl-layout__content { overflow: hidden; } .mdl-layout__drawer > * { -ms-flex-negative: 0; flex-shrink: 0; } .mdl-layout__drawer > .mdl-layout__title, .mdl-layout__drawer > .mdl-layout-title { line-height: 64px; padding-left: 40px; } @media screen and (max-width: 1024px) { .mdl-layout__drawer > .mdl-layout__title, .mdl-layout__drawer > .mdl-layout-title { line-height: 56px; padding-left: 16px; } } .mdl-layout__drawer .mdl-navigation { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-align: stretch; -webkit-box-align: stretch; align-items: stretch; padding-top: 16px; } .mdl-layout__drawer .mdl-navigation .mdl-navigation__link { display: block; -ms-flex-negative: 0; flex-shrink: 0; padding: 16px 40px; margin: 0; color: #757575; } @media screen and (max-width: 1024px) { .mdl-layout__drawer .mdl-navigation .mdl-navigation__link { padding: 16px 16px; } } .mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover { background-color: rgb(224,224,224); } .mdl-layout__drawer .mdl-navigation .mdl-navigation__link--current { background-color: rgb(224,224,224); color: rgb(0,0,0); } @media screen and (min-width: 1025px) { .mdl-layout--fixed-drawer > .mdl-layout__drawer { -webkit-transform: translateX(0); transform: translateX(0); } } .mdl-layout__drawer-button { display: block; position: absolute; height: 48px; width: 48px; border: 0; -ms-flex-negative: 0; flex-shrink: 0; overflow: hidden; text-align: center; cursor: pointer; font-size: 26px; line-height: 56px; font-family: Helvetica, Arial, sans-serif; margin: 8px 12px; top: 0; left: 0; color: rgb(255,255,255); z-index: 4; } .mdl-layout__header .mdl-layout__drawer-button { position: absolute; color: rgb(255,255,255); background-color: inherit; } @media screen and (max-width: 1024px) { .mdl-layout__header .mdl-layout__drawer-button { margin: 4px; } } @media screen and (max-width: 1024px) { .mdl-layout__drawer-button { margin: 4px; color: rgba(0, 0, 0, 0.5); } } @media screen and (min-width: 1025px) { .mdl-layout__drawer-button { line-height: 54px; } .mdl-layout--no-desktop-drawer-button .mdl-layout__drawer-button, .mdl-layout--fixed-drawer > .mdl-layout__drawer-button, .mdl-layout--no-drawer-button .mdl-layout__drawer-button { display: none; } } .mdl-layout__header { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; margin: 0; padding: 0; border: none; min-height: 64px; max-height: 1000px; z-index: 3; background-color: rgb(63,81,181); color: rgb(255,255,255); -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-property: max-height, -webkit-box-shadow; transition-property: max-height, -webkit-box-shadow; transition-property: max-height, box-shadow; transition-property: max-height, box-shadow, -webkit-box-shadow; } @media screen and (max-width: 1024px) { .mdl-layout__header { min-height: 56px; } } .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > .mdl-layout__header { margin-left: 240px; width: calc(100% - 240px); } @media screen and (min-width: 1025px) { .mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__header-row { padding-left: 40px; } } .mdl-layout__header > .mdl-layout-icon { position: absolute; left: 40px; top: 16px; height: 32px; width: 32px; overflow: hidden; z-index: 3; display: block; } @media screen and (max-width: 1024px) { .mdl-layout__header > .mdl-layout-icon { left: 16px; top: 12px; } } .mdl-layout.has-drawer .mdl-layout__header > .mdl-layout-icon { display: none; } .mdl-layout__header.is-compact { max-height: 64px; } @media screen and (max-width: 1024px) { .mdl-layout__header.is-compact { max-height: 56px; } } .mdl-layout__header.is-compact.has-tabs { height: 112px; } @media screen and (max-width: 1024px) { .mdl-layout__header.is-compact.has-tabs { min-height: 104px; } } @media screen and (max-width: 1024px) { .mdl-layout__header { display: none; } .mdl-layout--fixed-header > .mdl-layout__header { display: -ms-flexbox; display: -webkit-box; display: flex; } } .mdl-layout__header--transparent.mdl-layout__header--transparent { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; } .mdl-layout__header--seamed { -webkit-box-shadow: none; box-shadow: none; } .mdl-layout__header--scroll { -webkit-box-shadow: none; box-shadow: none; } .mdl-layout__header--waterfall { -webkit-box-shadow: none; box-shadow: none; overflow: hidden; } .mdl-layout__header--waterfall.is-casting-shadow { -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .mdl-layout__header--waterfall.mdl-layout__header--waterfall-hide-top { -ms-flex-pack: end; -webkit-box-pack: end; justify-content: flex-end; } .mdl-layout__header-row { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; -ms-flex-align: center; -webkit-box-align: center; align-items: center; height: 64px; margin: 0; padding: 0 40px 0 80px; } .mdl-layout--no-drawer-button .mdl-layout__header-row { padding-left: 40px; } @media screen and (min-width: 1025px) { .mdl-layout--no-desktop-drawer-button .mdl-layout__header-row { padding-left: 40px; } } @media screen and (max-width: 1024px) { .mdl-layout__header-row { height: 56px; padding: 0 16px 0 72px; } .mdl-layout--no-drawer-button .mdl-layout__header-row { padding-left: 16px; } } .mdl-layout__header-row > * { -ms-flex-negative: 0; flex-shrink: 0; } .mdl-layout__header--scroll .mdl-layout__header-row { width: 100%; } .mdl-layout__header-row .mdl-navigation { margin: 0; padding: 0; height: 64px; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-align: center; -webkit-box-align: center; align-items: center; } @media screen and (max-width: 1024px) { .mdl-layout__header-row .mdl-navigation { height: 56px; } } .mdl-layout__header-row .mdl-navigation__link { display: block; color: rgb(255,255,255); line-height: 64px; padding: 0 24px; } @media screen and (max-width: 1024px) { .mdl-layout__header-row .mdl-navigation__link { line-height: 56px; padding: 0 16px; } } .mdl-layout__obfuscator { background-color: transparent; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 4; visibility: hidden; -webkit-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .mdl-layout__obfuscator.is-visible { background-color: rgba(0, 0, 0, 0.5); visibility: visible; } @supports (pointer-events: auto) { .mdl-layout__obfuscator { background-color: rgba(0, 0, 0, 0.5); opacity: 0; -webkit-transition-property: opacity; transition-property: opacity; visibility: visible; pointer-events: none; } .mdl-layout__obfuscator.is-visible { pointer-events: auto; opacity: 1; } } .mdl-layout__content { -ms-flex: 0 1 auto; position: relative; display: inline-block; overflow-y: auto; overflow-x: hidden; -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; z-index: 1; -webkit-overflow-scrolling: touch; } .mdl-layout--fixed-drawer > .mdl-layout__content { margin-left: 240px; } .mdl-layout__container.has-scrolling-header .mdl-layout__content { overflow: visible; } @media screen and (max-width: 1024px) { .mdl-layout--fixed-drawer > .mdl-layout__content { margin-left: 0; } .mdl-layout__container.has-scrolling-header .mdl-layout__content { overflow-y: auto; overflow-x: hidden; } } .mdl-layout__tab-bar { height: 96px; margin: 0; width: calc(100% - 112px); padding: 0 0 0 56px; display: -ms-flexbox; display: -webkit-box; display: flex; background-color: rgb(63,81,181); overflow-y: hidden; overflow-x: scroll; } .mdl-layout__tab-bar::-webkit-scrollbar { display: none; } .mdl-layout--no-drawer-button .mdl-layout__tab-bar { padding-left: 16px; width: calc(100% - 32px); } @media screen and (min-width: 1025px) { .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar { padding-left: 16px; width: calc(100% - 32px); } } @media screen and (max-width: 1024px) { .mdl-layout__tab-bar { width: calc(100% - 60px); padding: 0 0 0 60px; } .mdl-layout--no-drawer-button .mdl-layout__tab-bar { width: calc(100% - 8px); padding-left: 4px; } } .mdl-layout--fixed-tabs .mdl-layout__tab-bar { padding: 0; overflow: hidden; width: 100%; } .mdl-layout__tab-bar-container { position: relative; height: 48px; width: 100%; border: none; margin: 0; z-index: 2; -ms-flex-positive: 0; -webkit-box-flex: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; overflow: hidden; } .mdl-layout__container > .mdl-layout__tab-bar-container { position: absolute; top: 0; left: 0; } .mdl-layout__tab-bar-button { display: inline-block; position: absolute; top: 0; height: 48px; width: 56px; z-index: 4; text-align: center; background-color: rgb(63,81,181); color: transparent; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar-button, .mdl-layout--no-drawer-button .mdl-layout__tab-bar-button { width: 16px; } .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar-button .material-icons, .mdl-layout--no-drawer-button .mdl-layout__tab-bar-button .material-icons { position: relative; left: -4px; } @media screen and (max-width: 1024px) { .mdl-layout__tab-bar-button { width: 60px; } } .mdl-layout--fixed-tabs .mdl-layout__tab-bar-button { display: none; } .mdl-layout__tab-bar-button .material-icons { line-height: 48px; } .mdl-layout__tab-bar-button.is-active { color: rgb(255,255,255); } .mdl-layout__tab-bar-left-button { left: 0; } .mdl-layout__tab-bar-right-button { right: 0; } .mdl-layout__tab { margin: 0; border: none; padding: 0 24px 0 24px; float: left; position: relative; display: block; -ms-flex-positive: 0; -webkit-box-flex: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; text-decoration: none; height: 48px; line-height: 48px; text-align: center; font-weight: 500; font-size: 14px; text-transform: uppercase; color: rgba(255,255,255, 0.6); overflow: hidden; } @media screen and (max-width: 1024px) { .mdl-layout__tab { padding: 0 12px 0 12px; } } .mdl-layout--fixed-tabs .mdl-layout__tab { float: none; -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; padding: 0; } .mdl-layout.is-upgraded .mdl-layout__tab.is-active { color: rgb(255,255,255); } .mdl-layout.is-upgraded .mdl-layout__tab.is-active::after { height: 2px; width: 100%; display: block; content: " "; bottom: 0; left: 0; position: absolute; background: rgb(255,64,129); -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards; animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards; -webkit-transition: all 1s cubic-bezier(0.4, 0, 1, 1); transition: all 1s cubic-bezier(0.4, 0, 1, 1); } .mdl-layout__tab .mdl-layout__tab-ripple-container { display: block; position: absolute; height: 100%; width: 100%; left: 0; top: 0; z-index: 1; overflow: hidden; } .mdl-layout__tab .mdl-layout__tab-ripple-container .mdl-ripple { background-color: rgb(255,255,255); } .mdl-layout__tab-panel { display: block; } .mdl-layout.is-upgraded .mdl-layout__tab-panel { display: none; } .mdl-layout.is-upgraded .mdl-layout__tab-panel.is-active { display: block; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-radio { position: relative; font-size: 16px; line-height: 24px; display: inline-block; vertical-align: middle; -webkit-box-sizing: border-box; box-sizing: border-box; height: 24px; margin: 0; padding-left: 0; } .mdl-radio.is-upgraded { padding-left: 24px; } .mdl-radio__button { line-height: 24px; } .mdl-radio.is-upgraded .mdl-radio__button { position: absolute; width: 0; height: 0; margin: 0; padding: 0; opacity: 0; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; } .mdl-radio__outer-circle { position: absolute; top: 4px; left: 0; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 16px; height: 16px; margin: 0; cursor: pointer; border: 2px solid rgba(0,0,0, 0.54); border-radius: 50%; z-index: 2; } .mdl-radio.is-checked .mdl-radio__outer-circle { border: 2px solid rgb(63,81,181); } .mdl-radio__outer-circle fieldset[disabled] .mdl-radio, .mdl-radio.is-disabled .mdl-radio__outer-circle { border: 2px solid rgba(0,0,0, 0.26); cursor: auto; } .mdl-radio__inner-circle { position: absolute; z-index: 1; margin: 0; top: 8px; left: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 8px; height: 8px; cursor: pointer; -webkit-transition-duration: 0.28s; transition-duration: 0.28s; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: -webkit-transform; -webkit-transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transform: scale(0, 0); transform: scale(0, 0); border-radius: 50%; background: rgb(63,81,181); } .mdl-radio.is-checked .mdl-radio__inner-circle { -webkit-transform: scale(1, 1); transform: scale(1, 1); } fieldset[disabled] .mdl-radio .mdl-radio__inner-circle, .mdl-radio.is-disabled .mdl-radio__inner-circle { background: rgba(0,0,0, 0.26); cursor: auto; } .mdl-radio.is-focused .mdl-radio__inner-circle { -webkit-box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1); } .mdl-radio__label { cursor: pointer; } fieldset[disabled] .mdl-radio .mdl-radio__label, .mdl-radio.is-disabled .mdl-radio__label { color: rgba(0,0,0, 0.26); cursor: auto; } .mdl-radio__ripple-container { position: absolute; z-index: 2; top: -9px; left: -13px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(circle, white, black); } .mdl-radio__ripple-container .mdl-ripple { background: rgb(63,81,181); } fieldset[disabled] .mdl-radio .mdl-radio__ripple-container, .mdl-radio.is-disabled .mdl-radio__ripple-container { cursor: auto; } fieldset[disabled] .mdl-radio .mdl-radio__ripple-container .mdl-ripple, .mdl-radio.is-disabled .mdl-radio__ripple-container .mdl-ripple { background: transparent; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded { -ms-appearance: none; height: 32px; margin: 0; } .mdl-slider { width: calc(100% - 40px); margin: 0 20px; } .mdl-slider.is-upgraded { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 2px; background: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: 0; padding: 0; color: rgb(63,81,181); -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; z-index: 1; cursor: pointer; /**************************** Tracks ****************************/ /**************************** Thumbs ****************************/ /**************************** 0-value ****************************/ /**************************** Disabled ****************************/ } .mdl-slider.is-upgraded::-moz-focus-outer { border: 0; } .mdl-slider.is-upgraded::-ms-tooltip { display: none; } .mdl-slider.is-upgraded::-webkit-slider-runnable-track { background: transparent; } .mdl-slider.is-upgraded::-moz-range-track { background: transparent; border: none; } .mdl-slider.is-upgraded::-ms-track { background: none; color: transparent; height: 2px; width: 100%; border: none; } .mdl-slider.is-upgraded::-ms-fill-lower { padding: 0; background: linear-gradient(to right, transparent, transparent 16px, rgb(63,81,181) 16px, rgb(63,81,181) 0); } .mdl-slider.is-upgraded::-ms-fill-upper { padding: 0; background: linear-gradient(to left, transparent, transparent 16px, rgba(0,0,0, 0.26) 16px, rgba(0,0,0, 0.26) 0); } .mdl-slider.is-upgraded::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; background: rgb(63,81,181); border: none; transition: border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: border 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1); transition: border 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); } .mdl-slider.is-upgraded::-moz-range-thumb { -moz-appearance: none; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background-image: none; background: rgb(63,81,181); border: none; } .mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb { -webkit-box-shadow: 0 0 0 10px rgba(63,81,181, 0.26); box-shadow: 0 0 0 10px rgba(63,81,181, 0.26); } .mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb { box-shadow: 0 0 0 10px rgba(63,81,181, 0.26); } .mdl-slider.is-upgraded:active::-webkit-slider-thumb { background-image: none; background: rgb(63,81,181); -webkit-transform: scale(1.5); transform: scale(1.5); } .mdl-slider.is-upgraded:active::-moz-range-thumb { background-image: none; background: rgb(63,81,181); transform: scale(1.5); } .mdl-slider.is-upgraded::-ms-thumb { width: 32px; height: 32px; border: none; border-radius: 50%; background: rgb(63,81,181); transform: scale(0.375); transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); } .mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb { background: radial-gradient(circle closest-side, rgb(63,81,181) 0%, rgb(63,81,181) 37.5%, rgba(63,81,181, 0.26) 37.5%, rgba(63,81,181, 0.26) 100%); transform: scale(1); } .mdl-slider.is-upgraded:active::-ms-thumb { background: rgb(63,81,181); transform: scale(0.5625); } .mdl-slider.is-upgraded.is-lowest-value::-webkit-slider-thumb { border: 2px solid rgba(0,0,0, 0.26); background: transparent; } .mdl-slider.is-upgraded.is-lowest-value::-moz-range-thumb { border: 2px solid rgba(0,0,0, 0.26); background: transparent; } .mdl-slider.is-upgraded.is-lowest-value + .mdl-slider__background-flex > .mdl-slider__background-upper { left: 6px; } .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb { -webkit-box-shadow: 0 0 0 10px rgba(0,0,0, 0.12); box-shadow: 0 0 0 10px rgba(0,0,0, 0.12); background: rgba(0,0,0, 0.12); } .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb { box-shadow: 0 0 0 10px rgba(0,0,0, 0.12); background: rgba(0,0,0, 0.12); } .mdl-slider.is-upgraded.is-lowest-value:active::-webkit-slider-thumb { border: 1.6px solid rgba(0,0,0, 0.26); -webkit-transform: scale(1.5); transform: scale(1.5); } .mdl-slider.is-upgraded.is-lowest-value:active + .mdl-slider__background-flex > .mdl-slider__background-upper { left: 9px; } .mdl-slider.is-upgraded.is-lowest-value:active::-moz-range-thumb { border: 1.5px solid rgba(0,0,0, 0.26); transform: scale(1.5); } .mdl-slider.is-upgraded.is-lowest-value::-ms-thumb { background: radial-gradient(circle closest-side, transparent 0%, transparent 66.67%, rgba(0,0,0, 0.26) 66.67%, rgba(0,0,0, 0.26) 100%); } .mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb { background: radial-gradient(circle closest-side, rgba(0,0,0, 0.12) 0%, rgba(0,0,0, 0.12) 25%, rgba(0,0,0, 0.26) 25%, rgba(0,0,0, 0.26) 37.5%, rgba(0,0,0, 0.12) 37.5%, rgba(0,0,0, 0.12) 100%); transform: scale(1); } .mdl-slider.is-upgraded.is-lowest-value:active::-ms-thumb { transform: scale(0.5625); background: radial-gradient(circle closest-side, transparent 0%, transparent 77.78%, rgba(0,0,0, 0.26) 77.78%, rgba(0,0,0, 0.26) 100%); } .mdl-slider.is-upgraded.is-lowest-value::-ms-fill-lower { background: transparent; } .mdl-slider.is-upgraded.is-lowest-value::-ms-fill-upper { margin-left: 6px; } .mdl-slider.is-upgraded.is-lowest-value:active::-ms-fill-upper { margin-left: 9px; } .mdl-slider.is-upgraded:disabled:focus::-webkit-slider-thumb, .mdl-slider.is-upgraded:disabled:active::-webkit-slider-thumb, .mdl-slider.is-upgraded:disabled::-webkit-slider-thumb { -webkit-transform: scale(0.667); transform: scale(0.667); background: rgba(0,0,0, 0.26); } .mdl-slider.is-upgraded:disabled:focus::-moz-range-thumb, .mdl-slider.is-upgraded:disabled:active::-moz-range-thumb, .mdl-slider.is-upgraded:disabled::-moz-range-thumb { transform: scale(0.667); background: rgba(0,0,0, 0.26); } .mdl-slider.is-upgraded:disabled + .mdl-slider__background-flex > .mdl-slider__background-lower { background-color: rgba(0,0,0, 0.26); left: -6px; } .mdl-slider.is-upgraded:disabled + .mdl-slider__background-flex > .mdl-slider__background-upper { left: 6px; } .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-webkit-slider-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-webkit-slider-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-webkit-slider-thumb { border: 3px solid rgba(0,0,0, 0.26); background: transparent; -webkit-transform: scale(0.667); transform: scale(0.667); } .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-moz-range-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-moz-range-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-moz-range-thumb { border: 3px solid rgba(0,0,0, 0.26); background: transparent; transform: scale(0.667); } .mdl-slider.is-upgraded.is-lowest-value:disabled:active + .mdl-slider__background-flex > .mdl-slider__background-upper { left: 6px; } .mdl-slider.is-upgraded:disabled:focus::-ms-thumb, .mdl-slider.is-upgraded:disabled:active::-ms-thumb, .mdl-slider.is-upgraded:disabled::-ms-thumb { transform: scale(0.25); background: rgba(0,0,0, 0.26); } .mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-ms-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-ms-thumb { transform: scale(0.25); background: radial-gradient(circle closest-side, transparent 0%, transparent 50%, rgba(0,0,0, 0.26) 50%, rgba(0,0,0, 0.26) 100%); } .mdl-slider.is-upgraded:disabled::-ms-fill-lower { margin-right: 6px; background: linear-gradient(to right, transparent, transparent 25px, rgba(0,0,0, 0.26) 25px, rgba(0,0,0, 0.26) 0); } .mdl-slider.is-upgraded:disabled::-ms-fill-upper { margin-left: 6px; } .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-fill-upper { margin-left: 6px; } .mdl-slider__ie-container { height: 18px; overflow: visible; border: none; margin: none; padding: none; } .mdl-slider__container { height: 18px; position: relative; background: none; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; } .mdl-slider__background-flex { background: transparent; position: absolute; height: 2px; width: calc(100% - 52px); top: 50%; left: 0; margin: 0 26px; display: -ms-flexbox; display: -webkit-box; display: flex; overflow: hidden; border: 0; padding: 0; -webkit-transform: translate(0, -1px); transform: translate(0, -1px); } .mdl-slider__background-lower { background: rgb(63,81,181); -ms-flex: 0; -webkit-box-flex: 0; flex: 0; position: relative; border: 0; padding: 0; } .mdl-slider__background-upper { background: rgba(0,0,0, 0.26); -ms-flex: 0; -webkit-box-flex: 0; flex: 0; position: relative; border: 0; padding: 0; -webkit-transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1); transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1); } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-snackbar { position: fixed; bottom: 0; left: 50%; cursor: default; background-color: #323232; z-index: 3; display: block; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; font-family: "Roboto", "Helvetica", "Arial", sans-serif; will-change: transform; -webkit-transform: translate(0, 80px); transform: translate(0, 80px); transition: -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1); -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1); transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1); transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1); pointer-events: none; } @media (max-width: 479px) { .mdl-snackbar { width: 100%; left: 0; min-height: 48px; max-height: 80px; } } @media (min-width: 480px) { .mdl-snackbar { min-width: 288px; max-width: 568px; border-radius: 2px; -webkit-transform: translate(-50%, 80px); transform: translate(-50%, 80px); } } .mdl-snackbar--active { -webkit-transform: translate(0, 0); transform: translate(0, 0); pointer-events: auto; transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1); -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1); transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1); transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1); } @media (min-width: 480px) { .mdl-snackbar--active { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } .mdl-snackbar__text { padding: 14px 12px 14px 24px; vertical-align: middle; color: white; float: left; } .mdl-snackbar__action { background: transparent; border: none; color: rgb(255,64,129); float: right; text-transform: uppercase; padding: 14px 24px 14px 12px; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: 0; overflow: hidden; outline: none; opacity: 0; pointer-events: none; cursor: pointer; text-decoration: none; text-align: center; -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .mdl-snackbar__action::-moz-focus-inner { border: 0; } .mdl-snackbar__action:not([aria-hidden]) { opacity: 1; pointer-events: auto; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ .mdl-spinner { display: inline-block; position: relative; width: 28px; height: 28px; } .mdl-spinner:not(.is-upgraded).is-active:after { content: "Loading..."; } .mdl-spinner.is-upgraded.is-active { -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite; animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite; } @-webkit-keyframes mdl-spinner__container-rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes mdl-spinner__container-rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .mdl-spinner__layer { position: absolute; width: 100%; height: 100%; opacity: 0; } .mdl-spinner__layer-1 { border-color: rgb(66,165,245); } .mdl-spinner--single-color .mdl-spinner__layer-1 { border-color: rgb(63,81,181); } .mdl-spinner.is-active .mdl-spinner__layer-1 { -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .mdl-spinner__layer-2 { border-color: rgb(244,67,54); } .mdl-spinner--single-color .mdl-spinner__layer-2 { border-color: rgb(63,81,181); } .mdl-spinner.is-active .mdl-spinner__layer-2 { -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .mdl-spinner__layer-3 { border-color: rgb(253,216,53); } .mdl-spinner--single-color .mdl-spinner__layer-3 { border-color: rgb(63,81,181); } .mdl-spinner.is-active .mdl-spinner__layer-3 { -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .mdl-spinner__layer-4 { border-color: rgb(76,175,80); } .mdl-spinner--single-color .mdl-spinner__layer-4 { border-color: rgb(63,81,181); } .mdl-spinner.is-active .mdl-spinner__layer-4 { -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } @-webkit-keyframes mdl-spinner__fill-unfill-rotate { 12.5% { -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); } } @keyframes mdl-spinner__fill-unfill-rotate { 12.5% { -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); } } /** * HACK: Even though the intention is to have the current .mdl-spinner__layer-N * at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome * to do proper subpixel rendering for the elements being animated. This is * especially visible in Chrome 39 on Ubuntu 14.04. See: * * - https://github.com/Polymer/paper-spinner/issues/9 * - https://code.google.com/p/chromium/issues/detail?id=436255 */ @-webkit-keyframes mdl-spinner__layer-1-fade-in-out { from { opacity: 0.99; } 25% { opacity: 0.99; } 26% { opacity: 0; } 89% { opacity: 0; } 90% { opacity: 0.99; } 100% { opacity: 0.99; } } @keyframes mdl-spinner__layer-1-fade-in-out { from { opacity: 0.99; } 25% { opacity: 0.99; } 26% { opacity: 0; } 89% { opacity: 0; } 90% { opacity: 0.99; } 100% { opacity: 0.99; } } @-webkit-keyframes mdl-spinner__layer-2-fade-in-out { from { opacity: 0; } 15% { opacity: 0; } 25% { opacity: 0.99; } 50% { opacity: 0.99; } 51% { opacity: 0; } } @keyframes mdl-spinner__layer-2-fade-in-out { from { opacity: 0; } 15% { opacity: 0; } 25% { opacity: 0.99; } 50% { opacity: 0.99; } 51% { opacity: 0; } } @-webkit-keyframes mdl-spinner__layer-3-fade-in-out { from { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 0.99; } 75% { opacity: 0.99; } 76% { opacity: 0; } } @keyframes mdl-spinner__layer-3-fade-in-out { from { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 0.99; } 75% { opacity: 0.99; } 76% { opacity: 0; } } @-webkit-keyframes mdl-spinner__layer-4-fade-in-out { from { opacity: 0; } 65% { opacity: 0; } 75% { opacity: 0.99; } 90% { opacity: 0.99; } 100% { opacity: 0; } } @keyframes mdl-spinner__layer-4-fade-in-out { from { opacity: 0; } 65% { opacity: 0; } 75% { opacity: 0.99; } 90% { opacity: 0.99; } 100% { opacity: 0; } } /** * Patch the gap that appear between the two adjacent * div.mdl-spinner__circle-clipper while the spinner is rotating * (appears on Chrome 38, Safari 7.1, and IE 11). * * Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's * opacity is 0.99, but still does on Safari and IE. */ .mdl-spinner__gap-patch { position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; top: 0; left: 45%; width: 10%; height: 100%; overflow: hidden; border-color: inherit; } .mdl-spinner__gap-patch .mdl-spinner__circle { width: 1000%; left: -450%; } .mdl-spinner__circle-clipper { display: inline-block; position: relative; width: 50%; height: 100%; overflow: hidden; border-color: inherit; } .mdl-spinner__circle-clipper.mdl-spinner__left { float: left; } .mdl-spinner__circle-clipper.mdl-spinner__right { float: right; } .mdl-spinner__circle-clipper .mdl-spinner__circle { width: 200%; } .mdl-spinner__circle { -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; border-width: 3px; border-style: solid; border-color: inherit; border-bottom-color: transparent !important; border-radius: 50%; -webkit-animation: none; animation: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .mdl-spinner__left .mdl-spinner__circle { border-right-color: transparent !important; -webkit-transform: rotate(129deg); transform: rotate(129deg); } .mdl-spinner.is-active .mdl-spinner__left .mdl-spinner__circle { -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .mdl-spinner__right .mdl-spinner__circle { left: -100%; border-left-color: transparent !important; -webkit-transform: rotate(-129deg); transform: rotate(-129deg); } .mdl-spinner.is-active .mdl-spinner__right .mdl-spinner__circle { -webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } @-webkit-keyframes mdl-spinner__left-spin { from { -webkit-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); transform: rotate(130deg); } } @keyframes mdl-spinner__left-spin { from { -webkit-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); transform: rotate(130deg); } } @-webkit-keyframes mdl-spinner__right-spin { from { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } } @keyframes mdl-spinner__right-spin { from { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-switch { position: relative; z-index: 1; vertical-align: middle; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 24px; margin: 0; padding: 0; overflow: visible; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mdl-switch.is-upgraded { padding-left: 28px; } .mdl-switch__input { line-height: 24px; } .mdl-switch.is-upgraded .mdl-switch__input { position: absolute; width: 0; height: 0; margin: 0; padding: 0; opacity: 0; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; } .mdl-switch__track { background: rgba(0,0,0, 0.26); position: absolute; left: 0; top: 5px; height: 14px; width: 36px; border-radius: 14px; cursor: pointer; } .mdl-switch.is-checked .mdl-switch__track { background: rgba(63,81,181, 0.5); } .mdl-switch__track fieldset[disabled] .mdl-switch, .mdl-switch.is-disabled .mdl-switch__track { background: rgba(0,0,0, 0.12); cursor: auto; } .mdl-switch__thumb { background: rgb(250,250,250); position: absolute; left: 0; top: 2px; height: 20px; width: 20px; border-radius: 50%; cursor: pointer; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -webkit-transition-duration: 0.28s; transition-duration: 0.28s; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-property: left; transition-property: left; } .mdl-switch.is-checked .mdl-switch__thumb { background: rgb(63,81,181); left: 16px; -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); } .mdl-switch__thumb fieldset[disabled] .mdl-switch, .mdl-switch.is-disabled .mdl-switch__thumb { background: rgb(189,189,189); cursor: auto; } .mdl-switch__focus-helper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-4px, -4px); transform: translate(-4px, -4px); display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 8px; height: 8px; border-radius: 50%; background-color: transparent; } .mdl-switch.is-focused .mdl-switch__focus-helper { -webkit-box-shadow: 0 0 0px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 0 0px 20px rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1); } .mdl-switch.is-focused.is-checked .mdl-switch__focus-helper { -webkit-box-shadow: 0 0 0px 20px rgba(63,81,181, 0.26); box-shadow: 0 0 0px 20px rgba(63,81,181, 0.26); background-color: rgba(63,81,181, 0.26); } .mdl-switch__label { position: relative; cursor: pointer; font-size: 16px; line-height: 24px; margin: 0; left: 24px; } .mdl-switch__label fieldset[disabled] .mdl-switch, .mdl-switch.is-disabled .mdl-switch__label { color: rgb(189,189,189); cursor: auto; } .mdl-switch__ripple-container { position: absolute; z-index: 2; top: -12px; left: -14px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(circle, white, black); -webkit-transition-duration: 0.40s; transition-duration: 0.40s; -webkit-transition-timing-function: step-end; transition-timing-function: step-end; -webkit-transition-property: left; transition-property: left; } .mdl-switch__ripple-container .mdl-ripple { background: rgb(63,81,181); } .mdl-switch__ripple-container fieldset[disabled] .mdl-switch, .mdl-switch.is-disabled .mdl-switch__ripple-container { cursor: auto; } fieldset[disabled] .mdl-switch .mdl-switch__ripple-container .mdl-ripple, .mdl-switch.is-disabled .mdl-switch__ripple-container .mdl-ripple { background: transparent; } .mdl-switch.is-checked .mdl-switch__ripple-container { left: 2px; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ .mdl-tabs { display: block; width: 100%; } .mdl-tabs__tab-bar { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-line-pack: justify; align-content: space-between; -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; height: 48px; padding: 0 0 0 0; margin: 0; border-bottom: 1px solid rgb(224,224,224); } .mdl-tabs__tab { margin: 0; border: none; padding: 0 24px 0 24px; float: left; position: relative; display: block; text-decoration: none; height: 48px; line-height: 48px; text-align: center; font-weight: 500; font-size: 14px; text-transform: uppercase; color: rgba(0,0,0, 0.54); overflow: hidden; } .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active { color: rgba(0,0,0, 0.87); } .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after { height: 2px; width: 100%; display: block; content: " "; bottom: 0px; left: 0px; position: absolute; background: rgb(63,81,181); -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards; animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards; -webkit-transition: all 1s cubic-bezier(0.4, 0, 1, 1); transition: all 1s cubic-bezier(0.4, 0, 1, 1); } .mdl-tabs__tab .mdl-tabs__ripple-container { display: block; position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; z-index: 1; overflow: hidden; } .mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple { background: rgb(63,81,181); } .mdl-tabs__panel { display: block; } .mdl-tabs.is-upgraded .mdl-tabs__panel { display: none; } .mdl-tabs.is-upgraded .mdl-tabs__panel.is-active { display: block; } @-webkit-keyframes border-expand { 0% { opacity: 0; width: 0; } 100% { opacity: 1; width: 100%; } } @keyframes border-expand { 0% { opacity: 0; width: 0; } 100% { opacity: 1; width: 100%; } } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-textfield { position: relative; font-size: 16px; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 300px; max-width: 100%; margin: 0; padding: 20px 0; } .mdl-textfield .mdl-button { position: absolute; bottom: 20px; } .mdl-textfield--align-right { text-align: right; } .mdl-textfield--full-width { width: 100%; } .mdl-textfield--expandable { min-width: 32px; width: auto; min-height: 32px; } .mdl-textfield--expandable .mdl-button--icon { top: 16px; } .mdl-textfield__input { border: none; border-bottom: 1px solid rgba(0,0,0, 0.12); display: block; font-size: 16px; font-family: "Helvetica", "Arial", sans-serif; margin: 0; padding: 4px 0; width: 100%; background: none; text-align: left; color: inherit; } .mdl-textfield__input[type="number"] { -moz-appearance: textfield; } .mdl-textfield__input[type="number"]::-webkit-inner-spin-button, .mdl-textfield__input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .mdl-textfield.is-focused .mdl-textfield__input { outline: none; } .mdl-textfield.is-invalid .mdl-textfield__input { border-color: rgb(213,0,0); -webkit-box-shadow: none; box-shadow: none; } fieldset[disabled] .mdl-textfield .mdl-textfield__input, .mdl-textfield.is-disabled .mdl-textfield__input { background-color: transparent; border-bottom: 1px dotted rgba(0,0,0, 0.12); color: rgba(0,0,0, 0.26); } .mdl-textfield textarea.mdl-textfield__input { display: block; } .mdl-textfield__label { bottom: 0; color: rgba(0,0,0, 0.26); font-size: 16px; left: 0; right: 0; pointer-events: none; position: absolute; display: block; top: 24px; width: 100%; overflow: hidden; white-space: nowrap; text-align: left; } .mdl-textfield.is-dirty .mdl-textfield__label, .mdl-textfield.has-placeholder .mdl-textfield__label { visibility: hidden; } .mdl-textfield--floating-label .mdl-textfield__label { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label { -webkit-transition: none; transition: none; } fieldset[disabled] .mdl-textfield .mdl-textfield__label, .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label { color: rgba(0,0,0, 0.26); } .mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label { color: rgb(63,81,181); font-size: 12px; top: 4px; visibility: visible; } .mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__expandable-holder .mdl-textfield__label { top: -16px; } .mdl-textfield--floating-label.is-invalid .mdl-textfield__label { color: rgb(213,0,0); font-size: 12px; } .mdl-textfield__label:after { background-color: rgb(63,81,181); bottom: 20px; content: ''; height: 2px; left: 45%; position: absolute; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); visibility: hidden; width: 10px; } .mdl-textfield.is-focused .mdl-textfield__label:after { left: 0; visibility: visible; width: 100%; } .mdl-textfield.is-invalid .mdl-textfield__label:after { background-color: rgb(213,0,0); } .mdl-textfield__error { color: rgb(213,0,0); position: absolute; font-size: 12px; margin-top: 3px; visibility: hidden; display: block; } .mdl-textfield.is-invalid .mdl-textfield__error { visibility: visible; } .mdl-textfield__expandable-holder { display: inline-block; position: relative; margin-left: 32px; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); display: inline-block; max-width: 0.1px; } .mdl-textfield.is-focused .mdl-textfield__expandable-holder, .mdl-textfield.is-dirty .mdl-textfield__expandable-holder { max-width: 600px; } .mdl-textfield__expandable-holder .mdl-textfield__label:after { bottom: 0; } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ .mdl-tooltip { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: top center; transform-origin: top center; z-index: 999; background: rgba(97,97,97, 0.9); border-radius: 2px; color: rgb(255,255,255); display: inline-block; font-size: 10px; font-weight: 500; line-height: 14px; max-width: 170px; position: fixed; top: -500px; left: -500px; padding: 8px; text-align: center; } .mdl-tooltip.is-active { -webkit-animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards; animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards; } .mdl-tooltip--large { line-height: 14px; font-size: 14px; padding: 16px; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 50% { -webkit-transform: scale(0.99); transform: scale(0.99); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible; } } @keyframes pulse { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 50% { -webkit-transform: scale(0.99); transform: scale(0.99); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible; } } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Typography */ /* Shadows */ /* Animations */ /* Dialog */ .mdl-shadow--2dp { -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .mdl-shadow--3dp { -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); } .mdl-shadow--4dp { -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } .mdl-shadow--6dp { -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); } .mdl-shadow--8dp { -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); } .mdl-shadow--16dp { -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); } .mdl-shadow--24dp { -webkit-box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); } /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* * NOTE: Some rules here are applied using duplicate selectors. * This is on purpose to increase their specificity when applied. * For example: `.mdl-cell--1-col-phone.mdl-cell--1-col-phone` */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*------------------------------------* $CONTENTS \*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Typography * -----Colors * -----Textfield * -----Switch * -----Spinner * -----Radio * -----Menu * -----List * -----Layout * -----Icon toggles * -----Footer * -----Column * -----Checkbox * -----Card * -----Button * -----Animation * -----Progress * -----Badge * -----Shadows * -----Grid * -----Data table * -----Dialog * -----Snackbar * -----Tooltip * -----Chip * * Even though all variables have the `!default` directive, most of them * should not be changed as they are dependent one another. This can cause * visual distortions (like alignment issues) that are hard to track down * and fix. */ /* ========== TYPOGRAPHY ========== */ /* We're splitting fonts into "preferred" and "performance" in order to optimize page loading. For important text, such as the body, we want it to load immediately and not wait for the web font load, whereas for other sections, such as headers and titles, we're OK with things taking a bit longer to load. We do have some optional classes and parameters in the mixins, in case you definitely want to make sure you're using the preferred font and don't mind the performance hit. We should be able to improve on this once CSS Font Loading L3 becomes more widely available. */ /* ========== COLORS ========== */ /** * * Material design color palettes. * @see http://www.google.com/design/spec/style/color.html * **/ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== Color Palettes ========== */ /* colors.scss */ /** * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* ========== IMAGES ========== */ /* ========== Color & Themes ========== */ /* ========== Typography ========== */ /* ========== Components ========== */ /* ========== Standard Buttons ========== */ /* ========== Icon Toggles ========== */ /* ========== Radio Buttons ========== */ /* ========== Ripple effect ========== */ /* ========== Layout ========== */ /* ========== Content Tabs ========== */ /* ========== Checkboxes ========== */ /* ========== Switches ========== */ /* ========== Spinner ========== */ /* ========== Text fields ========== */ /* ========== Card ========== */ /* ========== Sliders ========== */ /* ========== Progress ========== */ /* ========== List ========== */ /* ========== Item ========== */ /* ========== Dropdown menu ========== */ /* ========== Tooltips ========== */ /* ========== Footer ========== */ /* TEXTFIELD */ /* SWITCH */ /* SPINNER */ /* RADIO */ /* MENU */ /* LIST */ /* LAYOUT */ /* ICON TOGGLE */ /* FOOTER */ /*mega-footer*/ /*mini-footer*/ /* CHECKBOX */ /* CARD */ /* Card dimensions */ /* Cover image */ /* BUTTON */ /** * * Dimensions * */ /* ANIMATION */ /* PROGRESS */ /* BADGE */ /* SHADOWS */ /* GRID */ /* DATA TABLE */ /* DIALOG */ /* SNACKBAR */ /* TOOLTIP */ /* CHIP */ .mdl-grid { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-flow: row wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; margin: 0 auto 0 auto; -ms-flex-align: stretch; -webkit-box-align: stretch; align-items: stretch; } .mdl-grid.mdl-grid--no-spacing { padding: 0; } .mdl-cell { -webkit-box-sizing: border-box; box-sizing: border-box; } .mdl-cell--top { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } .mdl-cell--middle { -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .mdl-cell--bottom { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .mdl-cell--stretch { -webkit-align-self: stretch; -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } .mdl-grid.mdl-grid--no-spacing > .mdl-cell { margin: 0; } .mdl-cell--order-1 { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; order: 1; } .mdl-cell--order-2 { -ms-flex-order: 2; -webkit-box-ordinal-group: 3; order: 2; } .mdl-cell--order-3 { -ms-flex-order: 3; -webkit-box-ordinal-group: 4; order: 3; } .mdl-cell--order-4 { -ms-flex-order: 4; -webkit-box-ordinal-group: 5; order: 4; } .mdl-cell--order-5 { -ms-flex-order: 5; -webkit-box-ordinal-group: 6; order: 5; } .mdl-cell--order-6 { -ms-flex-order: 6; -webkit-box-ordinal-group: 7; order: 6; } .mdl-cell--order-7 { -ms-flex-order: 7; -webkit-box-ordinal-group: 8; order: 7; } .mdl-cell--order-8 { -ms-flex-order: 8; -webkit-box-ordinal-group: 9; order: 8; } .mdl-cell--order-9 { -ms-flex-order: 9; -webkit-box-ordinal-group: 10; order: 9; } .mdl-cell--order-10 { -ms-flex-order: 10; -webkit-box-ordinal-group: 11; order: 10; } .mdl-cell--order-11 { -ms-flex-order: 11; -webkit-box-ordinal-group: 12; order: 11; } .mdl-cell--order-12 { -ms-flex-order: 12; -webkit-box-ordinal-group: 13; order: 12; } @media (max-width: 479px) { .mdl-grid { padding: 8px; } .mdl-cell { margin: 8px; width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell { width: 100%; } .mdl-cell--hide-phone { display: none !important; } .mdl-cell--order-1-phone.mdl-cell--order-1-phone { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; order: 1; } .mdl-cell--order-2-phone.mdl-cell--order-2-phone { -ms-flex-order: 2; -webkit-box-ordinal-group: 3; order: 2; } .mdl-cell--order-3-phone.mdl-cell--order-3-phone { -ms-flex-order: 3; -webkit-box-ordinal-group: 4; order: 3; } .mdl-cell--order-4-phone.mdl-cell--order-4-phone { -ms-flex-order: 4; -webkit-box-ordinal-group: 5; order: 4; } .mdl-cell--order-5-phone.mdl-cell--order-5-phone { -ms-flex-order: 5; -webkit-box-ordinal-group: 6; order: 5; } .mdl-cell--order-6-phone.mdl-cell--order-6-phone { -ms-flex-order: 6; -webkit-box-ordinal-group: 7; order: 6; } .mdl-cell--order-7-phone.mdl-cell--order-7-phone { -ms-flex-order: 7; -webkit-box-ordinal-group: 8; order: 7; } .mdl-cell--order-8-phone.mdl-cell--order-8-phone { -ms-flex-order: 8; -webkit-box-ordinal-group: 9; order: 8; } .mdl-cell--order-9-phone.mdl-cell--order-9-phone { -ms-flex-order: 9; -webkit-box-ordinal-group: 10; order: 9; } .mdl-cell--order-10-phone.mdl-cell--order-10-phone { -ms-flex-order: 10; -webkit-box-ordinal-group: 11; order: 10; } .mdl-cell--order-11-phone.mdl-cell--order-11-phone { -ms-flex-order: 11; -webkit-box-ordinal-group: 12; order: 11; } .mdl-cell--order-12-phone.mdl-cell--order-12-phone { -ms-flex-order: 12; -webkit-box-ordinal-group: 13; order: 12; } .mdl-cell--1-col, .mdl-cell--1-col-phone.mdl-cell--1-col-phone { width: calc(25% - 16px); } .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing > .mdl-cell--1-col-phone.mdl-cell--1-col-phone { width: 25%; } .mdl-cell--2-col, .mdl-cell--2-col-phone.mdl-cell--2-col-phone { width: calc(50% - 16px); } .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing > .mdl-cell--2-col-phone.mdl-cell--2-col-phone { width: 50%; } .mdl-cell--3-col, .mdl-cell--3-col-phone.mdl-cell--3-col-phone { width: calc(75% - 16px); } .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing > .mdl-cell--3-col-phone.mdl-cell--3-col-phone { width: 75%; } .mdl-cell--4-col, .mdl-cell--4-col-phone.mdl-cell--4-col-phone { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing > .mdl-cell--4-col-phone.mdl-cell--4-col-phone { width: 100%; } .mdl-cell--5-col, .mdl-cell--5-col-phone.mdl-cell--5-col-phone { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing > .mdl-cell--5-col-phone.mdl-cell--5-col-phone { width: 100%; } .mdl-cell--6-col, .mdl-cell--6-col-phone.mdl-cell--6-col-phone { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing > .mdl-cell--6-col-phone.mdl-cell--6-col-phone { width: 100%; } .mdl-cell--7-col, .mdl-cell--7-col-phone.mdl-cell--7-col-phone { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing > .mdl-cell--7-col-phone.mdl-cell--7-col-phone { width: 100%; } .mdl-cell--8-col, .mdl-cell--8-col-phone.mdl-cell--8-col-phone { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing > .mdl-cell--8-col-phone.mdl-cell--8-col-phone { width: 100%; } .mdl-cell--9-col, .mdl-cell--9-col-phone.mdl-cell--9-col-phone { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing > .mdl-cell--9-col-phone.mdl-cell--9-col-phone { width: 100%; } .mdl-cell--10-col, .mdl-cell--10-col-phone.mdl-cell--10-col-phone { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing > .mdl-cell--10-col-phone.mdl-cell--10-col-phone { width: 100%; } .mdl-cell--11-col, .mdl-cell--11-col-phone.mdl-cell--11-col-phone { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing > .mdl-cell--11-col-phone.mdl-cell--11-col-phone { width: 100%; } .mdl-cell--12-col, .mdl-cell--12-col-phone.mdl-cell--12-col-phone { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing > .mdl-cell--12-col-phone.mdl-cell--12-col-phone { width: 100%; } .mdl-cell--1-offset, .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone { margin-left: calc(25% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone { margin-left: 25%; } .mdl-cell--2-offset, .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone { margin-left: calc(50% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone { margin-left: 50%; } .mdl-cell--3-offset, .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone { margin-left: calc(75% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone { margin-left: 75%; } } @media (min-width: 480px) and (max-width: 839px) { .mdl-grid { padding: 8px; } .mdl-cell { margin: 8px; width: calc(50% - 16px); } .mdl-grid--no-spacing > .mdl-cell { width: 50%; } .mdl-cell--hide-tablet { display: none !important; } .mdl-cell--order-1-tablet.mdl-cell--order-1-tablet { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; order: 1; } .mdl-cell--order-2-tablet.mdl-cell--order-2-tablet { -ms-flex-order: 2; -webkit-box-ordinal-group: 3; order: 2; } .mdl-cell--order-3-tablet.mdl-cell--order-3-tablet { -ms-flex-order: 3; -webkit-box-ordinal-group: 4; order: 3; } .mdl-cell--order-4-tablet.mdl-cell--order-4-tablet { -ms-flex-order: 4; -webkit-box-ordinal-group: 5; order: 4; } .mdl-cell--order-5-tablet.mdl-cell--order-5-tablet { -ms-flex-order: 5; -webkit-box-ordinal-group: 6; order: 5; } .mdl-cell--order-6-tablet.mdl-cell--order-6-tablet { -ms-flex-order: 6; -webkit-box-ordinal-group: 7; order: 6; } .mdl-cell--order-7-tablet.mdl-cell--order-7-tablet { -ms-flex-order: 7; -webkit-box-ordinal-group: 8; order: 7; } .mdl-cell--order-8-tablet.mdl-cell--order-8-tablet { -ms-flex-order: 8; -webkit-box-ordinal-group: 9; order: 8; } .mdl-cell--order-9-tablet.mdl-cell--order-9-tablet { -ms-flex-order: 9; -webkit-box-ordinal-group: 10; order: 9; } .mdl-cell--order-10-tablet.mdl-cell--order-10-tablet { -ms-flex-order: 10; -webkit-box-ordinal-group: 11; order: 10; } .mdl-cell--order-11-tablet.mdl-cell--order-11-tablet { -ms-flex-order: 11; -webkit-box-ordinal-group: 12; order: 11; } .mdl-cell--order-12-tablet.mdl-cell--order-12-tablet { -ms-flex-order: 12; -webkit-box-ordinal-group: 13; order: 12; } .mdl-cell--1-col, .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet { width: calc(12.5% - 16px); } .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing > .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet { width: 12.5%; } .mdl-cell--2-col, .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet { width: calc(25% - 16px); } .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing > .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet { width: 25%; } .mdl-cell--3-col, .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet { width: calc(37.5% - 16px); } .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing > .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet { width: 37.5%; } .mdl-cell--4-col, .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet { width: calc(50% - 16px); } .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing > .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet { width: 50%; } .mdl-cell--5-col, .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet { width: calc(62.5% - 16px); } .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing > .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet { width: 62.5%; } .mdl-cell--6-col, .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet { width: calc(75% - 16px); } .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing > .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet { width: 75%; } .mdl-cell--7-col, .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet { width: calc(87.5% - 16px); } .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing > .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet { width: 87.5%; } .mdl-cell--8-col, .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing > .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet { width: 100%; } .mdl-cell--9-col, .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing > .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet { width: 100%; } .mdl-cell--10-col, .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing > .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet { width: 100%; } .mdl-cell--11-col, .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing > .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet { width: 100%; } .mdl-cell--12-col, .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing > .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet { width: 100%; } .mdl-cell--1-offset, .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet { margin-left: calc(12.5% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet { margin-left: 12.5%; } .mdl-cell--2-offset, .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet { margin-left: calc(25% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet { margin-left: 25%; } .mdl-cell--3-offset, .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet { margin-left: calc(37.5% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet { margin-left: 37.5%; } .mdl-cell--4-offset, .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet { margin-left: calc(50% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet { margin-left: 50%; } .mdl-cell--5-offset, .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet { margin-left: calc(62.5% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet { margin-left: 62.5%; } .mdl-cell--6-offset, .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet { margin-left: calc(75% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet { margin-left: 75%; } .mdl-cell--7-offset, .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet { margin-left: calc(87.5% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet { margin-left: 87.5%; } } @media (min-width: 840px) { .mdl-grid { padding: 8px; } .mdl-cell { margin: 8px; width: calc(33.3333333333% - 16px); } .mdl-grid--no-spacing > .mdl-cell { width: 33.3333333333%; } .mdl-cell--hide-desktop { display: none !important; } .mdl-cell--order-1-desktop.mdl-cell--order-1-desktop { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; order: 1; } .mdl-cell--order-2-desktop.mdl-cell--order-2-desktop { -ms-flex-order: 2; -webkit-box-ordinal-group: 3; order: 2; } .mdl-cell--order-3-desktop.mdl-cell--order-3-desktop { -ms-flex-order: 3; -webkit-box-ordinal-group: 4; order: 3; } .mdl-cell--order-4-desktop.mdl-cell--order-4-desktop { -ms-flex-order: 4; -webkit-box-ordinal-group: 5; order: 4; } .mdl-cell--order-5-desktop.mdl-cell--order-5-desktop { -ms-flex-order: 5; -webkit-box-ordinal-group: 6; order: 5; } .mdl-cell--order-6-desktop.mdl-cell--order-6-desktop { -ms-flex-order: 6; -webkit-box-ordinal-group: 7; order: 6; } .mdl-cell--order-7-desktop.mdl-cell--order-7-desktop { -ms-flex-order: 7; -webkit-box-ordinal-group: 8; order: 7; } .mdl-cell--order-8-desktop.mdl-cell--order-8-desktop { -ms-flex-order: 8; -webkit-box-ordinal-group: 9; order: 8; } .mdl-cell--order-9-desktop.mdl-cell--order-9-desktop { -ms-flex-order: 9; -webkit-box-ordinal-group: 10; order: 9; } .mdl-cell--order-10-desktop.mdl-cell--order-10-desktop { -ms-flex-order: 10; -webkit-box-ordinal-group: 11; order: 10; } .mdl-cell--order-11-desktop.mdl-cell--order-11-desktop { -ms-flex-order: 11; -webkit-box-ordinal-group: 12; order: 11; } .mdl-cell--order-12-desktop.mdl-cell--order-12-desktop { -ms-flex-order: 12; -webkit-box-ordinal-group: 13; order: 12; } .mdl-cell--1-col, .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop { width: calc(8.3333333333% - 16px); } .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing > .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop { width: 8.3333333333%; } .mdl-cell--2-col, .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop { width: calc(16.6666666667% - 16px); } .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing > .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop { width: 16.6666666667%; } .mdl-cell--3-col, .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop { width: calc(25% - 16px); } .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing > .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop { width: 25%; } .mdl-cell--4-col, .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop { width: calc(33.3333333333% - 16px); } .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing > .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop { width: 33.3333333333%; } .mdl-cell--5-col, .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop { width: calc(41.6666666667% - 16px); } .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing > .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop { width: 41.6666666667%; } .mdl-cell--6-col, .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop { width: calc(50% - 16px); } .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing > .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop { width: 50%; } .mdl-cell--7-col, .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop { width: calc(58.3333333333% - 16px); } .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing > .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop { width: 58.3333333333%; } .mdl-cell--8-col, .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop { width: calc(66.6666666667% - 16px); } .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing > .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop { width: 66.6666666667%; } .mdl-cell--9-col, .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop { width: calc(75% - 16px); } .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing > .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop { width: 75%; } .mdl-cell--10-col, .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop { width: calc(83.3333333333% - 16px); } .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing > .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop { width: 83.3333333333%; } .mdl-cell--11-col, .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop { width: calc(91.6666666667% - 16px); } .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing > .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop { width: 91.6666666667%; } .mdl-cell--12-col, .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop { width: calc(100% - 16px); } .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing > .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop { width: 100%; } .mdl-cell--1-offset, .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop { margin-left: calc(8.3333333333% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop { margin-left: 8.3333333333%; } .mdl-cell--2-offset, .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop { margin-left: calc(16.6666666667% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop { margin-left: 16.6666666667%; } .mdl-cell--3-offset, .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop { margin-left: calc(25% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop { margin-left: 25%; } .mdl-cell--4-offset, .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop { margin-left: calc(33.3333333333% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop { margin-left: 33.3333333333%; } .mdl-cell--5-offset, .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop { margin-left: calc(41.6666666667% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop { margin-left: 41.6666666667%; } .mdl-cell--6-offset, .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop { margin-left: calc(50% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop { margin-left: 50%; } .mdl-cell--7-offset, .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop { margin-left: calc(58.3333333333% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop { margin-left: 58.3333333333%; } .mdl-cell--8-offset, .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop { margin-left: calc(66.6666666667% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop { margin-left: 66.6666666667%; } .mdl-cell--9-offset, .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop { margin-left: calc(75% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop { margin-left: 75%; } .mdl-cell--10-offset, .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop { margin-left: calc(83.3333333333% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop { margin-left: 83.3333333333%; } .mdl-cell--11-offset, .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop { margin-left: calc(91.6666666667% + 8px); } .mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset, .mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop { margin-left: 91.6666666667%; } } /*---- Core ---*/ html, body, div, span, applet, object, iframe, h1, h2, .banner_cnt .banner_caption .home-package-price, 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; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'ceragr regular',sans-serif; outline: none; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { box-shadow: 0 0 0px 9999px #ffffff inset !important; -webkit-box-shadow: 0 0 0px 9999px #ffffff inset !important; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; font-family: 'ceragr regular',sans-serif; } body { line-height: 1; overflow-x: hidden; } ol, ul { list-style: none; } li { line-height: 1.5; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } @font-face { font-family: 'ceragr black'; src: url(/fonts/cera_gr_black.eot?3e82009a7eef7338efe6e8bfca0e2c86); src: url(/fonts/cera_gr_black.eot?3e82009a7eef7338efe6e8bfca0e2c86?#iefix) format("embedded-opentype"), url(/fonts/cera_gr_black.woff2?668de1804c7f8d5c29778ae9afea4552) format("woff2"), url(/fonts/cera_gr_black.woff?71f0e98d91d4eb19cdd5e2a0ff6f26f3) format("woff"), url(/fonts/cera_gr_black.ttf?de65390dba1cd161345dbf05fb810129) format("truetype"), url(/fonts/cera_gr_black.svg?a3cd4595172d6850cf1621eb8deff46a#ceragr-blackuploaded_file) format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'ceragr bold'; src: url(/fonts/cera_gr_bold.eot?31ac93e59b366557e20d61b6f08a8f2a); src: url(/fonts/cera_gr_bold.eot?31ac93e59b366557e20d61b6f08a8f2a?#iefix) format("embedded-opentype"), url(/fonts/cera_gr_bold.woff2?626a723ebf1516e2c345f1fcfe5a469a) format("woff2"), url(/fonts/cera_gr_bold.woff?138ff3e71b698d4e406fba7ef3d8f23e) format("woff"), url(/fonts/cera_gr_bold.ttf?f1356d82b4b89cfbeae2cf49b74c2966) format("truetype"), url(/fonts/cera_gr_bold.svg?3f12cbcf83d22adba4e50be14acc49a2#ceragr-bolduploaded_file) format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'ceragr medium'; src: url(/fonts/cera_gr_medium.eot?89c0509a467a060c4e23f0dcd2097d9a); src: url(/fonts/cera_gr_medium.eot?89c0509a467a060c4e23f0dcd2097d9a?#iefix) format("embedded-opentype"), url(/fonts/cera_gr_medium.woff2?816db38cedfe23f2c0a5956dea73b536) format("woff2"), url(/fonts/cera_gr_medium.woff?1ab3ad2af6c51dd96a48d50810252345) format("woff"), url(/fonts/cera_gr_medium.ttf?1c960a3e8bd3c3c7484a67e5961ffe59) format("truetype"), url(/fonts/cera_gr_medium.svg?2782c6b77f889e7b9d2c3606937a3dc3#ceragr-mediumuploaded_file) format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'ceragr regular'; src: url(/fonts/cera_gr_regular.eot?fa90d76d4be9f9a333ca0e8c48b8dcd0); src: url(/fonts/cera_gr_regular.eot?fa90d76d4be9f9a333ca0e8c48b8dcd0?#iefix) format("embedded-opentype"), url(/fonts/cera_gr_regular.woff2?44c5906d364477eb98b20ca532ee05f6) format("woff2"), url(/fonts/cera_gr_regular.woff?50a925e66386d32cebfba04a65027dcf) format("woff"), url(/fonts/cera_gr_regular.ttf?8f0a1187f9618c7e26377f7a5ae72827) format("truetype"), url(/fonts/cera_gr_regular.svg?8748667d0856e06be1a89e208f38a00e#ceragr-regularuploaded_file) format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'tibro'; src: url(/fonts/tibro.eot?c75a32c23a148fecc6d8f30abd1e2ac3); src: url(/fonts/tibro.eot?c75a32c23a148fecc6d8f30abd1e2ac3#iefix) format("embedded-opentype"), url(/fonts/tibro.ttf?57ae1819e9a408b27f33adbafd88ff54) format("truetype"), url(/fonts/tibro.woff?12e046dbda2992c52ac9c897611da66e) format("woff"), url(/fonts/tibro.svg?9f5d54a8015d899bf7a41fd73befaf7b#tibro) format("svg"); font-weight: normal; font-style: normal; } [class^="tb_"], [class*=" tb_"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'tibro'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .tb_upload:before { content: "\E93F"; } .tb_team:before { content: "\E928"; } .tb_tradefair_default:before { content: "\E93E"; } .tb_consumer:before { content: "\E907"; } .tb_engineering:before { content: "\E90B"; } .tb_food:before { content: "\E90C"; } .tb_medical:before { content: "\E91A"; } .tb_pharma_chemical:before { content: "\E929"; } .tb_plastic_rubber:before { content: "\E93B"; } .tb_print_packaging:before { content: "\E93C"; } .tb_textile:before { content: "\E93D"; } .tb_travller_men:before { content: "\E93A"; } .tb_contact_pin:before { content: "\E939"; } .tb_close:before { content: "\E938"; } .tb_bag:before { content: "\E900"; } .tb_calender:before { content: "\E901"; } .tb_contact:before { content: "\E902"; } .tb_country:before { content: "\E903"; } .tb_flexibility:before { content: "\E904"; } .tb_flight:before { content: "\E905"; } .tb_mail:before { content: "\E906"; } .tb_money:before { content: "\E908"; } .tb_search:before { content: "\E909"; } .tb_security:before { content: "\E90A"; } .tb_assembly-line:before { content: "\E90D"; } .tb_award:before { content: "\E90E"; } .tb_binoculars:before { content: "\E90F"; } .tb_company:before { content: "\E910"; } .tb_conferences:before { content: "\E911"; } .tb_connection:before { content: "\E912"; } .tb_creative:before { content: "\E913"; } .tb_download:before { content: "\E914"; } .tb_edit:before { content: "\E915"; } .tb_engineer:before { content: "\E916"; } .tb_event:before { content: "\E917"; } .tb_facebook:before { content: "\E918"; } .tb_fireworks:before { content: "\E919"; } .tb_giftcard:before { content: "\E91B"; } .tb_hiring:before { content: "\E91C"; } .tb_industry:before { content: "\E91D"; } .tb_instagram:before { content: "\E91E"; } .tb_leader:before { content: "\E91F"; } .tb_location:before { content: "\E920"; } .tb_meeting:before { content: "\E921"; } .tb_next:before { content: "\E922"; } .tb_phone:before { content: "\E923"; } .tb_photography:before { content: "\E924"; } .tb_premium:before { content: "\E925"; } .tb_previous:before { content: "\E926"; } .tb_quote:before { content: "\E927"; } .tb_twitter:before { content: "\E92A"; } .tb_user:before { content: "\E92B"; } .tb_assembly:before { content: "\E92C"; } .tb_down_arrow:before { content: "\E92D"; } .tb_up_arrow:before { content: "\E92E"; } .tb_Africa:before { content: "\E92F"; } .tb_Antartica:before { content: "\E930"; } .tb_Asia:before { content: "\E931"; } .tb_Australia:before { content: "\E932"; } .tb_Europe:before { content: "\E933"; } .tb_India:before { content: "\E934"; } .tb_North_America:before { content: "\E935"; } .tb_South_America:before { content: "\E936"; } .tb_checked:before { content: "\E937"; } * { margin: 0; padding: 0; } html, body { height: 100%; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'ceragr regular',sans-serif; font-size: 1rem; font-weight: normal; -webkit-overflow-scrolling: touch; background-color: #fff; color: #2d2556; -ms-touch-action: manipulation; touch-action: manipulation; } @media only screen and (max-width: 1024px) { html, body { background-color: #fff; } } html.block, body.block { overflow: hidden; height: 100%; } body { padding-top: 63px; } @media only screen and (max-width: 1920px) { body { font-size: 16px; } } @media only screen and (max-width: 1440px) { body { font-size: 14px; } } @media only screen and (max-width: 1024px) { body { padding-top: 67px; } } @media only screen and (max-width: 768px) { body { font-size: 14px; padding-bottom: 108px; } } @media only screen and (max-width: 500px) { body { font-size: 12px; } } img { max-width: 100%; min-height: 1px; height: auto; display: block; } p { font-size: 0.875rem; font-weight: normal; line-height: 22px; color: rgba(45, 37, 86, 0.8); font-family: 'ceragr medium'; margin-bottom: 20px; } a { display: inline-block; text-decoration: none; } h1 { font-size: 5rem; } h2, .banner_cnt .banner_caption .home-package-price { font-size: 1.875rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.125rem; } h6 { font-size: 1rem; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 9999px #faf9ff inset; } .clear_fix { display: block; clear: both; } .position_relative { position: relative; } .slick-slide { outline: none; } .slick-slider { border-radius: 5px; } .margin.margin_0 { margin: 0; } .margin.top_30 { margin-top: 30px; } .margin.bottom_30 { margin-bottom: 30px; } .margin.bottom_40 { margin-bottom: 40px; } .margin.bottom_50 { margin-bottom: 50px; } .margin.bottom_60 { margin-bottom: 60px; } .margin.bottom_70 { margin-bottom: 70px; } @media screen and (max-width: 768px) { .mobile_margin_0 { margin-bottom: 0 !important; } } .padding_0 { padding: 0 !important; } /*button*/ .baseBtn { border-radius: 5px; font-weight: normal; font-size: 1rem; color: #fff; padding: 10px; outline: 0; cursor: pointer; border: 0; text-decoration: none; -webkit-box-sizing: border-box; box-sizing: border-box; text-transform: none; line-height: normal; height: auto; text-align: center; display: inline-block; min-width: 120px; font-family: 'ceragr medium'; -webkit-box-shadow: none; box-shadow: none; will-change: box-shadow; -webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1); transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1); transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1); } @media only screen and (max-width: 768px) { .baseBtn { min-width: 100px; padding: 8px; } } .baseBtn.disabledBtn { pointer-events: none; text-align: center; opacity: 0.3; } .baseBtn.yellowBtn { color: #fff; background: -webkit-gradient(linear, left top, right top, color-stop(50%, #e1800b), color-stop(50%, #f48b0d)); background: linear-gradient(to right, #e1800b 50%, #f48b0d 50%); background-size: 200% 100%; background-position: right bottom; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; } .baseBtn.yellowBtn:hover { /* background-color:$yellowButtonHover;*/ background-position: left bottom; } .baseBtn.yellowBtn[disabled] { pointer-events: none; text-align: center; color: #fff; background: #fac586; } .baseBtn.greyBtn { color: #302656; background: -webkit-gradient(linear, left top, right top, color-stop(50%, #cecece), color-stop(50%, #ececec)); background: linear-gradient(to right, #cecece 50%, #ececec 50%); background-size: 200% 100%; background-position: right bottom; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; } .baseBtn.greyBtn:hover { background-position: left bottom; } .baseBtn.greyBtn[disabled] { pointer-events: none; text-align: center; color: #b5abdb; background-color: #f3f3f3; } .baseBtn.whiteBtn { color: #a894d1; border: 1px solid #eae5ff; background: -webkit-gradient(linear, left top, right top, color-stop(50%, #cecece), color-stop(50%, #fff)); background: linear-gradient(to right, #cecece 50%, #fff 50%); background-size: 200% 100%; background-position: right bottom; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; } .baseBtn.whiteBtn:hover { background-position: left bottom; color: #6b6783; border: 1px solid #a894d1; } .baseBtn.whiteBtn[disabled] { pointer-events: none; text-align: center; color: #ddcdff; background-color: #fff; border-color: #f4f2ff; } .baseBtn[disabled] { pointer-events: none; text-align: center; color: #ddcdff; background-color: #fff; border-color: #f4f2ff; } /*slider-button*/ .sliderDemo .slick-arrow { border-radius: 5px; background-color: #302656; } .sliderDemo .slick-prev { width: 34px; height: 34px; overflow: hidden; cursor: pointer; outline: none; border: 0; position: absolute; bottom: -16px; right: 95px; z-index: 9; } .sliderDemo .slick-prev:after { font-family: 'tibro'; content: '\E926'; display: block; color: #fff; position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .sliderDemo .slick-prev.slick-disabled { background-color: #8073b1; } .sliderDemo .slick-next { width: 34px; height: 34px; overflow: hidden; cursor: pointer; outline: none; border: 0; position: absolute; bottom: -16px; right: 35px; z-index: 9; } .sliderDemo .slick-next.slick-disabled { background-color: #8073b1; } .sliderDemo .slick-next:after { font-family: 'tibro'; content: '\E922'; display: block; color: #fff; position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } /*labels*/ .tb_Food:before, .tb_Textile:before, .tb_Photography:before, .tb_Engineering:before, .tb_Medical:before, .tb_tradefair_default:before, .tb_consumer:before { font-family: 'tibro'; color: #2d2556; font-size: 1.125rem; margin-right: 6px; } .tb_Food:before { content: '\E90C'; } .tb_Textile:before { content: '\E93D'; } .tb_Photography:before { content: '\E924'; } .tb_Engineering:before { content: '\E90B'; } .tb_Medical:before { content: '\E91A'; } .tb_tradefair_default:before { content: '\E93E'; } .tb_consumer:before { content: '\E907'; } .tb_pharma_chemical:before { content: '\E929'; } .tb_plastic_rubber:before { content: '\E93B'; } .tb_print_packaging:before { content: '\E93C'; } /*input*/ form input::-webkit-validation-bubble-message, form select::-webkit-validation-bubble-message, form textarea::-webkit-validation-bubble-message { display: none; } form .baseBtn { height: 38px; } .baseInput { margin: 10px 0; position: relative; font-size: 1rem; color: #000; width: 100%; } @media screen and (max-width: 768px) { .baseInput { margin: 2px 0; } } .baseInput .mdl-textfield__input { font-family: 'ceragr regular'; padding: 10px 0; font-size: 1rem; } .baseInput .mdl-textfield__label { color: #707070; font-size: 1rem; top: 31px; } .baseInput.withIcon .tbicon { position: absolute; top: 23px; } .baseInput.withIcon .tbicon i { font-size: 1.5rem; color: #cccccc; } .baseInput.withIcon .mdl-textfield__input { padding-left: 40px; width: calc(100% - 40px); } .baseInput.withIcon .mdl-textfield__label { padding-left: 40px; } /*links*/ .defaultLink { color: #f4850d; text-decoration: none; position: relative; font-family: 'ceragr medium'; font-size: 1rem; } .defaultLink:after { content: ' '; border-bottom: 1px solid #f4850d; bottom: 0; display: block; position: absolute; width: 100%; } .defaultLink:hover { color: #e1800b; text-decoration: none; } .defaultLink:hover:after { border-bottom: 1px solid #e1800b; } .defaultLink.disabled { pointer-events: none; color: #fac586; } .defaultLink.disabled:after { border-bottom: 1px solid #fac586; } /*shadow*/ .box_shadow { -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.1); } .drop_shadow { -webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.1); } /*tab_panel*/ .tbTabPanel .mdl-tabs__tab-bar { border-bottom: 4px solid #ede8ff; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .tbTabPanel .mdl-tabs__tab-bar .mdl-tabs__tab { font-family: 'ceragr medium'; font-size: 1.125rem; color: #f4850d; text-transform: capitalize; } @media screen and (max-width: 480px) { .tbTabPanel .mdl-tabs__tab-bar .mdl-tabs__tab { font-size: 1rem; padding: 0 8px 0 8px; } } @media screen and (max-width: 480px) { .tbTabPanel .mdl-tabs__tab-bar .mdl-tabs__tab:first-child { padding-left: 0; } } .tbTabPanel .mdl-tabs__tab-bar .mdl-tabs__tab.is-active { color: #2d2556; } .tbTabPanel .mdl-tabs__tab-bar .mdl-tabs__tab.is-active:after { height: 4px; background: #f4850d; } .tbTabPanel .mdl-tabs__panel { margin-top: 35px; } /*card*/ .demoCard { width: 90%; padding: 10px; margin: 0 auto; background: #fff; border-radius: 10px; } .demoCard .boxTop img { width: 100%; } .demoCard .boxBottom { padding: 30px 20px; } .demoCard .boxBottom h5 { font-family: 'ceragr medium'; margin-bottom: 25px; color: #2d2556; } /*backgrounds*/ .whiteBg { background-color: #fff; } .LighterGreyBg { background-color: #f4f2ff; } .LighterBlueBg { background-color: #ede8ff; } .secondaryPink { background-color: #ffe8e8; } .secondaryCyan { background-color: #c4e5ef; } .secondaryOffwhite { background-color: #fffae8; } .width_30 { width: 30%; } .width_70 { width: 70%; } .width_100 { width: 100% !important; } .width_50 { width: 50%; } @media only screen and (max-width: 768px) { .width_50 { width: 100%; } } .floatL { float: left; } .floatR { float: right; } .overlay { position: fixed; background: rgba(0, 0, 0, 0.7); height: 100%; width: 100%; display: none; left: 0; top: 0px; z-index: 111; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .overlay.show_overlay { display: block; } @media only screen and (max-width: 1024px) { .overlay { top: 67px; } } @media screen and (max-width: 768px) { .custom_common_heading { position: absolute; top: -70px; font-size: 1.125rem; } } .common_heading { font-family: 'ceragr regular',sans-serif; color: #000; padding-left: 10px; border-left: 3px solid #f48b0d; } .common_heading.color_white { color: #fff; border-left: 3px solid #fff; } .section { padding-top: 60px; } @media only screen and (max-width: 768px) { .section { padding: 30px 0; } } /* common section heading*/ .section_heading { margin-bottom: 50px; } @media only screen and (max-width: 768px) { .section_heading { margin-bottom: 20px; } } .section_heading h3 { font-family: 'ceragr medium', sans-serif; color: #f48b0d; font-size: 2.25rem; } @media only screen and (max-width: 768px) { .section_heading h3 { font-size: 1.5rem; } } /* CSS added by Shashank on 24-2-2024 */ .section_heading h1{ color: #2d2556; position: relative; display: inline-block; } @media only screen and (max-width: 768px) { .section_heading h1{ font-size: 40px; } } .section_heading h1:after { width: 50px; height: 32px; position: absolute; right: -53px; top: 0px; content: " "; background-size: cover; background: url(/images/heading_img2.png?531c6a4be2cb0a48f43fa2afd215d7a5) 0 0 no-repeat; } .whyUsTradefairs h2 { font-family: 'ceragr regular'; color: #000; border-left: 5px solid #f4850d; padding-left: 20px; margin-bottom: 30px; } .whyUsTradefairs .whyUsList .whyUsContent h3 { font-family: 'ceragr medium'; color: #2d2556; margin-bottom: 10px; min-height: 36px; font-size: 1.125rem !important; } /* CSS added by Shashank on 24-2-2024 */ .section_heading h2, .section_heading .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .section_heading .home-package-price { font-family: 'ceragr black', sans-serif; color: #2d2556; font-size: 5rem; position: relative; display: inline-block; } @media only screen and (max-width: 768px) { .section_heading h2, .section_heading .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .section_heading .home-package-price { font-size: 40px; } } .section_heading h2:after, .section_heading .banner_cnt .banner_caption .home-package-price:after, .banner_cnt .banner_caption .section_heading .home-package-price:after { width: 50px; height: 32px; position: absolute; right: -53px; top: 65px; content: " "; background-size: cover; background: url(/images/heading_img2.png?531c6a4be2cb0a48f43fa2afd215d7a5) 0 0 no-repeat; } @media only screen and (max-width: 768px) { .section_heading h2:after, .section_heading .banner_cnt .banner_caption .home-package-price:after, .banner_cnt .banner_caption .section_heading .home-package-price:after { top: 0; right: -55px; } } @media only screen and (max-width: 640px) { .section_heading h2:after, .section_heading .banner_cnt .banner_caption .home-package-price:after, .banner_cnt .banner_caption .section_heading .home-package-price:after { display: none; } } /*overlay label css*/ .label { position: absolute; background: #3cdebd; padding: 10px; left: 20px; top: 20px; border-radius: 3px; z-index: 99; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .label span { color: #2d2556; font-family: 'ceragr medium'; font-size: 0.875rem; } .section_bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; position: relative; overflow: hidden; padding-top: 10px; } @media only screen and (max-width: 768px) { .section_bottom { display: none; } } .section_bottom span { font: 130px 'ceragr black',sans-serif; color: #ede8ff; } .section_bottom .bottom_img_cnt { height: inherit; } .section_bottom span { display: inline-block; font-size: 150px; } @media only screen and (min-width: 1600px) { .section_bottom span { font-size: 210px; } } @media only screen and (max-width: 768px) { .section_bottom span { font-size: 80px; } } @media only screen and (max-width: 480px) { .section_bottom span { font-size: 45px; } } /*responsive_container*/ .tb_responsive_container { width: 100%; max-width: 1200px; margin: 0 auto; } @media only screen and (max-width: 1024px) { .tb_responsive_container { max-width: 970px; } } @media only screen and (max-width: 768px) { .tb_responsive_container { max-width: 750px; padding: 0 20px; } } @media only screen and (max-width: 640px) { .tb_responsive_container { max-width: none; } } .display.flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .display.block { display: block; } .display.none { display: none; } .justify_content.space_arround { -ms-flex-pack: distribute; justify-content: space-around; } .justify_content.space_between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .align.align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label { color: #6b6783; } .text-center { text-align: center; } .default_modal.mdl-dialog { padding: 30px 0px; border-radius: 5px; display: none; position: fixed; background: #fff; margin: 0 auto; left: 0; right: 0; z-index: 999; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 480px) { .default_modal.mdl-dialog { border-radius: 0; padding: 50px 0px; } } .default_modal.mdl-dialog .mdl-dialog__title { padding: 0 0 0 15px; margin-left: 24px; font-family: 'ceragr regular'; color: #000; margin-bottom: 10px; font-size: 1.5rem; border-left: 4px solid #f4850d; } @media screen and (max-width: 480px) { .default_modal.mdl-dialog .mdl-dialog__title { font-size: 1.125rem; margin-bottom: 10px; } } .default_modal.mdl-dialog.show_modal { display: block; -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .default_modal.mdl-dialog .mdl-dialog__content { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; max-height: 510px; overflow: hidden; } @media screen and (max-width: 768) { .default_modal.mdl-dialog .mdl-dialog__content { overflow-y: scroll; } } .default_modal.mdl-dialog .mdl-dialog__content::-webkit-scrollbar { width: 3px; } .default_modal.mdl-dialog .mdl-dialog__content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .default_modal.mdl-dialog .mdl-dialog__content::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; } @media screen and (max-width: 768px) { .default_modal.mdl-dialog .mdl-dialog__content { min-height: 100%; overflow-y: scroll; } } .default_modal.mdl-dialog .close { cursor: pointer; min-width: auto; padding: 0 10px; height: auto; line-height: 1; background: transparent; position: absolute; top: 15px; right: 10px; border: none; outline: 0; } .default_modal.mdl-dialog::-webkit-backdrop { background-color: rgba(50, 50, 50, 0.5); } .default_modal.mdl-dialog::backdrop { background-color: rgba(50, 50, 50, 0.5); } .scrollTop { position: fixed; right: 40px; bottom: 80px; text-align: center; padding: 15px 5px; cursor: pointer; width: 80px; background-color: #f4850d; display: none; z-index: 99; border-radius: 10px; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; } @media screen and (max-width: 768px) { .scrollTop { width: 50px; border-radius: 5px; right: 50px; bottom: 150px; display: none !important; } } @media screen and (max-width: 500px) { .scrollTop { right: 25px; bottom: 250px; } } .scrollTop i { color: #fff; font-size: 1.5rem; display: block; margin-bottom: 10px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } @media screen and (max-width: 768px) { .scrollTop i { font-size: 1rem; margin-bottom: 0; } } .scrollTop span { color: #fff; display: block; font-size: 12px; font-family: 'ceragr medium'; } @media screen and (max-width: 768px) { .scrollTop span { display: none; } } .scrollTop:hover { background-color: #dc3724; opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } @media screen and (max-width: 768px) { .mobile_none { display: none; } } .error_notfound { color: #dc3724; font-weight: bold; } @media screen and (max-width: 768px) { .error_notfound { font-size: 1rem; } } .statusmessage { color: #008000; display: none; text-align: left; margin-top: 10px; } .errmessage { color: #dc3724; display: none; margin-top: 10px; text-align: left; } .tb_breadcrumbs_wrap { margin: 10px 0 30px 0; } @media screen and (max-width: 768px) { .tb_breadcrumbs_wrap { margin: 10px 0px; } } .tb_breadcrumbs_wrap ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .tb_breadcrumbs_wrap ul li { margin-right: 10px; } .tb_breadcrumbs_wrap ul li:after { content: ':'; font-size: 0.875rem; margin-left: 10px; } @media screen and (max-width: 768px) { .tb_breadcrumbs_wrap ul li:after { font-size: 0.875rem; } } .tb_breadcrumbs_wrap ul li a { color: #2d2556; font-size: 0.875rem; border-bottom: 1px solid transparent; } .tb_breadcrumbs_wrap ul li a:hover { border-bottom: 1px solid #2d2556; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } @media screen and (max-width: 768px) { .tb_breadcrumbs_wrap ul li a { font-size: 0.875rem; } } .tb_breadcrumbs_wrap ul li:last-child { margin-right: 0; } .tb_breadcrumbs_wrap ul li:last-child:after { content: none; } .tb_breadcrumbs_wrap ul li:last-child a { color: #f4850d; font-family: 'ceragr bold'; pointer-events: none; } /* Slider */ .slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } [data-aos][data-aos][data-aos-duration="50"], body[data-aos-duration="50"] [data-aos] { -webkit-transition-duration: 50ms; transition-duration: 50ms; } [data-aos][data-aos][data-aos-delay="50"], body[data-aos-delay="50"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="50"].aos-animate, body[data-aos-delay="50"] [data-aos].aos-animate { -webkit-transition-delay: 50ms; transition-delay: 50ms; } [data-aos][data-aos][data-aos-duration="100"], body[data-aos-duration="100"] [data-aos] { -webkit-transition-duration: .1s; transition-duration: .1s; } [data-aos][data-aos][data-aos-delay="100"], body[data-aos-delay="100"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="100"].aos-animate, body[data-aos-delay="100"] [data-aos].aos-animate { -webkit-transition-delay: .1s; transition-delay: .1s; } [data-aos][data-aos][data-aos-duration="150"], body[data-aos-duration="150"] [data-aos] { -webkit-transition-duration: .15s; transition-duration: .15s; } [data-aos][data-aos][data-aos-delay="150"], body[data-aos-delay="150"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="150"].aos-animate, body[data-aos-delay="150"] [data-aos].aos-animate { -webkit-transition-delay: .15s; transition-delay: .15s; } [data-aos][data-aos][data-aos-duration="200"], body[data-aos-duration="200"] [data-aos] { -webkit-transition-duration: .2s; transition-duration: .2s; } [data-aos][data-aos][data-aos-delay="200"], body[data-aos-delay="200"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="200"].aos-animate, body[data-aos-delay="200"] [data-aos].aos-animate { -webkit-transition-delay: .2s; transition-delay: .2s; } [data-aos][data-aos][data-aos-duration="250"], body[data-aos-duration="250"] [data-aos] { -webkit-transition-duration: .25s; transition-duration: .25s; } [data-aos][data-aos][data-aos-delay="250"], body[data-aos-delay="250"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="250"].aos-animate, body[data-aos-delay="250"] [data-aos].aos-animate { -webkit-transition-delay: .25s; transition-delay: .25s; } [data-aos][data-aos][data-aos-duration="300"], body[data-aos-duration="300"] [data-aos] { -webkit-transition-duration: .3s; transition-duration: .3s; } [data-aos][data-aos][data-aos-delay="300"], body[data-aos-delay="300"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="300"].aos-animate, body[data-aos-delay="300"] [data-aos].aos-animate { -webkit-transition-delay: .3s; transition-delay: .3s; } [data-aos][data-aos][data-aos-duration="350"], body[data-aos-duration="350"] [data-aos] { -webkit-transition-duration: .35s; transition-duration: .35s; } [data-aos][data-aos][data-aos-delay="350"], body[data-aos-delay="350"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="350"].aos-animate, body[data-aos-delay="350"] [data-aos].aos-animate { -webkit-transition-delay: .35s; transition-delay: .35s; } [data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] { -webkit-transition-duration: .4s; transition-duration: .4s; } [data-aos][data-aos][data-aos-delay="400"], body[data-aos-delay="400"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="400"].aos-animate, body[data-aos-delay="400"] [data-aos].aos-animate { -webkit-transition-delay: .4s; transition-delay: .4s; } [data-aos][data-aos][data-aos-duration="450"], body[data-aos-duration="450"] [data-aos] { -webkit-transition-duration: .45s; transition-duration: .45s; } [data-aos][data-aos][data-aos-delay="450"], body[data-aos-delay="450"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="450"].aos-animate, body[data-aos-delay="450"] [data-aos].aos-animate { -webkit-transition-delay: .45s; transition-delay: .45s; } [data-aos][data-aos][data-aos-duration="500"], body[data-aos-duration="500"] [data-aos] { -webkit-transition-duration: .5s; transition-duration: .5s; } [data-aos][data-aos][data-aos-delay="500"], body[data-aos-delay="500"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="500"].aos-animate, body[data-aos-delay="500"] [data-aos].aos-animate { -webkit-transition-delay: .5s; transition-delay: .5s; } [data-aos][data-aos][data-aos-duration="550"], body[data-aos-duration="550"] [data-aos] { -webkit-transition-duration: .55s; transition-duration: .55s; } [data-aos][data-aos][data-aos-delay="550"], body[data-aos-delay="550"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="550"].aos-animate, body[data-aos-delay="550"] [data-aos].aos-animate { -webkit-transition-delay: .55s; transition-delay: .55s; } [data-aos][data-aos][data-aos-duration="600"], body[data-aos-duration="600"] [data-aos] { -webkit-transition-duration: .6s; transition-duration: .6s; } [data-aos][data-aos][data-aos-delay="600"], body[data-aos-delay="600"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="600"].aos-animate, body[data-aos-delay="600"] [data-aos].aos-animate { -webkit-transition-delay: .6s; transition-delay: .6s; } [data-aos][data-aos][data-aos-duration="650"], body[data-aos-duration="650"] [data-aos] { -webkit-transition-duration: .65s; transition-duration: .65s; } [data-aos][data-aos][data-aos-delay="650"], body[data-aos-delay="650"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="650"].aos-animate, body[data-aos-delay="650"] [data-aos].aos-animate { -webkit-transition-delay: .65s; transition-delay: .65s; } [data-aos][data-aos][data-aos-duration="700"], body[data-aos-duration="700"] [data-aos] { -webkit-transition-duration: .7s; transition-duration: .7s; } [data-aos][data-aos][data-aos-delay="700"], body[data-aos-delay="700"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="700"].aos-animate, body[data-aos-delay="700"] [data-aos].aos-animate { -webkit-transition-delay: .7s; transition-delay: .7s; } [data-aos][data-aos][data-aos-duration="750"], body[data-aos-duration="750"] [data-aos] { -webkit-transition-duration: .75s; transition-duration: .75s; } [data-aos][data-aos][data-aos-delay="750"], body[data-aos-delay="750"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="750"].aos-animate, body[data-aos-delay="750"] [data-aos].aos-animate { -webkit-transition-delay: .75s; transition-delay: .75s; } [data-aos][data-aos][data-aos-duration="800"], body[data-aos-duration="800"] [data-aos] { -webkit-transition-duration: .8s; transition-duration: .8s; } [data-aos][data-aos][data-aos-delay="800"], body[data-aos-delay="800"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="800"].aos-animate, body[data-aos-delay="800"] [data-aos].aos-animate { -webkit-transition-delay: .8s; transition-delay: .8s; } [data-aos][data-aos][data-aos-duration="850"], body[data-aos-duration="850"] [data-aos] { -webkit-transition-duration: .85s; transition-duration: .85s; } [data-aos][data-aos][data-aos-delay="850"], body[data-aos-delay="850"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="850"].aos-animate, body[data-aos-delay="850"] [data-aos].aos-animate { -webkit-transition-delay: .85s; transition-delay: .85s; } [data-aos][data-aos][data-aos-duration="900"], body[data-aos-duration="900"] [data-aos] { -webkit-transition-duration: .9s; transition-duration: .9s; } [data-aos][data-aos][data-aos-delay="900"], body[data-aos-delay="900"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="900"].aos-animate, body[data-aos-delay="900"] [data-aos].aos-animate { -webkit-transition-delay: .9s; transition-delay: .9s; } [data-aos][data-aos][data-aos-duration="950"], body[data-aos-duration="950"] [data-aos] { -webkit-transition-duration: .95s; transition-duration: .95s; } [data-aos][data-aos][data-aos-delay="950"], body[data-aos-delay="950"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="950"].aos-animate, body[data-aos-delay="950"] [data-aos].aos-animate { -webkit-transition-delay: .95s; transition-delay: .95s; } [data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] { -webkit-transition-duration: 1s; transition-duration: 1s; } [data-aos][data-aos][data-aos-delay="1000"], body[data-aos-delay="1000"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1000"].aos-animate, body[data-aos-delay="1000"] [data-aos].aos-animate { -webkit-transition-delay: 1s; transition-delay: 1s; } [data-aos][data-aos][data-aos-duration="1050"], body[data-aos-duration="1050"] [data-aos] { -webkit-transition-duration: 1.05s; transition-duration: 1.05s; } [data-aos][data-aos][data-aos-delay="1050"], body[data-aos-delay="1050"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1050"].aos-animate, body[data-aos-delay="1050"] [data-aos].aos-animate { -webkit-transition-delay: 1.05s; transition-delay: 1.05s; } [data-aos][data-aos][data-aos-duration="1100"], body[data-aos-duration="1100"] [data-aos] { -webkit-transition-duration: 1.1s; transition-duration: 1.1s; } [data-aos][data-aos][data-aos-delay="1100"], body[data-aos-delay="1100"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1100"].aos-animate, body[data-aos-delay="1100"] [data-aos].aos-animate { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } [data-aos][data-aos][data-aos-duration="1150"], body[data-aos-duration="1150"] [data-aos] { -webkit-transition-duration: 1.15s; transition-duration: 1.15s; } [data-aos][data-aos][data-aos-delay="1150"], body[data-aos-delay="1150"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1150"].aos-animate, body[data-aos-delay="1150"] [data-aos].aos-animate { -webkit-transition-delay: 1.15s; transition-delay: 1.15s; } [data-aos][data-aos][data-aos-duration="1200"], body[data-aos-duration="1200"] [data-aos] { -webkit-transition-duration: 1.2s; transition-duration: 1.2s; } [data-aos][data-aos][data-aos-delay="1200"], body[data-aos-delay="1200"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1200"].aos-animate, body[data-aos-delay="1200"] [data-aos].aos-animate { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } [data-aos][data-aos][data-aos-duration="1250"], body[data-aos-duration="1250"] [data-aos] { -webkit-transition-duration: 1.25s; transition-duration: 1.25s; } [data-aos][data-aos][data-aos-delay="1250"], body[data-aos-delay="1250"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1250"].aos-animate, body[data-aos-delay="1250"] [data-aos].aos-animate { -webkit-transition-delay: 1.25s; transition-delay: 1.25s; } [data-aos][data-aos][data-aos-duration="1300"], body[data-aos-duration="1300"] [data-aos] { -webkit-transition-duration: 1.3s; transition-duration: 1.3s; } [data-aos][data-aos][data-aos-delay="1300"], body[data-aos-delay="1300"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1300"].aos-animate, body[data-aos-delay="1300"] [data-aos].aos-animate { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; } [data-aos][data-aos][data-aos-duration="1350"], body[data-aos-duration="1350"] [data-aos] { -webkit-transition-duration: 1.35s; transition-duration: 1.35s; } [data-aos][data-aos][data-aos-delay="1350"], body[data-aos-delay="1350"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1350"].aos-animate, body[data-aos-delay="1350"] [data-aos].aos-animate { -webkit-transition-delay: 1.35s; transition-delay: 1.35s; } [data-aos][data-aos][data-aos-duration="1400"], body[data-aos-duration="1400"] [data-aos] { -webkit-transition-duration: 1.4s; transition-duration: 1.4s; } [data-aos][data-aos][data-aos-delay="1400"], body[data-aos-delay="1400"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1400"].aos-animate, body[data-aos-delay="1400"] [data-aos].aos-animate { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; } [data-aos][data-aos][data-aos-duration="1450"], body[data-aos-duration="1450"] [data-aos] { -webkit-transition-duration: 1.45s; transition-duration: 1.45s; } [data-aos][data-aos][data-aos-delay="1450"], body[data-aos-delay="1450"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1450"].aos-animate, body[data-aos-delay="1450"] [data-aos].aos-animate { -webkit-transition-delay: 1.45s; transition-delay: 1.45s; } [data-aos][data-aos][data-aos-duration="1500"], body[data-aos-duration="1500"] [data-aos] { -webkit-transition-duration: 1.5s; transition-duration: 1.5s; } [data-aos][data-aos][data-aos-delay="1500"], body[data-aos-delay="1500"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1500"].aos-animate, body[data-aos-delay="1500"] [data-aos].aos-animate { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; } [data-aos][data-aos][data-aos-duration="1550"], body[data-aos-duration="1550"] [data-aos] { -webkit-transition-duration: 1.55s; transition-duration: 1.55s; } [data-aos][data-aos][data-aos-delay="1550"], body[data-aos-delay="1550"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1550"].aos-animate, body[data-aos-delay="1550"] [data-aos].aos-animate { -webkit-transition-delay: 1.55s; transition-delay: 1.55s; } [data-aos][data-aos][data-aos-duration="1600"], body[data-aos-duration="1600"] [data-aos] { -webkit-transition-duration: 1.6s; transition-duration: 1.6s; } [data-aos][data-aos][data-aos-delay="1600"], body[data-aos-delay="1600"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1600"].aos-animate, body[data-aos-delay="1600"] [data-aos].aos-animate { -webkit-transition-delay: 1.6s; transition-delay: 1.6s; } [data-aos][data-aos][data-aos-duration="1650"], body[data-aos-duration="1650"] [data-aos] { -webkit-transition-duration: 1.65s; transition-duration: 1.65s; } [data-aos][data-aos][data-aos-delay="1650"], body[data-aos-delay="1650"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1650"].aos-animate, body[data-aos-delay="1650"] [data-aos].aos-animate { -webkit-transition-delay: 1.65s; transition-delay: 1.65s; } [data-aos][data-aos][data-aos-duration="1700"], body[data-aos-duration="1700"] [data-aos] { -webkit-transition-duration: 1.7s; transition-duration: 1.7s; } [data-aos][data-aos][data-aos-delay="1700"], body[data-aos-delay="1700"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1700"].aos-animate, body[data-aos-delay="1700"] [data-aos].aos-animate { -webkit-transition-delay: 1.7s; transition-delay: 1.7s; } [data-aos][data-aos][data-aos-duration="1750"], body[data-aos-duration="1750"] [data-aos] { -webkit-transition-duration: 1.75s; transition-duration: 1.75s; } [data-aos][data-aos][data-aos-delay="1750"], body[data-aos-delay="1750"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1750"].aos-animate, body[data-aos-delay="1750"] [data-aos].aos-animate { -webkit-transition-delay: 1.75s; transition-delay: 1.75s; } [data-aos][data-aos][data-aos-duration="1800"], body[data-aos-duration="1800"] [data-aos] { -webkit-transition-duration: 1.8s; transition-duration: 1.8s; } [data-aos][data-aos][data-aos-delay="1800"], body[data-aos-delay="1800"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1800"].aos-animate, body[data-aos-delay="1800"] [data-aos].aos-animate { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; } [data-aos][data-aos][data-aos-duration="1850"], body[data-aos-duration="1850"] [data-aos] { -webkit-transition-duration: 1.85s; transition-duration: 1.85s; } [data-aos][data-aos][data-aos-delay="1850"], body[data-aos-delay="1850"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1850"].aos-animate, body[data-aos-delay="1850"] [data-aos].aos-animate { -webkit-transition-delay: 1.85s; transition-delay: 1.85s; } [data-aos][data-aos][data-aos-duration="1900"], body[data-aos-duration="1900"] [data-aos] { -webkit-transition-duration: 1.9s; transition-duration: 1.9s; } [data-aos][data-aos][data-aos-delay="1900"], body[data-aos-delay="1900"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1900"].aos-animate, body[data-aos-delay="1900"] [data-aos].aos-animate { -webkit-transition-delay: 1.9s; transition-delay: 1.9s; } [data-aos][data-aos][data-aos-duration="1950"], body[data-aos-duration="1950"] [data-aos] { -webkit-transition-duration: 1.95s; transition-duration: 1.95s; } [data-aos][data-aos][data-aos-delay="1950"], body[data-aos-delay="1950"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="1950"].aos-animate, body[data-aos-delay="1950"] [data-aos].aos-animate { -webkit-transition-delay: 1.95s; transition-delay: 1.95s; } [data-aos][data-aos][data-aos-duration="2000"], body[data-aos-duration="2000"] [data-aos] { -webkit-transition-duration: 2s; transition-duration: 2s; } [data-aos][data-aos][data-aos-delay="2000"], body[data-aos-delay="2000"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2000"].aos-animate, body[data-aos-delay="2000"] [data-aos].aos-animate { -webkit-transition-delay: 2s; transition-delay: 2s; } [data-aos][data-aos][data-aos-duration="2050"], body[data-aos-duration="2050"] [data-aos] { -webkit-transition-duration: 2.05s; transition-duration: 2.05s; } [data-aos][data-aos][data-aos-delay="2050"], body[data-aos-delay="2050"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2050"].aos-animate, body[data-aos-delay="2050"] [data-aos].aos-animate { -webkit-transition-delay: 2.05s; transition-delay: 2.05s; } [data-aos][data-aos][data-aos-duration="2100"], body[data-aos-duration="2100"] [data-aos] { -webkit-transition-duration: 2.1s; transition-duration: 2.1s; } [data-aos][data-aos][data-aos-delay="2100"], body[data-aos-delay="2100"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2100"].aos-animate, body[data-aos-delay="2100"] [data-aos].aos-animate { -webkit-transition-delay: 2.1s; transition-delay: 2.1s; } [data-aos][data-aos][data-aos-duration="2150"], body[data-aos-duration="2150"] [data-aos] { -webkit-transition-duration: 2.15s; transition-duration: 2.15s; } [data-aos][data-aos][data-aos-delay="2150"], body[data-aos-delay="2150"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2150"].aos-animate, body[data-aos-delay="2150"] [data-aos].aos-animate { -webkit-transition-delay: 2.15s; transition-delay: 2.15s; } [data-aos][data-aos][data-aos-duration="2200"], body[data-aos-duration="2200"] [data-aos] { -webkit-transition-duration: 2.2s; transition-duration: 2.2s; } [data-aos][data-aos][data-aos-delay="2200"], body[data-aos-delay="2200"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2200"].aos-animate, body[data-aos-delay="2200"] [data-aos].aos-animate { -webkit-transition-delay: 2.2s; transition-delay: 2.2s; } [data-aos][data-aos][data-aos-duration="2250"], body[data-aos-duration="2250"] [data-aos] { -webkit-transition-duration: 2.25s; transition-duration: 2.25s; } [data-aos][data-aos][data-aos-delay="2250"], body[data-aos-delay="2250"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2250"].aos-animate, body[data-aos-delay="2250"] [data-aos].aos-animate { -webkit-transition-delay: 2.25s; transition-delay: 2.25s; } [data-aos][data-aos][data-aos-duration="2300"], body[data-aos-duration="2300"] [data-aos] { -webkit-transition-duration: 2.3s; transition-duration: 2.3s; } [data-aos][data-aos][data-aos-delay="2300"], body[data-aos-delay="2300"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2300"].aos-animate, body[data-aos-delay="2300"] [data-aos].aos-animate { -webkit-transition-delay: 2.3s; transition-delay: 2.3s; } [data-aos][data-aos][data-aos-duration="2350"], body[data-aos-duration="2350"] [data-aos] { -webkit-transition-duration: 2.35s; transition-duration: 2.35s; } [data-aos][data-aos][data-aos-delay="2350"], body[data-aos-delay="2350"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2350"].aos-animate, body[data-aos-delay="2350"] [data-aos].aos-animate { -webkit-transition-delay: 2.35s; transition-delay: 2.35s; } [data-aos][data-aos][data-aos-duration="2400"], body[data-aos-duration="2400"] [data-aos] { -webkit-transition-duration: 2.4s; transition-duration: 2.4s; } [data-aos][data-aos][data-aos-delay="2400"], body[data-aos-delay="2400"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2400"].aos-animate, body[data-aos-delay="2400"] [data-aos].aos-animate { -webkit-transition-delay: 2.4s; transition-delay: 2.4s; } [data-aos][data-aos][data-aos-duration="2450"], body[data-aos-duration="2450"] [data-aos] { -webkit-transition-duration: 2.45s; transition-duration: 2.45s; } [data-aos][data-aos][data-aos-delay="2450"], body[data-aos-delay="2450"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2450"].aos-animate, body[data-aos-delay="2450"] [data-aos].aos-animate { -webkit-transition-delay: 2.45s; transition-delay: 2.45s; } [data-aos][data-aos][data-aos-duration="2500"], body[data-aos-duration="2500"] [data-aos] { -webkit-transition-duration: 2.5s; transition-duration: 2.5s; } [data-aos][data-aos][data-aos-delay="2500"], body[data-aos-delay="2500"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2500"].aos-animate, body[data-aos-delay="2500"] [data-aos].aos-animate { -webkit-transition-delay: 2.5s; transition-delay: 2.5s; } [data-aos][data-aos][data-aos-duration="2550"], body[data-aos-duration="2550"] [data-aos] { -webkit-transition-duration: 2.55s; transition-duration: 2.55s; } [data-aos][data-aos][data-aos-delay="2550"], body[data-aos-delay="2550"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2550"].aos-animate, body[data-aos-delay="2550"] [data-aos].aos-animate { -webkit-transition-delay: 2.55s; transition-delay: 2.55s; } [data-aos][data-aos][data-aos-duration="2600"], body[data-aos-duration="2600"] [data-aos] { -webkit-transition-duration: 2.6s; transition-duration: 2.6s; } [data-aos][data-aos][data-aos-delay="2600"], body[data-aos-delay="2600"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2600"].aos-animate, body[data-aos-delay="2600"] [data-aos].aos-animate { -webkit-transition-delay: 2.6s; transition-delay: 2.6s; } [data-aos][data-aos][data-aos-duration="2650"], body[data-aos-duration="2650"] [data-aos] { -webkit-transition-duration: 2.65s; transition-duration: 2.65s; } [data-aos][data-aos][data-aos-delay="2650"], body[data-aos-delay="2650"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2650"].aos-animate, body[data-aos-delay="2650"] [data-aos].aos-animate { -webkit-transition-delay: 2.65s; transition-delay: 2.65s; } [data-aos][data-aos][data-aos-duration="2700"], body[data-aos-duration="2700"] [data-aos] { -webkit-transition-duration: 2.7s; transition-duration: 2.7s; } [data-aos][data-aos][data-aos-delay="2700"], body[data-aos-delay="2700"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2700"].aos-animate, body[data-aos-delay="2700"] [data-aos].aos-animate { -webkit-transition-delay: 2.7s; transition-delay: 2.7s; } [data-aos][data-aos][data-aos-duration="2750"], body[data-aos-duration="2750"] [data-aos] { -webkit-transition-duration: 2.75s; transition-duration: 2.75s; } [data-aos][data-aos][data-aos-delay="2750"], body[data-aos-delay="2750"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2750"].aos-animate, body[data-aos-delay="2750"] [data-aos].aos-animate { -webkit-transition-delay: 2.75s; transition-delay: 2.75s; } [data-aos][data-aos][data-aos-duration="2800"], body[data-aos-duration="2800"] [data-aos] { -webkit-transition-duration: 2.8s; transition-duration: 2.8s; } [data-aos][data-aos][data-aos-delay="2800"], body[data-aos-delay="2800"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2800"].aos-animate, body[data-aos-delay="2800"] [data-aos].aos-animate { -webkit-transition-delay: 2.8s; transition-delay: 2.8s; } [data-aos][data-aos][data-aos-duration="2850"], body[data-aos-duration="2850"] [data-aos] { -webkit-transition-duration: 2.85s; transition-duration: 2.85s; } [data-aos][data-aos][data-aos-delay="2850"], body[data-aos-delay="2850"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2850"].aos-animate, body[data-aos-delay="2850"] [data-aos].aos-animate { -webkit-transition-delay: 2.85s; transition-delay: 2.85s; } [data-aos][data-aos][data-aos-duration="2900"], body[data-aos-duration="2900"] [data-aos] { -webkit-transition-duration: 2.9s; transition-duration: 2.9s; } [data-aos][data-aos][data-aos-delay="2900"], body[data-aos-delay="2900"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2900"].aos-animate, body[data-aos-delay="2900"] [data-aos].aos-animate { -webkit-transition-delay: 2.9s; transition-delay: 2.9s; } [data-aos][data-aos][data-aos-duration="2950"], body[data-aos-duration="2950"] [data-aos] { -webkit-transition-duration: 2.95s; transition-duration: 2.95s; } [data-aos][data-aos][data-aos-delay="2950"], body[data-aos-delay="2950"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="2950"].aos-animate, body[data-aos-delay="2950"] [data-aos].aos-animate { -webkit-transition-delay: 2.95s; transition-delay: 2.95s; } [data-aos][data-aos][data-aos-duration="3000"], body[data-aos-duration="3000"] [data-aos] { -webkit-transition-duration: 3s; transition-duration: 3s; } [data-aos][data-aos][data-aos-delay="3000"], body[data-aos-delay="3000"] [data-aos] { -webkit-transition-delay: 0; transition-delay: 0; } [data-aos][data-aos][data-aos-delay="3000"].aos-animate, body[data-aos-delay="3000"] [data-aos].aos-animate { -webkit-transition-delay: 3s; transition-delay: 3s; } [data-aos][data-aos][data-aos-easing=linear], body[data-aos-easing=linear] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); } [data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] { -webkit-transition-timing-function: ease; transition-timing-function: ease; } [data-aos][data-aos][data-aos-easing=ease-in], body[data-aos-easing=ease-in] [data-aos] { -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } [data-aos][data-aos][data-aos-easing=ease-out], body[data-aos-easing=ease-out] [data-aos] { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } [data-aos][data-aos][data-aos-easing=ease-in-out], body[data-aos-easing=ease-in-out] [data-aos] { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } [data-aos][data-aos][data-aos-easing=ease-in-back], body[data-aos-easing=ease-in-back] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); } [data-aos][data-aos][data-aos-easing=ease-out-back], body[data-aos-easing=ease-out-back] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } [data-aos][data-aos][data-aos-easing=ease-in-out-back], body[data-aos-easing=ease-in-out-back] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } [data-aos][data-aos][data-aos-easing=ease-in-sine], body[data-aos-easing=ease-in-sine] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } [data-aos][data-aos][data-aos-easing=ease-out-sine], body[data-aos-easing=ease-out-sine] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } [data-aos][data-aos][data-aos-easing=ease-in-out-sine], body[data-aos-easing=ease-in-out-sine] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); } [data-aos][data-aos][data-aos-easing=ease-in-quad], body[data-aos-easing=ease-in-quad] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } [data-aos][data-aos][data-aos-easing=ease-out-quad], body[data-aos-easing=ease-out-quad] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-aos][data-aos][data-aos-easing=ease-in-out-quad], body[data-aos-easing=ease-in-out-quad] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } [data-aos][data-aos][data-aos-easing=ease-in-cubic], body[data-aos-easing=ease-in-cubic] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } [data-aos][data-aos][data-aos-easing=ease-out-cubic], body[data-aos-easing=ease-out-cubic] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-aos][data-aos][data-aos-easing=ease-in-out-cubic], body[data-aos-easing=ease-in-out-cubic] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } [data-aos][data-aos][data-aos-easing=ease-in-quart], body[data-aos-easing=ease-in-quart] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } [data-aos][data-aos][data-aos-easing=ease-out-quart], body[data-aos-easing=ease-out-quart] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-aos][data-aos][data-aos-easing=ease-in-out-quart], body[data-aos-easing=ease-in-out-quart] [data-aos] { -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } [data-aos^=fade][data-aos^=fade] { opacity: 0; -webkit-transition-property: opacity,-webkit-transform; transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; } [data-aos^=fade][data-aos^=fade].aos-animate { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } [data-aos=fade-up] { -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); } [data-aos=fade-down] { -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); } [data-aos=fade-right] { -webkit-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0); } [data-aos=fade-left] { -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } [data-aos=fade-up-right] { -webkit-transform: translate3d(-100px, 100px, 0); transform: translate3d(-100px, 100px, 0); } [data-aos=fade-up-left] { -webkit-transform: translate3d(100px, 100px, 0); transform: translate3d(100px, 100px, 0); } [data-aos=fade-down-right] { -webkit-transform: translate3d(-100px, -100px, 0); transform: translate3d(-100px, -100px, 0); } [data-aos=fade-down-left] { -webkit-transform: translate3d(100px, -100px, 0); transform: translate3d(100px, -100px, 0); } [data-aos^=zoom][data-aos^=zoom] { opacity: 0; -webkit-transition-property: opacity,-webkit-transform; transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; } [data-aos^=zoom][data-aos^=zoom].aos-animate { opacity: 1; -webkit-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1); } [data-aos=zoom-in] { -webkit-transform: scale(0.6); transform: scale(0.6); } [data-aos=zoom-in-up] { -webkit-transform: translate3d(0, 100px, 0) scale(0.6); transform: translate3d(0, 100px, 0) scale(0.6); } [data-aos=zoom-in-down] { -webkit-transform: translate3d(0, -100px, 0) scale(0.6); transform: translate3d(0, -100px, 0) scale(0.6); } [data-aos=zoom-in-right] { -webkit-transform: translate3d(-100px, 0, 0) scale(0.6); transform: translate3d(-100px, 0, 0) scale(0.6); } [data-aos=zoom-in-left] { -webkit-transform: translate3d(100px, 0, 0) scale(0.6); transform: translate3d(100px, 0, 0) scale(0.6); } [data-aos=zoom-out] { -webkit-transform: scale(1.2); transform: scale(1.2); } [data-aos=zoom-out-up] { -webkit-transform: translate3d(0, 100px, 0) scale(1.2); transform: translate3d(0, 100px, 0) scale(1.2); } [data-aos=zoom-out-down] { -webkit-transform: translate3d(0, -100px, 0) scale(1.2); transform: translate3d(0, -100px, 0) scale(1.2); } [data-aos=zoom-out-right] { -webkit-transform: translate3d(-100px, 0, 0) scale(1.2); transform: translate3d(-100px, 0, 0) scale(1.2); } [data-aos=zoom-out-left] { -webkit-transform: translate3d(100px, 0, 0) scale(1.2); transform: translate3d(100px, 0, 0) scale(1.2); } [data-aos^=slide][data-aos^=slide] { -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } [data-aos^=slide][data-aos^=slide].aos-animate { -webkit-transform: translateZ(0); transform: translateZ(0); } [data-aos=slide-up] { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } [data-aos=slide-down] { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } [data-aos=slide-right] { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } [data-aos=slide-left] { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } [data-aos^=flip][data-aos^=flip] { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } [data-aos=flip-left] { -webkit-transform: perspective(2500px) rotateY(-100deg); transform: perspective(2500px) rotateY(-100deg); } [data-aos=flip-left].aos-animate { -webkit-transform: perspective(2500px) rotateY(0); transform: perspective(2500px) rotateY(0); } [data-aos=flip-right] { -webkit-transform: perspective(2500px) rotateY(100deg); transform: perspective(2500px) rotateY(100deg); } [data-aos=flip-right].aos-animate { -webkit-transform: perspective(2500px) rotateY(0); transform: perspective(2500px) rotateY(0); } [data-aos=flip-up] { -webkit-transform: perspective(2500px) rotateX(-100deg); transform: perspective(2500px) rotateX(-100deg); } [data-aos=flip-up].aos-animate { -webkit-transform: perspective(2500px) rotateX(0); transform: perspective(2500px) rotateX(0); } [data-aos=flip-down] { -webkit-transform: perspective(2500px) rotateX(100deg); transform: perspective(2500px) rotateX(100deg); } [data-aos=flip-down].aos-animate { -webkit-transform: perspective(2500px) rotateX(0); transform: perspective(2500px) rotateX(0); } .guidelines_wrap .heading { font-size: 1.5rem; color: #2d2556; margin-bottom: 30px; } .guidelines_wrap h1, .guidelines_wrap h2, .guidelines_wrap .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .guidelines_wrap .home-package-price, .guidelines_wrap h3, .guidelines_wrap h4, .guidelines_wrap h5, .guidelines_wrap h6 { margin-bottom: 15px; color: #6b6783; } .guidelines_wrap h1 span, .guidelines_wrap h2 span, .guidelines_wrap .banner_cnt .banner_caption .home-package-price span, .banner_cnt .banner_caption .guidelines_wrap .home-package-price span, .guidelines_wrap h3 span, .guidelines_wrap h4 span, .guidelines_wrap h5 span, .guidelines_wrap h6 span { font-size: 1.5rem; color: #000; } .width.width_50 { width: 50%; } .width.width_100 { width: 100%; } .tb_container { width: 90%; margin: 0 auto; } /* header css start */ header { padding: 0 0 0 3%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: fixed; width: 100%; left: 0; top: 0; z-index: 111; background: #fff; -webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.1); } @media only screen and (max-width: 1024px) { header { padding-left: 20px; } } header .togglebutton { display: none; } @media only screen and (max-width: 1024px) { header .togglebutton { display: block; -ms-flex-item-align: center; align-self: center; margin-right: 25px; } header .togglebutton img { width: 30px; } } header .left_nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 1024px) { header .left_nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } header .logo { -ms-flex-item-align: center; align-self: center; } @media only screen and (max-width: 1024px) { header .logo { width: 100px; } } header .right_nav { display: -webkit-box; display: -ms-flexbox; display: flex; } header .right_nav .search_post { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; } header .right_nav nav { -ms-flex-item-align: center; align-self: center; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } header .right_nav nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top:10px; } @media only screen and (max-width: 1024px) { header .right_nav nav ul { display: block; } } header .right_nav nav ul li { padding: 0 15px; } @media screen and (max-width: 1280px) { header .right_nav nav ul li { padding: 0 10px; } } @media only screen and (max-width: 1024px) { header .right_nav nav ul li { display: block; } } header .right_nav nav ul li a { color: #2d2556; font: 1rem "ceragr regular", sans-serif; padding: 10px 0px; } @media only screen and (max-width: 1024px) { header .right_nav nav ul li a { display: block; padding: 15px 0px; color: #fff; border-bottom: 1px solid #edebff; } } header .right_nav nav ul li a:after { height: 2px; width: 0; content: ""; display: block; margin-top: 3px; background: #f48b0d; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } @media only screen and (max-width: 1024px) { header .right_nav nav ul li a:after { display: none; } } header .right_nav nav ul li a:hover, header .right_nav nav ul li a.active { color: #8073b1; } @media only screen and (max-width: 1024px) { header .right_nav nav ul li a:hover, header .right_nav nav ul li a.active { color: #2d2556; } } header .right_nav nav ul li a:hover:after, header .right_nav nav ul li a.active:after { width: 100%; } @media only screen and (max-width: 1024px) { header .right_nav nav { position: fixed; height: 100%; width: 80%; background: #8073b1; display: block; left: -100%; top: 67px; z-index: 111; padding: 20px 0; max-width: 360px; } } header .right_nav.open nav { left: 0; } header .right_nav.open .overlay { display: block; } header .right_nav .last_nav { background: #2d2556; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 251px; text-align: center; position: relative; -ms-flex-pack: distribute; justify-content: space-around; } @media only screen and (max-width: 1024px) { header .right_nav .last_nav { background: #fff; width: auto; } } header .right_nav .last_nav li { display: inline-block; } @media only screen and (max-width: 1024px) { header .right_nav .last_nav li { padding: 0; } } header .right_nav .last_nav li a { color: #fff; padding: 20px 10px; font: 1rem "ceragr medium", sans-serif; } header .right_nav .last_nav li a.desktop_link { display: block; } @media only screen and (max-width: 1024px) { header .right_nav .last_nav li a.desktop_link { display: none; } } header .right_nav .last_nav li a.mobile_link { display: none; color: #2d2556; font-size: 1.5rem; line-height: 1; vertical-align: middle; } @media only screen and (max-width: 1024px) { header .right_nav .last_nav li a.mobile_link { display: inline-block; padding: 20px 10px 20px; } } @media only screen and (max-width: 1024px) { header .right_nav .last_nav li a span { font-size: 1.5rem; } } header .right_nav .last_nav li:first-child a { border-right: 1px solid #fff; } header .right_nav .send_query_form { position: absolute; width: 390px; background: #fff; padding: 20px; right: 0; top: 64px; z-index: 999; display: none; } @media only screen and (max-width: 1024px) { header .right_nav .send_query_form { top: 67px; } } @media only screen and (max-width: 480px) { header .right_nav .send_query_form { position: fixed; width: 100%; height: 100%; } } header .right_nav .send_query_form .baseInput { margin: 0; } header .right_nav .send_query_form .baseBtn { width: 100%; } header .right_nav .send_query_form .close { float: right; color: #000; padding: 0px 10px; } header .right_nav .search_cnt { -ms-flex-item-align: center; align-self: center; padding: 0 10px; } header .right_nav .search_cnt i { font-size: 1.2rem; color: #2d2556; } header .right_nav .search_box { position: absolute; background: #fff; left: 0; top: 63px; width: 100%; display: none; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px 3% 10px 7%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 99; -webkit-box-shadow: inset 0px 4px 10px rgba(0, 0, 0, 0.1); box-shadow: inset 0px 4px 10px rgba(0, 0, 0, 0.1); } header .right_nav .search_box:after { content: ' '; width: 100%; position: absolute; left: 0; height: 1px; background: #fff; bottom: 0; -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); } @media only screen and (max-width: 1024px) { header .right_nav .search_box { top: 67px; } } @media only screen and (max-width: 480px) { header .right_nav .search_box { padding: 10px 3% 10px 11%; } } header .right_nav .search_box.show { display: -webkit-box; display: -ms-flexbox; display: flex; } header .right_nav .search_box .search_input { width: 70%; position: relative; } @media only screen and (max-width: 768px) { header .right_nav .search_box .search_input { width: 60%; } } @media only screen and (max-width: 360px) { header .right_nav .search_box .search_input { width: 53%; } } header .right_nav .search_box .search_input:before { content: '\E909'; font-family: 'tibro'; font-size: 1.2rem; position: absolute; left: -45px; top: 4px; } @media screen and (max-width: 640px) { header .right_nav .search_box .search_input:before { left: -31px; } } header .right_nav .search_box .search_button .baseBtn { border-radius: 25px; -webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.1); } header .right_nav .search_box .search_button i { font-size: 0.875rem; color: #000; } header .right_nav .search_box input[type="text"] { border: none; background: transparent; font: 0.875rem "ceragr medium", sans-serif; padding: 7px 0; width: 100%; outline: none; } header .right_nav .search_box .close_btn { color: #2d2556; display: inline-block; margin-left: 10px; font-family: 'ceragr bold', sans-serif; } /* header css end */ .subscribeNowBox { position: relative; z-index: 9; } .subscribeNowBox .subscribeNow { border-radius: 5px; padding: 35px 65px; background: #fff; text-align: center; margin-bottom: -88px; } @media screen and (max-width: 768px) { .subscribeNowBox .subscribeNow { width: 95%; padding: 25px 20px 20px 20px; } } .subscribeNowBox .subscribeNow h3 { font-family: 'ceragr medium'; color: #000; margin-bottom: 30px; } @media screen and (max-width: 768px) { .subscribeNowBox .subscribeNow h3 { font-size: 1.125rem; margin-bottom: 10px; } } .subscribeNowBox .subscribeNow .subscribeInute { position: relative; } .subscribeNowBox .subscribeNow .subscribeInute:before { content: ' '; background: url("/images/tibro-icon.png"); width: 66px; height: 41px; position: absolute; right: -38px; top: -50px; } @media screen and (max-width: 768px) { .subscribeNowBox .subscribeNow .subscribeInute:before { content: none; } } .subscribeNowBox .subscribeNow .subscribeInute .baseBtn { margin-left: -2px; z-index: 9; min-width: 178px; padding: 14px 25px; } @media screen and (max-width: 768px) { .subscribeNowBox .subscribeNow .subscribeInute .baseBtn { min-width: 178px; } } @media screen and (max-width: 480px) { .subscribeNowBox .subscribeNow .subscribeInute .baseBtn { width: 100%; } } .subscribeNowBox .subscribeNow .subscribeInute .subscribeme { width: 100%; font-size: 0.875rem; font-family: 'ceragr medium'; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 480px) { .subscribeNowBox .subscribeNow .subscribeInute .subscribeme { display: block; } } .subscribeNowBox .subscribeNow .subscribeInute .subscribeme .baseInput.subscribeIn { padding: 0 20px; width: 100%; background: #f3f3f3; border-left: 1px solid #cecece; border-top: 1px solid #cecece; border-bottom: 1px solid #cecece; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } @media screen and (max-width: 480px) { .subscribeNowBox .subscribeNow .subscribeInute .subscribeme .baseInput.subscribeIn { border: 1px solid #cecece; border-radius: 3px; margin-bottom: 15px; } } .subscribeNowBox .subscribeNow .subscribeInute .subscribeme .baseInput.subscribeIn .mdl-textfield__label { display: none; } .subscribeNowBox .subscribeNow .subscribeInute .subscribeme .baseInput.subscribeIn .mdl-textfield__input { border-bottom: 0; padding: 14px 0; font-size: 0.875rem; font-family: 'ceragr medium'; color: #000; } .subscribeNowBox .subscribeNow .subscribeInute .subscribeme .baseInput.subscribeIn ::-webkit-input-placeholder { color: #cecece; font-size: 0.875rem; font-family: 'ceragr medium'; } .subscribeNowBox .subscribeNow .subscribeInute .subscribeme .baseInput.subscribeIn ::-moz-placeholder { color: #cecece; font-size: 0.875rem; font-family: 'ceragr medium'; } .subscribeNowBox .subscribeNow .subscribeInute .subscribeme .baseInput.subscribeIn :-ms-input-placeholder { color: #cecece; font-size: 0.875rem; font-family: 'ceragr medium'; } .subscribeNowBox .subscribeNow .subscribeInute .subscribeme .baseInput.subscribeIn :-moz-placeholder { color: #cecece; font-size: 0.875rem; font-family: 'ceragr medium'; } footer { background: #2d2556; padding-top: 200px; position: relative; } @media screen and (max-width: 768px) { footer { padding-top: 160px; } } footer .footer_content { position: relative; } footer .footer_content:before { content: ' '; background: url("/images/tibro-icon.png"); width: 66px; height: 41px; position: absolute; left: 37px; top: -31px; } @media screen and (max-width: 1024px) { footer .footer_content:before { left: 7px; top: -34px; } } @media screen and (max-width: 768px) { footer .footer_content:before { left: 6px; top: -44px; } } footer .footerlinks { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; } @media screen and (max-width: 768px) { footer .footerlinks { margin-bottom: 0; } } @media screen and (max-width: 480px) { footer .footerlinks { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (max-width: 768px) { footer .footerlinks .footer_pages_link { width: 50%; margin-bottom: 30px; padding-left: 10%; } } @media screen and (max-width: 480px) { footer .footerlinks .footer_pages_link { width: 100%; padding-left: 30px; } } footer .footerlinks .footer_pages_link h5 { color: #fff; font-family: 'ceragr medium'; margin-bottom: 25px; } footer .footerlinks .footer_pages_link ul:last-child { margin-bottom: 0; } footer .footerlinks .footer_pages_link li { display: block; margin-bottom: 18px; } footer .footerlinks .footer_pages_link li a { font-size: 0.875rem; font-family: 'ceragr medium'; color: #f4850d; } footer .footerlinks .footer_pages_link li:last-child { margin-bottom: 0; } footer .footerlinks .footer_pages_link li.social_media { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 768px) { footer .footerlinks .footer_pages_link li.social_media { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } footer .footerlinks .footer_pages_link li.social_media .icon_list { width: 40px; padding-right: 15px; } @media screen and (max-width: 768px) { footer .footerlinks .footer_pages_link li.social_media .icon_list { padding-right: 20px; } } footer .footerlinks .footer_pages_link li.social_media .icon_list:first-child { width: 35px; } footer .footerlinks .footer_pages_link li.social_media .icon_list:last-child { padding-right: 0; } footer .footerlinks .footer_pages_link li.social_media .icon_list i { color: #fff; font-size: 1.5rem; } footer .footerlinks .footer_pages_link li.contactMe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } footer .footerlinks .footer_pages_link li.contactMe a { color: #fff; } footer .footerlinks .footer_pages_link li.contactMe i { color: #fff; font-size: 1.5rem; margin-right: 10px; } @media screen and (max-width: 320px) { footer .footerlinks .footer_pages_link li.contactMe i { font-size: 1rem; } } footer .footerlinks .footer_pages_link li.mailMe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } footer .footerlinks .footer_pages_link li.mailMe a { color: #fff; } footer .footerlinks .footer_pages_link li.mailMe i { color: #fff; font-size: 1.5rem; margin-right: 10px; } @media screen and (max-width: 320px) { footer .footerlinks .footer_pages_link li.mailMe i { font-size: 1rem; } } footer .footerCopyright { border-top: 1px solid #6b6783; text-align: center; padding: 40px 0; } footer .footerCopyright p { color: #faf9ff; margin-bottom: 0; } @media screen and (max-width: 360px) { footer .footerCopyright p { font-size: 0.875rem; } } @media screen and (max-width: 768px) { footer .footerCopyright:after { content: ' '; display: block; width: 100%; height: 85px; } } .getmdl-select { outline: none; } .getmdl-select .mdl-textfield__input { cursor: pointer; } .getmdl-select .selected { background-color: #ddd; } .getmdl-select .mdl-icon-toggle__label { float: right; margin-top: -30px; color: rgba(0, 0, 0, 0.4); -webkit-transform: rotate(0); transform: rotate(0); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .getmdl-select.is-focused .mdl-icon-toggle__label { color: #3f51b5; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .getmdl-select .mdl-menu__container { width: 100% !important; margin-top: 2px; } .getmdl-select .mdl-menu__container .mdl-menu { width: 100%; } .getmdl-select .mdl-menu__container .mdl-menu .mdl-menu__item { font-size: 16px; } .getmdl-select__fix-height .mdl-menu__container .mdl-menu { overflow-y: auto; max-height: 288px !important; } .getmdl-select__fix-height .mdl-menu.mdl-menu--top-left { bottom: auto; top: 0; } .banner_cnt { position: relative; } .banner_cnt .banner_wrap img { width: 100%; } .banner_cnt .slick-dots { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; bottom: 150px; width: 100%; } @media screen and (max-width: 640px) { .banner_cnt .slick-dots { bottom: 50px; } } @media screen and (max-width: 640px) { .banner_cnt .slick-dots { bottom: 40px; } } .banner_cnt .slick-dots li button { font-size: 0; border: 0; width: 10px; height: 10px; border-radius: 50%; background: #fff; outline: none; margin: 0 5px; } .banner_cnt .slick-dots li.slick-active button { background: #f4850d; } .banner_cnt .slick-list .slick-slide { outline: none; } .banner_cnt .slick-list .slick-slide img { width: 100%; } .banner_cnt .slick-prev { display: none !important; } .banner_cnt .desktop_banner { display: block; } @media only screen and (max-width: 640px) { .banner_cnt .desktop_banner { display: none; } } .banner_cnt .mobile_banner { display: none; } @media only screen and (max-width: 640px) { .banner_cnt .mobile_banner { display: block; } } .banner_cnt .banner_caption { position: absolute; left: 0; right: 0; bottom: 180px; width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 30px; } @media only screen and (max-width: 768px) { .banner_cnt .banner_caption { bottom: 50px; } } .banner_cnt .banner_caption h2, .banner_cnt .banner_caption .home-package-price { color: #fff; margin-bottom: 15px; } @media only screen and (max-width: 768px) { .banner_cnt .banner_caption h2, .banner_cnt .banner_caption .home-package-price { font-size: 1.5rem; margin-bottom: 10px; } } .banner_cnt .banner_caption .home-package-price { display: block; } .banner_cnt .banner_caption a { text-align: center; } .banner_cnt .banner_caption .tb_responsive_container { position: relative; padding-left: 20px; } @media screen and (max-width: 640px) { .banner_cnt .banner_caption .tb_responsive_container { padding: 0; } } .banner_cnt .banner_caption .tb_responsive_container:before { position: absolute; left: -15px; top: 0; height: 100%; width: 5px; background: #fff; content: ""; } .banner_cnt .next { position: absolute; right: 208px; top: 50%; display: none; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } @media only screen and (max-width: 768px) { .banner_cnt .next { height: 40px; width: 40px; right: 21px; } } .banner_cnt .banner_overlay { background: rgba(0, 0, 0, 0.7); position: absolute; width: 100%; height: 100%; opacity: 0.7; z-index: 99; left: 0; top: 0; transition: all 0.1s ease; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; } .banner_cnt .item { position: relative; } .banner_cnt .item.slick-active .banner_overlay { opacity: 0; } .widget_cnt { margin-top: -120px; position: relative; } @media only screen and (max-width: 768px) { .widget_cnt { margin-top: 0; } } .widget_cnt .close_btn { float: right; display: none; font-size: 1.125rem; color: #000; } @media only screen and (max-width: 768px) { .widget_cnt .close_btn { display: block; } } .widget_cnt .widget_cnt_inner { padding: 30px 20px; background: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-box-shadow: 0 0 4px #cccccc; box-shadow: 0 0 4px #cccccc; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .widget_cnt .widget_cnt_inner .custom_menu_ht { overflow-x: hidden; overflow-y: auto; max-height: 280px; } @media only screen and (max-width: 768px) { .widget_cnt .widget_cnt_inner { position: fixed; width: 100%; left: 0; bottom: -100%; height: 100%; z-index: 999; } .widget_cnt .widget_cnt_inner.slideUp { bottom: 0; } } .widget_cnt .widget_cnt_inner .headig_section { margin-bottom: 30px; } .widget_cnt .widget_cnt_inner .widget_form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin-top: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 768px) { .widget_cnt .widget_cnt_inner .widget_form { display: block; } } @media screen and (max-width: 768px) { .widget_cnt .widget_cnt_inner .mdl-textfield { width: 100%; } } .widget_cnt .widget_cnt_inner .mdl-textfield i { position: absolute; left: 0; top: 17px; font-size: 1.5rem; color: #cccccc; } .widget_cnt .widget_cnt_inner .mdl-textfield i.tb_down_arrow { font-size: 0.875rem; color: #cccccc; margin: 0; bottom: 0; left: 88%; top: 24px; height: 12px; pointer-events: none; } @media only screen and (max-width: 768px) { .widget_cnt .widget_cnt_inner .mdl-textfield i.tb_down_arrow { left: 95%; } } @media only screen and (max-width: 360px) { .widget_cnt .widget_cnt_inner .mdl-textfield i.tb_down_arrow { left: 90%; } } .widget_cnt .widget_cnt_inner .mdl-textfield .mdl-textfield__input, .widget_cnt .widget_cnt_inner .mdl-textfield .mdl-textfield__label { padding-left: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; color: rgba(0, 0, 0, 0.7); } .widget_cnt .widget_cnt_inner .col_3 { width: 24%; } @media only screen and (max-width: 768px) { .widget_cnt .widget_cnt_inner .col_3 { width: 100%; } } .widget_cnt .widget_cnt_inner .col_3 .baseBtn { width: 100%; } .widget_cnt .why_rely { -webkit-box-shadow: 0 0 4px #cccccc; box-shadow: 0 0 4px #cccccc; padding: 30px 20px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } @media only screen and (max-width: 768px) { .widget_cnt .why_rely { margin-top: -30px; background: #fff; padding: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; } } .widget_cnt .why_rely .why_rely_slider { margin-top: 40px; } @media screen and (max-width: 768px) { .widget_cnt .why_rely .why_rely_slider { margin-top: 20px; } } .widget_cnt .why_rely .why_rely_slider_home { margin-top: 40px; } @media screen and (max-width: 768px) { .widget_cnt .why_rely .why_rely_slider_home { margin-top: 20px; } } .widget_cnt .why_rely .why_rely_block { display: -webkit-box; display: -ms-flexbox; display: flex; } .widget_cnt .why_rely .icon_cnt span { color: #f48b0d; font-size: 1.875rem; } .widget_cnt .why_rely .rely_detail { padding: 10px 0 0 10px; } .widget_cnt .why_rely .rely_detail h5 { margin-bottom: 20px; font-family: 'ceragr medium', sans-serif; } .widget_cnt .why_rely .item { padding: 0 5px; outline: none; } .widget_cnt .why_rely .slick-dots { text-align: center; margin-top: 20px; } @media screen and (max-width: 768px) { .widget_cnt .why_rely .slick-dots { margin-top: 0; } } .widget_cnt .why_rely .slick-dots li { display: inline-block; margin: 0 3px; } .widget_cnt .why_rely .slick-dots li button { height: 10px; width: 10px; text-indent: -999px; overflow: hidden; border-radius: 50%; background: #ede8ff; border: none; outline: none; } .widget_cnt .why_rely .slick-dots li.slick-active button { background: #2d2556; } .tradefairs_cnt .tradefair_details_cnt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media only screen and (max-width: 768px) { .tradefairs_cnt .tradefair_details_cnt { display: block; } } .tradefairs_cnt .tradefair_details_cnt .tradefairs_details { width: 70%; padding-right: 60px; } @media only screen and (max-width: 768px) { .tradefairs_cnt .tradefair_details_cnt .tradefairs_details { width: 100%; padding: 0; } } .tradefairs_cnt .tradefair_details_cnt .tradefairs_details > p { margin-bottom: 40px; } @media only screen and (max-width: 768px) { .tradefairs_cnt .tradefair_details_cnt .tradefairs_details > p { margin-bottom: 20px; } } .tradefairs_cnt .tradefair_details_cnt .tradefairs_details .horizontal_info_slider { margin-top: 40px; } .tradefairs_cnt .tradefair_details_cnt .tradefairs_video { border-radius: 3px; overflow: hidden; position: relative; } .tradefairs_cnt .tradefair_details_cnt .tradefairs_video img { width: 100%; } .tradefairs_cnt .tradefair_details_cnt .tradefairs_video .video { position: relative; } .tradefairs_cnt .tradefair_details_cnt .tradefairs_video .video .play_button { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer; -webkit-transition: 0.3s; transition: 0.3s; } .tradefairs_cnt .tradefair_details_cnt .tradefairs_video .video .play_button:hover { opacity: 0.5; } @media only screen and (max-width: 768px) { .tradefairs_cnt .tradefair_details_cnt .tradefairs_video { width: 100%; margin-top: 40px; } } .tradefairs_cnt .section_bottom { height: 218px; } @media only screen and (max-width: 768px) { .tradefairs_cnt .section_bottom { height: 110px; } } .tradefairs_cnt .section_bottom span { color: #faf9ff; } .tradefairs_cnt .section_bottom .bottom_img_cnt { width: 50%; background: url("/images/tradefair_bottom.png") 0 0 no-repeat; } @media only screen and (max-width: 768px) { .tradefairs_cnt .section_bottom .bottom_img_cnt { background-size: auto 100%; } } .flex_row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 768px) { .flex_row { display: block; } } .Holidays_cnt .section_bottom { height: 181px; } @media only screen and (max-width: 768px) { .Holidays_cnt .section_bottom { height: 110px; } } .Holidays_cnt .section_bottom span { color: #fff; } .Holidays_cnt .section_bottom .bottom_img_cnt { width: 60%; background: url("/images/holiday_bottom_bg.png") right 0 no-repeat; } @media only screen and (max-width: 768px) { .Holidays_cnt .section_bottom .bottom_img_cnt { background-size: auto 100%; } } .corporate_cnt .section_bottom { height: 209px; } @media only screen and (max-width: 768px) { .corporate_cnt .section_bottom { height: 110px; } } .corporate_cnt .section_bottom span { color: #fff; } .corporate_cnt .section_bottom .bottom_img_cnt { width: 46%; background: url("/images/corporate_bottom.png") right 0 no-repeat; } @media only screen and (max-width: 768px) { .corporate_cnt .section_bottom .bottom_img_cnt { background-size: auto 100%; } } .celebrations_cnt .section_bottom { height: 143px; } @media only screen and (min-width: 1600px) { .celebrations_cnt .section_bottom { height: 170px; } } .celebrations_cnt .section_bottom span { color: #faf9ff; } .celebrations_cnt .section_bottom .bottom_img_cnt { width: 40%; background: url("/images/celebration_bottom.png") 0 0 no-repeat; } @media only screen and (max-width: 768px) { .celebrations_cnt .section_bottom .bottom_img_cnt { background-size: auto 100%; } } .knowledge_tour_cnt .knowledge_tour_info { width: 35%; padding-right: 30px; } @media only screen and (max-width: 768px) { .knowledge_tour_cnt .knowledge_tour_info { width: 100%; } } .knowledge_tour_cnt .knowledge_tour_slider { width: 65%; } @media only screen and (max-width: 768px) { .knowledge_tour_cnt .knowledge_tour_slider { width: 100%; } } .knowledge_tour_cnt .knowledge_tour_slider .knowledge_tour_row { display: -webkit-box; display: -ms-flexbox; display: flex; } .knowledge_tour_cnt .knowledge_tour_slider .knowledge_tour_row .half_col { width: 50%; } .knowledge_tour_cnt .knowledge_tour_slider .knowledge_tour_row .price_label { color: #d8210a; font-family: 'ceragr bold',sans-serif; margin-top: 10px; } .knowledge_tour_cnt .knowledge_tour_slider .knowledge_tour_row h6 { font-family: 'ceragr medium',sans-serif; margin-bottom: 15px !important; } .knowledge_tour_cnt .section_bottom { height: 198px; } @media only screen and (max-width: 768px) { .knowledge_tour_cnt .section_bottom { height: 90px; } } .knowledge_tour_cnt .section_bottom .bottom_img_cnt { width: 40%; background: url("/images/knowledge_bottom_bg.png") 0 0 no-repeat; } @media only screen and (max-width: 768px) { .knowledge_tour_cnt .section_bottom .bottom_img_cnt { background-size: auto 100%; } } .knowledge_tour_cnt .section_bottom span { color: #faf9ff; } @media only screen and (max-width: 768px) { .horizontal_info_slider { margin-top: 30px; } } .horizontal_info_slider .slide { position: relative; outline: none; overflow: hidden; border-radius: 5px; } .horizontal_info_slider .slide .slider_info, .horizontal_info_slider .slide .thumb_cnt { width: 50%; float: left; height: 315px; -o-object-fit: cover; object-fit: cover; } @media only screen and (max-width: 1024px) { .horizontal_info_slider .slide .slider_info, .horizontal_info_slider .slide .thumb_cnt { height: auto; } } @media only screen and (max-width: 768px) { .horizontal_info_slider .slide .slider_info, .horizontal_info_slider .slide .thumb_cnt { float: none; width: 100%; } } .horizontal_info_slider .slide .thumb_cnt img { width: 100%; height: 100%; } .horizontal_info_slider .slide .slider_info { padding: 20px; } @media only screen and (max-width: 768px) { .horizontal_info_slider .slide .slider_info { padding-bottom: 30px!important; } } .horizontal_info_slider .slide .slider_info h3 { margin-bottom: 20px; min-height: 48px; } @media only screen and (max-width: 1024px) { .horizontal_info_slider .slide .slider_info h3 { min-height: auto; } } .horizontal_info_slider .slide .slider_info h6 { margin-bottom: 20px; } .horizontal_info_slider .slide .slider_info p { margin-bottom: 20px; min-height: 66px; } @media only screen and (max-width: 1024px) { .horizontal_info_slider .slide .slider_info p { min-height: auto; } } .horizontal_info_slider .slide .slider_info .baseBtn { margin-right: 30px; } @media only screen and (max-width: 768px) { .vertical_info_slider { margin-top: 30px; } } .vertical_info_slider .slide { position: relative; outline: none; } .vertical_info_slider .thumb_cnt { border-top-left-radius: 5px; border-top-right-radius: 5px; overflow: hidden; } .vertical_info_slider .thumb_cnt img { width: 100%; } .vertical_info_slider .slider_info { background: #fff; padding: 20px; border-radius: 5px; } @media only screen and (max-width: 768px) { .vertical_info_slider .slider_info { padding-bottom: 25px; } } .vertical_info_slider .slider_info h3, .vertical_info_slider .slider_info h4, .vertical_info_slider .slider_info h6, .vertical_info_slider .slider_info p { margin-bottom: 20px; } @media only screen and (max-width: 768px) { .vertical_info_slider .slider_info h3, .vertical_info_slider .slider_info h4, .vertical_info_slider .slider_info h6, .vertical_info_slider .slider_info p { margin-bottom: 15px; } } .vertical_info_slider .slider_info .baseBtn { margin-right: 30px; } .vertical_info_slider.holiday_slider { border-radius: 5px; } .vertical_info_slider.holiday_slider .slider_detail_cnt { background: #fff; padding: 20px; border-radius: 5px; } .vertical_info_slider.holiday_slider .detail_row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 640px) { .vertical_info_slider.holiday_slider .detail_row { display: block; } } .vertical_info_slider.holiday_slider .slider_info { width: 65%; padding: 20px 0; border-radius: 5px; } @media screen and (max-width: 640px) { .vertical_info_slider.holiday_slider .slider_info { width: 100%; padding: 0; } } @media screen and (max-width: 480px) { .vertical_info_slider.holiday_slider .slider_info h3 { font-size: 1rem; font-family: 'ceragr bold'; } } .vertical_info_slider.holiday_slider .baseBtn { margin-right: 20px; } .vertical_info_slider.holiday_slider .price_cnt { text-align: left; width: 35%; padding: 20px 0 20px 30px; } @media only screen and (max-width: 768px) { .vertical_info_slider.holiday_slider .price_cnt { padding-left: 20px; } } @media screen and (max-width: 640px) { .vertical_info_slider.holiday_slider .price_cnt { width: 100%; padding-left: 0; padding-top: 0; } } @media screen and (max-width: 640px) { .vertical_info_slider.holiday_slider .price_cnt .price_cnt_value { display: -webkit-box; display: -ms-flexbox; display: flex; } } .vertical_info_slider.holiday_slider .price_cnt h2, .vertical_info_slider.holiday_slider .price_cnt .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .vertical_info_slider.holiday_slider .price_cnt .home-package-price { color: #e1800b; font-family: 'ceragr bold',sans-serif; margin-bottom: 30px; } @media only screen and (max-width: 768px) { .vertical_info_slider.holiday_slider .price_cnt h2, .vertical_info_slider.holiday_slider .price_cnt .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .vertical_info_slider.holiday_slider .price_cnt .home-package-price { margin-bottom: 20px; } } .vertical_info_slider.holiday_slider .price_cnt h6 { font-family: 'ceragr medium',sans-serif; margin-bottom: 10px; } @media screen and (max-width: 640px) { .vertical_info_slider.holiday_slider .price_cnt h6 { margin-right: 10px; } } .mobile_form_btn { position: fixed; background: #fff; width: 100%; bottom: -1px; left: 0; padding: 15px; z-index: 99; display: none; } @media only screen and (max-width: 768px) { .mobile_form_btn { display: block; } } .mobile_form_btn h3 { padding-left: 20px; margin-bottom: 20px; border-left: 3px solid #dc3724; } @media only screen and (max-width: 321px) { .mobile_form_btn h3 { display: none; } } .mobile_form_btn .baseBtn { display: block; text-align: center; } .tbCompanylogo { margin: 50px 0; } .tbCompanylogo h3 { font-family: 'ceragr medium'; text-align: center; font-size: 1.875rem; color: #2d2556; margin-bottom: 50px; } @media screen and (max-width: 640px) { .tbCompanylogo h3 { font-size: 1.125rem; margin-bottom: 20px; } } @media screen and (max-width: 640px) { .tbCompanylogo { margin: 20px 0; } } @media screen and (max-width: 421px) { .tbCompanylogo .logoSlider .compLogo img { width: 100%; } } .tibroExperience { margin-top: 20px; } @media screen and (max-width: 768px) { .tibroExperience { margin-bottom: 40px; } } .tibroExperience .whyWithTibro { text-align: center; padding-top: 0px; } .tibroExperience .whyWithTibro h1 { font-family: 'ceragr black'; position: relative; display: inline-block; margin-bottom: 25px; } @media screen and (max-width: 640px) { .tibroExperience .whyWithTibro h1 { font-size: 2.25rem; } } .tibroExperience .whyWithTibro h1:before { content: ' '; background: url("/images/tibro-icon.png"); width: 66px; height: 41px; position: absolute; right: -24px; top: -24px; } @media screen and (max-width: 640px) { .tibroExperience .whyWithTibro h1:before { background-size: 100%; background-repeat: no-repeat; width: 53px; right: -29px; display: none; } } @media screen and (max-width: 480px) { .tibroExperience .whyWithTibro h1:before { width: 32px; right: -12px; top: -16px; } } .tibroExperience .whyWithTibro .tibrTimline { position: relative; max-width: 1160px; margin: 0 auto; } .tibroExperience .whyWithTibro .tibrTimline .entry { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .tibroExperience .whyWithTibro .tibrTimline .entry { display: block; width: 100%; } } .tibroExperience .whyWithTibro .tibrTimline .entry .timelineImg { margin: 0 30px; width: 40%; border-radius: 5px; overflow: hidden; } @media screen and (max-width: 768px) { .tibroExperience .whyWithTibro .tibrTimline .entry .timelineImg { width: 100%; margin: 0; } } @media screen and (max-width: 768px) { .tibroExperience .whyWithTibro .tibrTimline .entry .timelineImg img { width: 100%; } } .tibroExperience .whyWithTibro .tibrTimline .entry .timelineContent { width: 60%; } @media screen and (max-width: 768px) { .tibroExperience .whyWithTibro .tibrTimline .entry .timelineContent { width: 100%; padding-top: 25px; } } .tibroExperience .whyWithTibro .tibrTimline .entry .timelineContent .timeHead { font-size: 2.25rem; color: #f4850d; font-family: 'ceragr black'; margin-bottom: 20px; } @media screen and (max-width: 640px) { .tibroExperience .whyWithTibro .tibrTimline .entry .timelineContent .timeHead { font-size: 1.5rem; } } .tibroExperience .whyWithTibro .tibrTimline .entry .timelineContent p { line-height: 1.125rem; } .tibroExperience .whyWithTibro .tibrTimline .entry .timelineContent.text-left { text-align: left; } .tibroExperience .whyWithTibro .tibrTimline .entry .timelineContent.text-right { text-align: right; } @media screen and (max-width: 768px) { .tibroExperience .whyWithTibro .tibrTimline .entry .timelineContent.text-right { text-align: left; } } .tibroExperience .whyWithTibro .tibrTimline .entry.entrySpace { padding: 100px 0px 100px 0px; width: 80%; position: relative; z-index: 2; background-color: inherit; } @media screen and (max-width: 768px) { .tibroExperience .whyWithTibro .tibrTimline .entry.entrySpace { width: 100%; padding: 0; margin: 0 8px !important; } } .tibroExperience .whyWithTibro .tibrTimline .entry.entrySpace.entry--left { margin-left: 20%; z-index: 2; } @media screen and (max-width: 768px) { .tibroExperience .whyWithTibro .tibrTimline .entry.entrySpace.entry--left { margin: 0; } } .tibroExperience .whyWithTibro .tibrTimline .entry.entrySpace.entry--right { margin-left: 0%; z-index: 2; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media screen and (max-width: 768px) { .tibroExperience .whyWithTibro .tibrTimline .entry.entrySpace.entry--right { margin: 0; } } .tibroExperience .whyWithTibro .tibrTimline:after { content: ''; position: absolute; width: 4px; background-color: #ececec; left: 50%; top: 0; z-index: 1; bottom: 0; margin-left: -2px; } @media screen and (max-width: 768px) { .tibroExperience .whyWithTibro .tibrTimline:after { content: none; } } .tibroExperience .whyWithTibro .tibrTimline.timline_slider .slick-list { margin-bottom: 40px; } @media screen and (max-width: 768px) { .tibroExperience .whyWithTibro .tibrTimline.timline_slider .slick-list { margin-bottom: 0px; } } .tibroExperience .whyWithTibro .tibrTimline.timline_slider .slick-dots li { display: inline-block; margin: 0 5px; } .tibroExperience .whyWithTibro .tibrTimline.timline_slider .slick-dots li.slick-active button { background-color: #2d2556; } .tibroExperience .whyWithTibro .tibrTimline.timline_slider .slick-dots li button { height: 12px; width: 12px; overflow: hidden; text-indent: -999px; cursor: pointer; outline: none; border: 0; border-radius: 50%; background-color: #ececec; } .clientSpeakBg { background: url("/images/speak_bg.png") no-repeat #f4f2ff; background-size: 100%; background-position: bottom; padding-bottom: 185px; } @media screen and (max-width: 768px) { .clientSpeakBg { padding-bottom: 30px; background: none; } } .experienceBg { background: url("/images/experience_bg.png") no-repeat #fff; background-position: 0 23px; min-height: 185px; text-align: right; margin-top: 40px; } @media screen and (max-width: 1366px) { .experienceBg { padding-top: 57px; } } .experienceBg .heading { font-size: 215px; color: #faf9ff; font-family: 'ceragr black'; } @media screen and (max-width: 1850px) { .experienceBg .heading { font-size: 200px; } } @media screen and (max-width: 1366px) { .experienceBg .heading { font-size: 120px; } } .clientSpeak { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .clientSpeak { display: block; } } .clientSpeak .left_box { width: 50%; padding-right: 10%; } @media screen and (max-width: 768px) { .clientSpeak .left_box { width: 100%; padding: 0; } } .clientSpeak .left_box .section_heading h2:after, .clientSpeak .left_box .section_heading .banner_cnt .banner_caption .home-package-price:after, .banner_cnt .banner_caption .clientSpeak .left_box .section_heading .home-package-price:after { top: -41px; right: -55px; } @media screen and (max-width: 768px) { .clientSpeak .left_box .section_heading h2:after, .clientSpeak .left_box .section_heading .banner_cnt .banner_caption .home-package-price:after, .banner_cnt .banner_caption .clientSpeak .left_box .section_heading .home-package-price:after { top: 0; right: -55px; } } .clientSpeak .right_box { width: 50%; } @media screen and (max-width: 768px) { .clientSpeak .right_box { width: 100%; padding: 0; } } .clientSpeak .right_box .speakTestimonial .box_shadow { border-radius: 5px; } .clientSpeak .right_box .speakBox { background-color: #fff; } .clientSpeak .right_box .speakBox .slick-track { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .clientSpeak .right_box .speakBox .speakBoxInner { padding: 35px 25px 35px 85px; } @media screen and (max-width: 768px) { .clientSpeak .right_box .speakBox .speakBoxInner { padding: 35px 20px 35px 45px; } } .clientSpeak .right_box .speakBox p { position: relative; margin-bottom: 0; } .clientSpeak .right_box .speakBox p:before { font-family: 'tibro'; content: '\E927'; font-size: 2.25rem; position: absolute; top: -7px; left: -50px; } @media screen and (max-width: 768px) { .clientSpeak .right_box .speakBox p:before { left: -30px; top: -4px; font-size: 1.125rem; } } .clientSpeak .right_box .speakBox .speakName { display: block; margin-top: 35px; } @media screen and (max-width: 768px) { .clientSpeak .right_box .speakBox .speakName { margin-top: 20px; } } .clientSpeak .right_box .speakBox .slick-arrow { bottom: -16px; } .immerseExperienceWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media screen and (max-width: 768px) { .immerseExperienceWrap { display: block; } } .immerseExperienceWrap .left_box { width: 70%; padding-right: 4%; } @media screen and (max-width: 768px) { .immerseExperienceWrap .left_box { width: 100%; padding: 0; margin-bottom: 40px; } } .immerseExperienceWrap .left_box .immerseExperience .experience_content { margin: 0 8px; border-radius: 5px; overflow: hidden; } .immerseExperienceWrap .left_box .immerseExperience .experience_content img { width: 100%; } .immerseExperienceWrap .left_box .immerseExperience .slick-arrow { bottom: -16px; } .immerseExperienceWrap .right_box { width: 30%; } @media screen and (max-width: 768px) { .immerseExperienceWrap .right_box { width: 100%; } } .immerseExperienceWrap .right_box .experienceVideo { margin: 0 8px; } .immerseExperienceWrap .right_box .tradefairs_video { border-radius: 5px; overflow: hidden; position: relative; } .immerseExperienceWrap .right_box .tradefairs_video .video { position: relative; } .immerseExperienceWrap .right_box .tradefairs_video .video img { width: 100%; } .immerseExperienceWrap .right_box .tradefairs_video .video .play_button { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer; -webkit-transition: 0.3s; transition: 0.3s; } .immerseExperienceWrap .right_box .tradefairs_video .video .play_button:hover { opacity: 0.5; } .experienceSection .section_bottom { height: 140px; } @media screen and (min-width: 1600px) { .experienceSection .section_bottom { height: 175px; } } @media screen and (max-width: 768px) { .experienceSection .section_bottom { height: 90px; } } .experienceSection .section_bottom .bottom_img_cnt { width: 40%; background: url("/images/experience_bg.png") 0 0 no-repeat; } @media screen and (max-width: 768px) { .experienceSection .section_bottom .bottom_img_cnt { background-size: auto 100%; } } .experienceSection .section_bottom span { color: #faf9ff; } .tradeFairs_main { margin-top: 20px; } @media screen and (max-width: 768px) { .tradeFair_widget .headig_section { display: block; } } @media screen and (max-width: 768px) { .tradeFair_widget .headig_section h3 { margin-bottom: 15px; } } .tradefair_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 30px; } @media screen and (max-width: 768px) { .tradefair_wrap { display: block; } } .tradefair_wrap .tradeLeft { width: 100%; } @media screen and (max-width: 768px) { .tradefair_wrap .tradeLeft { width: 100%; } } .tradefair_wrap .tradeRight { width: 40%; text-align: right; } @media screen and (max-width: 768px) { .tradefair_wrap .tradeRight { width: 100%; margin-top: 20px; } } .tradeFairCard_wrap .tradeFairInner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .tradeFairCard_wrap .tradeFairInner .slick-arrow { bottom: 16px; } .tradeFairCard_wrap .tradeFairInner .traFairCard { overflow: hidden; border-radius: 5px; background: #fff; width: 48%; margin: 0 0 30px 0; display: -webkit-box; display: -ms-flexbox; display: flex; } @media screen and (max-width: 768px) { .tradeFairCard_wrap .tradeFairInner .traFairCard { width: 100%; } } @media screen and (max-width: 480px) { .tradeFairCard_wrap .tradeFairInner .traFairCard { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .tradeFairCard_wrap .tradeFairInner .traFairCard .CardImg { width: 50%; position: relative; } @media screen and (max-width: 480px) { .tradeFairCard_wrap .tradeFairInner .traFairCard .CardImg { width: 100%; } } .tradeFairCard_wrap .tradeFairInner .traFairCard .CardImg img { width: 100%; height: 100%; } @media screen and (max-width: 768px) { .tradeFairCard_wrap .tradeFairInner .traFairCard .CardImg img { height: auto; } } .tradeFairCard_wrap .tradeFairInner .traFairCard .CardDetails { padding: 22px 20px; width: 50%; } @media screen and (max-width: 480px) { .tradeFairCard_wrap .tradeFairInner .traFairCard .CardDetails { width: 100%; } } .tradeFairCard_wrap .tradeFairInner .traFairCard .CardDetails h4 { font-family: 'ceragr medium'; margin-bottom: 20px; min-height: 48px; } .tradeFairCard_wrap .tradeFairInner .traFairCard .CardDetails .tourDate { font-family: 'ceragr medium'; margin-bottom: 20px; font-size: 0.875rem; color: rgba(45, 37, 86, 0.8); } .tradeFairCard_wrap .tradeFairInner .traFairCard .CardDetails p { margin-bottom: 16px; font-size: 0.875rem; word-wrap: break-word; line-height: 1.5; min-height: 63px; } .tradeFairCard_wrap .tradeFairInner .traFairCard .CardDetails .CardBtn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1024px) { .tradeFairCard_wrap .tradeFairInner .traFairCard .CardDetails .CardBtn { display: block; } } @media screen and (max-width: 768px) { .tradeFairCard_wrap .tradeFairInner .traFairCard .CardDetails .CardBtn { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (max-width: 1024px) { .tradeFairCard_wrap .tradeFairInner .traFairCard .CardDetails .CardBtn .baseBtn { display: block; margin-bottom: 15px; } } @media screen and (max-width: 768px) { .tradeFairCard_wrap .tradeFairInner .traFairCard .CardDetails .CardBtn .baseBtn { display: inline-block; margin: 0; } } @media screen and (max-width: 768px) { .upcoming_tradefairs_slider .slick-list { margin: 0 -15px; } } .upcoming_tradefairs { padding: 50px 0; } .upcoming_tradefairs .upcoming_tradefairs_title { font-size: 1.875rem; color: #302656; font-family: 'ceragr black'; margin-bottom: 25px; } @media screen and (max-width: 768px) { .upcoming_tradefairs .traFairCard.slick-slide { margin: 0 15px; } } .upcoming_tradefairs .upcoming_tradefairs_content h5 { font-size: 1.125rem; font-family: 'ceragr bold'; color: #2d2556; margin-bottom: 30px; } @media screen and (max-width: 480px) { .upcoming_tradefairs .CardDetails { min-height: 214px; } } @media screen and (max-width: 480px) { .upcoming_tradefairs .slick-arrow { bottom: -16px !important; } } .whyUsTradefairs { padding: 60px 0 60px 0; } .whyUsTradefairs h4 { font-family: 'ceragr regular'; color: #000; border-left: 5px solid #f4850d; padding-left: 20px; margin-bottom: 30px; } .whyUsTradefairs .whyUsList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 768px) { .whyUsTradefairs .whyUsList { display: block; } } .whyUsTradefairs .whyUsList .slick-dots { text-align: center; margin-top: 20px; } .whyUsTradefairs .whyUsList .slick-dots li { display: inline-block; margin: 0 3px; } .whyUsTradefairs .whyUsList .slick-dots li button { height: 10px; width: 10px; text-indent: -999px; overflow: hidden; border-radius: 50%; background: #ede8ff; border: none; outline: none; } .whyUsTradefairs .whyUsList .slick-dots li.slick-active button { background: #2d2556; } .whyUsTradefairs .whyUsList .whyUsListBox { display: -webkit-box; display: -ms-flexbox; display: flex; } .whyUsTradefairs .whyUsList .whyUsListBox .whyUsIcon { color: #f4850d; margin-right: 15px; } .whyUsTradefairs .whyUsList .whyUsListBox .whyUsIcon .tb { font-size: 1.875rem; } .whyUsTradefairs .whyUsList .whyUsContent h5 { font-family: 'ceragr medium'; color: #2d2556; margin-bottom: 10px; min-height: 36px; } .tradeFair_modal { width: 768px; } @media screen and (max-width: 480px) { .tradeFair_modal { width: 100%; height: 100%; top: 0; } } .tradeFair_modal .mdl-dialog__content .tradeFair_modal_form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .tradeFair_modal .mdl-dialog__content .tradeFair_modal_form .baseInput { width: 47%; } @media screen and (max-width: 480px) { .tradeFair_modal .mdl-dialog__content .tradeFair_modal_form .baseInput { width: 100%; } } .tradeFair_modal .mdl-dialog__content .tradeFair_modal_form .baseBtn { margin-top: 30px; width: 47%; } @media screen and (max-width: 480px) { .tradeFair_modal .mdl-dialog__content .tradeFair_modal_form .baseBtn { width: 100%; position: fixed; bottom: 0; left: 0; margin-top: 0; } .tradeFair_modal .mdl-dialog__content .tradeFair_modal_form .baseBtn.slideUp { bottom: 0; } } .sticky { position: fixed; bottom: 0; width: 100%; z-index: 999; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .widget_form ::-webkit-scrollbar { width: 7px; } .widget_form ::-webkit-scrollbar-track { background: #f1f1f1; } .widget_form ::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; } .tradeFair_widget .widget_cnt_inner { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .tradeFair_widget .widget_cnt_inner .custom_menu_ht { overflow-x: hidden; overflow-y: auto; max-height: 280px; } /* holiday listing page css start */ .continents_list { background: #fff; border-radius: 7px; overflow: hidden; } .continents_list ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .continents_list ul li { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; text-align: center; padding: 20px 0; cursor: pointer; border-radius: 7px; } .continents_list ul li i { color: #f4850d; font-size: 2.25rem; } .continents_list ul li img { display: inline-block; } .continents_list ul li p { margin: 10px 0 0; font-size: 1rem; font-family: 'ceragr medium', sans-serif; } .continents_list ul li.active { background: #f4850d; } .continents_list ul li.active i { color: #000; } .continents_list ul li:hover { background: #f4850d; } .continents_list ul li:hover i { color: #000; } .packages_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 30px; } .packages_list .package_list_inner { width: 90%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; } .packages_list button { background: transparent; border: none; cursor: pointer; outline: none; } .packages_list .custom_checkbox { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .packages_list .custom_checkbox a { color: #8073b1; font-size: 0.875rem; } .holiday_listing_cnt .tradeRight { padding-left: 30px; } @media only screen and (max-width: 768px) { .holiday_listing_cnt .tradeRight { padding-left: 0; } } .holiday_search { border: 1px solid #ddd; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 10px; border-radius: 5px; } .holiday_search input { width: 100%; padding: 10px; border: none; outline: none; } .holiday_list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; padding: 20px 0 30px; } @media only screen and (max-width: 640px) { .holiday_list { display: block; padding: 20px 15px; } } .holiday_list #_holidaylist { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .holiday_list .holiday_block { width: 31%; margin: 14px; border-radius: 5px; overflow: hidden; position: relative; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.1); } @media only screen and (max-width: 1024px) { .holiday_list .holiday_block { width: 30.5%; } } @media only screen and (max-width: 768px) { .holiday_list .holiday_block { width: 46%; } } @media only screen and (max-width: 640px) { .holiday_list .holiday_block { width: 100%; display: block; float: none; margin: 20px 0; } } .holiday_list .holiday_block img { width: 100%; min-height: 1px; } .holiday_list .holiday_block.card_block { text-align: center; background: #2d2556; } .holiday_list .middle_card { padding: 14px 20px; } @media only screen and (max-width: 768px) { .holiday_list .middle_card { padding: 9px 20px; } } .holiday_list .middle_card h3 { margin-bottom: 15px; } .holiday_list .middle_card h3, .holiday_list .middle_card p { color: #fff; } @media only screen and (max-width: 1024px) { .holiday_list .middle_card h3, .holiday_list .middle_card p { font-size: 12px; line-height: 1.5; margin-bottom: 0; } } .holiday_list .package_name { position: absolute; width: 100%; bottom: 0; left: 0; padding: 15px; background: black; background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(47%, rgba(0, 0, 0, 0.53)), color-stop(100%, rgba(0, 0, 0, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(47%, rgba(0, 0, 0, 0.53)), to(rgba(0, 0, 0, 0.8))); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.53) 47%, rgba(0, 0, 0, 0.8) 100%); } .holiday_list .package_name h3 { color: #fff; font-size: 1.125rem; margin-bottom: 10px; font-family: 'ceragr medium', sans-serif; } .custom_banner .common_heading { position: absolute; bottom: 76px; } @media screen and (max-width: 768px) { .custom_banner .common_heading { bottom: 0; } } .mapSelection { margin-top: -67px; } @media screen and (max-width: 768px) { .mapSelection { display: none; } } .select_destination { display: none; padding: 20px; } .select_destination .widget_cnt_inner { position: static; -webkit-box-shadow: none; box-shadow: none; padding: 0; border-radius: 0; } .select_destination .widget_cnt_inner .widget_form { margin: 0; } @media only screen and (max-width: 768px) { .select_destination { background: #fff; display: block; position: fixed; width: 100%; left: 0; bottom: -100%; height: 100%; z-index: 999; -webkit-transition: 0.3s; transition: 0.3s; } .select_destination.slideUp { bottom: 0; } } .select_destination h3 { font-size: 1.5rem; font-family: 'ceragr black'; margin-bottom: 30px; } /* holiday listing page css end */ input[type=checkbox].css-checkbox { display: none; } .css-label { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 7px; cursor: pointer; padding: 12px 18px; text-align: center; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; } .custom_checkbox input[type=checkbox].css-checkbox:checked + label.css-label { border: 1px solid #f4850d; border-radius: 30px; color: #2d2556; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; } .custom_checkbox input[type=checkbox].css-checkbox:checked + label.css-label:before { font-family: 'tibro'; content: "\E937"; margin-right: 15px; color: #f4850d; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; } .luxury_holidays_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 0px; } @media screen and (max-width: 768px) { .luxury_holidays_wrap { display: block; } } .luxury_holidays_wrap .tradeLeft { width: 100%; } .luxury_holidays_wrap .tradeLeft p { margin-bottom: 0; } @media screen and (max-width: 768px) { .luxury_holidays_wrap .tradeLeft { width: 100%; } } .luxury_holidays_wrap .tradeRight { width: 40%; text-align: right; } @media screen and (max-width: 768px) { .luxury_holidays_wrap .tradeRight { width: 100%; margin-top: 20px; } } .tradefairsDetails { position: absolute; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 9; } @media screen and (max-width: 768px) { .tradefairsDetails { position: relative; } } .tradefairsDetails .tradefair_logo { width: 230px; height: 210px; margin-right: 40px; background: #fff; border-radius: 10px 10px 0 0; overflow: hidden; } @media screen and (max-width: 768px) { .tradefairsDetails .tradefair_logo { width: 78px; height: 72px; margin-right: 20px; } } @media screen and (max-width: 360px) { .tradefairsDetails .tradefair_logo { width: 68px; height: 62px; margin-right: 15px; } } .tradefairsDetails .tradefair_logo img { width: 100%; } .tradefairsDetails .tradefair_venuedate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-item-align: end; align-self: flex-end; margin-bottom: 30px; } @media screen and (max-width: 768px) { .tradefairsDetails .tradefair_venuedate { margin-bottom: 0; display: block; -ms-flex-item-align: center; align-self: center; } } .tradefairsDetails .tradefair_venuedate .dates, .tradefairsDetails .tradefair_venuedate .venue { color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-item-align: center; align-self: center; } @media screen and (max-width: 768px) { .tradefairsDetails .tradefair_venuedate .dates, .tradefairsDetails .tradefair_venuedate .venue { color: #000; font-size: 1.125rem; -webkit-box-pack: normal; -ms-flex-pack: normal; justify-content: normal; } } .tradefairsDetails .tradefair_venuedate .dates i, .tradefairsDetails .tradefair_venuedate .venue i { color: #fff; font-size: 1.5rem; } @media screen and (max-width: 768px) { .tradefairsDetails .tradefair_venuedate .dates i, .tradefairsDetails .tradefair_venuedate .venue i { color: #000; display: inline-block; vertical-align: middle; font-size: 1.125rem; } } .tradefairsDetails .tradefair_venuedate .dates span, .tradefairsDetails .tradefair_venuedate .venue span { font-size: 1.125rem; font-family: 'ceragr medium'; -ms-flex-item-align: center; align-self: center; margin-left: 20px; display: inline-block; vertical-align: middle; } @media screen and (max-width: 768px) { .tradefairsDetails .tradefair_venuedate .dates span, .tradefairsDetails .tradefair_venuedate .venue span { font-size: 1rem; } } @media screen and (max-width: 420px) { .tradefairsDetails .tradefair_venuedate .dates span, .tradefairsDetails .tradefair_venuedate .venue span { margin-left: 10px; font-size: 0.875rem; } } .tradefairsDetails .tradefair_venuedate .dates { margin-right: 50px; } @media screen and (max-width: 768px) { .tradefairsDetails .tradefair_venuedate .dates { margin-right: 0; margin-bottom: 10px; } } .tradefairTab .mdl-tabs__panel .tab_content li { margin-bottom: 15px; font-size: 0.875rem; font-family: 'ceragr medium'; padding-left: 0px; } .tradefairTab .mdl-tabs__panel .tab_content h6 { font-family: 'ceragr medium'; margin-bottom: 15px; } .tradefairTab .mdl-tabs__panel .tab_content p { margin-bottom: 0; } .tradefairTab .mdl-tabs__panel .tab_content .visitors_count_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; margin: 20px 0; } .tradefairTab .mdl-tabs__panel .tab_content .visitors_count_wrap .visitors_count { width: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tradefairTab .mdl-tabs__panel .tab_content .visitors_count_wrap .visitors_count i { font-size: 2.25rem; color: #f4850d; margin-right: 15px; } .tradefairTab .mdl-tabs__panel .tab_content .visitors_count_wrap .visitors_count span { font-size: 1rem; font-family: 'ceragr bold'; } .tradefairTab .mdl-tabs__panel .tab_content .event_details { padding: 0 15px; border-radius: 5px; background-color: #fff; margin: 20px 0; } .tradefairTab .mdl-tabs__panel .tab_content .event_details .event_details_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; padding-bottom: 20px; border-bottom: 1px solid #cccccc; padding: 18px 0; } @media screen and (max-width: 480px) { .tradefairTab .mdl-tabs__panel .tab_content .event_details .event_details_wrap { display: block; } } .tradefairTab .mdl-tabs__panel .tab_content .event_details .event_details_wrap:last-child { border-bottom: 0; } .tradefairTab .mdl-tabs__panel .tab_content .event_details .event_details_wrap .event_date_venue { width: 50%; } @media screen and (max-width: 480px) { .tradefairTab .mdl-tabs__panel .tab_content .event_details .event_details_wrap .event_date_venue { width: 100%; margin-bottom: 15px; } .tradefairTab .mdl-tabs__panel .tab_content .event_details .event_details_wrap .event_date_venue:last-child { margin-bottom: 0; } } .tradefairTab .mdl-tabs__panel .tab_content .event_details .event_details_wrap .event_date_venue h5 { font-size: 1rem; font-family: 'ceragr bold'; margin-bottom: 22px; } @media screen and (max-width: 768px) { .tradefairTab .mdl-tabs__panel .tab_content .event_details .event_details_wrap .event_date_venue h5 { margin-bottom: 10px; } } .tradefairTab .mdl-tabs__panel .tab_content .event_details .event_details_wrap .event_date_venue .detail_venue_date { font-size: 0.875rem; font-family: 'ceragr medium'; color: rgba(45, 37, 86, 0.8); display: block; margin-bottom: 15px; } .tradefairTab .mdl-tabs__panel .tab_content .event_details .event_details_wrap .event_date_venue .detail_venue_date:last-child { margin-bottom: 0; } .tradefairTab .mdl-tabs__panel .tab_content .event_details .event_details_wrap .event_date_venue span { font-size: 1rem; font-family: 'ceragr bold'; } .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap { padding: 40px 0; } .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap .city_highlight { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 40px; } @media screen and (max-width: 480px) { .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap .city_highlight { display: block; } } .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap .city_highlight:last-child { margin-bottom: 0; } .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap .city_highlight .city_highlight_img { width: 30%; } .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap .city_highlight .city_highlight_img img { width: 100%; height: 100%; } @media screen and (max-width: 480px) { .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap .city_highlight .city_highlight_img { width: 100%; } } .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap .city_highlight .city_highlight_content { width: calc(70% - 30px); margin-left: 30px; } @media screen and (max-width: 480px) { .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap .city_highlight .city_highlight_content { width: 100%; margin-left: 0; margin-top: 20px; } } .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap .city_highlight .city_highlight_content h5 { font-size: 1rem; font-family: 'ceragr bold'; margin-bottom: 20px; } .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap .city_highlight .city_highlight_content p { margin-bottom: 20px; font-family: 'ceragr medium'; } .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap .city_highlight .city_highlight_content .city_highlight_location { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap .city_highlight .city_highlight_content .city_highlight_location i { color: #cccccc; font-size: 1.875rem; margin-right: 15px; } .tradefairTab .mdl-tabs__panel .tab_content .city_highlight_wrap .city_highlight .city_highlight_content .city_highlight_location span { font-family: 'ceragr medium'; font-size: 0.875rem; color: #2d2556; } .tradefairs_details_wrap { padding: 10px 0 40px 0; } .tradefairs_details_wrap .tradefairs_details_content { margin-bottom: 40px; } .tradefairs_details_wrap .tradefairs_details_content h3 { font-family: 'ceragr bold'; font-size: 1.125rem; margin-bottom: 15px; } .tradefairs_details_wrap .tradefairsDetailsTab { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } @media screen and (max-width: 480px) { .tradefairs_details_wrap .tradefairsDetailsTab .tradefairTab .mdl-tabs__tab-bar { width: 100%; display: block; -ms-flex-wrap: nowrap; flex-wrap: nowrap; z-index: 100; white-space: nowrap; height: 50px; display: block; overflow-x: auto; overflow-y: hidden; } .tradefairs_details_wrap .tradefairsDetailsTab .tradefairTab .mdl-tabs__tab-bar .tab_bar_scroll { width: 700px; } } .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_left { width: calc(70% - 30px); margin-right: 30px; } @media screen and (max-width: 768px) { .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_left { margin-right: 0; width: 100%; } } .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right { width: 30%; } @media screen and (max-width: 768px) { .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right { width: 0%; } } .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right .tradefair_details_form { background: #fff; border-radius: 5px; } @media screen and (max-width: 768px) { .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right .tradefair_details_form { position: fixed; left: 0; bottom: -100%; z-index: 999; width: 100%; height: 100%; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right .tradefair_details_form.slideUp { bottom: 0; } } .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right .tradefair_details_form .close_btn { float: right; display: none; font-size: 1.5rem; color: #000; padding: 18px; } @media only screen and (max-width: 768px) { .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right .tradefair_details_form .close_btn { display: block; } } .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right .tradefair_details_form .details_form_heading { padding: 18px; background: #faf9ff; border-radius: 5px; } .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right .tradefair_details_form .details_form_heading h4 { padding-left: 20px; border-left: 4px solid #f4850d; font-family: 'ceragr regular'; padding: 18px; } @media only screen and (max-width: 480px) { .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right .tradefair_details_form .details_form_heading h4 { font-size: 1.125rem; padding: 0 18px; line-height: 1.25; } } .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right .tradefair_details_form .details_form_content { padding: 0px 18px 18px 18px; } .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right .tradefair_details_form .details_form_content .tradeFair_modal_form .baseBtn { margin-top: 30px; width: 100%; } @media screen and (max-width: 768px) { .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right .tradefair_details_form .details_form_content .tradeFair_modal_form .baseBtn { margin-top: 0; } } .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right .tradefair_details_form .details_form_content .tradeFair_modal_form .baseInput { margin: 5px 0; } @media screen and (max-width: 768px) { .tradefairs_details_wrap .tradefairsDetailsTab .tradefairs_right .tradefair_details_form .details_form_content .tradeFair_modal_form .baseInput { margin: 2px 0; } } .banner_wrap .viewImages { position: absolute; top: -65px; z-index: 9; } .holidaysExperience { margin-bottom: 30px; } .holidaysExperience .itineraryHeading { font-size: 1rem; color: #f4850d; font-family: 'ceragr bold'; margin-bottom: 15px; } .holidaysExperience .itineraryHeading span { display: block; color: #2d2556; font-family: 'ceragr bold'; margin-top: 10px; } .HolidayDetailsCard_wrap { margin: 0 -20px; } .HolidayDetailsCard_wrap .slide { margin: 0 20px; } @media screen and (max-width: 550px) { .HolidayDetailsCard_wrap { padding: 0 10px; } } .tradefairsDetailsTab .holidays_details_form { margin-top: 90px; } .corpoate_tour_sec { margin-top: 20px; } .corpoate_tour_sec p { padding: 0px 0 50px; font-size: 0.875rem; margin: 0; font-family: 'ceragr medium'; } @media screen and (max-width: 768px) { .corpoate_tour_sec p { padding: 0px 0 40px; } } .corpoate_tour_sec .corpotare_organize_wrap h2, .corpoate_tour_sec .corpotare_organize_wrap .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .corpoate_tour_sec .corpotare_organize_wrap .home-package-price { font-size: 1.875rem; color: #2d2556; padding-bottom: 30px; font-family: 'ceragr black'; font-weight: bold; } .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper .small_card_wrap { outline: none; } @media screen and (max-width: 768px) { .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper .small_card_wrap { padding: 5px; } } .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper .small_card_wrap .small_card { border-radius: 4px; padding: 20px 30px; text-align: center; width: 300px; } .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper .small_card_wrap .small_card .corpo_tour_we_orgn_p{ padding-top:15px; } .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper .small_card_wrap .small_card i { display: block; font-size: 1.875rem; color: #f48b0d; padding-bottom: 15px; } .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper .small_card_wrap .small_card span { display: block; font-family: 'ceragr medium'; color: #2d2556; font-size: 1.125rem; padding-top:20px; } .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper .small_card_wrap .small_card img{ border-radius:10px; } @media screen and (max-width: 768px) { .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper .small_card_wrap .small_card span { font-size: 1rem; } } .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper .small_card_wrap .small_card:hover { -webkit-box-shadow: 0 0 3px #999; box-shadow: 0 0 3px #999; } .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper .slick-dots { position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; bottom: -36px; margin-top: 20px; } .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper .slick-dots li { display: inline-block; margin: 0 3px; } .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper .slick-dots li button { height: 10px; width: 10px; text-indent: -999px; overflow: hidden; border-radius: 50%; background: #ede8ff; border: none; outline: none; } .corpoate_tour_sec .corpotare_organize_wrap .organize_smallcard_wrapper .slick-dots li.slick-active button { background: #2d2556; } .exotic_destination_tours_sec { margin-bottom: 70px; } .exotic_destination_tours_sec .section_heading { margin-bottom: 45px; } .exotic_destination_tours_sec .section_heading h3 { font-size: 1.875rem; font-family: 'ceragr medium'; } @media screen and (max-width: 768px) { .exotic_destination_tours_sec .section_heading h3 { font-size: 1.5rem; } } .exotic_destination_tours_sec .section_heading h2, .exotic_destination_tours_sec .section_heading .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .exotic_destination_tours_sec .section_heading .home-package-price { font-size: 5rem; line-height: 5rem; } @media screen and (max-width: 768px) { .exotic_destination_tours_sec .section_heading h2, .exotic_destination_tours_sec .section_heading .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .exotic_destination_tours_sec .section_heading .home-package-price { font-size: 2.25rem; line-height: 36px; } .exotic_destination_tours_sec .section_heading h2:after, .exotic_destination_tours_sec .section_heading .banner_cnt .banner_caption .home-package-price:after, .banner_cnt .banner_caption .exotic_destination_tours_sec .section_heading .home-package-price:after { top: -3px; right: -70px; } } .exotic_destination_tours_sec .exotic_content p { font-size: 0.875rem; font-family: 'ceragr medium'; } .exotic_destination_tours_sec .exotic_content .enquiry_link { color: #f4850d; } @media screen and (max-width: 768px) { .exotic_destination_tours_sec .exotic_content .enquiry_link { display: none; } } @media screen and (max-width: 768px) { .exotic_destination_tours_sec .exotic_content { margin-bottom: 24px; } } .exotic_destination_tours_sec .exotic_slider .row { padding-left: 30px; } .exotic_destination_tours_sec .exotic_slider .row .card_spacing { padding: 0 15px 30px; } @media screen and (max-width: 768px) { .exotic_destination_tours_sec .exotic_slider .row .card_spacing { padding: 0 0 30px; } } .exotic_destination_tours_sec .exotic_slider .row .card_spacing .img_cards { position: relative; width: 100%; border-radius: 5px; overflow: hidden; } .exotic_destination_tours_sec .exotic_slider .row .card_spacing .img_cards img { width: 100%; border-radius: 5px; } .exotic_destination_tours_sec .exotic_slider .row .card_spacing .img_cards .gradient_wrap { position: absolute; background: -webkit-gradient(linear, left top, left bottom, from(rgba(76, 76, 76, 0)), to(#131313)); background: linear-gradient(to bottom, rgba(76, 76, 76, 0) 0%, #131313 100%); bottom: 0; height: 100px; left: 0; width: 100%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .exotic_destination_tours_sec .exotic_slider .row .card_spacing .img_cards .gradient_wrap span { color: #fff; display: block; position: absolute; font-family: 'ceragr medium'; font-size: 1.125rem; left: 15px; bottom: 20px; } @media screen and (max-width: 768px) { .exotic_destination_tours_sec .exotic_slider .row { padding-left: 0; } } @media screen and (max-width: 768px) { .exotic_destination_tours_sec { margin-bottom: 30px; } } .travel_exp_sec { padding: 50px 0; } .travel_exp_sec .travel_exp_title h2, .travel_exp_sec .travel_exp_title .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .travel_exp_sec .travel_exp_title .home-package-price { font-size: 1.875rem; color: #302656; font-family: 'ceragr black'; margin-bottom: 40px; } @media screen and (max-width: 768px) { .travel_exp_sec .travel_exp_title h2, .travel_exp_sec .travel_exp_title .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .travel_exp_sec .travel_exp_title .home-package-price { margin-bottom: 15px; } } .travel_exp_sec .travel_exp_sec_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .travel_exp_sec .travel_exp_sec_wrap .content_sec { width: 22%; } .travel_exp_sec .travel_exp_sec_wrap .content_sec span { line-height: 1.5rem; } .travel_exp_sec .travel_exp_sec_wrap .content_sec h5 { padding-bottom: 15px; font-size: 1.125rem; line-height: 1.5rem; padding-bottom: 18px; color: #2d2556; font-family: 'ceragr bold'; } .travel_exp_sec .travel_exp_sec_wrap .content_sec p { font-size: 0.875rem; color: #2e2657; margin: 0; font-family: 'ceragr medium'; } @media screen and (max-width: 768px) { .travel_exp_sec .travel_exp_sec_wrap .content_sec { width: 100%; } } .travel_exp_sec .travel_exp_sec_wrap .other_services { width: 33.33%; padding-right: 30px; } .travel_exp_sec .travel_exp_sec_wrap .other_services h5 { padding-bottom: 15px; font-size: 1.125rem; line-height: 1.125rem; padding-bottom: 18px; color: #2d2556; font-family: 'ceragr bold'; } .travel_exp_sec .travel_exp_sec_wrap .other_services span { font-size: 0.875rem; color: #2e2657; margin: 0; font-family: 'ceragr medium'; display: block; line-height: 27px; } @media screen and (max-width: 768px) { .travel_exp_sec .travel_exp_sec_wrap .other_services { width: 100%; } .travel_exp_sec .travel_exp_sec_wrap .other_services:first-child { padding-top: 0; } } .travel_exp_sec .travel_exp_sec_wrap .slick-dots { position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; bottom: -36px; margin-top: 20px; } .travel_exp_sec .travel_exp_sec_wrap .slick-dots li { display: inline-block; margin: 0 3px; } .travel_exp_sec .travel_exp_sec_wrap .slick-dots li button { height: 10px; width: 10px; text-indent: -999px; overflow: hidden; border-radius: 50%; background: #ede8ff; border: none; outline: none; } .travel_exp_sec .travel_exp_sec_wrap .slick-dots li.slick-active button { background: #2d2556; } @media screen and (max-width: 768px) { .travel_exp_sec { padding: 50px 0 70px; } } .team_bld_activity_sec { margin-top: 70px; margin-bottom: 64px; } .team_bld_activity_sec .tradeLeft .tradeFair_heading .section_heading { margin-bottom: 0; } .team_bld_activity_sec .tradeLeft .tradeFair_heading .section_heading h3 { font-size: 1.875rem; font-family: 'ceragr medium'; } @media screen and (max-width: 768px) { .team_bld_activity_sec .tradeLeft .tradeFair_heading .section_heading h2:after, .team_bld_activity_sec .tradeLeft .tradeFair_heading .section_heading .banner_cnt .banner_caption .home-package-price:after, .banner_cnt .banner_caption .team_bld_activity_sec .tradeLeft .tradeFair_heading .section_heading .home-package-price:after { top: -6px; right: -80px; } } .responsive_form { background: #fff; position: fixed; z-index: 1050; top: 0; display: block !important; overflow-y: scroll; height: 100%; width: 100%; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .form_section_wrapper { padding: 50px 0; } .form_section_wrapper .travel_exp_title h2, .form_section_wrapper .travel_exp_title .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .form_section_wrapper .travel_exp_title .home-package-price { font-family: 'ceragr black'; margin-bottom: 30px; } @media screen and (max-width: 768px) { .form_section_wrapper .travel_exp_title h2, .form_section_wrapper .travel_exp_title .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .form_section_wrapper .travel_exp_title .home-package-price { font-size: 1.125rem; margin-bottom: 15px; } } .form_section_wrapper .query_form .form_spacing { padding: 0 20px; } @media screen and (max-width: 768px) { .form_section_wrapper .query_form .form_spacing { padding: 0; } } .form_section_wrapper .query_form .form_spacing .baseBtn { margin-top: 20px; } @media screen and (max-width: 768px) { .form_section_wrapper .query_form .form_spacing .mobile_btnc { position: fixed; bottom: -100%; left: 0; } .form_section_wrapper .query_form .form_spacing .mobile_btnc.slideUp { bottom: 0; } } @media screen and (max-width: 768px) { .form_section_wrapper { transition: all 0.5s ease; -webkit-transition: all 0.5s ease; background: #fff; position: fixed; width: 100%; overflow-x: auto; left: 0; bottom: -100%; height: 100%; z-index: 999; } .form_section_wrapper.slideUp { bottom: 0; } } .form_section_wrapper .close_btn { display: none; } @media screen and (max-width: 768px) { .form_section_wrapper .close_btn { display: block; position: absolute; top: 15px; right: 15px; } } .footer_content_sec { padding: 47px 0; } .footer_content_sec .upcoming_tradefairs_content h5 { font-size: 1.125rem; color: #2d2556; line-height: 22px; margin: 0; padding-bottom: 30px; font-family: 'ceragr bold'; } .packagePriceWrap { width: 30%; padding: 30px; background: #fff; position: absolute; border-radius: 5px; right: 0; z-index: 9; top: -184px; } @media screen and (max-width: 768px) { .packagePriceWrap { width: 100%; position: static; border-radius: 5px; margin: 30px 0 20px 0; padding: 20px; } } .packagePriceWrap .packageName { font-family: 'ceragr medium'; font-size: 1.125rem; color: #2d2556; margin-bottom: 20px; } .packagePriceWrap .packagePrice { font-family: 'ceragr bold'; font-size: 1.5rem; color: #dc3724; margin-bottom: 20px; } .packagePriceWrap .valuedPrice { font-family: 'ceragr medium'; font-size: 1.125rem; color: #b5abdb; margin-bottom: 40px; } @media screen and (max-width: 768px) { .packagePriceWrap .valuedPrice { margin-bottom: 0px; } } .packagePriceWrap .baseBtn { width: 100%; } @media screen and (max-width: 768px) { .packagePriceWrap .baseBtn { display: none; } } .holidayDetailsCard .holidayDetailsInner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .holidayDetailsCard .holidayDetailsInner .vertical_info_slider { width: 48%; margin-bottom: 40px; } @media screen and (max-width: 768px) { .holidayDetailsCard .holidayDetailsInner .vertical_info_slider { width: 100%; } } .tb_banner_gallary { display: none; } .banner_caption_other { position: absolute; bottom: 30px; padding-left: 30px; z-index: 9; } .banner_caption_other h2, .banner_caption_other .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .banner_caption_other .home-package-price { color: #fff; margin-bottom: 25px; } @media only screen and (max-width: 768px) { .banner_caption_other h2, .banner_caption_other .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .banner_caption_other .home-package-price { font-size: 1rem; margin-bottom: 0px; } } .banner_caption_other:before { content: ' '; height: 100%; border-left: 4px solid #fff; position: absolute; height: 100%; left: 0; } @media screen and (max-width: 768px) { .banner_caption_other .baseBtn { display: none; } } @media screen and (max-width: 768px) { .banner_caption_other { bottom: 10px; } } .celebration_sliderwp { margin: 0 -15px; padding-bottom: 60px; } .celebration_sliderwp .slick-arrow { bottom: 0px; } .celebration_sliderwp .slick-next { right: 13px; } .celebration_sliderwp .slick-prev { right: 80px; } .celebration_sliderwp .celebrationCard { margin: 0 15px 0 15px; border-radius: 5px; overflow: hidden; } .celebration_sliderwp .celebrationCard .celebrationBox { background: #fff; position: relative; } .celebration_sliderwp .celebrationCard .celebrationBox img { width: 100%; } .celebration_sliderwp .celebrationCard .celebrationBox .gradient_wrap { position: absolute; background: -webkit-gradient(linear, left top, left bottom, from(rgba(76, 76, 76, 0)), to(#131313)); background: linear-gradient(to bottom, rgba(76, 76, 76, 0) 0%, #131313 100%); bottom: 0px; height: 100px; left: 0px; width: 100%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .celebration_sliderwp .celebrationCard .celebrationBox .gradient_wrap h5 { color: #fff; font-size: 1.125rem; font-family: 'ceragr medium'; display: block; position: absolute; left: 15px; bottom: 20px; } .servicesProvideBox { padding: 50px 0; } .servicesProvideBox h2, .servicesProvideBox .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .servicesProvideBox .home-package-price { color: #2d2556; font-family: 'ceragr black'; margin-bottom: 30px; } @media screen and (max-width: 768px) { .servicesProvideBox .display { display: block; } } .servicesProvideBox .servicesLeft { width: 48%; border-radius: 5px; overflow: hidden; } .servicesProvideBox .servicesLeft img { width: 100%; } @media screen and (max-width: 768px) { .servicesProvideBox .servicesLeft { width: 100%; margin-bottom: 30px; } } .servicesProvideBox .servicesRight { width: 48%; } .servicesProvideBox .servicesRight li { margin-bottom: 10px; font-family: 'ceragr medium'; } .servicesProvideBox .servicesRight li:last-child { margin-bottom: 0; } @media screen and (max-width: 768px) { .servicesProvideBox .servicesRight { width: 100%; } } .knowledgeTourWrap { padding: 0 0 50px; } @media screen and (max-width: 768px) { .knowledgeTourWrap { padding: 0; } } .knowledgeTourWrap .knowledge_title h2, .knowledgeTourWrap .knowledge_title .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .knowledgeTourWrap .knowledge_title .home-package-price { color: #2d2556; font-family: 'ceragr black'; margin-bottom: 25px; } .knowledgeTourWrap .knowledge_sec_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 768px) { .knowledgeTourWrap .knowledge_sec_wrap { display: block; } } .knowledgeTourWrap .knowledge_sec_wrap .other_services { width: 33.33%; text-align: center; padding: 30px; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } @media screen and (max-width: 768px) { .knowledgeTourWrap .knowledge_sec_wrap .other_services { width: 100%; } } .knowledgeTourWrap .knowledge_sec_wrap .other_services i { color: #f4850d; font-size: 2.25rem; margin-bottom: 22px; display: block; } .knowledgeTourWrap .knowledge_sec_wrap .other_services p { margin-bottom: 0; } .knowledgeTourWrap .knowledge_sec_wrap .other_services h5 { padding-bottom: 15px; font-family: 'ceragr medium'; } .knowledgeTourWrap .knowledge_sec_wrap .other_services:hover { -webkit-box-shadow: 0 0 10px rgba(239, 239, 239, 0.7), 0 0 10px rgba(239, 239, 239, 0.7), 0 0 10px rgba(239, 239, 239, 0.7); box-shadow: 0 0 10px rgba(239, 239, 239, 0.7), 0 0 10px rgba(239, 239, 239, 0.7), 0 0 10px rgba(239, 239, 239, 0.7); } .knowledgeToursCard_wrap { margin-top: 60px; } .knowledgeToursCard_wrap .knowledgeToursInner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .knowledgeToursCard_wrap .knowledgeToursInner .slick-list { margin: 0 -20px; } .knowledgeToursCard_wrap .knowledgeToursInner .slick-arrow { bottom: 16px; } .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard { overflow: hidden; border-radius: 5px; background: #fff; width: 48.5%; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; } @media screen and (max-width: 768px) { .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard { width: 100%; } } @media screen and (max-width: 480px) { .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard { display: block; } } .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardImg { width: 50%; position: relative; } @media screen and (max-width: 480px) { .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardImg { width: 100%; } } .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardImg img { width: 100%; height: 100%; } @media screen and (max-width: 768px) { .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardImg img { height: auto; } } .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardDetails { padding: 22px 20px; width: 50%; } @media screen and (max-width: 480px) { .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardDetails { width: 100%; } } .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardDetails h4 { font-family: 'ceragr medium'; margin-bottom: 5px; } .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardDetails .tourDate { font-family: 'ceragr medium'; margin-bottom: 25px; font-size: 0.875rem; color: rgba(45, 37, 86, 0.8); } .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardDetails .destination_ruppe { font-family: 'ceragr medium'; font-size: 1.125rem; word-wrap: break-word; margin-bottom: 22px; } .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardDetails .destination_ruppe span { font-size: 1.5rem; color: #dc3724; font-family: 'ceragr bold'; display: block; } .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardDetails p { margin-bottom: 16px; font-size: 0.875rem; } .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardDetails .CardBtn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1024px) { .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardDetails .CardBtn { display: block; } } @media screen and (max-width: 768px) { .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardDetails .CardBtn { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (max-width: 1024px) { .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardDetails .CardBtn .baseBtn { display: block; margin-bottom: 15px; } } @media screen and (max-width: 768px) { .knowledgeToursCard_wrap .knowledgeToursInner .knowledgeToursCard .CardDetails .CardBtn .baseBtn { display: inline-block; margin: 0; } } .ourteamHeading { margin-top: 100px; margin-bottom: 50px; } .ourteamGroup { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; justify-content: center; max-width: 900px; margin: 0 auto; -ms-flex-wrap: wrap; flex-wrap: wrap; } .ourteamGroup .teamMemberBox { width: 33.3333333%; text-align: center; padding-top: 30px; position: relative; cursor: pointer; } @media screen and (max-width: 640px) { .ourteamGroup .teamMemberBox { width: 50%; } } @media screen and (max-width: 420px) { .ourteamGroup .teamMemberBox { width: 100%; } } .ourteamGroup .teamMemberBox img { margin: 0 auto; } .ourteamGroup .teamMemberBox .teamMemberDetail { display: none; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .ourteamGroup .teamMemberBox:after { transition: all 0.5s ease; -webkit-transition: all 0.5s ease; content: " "; width: 100%; height: 100%; position: absolute; top: 0; } .ourteamGroup .teamMemberBox:before { content: " "; display: none; position: absolute; top: 50%; -webkit-transform: translate(12%, -50%); transform: translate(12%, -50%); border: 5px solid #2d2556; width: 80%; height: 80%; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .ourteamGroup .teamMemberBox:hover:before { display: block; } .ourteamGroup .teamMemberBox:hover:after { content: " "; display: block; background: rgba(255, 255, 255, 0.7); } .ourteamGroup .teamMemberBox:hover .teamMemberDetail { display: block; position: absolute; bottom: 60px; z-index: 1; left: 0; right: 0; margin: 0 auto; } .ourteamGroup .teamMemberBox:hover .teamMemberDetail h5 { font-family: 'ceragr bold'; } .ourteamGroup .teamMemberBox:hover .teamMemberDetail h5 span { display: block; font-family: 'ceragr medium'; font-size: 0.875rem; margin-top: 10px; } .contactus_page_wrap { display: block; } .contactus_page_wrap .tradeFair_heading { text-align: center; width: 100%; padding-top: 60px; } .contactus_page_wrap .contact_text_wrapper { padding-top: 4px; display: -webkit-box; display: -ms-flexbox; display: flex; } .contactus_page_wrap .contact_text_wrapper .map_sec { width: 50%; position: relative; } .contactus_page_wrap .contact_text_wrapper .map_sec .full_map { width: 100%; } @media screen and (max-width: 1280px) { .contactus_page_wrap .contact_text_wrapper .map_sec .full_map { height: 100%; } } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker__st { cursor: pointer; } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker__st .marker_content { display: none; position: absolute; bottom: 45px; width: auto; padding: 10px 20px; background: #fff; height: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-box-shadow: 0px 0px 3px #ddd; box-shadow: 0px 0px 3px #ddd; z-index: 1; } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker__st .marker_content:after { content: ""; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-top: 10px solid #fff; position: absolute; bottom: -15px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker__st .marker_content span { color: #000; font-size: 1rem; font-family: 'ceragr medium'; } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state1 { position: absolute; left: 45%; top: 255px; } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state1:hover .marker_content { display: block; } @media screen and (min-width: 1920px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state1 { top: 335px; } } @media screen and (max-width: 1440px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state1 { top: 240px; left: 43%; } } @media screen and (max-width: 1280px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state1 { left: 44%; top: 210px; } } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state2 { position: absolute; left: 54%; bottom: 100px; } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state2:hover .marker_content { display: block; } @media screen and (max-width: 1440px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state2 { bottom: 100px; } } @media screen and (max-width: 1280px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state2 { bottom: 90px; } } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state3 { position: absolute; left: 62%; bottom: 100px; } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state3:hover .marker_content { display: block; } @media screen and (max-width: 1440px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state3 { bottom: 90px; } } @media screen and (max-width: 1280px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state3 { bottom: 50px; } } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state4 { position: absolute; left: 56%; top: 135px; } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state4:hover .marker_content { display: block; } @media screen and (min-width: 1920px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state4 { top: 190px; } } @media screen and (max-width: 1280px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state4 { left: 55%; top: 115px; } } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state5 { position: absolute; left: 54%; top: 100px; } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state5:hover .marker_content { display: block; } @media screen and (min-width: 1920px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state5 { top: 140px; } } @media screen and (max-width: 1280px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state5 { top: 80px; } } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state6 { position: absolute; left: 49%; bottom: 240px; } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state6:hover .marker_content { display: block; } @media screen and (min-width: 1920px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state6 { bottom: 290px; } } @media screen and (max-width: 1440px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state6 { bottom: 220px; } } @media screen and (max-width: 1280px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state6 { bottom: 200px; } } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state7 { position: absolute; left: 50%; bottom: 200px; } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state7:hover .marker_content { display: block; } @media screen and (min-width: 1920px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state7 { bottom: 240px; } } @media screen and (max-width: 1440px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state7 { bottom: 180px; } } @media screen and (max-width: 1280px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state7 { bottom: 160px; } } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state8 { position: absolute; left: 45%; bottom: 205px; } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state8:hover .marker_content { display: block; } @media screen and (min-width: 1920px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state8 { left: 46%; bottom: 252px; } } @media screen and (max-width: 1440px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state8 { bottom: 195px; } } @media screen and (max-width: 1280px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state8 { bottom: 164px; } } /* added by sm >> */ .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state9 { position: absolute; left: 55%; bottom: 55px; } .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state9:hover .marker_content { display: block; } @media screen and (min-width: 1920px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state9 { left: 55%; bottom: 68px; } } @media screen and (max-width: 1440px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state9 { bottom: 52px; } } @media screen and (max-width: 1280px) { .contactus_page_wrap .contact_text_wrapper .map_sec .ggle_map_marker .marker_state9 { bottom: 44px; } } /* ^^ added by sm */ @media screen and (max-width: 768px) { .contactus_page_wrap .contact_text_wrapper .map_sec { display: none; } } .contactus_page_wrap .contact_text_wrapper .contact_text { width: 50%; padding: 70px 0 0 100px; background: #ede8ff; } @media screen and (max-width: 768px) { .contactus_page_wrap .contact_text_wrapper .contact_text .section_heading { display: block; width: 50%; margin: 0 auto 40px; } .contactus_page_wrap .contact_text_wrapper .contact_text .section_heading img { display: block; margin: 0 auto; } } .contactus_page_wrap .contact_text_wrapper .contact_text h6 { font-size: 1.5rem; color: #2e2657; margin: 0; padding-bottom: 20px; font-family: 'ceragr medium'; } .contactus_page_wrap .contact_text_wrapper .contact_text p { font-size: 1.125rem; color: #2e2657; margin: 0; line-height: normal; padding-bottom: 5px; font-family: 'ceragr medium'; } .contactus_page_wrap .contact_text_wrapper .contact_text .contact_info { padding: 10px 0 100px 0; } .contactus_page_wrap .contact_text_wrapper .contact_text .contact_info span { font-size: 1.125rem; color: #2e2657; margin: 0; padding: 0 40px 0 0; font-family: 'ceragr medium'; display: inline-block; } @media screen and (max-width: 768px) { .contactus_page_wrap .contact_text_wrapper .contact_text .contact_info span { line-height: 1.8; display: block; padding: 0; } } .contactus_page_wrap .contact_text_wrapper .contact_text .contact_info span i { vertical-align: middle; margin-right: 10px; color: #2e2657; } .contactus_page_wrap .contact_text_wrapper .contact_text .contact_info span a { color: #f4850d; } @media screen and (max-width: 1280px) { .contactus_page_wrap .contact_text_wrapper .contact_text .contact_info { padding: 10px 0 80px 0; } } @media screen and (max-width: 768px) { .contactus_page_wrap .contact_text_wrapper .contact_text .contact_info { padding: 10px 0 30px 0; } } .contactus_page_wrap .contact_text_wrapper .contact_text .view_brch a { color: #f4820d; font-size: 1.125rem; font-family: 'ceragr medium'; text-decoration: underline; } @media screen and (max-width: 768px) { .contactus_page_wrap .contact_text_wrapper .contact_text .view_brch { padding-bottom: 40px; } } @media screen and (max-width: 1280px) { .contactus_page_wrap .contact_text_wrapper .contact_text { padding: 40px 0 0 100px; } } @media screen and (max-width: 768px) { .contactus_page_wrap .contact_text_wrapper .contact_text { padding-top: 30px; padding-left: 0; width: 100%; text-align: center; } } @media screen and (max-width: 768px) { .contactus_page_wrap .contact_text_wrapper { padding-top: 5px; } } .branch_sec_wrapper { padding: 50px 0 100px 0; position: relative; } @media screen and (max-width: 768px) { .branch_sec_wrapper { padding: 30px 0; } } .branch_sec_wrapper .tradeFair_heading { text-align: center; padding-bottom: 100px; } @media screen and (max-width: 768px) { .branch_sec_wrapper .tradeFair_heading { padding-bottom: 30px; } } .branch_sec_wrapper h4 { font-size: 1.875rem; font-family: 'ceragr black'; text-align: center; padding-bottom: 74px; } .branch_sec_wrapper .branch_sec_wrap .row { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .branch_sec_wrapper .branch_sec_wrap .row:last-child { margin-bottom: 0; } .branch_sec_wrapper .branch_sec_wrap .row .branch_wrap { width: 33.33%; margin-bottom: 50px; } @media screen and (max-width: 768px) { .branch_sec_wrapper .branch_sec_wrap .row .branch_wrap { width: calc(33.33% - 20px); margin-bottom: 30px; } } @media screen and (max-width: 640px) { .branch_sec_wrapper .branch_sec_wrap .row .branch_wrap { width: calc(50% - 20px); } } @media screen and (max-width: 420px) { .branch_sec_wrapper .branch_sec_wrap .row .branch_wrap { width: 100%; } } .branch_sec_wrapper .branch_sec_wrap .row .branch_wrap h5 { font-size: 1.5rem; font-family: 'ceragr medium'; color: #2e2657; line-height: normal; padding-bottom: 20px; } @media screen and (max-width: 640px) { .branch_sec_wrapper .branch_sec_wrap .row .branch_wrap h5 { font-size: 1.125rem; } } .branch_sec_wrapper .branch_sec_wrap .row .branch_wrap span { display: block; font-size: 1rem; color: #302656; font-family: 'ceragr regular'; line-height: 20px; } @media screen and (max-width: 640px) { .branch_sec_wrapper .branch_sec_wrap .row .branch_wrap span { font-size: 0.875rem; } } .branch_sec_wrapper .branch_sec_wrap .row .branch_wrap p { padding-top: 15px; margin: 0; font-size: 1rem; color: #302656; font-family: 'ceragr medium'; } .branch_sec_wrapper .branch_sec_wrap .row .branch_wrap a { display: block; color: #f4820d; text-decoration: underline; font-size: 1rem; } @media screen and (max-width: 768px) { .branch_sec_wrapper .branch_sec_wrap .row { margin: 0; } } .branch_sec_wrapper:after { content: ' '; height: 11%; position: absolute; bottom: -11%; width: 100%; } .aboutus_slider_wrap .slidr_title { margin-top: 75px; margin-bottom: 20px; } .aboutus_slider_wrap .slidr_title h3 { font-size: 1.875rem; margin: 0; font-family: 'ceragr black'; color: #302656; text-align: center; } /* below one property added by Shashank on 23-2-2024 */ .aboutus_slider_wrap .slidr_title h2 { font-size: 1.875rem; margin: 0; font-family: 'ceragr black'; color: #302656; text-align: center; } .aboutus_slider_wrap .aboutus_slider_full_section { margin-bottom: 82px; position: relative; } .aboutus_slider_wrap .aboutus_slider_full_section .center_slider_text_wrapper { width: 35%; z-index: 1; display: block; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 22px; left: 50%; position: absolute; border-radius: 3px; -webkit-box-shadow: 0px 0px 7px #777; box-shadow: 0px 0px 7px #777; background: #faf9ff; } .aboutus_slider_wrap .aboutus_slider_full_section .center_slider_text_wrapper .content_wrapper { padding: 22px 0; overflow: hidden; } .aboutus_slider_wrap .aboutus_slider_full_section .center_slider_text_wrapper .content_wrapper .text_wrap { padding: 0 70px; text-align: center; } .aboutus_slider_wrap .aboutus_slider_full_section .center_slider_text_wrapper .content_wrapper .text_wrap .title { font-size: 2.25rem; color: #f6a309; padding-top: 65px; margin: 0; padding-bottom: 40px; line-height: normal; font-family: 'ceragr black'; } @media screen and (max-width: 1440px) { .aboutus_slider_wrap .aboutus_slider_full_section .center_slider_text_wrapper .content_wrapper .text_wrap .title { padding-top: 35px; } } @media screen and (max-width: 1280px) { .aboutus_slider_wrap .aboutus_slider_full_section .center_slider_text_wrapper .content_wrapper .text_wrap .title { padding-top: 0; } } @media screen and (max-width: 768px) { .aboutus_slider_wrap .aboutus_slider_full_section .center_slider_text_wrapper .content_wrapper .text_wrap .title { padding-top: 25px; padding-bottom: 30px; } } .aboutus_slider_wrap .aboutus_slider_full_section .center_slider_text_wrapper .content_wrapper .text_wrap .content { font-size: 1.125rem; color: rgba(46, 38, 87, 0.8); margin: 0; line-height: 28px; padding-bottom: 75px; font-family: 'ceragr medium'; } @media screen and (max-width: 1440px) { .aboutus_slider_wrap .aboutus_slider_full_section .center_slider_text_wrapper .content_wrapper .text_wrap .content { padding-bottom: 25px; } } @media screen and (max-width: 1280px) { .aboutus_slider_wrap .aboutus_slider_full_section .center_slider_text_wrapper .content_wrapper .text_wrap .content { padding-bottom: 0; } } @media screen and (max-width: 768px) { .aboutus_slider_wrap .aboutus_slider_full_section .center_slider_text_wrapper .content_wrapper .text_wrap .content { padding-bottom: 30px; } } @media screen and (max-width: 768px) { .aboutus_slider_wrap .aboutus_slider_full_section .center_slider_text_wrapper .content_wrapper .text_wrap { padding: 0 15px; } } @media screen and (max-width: 768px) { .aboutus_slider_wrap .aboutus_slider_full_section .center_slider_text_wrapper { width: 90%; position: relative; } } .aboutus_slider_wrap .aboutus_slider_full_section .full_slider_img { padding-top: 13%; } @media screen and (max-width: 1920px) { .aboutus_slider_wrap .aboutus_slider_full_section .full_slider_img { padding-top: 9%; } } @media screen and (max-width: 1600px) { .aboutus_slider_wrap .aboutus_slider_full_section .full_slider_img { padding-top: 15%; } } @media screen and (max-width: 768px) { .aboutus_slider_wrap .aboutus_slider_full_section .full_slider_img { display: none; } } .aboutus_slider_wrap .aboutus_text { padding-bottom: 73px; /*text-align: center;*/ } .aboutus_slider_wrap .aboutus_text p { margin: 0; font-size: 1.125rem; color: #6b6783; font-family: 'ceragr medium'; line-height: 30px; } @media screen and (max-width: 768px) { .aboutus_slider_wrap .aboutus_text p { font-size: 1rem; line-height: 20px; } } .thankyou_main { padding: 100px 0; } .thankyou_main .thankyou_box { text-align: center; } .thankyou_main .thankyou_box .thankyou_img { margin-bottom: 50px; } .thankyou_main .thankyou_box .thankyou_img img { display: inline-block; } .thankyou_main .thankyou_box h2, .thankyou_main .thankyou_box .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .thankyou_main .thankyou_box .home-package-price { font-family: 'ceragr medium'; margin-bottom: 40px; } @media screen and (max-width: 420px) { .thankyou_main .thankyou_box h2, .thankyou_main .thankyou_box .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .thankyou_main .thankyou_box .home-package-price { font-size: 1.5rem; } } .thankyou_main .thankyou_box h5 { font-family: 'ceragr medium'; margin-bottom: 30px; } @media screen and (max-width: 420px) { .thankyou_main .thankyou_box h5 { font-size: 1rem; } } .search_result_main { padding: 72px 0 50px 0; } .search_result_error { font-family: 'ceragr medium'; } .search_result_heading { margin-bottom: 30px; } .search_result_heading h2, .search_result_heading .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .search_result_heading .home-package-price { font-family: 'ceragr black'; } @media screen and (max-width: 360px) { .search_result_heading h2, .search_result_heading .banner_cnt .banner_caption .home-package-price, .banner_cnt .banner_caption .search_result_heading .home-package-price { font-size: 1.125rem; } } .search_result_heading h2 span, .search_result_heading .banner_cnt .banner_caption .home-package-price span, .banner_cnt .banner_caption .search_result_heading .home-package-price span { font-family: 'ceragr medium'; } .search_result_box { border: 1px solid #ede8ff; padding: 20px; margin-bottom: 30px; border-radius: 5px; } .search_result_box h5 { font-family: 'ceragr medium'; color: #000; margin-bottom: 20px; } .search_result_box p { margin-bottom: 10px; } .search_result_error { color: #dc3724; margin-bottom: 10px; } @media screen and (max-width: 768px) { .tibroAlbum { margin-bottom: 40px; } } .tibroAlbum .tibroAlbumTitle { text-align: center; padding-top: 90px; } @media screen and (max-width: 640px) { .tibroAlbum .tibroAlbumTitle { padding-top: 50px; } } .tibroAlbum .tibroAlbumTitle h1 { font-family: 'ceragr black'; position: relative; display: inline-block; margin-bottom: 25px; } @media screen and (max-width: 640px) { .tibroAlbum .tibroAlbumTitle h1 { font-size: 2.25rem; } } .tibroAlbum .tibroAlbumTitle h1:before { content: ' '; background: url("/images/tibro-icon.png"); width: 66px; height: 41px; position: absolute; right: -24px; top: -24px; } @media screen and (max-width: 640px) { .tibroAlbum .tibroAlbumTitle h1:before { background-size: 100%; background-repeat: no-repeat; width: 53px; right: -29px; } } @media screen and (max-width: 480px) { .tibroAlbum .tibroAlbumTitle h1:before { width: 32px; right: -12px; top: -16px; } } .tibroAlbumWrap { padding: 20px 0 50px; } @media screen and (max-width: 768px) { .tibroAlbumWrap .filters_wrap { overflow-x: scroll; overflow-y: hidden; width: 100%; height: 48px; max-width: -moz-fit-content; max-width: -webkit-fit-content; margin-bottom: 15px; } } .tibroAlbumWrap #filters { margin: 1% auto; width: 100%; max-width: 55%; padding: 0; list-style: none; } @media screen and (max-width: 768px) { .tibroAlbumWrap #filters { width: 858px; max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; } } .tibroAlbumWrap #filters li { float: left; } .tibroAlbumWrap #filters li span { display: block; padding: 5px 20px; text-decoration: none; color: #f4850d; font-size: 1.125rem; border-bottom: 4px solid #ede8ff; font-family: 'ceragr medium'; cursor: pointer; } .tibroAlbumWrap #filters li span.active { border-bottom: 4px solid #f4850d; color: #2d2556; } .tibroAlbumWrap #portfoliolist .portfolio { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width: 23%; margin: 1%; float: left; display: none; overflow: hidden; position: relative; } @media screen and (max-width: 768px) { .tibroAlbumWrap #portfoliolist .portfolio { width: 48%; } } @media screen and (max-width: 420px) { .tibroAlbumWrap #portfoliolist .portfolio { width: 100%; margin: 10px 0; } } .tibroAlbumWrap #portfoliolist .portfolio:hover .label { bottom: 0; } .tibroAlbumWrap #portfoliolist .portfolio:hover img { top: -30px; } .tibroAlbumWrap #portfoliolist .portfolio img { width: 100%; position: relative; top: 0; -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); } @media screen and (max-width: 768px) { .tibroAlbumWrap #portfoliolist .portfolio img { -webkit-transition: none; transition: none; } } .tibroAlbumWrap #portfoliolist .portfolio .label { position: absolute; width: 100%; height: auto; bottom: -100%; left: 0; padding: 0; top: auto; -webkit-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1); } @media screen and (max-width: 768px) { .tibroAlbumWrap #portfoliolist .portfolio .label { display: none; } } .tibroAlbumWrap #portfoliolist .portfolio .label-bg { background: #2d2556; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .tibroAlbumWrap #portfoliolist .portfolio .label-text { position: relative; z-index: 500; padding: 5px 10px; } .tibroAlbumWrap #portfoliolist .portfolio .label-text p { margin: 0; font-family: 'ceragr regular'; color: #fff; font-size: 0.875rem; } .tibroAlbumWrap #portfoliolist .portfolio .text-category { display: block; font-size: 9px; } .tibroAlbumWrap .portfolio-wrapper { overflow: hidden; position: relative !important; background: #fff; cursor: pointer; } .fancybox-image, .fancybox-inner, .fancybox-nav, .fancybox-nav span, .fancybox-outer, .fancybox-skin, .fancybox-tmp, .fancybox-wrap, .fancybox-wrap iframe, .fancybox-wrap object { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 8020; } .fancybox-skin { position: relative; text-shadow: none; padding: 0 !important; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-inner, .fancybox-outer { position: relative; } .fancybox-type-iframe .fancybox-inner { overflow: hidden; -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-iframe, .fancybox-image { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url("/images/fancybox_loading.gif") center center no-repeat; } .fancybox-close { background-image: url("/images/fancy_close.png"); position: absolute; top: 20px; right: 20px; width: 34px; height: 34px; cursor: pointer; z-index: 8040; } @media screen and (max-width: 768px) { .fancybox-close { background-size: 100%; width: 20px; height: 20px; } } @media screen and (max-width: 480px) { .fancybox-close { top: 10px; right: 10px; } } .fancybox-prev { left: 0; } .fancybox-prev span { background-image: url("/images/tb_prev.png"); background-repeat: no-repeat; right: 103px; z-index: 9999; } @media screen and (max-width: 768px) { .fancybox-prev span { background-size: 100%; right: 55px; } } .fancybox-prev span:hover { opacity: 0.8; } .fancybox-next { right: 0; } .fancybox-next span { background-image: url("/images/tb_next.png"); background-repeat: no-repeat; right: 40px; z-index: 9999; } @media screen and (max-width: 768px) { .fancybox-next span { background-size: 100%; right: 20px; } } .fancybox-next span:hover { opacity: 0.8; } .fancybox-nav { position: absolute; top: 0; width: 100%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url("/images/blank.gif"); /* helps IE */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); pointer-events: none; } .fancybox-nav span { pointer-events: auto; position: absolute; bottom: 45px; width: 36px; height: 34px; cursor: pointer; visibility: visible; } @media screen and (max-width: 768px) { .fancybox-nav span { width: 20px; height: 20px; bottom: 32px; } } @media screen and (max-width: 480px) { .fancybox-nav span { bottom: 27px; } } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: visible !important; width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url("/images/fancybox_overlay.png"); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; background: rgba(0, 0, 0, 0.75); } /* Title helper */ .fancybox-title { visibility: hidden; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; z-index: 8050; text-align: left; width: 100%; } .fancybox-title-float-wrap .child { display: inline-block; padding: 20px; background: #fff; color: #000; line-height: 1.5; font-family: 'ceragr medium'; white-space: normal; width: 100%; } @media screen and (max-width: 768px) { .fancybox-title-float-wrap .child { padding: 10px 20px; } } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, 0.8); } /*Retina graphics!*/ .career_banner_sec .banner img { width: 100%; } .career_section_wrapper .career_heading { padding-bottom: 50px !important; } .career_section_wrapper .career__wrap .career_blog_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; /* justify-content: space-between; */ -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; } .career_section_wrapper .career__wrap .career_blog_wrapper .career_content { width: calc(96% / 3); margin: 0 2% 2% 0; padding: 50px 25px 40px 25px; text-align: center; border-radius: 5px; -webkit-box-shadow: 0px 0px 15px #999; box-shadow: 0px 0px 15px #999; } .career_section_wrapper .career__wrap .career_blog_wrapper .career_content:nth-child(3n) { margin-right: 0; } .career_section_wrapper .career__wrap .career_blog_wrapper .career_content h5 { color: #2d2556; font-size: 1.5rem; font-family: 'ceragr medium'; margin-bottom: 25px; } .career_section_wrapper .career__wrap .career_blog_wrapper .career_content p { color: #302656; font-size: 1rem; font-family: 'ceragr regular'; } .career_section_wrapper .career__wrap .career_blog_wrapper .career_content button { margin-top: 10px; } @media (max-width: 768px) { .career_section_wrapper .career__wrap .career_blog_wrapper .career_content { width: 100%; margin-bottom: 20px; } } .career_section_wrapper .career__wrap .load_more_btn { margin-top: 30px; } .tradeFair_modal .tradeFair_modal_form .fileUpload { opacity: 0; position: absolute; top: 0; z-index: 1; width: 100%; height: 100%; } @media screen and (max-width: 768px) { .tradeFair_modal .tradeFair_modal_form .fileUpload { z-index: -1; } } .tradeFair_modal .tradeFair_modal_form .tag_ling { position: absolute; bottom: 0; font-size: 12px; color: #707070; } .tradeFair_modal .errorMessage { position: absolute; bottom: -26px; font-size: 12px; color: #d50000; } /* career Details css */ .career_details_section_wrapper .career_details_heading .section_heading { margin-bottom: 20px !important; } .career_details_section_wrapper .career_details_heading .section_heading h4 { text-align: left !important; font-size: 5rem; padding-bottom: 0; } @media (max-width: 768px) { .career_details_section_wrapper .career_details_heading .section_heading h4 { font-size: 2.25rem; } } .career_details_section_wrapper .career_details_heading .apply_section .apply_section_field { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 10px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .career_details_section_wrapper .career_details_heading .apply_section .apply_section_field p { margin: 0; font-size: 1.125rem; color: #6b6783; font-family: 'ceragr medium'; } .career_details_section_wrapper .career_details_heading .apply_section .apply_section_field p span { margin-right: 10px; vertical-align: text-top; } .career_details_section_wrapper .career_details_content_wrap .career_details_content { margin-top: 30px; } .career_details_section_wrapper .career_details_content_wrap .career_details_content h5 { font-size: 1.125rem; color: #6b6783; font-family: 'ceragr black'; line-height: 30px; } .career_details_section_wrapper .career_details_content_wrap .career_details_content p { font-size: 1.125rem; color: #6b6783; font-family: 'ceragr medium'; } .career_details_section_wrapper .career_details_content_wrap .career_details_content ul li { padding-left: 15px; position: relative; font-size: 1.125rem; color: #6b6783; font-family: 'ceragr medium'; } .career_details_section_wrapper .career_details_content_wrap .career_details_content ul li:before { position: absolute; content: ''; width: 5px; height: 5px; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; background: #6b6783; } /* ##### CSS BY SHANKS ##### */ @media only screen and (max-width: 768px) { body{padding-top: 0px;} } /* trade fair page visa tab table border */ .wrapper .tradefairs_details_wrap .tb_responsive_container .tradefairsDetailsTab .tradefairs_left .mdl-tabs__panel.shanks-custom-border table { width: 100%; border: 1px solid black; border-collapse: separate; } /* [CLASS-1 starts here] ***sitewide h1 header tags*** new structure by shanks */ .headerp1 { font-family: 'ceragr medium', sans-serif; color: #f48b0d; font-size: 2.25rem; line-height: 30px; display: block; padding-bottom: 15px; } .headerp2 { font-family: 'ceragr black', sans-serif; color: #2d2556; font-size: 5rem; position: relative; display: inline-block; } .headerp2::after{ width: 50px; height: 32px; position: absolute; right: -53px; top: 20px !important; content: " "; background-size: cover; } @media only screen and (max-width: 768px) { .headerp1 {font-size: 2rem;padding-bottom: 0px;} .headerp2 {font-size: 2rem;} } /* [CLASS-1 ends here] sitewide h1 header tags new structure by shanks */ /* [CLASS-2 starts here] ***trade fair main page*** - class added by Shanks for banner div to show grey band at the bottom */ .banneroverlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 140px; /* Adjust height as needed */ background-color: rgba(0, 0, 0, 0.5); /* Dark transparent grey */ } /* For mobile devices */ @media only screen and (max-width: 768px) { .banneroverlay.mobile { height: 90px; /* Adjusted height for mobile devices */ } } .traFairCard .CardDetails h3{ font-size: 1.5rem !important; font-family: 'ceragr medium'; margin-bottom: 20px !important; } /* [CLASS-2 ends here] trade fair page - class added by Shanks for banner div to show grey band at the bottom */ /* [CLASS-3 starts here] trade fair details page - class added by Shanks for various styling of this page */ .mdl-tabs__tab{ padding: 0 15px 0 15px !important; } h1{font-size:2.2rem;font-weight: 600;} h2{font-size: 1.5rem;padding: 20px 0;} h3{font-size: 1.3rem;padding: 10px 0;} .accordionheader2{padding: 0 0 !important;font-size: 1rem !important;} .accordion-header { background-color: #2b2354; padding: 10px; cursor: pointer; color:#fff; border: 1px solid #fff; font-size:1rem !important; display: flex; } .accordion-content { padding: 10px; display: none; } .active .accordion-content { display: block; } .accordion-toggle { margin-right: 10px; /* Adjust spacing as needed */ cursor: pointer; /* Change cursor to pointer on hover */ } .accordion-toggle::before { content: "+"; /* Default icon */ } .active .accordion-toggle::before { content: "-"; /* Minus icon when active */ } .tradeformheader{ border-left: 4px solid #f4850d; font-family: 'ceragr regular'; padding: 18px; font-size: 1.5rem; } .whyUsContent{ font-size: 1.125rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; /* Ensure the container div takes full height */ } .whyUsContent p { margin-top: auto; /* Pushes the paragraph to the bottom */ } .whyUsTradefairs h2 { font-family: 'ceragr regular'; color: #000; border-left: 5px solid #f4850d; padding-left: 20px; margin-bottom: 30px; font-size: 1.5rem; padding:0 0 0 15px !important; } .bullet-list-tick { list-style-type: none; /* Remove default bullets */ font-size: 0.875rem; } .bullet-list-tick li::before { content: "\2713"; /* Unicode character for checkmark */ display: inline-block; width: 1em; /* Adjust size as needed */ margin-right: 0.5em; /* Space between checkmark and text */ color:green; } .bullet-list-cross { list-style-type: none; /* Remove default bullets */ font-size: 0.875rem; } .bullet-list-cross li::before { content: "\2717"; /* Unicode character for checkmark */ display: inline-block; width: 1em; /* Adjust size as needed */ margin-right: 0.5em; /* Space between checkmark and text */ color:red; } .bullet-list-bonus { list-style-type: none; /* Remove default bullets */ font-size: 0.875rem; } .bullet-list-bonus li::before { content: "\2605"; /* Unicode character for checkmark */ display: inline-block; width: 1em; /* Adjust size as needed */ margin-right: 0.5em; /* Space between checkmark and text */ color:gold; } .address-box { border: 2px solid #f1b772; /* Light blue border */ border-radius: 10px; /* Rounded corners */ padding: 15px; /* Padding around the text */ width: 100% !important; } .announcement-box { border: 1px solid #e3e1e9; background-color: #f4f2ff; padding: 10px; margin: 20px; display: flex; align-items: center; font-size: 18px; border-radius: 3px; /* Add this line for curvy edges */ } /* [CLASS-3 ends here] trade fair details page - class added by Shanks for various styling of this page */ /* ##### CSS BY SHANKS ##### */ .testimonial_img_container{ width: 100%; max-width: 1200px; margin: 0 auto; } @media only screen and (max-width: 768px) { .testimonial_img_container { max-width: 750px; padding: 0 20px; } }