, or .\n\n.list-group {\n // No need to set list-style: none; since .list-group-item is block level\n padding-left: 0; // reset padding because ul and ol\n margin-bottom: 20px;\n}\n\n\n// Individual list items\n//\n// Use on `li`s or `div`s within the `.list-group` parent.\n\n.list-group-item {\n position: relative;\n display: block;\n padding: 10px 15px;\n // Place the border on the list items and negative margin up for better styling\n margin-bottom: -1px;\n background-color: $list-group-bg;\n border: 1px solid $list-group-border;\n\n // Round the first and last items\n &:first-child {\n @include border-top-radius($list-group-border-radius);\n }\n &:last-child {\n margin-bottom: 0;\n @include border-bottom-radius($list-group-border-radius);\n }\n\n // Disabled state\n &.disabled,\n &.disabled:hover,\n &.disabled:focus {\n color: $list-group-disabled-color;\n cursor: $cursor-disabled;\n background-color: $list-group-disabled-bg;\n\n // Force color to inherit for custom content\n .list-group-item-heading {\n color: inherit;\n }\n .list-group-item-text {\n color: $list-group-disabled-text-color;\n }\n }\n\n // Active class on item itself, not parent\n &.active,\n &.active:hover,\n &.active:focus {\n z-index: 2; // Place active items above their siblings for proper border styling\n color: $list-group-active-color;\n background-color: $list-group-active-bg;\n border-color: $list-group-active-border;\n\n // Force color to inherit for custom content\n .list-group-item-heading,\n .list-group-item-heading > small,\n .list-group-item-heading > .small {\n color: inherit;\n }\n .list-group-item-text {\n color: $list-group-active-text-color;\n }\n }\n}\n\n\n// Interactive list items\n//\n// Use anchor or button elements instead of `li`s or `div`s to create interactive items.\n// Includes an extra `.active` modifier class for showing selected items.\n\na.list-group-item,\nbutton.list-group-item {\n color: $list-group-link-color;\n\n .list-group-item-heading {\n color: $list-group-link-heading-color;\n }\n\n // Hover state\n &:hover,\n &:focus {\n color: $list-group-link-hover-color;\n text-decoration: none;\n background-color: $list-group-hover-bg;\n }\n}\n\nbutton.list-group-item {\n width: 100%;\n text-align: left;\n}\n\n\n// Contextual variants\n//\n// Add modifier classes to change text and background color on individual items.\n// Organizationally, this must come after the `:hover` states.\n\n@include list-group-item-variant(success, $state-success-bg, $state-success-text);\n@include list-group-item-variant(info, $state-info-bg, $state-info-text);\n@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);\n@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);\n\n\n// Custom content options\n//\n// Extra classes for creating well-formatted content within `.list-group-item`s.\n\n.list-group-item-heading {\n margin-top: 0;\n margin-bottom: 5px;\n}\n.list-group-item-text {\n margin-bottom: 0;\n line-height: 1.3;\n}\n","// List Groups\n\n@mixin list-group-item-variant($state, $background, $color) {\n .list-group-item-#{$state} {\n color: $color;\n background-color: $background;\n\n // [converter] extracted a&, button& to a.list-group-item-#{$state}, button.list-group-item-#{$state}\n }\n\n a.list-group-item-#{$state},\n button.list-group-item-#{$state} {\n color: $color;\n\n .list-group-item-heading {\n color: inherit;\n }\n\n &:hover,\n &:focus {\n color: $color;\n background-color: darken($background, 5%);\n }\n &.active,\n &.active:hover,\n &.active:focus {\n color: #fff;\n background-color: $color;\n border-color: $color;\n }\n }\n}\n","//\n// Panels\n// --------------------------------------------------\n\n\n// Base class\n.panel {\n margin-bottom: $line-height-computed;\n background-color: $panel-bg;\n border: 1px solid transparent;\n border-radius: $panel-border-radius;\n @include box-shadow(0 1px 1px rgba(0, 0, 0, .05));\n}\n\n// Panel contents\n.panel-body {\n padding: $panel-body-padding;\n @include clearfix;\n}\n\n// Optional heading\n.panel-heading {\n padding: $panel-heading-padding;\n border-bottom: 1px solid transparent;\n @include border-top-radius(($panel-border-radius - 1));\n\n > .dropdown .dropdown-toggle {\n color: inherit;\n }\n}\n\n// Within heading, strip any `h*` tag of its default margins for spacing.\n.panel-title {\n margin-top: 0;\n margin-bottom: 0;\n font-size: ceil(($font-size-base * 1.125));\n color: inherit;\n\n > a,\n > small,\n > .small,\n > small > a,\n > .small > a {\n color: inherit;\n }\n}\n\n// Optional footer (stays gray in every modifier class)\n.panel-footer {\n padding: $panel-footer-padding;\n background-color: $panel-footer-bg;\n border-top: 1px solid $panel-inner-border;\n @include border-bottom-radius(($panel-border-radius - 1));\n}\n\n\n// List groups in panels\n//\n// By default, space out list group content from panel headings to account for\n// any kind of custom content between the two.\n\n.panel {\n > .list-group,\n > .panel-collapse > .list-group {\n margin-bottom: 0;\n\n .list-group-item {\n border-width: 1px 0;\n border-radius: 0;\n }\n\n // Add border top radius for first one\n &:first-child {\n .list-group-item:first-child {\n border-top: 0;\n @include border-top-radius(($panel-border-radius - 1));\n }\n }\n\n // Add border bottom radius for last one\n &:last-child {\n .list-group-item:last-child {\n border-bottom: 0;\n @include border-bottom-radius(($panel-border-radius - 1));\n }\n }\n }\n > .panel-heading + .panel-collapse > .list-group {\n .list-group-item:first-child {\n @include border-top-radius(0);\n }\n }\n}\n// Collapse space between when there's no additional content.\n.panel-heading + .list-group {\n .list-group-item:first-child {\n border-top-width: 0;\n }\n}\n.list-group + .panel-footer {\n border-top-width: 0;\n}\n\n// Tables in panels\n//\n// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and\n// watch it go full width.\n\n.panel {\n > .table,\n > .table-responsive > .table,\n > .panel-collapse > .table {\n margin-bottom: 0;\n\n caption {\n padding-right: $panel-body-padding;\n padding-left: $panel-body-padding;\n }\n }\n // Add border top radius for first one\n > .table:first-child,\n > .table-responsive:first-child > .table:first-child {\n @include border-top-radius(($panel-border-radius - 1));\n\n > thead:first-child,\n > tbody:first-child {\n > tr:first-child {\n border-top-left-radius: ($panel-border-radius - 1);\n border-top-right-radius: ($panel-border-radius - 1);\n\n td:first-child,\n th:first-child {\n border-top-left-radius: ($panel-border-radius - 1);\n }\n td:last-child,\n th:last-child {\n border-top-right-radius: ($panel-border-radius - 1);\n }\n }\n }\n }\n // Add border bottom radius for last one\n > .table:last-child,\n > .table-responsive:last-child > .table:last-child {\n @include border-bottom-radius(($panel-border-radius - 1));\n\n > tbody:last-child,\n > tfoot:last-child {\n > tr:last-child {\n border-bottom-right-radius: ($panel-border-radius - 1);\n border-bottom-left-radius: ($panel-border-radius - 1);\n\n td:first-child,\n th:first-child {\n border-bottom-left-radius: ($panel-border-radius - 1);\n }\n td:last-child,\n th:last-child {\n border-bottom-right-radius: ($panel-border-radius - 1);\n }\n }\n }\n }\n > .panel-body + .table,\n > .panel-body + .table-responsive,\n > .table + .panel-body,\n > .table-responsive + .panel-body {\n border-top: 1px solid $table-border-color;\n }\n > .table > tbody:first-child > tr:first-child th,\n > .table > tbody:first-child > tr:first-child td {\n border-top: 0;\n }\n > .table-bordered,\n > .table-responsive > .table-bordered {\n border: 0;\n > thead,\n > tbody,\n > tfoot {\n > tr {\n > th:first-child,\n > td:first-child {\n border-left: 0;\n }\n > th:last-child,\n > td:last-child {\n border-right: 0;\n }\n }\n }\n > thead,\n > tbody {\n > tr:first-child {\n > td,\n > th {\n border-bottom: 0;\n }\n }\n }\n > tbody,\n > tfoot {\n > tr:last-child {\n > td,\n > th {\n border-bottom: 0;\n }\n }\n }\n }\n > .table-responsive {\n margin-bottom: 0;\n border: 0;\n }\n}\n\n\n// Collapsible panels (aka, accordion)\n//\n// Wrap a series of panels in `.panel-group` to turn them into an accordion with\n// the help of our collapse JavaScript plugin.\n\n.panel-group {\n margin-bottom: $line-height-computed;\n\n // Tighten up margin so it's only between panels\n .panel {\n margin-bottom: 0;\n border-radius: $panel-border-radius;\n\n + .panel {\n margin-top: 5px;\n }\n }\n\n .panel-heading {\n border-bottom: 0;\n\n + .panel-collapse > .panel-body,\n + .panel-collapse > .list-group {\n border-top: 1px solid $panel-inner-border;\n }\n }\n\n .panel-footer {\n border-top: 0;\n + .panel-collapse .panel-body {\n border-bottom: 1px solid $panel-inner-border;\n }\n }\n}\n\n\n// Contextual variations\n.panel-default {\n @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border);\n}\n.panel-primary {\n @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);\n}\n.panel-success {\n @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border);\n}\n.panel-info {\n @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);\n}\n.panel-warning {\n @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border);\n}\n.panel-danger {\n @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border);\n}\n","// Panels\n\n@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {\n border-color: $border;\n\n & > .panel-heading {\n color: $heading-text-color;\n background-color: $heading-bg-color;\n border-color: $heading-border;\n\n + .panel-collapse > .panel-body {\n border-top-color: $border;\n }\n .badge {\n color: $heading-bg-color;\n background-color: $heading-text-color;\n }\n }\n & > .panel-footer {\n + .panel-collapse > .panel-body {\n border-bottom-color: $border;\n }\n }\n}\n","// Embeds responsive\n//\n// Credit: Nicolas Gallagher and SUIT CSS.\n\n.embed-responsive {\n position: relative;\n display: block;\n height: 0;\n padding: 0;\n overflow: hidden;\n\n .embed-responsive-item,\n iframe,\n embed,\n object,\n video {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 0;\n }\n}\n\n// Modifier class for 16:9 aspect ratio\n.embed-responsive-16by9 {\n padding-bottom: 56.25%;\n}\n\n// Modifier class for 4:3 aspect ratio\n.embed-responsive-4by3 {\n padding-bottom: 75%;\n}\n","//\n// Wells\n// --------------------------------------------------\n\n\n// Base class\n.well {\n min-height: 20px;\n padding: 19px;\n margin-bottom: 20px;\n background-color: $well-bg;\n border: 1px solid $well-border;\n border-radius: $border-radius-base;\n @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05));\n blockquote {\n border-color: #ddd;\n border-color: rgba(0, 0, 0, .15);\n }\n}\n\n// Sizes\n.well-lg {\n padding: 24px;\n border-radius: $border-radius-large;\n}\n.well-sm {\n padding: 9px;\n border-radius: $border-radius-small;\n}\n","//\n// Close icons\n// --------------------------------------------------\n\n\n.close {\n float: right;\n font-size: ($font-size-base * 1.5);\n font-weight: $close-font-weight;\n line-height: 1;\n color: $close-color;\n text-shadow: $close-text-shadow;\n @include opacity(.2);\n\n &:hover,\n &:focus {\n color: $close-color;\n text-decoration: none;\n cursor: pointer;\n @include opacity(.5);\n }\n\n // [converter] extracted button& to button.close\n}\n\n// Additional properties for button version\n// iOS requires the button element instead of an anchor tag.\n// If you want the anchor version, it requires `href=\"#\"`.\n// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile\nbutton.close {\n padding: 0;\n cursor: pointer;\n background: transparent;\n border: 0;\n -webkit-appearance: none;\n appearance: none;\n}\n","//\n// Modals\n// --------------------------------------------------\n\n// .modal-open - body class for killing the scroll\n// .modal - container to scroll within\n// .modal-dialog - positioning shell for the actual modal\n// .modal-content - actual modal w/ bg and corners and shit\n\n// Kill the scroll on the body\n.modal-open {\n overflow: hidden;\n}\n\n// Container that the modal scrolls within\n.modal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: $zindex-modal;\n display: none;\n overflow: hidden;\n -webkit-overflow-scrolling: touch;\n\n // Prevent Chrome on Windows from adding a focus outline. For details, see\n // https://github.com/twbs/bootstrap/pull/10951.\n outline: 0;\n\n // When fading in the modal, animate it to slide down\n &.fade .modal-dialog {\n @include translate(0, -25%);\n @include transition-transform(0.3s ease-out);\n }\n &.in .modal-dialog { @include translate(0, 0); }\n}\n.modal-open .modal {\n overflow-x: hidden;\n overflow-y: auto;\n}\n\n// Shell div to position the modal with bottom padding\n.modal-dialog {\n position: relative;\n width: auto;\n margin: 10px;\n}\n\n// Actual modal\n.modal-content {\n position: relative;\n background-color: $modal-content-bg;\n background-clip: padding-box;\n border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc)\n border: 1px solid $modal-content-border-color;\n border-radius: $border-radius-large;\n @include box-shadow(0 3px 9px rgba(0, 0, 0, .5));\n // Remove focus outline from opened modal\n outline: 0;\n}\n\n// Modal background\n.modal-backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: $zindex-modal-background;\n background-color: $modal-backdrop-bg;\n // Fade for backdrop\n &.fade { @include opacity(0); }\n &.in { @include opacity($modal-backdrop-opacity); }\n}\n\n// Modal header\n// Top section of the modal w/ title and dismiss\n.modal-header {\n padding: $modal-title-padding;\n border-bottom: 1px solid $modal-header-border-color;\n @include clearfix;\n}\n// Close icon\n.modal-header .close {\n margin-top: -2px;\n}\n\n// Title text within header\n.modal-title {\n margin: 0;\n line-height: $modal-title-line-height;\n}\n\n// Modal body\n// Where all modal content resides (sibling of .modal-header and .modal-footer)\n.modal-body {\n position: relative;\n padding: $modal-inner-padding;\n}\n\n// Footer (for actions)\n.modal-footer {\n padding: $modal-inner-padding;\n text-align: right; // right align buttons\n border-top: 1px solid $modal-footer-border-color;\n @include clearfix; // clear it in case folks use .pull-* classes on buttons\n\n // Properly space out buttons\n .btn + .btn {\n margin-bottom: 0; // account for input[type=\"submit\"] which gets the bottom margin like all other inputs\n margin-left: 5px;\n }\n // but override that for button groups\n .btn-group .btn + .btn {\n margin-left: -1px;\n }\n // and override it for block buttons as well\n .btn-block + .btn-block {\n margin-left: 0;\n }\n}\n\n// Measure scrollbar width for padding body during modal show/hide\n.modal-scrollbar-measure {\n position: absolute;\n top: -9999px;\n width: 50px;\n height: 50px;\n overflow: scroll;\n}\n\n// Scale up the modal\n@media (min-width: $screen-sm-min) {\n // Automatically set modal's width for larger viewports\n .modal-dialog {\n width: $modal-md;\n margin: 30px auto;\n }\n .modal-content {\n @include box-shadow(0 5px 15px rgba(0, 0, 0, .5));\n }\n\n // Modal sizes\n .modal-sm { width: $modal-sm; }\n}\n\n@media (min-width: $screen-md-min) {\n .modal-lg { width: $modal-lg; }\n}\n","//\n// Tooltips\n// --------------------------------------------------\n\n\n// Base class\n.tooltip {\n position: absolute;\n z-index: $zindex-tooltip;\n display: block;\n // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n @include reset-text;\n font-size: $font-size-small;\n\n @include opacity(0);\n\n &.in { @include opacity($tooltip-opacity); }\n &.top {\n padding: $tooltip-arrow-width 0;\n margin-top: -3px;\n }\n &.right {\n padding: 0 $tooltip-arrow-width;\n margin-left: 3px;\n }\n &.bottom {\n padding: $tooltip-arrow-width 0;\n margin-top: 3px;\n }\n &.left {\n padding: 0 $tooltip-arrow-width;\n margin-left: -3px;\n }\n\n // Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1\n &.top .tooltip-arrow {\n bottom: 0;\n left: 50%;\n margin-left: -$tooltip-arrow-width;\n border-width: $tooltip-arrow-width $tooltip-arrow-width 0;\n border-top-color: $tooltip-arrow-color;\n }\n &.top-left .tooltip-arrow {\n right: $tooltip-arrow-width;\n bottom: 0;\n margin-bottom: -$tooltip-arrow-width;\n border-width: $tooltip-arrow-width $tooltip-arrow-width 0;\n border-top-color: $tooltip-arrow-color;\n }\n &.top-right .tooltip-arrow {\n bottom: 0;\n left: $tooltip-arrow-width;\n margin-bottom: -$tooltip-arrow-width;\n border-width: $tooltip-arrow-width $tooltip-arrow-width 0;\n border-top-color: $tooltip-arrow-color;\n }\n &.right .tooltip-arrow {\n top: 50%;\n left: 0;\n margin-top: -$tooltip-arrow-width;\n border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;\n border-right-color: $tooltip-arrow-color;\n }\n &.left .tooltip-arrow {\n top: 50%;\n right: 0;\n margin-top: -$tooltip-arrow-width;\n border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;\n border-left-color: $tooltip-arrow-color;\n }\n &.bottom .tooltip-arrow {\n top: 0;\n left: 50%;\n margin-left: -$tooltip-arrow-width;\n border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;\n border-bottom-color: $tooltip-arrow-color;\n }\n &.bottom-left .tooltip-arrow {\n top: 0;\n right: $tooltip-arrow-width;\n margin-top: -$tooltip-arrow-width;\n border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;\n border-bottom-color: $tooltip-arrow-color;\n }\n &.bottom-right .tooltip-arrow {\n top: 0;\n left: $tooltip-arrow-width;\n margin-top: -$tooltip-arrow-width;\n border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;\n border-bottom-color: $tooltip-arrow-color;\n }\n}\n\n// Wrapper for the tooltip content\n.tooltip-inner {\n max-width: $tooltip-max-width;\n padding: 3px 8px;\n color: $tooltip-color;\n text-align: center;\n background-color: $tooltip-bg;\n border-radius: $border-radius-base;\n}\n\n// Arrows\n.tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n}\n","@mixin reset-text() {\n font-family: $font-family-base;\n // We deliberately do NOT reset font-size.\n font-style: normal;\n font-weight: 400;\n line-height: $line-height-base;\n line-break: auto;\n text-align: left; // Fallback for where `start` is not supported\n text-align: start;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-break: normal;\n word-spacing: normal;\n word-wrap: normal;\n white-space: normal;\n}\n","//\n// Popovers\n// --------------------------------------------------\n\n\n.popover {\n position: absolute;\n top: 0;\n left: 0;\n z-index: $zindex-popover;\n display: none;\n max-width: $popover-max-width;\n padding: 1px;\n // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n @include reset-text;\n font-size: $font-size-base;\n background-color: $popover-bg;\n background-clip: padding-box;\n border: 1px solid $popover-fallback-border-color;\n border: 1px solid $popover-border-color;\n border-radius: $border-radius-large;\n @include box-shadow(0 5px 10px rgba(0, 0, 0, .2));\n\n // Offset the popover to account for the popover arrow\n &.top { margin-top: -$popover-arrow-width; }\n &.right { margin-left: $popover-arrow-width; }\n &.bottom { margin-top: $popover-arrow-width; }\n &.left { margin-left: -$popover-arrow-width; }\n\n // Arrows\n // .arrow is outer, .arrow:after is inner\n > .arrow {\n border-width: $popover-arrow-outer-width;\n\n &,\n &:after {\n position: absolute;\n display: block;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n }\n\n &:after {\n content: \"\";\n border-width: $popover-arrow-width;\n }\n }\n\n &.top > .arrow {\n bottom: -$popover-arrow-outer-width;\n left: 50%;\n margin-left: -$popover-arrow-outer-width;\n border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback\n border-top-color: $popover-arrow-outer-color;\n border-bottom-width: 0;\n &:after {\n bottom: 1px;\n margin-left: -$popover-arrow-width;\n content: \" \";\n border-top-color: $popover-arrow-color;\n border-bottom-width: 0;\n }\n }\n &.right > .arrow {\n top: 50%;\n left: -$popover-arrow-outer-width;\n margin-top: -$popover-arrow-outer-width;\n border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback\n border-right-color: $popover-arrow-outer-color;\n border-left-width: 0;\n &:after {\n bottom: -$popover-arrow-width;\n left: 1px;\n content: \" \";\n border-right-color: $popover-arrow-color;\n border-left-width: 0;\n }\n }\n &.bottom > .arrow {\n top: -$popover-arrow-outer-width;\n left: 50%;\n margin-left: -$popover-arrow-outer-width;\n border-top-width: 0;\n border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback\n border-bottom-color: $popover-arrow-outer-color;\n &:after {\n top: 1px;\n margin-left: -$popover-arrow-width;\n content: \" \";\n border-top-width: 0;\n border-bottom-color: $popover-arrow-color;\n }\n }\n\n &.left > .arrow {\n top: 50%;\n right: -$popover-arrow-outer-width;\n margin-top: -$popover-arrow-outer-width;\n border-right-width: 0;\n border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback\n border-left-color: $popover-arrow-outer-color;\n &:after {\n right: 1px;\n bottom: -$popover-arrow-width;\n content: \" \";\n border-right-width: 0;\n border-left-color: $popover-arrow-color;\n }\n }\n}\n\n.popover-title {\n padding: 8px 14px;\n margin: 0; // reset heading margin\n font-size: $font-size-base;\n background-color: $popover-title-bg;\n border-bottom: 1px solid darken($popover-title-bg, 5%);\n border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;\n}\n\n.popover-content {\n padding: 9px 14px;\n}\n","//\n// Carousel\n// --------------------------------------------------\n\n\n// Wrapper for the slide container and indicators\n.carousel {\n position: relative;\n}\n\n.carousel-inner {\n position: relative;\n width: 100%;\n overflow: hidden;\n\n > .item {\n position: relative;\n display: none;\n @include transition(.6s ease-in-out left);\n\n // Account for jankitude on images\n > img,\n > a > img {\n @include img-responsive;\n line-height: 1;\n }\n\n // WebKit CSS3 transforms for supported devices\n @media all and (transform-3d), (-webkit-transform-3d) {\n @include transition-transform(0.6s ease-in-out);\n @include backface-visibility(hidden);\n @include perspective(1000px);\n\n &.next,\n &.active.right {\n @include translate3d(100%, 0, 0);\n left: 0;\n }\n &.prev,\n &.active.left {\n @include translate3d(-100%, 0, 0);\n left: 0;\n }\n &.next.left,\n &.prev.right,\n &.active {\n @include translate3d(0, 0, 0);\n left: 0;\n }\n }\n }\n\n > .active,\n > .next,\n > .prev {\n display: block;\n }\n\n > .active {\n left: 0;\n }\n\n > .next,\n > .prev {\n position: absolute;\n top: 0;\n width: 100%;\n }\n\n > .next {\n left: 100%;\n }\n > .prev {\n left: -100%;\n }\n > .next.left,\n > .prev.right {\n left: 0;\n }\n\n > .active.left {\n left: -100%;\n }\n > .active.right {\n left: 100%;\n }\n\n}\n\n// Left/right controls for nav\n// ---------------------------\n\n.carousel-control {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: $carousel-control-width;\n font-size: $carousel-control-font-size;\n color: $carousel-control-color;\n text-align: center;\n text-shadow: $carousel-text-shadow;\n background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug\n @include opacity($carousel-control-opacity);\n // We can't have this transition here because WebKit cancels the carousel\n // animation if you trip this while in the middle of another animation.\n\n // Set gradients for backgrounds\n &.left {\n @include gradient-horizontal($start-color: rgba(0, 0, 0, .5), $end-color: rgba(0, 0, 0, .0001));\n }\n &.right {\n right: 0;\n left: auto;\n @include gradient-horizontal($start-color: rgba(0, 0, 0, .0001), $end-color: rgba(0, 0, 0, .5));\n }\n\n // Hover/focus state\n &:hover,\n &:focus {\n color: $carousel-control-color;\n text-decoration: none;\n outline: 0;\n @include opacity(.9);\n }\n\n // Toggles\n .icon-prev,\n .icon-next,\n .glyphicon-chevron-left,\n .glyphicon-chevron-right {\n position: absolute;\n top: 50%;\n z-index: 5;\n display: inline-block;\n margin-top: -10px;\n }\n .icon-prev,\n .glyphicon-chevron-left {\n left: 50%;\n margin-left: -10px;\n }\n .icon-next,\n .glyphicon-chevron-right {\n right: 50%;\n margin-right: -10px;\n }\n .icon-prev,\n .icon-next {\n width: 20px;\n height: 20px;\n font-family: serif;\n line-height: 1;\n }\n\n .icon-prev {\n &:before {\n content: \"\\2039\";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)\n }\n }\n .icon-next {\n &:before {\n content: \"\\203a\";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)\n }\n }\n}\n\n// Optional indicator pips\n//\n// Add an unordered list with the following class and add a list item for each\n// slide your carousel holds.\n\n.carousel-indicators {\n position: absolute;\n bottom: 10px;\n left: 50%;\n z-index: 15;\n width: 60%;\n padding-left: 0;\n margin-left: -30%;\n text-align: center;\n list-style: none;\n\n li {\n display: inline-block;\n width: 10px;\n height: 10px;\n margin: 1px;\n text-indent: -999px;\n cursor: pointer;\n // IE8-9 hack for event handling\n //\n // Internet Explorer 8-9 does not support clicks on elements without a set\n // `background-color`. We cannot use `filter` since that's not viewed as a\n // background color by the browser. Thus, a hack is needed.\n // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer\n //\n // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we\n // set alpha transparency for the best results possible.\n background-color: #000 \\9; // IE8\n background-color: rgba(0, 0, 0, 0); // IE9\n\n border: 1px solid $carousel-indicator-border-color;\n border-radius: 10px;\n }\n\n .active {\n width: 12px;\n height: 12px;\n margin: 0;\n background-color: $carousel-indicator-active-bg;\n }\n}\n\n// Optional captions\n// -----------------------------\n// Hidden by default for smaller viewports\n.carousel-caption {\n position: absolute;\n right: 15%;\n bottom: 20px;\n left: 15%;\n z-index: 10;\n padding-top: 20px;\n padding-bottom: 20px;\n color: $carousel-caption-color;\n text-align: center;\n text-shadow: $carousel-text-shadow;\n\n & .btn {\n text-shadow: none; // No shadow for button elements in carousel-caption\n }\n}\n\n\n// Scale up controls for tablets and up\n@media screen and (min-width: $screen-sm-min) {\n\n // Scale up the controls a smidge\n .carousel-control {\n .glyphicon-chevron-left,\n .glyphicon-chevron-right,\n .icon-prev,\n .icon-next {\n width: ($carousel-control-font-size * 1.5);\n height: ($carousel-control-font-size * 1.5);\n margin-top: ($carousel-control-font-size / -2);\n font-size: ($carousel-control-font-size * 1.5);\n }\n .glyphicon-chevron-left,\n .icon-prev {\n margin-left: ($carousel-control-font-size / -2);\n }\n .glyphicon-chevron-right,\n .icon-next {\n margin-right: ($carousel-control-font-size / -2);\n }\n }\n\n // Show and left align the captions\n .carousel-caption {\n right: 20%;\n left: 20%;\n padding-bottom: 30px;\n }\n\n // Move up the indicators\n .carousel-indicators {\n bottom: 20px;\n }\n}\n","//\n// Utility classes\n// --------------------------------------------------\n\n\n// Floats\n// -------------------------\n\n.clearfix {\n @include clearfix;\n}\n.center-block {\n @include center-block;\n}\n.pull-right {\n float: right !important;\n}\n.pull-left {\n float: left !important;\n}\n\n\n// Toggling content\n// -------------------------\n\n// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1\n.hide {\n display: none !important;\n}\n.show {\n display: block !important;\n}\n.invisible {\n visibility: hidden;\n}\n.text-hide {\n @include text-hide;\n}\n\n\n// Hide from screenreaders and browsers\n//\n// Credit: HTML5 Boilerplate\n\n.hidden {\n display: none !important;\n}\n\n\n// For Affix plugin\n// -------------------------\n\n.affix {\n position: fixed;\n}\n","// Center-align a block level element\n\n@mixin center-block() {\n display: block;\n margin-right: auto;\n margin-left: auto;\n}\n","// CSS image replacement\n//\n// Heads up! v3 launched with only `.hide-text()`, but per our pattern for\n// mixins being reused as classes with the same name, this doesn't hold up. As\n// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.\n//\n// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757\n\n// Deprecated as of v3.0.1 (has been removed in v4)\n@mixin hide-text() {\n font: 0/0 a;\n color: transparent;\n text-shadow: none;\n background-color: transparent;\n border: 0;\n}\n\n// New mixin to use as of v3.0.1\n@mixin text-hide() {\n @include hide-text;\n}\n","//\n// Responsive: Utility classes\n// --------------------------------------------------\n\n\n// IE10 in Windows (Phone) 8\n//\n// Support for responsive views via media queries is kind of borked in IE10, for\n// Surface/desktop in split view and for Windows Phone 8. This particular fix\n// must be accompanied by a snippet of JavaScript to sniff the user agent and\n// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at\n// our Getting Started page for more information on this bug.\n//\n// For more information, see the following:\n//\n// Issue: https://github.com/twbs/bootstrap/issues/10497\n// Docs: https://getbootstrap.com/docs/3.4/getting-started/#support-ie10-width\n// Source: https://timkadlec.com/2013/01/windows-phone-8-and-device-width/\n// Source: https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/\n\n@at-root {\n @-ms-viewport {\n width: device-width;\n }\n}\n\n\n// Visibility utilities\n// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0\n\n@include responsive-invisibility('.visible-xs');\n@include responsive-invisibility('.visible-sm');\n@include responsive-invisibility('.visible-md');\n@include responsive-invisibility('.visible-lg');\n\n.visible-xs-block,\n.visible-xs-inline,\n.visible-xs-inline-block,\n.visible-sm-block,\n.visible-sm-inline,\n.visible-sm-inline-block,\n.visible-md-block,\n.visible-md-inline,\n.visible-md-inline-block,\n.visible-lg-block,\n.visible-lg-inline,\n.visible-lg-inline-block {\n display: none !important;\n}\n\n@media (max-width: $screen-xs-max) {\n @include responsive-visibility('.visible-xs');\n}\n.visible-xs-block {\n @media (max-width: $screen-xs-max) {\n display: block !important;\n }\n}\n.visible-xs-inline {\n @media (max-width: $screen-xs-max) {\n display: inline !important;\n }\n}\n.visible-xs-inline-block {\n @media (max-width: $screen-xs-max) {\n display: inline-block !important;\n }\n}\n\n@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {\n @include responsive-visibility('.visible-sm');\n}\n.visible-sm-block {\n @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {\n display: block !important;\n }\n}\n.visible-sm-inline {\n @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {\n display: inline !important;\n }\n}\n.visible-sm-inline-block {\n @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {\n display: inline-block !important;\n }\n}\n\n@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {\n @include responsive-visibility('.visible-md');\n}\n.visible-md-block {\n @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {\n display: block !important;\n }\n}\n.visible-md-inline {\n @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {\n display: inline !important;\n }\n}\n.visible-md-inline-block {\n @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {\n display: inline-block !important;\n }\n}\n\n@media (min-width: $screen-lg-min) {\n @include responsive-visibility('.visible-lg');\n}\n.visible-lg-block {\n @media (min-width: $screen-lg-min) {\n display: block !important;\n }\n}\n.visible-lg-inline {\n @media (min-width: $screen-lg-min) {\n display: inline !important;\n }\n}\n.visible-lg-inline-block {\n @media (min-width: $screen-lg-min) {\n display: inline-block !important;\n }\n}\n\n@media (max-width: $screen-xs-max) {\n @include responsive-invisibility('.hidden-xs');\n}\n\n@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {\n @include responsive-invisibility('.hidden-sm');\n}\n\n@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {\n @include responsive-invisibility('.hidden-md');\n}\n\n@media (min-width: $screen-lg-min) {\n @include responsive-invisibility('.hidden-lg');\n}\n\n\n// Print utilities\n//\n// Media queries are placed on the inside to be mixin-friendly.\n\n// Note: Deprecated .visible-print as of v3.2.0\n\n@include responsive-invisibility('.visible-print');\n\n@media print {\n @include responsive-visibility('.visible-print');\n}\n.visible-print-block {\n display: none !important;\n\n @media print {\n display: block !important;\n }\n}\n.visible-print-inline {\n display: none !important;\n\n @media print {\n display: inline !important;\n }\n}\n.visible-print-inline-block {\n display: none !important;\n\n @media print {\n display: inline-block !important;\n }\n}\n\n@media print {\n @include responsive-invisibility('.hidden-print');\n}\n","// [converter] $parent hack\n@mixin responsive-visibility($parent) {\n #{$parent} {\n display: block !important;\n }\n table#{$parent} { display: table !important; }\n tr#{$parent} { display: table-row !important; }\n th#{$parent},\n td#{$parent} { display: table-cell !important; }\n}\n\n// [converter] $parent hack\n@mixin responsive-invisibility($parent) {\n #{$parent} {\n display: none !important;\n }\n}\n",".banner-top-page.acompanhamento{\n border-bottom: 2px solid $red;\n min-height: 300px;\n font-size: 28px;\n font-family: 'Roboto Condensed', sans-serif;\n .mensagem{\n float: left;\n max-width: 380px;\n display: inline-block;\n position: relative;\n line-height: 1.3;\n font-family: 'Roboto Condensed', sans-serif;\n margin-top: 100px;\n b{\n color: $azul;\n font-family: 'Roboto', sans-serif;\n line-height: 1.3;\n }\n }\n}\n.ac_tab{\n position: relative;\n color: #686868;\n background: #FFF;\n display: inline-block;\n float: right;\n margin-top: 19px;\n -webkit-border-top-left-radius: 7px;\n -webkit-border-top-right-radius: 7px;\n -moz-border-radius-topleft: 7px;\n -moz-border-radius-topright: 7px;\n border-top-left-radius: 7px;\n border-top-right-radius: 7px;\n font-family: 'Roboto Condensed', sans-serif;\n font-weight: 400;\n font-size: 20px;\n padding: 23px 75px 20px;\n border-left: 2px solid $red;\n border-right: 2px solid $red;\n border-top: 2px solid $red;\n}\n.identificacao{\n border-bottom: 1px solid #f8020a;\n margin-top: 65px;\n margin-bottom: 80px;\n .btn-light-bsf-red{\n display: inline-block;\n margin-top: 0px;\n float: right;\n margin-bottom: 5px;\n padding: 5px 13px;\n font-style: italic;\n &:hover{\n color: $red_escuro;\n text-decoration: none;\n\n }\n }\n .tab{\n padding: 20px 50px 10px;\n border-left: 1px solid #f8020a;\n border-right: 1px solid #f8020a;\n border-top: 1px solid #f8020a;\n float: left;\n margin-left: 4px;\n margin-top: -54px;\n background: #FFF;\n font: 20px \"Roboto Condensed\", sans-serif;\n font-weight: 300;\n color: #716a67;\n text-align: center;\n }\n}\n.acompanhamento_view{\n .voltar{\n margin-top: 5px;\n display: inline-block;\n padding: 8px 15px;\n border: 1px solid #256CC9;\n border-radius: 30px;\n background: white;\n color: #256CC9;\n text-decoration: none;\n float: right;\n margin-top: 0px !important;\n margin-bottom: 25px;\n transition: 0.5s;\n }\n .voltar:hover{\n border-color: #194F93;\n color: #194F93;\n transition: 0.5s;\n }\n .usuario{\n .protocolo{\n font: 15px \"Roboto Condensed\", sans-serif;\n font-weight: 800;\n color: #000;\n margin-bottom: 15px;\n }\n .rosa{\n font: 15px \"Roboto Condensed\", sans-serif;\n font-weight: 300;\n color: #ff6c72;\n }\n p{\n margin: 0px;\n }\n .bene_dados, .trabalhador{\n margin-bottom: 15px;\n text-indent: 40px;\n color: #535353;\n }\n .trabalhador{\n background: url(\"/images/icone-trabalhador.png\") left top no-repeat;\n }\n }\n .ac_gray{\n background: #F8F8F8;\n }\n .margin-bottom{\n margin-bottom: 60px;\n }\n}\n.rosa{\n color: #ff6c72;\n}\n\n.status-step{\n padding-top: 10px;\n padding-bottom: 20px;\n .andamento{\n padding: 1px 10px 1px 10px;\n display: inline-block;\n background-color: #FF6C72;\n color: white;\n }\n}\n\n@mixin contentProgress {\n width: 100%;\n padding: 0px;\n text-align: center;\n li{\n list-style: none;\n width: 25%;\n float: left;\n position: relative;\n h2{\n font-size: 15px;\n font-weight: 700;\n min-height: 45px;\n color: #716A67;\n }\n .single-step{\n background-color: #D2D2D2;\n border-radius: 50px;\n padding: 20px;\n display: inline-block;\n position: relative;\n z-index: 2\n }\n &:first-child:after{\n content: none;\n }\n &:after{\n content: '';\n width: 100%;\n height: 2px;\n background: #D2D2D2;\n position: absolute;\n left: -50%;\n top: 95px;\n z-index: 1;\n }\n .status-step{\n padding-top: 10px;\n padding-bottom: 20px;\n .andamento{\n opacity: 0;\n padding: 1px 10px 1px 10px;\n display: inline-block;\n background-color: #FF6C72;\n color: white;\n }\n .concluido{\n opacity: 0;\n padding: 1px 10px 1px 10px;\n display: inline-block;\n background-color: #469C17;\n color: white;\n }\n }\n }\n .concluido{\n .single-step{\n color: white;\n font-size: 25px;\n -webkit-transition: all 0.8s ease;\n -moz-transition: all 0.8s ease;\n -o-transition: all 0.8s ease;\n transition: all 0.8s ease;\n background-color: #469C17;\n padding: 3px;\n width: 40px;\n height: 40px;\n }\n &:after{\n -webkit-transition: all 0.4s ease;\n -moz-transition: all 0.4s ease;\n -o-transition: all 0.4s ease;\n transition: all 0.4s ease;\n background-color: #469C17;\n }\n }\n .active{\n .single-step{\n -webkit-transition: all 0.8s ease;\n -moz-transition: all 0.8s ease;\n -o-transition: all 0.8s ease;\n transition: all 0.8s ease;\n background-color: #FF6C72;\n padding: 3px;\n width: 40px;\n height: 40px;\n color: white;\n font-size: 25px;\n }\n &:after{\n -webkit-transition: all 0.4s ease;\n -moz-transition: all 0.4s ease;\n -o-transition: all 0.4s ease;\n transition: all 0.4s ease;\n background-color: #FF6C72;\n }\n }\n time.time{\n display: block;\n text-align: center;\n height: 50px;\n padding-top: 10px;\n color: #716A67;\n }\n .height-step{\n height: 45px;\n }\n}\n#progress-bar{\n @include contentProgress();\n}\n.progress_ac{\n @include contentProgress();\n}\n\n@mixin historicoContentID {\n width: 100%;\n display: block;\n text-align: center;\n background-color: transparent;\n border: 0px solid;\n color: #FF6C72;\n font-weight: 700;\n padding-top: 25px;\n padding-bottom: 10px;\n outline: none;\n &:focus{\n outline: none;\n }\n img{\n margin-right: 5px;\n }\n}\n@mixin historicoContentClass {\n display: none;\n padding-top: 15px;\n table{\n width: 100%;\n thead{\n td{\n font-weight: 700;\n padding-left: 10px;\n padding-right: 10px;\n padding-bottom: 10px;\n color: #716A67;\n }\n }\n tbody{\n td{\n padding-left: 10px;\n padding-right: 10px;\n padding-bottom: 10px;\n color: #716A67;\n font-weight: 300;\n }\n }\n }\n}\n#historico{\n @include historicoContentID();\n transition: .3s;\n &:hover{\n transition: .3s;\n color: #bb5359;\n img{\n filter: grayscale(.4);\n }\n }\n}\n.historico{\n @include historicoContentClass();\n}\n.hitorico_btn{\n @include historicoContentID();\n}\n.historico_content{\n @include historicoContentClass();\n}\n.show-documentos{\n @include historicoContentID();\n transition: .3s;\n &:hover{\n transition: .3s;\n color: #bb5359;\n img{\n filter: grayscale(.4);\n }\n }\n}\n.display-docs{\n padding: 10px 20px;\n}\n.insert-data-doc{\n td:first-child{\n width: 42%;\n }\n td:last-child{\n width: 58%;\n }\n td:first-child{\n vertical-align: top;\n }\n}\n.submit-send-ac{\n padding: 5px 15px;\n background-color: $green;\n color: white;\n border: 0px;\n border-radius: 50px;\n transition: .3s;\n &:hover{\n background-color: $green_hover;\n transition: .3s;\n }\n}\n.display-docs{\n display: none;\n}\n.tela_load{\n position: absolute;\n background: #F8F8F8;\n text-align: center;\n padding-top: 8%;\n font-size: 26px;\n color: $azul;\n}\n.display-docs{\n table{\n tr{\n td{\n padding: 5px 15px 5px 0px;\n font-weight: 300;\n }\n }\n .jFiler-input, .link_anexo{\n width: 180px !important;\n }\n }\n .btn-enviar{\n border: 0px solid;\n font-size: 14px;\n padding: 7px 48px;\n text-decoration: none;\n vertical-align: middle;\n color: white;\n width: 180px;\n background: #469c17;\n font-weight: 400;\n font-family: \"Roboto Condensed\",sans-serif;\n height: 30px;\n cursor: pointer;\n text-transform: none !important;\n transition: 0.3s;\n }\n .btn-enviar:hover{\n background: #347810;\n transition: 0.3s;\n }\n}\n@media(max-width: 768px){\n .banner-top-page.acompanhamento{\n background-image: none;\n /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e9e5dc+0,ece6da+100 */\n background: #e9e5dc; /* Old browsers */\n background: -moz-linear-gradient(top, #e9e5dc 0%, #ece6da 100%); /* FF3.6-15 */\n background: -webkit-linear-gradient(top, #e9e5dc 0%,#ece6da 100%); /* Chrome10-25,Safari5.1-6 */\n background: linear-gradient(to bottom, #e9e5dc 0%,#ece6da 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e5dc', endColorstr='#ece6da',GradientType=0 ); /* IE6-9 */\n }\n}\n@media (max-width: 550px){\n .steps{\n ul{\n li{\n width: 23% !important;\n //border-radius: 1em;\n //border: 2px solid #FF6C72;\n margin: 0.5%;\n &:after{\n content: none !important;\n }\n h2{\n font-size: 12px;\n font-weight: 550;\n }\n }\n }\n }\n .identificacao{\n margin-bottom: 10px;\n }\n .acompanhamento_view .margin-bottom{\n margin-bottom: 20px;\n }\n .acompanhamento_view .ac_gray{\n background: #EAEAEA;\n }\n .identificacao .tab{\n margin: -54px auto auto auto;\n float: none;\n padding: 20px 50px 20px;\n }\n}\n@media (max-width: 500px){\n .banner-top-page.acompanhamento{\n .mensagem{\n margin-top: 20px !important;\n font-size: 25px;\n text-align: center;\n }\n min-height: 150px;\n height: 150px;\n }\n \n .identificacao{\n .btn-light-bsf-red{\n display: none;\n }\n .tab{\n margin-top: -53px;\n }\n }\n .ac_tab{\n display: none;\n }\n .progress_ac li .single-step{\n z-index: 1;\n }\n}\n",".banner-top-page{\n background: url(\"/images/banner_beneficios.jpg\") center center no-repeat;\n background-size: cover;\n height: 186px;\n margin-bottom: 50px;\n}\n.voltar{\n background: url(\"/images/row-left.png\") 8px 50% no-repeat;\n padding-left: 25px;\n}\n.sidebar-left{\n h2{\n font: 22px \"Roboto Condensed\", sans-serif;\n font-weight: 400;\n color: #555555;\n margin: 70px 0 50px;\n span{\n font-weight: 300;\n }\n }\n h3{\n font: 24px \"Roboto Condensed\", sans-serif;\n font-weight: 400;\n color: $azul;\n margin-top: 60px;\n padding-bottom: 15px;\n position: relative;\n img{\n float: left;\n padding-bottom: 5px;\n margin-right: 5px;\n }\n }\n ul{\n list-style: none;\n padding-left: 0px;\n li{\n margin: 10px 0;\n a{\n font: 15px \"Roboto\", sans-serif;\n font-weight: 300;\n color: #535353;\n text-decoration: none;\n &:hover{\n color: $azul;\n }\n }\n }\n }\n}\n.tab-red{\n border-color: $red !important;\n}\n.tab-blue{\n border-color: $azul !important;\n}\n.tabs-benefcios{\n border-bottom: 1px solid;\n position: relative;\n margin-bottom: 25px;\n h3{\n border-top: 1px solid;\n border-left: 1px solid;\n border-right: 1px solid;\n padding: 20px 70px;\n float: left;\n font: 20px \"Roboto Condensed\", sans-serif;\n color: #716a67;\n position: relative;\n background: #FFF;\n margin-left: 4px;\n margin-bottom: -1px;\n text-transform: uppercase;\n img{\n -webkit-filter: grayscale(1);\n filter: grayscale(1);\n margin-bottom: 5px;\n }\n }\n}\n\n.list-beneficios{\n a{\n &:hover{\n text-decoration: none;\n .item{\n background: #DAF4FE;\n transition: 0.3s;\n }\n }\n }\n .item{\n display: table;\n height: 133px;\n margin-bottom: 30px;\n background: #eeeeee;\n position: relative;\n text-align: center;\n width: 100%;\n transition: 0.3s;\n .cell{\n display: table-cell;\n vertical-align: middle;\n font-size: 18px;\n text-transform: uppercase;\n color: #535353;\n span{\n width: 80%;\n display: inline-block;\n text-align: left;\n margin-top: 10px;\n img{\n margin-right: 10px;\n float: left;\n margin-top: 5px;\n }\n p{\n float: left;\n width: 70%;\n }\n }\n }\n }\n}\n\nh3.topo-titulo{\n font: 30px \"Roboto Condensed\", sans-serif;\n font-weight: 300;\n color: #5a5a5a;\n margin-bottom: 35px;\n}\n.descricao-single{\n font: 15px \"Roboto\", sans-serif;\n font-weight: 300;\n color: #535353;\n margin-top: 30px;\n line-height: 1.5;\n text-align: justify;\n}\n.iframe{\n display: block;\n margin-top: 30px;\n outline: 5px;\n outline-style: solid;\n outline-color: #ff7a81;\n position: relative;\n padding-bottom: 56.25%;\n padding-top: 25px;\n iframe{\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n}\n.footer-single{\n margin-top: 30px;\n h4{\n font: 24px \"Roboto Condensed\",sans-serif;\n font-weight: 500;\n color: #ff0911;\n }\n font: 15px \"Roboto\", sans-serif;\n font-weight: 300;\n color: #535353;\n line-height: 1.5;\n}\n.btn-rosa{\n color: #FFF;\n background: #ff6c72;\n padding: 8px 25px;\n font: 16px \"Roboto\", sans-serif;\n font-weight: 300;\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n border-radius: 10px;\n text-decoration: none;\n float: left;\n margin-top: 24px;\n &:hover{\n background: #EC6268;\n color: white;\n }\n}\n@media (max-width: 970px){\n .list-beneficios{\n .item{\n .cell{\n span{\n display: block;\n text-align: center;\n width: 100%;\n img{\n float: none !important;\n }\n p{\n float: none !important;\n width: 100%;\n }\n }\n }\n }\n }\n}\n@media(max-width: 500px){\n .container.home_empresa .col-sm-9.col-sm-push-3{\n iframe{\n width: 100%;\n height: 200px;\n }\n }\n .tabs-benefcios h3{\n padding: 10px 35px;\n width: 100%;\n margin-left: 0px;\n }\n .sidebar-left{\n .item-categoria{\n h3{\n margin-top: 20px;\n margin-bottom: 15px;\n padding: 0;\n }\n ul{\n margin-left: 15px;\n margin-bottom: 20px;\n li{\n margin: 5px 0px;\n }\n }\n }\n }\n .banner-top-page{\n margin-bottom: 0px;\n display: none;\n }\n h3.topo-titulo{\n text-align: center;\n margin-bottom: 0px;\n font-size: 25px;\n }\n .list-beneficios a .item{\n border-radius: 20px;\n margin-bottom: 0px;\n }\n .list-beneficios .item .cell p{\n font-size: 15px;\n width: 90% !important;\n margin-left: auto;\n margin-right: auto;\n }\n// .sidebar-left{\n// .item-categoria{\n// h3{\n// margin-top: 0px;\n// padding-bottom: 0px;\n// }\n// width: 40%;\n// float: left;\n// }\n// .btn-light-bsf-blue{\n// width: 20%;\n// float: right;\n// margin-top: 0px;\n// font-size: 13px;\n// }\n// }\n}",".default_datatable{\n width: 100%;\n\n thead{\n th{\n background-color: #055BC6;\n color: white;\n text-align: left;\n padding: 2px 5px;\n border: 1px solid #C7C7C7;\n border-bottom: 1px solid black;\n word-wrap: break-word;\n }\n }\n tbody{\n tr{\n transition: 0.3s;\n cursor: default;\n\n td{\n font-size:12px;\n padding: 8px 10px;\n border: 1px solid #CaCaCa;\n word-wrap: break-word;\n }\n\n\n\n }\n tr:nth-child(even){\n background-color: #f8f8f8;\n }\n\n\n\t tr:hover{\n background-color: #f2f2f2;\n\t transition: 0.3s;\n\t }\n\n }\n\n\n\n .btn-primary{\n cursor: pointer;\n transition: 0.3s;\n display: inline-block;\n padding: 5px 10px;\n font-size: 13px;\n border-radius: 15px;\n background-color: #337ab7;\n border: 0px;\n color: white;\n height: 27px;\n text-align: center;\n }\n .btn-primary:hover{\n transition: 0.3s;\n background-color: #286090;\n }\n .btn-primary:focus{\n color: #fff;\n background-color: #204d74;\n border-color: #122b40;\n box-shadow: inset 0 3px 5px rgba(0,0,0,.125);\n }\n\n .btn-warning{\n cursor: pointer;\n transition: 0.3s;\n display: inline-block;\n padding: 5px 10px;\n font-size: 13px;\n border-radius: 15px;\n background-color: #f0ad4e;\n border: 0px;\n color: white;\n height: 27px;\n text-align: center;\n }\n .btn-warning:hover{\n transition: 0.3s;\n background-color: #ec971f;\n }\n .btn-warning:focus{\n color: #fff;\n background-color: #d58512;\n border-color: #985f0d;\n box-shadow: inset 0 3px 5px rgba(0,0,0,.125);\n }\n\n .btn-default{\n cursor: pointer;\n transition: 0.3s;\n display: inline-block;\n padding: 5px 10px;\n font-size: 13px;\n border-radius: 15px;\n background-color: #ffffff;\n border: 0px;\n color: white;\n height: 27px;\n text-align: center;\n }\n .btn-default:hover{\n transition: 0.3s;\n background-color: #e6e6e6;\n }\n .btn-default:focus{\n color: #333;\n background-color: #d4d4d4;\n border-color: #8c8c8c;\n box-shadow: inset 0 3px 5px rgba(0,0,0,.125);\n }\n\n .btn-sucess{\n cursor: pointer;\n transition: 0.3s;\n display: inline-block;\n padding: 5px 10px;\n font-size: 13px;\n border-radius: 15px;\n background-color: #5cb85c;\n border: 0px;\n color: white;\n height: 27px;\n text-align: center;\n }\n .btn-sucess:hover{\n transition: 0.3s;\n background-color: #449d44 ;\n }\n .btn-sucess:focus{\n color: #fff;\n background-color: #398439;\n border-color: #255625;\n box-shadow: inset 0 3px 5px rgba(0,0,0,.125);\n }\n\n .btn-error{\n cursor: pointer;\n transition: 0.3s;\n display: inline-block;\n padding: 5px 10px;\n font-size: 13px;\n border-radius: 15px;\n background-color: #d9534f;\n border: 0px;\n color: white;\n height: 27px;\n text-align: center;\n }\n .btn-error:hover{\n transition: 0.3s;\n background-color: #c9302c;\n }\n .btn-error:focus{\n color: #fff;\n background-color: #ac2925;\n border-color: #761c19;\n box-shadow: inset 0 3px 5px rgba(0,0,0,.125);\n }\n}\n//Fix arrow error\n.default_datatable th::after {\n float: right !important;\n}\n\n.default_datatable_gray{\n thead{\n th{\n background-color: #aaa;\n }\n }\n}\n\n@media (max-width: 600px){\n\n .default_datatable tbody tr td{\n max-width: 10px ;\n }\n .default_datatable thead tr th{\n word-wrap: break-word;\n }\n\n .default_datatable tbody tr td button{\n height: unset;\n }\n\n\n}\n",".mfp-content{\n margin: 0px auto;\n width: 50% !important;\n background-color: white;\n #popup-aviso{\n min-height: 150px;\n }\n}\n\n.home_familia{\n background: #055bc6;\n padding: 10px 20px 20px 20px;\n margin-bottom: 30px;\n margin-top: 70px;\n color: white;\n p{\n color: white;\n font-size: 44px !important;\n width: 60%;\n margin-top: 0px !important;\n font: 15px \"Roboto\", sans-serif;\n font-weight: 300;\n line-height: 1.5;\n text-align: justify;\n }\n span{\n font-family: 'Roboto Condensed', sans-serif;\n }\n img{\n float: right;\n margin-top: -245px;\n margin-right: 20px;\n }\n}\n.infos_rescisao{\n padding: 15px;\n margin: 40px 0px 15px;\n background-color: #EEEEEE;\n}\n.sidebar_empresa{\n h1{\n font-family: \"Roboto Condensed\", sans-serif;\n font-size: 24px;\n color: $azul;\n }\n h1.red{\n color: $red !important;\n }\n ul{\n list-style: none;\n padding-left: 0px;\n margin-bottom: 50px;\n li{\n margin: 10px 0;\n a{\n font: 15px \"Roboto\", sans-serif;\n font-weight: 300;\n color: #535353;\n text-decoration: none;\n &:hover{\n color: $azul;\n }\n }\n }\n }\n}\n.home_empresa{\n .list-beneficios{\n .item{\n .cell p{\n font-weight: 300;\n font-size: 15px;\n width: 65%;\n }\n }\n }\n}\n.isred{\n img{\n filter: grayscale(0) !important;\n }\n color: $red !important;\n}\n.infos-emp{\n margin-top: 10px;\n margin-bottom: 10px;\n .btn-radius{\n margin-left: 10px;\n }\n .bem-vindo{\n text-align: right;\n img{\n margin-right: 5px;\n }\n }\n}\n@media(max-width: 390px){\n .home_empresa .list-beneficios .item .cell p{\n font-size: 70%;\n }\n}\n.stat-page{\n font-size: 15px;\n font-family: 'Roboto', 'Roboto Condensed', sans-serif;\n span{\n color: $azul;\n }\n .voltar{\n margin-top: 5px;\n display: inline-block;\n padding: 8px 15px;\n border: 1px solid $azul;\n border-radius: 30px;\n background: white;\n color: $azul;\n text-decoration: none;\n &:hover{\n border-color: $azul_escuro;\n color: $azul_escuro;\n }\n }\n}\n.bfalert.small{\n font-size: 16px !important;\n}\n.certificados{\n table{\n width: 100%;\n th, td{\n border: 1px solid #C7C7C7;\n }\n th{\n background-color: #055BC6;\n color: white;\n text-align: left;\n height: 25px;\n }\n .table_center{\n text-align: center;\n }\n .table_padding{\n padding-left: 10px;\n }\n }\n .btn-enviar:hover {\n background: #068B00;\n transition: 0.3s;\n }\n .btn-enviar {\n background: #08a800;\n border: 0px solid;\n border-radius: 13px;\n padding: 10px 25px;\n color: white;\n transition: 0.3s;\n }\n}\n.div_manual{\n label{\n color: #256CC9 !important;\n font-size: 20px !important;\n }\n span{\n color: #666;\n font-size: 16px;\n font-weight: 400;\n }\n .tabela_manual{\n margin-top: 10px;\n td{\n padding: 4px 20px 2px;\n i{\n margin-right: 15px;\n color: red;\n }\n }\n tr:nth-child(odd) {\n background-color: #e4e4e4;\n }\n a{\n color: #666;\n }\n }\n}\n@media (min-width: 992px)and(max-width: 1929px){\n .list-beneficios .item .cell span img{\n margin-left: 0px !important;\n margin-right: 10px !important;\n }\n}\n\n@media (max-width: 970px){\n .home_empresa{\n .list-beneficios{\n .item{\n .cell p{\n width: 100%;\n }\n .cell img{\n margin: 0px !important;\n }\n }\n }\n }\n .home_familia{\n img{\n display: none;\n }\n p{\n width: 100%;\n text-align: left;\n }\n }\n .sidebar_empresa{\n text-align: center;\n }\n}\n\n@media (max-width: 768px){\n .infos-emp .bem-vindo {\n text-align: left !important;\n }\n .home_familia{\n img{\n display: none;\n }\n p{\n width: 100%;\n text-align: left;\n }\n }\n}\n@media (max-width: 500px){\n .home_familia{\n p{\n font-size: 30px !important;\n }\n margin-top: 15px;\n margin-bottom: 0px;\n \n }\n}\n\ntable.dataTable thead .sorting_desc::after {\n content: \"\\f0dd\" !important;\n font-family: \"FontAwesome\" !important;\n}\ntable.dataTable thead .sorting_asc::after {\n content: \"\\f0de\" !important;\n font-family: \"FontAwesome\" !important;\n}\ntable.dataTable thead .sorting::after {\n opacity: 0.2;\n content: \"\\f0de\" !important;\n font-family: \"FontAwesome\" !important;\n}\n#table_boletos td:nth-child(3){\n text-align: center;\n}\n#table_boletos td:nth-child(4){\n text-align: center;\n}\n#table_boletos_filter{\n input{\n border-radius: 5px;\n height: 35px;\n }\n}\n#table_boletos{\n button{\n padding: 0px 10px;\n }\n .atrasado{\n color: $red;\n background-color: rgba(255,0,0, .1);\n border: 1px solid $red;\n border-radius: 5px;\n transition: .3s;\n box-shadow: 2px 2px 2px rgba(0,0,0,0.2);\n &:hover{\n color: $red_escuro;\n background-color: rgba(255,0,0, .2);\n border-color: $red_escuro;\n transition: .3s;\n }\n }\n .em-dia{\n color: #000;\n background-color: white;\n border: 1px solid #333;\n border-radius: 5px;\n transition: .3s;\n box-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.2);\n &:hover{\n color: #000;\n background-color: rgba( 0, 0, 0, 0.05);\n border-color: #000;\n transition: .3s;\n }\n }\n}\n#table_boletos_length{\n select{\n background: white;\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n -webkit-appearance: none;\n -moz-appearance: none;\n border-radius: 5px;\n height: 35px;\n width: 70px !important;\n background-image:\n linear-gradient(45deg, transparent 50%, gray 50%),\n linear-gradient(135deg, gray 50%, transparent 50%),\n radial-gradient(#ddd 70%, transparent 72%);\n background-position:\n calc(100% - 15px) calc(1em + 2px),\n calc(100% - 10px) calc(1em + 2px),\n calc(100% - .5em) .5em;\n background-size:\n 5px 5px,\n 5px 5px,\n 1.5em 1.5em;\n background-repeat: no-repeat;\n &:focus{\n outline: transparent;\n }\n &:active{\n outline: transparent;\n }\n }\n}\n.titulo-page-boleto{\n font-size: 30px;\n color: $azul;\n margin-top: 35px;\n margin-bottom: 35px;\n}\n.titulo-planos{\n font-size: 26px;\n color: #796F6C;\n margin-top: 35px;\n margin-bottom: 35px;\n}\n.chat-boleto{\n text-align: center;\n margin-top: 35px;\n margin-bottom: 35px;\n font-size: 16px;\n img{\n width: 18px;\n margin-top: -3px;\n }\n button{\n color: white;\n background: $red;\n padding: 2px 15px 1px 15px;\n border-radius: 5px;\n border: 0px solid;\n transition: 0.3s;\n &:hover{\n background: $red_escuro;\n transition: 0.3s;\n }\n }\n}\n\n.certificados{\n .btn-light-bsf-blue{\n margin-top: 10px;\n margin-left: 15px;\n }\n .certificado_enviado{\n color: white;\n padding: 10px 20px;\n background-color: green;\n margin-top: 35px;\n font-weight: 100;\n div{\n margin-top: 3px;\n }\n }\n .certificado_erro, .certificado_arquivo{\n color: white;\n padding: 10px 20px;\n background-color: #256CC9;\n margin-top: 35px;\n font-weight: 100;\n div{\n margin-top: 3px;\n }\n }\n}\n\n\n.cd_empresa{\n display: grid;\n grid-gap: 5px;\n grid-template-columns: repeat(8, 1fr);\n grid-template-rows: 80px auto auto auto;\n grid-template-areas: 'l l l r r r r r ' 'd d d d d d d d' 'i i i i i i i i' '. . . . . . . btn';\n background-color: #eee;\n min-height: 200px;\n padding: 15px;\n box-shadow: 1px 1px 8px #aaaa;\n margin-bottom: 25px;\n\n &__logo{\n grid-area: l;\n // text-align: center;\n display: grid;\n align-items: center;\n }\n\n &__razao{\n grid-area: r;\n font-size: 21px;\n text-align: right;\n font-weight: 600;\n align-items: center;\n display: grid;\n }\n\n &__descricao{\n grid-area: d;\n font-size: 18px;\n min-height: 140px;\n max-height: 240px;\n text-align: justify;\n border-bottom: 2px solid #cccc;\n align-items: center;\n display: grid;\n overflow: auto;\n }\n\n &__btn{\n grid-area: btn;\n }\n\n &__info{\n grid-area: i;\n display: none;\n grid-template-columns: repeat(5, 1fr);\n grid-template-areas: 't t . em em' 'e e . ce ce';\n\n &__telefone{\n grid-area: t;\n }\n\n &__email{\n grid-area: em;\n text-align: right;\n }\n\n &__endereco{\n grid-area: e;\n }\n &__cidadeEstado{\n grid-area: ce;\n text-align: right;\n }\n\n }\n}\n\n.fake_input_blocked{\n display: block;\n width: 100%;\n height: 34px;\n padding: 6px 10px;\n font-size: 14px;\n color: #555555;\n background-color: #eeeeee;\n background-image: none;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n\n//Header menu Notification Push\n.notifica-msg {\n position: relative;\n height: auto;\n .pagination {\n \n height: 35px !important;\n width: auto !important;\n text-align: center;\n float: right;\n li {\n display: inline !important;\n padding:0!important;\n &:hover{\n background:none!important;\n }\n }\n }\n .list-notification {\n padding:20px 20px 0 20px;\n li{\n margin:8px 0;\n }\n }\n &:hover {\n background: #f9f9f9 !important;\n }\n &:hover .list-notification {\n display: block;\n }\n &:focus {\n display: block;\n }\n .list-notification {\n position: absolute;\n display: none;\n background: #eee;\n color:#333;\n right: -41px;\n top: 66px;\n width: 700px;\n z-index: 100;\n -webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.26);\n -moz-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.26);\n box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.26);\n border: 1px solid #c3c3c3;\n &:before {\n bottom: 100%;\n right: 52px;\n border: solid transparent;\n content: \" \";\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none; \n border-color: rgba(195, 195, 195, 0);\n border-bottom-color: #c3c3c3;\n border-width: 18px;\n margin-left: -18px;\n }\n\n &:after{ \n bottom: 100%;\n right: 53px;\n border: solid transparent;\n content: \" \";\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n border-color: rgba(238, 238, 238, 0);\n border-bottom-color: #eee;\n border-width: 17px;\n margin-left: -17px;\n }\n p {\n line-height: 14px;\n font-weight: bold;\n text-transform: uppercase;\n color:#333\n }\n .fa-times{\n color: #5b626d;\n }\n .is-hidden{ display: none; }\n .pagination{\n margin-top:10px;\n li{\n a{\n padding: 5px 10px;\n font-size: 11px;\n\n }\n }\n }\n ul#listNotification {\n padding: 0;\n margin: 0;\n width: 100%;\n li {\n padding: 2px;\n width: 100%;\n font-size: 14px;\n vertical-align: middle;\n line-height: 30px;\n -webkit-box-shadow: -2px 2px 5px 0px rgba(50, 50, 50, 0.18);\n -moz-box-shadow: -2px 2px 5px 0px rgba(50, 50, 50, 0.18);\n box-shadow: -2px 2px 5px 0px rgba(50, 50, 50, 0.18);\n -webkit-border-radius: 3px;\n -moz-border-radius: 3px;\n border-radius: 3px;\n .calendario {\n color: #333;\n }\n span {\n font-weight: 500;\n font-size: 13px;\n }\n .buttons {\n padding: 0;\n text-align: center;\n height: 25px;\n line-height: 0;\n }\n }\n li:nth-child(odd) {\n background: #fcfcfc;\n }\n li:nth-child(even) {\n background: #f9f9f9\n }\n li:last-child {\n border: none;\n }\n li {\n .visto {\n small {\n color: #b2b2b2 !important;\n }\n p {\n span {\n color: #b2b2b2 !important;\n }\n }\n }\n }\n }\n .msg-lidas{\n display:none;\n }\n .toggleNotRead{\n display:block;\n background:#f3f3f3;\n margin:0 -20px;\n -webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.17);\n -moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.17);\n box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.17);\n padding:10px 20px;\n\n }\n .toggleRead{\n cursor:pointer;\n color:#333;\n display:block;\n background:#f3f3f3;\n margin:0 -20px;\n -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.17);\n -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.17);\n box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.17);\n padding:10px 20px;\n margin-top:20px;\n span{\n color:#333!important\n }\n }\n ul#readMessages {\n padding: 0 0 20px 0;\n margin: 0;\n width: 100%;\n li {\n padding: 2px;\n width: 100%;\n font-size: 14px;\n vertical-align: middle;\n line-height: 30px;\n -webkit-box-shadow: -2px 2px 5px 0px rgba(50, 50, 50, 0.18);\n -moz-box-shadow: -2px 2px 5px 0px rgba(50, 50, 50, 0.18);\n box-shadow: -2px 2px 5px 0px rgba(50, 50, 50, 0.18);\n -webkit-border-radius: 3px;\n -moz-border-radius: 3px;\n border-radius: 3px;\n .calendario {\n color: #333;\n }\n span {\n font-weight: 500;\n font-size: 13px;\n }\n .buttons {\n padding: 0;\n text-align: center;\n height: 25px;\n line-height: 0;\n }\n }\n li:nth-child(odd) {\n background: #fcfcfc;\n }\n li:nth-child(even) {\n background: #f9f9f9\n }\n li:last-child {\n border: none;\n }\n li {\n .visto {\n small {\n color: #b2b2b2 !important;\n }\n p {\n span {\n color: #b2b2b2 !important;\n }\n }\n }\n }\n \n }\n .pagination {\n\n .active{\n a{\n background-color:#333!important;\n border-color: #333!important;\n }\n }\n }\n }\n}\n\n.resize90w {\n min-width: 90% !important;\n}\n\n\n.beneficios_trabalhador, .beneficios_trabalhador_video{\n\n .segmento{\n margin-bottom: 50px;\n padding-bottom: 25px 0 25px 0;\n &__titulo{\n font-size:24px;\n font-weight: 600;\n color: $azul;\n }\n &__cct{\n padding: 5px 0 15px 0;\n font-weight: 500;\n font-family: 'Roboto Condensed', sans-serif;\n }\n &__assistencia{\n background-color: #eee;\n padding: 15px;\n &__separador{\n height: 3px;\n background-color: #fff;\n margin: 15px 0 15px 0;\n }\n &__beneficios{\n padding: 10px 0 10px 0;\n &__titulo{\n color: $azul;\n font-weight: 600;\n // padding-bottom: 10px;\n cursor: pointer;;\n }\n &__table{\n clear:both;\n margin-top: 10px;\n margin-bottom: 10px;\n thead{\n tr{\n th{\n\n }\n }\n }\n tbody{\n tr{\n td.right{\n text-align: right;\n }\n }\n }\n }\n }\n\n }\n }\n}\n.modal-info-beneficios{\n padding: 25px;\n #modal-info-beneficios__title{\n font-size: 24px;\n color: $azul;\n }\n #modal-info-beneficios__text{\n\n }\n #modal-info-beneficios__video{\n\n }\n}\n",".table_lista_eventos{\n width: 100%;\n thead{\n th{\n background-color: #055BC6;\n color: white;\n text-align: center;\n padding: 2px 18px;\n border: 1px solid #C7C7C7;\n border-bottom: 1px solid black;\n }\n }\n tbody{\n td{\n padding: 8px 10px;\n border: 1px solid #C7C7C7;\n }\n button{\n transition: 0.3s;\n padding: 1px 6px;\n font-size: 13px;\n border-radius: 15px;\n background-color: #93b7e4;\n border: 0px;\n color: white;\n }\n button:hover{\n transition: 0.3s;\n background-color: #81A8DA;\n }\n }\n}\n\n\n\n","@mixin tabsNavs($primeira, $segunda) {\n border-radius: 0px !important;\n background-color: $primeira;\n color: $segunda;\n border-color: $primeira;\n transition: 0.3s;\n &:hover, &:focus, &:active{\n transition: 0.3s;\n background-color: $azul_escuro;\n border-color: $azul_escuro;\n color: white;\n }\n}\nmark{\n background: yellow;\n color: black;\n}\n.nav-tabs{\n border-color: $azul;\n li.active{\n a{\n @include tabsNavs($azul, white);\n }\n }\n li{\n a{\n @include tabsNavs('transparent', #333);\n }\n }\n}\n\n.tab-content{\n ul{\n padding-left: 0px;\n li{\n display: block;\n span{\n display: block;\n cursor: pointer;\n background-color: #999;\n color: white;\n padding: 10px;\n border-bottom: 1px solid #eaeaea;\n font-size: 14px;\n font-weight: 300;\n transition: 0.3s;\n &:hover{\n background-color: #888;\n transition: 0.3s;\n }\n .fa{\n font-size: 12px;\n }\n }\n .conteudo-faqs{\n display: none;\n color: #666;\n font-size: 14px;\n padding: 5px 15px 35px 15px;\n line-height: 1.6;\n }\n }\n }\n}\n@media (max-width: 500px){\n .tab-content ul li span{\n background-color: #256CC9;\n &:hover{\n background-color: #256CC9;\n }\n }\n .tab-content ul li{\n margin-bottom: 5px;\n iframe{\n width: 100%;\n height: auto;\n }\n }\n}\n\n.display-busca{\n font-size: 18px;\n font-weight: 600;\n h1{\n font-size: 18px;\n font-weight: 600;\n display: inline-block;\n margin: 0px;\n }\n}\n.busca-faqs{\n input{\n width: 80%;\n float: left;\n height: 32px;\n border-radius: 5px 0px 0px 5px;\n }\n button{\n width: 20%;\n height: 32px;\n background-color: $azul;\n transition: 0.3s;\n border: 0px;\n color: white;\n border-radius: 0px 5px 5px 0px;\n &:hover{\n background-color: $azul_escuro;\n transition: 0.3s;\n }\n text-align: center;\n }\n}\n.back_btn_faqs{\n color: $azul;\n transition: 0.3s;\n &:hover{\n color: $azul_escuro;\n transition: 0.3s;\n }\n}",".bfalert{\n background: $azul;\n padding: 25px;\n font-weight: 300;\n margin-bottom: 30px;\n line-height: 1.5;\n font-size: 18px;\n color: white;\n}\n.bfalert-form{\n color: white;\n background: $azul;\n padding: 25px;\n font-weight: 300;\n\n}\n.data-recolhimento{\n display: block;\n width: 100%;\n height: 35px;\n border: 1px solid $gray;\n border-radius: 5px;\n margin-top: 5px;\n}\n\n//relatórios\n.campotel{\n display: inline-flex;\n width: 49%;\n}\n.formlabel{\n padding-top: 3px;\n text-align: right;\n}\n\n.formtitle{\n padding-top: 3px;\n text-align: right;\n}\n\nformlabel{\n font-weight: 400;\n color: $gray;\n}\n\n\n@media (max-width: 767px){\n .row .formlabel{\n text-align: left;\n }\n}\n\n\n//tabela resultado recolhimento\n.resultado_recolhimento .tabela_recolhimento{\n font-weight: 400;\n font-size: 12px;\n height: 32px;\n margin-top: 5px !important;\n margin-bottom: 10px !important;\n padding-top: 0px !important;\n padding-bottom: 0px !important;\n}\n.resultado_recolhimento .tabela_recolhimento tr {\n height:33px;\n}\n\n.resultado_recolhimento label{\n padding-top: 0px !important;\n}\n.pagination a{\n font-size: 12px;\n}\n.pagination .active a{\n background-color: $azul !important;\n}\n\n.iconpageservice{\n display: inline-block;\n float: right;\n margin: 0px 10px 0px 0px !important;\n padding: 0px;\n i{\n font-size: 32px;\n color: $azul;\n padding-left: 10px;\n }\n}\n\n.bfalert-form.green-form{\n background: $green !important;\n}\n.rodape-form{\n margin-top: 15px;\n margin-bottom: 30px;\n text-align: right;\n a{\n border: 1px solid #256cc9;\n color: #256cc9;\n padding: 8px 25px;\n font: 14px \"Roboto\", sans-serif;\n font-weight: 400;\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px; \n border-radius: 10px;\n background: url(\"/images/row-left.png\") 8px 50% no-repeat;\n text-decoration: none;\n }\n button{\n border: 1px solid #256cc9;\n color: #256cc9;\n padding: 8px 25px;\n text-indent: 10px;\n font: 14px \"Roboto\", sans-serif;\n font-weight: 400;\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n border-radius: 10px;\n position: relative;\n background: #FFF;\n }\n button:before {\n content: url(\"/images/row-left.png\");\n position: absolute;\n top: 0px;\n left: 10px;\n -webkit-transform: rotate(90deg);\n -moz-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n -o-transform: rotate(90deg);\n transform: rotate(90deg);\n }\n}\n\n.formulario{\n\n margin-bottom: 50px;\n .titulo-form-topo{\n margin-bottom: 30px;\n div{\n font-size: 16px;\n display: inline-block;\n }\n img{\n width: 22px;\n margin-top: -14px;\n }\n }\n .titulo-form{\n color: $azul;\n font-family: 'Roboto Condensed', 'Roboto', sans-serif;\n font-size: 24px;\n margin-bottom: 15px;\n }\n .form-control{\n border-radius: 0px;\n }\n \n select.form-control{\n border-radius: 0px;\n }\n input[type=password].senha-entidade{\n border: 0px solid;\n color: #333;\n }\n label{\n line-height: 1;\n padding-top: 15px;\n color: #666;\n font-size: 16px;\n font-weight: 400;\n }\n .btn-enviar{\n background: $green_light;\n border: 0px solid;\n border-radius: 13px;\n padding: 10px 25px;\n color: white;\n transition: 0.3s;\n &:hover{\n background: $green_hover;\n transition: 0.3s;\n }\n }\n .bfalert-form{\n p{\n font: 15px \"Roboto\", sans-serif;\n font-weight: 300;\n color: white;\n margin-left: 30px;\n line-height: 1.5;\n text-align: justify;\n }\n .aceita-check{\n float: left;\n }\n }\n .btn-danger{\n background: $red;\n padding: 2px 4px;\n border-radius: 5px;\n cursor: pointer;\n margin-top: 5px;\n display: inline-block;\n transition: 0.3s;\n &:hover{\n background: $red_escuro;\n transition: 0.3s;\n }\n }\n .btn-input {\n color: white;\n text-align: center;\n background: $azul;\n height: 30px;\n width: 200px;\n border-radius: 50px;\n display: inline-block;\n font-size: 12px;\n height: 35px;\n transition: 0.3s;\n &:hover{\n transition: 0.3s;\n background: $azul_escuro !important;\n }\n span{\n display: inline-block;\n color: white !important;\n margin-top: 9px;\n }\n input[type=file] {\n position: absolute;\n opacity: 0;\n z-index: 10;\n // left: 15px;\n width: 185px;\n height: 30px;\n top: 0;\n margin-top: 5px;\n }\n .show-resposta {\n text-align: left !important;\n font-size: 14px;\n }\n }\n button.danger {\n background: transparent;\n border: 0px solid;\n color: $red;\n }\n .link-bf{\n color: $azul;\n &:hover{\n text-decoration: none;\n color: $azul_escuro;\n }\n }\n .upload-show{\n border: 1px solid #ccc;\n border-radius: 15px;\n padding: 10px;\n font-size: 12px;\n }\n .conteudo-interativo{\n margin-bottom: 15px;\n }\n .conteudo-interativo strong{\n font-weight: 700;\n }\n .conteudo-interativo h5{\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 10px;\n }\n .conteudo-interativo h5 span{\n font-size: 12px !important;\n font-weight: 700;\n }\n .mensagem-entao small{\n font-size: 12px !important;\n margin-top: 0px !important;\n margin-bottom: 5px;\n }\n .upload-show{\n position: relative;\n }\n .parsley-pattern, .parsley-required, .rm-btn, .toggle, .parsley-type{\n display: none;\n }\n .parsley-error{\n transition: 0.5s;\n background-color: rgba(255, 50, 50, 0.1);\n }\n // .parsley-success{\n // transition: 0.5s;\n // background-color: rgba(100, 255, 100, 0.05);;\n // }\n .parsley-errors-list{\n padding: 0px;\n font-size: 9px;\n transition: 0.3s;\n }\n .parsley-errors-list li{\n transition: 0.3s;\n list-style: none;\n }\n}\n.picker__select--month, .picker__select--year{\n font-size: 13px;\n font-weight: 400;\n font-family: 'Roboto', sans-serif;\n}\n\n.tabela_planos, .in_tabela_planos {\n td, th{\n border: 1px solid #C7C7C7;\n font-weight: 300;\n }\n th{\n background-color: #055BC6;\n color: white;\n height: 25px;\n }\n td{\n color: #666;\n height: 45px;\n padding-left: 5px;\n }\n .table_padding{\n padding-left: 10px;\n }\n .table_center{\n text-align: center;\n }\n}\n\n.defaulttable{\n th, td{\n border: 1px solid #C7C7C7 !important;\n font-weight: 300 !important;\n color: white !important;\n\n .center {\n text-align: center;\n }\n }\n th{\n background-color: #055BC6 !important;\n color: white !important;\n height: 25px !important;\n }\n td{\n color: #666;\n height: 45px;\n padding-left:5px;\n }\n .table_padding{\n padding-left: 10px;\n }\n .table_center{\n text-align: center;\n }\n}\n\n.segmentos-enviados{\n .lista-planos{\n width: 100%;\n td, th{\n border: 1px solid #C7C7C7;\n font-weight: 300;\n padding-left: 10px;\n padding-top: 3px;\n }\n th{\n background-color: #08A800;\n color: white;\n height: 25px;\n }\n td{\n color: #666;\n }\n }\n}\n\n// Alerta sobre email válido SITEBEN-41.\nspan.FormEmailAlert{\n text-align: center;\n font-size: 14px;\n min-width: 100%;\n background-color: $green;\n padding: 2px;\n display: inline-block;\n color: white;\n}\n.duvida-form{\n select.form-control{\n width: 100% !important;\n }\n label{\n display: block;\n text-align: left;\n }\n .email-hidden, .telefone-hidden, .mensagem-hidden, .outro-hidden{\n display: none;\n }\n}\n.btn.duvida{\n width: 100%;\n text-transform: uppercase;\n padding-top: 10px;\n padding-bottom: 10px;\n font-size: 16px;\n}\n\n@media (min-width: 768px){\n .formulario{\n .right-text{\n text-align: right;\n }\n //coreção para o campos do telefone\n .tel-1{\n padding-right: 0px\n }\n .tel-2{\n padding-right: 0px;\n padding-left: 5px;\n }\n .tel-3{\n padding-right: 5px;\n padding-left: 5px;\n }\n .tel-4{\n padding-left: 0px;\n }\n .all-inline > *{\n display: inline-block;\n margin-right: 10px;\n }\n .all-inline input{\n margin-left: 15px;\n }\n .select-no-style{\n margin-top: 12px;\n }\n .margin_fake{\n margin-top: 20px;\n }\n }\n}\n.progress-bar{\n background-color: #256CC9;\n}\n.remodal .remodal-confirm,.remodal .remodal-cancel{\n display: none;\n &:hover{\n text-decoration: none;\n color: white;\n }\n}\n.alert-remodal .remodal-confirm,.alert-remodal .remodal-cancel{\n display: inline-block !important;\n &:hover{\n text-decoration: none;\n color: white;\n }\n}\n.remodal{\n .fa-check{\n color: $green;\n }\n .fa-times{\n color: $red;\n }\n}\n\n.btn-bloqueado {\n\n background-color: lightgrey;\n\n &:hover {\n\n background-color: lightgrey;\n }\n\n}\n\n.swal2-confirm, .swal2-cancel {\n margin-left: 5px;\n margin-right: 5px;\n}\n.jFiler-theme-default .jFiler-input-caption{\n display: none !important;\n}\n.jFiler-theme-default .jFiler-input {\n position: relative;\n display: inline-block !important;\n width: 200px !important;\n height: 35px;\n margin: 0 0 15px 0;\n background: #fefefe;\n border: 0px solid #cecece !important;\n font-size: 12px;\n font-family: sans-serif;\n color: #888;\n border-radius: 4px;\n cursor: pointer;\n overflow: hidden;\n -webkit-box-shadow: rgba(0,0,0,0) 0 4px 5px -5px inset !important;\n -moz-box-shadow: rgba(0,0,0,0) 0 4px 5px -5px inset !important;\n box-shadow: rgba(0,0,0,0) 0 4px 5px -5px inset !important;\n .jFiler-input-button{\n border-left: 0px solid !important;\n width: 100% !important;\n background-color: $azul;\n background-image: none !important;\n color: white;\n transition: 0.3s;\n border-radius: 50px !important;\n &:hover{\n transition: 0.3s;\n background-color: $azul_escuro;\n }\n }\n\n}\n.alert-natalidade{\n .jFiler-input{\n background-color: transparent !important;\n .jFiler-input-button{\n color: $azul !important;\n background-color: white !important;\n &:hover{\n background-color: #f3f3f3 !important;\n }\n }\n }\n}\n.link_anexo{\n width: 200px;\n text-align: center;\n background: $red;\n display: inline-block;\n height: 35px;\n padding-top: 8px;\n float: left;\n margin-right: 10px;\n border-radius: 50px;\n color: white;\n transition: 0.3s;\n margin-bottom: 10px;\n &:hover{\n color: white;\n text-decoration: none;\n background: $red_escuro;\n transition: 0.3s;\n }\n}\na.icon-jfi-trash.jFiler-item-trash-action{\n &:hover{\n text-decoration: none;\n }\n}\n\n.alert-remodal {\n box-sizing: border-box;\n width: 100%;\n margin-bottom: 10px;\n padding: 35px;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n color: #ffffff;\n background: $azul;\n .icon_alert{\n text-align: center;\n .fa{\n color: white;\n }\n .fa-stack-2x {\n font-size: 3em;\n }\n .fa-stack-1x {\n font-size: 2em;\n }\n }\n}\n.alert-remodal {\n max-width: 700px;\n}\n.alert-remodal, .remodal-wrapper::after {\n vertical-align: middle;\n}\n.hidden_cirurgia{\n display: none;\n}\n.picker__select--month, .picker__select--year {\n height: 35px;\n}\nselect.form-control{\n width: auto !important;\n}\n.delete-this-element{\n float: right;\n margin-right: 25%;\n position: relative;\n padding: 0px;\n margin-top: -10px;\n border: 0px;\n background: white;\n color: $red;\n transition: 0.3s;\n &:hover{\n color: $red_escuro;\n transition: 0.3s;\n }\n}\n.remodal-small{\n width: 390px;\n p{\n text-align: left;\n }\n}\n#formulario_contato{\n textarea{\n height: 80px;\n }\n}\n#formulario_contato2{\n textarea{\n height: 80px;\n }\n}\n.protocolo-show{\n background-color: #eee;\n padding-top: 10px;\n padding-bottom: 10px;\n span{\n font-size: 32px;\n font-weight: 300;\n color: #666;\n }\n h1{\n margin: 0px;\n font-size: 110px;\n color: #333;\n }\n}\n @media(max-width: 500px){\n #formulario .bloco-segmentos .titulo-form.right-text{\n padding-right: 15px;\n padding-left: 15px;\n text-align: center\n }\n}",".hidden-mobile{\n display: none;\n}\n.form-control{\n width: 100%;\n height: 32px;\n border: 1px solid #ccc;\n border-radius: 0px;\n}\n\n@media (max-width: 767px) {\n .hidden-mobile{\n display: block;\n }\n}\n.box-azul{\n background: #006bce;\n color: white;\n font-size: 15px;\n font-family: \"Helvetica\", sans-serif;\n padding: 20px 30px 20px 30px;\n text-align: center;\n margin-top: 15px;\n margin-bottom: 25px;\n}\n.blue_box{\n font-family: \"Helvetica\", sans-serif;\n background: #256cc9;\n padding: 25px;\n font-weight: 300;\n color: #fff;\n margin-bottom: 50px;\n}\nsmall i{\n font-family: \"Helvetica\", sans-serif;\n font-size: 12px;\n font-style: italic;\n}\n#svg-map path { fill:#d0d1d3 }\n#svg-map text { font:12px Arial-BoldMT, sans-serif; cursor:pointer }\n#svg-map a{ text-decoration:none;}\n#svg-map a:hover { cursor:pointer; text-decoration:none }\n#svg-map a:hover path{ fill:#256CC9 !important }\n#svg-map .circle { fill:#66ccff }\n#svg-map a:hover .circle { fill:#256CC9 !important; cursor:pointer }\n#svg-map .sm text{\n font-size: 16px;\n}\n#svg-map .md text{\n font-size: 22px;\n}\n#svg-map .lg text{\n font-size: 28px;\n}\n#svg-map text {\n position: relative;\n font-family: FontAwesome;\n color: #256CC9;\n}\n.conteudo-hover-map h1{\n font-size: 18px !important;\n color: #256CC9 !important;\n margin-top: 0px !important;\n margin-bottom: 10px !important;\n}\n.conteudo-hover-map ul{\n padding: 0px;\n}\n .conteudo-hover-map ul li{\n font-size: 12px;\n color: #333;\n font-family: \"Arial\", \"Helvetica\", sans-serif;\n margin-bottom: 5px;\n}\n.conteudo-hover-map ul li .fa{\n color: #256CC9;\n}\n\n.conteudo-select h1{\n font-size: 18px !important;\n color: #256CC9 !important;\n margin-top: 0px !important;\n margin-bottom: 10px !important;\n}\n.conteudo-select ul{\n padding: 0px;\n}\n .conteudo-select ul li{\n font-size: 12px;\n color: #333;\n font-family: \"Arial\", \"Helvetica\", sans-serif;\n margin-bottom: 5px;\n}\n.conteudo-select ul li .fa{\n color: #256CC9;\n}\n",".noticias{\n .col-sm-5{\n border-left: 1px solid #DDD;\n margin-top: 25px;\n }\n .bcrumb{\n margin-top: 25px;\n margin-bottom: 10px;\n clear: both;\n padding-bottom: 5px;\n border-bottom: 1px solid #DDD;\n a{\n color: #444;\n font-size: 13px;\n font-family: \"Roboto\", \"Roboto Condensed\", sans-serif;\n }\n a:hover{\n text-decoration: none;\n }\n }\n a{\n transition: 0.3s;\n font-family: Oswald,arial,Georgia, serif;\n }\n .bloco-noticia{\n margin-top: 25px;\n padding-bottom: 25px;\n border-bottom: 1px solid #f2f2f2;\n .titulo{\n font-size: 28px;\n transition: 0.3s;\n color: #666;\n line-height: 1.2;\n margin-bottom: 7px;\n font-family: Oswald,arial,Georgia, serif;\n }\n .fa{\n color: #aaa;\n }\n .data{\n display: inline-block !important;\n margin-right: 8px;\n display: block;\n color: #aaa;\n }\n .imagem{\n display: block;\n margin-top: 10px;\n img{\n width: 300px;\n transition: 0.3s;\n height: 160px;\n }\n .conteudo{\n display: inline-block;\n float: right;\n width: 50%;\n }\n }\n .conteudo{\n p{\n margin: 0px !important;\n display: inline-block;\n color: #666;\n font-size: 13px;\n }\n }\n .btn{\n display: block !important;\n margin-top: 15px;\n color: #666;\n }\n a:hover{\n text-decoration: none;\n .titulo{\n color: #333;\n transition: 0.3s;\n }\n img{\n opacity: 0.7;\n transition: 0.3s;\n }\n .btn{\n color: #333;\n transition: 0.3s;\n }\n }\n }\n .paginate{\n width: 50%;\n margin: 0px auto;\n text-align: center;\n }\n}\n\n.noticias-arquivos{\n .col-sm-5{\n border-left: 1px solid #DDD;\n margin-top: 25px;\n }\n .bcrumb{\n margin-top: 25px;\n margin-bottom: 10px;\n clear: both;\n padding-bottom: 5px;\n border-bottom: 1px solid #DDD;\n a{\n color: #444;\n font-size: 13px;\n }\n a:hover{\n text-decoration: none;\n }\n }\n .imagem{\n margin-bottom: 20px;\n img{\n width: 100%;\n height: 360px;\n }\n }\n .titulo{\n font-family: Oswald,arial,Georgia, serif;\n margin-bottom: 10px;\n font-size: 28px;\n }\n .fa{\n color: #aaa;\n }\n .criacao{\n border-bottom: 1px solid #f2f2f2;\n padding-bottom: 5px;\n margin-bottom: 10px;\n display: block;\n color: #aaa;\n font-size: 10px;\n }\n .conteudo{\n line-height: 1.5;\n p{\n padding-top: 0;\n padding-bottom: 1em;\n color: #333;\n font-family: Tahoma,Arial,Verdana,sans-serif;\n font-size: 13px;\n }\n }\n .atualizado{\n padding-bottom: 5px;\n margin-bottom: 10px;\n display: block;\n color: #333;\n font-size: 12px;\n }\n}\n.sidebar-noticias{\n .populares{\n .topo{\n font-size: 26px;\n border-bottom: 5px solid #256CC9;\n color: #666;\n }\n .bloco{\n border-bottom: 1px solid #f2f2f2;\n padding: 10px 0px;\n display: table;\n width: 100%;\n .imagem{\n display: table-cell;\n vertical-align: middle;\n float: left;\n margin-right: 10px;\n margin-bottom: 0px !important;\n img{\n width: 86px;\n height: 86px;\n }\n }\n .titulo{\n display: inline;\n font-size: 20px;\n transition: 0.3s;\n color: #666;\n margin-bottom: 7px;\n font-family: Oswald,arial,Georgia, serif;\n .criacao{\n padding-bottom: 5px;\n margin-bottom: 10px;\n display: block;\n color: #aaa;\n font-size: 12px;\n border-bottom: 0px !important;\n }\n }\n a:hover{\n text-decoration: none;\n .titulo{\n color: #333;\n transition: 0.3s;\n }\n img{\n opacity: 0.7;\n transition: 0.3s;\n }\n }\n }\n }\n .historico-noticias{\n margin-top: 20px;\n .topo{\n font-size: 26px;\n border-bottom: 5px solid #256CC9;\n color: #666;\n }\n .lista{\n margin-top: 10px;\n .anos{\n display: block;\n color: #666;\n border: unset;\n background-color: white;\n font-family: Oswald,arial,Georgia, serif;\n font-size: 20px;\n }\n .anos:hover{\n transition: 0.3s;\n color: #333;\n }\n .meses{\n li{\n position: relative;\n padding: unset;\n top: unset;\n left: unset;\n border: unset;\n cursor: unset;\n a{\n font-size: 18px;\n color: #666;\n font-family: Oswald,arial,Georgia, serif;\n }\n }\n }\n }\n }\n}\n@media(max-width: 500px){\n .noticias .bloco-noticia .titulo{\n text-align: center;\n font-size: 20px;\n }\n}\n\n\n@media(max-width: 1219px){\n .noticias{\n .bloco-noticia{\n .imagem{\n img{\n width: 100%;\n height: 180px;\n }\n .conteudo{\n display: block;\n float: none;\n width: 100%;\n margin-top: 25px;\n }\n }\n }\n }\n .noticias-arquivos{\n img{\n width: 100% !important;\n height: 180px !important;\n }\n }\n .rrssb-buttons{\n width: 235px !important;\n }\n}\n",".paragrafo_pop_cob{\n padding-right: 30px;\n padding-left: 30px;\n font-size: 20px;\n margin-top: 20px;\n color: #535353;\n}\n.destaque_pop{\n color: #535353;\n font-size: 20px;\n font-weight: 600;\n}\n// botoes do popup de miração de sistema decobranca\n.botoes_cobranca{\n margin-top: 25px;\n button{\n width: 30%;\n margin-right: 5px;\n margin-left: 5px;\n border-radius: 3px;\n }\n}",".title-resposta{\n font-size: 18px;\n font-weight: bold;\n margin-top: 15px;\n}\n.box-infos{\n border: 1px solid $azul;\n border-radius: 5px;\n margin-top: 20px;\n padding: 10px;\n}\n.resposta-forms{\n .box-azul{\n text-align: left;\n a{\n color: white;\n }\n }\n}\n@media print{\n .noPrint{\n display: none !important;\n }\n .infos-emp{\n display: none !important;\n }\n .print-cem{\n width: 100% !important;\n margin: 0px !important;\n padding: 0px !important;\n float: none !important;\n left: 0% !important;\n }\n}\n",".home_sindicato {\n background: #858585;\n padding: 10px 20px 20px 20px;\n margin-bottom: 30px;\n margin-top: 70px;\n color: white;\n p{\n color: white;\n font-size: 44px !important;\n width: 60%;\n margin-top: 0px !important;\n font: 15px \"Roboto\", sans-serif;\n font-weight: 300;\n line-height: 1.5;\n text-align: justify;\n }\n span{\n font-family: 'Roboto Condensed', sans-serif;\n }\n img{\n float: right;\n margin-top: -169px;\n margin-right: -32px;\n width: 380px;\n }\n}\n\n//\n.iconpageservice a{\n text-decoration: none;\n}\n\n//print\ni:hover{\n color: $azul_hover;\n}\n//DATATABLES\n.evento_tabela_empresas{\n width: 100%;\n thead th{\n padding-left: 10px;\n background-color: #055BC6;\n color: white;\n //padding: 2px 18px;\n border: 1px solid #C7C7C7;\n border-bottom: 1px solid black;\n }\n //Corrigindo um bug sem vergonha onde o TH fica incorreto.\n thead .sorting_asc::after{\n float: right;\n margin-right: 10px;\n }\n thead .sorting::after{\n float: right;\n margin-right: 10px;\n }\n thead .sorting_desc::after{\n float: right;\n margin-right: 10px;\n }\n tbody td{\n\n padding: 8px 10px;\n border: 1px solid #C7C7C7;\n }\n tbody tr.even{\n background-color: #fafafa;\n }\n}\n//Botoes personalizados Area Consulta/Relatorio\n.btn-sem-planos{\n font-size: 10px;\n border-radius: 10px;\n background-color: $red_escuro;\n width: 78px;\n height: 24px;\n display: block;\n float: left;\n color: white;\n text-align: right;\n padding-right: 10px;\n line-height: 8px;\n padding-top: 8px;\n\n}\n.btn-planos-inativo{\n font-size: 8px;\n border-radius: 10px;\n background-color: $red_escuro;\n width: 61px;\n height: 24px;\n display: block;\n float: left;\n color: white;\n z-index: -1;\n text-align: right;\n padding-right: 10px;\n line-height: 8px;\n padding-top: 3px;\n}\n\n.btn-reat-planos{\n font-size: 12px;\n border-radius: 10px;\n background-color: $green_hover;\n width: 79px;\n height: 24px;\n display: block;\n float: left;\n color: white;\n text-align: center;\n padding-left: 10px;\n padding-right: 10px;\n padding-top: 0px;\n line-height: 8px;\n &:hover{\n background-color: $green;\n text-decoration: none;\n color: white;\n\n }\n}\n\n.btn-sem-planos-ativos{\n font-size:10px;\n border-radius: 10px;\n padding: 2px 5px 2px 5px;\n background-color: $red_escuro;\n height: 14px;\n color: white;\n text-align: center;\n line-height: 8px;\n padding-top: 3px;\n}\n\n\n\n\n// set tables at 100% of the screen\n.fullwidth{\n width: 100%;\n}\n\n//add a left an Right padding of 10px\n.lr_paddings{\n padding-left: 25px;\n padding-right: 25px;\n}\n.azultitulo{\n font-size: 16px;\n text-align: left;\n}\n\n\n\n.azulmtitulo{\n font-size: 22px;\n text-align: left;\n}\n\n// TMPedrobeda\n.separator{\n display: none;\n}\n#tabs-entidade{\n ul{\n padding-left: 0px;\n margin-left: -1%;\n display: flex;\n }\n .ui-state-active{\n background-color: $azul;\n a{\n color: white;\n }\n }\n li.ui-tabs-tab{\n flex: 1 1 auto;\n text-align: center;\n display: inline-block;\n //margin: -2px;\n //list-style-type: none;\n //width: 23%;\n height: 50px;\n border: none;\n padding-top: 5px;\n padding-bottom: 10px;\n padding-left: 10px;\n padding-right: 10px;\n margin-left: 10px;\n border-radius: 10px 10px 10px 10px;\n background-color: $gray;\n a{\n display: block;\n text-decoration: none;\n color: #666666;\n min-height: 23px;\n min-width: 100%;\n }\n .ui-tabs-active {\n }\n } \n}\n\n//Botao Voltar dedicado na tela de Entidade\n.voltar_consulta{\n font-size: 15px;\n font-family: 'Roboto', 'Roboto Condensed', sans-serif;\n color: $azul;\n margin-top: 5px;\n margin-left: 5px;\n //display: inline-block;\n padding: 8px 15px;\n border: 1px solid $azul;\n border-radius: 30px;\n background: white;\n color: $azul;\n text-decoration: none;\n &:hover{\n border-color: $azul_escuro;\n color: $azul_escuro;\n }\n}\n\n\n\n#tabs-entidade li.ui-state-active{\n background-color: $azul;\n}\n\n#tabs-entidade li.ui-state-active a{\n color: white;\n}\n\n.sind-eventos{\n .btn-double{\n background-color: #055bc6; \n width: 100%;\n height: 88px;\n }\n\n .btn-double:hover{\n background-color: #194F93; \n }\n\n .btn-double:focus{\n background-color: #055bc6; \n }\n\n}\n\n@media (max-width: 991px) {\n .sind-eventos{\n .btn-double{\n height: unset !important;\n }\n }\n} \n\n@media(max-width: 767px) {\n #tabs-entidade li{\n flex: none;\n display: inline-block;\n width: 100%;\n margin-bottom: 5px !important;;\n }\n #tabs-entidade ul{\n display: block;\n }\n .dataTables_paginate .pagination li{\n width: auto !important;\n }\n}\n\n\n\n@media (min-width: 768px) and (max-width: 993px){\n #tabs-entidade ul li{\n flex: none;\n //display: inline-block;\n width: 47%;\n margin-top: 5px\n }\n #tabs-entidade ul{\n display: block;\n }\n\n}\n\n@media (max-width:767px) {\n #tabs-1 .telefones .col-sm-7 .campotel {\n width: 100%;\n }\n}\n@media(max-width: 500px){\n .home_sindicato {\n p{\n font-size: 23px !important;\n width: 100%;\n }\n img{\n float: none;\n width: 100%;\n margin: 5px auto;\n }\n margin-top: 0px;\n }\n .list-beneficios .col-sm-6.col-md-4.clearfix{\n width: 44%;\n float: left;\n padding: 0;\n margin: 3% 1% 2% 3.5%;\n }\n}","#on-line-chat{\n width: 100%;\n float: right;\n position: relative;\n #chatframe{\n z-index: 10;\n width: 300px;\n height: 400px;\n bottom: 21px;\n position: fixed;\n right: 21px;\n display: none;\n iframe{\n width: 300px;\n height: 400px;\n }\n #closeIframe{\n z-index: 11;\n width: 19px;\n height: 395px;\n position: relative;\n right: -282px;\n top: -400px;\n\n i{\n cursor: pointer;\n }\n }\n }\n #iconeChat{\n z-index: 9;\n width: 85px;\n height: 50;\n bottom: 21px;\n position: fixed;\n right: 50px;\n }\n}",".noticias-home {\n display: none;\n padding: 20px 10px;\n position: fixed;\n background-color: rgba(40, 40, 40, 0.9);\n width: 100%;\n z-index: 1;\n box-shadow: 0px 1px 4px rgba(0,0,0,0.5);\n\n .noticias-image {\n background-size: cover;\n background-position: center;\n height: 190px;\n margin-bottom: 30px;\n }\n\n .noticias-bloco{\n background-color: rgba(221, 221, 221, 1);\n border: 1px solid white;\n box-shadow: 0px 0px 2px rgba(0,0,0,0.5);\n border-radius: 5px;\n min-height: 100px;\n a > div{\n padding: 10px;\n }\n .noticias-top{\n font-size: 24px;\n color: white;\n }\n .noticias-title{\n color: gray;\n }\n .timeStamp{\n font-size: 12px;\n color: black;\n padding-top: 10px;\n }\n }\n .noticias-bloco:hover {\n transition: 0.5s;\n transform: scale(1.05);\n }\n .noticias-title{\n font-size: 16px;\n min-height: 70px;\n }\n\n .noticias-upper{\n font-size: 22px;\n padding-bottom: 30px;\n }\n\n .noticias-saibamais{\n float: right;\n }\n}\n"," .cct_protocolo{\n .btn-download{\n border-radius: 13px;\n padding: 10px 25px;\n }\n\n .file_status{\n text-align: center;\n width: 200px;\n height: 35px;\n border-radius: 19px;\n padding: 9px;\n font-size: 12px;\n }\n\n .pending{\n background: #068100;\n color: white;\n }\n .sent{\n background-color: #ec971f;\n color: #fff;\n }\n .generic{\n background-color: #dfdfdf;\n color: #000;\n\n }\n .paddings{\n min-height: 60px;\n }\n .doc_name{\n font-size: 14px;\n }\n .btn-back-to-cct{\n float: right;\n background: #256cc9;\n border: 0px solid;\n border-radius: 13px;\n padding: 10px 25px;\n color: white;\n transition: 0.3s;\n margin-right: 10px;\n }\n .btn-back-to-cct:hover{\n text-decoration: none;\n color: white;\n background-color: #194f92;\n }\n\n }\n\n .beneficio_lista{\n\n .table_protocolos{\n width: 100%;\n }\n .table_protocolos thead{\n background-color: lightgray;\n }\n .table_protocolos thead th {\n border: 1px solid white;\n padding: 5px 10px;\n font-size: 14px;\n }\n\n .table_protocolos tbody tr td{\n padding: 5px 10px;\n }\n .table_protocolos tbody tr:nth-child(even) {\n background-color: #f2f2f2;\n }\n\n .table_protocolos tbody td:nth-child(1) {\n width: auto;\n }\n .table_protocolos tbody td:nth-child(2) {\n width: auto;\n }\n .table_protocolos tbody td:nth-child(3) {\n width: 50px;\n }\n .table_protocolos tbody td a i:hover {\n color: white;\n }\n .basic_status{\n display: inline-flex;\n padding: 0px 15px;\n }\n .cobranca-de-multa,\n .notificacao-de-descomprimento-de-clausula { background-color: #9c51b6; color: white; }\n .resolvido,\n .aprovado { background-color: #4C607A; color: white; }\n .analise-de-documento { background-color: #4682b4; color: white; }\n .aguardando-documentos { background-color: #5bc0de; color: white; }\n .divergencia-de-documentos,\n .recusado { background-color: #5bc0de; color: white;}\n .em-analise { background-color: #A0D6B4; color: white;}\n .pendente { background-color: #da8627; color: white;}\n .abonado { background-color: #f1575f; color: white;}\n .certificado-invalidado { background-color: #c4284a; color: white;}\n .reprovado { background-color: #e91b25; color: white;}\n \n }"," .mediakit{\n\n .mediacategoria_icone{\n max-width: 30px;\n max-height: 30px;\n display: inline-block; \n }\n\n .title_videos{\n padding-bottom: 25px;\n padding-top: 25px;\n }\n\n .title_downloads{\n padding-bottom: 25px;\n padding-top: 25px;\n }\n\n .mediacategoria_title{\n display: inline-block;\n font-size: 23px;\n // font-weight: 600;\n padding-left: 10px;\n position: relative;\n top: 4px;\n padding-bottom: 25px;\n }\n \n .download_part{\n margin: 0 auto;\n\n\n .down_preview{\n transition: 0.2s;\n display: inline-flex;\n margin-right: 10px;\n margin-left: 10px;\n margin-bottom: 10px;\n width: 300px;\n height: 300px;\n background-size: cover;\n background-position: center;\n z-index: unset;\n\n &:hover{\n transition: 0.3s;\n transform: scale(1.1);\n z-index: 400;\n }\n }\n\n .down_icone{\n background-color: rgba(0,0,0,0.7);\n height: 72px;\n text-align: center;\n font-weight: 600;\n color: white;\n border-radius: 23px;\n padding: 13px 17px;\n align-self: center;\n margin: 0 auto;\n }\n\n .down_icone:hover{\n background-color: #055BC6;\n }\n\n\n }\n\n \n\n .iframe_part{\n margin-bottom: 25px;\n height: 280px;\n }\n \n i:hover{\n color: white; \n }\n \n}",".beneficiometro{\n width: 240px;\n top:66px;\n background: url('/images/bmetro-arrow.jpg') center right no-repeat #2564cd;\n border-right:10px solid #C80000;\n color: #FFF;\n position: fixed;\n z-index: 1000;\n cursor: pointer;\n border-radius: 0px 0px 5px 0px;\n p{\n color:#FFF;\n font-size: 12px;\n padding-left: 17px;\n }\n ul{\n margin:0 0 0 17px;\n padding:0;\n li:nth-child(1){\n background:url('/images/phone_bmetro.jpg') 2px 4px no-repeat; \n display: list-item;\n padding: 3px 3px 3px 20px;\n list-style: none;\n }\n li:nth-child(2){\n background:url('/images/phone_efetuados.jpg') 2px 4px no-repeat; \n display: list-item;\n padding: 3px 3px 3px 20px;\n list-style: none;\n }\n\n li:nth-child(3){\n background:url('/images/emails_recebidos.jpg') 2px 4px no-repeat; \n display: list-item;\n padding: 3px 3px 3px 20px;\n list-style: none;\n }\n\n li:nth-child(4){\n background:url('/images/emails_enviados.jpg') 2px 4px no-repeat; \n display: list-item;\n padding: 3px 3px 3px 20px;\n list-style: none;\n }\n\n li:nth-child(5){\n background:url('/images/ocorrencias_bmetro.jpg') 2px 4px no-repeat; \n display: list-item;\n padding: 3px 3px 3px 20px;\n list-style: none;\n }\n li:nth-child(6){\n background:url('/images/transacoes_bmetro.jpg') 2px 8px no-repeat; \n display: list-item;\n padding: 3px 3px 3px 20px;\n list-style: none;\n }\n li:nth-child(7){\n background:url('/images/cesta_bmetro.jpg') 2px 4px no-repeat; \n display: list-item;\n padding: 3px 3px 3px 20px;\n list-style: none;\n }\n li:nth-child(8){\n background:url('/images/consulta_medica.jpg') 2px 4px no-repeat; \n display: list-item;\n padding: 3px 3px 3px 20px;\n list-style: none;\n }\n li{\n vertical-align:top; \n \n p{\n font-weight: bold;\n font-size: 11px;\n margin-bottom: 12px;\n }\n span{\n color:#73e0c0\n }\n }\n \n }\n}\n\n@media (max-device-width: 768px){\n .beneficiometro{\n top:60px;\n }\n}","@charset \"UTF-8\";\n\n/*!\n * animate.css -http://daneden.me/animate\n * Version - 3.7.0\n * Licensed under the MIT license - http://opensource.org/licenses/MIT\n *\n * Copyright (c) 2018 Daniel Eden\n */\n\n@-webkit-keyframes hue-rotate {\n 0% {\n -webkit-filter: hue-rotate(0deg);\n }\n\n 50% {\n -webkit-filter: hue-rotate(100deg);\n }\n\n 100% {\n -webkit-filter: hue-rotate(0deg);\n }\n}\n\n@keyframes hue-rotate {\n 0% {\n filter: hue-rotate(0deg);\n }\n\n 50% {\n filter: hue-rotate(100deg);\n }\n\n 100% {\n filter: hue-rotate(0deg);\n }\n}\n\n.hue-rotate {\n -webkit-animation-name: hue-rotate;\n animation-name: hue-rotate;\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n}\n\n@-webkit-keyframes bounce {\n from,\n 20%,\n 53%,\n 80%,\n to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n 40%,\n 43% {\n -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n -webkit-transform: translate3d(0, -30px, 0);\n transform: translate3d(0, -30px, 0);\n }\n\n 70% {\n -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n -webkit-transform: translate3d(0, -15px, 0);\n transform: translate3d(0, -15px, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(0, -4px, 0);\n transform: translate3d(0, -4px, 0);\n }\n}\n\n@keyframes bounce {\n from,\n 20%,\n 53%,\n 80%,\n to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n 40%,\n 43% {\n -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n -webkit-transform: translate3d(0, -30px, 0);\n transform: translate3d(0, -30px, 0);\n }\n\n 70% {\n -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n -webkit-transform: translate3d(0, -15px, 0);\n transform: translate3d(0, -15px, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(0, -4px, 0);\n transform: translate3d(0, -4px, 0);\n }\n}\n\n.bounce {\n -webkit-animation-name: bounce;\n animation-name: bounce;\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n}\n\n@-webkit-keyframes flash {\n from,\n 50%,\n to {\n opacity: 1;\n }\n\n 25%,\n 75% {\n opacity: 0;\n }\n}\n\n@keyframes flash {\n from,\n 50%,\n to {\n opacity: 1;\n }\n\n 25%,\n 75% {\n opacity: 0;\n }\n}\n\n.flash {\n -webkit-animation-name: flash;\n animation-name: flash;\n}\n\n@-webkit-keyframes red_blink {\n from{\n background-color: red;\n }\n 100% {\n background-color: white;\n }\n}\n@keyframes red_blink {\n from{\n background-color: red;\n }\n 100% {\n background-color: white;\n }\n}\n\n.red_blink {\n -webkit-animation-name: red_blink;\n animation-name: red_blink;\n}\n\n/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n\n@-webkit-keyframes pulse {\n from {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 50% {\n -webkit-transform: scale3d(1.05, 1.05, 1.05);\n transform: scale3d(1.05, 1.05, 1.05);\n }\n\n to {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes pulse {\n from {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 50% {\n -webkit-transform: scale3d(1.05, 1.05, 1.05);\n transform: scale3d(1.05, 1.05, 1.05);\n }\n\n to {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n.pulse {\n -webkit-animation-name: pulse;\n animation-name: pulse;\n}\n\n@-webkit-keyframes rubberBand {\n from {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 30% {\n -webkit-transform: scale3d(1.25, 0.75, 1);\n transform: scale3d(1.25, 0.75, 1);\n }\n\n 40% {\n -webkit-transform: scale3d(0.75, 1.25, 1);\n transform: scale3d(0.75, 1.25, 1);\n }\n\n 50% {\n -webkit-transform: scale3d(1.15, 0.85, 1);\n transform: scale3d(1.15, 0.85, 1);\n }\n\n 65% {\n -webkit-transform: scale3d(0.95, 1.05, 1);\n transform: scale3d(0.95, 1.05, 1);\n }\n\n 75% {\n -webkit-transform: scale3d(1.05, 0.95, 1);\n transform: scale3d(1.05, 0.95, 1);\n }\n\n to {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes rubberBand {\n from {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 30% {\n -webkit-transform: scale3d(1.25, 0.75, 1);\n transform: scale3d(1.25, 0.75, 1);\n }\n\n 40% {\n -webkit-transform: scale3d(0.75, 1.25, 1);\n transform: scale3d(0.75, 1.25, 1);\n }\n\n 50% {\n -webkit-transform: scale3d(1.15, 0.85, 1);\n transform: scale3d(1.15, 0.85, 1);\n }\n\n 65% {\n -webkit-transform: scale3d(0.95, 1.05, 1);\n transform: scale3d(0.95, 1.05, 1);\n }\n\n 75% {\n -webkit-transform: scale3d(1.05, 0.95, 1);\n transform: scale3d(1.05, 0.95, 1);\n }\n\n to {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n.rubberBand {\n -webkit-animation-name: rubberBand;\n animation-name: rubberBand;\n}\n\n@-webkit-keyframes shake {\n from,\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n 10%,\n 30%,\n 50%,\n 70%,\n 90% {\n -webkit-transform: translate3d(-10px, 0, 0);\n transform: translate3d(-10px, 0, 0);\n }\n\n 20%,\n 40%,\n 60%,\n 80% {\n -webkit-transform: translate3d(10px, 0, 0);\n transform: translate3d(10px, 0, 0);\n }\n}\n\n@keyframes shake {\n from,\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n 10%,\n 30%,\n 50%,\n 70%,\n 90% {\n -webkit-transform: translate3d(-10px, 0, 0);\n transform: translate3d(-10px, 0, 0);\n }\n\n 20%,\n 40%,\n 60%,\n 80% {\n -webkit-transform: translate3d(10px, 0, 0);\n transform: translate3d(10px, 0, 0);\n }\n}\n\n.shake {\n -webkit-animation-name: shake;\n animation-name: shake;\n}\n\n@-webkit-keyframes headShake {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 6.5% {\n -webkit-transform: translateX(-6px) rotateY(-9deg);\n transform: translateX(-6px) rotateY(-9deg);\n }\n\n 18.5% {\n -webkit-transform: translateX(5px) rotateY(7deg);\n transform: translateX(5px) rotateY(7deg);\n }\n\n 31.5% {\n -webkit-transform: translateX(-3px) rotateY(-5deg);\n transform: translateX(-3px) rotateY(-5deg);\n }\n\n 43.5% {\n -webkit-transform: translateX(2px) rotateY(3deg);\n transform: translateX(2px) rotateY(3deg);\n }\n\n 50% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n@keyframes headShake {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 6.5% {\n -webkit-transform: translateX(-6px) rotateY(-9deg);\n transform: translateX(-6px) rotateY(-9deg);\n }\n\n 18.5% {\n -webkit-transform: translateX(5px) rotateY(7deg);\n transform: translateX(5px) rotateY(7deg);\n }\n\n 31.5% {\n -webkit-transform: translateX(-3px) rotateY(-5deg);\n transform: translateX(-3px) rotateY(-5deg);\n }\n\n 43.5% {\n -webkit-transform: translateX(2px) rotateY(3deg);\n transform: translateX(2px) rotateY(3deg);\n }\n\n 50% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n.headShake {\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n -webkit-animation-name: headShake;\n animation-name: headShake;\n}\n\n@-webkit-keyframes swing {\n 20% {\n -webkit-transform: rotate3d(0, 0, 1, 15deg);\n transform: rotate3d(0, 0, 1, 15deg);\n }\n\n 40% {\n -webkit-transform: rotate3d(0, 0, 1, -10deg);\n transform: rotate3d(0, 0, 1, -10deg);\n }\n\n 60% {\n -webkit-transform: rotate3d(0, 0, 1, 5deg);\n transform: rotate3d(0, 0, 1, 5deg);\n }\n\n 80% {\n -webkit-transform: rotate3d(0, 0, 1, -5deg);\n transform: rotate3d(0, 0, 1, -5deg);\n }\n\n to {\n -webkit-transform: rotate3d(0, 0, 1, 0deg);\n transform: rotate3d(0, 0, 1, 0deg);\n }\n}\n\n@keyframes swing {\n 20% {\n -webkit-transform: rotate3d(0, 0, 1, 15deg);\n transform: rotate3d(0, 0, 1, 15deg);\n }\n\n 40% {\n -webkit-transform: rotate3d(0, 0, 1, -10deg);\n transform: rotate3d(0, 0, 1, -10deg);\n }\n\n 60% {\n -webkit-transform: rotate3d(0, 0, 1, 5deg);\n transform: rotate3d(0, 0, 1, 5deg);\n }\n\n 80% {\n -webkit-transform: rotate3d(0, 0, 1, -5deg);\n transform: rotate3d(0, 0, 1, -5deg);\n }\n\n to {\n -webkit-transform: rotate3d(0, 0, 1, 0deg);\n transform: rotate3d(0, 0, 1, 0deg);\n }\n}\n\n.swing {\n -webkit-transform-origin: top center;\n transform-origin: top center;\n -webkit-animation-name: swing;\n animation-name: swing;\n}\n\n@-webkit-keyframes tada {\n from {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 10%,\n 20% {\n -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);\n transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);\n }\n\n 30%,\n 50%,\n 70%,\n 90% {\n -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n }\n\n 40%,\n 60%,\n 80% {\n -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n }\n\n to {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes tada {\n from {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 10%,\n 20% {\n -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);\n transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);\n }\n\n 30%,\n 50%,\n 70%,\n 90% {\n -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n }\n\n 40%,\n 60%,\n 80% {\n -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n }\n\n to {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n.tada {\n -webkit-animation-name: tada;\n animation-name: tada;\n}\n\n/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n\n@-webkit-keyframes wobble {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n 15% {\n -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n }\n\n 30% {\n -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n }\n\n 45% {\n -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n }\n\n 60% {\n -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n }\n\n 75% {\n -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes wobble {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n 15% {\n -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n }\n\n 30% {\n -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n }\n\n 45% {\n -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n }\n\n 60% {\n -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n }\n\n 75% {\n -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.wobble {\n -webkit-animation-name: wobble;\n animation-name: wobble;\n}\n\n@-webkit-keyframes jello {\n from,\n 11.1%,\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n 22.2% {\n -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);\n transform: skewX(-12.5deg) skewY(-12.5deg);\n }\n\n 33.3% {\n -webkit-transform: skewX(6.25deg) skewY(6.25deg);\n transform: skewX(6.25deg) skewY(6.25deg);\n }\n\n 44.4% {\n -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);\n transform: skewX(-3.125deg) skewY(-3.125deg);\n }\n\n 55.5% {\n -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);\n transform: skewX(1.5625deg) skewY(1.5625deg);\n }\n\n 66.6% {\n -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);\n transform: skewX(-0.78125deg) skewY(-0.78125deg);\n }\n\n 77.7% {\n -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);\n transform: skewX(0.390625deg) skewY(0.390625deg);\n }\n\n 88.8% {\n -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n }\n}\n\n@keyframes jello {\n from,\n 11.1%,\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n 22.2% {\n -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);\n transform: skewX(-12.5deg) skewY(-12.5deg);\n }\n\n 33.3% {\n -webkit-transform: skewX(6.25deg) skewY(6.25deg);\n transform: skewX(6.25deg) skewY(6.25deg);\n }\n\n 44.4% {\n -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);\n transform: skewX(-3.125deg) skewY(-3.125deg);\n }\n\n 55.5% {\n -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);\n transform: skewX(1.5625deg) skewY(1.5625deg);\n }\n\n 66.6% {\n -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);\n transform: skewX(-0.78125deg) skewY(-0.78125deg);\n }\n\n 77.7% {\n -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);\n transform: skewX(0.390625deg) skewY(0.390625deg);\n }\n\n 88.8% {\n -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n }\n}\n\n.jello {\n -webkit-animation-name: jello;\n animation-name: jello;\n -webkit-transform-origin: center;\n transform-origin: center;\n}\n\n@-webkit-keyframes heartBeat {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 14% {\n -webkit-transform: scale(1.3);\n transform: scale(1.3);\n }\n\n 28% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 42% {\n -webkit-transform: scale(1.3);\n transform: scale(1.3);\n }\n\n 70% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes heartBeat {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 14% {\n -webkit-transform: scale(1.3);\n transform: scale(1.3);\n }\n\n 28% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 42% {\n -webkit-transform: scale(1.3);\n transform: scale(1.3);\n }\n\n 70% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n.heartBeat {\n -webkit-animation-name: heartBeat;\n animation-name: heartBeat;\n -webkit-animation-duration: 1.3s;\n animation-duration: 1.3s;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n}\n\n@-webkit-keyframes bounceIn {\n from,\n 20%,\n 40%,\n 60%,\n 80%,\n to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n\n 0% {\n opacity: 0;\n -webkit-transform: scale3d(0.3, 0.3, 0.3);\n transform: scale3d(0.3, 0.3, 0.3);\n }\n\n 20% {\n -webkit-transform: scale3d(1.1, 1.1, 1.1);\n transform: scale3d(1.1, 1.1, 1.1);\n }\n\n 40% {\n -webkit-transform: scale3d(0.9, 0.9, 0.9);\n transform: scale3d(0.9, 0.9, 0.9);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(1.03, 1.03, 1.03);\n transform: scale3d(1.03, 1.03, 1.03);\n }\n\n 80% {\n -webkit-transform: scale3d(0.97, 0.97, 0.97);\n transform: scale3d(0.97, 0.97, 0.97);\n }\n\n to {\n opacity: 1;\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes bounceIn {\n from,\n 20%,\n 40%,\n 60%,\n 80%,\n to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n\n 0% {\n opacity: 0;\n -webkit-transform: scale3d(0.3, 0.3, 0.3);\n transform: scale3d(0.3, 0.3, 0.3);\n }\n\n 20% {\n -webkit-transform: scale3d(1.1, 1.1, 1.1);\n transform: scale3d(1.1, 1.1, 1.1);\n }\n\n 40% {\n -webkit-transform: scale3d(0.9, 0.9, 0.9);\n transform: scale3d(0.9, 0.9, 0.9);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(1.03, 1.03, 1.03);\n transform: scale3d(1.03, 1.03, 1.03);\n }\n\n 80% {\n -webkit-transform: scale3d(0.97, 0.97, 0.97);\n transform: scale3d(0.97, 0.97, 0.97);\n }\n\n to {\n opacity: 1;\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n.bounceIn {\n -webkit-animation-duration: 0.75s;\n animation-duration: 0.75s;\n -webkit-animation-name: bounceIn;\n animation-name: bounceIn;\n}\n\n@-webkit-keyframes bounceInDown {\n from,\n 60%,\n 75%,\n 90%,\n to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n\n 0% {\n opacity: 0;\n -webkit-transform: translate3d(0, -3000px, 0);\n transform: translate3d(0, -3000px, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(0, 25px, 0);\n transform: translate3d(0, 25px, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(0, -10px, 0);\n transform: translate3d(0, -10px, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(0, 5px, 0);\n transform: translate3d(0, 5px, 0);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes bounceInDown {\n from,\n 60%,\n 75%,\n 90%,\n to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n\n 0% {\n opacity: 0;\n -webkit-transform: translate3d(0, -3000px, 0);\n transform: translate3d(0, -3000px, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(0, 25px, 0);\n transform: translate3d(0, 25px, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(0, -10px, 0);\n transform: translate3d(0, -10px, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(0, 5px, 0);\n transform: translate3d(0, 5px, 0);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.bounceInDown {\n -webkit-animation-name: bounceInDown;\n animation-name: bounceInDown;\n}\n\n@-webkit-keyframes bounceInLeft {\n from,\n 60%,\n 75%,\n 90%,\n to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n\n 0% {\n opacity: 0;\n -webkit-transform: translate3d(-3000px, 0, 0);\n transform: translate3d(-3000px, 0, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(25px, 0, 0);\n transform: translate3d(25px, 0, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(-10px, 0, 0);\n transform: translate3d(-10px, 0, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(5px, 0, 0);\n transform: translate3d(5px, 0, 0);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes bounceInLeft {\n from,\n 60%,\n 75%,\n 90%,\n to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n\n 0% {\n opacity: 0;\n -webkit-transform: translate3d(-3000px, 0, 0);\n transform: translate3d(-3000px, 0, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(25px, 0, 0);\n transform: translate3d(25px, 0, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(-10px, 0, 0);\n transform: translate3d(-10px, 0, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(5px, 0, 0);\n transform: translate3d(5px, 0, 0);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.bounceInLeft {\n -webkit-animation-name: bounceInLeft;\n animation-name: bounceInLeft;\n}\n\n@-webkit-keyframes bounceInRight {\n from,\n 60%,\n 75%,\n 90%,\n to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n\n from {\n opacity: 0;\n -webkit-transform: translate3d(3000px, 0, 0);\n transform: translate3d(3000px, 0, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(-25px, 0, 0);\n transform: translate3d(-25px, 0, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(10px, 0, 0);\n transform: translate3d(10px, 0, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(-5px, 0, 0);\n transform: translate3d(-5px, 0, 0);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes bounceInRight {\n from,\n 60%,\n 75%,\n 90%,\n to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n\n from {\n opacity: 0;\n -webkit-transform: translate3d(3000px, 0, 0);\n transform: translate3d(3000px, 0, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(-25px, 0, 0);\n transform: translate3d(-25px, 0, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(10px, 0, 0);\n transform: translate3d(10px, 0, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(-5px, 0, 0);\n transform: translate3d(-5px, 0, 0);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.bounceInRight {\n -webkit-animation-name: bounceInRight;\n animation-name: bounceInRight;\n}\n\n@-webkit-keyframes bounceInUp {\n from,\n 60%,\n 75%,\n 90%,\n to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, 3000px, 0);\n transform: translate3d(0, 3000px, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(0, 10px, 0);\n transform: translate3d(0, 10px, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(0, -5px, 0);\n transform: translate3d(0, -5px, 0);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes bounceInUp {\n from,\n 60%,\n 75%,\n 90%,\n to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, 3000px, 0);\n transform: translate3d(0, 3000px, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(0, 10px, 0);\n transform: translate3d(0, 10px, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(0, -5px, 0);\n transform: translate3d(0, -5px, 0);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.bounceInUp {\n -webkit-animation-name: bounceInUp;\n animation-name: bounceInUp;\n}\n\n@-webkit-keyframes bounceOut {\n 20% {\n -webkit-transform: scale3d(0.9, 0.9, 0.9);\n transform: scale3d(0.9, 0.9, 0.9);\n }\n\n 50%,\n 55% {\n opacity: 1;\n -webkit-transform: scale3d(1.1, 1.1, 1.1);\n transform: scale3d(1.1, 1.1, 1.1);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale3d(0.3, 0.3, 0.3);\n transform: scale3d(0.3, 0.3, 0.3);\n }\n}\n\n@keyframes bounceOut {\n 20% {\n -webkit-transform: scale3d(0.9, 0.9, 0.9);\n transform: scale3d(0.9, 0.9, 0.9);\n }\n\n 50%,\n 55% {\n opacity: 1;\n -webkit-transform: scale3d(1.1, 1.1, 1.1);\n transform: scale3d(1.1, 1.1, 1.1);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale3d(0.3, 0.3, 0.3);\n transform: scale3d(0.3, 0.3, 0.3);\n }\n}\n\n.bounceOut {\n -webkit-animation-duration: 0.75s;\n animation-duration: 0.75s;\n -webkit-animation-name: bounceOut;\n animation-name: bounceOut;\n}\n\n@-webkit-keyframes bounceOutDown {\n 20% {\n -webkit-transform: translate3d(0, 10px, 0);\n transform: translate3d(0, 10px, 0);\n }\n\n 40%,\n 45% {\n opacity: 1;\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, 2000px, 0);\n transform: translate3d(0, 2000px, 0);\n }\n}\n\n@keyframes bounceOutDown {\n 20% {\n -webkit-transform: translate3d(0, 10px, 0);\n transform: translate3d(0, 10px, 0);\n }\n\n 40%,\n 45% {\n opacity: 1;\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, 2000px, 0);\n transform: translate3d(0, 2000px, 0);\n }\n}\n\n.bounceOutDown {\n -webkit-animation-name: bounceOutDown;\n animation-name: bounceOutDown;\n}\n\n@-webkit-keyframes bounceOutLeft {\n 20% {\n opacity: 1;\n -webkit-transform: translate3d(20px, 0, 0);\n transform: translate3d(20px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(-2000px, 0, 0);\n transform: translate3d(-2000px, 0, 0);\n }\n}\n\n@keyframes bounceOutLeft {\n 20% {\n opacity: 1;\n -webkit-transform: translate3d(20px, 0, 0);\n transform: translate3d(20px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(-2000px, 0, 0);\n transform: translate3d(-2000px, 0, 0);\n }\n}\n\n.bounceOutLeft {\n -webkit-animation-name: bounceOutLeft;\n animation-name: bounceOutLeft;\n}\n\n@-webkit-keyframes bounceOutRight {\n 20% {\n opacity: 1;\n -webkit-transform: translate3d(-20px, 0, 0);\n transform: translate3d(-20px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(2000px, 0, 0);\n transform: translate3d(2000px, 0, 0);\n }\n}\n\n@keyframes bounceOutRight {\n 20% {\n opacity: 1;\n -webkit-transform: translate3d(-20px, 0, 0);\n transform: translate3d(-20px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(2000px, 0, 0);\n transform: translate3d(2000px, 0, 0);\n }\n}\n\n.bounceOutRight {\n -webkit-animation-name: bounceOutRight;\n animation-name: bounceOutRight;\n}\n\n@-webkit-keyframes bounceOutUp {\n 20% {\n -webkit-transform: translate3d(0, -10px, 0);\n transform: translate3d(0, -10px, 0);\n }\n\n 40%,\n 45% {\n opacity: 1;\n -webkit-transform: translate3d(0, 20px, 0);\n transform: translate3d(0, 20px, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, -2000px, 0);\n transform: translate3d(0, -2000px, 0);\n }\n}\n\n@keyframes bounceOutUp {\n 20% {\n -webkit-transform: translate3d(0, -10px, 0);\n transform: translate3d(0, -10px, 0);\n }\n\n 40%,\n 45% {\n opacity: 1;\n -webkit-transform: translate3d(0, 20px, 0);\n transform: translate3d(0, 20px, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, -2000px, 0);\n transform: translate3d(0, -2000px, 0);\n }\n}\n\n.bounceOutUp {\n -webkit-animation-name: bounceOutUp;\n animation-name: bounceOutUp;\n}\n\n@-webkit-keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.fadeIn {\n -webkit-animation-name: fadeIn;\n animation-name: fadeIn;\n}\n\n@-webkit-keyframes fadeInDown {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes fadeInDown {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.fadeInDown {\n -webkit-animation-name: fadeInDown;\n animation-name: fadeInDown;\n}\n\n@-webkit-keyframes fadeInDownBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, -2000px, 0);\n transform: translate3d(0, -2000px, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes fadeInDownBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, -2000px, 0);\n transform: translate3d(0, -2000px, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.fadeInDownBig {\n -webkit-animation-name: fadeInDownBig;\n animation-name: fadeInDownBig;\n}\n\n@-webkit-keyframes fadeInLeft {\n from {\n opacity: 0;\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes fadeInLeft {\n from {\n opacity: 0;\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.fadeInLeft {\n -webkit-animation-name: fadeInLeft;\n animation-name: fadeInLeft;\n}\n\n@-webkit-keyframes fadeInLeftBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(-2000px, 0, 0);\n transform: translate3d(-2000px, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes fadeInLeftBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(-2000px, 0, 0);\n transform: translate3d(-2000px, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.fadeInLeftBig {\n -webkit-animation-name: fadeInLeftBig;\n animation-name: fadeInLeftBig;\n}\n\n@-webkit-keyframes fadeInRight {\n from {\n opacity: 0;\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes fadeInRight {\n from {\n opacity: 0;\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.fadeInRight {\n -webkit-animation-name: fadeInRight;\n animation-name: fadeInRight;\n}\n\n@-webkit-keyframes fadeInRightBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(2000px, 0, 0);\n transform: translate3d(2000px, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes fadeInRightBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(2000px, 0, 0);\n transform: translate3d(2000px, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.fadeInRightBig {\n -webkit-animation-name: fadeInRightBig;\n animation-name: fadeInRightBig;\n}\n\n@-webkit-keyframes fadeInUp {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes fadeInUp {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.fadeInUp {\n -webkit-animation-name: fadeInUp;\n animation-name: fadeInUp;\n}\n\n@-webkit-keyframes fadeInUpBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, 2000px, 0);\n transform: translate3d(0, 2000px, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes fadeInUpBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, 2000px, 0);\n transform: translate3d(0, 2000px, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.fadeInUpBig {\n -webkit-animation-name: fadeInUpBig;\n animation-name: fadeInUpBig;\n}\n\n@-webkit-keyframes fadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes fadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.fadeOut {\n -webkit-animation-name: fadeOut;\n animation-name: fadeOut;\n}\n\n@-webkit-keyframes fadeOutDown {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n }\n}\n\n@keyframes fadeOutDown {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n }\n}\n\n.fadeOutDown {\n -webkit-animation-name: fadeOutDown;\n animation-name: fadeOutDown;\n}\n\n@-webkit-keyframes fadeOutDownBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, 2000px, 0);\n transform: translate3d(0, 2000px, 0);\n }\n}\n\n@keyframes fadeOutDownBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, 2000px, 0);\n transform: translate3d(0, 2000px, 0);\n }\n}\n\n.fadeOutDownBig {\n -webkit-animation-name: fadeOutDownBig;\n animation-name: fadeOutDownBig;\n}\n\n@-webkit-keyframes fadeOutLeft {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n }\n}\n\n@keyframes fadeOutLeft {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n }\n}\n\n.fadeOutLeft {\n -webkit-animation-name: fadeOutLeft;\n animation-name: fadeOutLeft;\n}\n\n@-webkit-keyframes fadeOutLeftBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(-2000px, 0, 0);\n transform: translate3d(-2000px, 0, 0);\n }\n}\n\n@keyframes fadeOutLeftBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(-2000px, 0, 0);\n transform: translate3d(-2000px, 0, 0);\n }\n}\n\n.fadeOutLeftBig {\n -webkit-animation-name: fadeOutLeftBig;\n animation-name: fadeOutLeftBig;\n}\n\n@-webkit-keyframes fadeOutRight {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n }\n}\n\n@keyframes fadeOutRight {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n }\n}\n\n.fadeOutRight {\n -webkit-animation-name: fadeOutRight;\n animation-name: fadeOutRight;\n}\n\n@-webkit-keyframes fadeOutRightBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(2000px, 0, 0);\n transform: translate3d(2000px, 0, 0);\n }\n}\n\n@keyframes fadeOutRightBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(2000px, 0, 0);\n transform: translate3d(2000px, 0, 0);\n }\n}\n\n.fadeOutRightBig {\n -webkit-animation-name: fadeOutRightBig;\n animation-name: fadeOutRightBig;\n}\n\n@-webkit-keyframes fadeOutUp {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n }\n}\n\n@keyframes fadeOutUp {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n }\n}\n\n.fadeOutUp {\n -webkit-animation-name: fadeOutUp;\n animation-name: fadeOutUp;\n}\n\n@-webkit-keyframes fadeOutUpBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, -2000px, 0);\n transform: translate3d(0, -2000px, 0);\n }\n}\n\n@keyframes fadeOutUpBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, -2000px, 0);\n transform: translate3d(0, -2000px, 0);\n }\n}\n\n.fadeOutUpBig {\n -webkit-animation-name: fadeOutUpBig;\n animation-name: fadeOutUpBig;\n}\n\n@-webkit-keyframes flip {\n from {\n -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)\n rotate3d(0, 1, 0, -360deg);\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n }\n\n 40% {\n -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n rotate3d(0, 1, 0, -190deg);\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n rotate3d(0, 1, 0, -190deg);\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n }\n\n 50% {\n -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n rotate3d(0, 1, 0, -170deg);\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n rotate3d(0, 1, 0, -170deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 80% {\n -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)\n rotate3d(0, 1, 0, 0deg);\n transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)\n rotate3d(0, 1, 0, 0deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n to {\n -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)\n rotate3d(0, 1, 0, 0deg);\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n}\n\n@keyframes flip {\n from {\n -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)\n rotate3d(0, 1, 0, -360deg);\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n }\n\n 40% {\n -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n rotate3d(0, 1, 0, -190deg);\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n rotate3d(0, 1, 0, -190deg);\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n }\n\n 50% {\n -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n rotate3d(0, 1, 0, -170deg);\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n rotate3d(0, 1, 0, -170deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 80% {\n -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)\n rotate3d(0, 1, 0, 0deg);\n transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)\n rotate3d(0, 1, 0, 0deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n to {\n -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)\n rotate3d(0, 1, 0, 0deg);\n transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n}\n\n.animated.flip {\n -webkit-backface-visibility: visible;\n backface-visibility: visible;\n -webkit-animation-name: flip;\n animation-name: flip;\n}\n\n@-webkit-keyframes flipInX {\n from {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n opacity: 0;\n }\n\n 40% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 60% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n }\n\n to {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n}\n\n@keyframes flipInX {\n from {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n opacity: 0;\n }\n\n 40% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 60% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n }\n\n to {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n}\n\n.flipInX {\n -webkit-backface-visibility: visible !important;\n backface-visibility: visible !important;\n -webkit-animation-name: flipInX;\n animation-name: flipInX;\n}\n\n@-webkit-keyframes flipInY {\n from {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n opacity: 0;\n }\n\n 40% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 60% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n }\n\n to {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n}\n\n@keyframes flipInY {\n from {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n opacity: 0;\n }\n\n 40% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 60% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n }\n\n to {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n}\n\n.flipInY {\n -webkit-backface-visibility: visible !important;\n backface-visibility: visible !important;\n -webkit-animation-name: flipInY;\n animation-name: flipInY;\n}\n\n@-webkit-keyframes flipOutX {\n from {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n\n 30% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n opacity: 1;\n }\n\n to {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n opacity: 0;\n }\n}\n\n@keyframes flipOutX {\n from {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n\n 30% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n opacity: 1;\n }\n\n to {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n opacity: 0;\n }\n}\n\n.flipOutX {\n -webkit-animation-duration: 0.75s;\n animation-duration: 0.75s;\n -webkit-animation-name: flipOutX;\n animation-name: flipOutX;\n -webkit-backface-visibility: visible !important;\n backface-visibility: visible !important;\n}\n\n@-webkit-keyframes flipOutY {\n from {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n\n 30% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n opacity: 1;\n }\n\n to {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n opacity: 0;\n }\n}\n\n@keyframes flipOutY {\n from {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n\n 30% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n opacity: 1;\n }\n\n to {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n opacity: 0;\n }\n}\n\n.flipOutY {\n -webkit-animation-duration: 0.75s;\n animation-duration: 0.75s;\n -webkit-backface-visibility: visible !important;\n backface-visibility: visible !important;\n -webkit-animation-name: flipOutY;\n animation-name: flipOutY;\n}\n\n@-webkit-keyframes lightSpeedIn {\n from {\n -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);\n transform: translate3d(100%, 0, 0) skewX(-30deg);\n opacity: 0;\n }\n\n 60% {\n -webkit-transform: skewX(20deg);\n transform: skewX(20deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: skewX(-5deg);\n transform: skewX(-5deg);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes lightSpeedIn {\n from {\n -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);\n transform: translate3d(100%, 0, 0) skewX(-30deg);\n opacity: 0;\n }\n\n 60% {\n -webkit-transform: skewX(20deg);\n transform: skewX(20deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: skewX(-5deg);\n transform: skewX(-5deg);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.lightSpeedIn {\n -webkit-animation-name: lightSpeedIn;\n animation-name: lightSpeedIn;\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n}\n\n@-webkit-keyframes lightSpeedOut {\n from {\n opacity: 1;\n }\n\n to {\n -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);\n transform: translate3d(100%, 0, 0) skewX(30deg);\n opacity: 0;\n }\n}\n\n@keyframes lightSpeedOut {\n from {\n opacity: 1;\n }\n\n to {\n -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);\n transform: translate3d(100%, 0, 0) skewX(30deg);\n opacity: 0;\n }\n}\n\n.lightSpeedOut {\n -webkit-animation-name: lightSpeedOut;\n animation-name: lightSpeedOut;\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n}\n\n@-webkit-keyframes rotateIn {\n from {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: rotate3d(0, 0, 1, -200deg);\n transform: rotate3d(0, 0, 1, -200deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n\n@keyframes rotateIn {\n from {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: rotate3d(0, 0, 1, -200deg);\n transform: rotate3d(0, 0, 1, -200deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n\n.rotateIn {\n -webkit-animation-name: rotateIn;\n animation-name: rotateIn;\n}\n\n@-webkit-keyframes rotateInDownLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, -45deg);\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n\n@keyframes rotateInDownLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, -45deg);\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n\n.rotateInDownLeft {\n -webkit-animation-name: rotateInDownLeft;\n animation-name: rotateInDownLeft;\n}\n\n@-webkit-keyframes rotateInDownRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, 45deg);\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n\n@keyframes rotateInDownRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, 45deg);\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n\n.rotateInDownRight {\n -webkit-animation-name: rotateInDownRight;\n animation-name: rotateInDownRight;\n}\n\n@-webkit-keyframes rotateInUpLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, 45deg);\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n\n@keyframes rotateInUpLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, 45deg);\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n\n.rotateInUpLeft {\n -webkit-animation-name: rotateInUpLeft;\n animation-name: rotateInUpLeft;\n}\n\n@-webkit-keyframes rotateInUpRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, -90deg);\n transform: rotate3d(0, 0, 1, -90deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n\n@keyframes rotateInUpRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, -90deg);\n transform: rotate3d(0, 0, 1, -90deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n\n.rotateInUpRight {\n -webkit-animation-name: rotateInUpRight;\n animation-name: rotateInUpRight;\n}\n\n@-webkit-keyframes rotateOut {\n from {\n -webkit-transform-origin: center;\n transform-origin: center;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: rotate3d(0, 0, 1, 200deg);\n transform: rotate3d(0, 0, 1, 200deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOut {\n from {\n -webkit-transform-origin: center;\n transform-origin: center;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: rotate3d(0, 0, 1, 200deg);\n transform: rotate3d(0, 0, 1, 200deg);\n opacity: 0;\n }\n}\n\n.rotateOut {\n -webkit-animation-name: rotateOut;\n animation-name: rotateOut;\n}\n\n@-webkit-keyframes rotateOutDownLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, 45deg);\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOutDownLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, 45deg);\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n}\n\n.rotateOutDownLeft {\n -webkit-animation-name: rotateOutDownLeft;\n animation-name: rotateOutDownLeft;\n}\n\n@-webkit-keyframes rotateOutDownRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, -45deg);\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOutDownRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, -45deg);\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n}\n\n.rotateOutDownRight {\n -webkit-animation-name: rotateOutDownRight;\n animation-name: rotateOutDownRight;\n}\n\n@-webkit-keyframes rotateOutUpLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, -45deg);\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOutUpLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, -45deg);\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n}\n\n.rotateOutUpLeft {\n -webkit-animation-name: rotateOutUpLeft;\n animation-name: rotateOutUpLeft;\n}\n\n@-webkit-keyframes rotateOutUpRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, 90deg);\n transform: rotate3d(0, 0, 1, 90deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOutUpRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, 90deg);\n transform: rotate3d(0, 0, 1, 90deg);\n opacity: 0;\n }\n}\n\n.rotateOutUpRight {\n -webkit-animation-name: rotateOutUpRight;\n animation-name: rotateOutUpRight;\n}\n\n@-webkit-keyframes hinge {\n 0% {\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 20%,\n 60% {\n -webkit-transform: rotate3d(0, 0, 1, 80deg);\n transform: rotate3d(0, 0, 1, 80deg);\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 40%,\n 80% {\n -webkit-transform: rotate3d(0, 0, 1, 60deg);\n transform: rotate3d(0, 0, 1, 60deg);\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n opacity: 1;\n }\n\n to {\n -webkit-transform: translate3d(0, 700px, 0);\n transform: translate3d(0, 700px, 0);\n opacity: 0;\n }\n}\n\n@keyframes hinge {\n 0% {\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 20%,\n 60% {\n -webkit-transform: rotate3d(0, 0, 1, 80deg);\n transform: rotate3d(0, 0, 1, 80deg);\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 40%,\n 80% {\n -webkit-transform: rotate3d(0, 0, 1, 60deg);\n transform: rotate3d(0, 0, 1, 60deg);\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n opacity: 1;\n }\n\n to {\n -webkit-transform: translate3d(0, 700px, 0);\n transform: translate3d(0, 700px, 0);\n opacity: 0;\n }\n}\n\n.hinge {\n -webkit-animation-duration: 2s;\n animation-duration: 2s;\n -webkit-animation-name: hinge;\n animation-name: hinge;\n}\n\n@-webkit-keyframes jackInTheBox {\n from {\n opacity: 0;\n -webkit-transform: scale(0.1) rotate(30deg);\n transform: scale(0.1) rotate(30deg);\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n }\n\n 50% {\n -webkit-transform: rotate(-10deg);\n transform: rotate(-10deg);\n }\n\n 70% {\n -webkit-transform: rotate(3deg);\n transform: rotate(3deg);\n }\n\n to {\n opacity: 1;\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes jackInTheBox {\n from {\n opacity: 0;\n -webkit-transform: scale(0.1) rotate(30deg);\n transform: scale(0.1) rotate(30deg);\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n }\n\n 50% {\n -webkit-transform: rotate(-10deg);\n transform: rotate(-10deg);\n }\n\n 70% {\n -webkit-transform: rotate(3deg);\n transform: rotate(3deg);\n }\n\n to {\n opacity: 1;\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n.jackInTheBox {\n -webkit-animation-name: jackInTheBox;\n animation-name: jackInTheBox;\n}\n\n/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n\n@-webkit-keyframes rollIn {\n from {\n opacity: 0;\n -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes rollIn {\n from {\n opacity: 0;\n -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n }\n\n to {\n opacity: 1;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.rollIn {\n -webkit-animation-name: rollIn;\n animation-name: rollIn;\n}\n\n/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n\n@-webkit-keyframes rollOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n }\n}\n\n@keyframes rollOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n }\n}\n\n.rollOut {\n -webkit-animation-name: rollOut;\n animation-name: rollOut;\n}\n\n@-webkit-keyframes zoomIn {\n from {\n opacity: 0;\n -webkit-transform: scale3d(0.3, 0.3, 0.3);\n transform: scale3d(0.3, 0.3, 0.3);\n }\n\n 50% {\n opacity: 1;\n }\n}\n\n@keyframes zoomIn {\n from {\n opacity: 0;\n -webkit-transform: scale3d(0.3, 0.3, 0.3);\n transform: scale3d(0.3, 0.3, 0.3);\n }\n\n 50% {\n opacity: 1;\n }\n}\n\n.zoomIn {\n -webkit-animation-name: zoomIn;\n animation-name: zoomIn;\n}\n\n@-webkit-keyframes zoomInDown {\n from {\n opacity: 0;\n -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n}\n\n@keyframes zoomInDown {\n from {\n opacity: 0;\n -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n}\n\n.zoomInDown {\n -webkit-animation-name: zoomInDown;\n animation-name: zoomInDown;\n}\n\n@-webkit-keyframes zoomInLeft {\n from {\n opacity: 0;\n -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);\n transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n}\n\n@keyframes zoomInLeft {\n from {\n opacity: 0;\n -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);\n transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n}\n\n.zoomInLeft {\n -webkit-animation-name: zoomInLeft;\n animation-name: zoomInLeft;\n}\n\n@-webkit-keyframes zoomInRight {\n from {\n opacity: 0;\n -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);\n transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n}\n\n@keyframes zoomInRight {\n from {\n opacity: 0;\n -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);\n transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n}\n\n.zoomInRight {\n -webkit-animation-name: zoomInRight;\n animation-name: zoomInRight;\n}\n\n@-webkit-keyframes zoomInUp {\n from {\n opacity: 0;\n -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n}\n\n@keyframes zoomInUp {\n from {\n opacity: 0;\n -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n}\n\n.zoomInUp {\n -webkit-animation-name: zoomInUp;\n animation-name: zoomInUp;\n}\n\n@-webkit-keyframes zoomOut {\n from {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n -webkit-transform: scale3d(0.3, 0.3, 0.3);\n transform: scale3d(0.3, 0.3, 0.3);\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes zoomOut {\n from {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n -webkit-transform: scale3d(0.3, 0.3, 0.3);\n transform: scale3d(0.3, 0.3, 0.3);\n }\n\n to {\n opacity: 0;\n }\n}\n\n.zoomOut {\n -webkit-animation-name: zoomOut;\n animation-name: zoomOut;\n}\n\n@-webkit-keyframes zoomOutDown {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n}\n\n@keyframes zoomOutDown {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n}\n\n.zoomOutDown {\n -webkit-animation-name: zoomOutDown;\n animation-name: zoomOutDown;\n}\n\n@-webkit-keyframes zoomOutLeft {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);\n transform: scale(0.1) translate3d(-2000px, 0, 0);\n -webkit-transform-origin: left center;\n transform-origin: left center;\n }\n}\n\n@keyframes zoomOutLeft {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);\n transform: scale(0.1) translate3d(-2000px, 0, 0);\n -webkit-transform-origin: left center;\n transform-origin: left center;\n }\n}\n\n.zoomOutLeft {\n -webkit-animation-name: zoomOutLeft;\n animation-name: zoomOutLeft;\n}\n\n@-webkit-keyframes zoomOutRight {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);\n transform: scale(0.1) translate3d(2000px, 0, 0);\n -webkit-transform-origin: right center;\n transform-origin: right center;\n }\n}\n\n@keyframes zoomOutRight {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);\n transform: scale(0.1) translate3d(2000px, 0, 0);\n -webkit-transform-origin: right center;\n transform-origin: right center;\n }\n}\n\n.zoomOutRight {\n -webkit-animation-name: zoomOutRight;\n animation-name: zoomOutRight;\n}\n\n@-webkit-keyframes zoomOutUp {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n}\n\n@keyframes zoomOutUp {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);\n transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);\n transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);\n }\n}\n\n.zoomOutUp {\n -webkit-animation-name: zoomOutUp;\n animation-name: zoomOutUp;\n}\n\n@-webkit-keyframes slideInDown {\n from {\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes slideInDown {\n from {\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.slideInDown {\n -webkit-animation-name: slideInDown;\n animation-name: slideInDown;\n}\n\n@-webkit-keyframes slideInLeft {\n from {\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes slideInLeft {\n from {\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.slideInLeft {\n -webkit-animation-name: slideInLeft;\n animation-name: slideInLeft;\n}\n\n@-webkit-keyframes slideInRight {\n from {\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes slideInRight {\n from {\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.slideInRight {\n -webkit-animation-name: slideInRight;\n animation-name: slideInRight;\n}\n\n@-webkit-keyframes slideInUp {\n from {\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes slideInUp {\n from {\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.slideInUp {\n -webkit-animation-name: slideInUp;\n animation-name: slideInUp;\n}\n\n@-webkit-keyframes slideOutDown {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n }\n}\n\n@keyframes slideOutDown {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n }\n}\n\n.slideOutDown {\n -webkit-animation-name: slideOutDown;\n animation-name: slideOutDown;\n}\n\n@-webkit-keyframes slideOutLeft {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n }\n}\n\n@keyframes slideOutLeft {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n }\n}\n\n.slideOutLeft {\n -webkit-animation-name: slideOutLeft;\n animation-name: slideOutLeft;\n}\n\n@-webkit-keyframes slideOutRight {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n }\n}\n\n@keyframes slideOutRight {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n }\n}\n\n.slideOutRight {\n -webkit-animation-name: slideOutRight;\n animation-name: slideOutRight;\n}\n\n@-webkit-keyframes slideOutUp {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n }\n}\n\n@keyframes slideOutUp {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n }\n}\n\n.slideOutUp {\n -webkit-animation-name: slideOutUp;\n animation-name: slideOutUp;\n}\n\n.animated {\n -webkit-animation-duration: 1s;\n animation-duration: 1s;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n}\n\n.animated.infinite {\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n}\n\n.animated.delay-1s {\n -webkit-animation-delay: 1s;\n animation-delay: 1s;\n}\n\n.animated.delay-2s {\n -webkit-animation-delay: 2s;\n animation-delay: 2s;\n}\n\n.animated.delay-3s {\n -webkit-animation-delay: 3s;\n animation-delay: 3s;\n}\n\n.animated.delay-4s {\n -webkit-animation-delay: 4s;\n animation-delay: 4s;\n}\n\n.animated.delay-5s {\n -webkit-animation-delay: 5s;\n animation-delay: 5s;\n}\n\n.animated.fast {\n -webkit-animation-duration: 800ms;\n animation-duration: 800ms;\n}\n\n.animated.faster {\n -webkit-animation-duration: 500ms;\n animation-duration: 500ms;\n}\n\n.animated.slow {\n -webkit-animation-duration: 2s;\n animation-duration: 2s;\n}\n\n.animated.slower {\n -webkit-animation-duration: 3s;\n animation-duration: 3s;\n}\n\n@media (prefers-reduced-motion) {\n .animated {\n -webkit-animation: unset !important;\n animation: unset !important;\n -webkit-transition: none !important;\n transition: none !important;\n }\n}\n"]}