@font-face {
font-family: "icomoon";
src: url("../../framework/fonts/icomoon.eot?jri2z7");
src: url("../../framework/fonts/icomoon.eot?#iefixjri2z7") format("embedded-opentype"), url("../../framework/fonts/icomoon.woff?jri2z7") format("woff"), url("../../framework/fonts/icomoon.ttf?jri2z7") format("truetype"), url("../../framework/fonts/icomoon.svg?jri2z7#icomoon") format("svg");
font-weight: normal;
font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
font-family: "icomoon";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-mail:before {
content: "\e7d3";
}

.icon-paperplane:before {
content: "\e7d4";
}

.icon-export:before {
content: "\e7d5";
}

.icon-progress-3:before {
content: "\e7d6";
}

.icon-progress-2:before {
content: "\e7d7";
}

.icon-brogress-1:before {
content: "\e7d8";
}

.icon-progress-0:before {
content: "\e7d9";
}

.icon-arrow-left:before {
content: "\e7c3";
}

.icon-arrow-down:before {
content: "\e7c4";
}

.icon-arrow-up:before {
content: "\e7c5";
}

.icon-arrow-right:before {
content: "\e7c6";
}

.icon-arrow-left2:before {
content: "\e7c7";
}

.icon-arrow-down2:before {
content: "\e7c8";
}

.icon-arrow-up2:before {
content: "\e7c9";
}

.icon-arrow-right2:before {
content: "\e7ca";
}

.icon-arrow-left3:before {
content: "\e7cb";
}

.icon-arrow-down3:before {
content: "\e7cc";
}

.icon-arrow-up3:before {
content: "\e7cd";
}

.icon-uniE7CE:before {
content: "\e7ce";
}

.icon-menu:before {
content: "\e7cf";
}

.icon-ellipsis:before {
content: "\e7d0";
}

.icon-dots:before {
content: "\e7d1";
}

.icon-dot:before {
content: "\e7d2";
}

.icon-home:before {
content: "\e600";
}

.icon-home2:before {
content: "\e601";
}

.icon-home3:before {
content: "\e602";
}

.icon-office:before {
content: "\e603";
}

.icon-newspaper:before {
content: "\e604";
}

.icon-pencil:before {
content: "\e605";
}

.icon-pencil2:before {
content: "\e606";
}

.icon-quill:before {
content: "\e607";
}

.icon-pen:before {
content: "\e608";
}

.icon-blog:before {
content: "\e609";
}

.icon-droplet:before {
content: "\e60a";
}

.icon-paint-format:before {
content: "\e60b";
}

.icon-image:before {
content: "\e60c";
}

.icon-image2:before {
content: "\e60d";
}

.icon-images:before {
content: "\e60e";
}

.icon-camera:before {
content: "\e60f";
}

.icon-music:before {
content: "\e610";
}

.icon-headphones:before {
content: "\e611";
}

.icon-play:before {
content: "\e612";
}

.icon-film:before {
content: "\e613";
}

.icon-camera2:before {
content: "\e614";
}

.icon-dice:before {
content: "\e615";
}

.icon-pacman:before {
content: "\e616";
}

.icon-spades:before {
content: "\e617";
}

.icon-clubs:before {
content: "\e618";
}

.icon-diamonds:before {
content: "\e619";
}

.icon-pawn:before {
content: "\e61a";
}

.icon-bullhorn:before {
content: "\e61b";
}

.icon-connection:before {
content: "\e61c";
}

.icon-podcast:before {
content: "\e61d";
}

.icon-feed:before {
content: "\e61e";
}

.icon-book:before {
content: "\e61f";
}

.icon-books:before {
content: "\e620";
}

.icon-library:before {
content: "\e621";
}

.icon-file:before {
content: "\e622";
}

.icon-profile:before {
content: "\e623";
}

.icon-file2:before {
content: "\e624";
}

.icon-file3:before {
content: "\e625";
}

.icon-file4:before {
content: "\e626";
}

.icon-copy:before {
content: "\e627";
}

.icon-copy2:before {
content: "\e628";
}

.icon-copy3:before {
content: "\e629";
}

.icon-paste:before {
content: "\e62a";
}

.icon-paste2:before {
content: "\e62b";
}

.icon-paste3:before {
content: "\e62c";
}

.icon-stack:before {
content: "\e62d";
}

.icon-folder:before {
content: "\e62e";
}

.icon-folder-open:before {
content: "\e62f";
}

.icon-tag:before {
content: "\e630";
}

.icon-tags:before {
content: "\e631";
}

.icon-barcode:before {
content: "\e632";
}

.icon-qrcode:before {
content: "\e633";
}

.icon-ticket:before {
content: "\e634";
}

.icon-cart:before {
content: "\e635";
}

.icon-cart2:before {
content: "\e636";
}

.icon-cart3:before {
content: "\e637";
}

.icon-coin:before {
content: "\e638";
}

.icon-credit:before {
content: "\e639";
}

.icon-calculate:before {
content: "\e63a";
}

.icon-support:before {
content: "\e63b";
}

.icon-phone:before {
content: "\e63c";
}

.icon-phone-hang-up:before {
content: "\e63d";
}

.icon-address-book:before {
content: "\e63e";
}

.icon-notebook:before {
content: "\e63f";
}

.icon-envelope:before {
content: "\e640";
}

.icon-pushpin:before {
content: "\e641";
}

.icon-location:before {
content: "\e642";
}

.icon-location2:before {
content: "\e643";
}

.icon-compass:before {
content: "\e644";
}

.icon-map:before {
content: "\e645";
}

.icon-map2:before {
content: "\e646";
}

.icon-history:before {
content: "\e647";
}

.icon-clock:before {
content: "\e648";
}

.icon-clock2:before {
content: "\e649";
}

.icon-alarm:before {
content: "\e64a";
}

.icon-alarm2:before {
content: "\e64b";
}

.icon-bell:before {
content: "\e64c";
}

.icon-stopwatch:before {
content: "\e64d";
}

.icon-calendar:before {
content: "\e64e";
}

.icon-calendar2:before {
content: "\e64f";
}

.icon-print:before {
content: "\e650";
}

.icon-keyboard:before {
content: "\e651";
}

.icon-screen:before {
content: "\e652";
}

.icon-laptop:before {
content: "\e653";
}

.icon-mobile:before {
content: "\e654";
}

.icon-mobile2:before {
content: "\e655";
}

.icon-tablet:before {
content: "\e656";
}

.icon-tv:before {
content: "\e657";
}

.icon-cabinet:before {
content: "\e658";
}

.icon-drawer:before {
content: "\e659";
}

.icon-drawer2:before {
content: "\e65a";
}

.icon-drawer3:before {
content: "\e65b";
}

.icon-box-add:before {
content: "\e65c";
}

.icon-box-remove:before {
content: "\e65d";
}

.icon-download:before {
content: "\e65e";
}

.icon-upload:before {
content: "\e65f";
}

.icon-disk:before {
content: "\e660";
}

.icon-storage:before {
content: "\e661";
}

.icon-undo:before {
content: "\e662";
}

.icon-redo:before {
content: "\e663";
}

.icon-flip:before {
content: "\e664";
}

.icon-flip2:before {
content: "\e665";
}

.icon-undo2:before {
content: "\e666";
}

.icon-redo2:before {
content: "\e667";
}

.icon-forward:before {
content: "\e668";
}

.icon-reply:before {
content: "\e669";
}

.icon-bubble:before {
content: "\e66a";
}

.icon-bubbles:before {
content: "\e66b";
}

.icon-bubbles2:before {
content: "\e66c";
}

.icon-bubble2:before {
content: "\e66d";
}

.icon-bubbles3:before {
content: "\e66e";
}

.icon-bubbles4:before {
content: "\e66f";
}

.icon-user:before {
content: "\e670";
}

.icon-users:before {
content: "\e671";
}

.icon-user2:before {
content: "\e672";
}

.icon-users2:before {
content: "\e673";
}

.icon-user3:before {
content: "\e674";
}

.icon-user4:before {
content: "\e675";
}

.icon-quotes-left:before {
content: "\e676";
}

.icon-busy:before {
content: "\e677";
}

.icon-spinner:before {
content: "\e678";
}

.icon-spinner2:before {
content: "\e679";
}

.icon-spinner3:before {
content: "\e67a";
}

.icon-spinner4:before {
content: "\e67b";
}

.icon-spinner5:before {
content: "\e67c";
}

.icon-spinner6:before {
content: "\e67d";
}

.icon-binoculars:before {
content: "\e67e";
}

.icon-search:before {
content: "\e67f";
}

.icon-zoomin:before {
content: "\e680";
}

.icon-zoomout:before {
content: "\e681";
}

.icon-expand:before {
content: "\e682";
}

.icon-contract:before {
content: "\e683";
}

.icon-expand2:before {
content: "\e684";
}

.icon-contract2:before {
content: "\e685";
}

.icon-key:before {
content: "\e686";
}

.icon-key2:before {
content: "\e687";
}

.icon-lock:before {
content: "\e688";
}

.icon-lock2:before {
content: "\e689";
}

.icon-unlocked:before {
content: "\e68a";
}

.icon-wrench:before {
content: "\e68b";
}

.icon-settings:before {
content: "\e68c";
}

.icon-equalizer:before {
content: "\e68d";
}

.icon-cog:before {
content: "\e68e";
}

.icon-cogs:before {
content: "\e68f";
}

.icon-cog2:before {
content: "\e690";
}

.icon-hammer:before {
content: "\e691";
}

.icon-wand:before {
content: "\e692";
}

.icon-aid:before {
content: "\e693";
}

.icon-bug:before {
content: "\e694";
}

.icon-pie:before {
content: "\e695";
}

.icon-stats:before {
content: "\e696";
}

.icon-bars:before {
content: "\e697";
}

.icon-bars2:before {
content: "\e698";
}

.icon-gift:before {
content: "\e699";
}

.icon-trophy:before {
content: "\e69a";
}

.icon-glass:before {
content: "\e69b";
}

.icon-mug:before {
content: "\e69c";
}

.icon-food:before {
content: "\e69d";
}

.icon-leaf:before {
content: "\e69e";
}

.icon-rocket:before {
content: "\e69f";
}

.icon-meter:before {
content: "\e6a0";
}

.icon-meter2:before {
content: "\e6a1";
}

.icon-dashboard:before {
content: "\e6a2";
}

.icon-hammer2:before {
content: "\e6a3";
}

.icon-fire:before {
content: "\e6a4";
}

.icon-lab:before {
content: "\e6a5";
}

.icon-magnet:before {
content: "\e6a6";
}

.icon-remove:before {
content: "\e6a7";
}

.icon-remove2:before {
content: "\e6a8";
}

.icon-briefcase:before {
content: "\e6a9";
}

.icon-airplane:before {
content: "\e6aa";
}

.icon-truck:before {
content: "\e6ab";
}

.icon-road:before {
content: "\e6ac";
}

.icon-accessibility:before {
content: "\e6ad";
}

.icon-target:before {
content: "\e6ae";
}

.icon-shield:before {
content: "\e6af";
}

.icon-lightning:before {
content: "\e6b0";
}

.icon-switch:before {
content: "\e6b1";
}

.icon-powercord:before {
content: "\e6b2";
}

.icon-signup:before {
content: "\e6b3";
}

.icon-list:before {
content: "\e6b4";
}

.icon-list2:before {
content: "\e6b5";
}

.icon-numbered-list:before {
content: "\e6b6";
}

.icon-menu2:before {
content: "\e6b7";
}

.icon-menu22:before {
content: "\e6b8";
}

.icon-tree:before {
content: "\e6b9";
}

.icon-cloud:before {
content: "\e6ba";
}

.icon-cloud-download:before {
content: "\e6bb";
}

.icon-cloud-upload:before {
content: "\e6bc";
}

.icon-download2:before {
content: "\e6bd";
}

.icon-upload2:before {
content: "\e6be";
}

.icon-download3:before {
content: "\e6bf";
}

.icon-upload3:before {
content: "\e6c0";
}

.icon-globe:before {
content: "\e6c1";
}

.icon-earth:before {
content: "\e6c2";
}

.icon-link:before {
content: "\e6c3";
}

.icon-flag:before {
content: "\e6c4";
}

.icon-attachment:before {
content: "\e6c5";
}

.icon-eye:before {
content: "\e6c6";
}

.icon-eye-blocked:before {
content: "\e6c7";
}

.icon-eye2:before {
content: "\e6c8";
}

.icon-bookmark:before {
content: "\e6c9";
}

.icon-bookmarks:before {
content: "\e6ca";
}

.icon-brightness-medium:before {
content: "\e6cb";
}

.icon-brightness-contrast:before {
content: "\e6cc";
}

.icon-contrast:before {
content: "\e6cd";
}

.icon-star:before {
content: "\e6ce";
}

.icon-star2:before {
content: "\e6cf";
}

.icon-star3:before {
content: "\e6d0";
}

.icon-heart:before {
content: "\e6d1";
}

.icon-heart2:before {
content: "\e6d2";
}

.icon-heart-broken:before {
content: "\e6d3";
}

.icon-thumbs-up:before {
content: "\e6d4";
}

.icon-thumbs-up2:before {
content: "\e6d5";
}

.icon-happy:before {
content: "\e6d6";
}

.icon-happy2:before {
content: "\e6d7";
}

.icon-smiley:before {
content: "\e6d8";
}

.icon-smiley2:before {
content: "\e6d9";
}

.icon-tongue:before {
content: "\e6da";
}

.icon-tongue2:before {
content: "\e6db";
}

.icon-sad:before {
content: "\e6dc";
}

.icon-sad2:before {
content: "\e6dd";
}

.icon-wink:before {
content: "\e6de";
}

.icon-wink2:before {
content: "\e6df";
}

.icon-grin:before {
content: "\e6e0";
}

.icon-grin2:before {
content: "\e6e1";
}

.icon-cool:before {
content: "\e6e2";
}

.icon-cool2:before {
content: "\e6e3";
}

.icon-angry:before {
content: "\e6e4";
}

.icon-angry2:before {
content: "\e6e5";
}

.icon-evil:before {
content: "\e6e6";
}

.icon-evil2:before {
content: "\e6e7";
}

.icon-shocked:before {
content: "\e6e8";
}

.icon-shocked2:before {
content: "\e6e9";
}

.icon-confused:before {
content: "\e6ea";
}

.icon-confused2:before {
content: "\e6eb";
}

.icon-neutral:before {
content: "\e6ec";
}

.icon-neutral2:before {
content: "\e6ed";
}

.icon-wondering:before {
content: "\e6ee";
}

.icon-wondering2:before {
content: "\e6ef";
}

.icon-point-up:before {
content: "\e6f0";
}

.icon-point-right:before {
content: "\e6f1";
}

.icon-point-down:before {
content: "\e6f2";
}

.icon-point-left:before {
content: "\e6f3";
}

.icon-warning:before {
content: "\e6f4";
}

.icon-notification:before {
content: "\e6f5";
}

.icon-question:before {
content: "\e6f6";
}

.icon-info:before {
content: "\e6f7";
}

.icon-info2:before {
content: "\e6f8";
}

.icon-blocked:before {
content: "\e6f9";
}

.icon-cancel-circle:before {
content: "\e6fa";
}

.icon-checkmark-circle:before {
content: "\e6fb";
}

.icon-spam:before {
content: "\e6fc";
}

.icon-close:before {
content: "\e6fd";
}

.icon-checkmark:before {
content: "\e6fe";
}

.icon-checkmark2:before {
content: "\e6ff";
}

.icon-spell-check:before {
content: "\e700";
}

.icon-minus:before {
content: "\e701";
}

.icon-plus:before {
content: "\e702";
}

.icon-enter:before {
content: "\e703";
}

.icon-exit:before {
content: "\e704";
}

.icon-play2:before {
content: "\e705";
}

.icon-pause:before {
content: "\e706";
}

.icon-stop:before {
content: "\e707";
}

.icon-backward:before {
content: "\e708";
}

.icon-forward2:before {
content: "\e709";
}

.icon-play3:before {
content: "\e70a";
}

.icon-pause2:before {
content: "\e70b";
}

.icon-stop2:before {
content: "\e70c";
}

.icon-backward2:before {
content: "\e70d";
}

.icon-forward3:before {
content: "\e70e";
}

.icon-first:before {
content: "\e70f";
}

.icon-last:before {
content: "\e710";
}

.icon-previous:before {
content: "\e711";
}

.icon-next:before {
content: "\e712";
}

.icon-eject:before {
content: "\e713";
}

.icon-volume-high:before {
content: "\e714";
}

.icon-volume-medium:before {
content: "\e715";
}

.icon-volume-low:before {
content: "\e716";
}

.icon-volume-mute:before {
content: "\e717";
}

.icon-volume-mute2:before {
content: "\e718";
}

.icon-volume-increase:before {
content: "\e719";
}

.icon-volume-decrease:before {
content: "\e71a";
}

.icon-loop:before {
content: "\e71b";
}

.icon-loop2:before {
content: "\e71c";
}

.icon-loop3:before {
content: "\e71d";
}

.icon-shuffle:before {
content: "\e71e";
}

.icon-arrow-up-left:before {
content: "\e71f";
}

.icon-arrow-up4:before {
content: "\e720";
}

.icon-arrow-up-right:before {
content: "\e721";
}

.icon-arrow-right3:before {
content: "\e722";
}

.icon-arrow-down-right:before {
content: "\e723";
}

.icon-arrow-down4:before {
content: "\e724";
}

.icon-arrow-down-left:before {
content: "\e725";
}

.icon-arrow-left4:before {
content: "\e726";
}

.icon-arrow-up-left2:before {
content: "\e727";
}

.icon-arrow-up22:before {
content: "\e728";
}

.icon-arrow-up-right2:before {
content: "\e729";
}

.icon-arrow-right22:before {
content: "\e72a";
}

.icon-arrow-down-right2:before {
content: "\e72b";
}

.icon-arrow-down22:before {
content: "\e72c";
}

.icon-arrow-down-left2:before {
content: "\e72d";
}

.icon-arrow-left22:before {
content: "\e72e";
}

.icon-arrow-up-left3:before {
content: "\e72f";
}

.icon-arrow-up32:before {
content: "\e730";
}

.icon-arrow-up-right3:before {
content: "\e731";
}

.icon-arrow-right32:before {
content: "\e732";
}

.icon-arrow-down-right3:before {
content: "\e733";
}

.icon-arrow-down32:before {
content: "\e734";
}

.icon-arrow-down-left3:before {
content: "\e735";
}

.icon-arrow-left32:before {
content: "\e736";
}

.icon-tab:before {
content: "\e737";
}

.icon-checkbox-checked:before {
content: "\e738";
}

.icon-checkbox-unchecked:before {
content: "\e739";
}

.icon-checkbox-partial:before {
content: "\e73a";
}

.icon-radio-checked:before {
content: "\e73b";
}

.icon-radio-unchecked:before {
content: "\e73c";
}

.icon-crop:before {
content: "\e73d";
}

.icon-scissors:before {
content: "\e73e";
}

.icon-filter:before {
content: "\e73f";
}

.icon-filter2:before {
content: "\e740";
}

.icon-font:before {
content: "\e741";
}

.icon-text-height:before {
content: "\e742";
}

.icon-text-width:before {
content: "\e743";
}

.icon-bold:before {
content: "\e744";
}

.icon-underline:before {
content: "\e745";
}

.icon-italic:before {
content: "\e746";
}

.icon-strikethrough:before {
content: "\e747";
}

.icon-omega:before {
content: "\e748";
}

.icon-sigma:before {
content: "\e749";
}

.icon-table:before {
content: "\e74a";
}

.icon-table2:before {
content: "\e74b";
}

.icon-insert-template:before {
content: "\e74c";
}

.icon-pilcrow:before {
content: "\e74d";
}

.icon-lefttoright:before {
content: "\e74e";
}

.icon-righttoleft:before {
content: "\e74f";
}

.icon-paragraph-left:before {
content: "\e750";
}

.icon-paragraph-center:before {
content: "\e751";
}

.icon-paragraph-right:before {
content: "\e752";
}

.icon-paragraph-justify:before {
content: "\e753";
}

.icon-paragraph-left2:before {
content: "\e754";
}

.icon-paragraph-center2:before {
content: "\e755";
}

.icon-paragraph-right2:before {
content: "\e756";
}

.icon-paragraph-justify2:before {
content: "\e757";
}

.icon-indent-increase:before {
content: "\e758";
}

.icon-indent-decrease:before {
content: "\e759";
}

.icon-newtab:before {
content: "\e75a";
}

.icon-embed:before {
content: "\e75b";
}

.icon-code:before {
content: "\e75c";
}

.icon-console:before {
content: "\e75d";
}

.icon-share:before {
content: "\e75e";
}

.icon-mail2:before {
content: "\e75f";
}

.icon-mail22:before {
content: "\e760";
}

.icon-mail3:before {
content: "\e761";
}

.icon-mail4:before {
content: "\e762";
}

.icon-google:before {
content: "\e763";
}

.icon-googleplus:before {
content: "\e764";
}

.icon-googleplus2:before {
content: "\e765";
}

.icon-googleplus3:before {
content: "\e766";
}

.icon-googleplus4:before {
content: "\e767";
}

.icon-google-drive:before {
content: "\e768";
}

.icon-facebook:before {
content: "\e769";
}

.icon-facebook2:before {
content: "\e76a";
}

.icon-facebook3:before {
content: "\e76b";
}

.icon-instagram:before {
content: "\e76c";
}

.icon-twitter:before {
content: "\e76d";
}

.icon-twitter2:before {
content: "\e76e";
}

.icon-twitter3:before {
content: "\e76f";
}

.icon-feed2:before {
content: "\e770";
}

.icon-feed3:before {
content: "\e771";
}

.icon-feed4:before {
content: "\e772";
}

.icon-youtube:before {
content: "\e773";
}

.icon-youtube2:before {
content: "\e774";
}

.icon-vimeo:before {
content: "\e775";
}

.icon-vimeo2:before {
content: "\e776";
}

.icon-vimeo3:before {
content: "\e777";
}

.icon-lanyrd:before {
content: "\e778";
}

.icon-flickr:before {
content: "\e779";
}

.icon-flickr2:before {
content: "\e77a";
}

.icon-flickr3:before {
content: "\e77b";
}

.icon-flickr4:before {
content: "\e77c";
}

.icon-picassa:before {
content: "\e77d";
}

.icon-picassa2:before {
content: "\e77e";
}

.icon-dribbble:before {
content: "\e77f";
}

.icon-dribbble2:before {
content: "\e780";
}

.icon-dribbble3:before {
content: "\e781";
}

.icon-forrst:before {
content: "\e782";
}

.icon-forrst2:before {
content: "\e783";
}

.icon-deviantart:before {
content: "\e784";
}

.icon-deviantart2:before {
content: "\e785";
}

.icon-steam:before {
content: "\e786";
}

.icon-steam2:before {
content: "\e787";
}

.icon-github:before {
content: "\e788";
}

.icon-github2:before {
content: "\e789";
}

.icon-github3:before {
content: "\e78a";
}

.icon-github4:before {
content: "\e78b";
}

.icon-github5:before {
content: "\e78c";
}

.icon-wordpress:before {
content: "\e78d";
}

.icon-wordpress2:before {
content: "\e78e";
}

.icon-joomla:before {
content: "\e78f";
}

.icon-blogger:before {
content: "\e790";
}

.icon-blogger2:before {
content: "\e791";
}

.icon-tumblr:before {
content: "\e792";
}

.icon-tumblr2:before {
content: "\e793";
}

.icon-yahoo:before {
content: "\e794";
}

.icon-tux:before {
content: "\e795";
}

.icon-apple:before {
content: "\e796";
}

.icon-finder:before {
content: "\e797";
}

.icon-android:before {
content: "\e798";
}

.icon-windows:before {
content: "\e799";
}

.icon-windows8:before {
content: "\e79a";
}

.icon-soundcloud:before {
content: "\e79b";
}

.icon-soundcloud2:before {
content: "\e79c";
}

.icon-skype:before {
content: "\e79d";
}

.icon-reddit:before {
content: "\e79e";
}

.icon-linkedin:before {
content: "\e79f";
}

.icon-lastfm:before {
content: "\e7a0";
}

.icon-lastfm2:before {
content: "\e7a1";
}

.icon-delicious:before {
content: "\e7a2";
}

.icon-stumbleupon:before {
content: "\e7a3";
}

.icon-stumbleupon2:before {
content: "\e7a4";
}

.icon-stackoverflow:before {
content: "\e7a5";
}

.icon-pinterest:before {
content: "\e7a6";
}

.icon-pinterest2:before {
content: "\e7a7";
}

.icon-xing:before {
content: "\e7a8";
}

.icon-xing2:before {
content: "\e7a9";
}

.icon-flattr:before {
content: "\e7aa";
}

.icon-foursquare:before {
content: "\e7ab";
}

.icon-foursquare2:before {
content: "\e7ac";
}

.icon-paypal:before {
content: "\e7ad";
}

.icon-paypal2:before {
content: "\e7ae";
}

.icon-paypal3:before {
content: "\e7af";
}

.icon-yelp:before {
content: "\e7b0";
}

.icon-libreoffice:before {
content: "\e7b1";
}

.icon-file-pdf:before {
content: "\e7b2";
}

.icon-file-openoffice:before {
content: "\e7b3";
}

.icon-file-word:before {
content: "\e7b4";
}

.icon-file-excel:before {
content: "\e7b5";
}

.icon-file-zip:before {
content: "\e7b6";
}

.icon-file-powerpoint:before {
content: "\e7b7";
}

.icon-file-xml:before {
content: "\e7b8";
}

.icon-file-css:before {
content: "\e7b9";
}

.icon-html5:before {
content: "\e7ba";
}

.icon-html52:before {
content: "\e7bb";
}

.icon-css3:before {
content: "\e7bc";
}

.icon-chrome:before {
content: "\e7bd";
}

.icon-firefox:before {
content: "\e7be";
}

.icon-IE:before {
content: "\e7bf";
}

.icon-opera:before {
content: "\e7c0";
}

.icon-safari:before {
content: "\e7c1";
}

.icon-IcoMoon:before {
content: "\e7c2";
}@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.7.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


@-webkit-keyframes pulseBig {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.25, 1.25, 1.25);
    transform: scale3d(1.25, 1.25, 1.25);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulseBig {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.25, 1.25, 1.25);
    transform: scale3d(1.25, 1.25, 1.25);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

.pulse.big {
  -webkit-animation-name: pulseBig;
  animation-name: pulseBig;
}


@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}


.hand{
cursor: pointer;
}

*:focus{
outline: none;
}

a{
color: inherit;
text-decoration: none;
}

.bold{
font-weight: 700;
}


.notLink{
text-decoration: none;
}


.noTopMargin{
margin-top: 0px !important;
}


html, body{ 
height: 100%;
}


body{
font-size: 15px;
color: #555;
background-color: #f4f4f4;
}

body.loading{
background-color: #fff;
}



/*
::-webkit-scrollbar{
width: 10px;
padding: 5px;
}

::-webkit-scrollbar-track{
background-color: #f4f4f4;
border-left: 1px solid #ccc;
}

::-webkit-scrollbar-thumb{
background-color: #ccc;
}

::-webkit-scrollbar-thumb:hover{
background-color: #c0c0c0;
}
*/



input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number]{
-moz-appearance:textfield; /* Firefox */
}


.button{
min-width: 100px;
text-align: center;
padding: 10px 10px 11px 10px;
border: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border-radius: 3px;
font-weight: 700;
color: #fff;
    font-size: 16px;
}


.button.full{
width: 100%;
padding: 10px 10px 11px 10px;
}


.lightBg{
background-color: #f4f4f4;
}


.imageBg{
background-color: #e5e5e5;
}


.imageBgLighter{
background-color: #eee;
}


.imageBgDarker{
background-color: #d0d0d0;
}


.imageBgDarker2{
background-color: #b0b0b0;
}


.whiteTextShadow{
text-shadow: 0 1px 1px rgba(255,255,255, 0.8);
}


.blackTextShadow{
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}


.regularBg{
background-color: #54B9BE;
}


.importantBg{
background-color: #FF9C47;
}


.acceptBg{
background-color: #58b23c;
}


.cancelBg{
background-color: #E86E7F;
}


.neutralBg{
background-color: #999;
}



.secondaryColor{
color: #888;
}


.cancelColor{
color: #E86E7F;
}


.importantColor{
color: #FF9C47;
}

.regularColor{
color: #339BA0;
}


.acceptColor{
color: #58b23c;
}


.icon{
color: #666;
}


.nonSelectable{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}



.selectable{
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}



::-webkit-input-placeholder {
  color: #aaa;
}
::-moz-placeholder {
  color: #aaa;
}
:-ms-input-placeholder {
  color: #aaa;
}
:-moz-placeholder {
  color: #aaa;
}


input, select, textarea{   
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #555;
}


select{
background-color: #fff;
/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
	for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
	
*/
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='gray'><polygon points='0,0 100,0 50,50'/></svg>");
background-repeat: no-repeat, repeat;
/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
background-position: right 0.8em top 60%;
/* icon size, then gradient */
background-size: .85em auto;
}


textarea{
resize: none;
}


input, textarea, select{
padding: 12px 9px 11px 9px;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 2px;
background-color: white;
font-size: 14px;
}


select{
padding: 9px 9px 8px 9px;
}



.loader{
position: relative;
width: 32px;
height: 32px;
display: none;
z-index: 199;
}



.loader div{
box-sizing: border-box;
display: block;
position: absolute;
width: 32px;
height: 32px;
margin: 4px;
border: 4px solid #fff;
border-radius: 50%;
animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}

.loader div:nth-child(1){
animation-delay: -0.45s;
}

.loader div:nth-child(2){
animation-delay: -0.3s;
}

.loader div:nth-child(3){
animation-delay: -0.15s;
}

@keyframes loader{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}



.classicLoader{
display: none;
position: absolute;
position: fixed;
width: 200px;
height: 94px;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -47px;
background: #777;
border-radius: 4px;
padding-left: 10px;
padding-right: 10px; 
z-index: 199;
}


.classicLoader .image{
display: block;
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-size: 100%;
margin: 21px auto 8px auto;
}


.classicLoader .text{
display: block;
text-align: center;
color: #fff;
font-weight: bold;
}



.checkBox{
display: block;
width: 26px;
height: 26px;
border-radius: 4px;
box-shadow: inset 0 0 5px -1px rgba(0,0,0,0.1);
}

.checkBox.big{
width: 32px;
height: 32px;
}


.checkBox .icon{
display: block;
font-size: 16px;
margin: 5px;
color: #fff;
}


.checkBox.big .icon{
font-size: 22px;
}



.quantityBox{
float: left;
display: block;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 2px;
font-size: 12px;
}


.quantityBox .icon{
font-size: 12px;
padding: 10px;
}


.quantityBox .minus{
float: left;
}


.quantityBox .plus{
float: right;
}


.quantityBox .label{
float: left;
font-size: 15px;
font-weight: 700;
padding: 7px;
color: #555;
border: 0px;
}



.passwordBox{
display: block;
position: relative;
}


.passwordBox input{
display: block;
width: 100%;
}



.passwordBox .icon{
position: absolute;
top: 0px;
right: 0px;
font-size: 20px;
padding: 8px 10px;
z-index: 2;
color: #777;
}




.iconedInput{
display: block;
position: relative;
}


.iconedInput input{
display: block;
width: 100%;
padding-left: 40px;
}


.iconedInput .icon{
position: absolute;
left: 2px;
top: 6px;
font-size: 20px;
padding: 5px 10px;
z-index: 2;
color: #777;
}




.toggleBox{
display: block;
width: 60px;
height: 32px;
position: relative;
}



.toggleBox .bar{
display: block;
position: absolute;
top: 9px;
left: 0px;
width: 100%;
height: 13px;
border-radius: 6px;
box-shadow: inset 0 0 4px -1px rgba(0,0,0,0.2);
}



.toggleBox .circle{
display: block;
position: absolute;
top: 5px;
left: 0px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.4);
transition: all 0.15s ease-in-out;
}



.toggleBox[status="active"] .circle{
left: 100%;
margin-left: -18px;
}


.popupBox{
position: absolute;
position: fixed;
width: 100%;
height: 100%;
display: table;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.75);
z-index: 99;
}


.popupBox:after{/*this helps us counter the fact that on mobile we can scroll the site to hide the chrome bar, and that show more parte of the screen other than 100% height*/
content: "";
display: block;
position: absolute;
top: 100%;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.75);
z-index: 99;
}


.popupBox .inner{
display: table-cell;
width: 100%;
height: 100%;
padding: 13px;
text-align: center;
vertical-align: middle;
}


.popupBox .inner .mainBox{
display: block;
width: 100%;
margin: 0 auto;
max-width: 480px;
position: relative;
overflow: hidden;
border-radius: 4px;
}


.popupBox .inner .topBar{
position: absolute;
display: block;
left: 0px;
top: 0px;
width: 100%;
height: 39px;
background: #fff;
border-radius: 5px 5px 0 0;
z-index: 100;
}


.popupBox .inner .topBar .title{
float: left;
width: 100%;
font-weight: bold;
text-align: left;
padding: 11px 10px 10px 10px;
}



.popupBox .inner .topBar .closeButton{
position: absolute;
display: block;
top: 0px;
right: 0px;
font-size: 16px;
color: #888;
padding: 12px;
z-index: 100;
}


.popupBox .inner .dataBox{
float: left;
width: 100%;
text-align: left;
overflow: hidden;
overflow-y: auto;
padding: 40px 10px 10px 10px;
position: relative;
background: #fff;    
border-radius: 4px;
}

/*IMAGE VIEWER*/

.popupBox.imageViewer .inner{
padding: 0px;
}


.popupBox.imageViewer .inner .mainBox{
height: 100%;
}


.popupBox.imageViewer .inner .dataBox{
padding: 0px;
background: #000;
height: 100%;
display: table;
border-radius: 0px;
}


.popupBox.imageViewer .inner .topBar{
background: #000;
}


.popupBox.imageViewer .inner .topBar .closeButton{
color: #fff;
top: 8px;
right: 6px;
}


.popupBox.imageViewer .inner .dataBox .imageBox{
display: table-cell;
vertical-align: middle;
}


.popupBox.imageViewer .inner .dataBox .imageBox img{
display: block;
width: 100%;
}



/*ALERTBOX*/

.popupBox.alertBox .mainBox{
max-width: 350px;
}


.popupBox.alertBox .inner{
padding-left: 23px;
padding-right: 23px;
}



.popupBox.alertBox .textBox{
float: left;
width: 100%;
margin-bottom: 20px;
text-align: center;
}



.popupBox.alertBox.withCancelButton .acceptButton, .popupBox.alertBox.withCancelButton .cancelButton{
width: 48%;
}



.popupBox.alertBox .acceptButton{
float: right;
}


.popupBox.alertBox .cancelButton{
float: left;
}

.popupBox.alertBox.hasTitle .textBox{
font-weight: normal;
}


.popupBox.alertBox .inner .topBar{
display: none;
}


.popupBox.alertBox.hasTitle .inner .topBar{
display: block;
}


.popupBox.alertBox .inner .dataBox{
padding-top: 15px;
}


.popupBox.alertBox.hasTitle .inner .dataBox{
padding-top: 40px;
}


/*ribbonBox*/

.ribbonBox{
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
}

.ribbonBox::before,.ribbonBox::after{
position: absolute;
z-index: -1;
content: '';
display: block;
border: 5px solid #2980b9;
}

.ribbonBox span{
position: absolute;
display: block;
width: 225px;
padding: 15px 0;
background-color: #3498db;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-align: center;
}

/* top left*/
.ribbonBox.topLeft{
top: -10px;
left: -10px;
}

.ribbonBox.topLeft::before,.ribbonBox.topLeft::after{
border-top-color: transparent;
border-left-color: transparent;
}

.ribbonBox.topLeft::before{
top: 0;
right: 0;
}

.ribbonBox.topLeft::after{
bottom: 0;
left: 0;
}

.ribbonBox.topLeft span{
right: -25px;
top: 30px;
transform: rotate(-45deg);
}

/* top right*/
.ribbonBox.topRight{
top: -10px;
right: -10px;
}

.ribbonBox.topRight::before,.ribbonBox.topRight::after{
border-top-color: transparent;
border-right-color: transparent;
}

.ribbonBox.topRight::before{
top: 0;
left: 0;
}

.ribbonBox.topRight::after{
bottom: 0;
right: 0;
}

.ribbonBox.topRight span{
left: -25px;
top: 30px;
transform: rotate(45deg);
}

/* bottom left*/
.ribbonBox.bottomLeft{
bottom: -10px;
left: -10px;
}

.ribbonBox.bottomLeft::before,.ribbonBox.bottomLeft::after{
border-bottom-color: transparent;
border-left-color: transparent;
}

.ribbonBox.bottomLeft::before{
bottom: 0;
right: 0;
}

.ribbonBox.bottomLeft::after{
top: 0;
left: 0;
}

.ribbonBox.bottomLeft span{
right: -25px;
bottom: 30px;
transform: rotate(225deg);
}

/* bottom right*/
.ribbonBox.bottomRight{
bottom: -10px;
right: -10px;
}

.ribbonBox.bottomRight::before,.ribbonBox.bottomRight::after{
border-bottom-color: transparent;
border-right-color: transparent;
}

.ribbonBox.bottomRight::before{
bottom: 0;
left: 0;
}

.ribbonBox.bottomRight::after{
top: 0;
right: 0;
}

.ribbonBox.bottomRight span{
left: -25px;
bottom: 30px;
transform: rotate(-225deg);
}



/*CONTEXT MENU*/
.contextMenu{
position: absolute;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
}


.contextMenu.active{
display: block;
}


.contextMenu .menu{
position: absolute;
background: white;
border-radius: 4px;
width: 200px;
padding: 4px 0px;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0px 1px 5px -1px rgba(0,0,0,0.2);
}


.contextMenu .item{
float: left;
width: 100%;
padding: 7px 10px;
}


.contextMenu .item:hover{
background: #eee;
}


.contextMenu .item .label{
float: left;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
overflow: hidden;
}


/*SLIDER MENU*/


.sliderMenu{
float: left;
background: #eee;
margin: 5px 0 15px 0px;
border-radius: 6px;
overflow: hidden;
padding: 3px;
width: 100%;
}


.sliderMenu .item{
float: left;
width: 33.33%;
padding: 8px 10px;
border-radius: 4px;
}


.sliderMenu .item.selected{
background: #aaa;
}


.sliderMenu .item .label{
float: left;
width: 100%;
text-align: center;
color: #888;
text-shadow: 0 1px rgb(255,255,255,0.1);
white-space: nowrap;
overflow: hidden;
}


.sliderMenu .item.selected .label{
color: #fff;
text-shadow: 0 1px rgb(0,0,0,0.1);
}


/*TOAST*/

.toastBox{
position: fixed;
display: block;
bottom: 0px;
left: 0px;
padding: 20px 15px;
color: #fff;
background: #101010;
text-align: center;
width: 100%;
font-weight: 500;
font-size: 17px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.8);
z-index: 9999;
}




.grayscale{
filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}



.loading #header .top .menuIcon, .login #header .top .menuIcon{
display: none;
}


.noiseBg{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
}html{
height: 100%;
}


body {
font-family: "Jost", sans-serif;
color: #32302f;
font-weight: 400;
background: #26282a;
overflow-x: hidden;
}


.uCase{
text-transform: uppercase;
}


.loader{
top: 19px;
right: 23px;
position: absolute;
}


.contextMenu .item{
padding: 7px 17px;
}


.contextMenu .item .label{
color: #999;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
}


.contextMenu .item:hover{
background: #fff;
}


.contextMenu .item:hover .label{
color: #32302f;
}


.header{
position: absolute;
position: fixed;
top: 0px;
left: 0px;
float: left;
width: 100%;
height: 76px;
z-index: 9;
background: #111;
color: #fff;
}


.header .brandBox{
position: absolute;
top: 20px;
left: 17px;
}


.header .brandBox .icon{
float: left;
width: 38px;
height: 32px;
background: url(../media/warner-icon.png);
background-size: 100%;
background-repeat: no-repeat;
}



.header .brandBox .logo{
float: left;
font-weight: 600;
line-height: 14px;
margin-top: 6px;
font-family: "Montserrat";
}


.header .languageIcon{
position: absolute;
right: 17px;
top: 20px;
font-size: 21px;
padding: 8px 7px 8px 9px;
border-radius: 6px;
}


.header .languageIcon:hover{
background: #282828;
}


.mainContainer{
display: block;
width: 100%;
margin: 76px auto 0px auto;
height: 100%;
height: calc(100% - 80px);
background: #1b1d1f;
}



.footer{
float: left;
width: 100%;
height: 350px;
background: #111;
color: #fff;
border-top: 2px solid #343434;
padding: 40px 4% 40px 4%;
position: relative;
}


.footer .socialBox{
float: left;
width: 100%;
text-align: center;
}


.footer .socialBox .icon{
display: inline-block;
width: 32px;
height: 32px;
border-radius: 12px;
background: #282828;
margin: 0px 7px;
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
}



.footer .socialBox .icon.x{
background-image: url("../media/social-x.png");
background-size: 50%;
}


.footer .socialBox .icon.discord{
background-image: url("../media/social-discord.png");
}



.footer .brandBox{
position: absolute;
top: 100px;
left: 50%;
transform: translate(-50%, 0px);
margin-left: -3px;
}


.footer .brandBox .icon{
float: left;
width: 38px;
height: 32px;
background: url(../media/warner-icon.png);
background-size: 100%;
background-repeat: no-repeat;
opacity: 0.4;
}



.footer .brandBox .logo{
float: left;
font-weight: 600;
line-height: 14px;
margin-top: 6px;
font-family: "Montserrat";
color: #737373;
}



.footer .trademark{
display: block;
margin: 68px auto 0 auto;
color: #737373;
font-size: 14px;
padding-left: 5px;
}



.footer .esrb{
display: block;
width: 224px;
height: 110px;
margin: 30px auto 0 auto;
border: 10px solid #292929;
background: url("../media/esrb.png");
background-repeat: no-repeat;
background-size: 100%;
border-radius: 8px;
}



.videoBox{
position: absolute;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
}


.videoBox.hidden{
display: none;
}


.videoBox .closeButton{
position: absolute;
top: 20px;
right: 20px;
font-size: 36px;
z-index: 2;
color: #fff;
}


.videoBox .inner{
display: block;
width: 80%;
height: 100%;
margin-left: 10%;
position: relative;
}


.videoBox .inner .centerBox{
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
width: 100%;
overflow: hidden;
padding-top: 56.25%;
}


.videoBox .inner .centerBox iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}




@media only screen and (min-width: 1280px){

.mainContainer{
width: 1280px;
}

}



@media only screen and (max-width: 1280px){


.videoBox .inner{
width: 100%;
margin-left: 0;
}

}.home .bannerBox{
float: left;
position: relative;
width: 100%;
height: 389px;
}


.home .bannerBox.yellow{
background: #f9a524;
}


.home .bannerBox.purple{
background: #e467e0;
/*background: #d940f7;*/
}



.home .bannerBox.blue{
background: #2793ef;
}


.home .bannerBox.lightBlue{
background: #8cbdfa;
}


.home .bannerBox.red{
background: #fb2626;
}



.home .bannerBox .bg{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: url("../media/banner-bg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.3;
z-index: 1;
}

.home .bannerBox::after{
position: absolute;
content: "";
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 93%);
z-index: 2;
}


.home .bannerBox .inner{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 3;
overflow: hidden;
}


.home .bannerBox .contextImage{
position: absolute;
top: -90px;
right: 7.5%;
margin-right: -140px;
height: 900px;
z-index: 0;
}


.home .bannerBox .fadedBg{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #161616;
opacity: 0.95;
display: none;
}


.home .bannerBox .gameTitleBox{
position: absolute;
top: 35px;
left: 7.5%;
margin-left: -4px;
width: 265px;
height: 160px;
z-index: 1;
}


.home .bannerBox .gameTitleBox .logo{
float: left;
clear: both;
width: 180px;
height: 114px;
background: url(../media/game-logo.png);
background-size: 100%;
background-repeat: no-repeat;
}


.home .bannerBox .gameTitleBox .text{
float: left;
clear: both;
color: #fff;
font-weight: 700;
background: #282828;
padding: 2px 8px;
margin-top: 6px;
margin-left: 5px;
font-size: 15px;
}





.home .bannerBox .signUpBox{
position: absolute;
top: 200px;
left: 7.5%;
width: 420px;
}


.home .bannerBox .signUpBox .text{
font-size: 21px;
line-height: 30px;
color: rgb(255 255 255);
font-weight: 600;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
}


.home .bannerBox .signUpBox .text a{
color: #ffde02;
font-size: 22px;
text-decoration: underline;
}


.home .bannerBox .signUpBox input{
float: left;
padding: 9px 10px;
border-radius: 5px;
border: 0px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
margin-top: 12px;
width: 220px;
}


.home .bannerBox .signUpBox .button{
float: left;
position: relative;
background: #212121;
border: 0px;
padding: 10px 0px;
margin-top: 7px;
margin-left: -6px;
}



.home .bannerBox .signUpBox .button::before, .home .bannerBox .signUpBox .button::after{
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 20px;
background: #212121;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}


.home .bannerBox .signUpBox .button::before{
left: -19px;
clip-path: polygon(100% 0, 0 50%, 100% 100%);
}


.home .bannerBox .signUpBox .button::after{
right: -19px;
}



.home .bannerBox .playButton{
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
margin: -18px 0px;
border-style: solid;
border-width: 25px 0 25px 55px;
border-color: transparent transparent transparent #fff;
}



.home .bannerBox .playButton::after{
content: "";
position: absolute;
top: -21px;
left: -52px;
width: 0;
height: 0;
border-style: solid;
border-width: 23px 0 23px 50px;
border-color: transparent transparent transparent rgba(0, 0, 0, 0.4);
z-index: -1;
}



.home .descriptionBox{
float: left;
width: 100%;
color: #fff;
padding: 31px 10% 55px 10%;
background: #1b1d1f;
}


.home .descriptionBox .title{
float: left;
width: 100%;
font-weight: 700;
font-size: 21px;
margin-top: 20px;
}



.home .descriptionBox .description{
float: left;
width: 100%;
font-size: 17px;
line-height: 22px;
margin-top: 12px;
}


.home .descriptionBox .mediaTable{
display: table;
float: left;
width: 100%;
height: 100%;
margin-top: 45px;
}


.home .descriptionBox .mediaBox{
display: table-cell;
position: relative;
padding-left: 20px;
width: 50%;
}


.home .descriptionBox .mediaBox:first-child{
padding-left: 0px;
padding-right: 20px;
}



.home .descriptionBox .mediaBox .media{
display: block;
width: 100%;
height: 100%;
}


.home .descriptionBox .mediaBox .label{
position: absolute;
bottom: 0px;
left: 20px;
background: #ffde02;
width: 100%;
color: #000;
font-size: 14px;
font-weight: 600;
text-align: left;
padding: 5px 6px 4px 6px;
width: calc(100% - 20px);
}


.home .descriptionBox .mediaBox:first-child .label{
left: 0px;
}


.home .descriptionBox .mediaBox .label::after{
content: "";
position: absolute;
top: 5px;
right: 6px;
width: 65%;
width: calc(100% - 130px);
height: 20px;
background: repeating-linear-gradient(45deg, rgb(27, 29, 31), rgb(27, 29, 31) 5px, transparent 5px, transparent 10px);
}


.home .descriptionBox .mediaBox:first-child .label::after{
width: calc(100% - 148px);
}


@media only screen and (max-width: 1280px){

.home .bannerBox .playButton{
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
margin: -18px 15px;
}

}



@media only screen and (max-width: 980px){

.home .bannerBox .gameTitleBox, .home .bannerBox .signUpBox{
left: 4%;
}

.home .bannerBox .contextImage{
right: 4%;
}



.home .bannerBox .playButton{
display: none;
}


}




@media only screen and (max-width: 800px){

.home .bannerBox{
height: 420px;
}

.home .bannerBox .gameTitleBox{
left: 50%;
transform: translate(-50%, 0px);
}


.home .bannerBox .gameTitleBox .logo{
margin-left: 44px;	
}


.home .bannerBox .signUpBox{
left: 0px;
padding: 0px 4%;
width: 100%;
text-align: center;
}


.home .bannerBox .signUpBox input{
float: left;
width: 100%;
width: calc(100% - 20px - 20px);
margin-left: 20px;
}


.home .bannerBox .signUpBox .button{
width: 100%;
width: calc(100% - 20px - 20px);
margin-left: 20px;
margin-top: 15px;
}



.home .bannerBox .fadedBg{
display: block;
}


.home .descriptionBox .mediaTable{
display: block;
float: left;
}


.home .descriptionBox .mediaBox{
display: block;
float: left;
width: 100%;
padding: 0px !important;
}


.home .descriptionBox .mediaBox .label{
left: 0px !important;
width: 100% !important;
}


.home .descriptionBox .mediaBox:first-child{
margin-bottom: 35px;
}

}


@media only screen and (max-width: 640px){

.home .bannerBox{
height: 440px;
}

}



@media only screen and (max-width: 480px){


.home .bannerBox{
height: 384px;
}


.home .bannerBox::after{
z-index: 1;
}


.home .bannerBox .gameTitleBox{
top: 10px;
}


.home .bannerBox .signUpBox{
top: 167px;
}


.home .bannerBox .signUpBox .text{
line-height: 26px;
font-size: 20px;
}


.home .descriptionBox{
padding-top: 10px;
padding-bottom: 35px;
}


.home .descriptionBox .mediaTable{
margin-top: 20px;
}


.home .descriptionBox .mediaBox:first-child {
margin-bottom: 25px;
}


}



@media only screen and (max-width: 360px){

.home .bannerBox .signUpBox .text{
font-size: 17px;
}

}