.flipdown.flipdown__theme-dark{font-family:sans-serif;font-weight:bold}.flipdown.flipdown__theme-dark .rotor-group-heading:before{color:#000}.flipdown.flipdown__theme-dark .rotor-group:nth-child(-n+3):before,.flipdown.flipdown__theme-dark .rotor-group:nth-child(-n+3):after{background-color:#151515}.flipdown.flipdown__theme-dark .rotor,.flipdown.flipdown__theme-dark .rotor-top,.flipdown.flipdown__theme-dark .rotor-leaf-front{color:#fff;background-color:#151515}.flipdown.flipdown__theme-dark .rotor-bottom,.flipdown.flipdown__theme-dark .rotor-leaf-rear{color:#efefef;background-color:#202020}.flipdown.flipdown__theme-dark .rotor:after{border-top:solid 1px #151515}.flipdown.flipdown__theme-light{font-family:sans-serif;font-weight:bold}.flipdown.flipdown__theme-light .rotor-group-heading:before{color:#eee}.flipdown.flipdown__theme-light .rotor-group:nth-child(-n+3):before,.flipdown.flipdown__theme-light .rotor-group:nth-child(-n+3):after{background-color:#ddd}.flipdown.flipdown__theme-light .rotor,.flipdown.flipdown__theme-light .rotor-top,.flipdown.flipdown__theme-light .rotor-leaf-front{color:#222;background-color:#ddd}.flipdown.flipdown__theme-light .rotor-bottom,.flipdown.flipdown__theme-light .rotor-leaf-rear{color:#333;background-color:#eee}.flipdown.flipdown__theme-light .rotor:after{border-top:solid 1px #222}.flipdown{overflow:visible;width:432px;height:96px;margin:20px auto}.flipdown .rotor-group{position:relative;float:left;margin-right:30px}.flipdown .rotor-group:last-child{margin-right:0}.flipdown .rotor-group:last-child{padding-right:0}.flipdown .rotor-group-heading:before{display:block;height:30px;line-height:30px;text-align:center}.flipdown .rotor-group:nth-child(1) .rotor-group-heading:before{content:attr(data-before);font-size:18px}.flipdown .rotor-group:nth-child(2) .rotor-group-heading:before{content:attr(data-before);font-size:18px}.flipdown .rotor-group:nth-child(3) .rotor-group-heading:before{content:attr(data-before);font-size:18px}.flipdown .rotor-group:nth-child(4) .rotor-group-heading:before{content:attr(data-before);font-size:18px}.flipdown .rotor-group:nth-child(-n+3):before{content:'';position:absolute;bottom:14px;left:96px;width:8px;height:8px;border-radius:50%}.flipdown .rotor-group:nth-child(-n+3):after{content:'';position:absolute;bottom:36px;left:96px;width:8px;height:8px;border-radius:50%}.flipdown .rotor{position:relative;float:left;width:40px;height:60px;margin:0 5px 0 0;border-radius:4px;font-size:5rem;text-align:center;perspective:200px}.flipdown .rotor:last-child{margin-right:0}.flipdown .rotor-top,.flipdown .rotor-bottom{overflow:hidden;position:absolute;width:40px;height:30px}.flipdown .rotor-leaf{z-index:1;position:absolute;width:40px;height:60px;transform-style:preserve-3d;transition:transform 0s}.flipdown .rotor-leaf.flipped{transform:rotateX(-180deg);transition:all .5s ease-in-out}.flipdown .rotor-leaf-front,.flipdown .rotor-leaf-rear{overflow:hidden;position:absolute;width:40px;height:30px;margin:0;transform:rotateX(0deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}.flipdown .rotor-leaf-front{line-height:60px;border-radius:4px 4px 0 0}.flipdown .rotor-leaf-rear{line-height:0;border-radius:0 0 4px 4px;transform:rotateX(-180deg)}.flipdown .rotor-top{line-height:60px;border-radius:4px 4px 0 0}.flipdown .rotor-bottom{bottom:0;line-height:0;border-radius:0 0 4px 4px}.flipdown .rotor:after{content:'';z-index:2;position:absolute;bottom:0;left:0;width:40px;height:30px;border-radius:0 0 4px 4px}.rotor-group-heading{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%) translateY(5px);-webkit-transform:translateX(-50%) translateY(5px)}@media(max-width:540px){.rotor-group-heading{bottom:-20px}.flipdown{width:300px;height:60px}.flipdown .rotor{font-size:2rem;margin-right:3px}.flipdown .rotor,.flipdown .rotor-leaf,.flipdown .rotor-leaf-front,.flipdown .rotor-leaf-rear,.flipdown .rotor-top,.flipdown .rotor-bottom,.flipdown .rotor:after{width:30px}.flipdown .rotor-group{margin-right:12px}.flipdown .rotor-group:last-child{padding-right:0}.flipdown .rotor-group-heading:before{font-size:.8rem;height:20px;line-height:20px}.flipdown .rotor-group:nth-child(-n+3):before,.flipdown .rotor-group:nth-child(-n+3):after{left:66px}.flipdown .rotor-group:nth-child(-n+3):before{bottom:6px;height:6px;width:6px}.flipdown .rotor-group:nth-child(-n+3):after{bottom:22px;height:6px;width:6px}.flipdown .rotor-leaf-front,.flipdown .rotor-top{line-height:36px}.flipdown .rotor-leaf,.flipdown .rotor{height:36px}.flipdown .rotor-leaf-front,.flipdown .rotor-leaf-rear,.flipdown .rotor-top,.flipdown .rotor-bottom,.flipdown .rotor:after{height:18px}.flipdown .rotor-group:nth-child(1) .rotor-group-heading:before{content:attr(data-before);font-size:15px;color:#fff}.flipdown .rotor-group:nth-child(2) .rotor-group-heading:before{content:attr(data-before);font-size:15px;color:#fff}.flipdown .rotor-group:nth-child(3) .rotor-group-heading:before{content:attr(data-before);font-size:15px;color:#fff}.flipdown .rotor-group:nth-child(4) .rotor-group-heading:before{content:attr(data-before);font-size:15px;color:#fff}}@media(max-width:375px){.flipdown{transform-origin:left center;transform:scale(94%)}}@media(max-width:345px){.flipdown{transform-origin:left center;transform:scale(80%)}}