.bbm-wrapper { background: rgba(0, 0, 0, 0.75); -webkit-transition: background-color 0.3s; } .bbm-modal { background: white; box-shadow: 0 0px 6px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.9); } /* BLOCKS */ .bbm-modal__topbar, .bbm-modal__bottombar { padding: 0 30px; } .bbm-modal__topbar { border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 30px; } .bbm-modal__topbar > ul { list-style: none; text-align: center; padding: 0; margin: 0; } .bbm-modal__tab { display: inline-block; padding: 15px 10px; } .bbm-modal__tab a { font-size: 16px; font-weight: bold; color: #999999; } .bbm-modal__tab a:hover, .bbm-modal__tab a.active { color: #222222; } .bbm-modal__title { padding: 20px 0 19px; margin: 0; font-weight: normal; font-size: 22px; line-height: 1em; color: #312d3a; } .bbm-modal__section { padding: 0 30px; margin-top: 0px; font-size: 16px; line-height: 26px; color: #575656; } .bbm-modal__section p { font-size: 16px; line-height: 26px; color: #575656; } .bbm-modal__section p:last-child { padding: 0; margin-bottom: 0; } .bbm-modal__section a { color: #ff643c; } .bbm-modal__section h3 { margin: 0; font-size: 20px; line-height: 1em; } .bbm-modal__bottombar { border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 18px; text-align: right; margin-top: 30px; } /* MODULES */ .bbm-group { content: ""; display: table; clear: both; } .bbm-button { display: inline-block; color: rgba(49, 45, 58, 0.8); text-decoration: none; font-size: 14px; font-weight: 500; position: relative; line-height: 1em; padding: 10px 14px; border-radius: 3px; background: #fcfcfc; background-image: -o-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%); background-image: -moz-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%); background-image: -webkit-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%); background-image: -ms-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%); background-image: linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%); -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); } .bbm-button.inactive { opacity: 0.5; pointer-events: none; } .bbm-button:active { background-image: -o-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%); background-image: -moz-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%); background-image: -webkit-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%); background-image: -ms-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%); background-image: linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%); -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); } /* ANIMATIONS */ /* Open modal */ @-webkit-keyframes bbm-open { 0% { -webkit-transform: matrix(0.99126, 0, 0, 0.99126, 0, 43.8813); opacity: 0.1259; } 4% { -webkit-transform: matrix(0.99295, 0, 0, 0.99295, 0, 45.06809); opacity: 0.29544; } 8% { -webkit-transform: matrix(0.99467, 0, 0, 0.99467, 0, 46.26922); opacity: 0.46703; } 12% { -webkit-transform: matrix(0.99619, 0, 0, 0.99619, 0, 47.33355); opacity: 0.61908; } 16% { -webkit-transform: matrix(0.99743, 0, 0, 0.99743, 0, 48.19991); opacity: 0.74284; } 20% { -webkit-transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.86067); opacity: 0.83724; } 24% { -webkit-transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33658); opacity: 0.90523; } 28% { -webkit-transform: matrix(0.99952, 0, 0, 0.99952, 0, 49.66049); opacity: 0.9515; } 32% { -webkit-transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8675); opacity: 0.98107; } 36% { -webkit-transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98966); opacity: 0.99852; } 40% { -webkit-transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05361); opacity: 1.00766; } 44% { -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.08); opacity: 1.01143; } 48% { -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08394); opacity: 1.01199; } 52% { -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07589); opacity: 1.01084; } 56% { -webkit-transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06265); opacity: 1.00895; } 60% { -webkit-transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04833); opacity: 1.0069; } 64% { -webkit-transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03518); opacity: 1.00503; } 68% { -webkit-transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02421); opacity: 1.00346; } 72% { -webkit-transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01567); opacity: 1.00224; } 76% { -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00941); opacity: 1.00134; } 80% { -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00506); opacity: 1.00072; } 84% { -webkit-transform: matrix(1, 0, 0, 1, 0, 50.00223); opacity: 1.00032; } 88% { -webkit-transform: matrix(1, 0, 0, 1, 0, 50.0005); opacity: 1.00007; } 92% { -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99956); opacity: 0.99994; } 96% { -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99913); opacity: 0.99988; } 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 50); opacity: 1; } } .bbm-modal--open { -webkit-animation-duration: 0.3s; -webkit-animation-name: bbm-open; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; -webkit-transform-origin: 50% 50%; -webkit-backface-visibility: hidden; } /* Open a stacked modal */ @-webkit-keyframes bbm-stacked { 0% { -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187); opacity: 0.93705; } 4% { -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192); opacity: 0.85228; } 8% { -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078); opacity: 0.76648; } 12% { -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645); opacity: 0.69046; } 16% { -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009); opacity: 0.62858; } 20% { -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933); opacity: 0.58138; } 24% { -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342); opacity: 0.54739; } 28% { -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951); opacity: 0.52425; } 32% { -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325); opacity: 0.50946; } 36% { -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034); opacity: 0.50074; } 40% { -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639); opacity: 0.49617; } 44% { -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001); opacity: 0.49429; } 48% { -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606); opacity: 0.494; } 52% { -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411); opacity: 0.49458; } 56% { -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736); opacity: 0.49553; } 60% { -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167); opacity: 0.49655; } 64% { -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482); opacity: 0.49749; } 68% { -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579); opacity: 0.49827; } 72% { -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433); opacity: 0.49888; } 76% { -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059); opacity: 0.49933; } 80% { -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494); opacity: 0.49964; } 84% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777); opacity: 0.49984; } 88% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995); opacity: 0.49996; } 92% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044); opacity: 0.50003; } 96% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088); opacity: 0.50006; } 100% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43); opacity: 0.5; } }