MediaWiki:Common.css: различия между версиями
Строка 1: | Строка 1: | ||
− | @import '/ | + | @import '//use.fontawesome.com/releases/v5.13.0/css/all.css'; |
− | @ | + | @font-face { |
− | @ | + | font-family: CoreSansD37; |
− | + | font-style: normal; | |
+ | font-weight: 400; | ||
+ | src: url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD37/CoreSansD37CnRegular.woff) format("woff"), | ||
+ | url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD37/CoreSansD37CnRegular.ttf) format("truetype"), | ||
+ | url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD37/CoreSansD37CnRegular.svg) format("svg"); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: CoreSansD67; | ||
+ | font-style: normal; | ||
+ | font-weight: 400; | ||
+ | src: url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD67/CoreSansD67CnHeavy.woff2) format("woff2"), | ||
+ | url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD67/CoreSansD67CnHeavy.woff) format("woff"), | ||
+ | url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD67/CoreSansD67CnHeavy.ttf) format("truetype"); | ||
+ | } | ||
+ | /* (begin) reset modules=skins.vector.styles */ | ||
+ | @media screen { | ||
− | @ | + | body { |
− | @ | + | background-color: #000; |
+ | } | ||
+ | .mw-body { | ||
+ | border: 0; | ||
+ | } | ||
+ | #mw-panel .portal .body { | ||
+ | background-image: none; | ||
+ | } | ||
+ | #mw-page-base { | ||
+ | background-image: none; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | .mw-body, | ||
+ | .parsoid-body { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | /* (end) reset modules=skins.vector.styles */ | ||
+ | * { | ||
+ | border: 0; | ||
+ | margin: 0; | ||
+ | outline: none; | ||
+ | padding: 0; | ||
+ | -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
+ | } | ||
+ | *, | ||
+ | :after, | ||
+ | :before { | ||
+ | -moz-box-sizing: border-box; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | body, | ||
+ | html { | ||
+ | cursor: default; | ||
+ | height: 100%; | ||
+ | min-height: 100%; | ||
+ | width: 100%; | ||
+ | -webkit-text-size-adjust: 100%; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
+ | } | ||
+ | html { | ||
+ | background: #000; | ||
+ | } | ||
+ | body { | ||
+ | background: #000; | ||
+ | color: #999; | ||
+ | display: none; | ||
+ | font: normal 20px/1.4 CoreSansD37, sans-serif; | ||
+ | overflow-y: scroll; | ||
+ | overflow-x: auto; | ||
+ | } | ||
+ | a { | ||
+ | color: inherit; | ||
+ | cursor: pointer; | ||
+ | outline: none; | ||
+ | text-decoration: underline; | ||
+ | -webkit-transition: all .1s linear; | ||
+ | transition: all .1s linear; | ||
+ | } | ||
+ | a:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | a[href^=tel] { | ||
+ | color: inherit; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | b, | ||
+ | strong { | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | img { | ||
+ | display: inline-block; | ||
+ | max-width: 100%; | ||
+ | vertical-align: top; | ||
+ | } | ||
+ | .center img { | ||
+ | display: block; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | li, | ||
+ | ul { | ||
+ | list-style: none; | ||
+ | } | ||
+ | table { | ||
+ | border-collapse: collapse; | ||
+ | border-spacing: 0; | ||
+ | } | ||
+ | td { | ||
+ | padding: 0; | ||
+ | vertical-align: top; | ||
+ | } | ||
+ | pre { | ||
+ | font: 14px/1.4 monospace; | ||
+ | white-space: pre-wrap; | ||
+ | white-space: -moz-pre-wrap; | ||
+ | white-space: -pre-wrap; | ||
+ | white-space: -o-pre-wrap; | ||
+ | word-wrap: break-word; | ||
+ | } | ||
+ | input, | ||
+ | select, | ||
+ | textarea { | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | input[type=number]::-webkit-inner-spin-button, | ||
+ | input[type=number]::-webkit-outer-spin-button { | ||
+ | -webkit-appearance: none; | ||
+ | margin: 0; | ||
+ | } | ||
+ | input[type=number] { | ||
+ | -moz-appearance: textfield; | ||
+ | } | ||
+ | input[type=search]::-webkit-search-cancel-button, | ||
+ | input[type=search]::-webkit-search-decoration, | ||
+ | input[type=search]::-webkit-search-results-button, | ||
+ | input[type=search]::-webkit-search-results-decoration { | ||
+ | display: none; | ||
+ | } | ||
+ | input[type=search] { | ||
+ | -webkit-appearance: textfield; | ||
+ | } | ||
+ | button { | ||
+ | -webkit-appearance: none; | ||
+ | border: 0; | ||
+ | border-radius: 0; | ||
+ | -webkit-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
+ | } | ||
+ | ::selection { | ||
+ | background: #987e54; | ||
+ | color: #fff; | ||
+ | text-shadow: none; | ||
+ | } | ||
+ | ::-moz-selection { | ||
+ | background: #987e54; | ||
+ | color: #fff; | ||
+ | text-shadow: none; | ||
+ | } | ||
+ | #ca-talk, | ||
+ | #ca-watch, | ||
+ | #catlinks, | ||
+ | #contentSub, | ||
+ | #feedlinks, | ||
+ | #footer-icons, | ||
+ | #footer-info, | ||
+ | #left-navigation, | ||
+ | #mw-editpage-watch, | ||
+ | #mw-helplink, | ||
+ | #mw-indicator-mw-helplink, | ||
+ | #mw-navigation > h2, | ||
+ | #mw-head-base, | ||
+ | #mw-page-base, | ||
+ | #n-help-mediawiki, | ||
+ | #ooui-php-18.mw-hide-minor-edits, | ||
+ | #p-cactions > input, | ||
+ | #p-lang, | ||
+ | #p-logo, | ||
+ | #p-navigation, | ||
+ | #p-search, | ||
+ | #pt-mytalk, | ||
+ | #pt-watchlist, | ||
+ | #t-print, | ||
+ | #toc { | ||
+ | display: none !important; | ||
+ | } | ||
+ | .mw-helplink, | ||
+ | .mw-search-profile-tabs, | ||
+ | .suggestions, | ||
+ | .page-Служебная_Источники_книг, | ||
+ | .page-Служебная_Список_наблюдения, | ||
+ | .page-Обсуждение { | ||
+ | display: none !important; | ||
+ | } | ||
+ | body.preloader-active { | ||
+ | display: block; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .preloader { | ||
+ | background-color: #000; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | position: fixed; | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | z-index: 10000; | ||
+ | } | ||
+ | .preloader--hidden { | ||
+ | opacity: 0; | ||
+ | transition: opacity .4s, visibility .4s; | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | .preloader__image { | ||
+ | height: 335px; | ||
+ | left: 50%; | ||
+ | opacity: 0; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | width: 300px; | ||
+ | } | ||
+ | .preloader__image--0 { | ||
+ | animation: glow .25s linear forwards; | ||
+ | } | ||
+ | .preloader__image--1 { | ||
+ | animation: glow .25s linear .25s forwards; | ||
+ | } | ||
+ | .preloader__image--2 { | ||
+ | animation: glow .25s linear .5s forwards; | ||
+ | } | ||
+ | .preloader__image--3 { | ||
+ | animation: glow .25s linear .75s forwards; | ||
+ | } | ||
+ | .preloader__image--4 { | ||
+ | animation: glow .75s ease-in 1s alternate infinite; | ||
+ | } | ||
+ | @keyframes glow { | ||
+ | |||
+ | from { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | to { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | #footer { | ||
+ | line-height: 23px; | ||
+ | min-height: 240px; | ||
+ | padding: 60px 0 20px; | ||
+ | } | ||
+ | .footer__groups, | ||
+ | .footer__group, | ||
+ | .footer-social, | ||
+ | .footer-social a { | ||
+ | -webkit-box-align: center; | ||
+ | align-items: center; | ||
+ | display: -webkit-box; | ||
+ | display: flex; | ||
+ | -webkit-box-pack: center; | ||
+ | justify-content: center; | ||
+ | } | ||
+ | .footer__groups { | ||
+ | padding: 0 0 20px; | ||
+ | } | ||
+ | .footer__group { | ||
+ | height: 50px; | ||
+ | margin: 0 5px; | ||
+ | opacity: .4; | ||
+ | -webkit-transition: opacity .35s ease-out; | ||
+ | transition: opacity .35s ease-out; | ||
+ | } | ||
+ | a.footer__group:hover { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .footer__group.type-at { | ||
+ | width: 60px; | ||
+ | } | ||
+ | .footer__group.type-mg { | ||
+ | width: 90px; | ||
+ | } | ||
+ | .footer__copyright { | ||
+ | color: #666; | ||
+ | margin: 0 auto; | ||
+ | max-width: 665px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .footer-social { | ||
+ | padding: 0 0 40px; | ||
+ | } | ||
+ | .footer-social a { | ||
+ | color: #888; | ||
+ | font-size: 30px; | ||
+ | height: 30px; | ||
+ | margin: 0 6px; | ||
+ | text-decoration: none; | ||
+ | width: 30px; | ||
+ | } | ||
+ | .footer-social a:hover { | ||
+ | color: #fff; | ||
+ | } | ||
+ | .footer-pegi { | ||
+ | border: 1px solid #666; | ||
+ | border-radius: 360px; | ||
+ | height: 50px; | ||
+ | margin: 0 10px; | ||
+ | padding: 2px; | ||
+ | width: 50px; | ||
+ | } | ||
+ | .footer-pegi span { | ||
+ | -webkit-box-align: center; | ||
+ | align-items: center; | ||
+ | background: #666; | ||
+ | border-radius: 360px; | ||
+ | color: #000; | ||
+ | display: -webkit-box; | ||
+ | display: flex; | ||
+ | font-size: 31px; | ||
+ | height: 44px; | ||
+ | -webkit-box-pack: end; | ||
+ | justify-content: flex-end; | ||
+ | width: 44px; | ||
+ | } | ||
+ | @media only screen and (min-width: 768px) { | ||
+ | |||
+ | #footer { | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | .footer__group { | ||
+ | margin: 0 8px; | ||
+ | } | ||
+ | .footer__group.type-at { | ||
+ | width: 85.71px; | ||
+ | } | ||
+ | .footer__group.type-mg { | ||
+ | width: 146px; | ||
+ | } | ||
+ | .footer-social a { | ||
+ | font-size: 40px; | ||
+ | height: 50px; | ||
+ | margin: 0 10px; | ||
+ | width: 50px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | #mw-navigation, | ||
+ | #mw-head, | ||
+ | #mw-panel, | ||
+ | #right-navigation { | ||
+ | display: -webkit-box; | ||
+ | display: flex; | ||
+ | } | ||
+ | #mw-navigation { | ||
+ | -webkit-box-align: center; | ||
+ | align-items: center; | ||
+ | background: #000; | ||
+ | height: 30px; | ||
+ | -webkit-box-pack: justify; | ||
+ | justify-content: space-between; | ||
+ | left: 0; | ||
+ | padding: 0 20px; | ||
+ | position: fixed; | ||
+ | text-transform: uppercase; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | z-index: 5; | ||
+ | } | ||
+ | #mw-navigation, | ||
+ | .user-edit #mw-head { | ||
+ | -webkit-flex-direction: row-reverse; | ||
+ | flex-direction: row-reverse; | ||
+ | } | ||
+ | #mw-navigation h3, | ||
+ | #mw-navigation a { | ||
+ | color: #888; | ||
+ | display: block; | ||
+ | font-size: 13px; | ||
+ | font-weight: 500; | ||
+ | letter-spacing: .06em; | ||
+ | line-height: 14px; | ||
+ | margin-left: 19px; | ||
+ | text-decoration: none; | ||
+ | -webkit-transition: color .35s ease-out; | ||
+ | transition: color .35s ease-out; | ||
+ | } | ||
+ | #mw-navigation a:hover { | ||
+ | color: #fff; | ||
+ | } | ||
+ | #mw-panel a:first-child { | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | #mw-navigation ul { | ||
+ | background: #000; | ||
+ | display: none; | ||
+ | padding: 10px 0 0; | ||
+ | position: absolute; | ||
+ | } | ||
+ | #mw-head ul { | ||
+ | right: -20px; | ||
+ | } | ||
+ | #mw-panel ul { | ||
+ | left: 10px; | ||
+ | } | ||
+ | #mw-navigation li a { | ||
+ | display: inline-block; | ||
+ | margin-left: 0; | ||
+ | padding: 10px 20px; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | #p-cactions, | ||
+ | #p-personal, | ||
+ | #p-tb, | ||
+ | #p-views { | ||
+ | position: relative; | ||
+ | } | ||
+ | #p-cactions:hover ul, | ||
+ | #p-personal:hover ul, | ||
+ | #p-tb:hover ul, | ||
+ | #p-views:hover ul { | ||
+ | display: -webkit-box; | ||
+ | display: flex; | ||
+ | -webkit-flex-direction: column; | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | #p-personal, | ||
+ | #p-cactions, | ||
+ | #p-tb, | ||
+ | #p-views { | ||
+ | display: none !important; | ||
+ | } | ||
+ | .user-edit #god-game, | ||
+ | .user-edit #god-support, | ||
+ | .user-edit #god-download { | ||
+ | display: none !important; | ||
+ | } | ||
+ | .user-edit #p-personal, | ||
+ | .user-edit #p-cactions, | ||
+ | .user-edit #p-tb, | ||
+ | .user-edit #p-views, | ||
+ | .user-edit .mw-search-profile-tabs { | ||
+ | display: block !important; | ||
+ | } | ||
+ | @media only screen and (min-width: 1012px) { | ||
+ | |||
+ | #mw-navigation { | ||
+ | padding: 0 40px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | @media (max-width: 768px) { | ||
+ | |||
+ | #mw-panel { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | .header { | ||
+ | -webkit-box-align: center; | ||
+ | align-items: center; | ||
+ | background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Header_bg.jpg) center/auto 100% no-repeat; | ||
+ | display: -webkit-box; | ||
+ | display: flex; | ||
+ | height: 240px; | ||
+ | -webkit-box-pack: center; | ||
+ | justify-content: center; | ||
+ | margin: 30px 0 0; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .header:after { | ||
+ | background-image: linear-gradient(0deg, #000 0, transparent 35%); | ||
+ | bottom: 0; | ||
+ | content: ""; | ||
+ | height: 100%; | ||
+ | left: 0; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .logo { | ||
+ | background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Logo.png) center no-repeat; | ||
+ | display: block; | ||
+ | height: 180px; | ||
+ | width: 420px; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | @media (max-width: 1011px) { | ||
+ | |||
+ | .header { | ||
+ | height: 192px; | ||
+ | } | ||
+ | .logo { | ||
+ | background-size: auto 92px; | ||
+ | height: 144px; | ||
+ | width: 336px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | @media (max-width: 768px) { | ||
+ | |||
+ | .header { | ||
+ | height: 144px; | ||
+ | } | ||
+ | .logo { | ||
+ | background-size: auto 69px; | ||
+ | height: 108px; | ||
+ | width: 252px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | #content { | ||
+ | background: #1c1c1c; | ||
+ | font-size: 20px; | ||
+ | line-height: 1.4; | ||
+ | margin: 0 auto; | ||
+ | max-width: 1012px; | ||
+ | min-height: 300px; | ||
+ | overflow: hidden; | ||
+ | padding: 24px 34px; | ||
+ | position: relative; | ||
+ | } | ||
+ | #firstHeading { | ||
+ | background: transparent; | ||
+ | border: 0; | ||
+ | color: #fff; | ||
+ | font-family: Cormorant SC; | ||
+ | font-size: 40px; | ||
+ | font-weight: 400; | ||
+ | line-height: 1.4; | ||
+ | padding: 8px 0 32px; | ||
+ | text-align: center; | ||
+ | word-spacing: .02em; | ||
+ | } | ||
+ | #content h2, | ||
+ | #content h3, | ||
+ | #content h4, | ||
+ | #content h5, | ||
+ | #content h6 { | ||
+ | border: 0 !important; | ||
+ | color: #fff; | ||
+ | } | ||
+ | #content h2 { | ||
+ | font-family: Cormorant SC; | ||
+ | font-size: 30px; | ||
+ | font-weight: 400; | ||
+ | margin: 10px 0 24px; | ||
+ | word-spacing: .02em; | ||
+ | } | ||
+ | #content h2, | ||
+ | #content h3, | ||
+ | #content h4, | ||
+ | #content h5 { | ||
+ | line-height: 1.4; | ||
+ | } | ||
+ | #content h3, | ||
+ | #content h4, | ||
+ | #content h5 { | ||
+ | font-size: 18px; | ||
+ | font-weight: 500; | ||
+ | } | ||
+ | #content h6 { | ||
+ | font-size: 16px; | ||
+ | font-family: Futura PT; | ||
+ | line-height: 22px; | ||
+ | font-weight: 500; | ||
+ | } | ||
+ | #content p { | ||
+ | padding: 0 0 24px; | ||
+ | } | ||
+ | #content table { | ||
+ | font-size: 18px; | ||
+ | margin-bottom: 80px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | #content table tr:nth-child(2n) { | ||
+ | background-color: hsla(0,0%,100%,.1); | ||
+ | } | ||
+ | #content table td, | ||
+ | #content table th { | ||
+ | padding: 10px 20px; | ||
+ | text-align: left; | ||
+ | } | ||
+ | #content table th { | ||
+ | border-bottom: 1px solid #fff; | ||
+ | color: #fff; | ||
+ | } | ||
+ | .jquery-tablesorter th.headerSort, | ||
+ | .jquery-tablesorter th.headerSortUp, | ||
+ | .jquery-tablesorter th.headerSortDown { | ||
+ | background-image: none; | ||
+ | } | ||
+ | .jquery-tablesorter th.headerSort:after { | ||
+ | border: 5px solid transparent; | ||
+ | border-top-color: #9e9e9e; | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | height: 1px; | ||
+ | margin-left: 8px; | ||
+ | position: relative; | ||
+ | top: 3px; | ||
+ | width: 1px; | ||
+ | } | ||
+ | .jquery-tablesorter th.headerSortUp:after { | ||
+ | border-top-color: #c00; | ||
+ | top: -4px; | ||
+ | transform: rotate(180deg); | ||
+ | } | ||
+ | .jquery-tablesorter th.headerSortDown:after { | ||
+ | border-top-color: #c00; | ||
+ | } | ||
+ | #content ol, | ||
+ | #content ul { | ||
+ | list-style: none; | ||
+ | margin-bottom: 24px; | ||
+ | } | ||
+ | #content ol li, | ||
+ | #content ul li { | ||
+ | margin-bottom: 10px; | ||
+ | padding: 0 0 0 30px; | ||
+ | position: relative; | ||
+ | } | ||
+ | #content ol li:before, | ||
+ | #content ul li:before { | ||
+ | color: #c00; | ||
+ | display: inline-block; | ||
+ | left: 0; | ||
+ | position: absolute; | ||
+ | width: 30px; | ||
+ | } | ||
+ | #content ul li:before { | ||
+ | content: "\2022"; | ||
+ | } | ||
+ | #content ol { | ||
+ | counter-reset: li; | ||
+ | } | ||
+ | #content ol li { | ||
+ | counter-increment: li; | ||
+ | } | ||
+ | #content ol li:before { | ||
+ | content: counter(li) "."; | ||
+ | } | ||
+ | #content ol ol, | ||
+ | #content ol ul, | ||
+ | #content ul ol, | ||
+ | #content ul ul { | ||
+ | margin: 0 0 0 30px; | ||
+ | } | ||
+ | #content iframe, | ||
+ | #content img, | ||
+ | #content video { | ||
+ | max-width: 100%; | ||
+ | } | ||
+ | #content img { | ||
+ | height: auto !important; | ||
+ | } | ||
+ | @media (max-width: 1011px) { | ||
+ | |||
+ | #content { | ||
+ | max-width: 752px; | ||
+ | padding: 24px 28px; | ||
+ | } | ||
+ | #bodyContent { | ||
+ | margin: 0 auto; | ||
+ | width: 624px; | ||
+ | } | ||
+ | #firstHeading { | ||
+ | margin: 0 auto; | ||
+ | width: 624px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | @media (max-width: 768px) { | ||
+ | |||
+ | #content { | ||
+ | font-size: 16px; | ||
+ | line-height: 20px; | ||
+ | max-width: 360px; | ||
+ | padding: 24px 28px; | ||
+ | } | ||
+ | #bodyContent { | ||
+ | margin: 0 auto; | ||
+ | width: 304px; | ||
+ | } | ||
+ | #firstHeading { | ||
+ | font-size: 32px; | ||
+ | line-height: 1.4; | ||
+ | margin: 0 auto; | ||
+ | padding: 8px 0 24px; | ||
+ | width: 304px; | ||
+ | } | ||
+ | #content p { | ||
+ | padding: 0 0 20px; | ||
+ | } | ||
+ | #content table { | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | #content table tr { | ||
+ | display: block; | ||
+ | padding: 10px 0; | ||
+ | } | ||
+ | #content table td, | ||
+ | #content table th { | ||
+ | display: block; | ||
+ | padding: 5px 15px; | ||
+ | } | ||
+ | #content table th { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | button, | ||
+ | .button { | ||
+ | -webkit-box-align: center; | ||
+ | align-items: center; | ||
+ | background: none; | ||
+ | color: #fff; | ||
+ | display: -webkit-box; | ||
+ | display: flex; | ||
+ | -webkit-box-pack: center; | ||
+ | font-family: Futura PT; | ||
+ | font-size: 14px; | ||
+ | height: 40px; | ||
+ | justify-content: center; | ||
+ | line-height: 24px; | ||
+ | line-height: 1; | ||
+ | min-width: 260px; | ||
+ | outline: none; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | text-transform: uppercase; | ||
+ | -webkit-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | button, | ||
+ | .button:not(.button--disabled) { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | button span:nth-child(2), | ||
+ | .button span { | ||
+ | border-bottom: 2px solid transparent; | ||
+ | border-top: 2px solid transparent; | ||
+ | display: block; | ||
+ | height: 38px; | ||
+ | line-height: 34px; | ||
+ | margin: 0 -15px; | ||
+ | position: relative; | ||
+ | width: calc(100% - 80px); | ||
+ | z-index: 2; | ||
+ | } | ||
+ | button:after, | ||
+ | button:before, | ||
+ | .button:after, | ||
+ | .button:before { | ||
+ | content: ""; | ||
+ | display: block; | ||
+ | height: 40px; | ||
+ | width: 40px; | ||
+ | } | ||
+ | button:after, | ||
+ | .button:after { | ||
+ | -webkit-transform: rotate(180deg); | ||
+ | transform: rotate(180deg); | ||
+ | } | ||
+ | button span:nth-child(2), | ||
+ | .button--base span { | ||
+ | background: #c00; | ||
+ | } | ||
+ | button:after, | ||
+ | button:before, | ||
+ | .button--base:after, | ||
+ | .button--base:before { | ||
+ | background: url(/images/button-decor-base.svg) 50% no-repeat; | ||
+ | } | ||
+ | button:hover span:nth-child(2), | ||
+ | .button--base:hover span { | ||
+ | background: transparent; | ||
+ | border-bottom-color: #c00; | ||
+ | border-top-color: #c00; | ||
+ | } | ||
+ | button:hover:after, | ||
+ | button:hover:before, | ||
+ | .button--base:hover:after, | ||
+ | .button--base:hover:before { | ||
+ | background: url(/images/button-decor-inverse.svg) 50% no-repeat; | ||
+ | } | ||
+ | .button--inversed span { | ||
+ | background: transparent; | ||
+ | border-bottom-color: #c00; | ||
+ | border-top-color: #c00; | ||
+ | } | ||
+ | .button--inversed:after, | ||
+ | .button--inversed:before { | ||
+ | background: url(/images/button-decor-inverse.svg) 50% no-repeat; | ||
+ | } | ||
+ | .button--inversed:hover span { | ||
+ | background: #c00; | ||
+ | border-bottom-color: transparent; | ||
+ | border-top-color: transparent; | ||
+ | } | ||
+ | .button--inversed:hover:after, | ||
+ | .button--inversed:hover:before { | ||
+ | background: url(/images/button-decor-base.svg) 50% no-repeat; | ||
+ | } | ||
+ | .button--disabled span { | ||
+ | background: #888; | ||
+ | } | ||
+ | .button--disabled:after, | ||
+ | .button--disabled:before { | ||
+ | background: url(/images/button-decor-disable.svg) 50% no-repeat; | ||
+ | } | ||
+ | .button--disabled:hover span { | ||
+ | background: #888; | ||
+ | border-bottom-color: #888; | ||
+ | border-top-color: #888; | ||
+ | } | ||
+ | .button--disabled:hover:after, | ||
+ | .button--disabled:hover:before { | ||
+ | background: url(/images/button-decor-disable.svg) 50% no-repeat; | ||
+ | } | ||
+ | .button--small { | ||
+ | font-family: Futura PT; | ||
+ | font-size: 11px; | ||
+ | height: 24px; | ||
+ | line-height: 14px; | ||
+ | min-width: auto; | ||
+ | } | ||
+ | .button--small span { | ||
+ | border-bottom-width: 1px; | ||
+ | border-top-width: 1px; | ||
+ | height: 22px; | ||
+ | letter-spacing: 1px; | ||
+ | line-height: 20px; | ||
+ | margin: 0 -10px; | ||
+ | width: calc(100% - 48px); | ||
+ | } | ||
+ | .button--small:after, | ||
+ | .button--small:before { | ||
+ | height: 24px; | ||
+ | width: 24px; | ||
+ | } | ||
+ | .button--centered { | ||
+ | margin: 20px auto; | ||
+ | } | ||
+ | .button-big { | ||
+ | -webkit-box-align: center; | ||
+ | align-items: center; | ||
+ | background: none; | ||
+ | color: #fff; | ||
+ | cursor: pointer; | ||
+ | display: -webkit-box; | ||
+ | display: flex; | ||
+ | font-family: Cormorant SC; | ||
+ | font-size: 22px; | ||
+ | height: 130px; | ||
+ | -webkit-box-pack: center; | ||
+ | justify-content: center; | ||
+ | letter-spacing: .08em; | ||
+ | position: relative; | ||
+ | width: 430px; | ||
+ | } | ||
+ | .button-big:after, | ||
+ | .button-big:before { | ||
+ | background-position: 50%; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | content: ""; | ||
+ | display: block; | ||
+ | height: 100%; | ||
+ | left: 0; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | -webkit-transition: opacity .5s ease-out; | ||
+ | transition: opacity .5s ease-out; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .button-big:before { | ||
+ | opacity: 0; | ||
+ | background-image: url(/images/button_big_hover.png); | ||
+ | } | ||
+ | .button-big:after { | ||
+ | background-image: url(/images/button_big.png); | ||
+ | } | ||
+ | .button-big:hover:before { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .button-big:hover:after { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | .button-big span { | ||
+ | z-index: 1; | ||
+ | } | ||
+ | .button-link a { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | form .input, | ||
+ | form input[type=search], | ||
+ | form input[type=text] { | ||
+ | background: none; | ||
+ | border: 0; | ||
+ | border-bottom: 1px solid hsla(0,0%,100%,.5); | ||
+ | caret-color: #c00; | ||
+ | color: #fff; | ||
+ | font-family: Futura PT; | ||
+ | font-size: 18px; | ||
+ | line-height: 30px; | ||
+ | line-height: 2.2; | ||
+ | -webkit-transition: all .2s; | ||
+ | transition: all .2s; | ||
+ | } | ||
+ | @media (max-width: 1011px) { | ||
+ | |||
+ | form .input, | ||
+ | form input[type=search], | ||
+ | form input[type=text] { | ||
+ | font-size: 16px; | ||
+ | line-height: 22px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | form .input::-webkit-input-placeholder, | ||
+ | form input[type=search]::-webkit-input-placeholder, | ||
+ | form input[type=text]::-webkit-input-placeholder { | ||
+ | color: hsla(0,0%,100%,.5); | ||
+ | } | ||
+ | form .input::-moz-placeholder, | ||
+ | form input[type=search]::-moz-placeholder, | ||
+ | form input[type=text]::-moz-placeholder { | ||
+ | color: hsla(0,0%,100%,.5); | ||
+ | } | ||
+ | form .input:-ms-input-placeholder, | ||
+ | form input[type=search]:-ms-input-placeholder, | ||
+ | form input[type=text]:-ms-input-placeholder { | ||
+ | color: hsla(0,0%,100%,.5); | ||
+ | } | ||
+ | form .input::-ms-input-placeholder, | ||
+ | form input[type=search]::-ms-input-placeholder, | ||
+ | form input[type=text]::-ms-input-placeholder { | ||
+ | color: hsla(0,0%,100%,.5); | ||
+ | } | ||
+ | form .input::placeholder, | ||
+ | form input[type=search]::placeholder, | ||
+ | form input[type=text]::placeholder { | ||
+ | color: hsla(0,0%,100%,.5); | ||
+ | } | ||
+ | form .input:focus, | ||
+ | form .input:hover, | ||
+ | form input[type=search]:focus, | ||
+ | form input[type=search]:hover, | ||
+ | form input[type=text]:focus, | ||
+ | form input[type=text]:hover { | ||
+ | border-bottom: 1px solid #fff; | ||
+ | outline: none; | ||
+ | } | ||
+ | form .input:focus::-webkit-input-placeholder, | ||
+ | form .input:hover::-webkit-input-placeholder, | ||
+ | form input[type=search]:focus::-webkit-input-placeholder, | ||
+ | form input[type=search]:hover::-webkit-input-placeholder, | ||
+ | form input[type=text]:focus::-webkit-input-placeholder, | ||
+ | form input[type=text]:hover::-webkit-input-placeholder { | ||
+ | color: #fff; | ||
+ | } | ||
+ | form .input:focus::-moz-placeholder, | ||
+ | form .input:hover::-moz-placeholder, | ||
+ | form input[type=search]:focus::-moz-placeholder, | ||
+ | form input[type=search]:hover::-moz-placeholder, | ||
+ | form input[type=text]:focus::-moz-placeholder, | ||
+ | form input[type=text]:hover::-moz-placeholder { | ||
+ | color: #fff; | ||
+ | } | ||
+ | form .input:focus:-ms-input-placeholder, | ||
+ | form .input:hover:-ms-input-placeholder, | ||
+ | form input[type=search]:focus:-ms-input-placeholder, | ||
+ | form input[type=search]:hover:-ms-input-placeholder, | ||
+ | form input[type=text]:focus:-ms-input-placeholder, | ||
+ | form input[type=text]:hover:-ms-input-placeholder { | ||
+ | color: #fff; | ||
+ | } | ||
+ | form .input:focus::-ms-input-placeholder, | ||
+ | form .input:hover::-ms-input-placeholder, | ||
+ | form input[type=search]:focus::-ms-input-placeholder, | ||
+ | form input[type=search]:hover::-ms-input-placeholder, | ||
+ | form input[type=text]:focus::-ms-input-placeholder, | ||
+ | form input[type=text]:hover::-ms-input-placeholder { | ||
+ | color:#fff; | ||
+ | } | ||
+ | form .input:focus::placeholder, | ||
+ | form .input:hover::placeholder, | ||
+ | form input[type=search]:focus::placeholder, | ||
+ | form input[type=search]:hover::placeholder, | ||
+ | form input[type=text]:focus::placeholder, | ||
+ | form input[type=text]:hover::placeholder { | ||
+ | color: #fff; | ||
+ | } | ||
+ | form .input--error { | ||
+ | border-bottom: 1px solid #c00; | ||
+ | } | ||
+ | form .error { | ||
+ | color: #c00; | ||
+ | font-family: Futura PT; | ||
+ | font-size: 14px; | ||
+ | line-height: 24px; | ||
+ | line-height: 1; | ||
+ | } | ||
+ | form [type=radio]:checked, | ||
+ | form [type=radio]:not(:checked) { | ||
+ | position: absolute; | ||
+ | left: -9999px; | ||
+ | } | ||
+ | form [type=radio]:checked + label, | ||
+ | form [type=radio]:not(:checked) + label { | ||
+ | color: #fff; | ||
+ | cursor: pointer; | ||
+ | display: inline-block; | ||
+ | line-height: 20px; | ||
+ | padding-left: 28px; | ||
+ | position: relative; | ||
+ | } | ||
+ | form [type=radio]:checked+label:after, | ||
+ | form [type=radio]:checked+label:before, | ||
+ | form [type=radio]:not(:checked) + label:after, | ||
+ | form [type=radio]:not(:checked) + label:before { | ||
+ | border-radius: 50%; | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | -webkit-transition: all .2s ease; | ||
+ | transition: all .2s ease; | ||
+ | } | ||
+ | form [type=radio]:checked+label:before, | ||
+ | form [type=radio]:not(:checked) + label:before { | ||
+ | background: none; | ||
+ | border: 1px solid #888; | ||
+ | height: 18px; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 18px; | ||
+ | } | ||
+ | form [type=radio]:checked + label:after, | ||
+ | form [type=radio]:not(:checked) + label:after { | ||
+ | background: #c00; | ||
+ | height: 10px; | ||
+ | left: 4px; | ||
+ | top: 4px; | ||
+ | width: 10px; | ||
+ | } | ||
+ | form [type=radio]:checked + label:before { | ||
+ | border-color: #c00; | ||
+ | } | ||
+ | form [type=radio]:checked + label:after { | ||
+ | opacity: 1; | ||
+ | -webkit-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | form [type=radio]:not(:checked) + label:hover:before { | ||
+ | border-color: #fff; | ||
+ | } | ||
+ | form [type=radio]:not(:checked) + label:after { | ||
+ | opacity: 0; | ||
+ | -webkit-transform: scale(0); | ||
+ | transform: scale(0); | ||
+ | } | ||
+ | .spoilers { | ||
+ | border-bottom: 1px solid hsla(0,0%,100%,.2); | ||
+ | margin: 0 0 24px; | ||
+ | } | ||
+ | .spoiler { | ||
+ | border-top: 1px solid hsla(0,0%,100%,.2); | ||
+ | } | ||
+ | .spoiler__title { | ||
+ | color: #fff; | ||
+ | cursor: pointer; | ||
+ | font-weight: 700; | ||
+ | margin-bottom: 10px; | ||
+ | padding: 20px 0 10px 45px; | ||
+ | position: relative; | ||
+ | -webkit-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
+ | } | ||
+ | .spoiler__content, | ||
+ | .spoiler__title { | ||
+ | font-family: Futura PT; | ||
+ | font-size: 16px; | ||
+ | line-height: 22px; | ||
+ | } | ||
+ | .spoiler__content { | ||
+ | box-sizing: content-box; | ||
+ | height: 0; | ||
+ | opacity: 0; | ||
+ | overflow: hidden; | ||
+ | padding-left: 45px; | ||
+ | -webkit-transition: all .15s linear; | ||
+ | transition: all .15s linear; | ||
+ | } | ||
+ | .spoiler.type-opened .spoiler__content { | ||
+ | height: auto; | ||
+ | padding-bottom: 20px; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .spoiler__marker { | ||
+ | border: 1px solid #c00; | ||
+ | height: 18px; | ||
+ | left: 10px; | ||
+ | position: absolute; | ||
+ | top: 15px; | ||
+ | -webkit-transform: rotate(45deg) translateY(50%); | ||
+ | transform: rotate(45deg) translateY(50%); | ||
+ | -webkit-transition: all .15s ease-out; | ||
+ | transition: all .15s ease-out; | ||
+ | width: 18px; | ||
+ | } | ||
+ | .spoiler__marker-symbol { | ||
+ | height: 100%; | ||
+ | position: relative; | ||
+ | -webkit-transform: rotate(-45deg); | ||
+ | transform: rotate(-45deg); | ||
+ | width: 100%; | ||
+ | } | ||
+ | .spoiler__marker-symbol:after, | ||
+ | .spoiler__marker-symbol:before { | ||
+ | background-color: #c00; | ||
+ | content: ""; | ||
+ | left: 50%; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | -webkit-transform: translate(-50%,-50%); | ||
+ | transform: translate(-50%,-50%); | ||
+ | -webkit-transition: -webkit-transform .35s ease-out; | ||
+ | transition: -webkit-transform .35s ease-out; | ||
+ | transition: transform .35s ease-out; | ||
+ | transition: transform .35s ease-out,-webkit-transform .35s ease-out; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | .spoiler__marker-symbol:before { | ||
+ | height: 2px; | ||
+ | width: 10px; | ||
+ | } | ||
+ | .spoiler__marker-symbol:after { | ||
+ | height: 10px; | ||
+ | width: 2px; | ||
+ | } | ||
+ | .spoiler.type-opened .spoiler__marker { | ||
+ | background: #c00; | ||
+ | } | ||
+ | .spoiler.type-opened .spoiler__marker-symbol:after, | ||
+ | .spoiler.type-opened .spoiler__marker-symbol:before { | ||
+ | background-color: #fff; | ||
+ | -webkit-transition: -webkit-transform .35s ease-out; | ||
+ | transition: -webkit-transform .35s ease-out; | ||
+ | transition: transform .35s ease-out; | ||
+ | transition: transform .35s ease-out,-webkit-transform .35s ease-out; | ||
+ | } | ||
+ | .spoiler.type-opened .spoiler__marker-symbol:after { | ||
+ | -webkit-transform: translate(-50%,-50%) rotate(90deg); | ||
+ | transform: translate(-50%,-50%) rotate(90deg); | ||
+ | } | ||
+ | .spoiler:hover .spoiler__marker { | ||
+ | background: #c00; | ||
+ | } | ||
+ | .spoiler:hover .spoiler__marker-symbol:after, | ||
+ | .spoiler:hover .spoiler__marker-symbol:before { | ||
+ | background-color: #fff; | ||
+ | -webkit-transition: -webkit-transform .35s ease-out; | ||
+ | transition: -webkit-transform .35s ease-out; | ||
+ | transition: transform .35s ease-out; | ||
+ | transition: transform .35s ease-out,-webkit-transform .35s ease-out; | ||
+ | } | ||
+ | .controller-close { | ||
+ | background-color: transparent; | ||
+ | border: 2px solid #00366e; | ||
+ | border-radius: 50%; | ||
+ | cursor: pointer; | ||
+ | height: 30px; | ||
+ | position: relative; | ||
+ | -webkit-transition: background-color .35s ease-out; | ||
+ | transition: background-color .35s ease-out; | ||
+ | width: 30px; | ||
+ | } | ||
+ | .controller-close:after, | ||
+ | .controller-close:before { | ||
+ | background: #fff; | ||
+ | content: ""; | ||
+ | height: 14px; | ||
+ | left: 50%; | ||
+ | margin: -7px 0 0 -1px; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | width: 2px; | ||
+ | } | ||
+ | .controller-close:before { | ||
+ | -webkit-transform:rotate(45deg); | ||
+ | transform: rotate(45deg); | ||
+ | } | ||
+ | .controller-close:after { | ||
+ | -webkit-transform:rotate(-45deg); | ||
+ | transform: rotate(-45deg); | ||
+ | } | ||
+ | .controller-close:hover { | ||
+ | background-color: #c00; | ||
+ | } | ||
+ | @media only screen and (min-width: 768px) { | ||
+ | |||
+ | .controller-close { | ||
+ | height: 48px; | ||
+ | width: 48px; | ||
+ | } | ||
+ | .controller-close:after, | ||
+ | .controller-close:before { | ||
+ | height: 24px; | ||
+ | margin: -12px 0 0 -1px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | body.popup-opened { | ||
+ | overflow: hidden !important; | ||
+ | } | ||
+ | .popup { | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | position: absolute; | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | } | ||
+ | .popup .popup__overlay { | ||
+ | padding: 100px 60px; | ||
+ | } | ||
+ | .popup__overlay { | ||
+ | -webkit-box-align: center; | ||
+ | align-items: center; | ||
+ | background-color: rgba(0,0,0,0.8); | ||
+ | bottom: 0; | ||
+ | display: -webkit-box; | ||
+ | display: flex; | ||
+ | -webkit-box-pack: center; | ||
+ | justify-content: center; | ||
+ | left: 0; | ||
+ | overflow-y: scroll; | ||
+ | overflow-x: hidden; | ||
+ | position: fixed; | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | z-index: 5; | ||
+ | } | ||
+ | .popup__wrap { | ||
+ | cursor: auto; | ||
+ | max-width: 1012px; | ||
+ | position: relative; | ||
+ | -webkit-transform: translateX(9px); | ||
+ | transform: translateX(9px); | ||
+ | width: 100%; | ||
+ | } | ||
+ | .popup__closer { | ||
+ | position: absolute; | ||
+ | right: -50px; | ||
+ | top: -50px; | ||
+ | } | ||
+ | @media (max-width: 768px) { | ||
+ | |||
+ | .popup__wrap { | ||
+ | -webkit-transform: none; | ||
+ | transform: none; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | @media (max-height: 700px) { | ||
+ | |||
+ | .popup__closer { | ||
+ | top: 0px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | .popup__video-wrapper { | ||
+ | max-width: 1012px; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .popup__video-height { | ||
+ | padding-top: 56.25%; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .popup__video-iframe { | ||
+ | height: 100%; | ||
+ | left: 0; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .error-page-active #content { | ||
+ | display: none !important; | ||
+ | } | ||
+ | .error-page-active .header { | ||
+ | display: none; | ||
+ | } | ||
+ | .error-page { | ||
+ | background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Error-page-bg.jpg) no-repeat 50% 0; | ||
+ | } | ||
+ | .error-page__wrap { | ||
+ | -webkit-box-align: center; | ||
+ | align-items: center; | ||
+ | display: -webkit-box; | ||
+ | display: flex; | ||
+ | -webkit-box-orient: vertical; | ||
+ | -webkit-box-direction: normal; | ||
+ | flex-direction: column; | ||
+ | -webkit-box-pack: end; | ||
+ | justify-content: flex-end; | ||
+ | margin: 0 auto; | ||
+ | max-width: 1012px; | ||
+ | padding: 250px 0 0; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .error-page__num { | ||
+ | background: -webkit-gradient(linear,left top,left bottom,from(#eee),to(#666)); | ||
+ | background: linear-gradient(180deg,#eee,#666); | ||
+ | -webkit-background-clip: text; | ||
+ | background-clip: text; | ||
+ | -webkit-text-fill-color: transparent; | ||
+ | color: #eee; | ||
+ | font-family: CoreSansD67; | ||
+ | font-size: 300px; | ||
+ | line-height: 70px; | ||
+ | line-height: 1; | ||
+ | letter-spacing: .04em; | ||
+ | margin: 15px 0 50px; | ||
+ | word-spacing: .02em; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | .error-page__title { | ||
+ | color: #fff; | ||
+ | font-family: Futura PT; | ||
+ | font-size: 24px; | ||
+ | font-weight: 400; | ||
+ | line-height: 30px; | ||
+ | margin-bottom: 10px; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .error-page__text { | ||
+ | color: #fff; | ||
+ | font-family: Futura PT; | ||
+ | font-size: 18px; | ||
+ | line-height: 30px; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .error-page__text a { | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | .error-page__text a:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | @media (max-width: 1011px) { | ||
+ | |||
+ | .error-page__num { | ||
+ | font-size: 200px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | @media (max-width: 768px) { | ||
+ | |||
+ | .error-page__wrap { | ||
+ | -webkit-box-pack: center; | ||
+ | justify-content: center; | ||
+ | min-height: 70vh; | ||
+ | padding: 120px 0 70px; | ||
+ | } | ||
+ | .error-page__num { | ||
+ | font-size: 110px; | ||
+ | margin: 0 0 25px; | ||
+ | -webkit-box-ordinal-group: 2; | ||
+ | order: 1; | ||
+ | } | ||
+ | .error-page__title { | ||
+ | -webkit-box-ordinal-group: 3; | ||
+ | order: 2; | ||
+ | } | ||
+ | .error-page__text { | ||
+ | -webkit-box-ordinal-group: 4; | ||
+ | order: 3; | ||
+ | } | ||
+ | |||
+ | } |
Версия 12:09, 9 июня 2020
@import '//use.fontawesome.com/releases/v5.13.0/css/all.css'; @font-face { font-family: CoreSansD37; font-style: normal; font-weight: 400; src: url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD37/CoreSansD37CnRegular.woff) format("woff"), url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD37/CoreSansD37CnRegular.ttf) format("truetype"), url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD37/CoreSansD37CnRegular.svg) format("svg"); } @font-face { font-family: CoreSansD67; font-style: normal; font-weight: 400; src: url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD67/CoreSansD67CnHeavy.woff2) format("woff2"), url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD67/CoreSansD67CnHeavy.woff) format("woff"), url(//sf.mail.ru/static/sf.mail.ru/pages/invasionpass/dist/assets/fonts/CoreSansD67/CoreSansD67CnHeavy.ttf) format("truetype"); } /* (begin) reset modules=skins.vector.styles */ @media screen { body { background-color: #000; } .mw-body { border: 0; } #mw-panel .portal .body { background-image: none; } #mw-page-base { background-image: none; background-color: transparent; } .mw-body, .parsoid-body { background-color: transparent; } } /* (end) reset modules=skins.vector.styles */ * { border: 0; margin: 0; outline: none; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); } *, :after, :before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body, html { cursor: default; height: 100%; min-height: 100%; width: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { background: #000; } body { background: #000; color: #999; display: none; font: normal 20px/1.4 CoreSansD37, sans-serif; overflow-y: scroll; overflow-x: auto; } a { color: inherit; cursor: pointer; outline: none; text-decoration: underline; -webkit-transition: all .1s linear; transition: all .1s linear; } a:hover { text-decoration: none; } a[href^=tel] { color: inherit; text-decoration: none; } b, strong { font-weight: 700; } img { display: inline-block; max-width: 100%; vertical-align: top; } .center img { display: block; margin: 0 auto; } li, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } td { padding: 0; vertical-align: top; } pre { font: 14px/1.4 monospace; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } input, select, textarea { box-sizing: border-box; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { display: none; } input[type=search] { -webkit-appearance: textfield; } button { -webkit-appearance: none; border: 0; border-radius: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ::selection { background: #987e54; color: #fff; text-shadow: none; } ::-moz-selection { background: #987e54; color: #fff; text-shadow: none; } #ca-talk, #ca-watch, #catlinks, #contentSub, #feedlinks, #footer-icons, #footer-info, #left-navigation, #mw-editpage-watch, #mw-helplink, #mw-indicator-mw-helplink, #mw-navigation > h2, #mw-head-base, #mw-page-base, #n-help-mediawiki, #ooui-php-18.mw-hide-minor-edits, #p-cactions > input, #p-lang, #p-logo, #p-navigation, #p-search, #pt-mytalk, #pt-watchlist, #t-print, #toc { display: none !important; } .mw-helplink, .mw-search-profile-tabs, .suggestions, .page-Служебная_Источники_книг, .page-Служебная_Список_наблюдения, .page-Обсуждение { display: none !important; } body.preloader-active { display: block; overflow: hidden; } .preloader { background-color: #000; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 10000; } .preloader--hidden { opacity: 0; transition: opacity .4s, visibility .4s; visibility: hidden; } .preloader__image { height: 335px; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 300px; } .preloader__image--0 { animation: glow .25s linear forwards; } .preloader__image--1 { animation: glow .25s linear .25s forwards; } .preloader__image--2 { animation: glow .25s linear .5s forwards; } .preloader__image--3 { animation: glow .25s linear .75s forwards; } .preloader__image--4 { animation: glow .75s ease-in 1s alternate infinite; } @keyframes glow { from { opacity: 0; } to { opacity: 1; } } #footer { line-height: 23px; min-height: 240px; padding: 60px 0 20px; } .footer__groups, .footer__group, .footer-social, .footer-social a { -webkit-box-align: center; align-items: center; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; } .footer__groups { padding: 0 0 20px; } .footer__group { height: 50px; margin: 0 5px; opacity: .4; -webkit-transition: opacity .35s ease-out; transition: opacity .35s ease-out; } a.footer__group:hover { opacity: 1; } .footer__group.type-at { width: 60px; } .footer__group.type-mg { width: 90px; } .footer__copyright { color: #666; margin: 0 auto; max-width: 665px; text-align: center; } .footer-social { padding: 0 0 40px; } .footer-social a { color: #888; font-size: 30px; height: 30px; margin: 0 6px; text-decoration: none; width: 30px; } .footer-social a:hover { color: #fff; } .footer-pegi { border: 1px solid #666; border-radius: 360px; height: 50px; margin: 0 10px; padding: 2px; width: 50px; } .footer-pegi span { -webkit-box-align: center; align-items: center; background: #666; border-radius: 360px; color: #000; display: -webkit-box; display: flex; font-size: 31px; height: 44px; -webkit-box-pack: end; justify-content: flex-end; width: 44px; } @media only screen and (min-width: 768px) { #footer { font-size: 18px; } .footer__group { margin: 0 8px; } .footer__group.type-at { width: 85.71px; } .footer__group.type-mg { width: 146px; } .footer-social a { font-size: 40px; height: 50px; margin: 0 10px; width: 50px; } } #mw-navigation, #mw-head, #mw-panel, #right-navigation { display: -webkit-box; display: flex; } #mw-navigation { -webkit-box-align: center; align-items: center; background: #000; height: 30px; -webkit-box-pack: justify; justify-content: space-between; left: 0; padding: 0 20px; position: fixed; text-transform: uppercase; top: 0; width: 100%; z-index: 5; } #mw-navigation, .user-edit #mw-head { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } #mw-navigation h3, #mw-navigation a { color: #888; display: block; font-size: 13px; font-weight: 500; letter-spacing: .06em; line-height: 14px; margin-left: 19px; text-decoration: none; -webkit-transition: color .35s ease-out; transition: color .35s ease-out; } #mw-navigation a:hover { color: #fff; } #mw-panel a:first-child { margin-left: 0; } #mw-navigation ul { background: #000; display: none; padding: 10px 0 0; position: absolute; } #mw-head ul { right: -20px; } #mw-panel ul { left: 10px; } #mw-navigation li a { display: inline-block; margin-left: 0; padding: 10px 20px; white-space: nowrap; } #p-cactions, #p-personal, #p-tb, #p-views { position: relative; } #p-cactions:hover ul, #p-personal:hover ul, #p-tb:hover ul, #p-views:hover ul { display: -webkit-box; display: flex; -webkit-flex-direction: column; flex-direction: column; } #p-personal, #p-cactions, #p-tb, #p-views { display: none !important; } .user-edit #god-game, .user-edit #god-support, .user-edit #god-download { display: none !important; } .user-edit #p-personal, .user-edit #p-cactions, .user-edit #p-tb, .user-edit #p-views, .user-edit .mw-search-profile-tabs { display: block !important; } @media only screen and (min-width: 1012px) { #mw-navigation { padding: 0 40px; } } @media (max-width: 768px) { #mw-panel { display: none; } } .header { -webkit-box-align: center; align-items: center; background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Header_bg.jpg) center/auto 100% no-repeat; display: -webkit-box; display: flex; height: 240px; -webkit-box-pack: center; justify-content: center; margin: 30px 0 0; overflow: hidden; position: relative; width: 100%; } .header:after { background-image: linear-gradient(0deg, #000 0, transparent 35%); bottom: 0; content: ""; height: 100%; left: 0; position: absolute; width: 100%; } .logo { background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Logo.png) center no-repeat; display: block; height: 180px; width: 420px; z-index: 2; } @media (max-width: 1011px) { .header { height: 192px; } .logo { background-size: auto 92px; height: 144px; width: 336px; } } @media (max-width: 768px) { .header { height: 144px; } .logo { background-size: auto 69px; height: 108px; width: 252px; } } #content { background: #1c1c1c; font-size: 20px; line-height: 1.4; margin: 0 auto; max-width: 1012px; min-height: 300px; overflow: hidden; padding: 24px 34px; position: relative; } #firstHeading { background: transparent; border: 0; color: #fff; font-family: Cormorant SC; font-size: 40px; font-weight: 400; line-height: 1.4; padding: 8px 0 32px; text-align: center; word-spacing: .02em; } #content h2, #content h3, #content h4, #content h5, #content h6 { border: 0 !important; color: #fff; } #content h2 { font-family: Cormorant SC; font-size: 30px; font-weight: 400; margin: 10px 0 24px; word-spacing: .02em; } #content h2, #content h3, #content h4, #content h5 { line-height: 1.4; } #content h3, #content h4, #content h5 { font-size: 18px; font-weight: 500; } #content h6 { font-size: 16px; font-family: Futura PT; line-height: 22px; font-weight: 500; } #content p { padding: 0 0 24px; } #content table { font-size: 18px; margin-bottom: 80px; width: 100%; } #content table tr:nth-child(2n) { background-color: hsla(0,0%,100%,.1); } #content table td, #content table th { padding: 10px 20px; text-align: left; } #content table th { border-bottom: 1px solid #fff; color: #fff; } .jquery-tablesorter th.headerSort, .jquery-tablesorter th.headerSortUp, .jquery-tablesorter th.headerSortDown { background-image: none; } .jquery-tablesorter th.headerSort:after { border: 5px solid transparent; border-top-color: #9e9e9e; content: ""; display: inline-block; height: 1px; margin-left: 8px; position: relative; top: 3px; width: 1px; } .jquery-tablesorter th.headerSortUp:after { border-top-color: #c00; top: -4px; transform: rotate(180deg); } .jquery-tablesorter th.headerSortDown:after { border-top-color: #c00; } #content ol, #content ul { list-style: none; margin-bottom: 24px; } #content ol li, #content ul li { margin-bottom: 10px; padding: 0 0 0 30px; position: relative; } #content ol li:before, #content ul li:before { color: #c00; display: inline-block; left: 0; position: absolute; width: 30px; } #content ul li:before { content: "\2022"; } #content ol { counter-reset: li; } #content ol li { counter-increment: li; } #content ol li:before { content: counter(li) "."; } #content ol ol, #content ol ul, #content ul ol, #content ul ul { margin: 0 0 0 30px; } #content iframe, #content img, #content video { max-width: 100%; } #content img { height: auto !important; } @media (max-width: 1011px) { #content { max-width: 752px; padding: 24px 28px; } #bodyContent { margin: 0 auto; width: 624px; } #firstHeading { margin: 0 auto; width: 624px; } } @media (max-width: 768px) { #content { font-size: 16px; line-height: 20px; max-width: 360px; padding: 24px 28px; } #bodyContent { margin: 0 auto; width: 304px; } #firstHeading { font-size: 32px; line-height: 1.4; margin: 0 auto; padding: 8px 0 24px; width: 304px; } #content p { padding: 0 0 20px; } #content table { font-size: 16px; } #content table tr { display: block; padding: 10px 0; } #content table td, #content table th { display: block; padding: 5px 15px; } #content table th { display: none; } } button, .button { -webkit-box-align: center; align-items: center; background: none; color: #fff; display: -webkit-box; display: flex; -webkit-box-pack: center; font-family: Futura PT; font-size: 14px; height: 40px; justify-content: center; line-height: 24px; line-height: 1; min-width: 260px; outline: none; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; } button, .button:not(.button--disabled) { cursor: pointer; } button span:nth-child(2), .button span { border-bottom: 2px solid transparent; border-top: 2px solid transparent; display: block; height: 38px; line-height: 34px; margin: 0 -15px; position: relative; width: calc(100% - 80px); z-index: 2; } button:after, button:before, .button:after, .button:before { content: ""; display: block; height: 40px; width: 40px; } button:after, .button:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } button span:nth-child(2), .button--base span { background: #c00; } button:after, button:before, .button--base:after, .button--base:before { background: url(/images/button-decor-base.svg) 50% no-repeat; } button:hover span:nth-child(2), .button--base:hover span { background: transparent; border-bottom-color: #c00; border-top-color: #c00; } button:hover:after, button:hover:before, .button--base:hover:after, .button--base:hover:before { background: url(/images/button-decor-inverse.svg) 50% no-repeat; } .button--inversed span { background: transparent; border-bottom-color: #c00; border-top-color: #c00; } .button--inversed:after, .button--inversed:before { background: url(/images/button-decor-inverse.svg) 50% no-repeat; } .button--inversed:hover span { background: #c00; border-bottom-color: transparent; border-top-color: transparent; } .button--inversed:hover:after, .button--inversed:hover:before { background: url(/images/button-decor-base.svg) 50% no-repeat; } .button--disabled span { background: #888; } .button--disabled:after, .button--disabled:before { background: url(/images/button-decor-disable.svg) 50% no-repeat; } .button--disabled:hover span { background: #888; border-bottom-color: #888; border-top-color: #888; } .button--disabled:hover:after, .button--disabled:hover:before { background: url(/images/button-decor-disable.svg) 50% no-repeat; } .button--small { font-family: Futura PT; font-size: 11px; height: 24px; line-height: 14px; min-width: auto; } .button--small span { border-bottom-width: 1px; border-top-width: 1px; height: 22px; letter-spacing: 1px; line-height: 20px; margin: 0 -10px; width: calc(100% - 48px); } .button--small:after, .button--small:before { height: 24px; width: 24px; } .button--centered { margin: 20px auto; } .button-big { -webkit-box-align: center; align-items: center; background: none; color: #fff; cursor: pointer; display: -webkit-box; display: flex; font-family: Cormorant SC; font-size: 22px; height: 130px; -webkit-box-pack: center; justify-content: center; letter-spacing: .08em; position: relative; width: 430px; } .button-big:after, .button-big:before { background-position: 50%; background-repeat: no-repeat; background-size: cover; content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: opacity .5s ease-out; transition: opacity .5s ease-out; width: 100%; } .button-big:before { opacity: 0; background-image: url(/images/button_big_hover.png); } .button-big:after { background-image: url(/images/button_big.png); } .button-big:hover:before { opacity: 1; } .button-big:hover:after { opacity: 0; } .button-big span { z-index: 1; } .button-link a { text-decoration: none; } form .input, form input[type=search], form input[type=text] { background: none; border: 0; border-bottom: 1px solid hsla(0,0%,100%,.5); caret-color: #c00; color: #fff; font-family: Futura PT; font-size: 18px; line-height: 30px; line-height: 2.2; -webkit-transition: all .2s; transition: all .2s; } @media (max-width: 1011px) { form .input, form input[type=search], form input[type=text] { font-size: 16px; line-height: 22px; } } form .input::-webkit-input-placeholder, form input[type=search]::-webkit-input-placeholder, form input[type=text]::-webkit-input-placeholder { color: hsla(0,0%,100%,.5); } form .input::-moz-placeholder, form input[type=search]::-moz-placeholder, form input[type=text]::-moz-placeholder { color: hsla(0,0%,100%,.5); } form .input:-ms-input-placeholder, form input[type=search]:-ms-input-placeholder, form input[type=text]:-ms-input-placeholder { color: hsla(0,0%,100%,.5); } form .input::-ms-input-placeholder, form input[type=search]::-ms-input-placeholder, form input[type=text]::-ms-input-placeholder { color: hsla(0,0%,100%,.5); } form .input::placeholder, form input[type=search]::placeholder, form input[type=text]::placeholder { color: hsla(0,0%,100%,.5); } form .input:focus, form .input:hover, form input[type=search]:focus, form input[type=search]:hover, form input[type=text]:focus, form input[type=text]:hover { border-bottom: 1px solid #fff; outline: none; } form .input:focus::-webkit-input-placeholder, form .input:hover::-webkit-input-placeholder, form input[type=search]:focus::-webkit-input-placeholder, form input[type=search]:hover::-webkit-input-placeholder, form input[type=text]:focus::-webkit-input-placeholder, form input[type=text]:hover::-webkit-input-placeholder { color: #fff; } form .input:focus::-moz-placeholder, form .input:hover::-moz-placeholder, form input[type=search]:focus::-moz-placeholder, form input[type=search]:hover::-moz-placeholder, form input[type=text]:focus::-moz-placeholder, form input[type=text]:hover::-moz-placeholder { color: #fff; } form .input:focus:-ms-input-placeholder, form .input:hover:-ms-input-placeholder, form input[type=search]:focus:-ms-input-placeholder, form input[type=search]:hover:-ms-input-placeholder, form input[type=text]:focus:-ms-input-placeholder, form input[type=text]:hover:-ms-input-placeholder { color: #fff; } form .input:focus::-ms-input-placeholder, form .input:hover::-ms-input-placeholder, form input[type=search]:focus::-ms-input-placeholder, form input[type=search]:hover::-ms-input-placeholder, form input[type=text]:focus::-ms-input-placeholder, form input[type=text]:hover::-ms-input-placeholder { color:#fff; } form .input:focus::placeholder, form .input:hover::placeholder, form input[type=search]:focus::placeholder, form input[type=search]:hover::placeholder, form input[type=text]:focus::placeholder, form input[type=text]:hover::placeholder { color: #fff; } form .input--error { border-bottom: 1px solid #c00; } form .error { color: #c00; font-family: Futura PT; font-size: 14px; line-height: 24px; line-height: 1; } form [type=radio]:checked, form [type=radio]:not(:checked) { position: absolute; left: -9999px; } form [type=radio]:checked + label, form [type=radio]:not(:checked) + label { color: #fff; cursor: pointer; display: inline-block; line-height: 20px; padding-left: 28px; position: relative; } form [type=radio]:checked+label:after, form [type=radio]:checked+label:before, form [type=radio]:not(:checked) + label:after, form [type=radio]:not(:checked) + label:before { border-radius: 50%; content: ""; position: absolute; -webkit-transition: all .2s ease; transition: all .2s ease; } form [type=radio]:checked+label:before, form [type=radio]:not(:checked) + label:before { background: none; border: 1px solid #888; height: 18px; left: 0; top: 0; width: 18px; } form [type=radio]:checked + label:after, form [type=radio]:not(:checked) + label:after { background: #c00; height: 10px; left: 4px; top: 4px; width: 10px; } form [type=radio]:checked + label:before { border-color: #c00; } form [type=radio]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } form [type=radio]:not(:checked) + label:hover:before { border-color: #fff; } form [type=radio]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } .spoilers { border-bottom: 1px solid hsla(0,0%,100%,.2); margin: 0 0 24px; } .spoiler { border-top: 1px solid hsla(0,0%,100%,.2); } .spoiler__title { color: #fff; cursor: pointer; font-weight: 700; margin-bottom: 10px; padding: 20px 0 10px 45px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .spoiler__content, .spoiler__title { font-family: Futura PT; font-size: 16px; line-height: 22px; } .spoiler__content { box-sizing: content-box; height: 0; opacity: 0; overflow: hidden; padding-left: 45px; -webkit-transition: all .15s linear; transition: all .15s linear; } .spoiler.type-opened .spoiler__content { height: auto; padding-bottom: 20px; opacity: 1; } .spoiler__marker { border: 1px solid #c00; height: 18px; left: 10px; position: absolute; top: 15px; -webkit-transform: rotate(45deg) translateY(50%); transform: rotate(45deg) translateY(50%); -webkit-transition: all .15s ease-out; transition: all .15s ease-out; width: 18px; } .spoiler__marker-symbol { height: 100%; position: relative; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 100%; } .spoiler__marker-symbol:after, .spoiler__marker-symbol:before { background-color: #c00; content: ""; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: -webkit-transform .35s ease-out; transition: -webkit-transform .35s ease-out; transition: transform .35s ease-out; transition: transform .35s ease-out,-webkit-transform .35s ease-out; z-index: 1; } .spoiler__marker-symbol:before { height: 2px; width: 10px; } .spoiler__marker-symbol:after { height: 10px; width: 2px; } .spoiler.type-opened .spoiler__marker { background: #c00; } .spoiler.type-opened .spoiler__marker-symbol:after, .spoiler.type-opened .spoiler__marker-symbol:before { background-color: #fff; -webkit-transition: -webkit-transform .35s ease-out; transition: -webkit-transform .35s ease-out; transition: transform .35s ease-out; transition: transform .35s ease-out,-webkit-transform .35s ease-out; } .spoiler.type-opened .spoiler__marker-symbol:after { -webkit-transform: translate(-50%,-50%) rotate(90deg); transform: translate(-50%,-50%) rotate(90deg); } .spoiler:hover .spoiler__marker { background: #c00; } .spoiler:hover .spoiler__marker-symbol:after, .spoiler:hover .spoiler__marker-symbol:before { background-color: #fff; -webkit-transition: -webkit-transform .35s ease-out; transition: -webkit-transform .35s ease-out; transition: transform .35s ease-out; transition: transform .35s ease-out,-webkit-transform .35s ease-out; } .controller-close { background-color: transparent; border: 2px solid #00366e; border-radius: 50%; cursor: pointer; height: 30px; position: relative; -webkit-transition: background-color .35s ease-out; transition: background-color .35s ease-out; width: 30px; } .controller-close:after, .controller-close:before { background: #fff; content: ""; height: 14px; left: 50%; margin: -7px 0 0 -1px; position: absolute; top: 50%; width: 2px; } .controller-close:before { -webkit-transform:rotate(45deg); transform: rotate(45deg); } .controller-close:after { -webkit-transform:rotate(-45deg); transform: rotate(-45deg); } .controller-close:hover { background-color: #c00; } @media only screen and (min-width: 768px) { .controller-close { height: 48px; width: 48px; } .controller-close:after, .controller-close:before { height: 24px; margin: -12px 0 0 -1px; } } body.popup-opened { overflow: hidden !important; } .popup { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .popup .popup__overlay { padding: 100px 60px; } .popup__overlay { -webkit-box-align: center; align-items: center; background-color: rgba(0,0,0,0.8); bottom: 0; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; left: 0; overflow-y: scroll; overflow-x: hidden; position: fixed; right: 0; top: 0; z-index: 5; } .popup__wrap { cursor: auto; max-width: 1012px; position: relative; -webkit-transform: translateX(9px); transform: translateX(9px); width: 100%; } .popup__closer { position: absolute; right: -50px; top: -50px; } @media (max-width: 768px) { .popup__wrap { -webkit-transform: none; transform: none; } } @media (max-height: 700px) { .popup__closer { top: 0px; } } .popup__video-wrapper { max-width: 1012px; position: relative; width: 100%; } .popup__video-height { padding-top: 56.25%; position: relative; width: 100%; } .popup__video-iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .error-page-active #content { display: none !important; } .error-page-active .header { display: none; } .error-page { background: url(//sf.cdn.gmru.net/wiki/s3/sfwiki-prod/Error-page-bg.jpg) no-repeat 50% 0; } .error-page__wrap { -webkit-box-align: center; align-items: center; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: end; justify-content: flex-end; margin: 0 auto; max-width: 1012px; padding: 250px 0 0; position: relative; text-align: center; } .error-page__num { background: -webkit-gradient(linear,left top,left bottom,from(#eee),to(#666)); background: linear-gradient(180deg,#eee,#666); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #eee; font-family: CoreSansD67; font-size: 300px; line-height: 70px; line-height: 1; letter-spacing: .04em; margin: 15px 0 50px; word-spacing: .02em; z-index: 1; } .error-page__title { color: #fff; font-family: Futura PT; font-size: 24px; font-weight: 400; line-height: 30px; margin-bottom: 10px; z-index: 2; } .error-page__text { color: #fff; font-family: Futura PT; font-size: 18px; line-height: 30px; z-index: 2; } .error-page__text a { text-decoration: underline; } .error-page__text a:hover { text-decoration: none; } @media (max-width: 1011px) { .error-page__num { font-size: 200px; } } @media (max-width: 768px) { .error-page__wrap { -webkit-box-pack: center; justify-content: center; min-height: 70vh; padding: 120px 0 70px; } .error-page__num { font-size: 110px; margin: 0 0 25px; -webkit-box-ordinal-group: 2; order: 1; } .error-page__title { -webkit-box-ordinal-group: 3; order: 2; } .error-page__text { -webkit-box-ordinal-group: 4; order: 3; } }