@import url(//fonts.googleapis.com/css?family=PT+Sans:400italic,400,800,300,600,700); @import url(//fonts.googleapis.com/css?family=PT+Sans+Narrow:400italic,400,800,300,600,700); @import url(//fonts.googleapis.com/css?family=Crimson+Text:400i,400,800,300,600,700); #pnlProductEditor[data-editorproductid="519"] .pnlDesigner_selectPhotosTab #pnlDesigner_thumbs div.msg font, #pnlProductEditor .editormode_imageselect #pnlDesigner_thumbs div.msg font { display: none; } /* * SCSS Variables //@import 'variables'; */ /* Screen breaks */ /* misc. */ /* font family */ /* font size */ /* font style */ /* font uppercase */ /* font letter-spacing */ /* font weights */ /* line height */ /* colors */ /* /Variables */ /* * SCSS Functions //@import 'functions'; */ /* /Functions */ /* * SCSS Mixins //@import 'mixins'; */ /* * Screen breaks */ /* /Mixins */ /* Placeholders */ .project-area .dialogOverlay, .project-area .pictimeDialog.flexPosition, .project-area .userlogin .userloginInner .screens .screen button, .project-area .userlogin .userloginInner .screens .screen .password, .project-area .userlogin .userloginInner .screens .screen .passField, .project-area .loginBook .screen .headerEmail, .project-area .loginBox .screen .headerEmail, .project-area .loginBox .screen form .checkbox, .mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window, .mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window, .project-area body.login #maincanvas, .project-area body.login #useraccount, .project-area .userlogin icon-elem { display: flex; align-items: center; justify-content: center; } .project-area .dialogOverlay, .project-area .pictimeDialog.flexPosition, .project-area .userlogin .userloginInner .screens .screen button, .project-area .userlogin .userloginInner .screens .screen .password, .project-area .userlogin .userloginInner .screens .screen .passField, .project-area .loginBook .screen .headerEmail, .project-area .loginBox .screen .headerEmail, .project-area .loginBox .screen form .checkbox { display: inline-flex; } .project-area .userlogin .userloginInner .screens .screen, .project-area .loginBook .screen .disjunction, .project-area .loginBox .screen .disjunction, .project-area .loginBook .screen .title, .project-area .loginBook .screen .loginFooter, .project-area .loginBox .screen .title, .project-area .loginBox .screen .loginFooter, .mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window, .mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window, .project-area body.login #maincanvas, .project-area body.login #useraccount, .project-area .loginBook .screen.twoFactor form .resend, .project-area .loginBook .screen.twoFactorError form .resend, .project-area .loginBook .screen.twoFactorMessage form .resend, .project-area .loginBox .screen.twoFactor form .resend, .project-area .loginBox .screen.twoFactorError form .resend, .project-area .loginBox .screen.twoFactorMessage form .resend, .project-area .loginBook .screen form .local, .project-area .loginBook .screen form .external, .project-area .loginBook .screen:not(.guestBook) form, .project-area .loginBox .screen form, .project-area .loginBox .screen form .local { display: flex; flex-direction: column; } .project-area .userlogin .userloginInner .screens .screen, .project-area .loginBook .screen .disjunction, .project-area .loginBox .screen .disjunction, .project-area .loginBook .screen .title, .project-area .loginBook .screen .loginFooter, .project-area .loginBox .screen .title, .project-area .loginBox .screen .loginFooter { align-items: center; } .project-area .dialogOverlay, .project-area .pictimeDialog.flexPosition, .project-area .gallerySelection .thumbPanel.done:after, .project-area .dialog-2.fullScreen .window, .project-area .userlogin:after, .project-area body.login .projectCover, .project-area body.login .accountCover, .project-area body.login .photographerCover, .project-area body.login .projectCover:before, .project-area body.login .accountCover.projectCover:before, .project-area body.login .photographerCover.projectCover:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .project-area .dialogOverlay, .project-area .pictimeDialog.flexPosition { position: fixed; } /* /Placeholders */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { box-shadow: 0 0 0px 100vw #FFFFFF inset !important; } .svg-icon:not(.fill-icon) { stroke: currentColor; fill: transparent; } .svg-icon.fill-icon { fill: currentColor; } /* * Migration Class */ /* font family */ .F1 { font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif; } .F2 { font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif; } .F3 { font-family: "garamond-premier-pro-display", sans-serif; } .F4 { font-family: "Crimson Text", serif; } /* font size */ .S0 { font-size: 10px; } .S1 { font-size: 11px; } .S2 { font-size: 12px; } .S3 { font-size: 13px; } .S4 { font-size: 16px; } .S5 { font-size: 20px; } .S6 { font-size: 26px; } .S7 { font-size: 34px; } .S8 { font-size: 18px; } .S9 { font-size: 14px; } .S10 { font-size: 22px; } .S11 { font-size: 30px; } /* font uppercase */ .U1 { text-transform: none; } .U2 { text-transform: uppercase; } /* font letter-spacing */ .L1 { letter-spacing: 0.2px; } .L2 { letter-spacing: 1px; } .L3 { letter-spacing: 1.5px; } .L4 { letter-spacing: 0.5px; } .L5 { letter-spacing: 2px; } .L6 { letter-spacing: 3.5px; } /* font weights */ .W1 { font-weight: 300; } .W2 { font-weight: 400; } .W3 { font-weight: 500; } .W4 { font-weight: 700; } /* line-height */ .H1 { line-height: 150%; } .H2 { line-height: 18px; } .H3 { line-height: 135%; } /* colors */ .C0 { color: #F9F9F9; } .CH0:hover { color: #F9F9F9; } .BC0 { background-color: #F9F9F9; } .BCH0:hover { background-color: #F9F9F9; } .C1 { color: #FFFFFF; } .CH1:hover { color: #FFFFFF; } .BC1 { background-color: #FFFFFF; } .BCH1:hover { background-color: #FFFFFF; } .C2 { color: #F2F2F2; } .CH2:hover { color: #F2F2F2; } .BC2 { background-color: #F2F2F2; } .BCH2:hover { background-color: #F2F2F2; } .C3 { color: #ECECEC; } .CH3:hover { color: #ECECEC; } .BC3 { background-color: #ECECEC; } .BCH3:hover { background-color: #ECECEC; } .C4 { color: #E0E0E0; } .CH4:hover { color: #E0E0E0; } .BC4 { background-color: #E0E0E0; } .BCH4:hover { background-color: #E0E0E0; } .C5 { color: #D0D0D0; } .CH5:hover { color: #D0D0D0; } .BC5 { background-color: #D0D0D0; } .BCH5:hover { background-color: #D0D0D0; } .C6 { color: #BCBCBC; } .CH6:hover { color: #BCBCBC; } .BC6 { background-color: #BCBCBC; } .BCH6:hover { background-color: #BCBCBC; } .C7 { color: #868686; } .CH7:hover { color: #868686; } .BC7 { background-color: #868686; } .BCH7:hover { background-color: #868686; } .C8 { color: #444444; } .CH8:hover { color: #444444; } .BC8 { background-color: #444444; } .BCH8:hover { background-color: #444444; } .C9 { color: #1C1C1C; } .CH9:hover { color: #1C1C1C; } .BC9 { background-color: #1C1C1C; } .BCH9:hover { background-color: #1C1C1C; } .C10 { color: #FF232B; } .CH10:hover { color: #FF232B; } .BC10 { background-color: #FF232B; } .BCH10:hover { background-color: #FF232B; } .C11 { color: #F8DADB; } .CH11:hover { color: #F8DADB; } .BC11 { background-color: #F8DADB; } .BCH11:hover { background-color: #F8DADB; } .C12 { color: #CB1B21; } .CH12:hover { color: #CB1B21; } .BC12 { background-color: #CB1B21; } .BCH12:hover { background-color: #CB1B21; } .C13 { color: #363636; } .CH13:hover { color: #363636; } .BC13 { background-color: #363636; } .BCH13:hover { background-color: #363636; } .C14 { color: #555555; } .CH14:hover { color: #555555; } .BC14 { background-color: #555555; } .BCH14:hover { background-color: #555555; } .C23 { color: #3D893C; } .CH23:hover { color: #3D893C; } .BC23 { background-color: #3D893C; } .BCH23:hover { background-color: #3D893C; } .C24 { color: #7EA075; } .CH24:hover { color: #7EA075; } .BC24 { background-color: #7EA075; } .BCH24:hover { background-color: #7EA075; } .C25 { color: #AB4D2E; } .CH25:hover { color: #AB4D2E; } .BC25 { background-color: #AB4D2E; } .BCH25:hover { background-color: #AB4D2E; } .C26 { color: #B47A67; } .CH26:hover { color: #B47A67; } .BC26 { background-color: #B47A67; } .BCH26:hover { background-color: #B47A67; } .C27 { color: #000000; } .CH27:hover { color: #000000; } .BC27 { background-color: #000000; } .BCH27:hover { background-color: #000000; } .C28 { color: #F0DDC0; } .CH28:hover { color: #F0DDC0; } .BC28 { background-color: #F0DDC0; } .BCH28:hover { background-color: #F0DDC0; } .C29 { color: #EAD0A6; } .CH29:hover { color: #EAD0A6; } .BC29 { background-color: #EAD0A6; } .BCH29:hover { background-color: #EAD0A6; } .C30 { color: #F5F5F5; } .CH30:hover { color: #F5F5F5; } .BC30 { background-color: #F5F5F5; } .BCH30:hover { background-color: #F5F5F5; } .C31 { color: #805441; } .CH31:hover { color: #805441; } .BC31 { background-color: #805441; } .BCH31:hover { background-color: #805441; } .C32 { color: #654131; } .CH32:hover { color: #654131; } .BC32 { background-color: #654131; } .BCH32:hover { background-color: #654131; } .C33 { color: #CF9D6A; } .CH33:hover { color: #CF9D6A; } .BC33 { background-color: #CF9D6A; } .BCH33:hover { background-color: #CF9D6A; } .C34 { color: #F4E0B7; } .CH34:hover { color: #F4E0B7; } .BC34 { background-color: #F4E0B7; } .BCH34:hover { background-color: #F4E0B7; } .C35 { color: #F4E5C6; } .CH35:hover { color: #F4E5C6; } .BC35 { background-color: #F4E5C6; } .BCH35:hover { background-color: #F4E5C6; } .C36 { color: #8C5524; } .CH36:hover { color: #8C5524; } .BC36 { background-color: #8C5524; } .BCH36:hover { background-color: #8C5524; } /* italic */ .I1 { font-style: italic; } /* /Migration Class */ .parenthesize:before { content: '('; } .parenthesize:after { content: ')'; } .standard-btn, .standard-btn-light, .standard-btn-dark, .project-area .loginBook .screen.twoFactorMessage form button:not(#dummy), .project-area .loginBox .screen.twoFactorMessage form button:not(#dummy), .standard-btn-ghost { font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; text-align: center; line-height: 40px; cursor: pointer; } @media (min-width: 651px) { .standard-btn, .standard-btn-light, .standard-btn-dark, .project-area .loginBook .screen.twoFactorMessage form button:not(#dummy), .project-area .loginBox .screen.twoFactorMessage form button:not(#dummy), .standard-btn-ghost { width: 180px; } } .standard-btn-light { color: #444444; background-color: #F2F2F2; border: none; } .standard-btn-light:hover { background-color: #ECECEC; } .standard-btn-dark, .project-area .loginBook .screen.twoFactorMessage form button:not(#dummy), .project-area .loginBox .screen.twoFactorMessage form button:not(#dummy) { color: #FFFFFF; background-color: #444444; border: none; } .standard-btn-dark:hover, .project-area .loginBook .screen.twoFactorMessage form button:hover:not(#dummy), .project-area .loginBox .screen.twoFactorMessage form button:hover:not(#dummy) { background-color: #1C1C1C; } .standard-btn-ghost { color: #444444; background-color: #FFFFFF; border: 1px solid #444444; } .standard-btn-ghost:hover { color: #868686; } .standard-btn-ghost:hover { border-color: #868686; } .field.multiSelectField.fieldInvalid .pMSelect:not(.active) .topLine { border-color: #ff232b; } .field.multiSelectField .pMSelect { position: relative; } .field.multiSelectField .pMSelect.active .topLine { border-bottom: 1px solid #868686; } .field.multiSelectField .pMSelect.active .pMSelectPanel { display: block; } .field.multiSelectField .pMSelect .topLine { height: 40px; width: calc(100% - 40px); line-height: 40px; border: 1px solid #d0d0d0; padding: 3px 26px 3px 12px; position: relative; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .field.multiSelectField .pMSelect .topLine:after { position: absolute; width: 10px; height: 10px; background-image: url(resources/sprites/dashboard.svg?r=r149.1); background-position: 0px -180px; background-size: auto; right: 9px; top: 18px; } .field.multiSelectField .pMSelect .pMSelectPanel { position: absolute; width: calc(100% - 2px); height: auto; max-height: 200px; overflow: auto; border: 1px solid #868686; border-top: none; padding-top: 4px; display: none; background: white; z-index: 10000; } .field.multiSelectField .pMSelect .pMSelectPanel .checkbox { line-height: 32px; padding-left: 39px; position: relative; cursor: pointer; } .field.multiSelectField .pMSelect .pMSelectPanel .checkbox:before { position: absolute; background-image: url(resources/sprites/dashboard.svg?r=r149.1); background-position: -50px -420px; background-size: auto; width: 20px; height: 20px; top: 5px; left: 10px; } .field.multiSelectField .pMSelect .pMSelectPanel .checkbox:after { display: none; position: absolute; background-image: url(resources/sprites/dashboard.svg?r=r149.1); background-size: auto; width: 20px; height: 20px; top: 5px; left: 10px; background-position: -50px -630px; -ms-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); } .field.multiSelectField .pMSelect .pMSelectPanel .checkbox.active:after { display: block; } /*****************************************************************************/ /* icons */ /**************************************************************************/ .icon.close-icon-svg { background-position: -10px -770px; } .icon-ui-sprite-eb.crop-icon-svg { background-position: -395px 582px; } .icon-client-family.close-icon-svg { background-position: -40px -720px; } .icon-client-family.error-icon-svg { background-position: -160px -760px; } /*****************************************************************************/ /* icons families */ /**************************************************************************/ .icon-ui-sprite-eb, .icon-ui-sprite-eb:after, .icon-ui-sprite-eb:before { content: ""; position: relative; width: 40px; height: 40px; background-image: url(resources/sprites/uispriteb.png?r=r149.1); } .icon-client-family { position: relative; width: 40px; height: 40px; background-image: url(./resources/sprites/client.svg?r=r149.1); } html.project-area, .project-area body.store { width: 100%; height: 100%; margin: 0; padding: 0; text-size-adjust: none; } html.project-area.cart, .project-area body.store.cart { overflow: auto; } .project-area { /****************************************** general css ***********************/ /*.F4 {*/ /*font-family: 'pro-minion';*/ /*}*/ /* font size */ /* font uppercase */ /* font letter-spacing */ /* font weights */ /* colors */ /************ Selection Dialogs *****************/ /* new base */ /* gallery selection*/ /* saved design*/ /************************ pHelper tooltip *********************/ /********************** Tooltip *******************************/ /*************** Confirm Tooltip ***************/ /******************************************************************************/ /* * Watermarks 0: None 2: Bottom left corner 3: Bottom center 4: Bottom right corner 5: Center 6: Lower left 7: Lower right 8: Snap bottom right 9: Snap bottom left 10: Tiled ?: Footer */ /* /Watermarks */ /* * Download Preferences Dialog Box */ /* /Download Preferences */ /* * Download Tooltip & Msg */ /* /Download Tooltip & Msg */ /* * General */ /*****************************************************************************/ /* dialog-2 */ /******************************************************************************/ /*****************************************************************************/ /* dialog-2 */ /******************************************************************************/ /* * Collection Select */ /* /Collection Select */ } .project-area body, .project-area .bodyNoPanel { margin: 0; padding: 0; font-size: 20px; direction: ltr; font-family: 'PT Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .project-area.noScroll { overflow: hidden; } .project-area.noScroll--dialog { overflow: hidden; } .project-area.noScroll body { height: 100% !important; overflow: hidden !important; } .project-area a { color: inherit; font-style: inherit; font-weight: inherit; font-size: inherit; text-decoration: inherit; } .project-area a:not([class]), .project-area a:not([class]):visited.a:not([class]):hover, .project-area a:not([class]):link, .project-area a:not([class]):active { color: inherit; } .project-area a, .project-area a:visited.a:hover, .project-area a:link, .project-area a:active { text-decoration: none; } .project-area .nicescroll-rails > div { background-color: #bcbcbc !important; -webkit-transition: all 0.1s; } .project-area .nicescroll-rails:hover > div { width: 12px !important; } .project-area ::-webkit-scrollbar { width: 5px; height: 5px; } .project-area ::-webkit-scrollbar:hover { width: 12px !important; } .project-area ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #E0E0E0; } .project-area ::-webkit-scrollbar-thumb:hover { background-color: #D0D0D0; width: 12px !important; } .project-area * { scrollbar-width: thin; scrollbar-color: #e2e1e1 #ffffff; } .project-area .checkboxWrapper input[type="checkbox"] { display: none; } .project-area .checkboxWrapper .icon4Before { padding-left: 0; } .project-area .checkboxWrapper .icon4Before:before { position: relative; margin: 0; margin-right: 10px; } .project-area .checkboxWrapper .icon4Before.iconSmall:before { width: 20px; min-width: 20px; height: 20px; } .project-area .checkboxWrapper .checkbox { display: inline-flex; align-items: flex-start; } .project-area .checkboxWrapper .checkbox.icon4Before:before { background-position: 0 -1760px; } .project-area .checkboxWrapper .checkbox.icon4Before:hover:before { background-position: -20px -1760px; } .project-area .checkboxWrapper :checked ~ .checkbox.icon4Before:before { background-position: 0 -1780px; } .project-area .checkboxWrapper :checked ~ .checkbox.icon4Before:hover:before { background-position: -20px -1780px; } .project-area .checkboxWrapper .warning { color: #FF232B; margin-top: 8px; } .project-area .checkboxWrapper:not(.showWarning) .warning { display: none; } .project-area .pCurrencyWrapper { position: relative; display: inline-block; white-space: nowrap; } .project-area .pCurrencyLarge { position: absolute; top: 0; left: calc(100% + 6px); vertical-align: top; height: 100%; } .project-area .pCurrencyLarge sub { font-size: x-small; vertical-align: baseline; } .project-area .pCurrency { display: inline-block; } .project-area .pCurrency:hover { position: relative; } .project-area .pCurrency:hover:after { content: attr(data-name); position: absolute; top: calc(100% + 2px); left: -12px; background-color: rgba(28, 28, 28, 0.75); padding: 0 10px 0 10px; font-size: 11px; height: 26px; line-height: 26px; font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif; color: #fff; font-weight: 400; letter-spacing: 0.2px; z-index: 999999; } .project-area .pNarrow { font-family: 'PT Sans Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; } .project-area .pGotham { font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif; text-transform: uppercase; } .project-area .pXGotham { font-family: 'Gotham XNarrow SSm A', 'Gotham XNarrow SSm B', sans-serif; text-transform: uppercase; } .project-area .pUnGotham { font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif; text-transform: none; } .project-area .pGotham.pNoHover { text-transform: none; } .project-area .F1 { font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif; } .project-area .F2 { font-family: 'Gotham XNarrow SSm A', 'Gotham XNarrow SSm B', sans-serif; } .project-area .F3 { font-family: 'garamond-premier-pro-display', sans-serif; } .project-area .F4 { font-family: 'Crimson Text', serif; } .project-area .S0 { font-size: 10px; } .project-area .S1 { font-size: 11px; } .project-area .S2 { font-size: 12px; } .project-area .S3 { font-size: 13px; } .project-area .S4 { font-size: 16px; } .project-area .S5 { font-size: 20px; } .project-area .S6 { font-size: 26px; } .project-area .S7 { font-size: 34px; } .project-area .S8 { font-size: 18px; } .project-area .S9 { font-size: 14px; } .project-area .S10 { font-size: 22px; } .project-area .S11 { font-size: 30px; } .project-area .U1 { text-transform: none; } .project-area .U2 { text-transform: uppercase; } .project-area .L1 { letter-spacing: 0.2px; } .project-area .L2 { letter-spacing: 1px; } .project-area .L3 { letter-spacing: 1.5px; } .project-area .L5 { letter-spacing: 2px; } .project-area .L6 { letter-spacing: 3.5px; } .project-area .W1 { font-weight: 300; } .project-area .W2 { font-weight: 400; } .project-area .W3 { font-weight: 500; } .project-area .W4 { font-weight: 700; } .project-area .C0 { color: #F9F9F9; } .project-area .CH0:hover { color: #F9F9F9; } .project-area .BC0 { background-color: #F9F9F9; } .project-area .BCH0:hover { background-color: #F9F9F9; } .project-area .C1 { color: #FFFFFF; } .project-area .CH1:hover { color: #FFFFFF; } .project-area .BC1 { background-color: #FFFFFF; } .project-area .BCH1:hover { background-color: #FFFFFF; } .project-area .C2 { color: #F2F2F2; } .project-area .CH2:hover { color: #F2F2F2; } .project-area .BC2 { background-color: #F2F2F2; } .project-area .BCH2:hover { background-color: #F2F2F2; } .project-area .C3 { color: #ECECEC; } .project-area .CH3:hover { color: #ECECEC; } .project-area .BC3 { background-color: #ECECEC; } .project-area .BCH3:hover { background-color: #ECECEC; } .project-area .C4 { color: #E0E0E0; } .project-area .CH4:hover { color: #E0E0E0; } .project-area .BC4 { background-color: #E0E0E0; } .project-area .BCH4:hover { background-color: #E0E0E0; } .project-area .C5 { color: #D0D0D0; } .project-area .CH5:hover { color: #D0D0D0; } .project-area .BC5 { background-color: #D0D0D0; } .project-area .BCH5:hover { background-color: #D0D0D0; } .project-area .C6 { color: #BCBCBC; } .project-area .CH6:hover { color: #BCBCBC; } .project-area .BC6 { background-color: #BCBCBC; } .project-area .BCH6:hover { background-color: #BCBCBC; } .project-area .C7 { color: #868686; } .project-area .CH7:hover { color: #868686; } .project-area .BC7 { background-color: #868686; } .project-area .BCH7:hover { background-color: #868686; } .project-area .C8 { color: #444444; } .project-area .CH8:hover { color: #444444; } .project-area .BC8 { background-color: #444444; } .project-area .BCH8:hover { background-color: #444444; } .project-area .C9 { color: #1C1C1C; } .project-area .CH9:hover { color: #1C1C1C; } .project-area .BC9 { background-color: #1C1C1C; } .project-area .BCH9:hover { background-color: #1C1C1C; } .project-area .C10 { color: #FF232B; } .project-area .CH10:hover { color: #FF232B; } .project-area .BC10 { background-color: #FF232B; } .project-area .BCH10:hover { background-color: #FF232B; } .project-area .C11 { color: #F8DADB; } .project-area .CH11:hover { color: #F8DADB; } .project-area .BC11 { background-color: #F8DADB; } .project-area .BCH11:hover { background-color: #F8DADB; } .project-area .C12 { color: #CB1B21; } .project-area .CH12:hover { color: #CB1B21; } .project-area .BC12 { background-color: #CB1B21; } .project-area .BCH12:hover { background-color: #CB1B21; } .project-area .C25 { color: #AB4D2E; } .project-area .I1 { font-style: italic; } .project-area .icon, .project-area .iconBefore:before, .project-area .iconAfter:after { content: ""; position: relative; width: 40px; height: 40px; background-image: url(resources/sprites/dashboard.svg?r=r149.1); } .project-area .pictimeDialog .pnlDialogBox_Content_dark { min-width: 190px; min-height: 190px; background-color: rgba(255, 255, 255, 0.85); border: 1px solid #ddd; position: relative; color: #888; font-size: 16px; font-family: 'PT Sans', sans-serif; } .project-area .pnlDialogBox_Content_dark.loading .text { text-align: center; position: absolute; left: 0; right: 0; bottom: 35px; } .project-area .pnlDialogBox_Content_dark.loading img { position: absolute; left: 0; right: 0; margin: auto; bottom: 26px; top: 0; } .project-area .messagePage .header { position: absolute; top: 0; left: 0; right: 0; height: 80px; border-bottom: 1px solid #ddd; } .project-area .messagePage .header img { margin-left: 20px; margin-top: 5px; } .project-area .messagePage .title { color: #333; font-size: 24px; margin: auto; position: absolute; left: 0; top: 200px; right: 0; width: 350px; height: 40px; } .project-area .messagePage .msg { color: #888; height: 40px; font-size: 17px; margin: auto; position: absolute; left: 0; top: 280px; right: 0; width: 350px; font-family: 'PT Sans', sans-serif; line-height: 30px; } .project-area .textField { text-align: center; padding-top: 16px; padding-left: 26px; padding-bottom: 3px; padding-right: 27px; height: 50px; } .project-area .textField input { border: 1px solid #dddddd; width: 100%; height: 100%; font-size: 15px; padding-left: 15px; width: calc(100% - 15px); text-align: left; } .project-area .textField input:focus { outline: transparent; border: 1px solid #bbbbbb; } .project-area .pButton { display: inline-block; position: relative; text-align: center; outline: none; border: none; color: inherit; background-color: inherit; font-size: inherit; box-sizing: border-box; } .project-area .pButton:not(:disabled) { cursor: pointer; } .project-area .pButton > .text { margin-left: 10px; } .project-area .p#333333 .pButton:not(.pButtonNaked) { color: #FFFFFF; background-color: #333333; } .project-area .p#333333 .pButton:not(.pButtonNaked):hover { background-color: #888888; } .project-area .pGrayH, .project-area .pGray { color: #bbbbbb; } .project-area .pGrayH:hover { color: #aaaaaa; } .project-area .pWhite { color: #FFFFFF; } .project-area .p#333333H, .project-area .p#333333 { color: #333333; } .project-area .p#333333H:hover { color: #888888; } .project-area .pBlack { color: #333333; } .project-area .pBlackH:hover { color: #333333; } .project-area .pDarkGrayH, .project-area .pDarkGray { color: #aaaaaa; } .project-area .pDarkGrayH:hover { color: #888888; } .project-area .pGrayH, .project-area .pGray { color: #bbbbbb; } .project-area .pGrayH:hover { color: #aaaaaa; } .project-area .pLightGray { color: #e5e5e5; } .project-area .pRed { color: #FF232B; } .project-area .pGray .pButton:not(.pButtonNaked) { color: #333333; background-color: #dddddd; } .project-area .pGray .pButton:not(.pButtonNaked):hover { background-color: #aaaaaa; } .project-area .pWhite.pButton:not(.pButtonNaked) { background-color: white; } .project-area .pWhite.pButton:not(.pButtonNaked):not(:disabled) { color: #444444; border: 1px solid #444444; } .project-area .pWhite.pButton:not(.pButtonNaked):not(:disabled):hover { background-color: #444444; color: white; } .project-area .pWhite.pButton:not(.pButtonNaked):disabled { color: #BCBCBC; border: 1px solid #BCBCBC; } .project-area .pWhite .pButton:not(.pButtonNaked) { color: #333333; background-color: white; border: 1px solid #333333; } .project-area .pWhite .pButton:not(.pButtonNaked):hover { background-color: #333333; color: white; } .project-area .pButtonLarge { width: 200px; height: 50px; line-height: 50px; vertical-align: middle; font-size: 15px; font-weight: 400; } .project-area .pButtonAuto { width: 100%; } .project-area .pButtonSmall { padding: 0 25px; height: 40px; line-height: 40px; vertical-align: middle; font-size: 15px; font-weight: 400; } .project-area .pButtonExtraSmall { width: 132px; height: 36px; line-height: 37px; vertical-align: middle; font-size: 14px; font-weight: 400; } .project-area .pButtonStandard { width: 250px; height: 40px; background-color: #f2f2f2; display: flex; align-items: center; justify-content: center; cursor: pointer; } .project-area .pButtonStandard:hover { background-color: #ececec; } .project-area .pButtonInRow { display: inline-block; margin: 5px; } .project-area .pButtonSmall.pButtonNaked { font-size: 13px; line-height: 40px; vertical-align: middle; } .project-area .pButtonLarge.pButtonNaked { line-height: 40px; vertical-align: middle; } .project-area .pButtonNaked { padding: 0 5px; } .project-area .pButtonLink { text-decoration: underline; } .project-area .pButton.selecting:after { content: ' '; position: absolute; right: 5px; top: 10px; width: 20px; height: 20px; background-image: url(resources/sprites/phtsprite.png?r=r149.1); background-position: 0 -180px; } .project-area .pTopPanel .pButton { margin: 0 10px; } .project-area .pTopPanel .pButton.p#333333 { margin: 0 5px; } .project-area .pTopPanel .fwButtons { position: absolute; top: 0; right: 30px; line-height: 70px; } .project-area .validationError { color: #FF232B; font-size: 11px; padding-top: 4px; text-align: left; line-height: 16px; margin-bottom: 10px; } .project-area .fieldInvalid.fieldInvalid input { border: 1px solid #FF232B; } .project-area .dialog { display: block; z-index: 10002; position: absolute; background-color: white; color: #333333; } .project-area .dialogCloseIcon { position: fixed; right: 24px; top: 18px; width: 40px; height: 40px; cursor: pointer; background-image: url(./resources/sprites/client.svg?r=r149.1); background-repeat: no-repeat; background-position: -40px -720px; } .project-area .dialogClose:hover .dialogCloseIcon { background-position: -80px -720px; color: #000000; } .project-area .dialogContent { width: 100%; height: 100%; position: relative; } .project-area .dialogContent > .title { height: 80px; line-height: 105px; border-bottom: 1px solid #e5e5e5; padding-left: 24px; padding-right: 24px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .project-area .dialogOverlay, .project-area .pictimeDialog.flexPosition { background-color: rgba(188, 188, 188, 0.9); z-index: 9999; } .project-area .dialogOverlay.requireActivation, .project-area .pictimeDialog.flexPosition.requireActivation { background-color: rgba(28, 28, 28, 0.65); } .project-area .icon4 { background-image: url("./resources/sprites/client.svg?r=r149.1"); background-repeat: no-repeat; width: 40px; height: 40px; display: block; } .project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label, .project-area .userlogin .userloginInner .screens .screen .selectField, .project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label, .project-area .userlogin .userloginInner .screens .screen .selectField, .project-area .icon4Before, .project-area .icon4After { position: relative; } .project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label:before, .project-area .userlogin .userloginInner .screens .screen .selectField:after, .project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label:before, .project-area .userlogin .userloginInner .screens .screen .selectField:after, .project-area .icon4Before:before, .project-area .icon4After:after { content: ''; display: block; background-image: url("./resources/sprites/client.svg?r=r149.1"); background-repeat: no-repeat; position: absolute; top: 0; bottom: 0; margin: auto 0; height: 100%; width: 40px; height: 40px; } .project-area .icon4Before:before { left: 0; } .project-area .icon4After:after { right: 0; } .project-area .icon4Before { position: relative; padding-left: 40px; } .project-area .vAlignWrapper:before { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; } .project-area .vAlignContainer { display: inline-block; vertical-align: middle; } .project-area .gallerySelection .formPanel { overflow: auto; position: absolute; bottom: 0; top: 81px; } .project-area .gallerySelection .thumbPanel { position: absolute; top: 81px; bottom: 0; right: 0; left: 300px; border-left: 1px solid #dddddd; } .project-area .gallerySelection .thumbPanel.done .selectionAddLikes, .project-area .gallerySelection .thumbPanel.done .selectionAddScenes, .project-area .gallerySelection .thumbPanel.done .selectionDiscard, .project-area .gallerySelection .thumbPanel.done .selectionAll { pointer-events: none; } .project-area .gallerySelection .thumbPanel.done:after { background-color: #FFFFFF; content: ''; opacity: 0.7; pointer-events: none; } .project-area .gallerySelection .thumbPanel.loading, .project-area .gallerySelection .thumbPanel.done li { pointer-events: none; } .project-area .gallerySelection .thumbPanel.loading, .project-area .gallerySelection .thumbPanel.done .selectionAddLikes { pointer-events: none; } .project-area .gallerySelection .thumbPanel.loading, .project-area .gallerySelection .thumbPanel.done .selectionDiscard { pointer-events: none; } .project-area .gallerySelection .thumbPanel .selectionButtons { z-index: 1; position: relative; height: 40px; font-size: 13px; font-weight: 300; color: #aaaaaa; border-bottom: 1px solid #dddddd; padding-left: 5px; text-align: left; } .project-area .gallerySelection .thumbPanel .selectionButtons > a, .project-area .gallerySelection .thumbPanel .selectionButtons > span { cursor: pointer; } .project-area .gallerySelection .thumbPanel .selectionButtons > a:not(.largeSize):not(.normalSize), .project-area .gallerySelection .thumbPanel .selectionButtons > span:not(.largeSize):not(.normalSize) { padding-right: 20px; line-height: 40px; position: relative; } .project-area .gallerySelection .thumbPanel .selectionButtons > a:not(.largeSize):not(.normalSize) .optionsPanel, .project-area .gallerySelection .thumbPanel .selectionButtons > span:not(.largeSize):not(.normalSize) .optionsPanel { left: 50%; right: unset; transform: translateX(-50%); } .project-area .gallerySelection .thumbPanel .selectionButtons > a:hover, .project-area .gallerySelection .thumbPanel .selectionButtons > span:hover { color: #333333; } .project-area .gallerySelection .thumbPanel .selectionButtons .normalSize { background-position: -40px -520px; height: 40px; width: 40px; position: absolute; right: 40px; top: 0; } .project-area .gallerySelection .thumbPanel .selectionButtons .normalSize:hover { background-position: -120px -520px; } .project-area .gallerySelection .thumbPanel .selectionButtons .largeSize { background-position: -40px -560px; height: 40px; width: 40px; position: absolute; right: 10px; top: 0; } .project-area .gallerySelection .thumbPanel .selectionButtons .largeSize:hover { background-position: -120px -560px; } .project-area .gallerySelection .thumbPanel .selectionAddLikes:before, .project-area .gallerySelection .thumbPanel .selectionAddScenes:before { background-position: -40px -240px; height: 40px; width: 40px; margin-top: -11px; } .project-area .gallerySelection .thumbPanel .selectionAddScenes:before { background-position: -40px -200px; } .project-area .gallerySelection .thumbPanel .selectionAddLikes:hover:before { background-position: -120px -240px; } .project-area .gallerySelection .thumbPanel .selectionAddScenes:hover:before { background-position: -120px -200px; } .project-area .gallerySelection .thumbPanel .selectionAll:before { background-position: -40px -962px; height: 40px; width: 40px; margin-top: -11px; } .project-area .gallerySelection .thumbPanel .selectionAll:hover:before { background-position: -120px -962px; } .project-area .gallerySelection .thumbPanel .selectionDiscard:before { background-position: -40px -480px; height: 40px; width: 40px; margin-top: -11px; } .project-area .gallerySelection .thumbPanel .selectionDiscard:hover:before { background-position: -120px -480px; } .project-area .gallerySelection .thumbPanel .selectPhotos { position: absolute; top: 52px; bottom: 10px; left: 10px; right: 10px; } .project-area .gallerySelection .thumbPanel .noLikesMsg { padding: 22px; color: #aaa; } .project-area .gallerySelection .thumbPanel .noLikesMsg.hide { display: none; } .project-area .gallerySelection .selectPhotos .pnlLeft .photoList { padding: 0; } .project-area .gallerySelection .thumbPanel .helpPanel { padding-left: 10px; overflow: hidden; } .project-area .gallerySelection .thumbPanel .longText { width: 300px; } .project-area .gallerySelection .thumbPanel .addPhotoPanel .longText { width: auto; } .project-area .gallerySelection .thumbPanel .helpPanel .titleHeader { padding-bottom: 10px; } .project-area .gallerySelection .thumbPanel .helpPanel .buttons { display: block; width: 100%; text-align: left; padding: 0; padding-top: 15px; } .project-area .gallerySelection .thumbPanel .helpPanel p { line-height: 8px; } .project-area .gallerySelection .thumbPanel .helpPanel .buttons > .pButton { margin-right: 10px; box-sizing: border-box; } .project-area .gallerySelection .thumbPanel .helpPanel.addPhotoPanel .buttons { margin-top: 22px; } .project-area .gallerySelection .thumbPanel .helpPanel .buttons .cancelButton { margin-left: 10px; } .project-area body.hideEmailOpt .emailConsent { display: none; } .project-area body.store .login .loginCnt, .project-area body.gallery .login .loginCnt { overflow-y: hidden; overflow-x: hidden; height: 620px; } .project-area body.store .login .loginCnt .logo, .project-area body.gallery .login .loginCnt .logo { display: none; } .project-area .pnlCompositionBoxZoom_qualityMessage:before { position: absolute; right: 0; top: 10px; content: ' '; height: 30px; width: 30px; background-image: url(resources/sprites/uispriteb.png?r=r149.1); background-position: -125px -630px; } .project-area .pnlCompositionBoxZoom_qualityMessage:after { content: ' '; position: absolute; right: -5px; top: 10px; width: 0px; height: 0px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .project-area .pnlCompositionBoxZoom_qualityMessage { position: absolute; top: 35px; padding: 5px 5px 5px 5px; padding-right: 35px; height: 80px; width: 120px; font-size: 13px; font-weight: 400; color: #aaaaaa; text-align: left; background: white; border: 1px solid #bbbbbb; } .project-area .pTooltip.menu.savedDesignTip > .optionsPanel > .optionsPanelInner { overflow: visible; width: auto; min-height: 212px; max-width: 1220px; } .project-area .pTooltip.menu.savedDesignTip:not(.albumSelectionOption) > .optionsPanel > .optionsPanelInner { min-width: 200px; max-width: 1220px; } .project-area .pTooltip.menu.savedDesignTip.empty > .optionsPanel > .optionsPanelInner { min-height: 80px; } .project-area .pTooltip.menu.savedDesignTip > .optionsPanel { right: -40px; top: 54px; min-width: 100px; } .project-area .pTooltip.menu.savedDesignTip:not(.notip) > .optionsPanel:after { right: 85px; } @media (max-width: 1300px) { .project-area .pTooltip.menu.savedDesignTip:not(.albumSelectionOption) > .optionsPanel > .optionsPanelInner { max-width: 824px; } } .project-area .savedDesignTip .tooltipTitle { padding-right: 50px; } .project-area .savedDesignTip .outerProgress { -webkit-box-shadow: none; border: 1px solid #e5e5e5; margin-bottom: 80px; } .project-area .savedDesignTip .outerProgress.editing { margin-left: 30px; -webkit-box-shadow: inset 0px 0px 1px 4px #e5e5e5; } .project-area .savedDesignTip .outerProgress.editing.done.continueSelect:hover:after { background-color: #333333; color: white; } .project-area .savedDesignTip .outerProgress.editing.done { -webkit-box-shadow: none; } .project-area .outerProgress { text-align: center; margin: 0 auto; position: relative; } .project-area .outerProgress .text { z-index: 11; } .project-area .outerProgress .text__wrap { position: absolute; top: 0; left: 0; right: 0; } .project-area .outerProgress .textCenter { z-index: 11; } .project-area .outerProgress.normal:before, .project-area .outerProgress.big:before { content: ''; display: block; border-radius: 50%; position: relative; z-index: 10; box-shadow: inset 0px 0px 1px 4px #e5e5e5; top: 0; left: 0; } .project-area .outerProgress:hover.normal .mask { border: 1px solid #e5e5e5; opacity: 1; background-color: rgba(221, 221, 221, 0); display: block; } .project-area .outerProgress.normal:before { width: 100px; height: 100px; } .project-area .outerProgress.big:before { width: 180px; height: 180px; } .project-area .outerProgress.sent:before { background-color: #dddddd; -webkit-box-shadow: none; } .project-area .outerProgress.sent:hover { color: white !important; } .project-area .outerProgress.sent .pProgressWrapper .pProgressCircle { border-color: #dddddd; } .project-area .outerProgress.sent .text { color: white; } .project-area .outerProgress.sent .textCenter { color: white; position: absolute; left: 0; right: 0; } .project-area .outerProgress.floating { float: right; margin-left: 30px; margin-bottom: 60px; } .project-area .savedDesignTip .outerProgress .mask { background-color: #dddddd; width: 100%; height: 100px; border-radius: 50%; opacity: 0.2; z-index: 0; position: absolute; top: 0; left: 0; } .project-area .savedDesignTip .outerProgress:hover > .mask { display: none; } .project-area .optionsPanelInner .donePanel, .project-area .selectionsPanel { float: none; display: inline; } .project-area .savedDesignTip.empty .contentPanel { height: 30px; } .project-area .savedDesignTip .delete { pointer-events: all; } .project-area .savedDesignTip .delete.exitEdit { right: 10px !important; left: auto !important; top: 25px !important; } .project-area .savedDesignTip .delete.icon4 { cursor: pointer; background-position: 0px -60px; position: absolute; right: 20px; margin: auto; width: 20px; height: 20px; } .project-area .savedDesignTip .delete.icon4:hover { background-position: -20px -60px; } .project-area .savedDesignTip > .optionsPanel > .optionsPanelInner { padding-top: 0 !important; width: 360px !important; min-width: unset !important; } .project-area .savedDesignTip > .optionsPanel > .optionsPanelInner .donePanel { display: block; max-height: 80vh; overflow: auto; } .project-area .savedDesignTip__item { display: flex; cursor: pointer; align-items: center; height: 70px; position: relative; padding-left: 16px; padding-right: 16px; } .project-area .savedDesignTip__item:hover { background-color: #F9F9F9; } .project-area .savedDesignTip__item .imageCenter { min-width: 60px; width: 60px; height: 60px; margin-right: 16px; } .project-area .savedDesignTip__item .imageCenter img { display: block; max-width: 100%; max-height: 100%; } .project-area .savedDesignTip__item .label { padding-right: 50px; } .project-area .savedDesignTip__item.disabled { pointer-events: none; opacity: 0.4; } .project-area .savedDesignTip .contentPanel.savedJobs { margin-top: 16px; margin-bottom: 16px; padding: 0; } .project-area .savedDesignTip .contentPanel.savedJobs .noSavedDesign { width: 230px; display: none; text-align: right; } .project-area .savedDesignTip .contentPanel.savedJobs .newSavedDesign { white-space: nowrap; } .project-area .savedDesignTip .contentPanel.savedJobs .outerProgress.disabled { opacity: 0.4; } .project-area .savedDesignTip .contentPanel.savedJobs.expand { height: 200px; } .project-area .savedDesignTip .contentPanel.savedJobs.expand .delete { top: 230px; } .project-area .pHelperBtn { position: relative; width: 20px; height: 20px; background-position: -475px -720px; cursor: pointer; text-align: left; margin-left: 3px; align-items: center; } .project-area .pHelperBtn:hover { background-position: -475px -780px; } .project-area .pHelper { display: flex; } .project-area .pHelper .pSprite { background-image: url(resources/sprites/dashboard.svg?r=r149.1); } .project-area .pHelper .pTooltip.menu > .optionsPanel > .optionsPanelInner { padding: 40px; background-color: #f2f2f2; top: 20px; position: relative; } .project-area body .accountTip.pTooltip.menu .options { padding: 15px 0; } .project-area body .accountTip.pTooltip.menu .options .innerOption { position: relative; height: initial; line-height: initial; font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif; font-size: 13px; color: #D0D0D0; font-weight: 400; letter-spacing: 0.2px; text-transform: none; cursor: default; padding: 10px 25px; } .project-area body .accountTip.pTooltip.menu .options .innerOption.name { font-size: 12px; color: #BCBCBC; } .project-area body .accountTip.pTooltip.menu .options .innerOption:not(.disabled):not(.name) { color: #444444; cursor: pointer; } .project-area body .accountTip.pTooltip.menu .options .innerOption:not(.disabled):not(.name):hover { color: #868686; } .project-area .pTooltip.menu .innerOption:not(.pButton) { height: 40px; line-height: 40px; } .project-area .pTooltip.menu .option:not(.pButton) { display: block; cursor: pointer; width: 100%; white-space: nowrap; padding: 20px 25px 3px; height: 49px; vertical-align: top; line-height: 50px; } .project-area .pTooltip.menu .option:not(.pButton):focus { outline: 0; } .project-area .pTooltip.menu .innerOption { box-sizing: border-box; } .project-area .pTooltip.menu .innerOption:last-child { padding-bottom: 25px; height: auto; } .project-area .pTooltip.menu:not(.accountTip) .innerOption:first-child { padding-top: 14px; border-top: 1px solid #dddddd; } .project-area .pTooltip.menu .option.thick:not(.pButton) { height: 69px; line-height: 70px; } .project-area .pTooltip.menu .option.border:not(.pButton):not(:first-child) { border-top: 1px solid #dddddd; } .project-area .pTooltip.menu .option:hover { color: #333333; } .project-area .pTooltip.menu.visible > .clicking, .project-area .pTooltip.menu.visible > .trigger { display: block; } .project-area .pTooltip.menu.visible1 > .clicking { display: block; } .project-area .pTooltip.menu:hover > .hovering { display: block; } .project-area .pTooltip.menu.noOptions { display: none !important; } .project-area .accountTip.pTooltip.menu > .optionsPanel > .optionsPanelInner .option.name { white-space: normal; height: auto; padding-bottom: 20px; } .project-area .accountTip.pTooltip.menu > .optionsPanel > .optionsPanelInner .loading.icon { position: absolute; height: 100%; width: 100%; background-color: white; background-image: url(resources/sprites/loadingb.svg?r=r149.1); background-position: center; background-repeat: no-repeat; z-index: 1; } .project-area .pTooltip.menu > .optionsPanel > .optionsPanelInner { width: 100%; margin-top: 0; background-color: white; border: 1px solid #E0E0E0; padding: 36px 0; padding-bottom: 0; overflow: hidden; box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.1); } .project-area .accountTip.pTooltip.menu > .optionsPanel > .optionsPanelInner { padding: 0; } .project-area .pTooltip.menu > .optionsPanel { --arrow-offset: 0px; top: 100%; margin-top: 10px; display: none; position: absolute; right: 50%; transform: translateX(50%); min-width: 180px; z-index: 1000; text-align: left; cursor: default; } .project-area .pTooltip.menu:not(.notip):not(.pHelperBtn) > .optionsPanel:after { content: ' '; position: absolute; top: -19px; right: 50%; right: calc(50% - var(--arrow-offset)); width: 20px; height: 20px; background-position: 0 -80px; z-index: 1000; } .project-area .pTooltip.menu.confirm > .optionsPanel { top: 13px; right: 0; min-width: 155px; width: 250px; } .project-area .pTooltip.menu.confirm .optionsPanel:after { right: -1px; } .project-area .pTooltip.menu.confirm > .optionsPanel > .optionsPanelInner { padding: 25px; line-height: 20px; width: calc(100% - 50px); } .project-area .pTooltip.menu.confirm > .optionsPanel > .optionsPanelInner .title { text-align: left; margin-bottom: 25px; } .project-area .pTooltip.menu.confirm > .optionsPanel > .optionsPanelInner .confirmButton { margin-right: 10px; } .project-area body.account .pnlHeader, .project-area body.store .pnlHeader { position: fixed; } .project-area .pnlHeader { display: flex; justify-content: space-between; top: 0; left: 0; width: 100%; z-index: 4; height: 80px; background-color: white; position: relative; } .project-area .pnlStoreBodyCatalogForm .textBanners, .project-area .pnlHeader .textBanners { top: 100%; position: absolute; width: 100%; height: 100%; } .project-area .pnlHeader.filtering { margin-bottom: 40px; } .project-area .pnlHeader .textBanners { font-family: "Crimson Text", serif; font-size: 20px; letter-spacing: 1px; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.04), 0 3px 6px 0 rgba(0, 0, 0, 0.1); } .project-area .pnlHeader .textBanners .pnlBannerPromotion_Item.txtbanner_opt1 { background-color: #f3ede8; } .project-area .pnlHeader .textBanners:hover .pnlBannerPromotion_Item.txtbanner_opt1 { background-color: #e9e0da; } .project-area .pnlHeader .textBanners .pnlBannerPromotion_Item.txtbanner_opt2 { background-color: #eef1ed; } .project-area .pnlHeader .textBanners:hover .pnlBannerPromotion_Item.txtbanner_opt2 { background-color: #d8ddd7; } .project-area .pnlHeader .textBanners .pnlBannerPromotion_Item.txtbanner_opt3 { background-color: #A36B59; } .project-area .pnlHeader .textBanners:hover .pnlBannerPromotion_Item.txtbanner_opt3 { background-color: #8C5D4D; } .project-area .pnlHeader .textBanners .pnlBannerPromotion_Item.txtbanner_opt4 { background-color: #4A5448; } .project-area .pnlHeader .textBanners:hover .pnlBannerPromotion_Item.txtbanner_opt4 { background-color: #363E35; } .project-area .pnlHeader .textBanners .pnlBannerPromotion_Item.txtbanner_opt5 { background-color: #2A3C4F; } .project-area .pnlHeader .textBanners:hover .pnlBannerPromotion_Item.txtbanner_opt5 { background-color: #212F3E; } .project-area .pnlHeader .textBanners .pnlBannerPromotion_Item.txtbanner_opt6 { background-color: #DBBAAE; } .project-area .pnlHeader .textBanners:hover .pnlBannerPromotion_Item.txtbanner_opt6 { background-color: #CDAEA2; } .project-area .pnlStoreBodyCatalogForm .textBanners { height: 80px; } .project-area body.selectDesignedProduct .scrollingFloatRight li[id="account_li"], .project-area body.selectDesignedProduct .scrollingFloatRight li.vertical_line, .project-area body.selectDesignedProduct .scrollingFloatRight li[id="cart_li"] { display: none; } .project-area .pnlBannerPromotionInnerBox, .project-area .pnlMainPromotionInnerBox { display: block; overflow: hidden; width: 100%; height: 100%; } .project-area .pnlBannerPromotionInnerBox:hover, .project-area .pnlMainPromotionInnerBox:hover { cursor: pointer; } .project-area .pnlBannerPromotionBoxPhotos, .project-area .pnlMainPromotionBoxPhotos { margin: 0; width: 4200%; height: 100%; padding: 0; } .project-area .pnlHeader .textBanners .pnlBannerPromotion_Item { width: 2.38095%; } .project-area .pnlBannerPromotion_Item, .project-area .pnlStoreCatalogMainPromotion_Item { background-size: cover; height: auto; margin-left: 0; padding: 0; float: left; overflow: hidden; } .project-area .pnlBannerPromotion_Item { display: flex; justify-content: center; align-items: center; height: 100%; color: #444; padding: 0 100px; box-sizing: border-box; } .project-area .pnlBannerPromotion_Item.dark { color: #fff; } .project-area .pnlBannerPromotion_Item.dark .tear.icon4 { background-position: -470px -800px; } .project-area .pnlBannerPromotion_Item .tear.icon4 { width: 20px; margin: 0 45px; height: 100%; background-position: -470px -880px; } .project-area .pnlBannerPromotion_Item .text2 { position: relative; top: 3px; left: -10px; padding: 10px; } .project-area .pnlBannerPromotion_Item:after, .project-area .pnlStoreCatalogMainPromotion_Item:after { content: ""; display: block; width: 0; height: 0; padding-top: calc( 400% / 17); } .project-area body.store .pnlHeader { z-index: 9999; } .project-area .pnlHeader:after { content: ''; width: 100%; height: 1px; background: #dddddd; left: 0; position: absolute; bottom: -1px; /*z-index: 10;*/ pointer-events: none; } .project-area .pnlHeader > * { order: 2; } .project-area .pnlHeader:not(.accountNav) #navigationMenu { order: 1; } .project-area .TILE_SIZE { height: 225px; width: 300px; padding: 40px 0; } .project-area .hideWhatsNext .whatsNext { display: none; } .project-area .hideWhatsNext .whatsNextProductBanners { display: none; } .project-area .fullscreenDialog .block.Image .watermark, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark, .project-area .photostream2 .block.Image .watermark, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark, .project-area.clonedImage.animating .watermark { position: absolute; bottom: 0; top: auto; left: auto; z-index: 1; min-width: 45px; min-height: 21px; background-size: contain; background-position: center; background-repeat: no-repeat; } .project-area .fullscreenDialog .block.Image .watermark.watermark0, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark0, .project-area .photostream2 .block.Image .watermark.watermark0, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark0, .project-area.clonedImage.animating .watermark.watermark0 { display: none; } .project-area .fullscreenDialog .block.Image .watermark.watermark2, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark2, .project-area .photostream2 .block.Image .watermark.watermark2, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark2, .project-area.clonedImage.animating .watermark.watermark2 { background-position: bottom left; } .project-area .fullscreenDialog .block.Image .watermark.watermark3, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark3, .project-area .photostream2 .block.Image .watermark.watermark3, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark3, .project-area.clonedImage.animating .watermark.watermark3 { left: 0; right: 0; margin: 0 auto; background-position: bottom; } .project-area .fullscreenDialog .block.Image .watermark.watermark4, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark4, .project-area .photostream2 .block.Image .watermark.watermark4, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark4, .project-area.clonedImage.animating .watermark.watermark4 { background-position: bottom right; } .project-area .fullscreenDialog .block.Image .watermark.watermark5, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark5, .project-area .photostream2 .block.Image .watermark.watermark5, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark5, .project-area.clonedImage.animating .watermark.watermark5 { left: 0; right: 0; top: 0; bottom: 0; margin: auto auto; } .project-area .fullscreenDialog .block.Image .watermark.watermark6, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark6, .project-area .photostream2 .block.Image .watermark.watermark6, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark6, .project-area.clonedImage.animating .watermark.watermark6 { background-position: bottom left; } .project-area .fullscreenDialog .block.Image .watermark.watermark7, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark7, .project-area .photostream2 .block.Image .watermark.watermark7, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark7, .project-area.clonedImage.animating .watermark.watermark7 { background-position: bottom right; } .project-area .fullscreenDialog .block.Image .watermark.watermark8, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark8, .project-area .photostream2 .block.Image .watermark.watermark8, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark8, .project-area.clonedImage.animating .watermark.watermark8 { right: 0; bottom: 0; background-position: bottom right; } .project-area .fullscreenDialog .block.Image .watermark.watermark9, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark9, .project-area .photostream2 .block.Image .watermark.watermark9, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark9, .project-area.clonedImage.animating .watermark.watermark9 { left: 0; bottom: 0; background-position: bottom left; } .project-area .fullscreenDialog .block.Image .watermark.watermark10, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark10, .project-area .photostream2 .block.Image .watermark.watermark10, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark10, .project-area.clonedImage.animating .watermark.watermark10 { left: 0; top: 0; width: 100% !important; height: 100% !important; background-repeat: repeat; background-size: 6vw; background-position: 0 0; } .project-area .fullscreenDialog .block.Image .watermark.watermark10.size1, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark10.size1, .project-area .photostream2 .block.Image .watermark.watermark10.size1, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark10.size1, .project-area.clonedImage.animating .watermark.watermark10.size1 { background-size: 10vw; } .project-area .fullscreenDialog .block.Image .watermark.watermark10.size2, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark10.size2, .project-area .photostream2 .block.Image .watermark.watermark10.size2, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark10.size2, .project-area.clonedImage.animating .watermark.watermark10.size2 { background-size: 14.4vw; } .project-area .fullscreenDialog .block.Image .watermark.watermark10.size3, .project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark10.size3, .project-area .photostream2 .block.Image .watermark.watermark10.size3, .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark10.size3, .project-area.clonedImage.animating .watermark.watermark10.size3 { background-size: 70%; } .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.size0 { width: 12%; height: 5.6%; } .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.size0.watermark10 { background-size: 12%; } .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.size1 { width: 20%; height: 9.33%; } .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.size1.watermark10 { background-size: 20%; } .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.size2 { width: 30%; height: 14%; } .project-area .pnlCompositionCropBox:not(.emptybox) .watermark.size2.watermark10 { background-size: 30%; } .project-area .fullscreenDialog .block.Image .watermark.size0 { width: 10vw; height: 8.3vw; } .project-area .fullscreenDialog .block.Image .watermark.size0.watermark10 { background-size: 10vw; } .project-area .fullscreenDialog .block.Image .watermark.size1 { width: 14.4vw; height: 12vw; } .project-area .fullscreenDialog .block.Image .watermark.size1.watermark10 { background-size: 14.4vw; } .project-area .fullscreenDialog .block.Image .watermark.size2 { width: 24vw; height: 20vw; } .project-area .fullscreenDialog .block.Image .watermark.size2.watermark10 { background-size: 24vw; } .project-area #downloadPrefs .content, .project-area #downloadPrefs .strip, .project-area #downloadPrefs .strip > span { margin: 0; padding: 0; } .project-area #downloadPrefs .window { width: 500px; overflow: initial; } .project-area #downloadPrefs .strip > span { position: relative; width: 418px; } .project-area #downloadPrefs .releaseform, .project-area #downloadPrefs .termsWrapper { text-align: start; } .project-area #downloadPrefs .releaseform { letter-spacing: 0.2px; } .project-area #downloadPrefs .releaseform a { text-decoration: underline; } .project-area #downloadPrefs .releaseform a:hover { color: #BCBCBC; } .project-area #downloadPrefs .downloadRes { margin: 60px 0 40px; } .project-area #downloadPrefs .downloadTo { margin: 50px 0 60px; } .project-area #downloadPrefs .downloadTo .downloadBtnsWrap .pButtonStandard.active { background-color: #ECECEC; } .project-area #downloadPrefs .downloadTo .downloadBtnsWrap .pButtonStandard.active:hover { background-color: #E0E0E0; } .project-area #downloadPrefs .downloadTo .downloadBtnsWrap .pButtonStandard:hover { background-color: #F9F9F9; } .project-area #downloadPrefs .downloadContinue { margin: 40px 0; } .project-area #downloadPrefs .releaseform + .termsWrapper { margin-top: 24px; } .project-area #downloadPrefs .downloadTitle { margin: 15px; } .project-area #downloadPrefs .downloadTitle.L05 { letter-spacing: 0.5px; } .project-area #downloadPrefs .downloadTitle.pHelper { justify-content: center; } .project-area #downloadPrefs .downloadTitle.pHelper .pHelperBtn { margin: auto 3px; } .project-area #downloadPrefs .downloadTitle.pHelper .pHelperBtn .optionsPanel { margin-right: -160px; margin-top: -110px; } .project-area #downloadPrefs .downloadTitle.pHelper .pHelperBtn .optionsPanel .optionsPanelInner { text-transform: none; box-sizing: content-box; width: 240px; letter-spacing: 1px; line-height: 19px; } .project-area #downloadPrefs .downloadTitle.pHelper .pHelperBtn .optionsPanel .optionsPanelInner .productDescription { font-size: 13px; letter-spacing: 0.2px; margin: 16px 0; } .project-area #downloadPrefs .downloadTitle.pHelper .pHelperBtn .optionsPanel .optionsPanelInner .productDescription dt:after { content: ':'; } .project-area #downloadPrefs .downloadTitle.pHelper .pHelperBtn .optionsPanel .optionsPanelInner .productDescription dd { margin: 0; } .project-area #downloadPrefs .downloadRes .downloadTitle { font-weight: 500; letter-spacing: 1px; } .project-area #downloadPrefs .downloadRes .limitedDownloads { margin-top: 10px; } .project-area #downloadPrefs .downloadRes.noResBtns .downloadTitle { font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; } .project-area #downloadPrefs .downloadRes.noResBtns .downloadBtnsWrap { display: none; } .project-area #downloadPrefs .downloadBtnsWrap { display: flex; width: 100%; } .project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard { width: auto; flex-grow: 1; flex-basis: 0; height: 50px; padding: 0; color: #868686; background-color: #FFFFFF; box-shadow: 0px 0px 0px 1px #ECECEC; } .project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard:hover { color: #444444; background-color: #F9F9F9; } .project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard.active { color: #444444; background-color: #ECECEC; } .project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard.active:hover { background-color: #E0E0E0; } .project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard.active.icon4Before:before { position: static; margin: 0 -3px 0 -10px; background-position: -240px -1040px; } .project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard[data-type="continue"] { color: #fff; background-color: #444444; } .project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard[data-type="continue"]:hover { background-color: #1C1C1C; } .project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard[data-type="continue"].icon4Before:before { position: static; margin: 0 -3px 0 -10px; background-position: -240px -1040px; } .project-area #downloadPrefs:not(.hasBuyBtn) [data-type="buy"] { display: none; } .project-area #downloadPrefs:not(.hasDlHighResBtn) [data-type="highres"] { display: none; } .project-area #downloadPrefs:not(.hasDlLowResBtn) [data-type="lowres"] { display: none; } .project-area #downloadPrefs:not(.hasExternal) .downloadTo { display: none; } .project-area #galleryHeader .pTooltip.menu.downloadTip > .optionsPanel > .optionsPanelInner, .project-area #galleryHeader .pTooltip.menu.downloadMsg > .optionsPanel > .optionsPanelInner { min-width: auto; padding: 0; } .project-area #galleryHeader .pTooltip.menu.downloadTip > .optionsPanel > .optionsPanelInner { min-width: auto; } .project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel { height: auto; width: 270px; margin: 30px; padding: 0; } .project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel .pButtonStandard { width: 100%; margin: 21px 0; position: relative; } .project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel .pButtonStandard .notification { position: absolute; margin: auto; top: 0; bottom: 0; right: 30px; width: auto; height: 15px; padding-left: 4px; padding-right: 4px; background-color: #333333; border-radius: 10px; color: white; font-size: 11px; z-index: 1; cursor: pointer; } .project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel .desc, .project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel a.notification_active { float: none; margin: 0; } .project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel .desc { margin-top: 30px; } .project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel .pref { margin-top: 10px; } .project-area #galleryHeader .pTooltip.menu.downloadMsg { float: right; padding-top: 10px; height: 50px; right: -30px; position: relative; } .project-area #galleryHeader .pTooltip.menu.downloadMsg > .optionsPanel { min-width: 300px; } .project-area #galleryHeader .pTooltip.menu.downloadMsg .text { width: 100%; } .project-area #galleryHeader .pTooltip.menu.downloadMsg.downloadMsg--tooltip .msg { padding-left: 25px; padding-right: 25px; line-height: 18px; width: 250px; text-align: center; } .project-area #galleryHeader .pTooltip.menu.downloadMsg .contentPanel { min-height: auto; display: flex; padding: 0; } .project-area #galleryHeader .pTooltip.menu.downloadMsg .thumb { margin: 22px; width: 65px; height: 65px; background-size: cover; background-repeat: no-repeat; background-position: center; } .project-area #galleryHeader .pTooltip.menu.downloadMsg .text { width: 220px; margin: 25px 5px; display: flex; flex-direction: column; justify-content: center; } .project-area #galleryHeader .pTooltip.menu.downloadMsg .text .numFree { margin-top: 4px; } .project-area #galleryHeader .pTooltip.menu.downloadMsg .msg { width: 220px; } .project-area #galleryHeader .pTooltip.menu.downloadMsg .links > div { display: inline-block; margin-top: 15px; } .project-area #galleryHeader .pTooltip.menu.downloadMsg .batch { margin-left: 25px; } .project-area .quickPrints .products .navbar { display: flex; align-items: center; justify-content: center; margin: 30px 0 20px 0; } .project-area .quickPrints .products .navbar .downloadproductnav { padding: 0 10px; cursor: pointer; } .project-area .quickPrints .products .navbar .downloadproductnav.active { color: #444444; } .project-area .quickPrints .products .downloads { margin: 30px auto; max-width: 460px; display: none; } .project-area .quickPrints .products .downloads.active { display: block; } .project-area .quickPrints .products .downloads .cost { text-align: center; } .project-area .quickPrints .products .downloads .cost .total { display: none; line-height: 18px; } .project-area .quickPrints .products .downloads .cost .perone { margin-top: 15px; } .project-area .quickPrints .products .downloads .cost .tiered { color: #AB4D2E; margin-top: 20px; font-size: 14px; line-height: 19px; } .project-area .quickPrints .products .downloads .dlProds { margin: 60px auto; } .project-area .quickPrints .products .downloads .dlProds .dlProduct { height: 40px; margin-top: 20px; line-height: 40px; } .project-area .quickPrints .products .downloads .dlProds .dlProduct .pButtonStandard { width: 280px; margin: 0 auto; } .project-area #buyMsg.pTooltip { position: absolute; } .project-area #buyMsg.pTooltip .optionsPanel__cross { width: 20px; height: 20px; position: absolute; top: 15px; right: 15px; background-image: url(./resources/sprites/client.svg?r=r149.1); background-position: 0 -60px; cursor: pointer; } .project-area #buyMsg.pTooltip .optionsPanel__cross:hover { opacity: .5; background-position-x: -20px; } .project-area #buyMsg.pTooltip .optionsPanel:after { content: ' '; position: absolute; bottom: initial; top: calc(100% - 1px); right: 50%; width: 20px; height: 20px; background-position: -20px -80px; z-index: 1000; } .project-area #buyMsg.pTooltip .optionsPanel .optionsPanelInner { padding: 0; width: 315px; height: 130px; } .project-area #buyMsg.pTooltip .optionsPanel .optionsPanelInner .msg { margin: 36px 40px; } .project-area .pTooltipOverlay { position: fixed; bottom: 0; top: 0; left: 0; right: 0; background: rgba(128, 128, 128, 0.5); z-index: 9999; } .project-area .pTooltipOverlay + .pTooltip { z-index: 99999; } .project-area .noPromotionBanner .textBanners { display: none; } .project-area .forceHide { display: none !important; } .project-area .slideshowViewMode #photoStream { margin-top: 80px; } .project-area .smallIcon, .project-area .bigIcon, .project-area .hugeIcon { background-image: url("./resources/sprites/galleryuispriteb.png?r=r149.1"); background-repeat: no-repeat; background-color: transparent; border: none; padding: 0; margin: 0; cursor: pointer; } .project-area .smallIcon { width: 20px; height: 20px; line-height: 20px; } .project-area .bigIcon { width: 40px; height: 40px; line-height: 40px; } .project-area .hugeIcon { width: 80px; height: 80px; } .project-area .simpleTooltip:not(#dummy) { position: absolute; box-sizing: border-box; max-width: 240px; top: calc( 100% + 10px); padding: 12px 14px; text-align: left; line-height: 150%; opacity: 0; visibility: hidden; pointer-events: all; transition: opacity 0.5s ease, visibility 0s 0.5s; z-index: 9999; font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif; font-size: 12px; color: #F2F2F2; background-color: #444444; font-weight: 400; letter-spacing: 0.2px; text-transform: none; /* Control */ /* Arrow */ } .project-area .simpleTooltip:not(#dummy).centerText { text-align: center; } .project-area .simpleTooltip:not(#dummy).above { top: auto; bottom: calc( 100% + 10px); } .project-area .simpleTooltip:not(#dummy).above:not(.noArrow):after { top: auto; bottom: -8px; border-bottom: none; border-top: 10px solid #444444; } .project-area .simpleTooltip:not(#dummy).centerPosition { left: 50%; transform: translateX(-50%); } .project-area .simpleTooltip:not(#dummy).show, .project-area :hover > .simpleTooltip:not(#dummy):not(.manual):not(:hover), .project-area :hover > .simpleTooltip:not(#dummy):not(.manual):not(.outerHoverOnly), .project-area :focus > .simpleTooltip:not(#dummy):not(.manual):not(.focusOnly) { opacity: 1; visibility: visible; transition: visibility 0s, opacity 0.5s ease; } .project-area .simpleTooltip:not(#dummy):not(.noArrow):after { position: absolute; content: ""; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #444444; top: -8px; left: 10px; } .project-area .simpleTooltip:not(#dummy):not(.noArrow).centerArrow:after { left: 50%; margin-left: -10px; } .project-area .dialog-2:not(#dummy) .window { color: #444444; background-color: #FFFFFF; } .project-area .dialog-2:not(#dummy).standard-style { font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif; } .project-area .dialog-2:not(#dummy).standard-style * { box-sizing: border-box; } .project-area .dialog-2:not(#dummy).standard-style .window { font-size: 13px; font-weight: 400; letter-spacing: 0.5px; text-transform: none; } .project-area .dialog-2:not(#dummy).standard-style .footbar { color: #444444; border-color: #ECECEC; } .project-area .dialog-2:not(#dummy).standard-style .footbar button { color: unset; font: unset; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; background-color: #FFFFFF; } .project-area .dialog-2:not(#dummy).standard-style .footbar button:hover { background-color: #F9F9F9; } .project-area .dialog-2:not(#dummy).simpleAlert .window, .project-area .dialog-2:not(#dummy).simpleError .window, .project-area .dialog-2:not(#dummy).simpleConfirm .window { width: auto; } @media (min-width: 651px) { .project-area .dialog-2:not(#dummy).simpleAlert .window, .project-area .dialog-2:not(#dummy).simpleError .window, .project-area .dialog-2:not(#dummy).simpleConfirm .window { min-width: 400px; } } .project-area .dialog-2:not(#dummy).simpleAlert .window .content .strip div:not(:first-child), .project-area .dialog-2:not(#dummy).simpleError .window .content .strip div:not(:first-child), .project-area .dialog-2:not(#dummy).simpleConfirm .window .content .strip div:not(:first-child) { margin-top: 30px; } .project-area .dialog-2:not(#dummy).simpleAlert .footbar, .project-area .dialog-2:not(#dummy).simpleConfirm .footbar { border: none; justify-content: center; height: auto; margin: 0 30px 40px; } .project-area .dialog-2:not(#dummy).simpleAlert .footbar button, .project-area .dialog-2:not(#dummy).simpleConfirm .footbar button { font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif; letter-spacing: 2px; background-color: #ECECEC; flex: initial; width: 100%; height: 40px; min-width: 160px; margin: 0 10px; padding: 0 25px; } .project-area .dialog-2:not(#dummy).simpleAlert .footbar button:hover, .project-area .dialog-2:not(#dummy).simpleConfirm .footbar button:hover { background-color: #E0E0E0; } .project-area .dialog-2:not(#dummy).simpleError .strip:before { content: ''; display: block; width: 20px; height: 20px; background-image: url("./resources/sprites/client.svg?r=r149.1"); background-position: -20px -620px; background-repeat: no-repeat; margin: 10px auto; } .project-area .dialog-2:not(#dummy).simpleError .strip.done:before { width: 40px; height: 40px; background-image: url("resources/sprites/uispriteb.png?r=r149.1"); background-position: -395px -760px; } .mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window .content, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window .content, .mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window .content { position: unset; flex: unset; } .mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window .content .strip, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window .content .strip, .mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window .content .strip { padding: 0; } .mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window .footbar, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window .footbar, .mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window .footbar { border: none; } .mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window .footbar button, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window .footbar button, .mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window .footbar button { font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif; letter-spacing: 2px; color: #FFFFFF; background-color: #444444; height: 40px; margin: 10px; padding: 0 25px; } .mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window .footbar button, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window .footbar button { min-width: 160px; } .mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window .footbar button { min-width: 130px; } .project-area .banners { font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif; color: #444444; } .project-area .banners .header { text-align: center; } .project-area .banners .title { text-transform: uppercase; } .project-area .banners .subtitle { font-family: "Crimson Text", serif; font-style: italic; text-transform: none; font-weight: 400; margin-bottom: 48px; } .project-area .banners:not(.hasSubtitle) .subtitle { display: none; } .project-area .banners .banner .text { text-transform: uppercase; font-weight: 700; } .project-area .banners .banner .subtext { font-size: 13px; color: #444444; text-transform: none; font-weight: 400; letter-spacing: 0.2px; line-height: 150%; } .project-area .banners { letter-spacing: 2px; } .project-area .banners .subtitle { font-size: 16px; margin-bottom: 48px; } .project-area .banners.hasSubtitle .title { margin-bottom: 32px; } .project-area .banners .banner .text { font-size: 16px; } .project-area .dialog-2 { opacity: 0; z-index: 1100000; transition-duration: 75ms; transition: opacity; display: block; box-sizing: border-box; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(188, 188, 188, 0.9); } .project-area .dialog-2.show { opacity: 1; transition: opacity; transition-duration: 300ms; } .project-area .dialog-2.show .window { transition-duration: 300ms; } .project-area .dialog-2 .window { display: flex; overflow-y: auto; overflow-x: hidden; flex-direction: column; z-index: 10000; transition: opacity, transform; transition-duration: 75ms; } .project-area .dialog-2 .content { flex-grow: 1; flex-shrink: 1; flex-basis: auto; text-align: center; line-height: 166%; } .project-area .dialog-2 .content .strip { padding-top: 30px; display: flex; flex-direction: column; align-items: center; margin: 0; } .project-area .dialog-2 .content .strip > span { margin-top: 24px; } .project-area .dialog-2 .content icon { display: block; } .project-area .dialog-2 .content .img { width: 185px; height: 123px; margin-top: 40px; display: inline-block; } .project-area .dialog-2 .footbar { height: 60px; border-top: 1px solid currentColor; display: flex; flex-direction: row; } .project-area .dialog-2 .footbar button { flex: 1; align-content: center; border: none; cursor: pointer; } .project-area .dialog-2 .footbar button[disabled] { background-color: #D0D0D0; color: rgba(236, 236, 236, 0.78); cursor: not-allowed; } .project-area .dialog-2 .footbar button:not(:last-child) { border-right: 1px solid #ECECEC; } .project-area .dialog-2 .close-x-button { position: fixed; z-index: 10001; } .project-area .dialog-2.hideCloseBtn .close-x-button { display: none; } .project-area body.dialog-2-open { min-height: 100%; } .project-area body.dialog-2-open > *:not(.dialog-2):not(.loadingDialog):not(.couponRegisterMessageDialog):not(#chat-widget-container) { filter: blur(5px); } .project-area .dialog-2 { display: flex; justify-content: center; align-items: center; } .project-area .dialog-2.show .window { transform: scale(1); } .project-area .dialog-2 .window { position: fixed; transform: scale(0.8); } .project-area .dialog-2 .close-x-button { top: 40px; right: 40px; } .project-area .dialog-2.standard-style .window { width: 550px; height: auto; min-height: 15em; } .project-area .dialog-2.standard-style .content { padding: 40px; padding-top: 0; } .project-area body > .overlay { position: fixed; top: 0; width: 100vw; height: 100vh; background-color: rgba(244, 244, 244, 0.7); z-index: 99999999; } .project-area body.login.noCover #maincanvas { display: flex; height: 100vh; } .project-area body.login.noCover #maincanvas .userlogin { margin: auto; } .project-area .userlogin { position: relative; margin: auto; padding: 0; text-align: left !important; } .project-area .userlogin * { margin: 0; padding: 0; box-sizing: border-box; color: inherit; font-style: inherit; font-weight: inherit; font-size: inherit; border-radius: 0; text-decoration: inherit; letter-spacing: inherit; -webkit-appearance: none; } .project-area .userlogin *:focus { outline: none; } .project-area .userlogin.sensitive .notMe { display: none !important; } .project-area .userlogin .password:not(.showPassActive) span { font-size: 16px; } .project-area .userlogin icon-elem svg { width: var(--icon-size, 40px); height: var(--icon-size, 40px); } .project-area .userlogin .icon4 { background-color: transparent; } .project-area .userlogin .icon4.showPass { position: absolute; right: 4px; /* IE fix */ top: 0; bottom: 0; margin: auto; } .project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label:before, .project-area .userlogin .icon4Before:before { position: relative; flex-shrink: 0; } .project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label.iconSmall:before, .project-area .userlogin .icon4Before.iconSmall:before { width: 20px; height: 20px; } .project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label:before { width: 20px; height: 20px; } .project-area .userlogin .userloginInner .screens .screen .selectField:after, .project-area .userlogin .icon4After:after { position: relative; flex-shrink: 0; } .project-area .userlogin .userloginInner .screens .screen .iconSmall.selectField:after, .project-area .userlogin .icon4After.iconSmall:after { width: 20px; height: 20px; } .project-area .userlogin .userloginInner .screens .screen .selectField:after { width: 20px; height: 20px; } .project-area .userlogin:after { content: ''; opacity: 0; pointer-events: none; background-color: #FFFFFFe6; background-image: url("./resources/singles/loading.svg?r=r149.1"); background-size: 40px; background-repeat: no-repeat; background-position: 50% 50%; transition-property: opacity; transition-delay: 0s, 0.4s; transition-duration: 0.4s; transition-timing-function: ease; } .project-area .userlogin.progress:after { opacity: 1; pointer-events: auto; } .project-area .userlogin .userloginInner { width: 100%; height: 100%; position: relative; overflow: hidden; } .project-area .userlogin .userloginInner .screens { list-style-type: none; width: 100%; height: 100%; } .project-area .userlogin .userloginInner .screens .screen { width: 100%; margin: 0 auto; opacity: 0; transition: all 0.4s ease; } .project-area .userlogin:not(.fixedScreen) .userloginInner .screens .screen { position: absolute; } .project-area .userlogin .userloginInner .screens .screen:not(:only-child) { transform: translateX(-100%); } .project-area .userlogin .userloginInner .screens .screen.active { opacity: 1; transform: translateX(0); transition-delay: 0.4s; box-sizing: border-box; } .project-area .userlogin .userloginInner .screens .screen.active ~ .screen { transform: translateX(100%); } .project-area .userlogin .userloginInner .screens .screen button, .project-area .userlogin .userloginInner .screens .screen a, .project-area .userlogin .userloginInner .screens .screen label { cursor: pointer; } .project-area .userlogin .userloginInner .screens .screen .password, .project-area .userlogin .userloginInner .screens .screen .passField { position: relative; } .project-area .userlogin .userloginInner .screens .screen .header, .project-area .userlogin .userloginInner .screens .screen .title, .project-area .userlogin .userloginInner .screens .screen .passDesc, .project-area .userlogin .userloginInner .screens .screen .emailField, .project-area .userlogin .userloginInner .screens .screen .passField { width: 100%; } .project-area .userlogin .userloginInner .screens .screen .footer { line-height: 150%; } .project-area .userlogin .userloginInner .screens .screen .title h3 { line-height: 150%; } .project-area .userlogin .userloginInner .screens .screen .title .banner .brandLogo { margin: 0 auto; width: 162px; height: 63px; background-size: contain; background-repeat: no-repeat; background-position: center; } .project-area .userlogin .userloginInner .screens .screen .title .galleryList { margin: 0 auto; } .project-area .userlogin .userloginInner .screens .screen .title .galleryList .galleryTitle { display: inline-block; vertical-align: bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 95%; } .project-area .userlogin .userloginInner .screens .screen .checkbox, .project-area .userlogin .userloginInner .screens .screen .checkboxField label { display: inline-flex; } .project-area .userlogin .userloginInner .screens .screen input[type="checkbox"] { display: none; } .project-area .userlogin .userloginInner .screens .screen .selectField:after { position: absolute; right: 0; pointer-events: none; } .project-area .userlogin .userloginInner .screens .screen .link { border: none; background: none; } .project-area .userlogin .userloginInner .screens .screen .link .noticeable { text-decoration: underline; } .project-area .userlogin .userloginInner .screens .screen .forgotPassWrap button { position: relative; } .project-area .userlogin .userloginInner .screens .screen .showPass:not(.active), .project-area .userlogin .userloginInner .screens .screen .showPass:not(.active):hover { text-decoration: line-through; } .project-area .userlogin .userloginInner .screens .screen .errorMsg { line-height: 135%; } .project-area .userlogin .userloginInner .screens .screen .pictimeZForm .field { height: auto; } .project-area body.ptRTL .loginBox { /* direction:ltr; li { direction:rtl; } */ } .project-area body.ptRTL .loginBox .screens .screen:not(:only-child) { transform: translateX(100%); } .project-area body.ptRTL .loginBox .screens .screen.active { transform: translateX(0); } .project-area body.ptRTL .loginBox .screens .screen.active ~ .screen { transform: translateX(-100%); } .project-area .loginBook, .project-area .loginBox { font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif; background-color: #FFFFFF; font-weight: 400; letter-spacing: 0.5px; text-transform: none; color: #1C1C1C; } .project-area .loginBook input, .project-area .loginBox input { font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif; } .project-area .loginBook .svg-icon:not(.fill-icon), .project-area .loginBox .svg-icon:not(.fill-icon) { stroke: #1C1C1C; fill: transparent; } .project-area .loginBook .svg-icon.fill-icon, .project-area .loginBox .svg-icon.fill-icon { fill: #1C1C1C; } .project-area .loginBook.link:hover, .project-area .loginBook .link:hover, .project-area .loginBook a:hover, .project-area .loginBox.link:hover, .project-area .loginBox .link:hover, .project-area .loginBox a:hover { color: #868686; } .project-area .loginBook.link:focus, .project-area .loginBook .link:focus, .project-area .loginBook a:focus, .project-area .loginBox.link:focus, .project-area .loginBox .link:focus, .project-area .loginBox a:focus { color: #868686; } .project-area .loginBook .screen .signup a, .project-area .loginBox .screen .signup .loginBook a, .project-area .loginBook .loginBox .screen .footer, .project-area .loginBox .screen .loginBook .footer, .project-area .loginBook .screen .changeUser, .project-area .loginBook .screen .notYou, .project-area .loginBook .screen .loginDesc, .project-area .loginBook .screen .autoBack, .project-area .loginBox .screen .loginBook .changeUser, .project-area .loginBox .screen .loginBook .notYou, .project-area .loginBox .screen .loginBook .loginDesc, .project-area .loginBox .screen .loginBook .autoBack, .project-area .loginBook .screen .passDesc .galleryList, .project-area .loginBox .screen .passDesc .loginBook .galleryList, .project-area .loginBook .screen.twoFactor form .notReceived, .project-area .loginBook .screen.twoFactor form .resend, .project-area .loginBook .screen.twoFactorError form .notReceived, .project-area .loginBook .screen.twoFactorError form .resend, .project-area .loginBook .screen.twoFactorMessage form .notReceived, .project-area .loginBook .screen.twoFactorMessage form .resend, .project-area .loginBox .screen.twoFactor form .loginBook .notReceived, .project-area .loginBox .screen.twoFactor form .loginBook .resend, .project-area .loginBox .screen.twoFactorError form .loginBook .notReceived, .project-area .loginBox .screen.twoFactorError form .loginBook .resend, .project-area .loginBox .screen.twoFactorMessage form .loginBook .notReceived, .project-area .loginBox .screen.twoFactorMessage form .loginBook .resend, .project-area .loginBook .screens .screen .title h3, .project-area .loginBook .screens .screen .openLogin, .project-area .loginBook .screens .screen form .external .label, .project-area .loginBook .screens .screen .footer, .project-area .loginBook .screen .signup .loginBox a, .project-area .loginBox .screen .signup a, .project-area .loginBox .screen .footer, .project-area .loginBook .screen .loginBox .changeUser, .project-area .loginBook .screen .loginBox .notYou, .project-area .loginBook .screen .loginBox .loginDesc, .project-area .loginBook .screen .loginBox .autoBack, .project-area .loginBox .screen .changeUser, .project-area .loginBox .screen .notYou, .project-area .loginBox .screen .loginDesc, .project-area .loginBox .screen .autoBack, .project-area .loginBook .screen .passDesc .loginBox .galleryList, .project-area .loginBox .screen .passDesc .galleryList, .project-area .loginBook .screen.twoFactor form .loginBox .notReceived, .project-area .loginBook .screen.twoFactor form .loginBox .resend, .project-area .loginBook .screen.twoFactorError form .loginBox .notReceived, .project-area .loginBook .screen.twoFactorError form .loginBox .resend, .project-area .loginBook .screen.twoFactorMessage form .loginBox .notReceived, .project-area .loginBook .screen.twoFactorMessage form .loginBox .resend, .project-area .loginBox .screen.twoFactor form .notReceived, .project-area .loginBox .screen.twoFactor form .resend, .project-area .loginBox .screen.twoFactorError form .notReceived, .project-area .loginBox .screen.twoFactorError form .resend, .project-area .loginBox .screen.twoFactorMessage form .notReceived, .project-area .loginBox .screen.twoFactorMessage form .resend, .project-area .loginBox .loginBook .screens .screen .title h3, .project-area .loginBook .screens .screen .title .loginBox h3, .project-area .loginBox .loginBook .screens .screen .openLogin, .project-area .loginBook .screens .screen .loginBox .openLogin, .project-area .loginBox .loginBook .screens .screen form .external .label, .project-area .loginBook .screens .screen form .external .loginBox .label, .project-area .loginBox .loginBook .screens .screen .footer, .project-area .loginBook .screens .screen .loginBox .footer { color: #868686; } .project-area .loginBook .screen .signup a.link:hover, .project-area .loginBox .screen .signup .loginBook a.link:hover, .project-area .loginBook .loginBox .screen .link.footer:hover, .project-area .loginBox .screen .loginBook .link.footer:hover, .project-area .loginBook .screen .link.changeUser:hover, .project-area .loginBook .screen .link.notYou:hover, .project-area .loginBook .screen .link.loginDesc:hover, .project-area .loginBook .screen .link.autoBack:hover, .project-area .loginBox .screen .loginBook .link.changeUser:hover, .project-area .loginBox .screen .loginBook .link.notYou:hover, .project-area .loginBox .screen .loginBook .link.loginDesc:hover, .project-area .loginBox .screen .loginBook .link.autoBack:hover, .project-area .loginBook .screen .passDesc .link.galleryList:hover, .project-area .loginBox .screen .passDesc .loginBook .link.galleryList:hover, .project-area .loginBook .screen.twoFactor form .link.notReceived:hover, .project-area .loginBook .screen.twoFactor form .link.resend:hover, .project-area .loginBook .screen.twoFactorError form .link.notReceived:hover, .project-area .loginBook .screen.twoFactorError form .link.resend:hover, .project-area .loginBook .screen.twoFactorMessage form .link.notReceived:hover, .project-area .loginBook .screen.twoFactorMessage form .link.resend:hover, .project-area .loginBox .screen.twoFactor form .loginBook .link.notReceived:hover, .project-area .loginBox .screen.twoFactor form .loginBook .link.resend:hover, .project-area .loginBox .screen.twoFactorError form .loginBook .link.notReceived:hover, .project-area .loginBox .screen.twoFactorError form .loginBook .link.resend:hover, .project-area .loginBox .screen.twoFactorMessage form .loginBook .link.notReceived:hover, .project-area .loginBox .screen.twoFactorMessage form .loginBook .link.resend:hover, .project-area .loginBook .screens .screen .title h3.link:hover, .project-area .loginBook .screens .screen .link.openLogin:hover, .project-area .loginBook .screens .screen form .external .link.label:hover, .project-area .loginBook .screens .screen .link.footer:hover, .project-area .loginBook .screen .signup a .link:hover, .project-area .loginBox .screen .signup .loginBook a .link:hover, .project-area .loginBook .loginBox .screen .footer .link:hover, .project-area .loginBox .screen .loginBook .footer .link:hover, .project-area .loginBook .screen .changeUser .link:hover, .project-area .loginBook .screen .notYou .link:hover, .project-area .loginBook .screen .loginDesc .link:hover, .project-area .loginBook .screen .autoBack .link:hover, .project-area .loginBox .screen .loginBook .changeUser .link:hover, .project-area .loginBox .screen .loginBook .notYou .link:hover, .project-area .loginBox .screen .loginBook .loginDesc .link:hover, .project-area .loginBox .screen .loginBook .autoBack .link:hover, .project-area .loginBook .screen .passDesc .galleryList .link:hover, .project-area .loginBox .screen .passDesc .loginBook .galleryList .link:hover, .project-area .loginBook .screen.twoFactor form .notReceived .link:hover, .project-area .loginBook .screen.twoFactor form .resend .link:hover, .project-area .loginBook .screen.twoFactorError form .notReceived .link:hover, .project-area .loginBook .screen.twoFactorError form .resend .link:hover, .project-area .loginBook .screen.twoFactorMessage form .notReceived .link:hover, .project-area .loginBook .screen.twoFactorMessage form .resend .link:hover, .project-area .loginBox .screen.twoFactor form .loginBook .notReceived .link:hover, .project-area .loginBox .screen.twoFactor form .loginBook .resend .link:hover, .project-area .loginBox .screen.twoFactorError form .loginBook .notReceived .link:hover, .project-area .loginBox .screen.twoFactorError form .loginBook .resend .link:hover, .project-area .loginBox .screen.twoFactorMessage form .loginBook .notReceived .link:hover, .project-area .loginBox .screen.twoFactorMessage form .loginBook .resend .link:hover, .project-area .loginBook .screens .screen .title h3 .link:hover, .project-area .loginBook .screens .screen .openLogin .link:hover, .project-area .loginBook .screens .screen form .external .label .link:hover, .project-area .loginBook .screens .screen .footer .link:hover, .project-area .loginBook .screen .signup a a:hover, .project-area .loginBox .screen .signup .loginBook a a:hover, .project-area .loginBook .loginBox .screen .footer a:hover, .project-area .loginBox .screen .loginBook .footer a:hover, .project-area .loginBook .screen .changeUser a:hover, .project-area .loginBook .screen .notYou a:hover, .project-area .loginBook .screen .loginDesc a:hover, .project-area .loginBook .screen .autoBack a:hover, .project-area .loginBox .screen .loginBook .changeUser a:hover, .project-area .loginBox .screen .loginBook .notYou a:hover, .project-area .loginBox .screen .loginBook .loginDesc a:hover, .project-area .loginBox .screen .loginBook .autoBack a:hover, .project-area .loginBook .screen .passDesc .galleryList a:hover, .project-area .loginBox .screen .passDesc .loginBook .galleryList a:hover, .project-area .loginBook .screen.twoFactor form .notReceived a:hover, .project-area .loginBook .screen.twoFactor form .resend a:hover, .project-area .loginBook .screen.twoFactorError form .notReceived a:hover, .project-area .loginBook .screen.twoFactorError form .resend a:hover, .project-area .loginBook .screen.twoFactorMessage form .notReceived a:hover, .project-area .loginBook .screen.twoFactorMessage form .resend a:hover, .project-area .loginBox .screen.twoFactor form .loginBook .notReceived a:hover, .project-area .loginBox .screen.twoFactor form .loginBook .resend a:hover, .project-area .loginBox .screen.twoFactorError form .loginBook .notReceived a:hover, .project-area .loginBox .screen.twoFactorError form .loginBook .resend a:hover, .project-area .loginBox .screen.twoFactorMessage form .loginBook .notReceived a:hover, .project-area .loginBox .screen.twoFactorMessage form .loginBook .resend a:hover, .project-area .loginBook .screens .screen .title h3 a:hover, .project-area .loginBook .screens .screen .openLogin a:hover, .project-area .loginBook .screens .screen form .external .label a:hover, .project-area .loginBook .screens .screen .footer a:hover, .project-area .loginBook .screen .signup .loginBox a.link:hover, .project-area .loginBox .screen .signup a.link:hover, .project-area .loginBox .screen .link.footer:hover, .project-area .loginBook .screen .loginBox .link.changeUser:hover, .project-area .loginBook .screen .loginBox .link.notYou:hover, .project-area .loginBook .screen .loginBox .link.loginDesc:hover, .project-area .loginBook .screen .loginBox .link.autoBack:hover, .project-area .loginBox .screen .link.changeUser:hover, .project-area .loginBox .screen .link.notYou:hover, .project-area .loginBox .screen .link.loginDesc:hover, .project-area .loginBox .screen .link.autoBack:hover, .project-area .loginBook .screen .passDesc .loginBox .link.galleryList:hover, .project-area .loginBox .screen .passDesc .link.galleryList:hover, .project-area .loginBook .screen.twoFactor form .loginBox .link.notReceived:hover, .project-area .loginBook .screen.twoFactor form .loginBox .link.resend:hover, .project-area .loginBook .screen.twoFactorError form .loginBox .link.notReceived:hover, .project-area .loginBook .screen.twoFactorError form .loginBox .link.resend:hover, .project-area .loginBook .screen.twoFactorMessage form .loginBox .link.notReceived:hover, .project-area .loginBook .screen.twoFactorMessage form .loginBox .link.resend:hover, .project-area .loginBox .screen.twoFactor form .link.notReceived:hover, .project-area .loginBox .screen.twoFactor form .link.resend:hover, .project-area .loginBox .screen.twoFactorError form .link.notReceived:hover, .project-area .loginBox .screen.twoFactorError form .link.resend:hover, .project-area .loginBox .screen.twoFactorMessage form .link.notReceived:hover, .project-area .loginBox .screen.twoFactorMessage form .link.resend:hover, .project-area .loginBox .loginBook .screens .screen .title h3.link:hover, .project-area .loginBook .screens .screen .title .loginBox h3.link:hover, .project-area .loginBox .loginBook .screens .screen .link.openLogin:hover, .project-area .loginBook .screens .screen .loginBox .link.openLogin:hover, .project-area .loginBox .loginBook .screens .screen form .external .link.label:hover, .project-area .loginBook .screens .screen form .external .loginBox .link.label:hover, .project-area .loginBook .screens .screen .loginBox .link.footer:hover, .project-area .loginBook .screen .signup .loginBox a .link:hover, .project-area .loginBox .screen .signup a .link:hover, .project-area .loginBox .screen .footer .link:hover, .project-area .loginBook .screen .loginBox .changeUser .link:hover, .project-area .loginBook .screen .loginBox .notYou .link:hover, .project-area .loginBook .screen .loginBox .loginDesc .link:hover, .project-area .loginBook .screen .loginBox .autoBack .link:hover, .project-area .loginBox .screen .changeUser .link:hover, .project-area .loginBox .screen .notYou .link:hover, .project-area .loginBox .screen .loginDesc .link:hover, .project-area .loginBox .screen .autoBack .link:hover, .project-area .loginBook .screen .passDesc .loginBox .galleryList .link:hover, .project-area .loginBox .screen .passDesc .galleryList .link:hover, .project-area .loginBook .screen.twoFactor form .loginBox .notReceived .link:hover, .project-area .loginBook .screen.twoFactor form .loginBox .resend .link:hover, .project-area .loginBook .screen.twoFactorError form .loginBox .notReceived .link:hover, .project-area .loginBook .screen.twoFactorError form .loginBox .resend .link:hover, .project-area .loginBook .screen.twoFactorMessage form .loginBox .notReceived .link:hover, .project-area .loginBook .screen.twoFactorMessage form .loginBox .resend .link:hover, .project-area .loginBox .screen.twoFactor form .notReceived .link:hover, .project-area .loginBox .screen.twoFactor form .resend .link:hover, .project-area .loginBox .screen.twoFactorError form .notReceived .link:hover, .project-area .loginBox .screen.twoFactorError form .resend .link:hover, .project-area .loginBox .screen.twoFactorMessage form .notReceived .link:hover, .project-area .loginBox .screen.twoFactorMessage form .resend .link:hover, .project-area .loginBox .loginBook .screens .screen .title h3 .link:hover, .project-area .loginBook .screens .screen .title .loginBox h3 .link:hover, .project-area .loginBox .loginBook .screens .screen .openLogin .link:hover, .project-area .loginBook .screens .screen .loginBox .openLogin .link:hover, .project-area .loginBox .loginBook .screens .screen form .external .label .link:hover, .project-area .loginBook .screens .screen form .external .loginBox .label .link:hover, .project-area .loginBook .screens .screen .loginBox .footer .link:hover, .project-area .loginBook .screen .signup .loginBox a a:hover, .project-area .loginBox .screen .signup a a:hover, .project-area .loginBox .screen .footer a:hover, .project-area .loginBook .screen .loginBox .changeUser a:hover, .project-area .loginBook .screen .loginBox .notYou a:hover, .project-area .loginBook .screen .loginBox .loginDesc a:hover, .project-area .loginBook .screen .loginBox .autoBack a:hover, .project-area .loginBox .screen .changeUser a:hover, .project-area .loginBox .screen .notYou a:hover, .project-area .loginBox .screen .loginDesc a:hover, .project-area .loginBox .screen .autoBack a:hover, .project-area .loginBook .screen .passDesc .loginBox .galleryList a:hover, .project-area .loginBox .screen .passDesc .galleryList a:hover, .project-area .loginBook .screen.twoFactor form .loginBox .notReceived a:hover, .project-area .loginBook .screen.twoFactor form .loginBox .resend a:hover, .project-area .loginBook .screen.twoFactorError form .loginBox .notReceived a:hover, .project-area .loginBook .screen.twoFactorError form .loginBox .resend a:hover, .project-area .loginBook .screen.twoFactorMessage form .loginBox .notReceived a:hover, .project-area .loginBook .screen.twoFactorMessage form .loginBox .resend a:hover, .project-area .loginBox .screen.twoFactor form .notReceived a:hover, .project-area .loginBox .screen.twoFactor form .resend a:hover, .project-area .loginBox .screen.twoFactorError form .notReceived a:hover, .project-area .loginBox .screen.twoFactorError form .resend a:hover, .project-area .loginBox .screen.twoFactorMessage form .notReceived a:hover, .project-area .loginBox .screen.twoFactorMessage form .resend a:hover, .project-area .loginBox .loginBook .screens .screen .title h3 a:hover, .project-area .loginBook .screens .screen .title .loginBox h3 a:hover, .project-area .loginBox .loginBook .screens .screen .openLogin a:hover, .project-area .loginBook .screens .screen .loginBox .openLogin a:hover, .project-area .loginBox .loginBook .screens .screen form .external .label a:hover, .project-area .loginBook .screens .screen form .external .loginBox .label a:hover, .project-area .loginBook .screens .screen .loginBox .footer a:hover { color: #1C1C1C; } .project-area .loginBook .screen .signup a.link:focus, .project-area .loginBox .screen .signup .loginBook a.link:focus, .project-area .loginBook .loginBox .screen .link.footer:focus, .project-area .loginBox .screen .loginBook .link.footer:focus, .project-area .loginBook .screen .link.changeUser:focus, .project-area .loginBook .screen .link.notYou:focus, .project-area .loginBook .screen .link.loginDesc:focus, .project-area .loginBook .screen .link.autoBack:focus, .project-area .loginBox .screen .loginBook .link.changeUser:focus, .project-area .loginBox .screen .loginBook .link.notYou:focus, .project-area .loginBox .screen .loginBook .link.loginDesc:focus, .project-area .loginBox .screen .loginBook .link.autoBack:focus, .project-area .loginBook .screen .passDesc .link.galleryList:focus, .project-area .loginBox .screen .passDesc .loginBook .link.galleryList:focus, .project-area .loginBook .screen.twoFactor form .link.notReceived:focus, .project-area .loginBook .screen.twoFactor form .link.resend:focus, .project-area .loginBook .screen.twoFactorError form .link.notReceived:focus, .project-area .loginBook .screen.twoFactorError form .link.resend:focus, .project-area .loginBook .screen.twoFactorMessage form .link.notReceived:focus, .project-area .loginBook .screen.twoFactorMessage form .link.resend:focus, .project-area .loginBox .screen.twoFactor form .loginBook .link.notReceived:focus, .project-area .loginBox .screen.twoFactor form .loginBook .link.resend:focus, .project-area .loginBox .screen.twoFactorError form .loginBook .link.notReceived:focus, .project-area .loginBox .screen.twoFactorError form .loginBook .link.resend:focus, .project-area .loginBox .screen.twoFactorMessage form .loginBook .link.notReceived:focus, .project-area .loginBox .screen.twoFactorMessage form .loginBook .link.resend:focus, .project-area .loginBook .screens .screen .title h3.link:focus, .project-area .loginBook .screens .screen .link.openLogin:focus, .project-area .loginBook .screens .screen form .external .link.label:focus, .project-area .loginBook .screens .screen .link.footer:focus, .project-area .loginBook .screen .signup a .link:focus, .project-area .loginBox .screen .signup .loginBook a .link:focus, .project-area .loginBook .loginBox .screen .footer .link:focus, .project-area .loginBox .screen .loginBook .footer .link:focus, .project-area .loginBook .screen .changeUser .link:focus, .project-area .loginBook .screen .notYou .link:focus, .project-area .loginBook .screen .loginDesc .link:focus, .project-area .loginBook .screen .autoBack .link:focus, .project-area .loginBox .screen .loginBook .changeUser .link:focus, .project-area .loginBox .screen .loginBook .notYou .link:focus, .project-area .loginBox .screen .loginBook .loginDesc .link:focus, .project-area .loginBox .screen .loginBook .autoBack .link:focus, .project-area .loginBook .screen .passDesc .galleryList .link:focus, .project-area .loginBox .screen .passDesc .loginBook .galleryList .link:focus, .project-area .loginBook .screen.twoFactor form .notReceived .link:focus, .project-area .loginBook .screen.twoFactor form .resend .link:focus, .project-area .loginBook .screen.twoFactorError form .notReceived .link:focus, .project-area .loginBook .screen.twoFactorError form .resend .link:focus, .project-area .loginBook .screen.twoFactorMessage form .notReceived .link:focus, .project-area .loginBook .screen.twoFactorMessage form .resend .link:focus, .project-area .loginBox .screen.twoFactor form .loginBook .notReceived .link:focus, .project-area .loginBox .screen.twoFactor form .loginBook .resend .link:focus, .project-area .loginBox .screen.twoFactorError form .loginBook .notReceived .link:focus, .project-area .loginBox .screen.twoFactorError form .loginBook .resend .link:focus, .project-area .loginBox .screen.twoFactorMessage form .loginBook .notReceived .link:focus, .project-area .loginBox .screen.twoFactorMessage form .loginBook .resend .link:focus, .project-area .loginBook .screens .screen .title h3 .link:focus, .project-area .loginBook .screens .screen .openLogin .link:focus, .project-area .loginBook .screens .screen form .external .label .link:focus, .project-area .loginBook .screens .screen .footer .link:focus, .project-area .loginBook .screen .signup a a:focus, .project-area .loginBox .screen .signup .loginBook a a:focus, .project-area .loginBook .loginBox .screen .footer a:focus, .project-area .loginBox .screen .loginBook .footer a:focus, .project-area .loginBook .screen .changeUser a:focus, .project-area .loginBook .screen .notYou a:focus, .project-area .loginBook .screen .loginDesc a:focus, .project-area .loginBook .screen .autoBack a:focus, .project-area .loginBox .screen .loginBook .changeUser a:focus, .project-area .loginBox .screen .loginBook .notYou a:focus, .project-area .loginBox .screen .loginBook .loginDesc a:focus, .project-area .loginBox .screen .loginBook .autoBack a:focus, .project-area .loginBook .screen .passDesc .galleryList a:focus, .project-area .loginBox .screen .passDesc .loginBook .galleryList a:focus, .project-area .loginBook .screen.twoFactor form .notReceived a:focus, .project-area .loginBook .screen.twoFactor form .resend a:focus, .project-area .loginBook .screen.twoFactorError form .notReceived a:focus, .project-area .loginBook .screen.twoFactorError form .resend a:focus, .project-area .loginBook .screen.twoFactorMessage form .notReceived a:focus, .project-area .loginBook .screen.twoFactorMessage form .resend a:focus, .project-area .loginBox .screen.twoFactor form .loginBook .notReceived a:focus, .project-area .loginBox .screen.twoFactor form .loginBook .resend a:focus, .project-area .loginBox .screen.twoFactorError form .loginBook .notReceived a:focus, .project-area .loginBox .screen.twoFactorError form .loginBook .resend a:focus, .project-area .loginBox .screen.twoFactorMessage form .loginBook .notReceived a:focus, .project-area .loginBox .screen.twoFactorMessage form .loginBook .resend a:focus, .project-area .loginBook .screens .screen .title h3 a:focus, .project-area .loginBook .screens .screen .openLogin a:focus, .project-area .loginBook .screens .screen form .external .label a:focus, .project-area .loginBook .screens .screen .footer a:focus, .project-area .loginBook .screen .signup .loginBox a.link:focus, .project-area .loginBox .screen .signup a.link:focus, .project-area .loginBox .screen .link.footer:focus, .project-area .loginBook .screen .loginBox .link.changeUser:focus, .project-area .loginBook .screen .loginBox .link.notYou:focus, .project-area .loginBook .screen .loginBox .link.loginDesc:focus, .project-area .loginBook .screen .loginBox .link.autoBack:focus, .project-area .loginBox .screen .link.changeUser:focus, .project-area .loginBox .screen .link.notYou:focus, .project-area .loginBox .screen .link.loginDesc:focus, .project-area .loginBox .screen .link.autoBack:focus, .project-area .loginBook .screen .passDesc .loginBox .link.galleryList:focus, .project-area .loginBox .screen .passDesc .link.galleryList:focus, .project-area .loginBook .screen.twoFactor form .loginBox .link.notReceived:focus, .project-area .loginBook .screen.twoFactor form .loginBox .link.resend:focus, .project-area .loginBook .screen.twoFactorError form .loginBox .link.notReceived:focus, .project-area .loginBook .screen.twoFactorError form .loginBox .link.resend:focus, .project-area .loginBook .screen.twoFactorMessage form .loginBox .link.notReceived:focus, .project-area .loginBook .screen.twoFactorMessage form .loginBox .link.resend:focus, .project-area .loginBox .screen.twoFactor form .link.notReceived:focus, .project-area .loginBox .screen.twoFactor form .link.resend:focus, .project-area .loginBox .screen.twoFactorError form .link.notReceived:focus, .project-area .loginBox .screen.twoFactorError form .link.resend:focus, .project-area .loginBox .screen.twoFactorMessage form .link.notReceived:focus, .project-area .loginBox .screen.twoFactorMessage form .link.resend:focus, .project-area .loginBox .loginBook .screens .screen .title h3.link:focus, .project-area .loginBook .screens .screen .title .loginBox h3.link:focus, .project-area .loginBox .loginBook .screens .screen .link.openLogin:focus, .project-area .loginBook .screens .screen .loginBox .link.openLogin:focus, .project-area .loginBox .loginBook .screens .screen form .external .link.label:focus, .project-area .loginBook .screens .screen form .external .loginBox .link.label:focus, .project-area .loginBook .screens .screen .loginBox .link.footer:focus, .project-area .loginBook .screen .signup .loginBox a .link:focus, .project-area .loginBox .screen .signup a .link:focus, .project-area .loginBox .screen .footer .link:focus, .project-area .loginBook .screen .loginBox .changeUser .link:focus, .project-area .loginBook .screen .loginBox .notYou .link:focus, .project-area .loginBook .screen .loginBox .loginDesc .link:focus, .project-area .loginBook .screen .loginBox .autoBack .link:focus, .project-area .loginBox .screen .changeUser .link:focus, .project-area .loginBox .screen .notYou .link:focus, .project-area .loginBox .screen .loginDesc .link:focus, .project-area .loginBox .screen .autoBack .link:focus, .project-area .loginBook .screen .passDesc .loginBox .galleryList .link:focus, .project-area .loginBox .screen .passDesc .galleryList .link:focus, .project-area .loginBook .screen.twoFactor form .loginBox .notReceived .link:focus, .project-area .loginBook .screen.twoFactor form .loginBox .resend .link:focus, .project-area .loginBook .screen.twoFactorError form .loginBox .notReceived .link:focus, .project-area .loginBook .screen.twoFactorError form .loginBox .resend .link:focus, .project-area .loginBook .screen.twoFactorMessage form .loginBox .notReceived .link:focus, .project-area .loginBook .screen.twoFactorMessage form .loginBox .resend .link:focus, .project-area .loginBox .screen.twoFactor form .notReceived .link:focus, .project-area .loginBox .screen.twoFactor form .resend .link:focus, .project-area .loginBox .screen.twoFactorError form .notReceived .link:focus, .project-area .loginBox .screen.twoFactorError form .resend .link:focus, .project-area .loginBox .screen.twoFactorMessage form .notReceived .link:focus, .project-area .loginBox .screen.twoFactorMessage form .resend .link:focus, .project-area .loginBox .loginBook .screens .screen .title h3 .link:focus, .project-area .loginBook .screens .screen .title .loginBox h3 .link:focus, .project-area .loginBox .loginBook .screens .screen .openLogin .link:focus, .project-area .loginBook .screens .screen .loginBox .openLogin .link:focus, .project-area .loginBox .loginBook .screens .screen form .external .label .link:focus, .project-area .loginBook .screens .screen form .external .loginBox .label .link:focus, .project-area .loginBook .screens .screen .loginBox .footer .link:focus, .project-area .loginBook .screen .signup .loginBox a a:focus, .project-area .loginBox .screen .signup a a:focus, .project-area .loginBox .screen .footer a:focus, .project-area .loginBook .screen .loginBox .changeUser a:focus, .project-area .loginBook .screen .loginBox .notYou a:focus, .project-area .loginBook .screen .loginBox .loginDesc a:focus, .project-area .loginBook .screen .loginBox .autoBack a:focus, .project-area .loginBox .screen .changeUser a:focus, .project-area .loginBox .screen .notYou a:focus, .project-area .loginBox .screen .loginDesc a:focus, .project-area .loginBox .screen .autoBack a:focus, .project-area .loginBook .screen .passDesc .loginBox .galleryList a:focus, .project-area .loginBox .screen .passDesc .galleryList a:focus, .project-area .loginBook .screen.twoFactor form .loginBox .notReceived a:focus, .project-area .loginBook .screen.twoFactor form .loginBox .resend a:focus, .project-area .loginBook .screen.twoFactorError form .loginBox .notReceived a:focus, .project-area .loginBook .screen.twoFactorError form .loginBox .resend a:focus, .project-area .loginBook .screen.twoFactorMessage form .loginBox .notReceived a:focus, .project-area .loginBook .screen.twoFactorMessage form .loginBox .resend a:focus, .project-area .loginBox .screen.twoFactor form .notReceived a:focus, .project-area .loginBox .screen.twoFactor form .resend a:focus, .project-area .loginBox .screen.twoFactorError form .notReceived a:focus, .project-area .loginBox .screen.twoFactorError form .resend a:focus, .project-area .loginBox .screen.twoFactorMessage form .notReceived a:focus, .project-area .loginBox .screen.twoFactorMessage form .resend a:focus, .project-area .loginBox .loginBook .screens .screen .title h3 a:focus, .project-area .loginBook .screens .screen .title .loginBox h3 a:focus, .project-area .loginBox .loginBook .screens .screen .openLogin a:focus, .project-area .loginBook .screens .screen .loginBox .openLogin a:focus, .project-area .loginBox .loginBook .screens .screen form .external .label a:focus, .project-area .loginBook .screens .screen form .external .loginBox .label a:focus, .project-area .loginBook .screens .screen .loginBox .footer a:focus { color: #1C1C1C; } .project-area .loginBook .screen .signup a, .project-area .loginBox .screen .signup .loginBook a, .project-area .loginBook .loginBox .screen .footer, .project-area .loginBox .screen .loginBook .footer, .project-area .loginBook .screen .signup .loginBox a, .project-area .loginBox .screen .signup a, .project-area .loginBox .screen .footer { color: #BCBCBC; } .project-area .loginBook .screen .changePass, .project-area .loginBook .screen .forgotPass, .project-area .loginBox .screen .loginBook .changePass, .project-area .loginBox .screen .loginBook .forgotPass, .project-area .loginBook .screen .loginBox .changePass, .project-area .loginBook .screen .loginBox .forgotPass, .project-area .loginBox .screen .changePass, .project-area .loginBox .screen .forgotPass { color: #AB4D2E; font-weight: 500; text-transform: uppercase; } .project-area .loginBook .screen .link.changePass:hover, .project-area .loginBook .screen .link.forgotPass:hover, .project-area .loginBox .screen .loginBook .link.changePass:hover, .project-area .loginBox .screen .loginBook .link.forgotPass:hover, .project-area .loginBook .screen .changePass .link:hover, .project-area .loginBook .screen .forgotPass .link:hover, .project-area .loginBox .screen .loginBook .changePass .link:hover, .project-area .loginBox .screen .loginBook .forgotPass .link:hover, .project-area .loginBook .screen .changePass a:hover, .project-area .loginBook .screen .forgotPass a:hover, .project-area .loginBox .screen .loginBook .changePass a:hover, .project-area .loginBox .screen .loginBook .forgotPass a:hover, .project-area .loginBook .screen .loginBox .link.changePass:hover, .project-area .loginBook .screen .loginBox .link.forgotPass:hover, .project-area .loginBox .screen .link.changePass:hover, .project-area .loginBox .screen .link.forgotPass:hover, .project-area .loginBook .screen .loginBox .changePass .link:hover, .project-area .loginBook .screen .loginBox .forgotPass .link:hover, .project-area .loginBox .screen .changePass .link:hover, .project-area .loginBox .screen .forgotPass .link:hover, .project-area .loginBook .screen .loginBox .changePass a:hover, .project-area .loginBook .screen .loginBox .forgotPass a:hover, .project-area .loginBox .screen .changePass a:hover, .project-area .loginBox .screen .forgotPass a:hover { color: #B47A67; } .project-area .loginBook .screen .link.changePass:focus, .project-area .loginBook .screen .link.forgotPass:focus, .project-area .loginBox .screen .loginBook .link.changePass:focus, .project-area .loginBox .screen .loginBook .link.forgotPass:focus, .project-area .loginBook .screen .changePass .link:focus, .project-area .loginBook .screen .forgotPass .link:focus, .project-area .loginBox .screen .loginBook .changePass .link:focus, .project-area .loginBox .screen .loginBook .forgotPass .link:focus, .project-area .loginBook .screen .changePass a:focus, .project-area .loginBook .screen .forgotPass a:focus, .project-area .loginBox .screen .loginBook .changePass a:focus, .project-area .loginBox .screen .loginBook .forgotPass a:focus, .project-area .loginBook .screen .loginBox .link.changePass:focus, .project-area .loginBook .screen .loginBox .link.forgotPass:focus, .project-area .loginBox .screen .link.changePass:focus, .project-area .loginBox .screen .link.forgotPass:focus, .project-area .loginBook .screen .loginBox .changePass .link:focus, .project-area .loginBook .screen .loginBox .forgotPass .link:focus, .project-area .loginBox .screen .changePass .link:focus, .project-area .loginBox .screen .forgotPass .link:focus, .project-area .loginBook .screen .loginBox .changePass a:focus, .project-area .loginBook .screen .loginBox .forgotPass a:focus, .project-area .loginBox .screen .changePass a:focus, .project-area .loginBox .screen .forgotPass a:focus { color: #B47A67; } .project-area .loginBook .screen .headerEmail, .project-area .loginBox .screen .headerEmail { align-items: baseline; } .project-area .loginBook .screen .headerEmail .changeUser, .project-area .loginBook .screen .headerEmail .notYou, .project-area .loginBox .screen .headerEmail .changeUser, .project-area .loginBox .screen .headerEmail .notYou { margin-left: 16px; } .project-area .loginBook .screen .footer, .project-area .loginBox .screen .footer { text-align: center; padding: 0; background: none; } .project-area .loginBook .screen .footer.photographer a, .project-area .loginBox .screen .footer.photographer a { text-decoration: underline; } .project-area .loginBook .screen .disjunction, .project-area .loginBox .screen .disjunction { font-weight: 500; text-align: center; } .project-area .loginBook .screen .title, .project-area .loginBook .screen .loginFooter, .project-area .loginBox .screen .title, .project-area .loginBox .screen .loginFooter { text-align: center; } .project-area .loginBook .screen .title .email, .project-area .loginBook .screen .loginFooter .email, .project-area .loginBox .screen .title .email, .project-area .loginBox .screen .loginFooter .email { font-weight: 500; } .project-area .loginBook .screen button:not(.link):not(.icon4), .project-area .loginBook .screen input:not([type="checkbox"]), .project-area .loginBook .screen select, .project-area .loginBook .screen .password, .project-area .loginBox .screen button:not(.link):not(.icon4), .project-area .loginBox .screen input:not([type="checkbox"]), .project-area .loginBox .screen select, .project-area .loginBox .screen .password { width: 100%; } .project-area .loginBook .screen button, .project-area .loginBook .screen .link, .project-area .loginBox .screen button, .project-area .loginBox .screen .link { border: none; } .project-area .loginBook .screen form .password, .project-area .loginBox .screen form .password { background-color: #F2F2F2; font-weight: 500; letter-spacing: 2px; } .project-area .loginBook .screen form .errorMsg, .project-area .loginBook .screen form .pictimeZFormError, .project-area .loginBox .screen form .errorMsg, .project-area .loginBox .screen form .pictimeZFormError { color: #FF232B; } .project-area .loginBook .screen .social, .project-area .loginBox .screen .social { text-align: center; } .project-area .loginBook .screen .social .brandWebsite, .project-area .loginBox .screen .social .brandWebsite { color: #444444; font-weight: 400; letter-spacing: 1.5px; text-transform: none; } .project-area .loginBook .screen .social .brandWebsite:hover, .project-area .loginBox .screen .social .brandWebsite:hover { color: #BCBCBC; } .project-area .loginBook .screen.resetPassword .headerEmail .changeUser, .project-area .loginBox .screen.resetPassword .headerEmail .changeUser { display: none; } .project-area .loginBook .screen.twoFactor, .project-area .loginBook .screen.twoFactorError, .project-area .loginBook .screen.twoFactorMessage, .project-area .loginBox .screen.twoFactor, .project-area .loginBox .screen.twoFactorError, .project-area .loginBox .screen.twoFactorMessage { height: 100%; } .project-area .loginBook .screen.twoFactor icon-elem, .project-area .loginBook .screen.twoFactorError icon-elem, .project-area .loginBook .screen.twoFactorMessage icon-elem, .project-area .loginBox .screen.twoFactor icon-elem, .project-area .loginBox .screen.twoFactorError icon-elem, .project-area .loginBox .screen.twoFactorMessage icon-elem { margin: 0 auto; } .project-area .loginBook .screen.twoFactor icon-elem[name="sms"], .project-area .loginBook .screen.twoFactorError icon-elem[name="sms"], .project-area .loginBook .screen.twoFactorMessage icon-elem[name="sms"], .project-area .loginBox .screen.twoFactor icon-elem[name="sms"], .project-area .loginBox .screen.twoFactorError icon-elem[name="sms"], .project-area .loginBox .screen.twoFactorMessage icon-elem[name="sms"] { --icon-size: 56px; } .project-area .loginBook .screen.twoFactor form, .project-area .loginBook .screen.twoFactorError form, .project-area .loginBook .screen.twoFactorMessage form, .project-area .loginBox .screen.twoFactor form, .project-area .loginBox .screen.twoFactorError form, .project-area .loginBox .screen.twoFactorMessage form { flex: 1; align-items: center; justify-content: space-between; text-align: center; } .project-area .loginBook .screen.twoFactor form .message, .project-area .loginBook .screen.twoFactorError form .message, .project-area .loginBook .screen.twoFactorMessage form .message, .project-area .loginBox .screen.twoFactor form .message, .project-area .loginBox .screen.twoFactorError form .message, .project-area .loginBox .screen.twoFactorMessage form .message { line-height: 150%; } .project-area .loginBook .screen.twoFactor form .resend button, .project-area .loginBook .screen.twoFactorError form .resend button, .project-area .loginBook .screen.twoFactorMessage form .resend button, .project-area .loginBox .screen.twoFactor form .resend button, .project-area .loginBox .screen.twoFactorError form .resend button, .project-area .loginBox .screen.twoFactorMessage form .resend button { height: 32px; } .project-area .loginBook .screen.twoFactor form.showResend .notReceived, .project-area .loginBook .screen.twoFactorError form.showResend .notReceived, .project-area .loginBook .screen.twoFactorMessage form.showResend .notReceived, .project-area .loginBox .screen.twoFactor form.showResend .notReceived, .project-area .loginBox .screen.twoFactorError form.showResend .notReceived, .project-area .loginBox .screen.twoFactorMessage form.showResend .notReceived { display: none; } .project-area .loginBook .screen.twoFactor form:not(.showResend) .resend, .project-area .loginBook .screen.twoFactorError form:not(.showResend) .resend, .project-area .loginBook .screen.twoFactorMessage form:not(.showResend) .resend, .project-area .loginBox .screen.twoFactor form:not(.showResend) .resend, .project-area .loginBox .screen.twoFactorError form:not(.showResend) .resend, .project-area .loginBox .screen.twoFactorMessage form:not(.showResend) .resend { display: none; } .project-area .loginBook .screen.twoFactorMessage, .project-area .loginBox .screen.twoFactorMessage { color: #444444; } .project-area .loginBook .screen.twoFactorMessage .svg-icon:not(.fill-icon), .project-area .loginBox .screen.twoFactorMessage .svg-icon:not(.fill-icon) { stroke: #444444; fill: transparent; } .project-area .loginBook .screen.twoFactorMessage .svg-icon.fill-icon, .project-area .loginBox .screen.twoFactorMessage .svg-icon.fill-icon { fill: #444444; } .project-area .loginBook .screen.twoFactorMessage form, .project-area .loginBox .screen.twoFactorMessage form { justify-content: start; } .project-area .loginBook .screen.twoFactorMessage, .project-area .loginBox .screen.twoFactorMessage { justify-content: center; --icon-size: 48px; } .project-area .loginBook { width: 100%; } .project-area .loginBook .screen.error-email input[type="email"], .project-area .loginBox .screen.error-email .loginBook input[type="email"], .project-area .loginBook .screen.error-code input[type="code"], .project-area .loginBox .screen.error-code .loginBook input[type="code"], .project-area .loginBook .screen.error-pass .passField input, .project-area .loginBox .screen.error-pass .passField .loginBook input, .project-area .loginBook .screen.error-all input[type="email"], .project-area .loginBook .screen.error-all input[type="code"], .project-area .loginBook .screen.error-all .passField input, .project-area .loginBox .screen.error-all .loginBook input[type="email"], .project-area .loginBox .screen.error-all .loginBook input[type="code"], .project-area .loginBox .screen.error-all .passField .loginBook input { background-image: none; border-bottom: 1px solid #FF232B; } .project-area .loginBook .screens { background-image: linear-gradient(to right, #1C1C1C 14.28571%, transparent 14.28571%), linear-gradient(to right, #1C1C1C 14.28571%, transparent 14.28571%); background-size: 7px 1px, 7px 1px; background-repeat: repeat-x, repeat-x; background-position: left top, left bottom; } .project-area .loginBook .screens .screen .title { font-family: "Crimson Text", serif; } .project-area .loginBook .screens .screen .title .galleryName { letter-spacing: 2px; } .project-area .loginBook .screens .screen .passField .showPass { right: -4px; } .project-area .loginBook .screens .screen [type="submit"] { border: 1px solid #444444; font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif; background-color: #FFFFFF; letter-spacing: 2px; text-transform: uppercase; } .project-area .loginBook .screens .screen [type="submit"]:hover { background-color: #F9F9F9; } .project-area .loginBook .screens .screen [type="submit"]:focus { background-color: #F9F9F9; } .project-area .loginBook .screens .screen [type="submit"]:hover, .project-area .loginBook .screens .screen [type="submit"]:focus { border: 1px solid #868686; } .project-area .loginBook .screens .screen form input:not([type="checkbox"]) { border: none; background-image: linear-gradient(to right, #1C1C1C 14.28571%, transparent 14.28571%); background-size: 7px 1px; background-repeat: repeat-x; background-position: left bottom; font-family: "Crimson Text", serif; } .project-area .loginBook .screens .screen form input:not([type="checkbox"])::placeholder { font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif; color: #868686; } .project-area .loginBook .screens .screen form select { border: none; background-image: linear-gradient(to right, #1C1C1C 14.28571%, transparent 14.28571%); background-size: 7px 1px; background-repeat: repeat-x; background-position: left bottom; font-family: "Crimson Text", serif; } .project-area .loginBook .screens .screen form select option { font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif; } .project-area .loginBook .screens .screen form .fieldInvalid select, .project-area .loginBook .screens .screen form .fieldInvalid input:not([type="checkbox"]) { background-image: linear-gradient(to right, #FF232B 25%, transparent 25%); background-size: 7px 2px; background-repeat: repeat-x; background-position: left bottom; margin-bottom: 4px; } .project-area .loginBook .screens .screen form .external .label { font-family: "Crimson Text", serif; } .project-area .loginBook .screens .screen form .external button { font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif; background-color: #F2F2F2; text-transform: uppercase; letter-spacing: 1px; } .project-area .loginBook .screens .screen form .external button:hover { background-color: #ECECEC; } .project-area .loginBook .screens .screen form .external button:focus { background-color: #ECECEC; } .project-area .loginBook .screen.error-email .loginBox input[type="email"], .project-area .loginBox .screen.error-email input[type="email"], .project-area .loginBook .screen.error-code .loginBox input[type="code"], .project-area .loginBox .screen.error-code input[type="code"], .project-area .loginBook .screen.error-pass .passField .loginBox input, .project-area .loginBox .screen.error-pass .passField input, .project-area .loginBook .screen.error-all .loginBox input[type="email"], .project-area .loginBook .screen.error-all .loginBox input[type="code"], .project-area .loginBook .screen.error-all .passField .loginBox input, .project-area .loginBox .screen.error-all input[type="email"], .project-area .loginBox .screen.error-all input[type="code"], .project-area .loginBox .screen.error-all .passField input { border: 1px solid #FF232B; } .project-area .loginBox .screen .title .galleryName { font-family: "Crimson Text", serif; letter-spacing: 2px; } .project-area .loginBox .screen .title h2 { font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; } .project-area .loginBox .screen form button:not(.link):not(.icon4) { font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif; background-color: #ECECEC; text-transform: uppercase; letter-spacing: 1px; } .project-area .loginBox .screen form button:not(.link):not(.icon4):hover { background-color: #E0E0E0; } .project-area .loginBox .screen form button:not(.link):not(.icon4):focus { background-color: #E0E0E0; } .project-area .loginBox .screen form .back, .project-area .loginBox .screen form button:not(#dummy)[type="submit"] { font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif; color: #FFFFFF; background-color: #444444; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; } .project-area .loginBox .screen form .back:hover, .project-area .loginBox .screen form button:not(#dummy)[type="submit"]:hover { background-color: #1C1C1C; } .project-area .loginBox .screen form .back:focus, .project-area .loginBox .screen form button:not(#dummy)[type="submit"]:focus { background-color: #1C1C1C; } .project-area .loginBox .screen form input:not([type="checkbox"]) { border: 1px solid #D0D0D0; } .project-area .loginBox .screen form input:not([type="checkbox"]):focus { border: 1px solid #444444; } .project-area .loginBox .screen form input:not([type="checkbox"])::placeholder { font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif; color: #868686; } .project-area body.login .projectCover, .project-area body.login .accountCover, .project-area body.login .photographerCover { background-size: cover; background-color: #ECECEC; } .project-area body.login .projectCover.projectCover:before, .project-area body.login .accountCover.projectCover:before, .project-area body.login .photographerCover.projectCover:before { content: ""; background: #1C1C1C99; } .project-area body.login #maincanvas, .project-area body.login #useraccount { min-height: 98vh; } .project-area body.login #maincanvas .loginBox, .project-area body.login #useraccount .loginBox { margin: 32px; /* position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); */ } .project-area .loginDialog .window { width: auto; } .project-area .loginDialog .window .content { line-height: 100%; } .project-area .userlogin .icon4.favorites { background-position: -240px -1760px; } .project-area .userlogin .icon4.showPass { background-position: -240px -680px; } .project-area .userlogin .icon4.showPass:hover { background-position: -200px -680px; } .project-area .userlogin .icon4.showPass.active { background-position: -240px -720px; } .project-area .userlogin .icon4.showPass.active:hover { background-position: -200px -720px; } .project-area .userlogin .icon4Before.back:before { background-position: -20px -1260px; } .project-area .userlogin .icon4Before.back:hover:before { background-position: -20px -1280px; } .project-area .userlogin .icon4Before[data-type="facebook"]:before { background-position: 0 -1720px; } .project-area .userlogin .icon4Before[data-type="google"]:before { background-position: 0 -1680px; } .project-area .userlogin .checkbox.icon4Before:before { background-position: 0 -1760px; } .project-area .userlogin .checkbox.icon4Before:hover:before { background-position: -20px -1760px; } .project-area .userlogin :checked ~ .checkbox.icon4Before:before { background-position: 0 -1780px; } .project-area .userlogin :checked ~ .checkbox.icon4Before:hover:before { background-position: -20px -1780px; } .project-area .userlogin .checkboxField label:before { background-position: 0 -1760px; } .project-area .userlogin .checkboxField label:hover:before { background-position: -20px -1760px; } .project-area .userlogin .checkboxField :checked ~ label:before { background-position: 0 -1780px; } .project-area .userlogin .checkboxField :checked ~ label:hover:before { background-position: -20px -1780px; } .project-area .userlogin .selectField:after { background-position: 0px 0px; } .project-area .userlogin .screen button:not(.link):not(.icon4), .project-area .userlogin .screen input:not([type="checkbox"]), .project-area .userlogin .screen select, .project-area .userlogin .screen .checkboxField label, .project-area .userlogin .screen .password { height: 48px; } .project-area .userlogin .screen button:not(.link) { font-size: 14px; } .project-area .userlogin .screen .passDesc { font-size: 15px; line-height: 166%; } .project-area .userlogin .screen .passDesc .passDescTop { white-space: pre-line; } .project-area .userlogin .screen .passDesc .galleryList { font-size: 14px; } .project-area .userlogin .screen form .password { font-size: 30px; } .project-area .userlogin .screen form .errorMsg { margin-bottom: 8px; margin-right: auto; } .project-area .userlogin .screen form .checkbox:before { margin-right: 10px; } .project-area .userlogin .screen form .policyMessage { margin-top: 8px; line-height: 135%; } .project-area .userlogin .screen form .pictimeZForm .pictimeZFormError { font-size: 10px; } .project-area .userlogin .screen form .pictimeZForm .checkboxField { margin: 8px 0; } .project-area .userlogin .screen form .pictimeZForm .checkboxField label:not(#dummy):before { margin-right: 10px; margin-top: -2px; } .project-area .userlogin .screen .social { margin-top: 120px; } .project-area .userlogin .screen .social .brandWebsite { font-size: 14px; letter-spacing: 1.5px; } .project-area .userlogin .screen .social .socialLinks { margin-top: 24px; } .project-area .loginBook { padding: 8vh 0; font-size: 13px; } .project-area .loginBook:not(.fixedScreen) { height: calc( 504px + 16vh); } .project-area .loginBook .screen { padding: 8vh; } .project-area .loginBook .screen .header { margin-bottom: 40px; } .project-area .loginBook .screen .title .galleryName { font-size: 18px; } .project-area .loginBook .screen .title h2 { margin-top: 24px; font-size: 34px; } .project-area .loginBook .screen .title h3 { margin-top: 16px; font-size: 16px; } .project-area .loginBook .screen input:not([type="checkbox"]), .project-area .loginBook .screen select, .project-area .loginBook .screen .checkboxField label { height: 32px; } .project-area .loginBook .screen button:not(.link):not(.icon4), .project-area .loginBook .screen input:not([type="checkbox"]), .project-area .loginBook .screen select, .project-area .loginBook .screen .checkboxField label, .project-area .loginBook .screen .password { margin: 8px auto; } .project-area .loginBook .screen .local input:not([type="checkbox"]):not(:first-child) { margin-top: 24px; } .project-area .loginBook .screen .local button:not(.link):not(.icon4) { margin-top: auto; margin-top: 24px; } .project-area .loginBook .screen form { display: flex; } .project-area .loginBook .screen form .local, .project-area .loginBook .screen form .external { justify-content: flex-end; position: relative; width: 304px; margin: 56px 60px; } .project-area .loginBook .screen form .pictimeZForm { width: 304px; margin-top: 40px; } .project-area .loginBook .screen form .pictimeZForm .textField input { padding: 0; } .project-area .loginBook .screen form .password { margin-top: 24px; } .project-area .loginBook .screen form .forgotPass { margin-top: 16px; } .project-area .loginBook .screen form .openLogin { margin-top: 8px; } .project-area .loginBook .screen form .link.skip { margin: 16px auto; } .project-area .loginBook .screen form input:not([type="checkbox"]), .project-area .loginBook .screen form select { font-size: 16px; } .project-area .loginBook .screen form input:not([type="checkbox"]) option, .project-area .loginBook .screen form input:not([type="checkbox"])::placeholder, .project-area .loginBook .screen form select option, .project-area .loginBook .screen form select::placeholder { font-size: 13px; } .project-area .loginBook .screen form .external .label { font-size: 16px; margin-bottom: 32px; } .project-area .loginBook .screen form .external button:before { margin-right: 8px; } .project-area .loginBook .screen form .changePass { margin: 8px auto 72px; } .project-area .loginBook .screen form .allowEmails { position: absolute; top: 100%; margin: 8px 0; } .project-area .loginBook .screen form .allowEmails .icon4Before:before { margin-top: -2px; } .project-area .loginBook .screen .footer { margin-top: 40px; } .project-area .loginBook .screen:not(.guestBook) form { width: 304px; margin-top: 56px; } .project-area .loginBook .screen.newPassword form { width: 384px; } .project-area .loginBook .screen.getPassword form, .project-area .loginBook .screen.setPassword form { width: 384px; margin-top: 96px; } .project-area .loginBook .screen.getPassword form [type="submit"], .project-area .loginBook .screen.setPassword form [type="submit"] { margin-top: 88px; } .project-area .loginBook .screen.getPassword .header, .project-area .loginBook .screen.forgotPassword .header, .project-area .loginBook .screen.setPassword .header { width: 384px; } .project-area .loginBook .screen.forgotPassword form { margin-top: 80px; } .project-area .loginBook .screen.forgotPassConfirm h2, .project-area .loginBook .screen.externalError h2 { margin-top: 176px; } .project-area .loginBook .screen.forgotPassConfirm form, .project-area .loginBook .screen.externalError form { margin-top: 72px; } .project-area .loginBook .screen.preRegister button[type="submit"], .project-area .loginBook .screen.requestAccess button[type="submit"] { margin-top: 24px; } .project-area .loginBook .screen.preRegister .footer { margin-top: 72px; } .project-area .loginBook .screen.requestAccess .footer { margin-top: 48px; } .project-area .loginBook .screen.confirmPreReg h2, .project-area .loginBook .screen.confirmRequest h2 { margin-top: 136px; } .project-area .loginBox { width: 760px; height: 632px; font-size: 14px; } .project-area .loginBox .screen { padding: 40px; } .project-area .loginBox .screen .header { margin-bottom: 48px; } .project-area .loginBox .screen .title .galleryName { font-size: 20px; } .project-area .loginBox .screen .title h2 { margin-top: 48px; font-size: 22px; } .project-area .loginBox .screen .title h3 { margin: 24px 0; font-size: 14px; } .project-area .loginBox .screen .title .passDesc { margin-top: 32px; } .project-area .loginBox .screen button:not(.link):not(.icon4):not(.icon4Before), .project-area .loginBox .screen input:not([type="checkbox"]):not(.icon4Before), .project-area .loginBox .screen select:not(.icon4Before), .project-area .loginBox .screen .checkboxField label:not(.icon4Before), .project-area .loginBox .screen .password:not(.icon4Before) { margin: 8px auto; } .project-area .loginBox .screen form { width: 480px; margin-top: 48px; } .project-area .loginBox .screen form .forgotPass { margin-top: 16px; } .project-area .loginBox .screen form .link.skip { margin: 16px auto 8px; } .project-area .loginBox .screen form input:not([type="checkbox"]), .project-area .loginBox .screen form select { padding-left: 16px; font-size: 16px; } .project-area .loginBox .screen form .disjunction { margin: 16px auto; } .project-area .loginBox .screen form .external { display: flex; justify-content: space-between; margin: 72px -8px 24px; } .project-area .loginBox .screen form .external input:not(#dummy), .project-area .loginBox .screen form .external button:not(#dummy) { margin: 0 8px; } .project-area .loginBox .screen form .external input:not(#dummy):before, .project-area .loginBox .screen form .external button:not(#dummy):before { margin-right: 16px; } .project-area .loginBox .screen form .forgotPassWrap { display: flex; justify-content: space-around; margin: 40px -8px 24px; } .project-area .loginBox .screen form .forgotPassWrap .forgotPass { flex: 1 0 auto; } .project-area .loginBox .screen form .forgotPassWrap .forgotPass:first-child:not(:last-child):after { content: '|'; display: block; position: absolute; right: 0; top: 0; } .project-area .loginBox .screen form .namedAccessCode { display: flex; justify-content: space-between; margin: 0 -8px; } .project-area .loginBox .screen form .namedAccessCode input:not(#dummy) { margin: 8px; } .project-area .loginBox .screen form .changePass { margin: 8px auto 72px; } .project-area .loginBox .screen form .allowEmails { align-items: center; margin: 16px 0; } .project-area .loginBox .screen.newPassword form, .project-area .loginBox .screen.newFirstTimePassword form, .project-area .loginBox .screen.externalError form, .project-area .loginBox .screen.galleryPrivate form, .project-area .loginBox .screen.forgotPassword form, .project-area .loginBox .screen.forgotPassConfirm form { width: 384px; } .project-area .loginBox .screen.newFirstTimePassword .header { margin-bottom: 144px; } .project-area .loginBox .screen.newFirstTimePassword h2 { margin-top: 40px; } .project-area .loginBox .screen.getEmailPhotographer .title { margin-top: 8px; } .project-area .loginBox .screen.getEmailPhotographer .signup { margin-top: 56px; } .project-area .loginBox .screen.getEmailPhotographer .footer { margin-top: 48px; } .project-area .loginBox .screen.getEmailUnique .title { margin-top: 40px; } .project-area .loginBox .screen.getEmailUnique .title h2 { margin-top: 104px; } .project-area .loginBox .screen.getEmailUnique form { margin-top: 16px; } .project-area .loginBox .screen.getEmailUnique form .notMe { margin-top: 64px; } .project-area .loginBox .screen.getEmailUnique .external { margin-top: 88px; } .project-area .loginBox .screen.getPasswordUnique .header { margin-bottom: 80px; } .project-area .loginBox .screen.getPasswordUnique h2 { margin-top: 24px; } .project-area .loginBox .screen.getPasswordUnique.hasPassDesc .header { margin-bottom: 48px; } .project-area .loginBox .screen.getPasswordUnique.hasPassDesc form { margin-top: 32px; } .project-area .loginBox .screen.getPasswordUnique.hasPassDescGalleries .header { margin-bottom: 32px; } .project-area .loginBox .screen.getPassword.hasPassDesc h2 { margin-top: 40px; } .project-area .loginBox .screen.getPassword.hasPassDesc form { margin-top: 32px; } .project-area .loginBox .screen.getPassword.hasPassDescGalleries h2 { margin-top: 24px; } .project-area .loginBox .screen.getPassword .footer, .project-area .loginBox .screen.getPasswordUnique .footer { margin-top: 40px; } .project-area .loginBox .screen.forgotPassword h3 { margin-bottom: 0; } .project-area .loginBox .screen.forgotPassword form .notMe { margin-top: 64px; } .project-area .loginBox .screen.forgotPassConfirm h2, .project-area .loginBox .screen.externalError h2 { margin-top: 152px; } .project-area .loginBox .screen.externalLogin h2 { margin-top: 80px; } .project-area .loginBox .screen.externalLogin h3 { margin: 32px auto 0; } .project-area .loginBox .screen.externalLogin form .back:not(#dummy) { margin-top: 16px; } .project-area .loginBox .screen.forgotPassConfirm h2 { margin-top: 80px; margin-bottom: 16px; } .project-area .loginBox .screen.getAccessCode h2 { margin-top: 56px; } .project-area .loginBox .screen.getAccessCode h3 { margin: 16px auto 0; } .project-area .loginBox .screen.getAccessCode form { margin-top: 48px; } .project-area .loginBox .screen.getAccessCode form .external { margin-top: 48px; } .project-area .loginBox .screen.getAccessCode form [type="submit"] { margin-top: 24px; } .project-area .loginBox .screen.getAccessCode .loginFooter { margin-top: 64px; } .project-area .loginBox .screen.getAccessCode .loginFooter * { margin: 8px 0; } .project-area .loginBox .screen.getAccessCode .bannerLogo { margin-top: -8px; } .project-area .loginBox .screen.getAccessCode .bannerLogo + h2 { margin-top: 32px; } .project-area .loginBox .screen.optionalSkip .title { margin-top: 80px; } .project-area .loginBox .screen.optionalSkip .title h2 { margin-top: 56px; } .project-area .loginBox .screen.optionalSkip form { margin-top: 32px; } .project-area .loginBox .screen.twoFactor .title h2:not(#dummy), .project-area .loginBox .screen.twoFactorError .title h2:not(#dummy) { margin-top: 104px; } .project-area .loginBox .screen.twoFactor form, .project-area .loginBox .screen.twoFactorError form { margin-top: 60px; } .project-area .loginBox .screen.twoFactor form .notReceived, .project-area .loginBox .screen.twoFactor form .resend, .project-area .loginBox .screen.twoFactorError form .notReceived, .project-area .loginBox .screen.twoFactorError form .resend { margin-bottom: 40px; } .project-area .loginBox .screen.twoFactor form icon-elem, .project-area .loginBox .screen.twoFactorError form icon-elem { margin-top: 32px; } .project-area .loginBox .screen.twoFactorMessage button:not(#dummy) { margin-top: 24px; } .project-area .loginBox .screen.twoFactorMessage .verified .label { margin-top: 24px; } .project-area .loginBox.shortBox { height: 576px; } .project-area .loginBox.shortBox .screen .header { margin-bottom: 8px; } .project-area .loginBox.shortBox .screen .title h2 { margin-top: 80px; margin-bottom: 0; } .project-area .loginBox.shortBox .screen .external { margin: 56px -8px 24px; } .project-area .loginBox.shortBox .screen.setPassword .changeUser, .project-area .loginBox.shortBox .screen.setPassword .notYou { display: none; } .project-area .loginBox.shortBox .screen.getPassword.hasPassDesc h2 { margin-top: 48px; } .project-area .loginBox.shortBox .screen.getPassword.hasPassDesc .forgotPassWrap { margin-top: 24px; } .project-area .loginBox.shortBox .screen.forgotPassConfirm h2, .project-area .loginBox.shortBox .screen.externalError h2 { margin-top: 160px; } .project-area .loginBox.shortBox .screen.resetExpired h2 { margin-top: 104px; } .project-area .loginBox.shortBox .screen.resetExpired form { margin-top: 32px; } .project-area .loginBox.shortBox .screen.resetExpired .resetAbort { margin-top: 56px; } .project-area .loginBox.shortBox .screen.galleryPrivate h2 { margin-top: 120px; } .project-area .loginBox.shortBox .screen.galleryPrivate form { margin-top: 72px; } .project-area .collectionSelect { z-index: 2147483639; } .project-area .collectionSelect .btn { cursor: pointer; } .project-area .collectionSelect .dialogContent { display: grid; grid: 120px auto 100px / 300px auto; grid-template-areas: "title optionsPanel" "collections thumbPanel" "collections formPanel"; } .project-area .collectionSelect .dialogContent > * { position: initial; justify-items: stretch; align-items: stretch; width: auto; height: auto; margin: 0; padding: 0; border: none; overflow: auto; } .project-area .collectionSelect .dialogContent > .title { grid-area: title; padding: 0 40px; border-right: 1px solid #E0E0E0; } .project-area .collectionSelect .dialogContent .formPanel { grid-area: formPanel; display: flex; align-items: center; justify-content: flex-end; } .project-area .collectionSelect .dialogContent .formPanel .buttons { padding: 0 30px; display: flex; flex-direction: row-reverse; align-items: center; } .project-area .collectionSelect .dialogContent .formPanel .buttons .pButtonStandard { font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif; font-size: 13px; color: #FFFFFF; background-color: #444444; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 10px; width: auto; height: 40px; min-width: 230px; padding: 0 20px; border: none; } .project-area .collectionSelect .dialogContent .formPanel .buttons .pButtonStandard[disabled] { color: #BCBCBC; background-color: #868686; } .project-area .collectionSelect .dialogContent .formPanel .buttons .pButtonStandard:not([disabled]):hover { background-color: #1C1C1C; } .project-area .collectionSelect .dialogContent .formPanel .buttons .info { font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif; font-size: 13px; color: #444444; font-weight: 400; letter-spacing: 0.2px; text-transform: none; margin: 0 20px; text-align: right; } .project-area .collectionSelect .dialogContent .formPanel .buttons .info * + :last-child { font-weight: 700; } .project-area .collectionSelect .dialogContent .optionsPanel { grid-area: optionsPanel; display: flex; justify-content: flex-end; align-items: center; padding: 0px 100px 5px 50px; } .project-area .collectionSelect .dialogContent .optionsPanel .title { margin-right: auto; } .project-area .collectionSelect .dialogContent .optionsPanel .title * { display: inline-block; } .project-area .collectionSelect .dialogContent .optionsPanel .btn { margin: 0px 20px; } .project-area .collectionSelect .dialogContent .optionsPanel .normalSize { cursor: pointer; background-position: -40px -520px; } .project-area .collectionSelect .dialogContent .optionsPanel .normalSize:hover { background-position: -120px -520px; } .project-area .collectionSelect .dialogContent .optionsPanel .largeSize { cursor: pointer; background-position: -40px -560px; } .project-area .collectionSelect .dialogContent .optionsPanel .largeSize:hover { background-position: -120px -560px; } .project-area .collectionSelect .dialogContent .thumbPanel { grid-area: thumbPanel; overflow: hidden; } .project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos { position: initial; height: 100%; } .project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos .pnlLeft { overflow: auto; } .project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos .pnlLeft .photoList ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 40px; padding: 0; } .project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos .pnlLeft .photoList ul li { position: relative; margin: 10px; padding: 0; } .project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos .pnlLeft .photoList ul li.phantom { height: 0; margin-top: 0; margin-bottom: 0; } .project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos .pnlLeft .photoList ul li .simpleTooltip { width: max-content; margin-left: 50%; transform: translateX(-50%); } .project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos .pnlLeft .photoList ul :after { content: ''; flex: auto; } .project-area .collectionSelect .dialogContent .thumbPanel .choose, .project-area .collectionSelect .dialogContent .thumbPanel .empty, .project-area .collectionSelect .dialogContent .thumbPanel .progress { display: flex; justify-content: center; align-items: center; height: 100%; } .project-area .collectionSelect .dialogContent .collections { font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif; font-size: 13px; color: #444444; font-weight: 400; letter-spacing: 0.2px; text-transform: none; grid-area: collections; padding: 0 20px 70px; border-right: 1px solid #E0E0E0; } .project-area .collectionSelect .dialogContent .collections .section { margin-top: 15px; } .project-area .collectionSelect .dialogContent .collections .title, .project-area .collectionSelect .dialogContent .collections .btn { display: flex; align-items: center; position: relative; border: none; padding: 0 20px; width: 100%; height: 36px; box-sizing: border-box; } .project-area .collectionSelect .dialogContent .collections .title.title, .project-area .collectionSelect .dialogContent .collections .btn.title { font-weight: 700; letter-spacing: 1px; } .project-area .collectionSelect .dialogContent .collections .title.btn:not(.active):not(.disabled):hover, .project-area .collectionSelect .dialogContent .collections .btn.btn:not(.active):not(.disabled):hover { background-color: #F9F9F9; } .project-area .collectionSelect .dialogContent .collections .title.active, .project-area .collectionSelect .dialogContent .collections .btn.active { background-color: #F2F2F2; } .project-area .collectionSelect .dialogContent .collections .title.active:hover, .project-area .collectionSelect .dialogContent .collections .btn.active:hover { background-color: #F2F2F2; } .project-area .collectionSelect .dialogContent .collections .title.disabled, .project-area .collectionSelect .dialogContent .collections .btn.disabled { color: #BCBCBC; } .project-area .collectionSelect .dialogContent .collections .title .name, .project-area .collectionSelect .dialogContent .collections .btn .name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .project-area .collectionSelect .dialogContent .collections .title .date, .project-area .collectionSelect .dialogContent .collections .btn .date { margin-left: 10px; } .project-area .collectionSelect .dialogContent .collections .notification { margin-left: 20px; width: auto; height: 15px; line-height: 14px; padding-left: 4px; padding-right: 4px; background-color: #333333; border-radius: 8px; color: white; font-size: 11px; } .project-area .collectionSelect .dialogContent.showChoose .formPanel, .project-area .collectionSelect .dialogContent.showChoose .optionsPanel, .project-area .collectionSelect .dialogContent.showChoose .selectPhotos, .project-area .collectionSelect .dialogContent.showEmpty .formPanel, .project-area .collectionSelect .dialogContent.showEmpty .optionsPanel, .project-area .collectionSelect .dialogContent.showEmpty .selectPhotos, .project-area .collectionSelect .dialogContent.showProgress .formPanel, .project-area .collectionSelect .dialogContent.showProgress .optionsPanel, .project-area .collectionSelect .dialogContent.showProgress .selectPhotos { display: none; } .project-area .collectionSelect .dialogContent:not(.showChoose) .choose { display: none; } .project-area .collectionSelect .dialogContent:not(.showEmpty) .empty, .project-area .collectionSelect .dialogContent.showProgress .empty { display: none; } .project-area .collectionSelect .dialogContent:not(.showProgress) .progress { display: none; } .project-area .collectionSelect .dialogCloseIcon { position: absolute; right: 35px; top: 35px; } .project-area .dynamicAdBlock { transition: all 400ms; z-index: 2 !important; } .project-area .dynamicAdBlock.expanded { height: auto !important; width: auto !important; z-index: 5 !important; } .mobileDevice .project-area .dynamicAdBlock.expanded { z-index: 5 !important; } .project-area .dynamicAdBlock .dynamicAd { transition: all 400ms; } .project-area .dynamicAdBlock .dynamicAd iframe { width: 100%; height: 100%; border: none; background: White; } .project-area .dynamicAdBlock .icon.close { position: absolute; height: 25px; width: 25px; top: 10px; right: 13px; border: none; pointer-events: none; background-color: transparent; background-position: -145px -35px; } .project-area .dynamicAdBlock:not(.expanded) .icon.close { display: none; } .project-area .dynamicAdBlock:after { content: none !important; } .project-area .footer .social, .project-area .socialLinks { text-align: center; width: 260px; margin-left: auto; margin-right: auto; margin-bottom: 40px; } .project-area .footer .social div, .project-area .footer .social button, .project-area .socialLinks div, .project-area .socialLinks button { display: inline-block; margin-left: 25px; margin-right: 25px; width: 20px; height: 20px; cursor: pointer; } .project-area .footer .social div:first-child, .project-area .footer .social button:first-child, .project-area .socialLinks div:first-child, .project-area .socialLinks button:first-child { margin-left: 0; } .project-area .footer .social div:last-child, .project-area .footer .social button:last-child, .project-area .socialLinks div:last-child, .project-area .socialLinks button:last-child { margin-right: 0; } .project-area .footer .social .twitter, .project-area .socialLinks .twitter { background-position: 0 -800px; } .project-area .footer .social .twitter:hover, .project-area .socialLinks .twitter:hover { background-position: 0 -820px; } .project-area .footer .social .facebook, .project-area .socialLinks .facebook { background-position: 0 -760px; } .project-area .footer .social .facebook:hover, .project-area .socialLinks .facebook:hover { background-position: 0 -780px; } .project-area .footer .social .instagram, .project-area .socialLinks .instagram { background-position: 0 -840px; } .project-area .footer .social .instagram:hover, .project-area .socialLinks .instagram:hover { background-position: 0 -860px; } .project-area .footer .social .email, .project-area .socialLinks .email { background-position: 0 -1480px; } .project-area .footer .social .email:hover, .project-area .socialLinks .email:hover { background-position: 0 -1500px; } .mobileDevice .project-area .footer .social .twitter, .mobileDevice .project-area .socialLinks .twitter { background-position: -252px -72px; } .mobileDevice .project-area .footer .social .facebook, .mobileDevice .project-area .socialLinks .facebook { background-position: -252px -37px; } .mobileDevice .project-area .footer .social .instagram, .mobileDevice .project-area .socialLinks .instagram { background-position: -252px -107px; } .mobileDevice .project-area .footer .social .email, .mobileDevice .project-area .socialLinks .email { background-position: -253px -667px; } .project-area .dialog-2.userBlockedDialog .userBlockedContent, .project-area .mobileDialog.userBlockedDialog .userBlockedContent { text-align: left; line-height: 150%; } @media (min-width: 651px) { .project-area .dialog-2.userBlockedDialog .userBlockedContent, .project-area .mobileDialog.userBlockedDialog .userBlockedContent { width: 320px; padding: 40px; } } @media (max-width: 650px) { .project-area .dialog-2.userBlockedDialog .userBlockedContent, .project-area .mobileDialog.userBlockedDialog .userBlockedContent { padding: 12px; } } .project-area .dialog-2.userBlockedDialog .userBlockedContent .errorSubMessage, .project-area .mobileDialog.userBlockedDialog .userBlockedContent .errorSubMessage { margin-top: 32px; } .project-area .dialog-2.userBlockedDialog .userBlockedContent .errorUnblockBtn, .project-area .mobileDialog.userBlockedDialog .userBlockedContent .errorUnblockBtn { margin-top: 24px; width: 100%; } .project-area .dialog-2.userBlockedDialog .userBlockedContent .errorFooterMessage, .project-area .mobileDialog.userBlockedDialog .userBlockedContent .errorFooterMessage { margin-top: 88px; } .project-area .dialog-2.userBlockedDialog .userBlockedContent .errorReCaptcha, .project-area .mobileDialog.userBlockedDialog .userBlockedContent .errorReCaptcha { margin-top: 24px; width: 220px; height: 50px; background-repeat: no-repeat; background-size: cover; background-position: center; } svg.medium { width: 30px; height: 30px; }