/* ------------------------------------------------------ Item: shortcode.css Notes: Do not edit this stylesheet. It holds required customization options. This kit uses the font awesome font found at http://fortawesome.github.com/Font-Awesome ------------------------------------------------------ */ /*.IN-PROGRESS, .in-progress, .In-Progress, .INPROGRESS, .inprogress {display: none !important}*/ /* ========================================================================== Grab Fonts ========================================================================== */ @font-face { font-family: "FontAwesome"; src: url('/Fonts/fontawesome-webfont.eot'); src: url('/Fonts/fontawesome-webfont.eot?#iefix') format('eot'), url('/Fonts/fontawesome-webfont.woff') format('woff'), url('/Fonts/fontawesome-webfont.ttf') format('truetype'), url('/Fonts/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; src: url('/Fonts/glyphiconshalflings-regular.eot'); src: url('/Fonts/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'), url('/Fonts/glyphiconshalflings-regular.woff') format('woff'), url('/Fonts/glyphiconshalflings-regular.ttf') format('truetype'), url('/Fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg'); } /*a.btn { background-color: rgb(255,255,255); background-image: none; height: 32px; line-height: 32px; border: 1px solid rgb(187,187,187); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; cursor: pointer; padding: 0; } a.btn i { margin-right: 10px; }*/ a.btn-interested.active i.icon-star:before{content:"\f005" !important} /* ========================================================================== Usable Font Sizes ========================================================================== */ .font-size-100{font-size:100px !important} .font-size-95{font-size:95px !important} .font-size-90{font-size:90px !important} .font-size-85{font-size:85px !important} .font-size-80{font-size:80px !important} .font-size-75{font-size:75px !important} .font-size-70{font-size:70px !important} .font-size-65{font-size:65px !important} .font-size-60{font-size:60px !important} .font-size-55{font-size:55px !important} .font-size-50{font-size:50px !important} .font-size-45{font-size:45px !important} .font-size-40{font-size:40px !important} .font-size-35{font-size:35px !important} .font-size-30{font-size:30px !important} .font-size-25{font-size:25px !important} .font-size-20{font-size:20px !important} .font-size-15{font-size:15px !important} .font-size-10{font-size:10px !important} /* ========================================================================== Heights ========================================================================== */ .height-50 { height: 50px; } .height-100 { height: 100px; } .height-150 { height: 150px; } .height-200 { height: 200px; } .height-250 { height: 250px; } .height-300 { height: 300px; } .height-400 { height: 400px; } .height-500 { height: 500px; } /* ========================================================================== Checkboxes & Radio Buttons ========================================================================== */ .login input[type=checkbox], .login input[type=radio], input[type=checkbox], input[type=radio] { border: 1px solid #c0c0c0; margin: 0 0.1em 0 0; padding: 0; font-size: 16px; line-height: 1em; width: 1em; height: 1em; background: #fff; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed), to(#fbfbfb)); -webkit-appearance: none; -webkit-box-shadow: 1px 1px 1px #fff; -webkit-border-radius: 0.25em; vertical-align: text-top; display: inline-block; outline: none; } input[type=radio] { -webkit-border-radius: 2em; /* Make radios round */ } input[type=checkbox]:checked::after { content:"✔"; color: #666; display:block; text-align: center; font-size: 12px; height: 14px; line-height: 16px; } input[type=radio]:checked::after { content:"●"; color: #666; display:block; height: 14px; line-height: 10px; font-size: 20px; text-align: center; } /* ========================================================================== Round Buttons ========================================================================== */ .round-buttons { width: 100%; text-align: center; padding: 14px; font-size: 0; line-height: 1; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } .round-buttons > li { margin: 4px 12px; position: relative; display: inline-block; text-align: center; width:80px; height:80px; border:1px solid #d7d7d7; border-radius:50%; position:relative; background: #fcfcfc; } .depth { overflow: hidden; margin: 4px; width: 72px; height: 72px; border-radius: 50%; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .depth:active { box-shadow: 0 0 4px rgba(0,0,0,0.2) inset; -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2) inset; -moz-box-shadow: 0 0 4px rgba(0,0,0,0.2) inset; } .depth > a { display: block; width: 62px; height: 62px; position: relative; text-align: center; border-radius: 50%; cursor: pointer; margin: 5px; background: #f7f7f7; background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f7f7f7)); background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 100%); background: -o-linear-gradient(top, #ffffff 0%,#f7f7f7 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f7f7f7 100%); background: linear-gradient(top, #ffffff 0%,#f7f7f7 100%); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6); } .depth > a:active { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; background: #fafafa; } .depth > a > i { font-size: 24px; margin: 19px 0; width: 24px; float: none; color: #676767; text-shadow: 0 1px 0 #ffffff; height: 24px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .depth > a:hover { background: #fcfcfc; } /* ========================================================================== Font Icons & Glyphish ========================================================================== */ [class^="icon-"], [class*="icon-"]{ font-family:FontAwesome; font-weight:normal; font-style:normal; text-decoration:inherit; -webkit-font-smoothing:antialiased; /* sprites.less reset */ display:inline; width:auto; height:auto; line-height:normal; vertical-align:baseline; background-image:none; background-position:0% 0%; background-repeat:repeat; margin-top:0} /* more sprites.less reset */ .icon-white, .nav-pills >.active >a >[class^="icon-"], .nav-pills >.active >a >[class*="icon-"], .nav-list >.active >a >[class^="icon-"], .nav-list >.active >a >[class*="icon-"], .navbar-inverse .nav >.active >a >[class^="icon-"], .navbar-inverse .nav >.active >a >[class*="icon-"], .dropdown-menu >li >a:hover >[class^="icon-"], .dropdown-menu >li >a:hover >[class*="icon-"], .dropdown-menu >.active >a >[class^="icon-"], .dropdown-menu >.active >a >[class*="icon-"], .dropdown-submenu:hover >a >[class^="icon-"], .dropdown-submenu:hover >a >[class*="icon-"]{ background-image:none} [class^="icon-"]:before, [class*="icon-"]:before{ text-decoration:inherit; display:inline-block; speak:none} /* makes sure icons active on rollover in links */ a [class^="icon-"], a [class*="icon-"]{ display:inline-block} /* makes the font 33% larger relative to the icon container */ .icon-large:before{ vertical-align:-10%; font-size:1.3333333333333333em} .btn [class^="icon-"], .nav [class^="icon-"], .btn [class*="icon-"], .nav [class*="icon-"]{ display:inline; /* keeps button heights with and without icons the same */} .btn [class^="icon-"].icon-large, .nav [class^="icon-"].icon-large, .btn [class*="icon-"].icon-large, .nav [class*="icon-"].icon-large{ line-height:.9em} .btn [class^="icon-"].icon-spin, .nav [class^="icon-"].icon-spin, .btn [class*="icon-"].icon-spin, .nav [class*="icon-"].icon-spin{ display:inline-block} .nav-tabs [class^="icon-"], .nav-pills [class^="icon-"], .nav-tabs [class*="icon-"], .nav-pills [class*="icon-"]{ /* keeps button heights with and without icons the same */} .nav-tabs [class^="icon-"], .nav-pills [class^="icon-"], .nav-tabs [class*="icon-"], .nav-pills [class*="icon-"], .nav-tabs [class^="icon-"].icon-large, .nav-pills [class^="icon-"].icon-large, .nav-tabs [class*="icon-"].icon-large, .nav-pills [class*="icon-"].icon-large{ line-height:.9em} li [class^="icon-"], .nav li [class^="icon-"], li [class*="icon-"], .nav li [class*="icon-"]{ display:inline-block; width:1.25em; text-align:center} li [class^="icon-"].icon-large, .nav li [class^="icon-"].icon-large, li [class*="icon-"].icon-large, .nav li [class*="icon-"].icon-large{ /* increased font size for icon-large */ width:1.5625em} ul.icons{ list-style-type:none; text-indent:-0.75em} ul.icons li [class^="icon-"], ul.icons li [class*="icon-"]{ width:.75em} .icon-muted{ color:#eee} .icon-border{ border:solid 1px #eee; padding:.2em .25em .15em; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px} .icon-2x{ font-size:2em} .icon-2x.icon-border{ border-width:2px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px} .icon-3x{ font-size:3em} .icon-3x.icon-border{ border-width:3px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px} .icon-4x{ font-size:4em} .icon-4x.icon-border{ border-width:4px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px} .pull-right{ float:right} .pull-left{ float:left} [class^="icon-"].pull-left, [class*="icon-"].pull-left{ margin-right:.3em} [class^="icon-"].pull-right, [class*="icon-"].pull-right{ margin-left:.3em} .btn [class^="icon-"].pull-left.icon-2x, .btn [class*="icon-"].pull-left.icon-2x, .btn [class^="icon-"].pull-right.icon-2x, .btn [class*="icon-"].pull-right.icon-2x{ margin-top:.18em} .btn [class^="icon-"].icon-spin.icon-large, .btn [class*="icon-"].icon-spin.icon-large{ line-height:.8em} .btn.btn-small [class^="icon-"].pull-left.icon-2x, .btn.btn-small [class*="icon-"].pull-left.icon-2x, .btn.btn-small [class^="icon-"].pull-right.icon-2x, .btn.btn-small [class*="icon-"].pull-right.icon-2x{ margin-top:.25em} .btn.btn-large [class^="icon-"], .btn.btn-large [class*="icon-"]{ margin-top:0} .btn.btn-large [class^="icon-"].pull-left.icon-2x, .btn.btn-large [class*="icon-"].pull-left.icon-2x, .btn.btn-large [class^="icon-"].pull-right.icon-2x, .btn.btn-large [class*="icon-"].pull-right.icon-2x{ margin-top:.05em} .btn.btn-large [class^="icon-"].pull-left.icon-2x, .btn.btn-large [class*="icon-"].pull-left.icon-2x{ margin-right:.2em} .btn.btn-large [class^="icon-"].pull-right.icon-2x, .btn.btn-large [class*="icon-"].pull-right.icon-2x{ margin-left:.2em} .icon-spin{ display:inline-block; -moz-animation:spin 2s infinite linear; -o-animation:spin 2s infinite linear; -webkit-animation:spin 2s infinite linear; animation:spin 2s infinite linear} @-moz-keyframes spin{ 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(359deg)} } @-webkit-keyframes spin{ 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(359deg)} } @-o-keyframes spin{ 0%{-o-transform:rotate(0deg)} 100%{-o-transform:rotate(359deg)} } @-ms-keyframes spin{ 0%{-ms-transform:rotate(0deg)} 100%{-ms-transform:rotate(359deg)} } @keyframes spin{ 0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)} } @-moz-document url-prefix(){ .icon-spin{ height:.9em} .btn .icon-spin{ height:auto} .icon-spin.icon-large{ height:1.25em} .btn .icon-spin.icon-large{ height:.75em} } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .icon-glass:before{content:"\f000"} .icon-music:before{content:"\f001"} .icon-search:before{content:"\f002"} .icon-envelope:before{content:"\f003"} .icon-heart:before{content:"\f08a"} .icon-heart.active:before{content:"\f004"} .icon-star:before{content:"\f006"} .icon-star.active:before{content:"\f005"} .icon-star-empty:before{content:"\f006"} .icon-user:before{content:"\f007"} .icon-film:before{content:"\f008"} .icon-th-large:before{content:"\f009"} .icon-th:before{content:"\f00a"} .icon-th-list:before{content:"\f00b"} .icon-ok:before{content:"\f00c"} .icon-remove:before{content:"\f00d"} .icon-zoom-in:before{content:"\f00e"} .icon-zoom-out:before{content:"\f010"} .icon-off:before{content:"\f011"} .icon-signal:before{content:"\f012"} .icon-cog:before{content:"\f013"} .icon-trash:before{content:"\f014"} .icon-home:before{content:"\f015"} .icon-file:before{content:"\f016"} .icon-time:before{content:"\f017"} .icon-road:before{content:"\f018"} .icon-download-alt:before{content:"\f019"} .icon-download:before{content:"\f01a"} .icon-upload:before{content:"\f01b"} .icon-inbox:before{content:"\f01c"} .icon-play-circle:before{content:"\f01d"} .icon-repeat:before{content:"\f01e"} /* \f020 doesn't work in Safari. all shifted one down */ .icon-refresh:before{content:"\f021"} .icon-list-alt:before{content:"\f022"} .icon-lock:before{content:"\f023"} .icon-flag:before{content:"\f024"} .icon-headphones:before{content:"\f025"} .icon-volume-off:before{content:"\f026"} .icon-volume-down:before{content:"\f027"} .icon-volume-up:before{content:"\f028"} .icon-qrcode:before{content:"\f029"} .icon-barcode:before{content:"\f02a"} .icon-tag:before{content:"\f02b"} .icon-tags:before{content:"\f02c"} .icon-book:before{content:"\f02d"} .icon-bookmark:before{content:"\f02e"} .icon-print:before{content:"\f02f"} .icon-camera:before{content:"\f030"} .icon-font:before{content:"\f031"} .icon-bold:before{content:"\f032"} .icon-italic:before{content:"\f033"} .icon-text-height:before{content:"\f034"} .icon-text-width:before{content:"\f035"} .icon-align-left:before{content:"\f036"} .icon-align-center:before{content:"\f037"} .icon-align-right:before{content:"\f038"} .icon-align-justify:before{content:"\f039"} .icon-list:before{content:"\f03a"} .icon-indent-left:before{content:"\f03b"} .icon-indent-right:before{content:"\f03c"} .icon-facetime-video:before{content:"\f03d"} .icon-picture:before{content:"\f03e"} .icon-pencil:before{content:"\f040"} .icon-map-marker:before{content:"\f041"} .icon-adjust:before{content:"\f042"} .icon-tint:before{content:"\f043"} .icon-edit:before{content:"\f044"} .icon-share:before{content:"\f045"} .icon-check:before{content:"\f046"} .icon-move:before{content:"\f047"} .icon-step-backward:before{content:"\f048"} .icon-fast-backward:before{content:"\f049"} .icon-backward:before{content:"\f04a"} .icon-play:before{content:"\f04b"} .icon-pause:before{content:"\f04c"} .icon-stop:before{content:"\f04d"} .icon-forward:before{content:"\f04e"} .icon-fast-forward:before{content:"\f050"} .icon-step-forward:before{content:"\f051"} .icon-eject:before{content:"\f052"} .icon-chevron-left:before{content:"\f053"} .icon-chevron-right:before{content:"\f054"} .icon-plus-sign:before{content:"\f055"} .icon-minus-sign:before{content:"\f056"} .icon-remove-sign:before{content:"\f057"} .icon-ok-sign:before{content:"\f058"} .icon-question-sign:before{content:"\f059"} .icon-info-sign:before{content:"\f05a"} .icon-screenshot:before{content:"\f05b"} .icon-remove-circle:before{content:"\f05c"} .icon-ok-circle:before{content:"\f05d"} .icon-ban-circle:before{content:"\f05e"} .icon-arrow-left:before{content:"\f060"} .icon-arrow-right:before{content:"\f061"} .icon-arrow-up:before{content:"\f062"} .icon-arrow-down:before{content:"\f063"} .icon-share-alt:before{content:"\f064"} .icon-resize-full:before{content:"\f065"} .icon-resize-small:before{content:"\f066"} .icon-plus:before{content:"\f067"} .icon-minus:before{content:"\f068"} .icon-asterisk:before{content:"\f069"} .icon-exclamation-sign:before{content:"\f06a"} .icon-gift:before{content:"\f06b"} .icon-leaf:before{content:"\f06c"} .icon-fire:before{content:"\f06d"} .icon-eye-open:before{content:"\f06e"} .icon-eye-close:before{content:"\f070"} .icon-warning-sign:before{content:"\f071"} .icon-plane:before{content:"\f072"} .icon-calendar:before{content:"\f073"} .icon-random:before{content:"\f074"} .icon-comment:before{content:"\f075"} .icon-magnet:before{content:"\f076"} .icon-chevron-up:before{content:"\f077"} .icon-chevron-down:before{content:"\f078"} .icon-retweet:before{content:"\f079"} .icon-shopping-cart:before{content:"\f07a"} .icon-folder-close:before{content:"\f07b"} .icon-folder-open:before{content:"\f07c"} .icon-resize-vertical:before{content:"\f07d"} .icon-resize-horizontal:before{content:"\f07e"} .icon-bar-chart:before{content:"\f080"} .icon-twitter-sign:before{content:"\f081"} .icon-facebook-sign:before{content:"\f082"} .icon-camera-retro:before{content:"\f083"} .icon-key:before{content:"\f084"} .icon-cogs:before{content:"\f085"} .icon-comments:before{content:"\f086"} .icon-thumbs-up:before{content:"\f087"} .icon-thumbs-down:before{content:"\f088"} .icon-star-half:before{content:"\f089"} .icon-heart-empty:before{content:"\f08a"} .icon-signout:before{content:"\f08b"} .icon-linkedin-sign:before{content:"\f08c"} .icon-pushpin:before{content:"\f08d"} .icon-external-link:before{content:"\f08e"} .icon-signin:before{content:"\f090"} .icon-trophy:before{content:"\f091"} .icon-github-sign:before{content:"\f092"} .icon-upload-alt:before{content:"\f093"} .icon-lemon:before{content:"\f094"} .icon-phone:before{content:"\f095"} .icon-check-empty:before{content:"\f096"} .icon-bookmark-empty:before{content:"\f097"} .icon-phone-sign:before{content:"\f098"} .icon-twitter:before{content:"\f099"} .icon-facebook:before{content:"\f09a"} .icon-github:before{content:"\f09b"} .icon-unlock:before{content:"\f09c"} .icon-credit-card:before{content:"\f09d"} .icon-rss:before{content:"\f09e"} .icon-hdd:before{content:"\f0a0"} .icon-bullhorn:before{content:"\f0a1"} .icon-bell:before{content:"\f0a2"} .icon-certificate:before{content:"\f0a3"} .icon-hand-right:before{content:"\f0a4"} .icon-hand-left:before{content:"\f0a5"} .icon-hand-up:before{content:"\f0a6"} .icon-hand-down:before{content:"\f0a7"} .icon-circle-arrow-left:before{content:"\f0a8"} .icon-circle-arrow-right:before{content:"\f0a9"} .icon-circle-arrow-up:before{content:"\f0aa"} .icon-circle-arrow-down:before{content:"\f0ab"} .icon-globe:before{content:"\f0ac"} .icon-wrench:before{content:"\f0ad"} .icon-tasks:before{content:"\f0ae"} .icon-filter:before{content:"\f0b0"} .icon-briefcase:before{content:"\f0b1"} .icon-fullscreen:before{content:"\f0b2"} .icon-group:before{content:"\f0c0"} .icon-link:before{content:"\f0c1"} .icon-cloud:before{content:"\f0c2"} .icon-beaker:before{content:"\f0c3"} .icon-cut:before{content:"\f0c4"} .icon-copy:before{content:"\f0c5"} .icon-paper-clip:before{content:"\f0c6"} .icon-save:before{content:"\f0c7"} .icon-sign-blank:before{content:"\f0c8"} .icon-reorder:before{content:"\f0c9"} .icon-list-ul:before{content:"\f0ca"} .icon-list-ol:before{content:"\f0cb"} .icon-strikethrough:before{content:"\f0cc"} .icon-underline:before{content:"\f0cd"} .icon-table:before{content:"\f0ce"} .icon-magic:before{content:"\f0d0"} .icon-truck:before{content:"\f0d1"} .icon-pinterest:before{content:"\f0d2"} .icon-pinterest-sign:before{content:"\f0d3"} .icon-google-plus-sign:before{content:"\f0d4"} .icon-google-plus:before{content:"\f0d5"} .icon-money:before{content:"\f0d6"} .icon-caret-down:before{content:"\f0d7"} .icon-caret-up:before{content:"\f0d8"} .icon-caret-left:before{content:"\f0d9"} .icon-caret-right:before{content:"\f0da"} .icon-columns:before{content:"\f0db"} .icon-sort:before{content:"\f0dc"} .icon-sort-down:before{content:"\f0dd"} .icon-sort-up:before{content:"\f0de"} .icon-envelope-alt:before{content:"\f0e0"} .icon-linkedin:before{content:"\f0e1"} .icon-undo:before{content:"\f0e2"} .icon-legal:before{content:"\f0e3"} .icon-dashboard:before{content:"\f0e4"} .icon-comment-alt:before{content:"\f0e5"} .icon-comments-alt:before{content:"\f0e6"} .icon-bolt:before{content:"\f0e7"} .icon-sitemap:before{content:"\f0e8"} .icon-umbrella:before{content:"\f0e9"} .icon-paste:before{content:"\f0ea"} .icon-lightbulb:before{content:"\f0eb"} .icon-exchange:before{content:"\f0ec"} .icon-cloud-download:before{content:"\f0ed"} .icon-cloud-upload:before{content:"\f0ee"} .icon-user-md:before{content:"\f0f0"} .icon-stethoscope:before{content:"\f0f1"} .icon-suitcase:before{content:"\f0f2"} .icon-bell-alt:before{content:"\f0f3"} .icon-coffee:before{content:"\f0f4"} .icon-food:before{content:"\f0f5"} .icon-file-alt:before{content:"\f0f6"} .icon-building:before{content:"\f0f7"} .icon-hospital:before{content:"\f0f8"} .icon-ambulance:before{content:"\f0f9"} .icon-medkit:before{content:"\f0fa"} .icon-fighter-jet:before{content:"\f0fb"} .icon-beer:before{content:"\f0fc"} .icon-h-sign:before{content:"\f0fd"} .icon-plus-sign-alt:before{content:"\f0fe"} .icon-double-angle-left:before{content:"\f100"} .icon-double-angle-right:before{content:"\f101"} .icon-double-angle-up:before{content:"\f102"} .icon-double-angle-down:before{content:"\f103"} .icon-angle-left:before{content:"\f104"} .icon-angle-right:before{content:"\f105"} .icon-angle-up:before{content:"\f106"} .icon-angle-down:before{content:"\f107"} .icon-desktop:before{content:"\f108"} .icon-laptop:before{content:"\f109"} .icon-tablet:before{content:"\f10a"} .icon-mobile-phone:before{content:"\f10b"} .icon-circle-blank:before{content:"\f10c"} .icon-quote-left:before{content:"\f10d"} .icon-quote-right:before{content:"\f10e"} .icon-spinner:before{content:"\f110"} .icon-circle:before{content:"\f111"} .icon-reply:before{content:"\f112"} .icon-github-alt:before{content:"\f113"} .icon-folder-close-alt:before{content:"\f114"} .icon-folder-open-alt:before{content:"\f115"} .private .icon-unlock:before{content:"\f023"} .glyphicon:before { font-family: 'Glyphicons Halflings'; font-style: normal; line-height: 1; } .glyphicon-glass:before { content: "\e001"; } .glyphicon-music:before { content: "\e002"; } .glyphicon-search:before { content: "\e003"; } .glyphicon-envelope:before { content: "\2709"; } .glyphicon-heart:before { content: "\e005"; } .glyphicon-star:before { content: "\e006"; } .glyphicon-star-empty:before { content: "\e007"; } .glyphicon-user:before { content: "\e008"; } .glyphicon-film:before { content: "\e009"; } .glyphicon-th-large:before { content: "\e010"; } .glyphicon-th:before { content: "\e011"; } .glyphicon-th-list:before { content: "\e012"; } .glyphicon-ok:before { content: "\e013"; } .glyphicon-remove:before { content: "\e014"; } .glyphicon-zoom-in:before { content: "\e015"; } .glyphicon-zoom-out:before { content: "\e016"; } .glyphicon-off:before { content: "\e017"; } .glyphicon-signal:before { content: "\e018"; } .glyphicon-cog:before { content: "\e019"; } .glyphicon-trash:before { content: "\e020"; } .glyphicon-home:before { content: "\e021"; } .glyphicon-file:before { content: "\e022"; } .glyphicon-time:before { content: "\e023"; } .glyphicon-road:before { content: "\e024"; } .glyphicon-download-alt:before { content: "\e025"; } .glyphicon-download:before { content: "\e026"; } .glyphicon-upload:before { content: "\e027"; } .glyphicon-inbox:before { content: "\e028"; } .glyphicon-play-circle:before { content: "\e029"; } .glyphicon-repeat:before { content: "\e030"; } .glyphicon-refresh:before { content: "\e031"; } .glyphicon-list-alt:before { content: "\e032"; } .glyphicon-lock:before { content: "\e033"; } .glyphicon-flag:before { content: "\e034"; } .glyphicon-headphones:before { content: "\e035"; } .glyphicon-volume-off:before { content: "\e036"; } .glyphicon-volume-down:before { content: "\e037"; } .glyphicon-volume-up:before { content: "\e038"; } .glyphicon-qrcode:before { content: "\e039"; } .glyphicon-barcode:before { content: "\e040"; } .glyphicon-tag:before { content: "\e041"; } .glyphicon-tags:before { content: "\e042"; } .glyphicon-book:before { content: "\e043"; } .glyphicon-bookmark:before { content: "\e044"; } .glyphicon-print:before { content: "\e045"; } .glyphicon-camera:before { content: "\e046"; } .glyphicon-font:before { content: "\e047"; } .glyphicon-bold:before { content: "\e048"; } .glyphicon-italic:before { content: "\e049"; } .glyphicon-text-height:before { content: "\e050"; } .glyphicon-text-width:before { content: "\e051"; } .glyphicon-align-left:before { content: "\e052"; } .glyphicon-align-center:before { content: "\e053"; } .glyphicon-align-right:before { content: "\e054"; } .glyphicon-align-justify:before { content: "\e055"; } .glyphicon-list:before { content: "\e056"; } .glyphicon-indent-left:before { content: "\e057"; } .glyphicon-indent-right:before { content: "\e058"; } .glyphicon-facetime-video:before { content: "\e059"; } .glyphicon-picture:before { content: "\e060"; } .glyphicon-pencil:before { content: "\270f"; } .glyphicon-map-marker:before { content: "\e062"; } .glyphicon-adjust:before { content: "\e063"; } .glyphicon-tint:before { content: "\e064"; } .glyphicon-edit:before { content: "\e065"; } .glyphicon-share:before { content: "\e066"; } .glyphicon-check:before { content: "\e067"; } .glyphicon-move:before { content: "\e068"; } .glyphicon-step-backward:before { content: "\e069"; } .glyphicon-fast-backward:before { content: "\e070"; } .glyphicon-backward:before { content: "\e071"; } .glyphicon-play:before { content: "\e072"; } .glyphicon-pause:before { content: "\e073"; } .glyphicon-stop:before { content: "\e074"; } .glyphicon-forward:before { content: "\e075"; } .glyphicon-fast-forward:before { content: "\e076"; } .glyphicon-step-forward:before { content: "\e077"; } .glyphicon-eject:before { content: "\e078"; } .glyphicon-chevron-left:before { content: "\e079"; } .glyphicon-chevron-right:before { content: "\e080"; } .glyphicon-plus-sign:before { content: "\e081"; } .glyphicon-minus-sign:before { content: "\e082"; } .glyphicon-remove-sign:before { content: "\e083"; } .glyphicon-ok-sign:before { content: "\e084"; } .glyphicon-question-sign:before { content: "\e085"; } .glyphicon-info-sign:before { content: "\e086"; } .glyphicon-screenshot:before { content: "\e087"; } .glyphicon-remove-circle:before { content: "\e088"; } .glyphicon-ok-circle:before { content: "\e089"; } .glyphicon-ban-circle:before { content: "\e090"; } .glyphicon-arrow-left:before { content: "\e091"; } .glyphicon-arrow-right:before { content: "\e092"; } .glyphicon-arrow-up:before { content: "\e093"; } .glyphicon-arrow-down:before { content: "\e094"; } .glyphicon-share-alt:before { content: "\e095"; } .glyphicon-resize-full:before { content: "\e096"; } .glyphicon-resize-small:before { content: "\e097"; } .glyphicon-plus:before { content: "\002b"; } .glyphicon-minus:before { content: "\2212"; } .glyphicon-asterisk:before { content: "\002a"; } .glyphicon-exclamation-sign:before { content: "\e101"; } .glyphicon-gift:before { content: "\e102"; } .glyphicon-leaf:before { content: "\e103"; } .glyphicon-fire:before { content: "\e104"; } .glyphicon-eye-open:before { content: "\e105"; } .glyphicon-eye-close:before { content: "\e106"; } .glyphicon-warning-sign:before { content: "\e107"; } .glyphicon-plane:before { content: "\e108"; } .glyphicon-calendar:before { content: "\e109"; } .glyphicon-random:before { content: "\e110"; } .glyphicon-comment:before { content: "\e111"; } .glyphicon-magnet:before { content: "\e112"; } .glyphicon-chevron-up:before { content: "\e113"; } .glyphicon-chevron-down:before { content: "\e114"; } .glyphicon-retweet:before { content: "\e115"; } .glyphicon-shopping-cart:before { content: "\e116"; } .glyphicon-folder-close:before { content: "\e117"; } .glyphicon-folder-open:before { content: "\e118"; } .glyphicon-resize-vertical:before { content: "\e119"; } .glyphicon-resize-horizontal:before { content: "\e120"; } .glyphicon-hdd:before { content: "\e121"; } .glyphicon-bullhorn:before { content: "\e122"; } .glyphicon-bell:before { content: "\e123"; } .glyphicon-certificate:before { content: "\e124"; } .glyphicon-thumbs-up:before { content: "\e125"; } .glyphicon-thumbs-down:before { content: "\e126"; } .glyphicon-hand-right:before { content: "\e127"; } .glyphicon-hand-left:before { content: "\e128"; } .glyphicon-hand-up:before { content: "\e129"; } .glyphicon-hand-down:before { content: "\e130"; } .glyphicon-circle-arrow-right:before { content: "\e131"; } .glyphicon-circle-arrow-left:before { content: "\e132"; } .glyphicon-circle-arrow-up:before { content: "\e133"; } .glyphicon-circle-arrow-down:before { content: "\e134"; } .glyphicon-globe:before { content: "\e135"; } .glyphicon-wrench:before { content: "\e136"; } .glyphicon-tasks:before { content: "\e137"; } .glyphicon-filter:before { content: "\e138"; } .glyphicon-briefcase:before { content: "\e139"; } .glyphicon-fullscreen:before { content: "\e140"; } .glyphicon-dashboard:before { content: "\e141"; } .glyphicon-paperclip:before { content: "\e142"; } .glyphicon-heart-empty:before { content: "\e143"; } .glyphicon-link:before { content: "\e144"; } .glyphicon-phone:before { content: "\e145"; } .glyphicon-pushpin:before { content: "\e146"; } .glyphicon-euro:before { content: "\20ac"; } .glyphicon-usd:before { content: "\e148"; } .glyphicon-gbp:before { content: "\e149"; } .glyphicon-sort:before { content: "\e150"; } .glyphicon-sort-by-alphabet:before { content: "\e151"; } .glyphicon-sort-by-alphabet-alt:before { content: "\e152"; } .glyphicon-sort-by-order:before { content: "\e153"; } .glyphicon-sort-by-order-alt:before { content: "\e154"; } .glyphicon-sort-by-attributes:before { content: "\e155"; } .glyphicon-sort-by-attributes-alt:before { content: "\e156"; } .glyphicon-unchecked:before { content: "\e157"; } .glyphicon-expand:before { content: "\e158"; } .glyphicon-collapse:before { content: "\e159"; } .glyphicon-collapse-top:before { content: "\e160"; } /* ========================================================================== Date Picker ========================================================================== */ .datepicker{ top:0; left:0; padding:4px; margin-top:1px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;} .datepicker:before{ content:''; display:inline-block; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid #ccc; border-bottom-color:rgba(0,0,0,0.2); position:absolute; top:-7px; left:6px} .datepicker:after{ content:''; display:inline-block; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid #fff; position:absolute; top:-6px; left:7px} .datepicker >div{ display:none} .datepicker table{ width:100%; margin:0} .datepicker td, .datepicker th{ text-align:center; width:20px; height:20px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px} .datepicker td.day:hover{ background:#eee; cursor:pointer} .datepicker td.old, .datepicker td.new{ color:#999} .datepicker td.active, .datepicker td.active:hover{ background-color:#006dcc; background-image:-moz-linear-gradient(top,#08c,#04c); background-image:-ms-linear-gradient(top,#08c,#04c); background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c)); background-image:-webkit-linear-gradient(top,#08c,#04c); background-image:-o-linear-gradient(top,#08c,#04c); background-image:linear-gradient(top,#08c,#04c); background-repeat:repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c',endColorstr='#04c',GradientType=0); border-color:#04c #04c #002a80; border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); filter:progid:DXImageTransform.Microsoft.gradient(enabled = false); color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,0.25)} .datepicker td.active:hover, .datepicker td.active:hover:hover, .datepicker td.active:active, .datepicker td.active:hover:active, .datepicker td.active.active, .datepicker td.active:hover.active, .datepicker td.active.disabled, .datepicker td.active:hover.disabled, .datepicker td.active[disabled], .datepicker td.active:hover[disabled]{ background-color:#04c} .datepicker td.active:active, .datepicker td.active:hover:active, .datepicker td.active.active, .datepicker td.active:hover.active{ background-color:#039 \9} .datepicker td span{ display:block; width:47px; height:54px; line-height:54px; float:left; margin:2px; cursor:pointer; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px} .datepicker td span:hover{ background:#eee} .datepicker td span.active{ background-color:#006dcc; background-image:-moz-linear-gradient(top,#08c,#04c); background-image:-ms-linear-gradient(top,#08c,#04c); background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c)); background-image:-webkit-linear-gradient(top,#08c,#04c); background-image:-o-linear-gradient(top,#08c,#04c); background-image:linear-gradient(top,#08c,#04c); background-repeat:repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c',endColorstr='#04c',GradientType=0); border-color:#04c #04c #002a80; border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); filter:progid:DXImageTransform.Microsoft.gradient(enabled = false); color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,0.25)} .datepicker td span.active:hover, .datepicker td span.active:active, .datepicker td span.active.active, .datepicker td span.active.disabled, .datepicker td span.active[disabled]{ background-color:#04c} .datepicker td span.active:active, .datepicker td span.active.active{ background-color:#039 \9} .datepicker td span.old{ color:#999} .datepicker th.switch{ width:145px} .datepicker th.next, .datepicker th.prev{ font-size:19.5px} .datepicker thead tr:first-child th{ cursor:pointer} .datepicker thead tr:first-child th:hover{ background:#eee} .input-append.date .add-on i, .input-prepend.date .add-on i{ display:block; cursor:pointer; width:30px; height:30px} /* ========================================================================== CSS3 Shadows ========================================================================== */ .drop-shadow{ position:relative; width:auto; /*padding:1em; margin:2em 10px 4em; */ margin:15px 0; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset} .drop-shadow:before, .drop-shadow:after{ content:""; position:absolute; z-index:-2} .drop-shadow p{ font-size:16px; /*text-align:center; */ margin-bottom:0} /* Lifted corners */ .lifted{ -moz-border-radius:4px; border-radius:4px} .lifted:before, .lifted:after{ bottom:15px; left:10px; width:50%; height:20%; max-width:300px; -webkit-box-shadow:0 15px 10px rgba(0,0,0,0.7); -moz-box-shadow:0 15px 10px rgba(0,0,0,0.7); box-shadow:0 15px 10px rgba(0,0,0,0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg)} .lifted:after{ right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg)} /* Curled corners */ .curled{ border:1px solid #efefef; -moz-border-radius:0 0 120px 120px / 0 0 6px 6px; border-radius:0 0 120px 120px / 0 0 6px 6px} .curled:before, .curled:after{ bottom:12px; left:10px; width:50%; height:55%; max-width:200px; -webkit-box-shadow:0 8px 12px rgba(0,0,0,0.5); -moz-box-shadow:0 8px 12px rgba(0,0,0,0.5); box-shadow:0 8px 12px rgba(0,0,0,0.5); -webkit-transform:skew(-8deg) rotate(-3deg); -moz-transform:skew(-8deg) rotate(-3deg); -ms-transform:skew(-8deg) rotate(-3deg); -o-transform:skew(-8deg) rotate(-3deg); transform:skew(-8deg) rotate(-3deg)} .curled:after{ right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg)} /* Perspective */ .perspective:before{ left:80px; bottom:5px; width:50%; height:35%; max-width:200px; -webkit-box-shadow:-80px 0 8px rgba(0,0,0,0.4); -moz-box-shadow:-80px 0 8px rgba(0,0,0,0.4); box-shadow:-80px 0 8px rgba(0,0,0,0.4); -webkit-transform:skew(50deg); -moz-transform:skew(50deg); -ms-transform:skew(50deg); -o-transform:skew(50deg); transform:skew(50deg); -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%} .perspective:after{ display:none} /* Raised shadow - no pseudo-elements needed */ .raised{ -webkit-box-shadow:0 15px 10px -10px rgba(0,0,0,0.5),0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; -moz-box-shadow:0 15px 10px -10px rgba(0,0,0,0.5),0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; box-shadow:0 15px 10px -10px rgba(0,0,0,0.5),0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset} /* Curved shadows */ .curved:before{ top:10px; bottom:10px; left:0; right:50%; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-box-shadow:0 0 15px rgba(0,0,0,0.6); box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-border-radius:10px / 100px; border-radius:10px / 100px} .curved-vt-2:before{ right:0} .curved-hz-1:before{ top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px} .curved-hz-2:before{ top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px} /* Rotated box */ .rotated{ -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg)} .rotated >:first-child:before{ content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset} /* ========================================================================== Stacked Page Effects ========================================================================== */ .paged{ position:relative; margin:0; background:#fff; border-bottom:1px solid #CCC; border-radius:2px; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1); -moz-box-shadow:0 1px 2px rgba(0,0,0,0.1); box-shadow:0 1px 2px rgba(0,0,0,0.1)} .paged:before, .paged:after{ content:''; position:absolute; z-index:-1; height:4px; background:#fff; border:1px solid #ccc; border-radius:2px} .paged:after{ left:0; right:0; bottom:-3px; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1); -moz-box-shadow:0 1px 2px rgba(0,0,0,0.1); box-shadow:0 1px 2px rgba(0,0,0,0.1)} .paged:before{ left:2px; right:2px; bottom:-5px; border-color:#c4c4c4; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.15); -moz-box-shadow:0 1px 2px rgba(0,0,0,0.15); box-shadow:0 1px 2px rgba(0,0,0,0.15)} .paged hr{ border-top:none; border-bottom:1px solid rgba(0,0,0,0.1); box-shadow:0 1px rgba(255,255,255,1); -webkit-box-shadow:0 1px rgba(255,255,255,1); -moz-box-shadow:0 1px rgba(255,255,255,1)} .paged .button{ font-size:14px; margin-top:10px; padding:0 10px; margin-bottom:0} .inner-container{width:auto; padding:10px 20px; margin:0 auto} .inner-container:hover{color:#666} /* ========================================================================== Pricing Tables ========================================================================== */ .normal-plan{ display:inline-block; background:#fff; border:1px solid #DDD; margin-top:7px} .normal-plan:hover{ box-shadow:0 2px 12px rgba(0,0,0,0.25); z-index:10} .promoted-plan{ display:inline-block; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,0.25); border:solid 5px #FF7F00; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px} .plan-container{margin:20px} .promoted-plan ul, .normal-plan ul{list-style:none; margin:0} h2.plans{ margin-bottom:0; text-align:center} h4.plans{ text-align:center; font-weight:400; font-size:16px} .tblheader p{ text-align:center; margin-top:15px; font-size:12px} .promoted-plan ul li, .normal-plan ul li{ border-bottom:1px solid #eee; text-align:center; padding:10px 0} .promoted-plan ul li:hover, .normal-plan ul li:hover{ background:#f9f9f9} .promoted-plan ul li:last-child, .normal-plan ul li:last-child{ border-bottom:none} .center-button{ text-align:center; margin-top:10px} .tblname{ font-weight:bold} .tblprice{ background:#f3f3f3; padding:10px 5px; color:#444} .spacer{ width:auto; height:50px; clear:both} /* ========================================================================== Misc Classes and Conditions ========================================================================== */ .go3d{ color:#FFF; text-shadow:0px 0px 2px #686868, 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(100,100,100,0.4), 0px 9px 5px rgba(100,100,100,0.1), 0px 10px 7px rgba(100,100,100,0.15), 0px 11px 9px rgba(100,100,100,0.2), 0px 12px 11px rgba(100,100,100,0.25), 0px 13px 15px rgba(100,100,100,0.3)} .mobile-only{display:none} .cursor-pointer { cursor: pointer } .cursor-default { cursor: default } .float-right { float: right } .float-left { float: left } .float-none { float: none } /* ========================================================================== Highlights ========================================================================== */ ::selection{background:#E3ECF0; color:#666} ::-moz-selection{background:#E3ECF0; color:#666} .min-height{height:200px} .responsive-image{width:inherit; max-width:100%} /* ========================================================================== Margins &Paddings ========================================================================== */ .remove-bottom{margin-bottom:0 !important} .half-bottom{margin-bottom:10px !important} .add-bottom, .margin-bottom{margin-bottom:20px !important} .add-bottom-large, .margin-bottom-large{margin-bottom:50px !important} .add-bottom-exlarge, .margin-bottom-exlarge{margin-bottom:100px !important} .add-top, .margin-top{margin-top:20px !important} .add-top-small, .margin-top-small{margin-top:10px !important} .add-top-medium, .margin-top-medium{margin-top:30px !important} .add-top-large, .margin-top-large{margin-top:50px !important} .add-top-exlarge, .margin-top-exlarge{margin-top:100px !important} .add-left{margin-left:20px} .margin-tb-large{margin-top:50px !important; margin-bottom:50px !important} .margin-tb-medium{margin-top:25px !important; margin-bottom:25px !important} .margin-tb-small{margin-top:10px !important; margin-bottom:10px !important} .margin-lr-large{margin-left:0 50px !important} .margin-lr-medium{margin:0 25px !important} .margin-lr-small{margin:0 10px !important} .margin-auto{margin-left:auto; margin-right:auto} .no-margin{margin:0 !important} .padding-tb-exlarge{padding:50px 0 !important} .padding-tb-large{padding:30px 0 !important} .padding-tb-medium{padding:20px 0 !important} .padding-tb-small{padding:10px 0 !important} .padding-lr-large{margin:0 30px !important} .padding-lr-medium{margin:0 20px !important} .padding-lr-small{margin:0 10px !important} .padding-right{padding-right:20px} .padding-left{padding-left:20px} .padding-large{padding:30px !important} .padding-medium{padding:20px !important} .padding-small{padding:10px !important} .padding-left-none {padding-left: 0 !important} .padding-right-none {padding-right: 0 !important} /* ========================================================================== Alignment ========================================================================== */ .align-left{text-align:left} .align-center{text-align:center} .align-right{text-align:right} .image-left{float:left; margin-right:15px; margin-bottom:5px} .image-left-dashed-dark{float:left; margin-right:15px; margin-top:5px; border:1px dashed #999; padding:8px} /* ========================================================================== Borders ========================================================================== */ .border-right{border-right:1px solid #999} .border-bottom{border-bottom:1px solid #999} .border-left{border-left:1px solid #999} .border-top{border-top:1px solid #999} .border{border:1px solid rgba(0,0,0,0.1)} /* ========================================================================== Text Colors ========================================================================== */ .color-orange{color:#F60} .color-white{color:#FFF} .color-yellow{color:#FFF222} .color-red{color:red} .color-green{color:#D2EF28} .color-darkgreen{color:#008000} /* ========================================================================== Line Spacing ========================================================================== */ .single-space{line-height:1em} .half-space{line-height:1.5em} .double-space{line-height:2em} /* ========================================================================== Positioning &Displays ========================================================================== */ .relative, .position-relative {position:relative} .absolute, .position-absolute {position:absolute} .static, .position-static {position:static} .block, .display-block {display:block !important} .inline-block, .display-inline-block {display:inline-block !important} .inline, .display-inline-block {display:inline !important} .display-none { display: none; } @media screen and (max-width:560px) { .center-phone,.center-tablet{text-align:center !important} } /* ========================================================================== Other Goodies ========================================================================== */ .icon-heart.active{color:#d14 !important} a.comments-alt.active{color:#d14 !important} .label-appointment-requested { background-color: #49798D; } /* ========================================================================== Full Screen Slideshow ========================================================================== */ .cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .cb-slideshow:after { content: ''; background: #000 url(../Images/pattern.png) repeat top left; opacity: 0.2; } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 100s linear infinite 0s; -moz-animation: imageAnimation 100s linear infinite 0s; -o-animation: imageAnimation 100s linear infinite 0s; -ms-animation: imageAnimation 100s linear infinite 0s; animation: imageAnimation 100s linear infinite 0s; } .cb-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; color: #fff; -webkit-animation: titleAnimation 100s linear infinite 0s; -moz-animation: titleAnimation 100s linear infinite 0s; -o-animation: titleAnimation 100s linear infinite 0s; -ms-animation: titleAnimation 100s linear infinite 0s; animation: titleAnimation 100s linear infinite 0s; } .cb-slideshow li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 240px; padding: 0; line-height: 200px; } .cb-slideshow li:nth-child(1) span { background-image: url('../Images/stock/stock1.jpg') } .cb-slideshow li:nth-child(2) span { background-image: url(../Images/stock/stock2.jpg); -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -o-animation-delay: 20s; -ms-animation-delay: 20s; animation-delay: 20s; } .cb-slideshow li:nth-child(3) span { background-image: url(../Images/stock/stock3.jpg); -webkit-animation-delay: 40s; -moz-animation-delay: 40s; -o-animation-delay: 40s; -ms-animation-delay: 40s; animation-delay: 40s; } .cb-slideshow li:nth-child(4) span { background-image: url(../Images/stock/stock4.jpg); -webkit-animation-delay: 60s; -moz-animation-delay: 60s; -o-animation-delay: 60s; -ms-animation-delay: 60s; animation-delay: 60s; } .cb-slideshow li:nth-child(5) span { background-image: url(../Images/stock/stock5.jpg); -webkit-animation-delay: 80s; -moz-animation-delay: 80s; -o-animation-delay: 80s; -ms-animation-delay: 80s; animation-delay: 80s; } .cb-slideshow li:nth-child(6) span { background-image: url(../Images/stock/stock6.jpg); -webkit-animation-delay: 100s; -moz-animation-delay: 100s; -o-animation-delay: 100s; -ms-animation-delay: 100s; animation-delay: 100s; } .cb-slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .cb-slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .cb-slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .cb-slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .cb-slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } /* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 2% { opacity: 1; -webkit-animation-timing-function: ease-out; } 19% { opacity: 1 } 20% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 2% { opacity: 1; -moz-animation-timing-function: ease-out; } 19% { opacity: 1 } 20% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 2% { opacity: 1; -o-animation-timing-function: ease-out; } 19% { opacity: 1 } 20% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 2% { opacity: 1; -ms-animation-timing-function: ease-out; } 19% { opacity: 1 } 20% { opacity: 0 } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 2% { opacity: 1; animation-timing-function: ease-out; } 19% { opacity: 1 } 20% { opacity: 0 } 100% { opacity: 0 } } /* Animation for the title */ @-webkit-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .cb-slideshow li span{ opacity: 1; } @media screen and (max-width: 1140px) { .cb-slideshow li div h3 { font-size: 140px } } @media screen and (max-width: 600px) { .cb-slideshow li div h3 { font-size: 80px } } /* ========================================================================== Lightbox ========================================================================== */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:99999999999999999999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;} .cboxIframe{width:100%; height:100%; display:block; border:0;} #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:RGBA(0,0,0,0.8);} #colorbox{outline:0;} #cboxTopLeft{width:21px; height:21px; background:url(../Images/controls.png) no-repeat -101px 0;} #cboxTopRight{width:21px; height:21px; background:url(../Images/controls.png) no-repeat -130px 0;} #cboxBottomLeft{width:21px; height:21px; background:url(../Images/controls.png) no-repeat -101px -29px;} #cboxBottomRight{width:21px; height:21px; background:url(../Images/controls.png) no-repeat -130px -29px;} #cboxMiddleLeft{width:21px; background:url(../Images/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(../Images/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(../Images/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(../Images/border.png) 0 -29px repeat-x;} #cboxContent{background:#fff; overflow:hidden;} .cboxIframe{background:#fff;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{margin-bottom:28px;} #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} #cboxLoadingOverlay{background:url(../Images/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(../Images/loading.gif) no-repeat center center;} /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../Images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;} #cboxPrevious:hover{background-position:-75px -25px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(../Images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} #cboxNext:hover{background-position:-50px -25px;} #cboxClose{position:absolute; bottom:0; right:0; background:url(../Images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;} #cboxClose:hover{background-position:-25px -25px;} /* The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9. See: http://jacklmoore.com/notes/ie-transparency-problems/ */ .cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); } /* The following provides PNG transparency support for IE6 Feel free to remove this and the /ie6/ directory if you have dropped IE6 support. */ .cboxIE6 #cboxTopLeft{background:url(../Images/ie6/borderTopLeft.png);} .cboxIE6 #cboxTopCenter{background:url(../Images/ie6/borderTopCenter.png);} .cboxIE6 #cboxTopRight{background:url(../Images/ie6/borderTopRight.png);} .cboxIE6 #cboxBottomLeft{background:url(../Images/ie6/borderBottomLeft.png);} .cboxIE6 #cboxBottomCenter{background:url(../Images/ie6/borderBottomCenter.png);} .cboxIE6 #cboxBottomRight{background:url(../Images/ie6/borderBottomRight.png);} .cboxIE6 #cboxMiddleLeft{background:url(../Images/ie6/borderMiddleLeft.png);} .cboxIE6 #cboxMiddleRight{background:url(../Images/ie6/borderMiddleRight.png);} .cboxIE6 #cboxTopLeft, .cboxIE6 #cboxTopCenter, .cboxIE6 #cboxTopRight, .cboxIE6 #cboxBottomLeft, .cboxIE6 #cboxBottomCenter, .cboxIE6 #cboxBottomRight, .cboxIE6 #cboxMiddleLeft, .cboxIE6 #cboxMiddleRight { _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')"); } /* ========================================================================== Animations ========================================================================== */ /* Animate.css - http://daneden.me/animate LICENSED UNDER THE MIT LICENSE (MIT) Copyright (c) 2012 Dan Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated-infinite { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } /* ========================================================================== Heavily Compressed Code Beautify at http://html.fwpolice.com/css/ ========================================================================== */ @-webkit-keyframes blink { 0% { opacity: 0.5; filter: alpha(opacity=50); } 50% { opacity: 1; filter: alpha(opacity=100); } 100% { opacity: 0.5; filter: alpha(opacity=50); } } @-moz-keyframes blink { 0% { opacity: 0.5; filter: alpha(opacity=50); } 50% { opacity: 1; filter: alpha(opacity=100); } 100% { opacity: 0.5; filter: alpha(opacity=50); } } @keyframes blink { 0% { opacity: 0.5; filter: alpha(opacity=50); } 50% { opacity: 1; filter: alpha(opacity=100); } 100% { opacity: 0.5; filter: alpha(opacity=50); } } .newmsg { /*-webkit-animation: newmsg 2s step-end infinite; -moz-animation: newmsg 2s step-end infinite; animation: newmsg 2s step-end infinite; -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15); -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15); box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);*/ } .blink { -webkit-animation: blink 2s step-end infinite; -moz-animation: blink 2s step-end infinite; animation: blink 2s step-end infinite; } .newmsg-count { display: inline-block; background-color: #b94a48; color: #FFF; } @-webkit-keyframes bounce { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounce { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { -moz-transform: translateY(0); } } @-ms-keyframes bounce { 0% { opacity: 0; -ms-transform: translateY(-2000px); } 60% { opacity: 1; -ms-transform: translateY(30px); } 80% { -ms-transform: translateY(-10px); } 100% { -ms-transform: translateY(0); } } @-o-keyframes bounce { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { opacity: 1; -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { -o-transform: translateY(0); } } @keyframes bounce { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .bounce { -webkit-animation: bounce 1s; -moz-animation: bounce 1s; -ms-animation: bounce 1s; -o-animation: bounce 1s; animation: bounce 1s; } @-webkit-keyframes flash { 0%,50%,100% { opacity: 1; } 25%,75% { opacity: 0; } } @-moz-keyframes flash { 0%,50%,100% { opacity: 1; } 25%,75% { opacity: 0; } } @-o-keyframes flash { 0%,50%,100% { opacity: 1; } 25%,75% { opacity: 0; } } @keyframes flash { 0%,50%,100% { opacity: 1; } 25%,75% { opacity: 0; } } .flash { -webkit-animation-name: flash; -moz-animation-name: flash; -o-animation-name: flash; animation-name: flash; } @-webkit-keyframes shake { 0%,100% { -webkit-transform: translateX(0); } 10%,30%,50%,70%,90% { -webkit-transform: translateX(-10px); } 20%,40%,60%,80% { -webkit-transform: translateX(10px); } } @-moz-keyframes shake { 0%,100% { -moz-transform: translateX(0); } 10%,30%,50%,70%,90% { -moz-transform: translateX(-10px); } 20%,40%,60%,80% { -moz-transform: translateX(10px); } } @-o-keyframes shake { 0%,100% { -o-transform: translateX(0); } 10%,30%,50%,70%,90% { -o-transform: translateX(-10px); } 20%,40%,60%,80% { -o-transform: translateX(10px); } } @keyframes shake { 0%,100% { transform: translateX(0); } 10%,30%,50%,70%,90% { transform: translateX(-10px); } 20%,40%,60%,80% { transform: translateX(10px); } } .shake { -webkit-animation-name: shake; -moz-animation-name: shake; -o-animation-name: shake; animation-name: shake; } @-webkit-keyframes bounce { 0%,20%,50%,80%,100% { -webkit-transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); } } @-moz-keyframes bounce { 0%,20%,50%,80%,100% { -moz-transform: translateY(0); } 40% { -moz-transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); } } @-o-keyframes bounce { 0%,20%,50%,80%,100% { -o-transform: translateY(0); } 40% { -o-transform: translateY(-30px); } 60% { -o-transform: translateY(-15px); } } @keyframes bounce { 0%,20%,50%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); } 10%,20% { -webkit-transform: scale(0.9) rotate(-3deg); } 30%,50%,70%,90% { -webkit-transform: scale(1.1) rotate(3deg); } 40%,60%,80% { -webkit-transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); } } @-moz-keyframes tada { 0% { -moz-transform: scale(1); } 10%,20% { -moz-transform: scale(0.9) rotate(-3deg); } 30%,50%,70%,90% { -moz-transform: scale(1.1) rotate(3deg); } 40%,60%,80% { -moz-transform: scale(1.1) rotate(-3deg); } 100% { -moz-transform: scale(1) rotate(0); } } @-o-keyframes tada { 0% { -o-transform: scale(1); } 10%,20% { -o-transform: scale(0.9) rotate(-3deg); } 30%,50%,70%,90% { -o-transform: scale(1.1) rotate(3deg); } 40%,60%,80% { -o-transform: scale(1.1) rotate(-3deg); } 100% { -o-transform: scale(1) rotate(0); } } @keyframes tada { 0% { transform: scale(1); } 10%,20% { transform: scale(0.9) rotate(-3deg); } 30%,50%,70%,90% { transform: scale(1.1) rotate(3deg); } 40%,60%,80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; -moz-animation-name: tada; -o-animation-name: tada; animation-name: tada; } @-webkit-keyframes swing { 20%,40%,60%,80%,100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes swing { 20% { -moz-transform: rotate(15deg); } 40% { -moz-transform: rotate(-10deg); } 60% { -moz-transform: rotate(5deg); } 80% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0deg); } } @-o-keyframes swing { 20% { -o-transform: rotate(15deg); } 40% { -o-transform: rotate(-10deg); } 60% { -o-transform: rotate(5deg); } 80% { -o-transform: rotate(-5deg); } 100% { -o-transform: rotate(0deg); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; -moz-animation-name: swing; -o-animation-name: swing; animation-name: swing; } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0%); } 15% { -moz-transform: translateX(-25%) rotate(-5deg); } 30% { -moz-transform: translateX(20%) rotate(3deg); } 45% { -moz-transform: translateX(-15%) rotate(-3deg); } 60% { -moz-transform: translateX(10%) rotate(2deg); } 75% { -moz-transform: translateX(-5%) rotate(-1deg); } 100% { -moz-transform: translateX(0%); } } @-o-keyframes wobble { 0% { -o-transform: translateX(0%); } 15% { -o-transform: translateX(-25%) rotate(-5deg); } 30% { -o-transform: translateX(20%) rotate(3deg); } 45% { -o-transform: translateX(-15%) rotate(-3deg); } 60% { -o-transform: translateX(10%) rotate(2deg); } 75% { -o-transform: translateX(-5%) rotate(-1deg); } 100% { -o-transform: translateX(0%); } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out; } 40% { -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out; } 50% { -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in; } 80% { -moz-transform: perspective(400px) rotateY(360deg) scale(.95); -moz-animation-timing-function: ease-in; } 100% { -moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -o-transform: perspective(400px) rotateY(0); -o-animation-timing-function: ease-out; } 40% { -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-animation-timing-function: ease-out; } 50% { -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in; } 80% { -o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in; } 100% { -o-transform: perspective(400px) scale(1); -o-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { transform: perspective(400px) rotateY(360deg) scale(.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } .flip { -webkit-backface-visibility: visible!important; -webkit-animation-name: flip; -moz-backface-visibility: visible!important; -moz-animation-name: flip; -o-backface-visibility: visible!important; -o-animation-name: flip; backface-visibility: visible!important; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible!important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible!important; -moz-animation-name: flipInX; -o-backface-visibility: visible!important; -o-animation-name: flipInX; backface-visibility: visible!important; animation-name: flipInX; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible!important; -moz-animation-name: flipOutX; -moz-backface-visibility: visible!important; -o-animation-name: flipOutX; -o-backface-visibility: visible!important; animation-name: flipOutX; backface-visibility: visible!important; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateY(-10deg); } 70% { -moz-transform: perspective(400px) rotateY(10deg); } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateY(-10deg); } 70% { -o-transform: perspective(400px) rotateY(10deg); } 100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible!important; -webkit-animation-name: flipInY; -moz-backface-visibility: visible!important; -moz-animation-name: flipInY; -o-backface-visibility: visible!important; -o-animation-name: flipInY; backface-visibility: visible!important; animation-name: flipInY; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-moz-keyframes flipOutY { 0% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-o-keyframes flipOutY { 0% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible!important; -webkit-animation-name: flipOutY; -moz-backface-visibility: visible!important; -moz-animation-name: flipOutY; -o-backface-visibility: visible!important; -o-animation-name: flipOutY; backface-visibility: visible!important; animation-name: flipOutY; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -o-transform: translateY(2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -o-transform: translateY(-2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -o-transform: translateX(-2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-20px); } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(20px); } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-20px); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(20px); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -moz-animation-name: fadeOutUpBig; -o-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -moz-animation-name: fadeOutDownBig; -o-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -moz-animation-name: fadeOutLeftBig; -o-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -moz-animation-name: fadeOutRightBig; -o-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(.9); } 100% { -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(.3); } 50% { opacity: 1; -o-transform: scale(1.05); } 70% { -o-transform: scale(.9); } 100% { -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); } 60% { opacity: 1; -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: translateY(2000px); } 60% { opacity: 1; -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { opacity: 1; -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { opacity: 1; -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(30px); } 80% { -o-transform: translateX(-10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { opacity: 1; -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { opacity: 1; -o-transform: translateX(-30px); } 80% { -o-transform: translateX(10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); } } @-moz-keyframes bounceOut { 0% { -moz-transform: scale(1); } 25% { -moz-transform: scale(.95); } 50% { opacity: 1; -moz-transform: scale(1.1); } 100% { opacity: 0; -moz-transform: scale(.3); } } @-o-keyframes bounceOut { 0% { -o-transform: scale(1); } 25% { -o-transform: scale(.95); } 50% { opacity: 1; -o-transform: scale(1.1); } 100% { opacity: 0; -o-transform: scale(.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes bounceOutUp { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(20px); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes bounceOutUp { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(20px); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes bounceOutDown { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(-20px); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes bounceOutDown { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(-20px); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes bounceOutLeft { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(20px); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes bounceOutLeft { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(20px); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes bounceOutRight { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(-20px); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes bounceOutRight { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(-20px); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -o-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateIn { 0% { -o-transform-origin: center center; -o-transform: rotate(-200deg); opacity: 0; } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; -moz-animation-name: rotateInUpLeft; -o-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -o-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; -moz-animation-name: rotateInUpRight; -o-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -o-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0; } } @-moz-keyframes rotateOut { 0% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(200deg); opacity: 0; } } @-o-keyframes rotateOut { 0% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: center center; -o-transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { transform-origin: center center; transform: rotate(0); opacity: 1; } 100% { transform-origin: center center; transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -o-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { -transform-origin: left bottom; -transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -o-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; -moz-animation-name: rotateOutDownLeft; -o-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -o-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; -moz-animation-name: rotateOutDownRight; -o-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%,60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); opacity: 0; } } @-moz-keyframes hinge { 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 20%,60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 100% { -moz-transform: translateY(700px); opacity: 0; } } @-o-keyframes hinge { 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 20%,60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 100% { -o-transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%,60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; -moz-animation-name: hinge; -o-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } } @-o-keyframes rollIn { 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -o-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); } } @-moz-keyframes rollOut { 0% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -moz-transform: translateX(100%) rotate(120deg); } } @-o-keyframes rollOut { 0% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -o-transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; -moz-animation-name: rollOut; -o-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-moz-keyframes lightSpeedIn { 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-o-keyframes lightSpeedIn { 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; -moz-animation-name: lightSpeedIn; -o-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } .animated.lightSpeedIn { -webkit-animation-duration: .5s; -moz-animation-duration: .5s; -o-animation-duration: .5s; animation-duration: .5s; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-moz-keyframes lightSpeedOut { 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-o-keyframes lightSpeedOut { 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; -moz-animation-name: lightSpeedOut; -o-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } .animated.lightSpeedOut { -webkit-animation-duration: .25s; -moz-animation-duration: .25s; -o-animation-duration: .25s; animation-duration: .25s; } @-webkit-keyframes wiggle { 0% { -webkit-transform: skewX(9deg); } 10% { -webkit-transform: skewX(-8deg); } 20% { -webkit-transform: skewX(7deg); } 30% { -webkit-transform: skewX(-6deg); } 40% { -webkit-transform: skewX(5deg); } 50% { -webkit-transform: skewX(-4deg); } 60% { -webkit-transform: skewX(3deg); } 70% { -webkit-transform: skewX(-2deg); } 80% { -webkit-transform: skewX(1deg); } 90% { -webkit-transform: skewX(0deg); } 100% { -webkit-transform: skewX(0deg); } } @-moz-keyframes wiggle { 0% { -moz-transform: skewX(9deg); } 10% { -moz-transform: skewX(-8deg); } 20% { -moz-transform: skewX(7deg); } 30% { -moz-transform: skewX(-6deg); } 40% { -moz-transform: skewX(5deg); } 50% { -moz-transform: skewX(-4deg); } 60% { -moz-transform: skewX(3deg); } 70% { -moz-transform: skewX(-2deg); } 80% { -moz-transform: skewX(1deg); } 90% { -moz-transform: skewX(0deg); } 100% { -moz-transform: skewX(0deg); } } @-o-keyframes wiggle { 0% { -o-transform: skewX(9deg); } 10% { -o-transform: skewX(-8deg); } 20% { -o-transform: skewX(7deg); } 30% { -o-transform: skewX(-6deg); } 40% { -o-transform: skewX(5deg); } 50% { -o-transform: skewX(-4deg); } 60% { -o-transform: skewX(3deg); } 70% { -o-transform: skewX(-2deg); } 80% { -o-transform: skewX(1deg); } 90% { -o-transform: skewX(0deg); } 100% { -o-transform: skewX(0deg); } } @keyframes wiggle { 0% { transform: skewX(9deg); } 10% { transform: skewX(-8deg); } 20% { transform: skewX(7deg); } 30% { transform: skewX(-6deg); } 40% { transform: skewX(5deg); } 50% { transform: skewX(-4deg); } 60% { transform: skewX(3deg); } 70% { transform: skewX(-2deg); } 80% { transform: skewX(1deg); } 90% { transform: skewX(0deg); } 100% { transform: skewX(0deg); } } .wiggle { -webkit-animation-name: wiggle; -moz-animation-name: wiggle; -o-animation-name: wiggle; animation-name: wiggle; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } .animated.wiggle { -webkit-animation-duration: .75s; -moz-animation-duration: .75s; -o-animation-duration: .75s; animation-duration: .75s; }