.flipdown.flipdown__theme-dark{font-family:sans-serif;font-weight:700}.flipdown.flipdown__theme-dark .rotor-group-heading:before{color:#000}.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):before,.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):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:1px solid #151515}.flipdown.flipdown__theme-light{font-family:sans-serif;font-weight:700}.flipdown.flipdown__theme-light .rotor-group-heading:before{color:#eee}.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):nth-child(-n+3):before,.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):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:1px solid #222}.flipdown{width:510px;height:110px;overflow:visible}.flipdown .rotor-group{float:left;padding-right:30px;position:relative}.flipdown .rotor-group:last-child{padding-right:0}.flipdown .rotor-group-heading:before{text-align:center;height:30px;line-height:30px;display:block}.flipdown .rotor-group:first-child .rotor-group-heading:before,.flipdown .rotor-group:nth-child(2) .rotor-group-heading:before,.flipdown .rotor-group:nth-child(3) .rotor-group-heading:before,.flipdown .rotor-group:nth-child(4) .rotor-group-heading:before{content:attr(data-before)}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before{content:"";border-radius:50%;width:10px;height:10px;position:absolute;bottom:20px;left:115px}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after{content:"";border-radius:50%;width:10px;height:10px;position:absolute;bottom:50px;left:115px}.flipdown .rotor{float:left;text-align:center;perspective:200px;border-radius:4px;width:50px;height:80px;margin:0 5px 0 0;font-size:4rem;position:relative}.flipdown .rotor:last-child{margin-right:0}.flipdown .rotor-top,.flipdown .rotor-bottom{width:50px;height:40px;position:absolute;overflow:hidden}.flipdown .rotor-leaf{z-index:1;width:50px;height:80px;transform-style:preserve-3d;transition:transform;position:absolute}.flipdown .rotor-leaf.flipped{transition:all .5s ease-in-out;transform:rotateX(-180deg)}.flipdown .rotor-leaf-front,.flipdown .rotor-leaf-rear{-webkit-backface-visibility:hidden;backface-visibility:hidden;width:50px;height:40px;margin:0;position:absolute;overflow:hidden;transform:rotateX(0)}.flipdown .rotor-leaf-front{border-radius:4px 4px 0 0;line-height:80px}.flipdown .rotor-leaf-rear{border-radius:0 0 4px 4px;line-height:0;transform:rotateX(-180deg)}.flipdown .rotor-top{border-radius:4px 4px 0 0;line-height:80px}.flipdown .rotor-bottom{border-radius:0 0 4px 4px;line-height:0;bottom:0}.flipdown .rotor:after{content:"";z-index:2;border-radius:0 0 4px 4px;width:50px;height:40px;position:absolute;bottom:0;left:0}@media (width<=550px){.flipdown{width:100%;height:70px}.flipdown .rotor{margin-right:3px;font-size:2.2rem}.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{padding-right:20px}.flipdown .rotor-group:last-child{padding-right:0}.flipdown .rotor-group-heading:before{height:20px;font-size:.8rem;line-height:20px}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before,.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after{left:69px}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before{width:8px;height:8px;bottom:13px}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after{width:8px;height:8px;bottom:29px}.flipdown .rotor-leaf-front,.flipdown .rotor-top{line-height:50px}.flipdown .rotor-leaf,.flipdown .rotor{height:50px}.flipdown .rotor-leaf-front,.flipdown .rotor-leaf-rear,.flipdown .rotor-top,.flipdown .rotor-bottom,.flipdown .rotor:after{height:25px}}