.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: #999; } .bbm-modal__tab a:hover, .bbm-modal__tab a.active { color: #222; } .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; } } .bbm-modal--stacked { -webkit-animation-duration: 0.43333s; -webkit-animation-name: bbm-stacked; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; -webkit-transform-origin: 50% 50%; -webkit-backface-visibility: hidden; } /* destroy a stacked modal */ @-webkit-keyframes bbm-stacked-reverse { 0% { -webkit-transform: matrix(0.99123, 0, 0, 0.99123, 0, 43.86266); opacity: 0.56162; } 4% { -webkit-transform: matrix(0.99293, 0, 0, 0.99293, 0, 45.05306); opacity: 0.64665; } 8% { -webkit-transform: matrix(0.99465, 0, 0, 0.99465, 0, 46.25785); opacity: 0.7327; } 12% { -webkit-transform: matrix(0.99618, 0, 0, 0.99618, 0, 47.32543); opacity: 0.80896; } 16% { -webkit-transform: matrix(0.99742, 0, 0, 0.99742, 0, 48.19443); opacity: 0.87103; } 20% { -webkit-transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.8572); opacity: 0.91837; } 24% { -webkit-transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33456); opacity: 0.95247; } 28% { -webkit-transform: matrix(0.99951, 0, 0, 0.99951, 0, 49.65946); opacity: 0.97568; } 32% { -webkit-transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8671); opacity: 0.99051; } 36% { -webkit-transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98963); opacity: 0.99926; } 40% { -webkit-transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05377); opacity: 1.00384; } 44% { -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08024); opacity: 1.00573; } 48% { -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08419); opacity: 1.00601; } 52% { -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07612); opacity: 1.00544; } 56% { -webkit-transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06284); opacity: 1.00449; } 60% { -webkit-transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04848); opacity: 1.00346; } 64% { -webkit-transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03529); opacity: 1.00252; } 68% { -webkit-transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02428); opacity: 1.00173; } 72% { -webkit-transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01572); opacity: 1.00112; } 76% { -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00944); opacity: 1.00067; } 80% { -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00508); opacity: 1.00036; } 84% { -webkit-transform: matrix(1, 0, 0, 1, 0, 50.00223); opacity: 1.00016; } 88% { -webkit-transform: matrix(1, 0, 0, 1, 0, 50.0005); opacity: 1.00004; } 92% { -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99956); opacity: 0.99997; } 96% { -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99912); opacity: 0.99994; } 100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 50); opacity: 1; } } .bbm-modal--stacked-reverse { -webkit-animation-duration: 0.43333s; -webkit-animation-name: bbm-stacked-reverse; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; -webkit-transform-origin: 50% 50%; -webkit-backface-visibility: hidden; } /* destroy a modal */ @-webkit-keyframes bbm-destroy { 0% { -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187); opacity: 0.8741; } 4% { -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192); opacity: 0.70456; } 8% { -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078); opacity: 0.53297; } 12% { -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645); opacity: 0.38092; } 16% { -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009); opacity: 0.25716; } 20% { -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933); opacity: 0.16276; } 24% { -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342); opacity: 0.09477; } 28% { -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951); opacity: 0.0485; } 32% { -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325); opacity: 0.01893; } 36% { -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034); opacity: 0.00148; } 40% { -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639); opacity: -0.00766; } 44% { -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001); opacity: -0.01143; } 48% { -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606); opacity: -0.01199; } 52% { -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411); opacity: -0.01084; } 56% { -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736); opacity: -0.00895; } 60% { -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167); opacity: -0.0069; } 64% { -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482); opacity: -0.00503; } 68% { -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579); opacity: -0.00346; } 72% { -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433); opacity: -0.00224; } 76% { -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059); opacity: -0.00134; } 80% { -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494); opacity: -0.00072; } 84% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777); opacity: -0.00032; } 88% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995); opacity: -0.00007; } 92% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044); opacity: 0.00006; } 96% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088); opacity: 0.00012; } 100% { -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43); opacity: 0; } } .bbm-modal--destroy { -webkit-animation-duration: 0.43333s; -webkit-animation-name: bbm-destroy; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; -webkit-transform-origin: 50% 50%; -webkit-backface-visibility: hidden; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { .bbm-modal--open, .bbm-modal--stacked, .bbm-modal--stacked-reverse, .bbm-modal--destroy { -webkit-animation: none !important; } }