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