/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} body{margin:0} article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block} audio,canvas,progress,video{display:inline-block;vertical-align:baseline} audio:not([controls]){display:none;height:0} [hidden],template{display:none} a{background-color:transparent} a:active,a:hover{outline:0} abbr[title]{border-bottom:1px dotted} b,strong{font-weight:700} dfn{font-style:italic} h1{font-size:2em;margin: 0} mark{background:#ff0;color:#000} small{font-size:80%} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sup{top:-.5em} sub{bottom:-.25em} img{border:0} svg:not(:root){overflow:hidden} figure{margin:1em 40px} hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0} pre{overflow:auto} code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em} button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0} button{overflow:visible} button,select{text-transform:none} button,html input[type="button"],/* 1 */ input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer} button[disabled],html input[disabled]{cursor:default} button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} input{line-height:normal} input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0} input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto} input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box} input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none} fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em} legend{border:0;padding:0} textarea{overflow:auto} optgroup{font-weight:700} table{border-collapse:collapse;border-spacing:0} td,th{padding:0} /* end reset */ /* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* ***** general layout styles ***** */ a:hover { cursor: pointer; } ::-moz-selection { background-color: #b985ff; color: #fff; } ::selection { background-color: #b985ff; color: #fff; } html, body { overflow-x: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* prevent the page from sliding beyond the viewport when dragging the image (especially in IE) */ html.modalOpen, html.modalOpen body { -ms-content-zooming: none; -ms-touch-action: none; } body { min-width: 480px; font-family: 'Roboto', Arial, sans-serif; min-height: 100%; background: #1d112b; color: #fff; /* todo: more testing for below 2 lines */ font-size: 0; line-height: 0; } /* reset the min-height on mobile because it was only necessary for the footer - which isn't needed on mobile */ html.phone body { min-height: none; min-height: auto; } div.body-background { background: #1d112b; } div.body-background.no-overflow { position: relative; overflow: hidden; } html.darker body { background: #170e23; } h1, h2 { font-size: 38px; line-height: 48px; color: #fff; text-align: center; font-family: 'Kaushan Script', cursive; /*margin: 75px 0 45px;*/ margin: 0; padding: 60px 0 45px; } h2.more-spacing-top { padding-top: 75px; } /* edit: changed all margin on h1/h2 to padding to prevent their parents from ignoring it */ h2.new { padding: 0 !important; margin: 0 !important; } html.phone h2.new { font-size: 22px; line-height: 30px; } h2 i.red { color: #f73c78; } h2 i.middle { vertical-align: top; line-height: 48px; display: inline-block; } html.phone h2 i.middle { line-height: 30px; margin-top: 2px; margin-bottom: -2px; } h2 i.visible-when-smaller { display: none; } div.info h2 { padding: 0 0 45px 0; } div.info div.dark-box h2 { padding-bottom: 20px; } h2.larger { font-size: 48px; line-height: 60px; } h2.with-subtitle { padding-bottom: 15px !important; } h2.with-paragraph { padding-bottom: 25px !important; } h2.normal-title { font-size: 36px; line-height: 52px; font-weight: 700; font-family: inherit; padding: 0 0 10px 0; text-align: left; } h2.normal { font-family: inherit; font-size: 28px; line-height: 36px; font-weight: 700; text-align: left; padding: 0 0 20px 0; } h2.normal.centered { text-align: center; font-weight: 900; line-height: 80px; } h2.colored { font-size: 30px; color: #d3c3e6; padding-top: 0 !important; } h2.colored + div.line { height: 4px; width: 80px; background: #d3c3e6; margin: -4px auto 14px auto; opacity: 0.6; } h2.smaller { font-family: inherit; font-weight: 700; font-size: 32px; line-height: 46px; } h2 i { margin-right: 20px; } html.phone h2 i { margin-right: 8px; } i.red { color: #F73C78; } input, select, textarea { font-family: "Roboto", Arial, sans-serif; } a { text-decoration: none; } fieldset.general { margin: 0; padding: 0; border: 0; border-top: 12px solid rgba(92, 75, 112, 0.5); text-align: left; } fieldset.general legend { font-size: 28px; line-height: 40px; font-weight: 700; color: #fff; padding: 0 15px 4px 0; } fieldset.general.small legend { font-size: 26px; line-height: 34px; } fieldset.general.white { margin-top: 30px; border-top: 10px solid rgb(241, 239, 245); } fieldset.general.white legend { font-size: 16px; color: #343435; line-height: 24px; font-weight: 500; padding: 0 15px 2px 0; } fieldset.general.no-line { border-color: transparent; } p.description { margin: 0 0 24px 0; } p.compact { max-width: 500px; } p.no-max-width { max-width: none; } p.statistics { text-align: center; max-width: 380px; margin: 24px auto 30px auto; } p.statistics.big { max-width: 560px; } p.statistics.bigger { max-width: 700px; } p.statistics.biggest { max-width: 800px; } p.medium { font-size: 14px; line-height: 26px; text-align: center; } html.phone p.medium { font-size: 11px; line-height: 19px; } div.quick-notice { background: rgba(255, 96, 184, 0.08); padding: 11px; margin: 0 auto; margin-top: 20px; border-radius: 4px; /*border: 2px solid rgba(177, 143, 169, 0.1);*/ max-width: 1000px; } div.quick-notice p { font-size: 12px; line-height: 20px; text-align: center; color: #b18fa9; max-width: none !important; } div.quick-notice a { color: #d2abcc; border-bottom: 1px dashed rgba(210, 171, 204, 0.3); } div.quick-notice a:hover { color: #fff; } html.phone div.quick-notice { padding: 10px; margin: 14px 14px 0 14px; } html.phone div.quick-notice p { font-size: 11px; line-height: 18px; padding: 0; } div.search-box { margin-bottom: 25px; } div.search-box div.left { padding-right: 25px; } div.search-box div.right { float: right; } div.unapproved { width: 1100px; margin: 0 auto 40px auto; border-bottom: 4px solid rgba(92, 75, 112, 0.3); } div.unapproved.done { opacity: 0.6; } div.unapproved div.left-side { width: 300px; position: absolute; font-size: 14px; line-height: 20px; } div.unapproved div.left-side img { max-height: 800px; } div.unapproved div.right-side { margin-left: 330px; } div.unapproved input.changed { box-shadow: 0 0 0 2px rgb(29, 17, 43), 0 0 0 4px rgb(255, 223, 106) !important; } div.unapproved div.options.changed div.opt { box-shadow: 0 0 0 2px rgb(255, 209, 80) !important; } div.unapproved div.opt.changed { box-shadow: 0 0 0 2px rgb(255, 209, 80) !important; } #white-modal input.changed { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fa79af !important; } #white-modal div.options.changed div.opt { box-shadow: 0 0 0 2px #fa79af !important; } #white-modal div.opt.changed { box-shadow: 0 0 0 2px #fa79af !important; } section#adult-warning { background-image: url(../images/bg-test20.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; } section#adult-warning div.constraint { flex: 1; position: static; margin-top: 20px; } section#adult-warning div.bossom-big { margin-top: 0; } section#adult-warning h2 + p { margin-top: 20px; max-width: 560px; } section#adult-warning div.buttons { margin-top: 60px; } section#adult-warning div.logo { height: 27px; min-height: 27px; background-image: url('../images/logo_x2.png'); background-repeat: no-repeat; background-position: center top; background-size: contain; margin: 40px 0 0 0; vertical-align: top; position: absolute; left: 0; top: 0; right: 0; } /* ***** HTML classes and their affected styles ***** */ /* fixes windows phone IE issues */ html, body, #imageModal, #container { -ms-overflow-style: none !important; } @-ms-viewport { width: device-width; height: device-height; } html.noscroll { overflow-y: hidden; } html.noscroll body { overflow-y: hidden; } /* no need to set the height to 100%, now we set it to the window height in JS */ html.phone.modalOpen.noscroll { /*height: 100%;*/ overflow: hidden; } html.phone.modalOpen.noscroll body { /*height: 100%;*/ overflow: hidden; } html.phone.modalOpen.noscroll body div#container { /*height: auto;*/ overflow: hidden; } html.phone.modalOpen.noscroll body div#imageModal { /*height: auto;*/ overflow: hidden; } html.whiteModal #imageModal.zoom .outer, html.whiteModal #imageModal.zoom2 .outer { overflow-y: hidden; overflow-x: hidden; } /*html.openMenu #container { transform: translateX(300px); -moz-transform: translateX(300px); -webkit-transform: translateX(300px); }*/ /* important because otherwise html.phone #menu would override this */ html.openMenu #menu { transform: translateX(0) !important; -moz-transform: translateX(0) !important; -webkit-transform: translateX(0) !important; opacity: 1; } /*html.openMenu #top { left: 300px; } html.openMenu #top .random, html.openMenu a.btn-float { opacity: 0; }*/ html.noselect * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } html.vertical-resize { cursor: col-resize; } button { background: transparent; display: inline-block; text-decoration: none; box-shadow: none; outline: none; border: 0; cursor: pointer; } /* ***** single styles & classes ***** */ .hidden { display: none !important; } .w-300 { font-weight: 300; } .w-400 { font-weight: 400; } .scrollbar-measure { width: 100px; height: 100px; overflow: scroll; position: absolute; top: -9999px; } .clearfix:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; } .clear-small { clear: both; height: 10px; } .clear { clear: both; height: 20px; } .clear-large { clear: both; height: 40px; } .clear-big { clear: both; height: 50px; } .clear-larger { clear: both; height: 60px; } .clear-largest { clear: both; height: 75px; } .clear-header { clear: both; height: 62px; } .clear-30 { clear: both; height: 30px; } .clear-90 { clear: both; height: 90px; } html.phone .clear-30 { clear: both; height: 12px; } html.phone .clear-90 { clear: both; height: 40px; } #jumpToRoulettes { display: block; display: none; /* hide for now */ position: fixed; z-index: 2; bottom: 0; left: 0; font-size: 14px; line-height: 44px; padding: 0 18px; border-radius: 0 3px 0 0; color: rgba(208, 203, 218, 0); } #jumpToRoulettes.invisible { transform: translateY(50px); -ms-transform: translateY(50px); -moz-transform: translateY(50px); -webkit-transform: translateY(50px); } #jumpToRoulettes i { color: #d0cbda; display: inline-block; margin: -1px 10px 1px 0; font-size: 30px; vertical-align: middle; } #jumpToRoulettes.blink, #jumpToRoulettes:hover { color: #d0cbda; background: rgba(81, 73, 103, 0.4); } #clickCountdown { width: 100px; height: 100px; border-radius: 100%; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); position: absolute; z-index: 99999; top: 100px; left: 200px; overflow: hidden; -webkit-transition: box-shadow 0.4s ease, background 0.4s ease, opacity 0.4s linear, transform 0.4s linear; -moz-transition: box-shadow 0.4s ease, background 0.4s ease, opacity 0.4s linear, transform 0.4s linear; -ms-transition: box-shadow 0.4s ease, background 0.4s ease, opacity 0.4s linear, transform 0.4s linear; transition: box-shadow 0.4s ease, background 0.4s ease, opacity 0.4s linear, transform 0.4s linear; -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 1; transform: scale(0.5); -ms-transform: scale(0.5); -moz-transform: scale(0.5); -webkit-transform: scale(0.5); display: none; } #clickCountdown.animating { opacity: 0; transform: scale(0.4); -ms-transform: scale(0.4); -moz-transform: scale(0.4); -webkit-transform: scale(0.4); } #clickCountdown.clicked { -webkit-transition: box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease, transform 0.2s ease; -moz-transition: box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease, transform 0.2s ease; -ms-transition: box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease, transform 0.2s ease; transition: box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease, transform 0.2s ease; -webkit-transform: scale(1) !important; -moz-transform: scale(1) !important; -ms-transform: scale(1) !important; transform: scale(1) !important; opacity: 1; } #clickCountdown.closing { opacity: 0 !important; } #clickCountdown div { height: 100%; width: 100%; background: rgba(255, 255, 255, 0.7); position: absolute; bottom: 0; left: 0; -webkit-transition: height 0.4s ease-out, background 0.2s ease; -moz-transition: height 0.4s ease-out, background 0.2s ease; -ms-transition: height 0.4s ease-out, background 0.2s ease; transition: height 0.4s ease-out, background 0.2s ease; } #clickCountdown.animating div { height: 1%; } #clickCountdown.clicked div { -webkit-transition: height 0.2s ease, background 0.2s ease; -moz-transition: height 0.2s ease, background 0.2s ease; -ms-transition: height 0.2s ease, background 0.2s ease; transition: height 0.2s ease, background 0.2s ease; height: 100% !important; } div.news { position: absolute; left: 0; right: 0; font-size: 12px; line-height: 24px; text-align: center; padding: 10px; color: #857F96; /*background-color: #231534; background: -moz-linear-gradient(top, rgba(35,21,52,0.35) 0%, rgba(35,21,52,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(35,21,52,0.35)), color-stop(100%,rgba(35,21,52,0))); background: -webkit-linear-gradient(top, rgba(35,21,52,0.35) 0%,rgba(35,21,52,0) 100%); background: -o-linear-gradient(top, rgba(35,21,52,0.35) 0%,rgba(35,21,52,0) 100%); background: -ms-linear-gradient(top, rgba(35,21,52,0.35) 0%,rgba(35,21,52,0) 100%); background: linear-gradient(to bottom, rgba(35,21,52,0.35) 0%,rgba(35,21,52,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59231534', endColorstr='#00231534',GradientType=0 );*/ } div.news i { margin-right: 10px; color: #B5ABC2; } div.news-orange { background: rgba(228, 168, 104, 0.06); margin-top: 0; border-radius: 0 0 10px 10px; color: rgba(255, 223, 180, 0.55); font-size: 12px; line-height: 20px; text-align: center; padding: 15px 24px; } div.news-orange i { margin-right: 10px; } html.phone div.news-orange { background: rgba(228, 168, 104, 0.1); color: rgba(255, 223, 180, 0.62); /*border-radius: 10px; margin-top: 10px;*/ font-size: 10px; line-height: 18px; padding: 10px 18px; } html.phone div.news-orange i {} input[type=text], input[type=number], input[type=password] { display: block; font-size: 16px; line-height: 20px; padding: 12px 15px; color: #76737d; border: 0; outline: none; margin: 4px; width: 100%; } input[type=file] { position: absolute; top: -9999px; } textarea { display: block; font-size: 16px; line-height: 24px; padding: 15px; color: #76737d; border: 0; outline: none; background: #fff; width: 100%; height: 180px; resize: vertical; } textarea.gray, input.gray { background: rgb(235, 234, 240); border-radius: 3px; margin: 0; } textarea.small { resize: none; height: 120px; max-height: 160px !important; font-size: 14px; line-height: 22px; padding: 10px 12px; } input.rounded, textarea.rounded, select.rounded { margin: 20px 0 0 0; background: #fff; color: #76737d; display: block; font-size: 16px; line-height: 20px; padding: 16px 52px 16px 18px; border: 0; border-radius: 3px; outline: none; width: 100%; } textarea.rounded { height: 180px; line-height: 26px; resize: vertical; padding: 16px 18px; } input.rounded:first-child { margin-top: 0; } input.rounded.margin-top { margin-top: 20px; } input.rounded.icon-left { padding: 16px 18px 16px 50px; } input.rounded.no-icon { padding: 16px 18px; } input.rounded[type=password] { letter-spacing: 3px; } input.rounded::-webkit-input-placeholder, textarea.rounded::-webkit-input-placeholder { color: #c4c2c7; letter-spacing: 0; } input.rounded:-ms-input-placeholder, textarea.rounded:-ms-input-placeholder { color: #c4c2c7; letter-spacing: 0; } input.rounded:placeholder-shown, textarea.rounded:placeholder-shown { color: #c4c2c7; letter-spacing: 0; } input.rounded:-moz-placeholder, textarea.rounded:-moz-placeholder { color: #c4c2c7; opacity: 1; letter-spacing: 0; } input.rounded::-moz-placeholder, textarea.rounded::-moz-placeholder { color: #c4c2c7; opacity: 1; letter-spacing: 0; } input.rounded + i { font-size: 21px; line-height: 52px; width: 50px; vertical-align: middle; float: right; margin-top: -52px; color: #c4c2c7; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } input.rounded:focus + i { color: #757279; /*#ff6898*/ } input.rounded.icon-left + i { float: left; } form i.floating { font-size: 21px; line-height: 52px; width: 50px; vertical-align: middle; float: right; color: #726681; margin: -52px -50px 0 0; } form i.floating.fa-check { color: #5fd2a9; } form i.floating.fa-times { color: #F73C78; } div.tabbed-links { padding: 30px 0 0 0; } div.tabbed-links a { color: #fff; display: inline-block; width: 50%; text-align: center; font-size: 14px; line-height: 44px; font-weight: 700; border: 2px solid #ea346d; } div.tabbed-links a:hover { background: rgba(234, 52, 109, 0.12); } div.tabbed-links a.selected { background: #ea346d; color: #fff; } div.tabbed-links a i { margin-right: 8px; font-size: 16px; vertical-align: top; line-height: 42px; } div.tabbed-links a span { font-weight: 400; opacity: 0.7; } div.tabbed-links a:nth-child(1) { border-radius: 8px 0 0 8px; } div.tabbed-links a:nth-child(2) { border-radius: 0 8px 8px 0; border-left: 0; } html.phone div.tabbed-links { padding: 16px 0 10px 0; } html.phone div.tabbed-links a { font-size: 11px; line-height: 31px; } html.phone div.tabbed-links a i { margin-right: 6px; font-size: 11px; line-height: 31px; } table.simple { width: 100%; max-width: 1000px; margin: 0 auto; border-radius: 3px; overflow: hidden; } table.simple td, table.simple th { padding: 15px; width: 1%; white-space: nowrap; font-size: 14px; line-height: 40px; text-align: left; } table.simple thead { background: #8368a0; } table.simple th { font-size: 10px; line-height: 40px; text-transform: uppercase; font-weight: 500; padding: 0 15px; } table.simple td.img { padding-right: 0; } table.simple th.more-spacing-left, table.simple td.more-spacing-left { padding-left: 30px; } table.simple td a { position: relative; } table.simple td img { max-height: 40px; max-width: 40px; border-radius: 100%; vertical-align: top; } table.simple td img.no-radius { border-radius: 0; object-fit: contain; height: 40px; width: 40px; } table.simple td.multi-line { line-height: 20px; } table.simple tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.05); } table.simple tr.done td { opacity: 0.5; } table.simple td.adjustable, table.simple th.adjustable { width: auto; max-width: 1px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; word-break: break-all; word-wrap: break-word; } table.simple strong { color: rgb(205, 195, 216); } table.simple span.bigger { font-size: 18px; line-height: 24px; display: block; margin-bottom: 20px; color: rgb(209, 141, 230); white-space: normal; } table.simple span.changed { color: rgb(113, 217, 179) !important; border-bottom: 1px dashed rgb(113, 217, 179); } table.simple span.changed * { color: rgb(113, 217, 179) !important; } table.simple td.icon { padding: 0 5px 0 0; } table.simple td a.icon { padding: 0 10px; color: #766b84; } table.simple td a.icon:hover { color: #fff; } table.simple td a.icon i { font-size: 18px; line-height: 40px; vertical-align: top; } a.rounded-btn { display: inline-block; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 13px; line-height: 52px; border: 0; border-radius: 3px; width: 40%; color: #fff; background: #b57bf6; text-align: center; } a.rounded-btn.disabled { opacity: 0.5; } a.rounded-btn:hover { background: #9c5ee2; } a.rounded-btn.red { background: #F73C78; color: #fff; } a.rounded-btn.red:hover { background: #d92760; } a.rounded-btn.green { background: #53c4ad; } a.rounded-btn.green:hover { background: #3fa893; } a.rounded-btn.gray { background: #e7e6ee; color: #777480; } a.rounded-btn.gray:hover { background: #dddce6; } a.rounded-btn.pink { background: #ca72dd; color: #fff; } a.rounded-btn.pink:hover { background: #b761c9; } a.rounded-btn.purple { background: #9778f3; color: #fff; } a.rounded-btn.purple:hover { background: #7c5adf; } a.rounded-btn.transparent { background: transparent; box-shadow: inset 0 0 0 2px #bcb7c4; color: #d8d4de; } a.rounded-btn.transparent:hover { background: #fff; box-shadow: inset 0 0 0 2px #fff; color: #322e37; } a.rounded-btn.transparent span { color: #d8d4de; } a.rounded-btn.transparent:hover span { color: #322e37; } a.rounded-btn.spacing-left { margin-left: 8px; } a.rounded-btn.small { font-size: 11px; line-height: 38px; } a.rounded-btn.smaller { font-size: 11px; line-height: 30px; padding: 0 20px; width: auto; } td a.rounded-btn { float: none; margin: 0; } form a.rounded-btn { margin: 20px 0 0 0; float: right; } a.rounded-btn.big { width: 500px; } a.rounded-btn.no-float { float: none } a.rounded-btn.half { margin-left: 50%; width: 50%; } a.rounded-btn.btn-random-favorite { position: absolute; right: 0; top: 0; width: 200px; } a.rounded-btn.block { display: block; width: 100%; } a.rounded-btn.square { width: 52px; padding: 0; font-size: 21px; } a.rounded-btn.normal { width: 200px; margin-top: 40px; text-transform: none; font-weight: 400; letter-spacing: 0; font-size: 15px; } a.rounded-btn.side-padding { padding: 0 30px; width: auto; } html.phone a.rounded-btn.side-padding { padding: 0 14px; } div.toggle { margin-top: 20px; border-radius: 100px; background: #2a1b3b; cursor: pointer; height: 55px; position: relative; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } div.toggle:hover { background: #21152f; } div.toggle div { position: absolute; width: 50%; height: 100%; z-index: 1; left: 0; } div.toggle div:first-child { width: 100%; z-index: 2; } div.toggle div:last-child { background: #f73c78; border-radius: 100px; } div.toggle.active div:last-child { background: #38c37e; left: 50%; } div.toggle span { float: left; display: block; width: 50%; text-align: center; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; font-weight: 700; line-height: 55px; cursor: #fff; } .italic { font-style: italic; } .align-left { text-align: left; } .align-right { text-align: right; } span.editable-column:hover { cursor: pointer; background: rgba(255, 153, 254, 0.1); } div.auto-adjust { margin-top: 20px; display: table; width: 100%; } div.auto-adjust div.cell { width: 1%; display: table-cell; padding: 0 5px; vertical-align: top; white-space: nowrap; } div.auto-adjust div.cell.pct-10 { width: 10%; } div.auto-adjust div.cell.fixed-100 { width: 100px; } div.auto-adjust span.fixed-100 { display: inline-block; width: 100px; text-align: right;} div.auto-adjust div.cell.faded { opacity: 0.7; } div.auto-adjust span.green { color: rgb(185, 218, 199) } div.auto-adjust span.green strong { color: rgb(185, 218, 199) } div.auto-adjust span.red { color: rgb(223, 181, 191) } div.auto-adjust span.red strong { color: rgb(223, 181, 191) } div.auto-adjust.bigger { background: rgba(255, 255, 255, 0.03); } div.auto-adjust.bigger div.cell { padding: 7px 10px; } div.auto-adjust.colored { background: rgba(255, 255, 255, 0.08);} div.auto-adjust.colored div.cell { } div.auto-adjust div.cell.normal { width: auto; } div.auto-adjust div.cell.half { width: 50%; } div.auto-adjust div.cell.third { width: 33%; } div.auto-adjust div.cell.third:last-child { width: 34%; } div.auto-adjust div.cell:first-child { padding-left: 0; } div.auto-adjust div.cell:last-child { padding-right: 0; } div.auto-adjust div.adjustable { width: auto; } div.auto-adjust.small-margin { margin-top: 6px; } div.auto-adjust.no-margin { margin-top: 0; } div.big-container { width: 950px; margin: 0 auto; position: relative; padding-top: 30px; } div.big-container h2 { padding-top: 0; } div.big-container p { margin: 0 auto 40px auto; padding-top: 10px; } /*div.big-container p { margin-top: 50px; position: absolute; left: 0; right: 0; text-align: center; width: 100%; max-width: 100%; }*/ div.big-container img { max-width: 100%; } div.big-container a.btn-random-favorite { top: 75px; } div.big-container.small { width: 650px; } div.big-container.bigger { width: 1000px; } div.big-container.no-padding { padding: 0 !important; } div.big-container.huge-icon-padding { padding: 20px 0 30px 0; } div.big-container.dark-background { border-radius: 5px; background: #1d112b; } div.big-container a.rounded-btn.top-right { position: absolute; width: 100px; right: 0; top: 52px; } div.big-container a.rounded-btn.top-left { position: absolute; width: 100px; left: 0; top: 52px; } div.big-container a.rounded-btn.top-right + a.rounded-btn.top-right { right: 110px; } div.big-container a.rounded-btn.more-top-spacing { top: 70px; } div.big-container p.normal-subtitle { margin: -14px auto 0 auto; padding: 0 0 32px 0; } div.explanation.no-padding-left { padding-left: 0 !important; } div.explanation div.main textarea + a.rounded-btn { width: 30%; margin: 10px 0 0 70%; } /* this stuff is so messy, re-do later */ a.btn-load-earlier { background: #4a3461; color: #c5b6d6; font-weight: 600; font-size: 13px; line-height: 50px; text-transform: uppercase; text-align: center; border-radius: 5px 5px 0 0; border-bottom: 4px solid #2a1b3b; display: block; } a.btn-load-earlier:hover { background: #5b4275; color: #e5d9f3; } table + a.btn-load-earlier { border-radius: 0 0 5px 5px; border: none; margin-top: 3px; } div.colored-container.big-container { padding: 0; } div.boxed div.explanation.big-container div.item:after { height: 30px; margin: 0 -30px -30px -30px; } div.boxed div.explanation.big-container div.item:last-child:after { height: 30px !important; } div.boxed div.explanation.big-container div.item:first-child { border-radius: 5px 5px 0 0; } div.boxed div.explanation.big-container div.item:last-child { border-radius: 0 0 5px 5px; } div.boxed div.explanation.big-container div.item { padding: 30px; margin-top: 0; } div.boxed div.explanation.big-container div.main textarea { margin-top: 0; } div.boxed div.explanation.big-container div.item:nth-child(even) { background: #402d54; } div.boxed div.item div.img-container { background: #2a1b3b; border-radius: 6px 6px 0 0; text-align: center; overflow: hidden; position: relative; } div.boxed div.item div.img-container img:hover { opacity: 0.8; cursor: pointer; } div.boxed div.item div.img-container div.loading { background: #ffffff; border-radius: 0 0 6px 0; position: absolute; top: 0; left: 0; width: 30px; height: 30px; line-height: 30px; box-shadow: 2px 2px 10px rgba(64, 44, 84, 0.8); } div.boxed div.item div.img-container i { font-size: 16px; line-height: 30px; color: #39274c; width: 30px; } div.boxed div.item img, div.boxed div.item canvas { max-width: 100%; /*min-width: 100%; might look better? */ } div.boxed div.item div.self-destruct { position: relative; font-size: 14px; line-height: 18px; padding: 12px; text-align: center; font-weight: 500; border-radius: 0 0 6px 6px; color: rgb(255, 160, 160); background: rgba(255, 71, 71, 0.25); } div.boxed div.item div.self-destruct a.btn-delete-image { position: absolute; top: 0; right: 0; font-size: 18px; line-height: 18px; vertical-align: top; display: inline-block; padding: 12px; color: rgb(255, 160, 160); } div.boxed div.item div.self-destruct a.btn-delete-image i { margin-right: 0; } div.boxed div.item div.self-destruct a.btn-delete-image:hover { color: #fff; } div.boxed div.item div.self-destruct i { font-size: 18px; line-height: 18px; vertical-align: top; margin-right: 6px; display: inline-block; } html.phone div.boxed div.item div.self-destruct { font-size: 12px; line-height: 16px; } html.phone div.boxed div.item div.self-destruct i { font-size: 16px; line-height: 16px; } div.boxed div.item span.loading-image { display: inline-block; text-align: center; background: #2a1b3b; } div.boxed div.item span.loading-image i { font-size: 60px; line-height: 40px; position: relative; background: transparent; color: #6a5a7d; border-radius: 100%; width: 40px; vertical-align: middle; margin: 0; box-shadow: none; } div.explanation div.main div.item-title { font-size: 20px; line-height: 28px; margin: 0 0 4px 0; } div.explanation div.details { position: absolute; left: 30px; } div.explanation div.main { margin-left: 280px; min-height: 40px; } div.explanation div.main p { padding: 0; margin: 0; font-size: 14px; line-height: 24px; word-wrap: break-word; } div.explanation div.main p a { white-space: normal; } div.explanation div.details div.avatar { display: inline-block; vertical-align: top; position: relative; } div.explanation div.details div.avatar a { position: relative; } div.explanation div.details div.avatar img { border-radius: 100%; width: 40px; height: 40px; } div.explanation div.details div.username { display: inline-block; vertical-align: top; padding: 6px 0 0 12px; font-size: 14px; line-height: 28px; font-weight: 700; } div.explanation div.details div.username.with-time { padding: 0 0 0 12px; line-height: 24px; } div.explanation div.details div.time { font-size: 11px; line-height: 20px; color: #a199ad; margin: -20px 0 0 52px; } /* *************************** */ /* *************************** */ /* todo most of the code is same as room.css, probably merge */ div.item label.message { display: table; vertical-align: top; width: 100%; height: 120px; line-height: 120px; cursor: text; } div.item textarea.message-field, div.item div.message-field { display: table-cell; vertical-align: middle; background: #2b1c3c; border: 0; outline: none; box-shadow: none; resize: none; overflow: hidden; overflow-y: hidden !important; font-size: 14px; line-height: 20px; color: #bcb1cc; border-radius: 5px; padding: 10px 14px; width: 100%; height: 120px; max-height: 400px; word-break: break-all; /* FF doesnt recognize break-word, so fallback to break-all */ word-break: break-word; word-wrap: break-word; /* mainly for FF/IE */ overflow-wrap: break-word; /* mainly for FF/IE */ position: relative; } div.item textarea.message-field::-webkit-input-placeholder { color: #9184a0; letter-spacing: 0; } div.item textarea.message-field:-ms-input-placeholder { color: #9184a0; letter-spacing: 0; } div.item textarea.message-field:placeholder-shown { color: #9184a0; letter-spacing: 0; } div.item textarea.message-field:-moz-placeholder { color: #9184a0; opacity: 1; letter-spacing: 0; } div.item textarea.message-field::-moz-placeholder { color: #9184a0; opacity: 1; letter-spacing: 0; } div.item div.message-field { height: auto; min-height: 120px; line-height: 22px; display: inline-block; } /* placeholder */ div.item div.message-field:empty:before { color: #9184a0; content: attr(placeholder); display: block; /* For Firefox */ } /* fix for IE - otherwise caret is placed at the end */ html.ie div.item div.message-field:empty:before { position: absolute; left: 0; top: 0; } /*div.item div.message-field:empty:focus:before { content: ""; }*/ /* IE fix for vertical align middle to work */ html.ie div.item textarea.message-field { display: inline-block; } html.phone div.item textarea.message-field, html.phone div.item div.message-field { font-size: 11px; max-height: 200px; min-height: 80px; line-height: 16px; padding: 8px 12px; } html.phone div.item div.message-field { overflow: visible; overflow-y: visible !important; } html.phone div.item label.message { height: 44px; max-height: 44px; line-height: 44px; overflow: hidden; } div.item div.message-actions { height: 48px; margin-top: 10px; } /* Buttons */ div.item div.icons { float: right; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } div.item div.icons.left { float: left; margin-left: -8px; /* to compensate for the button's padding (24-16) - if the button has a solid background, remove this */ } div.item div.icons button.button { position: relative; vertical-align: top; width: 48px; height: 48px; text-align: center; font-size: 24px; line-height: 48px; border-radius: 22px; /* or 100% */ background: transparent; } div.item div.icons button.button i/*, html.phone div.item div.icons button.button:hover i*/ { color: #b1a5bf; vertical-align: top; line-height: 48px; text-shadow: none; width: 100%; } div.item div.icons button.button:hover, div.item div.icons button.button.active { background: rgba(16, 9, 27, 0.15); } div.item div.icons button.button:hover i, div.item div.icons button.button:active i, div.item div.icons button.button.active i, div.item div.icons button.button:hover span, div.item div.icons button.button:active span, div.item div.icons button.button.active span { color: #c58eff; text-shadow: 0 0 17px rgba(184, 124, 220, 0.2); } html.mobile div.item div.icons button.button:hover { background: transparent; } html.mobile div.item div.icons button.button:hover i, html.mobile div.item div.icons button.button:hover span { color: #b1a5bf; text-shadow: none; } html.mobile div.item div.icons button.button.active { background: rgba(16, 9, 27, 0.15); } html.mobile div.item div.icons button.button:active i, html.mobile div.item div.icons button.button.active i, html.mobile div.item div.icons button.button:active span, html.mobile div.item div.icons button.button.active span { color: #c58eff; text-shadow: 0 0 17px rgba(184, 124, 220, 0.2); } /*div.item div.icons button.button.active { background: rgba(16, 9, 27, 0.15); } div.item div.icons button.button.active i { color: #ff7de8; text-shadow: 0 0 17px rgba(255, 125, 232, 0.2); }*/ div.item div.icons button.button:active i { transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); -moz-transform: scale(0.9); -webkit-transform: scale(0.9); } div.item div.icons button.button.disabled { opacity: 0.5; cursor: default; } /* Send button */ div.item div.icons button.button.btn-send.enabled, html.mobile div.item div.icons button.button.btn-send.enabled { background: #c58eff; } div.item div.icons button.button.btn-send.enabled i, html.mobile div.item div.icons button.button.btn-send.enabled i { color: #fff; } div.item div.icons button.button.btn-send.enabled:hover, div.item div.icons button.button.btn-send.enabled:active { background: #b07be8; } html.mobile div.item div.icons button.button.btn-send.enabled:hover { background: #c58eff; } html.mobile div.item div.icons button.button.btn-send.enabled:active { background: #b07be8; } div.item div.icons button.button.btn-send.enabled { cursor: pointer; } /* This needs to be below colors for the disabled state to work properly */ div.item div.icons button.button.btn-send, html.mobile div.item div.icons button.button.btn-send { background: #6a5a7d; /* #b1a5bf */ margin-left: 12px; cursor: default; } div.item div.icons button.button.btn-send i, html.mobile div.item div.icons button.button.btn-send i { color: #352647; margin: 0 -2px 0 2px; font-size: 22px; } html.phone div.item div.icons button.button { width: 50px; height: 50px; font-size: 21px; line-height: 50px; border-radius: 24px; } html.phone div.item div.icons button.button i { line-height: 50px; font-size: 21px; } html.phone div.item div.icons button.button.btn-send { width: 50px; border-radius: 24px; margin-left: 10px; } html.phone div.item div.icons button.button.btn-send i { font-size: 21px; } /* Emojis */ .emojione{ font-size:inherit; height:26px; width:26px; min-height:20px; min-width:20px; display:inline-block; line-height:normal; vertical-align:middle; } img.emojione{width:auto} div.emoji-box { position: absolute; z-index: 20; display: none; opacity: 0; padding: 15px; background: #10091b; color: #fff; width: 329px; /* 318 + 3px for scrollbar + 8px padding */ bottom: 74px; text-align: left; border-radius: 7px; } div.emoji-box i.fa-caret-down { color: #10091b; font-size: 21px; position: absolute; left: 50%; bottom: -12px; margin-left: -6px; } div.emoji-box div.hidden-handle { position: absolute; width: 100px; height: 30px; bottom: -20px; left: 50%; margin-left: -50px; border-radius: 0 0 100% 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } div.emoji-box div.body { overflow-y: scroll; -webkit-overflow-scrolling: auto; height: 200px; padding-right: 8px; } div.emoji-box div.body div.body { padding-right: 0; } /* custom scroll fix */ div.emoji-box div.body::-webkit-scrollbar { width: 3px; background: #10091b; } div.emoji-box div.body::-webkit-scrollbar-thumb { background: #ffdd67; } div.emoji-box img.emojione, div.emoji-box svg.emojione { cursor: pointer; padding: 0 5px 3px 5px !important; border-bottom: 2px solid #10091b; height:31px !important; width:36px !important; margin:3px 0 2px 0 !important; } div.emoji-box img.emojione:hover, div.emoji-box svg.emojione:hover { border-color: #ffdd67; transform: translateY(-3px); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); } html.mobile div.emoji-box img.emojione:hover, html.mobile div.emoji-box svg.emojione:hover { border-color: #10091b; transform: none; -ms-transform: none; -webkit-transform: none; } html.mobile div.emoji-box img.emojione:active, html.mobile div.emoji-box svg.emojione:active { border-color: #ffdd67; transform: translateY(-3px); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); } div.message-field img.emojione, div.message-field svg.emojione, div.item img.emojione, div.item svg.emojione, div.chat-message div.message p img.emojione, div.chat-message div.message p svg.emojione, div.sticky-message p img.emojione, div.sticky-message p svg.emojione { height: 22px; width: 22px; margin: -4px 1px -1px 1px; padding: 0; vertical-align: middle; } div.container-chat.small div.message-field img.emojione, div.container-chat.small div.message-field svg.emojione, div.container-chat.small div.chat-message div.message p img.emojione, div.container-chat.small div.chat-message div.message p svg.emojione, div.container-chat.small div.sticky-message p img.emojione, div.container-chat.small div.sticky-message p svg.emojione { margin: -4px 1px -4px 1px; } html.phone div.emoji-box { padding: 10px; width: 320px; bottom: 50px; } html.phone div.emoji-box div.hidden-handle { display: none; } html.phone div.emoji-box img.emojione, html.phone div.emoji-box svg.emojione { height: auto !important; max-width: 12% !important; max-width: 12.5% !important; } html.phone div.emoji-box div.body { padding: 0 8px 0 0; } div.item div.emoji-box { bottom: 88px !important; } html.phone div.item div.emoji-box { bottom: 84px !important; } html.phone div.item div.message-field img.emojione, html.phone div.item div.message-field svg.emojione, html.phone div.item div.chat-message div.message p img.emojione, html.phone div.item div.chat-message div.message p svg.emojione, html.phone div.item div.sticky-message p img.emojione, html.phone div.item div.sticky-message p svg.emojione { height: 20px !important; width: 20px !important; margin: -4px 1px -1px 1px !important; } /* Dropzone */ div#drag-drop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(56, 48, 73, 0.95); z-index: 1000; display: none; } div#drag-drop div.border { top: 20px; left: 20px; right: 20px; bottom: 20px; border-radius: 10px; position: absolute; border: 8px dashed rgba(188, 139, 224, 0.3); } div#drag-drop div.text { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; margin-top: -80px; } div#drag-drop i { font-size: 128px; line-height: 128px; color: #bc8be0; } div#drag-drop p { line-height: 24px; font-size: 24px; font-weight: 700; color: #fff; margin-top: 20px; } /**************/ /* Scrollbars */ /**************/ div.scrollbar-test { width: 40px; height: 40px; position: absolute; top: -9999px; overflow: scroll; -webkit-overflow-scrolling: auto; } div.scrollbar-test::-webkit-scrollbar { width: 30px; } div.scrollbar-test div { font-size: 10px; line-height: 10px; } /*************** SCROLLBAR BASE CSS ***************/ .scroll-wrapper { overflow: hidden !important; padding: 0 !important; position: relative; } .scroll-wrapper > .scroll-content { border: none !important; box-sizing: content-box !important; height: auto; left: 0; margin: 0; max-height: none; max-width: none !important; overflow: scroll !important; padding: 0; position: relative !important; top: 0; width: auto !important; } .scroll-wrapper > .scroll-content::-webkit-scrollbar { height: 0; width: 0; } .scroll-wrapper.scroll--rtl { direction: rtl; } .scroll-element { box-sizing: content-box; display: none; } .scroll-element div { box-sizing: content-box; } .scroll-element .scroll-bar, .scroll-element .scroll-arrow { cursor: default; } .scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible { display: block; } .scroll-textarea { border: 1px solid #cccccc; border-top-color: #999999; } .scroll-textarea > .scroll-content { overflow: hidden !important; } .scroll-textarea > .scroll-content > textarea { border: none !important; box-sizing: border-box; height: 100% !important; margin: 0; max-height: none !important; max-width: none !important; overflow: scroll !important; outline: none; padding: 2px; position: relative !important; top: 0; width: 100% !important; } .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar { height: 0; width: 0; } /*************** SIMPLE INNER SCROLLBAR ***************/ .scrollbar-inner > .scroll-element, .scrollbar-inner > .scroll-element div { border: none; margin: 0; padding: 0; position: absolute; z-index: 10; } .scrollbar-inner > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; } .scrollbar-inner > .scroll-element.scroll-x { bottom: 0; height: 4px; left: 0; width: 100%; } .scrollbar-inner > .scroll-element.scroll-y { height: 100%; right: 0; top: 0; width: 4px; } .scrollbar-inner > .scroll-element .scroll-element_outer { overflow: hidden; } .scrollbar-inner > .scroll-element .scroll-element_outer, .scrollbar-inner > .scroll-element .scroll-element_track, .scrollbar-inner > .scroll-element .scroll-bar { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .scrollbar-inner > .scroll-element .scroll-element_track, .scrollbar-inner > .scroll-element .scroll-bar { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); opacity: 0.4; } .scrollbar-inner > .scroll-element .scroll-element_track { background-color: transparent; } .scrollbar-inner > .scroll-element .scroll-bar { background-color: #4a3c5a; } .scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #615074; } .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #4a3c5a; } /* update scrollbar offset if both scrolls are visible */ .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -4px; } .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -4px; } .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -4px; } .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -4px; } /*************** SIMPLE OUTER SCROLLBAR ***************/ .scrollbar-outer > .scroll-element, .scrollbar-outer > .scroll-element div { border: none; margin: 0; padding: 0; position: absolute; z-index: 10; } .scrollbar-outer > .scroll-element { background-color: transparent; } .scrollbar-outer > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; } .scrollbar-outer > .scroll-element.scroll-x { bottom: 0; height: 4px; left: 0; width: 100%; } .scrollbar-outer > .scroll-element.scroll-y { height: 100%; right: 0; top: 0; width: 4px; } .scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer { height: 4px; top: 0; } .scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer { left: 0; width: 4px; } .scrollbar-outer > .scroll-element .scroll-element_outer { overflow: hidden; } .scrollbar-outer > .scroll-element .scroll-element_track { background-color: #22172f; } .scrollbar-outer > .scroll-element .scroll-element_outer, .scrollbar-outer > .scroll-element .scroll-element_track, .scrollbar-outer > .scroll-element .scroll-bar { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .scrollbar-outer > .scroll-element .scroll-bar { background-color: #4a3c5a; } .scrollbar-outer > .scroll-element .scroll-bar:hover { background-color: #615074; } .scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar { background-color: #4a3c5a; } .scrollbar-outer.yellow > .scroll-element .scroll-element_track { background-color: #10091b; } .scrollbar-outer.yellow > .scroll-element .scroll-bar { background-color: #ffdd67; } .scrollbar-outer.yellow > .scroll-element .scroll-bar:hover { background-color: #ffdd67; } .scrollbar-outer.yellow > .scroll-element.scroll-draggable .scroll-bar { background-color: #ffdd67; } .scroll-element.scroll-x { display: none !important; } /* scrollbar height/width & offset from container borders */ .scrollbar-outer > .scroll-content.scroll-scrolly_visible { left: -4px; margin-left: 4px; } .scrollbar-outer > .scroll-content.scroll-scrollx_visible { top: -4px; margin-top: 4px; } .scrollbar-outer > .scroll-element.scroll-x .scroll-bar { min-width: 10px; } .scrollbar-outer > .scroll-element.scroll-y .scroll-bar { min-height: 10px; } /* update scrollbar offset if both scrolls are visible */ .scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -4px; } .scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -4px; } .scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -4px; } .scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -4px; } /* *************************** */ /* *************************** */ span.tiny-status { display: inline-block; margin: -2px 0 0 6px; font-size: 11px; vertical-align: top; color: #ffe679; opacity: 0.75; } span.tiny-status.gray { color: #b3a7c7; } p.filter-description { margin: 4px 0 20px 6px; font-size: 14px; line-height: 26px; } form.medium { width: 650px; margin: 0 auto; } form.small { width: 540px; margin: 0 auto; } form div.side-links { margin-top: 20px; text-align: left; } form div.side-links a { display: inline-block; font-size: 13px; line-height: 27px; color: #b5a7c3; } form div.side-links a:hover { color: #fff; } form div.side-links a span { margin-right: 10px; } form .spacing-top { margin-top: 20px; } p { font-size: 16px; line-height: 30px; max-width: 700px; margin: 0 auto; color: #bcb1cc; } p strong { font-weight: 700; } p.ultra-compact { max-width: 400px !important; margin-top: 0; } p.compact { max-width: 500px !important; margin-top: 0; } p.compact.wider { max-width: 600px !important; } span.small-text { font-size: 12px; } .normal-white-space { white-space: normal; word-break: normal; } .padding-top { padding-top: 55px !important; } .align-center { text-align: center !important; } .no-margin { margin: 0 !important; } .no-margin-top { margin-top: 0 !important; } .no-margin-left { margin-left: 0 !important; } .no-margin-bottom { margin-bottom: 0 !important; } .no-padding { padding: 0 !important; } .no-padding-top { padding-top: 0 !important; } .no-padding-bottom { padding-bottom: 0 !important; } .lighter-text { color: #bfb9c7; } .green-text { color: #93c79f; } .yellow-text { color: #e2bd77; } .red-text { color: #e27e9e; } .semi-bold { font-weight: 500; } .dashed { border-bottom: 1px dashed rgba(255, 255, 255, 0.25); } i.huge { color: #382d46; font-size: 200px; line-height: 160px; display: block; text-align: center; margin-bottom: 40px; } a#btn-jump { display: block; position: fixed; bottom: 120px; right: 40px; width: 40px; height: 40px; border-radius: 100%; text-align: left; z-index: 6; } a#btn-jump span { display: block; position: absolute; width: 40px; height: 40px; background: rgba(163, 147, 183, 0.2); border-radius: 100%; font-size: 20px; line-height: 40px; text-align: center; color: #90899a; opacity: 0; transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); z-index: 1; } html.phone a#btn-jump:hover span { color: #90899a; background: rgba(163, 147, 183, 0.2); } a#btn-jump.invisible { transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } a#btn-jump span i { line-height: 38px; vertical-align: top; } a#btn-jump span:first-child i { line-height: 42px; } a#btn-jump:hover span, html.phone a#btn-jump:active span { background: rgba(163, 147, 183, 0.6); color: #fff; } a#btn-jump.down span:first-child { opacity: 1; z-index: 2; transform: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } a#btn-jump.up span:last-child { opacity: 1; z-index: 2; transform: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } div.blurred-banner { position: relative; perspective: 800px; } div.blurred-banner div.overlay { background: rgba(52, 26, 82, 0.9); background: -moz-linear-gradient(bottom, rgba(57, 28, 90, 0.85) 0%, rgba(79, 27, 86, 0.85) 100%); background: -webkit-linear-gradient(bottom,rgba(57, 28, 90, 0.85) 0%,rgba(79, 27, 86, 0.85) 100%); background: linear-gradient(to top,rgba(57, 28, 90, 0.85) 0%,rgba(79, 27, 86, 0.85) 100%); position: absolute; position: relative; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; } div.blurred-banner.collections { background-image: url('../images/background-header-collections4.jpg'); background-size: cover; background-position: center center; } div.blurred-banner div.image { display: none; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center center; filter: blur(10px); -moz-filter: blur(10px); -webkit-filter: blur(10px); transform: translateZ(30px); -moz-transform: translateZ(30px); -webkit-transform: translateZ(30px); } div.blurred-banner div.main-details { padding: 36px 0 28px 0; } div.blurred-banner span.uppercase-detail { font-size: 11px; line-height: 20px; text-transform: uppercase; letter-spacing: 1px; color: #bda0b9; font-weight: 700; margin-bottom: 6px; display: block; } div.blurred-banner span.uppercase-detail span.sep { display: inline-block; margin: 0 10px; opacity: 0.6; } div.blurred-banner span.uppercase-detail.smaller { margin-top: 20px; font-size: 10px; color: #866f96; margin-bottom: 0; } div.blurred-banner h2 { padding: 0 0 10px 0 !important; } div.blurred-banner h2 i { vertical-align: top; line-height: inherit; margin: 2px 18px -2px 0; } div.blurred-banner p { color: #bfadcc; } div.blurred-banner div.sub-details span.created { display: inline-block; vertical-align: top; font-weight: 500; font-size: 12px; line-height: 34px; margin-right: 10px; color: #9d89ab; } div.blurred-banner div.sub-details { background: rgba(10, 3, 19, 0.15); background: rgba(38, 16, 53, 0.3); } div.blurred-banner div.wide-container { position: relative; padding: 14px 0 18px 0; } div.blurred-banner div.sub-details div.avatar { display: inline-block; vertical-align: top; position: relative; margin-right: 8px; } div.blurred-banner div.sub-details div.avatar a { position: relative; } div.blurred-banner div.sub-details div.avatar img { border-radius: 100%; width: 34px; height: 34px; } div.blurred-banner div.sub-details strong { /*display: inline-block; // messes up icons (unless you apply the same rules to the icons) vertical-align: top;*/ font-size: 14px; line-height: 34px; } div.blurred-banner a.btn-side { position: absolute; top: 13px; right: 0; font-size: 21px; line-height: 40px; width: 21px; text-align: center; display: inline-block; color: #ab90b3; } div.blurred-banner a.btn-side:hover { color: #fff; } div.blurred-banner a.btn-side:nth-child(2) { right: 40px; } html.phone div.blurred-banner div.main-details { padding: 24px 0 20px 0; } html.phone div.blurred-banner div.wide-container { padding: 14px 0 18px 0; } html.phone div.blurred-banner span.uppercase-detail { font-size: 9px; line-height: 18px; margin-bottom: 0px; letter-spacing: 0.05em; } html.phone div.blurred-banner span.uppercase-detail span.sep { margin: 0 8px; } html.phone div.blurred-banner span.uppercase-detail.smaller { font-size: 8px; letter-spacing: 0.05em; margin-top: 16px; } html.phone div.blurred-banner h2.normal { padding: 0 !important; font-size: 16px; line-height: 36px; } html.phone div.blurred-banner h2.normal i { margin: 0 8px 0 0; } html.phone div.blurred-banner p.ultra-compact { font-size: 12px; line-height: 20px; } html.phone div.blurred-banner div.sub-details div.avatar img { width: 28px; height: 28px; } html.phone div.blurred-banner div.wide-container { padding: 13px 0; } html.phone div.blurred-banner a.btn-side { font-size: 19px; top: 7px; } html.phone div.blurred-banner a.btn-side:nth-child(2) { right: 34px; } html.phone div.blurred-banner div.sub-details span.created { font-size: 11px; margin-right: 8px; line-height: 28px; } html.phone div.blurred-banner div.sub-details strong { font-size: 12px; line-height: 28px; } html.phone div.blurred-banner div.sub-details a ~ i.user-icon { font-size: 13px; margin-left: 4px; } div.banner { height: 274px; position: relative; perspective: 800px; } div.banner div.overlay { position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; background: rgba(64, 45, 85, 0.75); /*background: rgba(75, 45, 85, 0.7);*/ /*background: rgba(83, 45, 85, 0.7);*/ } div.banner div.main { position: absolute; top: 0; bottom: 54px; width: 100%; } div.banner div.table { display: table; height: 100%; text-align: center; width: 950px; margin: 0 auto; position: relative; } div.banner div.table div.profile { display: table-cell; vertical-align: middle; } div.banner div.profile div.avatar { display: inline-block; vertical-align: top; width: 70px; height: 70px; position: relative; } div.banner div.profile div.avatar div { height: 100%; background-size: cover; background-position: center center; border-radius: 100%; } /* images are 1:1 anyway */ div.banner div.profile div.avatar img { border-radius: 100%; width: 100%; height: 100%; } div.banner div.profile h2 { display: inline-block; vertical-align: top; padding: 0 0 0 20px; line-height: 70px; font-size: 26px; font-weight: 500; color: #fff; font-family: 'Roboto', Arial, sans-serif; } div.banner div.profile span.user-icon { display: inline-block; line-height: 70px; } div.banner div.profile span.user-icon i { line-height: 24px; font-size: 24px; margin-left: 8px; vertical-align: middle; opacity: 0.6; } div.banner div.profile span.user-icon i:hover { opacity: 1 } div.banner div.image { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center center; filter: blur(10px); -moz-filter: blur(10px); -webkit-filter: blur(10px); transform: translateZ(30px); -moz-transform: translateZ(30px); -webkit-transform: translateZ(30px); } div.banner div.image.no-blur { filter: none; -moz-filter: none; -webkit-filter: none; transform: none; -moz-transform: none; -webkit-transform: none; } div.banner div.tabs { position: absolute; height: 54px; width: 100%; bottom: 0; background: rgba(22, 9, 40, 0.15); text-align: center; } div.banner div.tabs div.big-container { white-space: nowrap; } div.banner div.tabs a { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #eae5ef; line-height: 54px; height: 54px; padding: 0 30px; margin: 0 3px; border-bottom: 3px solid rgba(255, 255, 255, 0.15); opacity: 0.7; } div.banner div.tabs a i { margin-right: 8px; font-size: 14px; line-height: 54px; vertical-align: top; } div.banner div.tabs a span { opacity: 0.6; } div.banner div.tabs a:hover { border-color: #eae5ef; opacity: 1; } div.banner div.tabs a.active { border-color: #f73c78 !important; color: #fff; opacity: 1; } div.banner a.rounded-btn { opacity: 1; height: auto; width: auto; border: 0; position: absolute; width: auto; top: 20px; right: 0; padding: 0 20px; } div.banner a.rounded-btn span { display: inline-block; } div.banner a.rounded-btn i { display: inline-block; margin-right: 6px; } div.banner div.tabs a:first-child { margin-left: 0 !important; } div.banner div.tabs a:last-child { margin-right: 0 !important; } html.phone div.banner a.rounded-btn { top: 10px; right: 10px; font-size: 14px; line-height: 34px; height: auto; padding: 0 13px; margin: 0 2px; } html.phone div.banner a.rounded-btn i { margin-right: 0; } html.phone div.banner a.rounded-btn span { display: none; } div.colored-container { background: #39274c; padding: 45px 45px 45px 0; /* todo: change if you want to use this container for uses other than preferences */ border-radius: 5px; } div.explanation { padding-left: 140px; } div.explanation div.item { margin-top: 75px; } div.boxed div.explanation div.item { margin-top: 45px; } div.boxed div.explanation div.item:after { border-bottom: 4px solid #2a1b3b; /* .info bg color */ height: 45px; content: " "; display: block; margin: 0 -45px 0 -140px; } div.boxed div.explanation div.item:last-child:after { height: 0 !important; border-bottom: 0 !important; } div.explanation div.item:first-child { margin-top: 0 !important; } div.explanation div.number { display: table; float: left; position: absolute; margin: 0 0 0 -95px; width: 50px; height: 50px; border-radius: 100%; border: 2px solid #bfb9c7; color: #bfb9c7; text-align: center; font-weight: 500; font-size: 20px; } div.explanation div.number.image { border: 0; } div.explanation div.number.image div { background-size: cover; background-position: center center; border-radius: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } div.explanation div.number span, div.explanation div.number i { display: table-cell; vertical-align: middle; } div.explanation.white div.number { color: #fff; border-color: #fff; } div.item-title { font-size: 24px; line-height: 30px; margin: 0 0 11px 0; font-weight: 700; } img.explanation { display: inline-block; clear: both; margin: 0 0 12px 0; border-radius: 8px; max-width: 100%; } div.colored-container.normal-padding { padding: 30px; } div.colored-container.text-padding { padding: 40px 45px; } div.boxed div.normal-padding.explanation div.item { margin-top: 30px; } div.boxed div.normal-padding.explanation div.item:after { height: 30px; margin: 0 -30px 0 -30px; border-bottom-width: 3px; } div.item a.user { display: block; margin-top: 6px; color: #ff6898; } div.item a.user:hover { color: #fff; } div.item a.user div.avatar { display: inline-block; vertical-align: top; width: 40px; height: 40px; position: relative; } div.item a.user div.avatar img { border-radius: 100%; width: 100%; height: 100%; } div.item a.user strong.username { display: inline-block; border-bottom: none; padding-left: 10px; font-size: 16px; line-height: 40px; font-weight: 700; } div.filters {} div.filter-settings { display: none; position: absolute; top: -24px; right: 0; transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; -webkit-transform-origin: right bottom; } div.filter-settings.open { display: block; } div.filter-settings a { border-radius: 10px; background: rgba(92, 75, 112, 0.4); color: #90899a; width: 30px; height: 30px; line-height: 30px; font-size: 18px; display: inline-block; text-align: center; margin-left: 8px; } div.filter-settings a.active, div.filter-settings a:hover { background: #fff; color: #323232; } div.filter-settings span.updated { display: inline-block; font-size: 10px; line-height: 32px; color: #bfb9c7; opacity: 0.3; text-transform: uppercase; vertical-align: top; margin-right: 8px; } div.dark-box { margin: 0 0 60px 0; padding: 44px 40px; border-radius: 0 6px 6px 0; border-left: 3px solid #F73C78; background: #1a0e2a; position: relative; text-align: left; transform-origin: right top; -o-transform-origin: right top; -ms-transform-origin: right top; -moz-transform-origin: right top; -webkit-transform-origin: right top; } div.dark-box.border-top { border-left: 0; border-top: 3px solid #F73C78; border-radius: 6px; } div.dark-box p { margin: 0; padding: 0 !important; max-width: none !important; } div.dark-box a.btn-close-box { position: absolute; top: 0; right: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; color: #50455f; font-size: 21px; display: block; } div.dark-box a.btn-close-box:hover { color: #F73C78; } div.dark-box div.line { background: #392e48; height: 2px; margin: 32px 0; } div.dark-box figure { text-align: center; display: block; margin: 40px 0; } div.dark-box figure img { max-width: 700px; border-radius: 6px; } div.dark-box figcaption { display: block; margin-top: 10px; font-size: 11px; line-height: 14px; color: #817890; } div.dark-box img.side-image { float: right; margin: -12px 0 60px 40px; max-width: 244px; } div.dark-box div.uppercase-title { text-transform: uppercase; color: #fff; letter-spacing: 3px; font-size: 18px; line-height: 26px; font-weight: 800; } div.dark-box div.red-centered-line { width: 80px; height: 3px; background: #ea3739; margin: 24px auto; } div.dark-box div.banner-huge { background: #ea3739 url('../images/banner-pattern.png') repeat; border-radius: 6px; color: #fff; text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15); } div.dark-box div.banner-huge i { display: inline-block; vertical-align: top; font-size: 60px; line-height: 136px; width: 150px; text-align: center; } div.dark-box div.banner-huge span { display: inline-block; vertical-align: top; font-size: 90px; line-height: 136px; font-family: 'Cookie', cursive; } div.dark-box div.banner-huge span sup { font-size: 50px; line-height: 60px; display: inline-block; } div.dark-box div.banner-subtitle { margin-top: 26px; font-size: 20px; line-height: 30px; font-weight: 700; color: #f59f9f; } div.dark-box div.banner-line { height: 4px; width: 40px; background: #f59f9f; margin: 20px 0; } h3.cursive { font-family: "Cookie", cursive; font-size: 34px; line-height: 46px; color: #ffd9d4; margin: 12px auto; } div.dark-box div.banner-huge.color1 { background-color: #e23067; } div.dark-box div.banner-subtitle.color1 { color: #f59fba; } div.dark-box div.banner-line.color1 { background: #f59fba; } div.dark-box div.banner-huge.color2 { background-color: #e449ac; } div.dark-box div.banner-subtitle.color2 { color: #f59fdc; } div.dark-box div.banner-line.color2 { background: #f59fdc; } div.dark-box div.banner-huge.color3 { background-color: #bd60d1; } div.dark-box div.banner-subtitle.color3 { color: #e89ff5; } div.dark-box div.banner-line.color3 { background: #e89ff5; } div.dark-box div.banner-huge.color4 { background-color: #9d65e8; } div.dark-box div.banner-subtitle.color4 { color: #d2b1ff; } div.dark-box div.banner-line.color4 { background: #d2b1ff; } div.dark-box div.banner-huge.color5 { background-color: #9760f1; } div.dark-box div.banner-subtitle.color5 { color: #ccb2f9; } div.dark-box div.banner-line.color5 { background: #ccb2f9; } div.dark-box div.banner-huge.color6 { background-color: #5973f6; } div.dark-box div.banner-subtitle.color6 { color: #b1bcf7; } div.dark-box div.banner-line.color6 { background: #b1bcf7; } div.dark-box div.banner-huge.color7 { background-color: #537fee; } div.dark-box div.banner-subtitle.color7 { color: #b1c5ff; } div.dark-box div.banner-line.color7 { background: #b1c5ff; } div.dark-box div.banner-huge.color8 { background-color: #48a0f2; } div.dark-box div.banner-subtitle.color8 { color: #c0d4e6; } div.dark-box div.banner-line.color8 { background: #c0d4e6; } div.dark-box div.banner-huge.color9 { background-color: #36b7cc; } div.dark-box div.banner-subtitle.color9 { color: #b3d1d6; } div.dark-box div.banner-line.color9 { background: #b3d1d6; } div.dark-box div.banner-huge.color10 { background-color: #3eb396; } div.dark-box div.banner-subtitle.color10 { color: #aed6cc; } div.dark-box div.banner-line.color10 { background: #aed6cc; } div.dark-box div.banner-huge.color11 { background-color: #50a25a; } div.dark-box div.banner-subtitle.color11 { color: #a7ccac; } div.dark-box div.banner-line.color11 { background: #a7ccac; } div.dark-box div.banner-huge.color12 { background-color: #7b9c38; } div.dark-box div.banner-subtitle.color12 { color: #c3d0a9; } div.dark-box div.banner-line.color12 { background: #c3d0a9; } div.dark-box div.banner-huge.color13 { background-color: #aba503; } div.dark-box div.banner-subtitle.color13 { color: #d6d5ad; } div.dark-box div.banner-line.color13 { background: #d6d5ad; } div.dark-box div.banner-huge.color14 { background-color: #757fc9; } div.dark-box div.banner-subtitle.color14 { color: #b1beff; } div.dark-box div.banner-line.color14 { background: #b1beff; } html.mobile div.dark-box { max-width: 800px; margin-left: auto !important; margin-right: auto !important; } div.dark-box div.feature-separator{ clear: both; height: 60px; } html.phone div.dark-box div.feature-separator{ clear: both; height: 40px; } div.patreon-badge { display: inline-block; float: right; background: url('../images/patreon-badge-circles.png'); background-size: cover; width: 244px; height: 206px; position: relative; } div.patreon-badge div.avatar { border-radius: 100%; border: 2px solid #1a0e2a; background-size: cover; width: 126px; height: 126px; position: absolute; top: 26px; left: 50%; z-index: 1; margin-left: -63px; box-shadow: 0 0 20px rgba(232, 137, 48, 0.4); } div.patreon-badge div.badge { background: url('../images/patreon-badge-solo2.png'); background-size: cover; width: 100%; height: 100%; position: absolute; top: -4px; left: 0; z-index: 2; } div.dark-box div.patreon-badge { margin: 0 0 60px 40px; } html.mobile div.dark-box div.patreon-badge { margin-bottom: 0; } div.checkbox-explanations { margin-top: 30px; } div.checkbox-explanations div.item { margin-top: 20px; position: relative; min-height: 60px; display: table; } div.checkbox-explanations div.item div.symbol { display: table-cell; } div.checkbox-explanations div.item div.symbol i { display: block; border-radius: 6px; background: #65527b; color: #a69eb1; font-size: 24px; line-height: 60px; height: 60px; width: 60px; text-align: center; } div.checkbox-explanations div.item div.symbol.green i { background: #6f907e; color: #f6fffa; } div.checkbox-explanations div.item div.symbol.red i { background: #884a78; color: #f7dbed; } div.checkbox-explanations div.item div.symbol i:before { margin: 0 -1px 0 1px; } div.checkbox-explanations div.item p { display: table-cell; vertical-align: middle; padding-left: 20px !important; } #filter { display: none; position: fixed; z-index: 10; top: 62px; left: 0; right: 0; bottom: 0; overflow-y: scroll; overflow-x: hidden; background: url('../images/blurred_bg.jpg') no-repeat center top; /* #2a1b3b */ background: url('../images/bg21.jpg') no-repeat center top; background: url('../images/bg-test20.jpg') no-repeat center top; background-size: cover; background-attachment: fixed; padding: 65px 0 95px 0; text-align: center; opacity: 0; transform: translateY(-800px); -moz-transform: translateY(-800px); -webkit-transform: translateY(-800px); } #filter.disabled { overflow-y: hidden; } #filter.inline { display: block; position: static; z-index: 1; top: auto; left: auto; right: auto; bottom: auto; overflow-y: hidden; /* was visible, now hidden because it ruined dark-box animation on home */ opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } #filter.shown { opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } html.phone #filter.shown { top: 55px; } html.hide-filter-bg #filter { background: #2e2042; /*#2b1e3c*/ } #filter div.hide-filter { display: none; position: absolute; top: 44px; left: 0; right: 0; text-align: center; } #filter.shown div.hide-filter { display: block; } #filter div.hide-filter.help-opened { transform: translateY(-22px); -o-transform: translateY(-22px); -ms-transform: translateY(-22px); -moz-transform: translateY(-22px); -webkit-transform: translateY(-22px); } #filter a.btn-hide-filter { color: #e7bacb; font-size: 15px; line-height: 22px; padding: 8px 15px 9px 15px; border-radius: 6px; } #filter a.btn-hide-filter i { margin-right: 10px; } #filter a.btn-hide-filter:hover { background: rgba(231, 186, 203, 0.1); } /*#filter a.btn-hide-filter span { border-bottom: 1px dashed rgba(231, 186, 203, 0.2); } #filter a.btn-hide-filter:hover span { border-bottom: 1px dashed transparent; }*/ #filter div.filter-overlay { position: absolute; background: rgba(26, 21, 49, 0.88); z-index: 2; top: 0; left: 0; right: 0; bottom: 0; } #filter div.filter-overlay div.content { position: absolute; top: 50%; width: 100%; } #filter div.filter-overlay div.content.adjusted { margin-top: -160px; } #filter div.filter-overlay div.content.disabled { margin-top: -145px; } #filter div.filter-overlay h3 { margin: 0; font-size: 32px; line-height: 48px; font-weight: 900; } #filter div.filter-overlay div.line { margin: 20px 0; text-align: center; padding: 0; font-size: 0; line-height: 0; } #filter div.filter-overlay div.line div { display: inline-block; width: 80px; height: 2px; background: #f73c78; } div.info { background: #2a1b3b; background-image: url('../images/heart-pattern4.png'); background-position: top center; background-repeat: repeat-x; padding: 75px 0; text-align: center; } div.info.boxed { padding: 60px 0 75px 0; } div.info.no-hearts { background-image: none; } div.hearts { background: #2a1b3b; background-image: url('../images/heart-pattern4.png'); background-position: top center; background-repeat: repeat-x; text-align: center; } i.big-patreon-badge, i.medium-patreon-badge, i.small-patreon-badge, i.smaller-patreon-badge, i.tiny-patreon-badge { font-size: 24px; line-height: 24px; display: inline-block; position: absolute; bottom: -15px; left: 50%; margin-left: -11px; z-index: 2; width: 22px; text-align: center; color: #f98b54; background: rgb(249,104,84); background: -moz-linear-gradient(45deg, rgba(249,104,84,1) 0%, rgba(255,172,48,1) 100%); background: -webkit-linear-gradient(45deg, rgba(249,104,84,1) 0%,rgba(255,172,48,1) 100%); background: linear-gradient(45deg, rgba(249,104,84,1) 0%,rgba(255,172,48,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f96854', endColorstr='#ffac30',GradientType=1 ); color: transparent !important; -webkit-background-clip: text; background-clip: text; } i.big-patreon-badge-shadow, i.medium-patreon-badge-shadow, i.small-patreon-badge-shadow, i.smaller-patreon-badge-shadow, i.tiny-patreon-badge-shadow { font-size: 24px; line-height: 24px; display: inline-block; position: absolute; bottom: -15px; left: 50%; margin-left: -11px; z-index: 1; width: 22px; text-align: center; color: transparent !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 5px 6px rgba(0, 0, 0, 0.2); } html.phone i.big-patreon-badge, html.phone i.big-patreon-badge-shadow { font-size: 19px; line-height: 19px; bottom: -13px; margin-left: -10px; width: 20px; } html.phone i.big-patreon-badge-shadow { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.2); } div.room-modal div.profile i.big-patreon-badge, div.room-modal div.profile i.big-patreon-badge-shadow { bottom: -10px; } html.phone div.room-modal div.profile i.big-patreon-badge, html.phone div.room-modal div.profile i.big-patreon-badge-shadow { font-size: 28px; line-height: 28px; bottom: -12px; } i.medium-patreon-badge, i.medium-patreon-badge-shadow { font-size: 18px; line-height: 18px; bottom: -13px; } i.medium-patreon-badge-shadow { text-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); } html.phone i.medium-patreon-badge, html.phone i.medium-patreon-badge-shadow { font-size: 16px; line-height: 16px; bottom: -11px; } html.phone i.medium-patreon-badge-shadow { text-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2); } i.small-patreon-badge, i.small-patreon-badge-shadow { font-size: 16px; line-height: 16px; bottom: -21px; } i.small-patreon-badge-shadow { text-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); } html.phone i.small-patreon-badge, html.phone i.small-patreon-badge-shadow { font-size: 14px; line-height: 14px; bottom: -23px; } html.phone i.small-patreon-badge-shadow { text-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2); } i.smaller-patreon-badge, i.smaller-patreon-badge-shadow { font-size: 15px; line-height: 15px; bottom: -8px; } i.smaller-patreon-badge-shadow { text-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2); } html.phone i.smaller-patreon-badge, html.phone i.smaller-patreon-badge-shadow { font-size: 12px; line-height: 12px; bottom: -8px; } html.phone i.smaller-patreon-badge-shadow { text-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2); } i.tiny-patreon-badge, i.tiny-patreon-badge-shadow { font-size: 15px; line-height: 15px; bottom: -15px; } i.tiny-patreon-badge-shadow { text-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2); } html.phone i.tiny-patreon-badge, html.phone i.tiny-patreon-badge-shadow { font-size: 12px; line-height: 12px; bottom: -15px; } html.phone i.tiny-patreon-badge-shadow { text-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2); } html.room i.tiny-patreon-badge, html.room i.tiny-patreon-badge-shadow { font-size: 12px !important; line-height: 12px !important; bottom: -3px; right: -7px; left: auto; margin: 0 !important; } html.phone.room i.tiny-patreon-badge, html.phone.room i.tiny-patreon-badge-shadow { font-size: 11px !important; line-height: 11px !important; bottom: -4px; right: -8px; } #white-modal i.big-patreon-badge-shadow { text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); } html.phone #white-modal i.big-patreon-badge-shadow { text-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } html.phone #white-modal div.profile-box i.big-patreon-badge, html.phone #white-modal div.profile-box i.big-patreon-badge-shadow { font-size: 28px; line-height: 28px; } div.pm-container p strong a, div.big-container p.normal-subtitle strong a.normal { position: relative; } div.pm-container p strong a i.fa-bookmark, div.big-container p.normal-subtitle a.normal i.fa-bookmark { left: 16px; } a#banner-intodare { clear: both; display: block; background: #171928; padding: 3px 0; border: 0; text-decoration: none; } a#banner-intodare img { min-width: 100%; max-width: 100%; } a#banner-marketing { clear: both; display: block; border: 0; text-decoration: none; } a#banner-marketing img { min-width: 100%; max-width: 100%; } div.highlight-banner { background: #782844 url('../images/banner-pattern2.png') repeat; text-align: center; box-shadow: inset 0 -10px 19px rgba(0, 0, 0, 0.12), inset 0 -5px 10px rgba(44, 25, 62, 0.35); clear: both; padding: 40px 0 50px 0; } /* @media only screen and (max-width: 670px) and (max-aspect-ratio: 9/10) { html.phone div.highlight-banner { background: url('../images/background-pattern2-phone-y.jpg') no-repeat; background-size: cover; } } @media only screen and (min-width: 670px) and (min-aspect-ratio: 10/9) { html.phone div.highlight-banner { background: url('../images/background-pattern2-phone-x.jpg') no-repeat; background-size: cover; } } */ div.highlight-banner div.container { position: relative; width: 960px; margin: 0 auto; text-align: left; } div.highlight-banner div.text { display: inline-block; position: relative; margin-right: 340px; } div.highlight-banner div.text h2 { padding: 0 0 10px 0; font-size: 28px; line-height: 36px; } div.highlight-banner div.text div.paragraphs { margin-bottom: 30px; } div.highlight-banner div.text p { display: inline; color: rgba(255, 217, 212, 0.85); margin: 0; padding: 0; } div.highlight-banner div.text p + p { margin-left: 4px; } div.highlight-banner div.side { display: inline-block; width: 240px; margin-left: 40px; } div.highlight-banner div.patreon-image { position: absolute; top: 0; right: 0; top: 50%; margin-top: -138px; } div.highlight-banner div.patreon-image div.patreon-badge { margin-top: -30px; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } div.highlight-banner div.patreon { position: absolute; bottom: 0; right: 0; } div.highlight-banner div.patreon h3 { font-size: 28px; line-height: 34px; margin: 12px auto; } div.highlight-banner div.patreon img { max-width: 100%; } div.highlight-banner div.patreon a { padding: 6px 32px; width: 240px; } html.phone div.highlight-banner div.text p { font-size: 16px; line-height: 28px; } html.phone div.highlight-banner div.text h2 { font-size: 24px; line-height: 32px; } html.phone div.highlight-banner div.patreon h3 { font-size: 24px; line-height: 28px; } html.phone div.highlight-banner div.patreon-image div.patreon-badge { margin-top: -26px; } div.highlight-banner a.closed { display: none; } html.phone div.highlight-banner.closed div.container { width: auto; margin: 0 20px; } div.highlight-banner.closed, html.phone div.highlight-banner.closed { /*background: #2b1c3b;*/ background-color: #2a173d; padding: 30px 0; /*box-shadow: none;*/ } div.highlight-banner.closed div.text, html.phone div.highlight-banner.closed div.text { display: inline-block; vertical-align: top; margin-right: 0; } div.highlight-banner.closed div.text h2, html.phone div.highlight-banner.closed div.text h2 { display: none; } div.highlight-banner.closed div.text div.paragraphs, html.phone div.highlight-banner.closed div.text div.paragraphs { display: none; } div.highlight-banner.closed div.text p, html.phone div.highlight-banner.closed div.text p { display: none; opacity: 0; } div.highlight-banner.closed a.btn-thicc.medium, html.phone div.highlight-banner.closed a.btn-thicc.medium { font-size: 14px; } div.highlight-banner.closed a.btn-thicc.dynamic, html.phone div.highlight-banner.closed a.btn-thicc.dynamic { padding-left: 30px; padding-right: 30px; } div.highlight-banner.closed div.side, html.phone div.highlight-banner.closed div.side { display: inline-block; margin: 0; padding: 0; vertical-align: top; } div.highlight-banner.closed div.patreon-image, html.phone div.highlight-banner.closed div.patreon-image { display: none; } div.highlight-banner.closed div.patreon, html.phone div.highlight-banner.closed div.patreon { display: inline-block; margin: 0; position: absolute; } div.highlight-banner.closed div.patreon h3, html.phone div.highlight-banner.closed div.patreon h3 { display: none; } div.highlight-banner.closed a.open, html.phone div.highlight-banner.closed a.open { display: none; } div.highlight-banner.closed a.closed, html.phone div.highlight-banner.closed a.closed { display: inline-block; } div.highlight-banner.closed a.btn-thicc.medium.regular, html.phone div.highlight-banner.closed a.btn-thicc.medium.regular { font-size: 16px; } div.highlight-banner.closed a.btn-thicc.medium.regular i.fa-angle-double-down, html.phone div.highlight-banner.closed a.btn-thicc.medium.regular i.fa-angle-double-down { font-size: 18px; } @media only screen and (max-width: 1000px) { div.highlight-banner div.container { margin: 0 20px; width: auto; } div.highlight-banner div.text { margin-right: 280px; } } @media only screen and (max-width: 900px) { div.highlight-banner div.text p { font-size: 14px; line-height: 26px; } div.highlight-banner div.text h2 { font-size: 24px; line-height: 32px; } div.highlight-banner div.patreon h3 { font-size: 24px; line-height: 28px; } html.phone div.highlight-banner div.text p { font-size: 15px; line-height: 27px; } html.phone div.highlight-banner div.text h2 { font-size: 22px; line-height: 28px; padding-bottom: 8px; } html.phone div.highlight-banner div.patreon h3 { font-size: 24px; line-height: 26px; } html.phone div.highlight-banner div.patreon-image div.patreon-badge { margin-top: -24px; } } @media only screen and (max-width: 740px) { div.highlight-banner div.text p { font-size: 13px; line-height: 24px; } div.highlight-banner div.text h2 { font-size: 20px; line-height: 28px; padding-bottom: 6px; } div.highlight-banner a.btn-thicc.spacing-right { margin-right: 12px; } div.highlight-banner a.btn-thicc.dynamic { padding-left: 40px; padding-right: 40px; } div.highlight-banner a.btn-thicc.medium { font-size: 13px; } html.phone div.highlight-banner div.text p { font-size: 14px; line-height: 24px; } html.phone div.highlight-banner div.text h2 { font-size: 20px; line-height: 26px; padding-bottom: 8px; } html.phone div.highlight-banner div.patreon h3 { font-size: 22px; line-height: 24px; } html.phone div.highlight-banner div.patreon-image div.patreon-badge { margin-top: -22px; } } @media only screen and (max-width: 670px) { div.highlight-banner, html.phone div.highlight-banner { padding-top: 30px; } div.highlight-banner div.text, html.phone div.highlight-banner div.text { margin-right: 0; text-align: center; display: block; } div.highlight-banner div.text h2, html.phone div.highlight-banner div.text h2 { text-align: center; } div.highlight-banner div.text div.paragraphs, html.phone div.highlight-banner div.text div.paragraphs { max-width: 560px; margin: 0 auto 30px auto; } div.highlight-banner div.text p, html.phone div.highlight-banner div.text p { max-width: 560px; display: block; } div.highlight-banner div.text p + p, html.phone div.highlight-banner div.text p + p { margin: 20px 0 0 0; } div.highlight-banner div.side, html.phone div.highlight-banner div.side { display: block; width: auto; background: rgba(0, 0, 0, 0.1); margin: 40px -20px -50px -20px; padding: 30px 0 40px 0; } div.highlight-banner div.patreon-image, html.phone div.highlight-banner div.patreon-image { position: initial; margin: 0; right: auto; top: auto; } div.highlight-banner div.patreon-image div.patreon-badge, html.phone div.highlight-banner div.patreon-image div.patreon-badge { margin: 0 auto; display: block; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; float: none; } div.highlight-banner div.patreon, html.phone div.highlight-banner div.patreon { margin-top: 10px; position: static; } div.highlight-banner div.patreon h3, html.phone div.highlight-banner div.patreon h3 { font-size: 30px; line-height: 36px; } div.highlight-banner.closed, html.phone div.highlight-banner.closed { padding: 22px 0; } div.highlight-banner.closed a.btn-thicc.medium, html.phone div.highlight-banner.closed a.btn-thicc.medium { padding: 10px 0; } div.highlight-banner.closed a.btn-thicc.dynamic, html.phone div.highlight-banner.closed a.btn-thicc.dynamic { padding-left: 22px; padding-right: 22px; } div.highlight-banner.closed a.btn-thicc.medium.regular, html.phone div.highlight-banner.closed a.btn-thicc.medium.regular { font-size: 13px; } div.highlight-banner.closed a.btn-thicc.regular i, html.phone div.highlight-banner.closed a.btn-thicc.regular i { font-size: 14px; } div.highlight-banner.closed div.patreon a.btn-thicc.patreon, html.phone div.highlight-banner.closed div.patreon a.btn-thicc.patreon { padding: 2px 12px; width: 180px; } } @media only screen and (max-width: 540px) { /* html.phone div.highlight-banner div.text { text-align: left; } */ html.phone div.highlight-banner div.text p { font-size: 13px; line-height: 23px; } html.phone div.highlight-banner div.text h2 { font-size: 20px; line-height: 26px; padding-bottom: 8px; /*text-align: left;*/ } html.phone div.highlight-banner div.patreon h3 { font-size: 28px; line-height: 32px; } html.phone div.highlight-banner a.btn-thicc.medium { padding: 14px 0; font-size: 12px; } html.phone div.highlight-banner a.btn-thicc.dynamic { padding-left: 30px; padding-right: 30px; } html.phone div.highlight-banner a.btn-thicc.patreon { padding: 6px 32px; } div.highlight-banner.closed, html.phone div.highlight-banner.closed { /* same as initial css */ background: #782844 url('../images/banner-pattern2.png') repeat; /*box-shadow: inset 0 -10px 19px rgba(0, 0, 0, 0.12), inset 0 -5px 10px rgba(44, 25, 62, 0.35);*/ box-shadow: inset 0 -40px 29px rgba(0, 0, 0, 0.16), inset 0 -5px 10px rgba(44, 25, 62, 0.35); padding: 0; } div.highlight-banner.closed div.container, html.phone div.highlight-banner.closed div.container { margin: 0; } div.highlight-banner.closed div.text, html.phone div.highlight-banner.closed div.text { display: block; text-align: center; padding: 26px 0; margin: 0; } div.highlight-banner.closed div.side, html.phone div.highlight-banner.closed div.side { display: block; width: auto; text-align: center; background: transparent; padding: 16px 0 26px 0; } div.highlight-banner.closed div.patreon, html.phone div.highlight-banner.closed div.patreon { position: static; } div.highlight-banner.closed div.patreon h3, html.phone div.highlight-banner.closed div.patreon h3 { display: block; font-size: 22px; line-height: 26px; margin: 0 auto 8px auto; } } div.filter-view { position: relative; width: 960px; margin: 0 auto; font-size: 0; line-height: 0; text-align: left; } div.filter { display: inline-block; text-align: left; position: relative; } div.filter-row { margin-top: 60px; position: relative; text-align: center; } div.filter-row div.filter:first-child { position: absolute; top: 0; left: 0; } div.filter-row div.filter:last-child { position: absolute; top: 0; right: 0; } /*div.filter div.options div:first-child, div.filter div.options a:first-child { margin-left: 0; }*/ div.filter-view span.title.big { font-size: 20px; line-height: 32px; font-weight: 500; } div.filter-view span.title.bigger { font-size: 28px; line-height: 42px; font-weight: 700; } div.filter-view span.title.bigger.old { font-size: 24px; line-height: 38px; } div.filter-view span.title.biggest { font-size: 36px; line-height: 52px; font-weight: 700; } div.filter-view span.title { display: block; padding-left: 5px; margin-bottom: 3px; font-size: 16px; line-height: 24px; } div.filter i.icon { text-align: center; width: 24px; position: absolute; right: 0; top: 0; font-size: 16px; line-height: 24px; display: inline-block; color: rgba(207, 195, 220, 0.5); } div.filter i.icon:hover { color: #fff; } div.filter-view span.title i, div.fieldset-box span.title i { margin-left: 10px; font-size: 16px; color: #7d7686; } div.filter-view p { margin: 0; padding-left: 5px; } div.filter-view p strong { font-weight: 500; color: #dfd8e9; } div.filter-header { cursor: pointer; margin: 10px 0 0 40px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } div.filter-header div.button { position: absolute; margin: 6px 0 0 -34px; width: 24px; height: 24px; border-radius: 4px; background: rgba(92, 75, 112, 0.7); color: #bfb9c7; font-size: 16px; line-height: 24px; font-weight: 700; text-align: center; } div.filter-header div.button span { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; /*color: #bfb9c7; filter animation*/ } div.filter-header div.button span:first-child { opacity: 0; } div.filter-header div.button span:nth-child(2) { opacity: 1; } div.filter-header.open div.button span:first-child { opacity: 1; } div.filter-header.open div.button span:nth-child(2) { opacity: 0; } div.filter-view fieldset { margin: 0; padding: 0; border: 0; border-top: 12px solid rgba(92, 75, 112, 0.3); } div.filter-view fieldset.red { border-color: #F73C78; } div.filter-view fieldset.purple { border-color: #b16dfc; } div.filter-view fieldset legend { font-size: 26px; line-height: 34px; font-weight: 700; color: #bfb9c7; padding: 0 15px 4px 5px; } /*div.filter-view fieldset p { margin-left: -30px; }*/ div.filter-view div.filter-header:hover fieldset, div.filter-view div.filter-header.open fieldset { border-color: #5c4b70; } div.filter-view div.filter-header:hover fieldset legend, div.filter-view div.filter-header.open fieldset legend { color: #fff; } div.filter-view div.filter-header.open div.button { background: #5c4b70; color: #fff; } div.filter-view div.filter-header:hover div.button { background: #fff; color: #353535; } /*div.filter-view div.filter-header.open div.button span { color: #fff; transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); } div.filter-view div.filter-header:hover div.button span { color: #353535; } filter animation */ div.filter-view div.filter-handle { width: 14px; position: absolute; margin: 15px 0 0 -25px; background: #5c4b70; height: 3px; border-radius: 3px; display: none; } div.filter-view div.filter-box { overflow: hidden; margin-left: 40px; transform-origin: left top; backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; display: none; opacity: 0; } div.filter-view div.filter-header.open + div.filter-box { display: block; opacity: 1; } .filtering, div.regular { color: #fff; } .filtering table { margin: 0 auto; width: 1000px; } .filtering table td.label { text-align: right; white-space: nowrap; } .filtering table td.options { text-align: left; padding: 25px 0 25px 25px; } div.regular table { margin: 0 auto; width: 800px; } div.regular table td.label { text-align: right; white-space: nowrap; width: 1%; } div.regular table td.options { text-align: left; padding: 25px 0 25px 25px; } div.tabs-new { text-align: center; } div.tabs-new.negative-margin-top { margin-top: -14px; } div.tabs-new a { display: inline-block; text-align: center; width: 100px; font-weight: 700; font-size: 14px; line-height: 32px; border: 2px solid #fff; border-left-width: 0; color: #fff; } div.tabs-new a:hover { background: rgba(255, 255, 255, 0.2); } div.tabs-new a.selected { color: #1d112b; background: #fff; } div.tabs-new a:first-child { border-radius: 22px 0 0 22px; border-left-width: 2px; } div.tabs-new a:last-child { border-radius: 0 22px 22px 0; border-left-width: 0; border-right-width: 2px; } /* no longer used, replaced by sort-dropdown */ div.sort-tabs { text-align: center; margin-bottom: 50px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } div.sort-tabs div.tab, div.sort-tabs a.tab, div.sort-dropdown div.tab, div.sort-dropdown a.tab { display: inline-block; font-size: 16px; line-height: 40px; padding: 0 20px; border-radius: 0; border-radius: 50px 10px 10px 50px; margin: 0 2px; background: #5c4b70; color: #f3eef9; color: #d5cedd; cursor: pointer; vertical-align: top; } div.sort-tabs div.tab:hover, div.sort-tabs a.tab:hover, div.sort-dropdown div.tab:hover, div.sort-dropdown a.tab:hover { background: #7d6b93; color: #fff; } div.sort-tabs div.tab.selected, div.sort-tabs a.tab.selected, div.sort-dropdown div.tab.selected, div.sort-dropdown a.tab.selected { background: #f73c78; color: #fff; } /*div.sort-tabs div.tab:first-child, div.sort-tabs a.tab:first-child { border-radius: 3px 0 0 3px; } div.sort-tabs div.tab:last-child, div.sort-tabs a.tab:last-child { border-radius: 0 3px 3px 0; }*/ div.sort-tabs a.btn-ellipsis, div.sort-dropdown a.btn-ellipsis { padding: 0 16px 0 14px !important; font-size: 14px; } div.sort-tabs a.btn-ellipsis.filled span, div.sort-dropdown a.btn-ellipsis.filled span { font-size: 16px; display: inline-block; padding-right: 10px; } div.sort-dropdown a.btn-ellipsis.active { background: #7d6b93; color: #fff; } a.btn-main-search { display: inline-block; font-size: 18px; line-height: 44px; padding: 0 20px; border-radius: 24px; margin: 0 2px; background: #5c4b70; color: #f3eef9; color: #d5cedd; vertical-align: top; margin-right: 20px; box-shadow: 0 4px 14px rgb(29, 17, 43); } a.btn-main-search i { vertical-align: top; line-height: 44px; width: 20px; text-align: center; -webkit-transform: none; -moz-transform: none; transform: none; } a.btn-main-search i.fa-times { opacity: 0; position: absolute; margin: 0 2px 0 -2px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); } a.btn-main-search.searching { background: #f73c78 !important; color: #fff !important; } a.btn-main-search.active { border-radius: 8px 24px 24px 8px; } a.btn-main-search.active i.fa-search { opacity: 0; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); transform: rotate(-180deg); } a.btn-main-search.active i.fa-times { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } a.btn-main-search:hover { background: #7d6b93; color: #fff; } html.phone a.btn-main-search { display: inline-block; font-size: 14px; line-height: 34px; padding: 0 12px; margin-right: 12px; } html.phone a.btn-main-search i { line-height: 34px; } div.search-bar { display: none; opacity: 0; position: absolute; margin-left: -203px; -webkit-transform: translateX(10px); -moz-transform: translateX(10px); transform: translateX(10px); } div.search-bar input { border-radius: 24px; margin: 0; padding: 12px 18px; width: 200px; background: #fff; box-shadow: -20px 6px 30px rgb(29, 17, 43); font-size: 12px; line-height: 20px; color: #3c3c48; } div.search-bar.active { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } div.search-bar.active input { border-radius: 24px 8px 8px 24px; } div.search-bar input::-webkit-input-placeholder { color: #908f98; letter-spacing: 0; } div.search-bar input:-ms-input-placeholder { color: #908f98; letter-spacing: 0; } div.search-bar input:placeholder-shown { color: #908f98; letter-spacing: 0; } div.search-bar input:-moz-placeholder { color: #908f98; opacity: 1; letter-spacing: 0; } div.search-bar input::-moz-placeholder { color: #908f98; opacity: 1; letter-spacing: 0; } html.phone div.search-bar { margin-left: -132px; } html.phone div.search-bar input { padding: 7px 12px; width: 130px; font-size: 10px; } div.side-buttons-container { position: relative; } div.side-buttons { position: absolute; right: 0; margin-top: -46px; /* total height + 2 */ } html.phone div.side-buttons { margin-top: -34px; } div.side-buttons-container.centered { text-align: center; } div.side-buttons-container.centered div.side-buttons { position: relative; margin: -6px auto 30px auto; text-align: center; display: inline-block; white-space: nowrap; } div.side-buttons-container.centered.active { -webkit-transform: translateX(18%); -moz-transform: translateX(18%); transform: translateX(18%); } div.sort-dropdown { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; } div.sort-dropdown div.tab, div.sort-dropdown a.tab { line-height: 44px; padding: 0 20px; border-radius: 24px 8px 8px 24px; margin: 0; padding-left: 22px; } div.sort-dropdown a.btn-ellipsis { margin-left: 5px; border-radius: 8px 24px 24px 8px; padding-right: 2px; padding-left: 0; } div.options-multi { font-size: 0; line-height: 0; } div.options-multi div.opt { cursor: pointer; display: inline-block; position: relative; margin: 3px; box-shadow: 0 0 0 3px transparent; border-radius: 5px; background: transparent; padding: 2px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } div.options-multi div.opt span.name { vertical-align: top; display: inline-block; padding: 10px 16px; border-radius: 0 3px 3px 0; background: #5c4b70; color: #f3eef9; font-size: 16px; line-height: 18px; } div.options-multi div.opt span.amount, div.options-multi div.opt span.new, div.options div.opt span.amount, div.options div.opt span.new { display: none; margin-left: 6px; margin-top: -2px; opacity: 0.5; font-size: 11px; vertical-align: top; } html.show-amounts div.options-multi div.opt span.amount, html.show-amounts div.options div.opt span.amount { display: inline-block; } div.options-multi div.opt span.new { display: inline-block; color: #ffe679; opacity: 0.75; } div.options-multi div.opt div { vertical-align: top; display: inline-block; border-radius: 3px 0 0 3px; background: #65527b; color: #a69eb1; width: 34px; height: 38px; text-align: center; position: relative; } div.options-multi div.opt div span { vertical-align: top; display: inline-block; width: 100%; height: 100%; opacity: 0; position: absolute; left: 0; } div.options-multi div.opt div span.active { opacity: 1; } div.options-multi div.opt div span i { vertical-align: top; font-size: 15px; line-height: 38px; height: 38px; width: 20px; } /*div.options-multi div.opt.image div:first-child { border-radius: 3px 0 0 3px; margin-right: 2px; background-size: cover; background-repeat: center center; background-image: url('../images/icons/Overwatch.jpg'); } div.options-multi div.opt.image div:nth-child(2) { border-radius: 0; }*/ div.options-multi div.opt:hover { box-shadow: 0 0 0 3px rgba(81, 67, 102, 0.5); } div.options-multi div.opt:hover span.name { background: #705e86; color: #fff; } div.options-multi div.opt:hover div { background: #7d6b93; color: #fff; } div.options-multi a.opt.excluded span.name, div.options-multi div.opt.excluded span.name { background: #7b416c; color: #f7dbed; } /* #734166 */ div.options-multi a.opt.excluded div, div.options-multi div.opt.excluded div { background: #884a78; color: #f7dbed; } /* #804b72 */ div.options-multi div.opt.excluded:hover { box-shadow: 0 0 0 3px rgba(98, 60, 88, 0.5); } div.options-multi div.opt.excluded:hover span.name { background: #8e4c7d; color: #fff; } /* #875079 */ div.options-multi div.opt.excluded:hover div { background: #9e598c; color: #fff; } /* #965b86 */ div.options-multi a.opt.included span.name, div.options-multi div.opt.included span.name { background: #638472; color: #f6fffa; } /*#5c6b63*/ div.options-multi a.opt.included div, div.options-multi div.opt.included div { background: #6f907e; color: #f6fffa; } /* #67756e */ div.options-multi div.opt.included:hover { box-shadow: 0 0 0 3px rgba(76, 82, 79, 0.5); } div.options-multi div.opt.included:hover span.name { background: #719582; color: #fff; } /* #75847d */ div.options-multi div.opt.included:hover div { background: #80a491; color: #fff; } /* #82938b */ /* div.options-multi a.active, div.options-multi div.active { background: #F73C78; color: #fff; } div.options-multi a:hover, div.options-multi div:hover { background: #F73C78; color: #fff; } */ div.options div.separator, div.options-multi div.separator { display: inline-block; margin: 23px 4px; vertical-align: top; } div.options div.separator div, div.options-multi div.separator div { height: 10px; background: #5c4b70; border-radius: 2px; margin: 0 3px 0 0; width: 3px; display: inline-block; } div.options div.separator div:last-child, div.options-multi div.separator div:last-child { margin-right: 0; } div.options-multi div.separator { margin: 21px 3px; } div.options-multi div.separator div { width: 2px; height: 8px; } div.options { font-size: 0; line-height: 0; } div.options a.opt, div.options div.opt { cursor: pointer; display: inline-block; position: relative; margin: 4px; box-shadow: 0 0 0 3px transparent; border-radius: 6px; background: transparent; padding: 2px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } div.options a.opt span.name, div.options div.opt span.name { vertical-align: top; display: inline-block; padding: 12px 20px; border-radius: 4px; background: #5c4b70; color: #f3eef9; font-size: 18px; line-height: 20px; } div.options a.opt.highlighted span.name, div.options div.opt.highlighted span.name { background: #6d5b82; } div.options.old a.opt, div.options.old div.opt { margin: 2px; box-shadow: 0 0 0 2px transparent; border-radius: 5px; } div.options.old a.opt span.name, div.options.old div.opt span.name { padding: 9px 18px; border-radius: 3px; font-size: 16px; line-height: 20px; } div.options div.opt.disabled, div.options a.opt.disabled { opacity: 0.6; } div.options div.opt.active, div.options a.opt.active { opacity: 1; } div.options div.active.opt:hover, div.options a.active.opt:hover { box-shadow: 0 0 0 3px rgba(133, 47, 74, 0.5); } div.options div.opt:hover, div.options a.opt:hover { box-shadow: 0 0 0 3px rgba(81, 67, 102, 0.5); } div.options a.opt.excluded span.name, div.options div.opt.excluded span.name { background: #734166; color: #f7dbed; background: #7b416c; color: #f7dbed; } div.options a.opt:hover span.name, div.options div.opt:hover span.name { background: #705e86; color: #fff; } div.options a.opt.active span.name, div.options div.opt.active span.name { background: #F73C78; color: #fff; } div.options.old div.opt:hover, div.options.old a.opt:hover { box-shadow: 0 0 0 2px transparent; } div.options.old a.opt:hover span.name, div.options.old div.opt:hover span.name { background: #F73C78; color: #fff; } /*div.options a.opt.active:hover span.name, div.options div.active.opt:hover span.name { background: #F73C78; color: #fff; }*/ div.options-multi.white div.opt, div.options.white div.opt { box-shadow: none; margin: 1px; padding: 2px; } div.options-multi.white div.opt span.name, div.options.white div.opt span.name { padding: 9px 14px; font-size: 13px; line-height: 18px; } div.options-multi.white div.opt:hover, div.options.white div.opt:hover { box-shadow: none; } div.options-multi.white div.opt div { height: 36px; } div.options-multi.white div.opt div span i { height: 36px; line-height: 36px; } div.options-multi.white div.opt.excluded span.name, div.options.white div.opt span.name { background: #ede8f7; color: #726286; } div.options-multi.white div.opt.excluded div { background: #e7e1f3; color: #b1a6c5; } div.options-multi.white div.opt.excluded:hover span.name { background: #e4def1; color: #645478; } div.options-multi.white div.opt.excluded:hover div { background: #ded7ed; color: #a195b8; } div.options-multi.white div.opt.included span.name, div.options.white div.opt:hover span.name, div.options.white div.opt.active span.name { background: #a670d6; color: #ffffff; } div.options-multi.white div.opt.included div { background: #9965c7; color: #ffffff; } div.options-multi.white div.opt.included:hover span.name { background: #9964c7; } div.options-multi.white div.opt.included:hover div { background: #8e5bba; } div.text-item { margin: 0 0 30px 0; } html.phone div.text-item { margin-bottom: 25px; } div.text-item:last-child { margin-bottom: 0 !important; } div.text-item div.item-title { margin-bottom: 6px; } div.text-item div.item-title p { font-weight: 700px; color: #ff6898; } div.text-item div.item-line { display: inline-block; height: 2px; background: #ff6898; width: 40px; margin-bottom: 8px; } div.text-item p { margin: 0; padding: 0 !important; } div.small-container { width: 800px; text-align: left; margin: 0 auto; } div.small-container p { margin-left: 0; margin-right: 0; } div.medium-container { width: 900px; text-align: left; margin: 0 auto; } div.medium-container p { margin-left: 0; margin-right: 0; } div.smaller-text p { font-size: 14px; line-height: 24px; max-width: 800px; width: 100%; padding: 0; } h3 { font-size: 18px; line-height: 28px; font-weight: 500; margin: 50px 0 20px 0; } span.simple-avatar-description { line-height: 30px; font-size: 14px; color: #bfb9c7; display: inline-block; margin-right: 10px; } img.simple-avatar { vertical-align: top; border-radius: 100%; max-width: 30px; margin-right: 10px; } img.simple-avatar.small { max-width: 24px; margin: 0 4px; vertical-align: middle; } strong.simple-avatar-username { line-height: 30px; display: inline-block; font-size: 14px; font-weight: 500; } label.medium { margin: 10px 0 0 0; display: inline-block; line-height: 26px; font-size: 13px; color: #bfb9c7; cursor: pointer; } label.medium input { vertical-align: middle; margin-right: 7px; } div.no-results { text-align: center; padding: 20px 0 40px 0; } div.no-results i.big { font-size: 100px; line-height: 160px; color: #433952; } div.no-results h2 { padding: 0 0 30px 0; } /* login */ #login-html { top: 0; left: 0; right: 0; bottom: 0; z-index: 91; position: fixed; display: none; perspective: 2000px; overflow-x: hidden; } #login-html.right-side { top: 62px; left: auto; } #login-outer { top: 0; left: 0; right: 0; width: 100%; height: 100%; display: table; position: absolute; table-layout: fixed; } #login-inner { width: 100%; display: table-cell; vertical-align: top; text-align: center; vertical-align: middle; } #login-body { display: inline-block; margin: 40px; text-align: left; } #modal-html.right-side #modal-body { margin: 0; } #login-background { background: rgba(13, 11, 29, 0.9); z-index: 70; width: 100%; height: 100%; display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; } #login-modal { width: 900px; background: #2d284c; color: #fff; text-align: left; border-radius: 8px; position: relative; } #login-modal.login div.sign-up { display: none; } #login-modal.sign-up div.login { display: none; } #login-modal div.modal-padding { padding: 45px 64px; } #login-modal h3 { margin: -10px 0 0 0; padding: 0; font-weight: 800; font-size: 24px; line-height: 40px; color: #fff; display: block; } #login-modal p.subtitle { margin: 0; padding: 0; font-weight: 400; font-size: 16px; line-height: 24px; color: #b8b2d8; display: block; } #login-modal div.regular-spacing { height: 35px; } #login-modal div.irregular-spacing { height: 40px; } #login-modal div.small-spacing { height: 12px; } #login-modal div.flex-parent { display: flex; } #login-modal form { display: block; margin: 0; padding: 0; font-size: 0; line-height: 0; } #login-modal div.flex-child, #login-modal form.flex-child { flex: 1; } #login-modal a.btn-close { background: rgba(101, 91, 163, 0.25); color: #665f92; font-size: 18px; line-height: 34px; width: 34px; text-align: center; border-radius: 0 6px 6px 0; position: absolute; top: 10px; right: -34px; } #login-modal a.btn-close:hover { color: #9893bb; background: rgba(101, 91, 163, 0.5); } #login-modal span.no-emails { font-size: 11px; line-height: 28px; text-align: center; color: #6f6a90; display: block; margin: 8px 0 -4px; } html.phone #login-modal span.no-emails { font-size: 10px; margin: 4px 0 -4px; } #login-modal span.info-notice { font-size: 11px; line-height: 18px; text-align: center; color: #6f6a90; display: block; padding: 0 0 0 10px; max-width: 295px; margin: 14px auto 0 auto; } #login-modal span.info-notice i { margin-right: 4px; } html.phone #login-modal span.info-notice { font-size: 10px; line-height: 16px; margin: 10px auto 0 auto; max-width: 260px; padding-left: 0; } #login-modal div.red-background { background: #ff3674; background-image: url('../images/bg-red-hearts-pattern6.png'); background-repeat: repeat; background-position: center top; border-radius: 0 8px 8px 0; width: 360px; text-align: center; } #login-modal div.sign-up div.red-background { display: flex; align-items: center; } #login-modal div.sign-up div.red-background div.modal-padding { flex: 1; } #login-modal div.red-background p.subtitle { color: #ffd5e2; } #login-modal div.red-background p.list { color: #fff; font-weight: 500; font-size: 16px; line-height: 28px; margin-top: 28px; } #login-modal div.red-background i.large { font-size: 60px; line-height: 120px; margin-top: -30px; } a.btn-additional { float: left; margin: 11px 14px 0 0; /* 14px is for lower resolutions to add spacing */ font-weight: 500; font-size: 10px; line-height: 42px; display: inline-block; border-radius: 50px; border: 0; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; outline: none; color: #856efb; padding: 0 22px; box-shadow: inset 0 0 0 2px rgba(133, 110, 251, 0.5); } a.btn-additional.wide { width: 44%; text-align: center; font-size: 12px; font-weight: 700; color: #706892; box-shadow: inset 0 0 0 2px #4b466d; margin: 6px 0 0 0; line-height: 40px; } a.btn-additional:hover { background: #fff; color: #100c20; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 1), 0 14px 20px -10px rgba(0, 0, 0, 0.3); transform: translateY(-2px) translateZ(0); } html.mobile a.btn-additional:hover { background: transparent; color: #706892; box-shadow: inset 0 0 0 2px #4b466d; transform: none; } html.mobile a.btn-additional:active { background: #fff; color: #100c20; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 1), 0 14px 20px -10px rgba(0, 0, 0, 0.3); transform: translateY(-2px) translateZ(0); } div.sign-up a.btn-additional { font-weight: 500; font-size: 13px; } a.btn-thicc, button.btn-thicc { background: #fff; color: #100c20; width: 220px; padding: 20px 0; font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: 2px; text-align: center; text-transform: uppercase; display: inline-block; border-radius: 100px; border: 0; text-decoration: none; outline: none; } a.btn-thicc.disabled, button.btn-thicc.disabled { opacity: 0.5; } div.sign-up a.btn-thicc, div.sign-up button.btn-thicc { width: 300px; } a.btn-thicc.regular, button.btn-thicc.regular { font-size: 16px; font-weight: 500; text-transform: none; letter-spacing: 0; } a.btn-thicc.regular i, button.btn-thicc.regular i { font-size: 18px; vertical-align: middle; } a.btn-thicc.regular i.spacing-right, button.btn-thicc.regular i.spacing-right { margin-right: 6px; } a.btn-thicc.medium, button.btn-thicc.medium { width: 220px; padding: 16px 0; font-size: 14px; line-height: 20px; } a.btn-thicc.red, button.btn-thicc.red { background: #F73C78; color: #fff; } a.btn-thicc.dynamic { width: auto; padding-left: 50px; padding-right: 50px; } a.btn-thicc.spacing-right { margin-right: 20px; } a.btn-thicc.transparent, button.btn-thicc.transparent { background: transparent; color: rgba(255, 217, 212, 0.65); box-shadow: inset 0 0 0 2px rgba(255, 217, 212, 0.6); } a.btn-thicc.purple, button.btn-thicc.purple { background: #856efb; color: #fff; } a.btn-thicc.orange, button.btn-thicc.orange { background: #f96854; color: #fff; } a.btn-thicc.green, button.btn-thicc.green { background: #22c584; color: #fff; } a.btn-thicc.right, button.btn-thicc.right { float: right; } a.btn-thicc:hover, button.btn-thicc:hover { box-shadow: 0 20px 30px -14px rgba(0, 0, 0, 0.3); background: #fff; color: #100c20; transform: translateY(-4px) translateZ(0); } a.btn-thicc.patreon { padding: 20px 40px; width: 320px; line-height: 0; box-shadow: 0 0 0 0 rgba(249, 104, 84, 0.4); } a.btn-thicc.patreon:hover { background: #f96854; box-shadow: 0 10px 34px -18px rgba(249, 104, 84, 1); } /* modal-dark */ .modal-dark-html { top: 0; left: 0; right: 0; bottom: 0; z-index: 101; position: fixed; display: none; perspective: 2000px; overflow-x: hidden; } .modal-dark-outer { top: 0; left: 0; right: 0; width: 100%; height: 100%; display: table; position: absolute; table-layout: fixed; } .modal-dark-inner { width: 100%; display: table-cell; vertical-align: top; text-align: center; vertical-align: middle; } .modal-dark-body { display: inline-block; margin: 40px; text-align: left; } div.modal-dark-background { position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; left: 0; background: rgba(57, 53, 90, 0.5); background: rgba(29, 26, 53, 0.5); background: rgba(23, 20, 41, 0.8); display: none; opacity: 0; } div.modal-dark-html.on-top { z-index: 104; } div.modal-dark-background.on-top { z-index: 103; } .modal-dark-container { position: relative; } .modal-dark { width: 560px; background: #2d284c; color: #fff; text-align: left; border-radius: 15px; position: relative; box-shadow: 0 20px 45px -5px rgb(25, 21, 47); } .modal-dark.smaller { width: 500px; } .modal-dark div.modal-padding { padding: 45px 64px; } .modal-dark h3 { margin: 0 !important; padding: 0; font-weight: 700; font-size: 20px; line-height: 36px; color: #b8b2d8; display: block; } .modal-dark h3 i { line-height: 36px; vertical-align: top; width: 40px; } .modal-dark.smaller h3 { font-weight: 700; font-size: 18px; line-height: 30px; } .modal-dark.smaller h3 i { line-height: 30px; width: 30px; } .modal-dark div.spacing-half { height: 15px; } .modal-dark div.spacing { height: 30px; } .modal-dark div.header { padding: 20px 30px; } .modal-dark.smaller div.header { padding: 16px 30px; } .modal-dark div.header a.btn-ellipsis { font-size: 21px; line-height: 30px; padding: 0 0 0 10px; color: #b8b2d8; display: inline-block; vertical-align: top; float: right; } .modal-dark div.header a.btn-ellipsis i { line-height: 30px; vertical-align: top; } .modal-dark div.header a.btn-ellipsis i.fa-caret-down { font-size: 14px; margin-left: 8px; } .modal-dark div.header a.btn-ellipsis:hover { color: #fff; } html.mobile .modal-dark div.header a.btn-ellipsis:hover { color: #b8b2d8; } html.mobile .modal-dark div.header a.btn-ellipsis:active { color: #fff; } .modal-dark div.header a.btn-ellipsis.active { color: #fff; } .modal-dark div.content-container { position: relative; } .modal-dark div.content { border-radius: 15px; background: #201c3b; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-height: 500px; overflow-y: auto; padding: 16px 0; } .modal-dark.smaller div.content { border-radius: 8px; padding: 30px; } .modal-dark div.content::scrollbar { width: 4px; background: transparent; } .modal-dark div.content::-moz-scrollbar { width: 4px; background: transparent; } .modal-dark div.content::-webkit-scrollbar { width: 4px; background: transparent; } .modal-dark div.content::scrollbar-thumb { background: rgba(144, 64, 92, 0); transition: all 0.2s; } .modal-dark div.content::-moz-scrollbar-thumb { background: rgba(144, 64, 92, 0); -moz-transition: all 0.2s; } .modal-dark div.content::-webkit-scrollbar-thumb { background: rgba(144, 64, 92, 0); -webkit-transition: all 0.2s; } html.mobile .modal-dark div.content::scrollbar-thumb, .modal-dark div.content:hover::scrollbar-thumb { background: #433d6b; } html.mobile .modal-dark div.content::-moz-scrollbar-thumb, .modal-dark div.content:hover::-moz-scrollbar-thumb { background: #433d6b; } html.mobile .modal-dark div.content::-webkit-scrollbar-thumb, .modal-dark div.content:hover::-webkit-scrollbar-thumb { background: #433d6b; } .modal-dark div.content div.shadow-top, .modal-dark div.content div.shadow-bottom { background: -moz-linear-gradient(top, rgba(32,28,59,0) 0%, rgba(32,28,59,1) 100%); background: -webkit-linear-gradient(top, rgba(32,28,59,0) 0%,rgba(32,28,59,1) 100%); background: linear-gradient(to bottom, rgba(32,28,59,0) 0%,rgba(32,28,59,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00201c3b', endColorstr='#201c3b',GradientType=0 ); height: 32px; position: absolute; bottom: 0; left: 10px; right: 10px; pointer-events: none; border-radius: 15px; } .modal-dark div.content div.shadow-top { background: -moz-linear-gradient(top, rgba(32,28,59,1) 0%, rgba(32,28,59,0) 100%); background: -webkit-linear-gradient(top, rgba(32,28,59,1) 0%,rgba(32,28,59,0) 100%); background: linear-gradient(to bottom, rgba(32,28,59,1) 0%,rgba(32,28,59,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#201c3b', endColorstr='#00201c3b',GradientType=0 ); bottom: auto; top: 0; border-radius: 8px; } .modal-dark div.content:hover div.shadow-top, .modal-dark div.content:hover div.shadow-bottom { opacity: 0; } html.mobile .modal-dark div.content:hover div.shadow-top, html.mobile .modal-dark div.content:hover div.shadow-bottom { opacity: 1; } html.mobile .modal-dark div.content:active div.shadow-top, html.mobile .modal-dark div.content:active div.shadow-bottom { opacity: 0; } .modal-dark-container a.btn-close { color: rgba(255, 255, 255, 0.86); background: rgba(231, 63, 103, 0.8); color: rgba(255, 255, 255, 0.7); background: rgba(231, 63, 103, 0.7); font-size: 18px; line-height: 52px; width: 46px; padding-right: 3px; text-align: center; border-radius: 0 60px 60px 0; position: absolute; top: 15px; right: -46px; } .modal-dark-container a.btn-close:hover { background: #fff; color: #2d284c; } html.mobile .modal-dark-container a.btn-close:hover { color: rgba(255, 255, 255, 0.7); background: rgba(231, 63, 103, 0.7); } html.mobile .modal-dark-container a.btn-close:active { background: #fff; color: #2d284c; } .modal-dark-container a.btn-close i.fa-close { display: inline-block; } .modal-dark-container a.btn-close i.fa-chevron-down { display: none; } .modal-dark a.btn-create-collection { background: #25a879; color: rgba(255, 255, 255, 0.86); /*text-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);*/ font-size: 21px; line-height: 34px; width: 60px; text-align: center; border-radius: 16px 16px 100px 100px; position: absolute; top: -5px; right: 30px; padding: 26px 0 8px 0; } .modal-dark a.btn-create-collection:hover { background: #fff; color: #2d284c; } html.mobile .modal-dark a.btn-create-collection:hover { background: #25a879; color: rgba(255, 255, 255, 0.86); } html.mobile .modal-dark a.btn-create-collection:active { background: #fff; color: #2d284c; } .modal-dark div.item { padding: 4px 30px; cursor: pointer; display: table; width: 100%; outline: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .modal-dark div.item:hover { box-shadow: inset 3px 0 0 #fff; } html.mobile .modal-dark div.item:hover { box-shadow: inset 3px 0 0 transparent; } html.mobile .modal-dark div.item:active { box-shadow: inset 3px 0 0 #fff; } .modal-dark div.item div.checkmark { display: table-cell; vertical-align: top; width: 40px; padding: 10px 0; } .modal-dark div.item div.checkmark div { width: 20px; height: 20px; border-radius: 3px; box-shadow: inset 0 0 0 3px #6b6592; box-shadow: inset 0 0 0 3px #7a7794; display: inline-block; } .modal-dark div.item div.checkmark div i { opacity: 0; color: #201c3b; font-size: 14px; line-height: 20px; width: 20px; text-align: center; vertical-align: top; } .modal-dark div.item:hover div.checkmark div { box-shadow: inset 0 0 0 3px #fff; } html.mobile .modal-dark div.item:hover div.checkmark div { box-shadow: inset 0 0 0 3px #7a7794; } html.mobile .modal-dark div.item:active div.checkmark div { box-shadow: inset 0 0 0 3px #fff; } .modal-dark div.item.checked div.checkmark div { background: #fff; box-shadow: inset 0 0 0 3px #fff !important; } .modal-dark div.item.checked div.checkmark div i { opacity: 1; } .modal-dark div.item h4 { margin: 0; padding: 0; font-weight: 500; font-size: 18px; line-height: 40px; color: #fff; display: table-cell; vertical-align: top; width: auto; max-width: 1px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; word-break: break-all; word-wrap: break-word; } .modal-dark div.item h4.favorites { color: #ffce81; } .modal-dark div.item h4 a.btn-add-note { display: inline-block; vertical-align: middle; font-size: 10px; line-height: 26px; text-transform: uppercase; background: rgba(222, 69, 111, 0.3); background: #59284a; color: #e0a1b2; border-radius: 4px; padding: 0 10px; margin: 0 0 0 10px; z-index: 6; } .modal-dark div.item h4 a.btn-add-note i { margin-right: 6px; vertical-align: top; line-height: 26px; } .modal-dark div.item h4 a.btn-add-note:hover { background: rgba(222, 69, 111, 0.9); color: #fff; } html.mobile .modal-dark div.item h4 a.btn-add-note:hover { background: #59284a; color: #e0a1b2; } html.mobile .modal-dark div.item h4 a.btn-add-note:active { background: rgba(222, 69, 111, 0.9); color: #fff; } .modal-dark div.item div.amount { display: table-cell; vertical-align: top; width: 1%; text-align: right; font-size: 18px; line-height: 40px; font-weight: 700; color: #6f6a90; padding-left: 20px; } @media only screen and (max-width: 800px) { div.modal-dark-background { background: rgba(29, 26, 53, 0.5); } .modal-dark-inner { vertical-align: bottom; /*padding: 0 10px;*/ overflow: hidden; } .modal-dark-body { display: block; margin: 0; } .modal-dark { width: 100%; border-radius: 8px; box-shadow: 0 0 15px -5px rgb(25, 21, 47), 0 -30px 35px -5px rgba(25, 21, 47, 0.6); } .modal-dark.smaller { width: 100%; } .modal-dark div.content { padding: 12px 0; border-radius: 8px; max-height: 300px; } .modal-dark.smaller div.content { border-radius: 8px 8px 0 0; max-height: 400px; padding: 20px; } .modal-dark-container a.btn-close { display: block; width: 100px; height: 60px; line-height: 60px; border-radius: 100px; position: static; margin: -10px auto -10px auto; color: rgba(255, 255, 255, 0.86); background: rgba(231, 63, 103, 0.9); width: 100%; border-radius: 0; } .modal-dark-container a.btn-close:hover { background: #fff; } html.mobile .modal-dark-container a.btn-close:hover { color: rgba(255, 255, 255, 0.86); background: rgba(231, 63, 103, 0.9); } html.mobile .modal-dark-container a.btn-close:active { background: #fff; color: #201c3b; } .modal-dark-container a.btn-close i.fa-close { display: none; } .modal-dark-container a.btn-close i.fa-chevron-down { display: inline-block; } .modal-dark div.header, .modal-dark.smaller div.header { padding: 14px 20px; } .modal-dark h3, .modal-dark.smaller h3 { font-size: 16px; line-height: 30px; } .modal-dark h3 i { font-size: 18px; line-height: 30px; width: 32px; } .modal-dark a.btn-create-collection { font-size: 16px; line-height: 34px; width: 46px; border-radius: 22px 22px 100px 100px; right: 20px; padding: 18px 0 2px 0; } .modal-dark div.item { padding: 4px 20px; } .modal-dark div.item div.checkmark { width: 32px; padding: 9px 0; } .modal-dark div.item div.checkmark div { width: 18px; height: 18px; } .modal-dark div.item div.checkmark div i { font-size: 12px; line-height: 18px; width: 18px; } .modal-dark div.item h4 { font-size: 16px; line-height: 36px; } .modal-dark div.item h4 a.btn-add-note { line-height: 24px; margin: 0 0 0 10px; font-size: 9px; } .modal-dark div.item h4 a.btn-add-note i { line-height: 24px; } .modal-dark div.item div.amount { font-size: 16px; line-height: 36px; } .modal-dark div.content div.shadow-top, .modal-dark div.content div.shadow-bottom { height: 28px; border-radius: 8px; } .modal-dark div.spacing-half { height: 10px; } .modal-dark div.spacing { height: 20px; } .modal-dark button.btn-thicc { display: block; width: 100%; padding: 14px 0; font-size: 12px; } .modal-dark a.btn-additional { display: block; margin: 0; text-align: center; float: none; width: 100%; letter-spacing: 2px; margin-top: 10px; font-size: 11px; } h2 i.visible-when-smaller { display: inline-block; } h2.align-left-when-smaller { text-align: left; } } input.dark, textarea.dark { background: #201c3b; border: 0; border-radius: 6px; color: #b8b2d8; display: block; width: 100%; padding: 14px 58px 14px 24px; font-weight: 500; font-size: 16px; line-height: 30px; outline: none; resize: none; margin: 0; } textarea.dark { font-weight: 400; } input.darker, textarea.darker { background: #17142c; } input.dark[type=password] { letter-spacing: 3px; } input.dark.normal-padding, textarea.dark.normal-padding { padding: 14px 24px; } input.dark.large-text { font-size: 20px; } input.dark.small-text, textarea.small-text { font-size: 14px; line-height: 26px; } textarea.dark.big-field { height: 106px; } input.dark::-webkit-input-placeholder, textarea.dark::-webkit-input-placeholder { color: #706892; letter-spacing: 0; } input.dark:-ms-input-placeholder, textarea.dark:-ms-input-placeholder { color: #706892; letter-spacing: 0; } input.dark:placeholder-shown, textarea.dark:placeholder-shown { color: #706892; letter-spacing: 0; } input.dark:-moz-placeholder, textarea.dark:-moz-placeholder { color: #706892; opacity: 1; letter-spacing: 0; } input.dark::-moz-placeholder, textarea.dark::-moz-placeholder { color: #706892; opacity: 1; letter-spacing: 0; } input.dark:focus, textarea.dark:focus { border-radius: 0 6px 6px 0; box-shadow: inset 3px 0 0 0 #856efb; } input.dark + i { font-size: 24px; line-height: 58px; width: 58px; text-align: center; vertical-align: middle; float: right; margin-top: -58px; color: #463e66; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } input.dark:focus + i { color: #856efb; } input.dark + i.fa-check { color: #5accc2; } input.dark + i.fa-times { color: #ea404e; } input.dark.icon-left + i { float: left; } @media only screen and (max-width: 1000px) { html.loginModal { overflow-y: hidden; } #login-modal { width: 100%; } #login-modal div.flex-parent { display: block; } #login-modal div.red-background { border-radius: 0 0 8px 8px; width: 100%; margin-top: 10px; } } @media only screen and (max-width: 640px) { #login-body { display: block; } a.btn-additional { display: block; margin: 0; text-align: center; float: none; } #login-modal a.btn-thicc, #login-modal button.btn-thicc { display: block; width: 100%; } #login-modal a.btn-thicc + a.btn-additional, #login-modal button.btn-thicc + a.btn-additional { margin-top: 14px; } } @media only screen and (max-width: 500px) { #login-body { margin: 20px; display: block; } #login-modal div.modal-padding { padding: 24px 30px; } #login-modal h3 { margin: -6px 0 0 0; font-size: 20px; line-height: 34px; } #login-modal p.subtitle { font-size: 13px; line-height: 22px; } #login-modal div.regular-spacing { height: 25px; } #login-modal div.irregular-spacing { height: 30px; } #login-modal div.red-background p.list { font-size: 14px; line-height: 26px; margin-top: 20px; padding: 0; } #login-modal a.btn-close { border-radius: 0 6px 0 6px; top: 0; right: 0; line-height: 46px; width: 46px; font-size: 21px; } input.dark, textarea.dark { padding: 14px 40px 14px 20px; font-size: 13px; } input.dark.large-text { font-size: 16px; } input.dark.normal-padding, textarea.dark.normal-padding { padding: 14px 20px; } a.btn-thicc, button.btn-thicc { font-size: 15px; } } /* modal */ #modal-html { top: 0; left: 0; right: 0; bottom: 0; z-index: 60; position: fixed; display: none; perspective: 2000px; overflow-x: hidden; } #modal-html.right-side { top: 62px; left: auto; } #modal-outer { top: 0; left: 0; right: 0; width: 100%; height: 100%; display: table; position: absolute; table-layout: fixed; } #modal-inner { width: 100%; display: table-cell; vertical-align: top; text-align: center; vertical-align: middle; } #modal-body { display: inline-block; margin: 40px; text-align: left; } #modal-html.right-side #modal-body { margin: 0; } #modal-background { background: rgba(25, 22, 33, 0.3); z-index: 55; width: 100%; height: 100%; display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; opacity: 0; } #white-modal { min-width: 660px; max-width: 700px; background: #fff; color: #444; box-shadow: 0 15px 80px 0 rgba(0,0,0,.15), 0 3px 8px 0 rgba(0,0,0,.15); padding: 30px; text-align: left; border-radius: 5px; position: relative; } #white-modal.compact { min-width: 500px; max-width: 540px; } #modal-html.right-side #white-modal { border-radius: 0; min-width: auto; max-width: none; } #white-modal i.huge { line-height: 160px; font-size: 100px; color: #c9c8d0; margin-bottom: 10px; } html.phone #white-modal i.huge { line-height: 100px; font-size: 60px; } html.phone #white-modal input.small { font-size: 11px; } #white-modal a.btn-close { display: block; position: absolute; top: 0; right: 0; width: 40px; height: 40px; opacity: 0.4; line-height: 40px; text-align: center; font-size: 21px; color: #444; } #white-modal a.btn-close:hover { opacity: 1; } #white-modal div.title { font-size: 20px; font-weight: 500; color: #444; line-height: 32px; margin-bottom: 30px; text-align: center; } #white-modal div.title.with-subtitle { margin-bottom: 8px; } #white-modal p.subtitle { font-size: 14px; line-height: 24px; text-align: center; margin-bottom: 30px; color: #7b7a87; max-width: 500px; } #white-modal div.small-title { font-size: 14px; font-weight: 500; color: #444; line-height: 16px; text-align: left; } #white-modal div.small-title.margin-bottom { margin-bottom: 6px; } #white-modal div.small-title i { color: #c3bdcc; margin-left: 6px; } #white-modal table { text-align: left; } #white-modal table td { padding: 0 0 30px 0; } #white-modal table tr.padding-top td { padding-top: 10px; } #white-modal table tr.less-padding-bottom td { padding-bottom: 10px; } #white-modal table tr.no-padding-bottom td { padding-bottom: 0; } #white-modal table td span.title { font-weight: 500; font-size: 14px; display: block; padding-right: 10px; text-align: right; white-space: nowrap; } #white-modal table td span.title i { display: inline-block; padding: 0 4px; } #white-modal table td div.options a, #white-modal table td div.options div { background: #e5def3; color: #726286; font-size: 13px; padding: 8px 14px; margin: 3px; } #white-modal table td div.options a:hover, #white-modal table td div.options div:hover, #white-modal table td div.options a.active, #white-modal table td div.options div.active { background: #a670d6; color: #fff; } #white-modal .spacing-top { margin-top: 30px !important; } #white-modal .spacing-top-medium { margin-top: 20px !important; } #white-modal .spacing-top-small { margin-top: 10px !important; } #white-modal div.auto-adjust { margin-top: 30px; } #white-modal div.clear { height: 30px; } div.comments { margin-right: -30px; } div.comment-box { min-height: 66px; margin-top: 20px; } div.comment-box.first { border-top: 1px solid #f1f2f7; border-top:0;margin-top:0; } div.comment-box div.avatar { padding-top: 20px; float: left; width: 66px; text-align: left; } div.comment-box div.avatar a { position: relative; } div.comment-box div.avatar img { border-radius: 100%; max-width: 50px; } div.comment-box div.message { padding-top: 18px; padding-right: 30px; margin-left: 66px; border-top: 1px solid #f1f2f7; } div.comment-box div.message span.username { font-size: 18px; line-height: 20px; display: inline-block; font-weight: 500; color: #444; } div#white-modal div.comment-box div.message span.username { font-size: 16px; } div.comment-box div.message a span.username { color: #F73C78; border-bottom: 1px dotted transparent; } div.comment-box div.message a:hover span.username { color: #cf0043; border-color: rgba(207, 0, 67, 0.2); } div.comment-box div.message span.time { color: #c3c1c8; font-size: 12px; line-height: 20px; display: inline-block; margin-left: 12px; } div.comment-box div.message p { font-size: 15px; line-height: 24px; color: #444; margin-top: 4px; word-wrap: break-word; } div#white-modal div.comment-box div.message p { font-size: 14px; line-height: 22px; } div.comment-box div.message textarea { margin-top: 6px; } div.comment-box div.message textarea + div.auto-adjust { margin-top: 6px !important; } div.comment-box div.message a.rounded-btn { margin-top: 6px; margin-left: 60%; width: 40%; } div.comment-box a.btn-delete-feedback, div.comment-box a.btn-fix-feedback { float: right; font-size: 18px; line-height: 20px; color: #c3c1c8; display: inline-block; } div.comment-box a.btn-delete-feedback:hover { color: #F73C78; } div.comment-box a.btn-fix-feedback:hover { color: #6ccb9b; } div.comment-box a.btn-fix-feedback { margin-right: 15px; } div.comment-box span.fixed { display: inline-block; margin-left: 12px; line-height: 20px; font-size: 11px; text-transform: uppercase; padding: 0 8px; border-radius: 3px; background: #e6f9f3; color: #98b3aa; } div.comment-box i.uploader { display: inline-block; margin-left: 6px; color: #f7b297; font-size: 14px; } div.colored-container div.comment-box { padding-left: 100px; } div.colored-container div.comment-box div.roulette-image { margin-left: -100px; position: absolute; } div.colored-container div.comment-box div.roulette-image a { width: 70px; height: 70px; background-size: cover; background-position: center center; display: inline-block; border-radius: 5px; } div.colored-container div.comment-box div.roulette-image a:hover { opacity: 0.7; } div.colored-container div.comment-box { margin-top: 0; min-height: 70px; } div.colored-container div.comment-box i.uploader { color: #d0b1b1; } div.colored-container div.comment-box div.avatar { width: 86px; padding-top: 0; } div.colored-container div.comment-box div.message { margin-left: 86px; padding-top: 0; border-top: 0; } div.colored-container div.comment-box div.avatar img { max-width: 70px !important; } div.colored-container div.comment-box div.message span.username { color: #fff; } div.colored-container div.comment-box div.message a span.username { color: #F73C78; border-bottom: 1px dotted transparent; } div.colored-container div.comment-box div.message a:hover span.username { color: #ff6c9c; border-color: rgba(255, 84, 139, 0.2); } div.colored-container div.comment-box div.message span.time { color: #8e8896; } div.colored-container div.comment-box div.message p { color: #bfb9c7; } div.colored-container div.comment-box span.fixed { background: #644a71; color: #c2b0cc; } html.phone div.colored-container div.comment-box { padding-left: 0; min-height: 116px; } html.phone div.colored-container div.comment-box div.roulette-image { margin-left: 0; margin-top: 66px; } html.phone div.colored-container div.comment-box div.roulette-image a { width: 50px; height: 50px; } html.phone div.colored-container div.comment-box div.avatar img { max-width: 50px !important; } html.phone div.colored-container div.comment-box div.avatar { width: 66px; } html.phone div.colored-container div.comment-box div.message { margin-left: 66px; padding-right: 0; } html.phone div.small-container.colored-container.normal-padding { padding: 30px; } html.phone div.small-container.colored-container.text-padding { padding: 25px; } html.phone div.medium-container.colored-container.normal-padding { padding: 30px; } div.highlighted-buttons { margin-top: 30px; } div.btn-highlight { width: 34%; display: inline-block; } div.btn-highlight:nth-child(1) { padding-right: 30px; } div.btn-highlight:nth-child(2) { width: 32%; } div.btn-highlight:nth-child(3) { padding-left: 30px; } div.btn-highlight:nth-child(1) a.btn-highlight { background-image: url('../images/btn-blur2.jpg'); } div.btn-highlight:nth-child(2) a.btn-highlight { background-image: url('../images/btn-blur1.jpg'); } div.btn-highlight:nth-child(3) a.btn-highlight { background-image: url('../images/btn-blur3.jpg'); } a.btn-highlight { display: block; position: relative; height: 120px; background: #ddd; background-size: cover; background-position: center center; border-radius: 10px; color: #fff; text-align: left; opacity: 0.9; } a.btn-highlight:hover { opacity: 1; } div.btn-highlight:nth-child(1) a.btn-highlight:hover { box-shadow: 0 10px 34px -18px rgba(76, 100, 203, 1); } div.btn-highlight:nth-child(2) a.btn-highlight:hover { box-shadow: 0 10px 34px -18px rgba(233, 137, 54, 1); } div.btn-highlight:nth-child(3) a.btn-highlight:hover { box-shadow: 0 10px 34px -18px rgba(126, 79, 177, 1); } a.btn-highlight i { font-size: 36px; line-height: 60px; width: 60px; text-align: center; display: inline-block; position: absolute; top: 0; right: 0; opacity: 0.3; color: rgba(0, 0, 0, 0.25); } a.btn-highlight span { font-size: 50px; line-height: 56px; font-weight: 300; display: inline-block; position: absolute; left: 20px; bottom: 16px; } a.btn-highlight span.wide { display: block; } a.btn-highlight span.small { display: none; } a.btn-highlight strong { font-size: 16px; line-height: 22px; font-weight: 500; display: block; } div.collection-box { background: #2a1c39; border-radius: 10px; padding: 64px 40px 40px 40px; position: relative; } div.collection-box + div.collection-box { margin-top: 30px; } div.collection-box div.details { margin-right: 320px; } div.collection-box h2 { font-size: 30px; line-height: 38px; color: #fff; margin: 0; padding: 0; } div.collection-box div.stats { font-size: 11px; line-height: 32px; padding: 0 14px 0 40px; color: #625173; font-weight: 500; background: #332344; position: absolute; border-radius: 0 0 8px 8px; top: 0; display: inline-block; margin-left: -40px; background: -moz-linear-gradient(left, rgba(42, 28, 57, 0) 0%, rgb(51, 35, 68) 100%); background: -webkit-linear-gradient(left, rgba(42, 28, 57, 0) 0%,rgb(51, 35, 68) 100%); background: linear-gradient(to right, rgba(42, 28, 57, 0) 0%,rgb(51, 35, 68) 100%); } div.collection-box div.stats i { margin-right: 2px; font-size: 13px; line-height: 32px; vertical-align: top; } div.collection-box div.stats span.item { white-space: nowrap; } div.collection-box div.stats span.sep { display: inline-block; margin: 0 8px; opacity: 0.5; } div.collection-box div.short-line { width: 50px; height: 3px; background: rgba(115, 97, 133, 0.42); margin: 0 0 20px 0; } div.collection-box p { padding: 5px 0 0 0; margin: 0; font-size: 18px; line-height: 30px; } div.collection-box div.spacing { height: 35px; height: 40px; } div.collection-box a.btn-thicc { margin-left: -44px; border-radius: 6px 40px 40px 6px; text-align: left; padding-left: 46px; width: 200px; } div.collection-box a.btn-thicc i.material-icons { vertical-align: middle; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); line-height: 20px; margin-left: 40px; } div.collection-box div.thumbnails { width: 300px; position: absolute; top: 0; right: 0; bottom: 0; background: #241731; padding: 20px; border-radius: 0 10px 10px 0; } div.collection-box div.thumbnails div.bottom-shadow { background: -moz-linear-gradient(top, rgba(36, 23, 49,0) 0%, rgba(36, 23, 49,1) 100%); background: -webkit-linear-gradient(top, rgba(36, 23, 49,0) 0%,rgba(36, 23, 49,1) 100%); background: linear-gradient(to bottom, rgba(36, 23, 49,0) 0%,rgba(36, 23, 49,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00241731', endColorstr='#241731',GradientType=0 ); height: 60%; position: absolute; bottom: 0; left: 0; right: 0; pointer-events: none; z-index: 2; border-radius: 10px; } div.collection-box div.thumbnails div.roulettes { display: flex; height: 100%; position: relative; } div.collection-box div.thumbnails div.roulette div { background-size: cover; border-radius: 3px; background-position: center top; width: 100%; height: 100%; } div.collection-box div.thumbnails.count-0 { border-radius: 3px; overflow: hidden; } div.collection-box div.thumbnails.count-0 div.roulettes { background: #322342; display: table; width: 100%; height: 100%; } div.collection-box div.thumbnails i.empty { width: 100%; height: 100%; background: #322342; color: #58466b; background: #1d112b; color: #48375a; font-size: 50px; line-height: normal; text-align: center; vertical-align: middle; display: table-cell; } div.collection-box div.thumbnails.count-1 div.roulette { height: 100%; flex-grow: 1; } div.collection-box div.thumbnails.count-2 div.roulette { height: 100%; flex-grow: 1; padding: 0 5px; } div.collection-box div.thumbnails.count-2 div.roulette:first-child { padding-left: 0; } div.collection-box div.thumbnails.count-2 div.roulette:last-child { padding-right: 0; } div.collection-box div.thumbnails.count-3 div.roulettes { display: block; } div.collection-box div.thumbnails.count-3 div.roulette { width: 50%; height: 50%; margin: 0; display: inline-block; } div.collection-box div.thumbnails.count-3 div.roulette:first-child { height: 100%; width: 50%; display: inline-block; padding-right: 5px; } div.collection-box div.thumbnails.count-3 div.roulette:nth-child(2) { position: absolute; top: 0; right: 0; padding: 0 0 5px 5px; } div.collection-box div.thumbnails.count-3 div.roulette:last-child { position: absolute; bottom: 0; right: 0; padding: 5px 0 0 5px; } div.collection-box div.thumbnails.count-4 div.roulettes { flex-wrap: wrap; } div.collection-box div.thumbnails.count-4 div.roulette { height: 50%; width: 50%; flex-grow: 1; } div.collection-box div.thumbnails.count-4 div.roulette:first-child { padding: 0 5px 5px 0; } div.collection-box div.thumbnails.count-4 div.roulette:nth-child(2) { padding: 0 0 5px 5px; } div.collection-box div.thumbnails.count-4 div.roulette:nth-child(3) { padding: 5px 5px 0 0; } div.collection-box div.thumbnails.count-4 div.roulette:last-child { padding: 5px 0 0 5px; } div.collection-box div.thumbnails.count-5 div.roulettes { flex-wrap: wrap; } div.collection-box div.thumbnails.count-5 div.roulette { height: 50%; width: 50%; flex-grow: 1; } div.collection-box div.thumbnails.count-5 div.roulette:first-child { padding: 0 5px 5px 0; } div.collection-box div.thumbnails.count-5 div.roulette:nth-child(2) { padding: 0 0 5px 5px; } div.collection-box div.thumbnails.count-5 div.roulette:nth-child(3) { padding: 5px 5px 0 0; width: 33%; width: 33.3%; } div.collection-box div.thumbnails.count-5 div.roulette:nth-child(4) { padding: 5px 5px 0 5px; width: 33%; width: 33.3%; } div.collection-box div.thumbnails.count-5 div.roulette:last-child { padding: 5px 0 0 5px; width: 33%; width: 33.3%; } @media only screen and (max-width: 820px) { div.collection-box { padding: 60px 40px 0 40px; } div.collection-box div.details { margin-right: 0; } div.collection-box div.stats { height: 30px; } div.collection-box div.spacing { height: 30px; } div.collection-box div.thumbnails { position: relative; height: 350px; width: auto; margin: 0 -40px 0 -40px; padding: 40px 40px 66px 40px; /* 66px = until half the button */ border-radius: 0 0 10px 10px; } div.collection-box div.thumbnails div.bottom-shadow { border-radius: 10px; bottom: 66px; } div.collection-box a.btn-thicc { border-radius: 40px; margin: 40px auto 0 auto; text-align: center; padding: 16px 60px; width: auto; display: inline-block; position: absolute; width: 300px; bottom: 40px; z-index: 3; left: 50%; margin: 0 0 0 -150px; } div.collection-box a.btn-thicc i.material-icons { margin-left: 12px; } } html.phone div.wide-container.collections { padding: 5px 10px 60px 10px; } html.phone div.wide-container.normal { padding: 0 10px; } html.phone div.collection-box { padding: 42px 20px 0 20px; } html.phone div.collection-box + div.collection-box { margin-top: 10px; } html.phone div.collection-box h2 { font-size: 20px; line-height: 30px; padding: 0; margin: 0; } html.phone div.collection-box p.description { padding: 0; margin: 0; } html.phone div.collection-box div.spacing { height: 22px; } html.phone div.collection-box div.thumbnails { height: 350px; margin: 0 -20px 0 -20px; padding: 20px 20px 46px 20px; } html.phone div.collection-box div.thumbnails div.bottom-shadow { bottom: 46px; } html.phone div.collection-box a.btn-thicc { padding: 16px 60px; margin: 0; width: 70%; left: 15%; } html.phone div.collection-box div.stats { background: transparent; top: 4px; font-size: 10px; } html.phone div.collection-box div.stats i { font-size: 13px; } /*div.wide-container.collections { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; align-content: flex-start; }*/ div.collection-box-container { display: inline-block; width: 50%; padding: 15px; } div.collection-box-container:nth-child(1), div.collection-box-container:nth-child(2) { padding-top: 0 !important; } div.collection-box-container:nth-child(odd) { padding-left: 0 !important; } div.collection-box-container:nth-child(even) { padding-right: 0 !important; } a.collection-box { display: block; background: #2a1c39; border-radius: 10px; position: relative; height: 400px; } a.collection-box:hover { background: #362548; box-shadow: 0 0 0 3px #1d112b, 0 0 0 8px rgba(255, 54, 116, 0.3); } a.collection-box div.details { z-index: 3; position: absolute; display: table; width: 100%; height: 100%; } a.collection-box div.bottom { display: table-cell; vertical-align: bottom; padding: 30px; } a.collection-box h2 { font-size: 24px !important; line-height: 32px !important; color: #fff; margin: 0 !important; padding: 0 !important; } a.collection-box p { padding: 5px 0 0 0 !important; margin: 0 !important; font-size: 14px !important; line-height: 24px !important; } a.collection-box div.stats { color: #625173; font-weight: 500; margin: 0; font-size: 14px; line-height: 24px; } a.collection-box div.stats i { margin-right: 1px; font-size: 18px; line-height: 24px; vertical-align: top; } a.collection-box div.stats span.item { white-space: nowrap; } a.collection-box div.stats span.sep { display: inline-block; margin: 0 8px; opacity: 0; } a.collection-box div.line { width: 60px; height: 4px; background: rgba(255, 54, 116, 0.9); margin: 20px 0 24px 0; } a.collection-box div.thumbnails { padding: 10px; position: absolute; height: 100%; width: 100%; background: transparent; } a.collection-box div.thumbnails div.bottom-shadow, a.collection-box div.thumbnails div.bottom-shadow2, a.collection-box div.thumbnails div.bottom-shadow3 { background: -moz-linear-gradient(top, rgba(36, 23, 49,0) 0%, rgba(36, 23, 49,1) 100%); background: -webkit-linear-gradient(top, rgba(36, 23, 49,0) 0%,rgba(36, 23, 49,1) 100%); background: linear-gradient(to bottom, rgba(36, 23, 49,0) 0%,rgba(36, 23, 49,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00241731', endColorstr='#241731',GradientType=0 ); background: -moz-linear-gradient(top, rgba(42, 28, 57,0) 0%, rgba(36, 24, 51,1) 100%); background: -webkit-linear-gradient(top, rgba(42, 28, 57,0) 0%,rgba(36, 24, 51,1) 100%); background: linear-gradient(to bottom, rgba(42, 28, 57,0) 0%,rgba(36, 24, 51,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002a1c39', endColorstr='#2a1c39',GradientType=0 ); height: 100%; position: absolute; bottom: 0; left: 0; right: 0; pointer-events: none; z-index: 2; border-radius: 10px; } a.collection-box div.thumbnails div.bottom-shadow2 { height: 90%; } a.collection-box div.thumbnails div.bottom-shadow3 { height: 60%; opacity: 0.6; } a.collection-box div.thumbnails div.roulettes { display: flex; height: 100%; position: relative; } a.collection-box div.thumbnails div.roulette div { background-size: cover; border-radius: 3px; background-position: center top; width: 100%; height: 100%; } a.collection-box div.thumbnails div.roulette div div { background: rgba(122, 22, 162, 0.2); } a.collection-box div.thumbnails.count-0 { border-radius: 3px; overflow: hidden; } a.collection-box div.thumbnails.count-0 div.roulettes { display: table; width: 100%; height: 100%; border-radius: 6px; } a.collection-box div.thumbnails i.empty { width: 100%; height: 100%; background: #1d112b; color: #48375a; font-size: 50px; line-height: normal; text-align: center; vertical-align: middle; display: table-cell; border-radius: 6px; } a.collection-box div.thumbnails.count-1 div.roulette { height: 100%; flex-grow: 1; } a.collection-box div.thumbnails.count-2 div.roulette { height: 100%; flex-grow: 1; padding: 0 5px; } a.collection-box div.thumbnails.count-2 div.roulette:first-child { padding-left: 0; } a.collection-box div.thumbnails.count-2 div.roulette:last-child { padding-right: 0; } a.collection-box div.thumbnails.count-3 div.roulettes { display: block; } a.collection-box div.thumbnails.count-3 div.roulette { width: 50%; height: 50%; margin: 0; display: inline-block; } a.collection-box div.thumbnails.count-3 div.roulette:first-child { height: 100%; width: 50%; display: inline-block; padding-right: 5px; } a.collection-box div.thumbnails.count-3 div.roulette:nth-child(2) { position: absolute; top: 0; right: 0; padding: 0 0 5px 5px; } a.collection-box div.thumbnails.count-3 div.roulette:last-child { position: absolute; bottom: 0; right: 0; padding: 5px 0 0 5px; } a.collection-box div.thumbnails.count-4 div.roulettes { flex-wrap: wrap; } a.collection-box div.thumbnails.count-4 div.roulette { height: 50%; width: 50%; flex-grow: 1; } a.collection-box div.thumbnails.count-4 div.roulette:first-child { padding: 0 5px 5px 0; } a.collection-box div.thumbnails.count-4 div.roulette:nth-child(2) { padding: 0 0 5px 5px; } a.collection-box div.thumbnails.count-4 div.roulette:nth-child(3) { padding: 5px 5px 0 0; } a.collection-box div.thumbnails.count-4 div.roulette:last-child { padding: 5px 0 0 5px; } a.collection-box div.thumbnails.count-5 div.roulettes { flex-wrap: wrap; } a.collection-box div.thumbnails.count-5 div.roulette { height: 50%; width: 50%; flex-grow: 1; } a.collection-box div.thumbnails.count-5 div.roulette:first-child { padding: 0 5px 5px 0; } a.collection-box div.thumbnails.count-5 div.roulette:nth-child(2) { padding: 0 0 5px 5px; } a.collection-box div.thumbnails.count-5 div.roulette:nth-child(3) { padding: 5px 5px 0 0; width: 33%; width: 33.3%; } a.collection-box div.thumbnails.count-5 div.roulette:nth-child(4) { padding: 5px 5px 0 5px; width: 33%; width: 33.3%; } a.collection-box div.thumbnails.count-5 div.roulette:last-child { padding: 5px 0 0 5px; width: 33%; width: 33.3%; } @media only screen and (max-width: 900px) { a.collection-box { height: 350px; } a.collection-box h2 { font-size: 20px !important; line-height: 28px !important; } a.collection-box p { padding: 4px 0 0 0 !important; font-size: 13px !important; line-height: 22px !important; } a.collection-box div.stats { font-size: 12px; line-height: 20px; } a.collection-box div.stats i { font-size: 14px; line-height: 20px; } a.collection-box div.stats span.sep { margin: 0 4px; } } @media only screen and (max-width: 720px) { a.collection-box { height: 320px; } a.collection-box:hover { box-shadow: 0 0 0 2px #1d112b, 0 0 0 5px rgba(255, 54, 116, 0.3); } div.big-container + div.wide-container.collections { padding-top: 0; } div.wide-container.collections { padding: 0 10px 80px 10px !important; } div.wide-container.normal { padding: 0 10px !important; } div.collection-box-container { padding: 5px; } a.collection-box h2 { font-size: 18px !important; line-height: 26px !important; } div.highlighted-buttons { margin-top: 16px; } div.news-orange + div.highlighted-buttons { margin-top: 10px; } div.btn-highlight:nth-child(1) { padding-right: 8px; } div.btn-highlight:nth-child(3) { padding-left: 8px; } div.clear-30 { height: 15px; } div.clear-90 { height: 60px; } } @media only screen and (max-width: 600px) { a.collection-box { height: 260px; } a.collection-box div.bottom { padding: 20px; } a.collection-box h2 { font-size: 14px !important; line-height: 20px !important; } a.collection-box p { padding: 2px 0 0 0 !important; font-size: 11px !important; line-height: 18px !important; } a.collection-box p.full { /* experimental -- only shows 2 lines when it hasnt been pre-trimmed on phones */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 36px; overflow: hidden; } a.collection-box div.line { width: 40px; height: 3px; margin: 14px 0 16px 0; } a.collection-box div.stats { font-size: 10px; line-height: 16px; } a.collection-box div.stats i { font-size: 12px; line-height: 16px; margin-right: 0; } a.collection-box div.stats span.sep { margin: 0 3px; } a.collection-box div.stats span.item.extra { display: none; } div.btn-highlight:nth-child(1) { padding-right: 10px; } div.btn-highlight:nth-child(3) { padding-left: 10px; } a.btn-highlight { height: 102px; } a.btn-highlight span { font-size: 26px; line-height: 32px; left: 12px; bottom: 10px; } a.btn-highlight span.small { display: block; } a.btn-highlight span.wide { display: none; } a.btn-highlight strong { font-size: 11px; line-height: 19px; } } @media only screen and (max-width: 340px) { html.phone a.collection-box { height: 190px !important; } } html.phone div.wide-container.collections { padding: 0 8px 60px 8px !important; } html.phone div.wide-container.normal { padding: 0 8px !important; } html.phone div.collection-box-container { padding: 4px; } html.phone a.collection-box { height: 210px; } html.phone a.collection-box div.bottom { padding: 10px; } html.phone a.collection-box h2 { font-size: 12px !important; line-height: 18px !important; } html.phone a.collection-box p { font-size: 10px !important; line-height: 15px !important; /* experimental */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 30px; overflow: hidden; } html.phone a.collection-box div.stats { font-size: 9px !important; line-height: 15px !important; } html.phone a.collection-box div.stats i { font-size: 9px; line-height: 15px; } html.phone a.collection-box div.thumbnails i.empty { background: transparent; color: #3d2c50; } html.phone a.collection-box div.thumbnails.count-2 div.roulette { padding: 0 3px; } html.phone a.collection-box div.thumbnails.count-2 div.roulette:first-child { padding-left: 0; } html.phone a.collection-box div.thumbnails.count-2 div.roulette:last-child { padding-right: 0; } html.phone a.collection-box div.thumbnails.count-3 div.roulette:first-child { padding-right: 3px; } html.phone a.collection-box div.thumbnails.count-3 div.roulette:nth-child(2) { padding: 0 0 3px 3px; } html.phone a.collection-box div.thumbnails.count-3 div.roulette:last-child { padding: 3px 0 0 3px; } html.phone a.collection-box div.thumbnails.count-4 div.roulette:first-child { padding: 0 3px 3px 0; } html.phone a.collection-box div.thumbnails.count-4 div.roulette:nth-child(2) { padding: 0 0 3px 3px; } html.phone a.collection-box div.thumbnails.count-4 div.roulette:nth-child(3) { padding: 3px 3px 0 0; } html.phone a.collection-box div.thumbnails.count-4 div.roulette:last-child { padding: 3px 0 0 3px; } html.phone a.collection-box div.thumbnails.count-5 div.roulette:first-child { padding: 0 3px 3px 0; } html.phone a.collection-box div.thumbnails.count-5 div.roulette:nth-child(2) { padding: 0 0 3px 3px; } html.phone a.collection-box div.thumbnails.count-5 div.roulette:nth-child(3) { padding: 3px 3px 0 0; } html.phone a.collection-box div.thumbnails.count-5 div.roulette:nth-child(4) { padding: 3px 3px 0 3px; } html.phone a.collection-box div.thumbnails.count-5 div.roulette:last-child { padding: 3px 0 0 3px; } /* small collection box */ div.collection-box-small-container { display: inline-block; width: 33%; padding: 15px; } a.collection-box-small { display: block; background: #2a1c39; border-radius: 10px; padding: 30px 30px 20px 30px; position: relative; background: -moz-linear-gradient(bottom, rgb(35, 23, 48) 0%, rgb(43, 29, 58) 100%); background: -webkit-linear-gradient(bottom, rgb(35, 23, 48) 0%,rgb(43, 29, 58) 100%); background: linear-gradient(to top, rgb(35, 23, 48) 0%,rgb(43, 29, 58) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#231730', endColorstr='#2b1d3a',GradientType=0 ); } a.collection-box-small:hover { box-shadow: 0 0 0 3px #1d112b, 0 0 0 8px rgba(255, 54, 116, 0.3); } a.collection-box-small div.details { margin-top: 20px; text-align: center; } a.collection-box-small h2 { font-size: 16px !important; line-height: 24px !important; color: #fff; margin: 0 !important; padding: 0 !important; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.collection-box-small div.stats { color: #625173; font-weight: 500; margin: 4px 0 0 0; font-size: 12px; line-height: 18px; } a.collection-box-small div.stats i { margin-right: 1px; font-size: 16px; line-height: 18px; vertical-align: top; } a.collection-box-small div.stats span.item { white-space: nowrap; } a.collection-box-small div.stats span.sep { display: inline-block; margin: 0 6px; opacity: 0; } a.collection-box-small div.thumbnails { height: 134px; position: relative; } a.collection-box-small div.thumbnails div.roulettes { display: flex; height: 100%; position: relative; } a.collection-box-small div.thumbnails div.roulette div { background-size: cover; border-radius: 3px; background-position: center top; width: 100%; height: 100%; } a.collection-box-small div.thumbnails div.roulette div div { background: rgba(122, 22, 162, 0.2); } a.collection-box-small div.thumbnails.count-0 { border-radius: 3px; overflow: hidden; } a.collection-box-small div.thumbnails.count-0 div.roulettes { display: table; width: 100%; height: 100%; border-radius: 6px; } a.collection-box-small div.thumbnails i.empty { width: 100%; height: 100%; background: rgba(29, 17, 43, 0.6); color: #352746; font-size: 50px; line-height: normal; text-align: center; vertical-align: middle; display: table-cell; border-radius: 6px; } a.collection-box-small div.thumbnails.count-1 div.roulette { height: 100%; flex-grow: 1; } a.collection-box-small div.thumbnails.count-2 div.roulette { height: 100%; flex-grow: 1; padding: 0 5px; } a.collection-box-small div.thumbnails.count-2 div.roulette:first-child { padding-left: 0 !important; } a.collection-box-small div.thumbnails.count-2 div.roulette:last-child { padding-right: 0 !important; } a.collection-box-small div.thumbnails.count-3 div.roulettes { display: block; } a.collection-box-small div.thumbnails.count-3 div.roulette { height: auto; width: 48%; margin: 0; padding: 0; opacity: 0.45; display: inline-block; } a.collection-box-small div.thumbnails.count-3 div.roulette:first-child { margin: 0 0 0 25%; position: absolute; z-index: 4; height: 100%; width: 50%; opacity: 1; display: inline-block; box-shadow: 0 0 8px rgba(40, 27, 54, 0.4); } a.collection-box-small div.thumbnails.count-3 div.roulette:nth-child(2) { position: absolute; top: 14px; bottom: 14px; left: 0; } a.collection-box-small div.thumbnails.count-3 div.roulette:last-child { position: absolute; top: 14px; bottom: 14px; right: 0; } @media only screen and (min-width: 560px) { div.collection-box-small-container:nth-child(1), div.collection-box-small-container:nth-child(2), div.collection-box-small-container:nth-child(3) { padding-top: 0 !important; } div.collection-box-small-container:nth-child(3n) { padding-right: 0 !important; } div.collection-box-small-container:nth-child(3n+1) { padding-left: 0 !important; } div.collection-box-small-container:nth-child(3n+2) { width: 34%; } } @media only screen and (max-width: 900px) { a.collection-box-small h2 { font-size: 15px !important; line-height: 23px !important; } a.collection-box-small div.stats { font-size: 11px; line-height: 17px; } a.collection-box-small div.stats i { font-size: 13px; line-height: 17px; } a.collection-box-small div.stats span.sep { margin: 0 4px; } a.collection-box-small div.thumbnails { height: 120px; } } @media only screen and (max-width: 800px) { div.big-container + div.wide-container.collections { padding-top: 0; } div.wide-container.collections { padding: 0 10px 80px 10px !important; } div.wide-container.normal { padding: 0 10px !important; } div.collection-box-small-container { padding: 10px; } a.collection-box-small:hover { box-shadow: 0 0 0 2px #1d112b, 0 0 0 4px rgba(255, 54, 116, 0.3); } a.collection-box-small { padding: 20px 20px 16px 20px; } a.collection-box-small div.details { margin-top: 16px; } a.collection-box-small h2 { font-size: 14px !important; line-height: 22px !important; } a.collection-box-small div.thumbnails { height: 104px; } a.collection-box-small div.thumbnails.count-2 div.roulette { padding: 3px;} div.highlighted-buttons { margin-top: 40px; } div.news-orange + div.highlighted-buttons { margin-top: 20px; } div.btn-highlight:nth-child(1) { padding-right: 20px; } div.btn-highlight:nth-child(3) { padding-left: 20px; } div.clear-30 { height: 15px; } div.clear-90 { height: 60px; } } @media only screen and (max-width: 600px) { a.collection-box-small h2 { font-size: 13px !important; line-height: 21px !important; } a.collection-box-small div.stats { font-size: 10px; line-height: 16px; } a.collection-box-small div.stats i { font-size: 12px; line-height: 16px; margin-right: 0; } a.collection-box-small div.stats span.sep { margin: 0 3px; } a.collection-box-small div.stats span.item.extra { display: none; } a.collection-box-small div.thumbnails.count-3 div.roulette:nth-child(2) { top: 8px; bottom: 8px; } a.collection-box-small div.thumbnails.count-3 div.roulette:last-child { top: 8px; bottom: 8px; } div.btn-highlight:nth-child(1) { padding-right: 10px; } div.btn-highlight:nth-child(3) { padding-left: 10px; } a.btn-highlight { height: 102px; } a.btn-highlight span { font-size: 26px; line-height: 32px; left: 12px; bottom: 10px; } a.btn-highlight span.small { display: block; } a.btn-highlight span.wide { display: none; } a.btn-highlight strong { font-size: 11px; line-height: 19px; } div.collection-box-small-container { padding: 5px; } div.highlighted-buttons { margin-top: 16px; } div.news-orange + div.highlighted-buttons { margin-top: 10px; } div.btn-highlight:nth-child(1) { padding-right: 8px; } div.btn-highlight:nth-child(3) { padding-left: 8px; } div.clear-30 { height: 15px; } div.clear-90 { height: 60px; } } @media only screen and (max-width: 559px) { div.collection-box-small-container { width: 50%; } div.collection-box-small-container:nth-child(1), div.collection-box-small-container:nth-child(2) { padding-top: 0 !important; } div.collection-box-small-container:nth-child(odd) { padding-left: 0 !important; } div.collection-box-small-container:nth-child(even) { padding-right: 0 !important; } a.collection-box-small { padding: 22px 22px 18px 22px; } a.collection-box-small div.details { margin-top: 18px; } a.collection-box-small h2 { font-size: 14px !important; line-height: 22px !important; } a.collection-box-small div.stats { font-size: 12px; line-height: 18px; } a.collection-box-small div.stats i { font-size: 14px; line-height: 18px; margin-right: 1px; } a.collection-box-small div.stats span.sep { margin: 0 3px; } a.collection-box-small div.thumbnails { height: 104px; } a.collection-box-small div.thumbnails.count-2 div.roulette { padding: 3px;} html.phone a.collection-box-small div.thumbnails { height: 90px !important; } } @media only screen and (max-width: 380px) { html.phone a.collection-box-small div.thumbnails { height: 80px !important; } } @media only screen and (max-width: 340px) { html.phone a.collection-box-small div.thumbnails { height: 70px !important; } } html.phone div.wide-container.collections { padding: 0 8px 60px 8px !important; } html.phone div.wide-container.normal { padding: 0 8px !important; } html.phone div.collection-box-small-container { padding: 4px; } html.phone a.collection-box-small { padding: 15px 15px 12px 15px; } html.phone a.collection-box-small div.details { margin-top: 12px; } html.phone a.collection-box-small h2 { font-size: 11px !important; line-height: 17px !important; } html.phone a.collection-box-small div.stats { font-size: 10px !important; line-height: 16px !important; } html.phone a.collection-box-small div.stats i { font-size: 12px; line-height: 16px; } html.phone a.collection-box-small div.thumbnails { height: 80px; } html.phone a.collection-box-small div.thumbnails i.empty { font-size: 30px; } div.user-box { background: #241732; border-radius: 5px; position: relative; max-width: 540px; margin: 0 auto; } div.user-box div.user-header { padding: 20px 20px 37px 116px; } html.phone div.user-box div.user-header { padding: 12px 16px 26px 80px; } div.user-box div.user-header i.small-patreon-badge, div.user-box div.user-header i.small-patreon-badge-shadow { font-size: 28px; line-height: 28px; bottom: auto; left: 32px; top: 84px; margin: 0; } html.phone div.user-box div.user-header i.small-patreon-badge, html.phone div.user-box div.user-header i.small-patreon-badge-shadow { font-size: 18px; line-height: 18px; bottom: auto; left: 19px; top: 57px; } div.user-box img.avatar { width: 110px; height: 110px; border-radius: 100%; position: absolute; top: -13px; left: -13px; box-shadow: 0 0 0 4px #241732; transition: opacity 0.2s ease; } div.user-box a:hover img.avatar { opacity: 0.75; } html.phone div.user-box img.avatar { width: 70px; height: 70px; top: -6px; left: -6px; } div.user-box a.username { font-size: 20px; line-height: 26px; } html.phone div.user-box a.username { font-size: 15px; line-height: 19px; } div.user-box a.username ~ i.user-icon { font-size: 20px; line-height: 26px; } html.phone div.user-box a.username ~ i.user-icon { font-size: 15px; line-height: 19px; } div.user-box span.ban-status { display: inline-block; font-size: 11px; line-height: 23px; padding: 0 8px; border-radius: 4px; font-weight: 500; text-transform: uppercase; } html.phone div.user-box span.ban-status { font-size: 9px; line-height: 18px; padding: 0 7px; border-radius: 3px; } div.user-box div.clear-username { height: 8px; } html.phone div.user-box div.clear-username { height: 5px; } div.user-box span.ban-status.green { color: #94d3c5; background: rgba(148, 211, 197, 0.2); } div.user-box span.ban-status.red { color: #e3a9a2; background: rgba(227, 169, 162, 0.2); } div.user-box a.rounded-btn { float: right; /*margin-top: 12px;*/ } /* 26 + 8 + 23 = total height - 38 (btn height) / 2 = margin-top */ html.phone div.user-box a.rounded-btn { margin-top: 4px; } div.user-box a.rounded-btn.icons { font-size: 16px; } html.phone div.user-box a.rounded-btn.icons { font-size: 11px; } div.user-box div.darker-area { clear: both; background: #1d122a; border-radius: 0 0 5px 5px; padding: 20px; } html.phone div.user-box div.darker-area { padding: 16px; } div.user-box div.darker-area div.stat { position: relative; height: 24px; margin: 4px 0; } html.phone div.user-box div.darker-area div.stat { height: 18px; margin: 4px 0; } div.user-box div.darker-area div.stat span, div.user-box div.darker-area div.stat strong { display: inline-block; position: absolute; z-index: 2; background: #1d122a; border-radius: 5px; padding-right: 6px; font-size: 16px; line-height: 24px; color: #978da6; font-weight: 500; } html.phone div.user-box div.darker-area div.stat span, html.phone div.user-box div.darker-area div.stat strong { font-size: 13px; line-height: 18px; } div.user-box div.darker-area div.stat strong { right: 0; padding-right: 0; padding-left: 6px; color: #c3bad0; max-width: 60%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; word-break: break-all; word-wrap: break-word; } div.user-box div.darker-area div.stat div.line { position: absolute; z-index: 1; height: 17px; width: 100%; border-bottom: 2px dotted #3b3148; } html.phone div.user-box div.darker-area div.stat div.line { height: 13px; } div.user-box div.darker-area div.stat-separator { height: 4px; } div.profile-box { margin-top: 40px; text-align: center; cursor: #adacb0; } div.profile-box img { max-width: 150px; border-radius: 100%; } div.profile-box a { display: inline-block; position: relative; } div.profile-box a.avatar { border-radius: 100%; position: relative; } div.profile-box div.username { margin-top: 12px; } div.profile-box span.username { font-size: 20px; line-height: 32px; color: #444; } div.profile-box a span.username { color: #F73C78; border-bottom: 1px dotted transparent; } div.profile-box a:hover span.username { color: #cf0043; border-color: rgba(207, 0, 67, 0.2); } div.profile-box div.time { margin: 0 0 30px 0; color: #a7a6af; font-size: 14px; line-height: 22px; } #white-modal .bigger-margin-top { margin-top: 40px !important; } #white-modal a.bigger-margin-top { margin-top: 34px !important; } div#captcha, div#dark-modal { position: fixed; z-index: 100; background: rgba(34, 32, 37, 0.87); top: 0; left: 0; right: 0; bottom: 0; text-align: center; display: none; } div#captcha div.container, div#dark-modal div.container { position: absolute; top: 50%; width: 100%; margin-top: -140px; text-align: center; } div#captcha div.large-title, div#dark-modal div.large-title { font-size: 32px; font-weight: 700; line-height: 78px; color: #fff; } div#captcha p, div#dark-modal p { max-width: 350px; font-weight: 400; font-size: 18px; line-height: 32px; color: rgba(255, 255, 255, 0.7); margin-bottom: 30px; } div#captcha div.captcha { text-align: center; margin: 0 auto; } div#captcha div.captcha div:first-child { margin: 0 auto; } div#captcha a.close-captcha { position: absolute; top: 0; right: 0; width: 80px; height: 80px; text-align: center; font-size: 28px; line-height: 80px; color: #fff; display: inline-block; z-index: 101; } div#captcha a.close-captcha:hover { background: rgba(255, 255, 255, 0.1); } div#dark-modal { top: 62px; background: rgba(16, 9, 27, 0.9); } div#dark-modal div.container { margin-top: -110px; } div#dark-modal p { color: #bdb7c7; } /* dropdown*/ .ellipsisDropdown { display: none; z-index: 110; position: absolute; background: #fff; border-radius: 10px; padding: 8px 0; box-shadow: 0 2px 5px 0 rgba(0,0,0,.26),0 2px 10px 0 rgba(0,0,0,.16); text-align: left; max-width: 240px; transform-origin: right top 0px; -moz-transform-origin: right top 0px; -webkit-transform-origin: right top 0px; } .ellipsisDropdown.behind-header { z-index: 40; } .ellipsisDropdown.top { transform-origin: right bottom 0px; -moz-transform-origin: right bottom 0px; -webkit-transform-origin: right bottom 0px; } .ellipsisDropdown.fixed { position: fixed; } .ellipsisDropdown.fixed-stuck { position: fixed; } .ellipsisDropdown.normal { border-radius: 3px; } .ellipsisDropdown.bigger { width: 300px; max-width: 300px; } .ellipsisDropdown.bigger a { height: auto; padding: 0 24px; font-size: 14px; line-height: 44px; border-bottom: 2px solid #f4f4f6; } .ellipsisDropdown.bigger a:hover { background: #f4f4f6; } .ellipsisDropdown.bigger a:last-child { border-bottom: 0; } .ellipsisDropdown a span.description { color: #949494; font-size: 11px; line-height: 18px; padding-bottom: 14px; margin-top: -10px; display: block; white-space: normal; display: none; } .ellipsisDropdown a span.toggle { position: absolute; right: 24px; border-radius: 50px; background: #ccc; padding: 2px; margin-top: 13px; height: 18px; width: 34px; } .ellipsisDropdown a span.toggle span { border-radius: 100%; background: #fff; width: 14px; height: 14px; position: absolute; top: 2px; left: 2px; } .ellipsisDropdown a:hover span.toggle { background: #bdbdbd; } .ellipsisDropdown a span.toggle.active { background: #F73C78; } .ellipsisDropdown a span.toggle.active span { transform: translateX(16px); -ms-transform: translateX(16px); -moz-transform: translateX(16px); -webkit-transform: translateX(16px); } html.phone .ellipsisDropdown.fixed { transform-origin: left top 0px; -moz-transform-origin: left top 0px; -webkit-transform-origin: left top 0px; } html.phone .ellipsisDropdown.bigger { left: 6px !important; right: 6px !important; width: initial; max-width: none; } html.phone .ellipsisDropdown.fixed { top: 55px !important; left: 0 !important; right: 0 !important; max-width: none !important; border-radius: 0 !important; } .ellipsisDropdown.active { display: block; } a.btn-close-dropdown { opacity: 0.6; } .ellipsisDropdown a, .ellipsisDropdown select { padding: 0 58px 0 24px; line-height: 40px; height: 40px; display: block; color: #49495a; margin: 0; width: auto; margin: 0; font-size: 14px; text-align: left; text-decoration: none; white-space: nowrap; } .ellipsisDropdown a:hover { background: #efefef; } .ellipsisDropdown a.disabled { color: #a5a5a5; cursor: default; background: transparent; } .ellipsisDropdown.small { border-radius: 3px; } .ellipsisDropdown.small a { font-size: 12px; height: 30px; line-height: 30px; padding: 0 40px 0 20px; } .ellipsisDropdown a.selected { color: #000; font-weight: 700; box-shadow: inset 3px 0 0 0 #333641; } .ellipsisDropdown.select a.selected, .ellipsisDropdown.select2 a.selected { box-shadow: inset 4px 0 0 0 #f7427c; } .ellipsisDropdown.red.select a.selected { box-shadow: none; } .ellipsisDropdown.select a i, .ellipsisDropdown.select2 a i { /*margin-right: 8px;*/ color: #49495a; } .ellipsisDropdown.select a.selected i, .ellipsisDropdown.select2 a.selected i { color: #000; } .ellipsisDropdown.red.select a i { margin-right: 8px; } .ellipsisDropdown.red { background: #bd6489; } .ellipsisDropdown.red a { color: #ffeaf3; } .ellipsisDropdown.red.select a i { color: rgba(255, 255, 255, 0.4); } .ellipsisDropdown.red a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } .ellipsisDropdown.red.select a.selected { color: #fff !important; border-right: 3px solid #fff; } .ellipsisDropdown.red.select a.selected i { color: #fff; } .ellipsisDropdown a.icon { padding-left: 10px; } .ellipsisDropdown a.icon i { width: 50px; font-size: 18px; text-align: center; display: inline-block; vertical-align: middle; } .ellipsisDropdown.red2 { border-radius: 0 0 0 5px; background: rgba(233, 50, 108, 0.92); } .ellipsisDropdown.red2 a { color: #fff; font-weight: 500; } .ellipsisDropdown.red2 a:hover { background: #fff; color: #000; } .ellipsisDropdown.red2 div.separator { height: 2px; background: rgba(0, 0, 0, 0.07); margin: 6px 10px 6px 60px; } .ellipsisDropdown.red3 { background: rgba(233, 50, 108, 0.92); } .ellipsisDropdown.red3 a { color: #fff; font-weight: 500; } .ellipsisDropdown.red3 a.selected { color: #fff; box-shadow: inset 4px 0 0 0 #fff; border-right: 0; } .ellipsisDropdown.red3 a:hover { background: #fff; color: #000; } .ellipsisDropdown span.subtitle { font-size: 10px; line-height: 12px; opacity: 0.8; display: block; padding: 0 0 0 16px; margin-top: 8px; } .ellipsisDropdown select { background: transparent; color: #fff; font-weight: 500; border: 0; outline: none; width: 100%; cursor: pointer; } .ellipsisDropdown select:hover { background: rgba(0, 0, 0, 0.1); } .ellipsisDropdown option { color: #000; font-weight: 500; } /* ***** Buttons, links ***** */ a.link { color: #ff6898; border-bottom: 1px dashed rgba(255, 104, 152, 0.2); white-space: nowrap; } a.link:hover { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.5); } a.normal { color: #ff6898; white-space: nowrap; } a.normal:hover { color: #fff; } a.normal strong { color: #ff6898; white-space: nowrap; } a.normal:hover strong { color: #fff; } #white-modal a.link { color: #a670d6; border-bottom: 1px dashed rgba(166, 112, 214, 0.2); } #white-modal a.link:hover { color: #743aa7; border-bottom: 1px dashed rgba(135, 70, 194, 0.2); } a.bright { color: #e4dcf1; border-bottom: 1px dashed rgba(228, 220, 241, 0.2); } a.bright:hover { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.5); } a.normal-bright { color: #e4dcf1; } a.normal-bright:hover { color: #fff; } a ~ i.user-icon, strong ~ i.user-icon { font-size: 16px; line-height: 16px; margin-left: 6px; color: #d0b1b1; } div.profile-box a ~ i.user-icon { font-size: 20px; line-height: 20px; } div#white-modal a ~ i.user-icon { color: #fa7ea6; } .simple-btn { padding: 12px 30px; display: inline-block; color: #fff; background: #F73C78; font-size: 18px; line-height: 24px; font-weight: 700; margin: 4px; } .simple-btn:hover { background: #fff; color: #F73C78; } .simple-btn.green { background: #38c37e; color: #fff; } .simple-btn.green:hover { background: #fff; color: #38c37e; } .btn-float { display: block; width: 70px; height: 70px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); color: #fff; line-height: 70px; font-size: 18px; text-align: center; background: #B16DFC; border-radius: 100%; position: fixed; bottom: 25px; right: 25px; z-index: 25; } .btn-float.two-icons { line-height: 24px; padding-top: 30px; } .btn-float.two-icons i:first-child { position: absolute; width: 100%; font-size: 12px; top: 18px; left: 0; margin-left: -1px; } .btn-float:hover { background: #fff; color: #B16DFC; } html.phone .btn-float:hover { background: #B16DFC; color: #fff; } html.phone .btn-float:active { background: #fff; color: #B16DFC; } .btn-float.disabled { opacity: 0.5; } /*.btn-float.active { animation: bounceUp 0.3s ease forwards; -moz-animation: bounceUp 0.3s ease forwards; -webkit-animation: bounceUp 0.3s ease forwards; }*/ #btn-options { display: none; bottom: auto; right: 25px; top: 172px; background: rgba(116, 99, 136, 0.3); box-shadow: none; color: #91889c; height: 30px; line-height: 30px; border-radius: 10px; } #btn-options:hover { background: rgba(116, 99, 136, 0.6); color: #fff; } html.phone #btn-options { /* display: none !important; top: 60px; right: 5px; border-radius: 3px 3px 3px 10px; */ top: 0; right: auto !important; border-radius: 0; height: 55px; width: 40px; line-height: 55px; color: #fff; background: transparent; left: 48px; z-index: 70; } html.modalOpen #btn-random { border-radius: 30% 30% 50% 50%; } #btn-save { background: #66c99d; } #btn-save:hover, #btn-save.active { background: #fff; color: #66c99d; } #btn-close { top: 87px; background: #F73C78; color: #fff; display: none; border-radius: 30%; } #btn-close:hover, #btn-close.active { background: #fff; color: #F73C78; } #btn-reroll { bottom: 110px; background: #e770ff; display: none; border-radius: 50% 50% 30% 30%; } #btn-reroll:hover { background: #fff; color: #e770ff; } #btn-reroll.active { background: #fff !important; color: #e770ff !important; } html.phone #btn-reroll:hover { background: #e770ff; color: #fff; } html.phone #btn-reroll:hover span { color: #fff; } html.phone #btn-reroll:active { background: #fff; color: #e770ff; } #btn-like { bottom: 110px; left: 25px; right: auto; background: #636eff; color: #fff; display: none; border-radius: 30%; } #btn-like:hover { background: #fff; color: #636eff; } #btn-like:hover span { color: #636eff; } #btn-like.active { background: #fff !important; color: #636eff !important; } #btn-like.active span { color: #636eff !important; } html.phone #btn-like:hover { background: #636eff; color: #fff; } html.phone #btn-like:hover span { color: #fff; } html.phone #btn-like:active { background: #fff; color: #636eff; } html.phone #btn-like:active span { color: #636eff; } #btn-dislike { left: 25px; right: auto; background: #F73C78; color: #fff; display: none; border-radius: 30% 30% 50% 50%; } #btn-dislike:hover { background: #fff; color: #F73C78; } #btn-dislike:hover span { color: #F73C78; } #btn-dislike.active { background: #fff !important; color: #F73C78 !important; } #btn-dislike.active span { color: #F73C78 !important; } html.phone #btn-dislike:hover { background: #F73C78; color: #fff; } html.phone #btn-dislike:hover span { color: #fff; } html.phone #btn-dislike:active { background: #fff; color: #F73C78; } html.phone #btn-dislike:active span { color: #F73C78; } #btn-favorite { bottom: 195px; left: 25px; right: auto; background: #4db2e4; color: #fff; display: none; border-radius: 50% 50% 30% 30%; } #btn-favorite:hover { background: #fff; color: #4db2e4; } #btn-favorite.active { background: #fff !important; color: #4db2e4 !important; } html.phone #btn-favorite:hover { background: #4db2e4; color: #fff; } html.phone #btn-favorite:active { background: #fff; color: #4db2e4; } #btn-add-to-collection { bottom: 195px; left: 25px; right: auto; background: #4db2e4; color: #fff; display: none; border-radius: 50% 50% 30% 30%; } #btn-add-to-collection:hover { background: #fff; } #btn-add-to-collection.active { background: #fff !important; } #btn-add-to-collection i.fa-bars { margin-left: -4px; } #btn-add-to-collection i.fa-plus, #btn-add-to-collection i.fa-check { position: absolute; right: 20px; bottom: 23px; text-shadow: -2px 2px 0 #4cb2e4, -2px 0 0 #4cb2e4, -2px -2px 0 #4cb2e4; font-size: 14px; } #btn-add-to-collection:hover i { color: #4db2e4; text-shadow: -2px 2px 0 #fff, -2px 0 0 #fff, -2px -2px 0 #fff; } #btn-add-to-collection.active i { color: #4db2e4 !important; text-shadow: -2px 2px 0 #fff, -2px 0 0 #fff, -2px -2px 0 #fff !important; } html.phone #btn-add-to-collection i.fa-bars { margin-left: -3px; } html.phone #btn-add-to-collection i.fa-plus, html.phone #btn-add-to-collection i.fa-check { right: 12px; bottom: 16px; } html.phone #btn-add-to-collection:hover { background: #4db2e4; } html.phone #btn-add-to-collection:active { background: #fff; } html.phone #btn-add-to-collection:hover i { color: #fff; text-shadow: -2px 2px 0 #4db2e4, -2px 0 0 #4db2e4, -2px -2px 0 #4db2e4; } html.phone #btn-add-to-collection:active i { color: #4db2e4; text-shadow: -2px 2px 0 #fff, -2px 0 0 #fff, -2px -2px 0 #fff; } #btn-favorite-collection { bottom: 110px; background: #4db2e4; color: #fff; border-radius: 50% 50% 30% 30%; font-size: 21px; } #btn-favorite-collection:hover { background: #fff; color: #4db2e4; } #btn-favorite-collection:hover span { color: #4db2e4; } #btn-favorite-collection.active { background: #fff !important; color: #4db2e4 !important; } #btn-favorite-collection.active span { color: #4db2e4 !important; } html.phone #btn-favorite-collection:hover { background: #4db2e4; color: #fff; } html.phone #btn-favorite-collection:hover span { color: #fff; } html.phone #btn-favorite-collection:active { background: #fff; color: #4db2e4; } html.phone #btn-favorite-collection:active span { color: #4db2e4; } a.btn-float.multi-line { line-height: 24px; padding-top: 14px; } a.btn-float.multi-line span { color: #fff; display: block; font-size: 14px; font-weight: 700; } #btn-like, #btn-dislike { line-height: 24px; padding-top: 12px; } #btn-like span, #btn-dislike span { color: #fff; display: block; font-size: 14px; font-weight: 700; } /* ***** Stand-alone IDs and their children ***** */ #menuBackground { z-index: 18; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(29, 18, 41, 0.8); display: none; opacity: 0; } #arrow { width: 93px; height: 130px; position: fixed; bottom: 60px; left: 30px; z-index: 30; display: none; animation: animate-arrow 1.5s linear forwards; -moz-animation: animate-arrow 1.5s linear forwards; -webkit-animation: animate-arrow 1.5s linear forwards; } #loading { background: #fff url('../images/loading.gif') no-repeat center center; width: 80px; height: 80px; border-radius: 100%; position: fixed; top: 50%; left: 50%; margin: -5px 0 0 -40px; z-index: 100; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); display: none; } #roulette-rating { position: fixed; z-index: 20; color: #3fca8d; font-weight: 700; font-size: 18px; line-height: 24px; bottom: 230px; left: 25px; width: 70px; display: block; text-align: center; display: none; } #roulette-rating i { width: 20px; margin-right: 5px; } #roulette-rating div { color: #F73C78; margin-top: 5px; } div.with-background-image { position: relative; overflow: hidden; } div.with-background-image div.full-background-image { filter:blur(10px); -o-filter:blur(10px); -ms-filter:blur(10px); -moz-filter:blur(10px); -webkit-filter:blur(10px); background-size: cover; background-position:center center; position: absolute; left:-20px; top:-20px; right:-20px; bottom:-20px; z-index: 1; } div.gradient-background { background: -moz-linear-gradient(left, rgba(78,16,40,0.85) 0%, rgba(27,17,68,0.85) 100%); background: -webkit-linear-gradient(left,rgba(78,16,40,0.85) 0%,rgba(27,17,68,0.85) 100%); background: linear-gradient(to right,rgba(78,16,40,0.85) 0%,rgba(27,17,68,0.85) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc1b1144', endColorstr='#cc4e1028',GradientType=1 ); position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; padding-top: 60px; } div.daily-roulette { width: 300px !important; padding: 0 !important; display: inline-block !important; overflow: visible !important; position: relative; text-align: left; } html.phone div.daily-roulette { width: 50% !important; } html.phone div.daily-roulette img { width: 100% !important; } html.phone div.gradient-background { padding-top: 40px; } div.daily-roulette img.first { transform: rotate(5deg); opacity: 0.2; position: absolute; max-width: 100%; } div.daily-roulette img.second { transform: rotate(-3deg); opacity: 0.4; position: absolute; max-width: 100%; } div.daily-roulette img.third { box-shadow: 0 1px 6px rgba(0,0,0,0.1), 10px 0 50px rgba(135, 105, 255, 0.2), -10px 0 50px rgba(249, 85, 168, 0.2), 30px 0 100px rgba(135, 105, 255, 0.12), -30px 0 100px rgba(249, 85, 168, 0.12); position: absolute; z-index: 2; max-width: 100%; } div.daily-roulette a { margin: 0 !important; position: absolute !important; z-index: 3 !important; } /* ***** Modal, popup, overlays ***** */ #animation-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(154, 94, 234, 0.8); display: none; animation: fadeOut 0.3s forwards; -moz-animation: fadeOut 0.3s forwards; -webkit-animation: fadeOut 0.3s forwards; z-index: 5000; -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #animation-text { font-size: 90px; line-height: 120px; position: fixed; top: 50%; left: 0; right: 0; text-align: center; margin-top: -40px; display: none; z-index: 5001; color: #fff; text-shadow: 0 2px 9px rgba(0, 0, 0, 0.6); font-family: 'Kaushan Script', cursive; font-weight: bold; -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #loading-border { position: fixed; top: 62px; left: 0; right: 0; z-index: 100; } html.phone #loading-border { top: 55px; } #loading-border div { height: 5px; width: 0%; background: rgba(255, 123, 178, 0.9); box-shadow: 0 0 10px rgba(255, 123, 178, 0.5); border-radius: 0 0 2px 0; } #loading-border div.invisible { height: 0; opacity: 0; } #popup { display: none; opacity: 0; z-index: 90; position: fixed; padding: 15px 20px; background: rgba(173, 111, 255, 0.9); /* 4b4f77 */ color: #fff; font-size: 14px; line-height: 14px; border-radius: 3px; -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #popup.medium { font-size: 12px; line-height: 22px; padding: 10px 18px; border-radius: 3px; max-width: 400px; text-align: left; } #popup.small { font-size: 12px; line-height: 20px; padding: 10px 15px; border-radius: 3px; min-width: 180px; max-width: 300px; text-align: center; } #popup.smaller { font-size: 12px; line-height: 20px; padding: 10px 15px; } #popup.description { text-align: left; max-width: 400px; } #popup span.title { display: block; font-size: 14px; font-weight: 500; line-height: 26px; color: #232325; } #popup.small span.extra { display: block; } #popup.small span.light { font-size: 11px; opacity: 0.6; } #popup i { color: rgba(173, 111, 255, 0.9); font-size: 21px; position: absolute; } #popup.red { background: rgba(250, 60, 123, 0.9); } #popup.red i { color: rgba(250, 60, 123, 0.9); } #popup.pink { background: rgba(225, 114, 255, 0.9); } #popup.pink i { color: rgba(225, 114, 255, 0.9); } #popup.green { background: rgba(64, 205, 135, 0.9); } #popup.green i { color: rgba(64, 205, 135, 0.9); } #popup.blue { background: rgba(99, 110, 255, 0.9); } #popup.blue i { color: rgba(99, 110, 255, 0.9); } #popup.lightblue { background: rgba(78, 178, 228, 0.9); } #popup.lightblue i { color: rgba(78, 178, 228, 0.9); } #popup.white { background: rgb(255, 255, 255); color: #5b5865; box-shadow: 0 3px 7px -4px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 6px 34px -4px rgba(0, 0, 0, 0.3); } #popup.white i { color: rgb(255, 255, 255); } #popup.dark { background: #8b78a1; color: #fff; } #popup.dark i { color: #8b78a1; } #popup.dark { background: #444; color: #fff; } #popup.dark i { color: #444; } #popup.darker { background: #10091b; color: #fff; } #popup.darker i { color: #10091b; } #popup.dark-purple { background: #4f3e65; color: #e4ddec; } #popup.dark-purple i { color: #4f3e65; } #popup.purple { background: rgba(185, 127, 247, 0.9); color: #fff; } #popup.purple i { color: rgba(185, 127, 247, 0.9); } #popup.neutral { background: #8b78a1; color: #fff; } #popup.neutral i { color: #8b78a1; } #popup i.fa-caret-left { left: -6px; top: 50%; margin-top: -9px; } #popup i.fa-caret-right { right: -6px; top: 50%; margin-top: -9px; } #popup i.fa-caret-up { left: 50%; top: -14px; margin-left: -6px; } #popup i.fa-caret-down { left: 50%; bottom: -12px; margin-left: -6px; } div.maintenance { display: none; position: fixed; top: 65px; left: 10px; right: 10px; background: rgba(255, 133, 87, 0.92); font-size: 10px; line-height: 14px; color: #ffe3d2; text-align: center; padding: 8px; border-radius: 5px; z-index: 4; top: 72px; left: auto; right: 10px; width: 370px; } html.phone div.maintenance { top: 65px; left: 10px; width: auto; } #note { font-size: 14px; line-height: 22px; background: rgba(250, 60, 123, 0.9); color: #fff; padding: 12px 25px; position: fixed; z-index: 150; bottom: 0; left: 50%; margin-left: -180px; display: none; line-height: 18px; border-radius: 3px 3px 0 0; } #note.pink { background: rgba(173, 111, 255, 0.9) !important; } #note.green { background: rgba(64, 205, 135, 0.9) !important; } #modalBackground { background: rgba(20, 14, 26, 0.8); position: fixed; top: 62px; left: 0; right: 0; bottom: 0; z-index: 9; } html.mobile #modalBackground { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .relative { position: relative; } #imageModal { position: relative; width: 100%; position: fixed; z-index: 10; top: 62px; left: 0; right: 0; bottom: 0; outline: none; } div.room-container div.container-body #imageModal { position: absolute; top: 0; overflow: hidden; } html.phone div.room-container div.container-body #imageModal { overflow: visible; } div.item #imageModal { position: absolute; top: 0 !important; } html.phone div.item #imageModal div.mover { bottom: 0 !important; } /*html.mobile #imageModal { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }*/ #imageModal .outer { position: fixed; top: 62px; left: 0; right: 0; bottom: 0; } #imageModal.zoom .outer, #imageModal.zoom2 .outer { position: absolute; width: 100%; height: 100%; overflow-y: scroll; top: auto; left: auto; right: auto; bottom: auto; } #imageModal .dummy { padding-top: 100%; } #imageModal.zoom .dummy, #imageModal.zoom2 .dummy { padding-top: 0; } /*todo: test*/ #imageModal .container { position: absolute; top: 25px; bottom: 25px; left: 120px; right: 120px; text-align: center; font: 0/0 a; } #imageModal.zoom .container { bottom: auto; padding-bottom: 25px; } #imageModal.zoom2 .container { top: 0; bottom: auto; left: 0; right: 0; } #imageModal .center { display: inline-block; vertical-align: middle; height: 100%; } #imageModal img { vertical-align: middle; display: inline-block; max-height: 100%; max-width: 100%; } #imageModal div.panzoom { cursor: move; } #imageModal div.panzoom img { max-height: none; max-width: none; } html.phone #imageModal div.mover { /*height: 100%; position: relative;*/ perspective: 500px; user-select: none; position: absolute; top: 0; left: 0; right: 0; bottom: 65px; /* btn height 55px + 10px margin */ } html.phone #imageModal div.mover div { /*background: #fff;*/ position: absolute; left: 0; top: 0; /*width: 150px; height: 150px;*/ cursor: pointer; -ms-touch-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } html.phone #imageModal div.mover div.animate { transition: all 0.3s; } #imageModal.zoomable img { cursor: zoom-in; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; } #imageModal.zoomable.zoom img { cursor: zoom-in; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; } #imageModal.zoomable.zoom2 img { cursor: zoom-out; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; max-width: none; /* todo: test */ max-height: none; margin: 0 120px; } #modal-more { position: fixed; z-index: 19; top: 50%; left: 50%; background: #fff; padding: 15px; width: 450px; margin: -110px 0 0 -225px; display: none; } #modal-more .selector { height: 190px; text-align: center; position: relative; } #modal-more .selector span { font-size: 120px; line-height: 175px; color: #2e2f32; font-family: 'Kaushan Script', cursive; } #modal-more .selector a { position: absolute; display: inline-block; font-size: 60px; line-height: 60px; top: 50%; margin-top: -30px; color: #babbbe; } #modal-more .selector a:hover { color: #f73c78;} #modal-more .selector a.minus { left: 50px; } #modal-more .selector a.plus { right: 50px; } #modal-more div.float-cancel, #modal-more div.float-save { float: left; width: 50%; } #modal-more div.float-cancel { padding-right: 7px; } #modal-more div.float-save { padding-left: 8px; } #modal-more a.cancel, #modal-more a.save { display: block; text-align: center; height: 60px; font-size: 14px; line-height: 60px; font-weight: 700; text-transform: uppercase; } #modal-more a.cancel { background: #f3f3f7; color: #92939a; } #modal-more a.save { background: #f73c78; color: #fff; } #modal-more a.cancel:hover, #modal-more a.save:hover { box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.2); } #modal-more a.cancel:active, #modal-more a.save:active { box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.1); } /* ***** Header & menu ***** */ #menu { width: 340px; position: fixed; top: 62px; left: 0; bottom: 0; z-index: 40; transform: translateX(-340px) translateZ(0); /* translateZ(0) is necessary to prevent weird display bug during ellipsisDropdown span.toggle transition, causing document to jump 300px during transition -> only happens when the elements that are being changed are invisible */ -moz-transform: translateX(-340px) translateZ(0); -webkit-transform: translateX(-340px) translateZ(0); background: #782844 url(../images/banner-pattern2.png) repeat; box-shadow: 0 0 40px rgba(15, 8, 23, 0.4); opacity: 0; } #menu div.bottom { position: absolute; background: #632037; background: rgba(66, 19, 35, 0.35); left: 0; right: 0; bottom: 0; height: 91px; } #menu div.bottom footer { font-size: 12px; line-height: 30px; color: #fff; padding: 15px 21px; margin: 0; } #menu div.bottom footer a { margin-right: 15px; display: inline-block; color: rgba(255, 217, 212, 0.6); line-height: 22px; } #menu div.bottom footer a:hover { color: rgba(255, 217, 212, 1); } #menu div.scrollable { position: absolute; top: 0; left: 0; right: 0; bottom: 91px; overflow-y: hidden; transition: all 0.2s; } html.phone #menu div.scrollable { bottom: 108px; } #menu div.scrollable.scroll { overflow-y: scroll; } #menu div.scrollable::scrollbar { width: 6px; background: transparent; } #menu div.scrollable::-moz-scrollbar { width: 6px; background: transparent; } #menu div.scrollable::-webkit-scrollbar { width: 6px; background: transparent; } #menu div.scrollable::scrollbar-thumb { background: rgba(144, 64, 92, 0); transition: all 0.2s; } #menu div.scrollable::-moz-scrollbar-thumb { background: rgba(144, 64, 92, 0); -moz-transition: all 0.2s; } #menu div.scrollable::-webkit-scrollbar-thumb { background: rgba(144, 64, 92, 0); -webkit-transition: all 0.2s; } html.mobile #menu div.scrollable::scrollbar-thumb, #menu:hover div.scrollable::scrollbar-thumb { background: rgba(144, 64, 92, 1); } html.mobile #menu div.scrollable::-moz-scrollbar-thumb, #menu:hover div.scrollable::-moz-scrollbar-thumb { background: rgba(144, 64, 92, 1); } html.mobile #menu div.scrollable::-webkit-scrollbar-thumb, #menu:hover div.scrollable::-webkit-scrollbar-thumb { background: rgba(144, 64, 92, 1); } #menu div.scrollable div.area { padding-bottom: 30px; } #menu .title { line-height: 62px; height: 62px; width: 100%; background: rgba(110, 94, 129, 1); color: #fff; font-size: 24px; padding-left: 24px; font-weight: 500; } #menu div.subtitle { line-height: 24px; font-size: 11px; font-weight: 700; color: rgba(255, 217, 212, 0.85); text-align: left; padding-left: 25px; text-transform: uppercase; letter-spacing: 2px; margin-top: 30px; } #menu a.page { line-height: 40px; font-size: 15px; font-weight: 500; color: #fff; display: block; border-left: 4px solid transparent; padding-left: 10px; } #menu a.page i { color: #ffc193; width: 50px; text-align: center; font-size: 19px; line-height: 40px; height: 40px; vertical-align: top; } #menu a.page.active { border-color: #fff; } #menu a.page:hover { background: #fff; color: #1a1025; border-color: #f73c78; } #menu a.page:hover i { color: #f73c78; } #footer { padding: 30px 0; text-align: center; } #footer a { display: inline-block; color: #766d82; margin: 0 15px; font-size: 13px; line-height: 25px; } #footer a i { width: 30px; text-align: center; vertical-align: middle; font-size: 16px; line-height: 21px; } #footer a:hover { color: #ff6898; } #footer div.right { float: right; } #footer div.right + a { margin-left: 0; } #footer div a:last-child { margin-right: 0; } #top { background: rgba(255, 54, 116, 0.9); position: fixed; z-index: 41; /* 41 to be ontop of dropdown menus, but below modal backgrounds */ height: 62px; top: 0; left: 0; right: 0; } #top a.h1-link:hover { opacity: 0.7; } #top h1 { font-size: 26px; line-height: 58px; padding: 0; text-align: left; padding-left: 90px; display: inline-block; } #top div.small-menu { display: block; text-align: right; position: absolute; right: 10px; top: 0; height: 100%; } #top div.small-menu.auth div.unauth { display: none; } #top div.small-menu.unauth div.auth { display: none; } #top div.small-menu.unauth #btn-filter { margin-right: 30px; } #top div.small-menu div.auth, #top div.small-menu div.unauth { display: inline-block; height: 100%; vertical-align: top; } #top div.small-menu a { display: inline-block; padding: 0 16px; height: 100%; vertical-align: top; } #top div.small-menu a:hover { background: #de2a61; } #top div.small-menu a:active { background: #d12258; } #top div.small-menu a.icon { padding: 0 22px; } #top div.small-menu a.fix div.middle { margin: -1px 0 1px 0; } #top div.small-menu a div.table { display: table; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #top div.small-menu a div.middle { position: relative; display: inline-block; vertical-align: middle; font-weight: 700; font-size: 15px; line-height: 20px; color: #fff; } #top div.small-menu a.button div.middle { padding: 8px 26px; border-radius: 40px; background: #fff; color: #e7356c; } #top div.small-menu a div.middle i { vertical-align: middle; margin-right: 6px; font-size: 18px; } #top div.small-menu a.icon div.middle { font-size: 0; line-height: 0; } #top div.small-menu a.icon div.middle i { font-size: 24px; line-height: 32px; margin-right: 0; } #top div.small-menu a.avatar div.middle { line-height: 34px; } #top div.small-menu a.avatar div.middle div.avatar { width: 34px; height: 34px; border: 2px solid #fff; background-size: contain; border-radius: 100%; display: inline-block; vertical-align: top; margin-right: 8px; } #top div.small-menu a.avatar div.middle i { margin: 0 0 0 8px; } #top div.small-menu a div.middle span.new { position: absolute; top: -2px; right: -12px; display: inline-block; background: #ffe779; color: #a26c0d; border-radius: 100%; border: 2px solid #e7356c; font-weight: 700; font-size: 10px; line-height: 14px; text-align: center; width: 18px; padding: 0; } #top.modal .small-menu { opacity: 0; -webkit-transform: translateY(-80px) translateZ(0); -moz-transform: translateY(-80px) translateZ(0); transform: translateY(-80px) translateZ(0); } #top.modal .random { opacity: 1; -webkit-transform: translateY(0) translateZ(0); -moz-transform: translateY(0) translateZ(0); transform: translateY(0) translateZ(0); } #top .random { display: block; opacity: 0; -webkit-transform: translateY(-80px) translateZ(0); -moz-transform: translateY(-80px) translateZ(0); transform: translateY(-80px) translateZ(0); text-align: right; position: absolute; right: 0; top: 0; height: 100%; font-family: 'Kaushan Script', cursive; } #top .random a.more { font-size: 26px; color: #fff; display: inline-block; margin-right: 14px; padding: 0px 13px; line-height: 62px; vertical-align: top; } #top .random a.more:first-child { margin-right: 5px; } #top .random a.more:hover { color: #FFBAD0; } #top a i.small-icon { text-shadow: -2px 2px 0 #e9326c, 0 0 3px #e9326c; z-index: 2; position: absolute; font-size: 16px !important; top: -10px; left: 16px; margin-right: 0; display: none; } #top a.blocked i.fa-filter {} #top a.blocked i.small-icon { display: inline-block; } #top .random span { display: inline-block; margin-right: 18px; line-height: 58px; font-size: 28px; color: #FFBAD0; } #top .random strong { color: #fff; display: inline-block; margin-left: 6px; width: 28px; text-align: left; } #top .random span:hover { cursor: pointer; opacity: 0.7; } #top .random.numbers-11 #roll-12 { display: none; } #top .random.numbers-10 #roll-12, #top .random.numbers-10 #roll-11 { display: none; } #top .random.numbers-9 #roll-12, #top .random.numbers-9 #roll-11, #top .random.numbers-9 #roll-10 { display: none; } #top .random.numbers-8 #roll-12, #top .random.numbers-8 #roll-11, #top .random.numbers-8 #roll-10, #top .random.numbers-8 #roll-9 { display: none; } #top .random.numbers-7 #roll-12, #top .random.numbers-7 #roll-11, #top .random.numbers-7 #roll-10, #top .random.numbers-7 #roll-9, #top .random.numbers-7 #roll-8 { display: none; } #top .random.numbers-6 #roll-12, #top .random.numbers-6 #roll-11, #top .random.numbers-6 #roll-10, #top .random.numbers-6 #roll-9, #top .random.numbers-6 #roll-8, #top .random.numbers-6 #roll-7 { display: none; } #top .random.numbers-5 #roll-12, #top .random.numbers-5 #roll-11, #top .random.numbers-5 #roll-10, #top .random.numbers-5 #roll-9, #top .random.numbers-5 #roll-8, #top .random.numbers-5 #roll-7, #top .random.numbers-5 #roll-6 { display: none; } #top .random.numbers-4 #roll-12, #top .random.numbers-4 #roll-11, #top .random.numbers-4 #roll-10, #top .random.numbers-4 #roll-9, #top .random.numbers-4 #roll-8, #top .random.numbers-4 #roll-7, #top .random.numbers-4 #roll-6, #top .random.numbers-4 #roll-5 { display: none; } #top .random.numbers-3 #roll-12, #top .random.numbers-3 #roll-11, #top .random.numbers-3 #roll-10, #top .random.numbers-3 #roll-9, #top .random.numbers-3 #roll-8, #top .random.numbers-3 #roll-7, #top .random.numbers-3 #roll-6, #top .random.numbers-3 #roll-5, #top .random.numbers-3 #roll-4 { display: none; } #top .random.numbers-2 #roll-12, #top .random.numbers-2 #roll-11, #top .random.numbers-2 #roll-10, #top .random.numbers-2 #roll-9, #top .random.numbers-2 #roll-8, #top .random.numbers-2 #roll-7, #top .random.numbers-2 #roll-6, #top .random.numbers-2 #roll-5, #top .random.numbers-2 #roll-4, #top .random.numbers-2 #roll-3 { display: none; } #top .random.numbers-1 #roll-12, #top .random.numbers-1 #roll-11, #top .random.numbers-1 #roll-10, #top .random.numbers-1 #roll-9, #top .random.numbers-1 #roll-8, #top .random.numbers-1 #roll-7, #top .random.numbers-1 #roll-6, #top .random.numbers-1 #roll-5, #top .random.numbers-1 #roll-4, #top .random.numbers-1 #roll-3, #top .random.numbers-1 #roll-2 { display: none; } #top .btn { font-size: 21px; color: #fff; padding: 0 26px; line-height: 62px; display: block; position: absolute; height: 100%; z-index: 25; } #top .btn-menu { left: 0; } #top .btn-close { left: 0; display: none; } #top .btn:hover { background: #fff; color: #e8316c; } html.mobile #top .btn, html.mobile #top .btn:hover { background: transparent; color: #fff; } html.mobile #top .btn:active { background: #fff; color: #e8316c; } /*#top .btn:hover i { animation: bounceUp 0.4s ease forwards; -moz-animation: bounceUp 0.4s ease forwards; -webkit-animation: bounceUp 0.4s ease forwards; }*/ #top .btn i.overlay { position: absolute; opacity: 0; top: 50%; margin-top: -11px; } #top .btn.active i:last-child { animation: rotateOut 0.3s ease forwards; -moz-animation: rotateOut 0.3s ease forwards; -webkit-animation: rotateOut 0.3s ease forwards; } #top .btn.active i.overlay { animation: rotateIn 0.3s ease forwards; -moz-animation: rotateIn 0.3s ease forwards; -webkit-animation: rotateIn 0.3s ease forwards; } #top .btn.inactive i:last-child { animation: rotateIn 0.3s ease forwards; -moz-animation: rotateIn 0.3s ease forwards; -webkit-animation: rotateIn 0.3s ease forwards; } #top .btn.inactive i.overlay { animation: rotateOut 0.3s ease forwards; -moz-animation: rotateOut 0.3s ease forwards; -webkit-animation: rotateOut 0.3s ease forwards; } i.huge-icon { font-size: 120px; line-height: 200px; color: #443654; } i.huge-icon.brighter { color: #574965; } i.huge-icon.on-dark { color: #3d304c; } p.huge-icon-text { color: #736582; } i.huge-icon.check { font-size: 120px; line-height: 120px; margin-bottom: 40px; color: #53e0cd; } html.phone i.huge-icon.check { margin-bottom: 30px; } div.banner-verify-email { background: #d4265e; color: rgba(255, 255, 255, 0.75); font-size: 11px; line-height: 17px; padding: 10px 20px; text-align: center; display: none; } div.banner-verify-email i { margin-right: 4px; } div.banner-verify-email a { display: inline-block; margin-left: 4px; color: rgba(255, 255, 255, 0.75); text-decoration: underline; border: 0; } div.banner-verify-email a:hover { color: #fff; } html.phone div.banner-verify-email { font-size: 10px; line-height: 16px; } html.room div.banner-verify-email { display: none !important; } div.single-image { font-size: 0; line-height: 0; white-space: nowrap; margin-top: 60px; } div.single-image strong { display: block; font-size: 24px; line-height: 28px; font-weight: 500; } div.single-image strong span { color: #da92f1; } div.single-image a { margin-top: 15px; } div.single-image img { border-radius: 3px 3px 0 0; } div.single-image div.line { padding: 3px 0 0 0; margin: 0; line-height: 0; font-size: 0; } div.single-image div.line div { display: inline-block; width: 300px; height: 6px; background: #da92f1; } /* ***** Roulette grid ***** */ .roulette-image.clickable { display: inline-block; } .roulette-image.clickable:hover { opacity: 0.7; display: inline-block; } div.wide-container { padding-bottom: 80px; margin: 0 auto; width: 950px; } div.wide-container.collections { width: 900px; } div.wide-container.normal { width: 900px; padding-bottom: 0; } div.compact-container { width: 800px; margin: 0 auto; text-align: left; } div.compact-container div.simple-line { height: 4px; background: rgba(92, 75, 112, 0.5); margin-bottom: 20px; } div.compact-container.padding-notice { padding-top: 20px; } html.phone div.compact-container.padding-notice { padding-top: 14px; } html.phone div.compact-container.padding-notice div.quick-notice { margin-left: 0; margin-right: 0; } div.bordered-box { box-shadow: inset 0 0 0 4px #39294a; border-radius: 6px; padding: 50px; text-align: center; } div.bordered-box.with-title { padding-top: 44px; } div.bordered-box h2 { padding: 0; } div.bordered-box p { margin-bottom: 20px; } div.fieldset-box {} div.fieldset-box span.title { display: block; margin-bottom: 3px; font-size: 18px; line-height: 28px; } div.fieldset-box input { margin: 8px 0 0 0; } div.fieldset-box div.half, #white-modal div.half { float: left; width: 50%; } div.fieldset-box div.third, #white-modal div.third { float: left; width: 33%; } div.fieldset-box div.third:last-child, #white-modal div.third:last-child { width: 34%; } div.fix-options-margin { margin: 4px -4px 0 -4px; } div.fix-options-margin-small { margin: 3px -3px 0 -3px; } div.fix-options-margin-large { margin: 3px -6px 0 -6px; } /* **************** ** ROULETTE MAIN ** **************** */ /* used for general displaying of roulettes */ div.roulettes { overflow: auto; } div.roulettes div.column { float: left; width: 300px; margin-right: 25px; } div.roulettes div.column:last-child { margin-right: 0; } div.roulettes a.image { display: block; margin-bottom: 25px; position: relative; overflow: hidden; perspective: 800px; -moz-perspective: 800px; -webkit-perspective: 800px; border-radius: 3px; max-height: 400px; } div.daily-roulette a.image { max-height: none !important; } div.roulettes a.image.excluded { background: #251735; } div.roulettes a.image.excluded img { opacity: 0.3; filter: blur(5px); } div.roulettes a.image.excluded:hover img { opacity: 1; filter: none; } div.roulettes a.btn-delete-roulette { font-size: 17px; line-height: 38px; text-align: center; display: block; color: #fff; background: rgba(247, 61, 120, 0.9); width: 38px; position: absolute; z-index: 5; border-radius: 3px 0 15px 0; box-shadow: 4px 4px 12px -5px rgba(167, 29, 68, 0.5); } @media only screen and (max-width: 700px) { div.roulettes a.btn-delete-roulette { font-size: 13px; line-height: 26px; width: 26px; border-radius: 2px 0 8px 0; } } div.roulettes a.btn-delete-roulette:hover { background: #fff; color: #f73d78; } div.roulettes a.image div.exclusion { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 6; } div.roulettes a.image div.exclusion span { position: absolute; display: block; top: 50%; margin-top: -24px; font-size: 14px; line-height: 14px; color: #fff; text-align: center; width: 100%; } div.roulettes a.image div.exclusion span strong { display: block; font-size: 20px; line-height: 40px; color: #ff9eb8; } div.roulettes a.image div.exclusion.reason span { line-height: 20px; padding: 0 10px; } html.phone div.roulettes a.image div.exclusion.reason span { padding: 0 4px; } div.roulettes a.image div.exclusion.yellow span strong { color: #ffd09e; } div.roulettes a.image:hover div.exclusion { opacity: 0; } div.roulettes a.image img { display: block; } /* square-roulettes: currently unused, but are pretty awesome (4 in a row) displays a square with perfect blurred roulette as background with the roulette contained on top of it usage: a.roulette.square-roulette div.overlay ... figure.contain (style=bg-img) div.scale figure.cover (style=bg-img) */ div.square-roulettes {} a.square-roulette { display: inline-block; margin: 0 18px 18px 0; position: relative; width: 224px; height: 224px; background: #281b38; overflow: hidden; /* commented because the blurred cover image cannot have border radius -- so dont use it anywhere */ /*border-radius: 3px;*/ } a.square-roulette:nth-child(4) { margin: 0 0 18px 0; } a.square-roulette div.btn { background: rgba(110, 75, 148, 0.8); color: #fff; line-height: 224px; text-align: center; font-size: 16px; font-weight: 500; position: absolute; z-index: 5; width: 100%; /*border-radius: 3px;*/ } a.square-roulette:hover div.btn { background: rgba(155, 108, 206, 0.8); } a.square-roulette div.btn i { margin: 0 0 0 12px;} a.square-roulette figure { background-position: center center; background-repeat: no-repeat; position: absolute; display: block; width: 100%; height: 100%; /*border-radius: 3px;*/ margin: 0; } a.square-roulette figure.contain { z-index: 2; background-size: contain; } a.square-roulette figure.cover { z-index: 1; background-size: cover; opacity: 0.25; -o-filter: blur(5px); -ms-filter: blur(5px); -moz-filter: blur(5px); -webkit-filter: blur(5px); filter: blur(5px); } a.square-roulette div.scale { position: absolute; width: 100%; height: 100%; -o-transform: scale(1.05); -ms-transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); } a.square-roulette div.overlay { /*border-radius: 3px;*/ border-radius: 0 !important; } /* used for categories (small covered roulette squares, 6 in a row) */ div.cover-roulettes {} a.cover-roulette { display: inline-block; margin: 0 16px 16px 0; position: relative; width: 145px; height: 145px; border-radius: 3px; background-position: center top; background-repeat: no-repeat; background-size: cover; } a.cover-roulette:nth-child(6) { margin: 0 0 16px 0; } a.cover-roulette div.btn { background: rgba(134, 90, 189, 0.8); background: rgba(193, 38, 153, 0.85); background: rgba(216, 51, 173, 0.85); color: #fff; line-height: 20px; text-align: center; font-size: 14px; font-weight: 500; position: absolute; z-index: 5; width: 100%; height: 100%; border-radius: 3px; } a.cover-roulette:hover div.btn { background: rgba(155, 108, 206, 0.8); background: rgba(162, 20, 126, 0.85); color: rgba(216, 51, 173, 1); background: rgba(255, 255, 255, 0.9); } a.cover-roulette div.btn i { font-size: 34px; line-height: 60px; margin-top: 26px; display: block; } a.cover-roulette div.overlay i.zoom { font-size: 36px !important; line-height: 50px !important; margin: -42px 0 0 -17px !important; transform: translateY(-20px) scale(0.8) !important; -moz-transform: translateY(-20px) scale(0.8) !important; -webkit-transform: translateY(-20px) scale(0.8) !important; } a.cover-roulette div.overlay div.rating { font-size: 14px !important; margin: 16px 0 0 0 !important; transform: translateY(20px) scale(0.8) !important; -moz-transform: translateY(20px) scale(0.8) !important; -webkit-transform: translateY(20px) scale(0.8) !important; } a.cover-roulette div.overlay div.rating i { margin-right: 5px !important; } a.cover-roulette div.overlay div.rating i.fa-thumbs-down { margin-left: 10px !important; } /* ******************* ** ROULETTE GENERAL ** ******************* */ /* a.roulette because it's used in multiple cases */ a.roulette div.overlay { opacity: 0; position: absolute; background: rgba(139, 84, 231, 0.6); background: rgba(155, 108, 206, 0.7); top: 0; left: 0; bottom: 0; right: 0; z-index: 5; text-align: center; border-radius: 3px; overflow: hidden; } a.roulette div.overlay i.zoom { font-size: 48px; color: #fff; line-height: 60px; position: absolute; left: 50%; top: 50%; margin: -52px 0 0 -23px; transform: translateY(-50px) scale(0.8); -moz-transform: translateY(-50px) scale(0.8); -webkit-transform: translateY(-50px) scale(0.8); text-shadow: 0 1px 15px rgba(41, 37, 45, 0.1), 0 1px 3px rgba(44, 41, 51, 0.3); } a.roulette div.overlay div.rating { font-size: 18px; color: #fff; text-shadow: 0 1px 15px rgba(41, 37, 45, 0.1), 0 1px 3px rgba(44, 41, 51, 0.3); line-height: 18px; font-weight: 700; position: absolute; left: 0; top: 50%; right: 0; text-align: center; margin: 24px 0 0 0; transform: translateY(50px) scale(0.8); -moz-transform: translateY(50px) scale(0.8); -webkit-transform: translateY(50px) scale(0.8); } a.roulette div.overlay div.rating i { margin-right: 7px; } a.roulette div.overlay div.rating i.fa-thumbs-down { margin-left: 15px; } a.roulette div.overlay div.likes { position: absolute; bottom: 0; left: 0; right: 0; height: 0; background: transparent; } a.roulette div.overlay div.likes div { height: 100%; position: absolute; transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); transform-origin: left bottom; -moz-transform-origin: left bottom; -webkit-transform-origin: left bottom; background: #b0ffba; opacity: 0.9; } a.roulette:hover div.overlay { opacity: 1; } div.roulettes .image:hover img { /* translateZ doesnt work when the parent has border-radius, so use scale instead transform: translateZ(50px); -moz-transform: translateZ(50px); -webkit-transform: translateZ(50px);*/ transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); } a.roulette:hover div.overlay i.zoom, a.roulette:hover div.overlay div.rating { transform: translateY(0) scale(1) !important; -moz-transform: translateY(0) scale(1) !important; -webkit-transform: translateY(0) scale(1) !important; } a.roulette:hover div.overlay div.likes { height: 5px; } a.roulette:hover div.overlay div.likes div { transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); } a.roulette.with-note { margin-bottom: 0 !important; } div.roulette-note { background: #170e23; border-radius: 0 0 5px 5px; padding: 15px 18px; font-size: 10px; line-height: 14px; color: #675c75; margin-bottom: 25px; position: relative; } div.roulette-note a.btn-edit-note { position: absolute; top: 0; right: 0; color: #d95889; font-size: 14px; line-height: 44px; width: 40px; text-align: center; display: inline-block; } div.roulette-note a.btn-edit-note:hover { color: #fff; } div.roulette-note span { display: block; /*font-style: italic;*/ } div.roulette-note span i { margin-right: 4px; } div.roulette-note p { color: #9c8fac; font-size: 12px; line-height: 22px; margin: 0 !important; padding: 4px 0 0 0 !important; } html.phone div.roulette-note { border-radius: 0 0 2px 2px; padding: 8px; font-size: 10px; line-height: 14px; } html.phone div.roulette-note a.btn-edit-note { font-size: 12px; line-height: 28px; width: 24px; } html.phone div.roulette-note span { font-size: 7px; line-height: 12px; } html.phone div.roulette-note span i { margin-right: 3px; } html.phone div.roulette-note p { font-size: 8px; line-height: 12px; padding-top: 2px !important; } /* ***** media queries ***** */ #top .random.numbers-12 span { margin-right: 11px; font-size: 28px; } #top .random.numbers-11 span { margin-right: 12px; font-size: 28px; } #top .random.numbers-10 span { margin-right: 13px; font-size: 28px; } @media only screen and (max-width: 1400px) { #top .random.numbers-12 span { margin-right: 9px; font-size: 26px; } #top .random.numbers-11 span { margin-right: 10px; font-size: 27px; } #top .random.numbers-10 span { margin-right: 11px; font-size: 28px; } #top .random.numbers-9 span { margin-right: 14px; font-size: 28px; } #top .random.numbers-8 span { margin-right: 16px; font-size: 28px; } } @media only screen and (max-width: 1300px) { #top .random.numbers-12 span { margin-right: 7px; font-size: 25px; } #top .random.numbers-12 strong { margin-left: 2px; } #top .random.numbers-11 span { margin-right: 8px; font-size: 26px; } #top .random.numbers-11 strong { margin-left: 3px; } #top .random.numbers-10 span { margin-right: 10px; font-size: 27px; } #top .random.numbers-10 strong { margin-left: 4px; } #top .random.numbers-9 span { margin-right: 12px; font-size: 28px; } #top .random.numbers-9 strong { margin-left: 4px; } #top .random.numbers-8 span { margin-right: 14px; font-size: 28px; } #top .random.numbers-8 strong { margin-left: 5px; } #top .random.numbers-7 span { margin-right: 16px; font-size: 28px; } #top .random.numbers-7 strong { margin-left: 5px; } } @media only screen and (max-width: 1200px) { /*#top .random span { line-height: 68px; }*/ #top .random.numbers-12 span { margin-right: 2px; font-size: 22px; } #top .random.numbers-12 strong { margin-left: 1px; } #top .random.numbers-11 span { margin-right: 3px; font-size: 22px; } #top .random.numbers-11 strong { margin-left: 2px; } #top .random.numbers-10 span { margin-right: 4px; font-size: 22px; } #top .random.numbers-10 strong { margin-left: 2px; } #top .random.numbers-9 span { margin-right: 4px; font-size: 22px; } #top .random.numbers-9 strong { margin-left: 3px; } #top .random.numbers-8 span { margin-right: 6px; font-size: 24px; } #top .random.numbers-8 strong { margin-left: 3px; } #top .random.numbers-7 span { margin-right: 7px; font-size: 24px; } #top .random.numbers-7 strong { margin-left: 4px; } #top .random.numbers-6 span { margin-right: 8px; font-size: 26px; } #top .random.numbers-6 strong { margin-left: 5px; } } /*@media only screen and (max-width: 1100px) { #top .random.numbers-9 span, #top .random.numbers-8 span, #top .random.numbers-7 span { margin-right: 26px; font-size: 26px; line-height: 58px; } #top .random.numbers-9 strong, #top .random.numbers-8 strong, #top .random.numbers-7 strong { text-align: center; position: absolute; margin: 33px 0 0 -33px; } }*/ @media only screen and (max-width: 800px) { #top .random span { margin-right: 12px; } #top .random strong { margin-left: 3px; } #top .random.numbers-12 span, #top .random.numbers-11 span, #top .random.numbers-10 span, #top .random.numbers-9 span, #top .random.numbers-8 span, #top .random.numbers-7 span, #top .random.numbers-6 span { margin-right: 16px; font-size: 18px; line-height: 38px; } #top .random.numbers-12 strong, #top .random.numbers-11 strong, #top .random.numbers-10 strong, #top .random.numbers-9 strong, #top .random.numbers-8 strong, #top .random.numbers-7 strong, #top .random.numbers-6 strong { text-align: center; position: absolute; margin: 22px 0 0 -26px; } } /* desktop & tablets: make the page auto-scale to width */ @media only screen and (max-width: 1000px) { div.banner div.table { width: 100%; } div.banner a.rounded-btn { right: 20px; } div.blurred-banner a.btn-side { width: 42px; } a#btn-jump { display: none; } div.wide-container.phone-padding { width: 100%; padding: 0 20px 80px 20px; } /* pretty much solely for categories page */ div.wide-container { width: 100% !important; padding: 0 5px 80px 5px; } div.wide-container.collections { padding: 0 30px 80px 30px; } div.wide-container.normal { padding: 0 30px; } div.filter-settings { right: 20px; } a.cover-roulette { margin: 0 2% 16px 0; width: 15%; height: 130px; } div.roulettes div.column { width: 33%; margin-right: 0; padding: 0 5px; } div.roulettes div.column img { width: 100%; } div.roulettes div.column:nth-child(2) { width: 34%; } div.roulettes a.image { margin-bottom: 10px; } div.roulette-note { margin-bottom: 10px; } #filter.shown { padding-top: 75px; } div.filter-view { width: 100%; padding: 0 20px; } .filtering table { width: 100%; } .filtering table td { display: block; } .filtering table td.label { font-size: 16px; line-height: 24px; } .filtering table td.label, .filtering table td.options { text-align: center; } .filtering table td.options { padding: 10px 10px 40px 10px; } #arrow { left: 50%; margin-left: -46px; bottom: 70px; } #note { font-size: 12px; margin-left: 0 !important; left: 0; right: 0; bottom: 0; width: 100%; line-height: 22px; text-align: center; border-radius: 0; } div.info p { width: 100%; max-width: 700px; padding: 0 30px; } p.no-max-width { padding: 0 !important; max-width: none !important; } div.explanation p { padding: 0; } div.info p.compact { padding: 0; } div.info.boxed p { padding: 0; } div.boxed div.item img, div.boxed div.item canvas { max-width: 100% !important; height: auto !important; } div.big-container { width: 100% !important; padding-top: 10px; } div.big-container + div.wide-container.collections { padding-top: 20px; } div.big-container p { padding-top: 30px; } div.big-container h2.more-spacing-top { padding-top: 22px !important; } div.big-container h2 + p { padding-top: 4px; } div.big-container a.btn-random-favorite { right: 20px; } div.boxed div.dark-box { margin: 0 10px 30px 10px !important; } html.phone div.boxed div.dark-box { margin: 8px 8px 10px 8px !important; margin: 0 auto !important; background: transparent !important; border-top: 0 !important; padding: 0 20px 60px 20px; padding-top: 0 !important; } html.phone div.boxed div.dark-box p { font-size: 14px; line-height: 24px; } /*html.phone div.dark-box h2 { padding: 0 0 10px 0; font-size: 18px; line-height: 24px; }*/ } @media only screen and (max-width: 900px) { div.filter-view { width: 100%; padding: 0 20px; text-align: left; } div.filtering.old div.filter-view { text-align: center; } div.filter-view div.filter-row { position: static; display: inline; margin-top: 0; } div.filter-view span:first-child + div.options.old { margin-bottom: 30px; } div.filter-view div.filter { margin: 20px; } div.filter-row div.filter:first-child { position: relative; } div.filter-row div.filter:last-child { position: relative; } div.dark-box div.patreon-badge { margin-top: 0; margin-bottom: 0; } } /* desktop & tablets: make the tables/forms/smaller texts auto-scale to width if these rules are in the above query, it happens too early */ @media only screen and (max-width: 840px) { a.cover-roulette { width: 32%; height: 150px; } a.cover-roulette:nth-child(3) { margin-right: 0; } div.compact-container { width: 100%; padding: 0 20px; } div.regular table { width: 100%; text-align: center; } div.regular table td { display: block; } div.regular table td.label { font-size: 16px; line-height: 24px; } div.regular table td.label, div.regular table td.options { text-align: center; width: auto; } div.regular table td.options { padding: 10px 10px 40px 10px; } div.small-container { width: 100%; padding: 0 30px; } div.small-container.colored-container { padding: 45px 30px; } div.explanation div.item div.number.image { right: 30px; left: auto !important; } div.smaller-text p { padding: 0; max-width: none; } h3 { margin: 30px 0 10px 0; } div.medium-container { width: 100%; padding: 0 30px; } div.medium-container.colored-container { padding: 45px 30px; } div.info p.compact { padding: 0 30px; } form.small { width: 100%; padding: 0 30px; } form.medium { width: 100%; padding: 0 30px; } div.big-container a.btn-random-favorite { display: block; position: static; margin: -14px auto 40px auto; width: 60%; } #white-modal { width: 100%; min-width: 660px; } #white-modal.compact { min-width: 500px; } #footer { line-height: 30px; padding: 20px 0; } #footer a { font-size: 12px; margin: 0 20px 0 0; } #footer a i { width: 24px; text-align: left; } #footer div.right { float: none; display: inline-block; } #footer div.right a { margin-right: 20px; } div.dark-box figure img { max-width: 80%; } div.dark-box img.side-image { margin-top: 0; } div.dark-box div.patreon-badge { float: none; display: block; margin: 8px auto 20px auto; } html.mobile div.dark-box div.patreon-badge { margin-bottom: 18px; } } @media only screen and (max-width: 700px) { div.big-container a ~ i.user-icon, div.big-container strong ~ i.user-icon { font-size: 12px; line-height: 12px; margin-left: 4px; } div.explanation div.details { left: 20px; } div.boxed div.explanation.big-container div.item { padding: 20px; } div.big-container.explanation { padding-top: 0px; } div.explanation div.main { margin: 50px 0 0 52px; min-height: 18px; } div.explanation div.main p { font-size: 12px; line-height: 19px; } div.explanation div.main div.item-title { font-size: 14px; line-height: 22px; margin: 0 0 2px 0; } div.boxed div.explanation.big-container div.item:after { height: 20px; margin: 0 -20px -20px -20px; } div.explanation div.main textarea + a.rounded-btn { width: 50%; margin-left: 50%; } div.dark-box figure img { max-width: 100%; } div.dark-box img.side-image { float: none; display: block; margin: 8px auto 28px auto; } div.dark-box h3.cursive { font-size: 28px; line-height: 40px; } div.dark-box div.uppercase-title { font-size: 13px; line-height: 26px; } div.dark-box div.red-centered-line { margin: 14px auto; } div.dark-box div.banner-huge { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15); } div.dark-box div.banner-huge i { font-size: 32px; line-height: 80px; width: 80px; } div.dark-box div.banner-huge span { font-size: 42px; line-height: 80px; } div.dark-box div.banner-huge span sup { font-size: 26px; line-height: 40px; } div.dark-box div.banner-subtitle { margin-top: 14px; font-size: 15px; line-height: 24px; font-weight: 700; } div.dark-box div.banner-line { height: 3px; width: 40px; margin: 14px 0; } a.btn-thicc.patreon { width: 100%; padding: 10px 40px; max-width: 300px; } a.btn-thicc.patreon img { max-width: 200px; } } @media only screen and (max-width: 500px) { #top div.small-menu { right: 0; } #top div.small-menu a { padding: 0 10px; } #top div.small-menu a div.middle { font-size: 13px; } #top div.small-menu a div.middle i { font-size: 16px; margin-right: 5px; } #top div.small-menu a.button div.middle { padding: 8px 20px; font-size: 13px; } #top div.small-menu a.button div.middle i { font-size: 16px; margin-right: 5px; } #top div.small-menu a.avatar div.middle { font-size: 13px; } #top div.small-menu a.avatar div.middle i { margin: 0 2px 0 5px; font-size: 16px; } #top div.small-menu.unauth #btn-filter { margin-right: 14px; } div.dark-box img.side-image { max-width: 70%; } div.dark-box figure { margin: 30px 0; } html.phone div.boxed div.dark-box p { font-size: 13px; line-height: 22px; } } #isMobilePortrait { display: none; } #isMobileLandscape { display: none; } /* now handled in js @media only screen and (max-width: 960px) { #top h1 { display: none; } }*/ /*@media only screen and (max-width: 767px), only screen and (-moz-min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min-device-pixel-ratio: 2) and (max-width: 767px) {*/ /* orientation is only defined on phones and tablets, and tablets start their resolution at 768 so this query applies to handheld (phones) for portrait and landscape mode EDIT: apparently not kek, desktops has orientation: landscape. Use php mobile detect for now @media only screen and (max-width: 767px) and (orientation: portrait), only screen and (max-width: 767px) and (orientation: landscape) { */ /* ***** Phone ***** */ /* TODO - zoomen doen op nieuwe parent van img en dan die parent containen */ /* @media only screen and (max-width: 700px) { #isMobilePortrait { display: block; } } */ html.phone #isMobilePortrait { display: block; } html.phone body { /*font-size: 12px; line-height: 12px;*/ min-width: initial; /* fixes all chrome/safari mobile browsers */ min-width: auto; /* fixes all windows mobile browsers */ } html.phone div.phone-padding { padding: 0 16px 60px 16px !important; } html.phone p.description { padding: 0; margin: 0 0 20px 0; } html.phone fieldset.general legend { font-size: 24px; line-height: 30px; } html.phone div.compact-container fieldset.general legend { font-size: 18px; line-height: 26px; } html.phone .clear-big { height: 30px; } html.phone a.cover-roulette { width: 32%; height: 100px; margin: 0 2% 2% 0; } html.phone a.cover-roulette:nth-child(3), html.phone a.cover-roulette:nth-child(6) { margin-right: 0; } html.phone a.cover-roulette div.btn i { font-size: 18px; line-height: 40px; margin-top: 18px; } html.phone a.cover-roulette div.btn { line-height: 18px; font-size: 10px; } /* FILTERS */ html.phone #filter { padding: 20px 0 60px 0; background: #2e2042; } html.phone div.filters { padding-top: 30px; } html.phone div.filter-view span.title.biggest { font-size: 24px; line-height: 30px; padding-left: 0; } html.phone div.filter-settings { top: -4px; right: 16px; } html.phone div.filter-settings span.updated { font-size: 8px; margin-right: 4px; } html.phone div.filter-settings a { border-radius: 6px; font-size: 16px; margin-left: 6px; } html.phone #filter div.options, html.phone #filter div.options-multi { margin: 0 -3px; } html.phone div.options div.opt { padding: 2px; margin: 1px !important; } html.phone div.options div.opt span.name { padding: 10px 12px; font-size: 12px; line-height: 12px; border-radius: 3px; } html.phone div.options-multi div.opt { margin: 1px; box-shadow: 0 0 0 3px transparent; border-radius: 5px; padding: 2px; } html.phone div.options-multi div.opt div { width: 28px; height: 32px; } html.phone div.options-multi div.opt div span i { font-size: 12px; line-height: 32px; height: 32px; width: 20px; } html.phone div.options-multi div.opt span.name { padding: 10px 10px; font-size: 12px; line-height: 12px; } html.phone div.options-multi div.opt span.amount, html.phone div.options-multi div.opt span.new, html.phone div.options div.opt span.amount, html.phone div.options div.opt span.new { margin-left: 3px; margin-top: -2px; font-size: 7px; } html.phone div.options-multi div.opt span.new, html.phone div.options div.opt span.new { font-size: 6px; } html.phone .clear-large { height: 30px; } html.phone div.options div.separator, html.phone div.options-multi div.separator { margin: 18px 2px 0 2px; display: none; } html.phone div.options div.separator div, html.phone div.options-multi div.separator div { margin: 0 1px; width: 2px; height: 6px; } html.phone div.filter-header { margin: 2px 20px 0 0; margin: 2px 0 8px 0; background: rgba(92, 75, 112, 0.5); border-radius: 3px; background: -moz-linear-gradient(left, rgba(92,75,112,0) 0%, rgba(92,75,112,0.5) 100%); background: -webkit-linear-gradient(left, rgba(92,75,112,0) 0%,rgba(92,75,112,0.5) 100%); background: linear-gradient(to right, rgba(92,75,112,0) 0%,rgba(92,75,112,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005c4b70', endColorstr='#805c4b70',GradientType=1 ); } html.phone div.filter-header div.button { margin: 7px 0 0 0; width: 18px; height: 18px; border-radius: 4px; font-size: 12px; line-height: 18px; right: 16px; width: 30px; font-size: 16px; background: transparent !important; } html.phone div.filter-view div.filter-header:hover fieldset legend, html.phone div.filter-view div.filter-header fieldset legend { color: #bfb9c7; } html.phone div.filter-view div.filter-header:active fieldset legend, html.phone div.filter-view div.filter-header.open fieldset legend { color: #fff; } html.phone div.filter-header:hover div.button, html.phone div.filter-header div.button { color: #bfb9c7; } html.phone div.filter-header:active div.button, html.phone div.filter-header.open div.button { color: #fff; } html.phone div.filter-view fieldset { margin: 0; border-top: 12px solid rgba(92, 75, 112, 0.3); border-top: 0 !important; } html.phone div.filter-view div.filter-header:hover fieldset, html.phone div.filter-view div.filter-header.open fieldset { border-color: rgba(92, 75, 112, 0.6); } html.phone div.filter-view fieldset legend { font-size: 18px; line-height: 32px; padding: 0 10px 0 0; font-size: 16px; line-height: 32px; padding: 0 10px 0 0; } html.phone div.filter-view p { margin: 0; font-size: 11px !important; line-height: 19px !important; } html.phone div.filter-view div.filter-box { margin-left: 0; } html.phone div.filter-view span.title.big { padding-left: 0px; margin-bottom: 2px; font-size: 14px; line-height: 18px; } html.phone div.filter-view span.title.big i { font-size: 12px; display: none; /* popups are disabled on phone, so show remove this when enabled again */ } html.phone a#btn-jump { bottom: 75px; right: 16px; width: 34px; height: 34px; display: block; } html.phone a#btn-jump span, html.phone a#btn-jump:hover span { width: 34px; height: 34px; background: rgba(86, 72, 103, 0.6); color: rgba(194, 180, 210, 0.5); font-size: 20px; line-height: 34px; } html.phone a#btn-jump span i { line-height: 32px; } html.phone a#btn-jump.up span { background: rgba(243, 236, 255, 0.6); color: rgba(0, 0, 0, 0.7); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } html.phone a#btn-jump span:first-child i { line-height: 36px; } html.phone a#btn-jump:active span { background: rgba(163, 147, 183, 0.4); color: #fff; } /* general */ html.phone div.wide-container { width: 100%; padding: 0 0 60px 0; } html.phone a.roulette div.overlay, html.phone div.roulettes a.image { border-radius: 2px; } html.phone div.roulettes a.image div.exclusion span { margin-top: -22px; font-size: 9px; line-height: 14px; padding: 0px 10px; color: rgba(255, 255, 255, 0.9); } html.phone div.roulettes a.image div.exclusion span strong { font-size: 12px; line-height: 20px; } html.phone div.roulettes a.image.excluded img { filter: blur(2px); opacity: 0.4; } html.phone div.roulettes a.image.excluded:hover img { filter: none; opacity: 1; } html.phone div.filtering.old div.filters { padding-top: 40px; } html.phone div.filtering.old div.filters span.title.bigger.old { text-align: left; padding-left: 0; } html.phone div.filtering.old div.filters span.title.bigger.old + div.options.old { text-align: left; margin-bottom: 20px !important; } html.phone div.dark-box { margin: 0 0 10px 0; padding: 22px 20px; border-radius: 0 6px 6px 0; border-left: 2px solid #F73C78; } html.phone div.boxed div.dark-box { border-left: 0; border-radius: 6px; padding: 22px 40px; } @media only screen and (max-width: 500px) { html.phone div.boxed div.dark-box { padding: 22px 20px; } } html.phone div.dark-box div.line { margin: 14px 0; } html.phone div.checkbox-explanations { margin-top: 20px; } html.phone div.checkbox-explanations div.item { margin-top: 20px; min-height: 30px; } html.phone div.checkbox-explanations div.item p { padding-left: 10px !important; } html.phone div.checkbox-explanations div.item div.symbol i { font-size: 13px; line-height: 30px; height: 30px; width: 30px; } html.phone div.checkbox-explanations div.item div.symbol i:before { margin: 0; } html.phone div.dark-box h2 { padding: 0 0 10px 0; font-size: 18px; line-height: 24px; } html.phone div.dark-box a.btn-close-box { width: 40px; height: 40px; line-height: 40px; font-size: 18px; } html.phone div.dark-box a.rounded-btn { width: 100%; } /*html.phone div.no-results { padding: 20px 0 80px 0; }*/ html.phone #top a i.small-icon { font-size: 12px !important; top: -8px; left: 15px; } html.phone #filter div.filter-overlay h3 { font-size: 22px; line-height: 30px; } html.phone #filter div.filter-overlay div.line { margin: 14px 0; } html.phone #filter div.filter-overlay p { font-size: 12px; line-height: 22px; } html.phone #filter div.filter-overlay a.rounded-btn.normal { margin-top: 30px; width: 60%; } html.phone #filter div.filter-overlay a.rounded-btn + a.rounded-btn { margin-top: 6px; margin-left: 0; } html.phone #filter div.filter-overlay div.content { margin-top: -172px; } html.phone #filter div.hide-filter { left: 10px; top: 18px; text-align: left; z-index: 1; display: inline-block; right: initial; right: auto; } html.phone #filter.inline div.hide-filter { display: none; } html.phone #filter a.btn-hide-filter { font-size: 12px; line-height: 22px; } html.phone label.medium { line-height: 20px; font-size: 11px; } html.phone p { font-size: 14px; line-height: 24px; padding: 0 30px; } html.phone div.text-item p { font-size: 13px; } html.phone p.statistics { margin: 10px auto 26px auto; } html.phone p.statistics.bigger { font-size: 13px; line-height: 22px; } html.phone p.statistics.biggest { font-size: 12px; line-height: 20px; } html.phone div.search-box { padding: 0 3px; margin-bottom: 6px; padding: 0 15px; margin-bottom: 15px; } html.phone div.search-box div.left { float: none; padding-right: 0; } html.phone div.search-box div.right { float: none; text-align: center; padding-bottom: 30px; } html.phone div.sort-dropdown div.tab, html.phone div.sort-dropdown a.tab { line-height: 34px; padding: 0 14px 0 16px; } html.phone div.sort-tabs div.tab, html.phone div.sort-tabs a.tab, html.phone div.sort-dropdown div.tab, html.phone div.sort-dropdown a.tab { font-size: 12px; } html.phone div.sort-dropdown a.btn-ellipsis { margin-left: 4px; padding: 0 16px 0 14px !important; } html.phone input.rounded, html.phone textarea.rounded, html.phone select.rounded { font-size: 14px; padding: 14px 52px 14px 14px; } html.phone input.rounded + i { line-height: 56px; } html.phone form i.floating { margin-right: -90px; } html.phone form a.rounded-btn { float: none; display: block; width: 100%; } html.phone a.rounded-btn.half { margin-left: 0; width: 100%; } html.phone a.rounded-btn.small { font-size: 11px; height: 36px; line-height: 36px; } /* html.phone div.options div, html.phone div.options a, html.phone #white-modal table td div.options a { font-size: 12px !important; line-height: 12px !important; padding: 10px 18px !important; margin: 4px !important; } */ html.phone div.filter-view { width: 100%; padding: 0 16px; text-align: left; } html.phone div.filtering.old div.filter-view { text-align: center; } html.phone div.filter-view div.filter-row { position: static; display: inline; margin-top: 0; } html.phone div.filter-view span:first-child + div.options { margin-bottom: 30px; } html.phone div.filter-view div.filter { margin: 15px; } html.phone div.filter-view div.filter span.title { text-align: center; margin-bottom: 2px; } html.phone div.filter-view div.filter i.icon { display: none; } html.phone div.filter-row div.filter:first-child { position: relative; } html.phone div.filter-row div.filter:last-child { position: relative; } /*html.phone.openMenu #container, html.phone.openMenu #top { transform: translateX(260px); -moz-transform: translateX(260px); -webkit-transform: translateX(260px); } html.phone.openMenu #top { left: 0; }*/ html.phone h2.with-subtitle { padding-bottom: 10px; } html.phone p.compact { font-size: 14px; padding: 0 30px !important; } html.phone p.ultra-compact { font-size: 14px; padding: 0 50px !important; } html.phone div.small-container { width: 100%; padding: 0 30px; } html.phone div.small-container.colored-container { padding: 45px 30px; } html.phone div.medium-container { width: 100%; padding: 0 30px; } html.phone div.medium-container.colored-container { padding: 45px 30px; } html.phone div.smaller-text p { font-size: 13px; line-height: 22px; padding: 0; } html.phone h3 { margin: 40px 0 20px 0; } html.phone div.news { position: static; background: #2e2042; /*#2a1b3b*/ } html.phone div.banner { height: 200px; } html.phone div.banner div.profile div.avatar { width: 50px; height: 50px; } html.phone div.banner div.profile h2 { padding: 0 0 0 12px; line-height: 50px; font-size: 22px; } html.phone div.banner div.profile span.user-icon { line-height: 50px; } html.phone div.banner div.main { bottom: 50px; } html.phone div.banner div.tabs { height: 60px; background: transparent; } html.phone div.banner div.tabs a { font-size: 10px; letter-spacing: 0.05em; line-height: 20px; height: 60px; padding: 0 14px 8px 14px; border-bottom-width: 2px; margin: 0 2px; width: 33%; border-color: rgba(255, 255, 255, 0); } html.phone div.banner div.tabs a:nth-child(1) { margin-left: 0; } html.phone div.banner div.tabs a:nth-child(3) { margin-right: 0; } html.phone div.banner div.tabs a i { margin-right: 0; display: block; font-size: 18px; line-height: 30px; } html.phone a.rounded-btn { font-size: 12px; height: 48px; line-height: 48px; } html.phone a.rounded-btn.huge { font-size: 18px; } html.phone div.info { padding: 45px 0 45px 0; background-image: none; } html.phone div.info h2 { padding-top: 0; } html.phone div.info p { width: 100%; } html.phone div.info.boxed { padding: 0 0 45px 0; } html.phone div.colored-container { border-radius: 0; } html.phone div.info.boxed { padding: 30px 0 0 0; } html.phone #modal-body { margin: 10px; } html.phone #white-modal { width: 100%; min-width: 280px; max-width: none; border-radius: 3px; padding: 20px; } html.phone #white-modal a.btn-close { width: 44px; height: 50px; line-height: 50px; font-size: 21px; } html.phone #white-modal table td span.title { text-align: center; padding: 0;} html.phone #white-modal table td { padding: 0; } html.phone #white-modal table td span.title i { display: none; } html.phone #white-modal p.subtitle { font-size: 13px; line-height: 20px; padding: 0; } html.phone fieldset.general.white { margin-top: 24px; } html.phone fieldset.general.white legend { font-size: 16px; line-height: 20px; padding: 0 10px 2px 0; } html.phone #white-modal div.half, html.phone #white-modal div.third { float: none; margin-bottom: 24px; width: auto; } html.phone #white-modal div.half + div.half, html.phone #white-modal div.third + div.third + div.third { margin-bottom: 0; } /*html.phone div.fix-options-margin-small { margin: 0 -3px 0 -3px; } html.phone #white-modal div.half + div.clear { display: none; }*/ html.phone div.comments { margin-right: -20px; } html.phone div.comment-box { min-height: 52px; } html.phone div.comment-box div.avatar { width: 52px; } html.phone div.comment-box div.avatar img { max-width: 40px !important; } html.phone div.comment-box div.message { margin-left: 52px; padding-right: 20px; } html.phone div.comment-box div.message p { font-size: 12px !important; line-height: 20px !important; padding: 0; margin-top: 2px; } html.phone div.comment-box div.message span.username { font-size: 14px !important; } html.phone div.comment-box div.message span.time { font-size: 11px; } html.phone div.comment-box a.btn-fix-feedback { margin-right: 6px; } html.phone div.comment-box span.fixed + span.time { display: block; margin: 0; } html.phone textarea.small { max-height: 100px; font-size: 12px; line-height: 20px; padding: 8px 12px; } html.phone .clear-larger { height: 30px; } html.phone div.explanation p { padding: 0; } html.phone div.info p.compact { padding: 0; } html.phone div.info.boxed p { padding: 0; } html.mobile div.explanation div.item div.number.image { margin-top: -25px !important; width: 50px !important; } html.phone h2 { padding: 45px 0 25px 0; font-size: 30px; } html.phone div.bordered-box { padding: 30px; } html.phone div.bordered-box.with-title { padding-top: 34px; } html.phone div.bordered-box h2 { font-size: 20px; line-height: 24px; padding-bottom: 0; } html.phone div.bordered-box p { padding: 0 10px; } html.phone div.bordered-box a.rounded-btn { width: 100%; } html.phone div.bordered-box i.huge-icon { font-size: 70px; line-height: 120px; } html.phone div.fieldset-box span.title { font-size: 14px; line-height: 20px; } html.phone div.fieldset-box div.half { float: none; width: auto; } html.phone div.fieldset-box div.half + div.half { margin-top: 30px; } html.phone div.compact-container p.no-max-width { font-size: 12px; line-height: 20px; } div.explanation p { padding: 0; } /* todo: shouldnt this be for mobile? */ html.phone div.info p.compact { padding: 0 30px; } html.phone form.small { width: 100%; padding: 0 30px; } html.phone form.medium { width: 100%; padding: 0 30px; } html.phone div.big-container { width: 100% !important; padding-top: 6px; } html.phone div.big-container + div.wide-container.collections { padding-top: 2px !important; } html.phone div.big-container p.compact { padding: 24px 50px 0 50px !important; margin-bottom: 30px; } html.phone div.big-container h2.more-spacing-top { padding-top: 10px !important; } html.phone div.big-container h2 + p.compact { padding-top: 4px !important; } html.phone div.big-container h2 { padding-top: 0; } html.phone div.big-container h2.with-buttons { line-height: 40px; } html.phone div.big-container a.btn-random-favorite { display: block; position: static; margin: -14px auto 40px auto; width: 60%; } html.phone h2.normal { font-size: 20px; line-height: 60px; padding-top: 8px; } html.phone h2.colored.normal { line-height: 50px; } html.phone h2.colored { font-size: 22px; } html.phone h2.colored + div.line { width: 60px; margin: 4px auto 12px auto; } html.phone div.big-container a.rounded-btn.top-right, html.phone div.big-container a.rounded-btn.top-left { position: static; line-height: 32px; height: 32px; font-size: 10px; margin: 0 5px; } html.phone table.simple { margin-top: 4px; } html.phone table.simple td { font-size: 12px; line-height: 40px; padding: 10px 5px; } html.phone table.simple th.more-spacing-left, html.phone table.simple td.more-spacing-left { padding-left: 10px; } html.phone table.simple th { font-size: 9px; line-height: 34px; padding: 0 5px; } html.phone table.simple td:first-child, html.phone table.simple th:first-child { padding-left: 10px; } html.phone table.simple td:last-child, html.phone table.simple th:last-child { padding-right: 10px; } html.phone table.simple td img { max-height: 40px; max-width: 40px; } html.phone table.simple td.multi-line { line-height: 20px; } html.phone span.tiny-status { margin: -2px 0 0 4px; font-size: 8px; } html.phone div.big-container a ~ i.user-icon, html.phone div.big-container strong ~ i.user-icon { font-size: 12px; line-height: 12px; margin-left: 4px; } html.phone div.big-container p.normal-subtitle { margin: 18px auto 0 auto; padding: 0 0 6px 0; } html.phone div.explanation div.details { left: 14px; } html.phone div.boxed div.explanation.big-container div.item { padding: 14px; } html.phone div.big-container.explanation { padding-top: 0px; } html.phone div.explanation div.main { margin: 44px 0 0 52px; min-height: 18px; } html.phone div.explanation div.main p { font-size: 12px; line-height: 19px; } html.phone div.explanation div.main div.item-title { font-size: 14px; line-height: 22px; margin: 0 0 2px 0; } html.phone div.boxed div.explanation.big-container div.item:after { height: 14px; margin: 0 -14px -14px -14px; } html.phone div.explanation.white div.number { margin-top: -14px; width: auto; left: 126px; border: 0; } html.phone div.explanation.white div.item-title { margin-left: 34px; } html.phone div.explanation div.main textarea + a.rounded-btn { width: 50%; margin-left: 50%; } html.phone i.huge-icon.on-dark { font-size: 80px; line-height: 120px; } html.phone p.huge-icon-text { font-size: 12px; line-height: 20px; } html.phone div.big-container.huge-icon-padding { padding-top: 40px; } html.phone div.item-title { font-size: 19px; line-height: 24px; } html.phone .padding-top { padding-top: 35px !important; } html.phone #footer { line-height: 30px; padding: 20px 0; } html.phone #footer a { font-size: 12px; margin: 0 20px 0 0; } html.phone #footer a i { width: 24px; text-align: left; } html.phone #footer div.right { float: none; display: inline-block; } html.phone.openMenu .btn-float { opacity: 0; } html.phone #menu div.bottom { height: 108px; } html.phone #menu div.bottom footer { font-size: 11px; padding: 12px 20px; line-height: 28px; } html.phone #menu div.bottom footer a { line-height: 26px; } html.phone #menu div.subtitle { line-height: 22px; font-size: 10px; padding-left: 31px; } html.phone #menu a.page { line-height: 34px; font-size: 14px; } html.phone #menu a.page i { width: 50px; font-size: 16px; line-height: 32px; height: 34px; } html.phone #top .btn.active i.overlay { margin-top: -12px; } html.phone #menu { top: 55px; width: 280px; transform: translateX(-280px); -moz-transform: translateX(-280px); -webkit-transform: translateX(-280px); } html.phone #menu .title { height: 55px; line-height: 55px; } html.phone #top { height: 55px; } html.phone #top h1 { font-size: 21px; line-height: 55px; padding-left: 0; text-align: center; display: none; } html.phone #top .btn { font-size: 21px; padding: 0 20px; line-height: 55px; height: 55px; } html.phone #top .btn-close { display: none; opacity: 0; } html.phone.modalOpen #top .btn-close { display: block; opacity: 1; } html.phone.modalOpen #top .btn-menu { display: none; } html.phone #top .random { /*left: 0; why was this here? */ top: 0; height: 55px; /*background: rgba(201, 1, 78, 0.3);*/ text-align: right; padding-right: 10px; } html.phone #top .random span { margin-right: 0; line-height: 55px; font-size: 17px; } html.phone #top .random span:last-child { margin-right: 0; } html.phone #top .random span strong { margin-left: 3px; width: 22px; } html.phone #top .random a.more { line-height: 55px; font-size: 24px; margin-right: 12px; padding: 0 5px; } html.phone #top .random a.more:first-child { margin-right: 8px; } html.phone #top .random.numbers-12 span, html.phone #top .random.numbers-11 span, html.phone #top .random.numbers-10 span, html.phone #top .random.numbers-9 span, html.phone #top .random.numbers-8 span, html.phone #top .random.numbers-7 span, html.phone #top .random.numbers-6 span, html.phone #top .random.numbers-5 span { margin-right: 10px; font-size: 16px; line-height: 30px; } html.phone #top .random.numbers-12 span, html.phone #top .random.numbers-11 span, html.phone #top .random.numbers-10 span { font-size: 14px; } html.phone #top .random.numbers-12 strong, html.phone #top .random.numbers-11 strong, html.phone #top .random.numbers-10 strong, html.phone #top .random.numbers-9 strong, html.phone #top .random.numbers-8 strong, html.phone #top .random.numbers-7 strong, html.phone #top .random.numbers-6 strong, html.phone #top .random.numbers-5 strong { text-align: center; position: absolute; margin: 22px 0 0 -22px; } html.phone #top .random.numbers-12 strong, html.phone #top .random.numbers-11 strong, html.phone #top .random.numbers-10 strong { margin: 22px 0 0 -20px; } html.phone #top .random.numbers-7, html.phone #top .random.numbers-6, html.phone #top .random.numbers-5 { padding-right: 6px; } html.phone #top .random.numbers-7 span { margin-right: 8px; } html.phone #top .random.numbers-6 span, html.phone #top .random.numbers-5 span, { margin-right: 9px; } html.phone #top .random.numbers-12, html.phone #top .random.numbers-11, html.phone #top .random.numbers-10, html.phone #top .random.numbers-9, html.phone #top .random.numbers-8 { padding-right: 5px; } html.phone #top .random.numbers-9 span, html.phone #top .random.numbers-8 span { margin-right: 7px; } html.phone #top .random.numbers-12 span, html.phone #top .random.numbers-11 span, html.phone #top .random.numbers-10 span { margin-right: 5px; } html.phone #modal-more { margin: -120px 0 0 -175px; width: 350px; } html.phone #modal-more .selector a.minus { left: 20px;} html.phone #modal-more .selector a.plus { right: 20px;} html.phone div.roulettes div.column { width: 33%; margin-right: 0; padding: 0 3px; } html.phone div.column img { width: 100%; } html.phone div.roulettes div.column:nth-child(2) { width: 34%; } html.phone div.roulettes a.image { margin-bottom: 6px; } html.phone div.roulette-note { margin-bottom: 6px; } html.phone a.roulette div.overlay i.zoom { font-size: 28px; line-height: 40px; margin: -32px 0 0 -16px; } html.phone a.roulette div.overlay div.rating { font-size: 13px; line-height: 13px; margin: 10px 0 0 0; } html.phone a.roulette div.overlay div.rating i { margin-right: 5px; } html.phone a.roulette div.overlay div.rating i.fa-thumbs-down { margin-left: 11px; } html.phone a.roulette:hover div.overlay div.likes { height: 4px; } html.phone .filtering table, html.phone div.regular table, html.phone #white-modal table { width: 100%; text-align: center; } html.phone .filtering table td, html.phone div.regular table td, html.phone #white-modal table td { display: block; } html.phone .filtering table td.label, html.phone div.regular table td.label, html.phone #white-modal table td.label { font-size: 16px; line-height: 24px; } html.phone .filtering table td.label, html.phone .filtering table td.options, html.phone div.regular table td.label, html.phone div.regular table td.options, html.phone #white-modal table td.label, html.phone #white-modal table td.options { text-align: center; width: auto; } html.phone .filtering table td.options, html.phone div.regular table td.options { padding: 10px 10px 40px 10px; } html.phone #white-modal table td.options { padding: 2px 5px 25px 5px; } html.phone.openModal, html.phone.openModal body { overflow: hidden; } html.phone #imageModal { top: 55px; /*overflow: visible; why was this here? */ } html.phone div.room-container div.container-body #imageModal { top: 64px; } /* sorcery is the reason this works */ /*html.phone #imageModal div { transform-origin: 0 0 0; -moz-transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; } html.phone #imageModal img { max-height: none !important; max-width: none !important; }*/ /* stand-alone styles */ /*html.phone #menuBackground { top: 55px; }*/ html.phone #note { font-size: 12px; line-height: 22px; margin-left: 0 !important; left: 0; right: 0; bottom: 0; width: 100%; text-align: center; } html.phone #arrow { left: 50%; margin-left: -46px; bottom: 70px; } html.phone .btn-float { bottom: 5px; right: 5px; width: 55px; height: 55px; line-height: 55px; } html.phone .btn-float.two-icons { line-height: 24px; padding-top: 23px; } html.phone .btn-float.two-icons i:first-child { top: 12px; margin-left: 0; } html.phone .btn-float.two-icons i:last-child { font-size: 16px; } #btn-random.with-button { border-radius: 30% 30% 50% 50%; } html.phone.modalOpen #btn-random { border-radius: 30% 50% 50% 30%; } html.phone #btn-favorite { border-radius: 50% 30% 30% 50%; left: 5px; bottom: 5px; } html.phone #btn-add-to-collection { border-radius: 50% 30% 30% 50%; left: 5px; bottom: 5px; } html.phone #btn-favorite-collection { border-radius: 50% 50% 30% 30%; right: 5px; bottom: 65px; font-size: 18px; line-height: 20px; padding-top: 10px; } html.phone #btn-favorite-collection span { font-size: 12px; } html.phone #btn-like { border-radius: 30%; left: 65px; bottom: 5px; line-height: 20px; padding-top: 10px; } html.phone #btn-dislike { border-radius: 30% 50% 50% 30%; left: 125px; bottom: 5px; line-height: 20px; padding-top: 10px; } html.phone #btn-close { top: 120px; right: 10px; display: none !important; } html.phone #btn-reroll { right: 65px; bottom: 5px; border-radius: 50% 30% 30% 50%; } html.phone .animate-borderRadiusIn { animation: borderRadiusIn2 0.7s ease forwards; -moz-animation: borderRadiusIn2 0.7s ease forwards; -webkit-animation: borderRadiusIn2 0.7s ease forwards; } html.phone .animate-borderRadiusOut { animation: borderRadiusOut2 0.6s ease forwards; -moz-animation: borderRadiusOut2 0.6s ease forwards; -webkit-animation: borderRadiusOut2 0.6s ease forwards; } html.phone #btn-like span, html.phone #btn-dislike span { font-size: 12px; } html.phone #roulette-rating { display: none !important; } html.phone div.news { display: none; } html.phone .clear-header { height: 55px; } html.phone #modalBackground { top: 55px; } html.phone #loading { margin-top: -32px; } /* theres a bug in android browsers that causes orientation to be set to landscape in portait mode when the keyboard is open, so use aspect ratio instead. Downside is aspect ratio is also set in desktops, so this will also be applied to desktops while it should only apply for handhelds. @media only screen and (max-width: 767px) and (orientation: landscape) {*/ @media only screen and (min-aspect-ratio: 13/9) { html.phone #top .random span { margin-right: 0 !important; line-height: 55px !important; font-size: 17px !important; } html.phone #top .random span strong { margin: 0 !important; margin-left: 3px !important; width: 22px !important; text-align: left !important; position: static !important; } } /* ***** transitions ***** */ #menu div.scrollable, #menu div.scrollable::scrollbar, #menu div.scrollable::-moz-scrollbar, #menu div.scrollable::-webkit-scrollbar, #menu div.scrollable::scrollbar-thumb, #menu div.scrollable::-moz-scrollbar-thumb, #menu div.scrollable::-webkit-scrollbar-thumb, .modal-dark, .modal-dark::scrollbar, .modal-dark::-moz-scrollbar, .modal-dark::-webkit-scrollbar, .modal-dark::scrollbar-thumb, .modal-dark::-moz-scrollbar-thumb, .modal-dark::-webkit-scrollbar-thumb { transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; } div.emoji-box, div.emoji-box img.emojione, div.emoji-box svg.emojione { transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, text-shadow 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease, transform 0.2s ease, -ms-transform 0.2s ease, -moz-transform 0.2s ease, -webkit-transform 0.2s ease; -ms-transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, text-shadow 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease, transform 0.2s ease, -ms-transform 0.2s ease, -moz-transform 0.2s ease, -webkit-transform 0.2s ease; -moz-transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, text-shadow 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease, transform 0.2s ease, -ms-transform 0.2s ease, -moz-transform 0.2s ease, -webkit-transform 0.2s ease; -webkit-transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, text-shadow 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease, transform 0.2s ease, -ms-transform 0.2s ease, -moz-transform 0.2s ease, -webkit-transform 0.2s ease; } a, a.btn-float.with-transition i, a.normal strong, button, #popup, a span, #menu a i, input + i, div.sort-tabs div.tab, div.sort-dropdown div.tab, div.banner div.profile span.user-icon i, #top .random span, .modal-dark div.item, .modal-dark div.item div.checkmark div, .modal-dark div.item div.checkmark div i, .modal-dark div.content div.shadow-top, .modal-dark div.content div.shadow-bottom { transition: opacity 0.2s ease, margin 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease, text-shadow 0.2s ease; -o-transition: opacity 0.2s ease, margin 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, -o-transform 0.2s ease, border 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease, text-shadow 0.2s ease; -moz-transition: opacity 0.2s ease, margin 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, -moz-transform 0.2s ease, border 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease, text-shadow 0.2s ease; -webkit-transition: opacity 0.2s ease, margin 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, border 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease, text-shadow 0.2s ease; } div.options-multi div.opt, div.options-multi div.opt div, div.options-multi div.opt span.name, div.options div.opt, div.options div.opt span.name, div.options a.opt, div.options a.opt span.name { transition: all 0.15s; -moz-transition: all 0.15s; -webkit-transition: all 0.15s; -o-transition: all 0.15s; } input, select, textarea, #top, div.roulettes .image img, div.roulettes .image div.exclusion, a.roulette div.overlay, a.roulette div.overlay i.zoom, a.roulette div.overlay div.rating, a.roulette div.overlay div.likes, a.roulette div.overlay div.likes div, a div.btn, div.filter-view fieldset, div.filter-view fieldset legend, div.filter-header div.button, .ellipsisDropdown a span.toggle, .ellipsisDropdown a span.toggle span, div.search-bar, div.side-buttons-container { transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; } a.btn-main-search i { transition: opacity 0.2s, transform 0.2s; -moz-transition: opacity 0.2s, -moz-transform 0.2s; -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; -o-transition: opacity 0.2s, -o-transform 0.2s; } div.toggle, div.toggle div, div.filter-view div.filter-box/*, div.filter-header div.button span*/, #loading-border div, div.highlight-banner { transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; } #container, #menu, #top, #filter, #menuBackground, #modal-background, #login-background, div.modal-dark-background, #filter div.hide-filter, #top .small-menu, #top .random { transition: transform 0.3s, -moz-transform 0.3s, -webkit-transform 0.3s, left 0.3s, opacity 0.3s; -moz-transition: transform 0.3s, -moz-transform 0.3s, -webkit-transform 0.3s, left 0.3s, opacity 0.3s; -webkit-transition: transform 0.3s, -moz-transform 0.3s, -webkit-transform 0.3s, left 0.3s, opacity 0.3s; -o-transition: transform 0.3s, -moz-transform 0.3s, -webkit-transform 0.3s, left 0.3s, opacity 0.3s; } div.transformTransition { transition: transform 1s, -moz-transform 1s, -webkit-transform 1s, left 1s, opacity 1s; -moz-transition: transform 1s, -moz-transform 1s, -webkit-transform 1s, left 1s, opacity 1s; -webkit-transition: transform 1s, -moz-transform 1s, -webkit-transform 1s, left 1s, opacity 1s; -o-transition: transform 1s, -moz-transform 1s, -webkit-transform 1s, left 1s, opacity 1s; } /* ***** animations ***** */ .spinner { margin: 0 auto; width: 80px; text-align: center; } .spinner > div { width: 18px; height: 18px; border-radius: 100%; margin: 0 3px; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; -ms-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; -ms-animation-delay: -0.32s; animation-delay: -0.32s; background-color: #fda3ed; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; -ms-animation-delay: -0.16s; animation-delay: -0.16s; background-color: #c7a3ff; } .spinner .bounce3 { background-color: #9ec4ff; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1.0); } } @-ms-keyframes sk-bouncedelay { 0%, 80%, 100% { -ms-transform: scale(0); transform: scale(0); } 40% { -ms-transform: scale(1.0); transform: scale(0); } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); -ms-transform: scale(1.0); transform: scale(1.0); } } .animate-boxShadowFlash { animation: boxShadowFlash 2s ease forwards; -moz-animation: boxShadowFlash 2s ease forwards; -webkit-animation: boxShadowFlash 2s ease forwards; } @keyframes boxShadowFlash { 0% { box-shadow: inset 0 0 500px rgba(255, 49, 239, 0.4); } 100% { box-shadow: none; } } @-moz-keyframes boxShadowFlash { 0% { box-shadow: inset 0 0 500px rgba(255, 49, 239, 0.4); } 100% { box-shadow: none; } } @-webkit-keyframes boxShadowFlash { 0% { box-shadow: inset 0 0 500px rgba(255, 49, 239, 0.4); } 100% { box-shadow: none; } } .animate-borderRadiusIn { animation: borderRadiusIn 0.7s ease forwards; -moz-animation: borderRadiusIn 0.7s ease forwards; -webkit-animation: borderRadiusIn 0.7s ease forwards; } @keyframes borderRadiusIn { 0% { border-radius: 100%; } 100% { border-radius: 30% 30% 50% 50%; } } @-moz-keyframes borderRadiusIn { 0% { border-radius: 100%; } 100% { border-radius: 30% 30% 50% 50%; } } @-webkit-keyframes borderRadiusIn { 0% { border-radius: 100%; } 100% { border-radius: 30% 30% 50% 50%; } } @keyframes borderRadiusIn2 { 0% { border-radius: 100%; } 100% { border-radius: 30% 50% 50% 30%; } } @-moz-keyframes borderRadiusIn2 { 0% { border-radius: 100%; } 100% { border-radius: 30% 50% 50% 30%; } } @-webkit-keyframes borderRadiusIn2 { 0% { border-radius: 100%; } 100% { border-radius: 30% 50% 50% 30%; } } @keyframes borderRadiusOut2 { 0% { border-radius: 30% 50% 50% 30%; } 100% { border-radius: 100%; } } @-moz-keyframes borderRadiusOut2 { 0% { border-radius: 30% 50% 50% 30%; } 100% { border-radius: 100%; } } @-webkit-keyframes borderRadiusOut2 { 0% { border-radius: 30% 50% 50% 30%; } 100% { border-radius: 100%; } } .animate-borderRadiusOut { animation: borderRadiusOut 0.6s ease forwards; -moz-animation: borderRadiusOut 0.6s ease forwards; -webkit-animation: borderRadiusOut 0.6s ease forwards; } @keyframes borderRadiusOut { 0% { border-radius: 30% 30% 50% 50%; } 100% { border-radius: 100%; } } @-moz-keyframes borderRadiusOut { 0% { border-radius: 30% 30% 50% 50%; } 100% { border-radius: 100%; } } @-webkit-keyframes borderRadiusOut { 0% { border-radius: 30% 30% 50% 50%; } 100% { border-radius: 100%; } } @keyframes animate-arrow { 0% { opacity: 0; transform: translateY(-50px); -moz-transform: translateY(-50px); -webkit-transform: translateY(-50px); } 50% { opacity: 1; transform: translateY(-25px); -moz-transform: translateY(-25px); -webkit-transform: translateY(-25px); } 100% { opacity: 0; transform: none; -moz-transform: none; -webkit-transform: none; } }@-moz-keyframes animate-arrow { 0% { opacity: 0; transform: translateY(-50px); -moz-transform: translateY(-50px); -webkit-transform: translateY(-50px); } 50% { opacity: 1; transform: translateY(-25px); -moz-transform: translateY(-25px); -webkit-transform: translateY(-25px); } 100% { opacity: 0; transform: none; -moz-transform: none; -webkit-transform: none; } }@-webkit-keyframes animate-arrow { 0% { opacity: 0; transform: translateY(-50px); -moz-transform: translateY(-50px); -webkit-transform: translateY(-50px); } 50% { opacity: 1; transform: translateY(-25px); -moz-transform: translateY(-25px); -webkit-transform: translateY(-25px); } 100% { opacity: 0; transform: none; -moz-transform: none; -webkit-transform: none; } } .animate-opacity { animation: fadeIn 2s ease alternate infinite; -moz-animation: fadeIn 2s ease alternate infinite; -webkit-animation: fadeIn 2s ease alternate infinite; } .animate-fadeIn { -webkit-animation: fadeIn 0.7s ease forwards; -moz-animation: fadeIn 0.7s ease forwards; animation: fadeIn 0.7s ease forwards; } .animate-fadeInTwo { -webkit-animation: fadeIn 0.5s cubic-bezier(.25,.41,.29,.94) forwards; -moz-animation: fadeIn 0.5s cubic-bezier(.25,.41,.29,.94) forwards; animation: fadeIn 0.5s cubic-bezier(.25,.41,.29,.94) forwards; } .animate-fadeInSlow { -webkit-animation: fadeIn 2s ease forwards; -moz-animation: fadeIn 2s ease forwards; animation: fadeIn 2s ease forwards; } .animate-modalBgIn { -webkit-animation: fadeIn 0.7s cubic-bezier(.25,.41,.29,.94) forwards; -moz-animation: fadeIn 0.7s cubic-bezier(.25,.41,.29,.94) forwards; animation: fadeIn 0.7s cubic-bezier(.25,.41,.29,.94) forwards; } @-webkit-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}} @-moz-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}} @keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}} .animate-fadeOut { -webkit-animation: fadeOut 0.5s cubic-bezier(.67,.01,.93,.78) forwards; -moz-animation: fadeOut 0.5s cubic-bezier(.67,.01,.93,.78) forwards; animation: fadeOut 0.5s cubic-bezier(.67,.01,.93,.78) forwards; } .animate-fadeOutSlow { -webkit-animation: fadeOut 2s cubic-bezier(.67,.01,.93,.78) forwards; -moz-animation: fadeOut 2s cubic-bezier(.67,.01,.93,.78) forwards; animation: fadeOut 2s cubic-bezier(.67,.01,.93,.78) forwards; } .animate-fadeOutFast { -webkit-animation: fadeOut 0.3s ease forwards; -moz-animation: fadeOut 0.3s ease forwards; animation: fadeOut 0.3s ease forwards; } .animate-modalBgOut { -webkit-animation: fadeOut 0.5s cubic-bezier(.67,.01,.93,.78) forwards; -moz-animation: fadeOut 0.5s cubic-bezier(.67,.01,.93,.78) forwards; animation: fadeOut 0.5s cubic-bezier(.67,.01,.93,.78) forwards; } @-webkit-keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}} @-moz-keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}} @keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}} .animate-fallDown { animation: animate-fallDown 0.2s forwards ease; -ms-animation: animate-fallDown 0.2s forwards ease; -webkit-animation: animate-fallDown 0.2s forwards ease; } @keyframes animate-fallDown { 0% { opacity: 0; transform: translateY(-6px); -ms-transform: translateY(-6px); -webkit-transform: translateY(-6px); } 100% { opacity: 1; transform: none; -ms-transform: none; -webkit-transform: none; } } @-ms-keyframes animate-fallDown { 0% { opacity: 0; transform: translateY(-6px); -ms-transform: translateY(-6px); -webkit-transform: translateY(-6px); } 100% { opacity: 1; transform: none; -ms-transform: none; -webkit-transform: none; } } @-webkit-keyframes animate-fallDown { 0% { opacity: 0; transform: translateY(-6px); -ms-transform: translateY(-6px); -webkit-transform: translateY(-6px); } 100% { opacity: 1; transform: none; -ms-transform: none; -webkit-transform: none; } } .animate-fallUp { animation: animate-fallUp 0.2s forwards ease; -ms-animation: animate-fallUp 0.2s forwards ease; -webkit-animation: animate-fallUp 0.2s forwards ease; } @keyframes animate-fallUp { 0% { opacity: 0; transform: translateY(6px); -ms-transform: translateY(6px); -webkit-transform: translateY(6px); } 100% { opacity: 1; transform: none; -ms-transform: none; -webkit-transform: none; } } @-ms-keyframes animate-fallUp { 0% { opacity: 0; transform: translateY(6px); -ms-transform: translateY(6px); -webkit-transform: translateY(6px); } 100% { opacity: 1; transform: none; -ms-transform: none; -webkit-transform: none; } } @-webkit-keyframes animate-fallUp { 0% { opacity: 0; transform: translateY(6px); -ms-transform: translateY(6px); -webkit-transform: translateY(6px); } 100% { opacity: 1; transform: none; -ms-transform: none; -webkit-transform: none; } } .animate-fadeInDown { -webkit-animation: fadeInDown 0.7s cubic-bezier(.25,.41,.29,.94) forwards !important; -moz-animation: fadeInDown 0.7s cubic-bezier(.25,.41,.29,.94) forwards !important; animation: fadeInDown 0.7s cubic-bezier(.25,.41,.29,.94) forwards !important; } @-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}} @keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}} .animate-fadeInUp { -webkit-animation: fadeInUp 0.7s cubic-bezier(.25,.41,.29,.94) forwards !important; -moz-animation: fadeInUp 0.7s cubic-bezier(.25,.41,.29,.94) forwards !important; animation: fadeInUp 0.7s cubic-bezier(.25,.41,.29,.94) forwards !important; } @-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none;}} @keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none;}} .animate-fadeInUpTwo { -webkit-animation: fadeInUpTwo 0.5s cubic-bezier(.25,.41,.29,.94) forwards; -moz-animation: fadeInUpTwo 0.5s cubic-bezier(.25,.41,.29,.94) forwards; animation: fadeInUpTwo 0.5s cubic-bezier(.25,.41,.29,.94) forwards; } @-webkit-keyframes fadeInUpTwo{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none;}} @keyframes fadeInUpTwo{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none;}} .animate-fadeInLeft { -webkit-animation: fadeInLeft 0.7s cubic-bezier(.25,.41,.29,.94) forwards !important; -moz-animation: fadeInLeft 0.7s cubic-bezier(.25,.41,.29,.94) forwards !important; animation: fadeInLeft 0.7s cubic-bezier(.25,.41,.29,.94) forwards !important; } @-webkit-keyframes fadeInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{-webkit-transform:none;transform:none}} @keyframes fadeInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{-webkit-transform:none;transform:none}} .animate-fadeInRight { -webkit-animation: fadeInRight 0.7s cubic-bezier(.25,.41,.29,.94) forwards !important; -moz-animation: fadeInRight 0.7s cubic-bezier(.25,.41,.29,.94) forwards !important; animation: fadeInRight 0.7s cubic-bezier(.25,.41,.29,.94) forwards !important; } @-webkit-keyframes fadeInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{-webkit-transform:none;transform:none}} @keyframes fadeInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{-webkit-transform:none;transform:none}} .animate-fadeOutUp { -webkit-animation: fadeOutUp 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; -moz-animation: fadeOutUp 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; animation: fadeOutUp 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; } @-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}} @keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}} .animate-fadeOutDown { -webkit-animation: fadeOutDown 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; -moz-animation: fadeOutDown 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; animation: fadeOutDown 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; } @-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}} @keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}} .animate-fadeOutDownTwo { -webkit-animation: fadeOutDownTwo 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; -moz-animation: fadeOutDownTwo 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; animation: fadeOutDownTwo 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; } @-webkit-keyframes fadeOutDownTwo{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}} @keyframes fadeOutDownTwo{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}} .animate-fadeOutLeft { -webkit-animation: fadeOutLeft 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; -moz-animation: fadeOutLeft 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; animation: fadeOutLeft 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; } @-webkit-keyframes fadeOutLeft{0%{transform:none;-webkit-transform:none;}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}} @keyframes fadeOutLeft{0%{transform:none;-webkit-transform:none;}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}} .animate-fadeOutRight { -webkit-animation: fadeOutRight 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; -moz-animation: fadeOutRight 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; animation: fadeOutRight 0.5s cubic-bezier(.67,.01,.93,.78) forwards !important; } @-webkit-keyframes fadeOutRight{0%{transform:none;-webkit-transform:none;}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}} @keyframes fadeOutRight{0%{transform:none;-webkit-transform:none;}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}} .animate-scaleOut { -webkit-animation: scaleOut 0.3s cubic-bezier(.67,.01,.93,.78) forwards; -moz-animation: scaleOut 0.3s cubic-bezier(.67,.01,.93,.78) forwards; animation: scaleOut 0.3s cubic-bezier(.67,.01,.93,.78) forwards; } @-webkit-keyframes scaleOut{0%{opacity:1}100%{opacity:0;-webkit-transform:scale(0);transform:scale(0);-moz-transform:scale(0)}} @keyframes scaleOut{0%{opacity:1}100%{opacity:0;-webkit-transform:scale(0);transform:scale(0);-moz-transform:scale(0)}} .animate-scaleIn { -webkit-animation: scaleIn 0.3s cubic-bezier(.25,.41,.29,.94) forwards; -moz-animation: scaleIn 0.3s cubic-bezier(.25,.41,.29,.94) forwards; animation: scaleIn 0.3s cubic-bezier(.25,.41,.29,.94) forwards; } @-webkit-keyframes scaleIn{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0);-moz-transform:scale(0)}100%{opacity:1;}} @keyframes scaleIn{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0);-moz-transform:scale(0)}100%{opacity:1;}} .animate-scaleInFastY { -webkit-animation: scaleInY 0.2s cubic-bezier(.35,1,.38,1) forwards; -webkit-animation: scaleInY 0.2s cubic-bezier(0.355, 1, 0.380, 1) forwards; -moz-animation: scaleInY 0.2s cubic-bezier(0.355, 1, 0.380, 1) forwards; animation: scaleInY 0.2s cubic-bezier(0.355, 1, 0.380, 1) forwards; } @-webkit-keyframes scaleInY{0%{opacity:0;-webkit-transform:scale(0) translateY(10px);transform:scale(0) translateY(10px)}100%{opacity:1;-webkit-transform:none;transform:none}} @-moz-keyframes scaleInY{0%{opacity:0;-moz-transform:scale(0) translateY(10px);transform:scale(0) translateY(10px)}100%{opacity:1;-moz-transform:none;transform:none}} @keyframes scaleInY{0%{opacity:0;-webkit-transform:scale(0) translateY(10px);transform:scale(0) translateY(10px)}100%{opacity:1;-webkit-transform:none;transform:none}} .animate-scaleOutFastY { -webkit-animation: scaleOutY 0.2s cubic-bezier(0.72, 0, 0.53, 0.25) forwards; -webkit-animation: scaleOutY 0.2s cubic-bezier(0.720, 0, 0.535, 0.255) forwards; -moz-animation: scaleOutY 0.2s cubic-bezier(0.720, 0, 0.535, 0.255) forwards; animation: scaleOutY 0.2s cubic-bezier(0.720, 0, 0.535, 0.255) forwards; /* cubic-bezier(0.720, -0.180, 0.535, 0.255) */ } @-webkit-keyframes scaleOutY{0%{opacity:1;-webkit-transform:scale(1) translateY(0px);transform:scale(1) translateY(0px)}100%{opacity:0;-webkit-transform:scale(0) translateY(-10px);transform:scale(0) translateY(-10px)}} @-moz-keyframes scaleOutY{0%{opacity:1;-moz-transform:scale(1) translateY(0px);transform:scale(1) translateY(0px)}100%{opacity:0;-moz-transform:scale(0) translateY(-10px);transform:scale(0) translateY(-10px)}} @keyframes scaleOutY{0%{opacity:1;-webkit-transform:scale(1) translateY(0px);transform:scale(1) translateY(0px)}100%{opacity:0;-webkit-transform:scale(0) translateY(-10px);transform:scale(0) translateY(-10px)}} .animate-bounceUp { animation: bounceUp 0.3s ease forwards; -moz-animation: bounceUp 0.3s ease forwards; -webkit-animation: bounceUp 0.3s ease forwards; } @keyframes bounceUp { 0% { transform: none; -moz-transform: none; -webkit-transform: none;} 40% { transform: translateY(-6px); -moz-transform: translateY(-6px); -webkit-transform: translateY(-6px); } 60% { transform: none; -moz-transform: none; -webkit-transform: none; } 80% { transform: translateY(-4px); -moz-transform: translateY(-4px); -webkit-transform: translateY(-4px); } 100%{ transform: none; -moz-transform: none; -webkit-transform: none;} } @-moz-keyframes bounceUp { 0% { transform: none; -moz-transform: none; -webkit-transform: none;} 40% { transform: translateY(-10px); -moz-transform: translateY(-10px); -webkit-transform: translateY(-10px); } 60% { transform: none; -moz-transform: none; -webkit-transform: none; } 80% { transform: translateY(-5px); -moz-transform: translateY(-5px); -webkit-transform: translateY(-5px); } 100%{ transform: none; -moz-transform: none; -webkit-transform: none;} } @-webkit-keyframes bounceUp { 0% { transform: none; -moz-transform: none; -webkit-transform: none;} 40% { transform: translateY(-10px); -moz-transform: translateY(-10px); -webkit-transform: translateY(-10px); } 60% { transform: none; -moz-transform: none; -webkit-transform: none; } 80% { transform: translateY(-5px); -moz-transform: translateY(-5px); -webkit-transform: translateY(-5px); } 100%{ transform: none; -moz-transform: none; -webkit-transform: none;} } @keyframes rotateOut { 0% { opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); } }@-moz-keyframes rotateOut { 0% { opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); } }@-webkit-keyframes rotateOut { 0% { opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); } } @keyframes rotateIn { 0% { opacity: 0; transform: rotate(-180deg); -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); } 100% { opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } }@-moz-keyframes rotateIn { 0% { opacity: 0; transform: rotate(-180deg); -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); } 100% { opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } }@-webkit-keyframes rotateIn { 0% { opacity: 0; transform: rotate(-180deg); -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); } 100% { opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } } .animateRoll{ animation: animateRoll 0.9s ease-out forwards; -moz-animation: animateRoll 0.9s ease-out forwards; -webkit-animation: animateRoll 0.9s ease-out forwards; } /*@keyframes animateRoll { 0% {background: rgba(255, 97, 173, 0.9);} 100% {background: rgba(255, 54, 116, 0.9);} }@-moz-keyframes animateRoll { 0% {background: rgba(255, 97, 173, 0.9);} 100% {background: rgba(255, 54, 116, 0.9);} }@-webkit-keyframes animateRoll { 0% {background: rgba(255, 97, 173, 0.9);} 100% {background: rgba(255, 54, 116, 0.9);} }*/ @keyframes animateRoll { 0% {background: rgba(255, 54, 116, 0.9);} 15% {background: rgba(255, 97, 173, 0.9);} 100% {background: rgba(255, 54, 116, 0.9);} }@-moz-keyframes animateRoll { 0% {background: rgba(255, 54, 116, 0.9);} 15% {background: rgba(255, 97, 173, 0.9);} 100% {background: rgba(255, 54, 116, 0.9);} }@-webkit-keyframes animateRoll { 0% {background: rgba(255, 54, 116, 0.9);} 15% {background: rgba(255, 97, 173, 0.9);} 100% {background: rgba(255, 54, 116, 0.9);} } .animate-rotate { animation: rotate 5s linear infinite; -ms-animation: rotate 5s linear infinite; -moz-animation: rotate 5s linear infinite; -webkit-animation: rotate 5s linear infinite; } @keyframes rotate { 0% { transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } 100% { transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } }@-moz-keyframes rotate { 0% { transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } 100% { transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } }@-ms-keyframes rotate { 0% { transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } 100% { transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } }@-webkit-keyframes rotate { 0% { transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } 100% { transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } } .animate-fadeInDownFast { animation: fadeInDownFast 0.3s ease forwards; -moz-animation: fadeInDownFast 0.3s ease forwards; -webkit-animation: fadeInDownFast 0.3s ease forwards; } @keyframes fadeInDownFast { 0% { opacity: 0; transform: translateY(-50px); -moz-transform: translateY(-50px); -webkit-transform: translateY(-50px); } 100% { opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } } @-moz-keyframes fadeInDownFast { 0% { opacity: 0; transform: translateY(-50px); -moz-transform: translateY(-50px); -webkit-transform: translateY(-50px); } 100% { opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } } @-webkit-keyframes fadeInDownFast { 0% { opacity: 0; transform: translateY(-50px); -moz-transform: translateY(-50px); -webkit-transform: translateY(-50px); } 100% { opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } } .animate-fadeOutUpFast { animation: fadeOutUpFast 0.3s ease forwards; -moz-animation: fadeOutUpFast 0.3s ease forwards; -webkit-animation: fadeOutUpFast 0.3s ease forwards; } @keyframes fadeOutUpFast { 0% { opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: translateY(-50px); -moz-transform: translateY(-50px); -webkit-transform: translateY(-50px); } } @-moz-keyframes fadeOutUpFast { 0% { opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: translateY(-50px); -moz-transform: translateY(-50px); -webkit-transform: translateY(-50px); } } @-webkit-keyframes fadeOutUpFast { 0% { opacity: 1; transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: translateY(-50px); -moz-transform: translateY(-50px); -webkit-transform: translateY(-50px); } } div.huge-numbers { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; overflow: hidden; white-space: nowrap; perspective: 1000px; -ms-perspective: 1000px; -webkit-perspective: 1000px; perspective-origin: center center; -ms-perspective-origin: center center; -webkit-perspective-origin: center center; } /*div.huge-numbers span.letter { z-index: 10; position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -400px; display: inline-block; height: 600px; width: 600px; font-size: 150px; line-height: 600px; vertical-align: middle; opacity: 0; color: #bfb9c7; font-family: 'Kaushan Script', cursive; text-align: center; backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; }*/ div.huge-numbers span.one { z-index: 10; position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -600px; display: inline-block; height: 600px; width: 1200px; text-align: center; backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; overflow: visible; } div.huge-numbers span.two { display: block; font-size: 500px; line-height: 600px; text-align: center; vertical-align: middle; color: #fff; font-family: 'Kaushan Script', cursive; opacity: 0; backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; overflow: visible; } div.huge-numbers span.letter { color: #c1a7ff; } div.huge-numbers div.blast, div.huge-numbers div.blast2, div.huge-numbers div.blast3 { z-index: 5; position: absolute; top: 50%; left: 50%; margin: -200px 0 0 -210px; width: 450px; height: 400px; border-radius: 100%; background: rgba(126, 115, 252, 0.5); opacity: 0; } div.huge-numbers div.blast2 { background: rgba(157, 115, 252, 0.5); } div.huge-numbers div.blast3 { background: rgba(167, 98, 255, 0.5); } .animate-impactfulContainer { animation: impactfulContainer 3s linear forwards; -ms-animation: impactfulContainer 3s linear forwards; -webkit-animation: impactfulContainer 3s linear forwards; } @keyframes impactfulContainer { 0% { transform: translateZ(200px); -ms-transform: translateZ(200px); -webkit-transform: translateZ(200px); } 100% { transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); } } @-ms-keyframes impactfulContainer { 0% { transform: translateZ(200px); -ms-transform: translateZ(200px); -webkit-transform: translateZ(200px); } 100% { transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); } } @-webkit-keyframes impactfulContainer { 0% { transform: translateZ(200px); -ms-transform: translateZ(200px); -webkit-transform: translateZ(200px); } 100% { transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); } } .animate-impactfulScale { animation: impactfulScale 3s linear forwards; -ms-animation: impactfulScale 3s linear forwards; -webkit-animation: impactfulScale 3s linear forwards; } @keyframes impactfulScale { 0% { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); } 100% { transform: scale(0.7); -ms-transform: scale(0.7); -webkit-transform: scale(0.7); } } @-ms-keyframes impactfulScale { 0% { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); } 100% { transform: scale(0.7); -ms-transform: scale(0.7); -webkit-transform: scale(0.7); } } @-webkit-keyframes impactfulScale { 0% { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); } 100% { transform: scale(0.7); -ms-transform: scale(0.7); -webkit-transform: scale(0.7); } } .animate-impactfulBlast { animation: impactfulBlast 0.75s ease-out forwards; -ms-animation: impactfulBlast 0.75s ease-out forwards; -webkit-animation: impactfulBlast 0.75s ease-out forwards; } .animate-impactfulBlast2 { animation: impactfulBlast 1.5s ease-in forwards; -ms-animation: impactfulBlast 1.5s ease-in forwards; -webkit-animation: impactfulBlast 1.5s ease-in forwards; } @keyframes impactfulBlast { 0% { transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); opacity: 1; } 100% { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); opacity: 0; } } @-ms-keyframes impactfulBlast { 0% { transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); opacity: 1; } 100% { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); opacity: 0; } } @-webkit-keyframes impactfulBlast { 0% { transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); opacity: 1; } 100% { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); opacity: 0; } } .animate-impactfulNumberIn { animation: impactfulNumberIn 1s ease-in forwards; -ms-animation: impactfulNumberIn 1s ease-in forwards; -webkit-animation: impactfulNumberIn 1s ease-in forwards; } @keyframes impactfulNumberIn { 0% { transform: scale(1) translateZ(0) rotate(-20deg); -ms-transform: scale(1) translateZ(0) rotate(-20deg); -webkit-transform: scale(1) translateZ(0) rotate(-20deg); opacity: 0; } 50%, 70%, 90% { transform: scale(0.3) translateZ(0) rotate(3deg); -ms-transform: scale(0.3) translateZ(0) rotate(3deg); -webkit-transform: scale(0.3) translateZ(0) rotate(3deg); opacity: 1; } 60%, 80% { transform: scale(0.3) rotate(-3deg) translateZ(0); -ms-transform: scale(0.3) rotate(-3deg) translateZ(0); -webkit-transform: scale(0.3) rotate(-3deg) translateZ(0); opacity: 1; } 100% { transform: scale(0.3) translateZ(0); -ms-transform: scale(0.3) translateZ(0); -webkit-transform: scale(0.3) translateZ(0); opacity: 1; } } @-ms-keyframes impactfulNumberIn { 0% { transform: scale(1) translateZ(0) rotate(-20deg); -ms-transform: scale(1) translateZ(0) rotate(-20deg); -webkit-transform: scale(1) translateZ(0) rotate(-20deg); opacity: 0; } 50%, 70%, 90% { transform: scale(0.3) translateZ(0) rotate(3deg); -ms-transform: scale(0.3) translateZ(0) rotate(3deg); -webkit-transform: scale(0.3) translateZ(0) rotate(3deg); opacity: 1; } 60%, 80% { transform: scale(0.3) rotate(-3deg) translateZ(0); -ms-transform: scale(0.3) rotate(-3deg) translateZ(0); -webkit-transform: scale(0.3) rotate(-3deg) translateZ(0); opacity: 1; } 100% { transform: scale(0.3) translateZ(0); -ms-transform: scale(0.3) translateZ(0); -webkit-transform: scale(0.3) translateZ(0); opacity: 1; } } @-webkit-keyframes impactfulNumberIn { 0% { transform: scale(1) translateZ(0) rotate(-20deg); -ms-transform: scale(1) translateZ(0) rotate(-20deg); -webkit-transform: scale(1) translateZ(0) rotate(-20deg); opacity: 0; } 50%, 70%, 90% { transform: scale(0.3) translateZ(0) rotate(3deg); -ms-transform: scale(0.3) translateZ(0) rotate(3deg); -webkit-transform: scale(0.3) translateZ(0) rotate(3deg); opacity: 1; } 60%, 80% { transform: scale(0.3) rotate(-3deg) translateZ(0); -ms-transform: scale(0.3) rotate(-3deg) translateZ(0); -webkit-transform: scale(0.3) rotate(-3deg) translateZ(0); opacity: 1; } 100% { transform: scale(0.3) translateZ(0); -ms-transform: scale(0.3) translateZ(0); -webkit-transform: scale(0.3) translateZ(0); opacity: 1; } } .animate-impactfulNumberOut { animation: impactfulNumberOut 0.5s ease-in forwards; -ms-animation: impactfulNumberOut 0.5s ease-in forwards; -webkit-animation: impactfulNumberOut 0.5s ease-in forwards; } @keyframes impactfulNumberOut { 0% { transform: scale(0.3); -ms-transform: scale(0.3); -webkit-transform: scale(0.3); opacity: 1; } 100% { transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); opacity: 0; } } @-ms-keyframes impactfulNumberOut { 0% { transform: scale(0.3); -ms-transform: scale(0.3); -webkit-transform: scale(0.3); opacity: 1; } 100% { transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); opacity: 0; } } @-webkit-keyframes impactfulNumberOut { 0% { transform: scale(0.3); -ms-transform: scale(0.3); -webkit-transform: scale(0.3); opacity: 1; } 100% { transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); opacity: 0; } } .animate-shortFadeOutUp { -webkit-animation: shortFadeOutUp 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; -moz-animation: shortFadeOutUp 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; -ms-animation: shortFadeOutUp 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; animation: shortFadeOutUp 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; } @keyframes shortFadeOutUp { 0% { opacity: 1; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -webkit-transform: translateY(-15px); } } @-ms-keyframes shortFadeOutUp { 0% { opacity: 1; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -webkit-transform: translateY(-15px); } } @-moz-keyframes shortFadeOutUp { 0% { opacity: 1; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -webkit-transform: translateY(-15px); } } @-webkit-keyframes shortFadeOutUp { 0% { opacity: 1; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -webkit-transform: translateY(-15px); } } .animate-shortFadeOutDown { -webkit-animation: shortFadeOutDown 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; -moz-animation: shortFadeOutDown 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; -ms-animation: shortFadeOutDown 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; animation: shortFadeOutDown 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; } @keyframes shortFadeOutDown { 0% { opacity: 1; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: translateY(15px); -ms-transform: translateY(15px); -moz-transform: translateY(15px); -webkit-transform: translateY(15px); } } @-ms-keyframes shortFadeOutDown { 0% { opacity: 1; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: translateY(15px); -ms-transform: translateY(15px); -moz-transform: translateY(15px); -webkit-transform: translateY(15px); } } @-moz-keyframes shortFadeOutDown { 0% { opacity: 1; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: translateY(15px); -ms-transform: translateY(15px); -moz-transform: translateY(15px); -webkit-transform: translateY(15px); } } @-webkit-keyframes shortFadeOutDown { 0% { opacity: 1; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } 100% { opacity: 0; transform: translateY(15px); -ms-transform: translateY(15px); -moz-transform: translateY(15px); -webkit-transform: translateY(15px); } } .animate-shortFadeInUp { -webkit-animation: shortFadeInUp 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; -moz-animation: shortFadeInUp 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; -ms-animation: shortFadeInUp 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; animation: shortFadeInUp 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; } @keyframes shortFadeInUp { 0% { opacity: 0; transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -webkit-transform: translateY(-15px); } 100% { opacity: 1; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } } @-ms-keyframes shortFadeInUp { 0% { opacity: 0; transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -webkit-transform: translateY(-15px); } 100% { opacity: 1; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } } @-moz-keyframes shortFadeInUp { 0% { opacity: 0; transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -webkit-transform: translateY(-15px); } 100% { opacity: 1; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } } @-webkit-keyframes shortFadeInUp { 0% { opacity: 0; transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -webkit-transform: translateY(-15px); } 100% { opacity: 1; transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; } } .animate-shortFadeInDown { -webkit-animation: shortFadeInDown 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; -moz-animation: shortFadeInDown 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; -ms-animation: shortFadeInDown 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; animation: shortFadeInDown 0.2s cubic-bezier(.25,.41,.29,.94) forwards !important; } @keyframes shortFadeInDown { 0% { opacity: 0; transform: translateY(15px); -ms-transform: translateY(15px); -moz-transform: translateY(15px); -webkit-transform: translateY(15px); } 100% { opacity: 1; transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); -moz-transform: scale(1) translateY(0); -webkit-transform: scale(1) translateY(0); } }@-ms-keyframes shortFadeInDown { 0% { opacity: 0; transform: translateY(15px); -ms-transform: translateY(15px); -moz-transform: translateY(15px); -webkit-transform: translateY(15px); } 100% { opacity: 1; transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); -moz-transform: scale(1) translateY(0); -webkit-transform: scale(1) translateY(0); } }@-moz-keyframes shortFadeInDown { 0% { opacity: 0; transform: translateY(15px); -ms-transform: translateY(15px); -moz-transform: translateY(15px); -webkit-transform: translateY(15px); } 100% { opacity: 1; transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); -moz-transform: scale(1) translateY(0); -webkit-transform: scale(1) translateY(0); } }@-webkit-keyframes shortFadeInDown { 0% { opacity: 0; transform: translateY(15px); -ms-transform: translateY(15px); -moz-transform: translateY(15px); -webkit-transform: translateY(15px); } 100% { opacity: 1; transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); -moz-transform: scale(1) translateY(0); -webkit-transform: scale(1) translateY(0); } } .animate-dropIn { animation: dropIn 0.7s cubic-bezier(.25,.41,.29,.94); -o-animation: dropIn 0.7s cubic-bezier(.25,.41,.29,.94); -ms-animation: dropIn 0.7s cubic-bezier(.25,.41,.29,.94); -moz-animation: dropIn 0.7s cubic-bezier(.25,.41,.29,.94); -webkit-animation: dropIn 0.7s cubic-bezier(.25,.41,.29,.94); } /* check #btn-save */ @keyframes dropIn { 0% { opacity: 0; transform: scale(2); } 100% { opacity: 1; transform: scale(1); } } @-o-keyframes dropIn { 0% { opacity: 0; -o-transform: scale(2); } 100% { opacity: 1; -o-transform: scale(1); } } @-ms-keyframes dropIn { 0% { opacity: 0; -ms-transform: scale(2); } 100% { opacity: 1; -ms-transform: scale(1); } } @-moz-keyframes dropIn { 0% { opacity: 0; -moz-transform: scale(2); } 100% { opacity: 1; -moz-transform: scale(1); } } @-webkit-keyframes dropIn { 0% { opacity: 0; -webkit-transform: scale(2); } 100% { opacity: 1; -webkit-transform: scale(1); } } .animate-scaleAway { animation: scaleAway 0.4s cubic-bezier(.25,.41,.29,.94) forwards !important; -o-animation: scaleAway 0.4s cubic-bezier(.25,.41,.29,.94) forwards !important; -ms-animation: scaleAway 0.4s cubic-bezier(.25,.41,.29,.94) forwards !important; -moz-animation: scaleAway 0.4s cubic-bezier(.25,.41,.29,.94) forwards !important; -webkit-animation: scaleAway 0.4s cubic-bezier(.25,.41,.29,.94) forwards !important; } @keyframes scaleAway { 0% { opacity: 1; } 100% { opacity: 0; transform: scale(2); } } @-o-keyframes scaleAway { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: scale(2); } } @-ms-keyframes scaleAway { 0% { opacity: 1; } 100% { opacity: 0; -ms-transform: scale(2); } } @-moz-keyframes scaleAway { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: scale(2); } } @-webkit-keyframes scaleAway { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(2); } } .animate-scaleUpDown { animation: scaleUpDown 2s infinite alternate cubic-bezier(.3,0,.71,1) !important; -o-animation: scaleUpDown 2s infinite alternate cubic-bezier(.3,0,.71,1) !important; -ms-animation: scaleUpDown 2s infinite alternate cubic-bezier(.3,0,.71,1) !important; -moz-animation: scaleUpDown 2s infinite alternate cubic-bezier(.3,0,.71,1) !important; -webkit-animation: scaleUpDown 2s infinite alternate cubic-bezier(.3,0,.71,1) !important; } @keyframes scaleUpDown { 0% { transform: scale(1); } 100% { transform: scale(0.90); } } @-o-keyframes scaleUpDown { 0% { -o-transform: scale(1); } 100% { -o-transform: scale(0.90); } } @-ms-keyframes scaleUpDown { 0% { -ms-transform: scale(1); } 100% { -ms-transform: scale(0.90); } } @-moz-keyframes scaleUpDown { 0% { -moz-transform: scale(1); } 100% { -moz-transform: scale(0.90); } } @-webkit-keyframes scaleUpDown { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(0.90); } } .animate-infiniteOpacityBlink { animation: infiniteOpacityBlink 3s infinite alternate cubic-bezier(.3,0,.71,1) !important; -o-animation: infiniteOpacityBlink 3s infinite alternate cubic-bezier(.3,0,.71,1) !important; -ms-animation: infiniteOpacityBlink 3s infinite alternate cubic-bezier(.3,0,.71,1) !important; -moz-animation: infiniteOpacityBlink 3s infinite alternate cubic-bezier(.3,0,.71,1) !important; -webkit-animation: infiniteOpacityBlink 3s infinite alternate cubic-bezier(.3,0,.71,1) !important; } @keyframes infiniteOpacityBlink { 0% { opacity: 0.7; } 100% { opacity: 0.3; } } @-o-keyframes infiniteOpacityBlink { 0% { opacity: 0.7; } 100% { opacity: 0.3; } } @-ms-keyframes infiniteOpacityBlink { 0% { opacity: 0.7; } 100% { opacity: 0.3; } } @-moz-keyframes infiniteOpacityBlink { 0% { opacity: 0.7; } 100% { opacity: 0.3; } } @-webkit-keyframes infiniteOpacityBlink { 0% { opacity: 0.7; } 100% { opacity: 0.3; } }