/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,800;1,300;1,500;1,900&display=swap');*/ @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap'); @font-face { font-family: 'Arista'; src: url('/includes/font/AristaLight.woff2') format('woff2'), url('/includes/font/AristaLight.woff') format('woff'), url('/includes/font/AristaLight.svg#AristaLight') format('svg'); font-weight: 300; font-style: normal; font-display: swap; } * { -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; font-smoothing:antialiased; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility !important; } * { margin:0; padding:0; border:0; } html, body { width:100%; height:100%; margin:0; padding:0; font-family: "Work Sans", sans-serif; font-optical-sizing:auto; font-size:1em !important; font-weight:400; line-height:1.6em; letter-spacing:-.01em; } body { width:100%; height:100%; min-height:100vh; margin:0; top:0px !important; --color-text: #333; --color-text-light: #fff; --color-text-medium: #666; --color-text-dark: #111; --color-text-coloured: #99cc33; --color-bg: #f0f0f0; --color-bg-overlay: #111; --color-bg-coloured: #99cc33; --color-dark: #191919; --color-alert: #ffd800; --color-loading: #99cc33; --color-coloured: #99cc33; --color-success: #55ce63; --color-error: #e62875; --color-warning: #ffd800; --color-link: #333; --color-link-light: #fff; --color-link-hover: #99cc33; --color-link-coloured: #99cc33; --color-link-coloured-hover: #111; --color-menu: #fff; --color-menu-hover: #99cc33; --color-menu-current: #99cc33; --color-menu-hover-dark: #111; --color-menu-current-dark: #111; --color-footer: #999; --color-footer-link: #999; --color-footer-hover: #99cc33; --color-footer-bg: #111; --color-menuoverlay: #99cc33; --color-menuoverlay-hover: #111; --color-menuoverlay-current: #111; color: var(--color-text); background-color: var(--color-bg); -ms-overflow-x: hidden; overflow-x: hidden; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -o-font-smoothing:antialiased; -ms-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility !important; -webkit-font-smoothing:subpixel-antialiased; -moz-font-smoothing:subpixel-antialiased; -o-font-smoothing:subpixel-antialiased; -ms-font-smoothing:subpixel-antialiased; font-smoothing:subpixel-antialiased; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; font-smoothing:antialiased; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility !important; -moz-osx-font-smoothing: grayscale; } ::selection { background:#99cc33; color:#fff; text-shadow: none; /* Safari */ } ::-moz-selection { background:#99cc33; color:#fff; text-shadow: none; /* Firefox */ } img { -ms-interpolation-mode:bicubic; vertical-align:middle; } svg:not(:root) { overflow:hidden; } a, img { border:0; text-decoration:none; outline:none; } *:focus { outline:none; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 160px, 0); transform: translate3d(0, 160px, 0); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 160px, 0); transform: translate3d(0, 160px, 0); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } /* COOKIES */ .cookies_alert { position:fixed; width:480px; min-height:170px; height:auto; bottom:30px; margin:0 auto; right:30px; background:var(--color-bg-coloured); z-index:99999999; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .cookies_content { position:relative; width:100%; min-height:170px; height:auto; display:flex; flex-direction:row; justify-content:center; align-items:center; padding:35px; text-align:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .cookies_content .icon { flex:0 0 60px; margin:0 10px; } .cookies_content .icon img { max-width:60px; } .cookies_content .text { flex:1; font-size:.7em; font-weight:500; line-height:1.4em; color:var(--color-text-light); padding:0 20px; -webkit-font-smoothing: antialiased; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .cookies_content .text .btns { margin-top:20px; } .cookies_content .text .btns a { position:relative; width:auto; height:25px; line-height:25px; color:var(--color-text-light); padding:5px 0px; margin:0 15px 0 0; border-bottom:1px dotted var(--color-text-light); font-weight:500; text-align:center; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-transition:all 0.3s cubic-bezier(0.9,0,0.4,1); -moz-transition:all 0.3s cubic-bezier(0.9,0,0.4,1); -o-transition:all 0.3s cubic-bezier(0.9,0,0.4,1); transition:all 0.3s cubic-bezier(0.9,0,0.4,1); } .cookies_content .text .btns a:last-child { margin:0; } .cookies_content .text .btns a:hover { color:var(--color-link); border-bottom:1px dotted var(--color-link); -webkit-transition:all 0.3s cubic-bezier(0.9,0,0.4,1); -moz-transition:all 0.3s cubic-bezier(0.9,0,0.4,1); -o-transition:all 0.3s cubic-bezier(0.9,0,0.4,1); transition:all 0.3s cubic-bezier(0.9,0,0.4,1); } .showCookies { visibility:visible; opacity:1; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .hideCookies { visibility:hidden; opacity:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } /* WARNING */ .warning { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/warning.jpg) center center; background-size: cover; z-index: 99999999999999; display: none; } /* BACK TO TOP */ #back-to-top { position:fixed; font-size:1.2em; bottom:60px; right:60px; width:60px; height:60px; text-align:center; line-height:58px; background:transparent; color:var(--color-text); cursor:pointer; text-decoration:none; border:6px solid var(--color-text); visibility:hidden; opacity:0; z-index:99999; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; -webkit-transition:all 0.3s cubic-bezier(0.9,0,0.4,1); -moz-transition:all 0.3s cubic-bezier(0.9,0,0.4,1); -o-transition:all 0.3s cubic-bezier(0.9,0,0.4,1); transition:all 0.3s cubic-bezier(0.9,0,0.4,1); } #back-to-top:hover { background:transparent; border:6px solid var(--color-text-coloured); color:var(--color-text-coloured); -webkit-transition:all 0.3s cubic-bezier(0.9,0,0.4,1); -moz-transition:all 0.3s cubic-bezier(0.9,0,0.4,1); -o-transition:all 0.3s cubic-bezier(0.9,0,0.4,1); transition:all 0.3s cubic-bezier(0.9,0,0.4,1); } #back-to-top.show { visibility:visible; opacity:1; } /* HAMBURGER */ .hamburger { display:none; width:36px; height:18px; padding:0; top:75px; cursor:pointer; opacity:0; visibility:hidden; } .hamburgerInt { display:none; width:36px; height:18px; padding:0; top:45px; cursor:pointer; opacity:0; visibility:hidden; } .hamburger, .hamburgerInt { -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } #nav-toggle { display:block; width:36px; height:18px; background-color:transparent; padding:0px; -webkit-transition:all 0.2s ease-in-out 0.2s; -moz-transition:all 0.2s ease-in-out 0.2s; -o-transition:all 0.2s ease-in-out 0.2s; transition:all 0.2s ease-in-out 0.2s; } .hamburger #nav-toggle span { height:1px; position:absolute; display:block; content:''; margin:0; padding:0; right:0; -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; } .hamburgerInt #nav-toggle span { height:1px; position:absolute; display:block; content:''; margin:0; padding:0; right:0; background:#fff; -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; } #nav-toggle span:first-child { width:28px; } #nav-toggle span:nth-child(2) { width:36px; top:7px; } #nav-toggle span:last-child { width:20px; bottom:3px; } #nav-toggle.active span:first-child { width:36px; } #nav-toggle.active span:nth-child(2) { width:36px; } #nav-toggle.active span:last-child { width:36px; } #nav-toggle span, #nav-toggle span:first-child, #nav-toggle span:last-child { -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .hamburger:hover #nav-toggle span:first-child, .hamburgerInt:hover #nav-toggle span:first-child { width:36px; } .hamburger:hover #nav-toggle span:nth-child(2), .hamburgerInt:hover #nav-toggle span:nth-child(2) { width:36px; } .hamburger:hover #nav-toggle span:last-child, .hamburgerInt:hover #nav-toggle span:last-child { width:36px; } .hamburgerScroll { background:#fff; } .hamburgerHp { background:#fff; } /* NAVIGATION */ .navigation { flex:1; display:flex; flex-direction:row; justify-content:flex-end; align-items:center; width:auto; height:auto; list-style:none; margin:60px 40px 0 0; padding:0; text-align:right; gap:40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .navigationInt { flex:1; display:flex; flex-direction:row; justify-content:flex-end; align-items:center; width:auto; height:auto; list-style:none; padding:0; text-align:right; gap:40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .navigation a.menu, .navigation a.menuext { position:relative; font-size:.65em; font-weight:500; letter-spacing:.1em; color:var(--color-menu); text-transform:uppercase; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .navigationInt a.menu, .navigationInt a.menuext { position:relative; font-size:.65em; font-weight:500; letter-spacing:.1em; color:var(--color-menu); text-transform:uppercase; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .navigation a.menu:hover, .navigation a.menuext:hover { color:var(--color-menu-hover); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .navigation a.current { color:var(--color-menu-current); } .navigation a.current:after { position:absolute; content: ''; background: #99cc33; width: 100%; height: 1px; left:0; bottom:-5px; } .navigationInt a.menu:hover, .navigationInt a.menuext:hover { color:var(--color-menu-hover); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .navigationInt a.current { color:var(--color-menu-current); } .navigationInt a.current:after { position:absolute; content: ''; background: #99cc33; width: 100%; height: 1px; left:0; bottom:-5px; } .navigation a.login, .navigationInt a.login { font-weight:600; padding:12px 30px; line-height:14px; background:#99cc33; color:#222; -webkit-font-smoothing: antialiased; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .navigation a.login:before, .navigationInt a.login:before { font-family:'Font Awesome 5 free'; font-size:1.4em; content:'\f007'; margin:0 7px 0 0; -webkit-font-smoothing: antialiased; } .navigation a.login:hover, .navigationInt a.login:hover { background:transparent; color:#fff; } /* OVERLAY NAV */ .overlay-menu { position:fixed; width:100%; height:100%; left:0; top:0; text-align:center; background:rgba(153, 204, 51, .9); opacity:0; visibility:hidden; z-index:9999999; -webkit-transition:opacity 0.3s, -webkit-transform 0.3s, visibility 0s 0.3s; -moz-transition:opacity 0.3s, -moz-transform 0.3s, visibility 0s 0.3s; -o-transition:opacity 0.3s, -o-transform 0.3s, visibility 0s 0.3s; transition:opacity 0.3s, -transform 0.3s, visibility 0s 0.3s; } .overlay-open { background:rgba(153, 204, 51, .9); opacity:1; visibility:visible; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .contentOverlay { position:absolute; width:100%; margin:0 auto; top:50%; cursor:default; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); } .overlayLogo { width:300px; height:194px; margin:0 auto; text-align:center; background:url('/images/overlayLogo.png') no-repeat center center; } .navigationMobile { width:100%; list-style:none; margin-top:0px; } .navigationMobile li { width:100%; height:35px; line-height:35px; text-align:center; opacity:0; visibility:hidden; } .navigationMobile li a { font-size:.9em; font-weight:500; letter-spacing:.6em; padding:0 0 0 .3em; color:#fff; text-transform:uppercase; -webkit-font-smoothing: antialiased; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .navigationMobile li a:hover { color:#111; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .navigationMobile li a.currentM { color:#111; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .overlaySocial { width:100%; margin-top:30px; opacity:0; visibility:hidden; } .overlaySocial .fab { font-size:.9em; line-height:1em; color:#111; text-transform:lowercase; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .overlaySocial .fab:hover { color:#99cc33; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .overlaySocial a { margin-right:20px; } .overlaySocial a:last-child { margin-right:0; } /* LANGUAGE */ .langDiv { padding:0 10px; } .lang, .langInt { display:inline-block; margin:0; } .navMenuLang { margin:0 auto; } .lang a { font-size:.7em; font-weight:500; color:var(--color-menu); text-transform:uppercase; -webkit-font-smoothing: antialiased; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .langInt a { font-size:.7em; font-weight:500; color:var(--color-menu); text-transform:uppercase; -webkit-font-smoothing: antialiased; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .navMenuLang a { font-size:.7em; font-weight:500; color:var(--color-menu); text-transform:uppercase; -webkit-font-smoothing: antialiased; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .lang span, .langInt span { color:var(--color-menu); } .navMenuLang span { color:var(--color-menu); } .lang span, .langInt span, .navMenuLang span { font-size:.7em; } .lang a.selected, .langInt a.selected { color:var(--color-menu-current); } .navMenuLang a.selected { color:var(--color-menu-current); } .lang a:hover, .langInt a:hover { color:var(--color-menu-hover); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .navMenuLang a:hover { color:var(--color-menu-hover); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } /* HEADER */ header { position:fixed; width:100%; height:84px; top:0; margin:0; padding:0; background:transparent; z-index:99999; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .headerTop { display:flex; flex-direction:row; justify-content:center; align-items:center; width:100%; height:84px; padding:0 40px; gap:40px; background:transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .headerTopInt { display:flex; flex-direction:row; justify-content:center; align-items:center; width:100%; height:84px; padding:0 40px; gap:40px; background:rgba(17, 17, 17, .85); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .headerlogo { width:190px; height:55px; flex:0 190px; cursor:pointer; margin:60px 0 0 40px; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .headerlogoInt { width:190px; height:55px; flex:0 190px; visibility:visible; opacity:1; cursor:pointer; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .headerlogo:hover, .headerlogoInt:hover { opacity:.6; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .showHeader { background:rgba(17, 17, 17, .9) } .headerHp { background:url(/images/logo_white.svg) left center no-repeat; background-size:90%; } .headerInt { background:url(/images/logo_white.svg) left center no-repeat; background-size:90%; } .moveLogo, .moveNav, .moveHamburger { margin:0; } /* SERVICE BAR */ .servicesHeader { position:fixed; width:100%; top:85px; padding:0; background:transparent; z-index:99; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .servicesBar { width:100%; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-evenly; align-items:center; background:#99cc33; } .itemService { width:auto; height:40px; line-height:40px; background:#99cc33; font-size:.65em; font-weight:500; color:#111; text-align:center; text-transform:uppercase; -webkit-font-smoothing: antialiased; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .itemService.selected, .itemService:hover { color:#fff; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } /* RESERVED BAR */ .reservedHeader { position:fixed; width:100%; top:85px; padding:0; background:transparent; z-index:99; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .reservedBar { width:100%; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; background:#99cc33; padding:0 40px; gap:40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .reservedBar div:first-child { flex:1; text-align:left; } .reservedBar div:nht-child(2) { display:flex; justify-content:center; align-items:center; text-align:right; text-transform:capitalize; } .reservedBar div:last-child { flex:80px; text-align:right; text-transform:capitalize; } .itemRes { width:auto; height:40px; line-height:40px; background:#99cc33; font-size:.75em; font-weight:500; color:#111; text-align:center; -webkit-font-smoothing: antialiased; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .itemRes.selected, .itemRes:not(#hiCustomer):hover { color:#fff; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .itemRes i { margin-right:5px; } /* AVATAR */ .avatar { display:flex; justify-content:center; align-items:center; width:42px; height:42px; font-size:1.8em; font-weight:500; letter-spacing:-.04em; text-transform:uppercase; color:var(--color-text); background:var(--color-bg-coloured); border:2px solid var(--color-bg-coloured); object-fit:cover; -webkit-font-smoothing: antialiased; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .avatar img { width:100%; height:100%; } /* ACCOUNT AVATAR */ .reservedAvatar { display:flex; justify-content:center; align-items:center; width:160px; height:160px; font-size:3.8em; font-weight:600; letter-spacing:-.04em; text-transform:uppercase; margin:0 auto; color:var(--color-text); background:var(--color-bg-coloured); border:4px solid var(--color-bg-coloured); object-fit:cover; -webkit-font-smoothing: antialiased; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .reservedAvatar img { width:100%; height:100%; } /* END AVATAR */ .itemRes i { font-size:1.2em; margin:0 5px 0 0; } .navigation a.menu.resAvatar:hover, .navigation a.menuext.resAvatar:hover, .navigationInt a.menu.resAvatar:hover, .navigationInt a.menuext.resAvatar:hover { -webkit-transform:scale(1.1); transform:scale(1.1); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } /* SLIDES */ section { position:relative; width:100%; height:auto; padding:0; text-align:center; pointer-events:auto; -webkit-animation-duration: .38s; animation-duration: .38s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: slideInUp; animation-name: slideInUp; } section#bottom { z-index:0; } /* SECTION */ #site-main { position:relative; z-index:10; pointer-events:none; } #reserved-main { position:relative; z-index:10; min-height:100vh; pointer-events:none; scroll-behavior: smooth; } #homepage { width:100%; height:100%; top:0; margin:0 auto; overflow:hidden; background:#222; } #about { display:table; width:100%; min-height:450px; height:auto; margin:0 auto; padding:0; text-align:center; background:var(--color-bg); } #services { width:100%; height:auto; margin:0 auto; padding:0; text-align:center; background:var(--color-bg); } #progress { width:100%; min-height:360px; height:auto; top:0; margin:0 auto; padding:80px; background:var(--color-bg); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } #samples { width:100%; min-height:360px; height:auto; top:0; margin:0 auto; padding:0; background:var(--color-bg); } #marquee { width:100%; height:30vh; margin:0; background:var(--color-bg); } #quotes { width:100%; min-height:460px; height:auto; margin:0 auto; padding:40px 0 0 0; background:var(--color-bg); } #contact { width:100%; min-height:380px; height:auto; top:0; margin:0 auto 400px auto; padding:100px 0; overflow:hidden; background:url(/images/bgContact.jpg) center bottom no-repeat var(--color-bg); background-size:cover; } #bottom { position:fixed; width:100%; height:400px; background:#222; margin:0 auto; bottom:0; text-align:center; overflow:hidden; z-index:1; } #bottomArea { position:relative; width:100%; height:400px; background:#222; margin:0 auto; bottom:0; text-align:center; overflow:hidden; } #footer { position:relative; width:100%; height:auto; margin:0 auto; top:50%; text-align:center; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); } #contentTop { width:100%; height:300px; top:0; margin:0 auto; padding:0; overflow:hidden; border-bottom:40px solid #dedad7; border-image:url(/images/bgDiv.jpg) 40; } #content { width:100%; height:auto; top:0; margin:0 auto; padding:70px 0; overflow:hidden; background:var(--color-bg); } #contentReserved, #contentRegister { width:100%; height:auto; top:0; margin:0 auto; padding:0; overflow:hidden; background:var(--color-bg); } #contentArea { width:100%; height:auto; top:0; margin:124px auto 0 auto; padding:0; background:var(--color-bg); } #contactArea { width:100%; min-height:300px; height:auto; top:0; margin:0 auto; padding:100px 0; background:url(/images/bgContact.jpg) center bottom no-repeat var(--color-bg); background-size:cover; } /* COMMON */ .ta-center { text-align:center; } .ta-left { text-align:left; } .ta-right { text-align:right; } .fw-500 { font-weight:500; } .fw-600 { font-weight:600; } .fw-700 { font-weight:700; } .fs-12 { font-size:1.2em; } strong, b { font-weight:800; } .italic { font-style:italic; } .coloured { color:var(--color-text-coloured); } .highlighter { line-height:1.8em !important; padding:4px 8px; color:var(--color-text-light) !important; background:var(--color-coloured) none repeat scroll 0 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .msg-color { color:var(--color-coloured) !important; } .msg-success { color:var(--color-success) !important; } .msg-error { color:var(--color-error) !important; } .mrg-40 { margin:30px 0; } .clipPath { clip-path:inset(0 0 0 100%); } .clipPathTop { clip-path:inset(0 0 100% 0); } .showItem { clip-path:inset(0 100% 0 0); animation: reveal 1s forwards .2s; } .showItemTop { clip-path:inset(0 0 100% 0); animation: revealTop 1s forwards .2s; } .z0-layer { z-index: 0; } .z1-layer { z-index: 1; } .z2-layer { z-index: 2; } .bwFilter { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } /* ERROR MSG */ .errorLoading { display:block; font-size:.9em; font-weight:500; color:var(--color-error); line-height:20p; text-transform:uppercase; } .errorLoading i { font-size:1.2em; margin-right:5px; } /* HOMEPAGE */ .hpLogo { position:absolute; width:466px; height:57px; margin-top:-60px;top:50%; left:50%; background:url(/images/headerLogo.png) center center no-repeat; background-size:100%; z-index:90; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .hpClaim { position:absolute; width:100%; font-size:.8em; font-weight:500; letter-spacing:.3em; color:#fff; margin-top:0px; top:50%; left:50%; text-align:center; text-transform:uppercase; -webkit-font-smoothing: antialiased; z-index:90; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .hpBtn { position:absolute; width:280px; height:60px; line-height:65px; font-size:.7em; font-weight:600; letter-spacing:.05em; color:#fff; margin-top:75px; top:50%; left:50%; text-align:center; text-transform:uppercase; background:#222; border-bottom:1px solid #99cc33; cursor:pointer; -webkit-font-smoothing: antialiased; z-index:90; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .hpBtn:hover { color:#333; background:#99cc33; border-bottom:1px solid #99cc33; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .hpOverlay { position:absolute; width:100%; height:100%; background:rgba(0, 0, 0, .5); z-index:20; } .bgvideo { position:absolute; top:50%; left:50%; min-width:100%; min-height:100vh; width:auto; height:auto; overflow:hidden; z-index:1; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .video-responsive { position:relative; display:block; width:100%; height: 100vh; overflow:hidden; top: 0; left: 0; right: 0; bottom: 0; background: url(../public/bgvideo/mc.jpg) center center no-repeat; background-size: cover; z-index:2; } /* ABOUT US */ .aboutInfo { position:relative; display:table-cell; vertical-align:middle; width:80%; height:auto; margin:0 auto; padding:10% 15%; text-align:center; } .aboutDesc { font-size:1em; letter-spacing:0em; color:#666; line-height:2em; text-align:center; -webkit-font-smoothing: antialiased; } /* TABS */ .tabs { display:table; table-layout:fixed; width:100%; overflow:hidden; } .tabs > li { display:table-cell; list-style:none; text-align:center; padding:20px 10px; position:relative; overflow:hidden; cursor:pointer; color:#888; background:#222; font-size:.7em; font-weight:600; text-transform:uppercase; -webkit-font-smoothing: antialiased; transition-duration: .25s; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .tabs > li:hover { color:#fff; background:#99cc33; } .tabs > li.active { color:#fff; background:#99cc33; } .tab__content { border-top:1px solid #99cc33; background-color:#222; position:relative; width:100%; } .tab__content > li { width:100%; position:absolute; top:0; left:0; display:none; list-style:none; } .tab__content > li .content__wrapper { text-align:center; width:100%; min-height:55vh; height:auto; padding:40px; background-color:#222; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .content__container { position:absolute; display:flex; flex-direction:row; align-items:center; justify-content:center; width:80%; top:50%; left:50%; text-align:left; margin:0 auto; z-index:11; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .content__container .box { text-align:left; } .content__container .box.content__icon { flex:0 0 25%; text-align:right; z-index:9; } .content__container .box.content__info { flex:1 0 0; text-align:left; padding:40px; z-index:10; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .content__container .box.content__icon img { width:100%; max-width:200px; height:auto; } .content__container .box.content__info .content__title { font-family:'Arista', sans-serif; font-size:2.6em; color:#99cc33; line-height:1.2em; text-transform:lowercase; -webkit-font-smoothing: antialiased; } .content__container .box.content__info .content__desc { font-size:1.1em; font-weight:400; color:#fff; line-height:1.4em; margin-top:20px; -webkit-font-smoothing: antialiased; } .content__container .box.content__info .content__btn { width:240px; height:50px; line-height:50px; font-size:.7em; font-weight:600; letter-spacing:.05em; color:#222; margin-top:30px; text-align:center; text-transform:uppercase; background:#99cc33; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .content__container .box.content__info .content__btn:hover { background:#222; color:#fff; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .content__wrapper .content__overlay { position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0, 0, 0, .6); z-index:8; } /* PROGRESS */ .progressContainer { position:relative; width:100%; height:auto; margin:0 auto; text-align:center; background:#f8f8f8; } .progressGallery { position:relative; display:flex; flex-direction:row; align-items:center; justify-content:center; width:100%; min-height:360px; height:auto; margin:0 auto; border:1px dashed #99cc33; border-bottom:0; } .itemProgress { width:33.333333%; align-self:center; text-align:center; } .itemProgressIcon { max-width:100px; width:auto; text-align:center; margin:0 auto 10px auto; } .itemProgressIcon img { width:100%; height:auto; margin:0 auto; } .itemProgressTitle { font-size:3.2em; font-weight:500; color:#111; text-transform:uppercase; margin-bottom:10px; -webkit-font-smoothing: antialiased; } .itemProgressDesc { font-size:.8em; font-weight:500; letter-spacing:.03em; color:#99cc33; text-transform:uppercase; -webkit-font-smoothing: antialiased; } .parallaxBG { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:50vh; top:0; margin:0 auto; padding:0; background-image:url(/images/bgProgress.jpg); background-position:50% 40%; background-repeat:no-repeat; background-size:cover; -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition:all 0.6s ease-out; -moz-transition:all 0.6s ease-out; -o-transition:all 0.6s ease-out; transition:all 0.6s ease-out; } .progressTitle { display:block; font-size:3em; color:#fff; letter-spacing:-.02em; padding:40px 0 0 0; } .progressBtn { display:block; width:280px; height:60px; line-height:65px; font-size:.7em; font-weight:600; letter-spacing:.05em; color:#222; margin-top:40px; text-align:center; text-transform:uppercase; background:#99cc33; border-bottom:1px solid #222; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .progressBtn:hover { color:#fff; background:#222; border-bottom:1px solid #99cc33; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } /* SAMPLES */ .contentSamples { position:relative; width:80%; height:auto; padding:40px 0; margin:0 auto; } .contentSamples h1 { font-size:2.2em; font-weight:400; line-height:1.2em; color:#666; margin-bottom:10px; -webkit-font-smoothing: antialiased; } .contentSamples h2 { font-size:1em; font-weight:400; line-height:1.8em; color:#666; margin-bottom:5%; -webkit-font-smoothing: antialiased; } .contentSamples .green { color:#99cc33; } .items { position:relative; width:80%; display:flex; flex-direction:row; flex-wrap:wrap; flex-flow:row wrap; justify-content:space-between; margin:0 auto; text-align:center; overflow:hidden; } .itemGrid { width:30%; height:auto; margin:0 0 5% 0; text-align:center; } .itemGrid .itemView { position:absolute; width:100%; height:100%; font-size:.7em; font-weight:400; color:#fff; background:rgba(0, 0, 0, .5); opacity:1; text-align:center; z-index:20; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .itemImg.linked { width:100%; height:auto; aspect-ratio:16 / 9; opacity:1; cursor:pointer; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .itemImg { width:100%; height:auto; aspect-ratio:16 / 9; opacity:1; cursor:auto; } .itemImg img { width:100%; height:auto; } .itemImg.linked:hover { opacity:.8; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .itemTitle { font-size:.9em; font-weight:600; line-height:1.2em; text-transform:uppercase; color:#222; margin:15px 0 0 0; -webkit-font-smoothing: antialiased; } .itemDesc { font-size:.7em; line-height:1.4em; word-spacing:normal; text-transform:uppercase; color:#222; margin:5px 0 0 0; -webkit-font-smoothing: antialiased; } .videoThumb .itemImg { position: relative; } .videoPlayIcon { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0,0,0,.35); -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .videoPlayIcon::before { content: ""; position: absolute; top: 50%; left: 53%; transform: translate(-50%, -50%); width: 18px; height: 22px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 2px; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .videoThumb:hover .videoPlayIcon { background: rgba(0,0,0,.45); transform: translate(-50%, -50%) scale(1.08); -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } /* MARQUEE */ #marquee .marquee-content { font-weight:800; font-size:10em; line-height:2em; color:var(--color-text); background:var(--color-bg); text-transform:uppercase; -webkit-font-smoothing: antialiased; } #marquee .stroke-black { color: transparent; -webkit-text-stroke: 1px; -webkit-text-stroke-color: var(--color-text); } /* QUOTES */ .cbp-qtrotator { position:absolute; max-width:100%; width:100%; min-height:460px; height:auto; margin:0; left:0; padding:0; background:url(/images/bgQuotes.png) center top no-repeat; } .cbp-qtrotator .cbp-qtcontent { position:absolute; display:table; width:680px; height:360px; left:50%; padding:0; margin:0 auto; z-index:0; opacity:0; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); } .no-js .cbp-qtrotator .cbp-qtcontent { border-bottom:none; } .cbp-qtrotator .cbp-qtcontent.cbp-qtcurrent, .no-js .cbp-qtrotator .cbp-qtcontent { position:absolute; z-index:100; pointer-events:auto; opacity:1; -webkit-transition:all 0.2s ease-in-out 0.2s; -moz-transition:all 0.2s ease-in-out 0.2s; -o-transition:all 0.2s ease-in-out 0.2s; transition:all 0.2s ease-in-out 0.2s; } .cbp-qtrotator .cbp-qtcontent:before, .cbp-qtrotator .cbp-qtcontent:after { content:::; display:table; } .cbp-qtrotator .cbp-qtcontent:after { clear:both; } .cbp-qtrotator .cbp-qtprogress { position:absolute; background:#e5e5e5; height:30px; width:0%; margin-top:40px; bottom:0; left:0; } .quote { position:relative; display:table-cell; margin:auto 0 auto 0; vertical-align:middle; clear:both; font-size:1.2em; font-weight:300; line-height:1.4em; color:#111; -webkit-font-smoothing: antialiased; } .quote_author { display:block; font-size:.9em; line-height:1.4em; font-weight:800; color:#99cc33; -webkit-font-smoothing: antialiased; } .quote_role { display:block; font-size:.65em; line-height:1.4; color:#666; font-weight:900; letter-spacing:.04em; text-transform:uppercase; -webkit-font-smoothing: antialiased; } /* SERVICE DETAILS */ .bgOverlay { position:absolute; width:100%; height:100%; background:rgba(0, 0, 0, .5); z-index:20; } .prodService { display:flex; flex-flow:wrap; flex-direction:row; width:100%; height:auto; margin:0 auto; } .prodBox { width:50%; padding:0 80px; text-align:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .prodBox.box2 { display:flex; flex-flow:wrap; flex-direction:column; justify-content:flex-start; align-items:flex-start; padding:80px; gap:40px; background:#f8f8f8; border:1px dashed #99cc33; border-right:0; border-radius:10px 0 0 10px; -moz-border-radius:10px 0 0 10px; -webkit-border-radius:10px 0 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .prodBox img { width:100%; height:auto; } .prodTools { width:300px; font-size:.8em; padding:15px 30px; margin:0; border-width:1px; border-style:solid; border-color:#ddd; border-radius:0px 0px 6px 6px; -moz-border-radius:0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; } .prodConfig { width:300px; font-size:.8em; padding:15px 30px; margin:0; border-width:1px 1px 0px 1px; border-style:solid; border-color:#ddd; border-radius:6px 6px 0px 0px; -moz-border-radius:6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; } .prodCatalogue .prodInfo { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .prodInfo .prodIcon, .prodBox .prodIcon { display:inline-block; max-width:80px; margin-right:10px; } .prodInfo .prodName, .prodBox .prodName { display:block; margin:0; font-family:'Arista', sans-serif; font-size:2.8em; line-height:1em; text-transform:lowercase; color:#99cc33; -webkit-font-smoothing: antialiased; } .prodInfo .prodDesc { display:block; font-size:.9em; line-height:1.6em; color:#111; margin:40px 0; padding:0 38px; -webkit-font-smoothing: antialiased; } .prodBoxInfo .prodBox-Icon { font-size:1em; font-weight:800; line-height:1.6em; color:#99cc33; margin:0; padding:0; -webkit-font-smoothing: antialiased; } .prodBoxInfo .prodBox-Desc { font-size:.9em; line-height:1.6em; color:#111; margin:8px 0 0 32px; padding:0; -webkit-font-smoothing: antialiased; } .prodBoxInfo .prodBox-Icon i { font-size:1.2em; width:30px; line-height:1.6em; text-align:center; } .prodBtn { width:240px; height:50px; line-height:50px; background:var(--color-link); color:var(--color-link-light); margin:20px 0 0 40px; font-size:.7em; font-weight:600; text-align:center; text-transform:uppercase; cursor:pointer; -webkit-font-smoothing: antialiased; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .prodBtn:hover { color:var(--color-link); background:var(--color-link-coloured); -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .prodDiv { content:'|'; font-size:.9em; color:#ccc; margin:0 17px; -webkit-font-smoothing: antialiased; } .itemMedia { position:relative; width:100%; height:auto; } .itemMedia iframe { position:relative; } /* .itemMedia:after { display:block; width:100%; height:1px; content:''; margin:10px 0; background:#ddd; } .itemMedia:last-child:after { display:none; } */ /* SAMPLES MP3 */ .prodSamples { margin:0 auto; padding:0 40px 0 0; } .sample-player { display:flex; align-items:flex-start; gap:15px; width:100%; margin:40px auto 0 auto; padding: 0 60px; } /* play button */ .play-toggle { width:48px; height:48px; border-radius:50%; border:none; background:var(--color-text-coloured); color:#fff; font-size:1em; cursor:pointer; flex-shrink:0; } /* container waveform */ .wave-wrapper { flex:1; } /* waveform area */ .waveform { width:100%; height:50px; } /* time */ .sample-meta { font-size:1em; margin-top:4px; display:flex; justify-content:flex-start; gap:40px; } .sample-player .title { flex:1; font-weight:700; font-size:.9em; color:var(--color-text-coloured); } .sample-player .current, .sample-player .duration { flex:0 90px; font-weight:700; font-size:.9em; } .sample-player .current:before { font-size:.8em; font-weight:500; content:'current: '; } .sample-player .duration:before { font-size:.8em; font-weight:500; content:'duration: '; } /* ACCESS SECTION */ .reservedContainer { display:flex; flex-direction:row; align-items:stretch; justify-content:center; width:100%; height:100vh; margin:0 auto; } .reservedBox.boxBG { display:flex; flex-direction:column; align-items:center; justify-content:center; position: relative; width:55%; background-size:cover; padding:80px; overflow:hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .reservedBox.boxContent { display:flex; flex-direction:column; align-items:center; justify-content:center; width:45%; padding:80px; text-align:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .reservedBox.boxBG::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 11, 11, .5); z-index: 1; } .bgReserved { background:url(/images/bgReserved.jpg) center center no-repeat; } .bgRegister { background:url(/images/bgRegister.jpg) center center no-repeat; } .bgRecover { background:url(/images/bgRecover.jpg) center center no-repeat; } .reservedBox.boxBG img.reservedLogo { display:block; width:100%; max-width:480px; height:3.4em; margin:0 auto; opacity:1; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .reservedBox.boxBG img.reservedLogo:hover { filter: brightness(0) invert(1); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .reservedBox.boxBG .reservedInfoContainer { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; z-index:2; } .reservedBox.boxBG .reservedInfo { font-size:.8em; font-weight:500; line-height:1.5em; color:var(--color-text-light); vertical-align:top; -webkit-font-smoothing: antialiased; } .reservedBox.boxBG .reservedInfo .infoTitle { font-size:1em; font-weight:500; margin:20px 0 30px 0; } .reservedBox.boxBG .reservedInfo a { font-size:.9em; font-weight:500; line-height:1.8em; padding:10px 15px; color:var(--color-link-light); background-color: rgba(11, 11, 11, .5); border:1px dotted var(--color-link-light); -webkit-font-smoothing: antialiased; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .reservedBox.boxBG .reservedInfo a:hover { color:var(--color-link); background:var(--color-link-coloured); border:1px dotted var(--color-link-coloured); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } /* RESERVED AREA */ .reservedArea { display:flex; flex-direction:row; align-items:flex-start; justify-content:center; width:100%; height:100%; margin:0 auto; padding:0; } .areaBox.contentFull { width:100%; height:auto; padding:160px 80px 0 80px; text-align:center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .areaBox.contentFull i { display:block; margin:0 auto 30px auto; } .areaBox.contentFull a { color:var(--color-text); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .areaBox.contentFull a:hover { color:var(--color-text-coloured); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .areaBox.contentBox { width:35%; height:100%; padding:160px 80px; text-align:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .areaBox.videoBox { position:relative; width:65%; height:auto; padding:80px 0 0 0; overflow:hidden; align-self:center; justify-self:center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .video-responsive-area { width: 100%; margin: 0 auto; /*aspect-ratio: 21 / 9;*/ position: relative; overflow:hidden; } .bgvideoArea { width: 100%; min-height: 70vh; max-height: 90vh; object-fit: cover; overflow: hidden; border:1px dashed #99cc33; z-index: 0; -webkit-border-radius: 60px 0 0 60px; -moz-border-radius: 60px 0 0 60px; border-radius: 60px 0 0 60px; } .bgvideoOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url(/images/icon_logo.svg) no-repeat center center; background-size: 20%; z-index: 1; pointer-events: none; mix-blend-mode:exclusion; } /* DASHBOARD */ .dashboardTitle { font-size:3em; line-height:1em; color:var(--color-text); letter-spacing:-.02em; } .dashboardDesc { font-size:.9em; line-height:1.4em; color:var(--color-text); margin:30px 0 0 0; } .dashboardNotes { font-size:.9em; line-height:1.4em; color:var(--color-text-coloured); margin:30px 0 0 0; } .dashboardBtn { display:block; width:280px; height:60px; line-height:65px; font-size:.7em; font-weight:600; letter-spacing:.05em; color:#fff; margin-top:40px; text-align:center; text-transform:uppercase; background:#222; border-bottom:1px solid #99cc33; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .dashboardBtn.contentFull { display:block; width:280px; height:60px; line-height:65px; font-size:.7em; font-weight:600; letter-spacing:.05em; color:#fff; margin:40px auto 0 auto; text-align:center; text-transform:uppercase; background:#222; border-bottom:1px solid #99cc33; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .dashboardBtn:hover { color:#222; background:#99cc33; border-bottom:1px solid #222; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } /* ACCOUNT */ .reservedAccountArea { display:flex; flex-direction:row; align-items:flex-start; justify-content:center; width:100%; margin:0 auto; padding:0; } .accountBox.contentBox { position:sticky; top:124px; min-width:380px; width:380px; height:fit-content; padding:80px; align-self:flex-start; text-align:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .accountBox.detailsBox { flex:1; padding:80px 80px 80px 0; align-self:flex-start; text-align:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .accountBox.detailsBox #section1, .accountBox.detailsBox #section2, .accountBox.detailsBox #section3, .accountBox.detailsBox #section4 { width:100%; height:auto; padding:40px; background:#f8f8f8; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .accountBox.detailsBox div.sectionData:not(#section4) { margin:0 0 60px 0; } .accountAvatar { width:100%; margin:0 auto 15px auto; text-align:center; } .accountTools { display:flex; justify-content:center; align-items:center; width:100%; margin:0 auto 40px auto; gap:20px; } .accountTools div { font-size:1em; line-height:15px; color:var(--color-text-coloured); } .accountTools div img { width:auto; height:14px; cursor:pointer; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .accountTools div img:hover { filter: brightness(0) invert(0); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .accountTools div img.disabled { filter: brightness(0) invert(0); opacity:.6; cursor:not-allowed; pointer-events:none; } .accountTitle { font-size:1.2em; font-weight:600; line-height:1em; color:var(--color-text); letter-spacing:-.02em; word-wrap: break-word; margin-bottom:2em; padding:0; } .accountDesc { font-size:.9em; line-height:1.4em; color:var(--color-text); margin:30px 0 0 0; } .accountNotes { font-size:.9em; line-height:1.4em; color:var(--color-text-coloured); margin:30px 0 0 0; } .accountCode { font-size:.8em; line-height:1.4em; font-weight:500; letter-spacing:.02em; color:var(--color-text-coloured); margin:2px auto 0 auto; } .accountBtn { display:block; width:280px; height:60px; line-height:65px; font-size:.7em; font-weight:600; letter-spacing:.05em; color:#fff; margin-top:40px; text-align:center; text-transform:uppercase; background:#222; border-bottom:1px solid #99cc33; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .accountBtn:hover { color:#222; background:#99cc33; border-bottom:1px solid #222; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .account-list { list-style: none; padding: 0; margin: 0; } .account-list li { font-size: .8em; padding: 8px 0 8px 20px; cursor: pointer; position: relative; transition: background 0.2s ease; } .account-list li a { display:block; width:100%; height:100%; color: var(--color-link); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .account-list li::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 2px; background-color: var(--color-link-hover); transform: scaleY(0); transition: transform 0.2s ease; transform-origin: center; } .account-list li:hover, .account-list li.active, .account-list li.active a { background-color: #f8f8f8; color: var(--color-link-hover); } .account-list li:hover::before, .account-list li.active::before { transform: scaleY(1); } .account-list li a:hover { color: var(--color-link-hover); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } /* PROJECTS */ .reservedProjectArea { display:flex; flex-direction:row; align-items:flex-start; justify-content:center; width:100%; margin:0 auto; padding:0; } .projectBox.contentBox { position:sticky; top:124px; min-width:380px; width:380px; height:fit-content; padding:80px; align-self:flex-start; text-align:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .projectBox.detailsBox { flex:1; padding:80px 80px 80px 0; align-self:flex-start; text-align:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .projectBox.detailsBox #section { width:100%; height:auto; padding:40px; background:#f8f8f8; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .projectAvatar { width:100%; margin:0 auto 15px auto; text-align:center; } .projectTools { display:flex; justify-content:center; align-items:center; width:100%; margin:0 auto 40px auto; gap:20px; } .projectTools div { font-size:1em; line-height:15px; color:var(--color-text-coloured); } .projectTools div img { width:auto; height:14px; cursor:pointer; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .projectTools div img:hover { filter: brightness(0) invert(0); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .projectTools div img.disabled { filter: brightness(0) invert(0); opacity:.6; cursor:not-allowed; pointer-events:none; } .projectTitle { font-size:1.2em; font-weight:600; line-height:1em; color:var(--color-text); letter-spacing:-.02em; word-wrap: break-word; margin-bottom:2em; padding:0; } .projectDesc { font-size:.9em; line-height:1.4em; color:var(--color-text); margin:30px 0 0 0; } .projectNotes { font-size:.9em; line-height:1.4em; color:var(--color-text-coloured); margin:30px 0 0 0; } .projectCode { font-size:.8em; line-height:1.4em; font-weight:500; letter-spacing:.02em; color:var(--color-text-coloured); margin:2px auto 0 auto; } .projectBtn { display:block; width:280px; height:60px; line-height:65px; font-size:.7em; font-weight:600; letter-spacing:.05em; color:#fff; margin-top:40px; text-align:center; text-transform:uppercase; background:#222; border-bottom:1px solid #99cc33; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .projectBtn:hover { color:#222; background:#99cc33; border-bottom:1px solid #222; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .folderTitle { font-size:.8em; font-weight:600; line-height:1em; color:var(--color-text); letter-spacing:-.02em; text-transform:uppercase; margin-bottom:20px; padding:0 0 0 20px; } .folderCheck { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; font-size:.7em; padding:8px 20px; text-align:left; text-transform:uppercase; background-color: #f8f8f8; color: var(--color-text-medium); } .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; } .dot-ok { background-color:var(--color-success); } .dot-warn { background-color:var(--color-warning); } .dot-missing { background-color:var(--color-error); } .folderCheck div:nth-child(1) { flex:0 10px; } .folderCheck div:nth-child(2) { flex:1; text-align:left; } .folderCheck div:nth-child(3) { flex:0 30px; text-align:right; } .folderdBtn { display:block; width:220px; height:48px; line-height:48px; font-size:.7em; font-weight:600; letter-spacing:.05em; color:#fff; margin-top:0; text-align:center; text-transform:uppercase; background:#222; border-bottom:1px solid #99cc33; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .folderdBtn:hover { color:#222; background:#99cc33; border-bottom:1px solid #222; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } /* PROGRESS BAR */ .uploadProgressWrapper { display:none; width: 100%; height: 10px; background-color: #ddd; border-radius: 2px; overflow: hidden; margin-top: 1px; } .uploadProgressBar { height: 100%; width: 0%; background-color: var(--color-bg-coloured); transition: width 0.2s ease-in-out; } /* PROJECT ITEMS */ .projectsContainer { margin:0; } .project_wrapper { width:100%; margin:0 0 40px 0; padding:0; border:1px dotted #99cc33; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .project_wrapper:last-child { width:100%; margin:0; padding:0; border:1px dotted #99cc33; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .project_item { display:flex; justify-content:flex-start; align-items:center; width:100%; height:100px; padding:0 20px; gap:20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .project_item_summary { width:100%; height:auto; padding:20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .project_item div { line-height: 1.2em; } .project_item div.box:nth-child(1) { flex:0 70px; } .project_item div.box:nth-child(2) { flex:0 160px; } .project_item div.box:nth-child(3) { flex:1; } .project_item div.box:nth-child(4) { flex:0 180px; } .project_item div.box:nth-child(5) { flex:0 20px; } .project_item div.box:nth-child(6) { flex:0 20px; } .project_item div.box:nth-child(7) { flex:0 20px; } .project_item img { width:70px; height:auto; } .project_item .project_number { font-size: .9em; font-weight:600; color:var(--color-text); -webkit-font-smoothing: antialiased; } .project_item .project_info { } .project_item .project_name { font-size: 1.2em; font-weight:600; color:var(--color-text-coloured); -webkit-font-smoothing: antialiased; } .project_item .project_service { font-size: .9em; -webkit-font-smoothing: antialiased; } .project_item .project_status { font-size: .65em; font-weight:600; text-transform:uppercase; -webkit-font-smoothing: antialiased; } .project_wrapper .project_footer { display:flex; justify-content:center; width:100%; height:30px; line-height:30px; background:#f0f0f0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .project_wrapper .project_footer .project_date { flex:0 0 320px; font-size: .8em; padding:0 20px; color:#888; } .project_wrapper .project_footer .project_steps { flex:1; display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:0; padding:0 20px; } .project_wrapper .project_footer .project_steps .circle { width:10px; height:10px; border-radius:50%; opacity:0.2; transition: all 0.3s ease-in-out; } .project_wrapper .project_footer .project_steps .circle.active { width:10px; height:10px; opacity:1; } .project_item .project_tools, .project_item .project_tools a { font-size: 1.1em; color:#aaa; cursor:pointer; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .project_item .project_tools:hover, .project_item .project_tools a:hover { color:var(--color-text-coloured); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .project_item .project_status span { height:30px; padding:6px 8px; display:inline-flex; align-items:center; vertical-align:middle; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .project_item .project_tools #project_confirmed { color:var(--color-text-coloured); cursor:not-allowed;; } .project_item .project_status span.awaiting_files, .circle.status_awaiting_files { background: #E5648D; color: #ffffff; } .project_item .project_status span.awaiting_confirm, .circle.status_awaiting_confirm { background: #D80198; color: #ffffff; } .project_item .project_status span.awaiting_price, .circle.status_awaiting_price { background: #9FAFAE; color: #ffffff; } .project_item .project_status span.price_assigned, .circle.status_price_assigned { background: #5C899D; color: #ffffff; } .project_item .project_status span.approved_by_user, .circle.status_approved_by_user { background: #00798C; color: #ffffff; } .project_item .project_status span.in_progress, .circle.status_in_progress { background: #bec18b; color: #ffffff; } .project_item .project_status span.awaiting_payment, .circle.status_awaiting_payment { background: #e58962; color: #ffffff; } .project_item .project_status span.paid, .circle.status_paid { background: #bf6640; color: #ffffff; } .project_item .project_status span.ready_for_delivery, .circle.status_ready_for_delivery { background: #db6b5b; color: #ffffff; } .project_item .project_status span.delivered, .circle.status_delivered { background: #9b111e; color: #ffffff; } .project_item .project_status span.canceled, .circle.status_canceled { background: #37474f; color: #ffffff; } .project_item .project_number a { color:var(--color-text); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .project_item .project_number a:hover { color:var(--color-text-coloured); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .project_status i.priceInfo { animation: pulse 1s infinite; font-size:1.2em; cursor: help; } /* Lampeggio */ @keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } } /* PAYMENT */ .project_item .project_status span.price_assigned, .project_item .project_status span.awaiting_payment { height:30px; padding:6px 8px; display:inline-flex; align-items:center; vertical-align:middle; float:left; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .project_item .project_status span.price_confirm { width:30px; height:30px; padding:6px 8px; display:inline-flex; justify-content:center; align-items:center; vertical-align:middle; background: #00798C; color: #ffffff; float:left; text-align:center; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .project_item .project_status span.payment_confirm { width:30px; height:30px; padding:6px 8px; display:inline-flex; justify-content:center; align-items:center; vertical-align:middle; background: #bf6640; color: #ffffff; float:left; text-align:center; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .project_item .project_status span.price_confirm i, .project_item .project_status span.payment_confirm i { font-size:1.2em; text-align:center; margin:0 auto; cursor:pointer; } /* FORM */ form#login-form, form#registration-form, form#recover-form { width:100%; max-width:440px; } .form { width:100%; max-width:440px; height:auto; margin:30px auto; } .formTitle { font-size:2em; font-weight:600; line-height:1.4em; color:var(--color-text); -webkit-font-smoothing: antialiased; } .formSubTitle { font-size:1em; font-weight:500; line-height:1.em; color:var(--color-text); -webkit-font-smoothing: antialiased; } .formForgot { font-size:.9em; font-weight:500; margin:0; } .formTitle a, .formSubTitle a, .formForgot a, .form-fields a { font-size:1em; font-weight:500; line-height:1.em; color:var(--color-link-coloured); border-bottom:1px dotted var(--color-link-coloured); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .formTitle a:hover, .formSubTitle a:hover, .formForgot a:hover, .form-fields a:hover { color:var(--color-link-coloured-hover); border-bottom:1px solid var(--color-link-coloured-hover); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .form-single { width:100%; text-align:left; } .form-fields { width:100%; margin:0 0 20px 0; text-align:left; } .form-group { width:100%; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:20px; } .form-fields label { display:block; font-size:.8em; line-height:1.4em; margin:0 0 10px 0; color:var(--color-text); -webkit-font-smoothing: antialiased; } .form-fields label i { font-size:1.2em; margin-right:5px; } .form-fields input { width:100%; height:50px; line-height:50px; border:none; color:var(--color-text); background:#e8e8e8; padding:20px; -webkit-font-smoothing: antialiased; } .form-fields input.cb { display:inline-block; border:none; color:var(--color-text); background:#e8e8e8; margin:0; padding:0; -webkit-font-smoothing: antialiased; } .form-fields input.image { width:100%; height:auto; line-height:15px; border:none; color:var(--color-text); background:#e8e8e8; padding:10px 5px; } .form-fields select { width:100%; height:50px; line-height:50px; margin:0 0 1px 0; border:none; color:#666; background:#e8e8e8; padding:0 20px; -webkit-font-smoothing: antialiased; } .form-fields textarea { font-family:'Work Sans', sans-serif; width:100%; border:none; color:#666; background:#e8e8e8; padding:20px; overflow:hidden; -webkit-font-smoothing: antialiased; } .form-fields .notes { font-size:.75em; line-height:1.4em; color:var(--color-text-coloured); margin:20px auto 30px auto; } .form-fields label#privacy { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; -webkit-font-smoothing: antialiased; } .form-fields-split { display:flex; flex-direction:row; align-items:center; justify-content:center; width:100%; margin:20px 0 0 0; } .form-fields-split div { width:50%; font-size:.9em; font-weight:500; } .form-fields-split input.cb { display:inline-block; border:none; color:var(--color-text); background:#e8e8e8; margin:0 10px 0 0; padding:0; -webkit-font-smoothing: antialiased; } .form-fields input, .form-fields select, .form-fields textarea { font-size:.9em; border: 1px solid #e8e8e8; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .form-fields input:focus, .form-fields select:focus, .form-fields textarea:focus, .warning_code input:focus { background:#fcfcfc; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .btnForm { font-size:1.2em; font-weight:700; letter-spacing:0em; width:100%; height:50px; line-height:50px; margin:0; text-transform:lowercase; text-align:center; background:var(--color-link-coloured); color:var(--color-bg); cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .btnForm:hover { color:var(--color-bg); background:var(--color-link-coloured-hover); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .btnActivate { display:block; font-size:1.2em; font-weight:700; letter-spacing:0em; width:100%; height:50px; line-height:50px; margin:0 auto;; text-transform:lowercase; text-align:center; background:var(--color-link-coloured); color:var(--color-bg); cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .btnActivate:hover { color:var(--color-bg); background:var(--color-link-coloured-hover); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } /* AUDIO TRACKS */ .tracksContainer { width:100%; padding:0 0 40px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .tracksTitle { display:flex; justify-content:flex-start; align-items:center; width:100%; height:auto; padding:0; margin:80px 0 30px 0; gap:20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .tracksTitle div { line-height: 1.2em; } .tracksTitle div.box:nth-child(1) { flex:0 70px; } .tracksTitle div.box:nth-child(2) { flex:1; } .tracksTitle img { width:70px; height:auto; } .tracksTitle .tracksDesc { font-size: .9em; font-weight:600; text-transform:uppercase; color:var(--color-coloured); -webkit-font-smoothing: antialiased; } .itemTrack { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:20px; width:100%; height:auto; background:#f0f0f0; padding:10px 15px; margin:0 0 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .itemTrack .itemField:nth-child(1) { flex:1; position: relative; display: inline-block; } .itemTrack .itemField:nth-child(2) { flex:0 0 20px; } .itemTrack .itemField:nth-child(3) { flex:0 0 60px; align-self:center; text-align:center; } .itemTrack .itemField:nth-child(4) { flex:0 0 20px; } .itemTrack a, .saveDescBtn, .deleteFileBtn { font-size: 1.1em; color:#aaa; cursor:pointer; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .itemTrack a:hover, .saveDescBtn:hover, .deleteFileBtn:hover { color:var(--color-text-coloured); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .itemTrack input { width:100%; height:50px; line-height:50px; border:none; color:var(--color-text); background:#f0f0f0; padding:0 20px 0 40px; -webkit-font-smoothing: antialiased; font-size:.9em; border: 1px solid #f4f4f4; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .itemTrack input:focus, .itemTrack input:hover { background:#f8f8f8; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .itemTrack input:disabled { background-color: #f0f0f0; color: #888; cursor: not-allowed; } .itemTrack .icon-pencil { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #aaa; pointer-events: none; } /* AUDIO PLAYER */ .customPlayer { display: flex; margin: 0; } .progressCircle { position: relative; width: 60px; height: 60px; cursor:pointer; } .progressCircle svg { width: 100%; height: 100%; transform: rotate(-90deg); } .progressCircle .bg { fill: none; stroke: #e8e8e8; stroke-width: 3; } .progressCircle .progress { fill: none; stroke: var(--color-link-coloured); stroke-width: 3; stroke-dasharray: 100, 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.2s linear; } .progressCircle .btnToggle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; border: none; font-size: .85em; color: #aaa; cursor: pointer; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .progressCircle .btnToggle:hover { color: var(--color-link-coloured); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* FORM RESERVED */ .formRes { width:100%; max-width:640px; height:auto; margin:0; } .formRes.project { width:100%; max-width:440px; height:auto; margin:0; } .formRes.summary { display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-start; flex-wrap: wrap; gap:0 40px; width:100%; height:auto; max-width:unset; margin:0; padding:0 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .formRes.tracks { width:100%; height:auto; max-width:unset; margin:0; padding:0 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .formResTitle { font-size:1.2em; font-weight:800; line-height:1.4em; color:var(--color-text); -webkit-font-smoothing: antialiased; } .formResSubTitle { font-size:1em; font-weight:500; line-height:1.em; color:var(--color-text); margin:0 0 40px 0; -webkit-font-smoothing: antialiased; } .formResNotes { font-size:.9em; font-weight:500; line-height:1.2em; margin:0 0 20px 0; color:var(--color-text-coloured); } .formResTitle a, .formResSubTitle a, .formResNotes a, .formRes-fields a { font-size:.9em; font-weight:500; line-height:1.em; color:var(--color-link-coloured); border-bottom:1px dotted var(--color-link-coloured); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .formResTitle a:hover, .formResSubTitle a:hover, .formResNotes a:hover, .formRes-fields a:hover { color:var(--color-link-coloured-hover); border-bottom:1px solid var(--color-link-coloured-hover); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .formRes-single { width:100%; text-align:left; } .formRes-fields { width:100%; margin:0 0 20px 0; text-align:left; } .formRes-group { width:100%; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:20px; } .formRes-summary { width: calc(50% - 20px); text-align:left; margin:0 0 30px 0; } .formRes-fields label, .formRes-summary label { display:block; font-size:.8em; line-height:1.4em; margin:0 0 10px 0; color:var(--color-text); -webkit-font-smoothing: antialiased; } .formRes-fields label i, .formRes-summary label i { font-size:1.2em; margin-right:5px; } .formRes-fields input, .formRes-summary input { width:100%; height:50px; line-height:50px; border:none; color:var(--color-text); background:#f0f0f0; padding:0 20px; -webkit-font-smoothing: antialiased; } .formRes-fields input.cb, .formRes-summary input.cb { display:inline-block; width:15px; height:15px; border:none; color:var(--color-text); background:#f0f0f0; margin:0; padding:0; -webkit-font-smoothing: antialiased; } .formRes-fields input.image, .formRes-summary input.image { width:100%; height:auto; line-height:15px; border:none; color:var(--color-text); background:#f0f0f0; padding:10px 5px; } .formRes-fields select, .formRes-summary select { width:100%; height:50px; line-height:50px; margin:0 0 1px 0; border:none; color:#666; background:#f0f0f0; padding:0 20px; -webkit-font-smoothing: antialiased; } .formRes-fields textarea, .formRes-summary textarea { font-family:'Work Sans', sans-serif; width:100%; border:none; color:#666; background:#f0f0f0; padding:20px; overflow:hidden; -webkit-font-smoothing: antialiased; } .formRes-fields .notes, .formRes-summary .notes { font-size:.75em; line-height:1.4em; color:var(--color-text-coloured); margin:20px auto 30px auto; } .formRes-fields label#privacy, .formRes-summary label#privacy { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; -webkit-font-smoothing: antialiased; } .formRes-fields-split { display:flex; flex-direction:row; align-items:center; justify-content:center; width:100%; margin:20px 0 0 0; } .formRes-fields-split div { width:50%; font-size:.9em; font-weight:500; } .formRes-fields-split input.cb { display:inline-block; border:none; color:var(--color-text); background:#f0f0f0; margin:0 10px 0 0; padding:0; -webkit-font-smoothing: antialiased; } .formRes-fields input, .formRes-fields select, .formRes-fields textarea, .formRes-summary input, .formRes-summary select, .formRes-summary textarea { font-size:.9em; border: 1px solid #e8e8e8; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .formRes-fields input:focus, .formRes-fields select:focus, .formRes-fields textarea:focus, .formRes-summary input:focus, .formRes-summary select:focus, .formRes-summary textarea:focus, .formRes-summary input:hover, .formRes-summary select:hover, .formRes-summary textarea:hover { background:#e8e8e8; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .formRes-fields input:disabled, .formRes-fields textarea:disabled, .formRes-fields select:disabled, .formRes-summary input:disabled, .formRes-summary textarea:disabled, .formRes-summary select:disabled { background-color: #f0f0f0; color: #888; cursor: not-allowed; } .btnFormRes { display:block; width:280px; height:50px; line-height:50px; font-size:.7em; font-weight:600; letter-spacing:.05em; color:#fff; margin-top:40px; text-align:center; text-transform:uppercase; background:#222; border-bottom:1px solid #99cc33; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .btnFormRes:hover { color:#222; background:#99cc33; border-bottom:1px solid #222; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .btnDelRes { display:block; width:280px; height:50px; line-height:50px; font-size:.7em; font-weight:600; letter-spacing:.05em; color:#fff; margin-top:40px; text-align:center; text-transform:uppercase; background:var(--color-error); border-bottom:1px solid var(--color-dark); cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .btnDelRes:hover { color:#fff; background:var(--color-dark); border-bottom:1px solid var(--color-error); -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .btnFormSum { display:block; width:280px; height:50px; line-height:50px; font-size:.7em; font-weight:600; letter-spacing:.05em; color:#fff; margin-top:0; text-align:center; text-transform:uppercase; background:#222; border-bottom:1px solid #99cc33; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .btnFormSum:hover { color:#222; background:#99cc33; border-bottom:1px solid #222; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } /* PASSORD WRAPPER */ .password-wrapper { position: relative; } .password-wrapper .toggle-password { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); cursor: pointer; font-size: 1rem; color:#999; z-index: 2; } .toggle-password { position: absolute; right: 14px; cursor: pointer; user-select: none; display:none; } .warning_desc { font-weight:400; font-size:.9em; line-height:2em; color:var(--color-text); margin:40px auto 5px auto; -webkit-font-smoothing: antialiased; } .warning_code { font-weight:400; font-size:.9em; line-height:2em; color:var(--color-text); margin:10px auto 20px auto; -webkit-font-smoothing: antialiased; } .warning_code #captcha { margin:10px auto; } .warning_code input { display:block; width:200px; font-size:.9em; margin:0 0 10px 0; } .warning_code span { font-size:.8em; } .input-error { border: 1px solid var(--color-error) !important; } .input-valid { border: 1px solid var(--color-success) !important; } .input-error-request { border-bottom: 1px solid var(--color-error) !important; } .input-valid-request { border-bottom: 1px solid var(--color-success) !important; } /* RESPONSE MSG FORM */ .response_msg { display:none; position:relative; width:100%; height:40px; line-height:40px; margin:20px 0 10px 0; text-align:left; opacity:0; visibility:hidden; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .response_msgRes { display:none; position:fixed; width:400px; height:40px; line-height:40px; margin:0 auto; top:50%; left:50%; text-align:center; opacity:0; visibility:hidden; z-index:99999; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .loading { display:flex; justify-content:center; align-items:center; width:100%; height:100%; font-size:.8em; font-weight:600; line-height:1.4em; margin:0 auto; color:var(--color-text-light); text-transform:uppercase; background:var(--color-loading); -webkit-font-smoothing: antialiased; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .success { display:flex; justify-content:center; align-items:center; width:100%; height:100%; font-size:.8em; font-weight:600; line-height:1.4em; margin:0 auto; color:var(--color-text-light); text-transform:uppercase; background:var(--color-success); -webkit-font-smoothing: antialiased; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .error { display:flex; justify-content:center; align-items:center; width:100%; height:100%; font-size:.8em; font-weight:600; line-height:1.4em; margin:0 auto; color:var(--color-text-light); text-transform:uppercase; background:var(--color-error); -webkit-font-smoothing: antialiased; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .response_msg.show, .response_msgRes.show, #modalResponse.show { opacity:1; visibility:visible; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } /* MODAL OVERLAY */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 999999999; } .modal-box { background: var(--color-bg); padding:40px; border-radius: 12px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 0 20px rgba(0,0,0,0.2); position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .modal-title { color:var(--color-text-coloured); font-size: 1.2em; font-weight: 600; line-height: 1.8em; -webkit-font-smoothing: antialiased; } .modal-message { margin-bottom: 20px; font-size: .9em; font-weight: 400; ine-height: 1.6em; -webkit-font-smoothing: antialiased; } .modal-title i, .modal-message i { margin:0 5px 0 0; } .modal-buttons { display: flex; justify-content: center; gap: 1px; margin: 20px 0 0 0; } .modal-btn { color:var(--color-bg); background:var(--color-link-coloured); border: none; padding: 0 auto; width:120px; height:40px; line-height: 40px; font-size: .7em; font-weight: 600; text-transform:uppercase; cursor:pointer; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-font-smoothing: antialiased; transition: background 0.3s ease; } .modal-btn:hover { color:var(--color-bg); background:var(--color-link-coloured-hover); } #modalResponse { display:none; width:100%; height:40px; line-height:40px; margin:0 auto; text-align:center; opacity:0; visibility:hidden; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .modal-box label { display:block; font-size:1em; font-weight: 400; line-height:1.6em; margin:0 0 20px 0; color:var(--color-text); -webkit-font-smoothing: antialiased; } .modal-box label i { font-size:1.2em; margin-right:5px; } .modal-box input { width:100%; height:50px; line-height:50px; border:none; color:var(--color-text); background:#f8f8f8; padding:20px; -webkit-font-smoothing: antialiased; } .modal-box input.cb { display:inline-block; border:none; color:var(--color-text); background:#f8f8f8; margin:0; padding:0; -webkit-font-smoothing: antialiased; } .modal-box input.image { width:100%; height:auto; line-height:15px; border:none; color:var(--color-text); background:#f8f8f8; padding:10px 5px; } .modal-box select { width:100%; height:50px; line-height:50px; margin:0 0 1px 0; border:none; color:#666; background:#f8f8f8; padding:0 20px; -webkit-font-smoothing: antialiased; } .modal-box textarea { font-family:'Work Sans', sans-serif; width:100%; border:none; color:#666; background:#f8f8f8; padding:20px; overflow:hidden; -webkit-font-smoothing: antialiased; } .modal-box .notes { font-size:.75em; line-height:1.4em; color:var(--color-text-coloured); margin:20px auto 30px auto; } .modal-box input, .modal-box select, .modal-box textarea { font-size:.9em; border: 1px solid #e8e8e8; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .modal-box input:focus, .modal-box select:focus, .modal-box textarea:focus { background:#e8e8e8; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .modal-box input:disabled, .modal-box textarea:disabled, .modal-box select:disabled { background-color: #f8f8f8; color: #888; cursor: not-allowed; } /* MODAL OTP */ .otp-modal { position: fixed; top: 0; left: 0; padding: 40px; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; } /* MODAL BOX */ .otp-content { background: var(--color-bg); padding:60px; border-radius: 12px; max-width: 478px; width: 90%; text-align: center; box-shadow: 0 0 20px rgba(0,0,0,0.2); position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /* HEADER E MESSAGGI */ .otp-content h2 { font-size: 1.8em; color: var(--color-text); margin-bottom: 10px; -webkit-font-smoothing: antialiased; } .otp-content p { font-size: .9em; color: var(--color-text); margin-bottom: 20px; -webkit-font-smoothing: antialiased; } /* OTP INPUT FIELDS */ .otp-inputs { display: flex; justify-content: center; gap: 10px; margin: 20px 0 0 0; } .otp-field { width: 40px; height: 50px; text-align: center; font-size: 1.2rem; border: 2px solid #ccc; color: var(--color-text-coloured); border-radius: 6px; -webkit-font-smoothing: antialiased; transition: border-color 0.2s ease; } .otp-field:focus { border-color: var(--color-text-coloured); outline: none; } /* BUTTON */ .footer_block { display:flex; flex-direction:row; justify-content:space-between; align-items:center; width:100%; gap:2px; } #otp_timer { width:26%; } #send_block, #resend_block { width:37%; } #otp_timer, #verify_otp_btn, #resend_otp_btn { color:var(--color-bg); background:var(--color-link-coloured); border: none; padding: 0 auto; height:40px; line-height: 40px; font-size: .9em; font-weight: 600; transition: background 0.3s ease; } #otp_timer { -webkit-border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px; } #verify_otp_btn { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #resend_otp_btn { -webkit-border-radius: 0 6px 6px 0; -moz-border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0; } #otp_timer { cursor: help; } #verify_otp_btn, #resend_otp_btn, #resend_message { width:100%; cursor: pointer; } #verify_otp_btn:disabled, #resend_otp_btn:disabled { background: #ccc; cursor: not-allowed; } #verify_otp_btn:hover:not(:disabled), #resend_otp_btn:hover:not(:disabled) { color:var(--color-bg); background:var(--color-link-coloured-hover); } /* MESSAGGI */ .msg_block { display:block; width:100%; height:40px; line-height:40px; margin:20px 0 2px 0; } .error-message { display:flex; justify-content:center; align-items:center; width:100%; height:100%; line-height:40px; font-size:.7em; font-weight:600; line-height:1.4em; margin:0 auto; color:var(--color-text-light); text-transform:uppercase; background:var(--color-error); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .success-message { display:flex; justify-content:center; align-items:center; width:100%; height:100%; line-height:40px; font-size:.7em; font-weight:600; line-height:1.4em; margin:0 auto; color:var(--color-text-light); text-transform:uppercase; background:var(--color-success); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .info-message { color: var(--color-text-coloured); font-size: .9em; font-weight: 600; } .response_msg i, .response_msgRes i, .error-message i, .success-message i { font-size:1.2em; margin-right:5px; } /* CONTACT */ .contactBox { display:flex; flex-direction:row; align-items:center; flex-flow:row wrap; justify-content:center; width:80%; margin:0 auto; } .contactClmn:nth-child(1) { width:50%; text-align:left; } .contactClmn:nth-child(2) { width:50%; text-align:right; } .contactClmn .clmn { width:100%; margin:0 auto; text-align:left; vertical-align:middle; } .clmn .contact_logo { width:180px; height:39px; background:url('../images/footerLogo.png') center center no-repeat; background-size:100%; margin-bottom:15px; overflow:hidden; } .clmn h1 { font-size:.8em; font-weight:400; margin-bottom:20px; text-transform:uppercase; -webkit-font-smoothing: antialiased; } .clmn h2 { font-size:.8em; font-weight:400; margin:20px 0; text-transform:uppercase; -webkit-font-smoothing: antialiased; } .clmn h3 { font-size:.8em; font-weight:400; line-height:1.4em; color:var(--color-link); margin:0 0 20px 0; -webkit-font-smoothing: antialiased; } .clmn h4 { font-size:.8em; font-weight:400; line-height:1.4em; color:var(--color-link); -webkit-font-smoothing: antialiased; } .clmn h5 { margin:20px 0 0 0; } .clmn h7 { font-size:.9em; font-weight:400; line-height:1.4em; color:var(--color-link); -webkit-font-smoothing: antialiased; } .clmn h5, .clmn h6 { font-size:.8em; font-weight:400; line-height:1.4em; color:var(--color-link); -webkit-font-smoothing: antialiased; } .clmn h5 a, .clmn h6 a { font-weight:400; color:var(--color-link-hover); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .clmn h5 a:hover, .clmn h6 a:hover { color:var(--color-link); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } /* FORM */ #formResponseOK { position:fixed; width:100%; min-height:40px; height:auto; font-size:.65em; font-weight:600; letter-spacing:.2em; line-height:40px; margin:85px 0 0 0; padding:0; background-color:transparent; color:#fff; text-align:center; text-transform:uppercase; opacity:0; visibility:hidden; z-index:999999; -webkit-font-smoothing: antialiased; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } #formResponseKO { position:fixed; width:100%; min-height:40px; height:auto; font-size:.65em; font-weight:600; letter-spacing:.2em; line-height:40px; margin:85px 0 0 0; padding:0; background-color:transparent; color:#fff; text-align:center; text-transform:uppercase; opacity:0; visibility:hidden; z-index:999999; -webkit-font-smoothing: antialiased; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } #formError { position:fixed; width:100%; min-height:40px; height:auto; font-size:.65em; font-weight:600; letter-spacing:.2em; line-height:40px; margin:85px 0 0 0; padding:0; background-color:transparent; color:#fff; text-align:center; text-transform:uppercase; opacity:0; visibility:hidden; z-index:999999; -webkit-font-smoothing: antialiased; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } #formResponseOK .formResponseContent { background-color:#99cc33; } #formResponseKO .formResponseContent { background-color:#eb547c; } #formError .formResponseContent { background-color:#eb547c; } #formResponseOK.show, #formResponseKO.show, #formError.show { opacity:1; visibility:visible; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } #contact-form .input:nth-child(2), #contact-form .input:nth-child(4) { margin-right:20px; } #contact-form .input { display:inline-block; width:40%; text-align:right; margin-top:10px; float:right; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; appearance:none; } #contact-form .textarea { display:inline-block; width:40%; text-align:right; margin-top:10px; float:right; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; appearance:none; } #contact-form label { font-size:.6em; letter-spacing:0em; font-weight:500; color:var(--color-text); line-height:30px; text-transform:uppercase; text-align:right; -webkit-font-smoothing: antialiased; } #contact-form .input input { width:100%; height:30px; line-height:20px; border:0; background:none; margin:0; font-size:.8em; font-weight:400; color:var(--color-text); border-bottom:1px solid var(--color-text); text-align:left; resize:none; overflow:hidden; -webkit-font-smoothing: antialiased; -webkit-appearance:none; -moz-appearance:none; appearance:none; } #contact-form .textarea textarea { width:100%; height:30px; line-height:20px; border:0; background:none; margin:0; font-family:'Work Sans'; font-size:.8em; font-weight:400; color:#111; border-bottom:1px solid var(--color-text); text-align:left; resize:none; overflow:hidden; -webkit-font-smoothing: antialiased; -webkit-appearance:none; -moz-appearance:none; appearance:none; } #contact-form .input input:focus, #contactForm .textarea textarea:focus { bottom:1px solid var(--color-text); color:var(--color-text); outline:none; } #contact-form .submit { position:relative; width:100%; height:50px; margin-top:30px; float:right; right:0; text-align:right; } #contact-form .submit #submitForm { width:140px; height:50px; background:transparent; border-bottom:1px solid var(--color-text); font-size:.7em; font-weight:500; color:var(--color-text); text-transform:uppercase; text-align:right; cursor:pointer; float:right; outline:none; text-decoration:none; -webkit-font-smoothing: antialiased; -webkit-appearance:none; -moz-appearance:none; appearance:none; -webkit-transition:all 0.2s ease-in-out 0.2s; -moz-transition:all 0.2s ease-in-out 0.2s; -o-transition:all 0.2s ease-in-out 0.2s; transition:all 0.2s ease-in-out 0.2s; } #contact-form .submit #submitForm .fas, #contact-form .submit #submitForm .far { margin-right:3px; } #contact-form .submit #submitForm:focus{ outline:none; } #contact-form .submit #submitForm:hover{ border-bottom:1px solid var(--color-text-coloured); color:var(--color-text-coloured); -webkit-transition:all 0.2s ease-in-out 0.2s; -moz-transition:all 0.2s ease-in-out 0.2s; -o-transition:all 0.2s ease-in-out 0.2s; transition:all 0.2s ease-in-out 0.2s; } /* FOOTER */ .footerBox { display:flex; flex-direction:row; align-items:start; flex-flow:row wrap; justify-content:space-between; } .boxDiv { margin:0 auto; text-align:left; vertical-align:middle; } .footerLogo { width:180px; height:39px; background:url('../images/footerLogo.png') center center no-repeat; background-size:100%; margin-bottom:15px; overflow:hidden; } .boxDivTitle { font-size:.9em; color:#99cc33; font-weight:600; margin-bottom:10px; -webkit-font-smoothing: antialiased; } .boxDivDesc { font-size:.8em; font-weight:500; line-height:1.5em; color:#777; vertical-align:top; -webkit-font-smoothing: antialiased; } .boxDivDesc a { color:#777; font-weight:500; line-height:1.5em; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .boxDivDesc a:hover { color:#99cc33; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .spacing { display:inline-block; color:#777; margin:0 10px; } .footerInfo { font-size:.7em; letter-spacing:.05em; line-height:1.5em; color:#777; text-transform:uppercase; -webkit-font-smoothing: antialiased; } .footerInfo { margin:0; } .footerInfo a { display:inline-block; color:#777; text-transform:uppercase; background:none; border:none; text-decoration:none; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .footerInfo a:hover { color:#ccc; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .footerSocial { margin:0; } .footerSocial a { display:block; font-size:.8em; font-weight:500; line-height:1.5em; color:#777; margin:0; cursor:pointer; -webkit-font-smoothing: antialiased; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .footerSocial a:last-child { margin-right:0; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out; } .footerSocial a:hover { color:#99cc33; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } /* jQuery Growl * Copyright 2015 Kevin Sylvestre * 1.3.1 */ #growls { z-index: 99999999; position: fixed; } #growls.default { top: 10px; right: 10px; } #growls.tl { top: 10px; left: 10px; } #growls.tr { top: 10px; right: 10px; } #growls.bl { bottom: 10px; left: 10px; } #growls.br { bottom: 10px; right: 10px; } #growls.tc { top: 10px; right: 10px; left: 10px; } #growls.bc { bottom: 10px; right: 10px; left: 10px; } #growls.tc .growl, #growls.bc .growl { margin-left: auto; margin-right: auto; } .growl { opacity: 0.9; filter: alpha(opacity=90); position: relative; border-radius: 8px; padding:20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .growl.growl-incoming { opacity: 0; filter: alpha(opacity=0); } .growl.growl-outgoing { opacity: 0; filter: alpha(opacity=0); } .growl.growl-small { width: 200px; padding: 5px; margin: 5px; } .growl.growl-medium { width: 250px; padding: 15px 15px 20px 15px; margin: 10px; } .growl.growl-large { width: 320px; padding: 20px; margin: 15px; } .growl.growl-default { color: #FFF; background: var(--color-coloured); } .growl.growl-error { color: #FFF; background: var(--color-error); } .growl.growl-notice { color: #FFF; background: var(--color-success); } .growl.growl-warning { color: #333; background: var(--color-warning); } .growl .growl-title { font-size:1.1em; font-weight:600; line-height: 1.6em; margin:0 0 5px 0; -webkit-font-smoothing: antialiased; } .growl .growl-title .fas, .growl .growl-title .far { margin-right:5px; } .growl .growl-message { font-size: .85em; font-weight:400; line-height: 1.3em; -webkit-font-smoothing: antialiased; } .growl .growl-close { cursor: pointer; float: right; font-size: 1.6em; line-height: 1em; font-weight: normal; -webkit-font-smoothing: antialiased; } /*! Swipebox v1.3.0 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */html.swipebox-html.swipebox-touch{overflow:hidden!important}#swipebox-overlay img{border:none!important}#swipebox-overlay{width:100%;height:100%;position:fixed;top:0;left:0;z-index:9999999!important;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:rgba(255,255,255,.85)}#swipebox-container{position:relative;width:100%;height:100%}#swipebox-slider{-webkit-transition:-webkit-transform .4s;transition:transform .4s;height:100%;left:0;top:0;width:100%;white-space:nowrap;position:absolute;display:none;cursor:pointer}#swipebox-slider .slide{height:100%;width:100%;line-height:1px;text-align:center;display:inline-block}#swipebox-slider .slide:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#swipebox-slider .slide .swipebox-inline-container,#swipebox-slider .slide .swipebox-video-container,#swipebox-slider .slide img{display:inline-block;max-height:88%;max-width:88%;margin:0;padding:0;width:auto;height:auto;vertical-align:middle}#swipebox-slider .slide .swipebox-video-container{background:0 0;max-width:960px;max-height:88%;width:100%;padding:5%;-webkit-box-sizing:border-box;box-sizing:border-box}#swipebox-slider .slide .swipebox-video-container .swipebox-video{width:100%;height:0;padding-bottom:56.25%;overflow:hidden;position:relative}#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe{width:100%!important;height:100%!important;position:absolute;top:0;left:0}#swipebox-slider .slide-loading{background:url(../images/loading.gif) center center no-repeat}#swipebox-bottom-bar,#swipebox-top-bar{-webkit-transition:.5s;transition:.5s;position:absolute;left:0;z-index:999;height:50px;width:100%;background:0 0;opacity:.95}#swipebox-bottom-bar{bottom:-100px}#swipebox-bottom-bar.visible-bars{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}#swipebox-top-bar.visible-bars{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}#swipebox-title{display:block;width:70%;text-align:center;font-size:.7em;font-weight:400;color:#111;text-transform:uppercase;letter-spacing:.4em;line-height:18px;margin:28px auto 0}#swipebox-close,#swipebox-next,#swipebox-prev{background-image:url(../images/icons.png);background-repeat:no-repeat;border:none!important;text-decoration:none!important;outline:0!important;cursor:pointer;width:50px;height:50px;top:0}#swipebox-arrows{display:block;margin:0 auto;height:50px;width:92%;max-width:800px}#swipebox-prev{background-position:-32px 13px;float:left;margin-left:-20px;margin-top:-10px}#swipebox-next{background-position:-78px 13px;float:right;margin-top:-10px}#swipebox-close{top:10px;margin-right:20px;position:absolute;z-index:9999;background-position:16px 8px}.swipebox-no-close-button #swipebox-close{display:none}#swipebox-next.disabled,#swipebox-prev.disabled{opacity:.3}.swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider{-webkit-animation:.3s rightSpring;animation:.3s rightSpring}.swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider{-webkit-animation:.3s leftSpring;animation:.3s leftSpring}.swipebox-touch #swipebox-container:after,.swipebox-touch #swipebox-container:before{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:.2s;transition:.2s;content:' ';position:absolute;z-index:999;top:0;height:100%;width:20px;opacity:0}.swipebox-touch #swipebox-container:before{left:0;-webkit-box-shadow:inset 10px 0 10px -8px #656565;box-shadow:inset 10px 0 10px -8px #656565}.swipebox-touch #swipebox-container:after{right:0;-webkit-box-shadow:inset -10px 0 10px -8px #656565;box-shadow:inset -10px 0 10px -8px #656565}.swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before,.swipebox-touch #swipebox-overlay.rightSpringTouch #swipebox-container:after{opacity:1}@-webkit-keyframes rightSpring{0%,100%{left:0}50%{left:-30px}}@keyframes rightSpring{0%,100%{left:0}50%{left:-30px}}@-webkit-keyframes leftSpring{0%,100%{left:0}50%{left:30px}}@keyframes leftSpring{0%,100%{left:0}50%{left:30px}}#swipebox-top-bar{top:-100px;color:#fff!important;font-size:15px;line-height:43px} /* ------ venobox.css --------*/ .vbox-overlay *, .vbox-overlay *:before, .vbox-overlay *:after{ -webkit-backface-visibility: hidden; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .vbox-overlay{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 999999; -webkit-transform:translateZ(1000px); transform: translateZ(1000px); transform-style: preserve-3d; } /* ----- navigation ----- */ .vbox-title{ width: 100%; height: 40px; float: left; text-align: center; line-height: 28px; font-size: 12px; padding: 6px 40px; overflow: hidden; position: fixed; display: none; left: 0; z-index: 1050; } .vbox-close{ cursor: pointer; position: fixed; top: 10px; right: 20px; width: 50px; height: 40px; padding: 6px; display: block; background-position:10px center; overflow: hidden; font-size: 30px; line-height: 1; text-align: center; z-index: 1050; } .vbox-num{ cursor: pointer; position: fixed; left: 0; height: 40px; display: block; overflow: hidden; line-height: 28px; font-size: 12px; padding: 6px 10px; display: none; z-index: 1050; } /* ----- navigation ARROWS ----- */ .vbox-next, .vbox-prev{ position: fixed; top: 50%; margin-top: -15px; overflow: hidden; cursor: pointer; display: block; width: 45px; height: 45px; z-index: 1050; } .vbox-next span, .vbox-prev span{ position: relative; width: 20px; height: 20px; border: 2px solid transparent; border-top-color: #B6B6B6; border-right-color: #B6B6B6; text-indent: -100px; position: absolute; top: 8px; display: block; } .vbox-prev{ left: 15px; } .vbox-next{ right: 15px; } .vbox-prev span{ left: 10px; -ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .vbox-next span{ -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 10px; } /* ------- inline window ------ */ .vbox-inline{ width: 420px; height: 315px; height: 70vh; padding: 10px; background: #fff; margin: 0 auto; overflow: auto; text-align: left; } /* ------- Video & iFrames window ------ */ .venoframe{ max-width: 100%; width: 100%; border: none; width: 100%; height: 260px; height: 70vh; } .venoframe.vbvid{ height: 260px; } @media (min-width: 768px) { .venoframe, .vbox-inline{ width: 90%; height: 360px; height: 70vh; } .venoframe.vbvid{ width: 640px; height: 360px; } } @media (min-width: 992px) { .venoframe, .vbox-inline{ max-width: 1200px; width: 80%; height: 540px; height: 70vh; } .venoframe.vbvid{ width: 960px; height: 540px; } } /* Please do NOT edit this part! or at least read this note: http://i.imgur.com/7C0ws9e.gif */ .vbox-open{ overflow: hidden; } .vbox-container{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow-x: hidden; overflow-y: scroll; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; z-index: 20; max-height: 100%; } .vbox-content{ text-align: center; float: left; width: 100%; position: relative; overflow: hidden; padding: 20px 10px; } .vbox-container img{ max-width: 100%; height: auto; } .figlio{ box-shadow: 0 0 12px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); max-width: 100%; text-align: initial; } img.figlio{ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } .vbox-content.swipe-left{ margin-left: -200px !important; } .vbox-content.swipe-right{ margin-left: 200px !important; } .animated{ webkit-transition: margin 300ms ease-out; transition: margin 300ms ease-out; } .animate-in{ opacity: 1; } .animate-out{ opacity: 0; } /* ---------- preloader ---------- * SPINKIT * http://tobiasahlin.com/spinkit/ -------------------------------- */ .sk-double-bounce,.sk-rotating-plane{width:40px;height:40px;margin:40px auto}.sk-rotating-plane{background-color:#333;-webkit-backface-visibility:visible;-moz-backface-visibility:visible;backface-visibility:visible;-webkit-animation:sk-rotatePlane 1.2s infinite ease-in-out;animation:sk-rotatePlane 1.2s infinite ease-in-out}@-webkit-keyframes sk-rotatePlane{0%{-webkit-transform:perspective(120px) rotateX(0) rotateY(0);transform:perspective(120px) rotateX(0) rotateY(0)}50%{-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0);transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}@keyframes sk-rotatePlane{0%{-webkit-transform:perspective(120px) rotateX(0) rotateY(0);transform:perspective(120px) rotateX(0) rotateY(0)}50%{-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0);transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-double-bounce{position:relative}.sk-double-bounce .sk-child{width:100%;height:100%;border-radius:50%;background-color:#333;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:sk-doubleBounce 2s infinite ease-in-out;animation:sk-doubleBounce 2s infinite ease-in-out}.sk-double-bounce .sk-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes sk-doubleBounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sk-doubleBounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}.sk-wave{width:50px;height:40px;text-align:center;font-size:10px;margin:40px auto}.sk-wave .sk-rect{background-color:#333;height:100%;width:4px;margin:0 1px;display:inline-block;-webkit-animation:sk-waveStretchDelay 1.2s infinite ease-in-out;animation:sk-waveStretchDelay 1.2s infinite ease-in-out}.sk-wave .sk-rect1{-webkit-animation-delay:-1.2s;animation-delay:-1.2s}.sk-wave .sk-rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-wave .sk-rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-wave .sk-rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-wave .sk-rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-waveStretchDelay{0%,100%,40%{-webkit-transform:scaleY(.4);transform:scaleY(.4)}20%{-webkit-transform:scaleY(1);transform:scaleY(1)}}@keyframes sk-waveStretchDelay{0%,100%,40%{-webkit-transform:scaleY(.4);transform:scaleY(.4)}20%{-webkit-transform:scaleY(1);transform:scaleY(1)}}.sk-three-bounce{margin:40px auto;width:100px;text-align:center}.sk-three-bounce .sk-child{width:16px;height:16px;background-color:#333;border-radius:100%;margin:4px;display:inline-block;-webkit-animation:sk-three-bounce 1.4s ease-in-out 0s infinite both;animation:sk-three-bounce 1.4s ease-in-out 0s infinite both}.sk-cube-grid,.sk-spinner-pulse{width:40px;height:40px;margin:40px auto}.sk-three-bounce .sk-bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.sk-three-bounce .sk-bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-three-bounce{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sk-three-bounce{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.sk-spinner-pulse{background-color:#333;border-radius:100%;-webkit-animation:sk-pulseScaleOut 1s infinite ease-in-out;animation:sk-pulseScaleOut 1s infinite ease-in-out}@-webkit-keyframes sk-pulseScaleOut{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes sk-pulseScaleOut{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.sk-cube-grid .sk-cube{width:33.33%;height:33.33%;background-color:#333;float:left;-webkit-animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.sk-cube-grid .sk-cube1{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube2{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube3{-webkit-animation-delay:.4s;animation-delay:.4s}.sk-cube-grid .sk-cube4{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube5{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube6{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube7{-webkit-animation-delay:0ms;animation-delay:0ms}.sk-cube-grid .sk-cube8{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube9{-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes sk-cubeGridScaleDelay{0%,100%,70%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}@keyframes sk-cubeGridScaleDelay{0%,100%,70%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}.sk-wandering-cubes{margin:40px auto;width:40px;height:40px;position:relative}.sk-wandering-cubes .sk-cube{background-color:#333;width:10px;height:10px;position:absolute;top:0;left:0;-webkit-animation:sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;animation:sk-wanderingCube 1.8s ease-in-out -1.8s infinite both}.sk-wandering-cubes .sk-cube2{-webkit-animation-delay:-.9s;animation-delay:-.9s}@-webkit-keyframes sk-wanderingCube{0%{-webkit-transform:rotate(0);transform:rotate(0)}25%{-webkit-transform:translateX(30px) rotate(-90deg) scale(.5);transform:translateX(30px) rotate(-90deg) scale(.5)}50%{-webkit-transform:translateX(30px) translateY(30px) rotate(-179deg);transform:translateX(30px) translateY(30px) rotate(-179deg)}50.1%{-webkit-transform:translateX(30px) translateY(30px) rotate(-180deg);transform:translateX(30px) translateY(30px) rotate(-180deg)}75%{-webkit-transform:translateX(0) translateY(30px) rotate(-270deg) scale(.5);transform:translateX(0) translateY(30px) rotate(-270deg) scale(.5)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes sk-wanderingCube{0%{-webkit-transform:rotate(0);transform:rotate(0)}25%{-webkit-transform:translateX(30px) rotate(-90deg) scale(.5);transform:translateX(30px) rotate(-90deg) scale(.5)}50%{-webkit-transform:translateX(30px) translateY(30px) rotate(-179deg);transform:translateX(30px) translateY(30px) rotate(-179deg)}50.1%{-webkit-transform:translateX(30px) translateY(30px) rotate(-180deg);transform:translateX(30px) translateY(30px) rotate(-180deg)}75%{-webkit-transform:translateX(0) translateY(30px) rotate(-270deg) scale(.5);transform:translateX(0) translateY(30px) rotate(-270deg) scale(.5)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}} /* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */ .tooltipster-default { border-radius: 3px; background: #111; color: #fff; margin-top:-13px; -webkit-font-smoothing: antialiased; } /* Use this next selector to style things like font-size and line-height: */ .tooltipster-default .tooltipster-content { font-size: 11px; font-weight:500; line-height: 1.2em; padding: 6px 8px; overflow: hidden; -webkit-font-smoothing: antialiased; } /* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */ .tooltipster-default .tooltipster-arrow .tooltipster-arrow-border { /* border-color: ... !important; */ } /* If you're using the icon option, use this next selector to style them */ .tooltipster-icon { cursor: help; margin-left: 4px; } /* This is the base styling required to make all Tooltipsters work */ .tooltipster-base { padding: 0; font-size: 0; line-height: 0; position: absolute; left: 0; top: 0; z-index: 9999999; pointer-events: none; width: auto; overflow: visible; } .tooltipster-base .tooltipster-content { overflow: hidden; } /* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */ .tooltipster-arrow { display: block; text-align: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .tooltipster-arrow span, .tooltipster-arrow-border { display: block; width: 0; height: 0; position: absolute; } .tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span { border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-top: 8px solid; bottom: -7px; } .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-top: 9px solid; bottom: -7px; } .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span { border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-bottom: 8px solid; top: -7px; } .tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-bottom: 9px solid; top: -7px; } .tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border { left: 0; right: 0; margin: 0 auto; } .tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span { left: 6px; } .tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { left: 5px; } .tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span { right: 6px; } .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border { right: 5px; } .tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-left: 8px solid; top: 50%; margin-top: -7px; right: -7px; } .tooltipster-arrow-left .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-left: 9px solid; margin-top: -8px; } .tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-right: 8px solid; top: 50%; margin-top: -7px; left: -7px; } .tooltipster-arrow-right .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-right: 9px solid; margin-top: -8px; } /* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */ .tooltipster-fade { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; } .tooltipster-fade-show { opacity: 1; } .tooltipster-grow { -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -o-transform: scale(0,0); -ms-transform: scale(0,0); transform: scale(0,0); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-backface-visibility: hidden; } .tooltipster-grow-show { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -o-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); } .tooltipster-swing { opacity: 0; -webkit-transform: rotateZ(4deg); -moz-transform: rotateZ(4deg); -o-transform: rotateZ(4deg); -ms-transform: rotateZ(4deg); transform: rotateZ(4deg); -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; } .tooltipster-swing-show { opacity: 1; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1); -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); } .tooltipster-fall { top: 0; -webkit-transition-property: top; -moz-transition-property: top; -o-transition-property: top; -ms-transition-property: top; transition-property: top; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); } .tooltipster-fall-show { } .tooltipster-fall.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; top: 0px !important; opacity: 0; } .tooltipster-slide { left: -40px; -webkit-transition-property: left; -moz-transition-property: left; -o-transition-property: left; -ms-transition-property: left; transition-property: left; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); } .tooltipster-slide.tooltipster-slide-show { } .tooltipster-slide.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; left: 0px !important; opacity: 0; } /* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */ .tooltipster-content-changing { opacity: 0.5; -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }