Anonymous edits have been disabled on the wiki. If you want to contribute please login or create an account.

Difference between revisions of "User:Aemony/common.css"

From PCGamingWiki, the wiki about fixing PC games
m (desc)
m (test)
Line 126: Line 126:
  
 
/* White becomes #999 because of the 0.65 opacity on this CSS element: "pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read" */
 
/* White becomes #999 because of the 0.65 opacity on this CSS element: "pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read" */
 +
 +
 +
/* --------------------- */
 +
 +
/* See [[mw:Reference Tooltips]] */
 +
 +
.rt-tooltip {
 +
position: absolute;
 +
z-index: 90;
 +
max-width: 350px;
 +
background: #fff;
 +
color: #222;
 +
font-size: 13px;
 +
line-height: 1.5em;
 +
border: 1px solid #c8ccd1;
 +
border-radius: 3px;
 +
-webkit-box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.3);
 +
box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.3);
 +
overflow-wrap: break-word;
 +
}
 +
 +
.rt-tooltip.rt-tooltip-insideWindow {
 +
z-index: 110;
 +
}
 +
 +
.rt-tooltipContent {
 +
padding: 9px 12px;
 +
}
 +
 +
.rt-tooltip-above .rt-tooltipContent {
 +
margin-bottom: -8px;
 +
padding-bottom: 17px;
 +
}
 +
 +
.rt-tooltip-below .rt-tooltipContent {
 +
margin-top: -10px;
 +
padding-top: 19px;
 +
}
 +
 +
.rt-tooltipTail,
 +
.rt-tooltipTail:after {
 +
position: absolute;
 +
width: 12px;
 +
height: 12px;
 +
}
 +
 +
.rt-tooltipTail {
 +
background: #c8ccd1;
 +
background: -webkit-linear-gradient(bottom left, #c8ccd1 50%, rgba(0, 0, 0, 0) 50%);
 +
background: linear-gradient(to top right, #c8ccd1 50%, rgba(0, 0, 0, 0) 50%);
 +
}
 +
 +
.rt-tooltipTail:after {
 +
content: "";
 +
background: #fff;
 +
bottom: 1px;
 +
left: 1px;
 +
}
 +
 +
.rt-tooltip-above .rt-tooltipTail {
 +
-webkit-transform: rotate(-45deg);
 +
transform: rotate(-45deg);
 +
-webkit-transform-origin: 100% 100%;
 +
transform-origin: 100% 100%;
 +
bottom: 0;
 +
left: 15px;
 +
}
 +
 +
.rt-tooltip-below .rt-tooltipTail {
 +
-webkit-transform: rotate(135deg);
 +
transform: rotate(135deg);
 +
-webkit-transform-origin: 0 0;
 +
transform-origin: 0 0;
 +
top: 0;
 +
left: 27px;
 +
}
 +
 +
.rt-settingsLink {
 +
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%0D%0A%20%20%20%20%3Cpath%20fill%3D%22%23555%22%20d%3D%22M20%2014.5v-2.9l-1.8-.3c-.1-.4-.3-.8-.6-1.4l1.1-1.5-2.1-2.1-1.5%201.1c-.5-.3-1-.5-1.4-.6L13.5%205h-2.9l-.3%201.8c-.5.1-.9.3-1.4.6L7.4%206.3%205.3%208.4l1%201.5c-.3.5-.4.9-.6%201.4l-1.7.2v2.9l1.8.3c.1.5.3.9.6%201.4l-1%201.5%202.1%202.1%201.5-1c.4.2.9.4%201.4.6l.3%201.8h3l.3-1.8c.5-.1.9-.3%201.4-.6l1.5%201.1%202.1-2.1-1.1-1.5c.3-.5.5-1%20.6-1.4l1.5-.3zM12%2016c-1.7%200-3-1.3-3-3s1.3-3%203-3%203%201.3%203%203-1.3%203-3%203z%22%2F%3E%0D%0A%3C%2Fsvg%3E);
 +
float: right;
 +
cursor: pointer;
 +
margin: -4px -4px 0 8px;
 +
height: 24px;
 +
width: 24px;
 +
border-radius: 2px;
 +
background-position: center center;
 +
background-repeat: no-repeat;
 +
background-size: 24px 24px;
 +
}
 +
 +
.rt-settingsLink:hover {
 +
background-color: #eee;
 +
}
 +
 +
.rt-target {
 +
background-color: #def;
 +
}
 +
 +
.rt-enableSelect {
 +
font-weight: bold;
 +
}
 +
 +
.rt-settingsFormSeparator {
 +
margin: 0.85714286em 0;
 +
}
 +
 +
.rt-numberInput.rt-numberInput {
 +
width: 150px;
 +
}
 +
 +
.rt-tooltipsForCommentsField.rt-tooltipsForCommentsField.rt-tooltipsForCommentsField {
 +
margin-top: 1.64285714em;
 +
}
 +
 +
.rt-disabledHelp {
 +
border-collapse: collapse;
 +
}
 +
 +
.rt-disabledHelp td {
 +
padding: 0;
 +
}
 +
 +
.rt-disabledNote.rt-disabledNote {
 +
vertical-align: bottom;
 +
padding-left: 0.36em;
 +
font-weight: bold;
 +
}
 +
 +
@-webkit-keyframes rt-fade-in-up {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translate(0, 20px);
 +
-moz-transform: translate(0, 20px);
 +
-ms-transform: translate(0, 20px);
 +
transform: translate(0, 20px)
 +
}
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate(0, 0);
 +
-ms-transform: translate(0, 0);
 +
transform: translate(0, 0)
 +
}
 +
}
 +
 +
@-moz-keyframes rt-fade-in-up {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translate(0, 20px);
 +
-moz-transform: translate(0, 20px);
 +
-ms-transform: translate(0, 20px);
 +
transform: translate(0, 20px)
 +
}
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate(0, 0);
 +
-ms-transform: translate(0, 0);
 +
transform: translate(0, 0)
 +
}
 +
}
 +
 +
@keyframes rt-fade-in-up {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translate(0, 20px);
 +
-moz-transform: translate(0, 20px);
 +
-ms-transform: translate(0, 20px);
 +
transform: translate(0, 20px)
 +
}
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate(0, 0);
 +
-ms-transform: translate(0, 0);
 +
transform: translate(0, 0)
 +
}
 +
}
 +
 +
@-webkit-keyframes rt-fade-in-down {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translate(0, -20px);
 +
-moz-transform: translate(0, -20px);
 +
-ms-transform: translate(0, -20px);
 +
transform: translate(0, -20px)
 +
}
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate(0, 0);
 +
-ms-transform: translate(0, 0);
 +
transform: translate(0, 0)
 +
}
 +
}
 +
 +
@-moz-keyframes rt-fade-in-down {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translate(0, -20px);
 +
-moz-transform: translate(0, -20px);
 +
-ms-transform: translate(0, -20px);
 +
transform: translate(0, -20px)
 +
}
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate(0, 0);
 +
-ms-transform: translate(0, 0);
 +
transform: translate(0, 0)
 +
}
 +
}
 +
 +
@keyframes rt-fade-in-down {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translate(0, -20px);
 +
-moz-transform: translate(0, -20px);
 +
-ms-transform: translate(0, -20px);
 +
transform: translate(0, -20px)
 +
}
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate(0, 0);
 +
-ms-transform: translate(0, 0);
 +
transform: translate(0, 0)
 +
}
 +
}
 +
 +
@-webkit-keyframes rt-fade-out-down {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate(0, 0);
 +
-ms-transform: translate(0, 0);
 +
transform: translate(0, 0)
 +
}
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translate(0, 20px);
 +
-moz-transform: translate(0, 20px);
 +
-ms-transform: translate(0, 20px);
 +
transform: translate(0, 20px)
 +
}
 +
}
 +
 +
@-moz-keyframes rt-fade-out-down {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate(0, 0);
 +
-ms-transform: translate(0, 0);
 +
transform: translate(0, 0)
 +
}
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translate(0, 20px);
 +
-moz-transform: translate(0, 20px);
 +
-ms-transform: translate(0, 20px);
 +
transform: translate(0, 20px)
 +
}
 +
}
 +
 +
@keyframes rt-fade-out-down {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate(0, 0);
 +
-ms-transform: translate(0, 0);
 +
transform: translate(0, 0)
 +
}
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translate(0, 20px);
 +
-moz-transform: translate(0, 20px);
 +
-ms-transform: translate(0, 20px);
 +
transform: translate(0, 20px)
 +
}
 +
}
 +
 +
@-webkit-keyframes rt-fade-out-up {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate(0, 0);
 +
-ms-transform: translate(0, 0);
 +
transform: translate(0, 0)
 +
}
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translate(0, -20px);
 +
-moz-transform: translate(0, -20px);
 +
-ms-transform: translate(0, -20px);
 +
transform: translate(0, -20px)
 +
}
 +
}
 +
 +
@-moz-keyframes rt-fade-out-up {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate(0, 0);
 +
-ms-transform: translate(0, 0);
 +
transform: translate(0, 0)
 +
}
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translate(0, -20px);
 +
-moz-transform: translate(0, -20px);
 +
-ms-transform: translate(0, -20px);
 +
transform: translate(0, -20px)
 +
}
 +
}
 +
 +
@keyframes rt-fade-out-up {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate(0, 0);
 +
-ms-transform: translate(0, 0);
 +
transform: translate(0, 0)
 +
}
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translate(0, -20px);
 +
-moz-transform: translate(0, -20px);
 +
-ms-transform: translate(0, -20px);
 +
transform: translate(0, -20px)
 +
}
 +
}
 +
 +
.rt-fade-in-up {
 +
-webkit-animation: rt-fade-in-up 0.2s ease forwards;
 +
-moz-animation: rt-fade-in-up 0.2s ease forwards;
 +
animation: rt-fade-in-up 0.2s ease forwards
 +
}
 +
 +
.rt-fade-in-down {
 +
-webkit-animation: rt-fade-in-down 0.2s ease forwards;
 +
-moz-animation: rt-fade-in-down 0.2s ease forwards;
 +
animation: rt-fade-in-down 0.2s ease forwards
 +
}
 +
 +
.rt-fade-out-down {
 +
-webkit-animation: rt-fade-out-down 0.2s ease forwards;
 +
-moz-animation: rt-fade-out-down 0.2s ease forwards;
 +
animation: rt-fade-out-down 0.2s ease forwards
 +
}
 +
 +
.rt-fade-out-up {
 +
-webkit-animation: rt-fade-out-up 0.2s ease forwards;
 +
-moz-animation: rt-fade-out-up 0.2s ease forwards;
 +
animation: rt-fade-out-up 0.2s ease forwards
 +
}

Revision as of 08:33, 15 July 2018

/* ===== CHANGE : Some more spacing for paragraphs ================================================================================================================== */

/* Limit to mw-parser-output to not affect p's that might be used elsewhere */
.mw-parser-output p {
    margin: 0.5em 0;
}

/* ^- affects the p's on the frontpage negatively, let's fix that so it doesn't break spacing on buttons + featured article, which expects 0 margin */
.home-container p {
    margin: 0;
}




/* ===== CHANGE : Center the content ================================================================================================================================
 * 
 * This caps the max width of the content and aligns it all to the center. max-width 1600px because that seems like a good middle-ground.
 *
 */

/* Center stuff - Beautiful! */
#masthead {
    width: auto;
    max-width: 1600px;
}

body {
    justify-content: center;
    width: 100%;
}

/* Fixes the slightly off-putting ~70% width items in the Editing Guide. Let's have two items per row! */
/* Wrap it around a min width to not break mobile view */
@media only screen and (min-width : 801px) {
    .editing-guide-list-item-wrapper {
        max-width: 50%;
    }
}




/* ===== CHANGE : Allow left aligned tables =========================================================================================================================
 * 
 * This allows the use of style="text-align: center;" at the top of a table in an article to get all of its contents to align left.
 *
 */

/* This is currently set to Center, let's change that to Inherit */
table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
    text-align: inherit;
}

/* Let's set the default align to Center, to reproduce the current look */
table.wikitable {
    text-align: center;
}




/* ===== CHANGE : Border to the left of H3s to make it easier to separate H3 sections from H4 sections ==============================================================
 * 
 * This is a change I'm somewhat conflicted about. It works, and it merges nice, and works in mobile as well, but it means the H3s are indented more than the H4s, and can give a minor conflicting look because of it.
 * 
 */

/* Add a border to H3s by default*/
h3 {
    border-left: 5px solid #7babde; /* 5px cuz visible, but not distracting */
    padding-left: 10px; /* need some air to breath */
}

/* Dunno why we're using padding-top when margin-top is more appropriate for this. Probably haven't found the edge case yet, I guess. */
/* This is mostly to remove the padding-top that makes the new border extend upwards above the text of the H3. */

h1, h2, h3, h4, h5 {
    margin-top: 10px; /* 10px for margin-top since padding-top: 5px results in about the same, for some weird reason */
    padding-top: 0; /* let's remove the current 5px default */
}




/* ===== BUG FIXES ================================================================================================================================================== */

/* Corrects hidden category on front page being offset -25px due to the padding on articles for #main-content being overwritten due to rule on .page-Home #main-content */
.page-Home #main-content div#body-content div#catlinks {
    margin-left: 0;
}


/* Fixes .project-intro from going off-screen on widths below 1000ish, but above 800ish */
/* Wrap it around a min width to not break mobile view */
@media only screen and (min-width : 801px) {
    .project-intro {
        max-width: 750px;
        width: auto;
    }
}


/* Fixes for the four SVG icons on the header, making them all #999 */

/* Icon 1 - Watchlist - Change fill color to #999, from #A1A1A0 */
#pt-watchlist a {
    background-image: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 96%22%3E%3Cpath fill=%22%23999%22 d=%22M48 17 57 36 78 39 63 53 66 73 48 64 30 73 33 53 18 39 39 36Z%22/%3E%3C/svg%3E");
}

/* Icon 2 - My Talk - Change fill color to #999, from #A1A1A0 */
#pt-mytalk a {
    background-image: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 96%22%3E%3Cpath fill=%22%23999%22 d=%22m34 33 26 0 0-13-39 0 0 31-7 9 20 0zM75.1 37.1 75 67l8 9-40 0c-3.3 0-5-2.4-5-5l0-34 37 0%22/%3E%3C/svg%3E");
}

/* Icon 3 - Notification Alert - Change fill color to white, from none. White becomes #999 due to some reason */
#pt-notifications-alert .mw-echo-notifications-badge::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22utf-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%0A %3Cpath fill=%22white%22 d=%22M17.5 14V9c0-3-2.3-5-5.5-5S6.5 6 6.5 9v5c0 2 0 3-2 3v1h15v-1c-2 0-2-1-2-3zM12 20H9c0 1 1.6 2 3 2s3-1 3-2h-3z%22/%3E%0A%3C/svg%3E%0A");

}

/* Icon 4 - Notification Notice - Change fill color to white, from none. White becomes #999 due to some reason */
#pt-notifications-notice .mw-echo-notifications-badge::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22utf-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%0A %3Cpath fill=%22white%22 d=%22M3 13.35l1.8-7.2c.2-.996.81-1.8 1.8-1.8h10.8c.99 0 1.6.867 1.8 1.8l1.8 7.2v4.5c0 .99-.81 1.8-1.8 1.8H4.8c-.99 0-1.8-.81-1.8-1.8v-4.5zm6.96 1.8h4.08c-.49.557-1.212.9-2.04.9a2.68 2.68 0 0 1-2.04-.9h4.08c.414-.472.66-1.098.66-1.8h4.14l-1.44-7.2H6.6l-1.44 7.2H9.3c0 .702.246 1.328.66 1.8z%22/%3E%0A%3C/svg%3E%0A");
}

/* White becomes #999 because of the 0.65 opacity on this CSS element: "pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read" */


/* --------------------- */

/* See [[mw:Reference Tooltips]] */

.rt-tooltip {
	position: absolute;
	z-index: 90;
	max-width: 350px;
	background: #fff;
	color: #222;
	font-size: 13px;
	line-height: 1.5em;
	border: 1px solid #c8ccd1;
	border-radius: 3px;
	-webkit-box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.3);
	box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.3);
	overflow-wrap: break-word;
}

.rt-tooltip.rt-tooltip-insideWindow {
	z-index: 110;
}

.rt-tooltipContent {
	padding: 9px 12px;
}

.rt-tooltip-above .rt-tooltipContent {
	margin-bottom: -8px;
	padding-bottom: 17px;
}

.rt-tooltip-below .rt-tooltipContent {
	margin-top: -10px;
	padding-top: 19px;
}

.rt-tooltipTail,
.rt-tooltipTail:after {
	position: absolute;
	width: 12px;
	height: 12px;
}

.rt-tooltipTail {
	background: #c8ccd1;
	background: -webkit-linear-gradient(bottom left, #c8ccd1 50%, rgba(0, 0, 0, 0) 50%);
	background: linear-gradient(to top right, #c8ccd1 50%, rgba(0, 0, 0, 0) 50%);
}

.rt-tooltipTail:after {
	content: "";
	background: #fff;
	bottom: 1px;
	left: 1px;
}

.rt-tooltip-above .rt-tooltipTail {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
	bottom: 0;
	left: 15px;
}

.rt-tooltip-below .rt-tooltipTail {
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	top: 0;
	left: 27px;
}

.rt-settingsLink {
	background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%0D%0A%20%20%20%20%3Cpath%20fill%3D%22%23555%22%20d%3D%22M20%2014.5v-2.9l-1.8-.3c-.1-.4-.3-.8-.6-1.4l1.1-1.5-2.1-2.1-1.5%201.1c-.5-.3-1-.5-1.4-.6L13.5%205h-2.9l-.3%201.8c-.5.1-.9.3-1.4.6L7.4%206.3%205.3%208.4l1%201.5c-.3.5-.4.9-.6%201.4l-1.7.2v2.9l1.8.3c.1.5.3.9.6%201.4l-1%201.5%202.1%202.1%201.5-1c.4.2.9.4%201.4.6l.3%201.8h3l.3-1.8c.5-.1.9-.3%201.4-.6l1.5%201.1%202.1-2.1-1.1-1.5c.3-.5.5-1%20.6-1.4l1.5-.3zM12%2016c-1.7%200-3-1.3-3-3s1.3-3%203-3%203%201.3%203%203-1.3%203-3%203z%22%2F%3E%0D%0A%3C%2Fsvg%3E);
	float: right;
	cursor: pointer;
	margin: -4px -4px 0 8px;
	height: 24px;
	width: 24px;
	border-radius: 2px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
}

.rt-settingsLink:hover {
	background-color: #eee;
}

.rt-target {
	background-color: #def;
}

.rt-enableSelect {
	font-weight: bold;
}

.rt-settingsFormSeparator {
	margin: 0.85714286em 0;
}

.rt-numberInput.rt-numberInput {
	width: 150px;
}

.rt-tooltipsForCommentsField.rt-tooltipsForCommentsField.rt-tooltipsForCommentsField {
	margin-top: 1.64285714em;
}

.rt-disabledHelp {
	border-collapse: collapse;
}

.rt-disabledHelp td {
	padding: 0;
}

.rt-disabledNote.rt-disabledNote {
	vertical-align: bottom;
	padding-left: 0.36em;
	font-weight: bold;
}

@-webkit-keyframes rt-fade-in-up {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 20px);
		-moz-transform: translate(0, 20px);
		-ms-transform: translate(0, 20px);
		transform: translate(0, 20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
}

@-moz-keyframes rt-fade-in-up {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 20px);
		-moz-transform: translate(0, 20px);
		-ms-transform: translate(0, 20px);
		transform: translate(0, 20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
}

@keyframes rt-fade-in-up {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 20px);
		-moz-transform: translate(0, 20px);
		-ms-transform: translate(0, 20px);
		transform: translate(0, 20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
}

@-webkit-keyframes rt-fade-in-down {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, -20px);
		-moz-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
}

@-moz-keyframes rt-fade-in-down {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, -20px);
		-moz-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
}

@keyframes rt-fade-in-down {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, -20px);
		-moz-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
}

@-webkit-keyframes rt-fade-out-down {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, 20px);
		-moz-transform: translate(0, 20px);
		-ms-transform: translate(0, 20px);
		transform: translate(0, 20px)
	}
}

@-moz-keyframes rt-fade-out-down {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, 20px);
		-moz-transform: translate(0, 20px);
		-ms-transform: translate(0, 20px);
		transform: translate(0, 20px)
	}
}

@keyframes rt-fade-out-down {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, 20px);
		-moz-transform: translate(0, 20px);
		-ms-transform: translate(0, 20px);
		transform: translate(0, 20px)
	}
}

@-webkit-keyframes rt-fade-out-up {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, -20px);
		-moz-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px)
	}
}

@-moz-keyframes rt-fade-out-up {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, -20px);
		-moz-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px)
	}
}

@keyframes rt-fade-out-up {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, -20px);
		-moz-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		transform: translate(0, -20px)
	}
}

.rt-fade-in-up {
	-webkit-animation: rt-fade-in-up 0.2s ease forwards;
	-moz-animation: rt-fade-in-up 0.2s ease forwards;
	animation: rt-fade-in-up 0.2s ease forwards
}

.rt-fade-in-down {
	-webkit-animation: rt-fade-in-down 0.2s ease forwards;
	-moz-animation: rt-fade-in-down 0.2s ease forwards;
	animation: rt-fade-in-down 0.2s ease forwards
}

.rt-fade-out-down {
	-webkit-animation: rt-fade-out-down 0.2s ease forwards;
	-moz-animation: rt-fade-out-down 0.2s ease forwards;
	animation: rt-fade-out-down 0.2s ease forwards
}

.rt-fade-out-up {
	-webkit-animation: rt-fade-out-up 0.2s ease forwards;
	-moz-animation: rt-fade-out-up 0.2s ease forwards;
	animation: rt-fade-out-up 0.2s ease forwards
}