/*** ======= // TABLE OF CONTENT // ============================ ***/
*1. General Styling
*2. Scroll bar Styling
*3. Top Bar
*4. Side Header
*5. Side Menus
*6. Main Content
*7. heading Sec
*8. Panel Content
*9. Total Sales Sec
*10. Color Classes
*11. Activity Sec
*12. Graph Wrapper
*13. Our Clients Sec
*14. Product Sale
*15. task management
*16. Chat Widget
*17. Twitter Feed
*18. Welcome Bar
*19. Revenew Browser
*20. Social Counter
*21. Product Stats
*22. Add Content Form
*23. Tasks Progress
*24. Activity Feed
*25. Save Draft
*26. Recent Comment
*27. Toggle Content
*28. Loader
*29. Search Sec
*30. Gallery Sec
*31. price Table
*32. Intro
*33. Css Spinners
*34. Invoice Sec
*35. My Cart
*36. Range Slider
*37. Ion.RangeSlider
*38. Accordian
*39. C0ntact Form
*40. Ribbon Grids
*41. Progress Bar
*42. Progress
*43. Collapse
*44. Services
*45. Comming Soon
*46. Our Team
*47. CSS Document
*48. Profile
*49. GitHub Theme
*50. Hover.css
*
*===================================================== **
/** =============== General Styling =================== **/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic,700,700italic,300,300italic')
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700')
html
overflow-x: hidden
body
overflow-x: hidden
background: #e8edf2 none repeat scroll 0 0
color: #505050
float: left
font-family: Open sans
letter-spacing: 0.3px
position: relative
width: 100%
h1, h2, h3, h4, h5, h6
font-family: Montserrat
color: #202020
p
font-family: Open sans
color: #777777
line-height: 26px
font-size: 13px
letter-spacing: 0.3px
ul li, ol li
font-family: Open sans
color: #666666
font-size: 13px
line-height: 20px
a
font-family: Open sans
color: #666666
font-size: 13px
line-height: 20px
a
&:hover, &:focus
text-decoration: none
outline: none
cursor: pointer
/* Scroll bar Styling */
.slimScrollDiv
border: 0 solid transparent
float: left
width: 100% !important
/* Top Bar */
.top-bar
background: #fff none repeat scroll 0 0
box-shadow: 0 0 13px rgba(0, 0, 0, 0.13)
float: left
left: 0
position: fixed
top: 0
width: 100%
z-index: 2147483642
.logo
float: left
min-width: 220px
padding: 20px 0 20px 50px
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
> a
color: #263238
float: left
font-family: Montserrat
font-size: 14px
font-weight: bold
line-height: 25px
> i
color: #ff5f5f
float: left
font-size: 18px
line-height: 25px
margin-right: 10px
.menu-options
color: #808891
cursor: pointer
float: right
font-size: 18px
height: 25px
line-height: 25px
position: relative
text-align: center
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 25px
.menu-action
height: 12px
left: 0
position: absolute
top: 50%
-webkit-transform: translateY(-50%)
-moz-transform: translateY(-50%)
-ms-transform: translateY(-50%)
-o-transform: translateY(-50%)
transform: translateY(-50%)
width: 14px
&::after
background: #555555 none repeat scroll 0 0
-webkit-border-radius: 2px
-moz-border-radius: 2px
-ms-border-radius: 2px
-o-border-radius: 2px
border-radius: 2px
bottom: 0
content: ""
height: 2px
left: 0
position: absolute
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 100%
.menu-options.active .menu-action::after
bottom: 6px
-webkit-transform: rotate(-45deg)
-moz-transform: rotate(-45deg)
-ms-transform: rotate(-45deg)
-o-transform: rotate(-45deg)
transform: rotate(-45deg)
.menu-action::before
background: #555555 none repeat scroll 0 0
-webkit-border-radius: 2px
-moz-border-radius: 2px
-ms-border-radius: 2px
-o-border-radius: 2px
border-radius: 2px
content: ""
height: 2px
left: 0
position: absolute
top: 0
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 100%
.menu-options.active .menu-action::before
top: 4px
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
transform: rotate(45deg)
.menu-action > i
height: 3px
left: 0
position: absolute
top: 50%
-webkit-transform: translateY(-50%)
-moz-transform: translateY(-50%)
-ms-transform: translateY(-50%)
-o-transform: translateY(-50%)
transform: translateY(-50%)
width: 20px
&::before
background: #555555 none repeat scroll 0 0
-webkit-border-radius: 2px
-moz-border-radius: 2px
-ms-border-radius: 2px
-o-border-radius: 2px
border-radius: 2px
content: ""
height: 2px
left: 0
position: absolute
top: 0
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 100%
.menu-options.active .menu-action > i::before
opacity: 0
-webkit-transform: scale(0.5)
-moz-transform: scale(0.5)
-ms-transform: scale(0.5)
-o-transform: scale(0.5)
transform: scale(0.5)
form.search-form
border: 1px solid #e0e5e7
-webkit-border-radius: 22px
-moz-border-radius: 22px
-ms-border-radius: 22px
-o-border-radius: 22px
border-radius: 22px
float: left
height: 38px
margin-left: 80px
margin-top: 14px
position: relative
width: 213px
>
input
background: rgba(0, 0, 0, 0) none repeat scroll 0 0
border: medium none
color: #7b7b7b
float: left
font-size: 12px
padding: 9px 20px 9px 25px
width: 100%
button
background: rgba(0, 0, 0, 0) none repeat scroll 0 0
border: medium none
color: #7f8890
font-size: 12px
padding: 8px 16px 8px 20px
position: absolute
right: 0
.top-bar > ul
float: left
list-style: outside none none
margin: 0
padding: 0
> li
float: left
margin-left: 40px
padding: 23px 0
> a > i
font-size: 11px
margin-right: 8px
.quick-links
float: right
padding: 16px 14px 16px 0
> ul
float: left
list-style: outside none none
margin: 0
padding: 0
> li
float: left
margin-right: 3px
position: relative
> a
border: 1px solid #e8edf2
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
color: #ffffff
cursor: pointer
float: left
font-size: 14px
height: 34px
line-height: 30px
text-align: center
width: 34px
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
/* Side Header
header
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
&.side-header.slide-menu
left: -220px
.main-content.wide-content
padding-left: 45px
header.side-header
background: #263238 none repeat scroll 0 0
height: 100%
left: 0
position: fixed
top: 66px
width: 220px
z-index: 2147483644
&.light-skin
background: #ffffff none repeat scroll 0 0
.side-header.light-skin .side-menus
> span
color: #5a5a5a
nav > ul > li
> a
color: #555555
ul
&::before
border-bottom-color: #dfe6ec
background: #dfe6ec none repeat scroll 0 0
.admin-details
background-image: url("../images/resource/admin-bg.jpg")
background-size: cover
display: table
float: left
padding: 40px 30px 115px
position: relative
width: 100%
z-index: 0
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
&:before
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(38, 50, 56, 1) 100%)
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(38, 50, 56, 1) 100%)
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(38, 50, 56, 1) 100%)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#263238',GradientType=0 )
content: ""
height: 100%
left: 0
position: absolute
top: 0
width: 100%
z-index: -1
.side-header.light-skin
.admin-details
&::before
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 1) 100%)
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 1) 100%)
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 1) 100%)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 )
h3
color: #333333
> i
color: #787878
.admin-status
color: #303030
font-weight: 400
.admin-details
> span
float: left
margin-right: 16px
> img
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
float: left
width: 59px
h3
color: #ffffff
display: block
float: none
font-family: Montserrat
font-size: 15px
margin: 3px 0 0
> i
color: #c8c8c8
display: block
font-family: Open sans
font-size: 10px
font-style: normal
font-weight: 600
margin-top: 6px
text-transform: uppercase
.side-header.light-skin .side-menus nav > ul > li ul li > a
color: #697178
.admin-status
color: #ffffff
float: left
font-family: Open sans
font-size: 10px
font-weight: bold
margin: 7px 0 0
padding-left: 10px
position: relative
text-transform: uppercase
&.online:before
background: #64c352
&.offline:before
background: #ff6e6e
&::before
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
content: ""
height: 6px
left: 0
margin-top: -2px
position: absolute
top: 50%
width: 6px
/* Side Menus
.side-menus
float: left
position: relative
width: 100%
z-index: 9
.menu-scroll
float: left
margin-top: -70px
width: 100%
.side-menus
> span
color: #a6a6a6
float: left
font-family: Open sans
font-size: 10px
padding: 0 30px
text-transform: uppercase
width: 100%
nav
float: left
padding-top: 15px
width: 100%
> ul
float: left
list-style: outside none none
margin: 0
padding: 0
width: 100%
> li
float: left
width: 100%
> a
color: #d1d1d1
float: left
font-family: Open sans
font-size: 13px
padding: 10px 30px
position: relative
> i
width: 22px
.menu-item-has-children
> a::before
background: #8b8b8c none repeat scroll 0 0
content: ""
height: 1px
left: 100%
margin-left: -18px
position: absolute
top: 50%
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 5px
&.active > a::before
width: 30px
nav > ul
> li ul
background: #36464e none repeat scroll 0 0
display: none
float: left
list-style: outside none none
margin: 10px 0
padding: 20px 0
position: relative
width: 100%
&::before
border-bottom: 7px solid #36464e
border-left: 7px solid transparent
border-right: 7px solid transparent
content: ""
left: 50px
position: absolute
top: -6px
li
float: left
width: 100%
li a
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
i
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
> li ul li > a
color: #a1a3a4
float: left
font-family: Open sans
font-size: 12px
padding: 3px 20px 3px 40px
width: 100%
> i
float: left
font-size: 10px
line-height: 20px
margin-right: 10px
.menu-item-has-children.active > a
color: #fff
i
color: #ff5f5f
/* Main Content
.main-content
float: left
padding: 106px 45px 110px 265px
width: 100%
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
.breadcrumbs
float: left
margin-bottom: 20px
width: 100%
> ul
float: left
list-style: outside none none
margin: 0
padding: 0
width: 100%
> li
float: left
position: relative
> a
color: #797d80
float: left
font-family: Open sans
font-size: 12px
margin-right: 15px
padding-right: 15px
position: relative
&::before
color: #797d80
content: "/"
font-family: Open sans
font-size: 12px
position: absolute
right: -2px
top: 0
&:last-child > a::before
display: none
display: none
/* heading Sec
.heading-sec
float: left
width: 100%
.heading-profile
float: left
padding-top: 10px
width: 100%
>
h2
color: #263238
float: left
font-family: Montserrat
font-size: 20px
margin: 0 0 6px
width: 100%
> span
color: #ff5f5f
span
color: #747b7f
float: left
font-family: Open sans
font-size: 13px
width: 100%
.top-bar-chart
float: right
padding-top: 12px
width: 100%
.quick-report-infos
float: left
padding-right: 18px
.quick-report
display: table
float: right
padding-left: 50px
p
color: #7a7979
float: left
font-family: Open sans
font-size: 12px
line-height: 11px
h3
color: #4c4c4c
display: list-item
font-family: Montserrat
font-size: 19px
list-style: outside none none
margin: 0
> svg
float: right
/* Panel Content
.panel-content
float: left
margin-top: -26px
padding-top: 50px
width: 100%
.row
margin: 0 -7px
> div
padding: 0 7px
.mini-stats-sec
float: left
width: 100%
.mini-stats
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
padding: 25px 30px
position: relative
width: 100%
.widget-controls
padding-right: 10px
padding-top: 10px
position: absolute
right: 0
top: 0
z-index: 1
> span
color: #b8b8b8
cursor: pointer
float: right
font-size: 13px
line-height: 14px
margin-left: 8px
.widget
&::before
background-color: #ffffff
background-image: url("../images/loader.gif")
background-position: center center
background-repeat: no-repeat
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
content: ""
height: 100%
left: 0
opacity: 0
position: absolute
top: 0
width: 100%
z-index: 9
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
visibility: hidden
background: #ffffff none repeat scroll 0 0
float: left
margin-top: 14px
position: relative
width: 100%
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
&.no-color
background: rgba(0, 0, 0, 0) none repeat scroll 0 0
-webkit-border-radius: 0
-moz-border-radius: 0
-ms-border-radius: 0
-o-border-radius: 0
border-radius: 0
.total-sales-sec
float: left
width: 100%
.widget
&.loading-wait::before
opacity: 0.8
visibility: visible
&.expand-this
height: 100%
left: 0
margin: 0
position: fixed
top: 0
width: 100%
z-index: 2147483647
.mini-stats >
span
border: 1px solid
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
color: #fff
float: left
font-size: 20px
height: 57px
line-height: 56px
margin-right: 15px
text-align: center
width: 57px
p
color: #878888
display: block
font-family: Open sans
font-size: 11px
line-height: 20px
margin: 6px 0 0
text-transform: uppercase
> i
margin-right: 4px
.fa
&.up
color: #5bdd5e
&.down
color: #ff6a7f
.mini-stats > h3
color: #4d575d
display: block
font-size: 18px
margin: 5px 0 0
/* Total Sales Sec
.total-sales-sec
display: table
float: left
padding: 50px 45px
width: 100%
.circle-chart
float: left
margin-right: 35px
position: relative
.total-sales-info
display: table-cell
vertical-align: middle
width: 100%
.circle-chart > p
margin: 0
.cirlce-chart-detail
left: 0
margin-top: -6px
position: absolute
text-align: center
top: 50%
-webkit-transform: translateY(-50%)
-moz-transform: translateY(-50%)
-ms-transform: translateY(-50%)
-o-transform: translateY(-50%)
transform: translateY(-50%)
width: 100%
>
span
color: #777777
float: left
font-family: Open sans
font-size: 11px
letter-spacing: 0.3px
margin-bottom: 4px
width: 100%
h5
color: #4d575d
float: left
font-size: 18px
margin: 1px 0 0
text-align: center
width: 100%
.total-sales-info
>
span
color: #777777
float: left
font-size: 13px
font-weight: 300
margin-bottom: 10px
width: 100%
h3
color: #4d575d
float: left
font-size: 21px
margin-bottom: 0
margin-top: -3px
padding-bottom: 20px
position: relative
width: 100%
&::before
background: #e6e6e6 none repeat scroll 0 0
bottom: 0
content: ""
height: 1px
left: 0
position: absolute
width: 100px
ul
float: left
list-style: outside none none
margin: 20px 0 0
padding: 0
width: 100%
> li
float: left
width: 33.3333%
li > span
color: #777777
float: left
font-family: Open sans
font-size: 13px
font-weight: 200
width: 100%
ul li h5
color: #4d575d
float: left
font-family: Montserrat
font-size: 18px
margin: 4px 0 0
width: 100%
/* Color Classes
.red-skin
background-color: #ff6b6b
border-color: #ff6262 !important
.sky-skin
background-color: #63d6ff
border-color: #28c4fc !important
.purple-skin
background-color: #6e6eff
border-color: #7373ff !important
.pink-skin
background-color: #f76fff
border-color: #f661ff !important
.orange-skin
background-color: #ffb48f
border-color: #ff742f !important
/* Activity Sec
.activity-sec
float: left
padding: 35px
width: 100%
.widget-title
>
h3
color: #2e2e2e
float: left
font-size: 16px
margin: 0 0 5px
padding-right: 30px
span
color: #666666
float: left
font-family: open sans
font-size: 13px
font-weight: 300
width: 100%
float: left
margin-bottom: 22px
width: 100%
/* Graph Wrapper
#graph-wrapper
float: left
width: 100%
.graph-info
float: left
width: 100%
> a
color: #7f7f7f
float: left
font-family: Open Sans
font-size: 13px
font-weight: 400
margin-right: 20px
padding-left: 24px
position: relative
> span
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
height: 13px
left: 0
margin-top: 3px
position: absolute
top: 0
width: 13px
.graph-container
float: left
margin-top: 20px
width: 100%
> canvas
height: 232px !important
width: 100% !important
.graph-details
float: left
width: 100%
> ul
float: left
list-style: outside none none
margin: 0
padding: 0
width: 100%
> li
float: left
width: 50%
float: left
width: 50%
strong
color: #4d575d
float: left
font-family: MOntserrat
font-size: 18px
font-weight: normal
margin-top: 11px
width: 100%
> span
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #ffffff
float: left
font-family: open sans
font-size: 11px
padding: 1px 9px
p
color: #7f7f7f
float: left
font-size: 13px
margin: 2px 0 0
width: 100%
.admin-follow
background-image: url("../images/admin-bg.jpg")
background-size: cover
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
overflow: hidden
padding: 60px 30px 50px
position: relative
text-align: center
width: 100%
z-index: 0
&::before
background: #fff none repeat scroll 0 0
content: ""
height: 100%
left: 0
opacity: 0.8
position: absolute
top: 0
width: 100%
z-index: -1
&:after
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%)
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%)
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 )
content: ""
height: 100%
left: 0
position: absolute
top: 0
width: 100%
z-index: -1
>
img
border: 3px solid rgba(255, 255, 255, 0.8)
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
display: inline-block
h3
color: #232323
float: left
font-size: 16px
margin: 20px 0 5px
width: 100%
span
color: #626262
float: left
font-family: open sans
font-size: 14px
margin-bottom: 20px
width: 100%
a
background: #fff none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #6d6d6d
display: table
font-family: Open Sans
font-size: 12px
margin: 0 auto
padding: 12px 27px
text-transform: uppercase
ul
float: left
list-style: outside none none
margin: 0
padding: 50px 0 0
width: 100%
> li
display: inline-block
float: none
padding: 0 20px
>
i
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
color: #fff
display: inline-block
font-size: 14px
height: 42px
line-height: 42px
text-align: center
width: 42px
span
color: #4d575d
display: block
font-family: Montserrat
font-size: 15px
margin-top: 10px
/* Our Clients Sec
.our-clients-sec
float: left
padding: 40px
width: 100%
.filterform > input
background: rgba(0, 0, 0, 0) none repeat scroll 0 0
border: medium none
color: #7b7b7b
float: left
font-size: 12px
padding: 9px 20px 9px 25px
width: 100%
form.filterform
border: 1px solid #dbe0e2
-webkit-border-radius: 22px
-moz-border-radius: 22px
-ms-border-radius: 22px
-o-border-radius: 22px
border-radius: 22px
float: left
height: 38px
margin: 0 0 30px
position: relative
width: 100%
.client-list
list-style: outside none none
margin: 0 -20px
padding: 0
> li
display: table
float: left
margin-bottom: 15px
padding: 0 20px
position: relative
width: 100%
.client-info >
a
color: #cbcbcb
font-size: 14px
margin-top: -15px
position: absolute
right: 10px
top: 50%
h3
float: left
margin: 0
width: 100%
a
color: #2e2e2e
float: left
font-family: Montserrat
font-size: 15px
margin: 0
width: 100%
.client-list > li > span
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
color: #fff
float: left
font-family: MOntserrat
font-size: 21px
height: 51px
line-height: 50px
position: relative
text-align: center
width: 51px
.client-info
display: table-cell
padding-left: 15px
position: relative
vertical-align: middle
width: 100%
.user-status
&::before
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
content: ""
height: 6px
left: 0
position: absolute
top: 0
width: 6px
&.online::before
background: #5bdd5e
&.offline::before
background: #ff6a7f
&.away::before
background: #ffda2b
/* Product Sale
.product-sale
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
overflow: hidden
position: relative
width: 100%
> img
float: left
width: 100%
.product-info
bottom: 0
left: 0
padding: 40px
position: absolute
>
h3
color: #ffffff
float: left
font-family: Montserrat
font-size: 22px
margin: 0 0 7px
width: 100%
> a
color: inherit
p
color: #e1e1e1
float: left
width: 100%
.price
color: #ffa2a2
float: left
font-size: 20px
width: 100%
> ins
float: left
font-family: Open Sans
font-weight: bold
margin-right: 10px
text-decoration: none
> i
margin-right: 15px
del
color: #cdcdcd
font-size: 15px
/* task management
.task-managment
float: left
padding: 40px
width: 100%
.add-task-item
border: 1px solid #e8edf2
-webkit-border-radius: 22px
-moz-border-radius: 22px
-ms-border-radius: 22px
-o-border-radius: 22px
border-radius: 22px
float: left
height: 38px
position: relative
width: 100%
> input
background: rgba(0, 0, 0, 0) none repeat scroll 0 0
border: medium none
color: #7b7b7b
float: left
font-size: 12px
padding: 9px 20px 9px 25px
width: 100%
button
background: rgba(0, 0, 0, 0) none repeat scroll 0 0
border: medium none
color: #7f8890
font-size: 12px
padding: 8px 16px 8px 20px
position: absolute
right: 0
.task-managment > ol
float: left
margin: 20px 0 0
padding: 0 0 0 15px
width: 100%
> li
color: #424242
float: left
font-family: Open Sans
font-size: 13px
font-weight: 300
padding: 7px 0
position: relative
width: 100%
padding-right: 20px
> i
height: 100%
left: -55px
position: absolute
top: 0
width: 3px
&::before
background: #bbbbbb none repeat scroll 0 0
content: ""
height: 1px
left: 0
position: absolute
top: 50%
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 0
margin-top: 1px
&.active
&::before
width: 50%
color: #9b9b9b
> span
background: #555 none repeat scroll 0 0
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
color: #fff
cursor: pointer
font-size: 8px
height: 16px
line-height: 16px
margin-top: -9px
opacity: 0
position: absolute
right: -20px
text-align: center
top: 50%
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 16px
&:hover > span
opacity: 1
right: 0
/* Chat Widget
.chat-widget
float: left
padding: 40px
width: 100%
.chat-window
float: left
overflow: hidden
position: relative
width: 100%
.chat-messages
-webkit-border-radius: 2px 2px 0 0
-moz-border-radius: 2px 2px 0 0
-ms-border-radius: 2px 2px 0 0
-o-border-radius: 2px 2px 0 0
border-radius: 2px 2px 0 0
height: 212px !important
overflow-x: hidden
overflow-y: auto
position: relative
width: 100%
.chat-window::before
background: #ffffff none repeat scroll 0 0
content: ""
height: 100%
position: absolute
right: 0
top: -54px
width: 17px
z-index: 999999999
.chat-messages-list
float: left
list-style: outside none none
margin: 0
padding: 0
width: 100%
.chat-message-bubble
background: #fff none repeat scroll 0 0
border: 1px solid #e8ecec
-webkit-border-radius: 18px
-moz-border-radius: 18px
-ms-border-radius: 18px
-o-border-radius: 18px
border-radius: 18px
display: inline-block
font-size: 13px
line-height: 22px
max-width: 350px
min-width: 0
padding: 8px 22px
.chat-message-self .chat-message-bubble
border: medium none
.chat-window
button:focus
-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
-webkit-tap-highlight-color: transparent
outline: none
a
color: #eab1c6
&:hover, &:focus
color: #C7668A
@media screen and (max-width: 380px)
.chat-window
border: none
-webkit-border-radius: 0px
-moz-border-radius: 0px
-ms-border-radius: 0px
-o-border-radius: 0px
border-radius: 0px
.chat-message
position: relative
font-size: 0
margin-bottom: 10px
.chat-message-effect
position: absolute
.chat-message-bubble
display: inline-block
font-size: 13px
max-width: 350px
background: #fff
padding: 8px 14px
-webkit-border-radius: 18px
-moz-border-radius: 18px
-ms-border-radius: 18px
-o-border-radius: 18px
border-radius: 18px
min-width: 0
.chat-message-self
&.chat-message-merge-start .chat-message-bubble
border-bottom-right-radius: 0
&.chat-message-merge-middle .chat-message-bubble
border-top-right-radius: 0
border-bottom-right-radius: 0
&.chat-message-merge-end .chat-message-bubble
border-top-right-radius: 0
text-align: right
.chat-message-bubble
background: #63d6ff none repeat scroll 0 0
color: #ffffff
font-size: 13px
text-align: left
.chat-message-effect .chat-message-bubble
background: #63d6ff none repeat scroll 0 0
color: #ffffff
font-size: 13px
text-align: left
.chat-input-bar
background: #63d6ff none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
margin-top: 10px
position: relative
width: 100%
.chat-input-wrapper
position: relative
z-index: 2
/*background: #63d6ff;
padding: 0.5em 0
-webkit-border-radius: 0 0 2px 2px
-moz-border-radius: 0 0 2px 2px
-ms-border-radius: 0 0 2px 2px
-o-border-radius: 0 0 2px 2px
border-radius: 0 0 2px 2px
color: #fff
display: -webkit-flex
display: -ms-flexbox
display: flex
-webkit-flex-wrap: wrap
-ms-flex-wrap: wrap
flex-wrap: wrap
-webkit-justify-content: center
justify-content: center
font-size: 16px
.chat-send
display: -webkit-flex
display: -ms-flexbox
display: flex
-webkit-flex-wrap: wrap
-ms-flex-wrap: wrap
flex-wrap: wrap
-webkit-justify-content: center
justify-content: center
font-size: 16px
.chat-input-tool
background: transparent
border: none
padding: 0 0.75em
color: inherit
.chat-input
outline: none
resize: none
overflow: hidden
min-height: 38px
-webkit-flex: 1
flex: 1
font-size: 14px
padding: 10px 0 7px
cursor: text
&:empty::before
content: "Write something..."
color: #ffffff
&:focus::before
content: ""
.chat-send
background: transparent
border: none
position: relative
overflow: hidden
padding: 0 0.75em
color: inherit
-webkit-transition: color 0.6s
transition: color 0.6s
.chat-input:empty + .chat-send
color: #fff
.chat-send > i
position: relative
.chat-effect-container
position: absolute
top: -100px
width: 100%
.chat-widget > svg
height: 0
.chat-effect-bar
background: #63d6ff
position: absolute
top: 100px
width: 100%
height: 40px
-webkit-transform: rotateY(0)
-moz-transform: rotateY(0)
-ms-transform: rotateY(0)
-o-transform: rotateY(0)
transform: rotateY(0)
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
.chat-effect-dots
position: absolute
.chat-effect-dot
background: #63d6ff
position: absolute
width: 15px
height: 15px
-webkit-border-radius: 100%
-moz-border-radius: 100%
-ms-border-radius: 100%
-o-border-radius: 100%
border-radius: 100%
.chat-info-container
position: absolute
top: -20px
font-size: 12px
color: #63d6ff
.chat-info-typing
position: absolute
left: 80px
white-space: nowrap
/* Twitter Feed */
.twitter-feed
float: left
padding: 40px
width: 100%
.twitter-account
float: left
margin-bottom: 19px
width: 100%
>
i
color: #ace9ff
float: left
font-size: 58px
margin-right: 15px
h3
color: #2e2e2e
display: block
font-size: 18px
margin: 10px 0 2px
span
color: #777777
font-family: open sans
font-size: 13px
font-weight: 300
.twitter-widget
float: left
width: 100%
ul
float: left
list-style: outside none none
margin: 0
padding: 0
width: 100%
> li
border-bottom: 1px solid #e8ecec
float: left
padding: 30px 0
width: 100%
&:first-child
padding-top: 0
> a
border: 1px solid #e8ecec
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
float: left
margin-right: 19px
overflow: hidden
.tweets_txt
> span
color: #afafaf
float: left
font-size: 11px
width: 100%
a
color: #000000
footer
background: #ffffff none repeat scroll 0 0
bottom: 0
box-shadow: 0 0 13px rgba(0, 0, 0, 0.13)
left: 0
padding: 20px 45px 20px 265px
position: fixed
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 100%
z-index: 2147483642
&.wide-footer
padding-left: 45px
> .container
padding: 0
width: auto
p
color: #919191
float: left
font-family: open sans
font-size: 13px
margin: 0
width: auto
i
color: #ff8696
ul
float: right
list-style: outside none none
margin: 0
padding: 0
li
a
color: #8b8b8b
float: left
font-family: open sans
font-size: 13px
line-height: 26px
padding: 0 18px
float: left
/* Welcome Bar */
.welcome-bar
display: table
float: left
padding: 40px
width: 100%
>
i
border: 1px solid
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
color: #fff
display: table-cell
float: left
font-size: 20px
height: 57px
line-height: 56px
margin-bottom: 15px
margin-right: 20px
margin-top: 15px
text-align: center
vertical-align: middle
width: 57px
p
color: #474343
display: block
font-size: 14px
margin: 0
span
color: #ff5f5f
span
color: #979797
display: block
font-family: open sans
font-size: 13px
font-weight: 300
margin-top: 10px
color: #777777
display: block
font-family: open sans
font-size: 13px
font-weight: 300
margin-top: 6px
a
color: #333333
.morris-hover
position: absolute
z-index: 1000
&.morris-default-style
-webkit-border-radius: 10px
-moz-border-radius: 10px
-ms-border-radius: 10px
-o-border-radius: 10px
border-radius: 10px
padding: 6px
color: #666
background: rgba(255, 255, 255, 0.8)
border: solid 2px rgba(230, 230, 230, 0.8)
font-family: sans-serif
font-size: 12px
text-align: center
.morris-hover-row-label
font-weight: bold
margin: 0.25em 0
.morris-hover-point
white-space: nowrap
margin: 0.1em 0
#area-chart
display: table-cell
height: 330px
padding-top: 11px
vertical-align: middle
width: 100%
.server-status-sec
display: table
float: left
width: 100%
.server-details
float: left
padding: 40px 0 40px 40px
width: 200px
>
span
color: #868686
float: left
font-family: open sans
font-size: 13px
width: 100%
h3
color: #2e2e2e
float: left
font-size: 33px
margin: 8px 0 10px
width: 100%
p
float: left
margin: 0 0 15px
padding-bottom: 20px
position: relative
width: 100%
h5
color: #929292
float: left
font-family: Montserrat
font-size: 13px
margin: 0
width: 100%
span
font-size: 16px
color: #73e064
p::before
background: #e2e2e2 none repeat scroll 0 0
bottom: 0
content: ""
height: 2px
left: 0
position: absolute
width: 70px
a
border: 1px none
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #ffffff
float: left
font-family: Open Sans
font-size: 12px
margin-top: 25px
padding: 12px 27px
text-transform: uppercase
.server-chart
float: left
margin-top: 25px
width: 100%
@keyframes bake-pie
from
-webkit-transform: rotate(0deg) translate3d(0, 0, 0)
-moz-transform: rotate(0deg) translate3d(0, 0, 0)
-ms-transform: rotate(0deg) translate3d(0, 0, 0)
-o-transform: rotate(0deg) translate3d(0, 0, 0)
transform: rotate(0deg) translate3d(0, 0, 0)
.pie-chart-sec
display: table
float: left
padding: 40px
width: 100%
.pieID
display: inline-block
vertical-align: top
.pie
float: left
height: 150px
margin: 0
position: relative
width: 150px
&::before
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
content: ""
display: block
height: 70px
left: 50%
position: absolute
top: 50%
-webkit-transform: translateY(-50%) translateX(-50%)
-moz-transform: translateY(-50%) translateX(-50%)
-ms-transform: translateY(-50%) translateX(-50%)
-o-transform: translateY(-50%) translateX(-50%)
transform: translateY(-50%) translateX(-50%)
width: 70px
z-index: 1
.slice
position: absolute
width: 150px
height: 150px
clip: rect(0px, 150px, 150px, 75px)
animation: bake-pie 1s
span
display: block
position: absolute
top: 0
left: 0
background-color: black
width: 150px
height: 150px
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
clip: rect(0px, 150px, 150px, 75px)
.legend
display: table-cell
font-size: 13px
list-style-type: none
margin: 0
padding: 0 0 0 25px
vertical-align: middle
width: 100%
li
border-left: 3px solid
color: #808080
font-family: Open Sans
font-size: 13px
font-weight: 300
height: 10px
line-height: 10px
margin-bottom: 12px
padding-left: 10px
&:last-child
margin: 0
em
font-style: normal
span
color: #c5c5c5
display: none
float: right
font-size: 11px
font-weight: 400
line-height: 13px
.most-browsers
display: table
float: left
width: 100%
/* Revenew Browser */
.revenew-browser
float: left
padding: 40px
width: 100%
> ul
float: left
list-style: outside none none
margin: 0
padding: 0
width: 100%
> li
float: left
margin-bottom: 25px
width: 100%
&:last-child
margin: 0
.browser-detail
float: left
width: 50%
.browser-detail >
img
float: left
margin-right: 10px
h3
color: #484848
display: block
font-family: Open Sans
font-size: 12px
margin: 0
span
color: #9a9a9a
float: left
font-family: open sans
font-size: 10px
letter-spacing: 0.4px
margin-right: 7px
&:last-child
margin: 0
> i
font-size: 9px
.revenew-browser > ul > li .peity
float: right
/* Social Counter */
.social-counter
float: left
padding: 40px
width: 100%
.social-widget
float: left
width: 100%
>
ul
float: left
list-style: outside none none
margin: 0
padding: 0
width: 100%
> li
float: left
margin-bottom: 20px
width: 50%
span
color: #9f9f9f
float: left
font-family: Montserrat
font-size: 16px
margin-top: 11px
text-align: center
width: 100%
ul > li
> i
border: 1px solid
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
color: #fff
float: left
font-size: 16px
height: 38px
line-height: 38px
margin-right: 12px
text-align: center
width: 38px
&.fa-facebook
background: #7db5ec
border-color: #5096da
&.fa-google-plus
background: #ff707a
border-color: #ff2b3a
&.fa-pinterest
background: #ea404c
border-color: #be3e46
&.fa-twitter
background: #55d9ff
border-color: #30b4d9
span
color: #909090
display: block
font-family: open sans
font-size: 10px
text-transform: uppercase
h5
color: #2e2e2e
display: block
font-size: 16px
font-weight: normal
margin: 0
i
font-size: 9px
.visitor-chart
float: left
.visitor-country
display: table
float: left
width: 100%
.visitor-country-list
display: table-cell
padding: 40px
vertical-align: middle
width: 100%
.map-table
float: left
margin-top: -2px
width: 100%
>
h3
color: #666666
float: left
font-family: Montserrat
font-size: 15px
font-weight: bold
letter-spacing: 0.2px
margin: 0
padding: 8px 0 8px 30px
text-align: left
width: 50%
h4
color: #464646
float: right
font-family: Montserrat
font-size: 15px
letter-spacing: 0.2px
margin: 0
padding: 8px 0 8px 30px
text-align: left
width: 50%
ul
float: left
margin: 0
padding: 0
width: 100%
li
&:nth-child(2n+1)
background: #f6f6f6 none repeat scroll 0 0
float: left
list-style: outside none none
padding: 5px 0
width: 100%
span
color: #555555
float: left
font-family: open sans
font-size: 13px
letter-spacing: 0.3px
padding-left: 30px
text-align: left
width: 50%
i
color: #444444
float: left
font-family: open sans
font-size: 13px
font-style: normal
font-weight: 500
padding-left: 30px
text-align: left
width: 50%
/* Product Stats */
.product-stats
float: left
padding: 40px
text-align: center
width: 100%
>
h3
color: #2e2e2e
float: left
font-size: 18px
margin: 0 0 24px
width: 100%
span
> i
color: #959595
font-family: Open Sans
font-size: 13px
font-style: normal
background: #f5f5f5 none repeat scroll 0 0
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
float: left
font-family: Montserrat
font-size: 15px
left: 50%
margin: 0
padding: 9px 22px
position: relative
-webkit-transform: translateX(-50%)
-moz-transform: translateX(-50%)
-ms-transform: translateX(-50%)
-o-transform: translateX(-50%)
transform: translateX(-50%)
ul
float: left
list-style: outside none none
margin: 30px 0 0
padding: 0
width: 100%
> li
color: #777777
float: left
font-family: Open Sans
font-size: 13px
width: 50%
> span
color: #494949
float: left
font-family: Montserrat
font-size: 14px
margin-top: 6px
width: 100%
a
border: 1px solid
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #ffffff
display: inline-block
font-family: Montserrat
font-size: 13px
margin-top: 25px
padding: 12px 27px
/* Add Content Form */
.add-content-form
float: left
width: 100%
> textarea
border: medium none
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
max-height: 152px
max-width: 100%
min-height: 152px
min-width: 100%
padding: 20px
width: 100%
.add-content
background: #f5f5f5 none repeat scroll 0 0
-webkit-border-radius: 0 0 5px 5px
-moz-border-radius: 0 0 5px 5px
-ms-border-radius: 0 0 5px 5px
-o-border-radius: 0 0 5px 5px
border-radius: 0 0 5px 5px
float: left
padding: 12px 20px
width: 100%
>
ul
float: left
list-style: outside none none
margin: 0
padding: 0
> li
float: left
a
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
color: #808891
float: left
height: 30px
line-height: 30px
text-align: center
width: 30px
&:hover
background: #fff none repeat scroll 0 0
color: #808891
button
background: #fff none repeat scroll 0 0
border: medium none
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
color: #717171
float: right
font-family: Montserrat
font-size: 12px
padding: 6px 14px
/* Tasks Progress */
.tasks-progress
float: left
padding: 40px
width: 100%
> ul
float: left
list-style: outside none none
margin: -17px -10px 0
padding: 0
width: 100%
> li
float: left
margin: 15px 0 0
padding: 0 10px
width: 50%
.progress .progress-bar
box-shadow: none
.tasks-progress
> ul > li > span
color: #797979
float: left
font-family: Open Sans
font-size: 13px
width: 100%
.progress
height: 6px
.progress
border: medium none
box-shadow: none
float: left
margin: 6px 0 0
width: 100%
/* Activity Feed */
.activity-feed
float: left
width: 100%
.activity-timeline
float: left
list-style: outside none none
margin: 0
padding: 30px 0 0
position: relative
width: 100%
&::before
background: #f8f8f8 none repeat scroll 0 0
content: ""
height: 100%
left: 18px
margin-left: -1.5px
position: absolute
top: 0
width: 3px
> li
float: left
margin-bottom: 50px
padding-left: 60px
position: relative
width: 100%
.user-device
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
color: #626262
font-size: 16px
height: 38px
left: 0
line-height: 38px
margin-top: 14px
position: absolute
text-align: center
top: 0
width: 38px
&::before
background: #fff none repeat scroll 0 0
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
content: ""
height: 6px
margin-top: -3px
position: absolute
right: -14px
top: 50%
width: 6px
.user-activity
float: left
width: 100%
.who-post-this
display: table
float: left
width: 100%
.who-post-detail
display: table-cell
vertical-align: middle
width: 100%
.who-post-this > span
border: 3px solid #ffffff
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
float: left
height: 66px
margin-right: 20px
overflow: hidden
width: 66px
img
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
float: left
width: 100%
.who-post-detail > h3
float: left
line-height: 10px
margin: 0 0 5px
width: 100%
> a
color: #2e2e2e
float: left
font-family: Montserrat
font-size: 14px
padding-right: 20px
position: relative
.poster-status
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
height: 6px
position: absolute
right: 0
top: 50%
width: 6px
&.online
background: #66cc6e
.who-post-detail >
span
color: #5e5e5e
float: left
font-family: Open Sans
font-size: 11px
font-weight: 400
width: 100%
a
color: #5e5e5e
float: left
font-family: Open Sans
font-size: 11px
font-weight: 400
width: 100%
color: #ff691f
float: none
width: auto
i
color: #7b8692
font-family: Open Sans
font-size: 11px
font-style: normal
.post-content
float: left
padding-top: 20px
width: 100%
.post-gallery
float: left
width: 100%
> a
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
margin-right: 2px
overflow: hidden
.comment-form
>
span
color: #a2a2a2
float: left
font-family: open sans
font-size: 11px
margin-right: 12px
form
float: left
padding-top: 9px
width: 100%
&::before
border-bottom: 9px solid #fff
border-left: 9px solid transparent
border-right: 9px solid transparent
content: ""
left: 20px
position: absolute
top: -6px
background: #ffffff none repeat scroll 0 0
float: left
margin-top: 20px
padding: 20px 20px 10px
position: relative
width: 100%
> form > textarea
background: #f5f5f5 none repeat scroll 0 0
border: medium none
color: #555555
float: left
font-size: 11px
height: 40px
letter-spacing: 0.4px
max-width: 100%
min-height: 40px
min-width: 100%
padding: 10px 20px
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 100%
&:focus
height: 100px
.jcider-nav
position: absolute
top: 50%
left: 50%
-webkit-transform: translate(-50%, -50%)
-ms-transform: translate(-50%, -50%)
-o-transform: translate(-50%, -50%)
transform: translate(-50%, -50%)
z-index: 4
width: 100%
color: white
font-size: 30px
span
text-align: center
cursor: pointer
position: absolute
font-size: 50px
color: white
transition: all 300ms
line-height: 1
&.disabled
pointer-events: none
color: rgba(255, 255, 255, 0.2)
.jcider-nav-left
left: 5px
.jcider-nav-right
right: 5px
/*Both right and left nav arrows */
/*Left nav arrow */
/*Right nav arrow */
/*Pagination container can be styled by '.jcider-pagination' */
.jcider-pagination
text-align: center
position: absolute
bottom: 0
left: 50%
-webkit-transform: translateX(-50%)
-moz-transform: translateX(-50%)
-ms-transform: translateX(-50%)
-o-transform: translateX(-50%)
transform: translateX(-50%)
/*Styling for pagination points */
.jcider-pagination-point
position: relative
background: none
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
margin: 8px
display: inline-block
width: 8px
height: 8px
cursor: pointer
background: rgba(255, 255, 255, 0.5)
transition: all 300ms
&.active
background: white
-webkit-transform: scale(1.5)
-moz-transform: scale(1.5)
-ms-transform: scale(1.5)
-o-transform: scale(1.5)
transform: scale(1.5)
/*Styling for active pagination point */
.widget-carousel
float: left
width: 100%
> ul
float: left
list-style: outside none none
margin: 0
padding: 0
width: 100%
> li
float: left
padding: 60px 70px
text-align: center
width: 100%
background-image: url("../images/resource/carousel-bg.jpg")
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
min-height: 290px
position: relative
width: 100%
z-index: 0
h3
color: #fff
float: left
font-family: Open Sans
font-size: 22px
font-weight: 300
line-height: 33px
width: 100%
span
color: #c5c5c5
font-family: Open Sans
font-size: 13px
&::before
background: #263238 none repeat scroll 0 0
content: ""
height: 100%
left: 0
opacity: 0.61
position: absolute
top: 0
width: 100%
z-index: -1
.jcider-pagination
bottom: 20px
/* Save Draft
.save-draft
float: left
width: 100%
padding: 40px
> form
float: left
width: 100%
>
input[type="text"], textarea
border: 1px solid #e0e5e7
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #9b9b9b
float: left
font-family: open sans
font-size: 12px
margin-bottom: 8px
padding: 10px 20px
width: 100%
input[type="submit"]
background: #e8edf2 none repeat scroll 0 0
border: medium none
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #424040
float: left
font-family: Open Sans
font-size: 12px
padding: 10px 20px
> textarea
min-height: 111px
/* Recent Comment
.recent-comment-sec
float: left
width: 100%
padding: 40px
ul > li
border-bottom: 2px solid #ececec
display: table
float: left
padding: 30px 0
width: 100%
.recent-comment
display: table
float: left
width: 100%
.comments-avatar
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
float: left
margin-right: 20px
overflow: hidden
.comment-detail
display: table-cell
vertical-align: middle
>
span
color: #7c7c7c
float: left
font-family: Open Sans
font-size: 12px
width: 100%
> a
color: #000000
font-family: Montserrat
font-size: 13px
p
float: left
margin: 3px 0 10px
width: 100%
.recent-comment-sec ul li
&:first-child
padding-top: 0
&:last-child
border: medium none
padding-bottom: 0
.comment-detail > a
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #fff
float: left
font-family: Open Sans
font-size: 11px
margin-right: 10px
padding: 1px 12px
.comments-scroll
float: left
width: 100% !important
> ul
float: left
list-style: outside none none
margin: 0
padding: 0 10px 0 0
width: 100%
/* Toggle Content
.toggle-content
background-image: url("../images/extra-bg.jpg")
background-size: cover
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2)
left: 0
margin-top: -20px
position: fixed
top: 0
-webkit-transform: translateY(-100%)
-moz-transform: translateY(-100%)
-ms-transform: translateY(-100%)
-o-transform: translateY(-100%)
transform: translateY(-100%)
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 100%
z-index: 2147483647
&.active
-webkit-transform: translateY(0px)
-moz-transform: translateY(0px)
-ms-transform: translateY(0px)
-o-transform: translateY(0px)
transform: translateY(0px)
margin: 0
> span
background: #fff none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #333333
cursor: pointer
font-size: 12px
height: 36px
line-height: 34px
position: absolute
right: 20px
text-align: center
top: 20px
width: 36px
.panel-setting
background: rgba(47, 53, 58, 0.85) none repeat scroll 0 0
float: left
position: relative
width: 100%
padding: 0 60px
.custom-text
float: left
margin-top: 12px
width: 100%
>
h4
color: #ffffff
float: left
font-size: 14px
margin-top: 40px
width: 100%
p
color: #dbdbdb
.quick-stats
float: left
padding-bottom: 30px
padding-top: 30px
width: 100%
.quick-stats-box
float: left
text-align: center
width: 100%
>
p
display: inline-block
position: relative
> i
color: #ffffff
font-family: Montserrat
font-size: 14px
font-style: normal
left: 0
margin-top: -15px
position: absolute
text-align: center
top: 50%
width: 100%
span
color: #ffffff
float: left
font-size: 12px
margin-top: -5px
width: 100%
.quick-stats .total-sales-info
span
color: #fafafa
h3, h5
color: #ffffff
.quick-links > ul > li
> a.opened
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
.dialouge
background: #f9f9f9 none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
display: none
margin-top: 32px
position: absolute
right: 0
top: 100%
width: 240px
z-index: 100000
&::before
border-bottom: 7px solid #ffffff
border-left: 7px solid rgba(0, 0, 0, 0)
border-right: 7px solid rgba(0, 0, 0, 0)
content: ""
position: absolute
right: 21px
top: -6px
>
span
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 5px 5px 0 0
-moz-border-radius: 5px 5px 0 0
-ms-border-radius: 5px 5px 0 0
-o-border-radius: 5px 5px 0 0
border-radius: 5px 5px 0 0
color: #959595
float: left
font-family: Open Sans
font-size: 10px
font-weight: normal
letter-spacing: 0.3px
line-height: 10px
padding: 18px 0
text-align: center
text-transform: uppercase
width: 100%
a
border-bottom: 1px solid #eaeaea
color: #555555
float: left
font-family: Open Sans
font-size: 11px
letter-spacing: 0.35px
padding: 15px 22px
width: 100%
img
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
float: left
margin-right: 15px
p
color: #8f8f8f
float: right
font-family: open sans
font-size: 11px
letter-spacing: 0.35px
line-height: 10px
margin-left: 0
margin-right: 0
margin-top: 10px
text-align: left
width: 100%
i
color: #c3c3c3
> a.view-all
background: #6f6f6f none repeat scroll 0 0
border: medium none
-webkit-border-radius: 0 0 5px 5px
-moz-border-radius: 0 0 5px 5px
-ms-border-radius: 0 0 5px 5px
-o-border-radius: 0 0 5px 5px
border-radius: 0 0 5px 5px
color: #ffffff
text-align: center
width: 100%
a p i
font-size: 12px
margin-right: 5px
/* Loader
.loader
animation: 0.3s linear 0s normal none infinite running load8
border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) #f82020
border-style: solid
border-width: 2px
font-size: 10px
position: fixed
left: 10px
text-indent: -9999em
top: 10px
-webkit-transform: translateZ(0px)
-moz-transform: translateZ(0px)
-ms-transform: translateZ(0px)
-o-transform: translateZ(0px)
transform: translateZ(0px)
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
height: 20px
width: 20px
&::after
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
height: 20px
width: 20px
@-webkit-keyframes load8
0%
-webkit-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
transform: rotate(360deg)
@keyframes load8
0%
-webkit-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
transform: rotate(360deg)
#progressBar
position: fixed
z-index: 2147483647
top: 0
left: 0
width: 10%
height: 2px
background: #f82020
-webkit-border-radius: 10%
-moz-border-radius: 10%
-ms-border-radius: 10%
-o-border-radius: 10%
border-radius: 10%
-moz-transition: width 500ms ease-out,opacity 400ms linear
-ms-transition: width 500ms ease-out,opacity 400ms linear
-o-transition: width 500ms ease-out,opacity 400ms linear
-webkit-transition: width 500ms ease-out,opacity 400ms linear
transition: width 500ms ease-out,opacity 400ms linear
&:before
position: absolute
content: ''
top: 0
opacity: 1
width: 10%
right: 0px
height: 2px
box-shadow: #f82020 1px 0 6px 2px
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
#progress
position: fixed
z-index: 2147483647
top: 0
left: -6px
width: 1%
height: 2px
background: #0088CC
-moz-border-radius: 1px
-webkit-border-radius: 1px
border-radius: 1px
-moz-transition: width 500ms ease-out,opacity 400ms linear
-ms-transition: width 500ms ease-out,opacity 400ms linear
-o-transition: width 500ms ease-out,opacity 400ms linear
-webkit-transition: width 500ms ease-out,opacity 400ms linear
transition: width 500ms ease-out,opacity 400ms linear
dd
position: absolute
top: 0
height: 2px
-moz-box-shadow: #0088CC 1px 0 6px 1px
-ms-box-shadow: #0088CC 1px 0 6px 1px
-webkit-box-shadow: #0088CC 1px 0 6px 1px
box-shadow: #0088CC 1px 0 6px 1px
-moz-border-radius: 100%
-webkit-border-radius: 100%
border-radius: 100%
dt
position: absolute
top: 0
height: 2px
-moz-box-shadow: #0088CC 1px 0 6px 1px
-ms-box-shadow: #0088CC 1px 0 6px 1px
-webkit-box-shadow: #0088CC 1px 0 6px 1px
box-shadow: #0088CC 1px 0 6px 1px
-moz-border-radius: 100%
-webkit-border-radius: 100%
border-radius: 100%
opacity: .6
width: 180px
right: -80px
clip: rect(-6px, 90px, 14px, -6px)
dd
opacity: .6
width: 20px
right: 0
clip: rect(-6px, 22px, 14px, 10px)
#vmap
background-color: red
float: left
height: 280px
margin: 43px 0
width: 570px
/* Setup basic CSS for Label
.jqvmap_pin
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif
cursor: default
/* Hide Whichever Labels you want
#jqvmap1_ri_pin, #jqvmap1_dc_pin, #jqvmap1_de_pin, #jqvmap1_md_pin
display: none
/* Reposition Labels that are not quite right ( labels are centered in shape, and sometimes need tweaking )
#jqvmap1_ak_pin
margin-top: -2%
#jqvmap1_ca_pin
margin-left: -2%
#jqvmap1_ct_pin
margin-top: -0.25%
margin-left: -0.25%
#jqvmap1_fl_pin
margin-left: 5%
#jqvmap1_id_pin
margin-top: 3%
margin-left: -1%
#jqvmap1_ky_pin
margin-left: 2%
#jqvmap1_la_pin
margin-left: -2%
#jqvmap1_mi_pin
margin-top: 4%
margin-left: 3%
#jqvmap1_ma_pin
margin-top: -0.25%
#jqvmap1_mn_pin
margin-top: 2%
margin-left: -2%
#jqvmap1_nh_pin
margin-top: 1%
margin-left: -0.25%
#jqvmap1_nj_pin
margin-top: 1%
#jqvmap1_ok_pin, #jqvmap1_va_pin
margin-left: 2%
#jqvmap1_wv_pin
margin-left: -1%
margin-top: 1%
/* Add responsibe support to resize labels for difference screen sizes
@media only screen and (min-width: 320px)
.jqvmap_pin
font-size: 6px
@media only screen and (min-width: 480px)
.jqvmap_pin
font-size: 8px
@media only screen and (min-width: 640px)
.jqvmap_pin
font-size: 10px
@media only screen and (min-width: 800px)
.jqvmap_pin
font-size: 12px
@media only screen and (min-width: 1024px)
.jqvmap_pin
font-size: 14px
.notify
p
display: inline
margin: 0
h3
color: #2e2e2e
float: left
font-family: Montserrat
font-size: 15px
line-height: 26px
margin: 0 14px 0 0
.notify-content a.close
font-size: 15px
position: absolute
right: 10px
top: 7px
.notify
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
padding: 20px 30px
width: 100%
display: table
&.simple
background: #ffffff none repeat scroll 0 0
&.with-color p
color: #656565
.notify-content
display: table-cell
padding-left: 20px
vertical-align: middle
width: 100%
.notify
&.rounded
-webkit-border-radius: 50px
-moz-border-radius: 50px
-ms-border-radius: 50px
-o-border-radius: 50px
border-radius: 50px
&.with-image > span
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
display: table
height: 40px
margin-right: 0
overflow: hidden
width: 40px
img
float: left
height: 40px
width: 40px
&.rounded .notify-content a.close
margin-top: -11px
right: 20px
top: 50%
/* Search Sec
.search-sec
background: #fff none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
padding: 40px
width: 100%
> span
color: #232323
float: left
font-family: Montserrat
font-size: 15px
margin-bottom: 20px
width: 100%
> i
color: #ff5f5f
font-style: normal
form
border: 1px solid #e8edf2
-webkit-border-radius: 22px
-moz-border-radius: 22px
-ms-border-radius: 22px
-o-border-radius: 22px
border-radius: 22px
float: left
height: 38px
margin: 0
position: relative
width: 100%
>
input
background: rgba(0, 0, 0, 0) none repeat scroll 0 0
border: medium none
color: #7b7b7b
float: left
font-size: 12px
padding: 9px 20px 9px 25px
width: 100%
button
background: rgba(0, 0, 0, 0) none repeat scroll 0 0
border: medium none
color: #7f8890
font-size: 12px
padding: 8px 16px 8px 20px
position: absolute
right: 0
.grids
float: left
padding: 40px
width: 100%
/* Gallery Sec
.gallery-sec
float: left
width: 100%
.gallery-box
float: left
margin-top: 30px
overflow: hidden
position: relative
width: 100%
.gallery-padding:hover::before
opacity: 1
-webkit-transform: scale(1)
-moz-transform: scale(1)
-ms-transform: scale(1)
-o-transform: scale(1)
transform: scale(1)
.gallery-box > img
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
width: 100%
.gallery-inner
height: 100%
left: 0
padding: 12px
position: absolute
top: 0
width: 100%
.gallery-padding
&::before
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
content: ""
height: 100%
left: 0
opacity: 0
position: absolute
top: 0
-webkit-transform: scale(1.1)
-moz-transform: scale(1.1)
-ms-transform: scale(1.1)
-o-transform: scale(1.1)
transform: scale(1.1)
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 100%
float: left
height: 100%
position: relative
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 100%
.gallery-info
left: 0
opacity: 0
padding: 0 40px
position: absolute
top: 50%
-webkit-transform: scale(1.3) translateY(-50%)
-moz-transform: scale(1.3) translateY(-50%)
-ms-transform: scale(1.3) translateY(-50%)
-o-transform: scale(1.3) translateY(-50%)
transform: scale(1.3) translateY(-50%)
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
.gallery-padding:hover .gallery-info
opacity: 1
-webkit-transform: scale(1) translateY(-50%)
-moz-transform: scale(1) translateY(-50%)
-ms-transform: scale(1) translateY(-50%)
-o-transform: scale(1) translateY(-50%)
transform: scale(1) translateY(-50%)
-webkit-transition: all 0.4s ease 0.2s
-moz-transition: all 0.4s ease 0.2s
-ms-transition: all 0.4s ease 0.2s
-o-transition: all 0.4s ease 0.2s
transition: all 0.4s ease 0.2s
.gallery-info >
h3
float: left
font-size: 18px
margin: 0 0 15px
width: 100%
ul
float: left
list-style: outside none none
margin: 10px 0 0
padding: 0
width: 100%
> li
float: left
margin-right: 2px
> a
background: #efefef none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #434343
float: left
font-size: 11px
height: 30px
line-height: 30px
text-align: center
width: 30px
/* price Table
.price-table
background: #fff none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
list-style: outside none none
margin: 0
padding: 45px 0
text-align: center
width: 100%
margin-top: 30px
.price-title
color: #383838
float: left
font-family: Montserrat
font-size: 18px
padding: 0 20px
width: 100%
> i
font-size: 17px
margin-right: 8px
color: #ffb8b8
.price-rate
float: left
padding-top: 25px
width: 100%
> h3
color: #383838
display: inline-block
float: none
font-family: Montserrat
font-size: 90px
font-weight: 900
margin: 0
>
span
color: #b4b2b2
float: left
font-family: Montserrat
font-size: 30px
font-weight: normal
line-height: 59px
margin-right: 10px
i
color: #b4b2b2
display: inline
font-family: Open Sans
font-size: 14px
font-style: normal
font-weight: normal
margin-bottom: 5px
margin-left: 7px
.price-description
color: #777777
float: left
font-family: Open Sans
font-size: 13px
line-height: 24px
margin: 10px 0 40px
padding: 0 50px
width: 100%
.price-features
background: #f5f5f5 none repeat scroll 0 0
color: #868686
float: left
font-family: Open Sans
font-size: 13px
padding: 15px 0
text-align: center
width: 100%
&:nth-child(2n+1)
background: #ffffff none repeat scroll 0 0
.price-signup
float: left
margin-top: 30px
text-align: center
width: 100%
> a
background: #fff none repeat scroll 0 0
border: 1px solid #dde1e1
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
display: inline-block
font-family: Montserrat
font-size: 13px
line-height: 10px
padding: 17px 20px
.price-table
&.silver .price-title > i
color: #b8b8ff
&.gold .price-title > i
color: #ffe84c
/* Intro
.introjs-fixParent
z-index: auto !important
.introjs-showElement
z-index: 9999999 !important
.introjs-relativePosition
position: relative
.introjs-helperLayer
background-color: rgba(255, 255, 255, 0)
border: 1px solid rgba(0, 0, 0, 0.5)
position: absolute
z-index: 2147483647
-webkit-border-radius: 4px
-moz-border-radius: 4px
-ms-border-radius: 4px
-o-border-radius: 4px
border-radius: 4px
-webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4)
-moz-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4)
-ms-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4)
-o-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4)
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4)
-webkit-transition: all 0.3s ease-out
-moz-transition: all 0.3s ease-out
-ms-transition: all 0.3s ease-out
-o-transition: all 0.3s ease-out
transition: all 0.3s ease-out
.introjs-helperNumberLayer
background: none repeat scroll 0 0 #28AB7C
border: 3px solid
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4)
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4)
-ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4)
-o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4)
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4)
color: #FFFFFF
font-family: Arial,verdana,tahoma
font-size: 13px
font-weight: bold
height: 30px
left: -16px
line-height: 20px
padding: 2px
position: absolute
text-align: center
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3)
top: -16px
width: 30px
z-index: 2147483647 !important
.introjs-arrow
border: 5px solid white
content: ''
position: absolute
&.top
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF
right: 22px
top: -10px
&.right
right: -10px
top: 10px
border-top-color: transparent
border-right-color: transparent
border-bottom-color: transparent
border-left-color: white
&.bottom
bottom: -10px
border-top-color: white
border-right-color: transparent
border-bottom-color: transparent
border-left-color: transparent
&.left
left: -10px
top: 10px
border-top-color: transparent
border-right-color: white
border-bottom-color: transparent
border-left-color: transparent
.introjs-tooltip
background-color: #ffffff
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4)
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4)
-ms-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4)
-o-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4)
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4)
font-family: open sans
font-size: 12px
padding: 10px
position: absolute
-webkit-transition: opacity 0.1s ease-out 0s
-moz-transition: opacity 0.1s ease-out 0s
-ms-transition: opacity 0.1s ease-out 0s
-o-transition: opacity 0.1s ease-out 0s
transition: opacity 0.1s ease-out 0s
-webkit-border-radius: 2px
-moz-border-radius: 2px
-ms-border-radius: 2px
-o-border-radius: 2px
border-radius: 2px
.introjs-tooltipbuttons
text-align: right
/*
*Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
*Changed by Afshin Mehrabani
.introjs-button
position: relative
overflow: visible
display: inline-block
padding: 0.3em 0.8em
border: 1px solid #d4d4d4
margin: 0
text-decoration: none
text-shadow: 1px 1px 0 #fff
font: 11px/normal sans-serif
color: #333
white-space: nowrap
cursor: pointer
outline: none
background-color: #ececec
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec))
background-image: -moz-linear-gradient(#f4f4f4, #ececec)
background-image: -o-linear-gradient(#f4f4f4, #ececec)
background-image: linear-gradient(#f4f4f4, #ececec)
-webkit-background-clip: padding
-moz-background-clip: padding
-o-background-clip: padding-box
/*background-clip: padding-box;
/* commented out due to Opera 11.10 bug
-webkit-border-radius: 0.2em
-moz-border-radius: 0.2em
border-radius: 0.2em
/* IE hacks
zoom: 1
*display: inline
margin-top: 10px
&:hover
border-color: #bcbcbc
text-decoration: none
-webkit-box-shadow: 0px 1px 1px #e3e3e3
-moz-box-shadow: 0px 1px 1px #e3e3e3
-ms-box-shadow: 0px 1px 1px #e3e3e3
-o-box-shadow: 0px 1px 1px #e3e3e3
box-shadow: 0px 1px 1px #e3e3e3
&:focus, &:active
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4))
background-image: -moz-linear-gradient(#ececec, #f4f4f4)
background-image: -o-linear-gradient(#ececec, #f4f4f4)
background-image: linear-gradient(#ececec, #f4f4f4)
&::-moz-focus-inner
padding: 0
border: 0
/* overrides extra padding on button elements in Firefox
.introjs-skipbutton
margin-right: 5px
color: #7a7a7a
.introjs-prevbutton
-webkit-border-radius: 0.2em 0 0 0.2em
-moz-border-radius: 0.2em 0 0 0.2em
border-radius: 0.2em 0 0 0.2em
border-right: none
.introjs-nextbutton
-webkit-border-radius: 0 0.2em 0.2em 0
-moz-border-radius: 0 0.2em 0.2em 0
border-radius: 0 0.2em 0.2em 0
.introjs-disabled
color: #9a9a9a
border-color: #d4d4d4
-webkit-box-shadow: none
-moz-box-shadow: none
-ms-box-shadow: none
-o-box-shadow: none
box-shadow: none
cursor: default
background-color: #f4f4f4
background-image: none
text-decoration: none
&:hover, &:focus
color: #9a9a9a
border-color: #d4d4d4
-webkit-box-shadow: none
-moz-box-shadow: none
-ms-box-shadow: none
-o-box-shadow: none
box-shadow: none
cursor: default
background-color: #f4f4f4
background-image: none
text-decoration: none
.introjs-tooltiptext
color: #434343
font-family: open sans
font-size: 13px
font-weight: 500
letter-spacing: 0.25px
width: 181px
#tourbtn
position: fixed
right: 15px
bottom: 35px
a
background: #bac081
padding: 8px 15px
padding: 8px 15px
font-size: 12px
line-height: 22px
font-weight: bold
color: #454a50
text-decoration: none
-webkit-border-radius: 4px
-moz-border-radius: 4px
border-radius: 4px
&:hover
background: #cacf96
@-webkit-keyframes spinner
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@-moz-keyframes spinner
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@-o-keyframes spinner
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@keyframes spinner
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
/* :not(:required) hides this rule from IE9 and below
.spinner:not(:required)
-webkit-animation: spinner 1500ms infinite linear
-moz-animation: spinner 1500ms infinite linear
-ms-animation: spinner 1500ms infinite linear
-o-animation: spinner 1500ms infinite linear
animation: spinner 1500ms infinite linear
-webkit-border-radius: 0.5em
-moz-border-radius: 0.5em
-ms-border-radius: 0.5em
-o-border-radius: 0.5em
border-radius: 0.5em
-webkit-box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0
-moz-box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0
box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0
display: inline-block
font-size: 10px
width: 1em
height: 1em
margin: 1.5em
overflow: hidden
text-indent: 100%
@-webkit-keyframes spinner
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@-moz-keyframes spinner
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@-o-keyframes spinner
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@keyframes spinner
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
/* :not(:required) hides this rule from IE9 and below
.refreshing:not(:required)
-webkit-animation: spinner 1000ms infinite linear
-moz-animation: spinner 1000ms infinite linear
-ms-animation: spinner 1000ms infinite linear
-o-animation: spinner 1000ms infinite linear
animation: spinner 1000ms infinite linear
-webkit-border-radius: 2.4em
-moz-border-radius: 2.4em
-ms-border-radius: 2.4em
-o-border-radius: 2.4em
border-radius: 2.4em
border: 0.4em solid #99aacc
border-left-color: transparent
color: transparent
display: inline-block
font-size: 10px
line-height: 1.2
width: 3em
height: 3em
text-indent: 100%
&:after
display: block
border: 0.5em solid transparent
border-top-color: #99aacc
border-left-color: #99aacc
content: ''
width: 0
height: 0
overflow: hidden
margin-left: -0.2em
margin-top: 1em
@-webkit-keyframes throbber
0%
background: #dde2e7
10%
background: #6b9dc8
40%
background: #dde2e7
@-moz-keyframes throbber
0%
background: #dde2e7
10%
background: #6b9dc8
40%
background: #dde2e7
@-o-keyframes throbber
0%
background: #dde2e7
10%
background: #6b9dc8
40%
background: #dde2e7
@keyframes throbber
0%
background: #dde2e7
10%
background: #6b9dc8
40%
background: #dde2e7
/* :not(:required) hides these rules from IE9 and below
.throbber:not(:required)
-webkit-animation: throbber 2000ms 300ms infinite ease-out
-moz-animation: throbber 2000ms 300ms infinite ease-out
-ms-animation: throbber 2000ms 300ms infinite ease-out
-o-animation: throbber 2000ms 300ms infinite ease-out
animation: throbber 2000ms 300ms infinite ease-out
background: #dde2e7
display: inline-block
position: relative
text-indent: -9999px
width: 0.9em
height: 1.5em
margin: 0 1.6em
&:before, &:after
background: #dde2e7
content: '\x200B'
display: inline-block
width: 0.9em
height: 1.5em
position: absolute
top: 0
&:before
-webkit-animation: throbber 2000ms 150ms infinite ease-out
-moz-animation: throbber 2000ms 150ms infinite ease-out
-ms-animation: throbber 2000ms 150ms infinite ease-out
-o-animation: throbber 2000ms 150ms infinite ease-out
animation: throbber 2000ms 150ms infinite ease-out
left: -1.6em
&:after
-webkit-animation: throbber 2000ms 450ms infinite ease-out
-moz-animation: throbber 2000ms 450ms infinite ease-out
-ms-animation: throbber 2000ms 450ms infinite ease-out
-o-animation: throbber 2000ms 450ms infinite ease-out
animation: throbber 2000ms 450ms infinite ease-out
right: -1.6em
/* Styles for old versions of IE
.heartbeat
font-family: sans-serif
font-weight: 100
&:not(:required)
-webkit-animation: heartbeat 1300ms ease 0s infinite normal
-moz-animation: heartbeat 1300ms ease 0s infinite normal
-ms-animation: heartbeat 1300ms ease 0s infinite normal
-o-animation: heartbeat 1300ms ease 0s infinite normal
animation: heartbeat 1300ms ease 0s infinite normal
display: inline-block
position: relative
overflow: hidden
text-indent: -9999px
width: 36px
height: 36px
-webkit-transform: rotate(45deg) scale(1)
-moz-transform: rotate(45deg) scale(1)
-ms-transform: rotate(45deg) scale(1)
-o-transform: rotate(45deg) scale(1)
transform: rotate(45deg) scale(1)
-webkit-transform-origin: 50% 50%
-moz-transform-origin: 50% 50%
-ms-transform-origin: 50% 50%
-o-transform-origin: 50% 50%
transform-origin: 50% 50%
&:after
position: absolute
content: ""
background: #ee8877
&:before
position: absolute
content: ""
background: #ee8877
-moz-border-radius-topleft: 12px
-webkit-border-top-left-radius: 12px
border-top-left-radius: 12px
-moz-border-radius-bottomleft: 12px
-webkit-border-bottom-left-radius: 12px
border-bottom-left-radius: 12px
top: 12px
left: 0
width: 36px
height: 24px
&:after
-moz-border-radius-topleft: 12px
-webkit-border-top-left-radius: 12px
border-top-left-radius: 12px
-moz-border-radius-topright: 12px
-webkit-border-top-right-radius: 12px
border-top-right-radius: 12px
top: 0
left: 12px
width: 24px
height: 12px
@-webkit-keyframes heartbeat
0%
-webkit-transform: rotate(45deg) scale(1)
-moz-transform: rotate(45deg) scale(1)
-ms-transform: rotate(45deg) scale(1)
-o-transform: rotate(45deg) scale(1)
transform: rotate(45deg) scale(1)
14%
-webkit-transform: rotate(45deg) scale(1.3)
-moz-transform: rotate(45deg) scale(1.3)
-ms-transform: rotate(45deg) scale(1.3)
-o-transform: rotate(45deg) scale(1.3)
transform: rotate(45deg) scale(1.3)
28%
-webkit-transform: rotate(45deg) scale(1)
-moz-transform: rotate(45deg) scale(1)
-ms-transform: rotate(45deg) scale(1)
-o-transform: rotate(45deg) scale(1)
transform: rotate(45deg) scale(1)
42%
-webkit-transform: rotate(45deg) scale(1.3)
-moz-transform: rotate(45deg) scale(1.3)
-ms-transform: rotate(45deg) scale(1.3)
-o-transform: rotate(45deg) scale(1.3)
transform: rotate(45deg) scale(1.3)
70%
-webkit-transform: rotate(45deg) scale(1)
-moz-transform: rotate(45deg) scale(1)
-ms-transform: rotate(45deg) scale(1)
-o-transform: rotate(45deg) scale(1)
transform: rotate(45deg) scale(1)
@-moz-keyframes heartbeat
0%
-webkit-transform: rotate(45deg) scale(1)
-moz-transform: rotate(45deg) scale(1)
-ms-transform: rotate(45deg) scale(1)
-o-transform: rotate(45deg) scale(1)
transform: rotate(45deg) scale(1)
14%
-webkit-transform: rotate(45deg) scale(1.3)
-moz-transform: rotate(45deg) scale(1.3)
-ms-transform: rotate(45deg) scale(1.3)
-o-transform: rotate(45deg) scale(1.3)
transform: rotate(45deg) scale(1.3)
28%
-webkit-transform: rotate(45deg) scale(1)
-moz-transform: rotate(45deg) scale(1)
-ms-transform: rotate(45deg) scale(1)
-o-transform: rotate(45deg) scale(1)
transform: rotate(45deg) scale(1)
42%
-webkit-transform: rotate(45deg) scale(1.3)
-moz-transform: rotate(45deg) scale(1.3)
-ms-transform: rotate(45deg) scale(1.3)
-o-transform: rotate(45deg) scale(1.3)
transform: rotate(45deg) scale(1.3)
70%
-webkit-transform: rotate(45deg) scale(1)
-moz-transform: rotate(45deg) scale(1)
-ms-transform: rotate(45deg) scale(1)
-o-transform: rotate(45deg) scale(1)
transform: rotate(45deg) scale(1)
@-o-keyframes heartbeat
0%
-webkit-transform: rotate(45deg) scale(1)
-moz-transform: rotate(45deg) scale(1)
-ms-transform: rotate(45deg) scale(1)
-o-transform: rotate(45deg) scale(1)
transform: rotate(45deg) scale(1)
14%
-webkit-transform: rotate(45deg) scale(1.3)
-moz-transform: rotate(45deg) scale(1.3)
-ms-transform: rotate(45deg) scale(1.3)
-o-transform: rotate(45deg) scale(1.3)
transform: rotate(45deg) scale(1.3)
28%
-webkit-transform: rotate(45deg) scale(1)
-moz-transform: rotate(45deg) scale(1)
-ms-transform: rotate(45deg) scale(1)
-o-transform: rotate(45deg) scale(1)
transform: rotate(45deg) scale(1)
42%
-webkit-transform: rotate(45deg) scale(1.3)
-moz-transform: rotate(45deg) scale(1.3)
-ms-transform: rotate(45deg) scale(1.3)
-o-transform: rotate(45deg) scale(1.3)
transform: rotate(45deg) scale(1.3)
70%
-webkit-transform: rotate(45deg) scale(1)
-moz-transform: rotate(45deg) scale(1)
-ms-transform: rotate(45deg) scale(1)
-o-transform: rotate(45deg) scale(1)
transform: rotate(45deg) scale(1)
@keyframes heartbeat
0%
-webkit-transform: rotate(45deg) scale(1)
-moz-transform: rotate(45deg) scale(1)
-ms-transform: rotate(45deg) scale(1)
-o-transform: rotate(45deg) scale(1)
transform: rotate(45deg) scale(1)
14%
-webkit-transform: rotate(45deg) scale(1.3)
-moz-transform: rotate(45deg) scale(1.3)
-ms-transform: rotate(45deg) scale(1.3)
-o-transform: rotate(45deg) scale(1.3)
transform: rotate(45deg) scale(1.3)
28%
-webkit-transform: rotate(45deg) scale(1)
-moz-transform: rotate(45deg) scale(1)
-ms-transform: rotate(45deg) scale(1)
-o-transform: rotate(45deg) scale(1)
transform: rotate(45deg) scale(1)
42%
-webkit-transform: rotate(45deg) scale(1.3)
-moz-transform: rotate(45deg) scale(1.3)
-ms-transform: rotate(45deg) scale(1.3)
-o-transform: rotate(45deg) scale(1.3)
transform: rotate(45deg) scale(1.3)
70%
-webkit-transform: rotate(45deg) scale(1)
-moz-transform: rotate(45deg) scale(1)
-ms-transform: rotate(45deg) scale(1)
-o-transform: rotate(45deg) scale(1)
transform: rotate(45deg) scale(1)
/* :not(:required) hides this rule from IE9 and below
@-webkit-keyframes gauge
0%
-webkit-transform: rotate(-50deg)
-moz-transform: rotate(-50deg)
-ms-transform: rotate(-50deg)
-o-transform: rotate(-50deg)
transform: rotate(-50deg)
10%
-webkit-transform: rotate(20deg)
-moz-transform: rotate(20deg)
-ms-transform: rotate(20deg)
-o-transform: rotate(20deg)
transform: rotate(20deg)
20%
-webkit-transform: rotate(60deg)
-moz-transform: rotate(60deg)
-ms-transform: rotate(60deg)
-o-transform: rotate(60deg)
transform: rotate(60deg)
24%
-webkit-transform: rotate(60deg)
-moz-transform: rotate(60deg)
-ms-transform: rotate(60deg)
-o-transform: rotate(60deg)
transform: rotate(60deg)
40%
-webkit-transform: rotate(-20deg)
-moz-transform: rotate(-20deg)
-ms-transform: rotate(-20deg)
-o-transform: rotate(-20deg)
transform: rotate(-20deg)
54%
-webkit-transform: rotate(70deg)
-moz-transform: rotate(70deg)
-ms-transform: rotate(70deg)
-o-transform: rotate(70deg)
transform: rotate(70deg)
56%
-webkit-transform: rotate(78deg)
-moz-transform: rotate(78deg)
-ms-transform: rotate(78deg)
-o-transform: rotate(78deg)
transform: rotate(78deg)
58%
-webkit-transform: rotate(73deg)
-moz-transform: rotate(73deg)
-ms-transform: rotate(73deg)
-o-transform: rotate(73deg)
transform: rotate(73deg)
60%
-webkit-transform: rotate(75deg)
-moz-transform: rotate(75deg)
-ms-transform: rotate(75deg)
-o-transform: rotate(75deg)
transform: rotate(75deg)
62%
-webkit-transform: rotate(70deg)
-moz-transform: rotate(70deg)
-ms-transform: rotate(70deg)
-o-transform: rotate(70deg)
transform: rotate(70deg)
70%
-webkit-transform: rotate(-20deg)
-moz-transform: rotate(-20deg)
-ms-transform: rotate(-20deg)
-o-transform: rotate(-20deg)
transform: rotate(-20deg)
80%
-webkit-transform: rotate(20deg)
-moz-transform: rotate(20deg)
-ms-transform: rotate(20deg)
-o-transform: rotate(20deg)
transform: rotate(20deg)
83%
-webkit-transform: rotate(25deg)
-moz-transform: rotate(25deg)
-ms-transform: rotate(25deg)
-o-transform: rotate(25deg)
transform: rotate(25deg)
86%
-webkit-transform: rotate(20deg)
-moz-transform: rotate(20deg)
-ms-transform: rotate(20deg)
-o-transform: rotate(20deg)
transform: rotate(20deg)
89%
-webkit-transform: rotate(25deg)
-moz-transform: rotate(25deg)
-ms-transform: rotate(25deg)
-o-transform: rotate(25deg)
transform: rotate(25deg)
100%
-webkit-transform: rotate(-50deg)
-moz-transform: rotate(-50deg)
-ms-transform: rotate(-50deg)
-o-transform: rotate(-50deg)
transform: rotate(-50deg)
@-moz-keyframes gauge
0%
-webkit-transform: rotate(-50deg)
-moz-transform: rotate(-50deg)
-ms-transform: rotate(-50deg)
-o-transform: rotate(-50deg)
transform: rotate(-50deg)
10%
-webkit-transform: rotate(20deg)
-moz-transform: rotate(20deg)
-ms-transform: rotate(20deg)
-o-transform: rotate(20deg)
transform: rotate(20deg)
20%
-webkit-transform: rotate(60deg)
-moz-transform: rotate(60deg)
-ms-transform: rotate(60deg)
-o-transform: rotate(60deg)
transform: rotate(60deg)
24%
-webkit-transform: rotate(60deg)
-moz-transform: rotate(60deg)
-ms-transform: rotate(60deg)
-o-transform: rotate(60deg)
transform: rotate(60deg)
40%
-webkit-transform: rotate(-20deg)
-moz-transform: rotate(-20deg)
-ms-transform: rotate(-20deg)
-o-transform: rotate(-20deg)
transform: rotate(-20deg)
54%
-webkit-transform: rotate(70deg)
-moz-transform: rotate(70deg)
-ms-transform: rotate(70deg)
-o-transform: rotate(70deg)
transform: rotate(70deg)
56%
-webkit-transform: rotate(78deg)
-moz-transform: rotate(78deg)
-ms-transform: rotate(78deg)
-o-transform: rotate(78deg)
transform: rotate(78deg)
58%
-webkit-transform: rotate(73deg)
-moz-transform: rotate(73deg)
-ms-transform: rotate(73deg)
-o-transform: rotate(73deg)
transform: rotate(73deg)
60%
-webkit-transform: rotate(75deg)
-moz-transform: rotate(75deg)
-ms-transform: rotate(75deg)
-o-transform: rotate(75deg)
transform: rotate(75deg)
62%
-webkit-transform: rotate(70deg)
-moz-transform: rotate(70deg)
-ms-transform: rotate(70deg)
-o-transform: rotate(70deg)
transform: rotate(70deg)
70%
-webkit-transform: rotate(-20deg)
-moz-transform: rotate(-20deg)
-ms-transform: rotate(-20deg)
-o-transform: rotate(-20deg)
transform: rotate(-20deg)
80%
-webkit-transform: rotate(20deg)
-moz-transform: rotate(20deg)
-ms-transform: rotate(20deg)
-o-transform: rotate(20deg)
transform: rotate(20deg)
83%
-webkit-transform: rotate(25deg)
-moz-transform: rotate(25deg)
-ms-transform: rotate(25deg)
-o-transform: rotate(25deg)
transform: rotate(25deg)
86%
-webkit-transform: rotate(20deg)
-moz-transform: rotate(20deg)
-ms-transform: rotate(20deg)
-o-transform: rotate(20deg)
transform: rotate(20deg)
89%
-webkit-transform: rotate(25deg)
-moz-transform: rotate(25deg)
-ms-transform: rotate(25deg)
-o-transform: rotate(25deg)
transform: rotate(25deg)
100%
-webkit-transform: rotate(-50deg)
-moz-transform: rotate(-50deg)
-ms-transform: rotate(-50deg)
-o-transform: rotate(-50deg)
transform: rotate(-50deg)
@-o-keyframes gauge
0%
-webkit-transform: rotate(-50deg)
-moz-transform: rotate(-50deg)
-ms-transform: rotate(-50deg)
-o-transform: rotate(-50deg)
transform: rotate(-50deg)
10%
-webkit-transform: rotate(20deg)
-moz-transform: rotate(20deg)
-ms-transform: rotate(20deg)
-o-transform: rotate(20deg)
transform: rotate(20deg)
20%
-webkit-transform: rotate(60deg)
-moz-transform: rotate(60deg)
-ms-transform: rotate(60deg)
-o-transform: rotate(60deg)
transform: rotate(60deg)
24%
-webkit-transform: rotate(60deg)
-moz-transform: rotate(60deg)
-ms-transform: rotate(60deg)
-o-transform: rotate(60deg)
transform: rotate(60deg)
40%
-webkit-transform: rotate(-20deg)
-moz-transform: rotate(-20deg)
-ms-transform: rotate(-20deg)
-o-transform: rotate(-20deg)
transform: rotate(-20deg)
54%
-webkit-transform: rotate(70deg)
-moz-transform: rotate(70deg)
-ms-transform: rotate(70deg)
-o-transform: rotate(70deg)
transform: rotate(70deg)
56%
-webkit-transform: rotate(78deg)
-moz-transform: rotate(78deg)
-ms-transform: rotate(78deg)
-o-transform: rotate(78deg)
transform: rotate(78deg)
58%
-webkit-transform: rotate(73deg)
-moz-transform: rotate(73deg)
-ms-transform: rotate(73deg)
-o-transform: rotate(73deg)
transform: rotate(73deg)
60%
-webkit-transform: rotate(75deg)
-moz-transform: rotate(75deg)
-ms-transform: rotate(75deg)
-o-transform: rotate(75deg)
transform: rotate(75deg)
62%
-webkit-transform: rotate(70deg)
-moz-transform: rotate(70deg)
-ms-transform: rotate(70deg)
-o-transform: rotate(70deg)
transform: rotate(70deg)
70%
-webkit-transform: rotate(-20deg)
-moz-transform: rotate(-20deg)
-ms-transform: rotate(-20deg)
-o-transform: rotate(-20deg)
transform: rotate(-20deg)
80%
-webkit-transform: rotate(20deg)
-moz-transform: rotate(20deg)
-ms-transform: rotate(20deg)
-o-transform: rotate(20deg)
transform: rotate(20deg)
83%
-webkit-transform: rotate(25deg)
-moz-transform: rotate(25deg)
-ms-transform: rotate(25deg)
-o-transform: rotate(25deg)
transform: rotate(25deg)
86%
-webkit-transform: rotate(20deg)
-moz-transform: rotate(20deg)
-ms-transform: rotate(20deg)
-o-transform: rotate(20deg)
transform: rotate(20deg)
89%
-webkit-transform: rotate(25deg)
-moz-transform: rotate(25deg)
-ms-transform: rotate(25deg)
-o-transform: rotate(25deg)
transform: rotate(25deg)
100%
-webkit-transform: rotate(-50deg)
-moz-transform: rotate(-50deg)
-ms-transform: rotate(-50deg)
-o-transform: rotate(-50deg)
transform: rotate(-50deg)
@keyframes gauge
0%
-webkit-transform: rotate(-50deg)
-moz-transform: rotate(-50deg)
-ms-transform: rotate(-50deg)
-o-transform: rotate(-50deg)
transform: rotate(-50deg)
10%
-webkit-transform: rotate(20deg)
-moz-transform: rotate(20deg)
-ms-transform: rotate(20deg)
-o-transform: rotate(20deg)
transform: rotate(20deg)
20%
-webkit-transform: rotate(60deg)
-moz-transform: rotate(60deg)
-ms-transform: rotate(60deg)
-o-transform: rotate(60deg)
transform: rotate(60deg)
24%
-webkit-transform: rotate(60deg)
-moz-transform: rotate(60deg)
-ms-transform: rotate(60deg)
-o-transform: rotate(60deg)
transform: rotate(60deg)
40%
-webkit-transform: rotate(-20deg)
-moz-transform: rotate(-20deg)
-ms-transform: rotate(-20deg)
-o-transform: rotate(-20deg)
transform: rotate(-20deg)
54%
-webkit-transform: rotate(70deg)
-moz-transform: rotate(70deg)
-ms-transform: rotate(70deg)
-o-transform: rotate(70deg)
transform: rotate(70deg)
56%
-webkit-transform: rotate(78deg)
-moz-transform: rotate(78deg)
-ms-transform: rotate(78deg)
-o-transform: rotate(78deg)
transform: rotate(78deg)
58%
-webkit-transform: rotate(73deg)
-moz-transform: rotate(73deg)
-ms-transform: rotate(73deg)
-o-transform: rotate(73deg)
transform: rotate(73deg)
60%
-webkit-transform: rotate(75deg)
-moz-transform: rotate(75deg)
-ms-transform: rotate(75deg)
-o-transform: rotate(75deg)
transform: rotate(75deg)
62%
-webkit-transform: rotate(70deg)
-moz-transform: rotate(70deg)
-ms-transform: rotate(70deg)
-o-transform: rotate(70deg)
transform: rotate(70deg)
70%
-webkit-transform: rotate(-20deg)
-moz-transform: rotate(-20deg)
-ms-transform: rotate(-20deg)
-o-transform: rotate(-20deg)
transform: rotate(-20deg)
80%
-webkit-transform: rotate(20deg)
-moz-transform: rotate(20deg)
-ms-transform: rotate(20deg)
-o-transform: rotate(20deg)
transform: rotate(20deg)
83%
-webkit-transform: rotate(25deg)
-moz-transform: rotate(25deg)
-ms-transform: rotate(25deg)
-o-transform: rotate(25deg)
transform: rotate(25deg)
86%
-webkit-transform: rotate(20deg)
-moz-transform: rotate(20deg)
-ms-transform: rotate(20deg)
-o-transform: rotate(20deg)
transform: rotate(20deg)
89%
-webkit-transform: rotate(25deg)
-moz-transform: rotate(25deg)
-ms-transform: rotate(25deg)
-o-transform: rotate(25deg)
transform: rotate(25deg)
100%
-webkit-transform: rotate(-50deg)
-moz-transform: rotate(-50deg)
-ms-transform: rotate(-50deg)
-o-transform: rotate(-50deg)
transform: rotate(-50deg)
/* Styles for old versions of IE
.gauge
font-family: sans-serif
font-weight: 100
&:not(:required)
background: #66ccaa
-moz-border-radius-topleft: 32px
-webkit-border-top-left-radius: 32px
border-top-left-radius: 32px
-moz-border-radius-topright: 32px
-webkit-border-top-right-radius: 32px
border-top-right-radius: 32px
display: inline-block
width: 64px
height: 32px
overflow: hidden
position: relative
text-indent: -9999px
&::before
-webkit-animation: gauge 4000ms infinite ease
-moz-animation: gauge 4000ms infinite ease
-ms-animation: gauge 4000ms infinite ease
-o-animation: gauge 4000ms infinite ease
animation: gauge 4000ms infinite ease
background: white
-webkit-border-radius: 2px
-moz-border-radius: 2px
-ms-border-radius: 2px
-o-border-radius: 2px
border-radius: 2px
content: ''
position: absolute
left: 30px
top: 5.33333px
width: 4px
height: 26.66667px
-webkit-transform-origin: 50% 100%
-moz-transform-origin: 50% 100%
-ms-transform-origin: 50% 100%
-o-transform-origin: 50% 100%
transform-origin: 50% 100%
&::after
content: ''
background: white
-webkit-border-radius: 8px
-moz-border-radius: 8px
-ms-border-radius: 8px
-o-border-radius: 8px
border-radius: 8px
position: absolute
left: 25.6px
top: 25.6px
width: 12.8px
height: 12.8px
/* :not(:required) hides this rule from IE9 and below
@-webkit-keyframes timer
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@-moz-keyframes timer
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@-o-keyframes timer
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@keyframes timer
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
/* Styles for old versions of IE
.timer
font-family: sans-serif
font-weight: 100
&:not(:required)
border: 6px solid #cc88dd
-webkit-border-radius: 24px
-moz-border-radius: 24px
-ms-border-radius: 24px
-o-border-radius: 24px
border-radius: 24px
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
display: inline-block
overflow: hidden
position: relative
text-indent: -9999px
width: 48px
height: 48px
&::before
-webkit-animation: timer 1250ms infinite linear
-moz-animation: timer 1250ms infinite linear
-ms-animation: timer 1250ms infinite linear
-o-animation: timer 1250ms infinite linear
animation: timer 1250ms infinite linear
-webkit-transform-origin: 3px 3px
-moz-transform-origin: 3px 3px
-ms-transform-origin: 3px 3px
-o-transform-origin: 3px 3px
transform-origin: 3px 3px
background: #cc88dd
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
content: ''
display: block
position: absolute
width: 6px
height: 19.2px
left: 15px
top: 15px
&::after
-webkit-animation: timer 15000ms infinite linear
-moz-animation: timer 15000ms infinite linear
-ms-animation: timer 15000ms infinite linear
-o-animation: timer 15000ms infinite linear
animation: timer 15000ms infinite linear
-webkit-transform-origin: 3px 3px
-moz-transform-origin: 3px 3px
-ms-transform-origin: 3px 3px
-o-transform-origin: 3px 3px
transform-origin: 3px 3px
background: #cc88dd
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
content: ''
display: block
position: absolute
width: 6px
height: 16px
left: 15px
top: 15px
/* :not(:required) hides this rule from IE9 and below
@-webkit-keyframes three-quarters
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@-moz-keyframes three-quarters
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@-o-keyframes three-quarters
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@keyframes three-quarters
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
/* Styles for old versions of IE
.three-quarters
font-family: sans-serif
font-weight: 100
&:not(:required)
-webkit-animation: three-quarters 1250ms infinite linear
-moz-animation: three-quarters 1250ms infinite linear
-ms-animation: three-quarters 1250ms infinite linear
-o-animation: three-quarters 1250ms infinite linear
animation: three-quarters 1250ms infinite linear
border: 8px solid #3388ee
border-right-color: transparent
border-radius: 16px
box-sizing: border-box
display: inline-block
position: relative
overflow: hidden
text-indent: -9999px
width: 32px
height: 32px
/* :not(:required) hides this rule from IE9 and below
@-webkit-keyframes wobblebar
0%
left: 4px
3%
left: 104px
6%
left: 4px
9%
left: 104px
12%
left: 4px
15%
left: 104px
18%
left: 32px
27%
left: 32px
30%
left: 104px
33%
left: 4px
36%
left: 104px
39%
left: 4px
42%
left: 104px
45%
left: 4px
48%
left: 104px
51%
left: 52px
63%
left: 52px
66%
left: 4px
69%
left: 104px
72%
left: 4px
75%
left: 104px
78%
left: 4px
81%
left: 104px
84%
left: 72px
94%
left: 72px
97%
left: 104px
@-moz-keyframes wobblebar
0%
left: 4px
3%
left: 104px
6%
left: 4px
9%
left: 104px
12%
left: 4px
15%
left: 104px
18%
left: 32px
27%
left: 32px
30%
left: 104px
33%
left: 4px
36%
left: 104px
39%
left: 4px
42%
left: 104px
45%
left: 4px
48%
left: 104px
51%
left: 52px
63%
left: 52px
66%
left: 4px
69%
left: 104px
72%
left: 4px
75%
left: 104px
78%
left: 4px
81%
left: 104px
84%
left: 72px
94%
left: 72px
97%
left: 104px
@-o-keyframes wobblebar
0%
left: 4px
3%
left: 104px
6%
left: 4px
9%
left: 104px
12%
left: 4px
15%
left: 104px
18%
left: 32px
27%
left: 32px
30%
left: 104px
33%
left: 4px
36%
left: 104px
39%
left: 4px
42%
left: 104px
45%
left: 4px
48%
left: 104px
51%
left: 52px
63%
left: 52px
66%
left: 4px
69%
left: 104px
72%
left: 4px
75%
left: 104px
78%
left: 4px
81%
left: 104px
84%
left: 72px
94%
left: 72px
97%
left: 104px
@keyframes wobblebar
0%
left: 4px
3%
left: 104px
6%
left: 4px
9%
left: 104px
12%
left: 4px
15%
left: 104px
18%
left: 32px
27%
left: 32px
30%
left: 104px
33%
left: 4px
36%
left: 104px
39%
left: 4px
42%
left: 104px
45%
left: 4px
48%
left: 104px
51%
left: 52px
63%
left: 52px
66%
left: 4px
69%
left: 104px
72%
left: 4px
75%
left: 104px
78%
left: 4px
81%
left: 104px
84%
left: 72px
94%
left: 72px
97%
left: 104px
/* Styles for old versions of IE
.wobblebar
font-family: sans-serif
font-weight: 100
&:not(:required)
background: #aa99dd
-webkit-border-radius: 10.66667px
-moz-border-radius: 10.66667px
-ms-border-radius: 10.66667px
-o-border-radius: 10.66667px
border-radius: 10.66667px
display: inline-block
overflow: hidden
text-indent: -9999px
width: 128px
height: 21.33333px
position: relative
&::after
-webkit-animation: wobblebar 15000ms infinite ease
-moz-animation: wobblebar 15000ms infinite ease
-ms-animation: wobblebar 15000ms infinite ease
-o-animation: wobblebar 15000ms infinite ease
animation: wobblebar 15000ms infinite ease
background: white
display: block
-webkit-border-radius: 7.11111px
-moz-border-radius: 7.11111px
-ms-border-radius: 7.11111px
-o-border-radius: 7.11111px
border-radius: 7.11111px
content: ''
position: absolute
top: 3.55556px
left: 4px
width: 21.33333px
height: 14.22222px
/* :not(:required) hides this rule from IE9 and below
@-webkit-keyframes atebits
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
3%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
10%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
13%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
20%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
23%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
30%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
33%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
40%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
43%
-webkit-transform: rotate(270deg)
-moz-transform: rotate(270deg)
-ms-transform: rotate(270deg)
-o-transform: rotate(270deg)
transform: rotate(270deg)
50%
-webkit-transform: rotate(270deg)
-moz-transform: rotate(270deg)
-ms-transform: rotate(270deg)
-o-transform: rotate(270deg)
transform: rotate(270deg)
53%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
60%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
63%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
70%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
73%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
80%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
83%
-webkit-transform: rotate(-90deg)
-moz-transform: rotate(-90deg)
-ms-transform: rotate(-90deg)
-o-transform: rotate(-90deg)
transform: rotate(-90deg)
90%
-webkit-transform: rotate(-90deg)
-moz-transform: rotate(-90deg)
-ms-transform: rotate(-90deg)
-o-transform: rotate(-90deg)
transform: rotate(-90deg)
93%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
@-moz-keyframes atebits
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
3%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
10%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
13%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
20%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
23%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
30%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
33%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
40%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
43%
-webkit-transform: rotate(270deg)
-moz-transform: rotate(270deg)
-ms-transform: rotate(270deg)
-o-transform: rotate(270deg)
transform: rotate(270deg)
50%
-webkit-transform: rotate(270deg)
-moz-transform: rotate(270deg)
-ms-transform: rotate(270deg)
-o-transform: rotate(270deg)
transform: rotate(270deg)
53%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
60%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
63%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
70%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
73%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
80%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
83%
-webkit-transform: rotate(-90deg)
-moz-transform: rotate(-90deg)
-ms-transform: rotate(-90deg)
-o-transform: rotate(-90deg)
transform: rotate(-90deg)
90%
-webkit-transform: rotate(-90deg)
-moz-transform: rotate(-90deg)
-ms-transform: rotate(-90deg)
-o-transform: rotate(-90deg)
transform: rotate(-90deg)
93%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
@-o-keyframes atebits
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
3%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
10%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
13%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
20%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
23%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
30%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
33%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
40%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
43%
-webkit-transform: rotate(270deg)
-moz-transform: rotate(270deg)
-ms-transform: rotate(270deg)
-o-transform: rotate(270deg)
transform: rotate(270deg)
50%
-webkit-transform: rotate(270deg)
-moz-transform: rotate(270deg)
-ms-transform: rotate(270deg)
-o-transform: rotate(270deg)
transform: rotate(270deg)
53%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
60%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
63%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
70%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
73%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
80%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
83%
-webkit-transform: rotate(-90deg)
-moz-transform: rotate(-90deg)
-ms-transform: rotate(-90deg)
-o-transform: rotate(-90deg)
transform: rotate(-90deg)
90%
-webkit-transform: rotate(-90deg)
-moz-transform: rotate(-90deg)
-ms-transform: rotate(-90deg)
-o-transform: rotate(-90deg)
transform: rotate(-90deg)
93%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
@keyframes atebits
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
3%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
10%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
13%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
20%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
23%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
30%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
33%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
40%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
43%
-webkit-transform: rotate(270deg)
-moz-transform: rotate(270deg)
-ms-transform: rotate(270deg)
-o-transform: rotate(270deg)
transform: rotate(270deg)
50%
-webkit-transform: rotate(270deg)
-moz-transform: rotate(270deg)
-ms-transform: rotate(270deg)
-o-transform: rotate(270deg)
transform: rotate(270deg)
53%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
60%
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
63%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
70%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
73%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
80%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
83%
-webkit-transform: rotate(-90deg)
-moz-transform: rotate(-90deg)
-ms-transform: rotate(-90deg)
-o-transform: rotate(-90deg)
transform: rotate(-90deg)
90%
-webkit-transform: rotate(-90deg)
-moz-transform: rotate(-90deg)
-ms-transform: rotate(-90deg)
-o-transform: rotate(-90deg)
transform: rotate(-90deg)
93%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
/* Styles for old versions of IE
.atebits
font-family: sans-serif
font-weight: 100
&:not(:required)
background: rgba(0, 0, 0, 0.5)
display: inline-block
width: 9px
height: 9px
overflow: hidden
position: relative
text-indent: -9999px
-webkit-box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0
-moz-box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0
box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0
-webkit-animation: atebits 8s infinite ease-in-out
-moz-animation: atebits 8s infinite ease-in-out
-ms-animation: atebits 8s infinite ease-in-out
-o-animation: atebits 8s infinite ease-in-out
animation: atebits 8s infinite ease-in-out
-webkit-transform-origin: 50% 50%
-moz-transform-origin: 50% 50%
-ms-transform-origin: 50% 50%
-o-transform-origin: 50% 50%
transform-origin: 50% 50%
/* :not(:required) hides this rule from IE9 and below
@-webkit-keyframes whirly
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@-moz-keyframes whirly
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@-o-keyframes whirly
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
@keyframes whirly
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: rotate(360deg)
-o-transform: rotate(360deg)
transform: rotate(360deg)
/* Styles for old versions of IE
.whirly
font-family: sans-serif
font-weight: 100
&:not(:required)
overflow: hidden
position: relative
text-indent: -9999px
display: inline-block
width: 8px
height: 8px
background: transparent
-webkit-border-radius: 100%
-moz-border-radius: 100%
-ms-border-radius: 100%
-o-border-radius: 100%
border-radius: 100%
-webkit-box-shadow: #ee6666 0px 26px 0 6px, #ee6666 0.90971px 26.05079px 0 5.93333px, #ee6666 1.82297px 26.06967px 0 5.86667px, #ee6666 2.73865px 26.05647px 0 5.8px, #ee6666 3.65561px 26.01104px 0 5.73333px, #ee6666 4.57274px 25.93327px 0 5.66667px, #ee6666 5.48887px 25.8231px 0 5.6px, #ee6666 6.40287px 25.68049px 0 5.53333px, #ee6666 7.31358px 25.50548px 0 5.46667px, #ee6666 8.21985px 25.2981px 0 5.4px, #ee6666 9.12054px 25.05847px 0 5.33333px, #ee6666 10.01448px 24.78672px 0 5.26667px, #ee6666 10.90054px 24.48302px 0 5.2px, #ee6666 11.77757px 24.1476px 0 5.13333px, #ee6666 12.64443px 23.78072px 0 5.06667px, #ee6666 13.5px 23.38269px 0 5px, #ee6666 14.34315px 22.95384px 0 4.93333px, #ee6666 15.17277px 22.49455px 0 4.86667px, #ee6666 15.98776px 22.00526px 0 4.8px, #ee6666 16.78704px 21.48643px 0 4.73333px, #ee6666 17.56953px 20.93855px 0 4.66667px, #ee6666 18.33418px 20.36217px 0 4.6px, #ee6666 19.07995px 19.75787px 0 4.53333px, #ee6666 19.80582px 19.12626px 0 4.46667px, #ee6666 20.5108px 18.468px 0 4.4px, #ee6666 21.1939px 17.78379px 0 4.33333px, #ee6666 21.85416px 17.07434px 0 4.26667px, #ee6666 22.49067px 16.34043px 0 4.2px, #ee6666 23.10251px 15.58284px 0 4.13333px, #ee6666 23.68881px 14.80241px 0 4.06667px, #ee6666 24.24871px 14.0px 0 4px, #ee6666 24.7814px 13.1765px 0 3.93333px, #ee6666 25.28607px 12.33284px 0 3.86667px, #ee6666 25.76198px 11.46997px 0 3.8px, #ee6666 26.2084px 10.58888px 0 3.73333px, #ee6666 26.62462px 9.69057px 0 3.66667px, #ee6666 27.01001px 8.77608px 0 3.6px, #ee6666 27.36392px 7.84648px 0 3.53333px, #ee6666 27.68577px 6.90284px 0 3.46667px, #ee6666 27.97502px 5.94627px 0 3.4px, #ee6666 28.23116px 4.97791px 0 3.33333px, #ee6666 28.4537px 3.99891px 0 3.26667px, #ee6666 28.64223px 3.01042px 0 3.2px, #ee6666 28.79635px 2.01364px 0 3.13333px, #ee6666 28.91571px 1.00976px 0 3.06667px, #ee6666 29px 0.0px 0 3px, #ee6666 29.04896px -1.01441px 0 2.93333px, #ee6666 29.06237px -2.03224px 0 2.86667px, #ee6666 29.04004px -3.05223px 0 2.8px, #ee6666 28.98185px -4.07313px 0 2.73333px, #ee6666 28.88769px -5.09368px 0 2.66667px, #ee6666 28.75754px -6.1126px 0 2.6px, #ee6666 28.59138px -7.12863px 0 2.53333px, #ee6666 28.38926px -8.14049px 0 2.46667px, #ee6666 28.15127px -9.1469px 0 2.4px, #ee6666 27.87755px -10.1466px 0 2.33333px, #ee6666 27.56827px -11.1383px 0 2.26667px, #ee6666 27.22365px -12.12075px 0 2.2px, #ee6666 26.84398px -13.09268px 0 2.13333px, #ee6666 26.42956px -14.05285px 0 2.06667px, #ee6666 25.98076px -15.0px 0 2px, #ee6666 25.49798px -15.93291px 0 1.93333px, #ee6666 24.98167px -16.85035px 0 1.86667px, #ee6666 24.43231px -17.75111px 0 1.8px, #ee6666 23.85046px -18.63402px 0 1.73333px, #ee6666 23.23668px -19.49789px 0 1.66667px, #ee6666 22.5916px -20.34157px 0 1.6px, #ee6666 21.91589px -21.16393px 0 1.53333px, #ee6666 21.21024px -21.96384px 0 1.46667px, #ee6666 20.4754px -22.74023px 0 1.4px, #ee6666 19.71215px -23.49203px 0 1.33333px, #ee6666 18.92133px -24.2182px 0 1.26667px, #ee6666 18.10379px -24.91772px 0 1.2px, #ee6666 17.26042px -25.58963px 0 1.13333px, #ee6666 16.39217px -26.23295px 0 1.06667px, #ee6666 15.5px -26.84679px 0 1px, #ee6666 14.58492px -27.43024px 0 0.93333px, #ee6666 13.64796px -27.98245px 0 0.86667px, #ee6666 12.69018px -28.50262px 0 0.8px, #ee6666 11.7127px -28.98995px 0 0.73333px, #ee6666 10.71663px -29.4437px 0 0.66667px, #ee6666 9.70313px -29.86317px 0 0.6px, #ee6666 8.67339px -30.2477px 0 0.53333px, #ee6666 7.6286px -30.59666px 0 0.46667px, #ee6666 6.57001px -30.90946px 0 0.4px, #ee6666 5.49886px -31.18558px 0 0.33333px, #ee6666 4.41643px -31.42451px 0 0.26667px, #ee6666 3.32401px -31.6258px 0 0.2px, #ee6666 2.22291px -31.78904px 0 0.13333px, #ee6666 1.11446px -31.91388px 0 0.06667px, #ee6666 0.0px -32px 0 0px, #ee6666 -1.11911px -32.04713px 0 -0.06667px, #ee6666 -2.24151px -32.05506px 0 -0.13333px, #ee6666 -3.36582px -32.02361px 0 -0.2px, #ee6666 -4.49065px -31.95265px 0 -0.26667px, #ee6666 -5.61462px -31.84212px 0 -0.33333px, #ee6666 -6.73634px -31.69198px 0 -0.4px, #ee6666 -7.8544px -31.50227px 0 -0.46667px, #ee6666 -8.9674px -31.27305px 0 -0.53333px, #ee6666 -10.07395px -31.00444px 0 -0.6px, #ee6666 -11.17266px -30.69663px 0 -0.66667px, #ee6666 -12.26212px -30.34982px 0 -0.73333px, #ee6666 -13.34096px -29.96429px 0 -0.8px, #ee6666 -14.4078px -29.54036px 0 -0.86667px, #ee6666 -15.46126px -29.07841px 0 -0.93333px, #ee6666 -16.5px -28.57884px 0 -1px, #ee6666 -17.52266px -28.04212px 0 -1.06667px, #ee6666 -18.52792px -27.46878px 0 -1.13333px, #ee6666 -19.51447px -26.85936px 0 -1.2px, #ee6666 -20.48101px -26.21449px 0 -1.26667px, #ee6666 -21.42625px -25.53481px 0 -1.33333px, #ee6666 -22.34896px -24.82104px 0 -1.4px, #ee6666 -23.2479px -24.07391px 0 -1.46667px, #ee6666 -24.12186px -23.29421px 0 -1.53333px, #ee6666 -24.96967px -22.48279px 0 -1.6px, #ee6666 -25.79016px -21.64052px 0 -1.66667px, #ee6666 -26.58223px -20.76831px 0 -1.73333px, #ee6666 -27.34477px -19.86714px 0 -1.8px, #ee6666 -28.07674px -18.938px 0 -1.86667px, #ee6666 -28.7771px -17.98193px 0 -1.93333px, #ee6666 -29.44486px -17.0px 0 -2px, #ee6666 -30.07908px -15.99333px 0 -2.06667px, #ee6666 -30.67884px -14.96307px 0 -2.13333px, #ee6666 -31.24325px -13.91039px 0 -2.2px, #ee6666 -31.7715px -12.83652px 0 -2.26667px, #ee6666 -32.26278px -11.74269px 0 -2.33333px, #ee6666 -32.71634px -10.63018px 0 -2.4px, #ee6666 -33.13149px -9.5003px 0 -2.46667px, #ee6666 -33.50755px -8.35437px 0 -2.53333px, #ee6666 -33.84391px -7.19374px 0 -2.6px, #ee6666 -34.14px -6.0198px 0 -2.66667px, #ee6666 -34.39531px -4.83395px 0 -2.73333px, #ee6666 -34.60936px -3.63759px 0 -2.8px, #ee6666 -34.78173px -2.43218px 0 -2.86667px, #ee6666 -34.91205px -1.21916px 0 -2.93333px, #ee6666 -35px 0.0px 0 -3px, #ee6666 -35.04531px 1.22381px 0 -3.06667px, #ee6666 -35.04775px 2.45078px 0 -3.13333px, #ee6666 -35.00717px 3.6794px 0 -3.2px, #ee6666 -34.92345px 4.90817px 0 -3.26667px, #ee6666 -34.79654px 6.13557px 0 -3.33333px, #ee6666 -34.62643px 7.36007px 0 -3.4px, #ee6666 -34.41316px 8.58016px 0 -3.46667px, #ee6666 -34.15683px 9.79431px 0 -3.53333px, #ee6666 -33.85761px 11.001px 0 -3.6px, #ee6666 -33.5157px 12.19872px 0 -3.66667px, #ee6666 -33.13137px 13.38594px 0 -3.73333px, #ee6666 -32.70493px 14.56117px 0 -3.8px, #ee6666 -32.23675px 15.72291px 0 -3.86667px, #ee6666 -31.72725px 16.86968px 0 -3.93333px, #ee6666 -31.17691px 18px 0 -4px, #ee6666 -30.58627px 19.11242px 0 -4.06667px, #ee6666 -29.95589px 20.2055px 0 -4.13333px, #ee6666 -29.28642px 21.27783px 0 -4.2px, #ee6666 -28.57852px 22.32799px 0 -4.26667px, #ee6666 -27.83295px 23.35462px 0 -4.33333px, #ee6666 -27.05047px 24.35635px 0 -4.4px, #ee6666 -26.23192px 25.33188px 0 -4.46667px, #ee6666 -25.37819px 26.27988px 0 -4.53333px, #ee6666 -24.49018px 27.1991px 0 -4.6px, #ee6666 -23.56888px 28.0883px 0 -4.66667px, #ee6666 -22.6153px 28.94626px 0 -4.73333px, #ee6666 -21.6305px 29.77183px 0 -4.8px, #ee6666 -20.61558px 30.56385px 0 -4.86667px, #ee6666 -19.57168px 31.32124px 0 -4.93333px, #ee6666 -18.5px 32.04294px 0 -5px, #ee6666 -17.40175px 32.72792px 0 -5.06667px, #ee6666 -16.27818px 33.37522px 0 -5.13333px, #ee6666 -15.1306px 33.98389px 0 -5.2px, #ee6666 -13.96034px 34.55305px 0 -5.26667px, #ee6666 -12.76875px 35.08186px 0 -5.33333px, #ee6666 -11.55724px 35.56951px 0 -5.4px, #ee6666 -10.32721px 36.01527px 0 -5.46667px, #ee6666 -9.08014px 36.41843px 0 -5.53333px, #ee6666 -7.81748px 36.77835px 0 -5.6px, #ee6666 -6.54075px 37.09443px 0 -5.66667px, #ee6666 -5.25147px 37.36612px 0 -5.73333px, #ee6666 -3.95118px 37.59293px 0 -5.8px, #ee6666 -2.64145px 37.77443px 0 -5.86667px, #ee6666 -1.32385px 37.91023px 0 -5.93333px
-moz-box-shadow: #ee6666 0px 26px 0 6px, #ee6666 0.90971px 26.05079px 0 5.93333px, #ee6666 1.82297px 26.06967px 0 5.86667px, #ee6666 2.73865px 26.05647px 0 5.8px, #ee6666 3.65561px 26.01104px 0 5.73333px, #ee6666 4.57274px 25.93327px 0 5.66667px, #ee6666 5.48887px 25.8231px 0 5.6px, #ee6666 6.40287px 25.68049px 0 5.53333px, #ee6666 7.31358px 25.50548px 0 5.46667px, #ee6666 8.21985px 25.2981px 0 5.4px, #ee6666 9.12054px 25.05847px 0 5.33333px, #ee6666 10.01448px 24.78672px 0 5.26667px, #ee6666 10.90054px 24.48302px 0 5.2px, #ee6666 11.77757px 24.1476px 0 5.13333px, #ee6666 12.64443px 23.78072px 0 5.06667px, #ee6666 13.5px 23.38269px 0 5px, #ee6666 14.34315px 22.95384px 0 4.93333px, #ee6666 15.17277px 22.49455px 0 4.86667px, #ee6666 15.98776px 22.00526px 0 4.8px, #ee6666 16.78704px 21.48643px 0 4.73333px, #ee6666 17.56953px 20.93855px 0 4.66667px, #ee6666 18.33418px 20.36217px 0 4.6px, #ee6666 19.07995px 19.75787px 0 4.53333px, #ee6666 19.80582px 19.12626px 0 4.46667px, #ee6666 20.5108px 18.468px 0 4.4px, #ee6666 21.1939px 17.78379px 0 4.33333px, #ee6666 21.85416px 17.07434px 0 4.26667px, #ee6666 22.49067px 16.34043px 0 4.2px, #ee6666 23.10251px 15.58284px 0 4.13333px, #ee6666 23.68881px 14.80241px 0 4.06667px, #ee6666 24.24871px 14.0px 0 4px, #ee6666 24.7814px 13.1765px 0 3.93333px, #ee6666 25.28607px 12.33284px 0 3.86667px, #ee6666 25.76198px 11.46997px 0 3.8px, #ee6666 26.2084px 10.58888px 0 3.73333px, #ee6666 26.62462px 9.69057px 0 3.66667px, #ee6666 27.01001px 8.77608px 0 3.6px, #ee6666 27.36392px 7.84648px 0 3.53333px, #ee6666 27.68577px 6.90284px 0 3.46667px, #ee6666 27.97502px 5.94627px 0 3.4px, #ee6666 28.23116px 4.97791px 0 3.33333px, #ee6666 28.4537px 3.99891px 0 3.26667px, #ee6666 28.64223px 3.01042px 0 3.2px, #ee6666 28.79635px 2.01364px 0 3.13333px, #ee6666 28.91571px 1.00976px 0 3.06667px, #ee6666 29px 0.0px 0 3px, #ee6666 29.04896px -1.01441px 0 2.93333px, #ee6666 29.06237px -2.03224px 0 2.86667px, #ee6666 29.04004px -3.05223px 0 2.8px, #ee6666 28.98185px -4.07313px 0 2.73333px, #ee6666 28.88769px -5.09368px 0 2.66667px, #ee6666 28.75754px -6.1126px 0 2.6px, #ee6666 28.59138px -7.12863px 0 2.53333px, #ee6666 28.38926px -8.14049px 0 2.46667px, #ee6666 28.15127px -9.1469px 0 2.4px, #ee6666 27.87755px -10.1466px 0 2.33333px, #ee6666 27.56827px -11.1383px 0 2.26667px, #ee6666 27.22365px -12.12075px 0 2.2px, #ee6666 26.84398px -13.09268px 0 2.13333px, #ee6666 26.42956px -14.05285px 0 2.06667px, #ee6666 25.98076px -15.0px 0 2px, #ee6666 25.49798px -15.93291px 0 1.93333px, #ee6666 24.98167px -16.85035px 0 1.86667px, #ee6666 24.43231px -17.75111px 0 1.8px, #ee6666 23.85046px -18.63402px 0 1.73333px, #ee6666 23.23668px -19.49789px 0 1.66667px, #ee6666 22.5916px -20.34157px 0 1.6px, #ee6666 21.91589px -21.16393px 0 1.53333px, #ee6666 21.21024px -21.96384px 0 1.46667px, #ee6666 20.4754px -22.74023px 0 1.4px, #ee6666 19.71215px -23.49203px 0 1.33333px, #ee6666 18.92133px -24.2182px 0 1.26667px, #ee6666 18.10379px -24.91772px 0 1.2px, #ee6666 17.26042px -25.58963px 0 1.13333px, #ee6666 16.39217px -26.23295px 0 1.06667px, #ee6666 15.5px -26.84679px 0 1px, #ee6666 14.58492px -27.43024px 0 0.93333px, #ee6666 13.64796px -27.98245px 0 0.86667px, #ee6666 12.69018px -28.50262px 0 0.8px, #ee6666 11.7127px -28.98995px 0 0.73333px, #ee6666 10.71663px -29.4437px 0 0.66667px, #ee6666 9.70313px -29.86317px 0 0.6px, #ee6666 8.67339px -30.2477px 0 0.53333px, #ee6666 7.6286px -30.59666px 0 0.46667px, #ee6666 6.57001px -30.90946px 0 0.4px, #ee6666 5.49886px -31.18558px 0 0.33333px, #ee6666 4.41643px -31.42451px 0 0.26667px, #ee6666 3.32401px -31.6258px 0 0.2px, #ee6666 2.22291px -31.78904px 0 0.13333px, #ee6666 1.11446px -31.91388px 0 0.06667px, #ee6666 0.0px -32px 0 0px, #ee6666 -1.11911px -32.04713px 0 -0.06667px, #ee6666 -2.24151px -32.05506px 0 -0.13333px, #ee6666 -3.36582px -32.02361px 0 -0.2px, #ee6666 -4.49065px -31.95265px 0 -0.26667px, #ee6666 -5.61462px -31.84212px 0 -0.33333px, #ee6666 -6.73634px -31.69198px 0 -0.4px, #ee6666 -7.8544px -31.50227px 0 -0.46667px, #ee6666 -8.9674px -31.27305px 0 -0.53333px, #ee6666 -10.07395px -31.00444px 0 -0.6px, #ee6666 -11.17266px -30.69663px 0 -0.66667px, #ee6666 -12.26212px -30.34982px 0 -0.73333px, #ee6666 -13.34096px -29.96429px 0 -0.8px, #ee6666 -14.4078px -29.54036px 0 -0.86667px, #ee6666 -15.46126px -29.07841px 0 -0.93333px, #ee6666 -16.5px -28.57884px 0 -1px, #ee6666 -17.52266px -28.04212px 0 -1.06667px, #ee6666 -18.52792px -27.46878px 0 -1.13333px, #ee6666 -19.51447px -26.85936px 0 -1.2px, #ee6666 -20.48101px -26.21449px 0 -1.26667px, #ee6666 -21.42625px -25.53481px 0 -1.33333px, #ee6666 -22.34896px -24.82104px 0 -1.4px, #ee6666 -23.2479px -24.07391px 0 -1.46667px, #ee6666 -24.12186px -23.29421px 0 -1.53333px, #ee6666 -24.96967px -22.48279px 0 -1.6px, #ee6666 -25.79016px -21.64052px 0 -1.66667px, #ee6666 -26.58223px -20.76831px 0 -1.73333px, #ee6666 -27.34477px -19.86714px 0 -1.8px, #ee6666 -28.07674px -18.938px 0 -1.86667px, #ee6666 -28.7771px -17.98193px 0 -1.93333px, #ee6666 -29.44486px -17.0px 0 -2px, #ee6666 -30.07908px -15.99333px 0 -2.06667px, #ee6666 -30.67884px -14.96307px 0 -2.13333px, #ee6666 -31.24325px -13.91039px 0 -2.2px, #ee6666 -31.7715px -12.83652px 0 -2.26667px, #ee6666 -32.26278px -11.74269px 0 -2.33333px, #ee6666 -32.71634px -10.63018px 0 -2.4px, #ee6666 -33.13149px -9.5003px 0 -2.46667px, #ee6666 -33.50755px -8.35437px 0 -2.53333px, #ee6666 -33.84391px -7.19374px 0 -2.6px, #ee6666 -34.14px -6.0198px 0 -2.66667px, #ee6666 -34.39531px -4.83395px 0 -2.73333px, #ee6666 -34.60936px -3.63759px 0 -2.8px, #ee6666 -34.78173px -2.43218px 0 -2.86667px, #ee6666 -34.91205px -1.21916px 0 -2.93333px, #ee6666 -35px 0.0px 0 -3px, #ee6666 -35.04531px 1.22381px 0 -3.06667px, #ee6666 -35.04775px 2.45078px 0 -3.13333px, #ee6666 -35.00717px 3.6794px 0 -3.2px, #ee6666 -34.92345px 4.90817px 0 -3.26667px, #ee6666 -34.79654px 6.13557px 0 -3.33333px, #ee6666 -34.62643px 7.36007px 0 -3.4px, #ee6666 -34.41316px 8.58016px 0 -3.46667px, #ee6666 -34.15683px 9.79431px 0 -3.53333px, #ee6666 -33.85761px 11.001px 0 -3.6px, #ee6666 -33.5157px 12.19872px 0 -3.66667px, #ee6666 -33.13137px 13.38594px 0 -3.73333px, #ee6666 -32.70493px 14.56117px 0 -3.8px, #ee6666 -32.23675px 15.72291px 0 -3.86667px, #ee6666 -31.72725px 16.86968px 0 -3.93333px, #ee6666 -31.17691px 18px 0 -4px, #ee6666 -30.58627px 19.11242px 0 -4.06667px, #ee6666 -29.95589px 20.2055px 0 -4.13333px, #ee6666 -29.28642px 21.27783px 0 -4.2px, #ee6666 -28.57852px 22.32799px 0 -4.26667px, #ee6666 -27.83295px 23.35462px 0 -4.33333px, #ee6666 -27.05047px 24.35635px 0 -4.4px, #ee6666 -26.23192px 25.33188px 0 -4.46667px, #ee6666 -25.37819px 26.27988px 0 -4.53333px, #ee6666 -24.49018px 27.1991px 0 -4.6px, #ee6666 -23.56888px 28.0883px 0 -4.66667px, #ee6666 -22.6153px 28.94626px 0 -4.73333px, #ee6666 -21.6305px 29.77183px 0 -4.8px, #ee6666 -20.61558px 30.56385px 0 -4.86667px, #ee6666 -19.57168px 31.32124px 0 -4.93333px, #ee6666 -18.5px 32.04294px 0 -5px, #ee6666 -17.40175px 32.72792px 0 -5.06667px, #ee6666 -16.27818px 33.37522px 0 -5.13333px, #ee6666 -15.1306px 33.98389px 0 -5.2px, #ee6666 -13.96034px 34.55305px 0 -5.26667px, #ee6666 -12.76875px 35.08186px 0 -5.33333px, #ee6666 -11.55724px 35.56951px 0 -5.4px, #ee6666 -10.32721px 36.01527px 0 -5.46667px, #ee6666 -9.08014px 36.41843px 0 -5.53333px, #ee6666 -7.81748px 36.77835px 0 -5.6px, #ee6666 -6.54075px 37.09443px 0 -5.66667px, #ee6666 -5.25147px 37.36612px 0 -5.73333px, #ee6666 -3.95118px 37.59293px 0 -5.8px, #ee6666 -2.64145px 37.77443px 0 -5.86667px, #ee6666 -1.32385px 37.91023px 0 -5.93333px
box-shadow: #ee6666 0px 26px 0 6px, #ee6666 0.90971px 26.05079px 0 5.93333px, #ee6666 1.82297px 26.06967px 0 5.86667px, #ee6666 2.73865px 26.05647px 0 5.8px, #ee6666 3.65561px 26.01104px 0 5.73333px, #ee6666 4.57274px 25.93327px 0 5.66667px, #ee6666 5.48887px 25.8231px 0 5.6px, #ee6666 6.40287px 25.68049px 0 5.53333px, #ee6666 7.31358px 25.50548px 0 5.46667px, #ee6666 8.21985px 25.2981px 0 5.4px, #ee6666 9.12054px 25.05847px 0 5.33333px, #ee6666 10.01448px 24.78672px 0 5.26667px, #ee6666 10.90054px 24.48302px 0 5.2px, #ee6666 11.77757px 24.1476px 0 5.13333px, #ee6666 12.64443px 23.78072px 0 5.06667px, #ee6666 13.5px 23.38269px 0 5px, #ee6666 14.34315px 22.95384px 0 4.93333px, #ee6666 15.17277px 22.49455px 0 4.86667px, #ee6666 15.98776px 22.00526px 0 4.8px, #ee6666 16.78704px 21.48643px 0 4.73333px, #ee6666 17.56953px 20.93855px 0 4.66667px, #ee6666 18.33418px 20.36217px 0 4.6px, #ee6666 19.07995px 19.75787px 0 4.53333px, #ee6666 19.80582px 19.12626px 0 4.46667px, #ee6666 20.5108px 18.468px 0 4.4px, #ee6666 21.1939px 17.78379px 0 4.33333px, #ee6666 21.85416px 17.07434px 0 4.26667px, #ee6666 22.49067px 16.34043px 0 4.2px, #ee6666 23.10251px 15.58284px 0 4.13333px, #ee6666 23.68881px 14.80241px 0 4.06667px, #ee6666 24.24871px 14.0px 0 4px, #ee6666 24.7814px 13.1765px 0 3.93333px, #ee6666 25.28607px 12.33284px 0 3.86667px, #ee6666 25.76198px 11.46997px 0 3.8px, #ee6666 26.2084px 10.58888px 0 3.73333px, #ee6666 26.62462px 9.69057px 0 3.66667px, #ee6666 27.01001px 8.77608px 0 3.6px, #ee6666 27.36392px 7.84648px 0 3.53333px, #ee6666 27.68577px 6.90284px 0 3.46667px, #ee6666 27.97502px 5.94627px 0 3.4px, #ee6666 28.23116px 4.97791px 0 3.33333px, #ee6666 28.4537px 3.99891px 0 3.26667px, #ee6666 28.64223px 3.01042px 0 3.2px, #ee6666 28.79635px 2.01364px 0 3.13333px, #ee6666 28.91571px 1.00976px 0 3.06667px, #ee6666 29px 0.0px 0 3px, #ee6666 29.04896px -1.01441px 0 2.93333px, #ee6666 29.06237px -2.03224px 0 2.86667px, #ee6666 29.04004px -3.05223px 0 2.8px, #ee6666 28.98185px -4.07313px 0 2.73333px, #ee6666 28.88769px -5.09368px 0 2.66667px, #ee6666 28.75754px -6.1126px 0 2.6px, #ee6666 28.59138px -7.12863px 0 2.53333px, #ee6666 28.38926px -8.14049px 0 2.46667px, #ee6666 28.15127px -9.1469px 0 2.4px, #ee6666 27.87755px -10.1466px 0 2.33333px, #ee6666 27.56827px -11.1383px 0 2.26667px, #ee6666 27.22365px -12.12075px 0 2.2px, #ee6666 26.84398px -13.09268px 0 2.13333px, #ee6666 26.42956px -14.05285px 0 2.06667px, #ee6666 25.98076px -15.0px 0 2px, #ee6666 25.49798px -15.93291px 0 1.93333px, #ee6666 24.98167px -16.85035px 0 1.86667px, #ee6666 24.43231px -17.75111px 0 1.8px, #ee6666 23.85046px -18.63402px 0 1.73333px, #ee6666 23.23668px -19.49789px 0 1.66667px, #ee6666 22.5916px -20.34157px 0 1.6px, #ee6666 21.91589px -21.16393px 0 1.53333px, #ee6666 21.21024px -21.96384px 0 1.46667px, #ee6666 20.4754px -22.74023px 0 1.4px, #ee6666 19.71215px -23.49203px 0 1.33333px, #ee6666 18.92133px -24.2182px 0 1.26667px, #ee6666 18.10379px -24.91772px 0 1.2px, #ee6666 17.26042px -25.58963px 0 1.13333px, #ee6666 16.39217px -26.23295px 0 1.06667px, #ee6666 15.5px -26.84679px 0 1px, #ee6666 14.58492px -27.43024px 0 0.93333px, #ee6666 13.64796px -27.98245px 0 0.86667px, #ee6666 12.69018px -28.50262px 0 0.8px, #ee6666 11.7127px -28.98995px 0 0.73333px, #ee6666 10.71663px -29.4437px 0 0.66667px, #ee6666 9.70313px -29.86317px 0 0.6px, #ee6666 8.67339px -30.2477px 0 0.53333px, #ee6666 7.6286px -30.59666px 0 0.46667px, #ee6666 6.57001px -30.90946px 0 0.4px, #ee6666 5.49886px -31.18558px 0 0.33333px, #ee6666 4.41643px -31.42451px 0 0.26667px, #ee6666 3.32401px -31.6258px 0 0.2px, #ee6666 2.22291px -31.78904px 0 0.13333px, #ee6666 1.11446px -31.91388px 0 0.06667px, #ee6666 0.0px -32px 0 0px, #ee6666 -1.11911px -32.04713px 0 -0.06667px, #ee6666 -2.24151px -32.05506px 0 -0.13333px, #ee6666 -3.36582px -32.02361px 0 -0.2px, #ee6666 -4.49065px -31.95265px 0 -0.26667px, #ee6666 -5.61462px -31.84212px 0 -0.33333px, #ee6666 -6.73634px -31.69198px 0 -0.4px, #ee6666 -7.8544px -31.50227px 0 -0.46667px, #ee6666 -8.9674px -31.27305px 0 -0.53333px, #ee6666 -10.07395px -31.00444px 0 -0.6px, #ee6666 -11.17266px -30.69663px 0 -0.66667px, #ee6666 -12.26212px -30.34982px 0 -0.73333px, #ee6666 -13.34096px -29.96429px 0 -0.8px, #ee6666 -14.4078px -29.54036px 0 -0.86667px, #ee6666 -15.46126px -29.07841px 0 -0.93333px, #ee6666 -16.5px -28.57884px 0 -1px, #ee6666 -17.52266px -28.04212px 0 -1.06667px, #ee6666 -18.52792px -27.46878px 0 -1.13333px, #ee6666 -19.51447px -26.85936px 0 -1.2px, #ee6666 -20.48101px -26.21449px 0 -1.26667px, #ee6666 -21.42625px -25.53481px 0 -1.33333px, #ee6666 -22.34896px -24.82104px 0 -1.4px, #ee6666 -23.2479px -24.07391px 0 -1.46667px, #ee6666 -24.12186px -23.29421px 0 -1.53333px, #ee6666 -24.96967px -22.48279px 0 -1.6px, #ee6666 -25.79016px -21.64052px 0 -1.66667px, #ee6666 -26.58223px -20.76831px 0 -1.73333px, #ee6666 -27.34477px -19.86714px 0 -1.8px, #ee6666 -28.07674px -18.938px 0 -1.86667px, #ee6666 -28.7771px -17.98193px 0 -1.93333px, #ee6666 -29.44486px -17.0px 0 -2px, #ee6666 -30.07908px -15.99333px 0 -2.06667px, #ee6666 -30.67884px -14.96307px 0 -2.13333px, #ee6666 -31.24325px -13.91039px 0 -2.2px, #ee6666 -31.7715px -12.83652px 0 -2.26667px, #ee6666 -32.26278px -11.74269px 0 -2.33333px, #ee6666 -32.71634px -10.63018px 0 -2.4px, #ee6666 -33.13149px -9.5003px 0 -2.46667px, #ee6666 -33.50755px -8.35437px 0 -2.53333px, #ee6666 -33.84391px -7.19374px 0 -2.6px, #ee6666 -34.14px -6.0198px 0 -2.66667px, #ee6666 -34.39531px -4.83395px 0 -2.73333px, #ee6666 -34.60936px -3.63759px 0 -2.8px, #ee6666 -34.78173px -2.43218px 0 -2.86667px, #ee6666 -34.91205px -1.21916px 0 -2.93333px, #ee6666 -35px 0.0px 0 -3px, #ee6666 -35.04531px 1.22381px 0 -3.06667px, #ee6666 -35.04775px 2.45078px 0 -3.13333px, #ee6666 -35.00717px 3.6794px 0 -3.2px, #ee6666 -34.92345px 4.90817px 0 -3.26667px, #ee6666 -34.79654px 6.13557px 0 -3.33333px, #ee6666 -34.62643px 7.36007px 0 -3.4px, #ee6666 -34.41316px 8.58016px 0 -3.46667px, #ee6666 -34.15683px 9.79431px 0 -3.53333px, #ee6666 -33.85761px 11.001px 0 -3.6px, #ee6666 -33.5157px 12.19872px 0 -3.66667px, #ee6666 -33.13137px 13.38594px 0 -3.73333px, #ee6666 -32.70493px 14.56117px 0 -3.8px, #ee6666 -32.23675px 15.72291px 0 -3.86667px, #ee6666 -31.72725px 16.86968px 0 -3.93333px, #ee6666 -31.17691px 18px 0 -4px, #ee6666 -30.58627px 19.11242px 0 -4.06667px, #ee6666 -29.95589px 20.2055px 0 -4.13333px, #ee6666 -29.28642px 21.27783px 0 -4.2px, #ee6666 -28.57852px 22.32799px 0 -4.26667px, #ee6666 -27.83295px 23.35462px 0 -4.33333px, #ee6666 -27.05047px 24.35635px 0 -4.4px, #ee6666 -26.23192px 25.33188px 0 -4.46667px, #ee6666 -25.37819px 26.27988px 0 -4.53333px, #ee6666 -24.49018px 27.1991px 0 -4.6px, #ee6666 -23.56888px 28.0883px 0 -4.66667px, #ee6666 -22.6153px 28.94626px 0 -4.73333px, #ee6666 -21.6305px 29.77183px 0 -4.8px, #ee6666 -20.61558px 30.56385px 0 -4.86667px, #ee6666 -19.57168px 31.32124px 0 -4.93333px, #ee6666 -18.5px 32.04294px 0 -5px, #ee6666 -17.40175px 32.72792px 0 -5.06667px, #ee6666 -16.27818px 33.37522px 0 -5.13333px, #ee6666 -15.1306px 33.98389px 0 -5.2px, #ee6666 -13.96034px 34.55305px 0 -5.26667px, #ee6666 -12.76875px 35.08186px 0 -5.33333px, #ee6666 -11.55724px 35.56951px 0 -5.4px, #ee6666 -10.32721px 36.01527px 0 -5.46667px, #ee6666 -9.08014px 36.41843px 0 -5.53333px, #ee6666 -7.81748px 36.77835px 0 -5.6px, #ee6666 -6.54075px 37.09443px 0 -5.66667px, #ee6666 -5.25147px 37.36612px 0 -5.73333px, #ee6666 -3.95118px 37.59293px 0 -5.8px, #ee6666 -2.64145px 37.77443px 0 -5.86667px, #ee6666 -1.32385px 37.91023px 0 -5.93333px
-webkit-animation: whirly 1.25s infinite linear
-moz-animation: whirly 1.25s infinite linear
-ms-animation: whirly 1.25s infinite linear
-o-animation: whirly 1.25s infinite linear
animation: whirly 1.25s infinite linear
-webkit-transform-origin: 50% 50%
-moz-transform-origin: 50% 50%
-ms-transform-origin: 50% 50%
-o-transform-origin: 50% 50%
transform-origin: 50% 50%
/* :not(:required) hides this rule from IE9 and below
@-webkit-keyframes flower
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
-moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
50%
-webkit-transform: rotate(1080deg)
-moz-transform: rotate(1080deg)
-ms-transform: rotate(1080deg)
-o-transform: rotate(1080deg)
transform: rotate(1080deg)
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px
-moz-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px
box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px
@-moz-keyframes flower
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
-moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
50%
-webkit-transform: rotate(1080deg)
-moz-transform: rotate(1080deg)
-ms-transform: rotate(1080deg)
-o-transform: rotate(1080deg)
transform: rotate(1080deg)
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px
-moz-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px
box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px
@-o-keyframes flower
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
-moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
50%
-webkit-transform: rotate(1080deg)
-moz-transform: rotate(1080deg)
-ms-transform: rotate(1080deg)
-o-transform: rotate(1080deg)
transform: rotate(1080deg)
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px
-moz-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px
box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px
@keyframes flower
0%
-webkit-transform: rotate(0deg)
-moz-transform: rotate(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
-moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
50%
-webkit-transform: rotate(1080deg)
-moz-transform: rotate(1080deg)
-ms-transform: rotate(1080deg)
-o-transform: rotate(1080deg)
transform: rotate(1080deg)
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px
-moz-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px
box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px
/* Styles for old versions of IE
.flower
font-family: sans-serif
font-weight: 100
&:not(:required)
overflow: hidden
position: relative
text-indent: -9999px
display: inline-block
width: 16px
height: 16px
background: #ee9966
border-radius: 100%
-webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
-moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px
-webkit-animation: flower 5s infinite ease-in-out
-moz-animation: flower 5s infinite ease-in-out
-ms-animation: flower 5s infinite ease-in-out
-o-animation: flower 5s infinite ease-in-out
animation: flower 5s infinite ease-in-out
-webkit-transform-origin: 50% 50%
-moz-transform-origin: 50% 50%
-ms-transform-origin: 50% 50%
-o-transform-origin: 50% 50%
transform-origin: 50% 50%
/* :not(:required) hides this rule from IE9 and below
@-webkit-keyframes dots
0%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
8.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
16.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
25%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px
33.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px
41.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
50%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
58.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
66.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
75%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px
83.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px
91.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
100%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
@-moz-keyframes dots
0%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
8.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
16.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
25%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px
33.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px
41.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
50%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
58.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
66.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
75%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px
83.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px
91.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
100%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
@-o-keyframes dots
0%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
8.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
16.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
25%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px
33.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px
41.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
50%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
58.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
66.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
75%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px
83.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px
91.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
100%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
@keyframes dots
0%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
8.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
16.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
25%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px
33.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px
41.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
50%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
58.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
66.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px
75%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px
83.33%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px
91.67%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
100%
-webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
/* Styles for old versions of IE
.dots
font-family: sans-serif
font-weight: 100
&:not(:required)
overflow: hidden
position: relative
text-indent: -9999px
display: inline-block
width: 7px
height: 7px
background: transparent
border-radius: 100%
-webkit-box-shadow: #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-moz-box-shadow: #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
box-shadow: #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px
-webkit-animation: dots 5s infinite ease-in-out
-moz-animation: dots 5s infinite ease-in-out
-ms-animation: dots 5s infinite ease-in-out
-o-animation: dots 5s infinite ease-in-out
animation: dots 5s infinite ease-in-out
-webkit-transform-origin: 50% 50%
-moz-transform-origin: 50% 50%
-ms-transform-origin: 50% 50%
-o-transform-origin: 50% 50%
transform-origin: 50% 50%
/* :not(:required) hides this rule from IE9 and below
@-webkit-keyframes circles
0%
-webkit-transform: rotate(-720deg)
-moz-transform: rotate(-720deg)
-ms-transform: rotate(-720deg)
-o-transform: rotate(-720deg)
transform: rotate(-720deg)
50%
-webkit-transform: rotate(720deg)
-moz-transform: rotate(720deg)
-ms-transform: rotate(720deg)
-o-transform: rotate(720deg)
transform: rotate(720deg)
@-moz-keyframes circles
0%
-webkit-transform: rotate(-720deg)
-moz-transform: rotate(-720deg)
-ms-transform: rotate(-720deg)
-o-transform: rotate(-720deg)
transform: rotate(-720deg)
50%
-webkit-transform: rotate(720deg)
-moz-transform: rotate(720deg)
-ms-transform: rotate(720deg)
-o-transform: rotate(720deg)
transform: rotate(720deg)
@-o-keyframes circles
0%
-webkit-transform: rotate(-720deg)
-moz-transform: rotate(-720deg)
-ms-transform: rotate(-720deg)
-o-transform: rotate(-720deg)
transform: rotate(-720deg)
50%
-webkit-transform: rotate(720deg)
-moz-transform: rotate(720deg)
-ms-transform: rotate(720deg)
-o-transform: rotate(720deg)
transform: rotate(720deg)
@keyframes circles
0%
-webkit-transform: rotate(-720deg)
-moz-transform: rotate(-720deg)
-ms-transform: rotate(-720deg)
-o-transform: rotate(-720deg)
transform: rotate(-720deg)
50%
-webkit-transform: rotate(720deg)
-moz-transform: rotate(720deg)
-ms-transform: rotate(720deg)
-o-transform: rotate(720deg)
transform: rotate(720deg)
/* Styles for old versions of IE
.circles
font-family: sans-serif
font-weight: 100
&:not(:required)
position: relative
text-indent: -9999px
display: inline-block
width: 25px
height: 25px
background: rgba(255, 204, 51, 0.9)
border-radius: 100%
-webkit-animation: circles 3s infinite ease-in-out
-moz-animation: circles 3s infinite ease-in-out
-ms-animation: circles 3s infinite ease-in-out
-o-animation: circles 3s infinite ease-in-out
animation: circles 3s infinite ease-in-out
-webkit-transform-origin: 50% 100%
-moz-transform-origin: 50% 100%
-ms-transform-origin: 50% 100%
-o-transform-origin: 50% 100%
transform-origin: 50% 100%
&::before
background: rgba(255, 102, 0, 0.6)
border-radius: 100%
content: ''
position: absolute
width: 25px
height: 25px
top: 18.75px
left: -10.82532px
&::after
background: rgba(255, 51, 0, 0.4)
border-radius: 100%
content: ''
position: absolute
width: 25px
height: 25px
top: 18.75px
left: 10.82532px
/* :not(:required) hides this rule from IE9 and below
@-webkit-keyframes plus-top
2.5%
background: #ff8866
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
13.75%
background: #ff430d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
13.76%
background: #ffae0d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
25%
background: #ffcc66
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
27.5%
background: #ffcc66
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
41.25%
background: #ffae0d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
41.26%
background: #2cc642
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
50%
background: #66dd77
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
52.5%
background: #66dd77
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
63.75%
background: #2cc642
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
63.76%
background: #1386d2
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
75%
background: #44aaee
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
77.5%
background: #44aaee
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
91.25%
background: #1386d2
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
91.26%
background: #ff430d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
100%
background: #ff8866
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
@-moz-keyframes plus-top
2.5%
background: #ff8866
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
13.75%
background: #ff430d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
13.76%
background: #ffae0d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
25%
background: #ffcc66
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
27.5%
background: #ffcc66
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
41.25%
background: #ffae0d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
41.26%
background: #2cc642
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
50%
background: #66dd77
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
52.5%
background: #66dd77
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
63.75%
background: #2cc642
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
63.76%
background: #1386d2
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
75%
background: #44aaee
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
77.5%
background: #44aaee
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
91.25%
background: #1386d2
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
91.26%
background: #ff430d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
100%
background: #ff8866
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
@-o-keyframes plus-top
2.5%
background: #ff8866
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
13.75%
background: #ff430d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
13.76%
background: #ffae0d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
25%
background: #ffcc66
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
27.5%
background: #ffcc66
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
41.25%
background: #ffae0d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
41.26%
background: #2cc642
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
50%
background: #66dd77
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
52.5%
background: #66dd77
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
63.75%
background: #2cc642
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
63.76%
background: #1386d2
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
75%
background: #44aaee
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
77.5%
background: #44aaee
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
91.25%
background: #1386d2
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
91.26%
background: #ff430d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
100%
background: #ff8866
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
@keyframes plus-top
2.5%
background: #ff8866
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
13.75%
background: #ff430d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
13.76%
background: #ffae0d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
25%
background: #ffcc66
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
27.5%
background: #ffcc66
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
41.25%
background: #ffae0d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
41.26%
background: #2cc642
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
50%
background: #66dd77
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
52.5%
background: #66dd77
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
63.75%
background: #2cc642
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
63.76%
background: #1386d2
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
75%
background: #44aaee
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
77.5%
background: #44aaee
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
transform: rotateY(180deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
91.25%
background: #1386d2
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
91.26%
background: #ff430d
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
-o-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
100%
background: #ff8866
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
transform: rotateY(0deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
@-webkit-keyframes plus-bottom
0%
background: #ffcc66
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
50%
background: #ffcc66
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
75%
background: #44aaee
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
100%
background: #44aaee
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
@-moz-keyframes plus-bottom
0%
background: #ffcc66
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
50%
background: #ffcc66
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
75%
background: #44aaee
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
100%
background: #44aaee
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
@-o-keyframes plus-bottom
0%
background: #ffcc66
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
50%
background: #ffcc66
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
75%
background: #44aaee
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
100%
background: #44aaee
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
@keyframes plus-bottom
0%
background: #ffcc66
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
50%
background: #ffcc66
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
75%
background: #44aaee
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
100%
background: #44aaee
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
@-webkit-keyframes plus-background
0%
background: #ff8866
-webkit-transform: rotateZ(180deg)
-moz-transform: rotateZ(180deg)
-ms-transform: rotateZ(180deg)
-o-transform: rotateZ(180deg)
transform: rotateZ(180deg)
25%
background: #ff8866
-webkit-transform: rotateZ(180deg)
-moz-transform: rotateZ(180deg)
-ms-transform: rotateZ(180deg)
-o-transform: rotateZ(180deg)
transform: rotateZ(180deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
27.5%
background: #66dd77
-webkit-transform: rotateZ(90deg)
-moz-transform: rotateZ(90deg)
-ms-transform: rotateZ(90deg)
-o-transform: rotateZ(90deg)
transform: rotateZ(90deg)
50%
background: #66dd77
-webkit-transform: rotateZ(90deg)
-moz-transform: rotateZ(90deg)
-ms-transform: rotateZ(90deg)
-o-transform: rotateZ(90deg)
transform: rotateZ(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
52.5%
background: #66dd77
-webkit-transform: rotateZ(0deg)
-moz-transform: rotateZ(0deg)
-ms-transform: rotateZ(0deg)
-o-transform: rotateZ(0deg)
transform: rotateZ(0deg)
75%
background: #66dd77
-webkit-transform: rotateZ(0deg)
-moz-transform: rotateZ(0deg)
-ms-transform: rotateZ(0deg)
-o-transform: rotateZ(0deg)
transform: rotateZ(0deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
77.5%
background: #ff8866
-webkit-transform: rotateZ(270deg)
-moz-transform: rotateZ(270deg)
-ms-transform: rotateZ(270deg)
-o-transform: rotateZ(270deg)
transform: rotateZ(270deg)
100%
background: #ff8866
-webkit-transform: rotateZ(270deg)
-moz-transform: rotateZ(270deg)
-ms-transform: rotateZ(270deg)
-o-transform: rotateZ(270deg)
transform: rotateZ(270deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
@-moz-keyframes plus-background
0%
background: #ff8866
-webkit-transform: rotateZ(180deg)
-moz-transform: rotateZ(180deg)
-ms-transform: rotateZ(180deg)
-o-transform: rotateZ(180deg)
transform: rotateZ(180deg)
25%
background: #ff8866
-webkit-transform: rotateZ(180deg)
-moz-transform: rotateZ(180deg)
-ms-transform: rotateZ(180deg)
-o-transform: rotateZ(180deg)
transform: rotateZ(180deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
27.5%
background: #66dd77
-webkit-transform: rotateZ(90deg)
-moz-transform: rotateZ(90deg)
-ms-transform: rotateZ(90deg)
-o-transform: rotateZ(90deg)
transform: rotateZ(90deg)
50%
background: #66dd77
-webkit-transform: rotateZ(90deg)
-moz-transform: rotateZ(90deg)
-ms-transform: rotateZ(90deg)
-o-transform: rotateZ(90deg)
transform: rotateZ(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
52.5%
background: #66dd77
-webkit-transform: rotateZ(0deg)
-moz-transform: rotateZ(0deg)
-ms-transform: rotateZ(0deg)
-o-transform: rotateZ(0deg)
transform: rotateZ(0deg)
75%
background: #66dd77
-webkit-transform: rotateZ(0deg)
-moz-transform: rotateZ(0deg)
-ms-transform: rotateZ(0deg)
-o-transform: rotateZ(0deg)
transform: rotateZ(0deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
77.5%
background: #ff8866
-webkit-transform: rotateZ(270deg)
-moz-transform: rotateZ(270deg)
-ms-transform: rotateZ(270deg)
-o-transform: rotateZ(270deg)
transform: rotateZ(270deg)
100%
background: #ff8866
-webkit-transform: rotateZ(270deg)
-moz-transform: rotateZ(270deg)
-ms-transform: rotateZ(270deg)
-o-transform: rotateZ(270deg)
transform: rotateZ(270deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
@-o-keyframes plus-background
0%
background: #ff8866
-webkit-transform: rotateZ(180deg)
-moz-transform: rotateZ(180deg)
-ms-transform: rotateZ(180deg)
-o-transform: rotateZ(180deg)
transform: rotateZ(180deg)
25%
background: #ff8866
-webkit-transform: rotateZ(180deg)
-moz-transform: rotateZ(180deg)
-ms-transform: rotateZ(180deg)
-o-transform: rotateZ(180deg)
transform: rotateZ(180deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
27.5%
background: #66dd77
-webkit-transform: rotateZ(90deg)
-moz-transform: rotateZ(90deg)
-ms-transform: rotateZ(90deg)
-o-transform: rotateZ(90deg)
transform: rotateZ(90deg)
50%
background: #66dd77
-webkit-transform: rotateZ(90deg)
-moz-transform: rotateZ(90deg)
-ms-transform: rotateZ(90deg)
-o-transform: rotateZ(90deg)
transform: rotateZ(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
52.5%
background: #66dd77
-webkit-transform: rotateZ(0deg)
-moz-transform: rotateZ(0deg)
-ms-transform: rotateZ(0deg)
-o-transform: rotateZ(0deg)
transform: rotateZ(0deg)
75%
background: #66dd77
-webkit-transform: rotateZ(0deg)
-moz-transform: rotateZ(0deg)
-ms-transform: rotateZ(0deg)
-o-transform: rotateZ(0deg)
transform: rotateZ(0deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
77.5%
background: #ff8866
-webkit-transform: rotateZ(270deg)
-moz-transform: rotateZ(270deg)
-ms-transform: rotateZ(270deg)
-o-transform: rotateZ(270deg)
transform: rotateZ(270deg)
100%
background: #ff8866
-webkit-transform: rotateZ(270deg)
-moz-transform: rotateZ(270deg)
-ms-transform: rotateZ(270deg)
-o-transform: rotateZ(270deg)
transform: rotateZ(270deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
@keyframes plus-background
0%
background: #ff8866
-webkit-transform: rotateZ(180deg)
-moz-transform: rotateZ(180deg)
-ms-transform: rotateZ(180deg)
-o-transform: rotateZ(180deg)
transform: rotateZ(180deg)
25%
background: #ff8866
-webkit-transform: rotateZ(180deg)
-moz-transform: rotateZ(180deg)
-ms-transform: rotateZ(180deg)
-o-transform: rotateZ(180deg)
transform: rotateZ(180deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
27.5%
background: #66dd77
-webkit-transform: rotateZ(90deg)
-moz-transform: rotateZ(90deg)
-ms-transform: rotateZ(90deg)
-o-transform: rotateZ(90deg)
transform: rotateZ(90deg)
50%
background: #66dd77
-webkit-transform: rotateZ(90deg)
-moz-transform: rotateZ(90deg)
-ms-transform: rotateZ(90deg)
-o-transform: rotateZ(90deg)
transform: rotateZ(90deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
52.5%
background: #66dd77
-webkit-transform: rotateZ(0deg)
-moz-transform: rotateZ(0deg)
-ms-transform: rotateZ(0deg)
-o-transform: rotateZ(0deg)
transform: rotateZ(0deg)
75%
background: #66dd77
-webkit-transform: rotateZ(0deg)
-moz-transform: rotateZ(0deg)
-ms-transform: rotateZ(0deg)
-o-transform: rotateZ(0deg)
transform: rotateZ(0deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
77.5%
background: #ff8866
-webkit-transform: rotateZ(270deg)
-moz-transform: rotateZ(270deg)
-ms-transform: rotateZ(270deg)
-o-transform: rotateZ(270deg)
transform: rotateZ(270deg)
100%
background: #ff8866
-webkit-transform: rotateZ(270deg)
-moz-transform: rotateZ(270deg)
-ms-transform: rotateZ(270deg)
-o-transform: rotateZ(270deg)
transform: rotateZ(270deg)
-webkit-animation-timing-function: step-start
-moz-animation-timing-function: step-start
-ms-animation-timing-function: step-start
-o-animation-timing-function: step-start
animation-timing-function: step-start
/* Styles for old versions of IE
.plus
font-family: sans-serif
font-weight: 100
&:not(:required)
overflow: hidden
position: relative
text-indent: -9999px
display: inline-block
width: 48px
height: 48px
background: #ff8866
-webkit-border-radius: 24px
-moz-border-radius: 24px
-ms-border-radius: 24px
-o-border-radius: 24px
border-radius: 24px
-webkit-transform: rotateZ(90deg)
-moz-transform: rotateZ(90deg)
-ms-transform: rotateZ(90deg)
-o-transform: rotateZ(90deg)
transform: rotateZ(90deg)
-webkit-transform-origin: 50% 50%
-moz-transform-origin: 50% 50%
-ms-transform-origin: 50% 50%
-o-transform-origin: 50% 50%
transform-origin: 50% 50%
-webkit-animation: plus-background 3s infinite ease-in-out
-moz-animation: plus-background 3s infinite ease-in-out
-ms-animation: plus-background 3s infinite ease-in-out
-o-animation: plus-background 3s infinite ease-in-out
animation: plus-background 3s infinite ease-in-out
&::after
background: #ff8866
-webkit-border-radius: 24px 0 0 24px
-moz-border-radius: 24px 0 0 24px
-ms-border-radius: 24px 0 0 24px
-o-border-radius: 24px 0 0 24px
border-radius: 24px 0 0 24px
content: ''
position: absolute
right: 50%
top: 0
width: 50%
height: 100%
-webkit-transform-origin: 100% 50%
-moz-transform-origin: 100% 50%
-ms-transform-origin: 100% 50%
-o-transform-origin: 100% 50%
transform-origin: 100% 50%
-webkit-animation: plus-top 3s infinite linear
-moz-animation: plus-top 3s infinite linear
-ms-animation: plus-top 3s infinite linear
-o-animation: plus-top 3s infinite linear
animation: plus-top 3s infinite linear
&::before
background: #ffcc66
-webkit-border-radius: 24px 0 0 24px
-moz-border-radius: 24px 0 0 24px
-ms-border-radius: 24px 0 0 24px
-o-border-radius: 24px 0 0 24px
border-radius: 24px 0 0 24px
content: ''
position: absolute
right: 50%
top: 0
width: 50%
height: 100%
-webkit-transform-origin: 100% 50%
-moz-transform-origin: 100% 50%
-ms-transform-origin: 100% 50%
-o-transform-origin: 100% 50%
transform-origin: 100% 50%
-webkit-animation: plus-bottom 3s infinite linear
-moz-animation: plus-bottom 3s infinite linear
-ms-animation: plus-bottom 3s infinite linear
-o-animation: plus-bottom 3s infinite linear
animation: plus-bottom 3s infinite linear
/* :not(:required) hides this rule from IE9 and below
@-webkit-keyframes ball
0%
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
50%
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-webkit-animation-timing-function: linear
-moz-animation-timing-function: linear
-ms-animation-timing-function: linear
-o-animation-timing-function: linear
animation-timing-function: linear
55%
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
@-moz-keyframes ball
0%
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
50%
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-webkit-animation-timing-function: linear
-moz-animation-timing-function: linear
-ms-animation-timing-function: linear
-o-animation-timing-function: linear
animation-timing-function: linear
55%
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
@-o-keyframes ball
0%
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
50%
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-webkit-animation-timing-function: linear
-moz-animation-timing-function: linear
-ms-animation-timing-function: linear
-o-animation-timing-function: linear
animation-timing-function: linear
55%
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
@keyframes ball
0%
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
50%
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1)
-webkit-animation-timing-function: linear
-moz-animation-timing-function: linear
-ms-animation-timing-function: linear
-o-animation-timing-function: linear
animation-timing-function: linear
55%
-webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-o-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
@-webkit-keyframes ball-highlight
0%
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
50%
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-webkit-animation-timing-function: linear
-moz-animation-timing-function: linear
-ms-animation-timing-function: linear
-o-animation-timing-function: linear
animation-timing-function: linear
55%
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
100%
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
@-moz-keyframes ball-highlight
0%
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
50%
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-webkit-animation-timing-function: linear
-moz-animation-timing-function: linear
-ms-animation-timing-function: linear
-o-animation-timing-function: linear
animation-timing-function: linear
55%
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
100%
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
@-o-keyframes ball-highlight
0%
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
50%
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-webkit-animation-timing-function: linear
-moz-animation-timing-function: linear
-ms-animation-timing-function: linear
-o-animation-timing-function: linear
animation-timing-function: linear
55%
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
100%
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
@keyframes ball-highlight
0%
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
50%
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-webkit-animation-timing-function: linear
-moz-animation-timing-function: linear
-ms-animation-timing-function: linear
-o-animation-timing-function: linear
animation-timing-function: linear
55%
-webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-o-transform: skew(-30deg, 0) translate3d(0, 0, 1px)
transform: skew(-30deg, 0) translate3d(0, 0, 1px)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
100%
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
@-webkit-keyframes ball-shadow
0%
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: translate3d(12.5px, -15px, -1px)
-moz-transform: translate3d(12.5px, -15px, -1px)
-ms-transform: translate3d(12.5px, -15px, -1px)
-o-transform: translate3d(12.5px, -15px, -1px)
transform: translate3d(12.5px, -15px, -1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
50%
-webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-o-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-webkit-animation-timing-function: linear
-moz-animation-timing-function: linear
-ms-animation-timing-function: linear
-o-animation-timing-function: linear
animation-timing-function: linear
55%
-webkit-transform: translate3d(12.5px, -15px, -1px)
-moz-transform: translate3d(12.5px, -15px, -1px)
-ms-transform: translate3d(12.5px, -15px, -1px)
-o-transform: translate3d(12.5px, -15px, -1px)
transform: translate3d(12.5px, -15px, -1px)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
100%
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
@-moz-keyframes ball-shadow
0%
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: translate3d(12.5px, -15px, -1px)
-moz-transform: translate3d(12.5px, -15px, -1px)
-ms-transform: translate3d(12.5px, -15px, -1px)
-o-transform: translate3d(12.5px, -15px, -1px)
transform: translate3d(12.5px, -15px, -1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
50%
-webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-o-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-webkit-animation-timing-function: linear
-moz-animation-timing-function: linear
-ms-animation-timing-function: linear
-o-animation-timing-function: linear
animation-timing-function: linear
55%
-webkit-transform: translate3d(12.5px, -15px, -1px)
-moz-transform: translate3d(12.5px, -15px, -1px)
-ms-transform: translate3d(12.5px, -15px, -1px)
-o-transform: translate3d(12.5px, -15px, -1px)
transform: translate3d(12.5px, -15px, -1px)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
100%
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
@-o-keyframes ball-shadow
0%
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: translate3d(12.5px, -15px, -1px)
-moz-transform: translate3d(12.5px, -15px, -1px)
-ms-transform: translate3d(12.5px, -15px, -1px)
-o-transform: translate3d(12.5px, -15px, -1px)
transform: translate3d(12.5px, -15px, -1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
50%
-webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-o-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-webkit-animation-timing-function: linear
-moz-animation-timing-function: linear
-ms-animation-timing-function: linear
-o-animation-timing-function: linear
animation-timing-function: linear
55%
-webkit-transform: translate3d(12.5px, -15px, -1px)
-moz-transform: translate3d(12.5px, -15px, -1px)
-ms-transform: translate3d(12.5px, -15px, -1px)
-o-transform: translate3d(12.5px, -15px, -1px)
transform: translate3d(12.5px, -15px, -1px)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
100%
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
@keyframes ball-shadow
0%
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
45%
-webkit-transform: translate3d(12.5px, -15px, -1px)
-moz-transform: translate3d(12.5px, -15px, -1px)
-ms-transform: translate3d(12.5px, -15px, -1px)
-o-transform: translate3d(12.5px, -15px, -1px)
transform: translate3d(12.5px, -15px, -1px)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
50%
-webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-o-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1)
-webkit-animation-timing-function: linear
-moz-animation-timing-function: linear
-ms-animation-timing-function: linear
-o-animation-timing-function: linear
animation-timing-function: linear
55%
-webkit-transform: translate3d(12.5px, -15px, -1px)
-moz-transform: translate3d(12.5px, -15px, -1px)
-ms-transform: translate3d(12.5px, -15px, -1px)
-o-transform: translate3d(12.5px, -15px, -1px)
transform: translate3d(12.5px, -15px, -1px)
-webkit-animation-timing-function: ease-out
-moz-animation-timing-function: ease-out
-ms-animation-timing-function: ease-out
-o-animation-timing-function: ease-out
animation-timing-function: ease-out
100%
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-webkit-animation-timing-function: ease-in
-moz-animation-timing-function: ease-in
-ms-animation-timing-function: ease-in
-o-animation-timing-function: ease-in
animation-timing-function: ease-in
/* Styles for old versions of IE
.ball
font-family: sans-serif
font-weight: 100
&:not(:required)
position: relative
display: inline-block
font-size: 0
letter-spacing: -1px
border-radius: 100%
background: #ff8866
width: 50px
height: 50px
-webkit-transform-style: preserve-3d
-moz-transform-style: preserve-3d
-ms-transform-style: preserve-3d
-o-transform-style: preserve-3d
transform-style: preserve-3d
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
-webkit-transform-origin: 0 100%
-moz-transform-origin: 0 100%
-ms-transform-origin: 0 100%
-o-transform-origin: 0 100%
transform-origin: 0 100%
-webkit-animation: ball 1500ms infinite linear
-moz-animation: ball 1500ms infinite linear
-ms-animation: ball 1500ms infinite linear
-o-animation: ball 1500ms infinite linear
animation: ball 1500ms infinite linear
&::after
content: ''
position: absolute
top: 4.5px
left: 5.5px
width: 15px
height: 15px
background: #ffb099
border-radius: 100%
-webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px)
-webkit-animation: ball-highlight 1500ms infinite linear
-moz-animation: ball-highlight 1500ms infinite linear
-ms-animation: ball-highlight 1500ms infinite linear
-o-animation: ball-highlight 1500ms infinite linear
animation: ball-highlight 1500ms infinite linear
&::before
content: ''
position: absolute
top: 50px
left: 5.5px
width: 50px
height: 15px
background: rgba(0, 0, 0, 0.2)
border-radius: 100%
-webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1)
-webkit-animation: ball-shadow 1500ms infinite linear
-moz-animation: ball-shadow 1500ms infinite linear
-ms-animation: ball-shadow 1500ms infinite linear
-o-animation: ball-shadow 1500ms infinite linear
animation: ball-shadow 1500ms infinite linear
-webkit-filter: blur(1px)
-moz-filter: blur(1px)
filter: blur(1px)
/* :not(:required) hides this rule from IE9 and below
/* Css Spinners
.cell
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
height: 185px
margin-top: 30px
overflow: hidden
padding: 20px
width: 100%
.card
display: table
float: none
margin: 50px auto 0
.icons-sec
float: left
width: 100%
section
float: left
margin-top: 40px
width: 100%
h2
font-size: 20px
margin: 0 0 20px
width: 100%
.fontawesome-icon-list a
background: #ffffff none repeat scroll 0 0
border-bottom: 1px solid #efefef
border-left: 1px solid #efefef
border-top: 1px solid #efefef
color: #6f6f6f
cursor: pointer
float: left
font-family: Open Sans
font-size: 13px
font-weight: 300
letter-spacing: 0.5px
margin-bottom: -1px
padding: 14px 25px
pointer-events: none
width: 100%
> i
font-size: 14px
margin-right: 7px
.row.fontawesome-icon-list
margin: 0
> div
padding: 0
.icons-sec .alert
margin: 10px 0 20px
.account-sec
height: 100%
left: 0
max-height: 100%
position: relative
top: 0
width: 100%
.account-user-sec
background-image: url("../images/login-bg.jpg")
background-size: cover
float: left
height: 100%
left: 0
overflow-x: hidden
overflow-y: scroll
position: fixed
top: 0
width: 100%
z-index: 2147483647
background-color: #e8edf2
&::before
content: ""
height: 100%
left: 0
opacity: 0.1
position: absolute
top: 0
width: 100%
z-index: -1
.account-sec
float: left
width: 100%
.container
padding: 0
.account-top-bar
background: rgba(0, 0, 0, 0.02) none repeat scroll 0 0
border-bottom: 1px solid rgba(0, 0, 0, 0.03)
float: left
width: 100%
.account-header-link
float: right
list-style: outside none none
margin: 0
padding: 0
> li
float: left
margin-left: 35px
> a
color: #5f5f5f
float: left
font-family: Open Sans
font-size: 11px
letter-spacing: 1.5px
padding: 22px 0
text-transform: uppercase
.account-top-bar .logo
padding-left: 0
.acount-sec
float: left
padding-bottom: 100px
padding-top: 100px
width: 100%
.account-detail
float: left
padding-top: 20px
width: 100%
> ul
float: left
list-style: outside none none
margin: 0
padding: 0
width: 100%
> li
float: left
margin-bottom: 30px
width: 100%
>
h3
float: left
font-size: 19px
margin: 0 0 9px
width: 100%
> i
margin-right: 10px
width: 30px
p
color: #555555
float: left
margin: 0
padding-left: 46px
width: 100%
.contact-sec
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
padding: 50px
width: 100%
.account-form
float: left
width: 100%
> form
float: left
width: 100%
div.feild
float: left
> input
&[type="text"], &[type="password"]
border: 1px solid #e6eaea
-webkit-border-radius: 30px
-moz-border-radius: 30px
-ms-border-radius: 30px
-o-border-radius: 30px
border-radius: 30px
float: left
font-size: 13px
letter-spacing: 0.5px
margin-bottom: 10px
padding: 13px 30px
width: 100%
.feild > input[type="submit"]
background: #ff5f5f none repeat scroll 0 0
border: medium none
-webkit-border-radius: 25px
-moz-border-radius: 25px
-ms-border-radius: 25px
-o-border-radius: 25px
border-radius: 25px
color: #ffffff
float: left
font-family: Montserrat
font-size: 12px
margin-top: 20px
padding: 14px 30px
.more-option
padding: 36px 0
position: absolute
right: -80px
text-align: center
top: 50%
-webkit-transform: rotate(-90deg) translateX(50%)
-moz-transform: rotate(-90deg) translateX(50%)
-ms-transform: rotate(-90deg) translateX(50%)
-o-transform: rotate(-90deg) translateX(50%)
transform: rotate(-90deg) translateX(50%)
width: 100px
&::before
background: #e8ecec none repeat scroll 0 0
content: ""
height: 1px
left: 0
position: absolute
top: 50%
width: 25px
&::after
background: #e8ecec none repeat scroll 0 0
content: ""
height: 1px
right: 0
position: absolute
top: 50%
width: 25px
span
color: #a5a5a5
.creat-an-account
display: table
float: left
padding-left: 58px
padding-top: 60px
vertical-align: middle
width: 100%
>
span
color: #858585
float: left
font-family: Open Sans
font-size: 13px
text-align: left
width: 100%
a
background: #ff5f5f none repeat scroll 0 0
-webkit-border-radius: 40px
-moz-border-radius: 40px
-ms-border-radius: 40px
-o-border-radius: 40px
border-radius: 40px
color: #ffffff
float: left
font-family: Montserrat
font-size: 13px
margin-top: 19px
padding: 14px 30px
h4
color: #555555
float: left
font-size: 13px
margin: 33px 0 0
width: 100%
> ul
float: left
list-style: outside none none
margin: 15px 0 0
padding: 0
width: 100%
> li
float: left
margin-right: 4px
> a
float: left
> i
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #ffffff
float: left
font-size: 14px
height: 40px
line-height: 40px
text-align: center
width: 40px
&.fa-facebook
background: #4e8deb
&.fa-google-plus
background: #eb4e4e
&.fa-twitter
background: #4ec4eb
.account-detail > ul > li:last-child
margin: 0
.account-sec footer
float: left
margin-top: 50px
padding-left: 45px
position: static
text-align: center
width: 100%
p
float: left
width: 100%
.account-form label
float: left
font-family: Open Sans
font-size: 13px
font-weight: normal
line-height: 26px
margin: 10px 0 0
width: 100%
a
color: #000
input
float: left
margin-right: 10px
margin-top: 7px
/* Invoice Sec
.invoice-sec
float: left
margin-top: 30px
width: 100%
> span
color: #878787
float: left
font-family: open sans
font-size: 13px
letter-spacing: 0.3px
margin: 0 0 20px
text-align: left
width: 100%
strong
color: #232323
float: left
font-family: Montserrat
font-size: 15px
font-weight: normal
letter-spacing: 0.3px
width: 100%
.invoice-details
float: left
width: 50%
> ul
float: left
margin: 0
padding: 0
width: 100%
.heading-invoice
color: #6E6E6E
float: left
font-family: open sans
font-size: 13px
list-style: none outside none
width: 100%
font-size: 12px
.invoice-details li
color: #555555
float: left
font-family: open sans
font-size: 13px
font-weight: 500
letter-spacing: 0.25px
line-height: 15px
list-style: none outside none
padding: 6px 0
width: 100%
.invoice
background: none repeat scroll 0 0 #FAFAFA
border: 1px solid #EBEBEB
float: left
margin: 15px 0
width: 100%
-webkit-border-radius: 2px
-moz-border-radius: 2px
-ms-border-radius: 2px
-o-border-radius: 2px
border-radius: 2px
.invoice-head
background: none repeat scroll 0 0 #ffffff
float: left
width: 100%
h2
color: #232323
float: left
font-family: Montserrat
font-size: 14px
font-weight: normal
letter-spacing: 0.3px
line-height: 12px
margin: 0
padding: 23px 0
text-align: center
.invoice li div p
color: #555555
float: left
font-family: open sans
font-size: 13px
letter-spacing: 0.3px
line-height: 10px
margin: 0
padding: 19px 0
text-align: center
width: 100%
.invoice-number
float: left
padding: 0 20px
width: 10%
.date
width: 10%
float: left
.description
width: 50%
float: left
.quantity, .vat
width: 10%
float: left
.total
width: auto
float: left
.long-column
width: 90%
p
padding-left: 10px !important
text-align: left !important
.invoice
li
float: left
list-style: none outside none
width: 100%
&:hover
background: none repeat scroll 0 0 #F7F7F7
&:nth-child(2n+2)
background: #ffffff none repeat scroll 0 0
> ul
float: left
margin: 0
padding: 0
width: 100%
.total a
border: 1px solid
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #ffffff
float: left
font-family: Montserrat
font-size: 14px
line-height: 10px
margin: 20px
padding: 18px 40px
text-align: center
text-decoration: none
/* My Cart
.my-cart
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 20px
-moz-border-radius: 20px
-ms-border-radius: 20px
-o-border-radius: 20px
border-radius: 20px
float: left
margin-top: 30px
overflow: hidden
width: 100%
.cart-heading
background: #ffffff none repeat scroll 0 0
float: left
padding: 23px 0
width: 100%
h2
color: #2e2e2e
float: left
font-family: Montserrat
font-size: 15px
font-weight: 500
line-height: 12px
margin: 0
text-align: center
width: 100%
.cart-product
width: 40%
float: left
padding: 0 20px
.cart-price, .cart-quantity, .cart-total
width: 20%
float: left
padding: 0 20px
.my-cart
> ul
float: left
margin: 0
padding: 0
width: 100%
li:nth-child(2n+2)
background: #ffffff none repeat scroll 0 0
&:last-child
border-bottom: 0
li
background: #fbfbfb none repeat scroll 0 0
border-bottom: 1px solid #ededed
float: left
list-style: outside none none
width: 100%
> div
border-left: 1px solid #FFFFFF
border-right: 1px solid #DBDBDB
float: left
min-height: 47px
padding: 10px 20px
position: relative
&:last-child
border-right: none
.cart-product >
a i
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1)
color: #444444
height: 100%
left: 0
line-height: 48px
position: absolute
text-align: center
top: 0
width: 25px
h6
color: #555555
float: left
font-family: open sans
font-size: 13px
font-weight: 600
letter-spacing: 0.25px
line-height: 16px
margin: 6px 0 2px 20px
text-transform: uppercase
img
border: 1px solid #C7C7C7
float: right
margin-top: 0px
width: 35px
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
.cart-price > h6
color: #444444
display: table
float: none
font-family: roboto
font-size: 16px
font-weight: 700
line-height: 11px
margin: 3px auto 0
padding: 6px
text-align: center
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
.cart-quantity select
border: 1px solid #EBEBEB
display: table
float: none
font-family: open sans
font-size: 15px
margin: 0 auto
text-align: center
width: 50%
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
.cart-total > h6
color: #444444
float: left
font-family: roboto
font-size: 16px
font-weight: 500
letter-spacing: 0.1px
margin: 6px 0
text-align: center
width: 100%
.my-cart li
> div:last-child
border-right: medium none
&:last-child div a
color: #FFFFFF
font-family: open sans
font-size: 13px
line-height: 11px
padding: 10px 11px
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
.cart-product > input
border: 1px solid #EBEBEB
float: left
font-family: open sans
font-size: 12px
height: 35px
letter-spacing: 0.25px
padding: 0 10px
text-transform: uppercase
width: 215px
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
.cart-total-sec
p
color: #444444
float: left
font-family: open sans
font-size: 13px
letter-spacing: 0.25px
line-height: 10px
margin: 0
padding: 19px 0
text-align: center
width: 50%
span
color: #444444
float: left
font-family: Montserrat
font-size: 15px
font-weight: 100
letter-spacing: 0.3px
line-height: 12px
padding: 18px 0
text-align: center
width: 50%
.calc-shipping-sec
select
border: 1px solid #EBEBEB
float: left
font-family: open sans
font-size: 14px
height: 31px
padding: 3px 0 0
width: 100%
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
li
padding: 9px 15px
input
border: 1px solid #EBEBEB
float: left
font-family: open sans
font-size: 13px
padding: 5px 10px
width: 100%
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
a
float: right
font-size: 13px
padding: 5px 10px
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
.payment
float: left
margin-top: 40px
padding: 0
width: 100%
> ul
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 20px
-moz-border-radius: 20px
-ms-border-radius: 20px
-o-border-radius: 20px
border-radius: 20px
float: left
margin: 0
padding: 40px
width: 100%
.payment-desc .payment-desc span:last-child
margin-bottom: 0
.payment
a
float: left
li
float: left
list-style: outside none none
margin-bottom: 30px
width: 100%
.payment-method
float: left
width: 100%
> label
display: list-item
font-family: Montserrat
font-size: 12px
font-weight: 100
letter-spacing: 0.25px
line-height: 19px
list-style: outside none none
margin-top: 6px
.payment-desc
float: left
width: 100%
> span
background: #e8edf2 none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #738282
float: left
font-family: open sans
font-size: 13px
letter-spacing: 0.3px
line-height: 26px
margin: 10px 0 0
padding: 23px 40px
position: relative
width: 100%
&::before
border-bottom: 6px solid #e8edf2
border-left: 6px solid transparent
border-right: 6px solid transparent
content: ""
left: 22px
position: absolute
top: -5px
.payment a
border: 1px solid
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #ffffff
float: left
font-family: Montserrat
font-size: 13px
letter-spacing: 0.25px
padding: 12px 20px
text-decoration: none
.billing-sec
float: left
margin-top: 30px
width: 100%
.field
float: left
margin-bottom: 30px
button
background: #333333 none repeat scroll 0 0
border: medium none
-webkit-border-radius: 40px
-moz-border-radius: 40px
-ms-border-radius: 40px
-o-border-radius: 40px
border-radius: 40px
color: #ffffff
float: left
font-family: Montserrat
font-size: 13px
letter-spacing: 0.25px
margin-top: 40px
padding: 14px 40px
text-decoration: none
.field
> label
float: left
font-family: Montserrat
font-size: 12px
font-weight: normal
margin: 0 0 10px
width: 100%
span
color: red
input
border: medium none
-webkit-border-radius: 40px
-moz-border-radius: 40px
-ms-border-radius: 40px
-o-border-radius: 40px
border-radius: 40px
float: left
font-size: 12px
height: 50px
letter-spacing: 0.5px
padding: 0 30px
width: 100%
>
select
border: medium none
-webkit-border-radius: 40px
-moz-border-radius: 40px
-ms-border-radius: 40px
-o-border-radius: 40px
border-radius: 40px
float: left
font-size: 12px
height: 50px
padding: 0 30px
width: 100%
textarea
border: medium none
-webkit-border-radius: 20px
-moz-border-radius: 20px
-ms-border-radius: 20px
-o-border-radius: 20px
border-radius: 20px
float: left
min-height: 160px
padding: 20px 30px
width: 100%
.payment li:last-child
margin: 0
/* Range Slider
.range-slider
background: #fff none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
padding: 40px
width: 100%
margin-top: 30px
/* Ion.RangeSlider
*// css version 1.8.1
*// by Denis Ineshin | ionden.com
*// ===================================================================================================================
/* =====================================================================================================================
*// RangeSlider
.irs
position: relative
display: block
.irs-line
position: relative
display: block
overflow: hidden
.irs-line-left, .irs-line-mid, .irs-line-right
position: absolute
display: block
top: 0
.irs-line-left
left: 0
width: 10%
.irs-line-mid
left: 10%
width: 80%
.irs-line-right
right: 0
width: 10%
.irs-diapason
position: absolute
display: block
left: 0
width: 100%
.irs-slider
position: absolute
display: block
cursor: default
z-index: 1
&.single
left: 10px
&:before
position: absolute
display: block
content: ""
top: -50%
left: -100%
width: 300%
height: 200%
background: rgba(0, 0, 0, 0)
&.from
left: 100px
&:before
position: absolute
display: block
content: ""
top: -50%
left: -200%
width: 300%
height: 200%
background: rgba(0, 0, 0, 0)
&.to
left: 300px
&:before
position: absolute
display: block
content: ""
top: -50%
left: 0
width: 300%
height: 200%
background: rgba(0, 0, 0, 0)
&.last
z-index: 2
.irs-min
position: absolute
display: block
left: 0
cursor: default
.irs-max
position: absolute
display: block
right: 0
cursor: default
.irs-from, .irs-to, .irs-single
position: absolute
display: block
top: 0
left: 0
cursor: default
white-space: nowrap
.irs-grid
position: absolute
display: none
bottom: 0
left: 0
width: 100%
height: 20px
.irs-with-grid .irs-grid
display: block
.irs-grid-pol
position: absolute
top: 0
left: 0
width: 1px
height: 8px
background: #000
&.small
height: 4px
.irs-grid-text
position: absolute
bottom: 0
left: 0
width: 100px
white-space: nowrap
text-align: center
font-size: 9px
line-height: 9px
color: #000
/* Ion.RangeSlider, Flat UI Skin
*// css version 1.8.1
*// by Denis Ineshin | ionden.com
*// ===================================================================================================================
/* =====================================================================================================================
*// Skin details
.irs-line-mid, .irs-line-left, .irs-line-right, .irs-diapason, .irs-slider
background: url(../images/sprite-skin-flat.png) repeat-x
.irs
height: 60px
#irs-3, #irs-4, #irs-1, #irs-2, #irs-5, #irs-6
float: left
margin: 5px 0 30px
width: 100%
.irs-with-grid
height: 60px
.irs-line
height: 12px
top: 25px
.irs-line-left
height: 12px
background-position: 0 -30px
.irs-line-mid
height: 12px
background-position: 0 0
.irs-line-right
height: 12px
background-position: 100% -30px
.irs-diapason
height: 12px
top: 25px
background-position: 0 -60px
.irs-slider
width: 16px
height: 18px
top: 22px
background-position: 0 -90px
#irs-active-slider, .irs-slider:hover
background-position: 0 -120px
.irs-min, .irs-max
background: none repeat scroll 0 0 #E1E4E9
border: 1px solid #EBEBEB
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #333333
font-size: 10px
line-height: 1.333
padding: 1px 6px
text-shadow: none
top: 0
.irs-from, .irs-to, .irs-single
color: #fff
font-size: 10px
line-height: 1.333
text-shadow: none
padding: 1px 5px
background: #F43D53
border-radius: 1px
.irs-from:after, .irs-to:after, .irs-single:after
position: absolute
display: block
content: ""
bottom: -6px
left: 50%
width: 0
height: 0
margin-left: -3px
overflow: hidden
border: 3px solid transparent
border-top-color: #F43D53
.irs-grid-pol
background: #e1e4e9
.irs-grid-text
color: #999
/* Accordian
.accordion
float: left
margin-top: 30px
width: 100%
> h3
background: #fcfcfc none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #555555
cursor: pointer
float: left
font-size: 14px
margin: 0 0 1px
padding: 19px 40px
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 100%
&.current
background: #fff none repeat scroll 0 0
-webkit-border-radius: 5px 5px 0 0
-moz-border-radius: 5px 5px 0 0
-ms-border-radius: 5px 5px 0 0
-o-border-radius: 5px 5px 0 0
border-radius: 5px 5px 0 0
color: #ff5f5f
.pane
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 1px 1px 5px 5px
-moz-border-radius: 1px 1px 5px 5px
-ms-border-radius: 1px 1px 5px 5px
-o-border-radius: 1px 1px 5px 5px
border-radius: 1px 1px 5px 5px
float: left
margin-bottom: 1px
padding: 30px 40px
width: 100%
/* C0ntact Form
#contact span.required
font-size: 13px
color: #ff0000
/* Select the colour of the * if the field is required.
#message
float: left
margin: 10px 0
width: 100%
.error_message
background: #fbe3e4 url("../images/error.gif") no-repeat scroll 26px center
border: 1px solid #fbc2c4
-webkit-border-radius: 50px
-moz-border-radius: 50px
-ms-border-radius: 50px
-o-border-radius: 50px
border-radius: 50px
color: #8a1f11
display: block
float: left
height: auto
line-height: 22px
padding: 10px 60px
width: 100%
.loader-form
margin: 45px 0 0 20px
padding: 0 10px
#contact #success_page h1
background: url('../images/success.gif') left no-repeat
padding-left: 22px
acronym
border-bottom: 1px dotted #ccc
#contact
float: left
width: 100%
> #contactform
float: left
width: 100%
input
float: left
width: 100%
border: 1px solid #e8ecec
-webkit-border-radius: 30px
-moz-border-radius: 30px
-ms-border-radius: 30px
-o-border-radius: 30px
border-radius: 30px
float: left
font-family: Open Sans
font-size: 13px
margin-bottom: 10px
padding: 13px 30px
width: 100%
textarea
border: 1px solid #e8ecec
-webkit-border-radius: 20px
-moz-border-radius: 20px
-ms-border-radius: 20px
-o-border-radius: 20px
border-radius: 20px
float: left
min-height: 180px
padding: 20px 30px
width: 100%
input[type="submit"]
background: #ff5f5f none repeat scroll 0 0
border: medium none
color: #ffffff
float: left
font-family: Montserrat
margin-top: 20px
width: auto
margin-bottom: 0
p
float: left
margin: 20px 20px 0 0
width: auto
label
float: left
margin: 24px 20px 0 0
input#verify[type="text"]
margin: 10px 0 0
width: 130px
#maptwo
float: left
margin-top: 40px
width: 100%
.contact-details-info
float: left
padding-top: 20px
width: 100%
>
h3
float: left
font-family: Montserrat
font-size: 18px
margin-bottom: 9px
width: 100%
ul
float: left
list-style: outside none none
margin: 10px 0 0
padding: 0
width: 100%
> li
color: #676666
display: table
float: left
font-family: Montserrat
font-size: 13px
margin-bottom: 14px
width: 100%
li > i
background: #f5f5f5 none repeat scroll 0 0
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
display: inline-block
height: 39px
line-height: 39px
margin-right: 14px
text-align: center
width: 39px
.contact-sec > iframe
float: left
margin-top: 50px
width: 100%
.error-sec
float: left
padding: 0 40px 100px
text-align: center
width: 100%
.mockup img
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
-o-transform: rotate(180deg)
transform: rotate(180deg)
.error-sec >
span
color: #555555
float: left
font-family: Open Sans
letter-spacing: 0.5px
width: 100%
h2
color: #232323
float: left
font-family: Montserrat
font-size: 180px
font-weight: bold
margin: 0
width: 100%
a
background: #ff5f5f none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #ffffff
display: inline-block
float: none
font-family: Montserrat
font-size: 13px
padding: 13px 22px
.mockup
float: left
margin-bottom: 60px
width: 100%
.error-sec > p
float: left
margin-bottom: 40px
width: 100%
.table-area
float: left
padding: 40px
width: 100%
.table-responsive
float: left
width: 100%
.scroll-box
float: left
padding: 40px
width: 100% !important
#map-canvas
float: left
margin-top: 50px
min-height: 390px
width: 100%
#map-canvas-two
float: left
min-height: 390px
width: 100%
#map, #maptwo
height: 420px
width: 100%
#vector-map
background-color: red
float: left
height: 570px
margin: 43px 0
width: 100%
position: relative
/* Ribbon Grids
.ribbon-box
float: left
width: 100%
.ribbon-sec > p
color: #777777
float: left
font-family: open sans
font-size: 13px
font-weight: 500
letter-spacing: 0.3px
line-height: 24px
margin: 0
width: 100%
.ribbon-box > h2
color: #838383
float: left
font-family: open sans
font-size: 18px
font-weight: 400
line-height: 14px
margin: 0
padding: 20px 0
.ribbon-wrapper
width: 85px
height: 88px
overflow: hidden
position: absolute
top: -3px
right: -3px
.ribbon-design
color: #FFFFFF
font: bold 12px Sans-Serif
left: -5px
letter-spacing: 0.35px
padding: 7px 0
position: relative
text-align: center
top: 15px
width: 120px
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
transform: rotate(45deg)
&:before, &:after
content: ""
border-top: 3px solid #6e8900
border-left: 3px solid transparent
border-right: 3px solid transparent
position: absolute
bottom: -3px
&:before
left: 0
&:after
right: 0
.ribbon-sec
background: none repeat scroll 0 0 #FFFFFF
border: 1px solid #ECECEC
float: left
padding: 20px
position: relative
z-index: 90
-webkit-border-radius: 3px
-moz-border-radius: 3px
-ms-border-radius: 3px
-o-border-radius: 3px
border-radius: 3px
/* Progress Bar
.progress-sec
float: left
padding: 40px
width: 100%
.small-progress
height: 10px !important
.large-progress
height: 30px
.medium-progress
height: 20px
/* Collapse
.collapse-sec
float: left
padding: 40px
width: 100%
.panel-group
float: left
width: 100%
.panel
border-color: #e8ecec
-webkit-border-radius: 0
-moz-border-radius: 0
-ms-border-radius: 0
-o-border-radius: 0
border-radius: 0
box-shadow: none
.panel-heading
border-color: #e8ecec
-webkit-border-radius: 0
-moz-border-radius: 0
-ms-border-radius: 0
-o-border-radius: 0
border-radius: 0
box-shadow: none
padding: 15px 28px
> .panel-collapse
border-color: #e8ecec
.panel-body
font-family: Open Sans
font-size: 13px
letter-spacing: 0.5px
line-height: 26px
padding: 33px 40px
&.white-collapse .panel-heading
background: #ffffff none repeat scroll 0 0
.panel .panel-heading h4
font-size: 15px
/* Services
.services
float: left
padding: 40px
text-align: center
width: 100%
span
color: #ff5f5f
display: inline-block
float: none
font-size: 30px
height: 80px
line-height: 77px
text-align: center
width: 80px
h3
float: left
font-size: 17px
margin: 10px 0
width: 100%
&.style2 span
color: #ffffff
margin-bottom: 20px
&.style3
padding: 0
text-align: left
> span
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
color: #ffffff
float: left
font-size: 19px
height: 60px
line-height: 60px
margin-bottom: -29px
margin-left: 40px
position: relative
width: 60px
.service-detail
background: #ffffff none repeat scroll 0 0
float: left
padding: 50px 40px 40px
width: 100%
> h3
padding-bottom: 20px
position: relative
&::before
background: #e8ecec none repeat scroll 0 0
bottom: 0
content: ""
height: 2px
left: 0
position: absolute
width: 40px
/*===== Comming Soon ====
.commingsoon
background: rgba(0, 0, 0, 0) url("../images/resource/comming-soon.jpg") no-repeat scroll 0 (0 / cover)
float: left
padding: 70px 0 120px
position: relative
z-index: 1
width: 100%
text-align: center
.logo
color: #ffffff
display: inline-block
float: none
min-width: auto
padding: 0
text-align: center
width: 100%
> a
color: #ffffff
display: inline-block
float: none
font-size: 22px
.countdown-sec
float: left
margin-top: 90px
width: 100%
ul.countdown
float: left
list-style: outside none none
margin: 0
padding: 0
width: 100%
.commingsoon
.logo > a > i
font-size: 22px
&:before
content: ""
position: absolute
left: 0
top: 0
height: 100%
width: 100%
z-index: -1
background: black
opacity: 0.85
.comming-soon-logo
float: left
margin-bottom: 140px
width: 100%
.timer
float: left
text-align: center
width: 100%
.countdown
display: inline-block
list-style: outside none none
margin: 0
padding: 0
li
-webkit-border-radius: 30px
-moz-border-radius: 30px
-ms-border-radius: 30px
-o-border-radius: 30px
border-radius: 30px
display: inline-block
height: 135px
margin: 0 10px
padding: 35px 25px 20px
position: relative
text-align: center
width: 135px
span
color: #ffffff
float: left
font-family: lato
font-size: 45px
font-weight: 700
letter-spacing: 2px
line-height: 39px
width: 100%
p
color: #ffffff
float: left
font-family: lato
font-size: 13px
font-weight: 400
letter-spacing: 3px
line-height: 15px
margin-top: 16px
text-transform: uppercase
width: 100%
&:before
border: 2px solid #ffffff
border-bottom: 0 none
bottom: 0
content: ""
height: 100%
left: 0
position: absolute
width: 100%
-webkit-border-radius: 30px
-moz-border-radius: 30px
-ms-border-radius: 30px
-o-border-radius: 30px
border-radius: 30px
&:after
border-bottom: 2px solid #4f4f4f
border-left: 2px solid #4f4f4f
border-right: 2px solid #4f4f4f
bottom: 0
content: ""
height: 50%
left: 0
position: absolute
width: 100%
-webkit-border-radius: 0 0 30px 30px
-moz-border-radius: 0 0 30px 30px
-ms-border-radius: 0 0 30px 30px
-o-border-radius: 0 0 30px 30px
border-radius: 0 0 30px 30px
.fancy-social
float: left
margin-top: 70px
text-align: center
width: 100%
>
span
color: #ffffff
float: left
font-size: 20px
font-weight: 900
letter-spacing: 2px
margin-bottom: 20px
text-transform: uppercase
width: 100%
a
background: rgba(80, 80, 80, 0.25) none repeat scroll 0 0
color: #ffffff
display: inline-block
font-size: 14px
height: 36px
line-height: 36px
margin: 0 3px
position: relative
text-align: center
width: 36px
.commingsoon form.subscribtion
float: left
height: 55px
margin-top: 80px
width: 100%
>
input
background: #ffffff none repeat scroll 0 0
border: medium none
display: inline-block
font-family: Montserrat
padding: 15px 50px
text-align: center
button
background: #ff5f5f none repeat scroll 0 0
border: medium none
color: #ffffff
display: inline-block
font-family: Montserrat
height: 50px
padding: 0 20px
ul.countdown > li
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
display: inline-block
height: 140px
margin: 0 5px
position: relative
width: 110px
>
span
float: left
font-family: Montserrat
font-size: 27px
margin-bottom: 5px
padding-top: 48px
width: 100%
p
color: #ff5f5f
font-family: Open Sans
font-size: 11px
letter-spacing: 0.8px
text-transform: uppercase
.pagination-sec
float: left
padding: 40px
width: 100%
.pagination
margin: 0
.imageBox
position: relative
height: 400px
width: 400px
border: 1px solid #aaa
background: #fff
overflow: hidden
background-repeat: no-repeat
cursor: move
.thumbBox
position: absolute
top: 50%
left: 50%
width: 200px
height: 200px
margin-top: -100px
margin-left: -100px
box-sizing: border-box
border: 1px solid rgb(102, 102, 102)
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5)
background: none repeat scroll 0% 0% transparent
.spinner
position: absolute
top: 0
left: 0
bottom: 0
right: 0
text-align: center
line-height: 400px
background: rgba(0, 0, 0, 0.7)
.action
width: 400px
height: 30px
margin: 10px 0
.cropped > img
margin-right: 10px
.product-filter
float: left
padding: 90px 40px 40px
width: 100%
section#options
float: left
text-align: center
width: 100%
.option-isotop
float: left
text-align: center
width: 100%
.option-set
float: left
list-style: outside none none
margin: 0 0 20px
padding: 0
text-align: center
width: 100%
> li
> a
&.selected
> i
color: #ff5f5f
color: #000000
float: left
line-height: 14px
> i
color: #c8cccc
font-size: 14px
margin-right: 11px
&:last-child
border: medium none
padding-right: 0
.filter-products
float: left
width: 100%
.option-set > li
border-right: 1px solid #e8ecec
display: inline-block
float: none
line-height: 19px
padding: 0 13px
.product-four
float: left
margin-top: 30px
width: 100%
.product-thumb
float: left
width: 100%
> img
float: left
width: 100%
.product-four >
h3
float: left
font-family: Montserrat
font-size: 17px
margin: 20px 0 5px
width: 100%
a
color: #232323
span
color: #ff5f5f
float: left
font-size: 11px
letter-spacing: 0.5px
margin-top: 1px
width: 100%
/* Our Team
.our-team
float: left
width: 100%
position: relative
> img
float: left
width: 100%
.team-box-sec
height: 100%
left: 0
padding: 10px
position: absolute
top: 0
width: 100%
.team-box
background: rgba(0, 0, 0, 0) none repeat scroll 0 0
display: table
float: left
height: 100%
padding: 20px
position: relative
text-align: center
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
width: 100%
.team-info
display: table-cell
margin-top: 50px
opacity: 0
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
vertical-align: middle
visibility: hidden
width: 100%
.team-box:hover > .team-info
margin: 0
opacity: 1
visibility: visible
.team-info >
h3
float: left
font-family: Montserrat
font-size: 17px
width: 100%
span
color: #ff5f5f
float: left
font-size: 9px
font-weight: 600
letter-spacing: 0.8px
text-transform: uppercase
width: 100%
p
float: left
margin-bottom: 0
margin-top: 13px
width: 100%
.social-btns
float: left
padding-top: 30px
text-align: center
width: 100%
> ul
float: left
list-style: outside none none
margin: 0
padding: 0
text-align: center
width: 100%
> li
display: inline-block
> a
float: left
> i
color: #ffffff
float: left
height: 34px
line-height: 34px
width: 34px
&.fa-facebook
background: #3e6baf
&.fa-twitter
background: #4dd3f0
&.fa-google-plus
background: #ff4949
.team-box:hover
background: #ffffff none repeat scroll 0 0
.tooltips-sec
float: left
padding: 40px
position: relative
width: 100%
> .tooltip
float: left
margin: 0 42px 0 0
opacity: 1
position: relative
.tooltips-on-hover
float: left
padding: 40px
width: 100%
.popover-sec-static
float: left
padding: 40px
width: 100%
> .popover
display: block
float: left
margin: 0 50px 50px 0
position: relative
.popover-on-click
float: left
padding: 40px
width: 100%
.mini-charts
float: left
padding: 40px
.chart
-webkit-border-radius: 10px
-moz-border-radius: 10px
-ms-border-radius: 10px
-o-border-radius: 10px
border-radius: 10px
padding: 0 15px
position: relative
min-height: 200px
margin: 15px auto
width: 96%
box-sizing: border-box
background-color: #fff
overflow: hidden
@media only screen and (min-width: 601px)
#DonutTicketsByDepartment
float: left
margin-right: 30px
width: 200px
#TicketByDepartmentLegends
display: block
float: left
list-style: outside none none
margin: 39px 0
padding: 0
.title
display: block
margin-right: 150px
.author
float: right
width: 150px
.lt
display: none
@media only screen and (max-width: 600px)
.chart
text-align: center
#DonutTicketsByDepartment
width: 200px
margin: 0 auto
float: none
#TicketByDepartmentLegends
list-style-type: none
padding-top: 0px !important
margin: 0 auto
display: inline-block
text-align: left
.title
display: block
text-align: center
.author
display: block
text-align: center
margin-top: 5px
.lt
display: block
.rt
display: none
#TicketByDepartmentLegends li
margin-bottom: 10px
font-family: 'Titillium Web', sans-serif
font-weight: 400
color: #000
span
&.icon
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
float: left
height: 12px
margin: 8px 10px
width: 12px
&.label
color: #757575
display: block
font-family: Open Sans
font-size: 13px
font-weight: normal
line-height: 22px
margin-left: 30px
text-align: left
.pie-responsive
float: left
padding: 40px
position: relative
width: 100%
.form-elements-sec
float: left
padding: 40px
width: 100%
form
margin-bottom: 10px
select
margin-bottom: 10px
/* CSS Document
.stepsForm
width: 100%
box-sizing: border-box
line-height: 1
.sf-error
border: solid 1px #C00 !important
+ span
border-color: #C00 !important
#sf-msg
display: inline-block
padding: 1rem
.sf-msg-error
color: #c00
.sf-msg-success
color: #090
.sf-steps
box-sizing: border-box
float: left
height: auto
margin: 0
padding: 0
width: 100%
.sf-steps-content
width: 100%
box-sizing: border-box
border-bottom: solid 2px #2096cd
font-size: 18px
.sf-steps-content > div
background: #ccc none repeat scroll 0 0
-webkit-border-radius: 0
-moz-border-radius: 0
-ms-border-radius: 0
-o-border-radius: 0
border-radius: 0
color: #fff
cursor: pointer
display: inline-block
font-family: Montserrat
font-size: 15px
overflow: hidden
padding: 13px 30px 13px 60px
position: relative
.sf-steps-center > div
display: block
padding: 1rem 2rem 1rem 4rem
background: #CCC
color: #FFF
cursor: pointer
position: relative
-webkit-border-radius: 3px
-moz-border-radius: 3px
border-radius: 3px
overflow: hidden
box-sizing: border-box
.sf-steps-content > div
&.sf-active
background: #2096cd
> span
background: #1b7fad
> span:after
background: url('data:image/svg+xml; charset=utf-8,') 0 0 no-repeat
>
span
background: #aaa none repeat scroll 0 0
bottom: 0
font-size: 15px
left: 0
padding: 13px
position: absolute
top: 0
i
position: absolute
right: 0
top: 0
bottom: 0
background: url(https://html.webinane.com/electric-admin/img/sf-steps-activated.png) center no-repeat
padding: 1rem
> span:after
content: ''
display: block
width: 10px
position: absolute
right: -10px
height: 100%
top: 0
background: url('data:image/svg+xml; charset=utf-8,') 0 0 no-repeat
.sf-steps-form
display: block
float: left
position: relative
width: 100%
.sf-steps-navigation
padding: 0 1rem
.sf-button
background: #2096cd none repeat scroll 0 0
border: medium none
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
color: #fff
cursor: pointer
font-family: Montserrat
outline: medium none
padding: 11px 37px
.sf-content
width: 100%
box-sizing: border-box
display: none
overflow: hidden
padding: 0
margin: 0
list-style-type: none
margin-top: 30px
> li
width: 100%
height: auto
overflow: hidden
margin-bottom: 2rem
padding: 3px 0
input
&[type="text"], &[type="tel"], &[type="email"], &[type="password"]
border: 1px solid #e8ecec
-webkit-border-radius: 0
-moz-border-radius: 0
-ms-border-radius: 0
-o-border-radius: 0
border-radius: 0
box-sizing: border-box
font-family: Open Sans
outline: medium none
padding: 11px 30px
width: 100%
textarea
border: 1px solid #e8ecec
-webkit-border-radius: 0 !important
-moz-border-radius: 0 !important
-ms-border-radius: 0 !important
-o-border-radius: 0 !important
border-radius: 0 !important
box-sizing: border-box
height: 100px
outline: medium none
overflow: auto
padding: 11px 20px
width: 100%
label.sf-select
position: relative
display: block
>
select
border: 1px solid #e8ecec
-webkit-border-radius: 0
-moz-border-radius: 0
-ms-border-radius: 0
-o-border-radius: 0
border-radius: 0
box-sizing: border-box
color: #555555
font-family: Open Sans
font-weight: normal
outline: medium none
padding: 1rem
width: 100%
span
position: absolute
display: inline-block
text-align: center
right: 1px
top: 1px
bottom: 1px
width: 3.5rem
pointer-events: none
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
-ms-box-sizing: border-box
-o-box-sizing: border-box
box-sizing: border-box
background-color: #e8e8e8
border-left: solid 1px #DDD
&::after
content: ""
display: inline-block
width: 20%
height: 20%
-webkit-transform: rotate(-45deg) translate(-80%, 80%)
-moz-transform: rotate(-45deg) translate(-80%, 80%)
-ms-transform: rotate(-45deg) translate(-80%, 80%)
-o-transform: rotate(-45deg) translate(-80%, 80%)
transform: rotate(-45deg) translate(-80%, 80%)
border: 0 solid #fff
border-left-width: .25em
border-bottom-width: 0.25em
select:focus + span
background-color: #2096cd
.sf-radio, .sf-check
width: 100%
height: auto
padding: 1rem 0
.sf-radio label, .sf-check label
display: inline-block
font-weight: 500
margin-right: 20px
.sf-radio label input[type=radio], .sf-check label input[type=checkbox]
position: absolute
pointer-events: none
opacity: 0
margin: 0
padding: 0
height: 10px
.sf-radio label input[type=radio] + span, .sf-check label input[type=checkbox] + span
display: inline-block
width: 18px
height: 18px
background-color: #fff
border: 1px solid #cecece
text-align: center
vertical-align: top
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
-ms-box-sizing: border-box
-o-box-sizing: border-box
box-sizing: border-box
.sf-radio label input[type=radio] + span::after, .sf-check label input[type=checkbox] + span::after
content: ""
display: inline-block
opacity: 0
width: 100%
height: 100%
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
-ms-box-sizing: border-box
-o-box-sizing: border-box
box-sizing: border-box
-webkit-transition: all 200ms
-moz-transition: all 200ms
-ms-transition: all 200ms
-o-transition: all 200ms
transition: all 200ms
.sf-radio label input[type=radio]:focus + span, .sf-check label input[type=checkbox]:focus + span, .sf-radio label input[type=radio]:active + span, .sf-check label input[type=checkbox]:active + span
border-color: #2096cd
.sf-radio label input[type=radio]:checked + span::after, .sf-check label input[type=checkbox]:checked + span::after
opacity: 1
.sf-radio label input[type=radio].error + span, .sf-check label input[type=checkbox].error + span
border-color: #e2513f
border-width: 2px
.sf-radio label input[type=radio]
+ span
-webkit-border-radius: 2em
-moz-border-radius: 2em
border-radius: 2em
&::after
-webkit-border-radius: 1em
-moz-border-radius: 1em
border-radius: 1em
background-color: #2096cd
&:checked + span::after
border: 0.2em solid #fff
.sf-check label input[type=checkbox]
+ span
-webkit-border-radius: 2px
-moz-border-radius: 2px
border-radius: 2px
-moz-box-shadow: 0 0 5px #ddd
-webkit-box-shadow: 0 0 5px #ddd
box-shadow: 0 0 5px #ddd
&::after
height: 45%
width: 75%
background-color: transparent
border: 0 solid #2096cd
vertical-align: bottom
-webkit-transform: rotate(-45deg) translate(50%, -75%)
-moz-transform: rotate(-45deg) translate(50%, -75%)
-ms-transform: rotate(-45deg) translate(50%, -75%)
-o-transform: rotate(-45deg) translate(50%, -75%)
transform: rotate(-45deg) translate(50%, -75%)
&:checked + span::after
border-left-width: .2em
border-bottom-width: 0.2em
input
&[type=text]:focus, &[type=tel]:focus, &[type=password]:focus, &[type=email]:focus
border-color: #2096cd
-webkit-box-shadow: 0px 0px 5px 0px rgba(32, 150, 205, 1)
-moz-box-shadow: 0px 0px 5px 0px rgba(32, 150, 205, 1)
box-shadow: 0px 0px 5px 0px rgba(32, 150, 205, 1)
label.sf-select > select:focus, textarea:focus
border-color: #2096cd
-webkit-box-shadow: 0px 0px 5px 0px rgba(32, 150, 205, 1)
-moz-box-shadow: 0px 0px 5px 0px rgba(32, 150, 205, 1)
box-shadow: 0px 0px 5px 0px rgba(32, 150, 205, 1)
input, select, textarea, button
-webkit-border-radius: 3px
-moz-border-radius: 3px
border-radius: 3px
.sf-shadow
input, select, textarea
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1)
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1)
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1)
.sf-align-right
text-align: right
.sf-align-center
text-align: center
>
span#sf-msg
display: block
clear: both
margin: 0 auto
button
display: block
clear: both
margin: 0 auto
margin-bottom: 10px
.stepsForm
.column_1
width: 16.666666667%
.column_2
width: 33.333333334%
.column_3
width: 50%
.column_4
width: 66.666666667%
.column_5
width: 83.333333334%
.column_6
width: 100%
/*RED Style******************************************
.sf-theme-red
.sf-steps .sf-steps-content
border-color: #f44a56
> div.sf-active
background: #f44a56
> span
background: #c63943
&:after
background: url('data:image/svg+xml; charset=utf-8,') 0 0 no-repeat
.sf-radio label input[type=radio]:focus + span, .sf-check label input[type=checkbox]:focus + span, .sf-radio label input[type=radio]:active + span, .sf-check label input[type=checkbox]:active + span
border-color: #f44a56
.sf-radio label input[type=radio] + span::after
background-color: #f44a56
.sf-check label input[type=checkbox] + span::after
border-color: #f44a56
label.sf-select > select:focus + span
background-color: #f44a56
input
&[type=text]:focus, &[type=tel]:focus, &[type=password]:focus, &[type=email]:focus
border-color: #f44a56
-webkit-box-shadow: 0px 0px 5px 0px rgba(244, 74, 85, 1)
-moz-box-shadow: 0px 0px 5px 0px rgba(244, 74, 85, 1)
box-shadow: 0px 0px 5px 0px rgba(244, 74, 85, 1)
label.sf-select > select:focus, textarea:focus
border-color: #f44a56
-webkit-box-shadow: 0px 0px 5px 0px rgba(244, 74, 85, 1)
-moz-box-shadow: 0px 0px 5px 0px rgba(244, 74, 85, 1)
box-shadow: 0px 0px 5px 0px rgba(244, 74, 85, 1)
.sf-steps-navigation > button
background: #f44a56
/*purple Style******************************************
.sf-theme-purple
.sf-steps .sf-steps-content
border-color: #795aac
> div.sf-active
background: #795aac
> span
background: #60478a
&:after
background: url('data:image/svg+xml; charset=utf-8,') 0 0 no-repeat
.sf-radio label input[type=radio]:focus + span, .sf-check label input[type=checkbox]:focus + span, .sf-radio label input[type=radio]:active + span, .sf-check label input[type=checkbox]:active + span
border-color: #795aac
.sf-radio label input[type=radio] + span::after
background-color: #795aac
.sf-check label input[type=checkbox] + span::after
border-color: #795aac
label.sf-select > select:focus + span
background-color: #795aac
input
&[type=text]:focus, &[type=tel]:focus, &[type=password]:focus, &[type=email]:focus
border-color: #795aac
-webkit-box-shadow: 0px 0px 5px 0px rgba(121, 90, 172, 1)
-moz-box-shadow: 0px 0px 5px 0px rgba(121, 90, 172, 1)
box-shadow: 0px 0px 5px 0px rgba(121, 90, 172, 1)
label.sf-select > select:focus, textarea:focus
border-color: #795aac
-webkit-box-shadow: 0px 0px 5px 0px rgba(121, 90, 172, 1)
-moz-box-shadow: 0px 0px 5px 0px rgba(121, 90, 172, 1)
box-shadow: 0px 0px 5px 0px rgba(121, 90, 172, 1)
.sf-steps-navigation > button
background: #795aac
/*green Style******************************************
.sf-theme-green
.sf-steps .sf-steps-content
border-color: #27ae60
> div.sf-active
background: #27ae60
> span
background: #1d864a
&:after
background: url('data:image/svg+xml; charset=utf-8,') 0 0 no-repeat
.sf-radio label input[type=radio]:focus + span, .sf-check label input[type=checkbox]:focus + span, .sf-radio label input[type=radio]:active + span, .sf-check label input[type=checkbox]:active + span
border-color: #27ae60
.sf-radio label input[type=radio] + span::after
background-color: #27ae60
.sf-check label input[type=checkbox] + span::after
border-color: #27ae60
label.sf-select > select:focus + span
background-color: #27ae60
input
&[type=text]:focus, &[type=tel]:focus, &[type=password]:focus, &[type=email]:focus
border-color: #27ae60
-webkit-box-shadow: 0px 0px 5px 0px rgba(29, 134, 74, 1)
-moz-box-shadow: 0px 0px 5px 0px rgba(29, 134, 74, 1)
box-shadow: 0px 0px 5px 0px rgba(29, 134, 74, 1)
label.sf-select > select:focus, textarea:focus
border-color: #27ae60
-webkit-box-shadow: 0px 0px 5px 0px rgba(29, 134, 74, 1)
-moz-box-shadow: 0px 0px 5px 0px rgba(29, 134, 74, 1)
box-shadow: 0px 0px 5px 0px rgba(29, 134, 74, 1)
.sf-steps-navigation > button
background: #27ae60
/*turquoise Style******************************************
.sf-theme-turquoise
.sf-steps .sf-steps-content
border-color: #1fb5ad
> div.sf-active
background: #1fb5ad
> span
background: #18908a
&:after
background: url('data:image/svg+xml; charset=utf-8,') 0 0 no-repeat
.sf-radio label input[type=radio]:focus + span, .sf-check label input[type=checkbox]:focus + span, .sf-radio label input[type=radio]:active + span, .sf-check label input[type=checkbox]:active + span
border-color: #1fb5ad
.sf-radio label input[type=radio] + span::after
background-color: #1fb5ad
.sf-check label input[type=checkbox] + span::after
border-color: #1fb5ad
label.sf-select > select:focus + span
background-color: #1fb5ad
input
&[type=text]:focus, &[type=tel]:focus, &[type=password]:focus, &[type=email]:focus
border-color: #1fb5ad
-webkit-box-shadow: 0px 0px 5px 0px rgba(31, 181, 174, 1)
-moz-box-shadow: 0px 0px 5px 0px rgba(31, 181, 174, 1)
box-shadow: 0px 0px 5px 0px rgba(31, 181, 174, 1)
label.sf-select > select:focus, textarea:focus
border-color: #1fb5ad
-webkit-box-shadow: 0px 0px 5px 0px rgba(31, 181, 174, 1)
-moz-box-shadow: 0px 0px 5px 0px rgba(31, 181, 174, 1)
box-shadow: 0px 0px 5px 0px rgba(31, 181, 174, 1)
.sf-steps-navigation > button
background: #1fb5ad
.step-form-sec
float: left
padding: 40px
width: 100%
/* Profile
.profile-sec
float: left
width: 100%
.profile-banner-sec
float: left
min-height: 110px
position: relative
width: 100%
> ul
left: 0
list-style: outside none none
margin: 0
padding: 0
position: absolute
text-align: center
top: 50%
-webkit-transform: translateY(-50%)
-moz-transform: translateY(-50%)
-ms-transform: translateY(-50%)
-o-transform: translateY(-50%)
transform: translateY(-50%)
width: 100%
li
display: inline-block
margin: 0 10px
>
a, label
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 30px
-moz-border-radius: 30px
-ms-border-radius: 30px
-o-border-radius: 30px
border-radius: 30px
color: #2e2e2e
float: left
font-family: Montserrat
font-weight: normal
padding: 13px 40px
margin: 0
cursor: pointer
a:hover, label:hover
background: #ff5f5f none repeat scroll 0 0
color: #ffffff
a > i, label i
color: #ff5f5f
margin-right: 9px
a:hover > i, label:hover i
color: #ffffff
> img
-webkit-border-radius: 5px 5px 0 0
-moz-border-radius: 5px 5px 0 0
-ms-border-radius: 5px 5px 0 0
-o-border-radius: 5px 5px 0 0
border-radius: 5px 5px 0 0
float: left
max-width: 100%
.user-bar
background: #fff none repeat scroll 0 0
-webkit-border-radius: 0 0 5px 5px
-moz-border-radius: 0 0 5px 5px
-ms-border-radius: 0 0 5px 5px
-o-border-radius: 0 0 5px 5px
border-radius: 0 0 5px 5px
float: left
padding-left: 20%
position: relative
width: 100%
.user-thumb
float: left
left: 0
position: absolute
top: 50%
-webkit-transform: translateY(-50%)
-moz-transform: translateY(-50%)
-ms-transform: translateY(-50%)
-o-transform: translateY(-50%)
transform: translateY(-50%)
width: 20%
>
img
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
float: left
margin-top: 53px
padding: 0 30px
width: 100%
h3
float: left
font-family: Montserrat
font-size: 18px
text-align: center
width: 100%
span
color: #a5a5a5
float: left
font-family: Open Sans
font-size: 11px
letter-spacing: 0.5px
text-align: center
width: 100%
> i
color: #ff5f5f
margin-right: 4px
.user-bar >
ul
float: right
list-style: outside none none
margin: 0
padding: 0
> li
color: #2e2e2e
float: left
font-family: Montserrat
font-size: 19px
padding: 23px 25px 19px
> span
color: #858585
display: list-item
font-family: Open Sans
font-size: 11px
font-style: italic
letter-spacing: 0.5px
list-style: outside none none
margin-top: 2px
a
-webkit-border-radius: 20px
-moz-border-radius: 20px
-ms-border-radius: 20px
-o-border-radius: 20px
border-radius: 20px
color: #ffffff
float: right
font-family: Montserrat
font-size: 13px
margin: 22px 40px
padding: 10px 23px
.social-btns
float: left
margin: 26px 0 0
padding: 0
width: auto
.profile-all
float: left
margin-top: 104px
width: 100%
.profile-banner-sec li > input
display: none
.my-location > #mapthree
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
float: left
height: 300px
width: 100%
.toggleWrapper
float: left
margin-top: 20px
input
position: absolute
left: -99em
.toggle
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
cursor: pointer
display: inline-block
height: 30px
position: relative
-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
-moz-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
-ms-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
-o-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
width: 70px
&::before, &::after
color: #fff
font-family: Open Sans
font-size: 9px
line-height: 32px
position: absolute
-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
-moz-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
-ms-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
-o-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
z-index: 2
&::before
color: #ffffff
content: "OFF"
left: 11px
&::after
color: #b0b0b0
content: "ON"
font-weight: normal
right: 11px
.toggle__handler
background: #ff5f5f none repeat scroll 0 0
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
display: inline-block
height: 24px
left: 3px
position: relative
top: 3px
-webkit-transform: translateX(0px)
-moz-transform: translateX(0px)
-ms-transform: translateX(0px)
-o-transform: translateX(0px)
transform: translateX(0px)
-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
-moz-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
-ms-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
-o-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
width: 34px
z-index: 1
input:checked + .toggle
background: #66B317
&:before
color: #fff
&::after
color: #66b317
left: 42px
.toggle__handler
background: #ffffff none repeat scroll 0 0
border-color: #fff
left: -27px
-webkit-transform: translateX(60px)
-moz-transform: translateX(60px)
-ms-transform: translateX(60px)
-o-transform: translateX(60px)
transform: translateX(60px)
width: 34px
.show-elements
float: left
.billing-sec .widget-title
margin-bottom: 20px
.inbox-sec
float: left
margin-top: 30px
width: 100%
> .row
margin: 0 -1px
> div
padding: 0 1px
.inbox-navigation
background: #ffffff none repeat scroll 0 0
float: left
padding-bottom: 59px
width: 100%
.inbox-panel-head
float: left
padding: 40px
width: 100%
>
img
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
float: left
margin-right: 20px
width: 60px
h1
display: block
font-family: Montserrat
font-size: 16px
margin: 3px 0 8px
> i
font-style: normal
a
color: #757575
display: inline-block
font-family: Open Sans
font-size: 12px
letter-spacing: 0.4px
margin-right: 10px
margin-top: 1px
> i
margin-right: 5px
ul
float: left
list-style: outside none none
margin: 40px 0 0
padding: 0
text-align: center
width: 100%
> li
display: inline-block
float: none
> a
background: #ff5f5f none repeat scroll 0 0
-webkit-border-radius: 45px
-moz-border-radius: 45px
-ms-border-radius: 45px
-o-border-radius: 45px
border-radius: 45px
color: #fff
float: left
font-family: Montserrat
font-size: 14px
padding: 10px 31px
.message-list > li:last-child
border-bottom: medium none
.inbox-navigation > ul
float: left
list-style: outside none none
margin: 0
padding: 0
width: 100%
> li
>
a
color: #555555
float: left
font-family: Open Sans
font-size: 12px
letter-spacing: 0.5px
> i
color: #a0a0a0
font-size: 14px
margin-right: 3px
width: 21px
span
background: #7373ff none repeat scroll 0 0
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
color: #ffffff
float: right
font-size: 10px
font-weight: 600
height: 20px
text-align: center
width: 20px
background: #f5f5f5 none repeat scroll 0 0
float: left
margin-bottom: 1px
padding: 16px 40px
width: 100%
.flaged
float: left
width: 100%
>
h3
float: left
font-family: Montserrat
font-size: 16px
margin: 10px 0 0
padding: 24px 40px
width: 100%
> i
margin-right: 13px
ul
float: left
list-style: outside none none
margin: 0
padding: 0
width: 100%
li
float: left
padding: 8px 40px
width: 100%
a i
margin-right: 10px
.inbox-lists
float: left
width: 100%
.inbox-action
background: #ffffff none repeat scroll 0 0
float: left
margin-bottom: 2px
width: 100%
> ul
float: left
list-style: outside none none
margin: 0
padding: 20px 30px
width: 100%
> li
float: left
margin-right: 20px
>
label, a
color: #959595
float: left
font-family: Open Sans
font-size: 13px
font-weight: 500
line-height: 20px
margin: 0
label input
float: left
margin: 4px 8px 0 0
a i
font-size: 14px
margin-right: 5px
width: 13px
.mesages-lists
background: #ffffff none repeat scroll 0 0
float: left
overflow: hidden
padding-top: 140px
position: relative
width: 100%
#searchDir
> form
background: #f5f5f5 none repeat scroll 0 0
border-color: #dadede
margin: 0
box-shadow: 6px 1px 10px rgba(0, 0, 0, 0.1)
float: left
left: 0
padding: 30px
position: absolute
top: 0
width: 100%
.message-list
float: left
list-style: outside none none
margin: 0
padding: 0 30px
width: 100%
> li
border-bottom: 1px solid #e8ecec
float: left
padding-bottom: 22px
padding-top: 22px
width: 100%
>
.select-message
float: left
span.star-this
cursor: pointer
float: left
padding-left: 16px
width: 40px
.sender-name
display: inline-block
font-family: Montserrat
font-size: 14px
margin: 0
width: auto
span.make-important
cursor: pointer
float: left
margin-right: 30px
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
p
float: left
margin: 5px 0 0
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
width: 100%
a
color: #afafaf
display: inline-block
font-size: 13px
margin-left: 40px
span
&.star-this.starred
color: orange
> i::before
content: "\f005"
&.make-important.important-done
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
color: #ff5f5f
/* GitHub Theme
.prettyprint
background: white
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace
font-size: 12px
line-height: 1.5
border: 1px solid #ccc
padding: 10px
.pln
color: #333333
@media screen
.str
color: #dd1144
.kwd
color: #333333
.com
color: #999988
.typ, .lit
color: #445588
.pun, .opn, .clo
color: #333333
.tag
color: navy
.atn
color: teal
.atv
color: #dd1144
.dec
color: #333333
.var
color: teal
.fun
color: #990000
@media print, projection
.str
color: #006600
.kwd
color: #006
font-weight: bold
.com
color: #600
font-style: italic
.typ
color: #404
font-weight: bold
.lit
color: #004444
.pun, .opn, .clo
color: #444400
.tag
color: #006
font-weight: bold
.atn
color: #440044
.atv
color: #006600
/* Specify class=linenums on a pre to get line numbering
ol.linenums
margin-top: 0
margin-bottom: 0
/* IE indents via margin-left
li
&.L0, &.L1, &.L2, &.L3, &.L4, &.L5, &.L6, &.L7, &.L8, &.L9, &.L1, &.L3, &.L5, &.L7, &.L9
/*
/* Alternate shading for lines
.nedemo
width: 450px
height: 200px
background: #ffffff
border: solid 1px #E9E9E9
-webkit-border-radius: 2px
-moz-border-radius: 2px
-ms-border-radius: 2px
-o-border-radius: 2px
border-radius: 2px
margin: 0 auto
margin-top: 10%
padding: 24px
.neditor
text-align: left
font-family: Arial,sans-serif
border: 1px solid #d2d6d7
>
.ne_toolbar
border-bottom: 1px solid #d2d6d7
> ul
margin: 0 !important
padding: 0 !important
list-style: none
height: 40px
display: table
> li
display: inline-block
text-align: center
width: 40px
height: 40px
vertical-align: middle
border-right: 1px solid #d2d6d7
cursor: pointer
position: relative
svg
width: 24px
height: 24px
margin-top: 8px
margin-bottom: 8px
textarea
border: none
outline: 0
width: 100%
height: calc(100% - 41px)
padding: 10px
resize: none
.nScriptList
position: absolute
background-color: #fff
width: 250px
list-style: none
padding: 0
margin: 0 0 0 -100px
height: 200px
overflow-y: scroll
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)
display: none
.nScriptListShow
display: block
.nScriptList > li > a
display: block
height: 30px
line-height: 30px
color: #333
text-decoration: none
&:hover
background: #E0E0E0
.compose-email-sec
float: left
padding: 0 0 0 30px
width: 100%
.field > div
float: left
width: 100%
.compose-email-sec button
margin: 0
.btns
border: medium none
color: #ffffff
float: left
font-family: Montserrat
margin-bottom: 2px
margin-right: 2px
padding: 0
-webkit-transition: all 0.4s ease 0s
-moz-transition: all 0.4s ease 0s
-ms-transition: all 0.4s ease 0s
-o-transition: all 0.4s ease 0s
transition: all 0.4s ease 0s
&:hover
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
.buttons-sec
float: left
padding: 40px
width: 100%
.lrg-btn
font-size: 15px
padding: 12px 21px
.mdm-btn
font-size: 13px
padding: 10px 18px
.sml-btn
font-size: 13px
padding: 10px 18px
font-size: 11px
padding: 6px 14px
.lrg-radius
-webkit-border-radius: 30px
-moz-border-radius: 30px
-ms-border-radius: 30px
-o-border-radius: 30px
border-radius: 30px
.mdm-radius
-webkit-border-radius: 10px
-moz-border-radius: 10px
-ms-border-radius: 10px
-o-border-radius: 10px
border-radius: 10px
.sml-radius
-webkit-border-radius: 5px
-moz-border-radius: 5px
-ms-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
.btns.tag-btn
padding-left: 40px
position: relative
&::before
background: #ffffff none repeat scroll 0 0
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
content: ""
height: 5px
left: 22px
margin-top: -2px
position: absolute
top: 50%
width: 5px
.nav-pills > li > a
color: #ffffff
.nav
> li > a
&:focus, &:hover
background: #929595 none repeat scroll 0 0
.open > a
background: #929595 none repeat scroll 0 0
&:focus, &:hover
background: #929595 none repeat scroll 0 0
.btn-group a
color: #ffffff
&:hover
color: #fff
/*!
* Hover.css (http://ianlunn.github.io/Hover/)
* Version: 2.0.1
* Author: Ian Lunn @IanLunn
* Author URL: http://ianlunn.co.uk/
* Github: https://github.com/IanLunn/Hover
*
* Made available under a MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* Hover.css Copyright Ian Lunn 2014. Generated with Sass.
.hvr-grow
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:active, &:focus, &:hover
-webkit-transform: scale(1.1)
transform: scale(1.1)
.hvr-shrink
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:active, &:focus, &:hover
-webkit-transform: scale(0.9)
transform: scale(0.9)
@-webkit-keyframes hvr-pulse
25%
-webkit-transform: scale(1.1)
transform: scale(1.1)
75%
-webkit-transform: scale(0.9)
transform: scale(0.9)
@keyframes hvr-pulse
25%
-webkit-transform: scale(1.1)
transform: scale(1.1)
75%
-webkit-transform: scale(0.9)
transform: scale(0.9)
.hvr-pulse
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-pulse
animation-name: hvr-pulse
-webkit-animation-duration: 1s
animation-duration: 1s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: infinite
animation-iteration-count: infinite
@-webkit-keyframes hvr-pulse-grow
to
-webkit-transform: scale(1.1)
transform: scale(1.1)
@keyframes hvr-pulse-grow
to
-webkit-transform: scale(1.1)
transform: scale(1.1)
.hvr-pulse-grow
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-pulse-grow
animation-name: hvr-pulse-grow
-webkit-animation-duration: .3s
animation-duration: .3s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: infinite
animation-iteration-count: infinite
-webkit-animation-direction: alternate
animation-direction: alternate
@-webkit-keyframes hvr-pulse-shrink
to
-webkit-transform: scale(0.9)
transform: scale(0.9)
@keyframes hvr-pulse-shrink
to
-webkit-transform: scale(0.9)
transform: scale(0.9)
.hvr-pulse-shrink
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-pulse-shrink
animation-name: hvr-pulse-shrink
-webkit-animation-duration: .3s
animation-duration: .3s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: infinite
animation-iteration-count: infinite
-webkit-animation-direction: alternate
animation-direction: alternate
@-webkit-keyframes hvr-push
50%
-webkit-transform: scale(0.8)
transform: scale(0.8)
100%
-webkit-transform: scale(1)
transform: scale(1)
@keyframes hvr-push
50%
-webkit-transform: scale(0.8)
transform: scale(0.8)
100%
-webkit-transform: scale(1)
transform: scale(1)
.hvr-push
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-push
animation-name: hvr-push
-webkit-animation-duration: .3s
animation-duration: .3s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
@-webkit-keyframes hvr-pop
50%
-webkit-transform: scale(1.2)
transform: scale(1.2)
@keyframes hvr-pop
50%
-webkit-transform: scale(1.2)
transform: scale(1.2)
.hvr-pop
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-pop
animation-name: hvr-pop
-webkit-animation-duration: .3s
animation-duration: .3s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
.hvr-bounce-in
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .5s
transition-duration: .5s
&:active, &:focus, &:hover
-webkit-transform: scale(1.2)
transform: scale(1.2)
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)
.hvr-bounce-out
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .5s
transition-duration: .5s
&:active, &:focus, &:hover
-webkit-transform: scale(0.8)
transform: scale(0.8)
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)
.hvr-rotate
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:active, &:focus, &:hover
-webkit-transform: rotate(4deg)
transform: rotate(4deg)
.hvr-grow-rotate
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:active, &:focus, &:hover
-webkit-transform: scale(1.1) rotate(4deg)
transform: scale(1.1) rotate(4deg)
.hvr-float
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
-webkit-transform: translateY(-8px)
transform: translateY(-8px)
.hvr-sink
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
-webkit-transform: translateY(8px)
transform: translateY(8px)
@-webkit-keyframes hvr-bob
0%
-webkit-transform: translateY(-8px)
transform: translateY(-8px)
50%
-webkit-transform: translateY(-4px)
transform: translateY(-4px)
100%
-webkit-transform: translateY(-8px)
transform: translateY(-8px)
@keyframes hvr-bob
0%
-webkit-transform: translateY(-8px)
transform: translateY(-8px)
50%
-webkit-transform: translateY(-4px)
transform: translateY(-4px)
100%
-webkit-transform: translateY(-8px)
transform: translateY(-8px)
@-webkit-keyframes hvr-bob-float
100%
-webkit-transform: translateY(-8px)
transform: translateY(-8px)
@keyframes hvr-bob-float
100%
-webkit-transform: translateY(-8px)
transform: translateY(-8px)
.hvr-bob
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-bob-float,hvr-bob
animation-name: hvr-bob-float,hvr-bob
-webkit-animation-duration: .3s,1.5s
animation-duration: .3s,1.5s
-webkit-animation-delay: 0s,.3s
animation-delay: 0s,.3s
-webkit-animation-timing-function: ease-out,ease-in-out
animation-timing-function: ease-out,ease-in-out
-webkit-animation-iteration-count: 1,infinite
animation-iteration-count: 1,infinite
-webkit-animation-fill-mode: forwards
animation-fill-mode: forwards
-webkit-animation-direction: normal,alternate
animation-direction: normal,alternate
@-webkit-keyframes hvr-hang
0%
-webkit-transform: translateY(8px)
transform: translateY(8px)
50%
-webkit-transform: translateY(4px)
transform: translateY(4px)
100%
-webkit-transform: translateY(8px)
transform: translateY(8px)
@keyframes hvr-hang
0%
-webkit-transform: translateY(8px)
transform: translateY(8px)
50%
-webkit-transform: translateY(4px)
transform: translateY(4px)
100%
-webkit-transform: translateY(8px)
transform: translateY(8px)
@-webkit-keyframes hvr-hang-sink
100%
-webkit-transform: translateY(8px)
transform: translateY(8px)
@keyframes hvr-hang-sink
100%
-webkit-transform: translateY(8px)
transform: translateY(8px)
.hvr-hang
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-hang-sink,hvr-hang
animation-name: hvr-hang-sink,hvr-hang
-webkit-animation-duration: .3s,1.5s
animation-duration: .3s,1.5s
-webkit-animation-delay: 0s,.3s
animation-delay: 0s,.3s
-webkit-animation-timing-function: ease-out,ease-in-out
animation-timing-function: ease-out,ease-in-out
-webkit-animation-iteration-count: 1,infinite
animation-iteration-count: 1,infinite
-webkit-animation-fill-mode: forwards
animation-fill-mode: forwards
-webkit-animation-direction: normal,alternate
animation-direction: normal,alternate
.hvr-skew
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:active, &:focus, &:hover
-webkit-transform: skew(-10deg)
transform: skew(-10deg)
.hvr-skew-forward
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
-webkit-transform-origin: 0 100%
transform-origin: 0 100%
&:active, &:focus, &:hover
-webkit-transform: skew(-10deg)
transform: skew(-10deg)
.hvr-skew-backward
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
-webkit-transform-origin: 0 100%
transform-origin: 0 100%
&:active, &:focus, &:hover
-webkit-transform: skew(10deg)
transform: skew(10deg)
@-webkit-keyframes hvr-wobble-vertical
16.65%
-webkit-transform: translateY(8px)
transform: translateY(8px)
33.3%
-webkit-transform: translateY(-6px)
transform: translateY(-6px)
49.95%
-webkit-transform: translateY(4px)
transform: translateY(4px)
66.6%
-webkit-transform: translateY(-2px)
transform: translateY(-2px)
83.25%
-webkit-transform: translateY(1px)
transform: translateY(1px)
100%
-webkit-transform: translateY(0)
transform: translateY(0)
@keyframes hvr-wobble-vertical
16.65%
-webkit-transform: translateY(8px)
transform: translateY(8px)
33.3%
-webkit-transform: translateY(-6px)
transform: translateY(-6px)
49.95%
-webkit-transform: translateY(4px)
transform: translateY(4px)
66.6%
-webkit-transform: translateY(-2px)
transform: translateY(-2px)
83.25%
-webkit-transform: translateY(1px)
transform: translateY(1px)
100%
-webkit-transform: translateY(0)
transform: translateY(0)
.hvr-wobble-vertical
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-wobble-vertical
animation-name: hvr-wobble-vertical
-webkit-animation-duration: 1s
animation-duration: 1s
-webkit-animation-timing-function: ease-in-out
animation-timing-function: ease-in-out
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
@-webkit-keyframes hvr-wobble-horizontal
16.65%
-webkit-transform: translateX(8px)
transform: translateX(8px)
33.3%
-webkit-transform: translateX(-6px)
transform: translateX(-6px)
49.95%
-webkit-transform: translateX(4px)
transform: translateX(4px)
66.6%
-webkit-transform: translateX(-2px)
transform: translateX(-2px)
83.25%
-webkit-transform: translateX(1px)
transform: translateX(1px)
100%
-webkit-transform: translateX(0)
transform: translateX(0)
@keyframes hvr-wobble-horizontal
16.65%
-webkit-transform: translateX(8px)
transform: translateX(8px)
33.3%
-webkit-transform: translateX(-6px)
transform: translateX(-6px)
49.95%
-webkit-transform: translateX(4px)
transform: translateX(4px)
66.6%
-webkit-transform: translateX(-2px)
transform: translateX(-2px)
83.25%
-webkit-transform: translateX(1px)
transform: translateX(1px)
100%
-webkit-transform: translateX(0)
transform: translateX(0)
.hvr-wobble-horizontal
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-wobble-horizontal
animation-name: hvr-wobble-horizontal
-webkit-animation-duration: 1s
animation-duration: 1s
-webkit-animation-timing-function: ease-in-out
animation-timing-function: ease-in-out
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
@-webkit-keyframes hvr-wobble-to-bottom-right
16.65%
-webkit-transform: translate(8px, 8px)
transform: translate(8px, 8px)
33.3%
-webkit-transform: translate(-6px, -6px)
transform: translate(-6px, -6px)
49.95%
-webkit-transform: translate(4px, 4px)
transform: translate(4px, 4px)
66.6%
-webkit-transform: translate(-2px, -2px)
transform: translate(-2px, -2px)
83.25%
-webkit-transform: translate(1px, 1px)
transform: translate(1px, 1px)
100%
-webkit-transform: translate(0, 0)
transform: translate(0, 0)
@keyframes hvr-wobble-to-bottom-right
16.65%
-webkit-transform: translate(8px, 8px)
transform: translate(8px, 8px)
33.3%
-webkit-transform: translate(-6px, -6px)
transform: translate(-6px, -6px)
49.95%
-webkit-transform: translate(4px, 4px)
transform: translate(4px, 4px)
66.6%
-webkit-transform: translate(-2px, -2px)
transform: translate(-2px, -2px)
83.25%
-webkit-transform: translate(1px, 1px)
transform: translate(1px, 1px)
100%
-webkit-transform: translate(0, 0)
transform: translate(0, 0)
.hvr-wobble-to-bottom-right
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-wobble-to-bottom-right
animation-name: hvr-wobble-to-bottom-right
-webkit-animation-duration: 1s
animation-duration: 1s
-webkit-animation-timing-function: ease-in-out
animation-timing-function: ease-in-out
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
@-webkit-keyframes hvr-wobble-to-top-right
16.65%
-webkit-transform: translate(8px, -8px)
transform: translate(8px, -8px)
33.3%
-webkit-transform: translate(-6px, 6px)
transform: translate(-6px, 6px)
49.95%
-webkit-transform: translate(4px, -4px)
transform: translate(4px, -4px)
66.6%
-webkit-transform: translate(-2px, 2px)
transform: translate(-2px, 2px)
83.25%
-webkit-transform: translate(1px, -1px)
transform: translate(1px, -1px)
100%
-webkit-transform: translate(0, 0)
transform: translate(0, 0)
@keyframes hvr-wobble-to-top-right
16.65%
-webkit-transform: translate(8px, -8px)
transform: translate(8px, -8px)
33.3%
-webkit-transform: translate(-6px, 6px)
transform: translate(-6px, 6px)
49.95%
-webkit-transform: translate(4px, -4px)
transform: translate(4px, -4px)
66.6%
-webkit-transform: translate(-2px, 2px)
transform: translate(-2px, 2px)
83.25%
-webkit-transform: translate(1px, -1px)
transform: translate(1px, -1px)
100%
-webkit-transform: translate(0, 0)
transform: translate(0, 0)
.hvr-wobble-to-top-right
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-wobble-to-top-right
animation-name: hvr-wobble-to-top-right
-webkit-animation-duration: 1s
animation-duration: 1s
-webkit-animation-timing-function: ease-in-out
animation-timing-function: ease-in-out
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
@-webkit-keyframes hvr-wobble-top
16.65%
-webkit-transform: skew(-12deg)
transform: skew(-12deg)
33.3%
-webkit-transform: skew(10deg)
transform: skew(10deg)
49.95%
-webkit-transform: skew(-6deg)
transform: skew(-6deg)
66.6%
-webkit-transform: skew(4deg)
transform: skew(4deg)
83.25%
-webkit-transform: skew(-2deg)
transform: skew(-2deg)
100%
-webkit-transform: skew(0)
transform: skew(0)
@keyframes hvr-wobble-top
16.65%
-webkit-transform: skew(-12deg)
transform: skew(-12deg)
33.3%
-webkit-transform: skew(10deg)
transform: skew(10deg)
49.95%
-webkit-transform: skew(-6deg)
transform: skew(-6deg)
66.6%
-webkit-transform: skew(4deg)
transform: skew(4deg)
83.25%
-webkit-transform: skew(-2deg)
transform: skew(-2deg)
100%
-webkit-transform: skew(0)
transform: skew(0)
.hvr-wobble-top
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transform-origin: 0 100%
transform-origin: 0 100%
&:active, &:focus, &:hover
-webkit-animation-name: hvr-wobble-top
animation-name: hvr-wobble-top
-webkit-animation-duration: 1s
animation-duration: 1s
-webkit-animation-timing-function: ease-in-out
animation-timing-function: ease-in-out
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
@-webkit-keyframes hvr-wobble-bottom
16.65%
-webkit-transform: skew(-12deg)
transform: skew(-12deg)
33.3%
-webkit-transform: skew(10deg)
transform: skew(10deg)
49.95%
-webkit-transform: skew(-6deg)
transform: skew(-6deg)
66.6%
-webkit-transform: skew(4deg)
transform: skew(4deg)
83.25%
-webkit-transform: skew(-2deg)
transform: skew(-2deg)
100%
-webkit-transform: skew(0)
transform: skew(0)
@keyframes hvr-wobble-bottom
16.65%
-webkit-transform: skew(-12deg)
transform: skew(-12deg)
33.3%
-webkit-transform: skew(10deg)
transform: skew(10deg)
49.95%
-webkit-transform: skew(-6deg)
transform: skew(-6deg)
66.6%
-webkit-transform: skew(4deg)
transform: skew(4deg)
83.25%
-webkit-transform: skew(-2deg)
transform: skew(-2deg)
100%
-webkit-transform: skew(0)
transform: skew(0)
.hvr-wobble-bottom
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transform-origin: 100% 0
transform-origin: 100% 0
&:active, &:focus, &:hover
-webkit-animation-name: hvr-wobble-bottom
animation-name: hvr-wobble-bottom
-webkit-animation-duration: 1s
animation-duration: 1s
-webkit-animation-timing-function: ease-in-out
animation-timing-function: ease-in-out
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
@-webkit-keyframes hvr-wobble-skew
16.65%
-webkit-transform: skew(-12deg)
transform: skew(-12deg)
33.3%
-webkit-transform: skew(10deg)
transform: skew(10deg)
49.95%
-webkit-transform: skew(-6deg)
transform: skew(-6deg)
66.6%
-webkit-transform: skew(4deg)
transform: skew(4deg)
83.25%
-webkit-transform: skew(-2deg)
transform: skew(-2deg)
100%
-webkit-transform: skew(0)
transform: skew(0)
@keyframes hvr-wobble-skew
16.65%
-webkit-transform: skew(-12deg)
transform: skew(-12deg)
33.3%
-webkit-transform: skew(10deg)
transform: skew(10deg)
49.95%
-webkit-transform: skew(-6deg)
transform: skew(-6deg)
66.6%
-webkit-transform: skew(4deg)
transform: skew(4deg)
83.25%
-webkit-transform: skew(-2deg)
transform: skew(-2deg)
100%
-webkit-transform: skew(0)
transform: skew(0)
.hvr-wobble-skew
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-wobble-skew
animation-name: hvr-wobble-skew
-webkit-animation-duration: 1s
animation-duration: 1s
-webkit-animation-timing-function: ease-in-out
animation-timing-function: ease-in-out
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
@-webkit-keyframes hvr-buzz
50%
-webkit-transform: translateX(3px) rotate(2deg)
transform: translateX(3px) rotate(2deg)
100%
-webkit-transform: translateX(-3px) rotate(-2deg)
transform: translateX(-3px) rotate(-2deg)
@keyframes hvr-buzz
50%
-webkit-transform: translateX(3px) rotate(2deg)
transform: translateX(3px) rotate(2deg)
100%
-webkit-transform: translateX(-3px) rotate(-2deg)
transform: translateX(-3px) rotate(-2deg)
.hvr-buzz
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-buzz
animation-name: hvr-buzz
-webkit-animation-duration: .15s
animation-duration: .15s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: infinite
animation-iteration-count: infinite
@-webkit-keyframes hvr-buzz-out
10%
-webkit-transform: translateX(3px) rotate(2deg)
transform: translateX(3px) rotate(2deg)
20%
-webkit-transform: translateX(-3px) rotate(-2deg)
transform: translateX(-3px) rotate(-2deg)
30%
-webkit-transform: translateX(3px) rotate(2deg)
transform: translateX(3px) rotate(2deg)
40%
-webkit-transform: translateX(-3px) rotate(-2deg)
transform: translateX(-3px) rotate(-2deg)
50%
-webkit-transform: translateX(2px) rotate(1deg)
transform: translateX(2px) rotate(1deg)
60%
-webkit-transform: translateX(-2px) rotate(-1deg)
transform: translateX(-2px) rotate(-1deg)
70%
-webkit-transform: translateX(2px) rotate(1deg)
transform: translateX(2px) rotate(1deg)
80%
-webkit-transform: translateX(-2px) rotate(-1deg)
transform: translateX(-2px) rotate(-1deg)
90%
-webkit-transform: translateX(1px) rotate(0)
transform: translateX(1px) rotate(0)
100%
-webkit-transform: translateX(-1px) rotate(0)
transform: translateX(-1px) rotate(0)
@keyframes hvr-buzz-out
10%
-webkit-transform: translateX(3px) rotate(2deg)
transform: translateX(3px) rotate(2deg)
20%
-webkit-transform: translateX(-3px) rotate(-2deg)
transform: translateX(-3px) rotate(-2deg)
30%
-webkit-transform: translateX(3px) rotate(2deg)
transform: translateX(3px) rotate(2deg)
40%
-webkit-transform: translateX(-3px) rotate(-2deg)
transform: translateX(-3px) rotate(-2deg)
50%
-webkit-transform: translateX(2px) rotate(1deg)
transform: translateX(2px) rotate(1deg)
60%
-webkit-transform: translateX(-2px) rotate(-1deg)
transform: translateX(-2px) rotate(-1deg)
70%
-webkit-transform: translateX(2px) rotate(1deg)
transform: translateX(2px) rotate(1deg)
80%
-webkit-transform: translateX(-2px) rotate(-1deg)
transform: translateX(-2px) rotate(-1deg)
90%
-webkit-transform: translateX(1px) rotate(0)
transform: translateX(1px) rotate(0)
100%
-webkit-transform: translateX(-1px) rotate(0)
transform: translateX(-1px) rotate(0)
.hvr-buzz-out
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
&:active, &:focus, &:hover
-webkit-animation-name: hvr-buzz-out
animation-name: hvr-buzz-out
-webkit-animation-duration: .75s
animation-duration: .75s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
.hvr-fade
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
overflow: hidden
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: color,background-color
transition-property: color,background-color
&:active, &:focus, &:hover
background-color: #2098d1
color: #fff
@-webkit-keyframes hvr-back-pulse
50%
background-color: rgba(32, 152, 209, 0.75)
@keyframes hvr-back-pulse
50%
background-color: rgba(32, 152, 209, 0.75)
.hvr-back-pulse
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
overflow: hidden
-webkit-transition-duration: .5s
transition-duration: .5s
-webkit-transition-property: color,background-color
transition-property: color,background-color
&:active, &:focus, &:hover
-webkit-animation-name: hvr-back-pulse
animation-name: hvr-back-pulse
-webkit-animation-duration: 1s
animation-duration: 1s
-webkit-animation-delay: .5s
animation-delay: .5s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: infinite
animation-iteration-count: infinite
background-color: #2098d1
background-color: #2098d1
color: #fff
.hvr-sweep-to-right
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: #2098d1
-webkit-transform: scaleX(0)
transform: scaleX(0)
-webkit-transform-origin: 0 50%
transform-origin: 0 50%
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scaleX(1)
transform: scaleX(1)
.hvr-sweep-to-left
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: #2098d1
-webkit-transform: scaleX(0)
transform: scaleX(0)
-webkit-transform-origin: 100% 50%
transform-origin: 100% 50%
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scaleX(1)
transform: scaleX(1)
.hvr-sweep-to-bottom
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: #2098d1
-webkit-transform: scaleY(0)
transform: scaleY(0)
-webkit-transform-origin: 50% 0
transform-origin: 50% 0
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scaleY(1)
transform: scaleY(1)
.hvr-sweep-to-top
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: #2098d1
-webkit-transform: scaleY(0)
transform: scaleY(0)
-webkit-transform-origin: 50% 100%
transform-origin: 50% 100%
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scaleY(1)
transform: scaleY(1)
.hvr-bounce-to-right
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .5s
transition-duration: .5s
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: #2098d1
-webkit-transform: scaleX(0)
transform: scaleX(0)
-webkit-transform-origin: 0 50%
transform-origin: 0 50%
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .5s
transition-duration: .5s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scaleX(1)
transform: scaleX(1)
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
.hvr-bounce-to-left
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .5s
transition-duration: .5s
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: #2098d1
-webkit-transform: scaleX(0)
transform: scaleX(0)
-webkit-transform-origin: 100% 50%
transform-origin: 100% 50%
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .5s
transition-duration: .5s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scaleX(1)
transform: scaleX(1)
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
.hvr-bounce-to-bottom
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .5s
transition-duration: .5s
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: #2098d1
-webkit-transform: scaleY(0)
transform: scaleY(0)
-webkit-transform-origin: 50% 0
transform-origin: 50% 0
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .5s
transition-duration: .5s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scaleY(1)
transform: scaleY(1)
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
.hvr-bounce-to-top
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .5s
transition-duration: .5s
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: #2098d1
-webkit-transform: scaleY(0)
transform: scaleY(0)
-webkit-transform-origin: 50% 100%
transform-origin: 50% 100%
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .5s
transition-duration: .5s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scaleY(1)
transform: scaleY(1)
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
.hvr-radial-out
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
overflow: hidden
background: #e1e1e1
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: #2098d1
border-radius: 100%
-webkit-transform: scale(0)
transform: scale(0)
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scale(2)
transform: scale(2)
.hvr-radial-in
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
overflow: hidden
background: #2098d1
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: #e1e1e1
border-radius: 100%
-webkit-transform: scale(2)
transform: scale(2)
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scale(0)
transform: scale(0)
.hvr-rectangle-in
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
background: #2098d1
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: #e1e1e1
-webkit-transform: scale(1)
transform: scale(1)
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scale(0)
transform: scale(0)
.hvr-rectangle-out
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
background: #e1e1e1
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: ""
position: absolute
z-index: -1
top: 0
left: 0
right: 0
bottom: 0
background: #2098d1
-webkit-transform: scale(0)
transform: scale(0)
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scale(1)
transform: scale(1)
.hvr-shutter-in-horizontal
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
background: #2098d1
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: ""
position: absolute
z-index: -1
top: 0
bottom: 0
left: 0
right: 0
background: #e1e1e1
-webkit-transform: scaleX(1)
transform: scaleX(1)
-webkit-transform-origin: 50%
transform-origin: 50%
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scaleX(0)
transform: scaleX(0)
.hvr-shutter-out-horizontal
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
background: #e1e1e1
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: ""
position: absolute
z-index: -1
top: 0
bottom: 0
left: 0
right: 0
background: #2098d1
-webkit-transform: scaleX(0)
transform: scaleX(0)
-webkit-transform-origin: 50%
transform-origin: 50%
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scaleX(1)
transform: scaleX(1)
.hvr-shutter-in-vertical
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
background: #2098d1
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: ""
position: absolute
z-index: -1
top: 0
bottom: 0
left: 0
right: 0
background: #e1e1e1
-webkit-transform: scaleY(1)
transform: scaleY(1)
-webkit-transform-origin: 50%
transform-origin: 50%
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scaleY(0)
transform: scaleY(0)
.hvr-shutter-out-vertical
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
background: #e1e1e1
-webkit-transition-property: color
transition-property: color
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: ""
position: absolute
z-index: -1
top: 0
bottom: 0
left: 0
right: 0
background: #2098d1
-webkit-transform: scaleY(0)
transform: scaleY(0)
-webkit-transform-origin: 50%
transform-origin: 50%
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active, &:focus, &:hover
color: #fff
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scaleY(1)
transform: scaleY(1)
.hvr-border-fade
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: box-shadow
transition-property: box-shadow
box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0)
&:active, &:focus, &:hover
box-shadow: inset 0 0 0 4px #2098d1, 0 0 1px rgba(0, 0, 0, 0)
.hvr-hollow
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: background
transition-property: background
box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0)
&:active, &:focus, &:hover
background: 0 0
.hvr-trim
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
content: ''
position: absolute
border: #fff solid 4px
top: 4px
left: 4px
right: 4px
bottom: 4px
opacity: 0
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: opacity
transition-property: opacity
&:active:before, &:focus:before, &:hover:before
opacity: 1
@-webkit-keyframes hvr-ripple-out
100%
top: -12px
right: -12px
bottom: -12px
left: -12px
opacity: 0
@keyframes hvr-ripple-out
100%
top: -12px
right: -12px
bottom: -12px
left: -12px
opacity: 0
.hvr-ripple-out
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
content: ''
position: absolute
border: #e1e1e1 solid 6px
top: 0
right: 0
bottom: 0
left: 0
-webkit-animation-duration: 1s
animation-duration: 1s
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-ripple-out
animation-name: hvr-ripple-out
@-webkit-keyframes hvr-ripple-in
100%
top: 0
right: 0
bottom: 0
left: 0
opacity: 1
@keyframes hvr-ripple-in
100%
top: 0
right: 0
bottom: 0
left: 0
opacity: 1
.hvr-ripple-in
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
content: ''
position: absolute
border: #e1e1e1 solid 4px
top: -12px
right: -12px
bottom: -12px
left: -12px
opacity: 0
-webkit-animation-duration: 1s
animation-duration: 1s
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-ripple-in
animation-name: hvr-ripple-in
.hvr-outline-out
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
content: ''
position: absolute
border: #e1e1e1 solid 4px
top: 0
right: 0
bottom: 0
left: 0
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: top,right,bottom,left
transition-property: top,right,bottom,left
&:active:before, &:focus:before, &:hover:before
top: -8px
right: -8px
bottom: -8px
left: -8px
.hvr-outline-in
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
pointer-events: none
content: ''
position: absolute
border: #e1e1e1 solid 4px
top: -16px
right: -16px
bottom: -16px
left: -16px
opacity: 0
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: top,right,bottom,left
transition-property: top,right,bottom,left
&:active:before, &:focus:before, &:hover:before
top: -8px
right: -8px
bottom: -8px
left: -8px
opacity: 1
.hvr-round-corners
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: border-radius
transition-property: border-radius
&:active, &:focus, &:hover
border-radius: 1em
.hvr-underline-from-left
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
overflow: hidden
&:before
content: ""
position: absolute
z-index: -1
left: 0
right: 100%
bottom: 0
background: #2098d1
height: 4px
-webkit-transition-property: right
transition-property: right
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
right: 0
.hvr-underline-from-center
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
overflow: hidden
&:before
content: ""
position: absolute
z-index: -1
left: 50%
right: 50%
bottom: 0
background: #2098d1
height: 4px
-webkit-transition-property: left,right
transition-property: left,right
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
left: 0
right: 0
.hvr-underline-from-right
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
overflow: hidden
&:before
content: ""
position: absolute
z-index: -1
left: 100%
right: 0
bottom: 0
background: #2098d1
height: 4px
-webkit-transition-property: left
transition-property: left
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
left: 0
.hvr-overline-from-left
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
overflow: hidden
&:before
content: ""
position: absolute
z-index: -1
left: 0
right: 100%
top: 0
background: #2098d1
height: 4px
-webkit-transition-property: right
transition-property: right
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
right: 0
.hvr-overline-from-center
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
overflow: hidden
&:before
content: ""
position: absolute
z-index: -1
left: 50%
right: 50%
top: 0
background: #2098d1
height: 4px
-webkit-transition-property: left,right
transition-property: left,right
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
left: 0
right: 0
.hvr-overline-from-right
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
overflow: hidden
&:before
content: ""
position: absolute
z-index: -1
left: 100%
right: 0
top: 0
background: #2098d1
height: 4px
-webkit-transition-property: left
transition-property: left
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
left: 0
.hvr-reveal
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
overflow: hidden
&:before
content: ""
position: absolute
z-index: -1
left: 0
right: 0
top: 0
bottom: 0
border-color: #2098d1
border-style: solid
border-width: 0
-webkit-transition-property: border-width
transition-property: border-width
-webkit-transition-duration: .1s
transition-duration: .1s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateY(0)
transform: translateY(0)
border-width: 4px
.hvr-underline-reveal
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
overflow: hidden
&:before
content: ""
position: absolute
z-index: -1
left: 0
right: 0
bottom: 0
background: #2098d1
height: 4px
-webkit-transform: translateY(4px)
transform: translateY(4px)
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateY(0)
transform: translateY(0)
.hvr-overline-reveal
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
overflow: hidden
&:before
content: ""
position: absolute
z-index: -1
left: 0
right: 0
top: 0
background: #2098d1
height: 4px
-webkit-transform: translateY(-4px)
transform: translateY(-4px)
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateY(0)
transform: translateY(0)
.hvr-glow
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: box-shadow
transition-property: box-shadow
&:active, &:focus, &:hover
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6)
.hvr-shadow
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: box-shadow
transition-property: box-shadow
&:active, &:focus, &:hover
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5)
.hvr-grow-shadow
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: box-shadow,transform
transition-property: box-shadow,transform
&:active, &:focus, &:hover
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5)
-webkit-transform: scale(1.1)
transform: scale(1.1)
.hvr-box-shadow-outset
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: box-shadow
transition-property: box-shadow
&:active, &:focus, &:hover
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6)
.hvr-box-shadow-inset
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: box-shadow
transition-property: box-shadow
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0)
&:active, &:focus, &:hover
box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0)
.hvr-float-shadow
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:before
pointer-events: none
position: absolute
z-index: -1
content: ''
top: 100%
left: 5%
height: 10px
width: 90%
opacity: 0
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0) 80%)
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0) 80%)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform,opacity
transition-property: transform,opacity
&:active, &:focus, &:hover
-webkit-transform: translateY(-5px)
transform: translateY(-5px)
&:active:before, &:focus:before, &:hover:before
opacity: 1
-webkit-transform: translateY(5px)
transform: translateY(5px)
.hvr-shadow-radial
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:after
pointer-events: none
position: absolute
content: ''
left: 0
width: 100%
box-sizing: border-box
height: 5px
opacity: 0
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: opacity
transition-property: opacity
&:before
pointer-events: none
position: absolute
content: ''
left: 0
width: 100%
box-sizing: border-box
height: 5px
opacity: 0
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: opacity
transition-property: opacity
bottom: 100%
background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 80%)
background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 80%)
&:after
top: 100%
background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 80%)
background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 80%)
&:active
&:after, &:before
opacity: 1
&:focus
&:after, &:before
opacity: 1
&:hover
&:after, &:before
opacity: 1
.hvr-bubble-top
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
pointer-events: none
position: absolute
z-index: -1
content: ''
border-style: solid
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
left: calc(50% - 10px)
top: 0
border-width: 0 10px 10px
border-color: transparent transparent #e1e1e1
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateY(-10px)
transform: translateY(-10px)
.hvr-bubble-right
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
pointer-events: none
position: absolute
z-index: -1
content: ''
border-style: solid
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
top: calc(50% - 10px)
right: 0
border-width: 10px 0 10px 10px
border-color: transparent transparent transparent #e1e1e1
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateX(10px)
transform: translateX(10px)
.hvr-bubble-bottom
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
pointer-events: none
position: absolute
z-index: -1
content: ''
border-style: solid
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
left: calc(50% - 10px)
bottom: 0
border-width: 10px 10px 0
border-color: #e1e1e1 transparent transparent
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateY(10px)
transform: translateY(10px)
.hvr-bubble-left
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
pointer-events: none
position: absolute
z-index: -1
content: ''
border-style: solid
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
top: calc(50% - 10px)
left: 0
border-width: 10px 10px 10px 0
border-color: transparent #e1e1e1 transparent transparent
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateX(-10px)
transform: translateX(-10px)
.hvr-bubble-float-top
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:before
position: absolute
z-index: -1
content: ''
left: calc(50% - 10px)
top: 0
border-style: solid
border-width: 0 10px 10px
border-color: transparent transparent #e1e1e1
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:active, &:focus, &:hover
-webkit-transform: translateY(10px)
transform: translateY(10px)
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateY(-10px)
transform: translateY(-10px)
.hvr-bubble-float-right
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:before
position: absolute
z-index: -1
top: calc(50% - 10px)
right: 0
content: ''
border-style: solid
border-width: 10px 0 10px 10px
border-color: transparent transparent transparent #e1e1e1
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:active, &:focus, &:hover
-webkit-transform: translateX(-10px)
transform: translateX(-10px)
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateX(10px)
transform: translateX(10px)
.hvr-bubble-float-bottom
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:before
position: absolute
z-index: -1
content: ''
left: calc(50% - 10px)
bottom: 0
border-style: solid
border-width: 10px 10px 0
border-color: #e1e1e1 transparent transparent
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:active, &:focus, &:hover
-webkit-transform: translateY(-10px)
transform: translateY(-10px)
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateY(10px)
transform: translateY(10px)
.hvr-bubble-float-left
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:before
position: absolute
z-index: -1
content: ''
top: calc(50% - 10px)
left: 0
border-style: solid
border-width: 10px 10px 10px 0
border-color: transparent #e1e1e1 transparent transparent
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
&:active, &:focus, &:hover
-webkit-transform: translateX(10px)
transform: translateX(10px)
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateX(-10px)
transform: translateX(-10px)
.hvr-icon-back
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-left: 2.2em
-webkit-transition-duration: .1s
transition-duration: .1s
&:before
content: "\f137"
position: absolute
left: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-duration: .1s
transition-duration: .1s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateX(-4px)
transform: translateX(-4px)
.hvr-icon-forward
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .1s
transition-duration: .1s
&:before
content: "\f138"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-duration: .1s
transition-duration: .1s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateX(4px)
transform: translateX(4px)
@-webkit-keyframes hvr-icon-down
0%,100%,50%
-webkit-transform: translateY(0)
transform: translateY(0)
25%,75%
-webkit-transform: translateY(6px)
transform: translateY(6px)
@keyframes hvr-icon-down
0%,100%,50%
-webkit-transform: translateY(0)
transform: translateY(0)
25%,75%
-webkit-transform: translateY(6px)
transform: translateY(6px)
.hvr-icon-down
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
&:before
content: "\f01a"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-icon-down
animation-name: hvr-icon-down
-webkit-animation-duration: .75s
animation-duration: .75s
-webkit-animation-timing-function: ease-out
animation-timing-function: ease-out
@-webkit-keyframes hvr-icon-up
0%,100%,50%
-webkit-transform: translateY(0)
transform: translateY(0)
25%,75%
-webkit-transform: translateY(-6px)
transform: translateY(-6px)
@keyframes hvr-icon-up
0%,100%,50%
-webkit-transform: translateY(0)
transform: translateY(0)
25%,75%
-webkit-transform: translateY(-6px)
transform: translateY(-6px)
.hvr-icon-up
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
&:before
content: "\f01b"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-icon-up
animation-name: hvr-icon-up
-webkit-animation-duration: .75s
animation-duration: .75s
-webkit-animation-timing-function: ease-out
animation-timing-function: ease-out
.hvr-icon-spin
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
&:before
content: "\f021"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transition-duration: 1s
transition-duration: 1s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-in-out
transition-timing-function: ease-in-out
&:active:before, &:focus:before, &:hover:before
-webkit-transform: rotate(360deg)
transform: rotate(360deg)
@-webkit-keyframes hvr-icon-drop
0%
opacity: 0
50%
opacity: 0
-webkit-transform: translateY(-100%)
transform: translateY(-100%)
100%,51%
opacity: 1
@keyframes hvr-icon-drop
0%
opacity: 0
50%
opacity: 0
-webkit-transform: translateY(-100%)
transform: translateY(-100%)
100%,51%
opacity: 1
.hvr-icon-drop
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
&:before
content: "\f041"
position: absolute
right: 1em
opacity: 1
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
&:active:before, &:focus:before, &:hover:before
opacity: 0
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-animation-name: hvr-icon-drop
animation-name: hvr-icon-drop
-webkit-animation-duration: .5s
animation-duration: .5s
-webkit-animation-delay: .3s
animation-delay: .3s
-webkit-animation-fill-mode: forwards
animation-fill-mode: forwards
-webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
.hvr-icon-fade
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
&:before
content: "\f00c"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-duration: .5s
transition-duration: .5s
-webkit-transition-property: color
transition-property: color
&:active:before, &:focus:before, &:hover:before
color: #0F9E5E
@-webkit-keyframes hvr-icon-float-away
0%
opacity: 1
100%
opacity: 0
-webkit-transform: translateY(-1em)
transform: translateY(-1em)
@keyframes hvr-icon-float-away
0%
opacity: 1
100%
opacity: 0
-webkit-transform: translateY(-1em)
transform: translateY(-1em)
.hvr-icon-float-away
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
&:after, &:before
content: "\f055"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
&:after
opacity: 0
-webkit-animation-duration: .5s
animation-duration: .5s
-webkit-animation-fill-mode: forwards
animation-fill-mode: forwards
&:active:after, &:focus:after, &:hover:after
-webkit-animation-name: hvr-icon-float-away
animation-name: hvr-icon-float-away
-webkit-animation-timing-function: ease-out
animation-timing-function: ease-out
@-webkit-keyframes hvr-icon-sink-away
0%
opacity: 1
100%
opacity: 0
-webkit-transform: translateY(1em)
transform: translateY(1em)
@keyframes hvr-icon-sink-away
0%
opacity: 1
100%
opacity: 0
-webkit-transform: translateY(1em)
transform: translateY(1em)
.hvr-icon-sink-away
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
&:after, &:before
content: "\f056"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
&:after
opacity: 0
-webkit-animation-duration: .5s
animation-duration: .5s
-webkit-animation-fill-mode: forwards
animation-fill-mode: forwards
&:active:after, &:focus:after, &:hover:after
-webkit-animation-name: hvr-icon-sink-away
animation-name: hvr-icon-sink-away
-webkit-animation-timing-function: ease-out
animation-timing-function: ease-out
.hvr-icon-grow
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f118"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scale(1.3) translateZ(0)
transform: scale(1.3) translateZ(0)
.hvr-icon-shrink
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f119"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scale(0.8)
transform: scale(0.8)
@-webkit-keyframes hvr-icon-pulse
25%
-webkit-transform: scale(1.3)
transform: scale(1.3)
75%
-webkit-transform: scale(0.8)
transform: scale(0.8)
@keyframes hvr-icon-pulse
25%
-webkit-transform: scale(1.3)
transform: scale(1.3)
75%
-webkit-transform: scale(0.8)
transform: scale(0.8)
.hvr-icon-pulse
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
&:before
content: "\f015"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-icon-pulse
animation-name: hvr-icon-pulse
-webkit-animation-duration: 1s
animation-duration: 1s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: infinite
animation-iteration-count: infinite
@-webkit-keyframes hvr-icon-pulse-grow
to
-webkit-transform: scale(1.3)
transform: scale(1.3)
@keyframes hvr-icon-pulse-grow
to
-webkit-transform: scale(1.3)
transform: scale(1.3)
.hvr-icon-pulse-grow
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
&:before
content: "\f015"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-icon-pulse-grow
animation-name: hvr-icon-pulse-grow
-webkit-animation-duration: .3s
animation-duration: .3s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: infinite
animation-iteration-count: infinite
-webkit-animation-direction: alternate
animation-direction: alternate
@-webkit-keyframes hvr-icon-pulse-shrink
to
-webkit-transform: scale(0.8)
transform: scale(0.8)
@keyframes hvr-icon-pulse-shrink
to
-webkit-transform: scale(0.8)
transform: scale(0.8)
.hvr-icon-pulse-shrink
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
&:before
content: "\f015"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-icon-pulse-shrink
animation-name: hvr-icon-pulse-shrink
-webkit-animation-duration: .3s
animation-duration: .3s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: infinite
animation-iteration-count: infinite
-webkit-animation-direction: alternate
animation-direction: alternate
@-webkit-keyframes hvr-icon-push
50%
-webkit-transform: scale(0.5)
transform: scale(0.5)
@keyframes hvr-icon-push
50%
-webkit-transform: scale(0.5)
transform: scale(0.5)
.hvr-icon-push
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f006"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-icon-push
animation-name: hvr-icon-push
-webkit-animation-duration: .3s
animation-duration: .3s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
@-webkit-keyframes hvr-icon-pop
50%
-webkit-transform: scale(1.5)
transform: scale(1.5)
@keyframes hvr-icon-pop
50%
-webkit-transform: scale(1.5)
transform: scale(1.5)
.hvr-icon-pop
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f005"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-icon-pop
animation-name: hvr-icon-pop
-webkit-animation-duration: .3s
animation-duration: .3s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
.hvr-icon-bounce
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f087"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scale(1.5)
transform: scale(1.5)
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36)
.hvr-icon-rotate
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f0c6"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-transform: rotate(20deg)
transform: rotate(20deg)
.hvr-icon-grow-rotate
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f095"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-transform: scale(1.5) rotate(12deg)
transform: scale(1.5) rotate(12deg)
.hvr-icon-float
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f01b"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateY(-4px)
transform: translateY(-4px)
.hvr-icon-sink
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f01a"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: transform
transition-property: transform
-webkit-transition-timing-function: ease-out
transition-timing-function: ease-out
&:active:before, &:focus:before, &:hover:before
-webkit-transform: translateY(4px)
transform: translateY(4px)
@-webkit-keyframes hvr-icon-bob
0%
-webkit-transform: translateY(-6px)
transform: translateY(-6px)
50%
-webkit-transform: translateY(-2px)
transform: translateY(-2px)
100%
-webkit-transform: translateY(-6px)
transform: translateY(-6px)
@keyframes hvr-icon-bob
0%
-webkit-transform: translateY(-6px)
transform: translateY(-6px)
50%
-webkit-transform: translateY(-2px)
transform: translateY(-2px)
100%
-webkit-transform: translateY(-6px)
transform: translateY(-6px)
@-webkit-keyframes hvr-icon-bob-float
100%
-webkit-transform: translateY(-6px)
transform: translateY(-6px)
@keyframes hvr-icon-bob-float
100%
-webkit-transform: translateY(-6px)
transform: translateY(-6px)
.hvr-icon-bob
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f077"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-icon-bob-float,hvr-icon-bob
animation-name: hvr-icon-bob-float,hvr-icon-bob
-webkit-animation-duration: .3s,1.5s
animation-duration: .3s,1.5s
-webkit-animation-delay: 0s,.3s
animation-delay: 0s,.3s
-webkit-animation-timing-function: ease-out,ease-in-out
animation-timing-function: ease-out,ease-in-out
-webkit-animation-iteration-count: 1,infinite
animation-iteration-count: 1,infinite
-webkit-animation-fill-mode: forwards
animation-fill-mode: forwards
-webkit-animation-direction: normal,alternate
animation-direction: normal,alternate
@-webkit-keyframes hvr-icon-hang
0%
-webkit-transform: translateY(6px)
transform: translateY(6px)
50%
-webkit-transform: translateY(2px)
transform: translateY(2px)
100%
-webkit-transform: translateY(6px)
transform: translateY(6px)
@keyframes hvr-icon-hang
0%
-webkit-transform: translateY(6px)
transform: translateY(6px)
50%
-webkit-transform: translateY(2px)
transform: translateY(2px)
100%
-webkit-transform: translateY(6px)
transform: translateY(6px)
@-webkit-keyframes hvr-icon-hang-sink
100%
-webkit-transform: translateY(6px)
transform: translateY(6px)
@keyframes hvr-icon-hang-sink
100%
-webkit-transform: translateY(6px)
transform: translateY(6px)
.hvr-icon-hang
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f078"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-icon-hang-sink,hvr-icon-hang
animation-name: hvr-icon-hang-sink,hvr-icon-hang
-webkit-animation-duration: .3s,1.5s
animation-duration: .3s,1.5s
-webkit-animation-delay: 0s,.3s
animation-delay: 0s,.3s
-webkit-animation-timing-function: ease-out,ease-in-out
animation-timing-function: ease-out,ease-in-out
-webkit-animation-iteration-count: 1,infinite
animation-iteration-count: 1,infinite
-webkit-animation-fill-mode: forwards
animation-fill-mode: forwards
-webkit-animation-direction: normal,alternate
animation-direction: normal,alternate
@-webkit-keyframes hvr-icon-wobble-horizontal
16.65%
-webkit-transform: translateX(6px)
transform: translateX(6px)
33.3%
-webkit-transform: translateX(-5px)
transform: translateX(-5px)
49.95%
-webkit-transform: translateX(4px)
transform: translateX(4px)
66.6%
-webkit-transform: translateX(-2px)
transform: translateX(-2px)
83.25%
-webkit-transform: translateX(1px)
transform: translateX(1px)
100%
-webkit-transform: translateX(0)
transform: translateX(0)
@keyframes hvr-icon-wobble-horizontal
16.65%
-webkit-transform: translateX(6px)
transform: translateX(6px)
33.3%
-webkit-transform: translateX(-5px)
transform: translateX(-5px)
49.95%
-webkit-transform: translateX(4px)
transform: translateX(4px)
66.6%
-webkit-transform: translateX(-2px)
transform: translateX(-2px)
83.25%
-webkit-transform: translateX(1px)
transform: translateX(1px)
100%
-webkit-transform: translateX(0)
transform: translateX(0)
.hvr-icon-wobble-horizontal
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f061"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-icon-wobble-horizontal
animation-name: hvr-icon-wobble-horizontal
-webkit-animation-duration: 1s
animation-duration: 1s
-webkit-animation-timing-function: ease-in-out
animation-timing-function: ease-in-out
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
@-webkit-keyframes hvr-icon-wobble-vertical
16.65%
-webkit-transform: translateY(6px)
transform: translateY(6px)
33.3%
-webkit-transform: translateY(-5px)
transform: translateY(-5px)
49.95%
-webkit-transform: translateY(4px)
transform: translateY(4px)
66.6%
-webkit-transform: translateY(-2px)
transform: translateY(-2px)
83.25%
-webkit-transform: translateY(1px)
transform: translateY(1px)
100%
-webkit-transform: translateY(0)
transform: translateY(0)
@keyframes hvr-icon-wobble-vertical
16.65%
-webkit-transform: translateY(6px)
transform: translateY(6px)
33.3%
-webkit-transform: translateY(-5px)
transform: translateY(-5px)
49.95%
-webkit-transform: translateY(4px)
transform: translateY(4px)
66.6%
-webkit-transform: translateY(-2px)
transform: translateY(-2px)
83.25%
-webkit-transform: translateY(1px)
transform: translateY(1px)
100%
-webkit-transform: translateY(0)
transform: translateY(0)
.hvr-icon-wobble-vertical
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f062"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-icon-wobble-vertical
animation-name: hvr-icon-wobble-vertical
-webkit-animation-duration: 1s
animation-duration: 1s
-webkit-animation-timing-function: ease-in-out
animation-timing-function: ease-in-out
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
@-webkit-keyframes hvr-icon-buzz
50%
-webkit-transform: translateX(3px) rotate(2deg)
transform: translateX(3px) rotate(2deg)
100%
-webkit-transform: translateX(-3px) rotate(-2deg)
transform: translateX(-3px) rotate(-2deg)
@keyframes hvr-icon-buzz
50%
-webkit-transform: translateX(3px) rotate(2deg)
transform: translateX(3px) rotate(2deg)
100%
-webkit-transform: translateX(-3px) rotate(-2deg)
transform: translateX(-3px) rotate(-2deg)
.hvr-icon-buzz
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f017"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-icon-buzz
animation-name: hvr-icon-buzz
-webkit-animation-duration: .15s
animation-duration: .15s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: infinite
animation-iteration-count: infinite
@-webkit-keyframes hvr-icon-buzz-out
10%
-webkit-transform: translateX(3px) rotate(2deg)
transform: translateX(3px) rotate(2deg)
20%
-webkit-transform: translateX(-3px) rotate(-2deg)
transform: translateX(-3px) rotate(-2deg)
30%
-webkit-transform: translateX(3px) rotate(2deg)
transform: translateX(3px) rotate(2deg)
40%
-webkit-transform: translateX(-3px) rotate(-2deg)
transform: translateX(-3px) rotate(-2deg)
50%
-webkit-transform: translateX(2px) rotate(1deg)
transform: translateX(2px) rotate(1deg)
60%
-webkit-transform: translateX(-2px) rotate(-1deg)
transform: translateX(-2px) rotate(-1deg)
70%
-webkit-transform: translateX(2px) rotate(1deg)
transform: translateX(2px) rotate(1deg)
80%
-webkit-transform: translateX(-2px) rotate(-1deg)
transform: translateX(-2px) rotate(-1deg)
90%
-webkit-transform: translateX(1px) rotate(0)
transform: translateX(1px) rotate(0)
100%
-webkit-transform: translateX(-1px) rotate(0)
transform: translateX(-1px) rotate(0)
@keyframes hvr-icon-buzz-out
10%
-webkit-transform: translateX(3px) rotate(2deg)
transform: translateX(3px) rotate(2deg)
20%
-webkit-transform: translateX(-3px) rotate(-2deg)
transform: translateX(-3px) rotate(-2deg)
30%
-webkit-transform: translateX(3px) rotate(2deg)
transform: translateX(3px) rotate(2deg)
40%
-webkit-transform: translateX(-3px) rotate(-2deg)
transform: translateX(-3px) rotate(-2deg)
50%
-webkit-transform: translateX(2px) rotate(1deg)
transform: translateX(2px) rotate(1deg)
60%
-webkit-transform: translateX(-2px) rotate(-1deg)
transform: translateX(-2px) rotate(-1deg)
70%
-webkit-transform: translateX(2px) rotate(1deg)
transform: translateX(2px) rotate(1deg)
80%
-webkit-transform: translateX(-2px) rotate(-1deg)
transform: translateX(-2px) rotate(-1deg)
90%
-webkit-transform: translateX(1px) rotate(0)
transform: translateX(1px) rotate(0)
100%
-webkit-transform: translateX(-1px) rotate(0)
transform: translateX(-1px) rotate(0)
.hvr-icon-buzz-out
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
padding-right: 2.2em
-webkit-transition-duration: .3s
transition-duration: .3s
&:before
content: "\f023"
position: absolute
right: 1em
padding: 0 1px
font-family: FontAwesome
-webkit-transform: translateZ(0)
transform: translateZ(0)
&:active:before, &:focus:before, &:hover:before
-webkit-animation-name: hvr-icon-buzz-out
animation-name: hvr-icon-buzz-out
-webkit-animation-duration: .75s
animation-duration: .75s
-webkit-animation-timing-function: linear
animation-timing-function: linear
-webkit-animation-iteration-count: 1
animation-iteration-count: 1
.hvr-curl-top-left
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
pointer-events: none
position: absolute
content: ''
height: 0
width: 0
top: 0
left: 0
background: #fff
background: linear-gradient(135deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%)
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000')
z-index: 1000
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: width,height
transition-property: width,height
&:active:before, &:focus:before, &:hover:before
width: 25px
height: 25px
.hvr-curl-top-right
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
pointer-events: none
position: absolute
content: ''
height: 0
width: 0
top: 0
right: 0
background: #fff
background: linear-gradient(225deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%)
box-shadow: (-1px) 1px 1px rgba(0, 0, 0, 0.4)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: width,height
transition-property: width,height
&:active:before, &:focus:before, &:hover:before
width: 25px
height: 25px
.hvr-curl-bottom-right
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
pointer-events: none
position: absolute
content: ''
height: 0
width: 0
bottom: 0
right: 0
background: #fff
background: linear-gradient(315deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%)
box-shadow: (-1px) -1px 1px rgba(0, 0, 0, 0.4)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: width,height
transition-property: width,height
&:active:before, &:focus:before, &:hover:before
width: 25px
height: 25px
.hvr-curl-bottom-left
display: inline-block
vertical-align: middle
-webkit-transform: translateZ(0)
transform: translateZ(0)
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
pointer-events: none
position: absolute
content: ''
height: 0
width: 0
bottom: 0
left: 0
background: #fff
background: linear-gradient(45deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%)
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4)
-webkit-transition-duration: .3s
transition-duration: .3s
-webkit-transition-property: width,height
transition-property: width,height
&:active:before, &:focus:before, &:hover:before
width: 25px
height: 25px
.effects > a
background: #e1e1e1 none repeat scroll 0 0
color: #000000
float: left
font-family: Montserrat
margin-bottom: 10px
margin-right: 10px
padding: 10px 30px
.hover-master-sec
float: left
padding: 40px
width: 100%
.effects > h2
float: left
font-family: Montserrat
font-size: 18px
margin: 0 0 10px
padding-bottom: 20px
width: 100%
.hover-master-sec .widget-title
margin-top: 80px
&:first-child
margin-top: 0
.quick-report:last-child
padding: 0
.poptrox-overlay
z-index: 2147483647 !important
.notify.with-color
h3, p
color: #fff
.low-rounded
border-radius: 4px !important