/* M E D I A - U P L O A D E R */ /*#page.upload {perspective:1200px;}*/ /*.perspective {-webkit-perspective:1200px; -moz-perspective:1200px; perspective:1200px;*/ .preserve-3d {position:absolute; top:var(--height-page-header); /*top:calc(48px + 88px);*/ left:0; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-perspective:31200px; -moz-perspective:3200px; perspective:3200px; width:100%; height:100%; height:100%; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; backface-visibility:hidden;} .pt-page-scaleDown {-webkit-animation:scaleDown 0.7s ease both; animation:scaleDown 0.7s ease both;} .pt-page-moveFromTop {-webkit-animation:moveFromTop 0.6s ease both; animation:moveFromTop 0.6s ease both;} /*.pt-page-delay500 {-webkit-animation-delay:0.5s; animation-delay:0.5s;}*/ /* M E D I A - U P L O A D E R */ #page.upload #wrapper {position:relative; display:flex; align-items:center; min-height:100vh;} #page.upload #hero {margin:0 auto; max-width:calc(20px + var(--width-container-medium)); width:100%; padding:var(--global-offset-from-page-header) 10px 10vh;} #page.upload #hero main .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:28px; font-weight:400; color:#5F4781; -webkit-text-fill-color:transparent; text-align:center;} #page.upload #hero main .main-description {margin-bottom:50px; font-size:18px; font-weight:400; color:#666;} #page.upload #hero main .global__notification-alert {margin-bottom:15px;} #page.upload #hero main .rules {width:100%; font-size:14px; line-height:20px; color:#666; text-align:center;} #page.upload #hero main .rules a {border-bottom:dotted 1px #797879; color:#797879;} #page.upload #page-footer {padding-right:10px; padding-left:10px;} #page.upload #page-footer .container {max-width:var(--width-container-big);} #page.upload .OgUXJeShTNRBPyiDArKm {display:flex; justify-content:center; align-items:center; margin-bottom:15px; max-height:250px;} #uploady {background-color:#FFF; display:flex; flex-flow:column; justify-content:space-between; margin-bottom:20px; min-height:400px; padding:15px; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.15);} #uploady .info {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; color:#888; row-gap:5px;} #uploady .info a.grey {border-bottom:dotted 1px #888; color:#888;} #uploady .info a.blue {color:var(--color-blue-highlight);} #uploady .info .text {font-size:16px;} #uploady .info .mini-description {font-size:12px;} #uploady .drop-area {background-color:#F5F8FC; display:flex; flex:1; flex-flow:column; justify-content:space-between; align-items:center; margin:15px 0; border:dashed 2px #639FF1; border-radius:14px; cursor:pointer;} #uploady .drop-area .header {padding:10px 0;} #uploady .drop-area .body {display:flex; flex-flow:column; align-items:center;} #uploady .drop-area .body .images {position:relative; width:100px; height:100px;} #uploady .drop-area .body .images .icon {position:absolute; top:50%; transform:translate(-50%, -50%); transition:all 300ms ease-in-out;} #uploady .drop-area .body .images .icon.left {left:25%; rotate:-10deg;} #uploady .drop-area .body .images .icon.center {left:50%; z-index:1;} #uploady .drop-area .body .images .icon.right {left:75%; rotate:10deg;} #uploady .drop-area:hover .body .images .icon.left {rotate:-15deg;} #uploady .drop-area:hover .body .images .icon.right {rotate:20deg;} #uploady .drop-area .body .images .icon svg {width:80px;} #uploady .drop-area .body .title {font-size:24px; color:var(--color-purple-primary); user-select:none;} #uploady .drop-area .body .title span.blue {color:var(--color-blue-highlight);} #uploady .drop-area .body .title span.green {color:var(--color-green-highlight);} #uploady .drop-area .body .description {margin-top:10px; font-size:14px;} #uploady .drop-area .body .description.full {color:var(--color-red-primary);} #uploady .drop-area .body .description.notfull {color:#777;} #uploady .drop-area .footer {padding:10px 0;} #uploady .drop-area .footer .upload-recaptcha {display:none; font-size:12px; color:#777;} .fullscreenad {position:fixed; top:0px; bottom:0px; left:0px; right:0px; z-index:var(--z-index-fullscreenad); background-image:linear-gradient(#333, #000); display:none; flex-flow:column; justify-content:center; align-items:center;} .fullscreenad .body {display:flex; justify-content:center; align-items:center; width:100%; height:100%;} .fullscreenad .body .promo {max-width:940px; max-height:500px;} .fullscreenad .footer {width:100%;} .fullscreenad .footer .top {display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; padding:0 15px; color:#FFF;} .fullscreenad .footer .top .skip-btn {display:flex; justify-content:center; align-items:center; height:42px;} .fullscreenad .footer .top .skip-btn.clickable {width:300px; border:1px solid #888; cursor:pointer;} .fullscreenad .footer .top .skip-btn.clickable:hover {background-color:#222; border:1px solid #999; transition:all 100ms ease-in-out;} .fullscreenad .footer .top .skip-btn.clickable .text {font-weight:500;} .fullscreenad .footer .top .skip-btn.clickable svg {margin-left:5px; width:20px; height:20px; fill:#FFF;} .fullscreenad .footer .middle {display:flex; justify-content:space-between; padding:0 15px; font-size:16px; color:#919191;} .fullscreenad .footer .bottom {height:30px;} /* D R A G & D R O P */ .typed-cursor {font-weight:100; -webkit-animation:blink 0.7s infinite; -moz-animation:blink 0.7s infinite; -ms-animation:blink 0.7s infinite; -o-animation:blink 0.7s infinite; animation:blink 0.7s infinite; opacity:1;} #dropZone {position:fixed; top:35%; left:50%; z-index:var(--z-index-dragndrop); transform:translate3d(-50%, -50%, 0); background:#F8F6F9; display:none; width:680px; height:450px; padding:10px; border:1px solid #CCC; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;} #dropZone .dropZone-body {display:flex; height:100%; border:2px dashed #5F4781;} #dropZone.hover {display:block;} #dropZone .dropZone-body-left_block {width:50%;} #dropZone .dropZone-body-right_block {width:50%;} #dropZone[data-state="enter"] .dropZone-body-right_block:after {content:""; position:relative; top:-12px; left:18px; background:url(/assets/img/sprite/drag-n-drop.png) no-repeat 4px 62px; display:block; width:280px; height:405px;} #dropZone[data-state="over"] .dropZone-body-right_block:after {content:""; position:relative; top:-12px; left:18px; background:url(/assets/img/sprite/drag-n-drop.png) no-repeat 4px 62px; display:block; width:280px; height:405px;} #dropZone[data-state="drop_image"] .dropZone-body-right_block:after {content:""; position:relative; top:-12px; left:19px; background:url(/assets/img/sprite/drag-n-drop.png) no-repeat -273px 62px; display:block; width:255px; height:100%;} #dropZone[data-state="drop_image"] .dropZone-right_block-images {display:block;} #dropZone[data-state="drop_images"] .dropZone-body-right_block:after {content:""; position:relative; top:-12px; left:19px; background:url(/assets/img/sprite/drag-n-drop.png) no-repeat -528px 62px; display:block; width:255px; height:100%;} #dropZone[data-state="drop_images"] .dropZone-right_block-images {display:block;} #dropZone .dropZone-body-left_block {} #dropZone .dropZone-right_block-text-container {position:relative; top:50%; left:20px; transform:translateY(-50%); font-style:normal; font-family:Neucha; font-size:48px; line-height:initial; color:#5F4781; text-align:center;} #dropZone .dropZone-right_block-text-container[data-state="drop"] {font-size:72px;} #dropZone .dropZone-right_block-images {position:absolute; bottom:76px; right:135px; z-index:99; display:none; width:100px; height:100px;} #dropZone .dropZone-right_block-images:before {content:""; position:relative; top:14px; left:-13px; z-index:99; background:url(/assets/img/sprite/drag-n-drop.png) no-repeat 0px -342px; display:block; width:35px; height:40px;} #dropZone .dropZone-right_block-images:after {content:""; position:absolute; top:11px; right:-14px; z-index:99; background:url(/assets/img/sprite/drag-n-drop.png) no-repeat -95px -342px; display:block; width:35px; height:40px;} #dropZone .right_block-img {position:absolute; background-color:#FFF; background-size:cover; background-repeat:no-repeat; width:90px; height:68px; outline:3px solid #140C1A;} #dropZone[data-state="drop_image"] .right_block-img[data-n="0"] {top:-4px; right:7px; transform:rotate(-6grad);} #dropZone[data-state="drop_images"] .right_block-img[data-n="0"] {top:-9px; right:9px; transform:rotate(-9grad);} #dropZone[data-state="drop_images"] .right_block-img[data-n="1"] {top:2px; right:7px; transform:rotate(-4grad);} #dropZone[data-state="drop_images"] .right_block-img[data-n="2"] {top:11px; right:11px; transform:rotate(4grad);} /* D R A G & D R O P */ /* --- M E D I A Q U E R I E S --- */ @media (max-width: 1199px) {/* Rules for laptops, small desktop screens, and smaller viewports */} @media (max-width:991px) {/* Rules for tablets and smaller viewports */ .fullscreenad .footer .top {justify-content:center;} .fullscreenad .footer .top .left-side {display:none;} .fullscreenad .footer .middle {justify-content:center;} .fullscreenad .footer .middle .left-side {display:none;}} @media (max-width:767px) {/* Rules for smartphones only */ #page.upload #hero {padding:0;} #page.upload #wrapper {min-height:100%;} #page.upload #hero main { display:flex; flex-flow:column;min-height:calc(100vh - var(--height-page-header) - 20px);} #page.upload #hero main .rules {padding-bottom:20px;} #uploady { flex-grow:1; padding:20px 0; border-radius:0px;} #uploady .info {flex-flow:column; padding:0 8px; text-align:center;} #uploady .info .text {font-size:14px;} #uploady .drop-area { border:none; border-radius:0px;} #uploady .drop-area .body .title { margin:10px 0;font-size:22px;} #uploady .drop-area .body .description {padding:0 5px; font-size:12px;} } /* --- M E D I A Q U E R I E S --- */ /* --- K E Y F R A M E S --- */ @keyframes blink {0% {opacity:1;} 50% {opacity:0;} 100% {opacity:1;}} @-webkit-keyframes blink {0% {opacity:1;} 50% {opacity:0;} 100% {opacity:1;}} @-moz-keyframes blink {0% {opacity:1;} 50% {opacity:0;} 100% {opacity:1;}} @-ms-keyframes blink {0% {opacity:1;} 50% {opacity:0;} 100% {opacity:1;}} @-o-keyframes blink {0% {opacity:1;} 50% {opacity:0;} 100% {opacity:1;}} @-webkit-keyframes scaleDown {from {} to {-webkit-transform:scale(0.8); opacity:0;}} @keyframes scaleDown {from {} to {-webkit-transform:scale(0.8); transform:scale(0.8); opacity:0;}} @-webkit-keyframes moveFromTop {from {-webkit-transform:translateY(-100%);}} @keyframes moveFromTop {from {-webkit-transform:translateY(-100%); transform:translateY(-100%);}} /* --- K E Y F R A M E S --- */