/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20240126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Clearfix */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } html { font-size: 58%; } body { color: #f3efe8; font-family: "Lato"; font-weight: 400; -webkit-font-smoothing: antialiased; } *:not(html) { font-size: 16px; font-size: 1.6rem; } h1 { color: #ffe2a8; font-family: "Cinzel", serif; font-size: 32px; font-size: 3.2rem; font-weight: 500; text-shadow: 0 0 6px #ff41f8; text-transform: uppercase; } h2 { color: #dbc5e6; font-family: "Cinzel", serif; font-size: 26px; font-size: 2.6rem; font-weight: 500; margin-top: 10px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); text-transform: uppercase; } h3 { color: #eee; font-family: "Cinzel", serif; font-size: 21px; font-size: 2.1rem; font-weight: 500; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } h4 { color: #061a25; font-size: 24px; font-size: 2.4rem; font-weight: 700; text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.1); } h5 { color: #eee; font-size: 21px; font-size: 2.1rem; font-weight: 500; margin-bottom: 5px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); } h6 { color: #eee; font-size: 18px; font-size: 1.8rem; font-weight: 500; margin-bottom: 5px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); } p { font-size: 18px; font-size: 1.8rem; line-height: 24px; line-height: 2.4rem; } a { color: #88cfed; font-size: inherit; -webkit-transition: color 0.3s; transition: color 0.3s; text-decoration: underline; cursor: pointer; } a:hover { color: rgba(135, 204, 222, 0.7); } em, i { font-style: italic; } b, strong { color: #dee3e3; font-weight: bold; } .margin__top { margin-top: 40px; } .margin__bot { margin-bottom: 40px; } .margin__bot12 { margin-bottom: 12px; } .color__green { color: #46bd4e; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8); } .larger__size52 { font-size: 52px; font-size: 5.2rem; font-weight: 700; } html, body { font-smoothing: antialiased; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: #140f15; min-width: 960px; margin: 0; overflow-x: hidden; padding: 0; } #bodyWrapper { background: url("../images/body-bg.jpg") center top no-repeat; padding-top: 88px; overflow-x: hidden; width: 100%; } #contentWrapper { margin: 0 auto; max-width: 960px; padding-top: 120px; width: 100%; } #contentWrapper .arrow { height: 55px; margin: 40px 0 54px 0; position: relative; text-align: center; width: 100%; } #contentWrapper .arrow .arrow__line { border-right: 1px solid #ab7da8; border-bottom: 1px solid #ab7da8; display: inline-block; height: 40px; left: 50%; margin-left: -20px; position: absolute; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 40px; } #contentWrapper .arrow .arrow__line--top { top: 0; } #contentWrapper .arrow .arrow__line--bottom { bottom: 0; } #paragon { height: 100%; } #paragon .hon, #paragon .main { background: rgba(61, 41, 61, 0.5); color: rgba(255, 255, 255, 0.6); position: absolute; text-align: center; text-decoration: none; top: 0; -webkit-transition: background 0.3s; transition: background 0.3s; z-index: 999; } #paragon .hon .hon__bar, #paragon .hon .main__bar, #paragon .main .hon__bar, #paragon .main .main__bar { line-height: 40px; position: relative; } #paragon .hon .hon__bar:before, #paragon .main .hon__bar:before { content: ''; border-top: 8px solid transparent; border-right: 12px solid rgba(255, 255, 255, 0.4); border-bottom: 8px solid transparent; height: 0; left: -25px; position: absolute; top: 12px; width: 0; } #paragon .hon .main__bar:after, #paragon .main .main__bar:after { content: ''; border-top: 8px solid transparent; border-left: 12px solid rgba(255, 255, 255, 0.4); border-bottom: 8px solid transparent; height: 0; right: -25px; position: absolute; top: 12px; width: 0; } #paragon .hon:hover, #paragon .main:hover { background: rgba(61, 41, 61, 0.9); } #paragon .hon--left, #paragon .main--left { left: 0; border-bottom-right-radius: 7px; padding: 0 20px 0 50px; } #paragon .hon--right, #paragon .main--right { right: 0; border-bottom-left-radius: 7px; padding: 0 50px 0 20px; } #paragon .header { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/header-bg.jpg") center top no-repeat; position: relative; } #paragon .header .video { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; } #paragon .header .video .video__player { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #paragon .header .header__wrapper { margin: 0 auto; max-width: 960px; padding-top: 280px; width: 100%; } #paragon .header .header__wrapper .header__frame { position: relative; } #paragon .header .header__wrapper .header__frame .header__border { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/video-border.png"); background-repeat: no-repeat; position: absolute; z-index: 2; } #paragon .header .header__wrapper .header__frame .header__border--topl { background-position: left top; height: 104px; left: -25px; top: -18px; width: 182px; } #paragon .header .header__wrapper .header__frame .header__border--topr { background-position: right top; height: 104px; right: -25px; top: -18px; width: 182px; } #paragon .header .header__wrapper .header__frame .header__border--botl { background-position: left bottom; height: 104px; left: -25px; bottom: -18px; width: 182px; } #paragon .header .header__wrapper .header__frame .header__border--botr { background-position: right bottom; height: 104px; right: -25px; bottom: -18px; width: 182px; } #paragon .header .header__wrapper .header__frame .header__play { background: rgba(20, 15, 21, 0.1); height: 100%; position: absolute; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; width: 100%; z-index: 1; } #paragon .header .header__wrapper .header__frame .header__play:hover { background: rgba(20, 15, 21, 0.6); } #paragon .header .header__wrapper .header__frame .header__play:hover .header__popup { background: rgba(25, 19, 25, 0.8); border: 2px solid #915691; } #paragon .header .header__wrapper .header__frame .header__play .header__popup { background: rgba(25, 19, 25, 0.6); border: 2px solid #673d67; border-radius: 50%; height: 150px; left: 50%; margin-left: -75px; margin-top: -60px; position: relative; top: 50%; -webkit-transition: all 0.3s; transition: all 0.3s; width: 150px; } #paragon .header .header__wrapper .header__frame .header__play .header__popup .header__start { border-top: 18px solid transparent; border-left: 26px solid #673d67; border-bottom: 18px solid transparent; height: 0; left: 50%; margin-left: -5px; margin-top: -15px; position: absolute; top: 50%; width: 0; } #paragon .header .header__wrapper .header__frame .header__gems { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/green-gems.png"); background-repeat: no-repeat; height: 89px; position: absolute; width: 151px; z-index: 1; } #paragon .header .header__wrapper .header__frame .header__gems--botL { background-position: left bottom; bottom: -51px; left: -122px; } #paragon .header .header__wrapper .header__frame .header__gems--botR { background-position: right bottom; bottom: -51px; right: -122px; } #paragon .header .header__wrapper .header__frame .header__logo { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/paragon-logo.png") center top no-repeat; height: 398px; left: 50%; margin-left: -270px; position: absolute; top: -220px; width: 540px; z-index: 2; } #paragon .header .header__wrapper .header__frame .header__tour { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/hontour-logo.png") center top no-repeat; bottom: -135px; display: block; height: 208px; left: 50%; margin-left: -108px; position: absolute; width: 216px; z-index: 2; } #paragon .header .header__wrapper .header__frame .header__tour--hide { display: none; } #paragon .header .header__wrapper .header__frame .header__video { height: auto; width: 100%; } #paragon .nav { background: -webkit-linear-gradient(left, #161015, #362435, #161015); background: linear-gradient(to right, #161015, #362435, #161015); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.6); height: 88px; margin-top: -88px; position: relative; top: 0; width: 100%; } #paragon .nav--sticky { margin: 0; position: fixed; top: 0; width: 100%; z-index: 99; } #paragon .nav:before, #paragon .nav:after { background: -webkit-linear-gradient(left, #61264d, #edad01, #61264d); background: linear-gradient(to right, #61264d, #edad01, #61264d); content: ''; left: 0; display: block; position: absolute; height: 1px; width: 100%; z-index: 0; } #paragon .nav .nav__container { font-size: 0; list-style: none; padding: 0; position: relative; text-align: center; } #paragon .nav .nav__container.container { -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; max-width: 960px; width: 100%; } #paragon .nav .nav__container .nav__item { display: inline-block; font-family: "Cinzel", serif; font-size: 20px; line-height: 88px; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; vertical-align: bottom; width: 16%; } #paragon .nav .nav__container .nav__item--active { background-color: rgba(255, 255, 255, 0.05); } #paragon .nav .nav__container .nav__item:hover { background-color: rgba(255, 255, 255, 0.02); } #paragon .nav .nav__container .nav__item--hontour { background-color: rgba(255, 255, 255, 0) !important; position: relative; } #paragon .nav .nav__container .nav__item--hontour .nav__color { color: #ddbc7b; } #paragon .nav .nav__container .nav__item a { color: #ffe6e6; display: block; outline: none; text-decoration: none; } #paragon .about .about__wrapper { -moz-box-sizing: border-box; box-sizing: border-box; position: relative; width: 100%; } #paragon .about .about__wrapper:before, #paragon .about .about__wrapper:after { background: -webkit-linear-gradient(left, #140f15, #3e293e, #140f15); background: linear-gradient(to right, #140f15, #3e293e, #140f15); content: ''; left: 0; display: block; position: absolute; height: 3px; width: 100%; z-index: 1; } #paragon .about .about__wrapper .about__contain { padding: 40px; text-align: center; } #paragon .avatars .avatars__wrapper { -moz-box-sizing: border-box; box-sizing: border-box; position: relative; width: 100%; } #paragon .avatars .avatars__wrapper:before, #paragon .avatars .avatars__wrapper:after { background: -webkit-linear-gradient(left, #140f15, #3e293e, #140f15); background: linear-gradient(to right, #140f15, #3e293e, #140f15); content: ''; left: 0; display: block; position: absolute; height: 3px; width: 100%; z-index: 1; } #paragon .avatars .avatars__wrapper .avatars__contain { padding: 40px; text-align: center; } #paragon .avatars .avatars__bar { background: -webkit-linear-gradient(left, rgba(62, 41, 62, 0), #3e293e, rgba(62, 41, 62, 0)); background: linear-gradient(to right, rgba(62, 41, 62, 0), #3e293e, rgba(62, 41, 62, 0)); margin: 5px 0 3px 0; padding: 30px 0; width: 100%; } #paragon .avatars .avatars__bar .avatars__contain { -moz-box-sizing: border-box; box-sizing: border-box; font-size: 0; padding: 0 50px; position: relative; text-align: center; } #paragon .avatars .avatars__bar .avatars__contain .avatars__box, #paragon .avatars .avatars__bar .avatars__contain .avatars__release { -webkit-border-image: -webkit-linear-gradient(top, rgba(213, 180, 23, 0) 0%, rgba(134, 94, 6, 0) 100%); -o-border-image: linear-gradient(to bottom, rgba(213, 180, 23, 0) 0%, rgba(134, 94, 6, 0) 100%); border-image: linear-gradient(to bottom, rgba(213, 180, 23, 0) 0%, rgba(134, 94, 6, 0) 100%); border-image-slice: 1; border-style: solid; border-width: 3px; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.7), inset -2px -2px 4px rgba(0, 0, 0, 0.7); cursor: pointer; display: inline-block; height: 78px; margin: 0 3px; opacity: 0.6; -webkit-transition: all 0.3s; transition: all 0.3s; vertical-align: top; width: 78px; } #paragon .avatars .avatars__bar .avatars__contain .avatars__box .avatars__date, #paragon .avatars .avatars__bar .avatars__contain .avatars__release .avatars__date { font-size: 16px; font-size: 1.6rem; padding-top: 12px; } #paragon .avatars .avatars__bar .avatars__contain .avatars__box .avatars__date span, #paragon .avatars .avatars__bar .avatars__contain .avatars__release .avatars__date span { font-weight: 700; } #paragon .avatars .avatars__bar .avatars__contain .avatars__box:first-child, #paragon .avatars .avatars__bar .avatars__contain .avatars__release:first-child { margin: 0 3px 0 0; } #paragon .avatars .avatars__bar .avatars__contain .avatars__box:last-child, #paragon .avatars .avatars__bar .avatars__contain .avatars__release:last-child { margin: 0 0 0 3px; } #paragon .avatars .avatars__bar .avatars__contain .avatars__box--selected, #paragon .avatars .avatars__bar .avatars__contain .avatars__release--selected { -webkit-border-image: -webkit-linear-gradient(top, #d5b417 0%, #865e06 100%); -o-border-image: linear-gradient(to bottom, #d5b417 0%, #865e06 100%); border-image: linear-gradient(to bottom, #d5b417 0%, #865e06 100%); border-image-slice: 1; border-style: solid; border-width: 3px; opacity: 1; } #paragon .avatars .avatars__bar .avatars__contain .avatars__box--selected:hover, #paragon .avatars .avatars__bar .avatars__contain .avatars__release--selected:hover { -webkit-border-image: -webkit-linear-gradient(top, #d5b417 0%, #865e06 100%) !important; -o-border-image: linear-gradient(to bottom, #d5b417 0%, #865e06 100%) !important; border-image: linear-gradient(to bottom, #d5b417 0%, #865e06 100%) !important; border-image-slice: 1 !important; border-style: solid !important; border-width: 3px !important; opacity: 1 !important; } #paragon .avatars .avatars__bar .avatars__contain .avatars__box:hover, #paragon .avatars .avatars__bar .avatars__contain .avatars__release:hover { -webkit-border-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); -o-border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); border-image-slice: 1; border-style: solid; border-width: 3px; opacity: 0.8; } #paragon .avatars .avatars__bar .avatars__contain .avatars__box--avatar1, #paragon .avatars .avatars__bar .avatars__contain .avatars__release--avatar1 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/icon-empath.jpg") center center no-repeat; background-size: contain; } #paragon .avatars .avatars__bar .avatars__contain .avatars__release { cursor: default; } #paragon .avatars .avatars__case { position: relative; width: 100%; } #paragon .avatars .avatars__case:before, #paragon .avatars .avatars__case:after { background: -webkit-linear-gradient(left, #140f15, #3e293e, #140f15); background: linear-gradient(to right, #140f15, #3e293e, #140f15); content: ''; left: 0; display: block; position: absolute; height: 3px; width: 100%; z-index: 1; } #paragon .avatars .avatars__case .avatars__splash { padding-top: 2px; } #paragon .avatars .avatars__case .avatars__splash .avatars__image { display: none; height: 380px; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; width: 100%; } #paragon .avatars .avatars__case .avatars__splash .avatars__image--clear { -webkit-transform: translateX(0px) !important; -ms-transform: translateX(0px) !important; transform: translateX(0px) !important; } #paragon .avatars .avatars__case .avatars__splash .avatars__image--avatar1 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/avatar-1.png") center center no-repeat; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } #paragon .avatars .avatars__case .avatars__splash .avatars__image--avatar2 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/avatar-2.png") center center no-repeat; -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); } #paragon .avatars .avatars__case .avatars__splash .avatars__image--avatar3 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/avatar-1.png") center center no-repeat; -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); } #paragon .avatars .avatars__case .avatars__splash .avatars__image--avatar4 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/avatar-2.png") center center no-repeat; -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); } #paragon .avatars .avatars__case .avatars__splash .avatars__image#avatar-1 { display: block; } #paragon .avatars .avatars__content { background: -webkit-linear-gradient(left, rgba(62, 41, 62, 0), #3e293e, rgba(62, 41, 62, 0)); background: linear-gradient(to right, rgba(62, 41, 62, 0), #3e293e, rgba(62, 41, 62, 0)); margin-top: 6px; width: 100%; } #paragon .avatars .avatars__content .avatars__content__wrapper { display: none; } #paragon .avatars .avatars__content .avatars__content__wrapper#content-1 { display: block; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__lore { -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px; text-align: center; width: 100%; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__info { background: -webkit-linear-gradient(left, #140f15, #2b1d2c, #140f15); background: linear-gradient(to right, #140f15, #2b1d2c, #140f15); box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.7), inset 0 -1px 0 0 rgba(255, 255, 255, 0.04); font-size: 0; text-align: center; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__info .avatars__inline { -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; padding: 20px 0; width: 33.33%; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades { padding: 40px 0; text-align: center; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips { height: 282px; margin: 40px 0; position: relative; width: 100%; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid { background: #140f15; border: 2px solid #74557d; border-radius: 4px; box-shadow: 0 1px 8px rgba(135, 35, 94, 0.2); -moz-box-sizing: border-box; box-sizing: border-box; display: block; position: absolute; -webkit-transition: border 0.3s; transition: border 0.3s; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid .avatars__play { height: 100%; left: 0; position: absolute; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; top: 0; width: 100%; z-index: 1; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid .avatars__play:hover .avatars__popup { background: rgba(25, 19, 25, 0.8); border: 2px solid #8152d0; box-shadow: 0 1px 8px rgba(73, 61, 231, 0.9); } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid .avatars__play:hover .avatars__popup .avatars__start { border-left: 26px solid #8152d0; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid .avatars__play .avatars__popup { background: rgba(25, 19, 25, 0.6); border: 2px solid #673d67; border-radius: 50%; box-shadow: 0 1px 8px rgba(73, 61, 231, 0.1); height: 150px; left: 50%; margin-left: -75px; margin-top: -75px; position: relative; top: 50%; -webkit-transition: all 0.3s; transition: all 0.3s; width: 150px; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid .avatars__play .avatars__popup .avatars__start { border-top: 18px solid transparent; border-left: 26px solid #673d67; border-bottom: 18px solid transparent; height: 0; left: 50%; margin-left: -5px; margin-top: -15px; position: absolute; -webkit-transition: all 0.3s; transition: all 0.3s; top: 50%; width: 0; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid:hover { border: 2px solid #8152d0; box-shadow: 0 1px 8px rgba(73, 61, 231, 0.9); -webkit-transition: all 0.3s; transition: all 0.3s; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid:hover + .avatars__vidTitle { opacity: 1; -webkit-transition: all 0.5s; transition: all 0.5s; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--large { height: 282px; left: 50%; margin-left: -250px; top: 0; width: 500px; z-index: 3; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--mediumL, #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--mediumR { height: 254px; margin-top: -127px; top: 50%; width: 450px; z-index: 2; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--mediumL { left: 50%; margin-left: -320px; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--mediumR { right: 50%; margin-right: -320px; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--smallL, #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--smallR { height: 226px; margin-top: -118px; top: 50%; width: 400px; z-index: 1; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--smallL { left: 50%; margin-left: -380px; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--smallR { right: 50%; margin-right: -380px; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--empath1 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/empath-power1.jpg") center center no-repeat; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--empath2 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/empath-power2.jpg") center center no-repeat; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--empath3 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/empath-power3.jpg") center center no-repeat; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--empath4 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/empath-power4.jpg") center center no-repeat; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vid--empath5 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/empath-power5.jpg") center center no-repeat; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars__upgrades .avatars__clips .avatars__vidTitle { bottom: -45px; opacity: 0; position: absolute; text-align: center; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; width: 100%; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars_blurb { background: #140f15; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.8); position: relative; text-align: center; width: 100%; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars_blurb .avatars_blurbWrapper { -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 80px; width: 100%; } #paragon .avatars .avatars__content .avatars__content__wrapper .avatars_blurb:after { background: -webkit-linear-gradient(left, #140f15, #3e293e, #140f15); background: linear-gradient(to right, #140f15, #3e293e, #140f15); content: ''; left: 0; display: block; position: absolute; height: 3px; width: 100%; z-index: 1; } #paragon .perks .perks__wrapper { -moz-box-sizing: border-box; box-sizing: border-box; position: relative; width: 100%; } #paragon .perks .perks__wrapper:before, #paragon .perks .perks__wrapper:after { background: -webkit-linear-gradient(left, #140f15, #3e293e, #140f15); background: linear-gradient(to right, #140f15, #3e293e, #140f15); content: ''; left: 0; display: block; position: absolute; height: 3px; width: 100%; z-index: 1; } #paragon .perks .perks__wrapper .perks__contain { padding: 40px; text-align: center; } #paragon .perks .perks__bar { background: -webkit-linear-gradient(left, rgba(62, 41, 62, 0), #3e293e, rgba(62, 41, 62, 0)); background: linear-gradient(to right, rgba(62, 41, 62, 0), #3e293e, rgba(62, 41, 62, 0)); margin: 5px 0 3px 0; padding: 30px 0; width: 100%; } #paragon .perks .perks__bar .perks__contain { -moz-box-sizing: border-box; box-sizing: border-box; font-size: 0; padding: 0 50px; position: relative; text-align: center; } #paragon .perks .perks__bar .perks__contain .perks__box { -webkit-border-image: -webkit-linear-gradient(top, rgba(213, 180, 23, 0) 0%, rgba(134, 94, 6, 0) 100%); -o-border-image: linear-gradient(to bottom, rgba(213, 180, 23, 0) 0%, rgba(134, 94, 6, 0) 100%); border-image: linear-gradient(to bottom, rgba(213, 180, 23, 0) 0%, rgba(134, 94, 6, 0) 100%); border-image-slice: 1; border-style: solid; border-width: 3px; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.7), inset -2px -2px 4px rgba(0, 0, 0, 0.7); cursor: pointer; display: inline-block; height: 78px; margin: 0 3px; opacity: 0.6; -webkit-transition: all 0.3s; transition: all 0.3s; vertical-align: top; width: 78px; } #paragon .perks .perks__bar .perks__contain .perks__box:first-child { margin: 0 3px 0 0; } #paragon .perks .perks__bar .perks__contain .perks__box:last-child { margin: 0 0 0 3px; } #paragon .perks .perks__bar .perks__contain .perks__box--selected { -webkit-border-image: -webkit-linear-gradient(top, #d5b417 0%, #865e06 100%); -o-border-image: linear-gradient(to bottom, #d5b417 0%, #865e06 100%); border-image: linear-gradient(to bottom, #d5b417 0%, #865e06 100%); border-image-slice: 1; border-style: solid; border-width: 3px; opacity: 1; } #paragon .perks .perks__bar .perks__contain .perks__box--selected:hover { -webkit-border-image: -webkit-linear-gradient(top, #d5b417 0%, #865e06 100%) !important; -o-border-image: linear-gradient(to bottom, #d5b417 0%, #865e06 100%) !important; border-image: linear-gradient(to bottom, #d5b417 0%, #865e06 100%) !important; border-image-slice: 1 !important; border-style: solid !important; border-width: 3px !important; opacity: 1 !important; } #paragon .perks .perks__bar .perks__contain .perks__box:hover { -webkit-border-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); -o-border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); border-image-slice: 1; border-style: solid; border-width: 3px; opacity: 0.8; } #paragon .perks .perks__bar .perks__contain .perks__box--item1 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/item-1.jpg") center center no-repeat; background-size: contain; } #paragon .perks .perks__bar .perks__contain .perks__box--item2 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/item-2.jpg") center center no-repeat; background-size: contain; } #paragon .perks .perks__bar .perks__contain .perks__box--item3 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/item-3.jpg") center center no-repeat; background-size: contain; } #paragon .perks .perks__bar .perks__contain .perks__box--item4 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/item-4.jpg") center center no-repeat; background-size: contain; } #paragon .perks .perks__bar .perks__contain .perks__box--item5 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/item-5.jpg") center center no-repeat; background-size: contain; } #paragon .perks .perks__bar .perks__contain .perks__box--item6 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/item-6.jpg") center center no-repeat; background-size: contain; } #paragon .perks .perks__bar .perks__contain .perks__box--item7 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/item-7.jpg") center center no-repeat; background-size: contain; } #paragon .perks .perks__bar .perks__contain .perks__box--item8 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/item-8.jpg") center center no-repeat; background-size: contain; } #paragon .perks .perks__bar .perks__contain .perks__box--item9 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/item-9.jpg") center center no-repeat; background-size: contain; } #paragon .perks .perks__case { position: relative; width: 100%; } #paragon .perks .perks__case:before, #paragon .perks .perks__case:after { background: -webkit-linear-gradient(left, #140f15, #3e293e, #140f15); background: linear-gradient(to right, #140f15, #3e293e, #140f15); content: ''; left: 0; display: block; position: absolute; height: 3px; width: 100%; z-index: 1; } #paragon .perks .perks__case .perks__splash { padding-top: 2px; text-align: center; } #paragon .perks .perks__case .perks__splash .perks__image { height: 380px; width: 100%; } #paragon .perks .perks__content { background: -webkit-linear-gradient(left, rgba(62, 41, 62, 0), #3e293e, rgba(62, 41, 62, 0)); background: linear-gradient(to right, rgba(62, 41, 62, 0), #3e293e, rgba(62, 41, 62, 0)); margin-top: 6px; width: 100%; } #paragon .perks .perks__content .perks__content__wrapper { display: none; } #paragon .perks .perks__content .perks__content__wrapper#contain-1 { display: block; } #paragon .perks .perks__content .perks__content__wrapper .perks__lore { -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px; text-align: center; width: 100%; } #paragon .perks .perks__content .perks__content__wrapper .perks__info { background: -webkit-linear-gradient(left, #140f15, #2b1d2c, #140f15); background: linear-gradient(to right, #140f15, #2b1d2c, #140f15); box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.7), inset 0 -1px 0 0 rgba(255, 255, 255, 0.04); -moz-box-sizing: border-box; box-sizing: border-box; font-size: 0; padding: 20px 0; position: relative; text-align: center; } #paragon .perks .perks__content .perks__content__wrapper .perks__info:after { background: -webkit-linear-gradient(left, #140f15, #3e293e, #140f15); background: linear-gradient(to right, #140f15, #3e293e, #140f15); bottom: -6px; content: ''; left: 0; display: block; position: absolute; height: 3px; width: 100%; z-index: 1; } #paragon .perks .perks__content .perks__content__wrapper .perks__info .perks__inline { display: inline-block; margin: 0 5px; width: 200px; } #paragon .perks .perks__content .perks__content__wrapper .perks__info .perks__inline .perks__paragons { background: rgba(255, 255, 255, 0.06); border-radius: 15px; line-height: 42px; margin-top: 20px; width: 100%; } #paragon .funding .funding__wrapper { -moz-box-sizing: border-box; box-sizing: border-box; position: relative; width: 100%; } #paragon .funding .funding__wrapper:before, #paragon .funding .funding__wrapper:after { background: -webkit-linear-gradient(left, #140f15, #3e293e, #140f15); background: linear-gradient(to right, #140f15, #3e293e, #140f15); content: ''; left: 0; display: block; position: absolute; height: 3px; width: 100%; z-index: 1; } #paragon .funding .funding__wrapper .funding__contain { padding: 40px 80px; text-align: center; } #paragon .funding .funding__cycle { background: -webkit-linear-gradient(left, rgba(62, 41, 62, 0), #3e293e, rgba(62, 41, 62, 0)); background: linear-gradient(to right, rgba(62, 41, 62, 0), #3e293e, rgba(62, 41, 62, 0)); margin-top: 5px; } #paragon .funding .funding__cycle .funding__cycleWrapper { padding: 60px 0; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain { -moz-box-sizing: border-box; box-sizing: border-box; height: 398px; padding: 0 50px; position: relative; width: 100%; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card { background: #1e1720; border-radius: 3px; border: 2px solid #513c51; -moz-box-sizing: border-box; box-sizing: border-box; color: #eee; cursor: default; display: block; position: absolute; text-decoration: none; top: 10px; -webkit-transition: top 0.3s; transition: top 0.3s; width: 230px; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card--active { background: #140f15; border: 2px solid #7d547d; padding: 10px 0; top: 0 !important; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card--active .funding__octo { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/cycle-active.png") center center no-repeat !important; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card--active .funding__octo .funding__value { opacity: 1 !important; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card--active .funding__text { opacity: 1 !important; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card--active .funding__button { opacity: 1 !important; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card:hover { border: 2px solid #7d547d; -moz-box-sizing: border-box; box-sizing: border-box; top: 0; z-index: 11; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card:hover .funding__octo { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/cycle-active.png") center center no-repeat !important; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card:hover .funding__octo .funding__value { opacity: 1 !important; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card:hover .funding__text { opacity: 1 !important; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card:hover .funding__button { opacity: 1 !important; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card--card1 { left: 50px; z-index: 10; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card--card2 { left: 140px; z-index: 9; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card--card3 { left: 230px; z-index: 8; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card--card4 { left: 320px; z-index: 7; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card--card5 { left: 410px; z-index: 6; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card--card6 { left: 500px; z-index: 5; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card--card7 { left: 590px; z-index: 4; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card--card8 { left: 680px; z-index: 3; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card .funding__octo { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/cycle-nonactive.png") center center no-repeat; height: 230px; position: relative; -webkit-transition: background 0.4s; transition: background 0.4s; width: 100%; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card .funding__octo .funding__value { height: 100%; left: 0; line-height: 230px; opacity: 0.3; position: absolute; text-align: center; top: 0; width: 100%; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card .funding__text { opacity: 0.5; padding-bottom: 20px; text-align: center; width: 100%; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card .funding__button { height: 45px; opacity: 0.5; padding-bottom: 25px; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; width: 100%; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card .funding__button--event { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/event-page.png") center top no-repeat; } #paragon .funding .funding__cycle .funding__cycleWrapper .funding__contain .funding__card .funding__button--upcoming { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/upcoming-btn.png") center top no-repeat; } #paragon .prize .prize__wrapper { background: -webkit-linear-gradient(left, #140f15, #2b1d2c, #140f15); background: linear-gradient(to right, #140f15, #2b1d2c, #140f15); position: relative; width: 100%; } #paragon .prize .prize__wrapper:before, #paragon .prize .prize__wrapper:after { background: -webkit-linear-gradient(left, #61264d, #edad01, #61264d); background: linear-gradient(to right, #61264d, #edad01, #61264d); content: ''; left: 0; display: block; position: absolute; height: 1px; width: 100%; z-index: 1; } #paragon .prize .prize__wrapper .prize__title { padding: 40px 80px; text-align: center; } #paragon .prize .prize__layout { background: -webkit-linear-gradient(left, rgba(62, 41, 62, 0), #3e293e, rgba(62, 41, 62, 0)); background: linear-gradient(to right, rgba(62, 41, 62, 0), #3e293e, rgba(62, 41, 62, 0)); font-size: 0; padding: 60px 0; position: relative; text-align: center; width: 100%; } #paragon .prize .prize__layout .prize__gem { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/green-gems.png"); background-repeat: no-repeat; height: 89px; position: absolute; width: 151px; z-index: 2; } #paragon .prize .prize__layout .prize__gem--left { background-position: left top; bottom: -68px; left: -120px; } #paragon .prize .prize__layout .prize__gem--right { background-position: right top; bottom: -68px; right: -120px; } #paragon .prize .prize__layout:after { background: -webkit-linear-gradient(left, #61264d, #edad01, #61264d); background: linear-gradient(to right, #61264d, #edad01, #61264d); bottom: 0px; content: ''; left: 0; display: block; position: absolute; height: 1px; width: 100%; z-index: 1; } #paragon .prize .prize__layout .prize__amount { display: inline-block; padding-top: 183px; position: relative; text-align: center; vertical-align: middle; width: 242px; } #paragon .prize .prize__layout .prize__amount--value1 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/purple-base.png") center top no-repeat; } #paragon .prize .prize__layout .prize__amount--value2 { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/red-base.png") center top no-repeat; } #paragon .prize .prize__layout .prize__amount .prize__value { left: 0; line-height: 163px; position: absolute; text-align: center; top: 0; width: 100%; } #paragon .prize .prize__layout .prize__amount .prize__glow { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/glow-img.png") center top no-repeat; height: 260px; position: absolute; text-align: center; top: -48px; width: 260px; z-index: -1; } #paragon .prize .prize__layout .prize__amount .prize__glow--left { left: -5px; } #paragon .prize .prize__layout .prize__amount .prize__glow--right { left: -10px; } #paragon .prize .prize__layout .prize__plus { display: inline-block; padding: 0 40px; vertical-align: middle; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -10%, 0); transform: translate3d(0, -10%, 0); } 80% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -10%, 0); transform: translate3d(0, -10%, 0); } 80% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } 60% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } 60% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-40%, 0, 0); transform: translate3d(-40%, 0, 0); } 80% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-40%, 0, 0); transform: translate3d(-40%, 0, 0); } 80% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(40%, 0, 0); transform: translate3d(40%, 0, 0); } 80% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(40%, 0, 0); transform: translate3d(40%, 0, 0); } 80% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 80% { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 80% { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 50% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 0.6; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 50% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 0.6; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes pulseLoop { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } } @keyframes pulseLoop { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } } .pulseLoop { -webkit-animation-name: pulseLoop; animation-name: pulseLoop; } .animate-infinate { -webkit-animation-duration: 6s; animation-duration: 6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animate-infinate.faster { -webkit-animation-duration: 4s; animation-duration: 4s; } .os-animation { opacity: 0; } .os-animation.animated { opacity: 1; } @media only screen and (max-width: 1024px) { #paragon .header { overflow: hidden; } #paragon .header .video { display: none; } #paragon .header .header__wrapper .header__frame .header__tour { display: none; } } .footer { background: -webkit-linear-gradient(left, #140f15, #2b1d2c, #140f15); background: linear-gradient(to right, #140f15, #2b1d2c, #140f15); margin-top: 200px; position: relative; width: 100%; } .footer:before { background: -webkit-linear-gradient(left, #140f15, #3e293e, #140f15); background: linear-gradient(to right, #140f15, #3e293e, #140f15); content: ''; left: 0; display: block; position: absolute; height: 3px; width: 100%; z-index: 1; } .footer .footer__contain { max-width: 960px; margin: 0 auto; padding: 60px 0; position: relative; text-align: center; } .footer .footer__contain .footer__content { font-size: 0; text-align: center; width: 100%; } .footer .footer__contain .footer__content .footer__inline { display: inline-block; vertical-align: middle; width: 33.33%; } .footer .footer__contain .footer__content .footer__inline--frostburn { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/frostburn-logo.png") left center no-repeat; height: 42px; width: 207px; } .footer .footer__contain .footer__content .footer__inline--hon { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/hon-logo-icon.png") center center no-repeat; background-size: contain; height: 90px; margin: 0 120px; width: 90px; } .footer .footer__contain .footer__content .footer__inline--social { font-size: 0; text-align: left; width: 207px; } .footer .footer__contain .footer__content .footer__inline--social .footer__social { background: url("https://naeu-icb2.s3.amazonaws.com/splash/paragon/images/social-icons.png"); background-repeat: no-repeat; display: inline-block; height: 32px; opacity: 0.7; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .footer .footer__contain .footer__content .footer__inline--social .footer__social--facebook { background-position: left center; width: 15px; } .footer .footer__contain .footer__content .footer__inline--social .footer__social--twitter { background-position: -15px 0; margin: 0 20px; width: 31px; } .footer .footer__contain .footer__content .footer__inline--social .footer__social--youtube { background-position: right center; width: 33px; } .footer .footer__contain .footer__content .footer__inline--social .footer__social:hover { opacity: 1; } .footer .footer__contain .footer__cr { color: #917e92; padding-top: 22px; }