#page.mediahosting {padding-top:0px;} #page.mediahosting #page-header .main-bar .authentication .avatar--anonymous {background-color:#111;} #page.mediahosting .container {max-width:calc(var(--width-container-big) + 10px + 10px); padding:0 10px;} #page.mediahosting .main-title {position:relative; background:linear-gradient(to right, #5F4781,#EC4E91); background-size:250%; -webkit-background-clip:text; background-clip:text; margin-bottom:20px; font-size:32px; font-weight:400; color:#5F4781; -webkit-text-fill-color:transparent; text-align:center;} #page.mediahosting .mini-title {position:relative; margin:80px 0px 70px; font-size:24px; line-height:30px; font-weight:400; color:#5F4781; text-align:center;} #page.mediahosting .main-description {margin-bottom:50px; max-width:1100px; font-size:18px; line-height:24px; font-weight:400; color:#666; text-align:center;} #page.mediahosting .intro {position:relative; background-image:url("/assets/img/bg/pages/mediahosting/intro.jpg"); background-color:var(--color-orange-primary); background-size:cover; display:flex; flex-flow:column; align-items:center; min-height:100vh; color:#FFF;} #page.mediahosting .intro:before {content:""; position:absolute; top:0; left:0; mix-blend-mode:multiply; background-color:#140C1A; width:100%; height:100%; opacity:0.2;} #page.mediahosting .intro .middle {z-index:1; display:flex; flex:1; flex-direction:column; justify-content:flex-end; max-width:1100px; width:100%; padding:0 10px;} #page.mediahosting .intro .middle .promo-text {text-shadow:0 0 3px rgba(0, 0, 0, 0.75); color:#FFF; text-align:center;} #page.mediahosting .intro .middle .promo-text h1 {margin-bottom:10px; font-size:34px; font-weight:500; user-select:none;} #page.mediahosting .intro .middle .promo-text h2 {font-size:22px; font-weight:400; user-select:none;} #page.mediahosting .intro .middle button.upload-image {background-image:linear-gradient(110deg,rgb(252,96,118) 0%,rgb(255,154,68) 50%, rgb(252,96,118) 100%); background-size:300%; display:flex; justify-content:center; align-items:center; width:380px; height:50px; border-radius:30px; transition:background-position 900ms ease-in-out; box-shadow:0 1px 2px rgba(0,0,0,0.1);} #page.mediahosting .intro .middle button.upload-image:hover {background-position:right center;} #page.mediahosting .intro .middle button.upload-image svg {width:26px; height:26px; fill:#FFF;} #page.mediahosting .intro .middle button.upload-image span {padding-left:30px; font-size:18px; color:#FFF;} #page.mediahosting .intro .bottom .scroll-animation {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transform:rotate(-45deg); margin-left:-12px; width:24px; height:24px; border-bottom:1px solid #FFF; border-left:1px solid #FFF; animation:scrollingDown 3s infinite;} #page.mediahosting .intro .bottom {position:relative; z-index:1; display:flex; flex:1; align-items:flex-end; margin:0px 0px 50px; max-width:1100px; width:100%; padding:0 10px; text-shadow:0 0 3px rgba(0, 0, 0, 0.75);} #page.mediahosting .intro .bottom .scroll-animation:nth-of-type(1) {top:46%; animation-delay:0s;} #page.mediahosting .intro .bottom .scroll-animation:nth-of-type(2) {top:50%; animation-delay:0.15s;} #page.mediahosting .intro .bottom .scroll-animation:nth-of-type(3) {top:54%; animation-delay:0.3s;} #page.mediahosting .intro .bottom .statistics-block {flex:1; padding:0px 20px; text-align:center;} #page.mediahosting .intro .bottom .statistics-block .title {font-size:42px;} #page.mediahosting .intro .bottom .statistics-block span {font-size:24px; line-height:24px;} #page.mediahosting .intro .bottom .statistics-block .description {font-size:16px;} #page.mediahosting .faq {background-color:#FAFAFA; padding:100px 10px;} #page.mediahosting .features {display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:100vh; padding:100px 10px;} #page.mediahosting .features:nth-of-type(odd) {background-color:#FAFAFA;} #page.mediahosting .features:nth-of-type(even) {background-color:var(--color-main-body);} #page.mediahosting .features .img-container {position:relative; max-width:1200px;} #page.mediahosting .features .img-container .img-number {position:absolute; top:-30px; left:50%; transform:translateX(-50%); background-image:linear-gradient(110deg,rgb(252,96,118) 0%,rgb(255,154,68) 50%, rgb(252,96,118) 100%); background-size:250%; display:flex; justify-content:center; align-items:center; width:60px; height:60px; border-radius:30px; font-size:22px; color:#FFF; box-shadow:0 0 10px rgba(28, 36, 43, 0.2);} #page.mediahosting .features .img-container img {max-width:100%; height:auto; border-radius:5px; box-shadow:0 0 10px rgba(28, 36, 43, 0.2);} #page.mediahosting .features.uptime .img-container img {background-color:#FFF;} #page.mediahosting .features svg {position:absolute; fill:var(--color-orange-primary);} #page.mediahosting .features.new-era svg {top:20px; left:-84px; transform:rotate(30deg); width:170px; height:170px;} #page.mediahosting .features.sorting svg {top:60px; left:200px; transform:rotate(-6deg); width:170px; height:170px;} #page.mediahosting .features.htmlbbcode svg.select-arrow {top:140px; right:-48px; transform:rotate(265deg) scaleX(-1); width:170px; height:170px;} #page.mediahosting .features.htmlbbcode svg.single-code {top:126px; right:46px; transform:rotate(320deg) scaleX(-1); width:170px; height:170px;} #page.mediahosting .features.htmlbbcode svg.multi-code {top:126px; right:-20px; transform:rotate(320deg) scaleX(-1); width:170px; height:170px;} #page.mediahosting .features.convert svg {top:40px; left:88px; width:170px; height:170px;} #page.mediahosting .features .description p {font-size:16px; line-height:26px; color:#333;} #page.mediahosting .features .bulletpoints {display:flex; font-size:18px; line-height:26px; color:#333;} #page.mediahosting .features .bulletpoints li {margin-bottom:30px; list-style:none;} #page.mediahosting .features .bulletpoints li:before {content:"✓"; position:relative; top:2px; padding-right:10px; font-size:30px; color:#5F4781;} #page.mediahosting .features .bulletpoints .left-side {margin-right:20px;} #page.mediahosting .features .bulletpoints .right-side {margin-left:20px;} #page.mediahosting .features .bulletpoints footer {margin-top:20px; padding:15px; border:1px solid rgba(0, 0, 0, 0.07); border-radius:50px; text-align:center;} /* --- M E D I A Q U E R I E S --- */ @media (min-width:1921px) {/* Rules for 1440p Desktops and Smart TVs*/} @media (max-width:1920px) {/* Rules for full HD Desktops */} @media (max-width:1199px) {/* Rules for laptops, small desktop screens, and smaller viewports */ #page.mediahosting .features svg {display:none;}} @media (max-width:991px) {/* Rules for tablets and smaller viewports */} @media (max-width:767px) {/* Rules for smartphones only */ #page.mediahosting .intro {height:calc(100vh - var(--height-page-header) - 49px);} #page.mediahosting .intro .middle .promo-text h1 {font-size:28px;} #page.mediahosting .intro .middle .promo-text h2 {font-size:18px;} #page.mediahosting .intro .bottom { flex:1;flex-flow:column; align-items:center; margin:0px; padding-bottom:40px; row-gap:20px;} #page.mediahosting .intro .bottom .scroll-animation {display:none;} #page.mediahosting .intro .bottom .statistics-block {flex:unset; padding:0px;} #page.mediahosting .intro .bottom .statistics-block:first-of-type {padding-top:30px;} #page.mediahosting .intro .bottom .statistics-block .title {font-size:34px;} #page.mediahosting .main-title {margin-bottom:10px; font-size:24px;} #page.mediahosting .mini-title {margin:50px 0 40px;} #page.mediahosting .main-description { margin-bottom:20px;font-size:16px;} #page.mediahosting .container {padding:0px;} #page.mediahosting .features .img-container .img-number {top:-20px; width:40px; height:40px; font-size:18px;} #page.mediahosting .features {min-height:unset; padding:50px 5px;} #page.mediahosting .features .bulletpoints {flex-flow:column;} #page.mediahosting .features .bulletpoints .left-side {margin-right:0px;} #page.mediahosting .features .bulletpoints .left-side footer {display:none;} #page.mediahosting .features .bulletpoints .right-side {margin-left:0px;} #page.mediahosting .features .bulletpoints footer {margin-bottom:40px;} #page.mediahosting .features .bulletpoints li:before {padding:0 5px;} } /* --- M E D I A Q U E R I E S ---*/ @keyframes scrollingDown {0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;}}