html { scroll-behavior: unset !important; } /**** FOR SPLASH -- delete after ***/ /* .splashpage { position: fixed; width: 100vw; height: 100vh; background-color: #fff; z-index: 99999 !important; display: flex; justify-content: center; align-items: center; flex-direction: column; } .soon-online #popup, .soon-online #head, .soon-online #top, .soon-online #bottom, .soon-online #footer { display: none; } */ :root { /** text ***/ --blacktext: #1D1D1B !important; --darkgreytext: #495057 !important; /* --darkgreytext: #6c757d !important;*/ --greytext: #9b9b9b !important; --whitetext: #fff !important; --yellowtext: #ffe16b !important; --creamtext: #a28c72 !important; --greentext:#549381 !important; --pinktext: #B7676B !important; /** bg **/ --blackbg: #1D1D1B !important; --greybg: #f6f5f4 !important; --whitebg: #FFFFFF !important; /* --creambg: #ece9e2 !important;*/ /* --creambg: #f0eeea !important;*/ --creambg: #f5f2ed !important; --yellowbg: #fdef7f !important; /** font **/ --primaryfont: 'Montserrat', sans-serif !important; --secondaryfont: 'Cinzel', serif !important; /** sizes ***/ --smallsize: 13px; --basesize: 17px; --mediumsize: calc(var(--basesize) * 1.3); --bigsize: calc(var(--basesize) * 1.8); --extrabigsize: calc(var(--basesize) * 3); /** weights ***/ --thin: 100; --extralight: 200; --light: 300; --regular: 400; --medium: 500; --bold: 600; --extrabold: 700; } /*** ------------------------------------------------------ COOKIE BANNER --- cookie yes ----------------------------------------------------------------------- **/ .cky-consent-container { position: fixed; width: 440px; box-sizing: border-box; z-index: 9999999; border-radius: 6px; margin-bottom: 10px; /** take out when live ***/ /* display: none;*/ } .cky-notice-des a.cky-policy, .cky-notice-des button.cky-policy { font-size: 14px; color: #00653d !important; white-space: nowrap; cursor: pointer; background: none !important; border: 0 !important; text-decoration: underline !important; } .cky-btn { border-style: solid !important; border-width: 1px !important; } .cky-consent-container .cky-consent-bar { background-color: rgb(255, 255, 255, 0.9) !important; border: 0 !important; padding: 20px 26px; box-shadow: none !important; border-radius: 0 !important; } .cky-consent-bar p { font-size: 13px !important; line-height: 160%; } .cky-btn { border-style: solid !important; border-width: 1px !important; font-size: 13px !important; } .cky-modal p { font-size: 13px !important; line-height: 160%; } .cky-accordion-btn { font-size: 13px !important; } .cky-show-desc-btn { color: #00653d !important; } .cky-modal { border-radius: 0 !important; } /** ------------------------------------------------------------------------- :::::::: BODY & MAIN STUFF ------------------------------------------------------------------------- **/ body { color: var(--darkgreytext) !important; font-family: var(--primaryfont) !important; font-size: var(--basesize) !important; font-weight: var(--light) !important; line-height: 160% !important; letter-spacing: 0em; /** for fadein/out effect ** -- check in index.php -- **/ opacity: 0; -webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -o-transition: opacity 1s ease-out; transition: opacity 1s ease-out; /** because of scroll trigger GSAP **/ /*visibility: inherit !important; translate: none !important; rotate: none !important; scale: none !important; transform: translate(0px) !important;*/ } /** ------------------------------------------------------------------------- :::::::: GENERAL ------------------------------------------------------------------------- **/ .row { margin: 0 !important; } .centered { margin-left: auto !important; margin-right: auto !important; } .scrolldown { opacity: 1; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .scrolldown.hide { opacity: 0; } /**** BULLETS ****/ .bullets { padding: 0; } .bullets li { list-style: none !important; } .bullets li::before { font-family: "bootstrap-icons"; content: '\F138'; font-size: 12px; margin-right: 10px; } /***** BGS ******/ .blackbg { background-color: var(--blackbg) !important; } .greybg { background-color: var(--greybg) !important; } .whitebg { background-color: var(--whitebg) !important; } .creambg { background-color: var(--creambg) !important; } .yellowbg { background-color: var(--yellowbg) !important; } /****** flexbox ***/ .flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .flexbox.horizontalcentered { justify-content: center; align-items: center; } .flexbox.verticalcentered { flex-flow: column; justify-content: center; } .flexbox.row.verticalcentered { align-items: center; } .flexbox.right { justify-content: flex-end; -webkit-justify-content: flex-end; } .flexbox.left { justify-content: flex-start; -webkit-justify-content: flex-start; } .flexbox.justify { justify-content: space-between; -webkit-justify-content: space-between; } .flexbox.bottom { flex-direction: column; justify-content: flex-end; } .flexbox.top { flex-direction: column; justify-content: flex-start; } .flexbox.column { flex-direction: column; } .flexbox.row { flex-direction: row; } .flexbox.row.centered { justify-content: center; } /***** HEIGHTS ********/ .fullwidth { width:100%; } .fullheight { height:100vh !important; min-height: 750px; } .fullheight90 { height:90vh !important; min-height: 750px; } .twothirdsheight { height:75vh !important; min-height: 500px; } .halfheight { height: 50vh !important; min-height: 400px; } .onethirdheight { height:37.5vh !important; min-height: 350px; } .quarterheight { height:25vh; min-height: 350px; } /******* PADDINGS **********/ .leftsmallpadding { padding-left:2vw !important; } .leftpadding { padding-left: 6vw !important; } .leftextrapadding { padding-left:12vw !important; } .rightsmallpadding { padding-right:2vw !important; } .rightpadding { padding-right: 6vw !important; } .rightextrapadding { padding-right:12vw !important; } .noleftpadding { padding-left:0 !important; } .norightpadding { padding-right:0 !important; } .topsmallpadding { padding-top:6vh !important; } .toppadding { padding-top:12vh !important; } .topextrapadding { padding-top:18vh !important; } .bottomsmallpadding { padding-bottom:6vh !important; } .bottompadding { padding-bottom:12vh !important; } .bottomextrapadding { padding-bottom:18vh !important; } /****** STICKY *******/ .sticky{ position: sticky !important; position: -webkit-sticky !important; } .sticky.top { top: 15vh; } .sticky.top0 { top: 0; } .sticky.middle{ top:50vh; } /****** VIDEO ****/ .videoWrapper { height: 100%; position: relative; width: 100%; overflow: hidden !important; } /** .videoWrapper video { width: 100%; height: 100%; object-fit: cover; } **/ /*** with hack to prevent small margin bottom from wrapper ***/ .videoWrapper video { width: 100%; height: 100%; object-fit: cover; padding-bottom: 100%; margin-bottom: calc(-100% - 8px) !important; } /** when it is fullheight ***/ .videoWrapper.fullheight video { width: 100%; height: 100%; object-fit: cover; padding-bottom: 0 !important; margin-bottom: 0 !important; } /** ------------------------------------------------------------------------- :::::::: TEXT ------------------------------------------------------------------------- **/ b, strong { font-weight: 500 !important; } .primaryfont{ font-family: var(--primaryfont) !important; } .secondaryfont{ font-family: var(--secondaryfont) !important; } h1, h2, h3, h4, h5, h6 { font-family: inherit; line-height: 1; text-rendering: optimizelegibility; } h1 { color: var(--blacktext); /* font-size: max(3vw, 35px) !important;*/ font-weight: inherit !important; line-height: 140% !important; margin-bottom: 30px !important; letter-spacing: 0em !important; } h2 { color: var(--blacktext); /* font-size: max(2vw, 24px) !important;*/ font-weight: inherit !important; line-height: 130% !important; margin-bottom: 20px !important; } h3 { color: inherit !important; /*font-size: max(1.3vw, 16px) !important;*/ font-weight: inherit !important; line-height: 150% !important; margin-bottom: 20px !important; letter-spacing: 0em; } /* h3.uppercase { letter-spacing: 0.05em !important; } */ h4 { font-size: var(--smallsize) !important; text-transform: uppercase; font-weight: 300 !important; letter-spacing: 0.2em; margin-bottom: 20px !important; line-height: 140% !important; } #separator { position: relative; margin-bottom: 6vh; padding: 0 !important; width: calc(100vw / 12 * 10); margin-left: auto; margin-right: auto; } #separator h4 { font-size: var(--smallsize) !important; color: var(--creamtext) !important; margin-left: 10px !important; } /** scroll tip **/ #separator span { position: absolute; right: 0; top: calc(0vh + 40px); font-size: var(--smallsize); letter-spacing: 0.03em; display: flex; z-index: 99; background-color: #fff; /*background-color: #fff184;*/ padding: 5px 10px; } #separator span::before { content: '\F12F'; font-family: "bootstrap-icons"; margin-right: 10px; /* take out */ display: none; } #separator span::after { content: '\F138'; font-family: "bootstrap-icons"; margin-left: 10px; } /**** TITLES *****/ .sectiontitle { font-family: var(--secondaryfont) !important; letter-spacing: 0.1em !important; font-weight: 500 !important; font-size: var(--bigsize) !important; text-transform: uppercase; color: var(--blacktext) !important; } /**** QUOTE *****/ .quote { font-family: var(--secondaryfont); font-style: oblique; font-weight: var(--regular) !important; font-size: var(--bigsize); letter-spacing: 0.05em; line-height: 140% !important; margin-bottom: 40px !important; } /*** LEGENDA ***/ .legenda { margin-top: 20px !important; margin-bottom: 0 !important; } .legenda .bold { font-weight: 500 !important; color: var(--blacktext); } /**** SIZES ***/ .smallsize { font-size:var(--smallsize) !important; line-height: 160%; } .basesize { font-size:var(--basesize) !important; } .mediumsize { font-size:var(--mediumsize) !important; } .bigsize { font-size:var(--bigsize) !important; } .extrabigsize { font-size: var(--extrabigsize) !important; line-height: 110% !important; margin-bottom: 30px !important; } /*** spacing **/ .letterspacing { letter-spacing: 0.1em !important; } .lineseparator { width: 100%; box-shadow: 0 .5px 0 var(--blackbg); height: 1px; margin-bottom: 1px; } /***** colors *****/ .greytext { color:var(--greytext) !important; } .blacktext { color:var(--blacktext) !important; } .whitetext { color:var(--whitetext) !important; } .yellowtext { color: var(--yellowtext) !important; } .greentext { color: var(--greentext) !important; } .pinktext { color: var(--pinktext) !important; } .creamtext { color: var(--creamtext) !important; } /******* weight ******/ .thin { font-weight: var(--thin) !important; } .extralight { font-weight: var(--extralight) !important; } .light { font-weight: var(--light) !important; } .regular { font-weight: var(--regular) !important; } .medium { font-weight: var(--medium) !important; } .bold { font-weight: var(--bold) !important; } .extrabold { font-weight: var(--extrabold) !important; } /***** position ***/ .centertext { text-align:center !important; } .righttext { text-align:right !important; } .oblique { font-style: italic; } .uppercase { text-transform:uppercase !important; } .justifytext { text-align:justify !important; } .justifytext p { text-align:justify !important; } /**** underline text *****/ .underlinetext { position: relative; display: inline-block; } .underlinetext span { background-image: linear-gradient(to right, #ffe16b 0%, #ffe16b 100%); background-repeat: repeat-x; background-position: 0 89%; background-size: 100% 2px; padding-bottom: 0px; } .underlinetext.white span { background-image: linear-gradient(to right, #fff 0%, #fff 100%); background-repeat: repeat-x; background-position: 0 89%; background-size: 100% 2px; padding-bottom: 0px; } /** ------------------------------------------------------------------------- :::::::: STRUCTURE ------------------------------------------------------------------------- **/ #wrap_all { background-color: #fff; position: relative; width: 100%; float: left; z-index: 3; } #wrap_body { position: relative; width: 100%; float: left; z-index: 3; } #stage { float: left; position: relative; width: 100%; z-index: 2; } #top { float: left; width: 100%; position: relative; z-index: 4; } #bottom { float: left; width: 100%; position: relative; z-index: 3; background-color: #fff; } #footer { float: left; width: 100% !important; position: relative; z-index: 3; } #popup { float: left; width: 100% !important; position:relative; z-index: 9; } /******** HEAD *********/ #head { float: left; position: relative; z-index: 999; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } /** logo **/ #head .logowrapper { z-index: 9999 !important; position: fixed; width: calc(100vw / 12); text-align: center; padding-top: 30px; } #head .logowrapper img { width: 100%; padding: 0 1vw; max-height: 100%; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } /** burguer menu ***/ #head .topmenuwrapper { width: calc(100vw / 12); display: flex; justify-content: center; position: fixed; right: 0; padding-top: 40px; z-index: 9; } #head .openMenu { text-decoration: none !important; display: flex; flex-direction: column; } #head .openMenu span { width: 33px; height: 1px; font-size: 0 !important; margin-top: 3px; margin-bottom: 3px; box-shadow: 0 1px 0 var(--blackbg); -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } /**** LANG MODULE ***/ #head .headLang { position: fixed; width: calc(100vw / 12); right: 0; display: flex; justify-content: center; top: 90px; } #head .headLang li { margin-left: 0px; margin-right: 0; } #head .headLang a { border: 1px solid rgba(0,0,0,0.4); border-radius: 50%; width: 29px; height: 29px; font-size: 10px; font-weight: 500; display: flex; justify-content: center; align-content: center; line-height: 28px; margin-bottom: 7px; text-transform: uppercase; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } #head .headLang li.lang-active a { opacity: 0.5; } /***** INVERT ON HOME BANNER ****/ .whitehead #head.top .openMenu span { box-shadow: 0 1px 0 #fff; } .whitehead #head.top .headLang a { border: 1px solid #fff; color: #fff !important; } .whitehead #head.top .logowrapper img { filter: invert(); } /** ------------------------------------------------------------------------- :::::::: OFFCANVAS MENU ------------------------------------------------------------------------- **/ .offcanvas-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #fff !important; } .offcanvas-backdrop.show { opacity: 0 !important; } .offcanvas { border: 0 !important; box-shadow: 2px 2px 2px #fff !important; /* min-width: 30vw; */ width: 400px !important; } .offcanvas-header { display: flex !important; align-items: center !important; justify-content: flex-end !important; padding: 30px 3vw 0 0 !important; width: 120px; position: absolute; right: 0; z-index: 2; } .offcanvas-body { flex-grow: 1 !important; padding: 90px 45px !important; overflow-y: auto !important; z-index: 1; } .closeMenu { display: flex !important; align-items: center !important; justify-content: center !important; position: relative; width: 40px; height: 40px; transform: rotate(45deg); cursor: pointer; } .closeMenu:hover { padding: 5px; } .closeMenu .l1 { width: 100%; box-shadow: 1px 1px 0 var(--blackbg); /* background-color: #111; */ height: 1px; display: inline-flex; font-size: 0 !important; } .closeMenu .l2 { height: 100%; width: 1px; box-shadow: 1px 1px 0 var(--blackbg); /* background-color: #111; */ display: inline-flex; position: relative; left: -50%; font-size: 0 !important; } /**** menus ***/ #topmenu .menuwrapper .navbar { padding: 0 !important; } #topmenu ul { display: flex; flex-direction: column; } #topmenu .chooselanguage { margin-bottom: 40px; } #topmenu .menuwrapper { margin-bottom: 60px; } #topmenu h4 { font-size: 10px !important; margin-bottom: 20px !important; color: var(--greytext) !important; font-weight: 200 !important; } #topmenu .projectMenuImage { display: none; } #topmenu li a { font-size: var(--mediumsize); font-weight: 300 !important; text-decoration: none !important; display: block; line-height: 120%; opacity: 1; margin-bottom: 15px; color: var(--blacktext) !important; } #topmenu li a:hover { /*color: var(--greytext) !important;*/ opacity: 0.3 !important; } #topmenu .current.active a { /*color: var(--greytext) !important;*/ opacity: 0.3 !important; } #topmenu .lang-active a { color: var(--blacktext) !important; } #topmenu div.mod-languages a { text-decoration: none; font-size: 1em !important; } /*** when menu is for a available project ***/ #topmenu li a.available { /* color: var(--greentext) !important;*/ } /** ------------------------------------------------------------------------- :::::::: FOOTER ------------------------------------------------------------------------- **/ #footer .footerwrapper { padding-bottom: 30px; } #footer .footercontent { display: flex; justify-content: space-around; flex-direction: row; font-size: 0.85em; } #footer .footercontent .footerblock { padding: 0 25px 25px 25px; display: flex; flex-direction: column; line-height: 180%; } #footer .footercontent .footerblock a { margin-bottom: 2px; opacity: 0.8 !important; } #footer .footercontent .footerblock a:hover { opacity: 1 !important; color: var(--blacktext) !important; } #footer .footercontent h4 { font-weight: var(--bold) !important; /*font-size: var(--smallsize ) !important;*/ font-size: 11px !important; color: var(--blacktext) !important; } #footer .zed a { font-size: 13px; font-weight: 800; letter-spacing: -0.1em; color: var(--blacktext) !important; } #footer .zed { position: absolute; bottom: 30px; right: 30px; } /** ------------------------------------------------------------------------- :::::::: IMAGES AND BANNERS ------------------------------------------------------------------------- **/ .img-responsive { max-width: 100%; max-height: 100%; position: relative; width: auto; height: auto; } /**** simple image banner ***/ .imagewrapper { position: relative; height: auto; overflow: hidden; width: auto; } .imagewrapper img { object-fit: cover !important; width: 100% !important; height: 100% !important; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .imagewrapper a:hover { opacity: 1 !important; } /**** IMAGE BUNDLES ****/ .imagebundle { display: flex; flex-wrap: wrap; justify-content: space-between; } .imagebundle img { object-fit: cover; } .imagebundle.col5 img { display: flex; width: 19%; margin: 0 !important; } .imagebundle.col5 img { height: 350px; } .imagebundle.col4 img { display: flex; width: 24%; margin: 0 !important; } .imagebundle.col4 img { height: 350px; } /*** using GSAP ScrollTrigger bu with mask ***/ .mask { background-color: #fff; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; } .mask.cream { background-color: var(--creambg) !important; } .mask.grey { background-color: var(--greybg) !important; } /**** for banners with layers ***/ .bannerwrapper { position: relative; width: 100%; height: 100%; /*overflow: hidden;*/ } .bannerover { position: absolute !important; z-index: 2; width: 100%; height: auto !important; min-height: 100% !important; left: 0; top: 0; } .bannerunder { position: relative !important; z-index: 1; width: 100%; /*height: auto !important;*/ height: 100%; } .bannerunder img { object-fit: cover !important; width: 100% !important; height: 100% !important; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } /**** for full banners -- e.g. Home ****/ #fullbanner .imagewrapper img { min-height: 100vh; } /*** banners with link -- i.e. home page ***/ .bannerlink { position: relative; } /* .bannerlink .overlink { font-size: 0 !important; } */ .bannerlink .bannertitle { font-family: var(--secondaryfont); font-weight: 500; letter-spacing: 0.1em; text-align: center; margin-top: 20px; text-transform: uppercase; font-size: 1em !important; color: var(--blacktext) !important; } .bannerlink img { filter: saturate(30%); } .bannerlink .overlink:hover ~ .imagewrapper .mask.bottom { transform: translate(0%, 97%) !important; } .bannerlink .overlink:hover ~ .imagewrapper img { opacity: 1; filter: saturate(90%); } .bannerlink .imagewrapper .mask { -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } /** ------------------------------------------------------------------------- :::::::: LINKS & BOTS ------------------------------------------------------------------------- **/ ::selection { background: #111;/* WebKit/Blink Browsers */ color:#fff; } ::-moz-selection { background: #111; /* Gecko Browsers */ color:#fff; } input::-moz-focus-inner { border: 0; } a:hover, a:active, a:focus { outline: 0; } button:hover, button:active, button:focus { outline: 0; } a { color: inherit !important; text-decoration: none !important; opacity: 1; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } a:hover { opacity: 1 !important; color: var(--blacktext) !important; } p a { color: var(--blacktext) !important; text-decoration: underline !important; } p a:hover { text-decoration: none !important; } /** tel bots ***/ .telbot { text-decoration: none !important; } /** link ***/ .link { font-weight: 500; position: relative; display: inline-block !important; font-style: oblique; font-family: var(--secondaryfont); letter-spacing: 0.02em; font-size: 0.9em; color: var(--blacktext) !important; text-decoration: none !important; line-height: 140%; } .link::after { content: ""; display: block; border-bottom: 1px solid; width:100%; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .link:hover:after{ width:calc(100% + 20px); } .linkwrapper { margin-top: 40px; } /** bot ***/ .bot { background-color: transparent; color: var(--blacktext) !important; border:1px solid var(--blackbg); padding: 10px 30px; display: inline-block; border-radius: 30px; font-weight: 400; margin-top: 30px; opacity:1 !important; } .bot:hover { background-color: var(--blackbg); border:1px solid var(--blackbg); color: #fff !important; padding: 10px 30px; display: inline-block; border-radius: 30px; font-weight: 400; margin-top: 30px; opacity:1; } .botblack { background-color: var(--blackbg); border:1px solid var(--blackbg); color: #fff !important; padding: 10px 30px; display: inline-block; border-radius: 30px; font-weight: 400; margin-top: 30px; opacity:1; } .botblack:hover { background-color: transparent; color: var(--blacktext) !important; border:1px solid var(--blackbg); padding: 10px 30px; display: inline-block; border-radius: 30px; font-weight: 400; margin-top: 30px; opacity:1 !important; } /***** CIRCLE BOT alternative to overlink span ***/ .circlebotwrapper { position: absolute; left: 0; top: 0; margin-left: auto; margin-right: auto; z-index: 2; right: 0; bottom: 0; width: 160px; height: 160px; margin-top: auto; margin-bottom: auto; display: flex; align-items: center; justify-content: center; } .circlebot { position: relative; display: inline-flex; justify-content: center; align-items: center; font-size: var(--smallsize) !important;; opacity: var(--smallsize) !important; color: var(--blacktext) !important; text-transform: uppercase; letter-spacing: 0.02em !important; font-weight: var(--medium); font-family: var(--secondaryfont); font-style: oblique; } .circlebot::before { content: ""; background-color: rgba(255,255,255,0.9); width: 160px; height: 160px; border-radius: 50%; transform: scale(1); -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; top: 0; left: 0; display: block; position: absolute; z-index: -1; left: auto; right: auto; top: auto; bottom: auto; } .circlebot:hover::before { transform: scale(1.2); } /** ------------------------------------------------------------------------- :::::::: over link --- used on portfolio and project highlihts ------------------------------------------------------------------------- **/ .overlink { position: absolute; width: 100%; height: 100%; z-index: 2; font-size: 0 !important; display: flex; align-items: center; justify-content: center; /** check **/ left: 0; top: 0; } /*** using spam only for opacity - the bot is .circlebot ***/ .overlink span { /*opacity: 0 !important;*/ opacity: 1 !important; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .overlink:hover span { opacity: 1 !important; } /** specific for project highlights in home page -- using ignite scroller ****/ #projectHighlight .overlink { z-index: 99; width: 200px; left: 0; right: 0; margin-left: auto; margin-right: auto; height: 200px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } #projectHighlight .imagewrapper:hover .overlink span { opacity: 1 !important; } /** ------------------------------------------------------------------------- :::::::: IGNITE GALLERY ------------------------------------------------------------------------- **/ /***** FOR SCROLLER *******/ .ig-thumb-scroller-main-below { padding-top: 0 !important; } .ig-thumb-scroller li { list-style-type: none !important; list-style-image: none !important; background-image: none !important; height: 70vh; min-height: 600px; } .ig-thumb-scroller .ig-scroller-img-wrapper .ig-img-link { object-fit: cover !important; width: 100%; height: 100%; max-height: 100% !important; /* cursor: auto;*/ } .ig-thumb-scroller-right svg, .ig-thumb-scroller-left svg { padding: 4px !important; /* color: #fff !important;*/ color: #000; } .ig-thumb-scroller-right svg polyline, .ig-thumb-scroller-left svg polyline { stroke-width: 2; } .ig-thumb-scroller-right, .ig-thumb-scroller-left { /* background-color: rgba(0,0,0,0.6);*/ background-color: #fff !important; padding: 10px; margin: 0 10px; transform: translateY(-50%) translateY(0) !important; opacity: 1; } /** show arrows on hover ***/ .ig-thumb-scroller:hover .ig-thumb-scroller-right, .ig-thumb-scroller:hover .ig-thumb-scroller-left { opacity: 1; } /**** FOR LIGHT BOX ****/ .igui-lightbox-toolbar { padding: 0px !important; background-color: transparent !important; } .igui-lightbox { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1010; background: #fff !important; opacity: 0; transition: opacity .15s linear; } .igui-lightbox-items li { padding: 60px !important; } .igui-lightbox-toolbar .igui-close { color: #000 !important; opacity: 1 !important; top: 15px; position: fixed; right: 15px !important; margin: 0 !important; } .igui-lightbox-toolbar .igui-close svg { width: 30px; height: 30px; } .igui-lightbox-toolbar .igui-close svg line { stroke-width: 1px !important; color: #000 !important; } .ig-lightbox-button-right, .ig-lightbox-button-left { padding: 0 18px !important; margin: 0px !important; opacity: 1 !important; /*color: #000 !important;*/ } .ig-lightbox-button svg { background: transparent !important; padding: 10px !important; width: 25px; height: 40px; box-sizing: content-box; } .ig-lightbox-button svg polyline { stroke-width: 1px !important; color: #000 !important; } /***** FOR FULLHEIGHT SLIDER --- ie. newsroom *********/ /* .fullheightslider .ig-slideshow-button { display: none; } .fullheightslider .igui-scope { height: 100%; } .fullheightslider .igui-scope .ig-gallery-wrapper { height: 100% !important; } .fullheightslider .igui-scope .ig-gallery-wrapper .igui-slideshow > div { height: 100%; } .fullheightslider .ig-slideshow ul { height: 100% !important; } .fullheightslider .ig-slideshow ul img { opacity: 0.7; } */ /** this only makes images full height NOT full width ***/ .fullheightslider .ig-slideshow-item-inner-lboxon { position: relative; display: inline-block; cursor: pointer; object-fit: cover !important; height: 100% !important; } .fullheightslider .ig-slideshow-image { object-fit: cover !important; width: auto !important; height: 100% !important; min-height: 100% !important; } /**** other way --- not beeing used ***/ .fullheightgallery { height: 100%; min-height: 400px; min-width: 100% !important; } .fullheightgallery .igui-scope { height: 100% !important; min-width: 100% !important; } .fullheightgallery .ig-slideshow div { height: 100% !important; background-color: #000; min-width: 100% !important; } .fullheightgallery .ig-gallery-wrapper { height: 100% !important; min-width: 100% !important; } .fullheightgallery .ig-slideshow ul { height: 100% !important; min-width: 100% !important; } .fullheightgallery .igui-scope img, .igui-scope video { object-fit: cover !important; width: 100%; height: 100% !important; Opacity:1 } /** ------------------------------------------------------------------------- :::::::: PORTFOLIO ------------------------------------------------------------------------- **/ #projectmodule .projectinfo { margin-top: 40px; } /* #projectmodule .projectinfo h4 { margin-bottom: 30px !important; font-weight: 200 !important; font-size: var(--smallsize); }*/ #projectmodule .projectinfo h4 { margin-bottom: 30px !important; font-weight: 300 !important; font-size: 0.65em !important; } #projectmodule .projectinfo h2 { margin-bottom: 10px !important; text-transform: uppercase; font-family: var(--secondaryfont); letter-spacing: 0.15em; /* font-size: var(--mediumsize) !important; font-weight: var(--bold) !important;*/ font-size: var(--bigsize); font-weight: var(--medium) !important; } #projectmodule p.secondaryfont { letter-spacing: 0.05em; } #projectmodule .projectinfo .status { font-family: var(--secondaryfont); font-style: oblique; letter-spacing: 0.02em; font-weight: 500; } #projectmodule .projectinfo .status.available { color: var(--greentext) !important; } #projectmodule .projectinfo .status.sold { color: var(--pinktext) !important; } /** ------------------------------------------------------------------------- :::::::: PROJECT PAGES ------------------------------------------------------------------------- **/ /**** LOGO INTRO ****/ .projectLogoIntro { position: relative; } .projectLogoIntro .logoWrapper { z-index: 2; } .projectLogoIntro .logo { width: 350px !important; } .projectLogoIntro .logo svg, .projectLogoIntro .logo img { width:100%; } /**** specific bg ***/ .arrabidabg { background-color: #ffd2d0; background-image: url("../../../images/textures/egg-shell.png"); /*background-attachment: fixed;*/ background-size: 14% !important; } .plbg { background-color: #b2a799; } .plbg .bgimage { background-image: url("../../../images/projects/Palacio_Lusiadas/logo/PL_Cover_bg.png"); /*background-attachment: fixed;*/ background-size: cover; background-position: top; background-repeat: no-repeat; top: 0px !important; position: absolute; width: 100%; height: 100% !important; opacity: 0.3; mix-blend-mode: overlay; } .floresbg { background-color: #ebe5d6 !important; background-image: url("../../../images/textures/elegant-grid.png"); /*background-attachment: fixed;*/ } .f29bg { background-color: #ece7cc !important; background-image: url("../../../images/textures/redox-02.png"); /*background-attachment: fixed;*/ } .otbg { background-color: #acab99; background-image: url("../../../images/textures/absurdity.png"); } .otbg.projectLogoIntro .logo { width: 250px !important; } .otbg .bgimage { background-image: url("../../../images/projects/Odeon_Theatre/logo/OT_texture.svg"); /*background-attachment: fixed;*/ background-size: cover; background-position: center; background-repeat: no-repeat; top: 0px !important; position: absolute; width: 100%; height: 100% !important; opacity: 0.3; /*mix-blend-mode: overlay;*/ } .sgvbg { background-color: #fff !important; background-image: url("../../../images/textures/blu-stripes.png"); } .sgvbg.projectLogoIntro .logo { width: 650px !important; } /*** ID and INTRO ****/ .projectID { display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 0 3vw; } .projectID p { margin: 0px 2vw 30px 2vw; font-weight: var(--light); display: flex; flex-direction: column; color: var(--blacktext); } .projectID p span { font-weight: var(--thin); color: var(--greytext); margin-right: 0; } /**** TIPOLOGIAS - FLEX TABLE *****/ .tipologias { padding: 3vh 6vw 10vh 6vw; } .flextable { width: 100%; } .flextable .col { text-align: center; padding: 0 20px !important; line-height: 140%; } .flextable .tableheader { display: flex; text-align: center; padding: 20px 0px 20px 0px; font-family: var(--secondaryfont); font-size: 0.6em; letter-spacing: 0.05em; font-weight: 600 !important; text-transform: uppercase; color: var(--blacktext) !important; box-shadow: 0 .5px 0 var(--blackbg); } .flextable .tablebody .tablerow { display: flex; padding: 20px 0px 20px 0px; box-shadow: 0 .5px 0 var(--blackbg); font-size: 0.85em; color: var(--blacktext); margin-bottom: 1px; } .flextable .tablebody .tablerow.available { background-color: rgba(255,255,255,0.7); } .flextable .tablebody .tablerow .link { font-size: 1em !important; } /******** ACABAMENTOS ***********/ #finishings p { margin-bottom: 15px; } #finishings strong { margin-right: 0; font-weight: 600 !important; display: block; font-size: var(--smallsize) !important; line-height: 160%; } /****** project NAV *******/ #projectpageNav { position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; z-index: 3; padding: 20px 20px 20px 20px; min-width: 100vw; opacity: 0.9; display: flex; overflow-x: scroll; justify-content: center; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } #projectpageNav:hover { opacity: 1; bottom: 0px !important; } #projectpageNav a { font-size: var(--smallsize); font-weight: 400; margin: 0 1vw; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blacktext); position: relative; white-space: nowrap; } #projectpageNav a.active, #projectpageNav a:hover { color: var(--blacktext) !important; } #projectpageNav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: var(--blackbg); opacity 1; transform: scale(0); transform-origin: center; transition: opacity 300ms, transform 300ms; } #projectpageNav a.active:after { transform: scale(1); } /************ for SGV floors *******/ .sgvFloorRow.row .imagewrapper { position: relative; height: 250px !important; clip-path: content-box; /** chrome fix ***/ -webkit-clip-path: inset(0px); } /* .sgvFloorRow.row .imagewrapper img { position: fixed; width: 65% !important; height: auto !important; right: 0; transform: translate(10%,-50%); top: 50%; } */ .sgvFloorRow.row .imagewrapper img { height: auto !important; right: 0; } .sgvFloorRow .lineseparator { margin-top: -1px !important; margin-bottom: 10px !important; } /** ------------------------------------------------------------------------- :::::::: WORK NAV - bottom of project page ------------------------------------------------------------------------- **/ .workNav { display: flex !important; flex-direction: row; flex-wrap: nowrap !important; overflow-x: scroll; margin-bottom: 0vh !important; padding: 0 0 40px 0 !important; align-items: flex-end; } .workNav li { margin-right: 25px; display: flex; text-align: center; flex-direction: column; } .workNav li .projectMenuImage { max-width: 700px !important; max-height: 350px; opacity: 1 !important; filter: saturate(100%); } .workNav li a:hover { opacity:1 !important; } .workNav li a:hover .projectMenuImage{ filter: saturate(40%); } .workNav .image-title { font-family: var(--secondaryfont); font-weight: 500; letter-spacing: 0.06em !important; margin-top: 15px; text-transform: uppercase; font-size: 1em; display: block; color: var(--blacktext); } .workNav li.current.active { display: none; } .workNav a { position: relative; } /**** when the project is set to "available" in the menu class ***/ .workNav a.available::before { /* content: '\F889'; **/ width: 50px; height: 50px; background-color: #a2cec2; position: absolute; top: 10px; z-index: 9 !important; right: 10px; border-radius: 50%; font-family: "bootstrap-icons"; font-size: 20px !important; color: #fff; display: flex; align-items: center; justify-content: center; } /*********** CUSTOM SCROLL BAR *************/ .scroller::-webkit-scrollbar { width: 100% !important; height: 11px; } .scroller::-webkit-scrollbar-track { /* background-color: #fff; border: 5px solid #fff;*/ background-color: #ddd; border: 3px solid #fff; border-radius: 5px; } .scroller::-webkit-scrollbar-thumb { background-color: var(--blackbg); border-radius: 5px; border: 3px solid #fff; cursor: pointer; } /** ------------------------------------------------------------------------- :::::::: HORIZONTAL SCROLLER -- eg. bottom banners ------------------------------------------------------------------------- **/ .horizontalscroll { display: flex !important; flex-wrap: nowrap !important; overflow: scroll !important; justify-content: flex-start; } .horizontalscroll > * { padding: 0 10px 0 0 !important; max-width: 75vw !important; } /* .horizontalscroll .halfheight { height: 300px !important; min-height: 300px; }*/ /** ------------------------------------------------------------------------- :::::::: ACCORDION ------------------------------------------------------------------------- **/ .accordionWrapper .accordiontab { cursor: pointer; width: 100% !important; border: none; text-align: left; outline: none; transition: 0.4s; background-color: transparent !important; opacity: 1 !important; margin-bottom: 0px; padding-bottom: 25px !important; display: flex; align-items: flex-start; font-size: var(--mediumsize) !important; color: var(--greytext) !important; } .accordionWrapper .active, .accordiontab:hover { background-color: transparent; color: var(--blacktext) !important; } .accordionWrapper .panel { padding: 0 !important; background-color: transparent; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; box-shadow: 0 .5px 0 var(--blackbg); margin-bottom: 25px; padding-bottom: 1px !important; } .accordionWrapper .panel .content { padding: 0px 35px 35px 35px; } /** icon **/ .accordionWrapper .panelicon { width: 15px; position: relative; height: 15px; margin-right: 20px; margin-top: 6px; display: flex; align-items: center; justify-content: center; min-width: 15px !important; min-height: 15px !important; } .accordionWrapper .panelicon::after { content: ""; width: 1px; height: 100%; box-shadow: 1px 1px 0 var(--blackbg); display: block; left: 0; right: 0; margin-left: auto; position: absolute; margin-right: auto; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .accordionWrapper .panelicon::before { width: 100%; height: 1px; content: ""; position: absolute; box-shadow: 1px 1px 0 var(--blackbg); left: 0; } .accordionWrapper .accordiontab.active .panelicon::after { height: 1px !important; } /** ------------------------------------------------------------------------- :::::::: CONVERT FORMS ------------------------------------------------------------------------- **/ .convertforms { --input-size: 1em !important; } .convertforms .cf-content-wrap, .convertforms .cf-form-wrap { padding: 0 !important; } .convertforms .cf-input { /* box-shadow: 0 .5px 0 var(--blackbg);*/ width: auto !important; padding: 20px 0; background-color: transparent; border-bottom: 1px solid rgba(0,0,0,0.3) !important; outline: 0 !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; font-weight: var(--extralight); color: var(--blackbg) !important; font-size: var(--mediumsize) !important; } .convertforms ::placeholder { color: var(--blacktext) !important; font-size: inherit !important; font-weight: var(--extralight); } /** checkbox ***/ .convertforms .cf-checkbox-group input, .convertforms .cf-radio-group input { margin-top: 8px !important; } .convertforms .cf-checkbox-group, .convertforms .cf-radio-group { padding: 0 0 10px !important; align-items: flex-start; } .convertforms .cf-checkbox-group .cf-label { color: var(--blacktext); font-size: 1em !important; margin-bottom: 0 !important; display: block; line-height: 1.6em; font-weight: var(--light); } .convertforms .cf-label a { font-weight: var(--medium); text-decoration: underline !important; } .convertforms .formBot .cf-btn { font-size: 1em !important; margin-top: 20px; margin-bottom: 10px; border-radius: 3px !important; padding: 15px 30px !important; background-color: var(--blackbg) !important; } .convertforms.cf-success .cf-response { background-color: transparent; color: var(--greentext); font-size: var(--basesize); font-family: var(--secondaryfont); letter-spacing: 0.05em; text-transform: uppercase; height: 260px; display: flex !important; align-items: center; justify-content: center; } /** ------------------------------------------------------------------------- :::::::: NEWSROOM ------------------------------------------------------------------------- **/ #newsitem { box-shadow: 0 .5px 0 var(--blackbg); padding-bottom: 12vh; margin-bottom: 12vh !important; } #newsitem .newsImage { padding: 0 !important; margin-bottom: 60px !important; /** center all - override inline bootstrap col **/ margin-left: auto; margin-right: auto; } #newsitem .newsBody { padding: 0 6vw !important; } #newsitem .newsBody h3 { font-family: var(--secondaryfont); font-size: var(--bigsize) !important; color: var(--blacktext) !important; font-weight: var(--regular) !important; line-height: 130% !important; text-transform: uppercase; letter-spacing: 0.03em; } /*** last child in newsroom list ***/ .newsroom .blog-items .blog-item:last-of-type #newsitem { box-shadow: 0 0 0 !important; } /*** when in Home page - random news **/ .loadNews #newsitem { box-shadow: 0 0 0 !important; margin-bottom: 0 !important; padding: 0 !important; } /******** PRESS ARTICLES ***********/ .pressArticle { display: flex; justify-content: flex-start; color: var(--greytext) !important; line-height: 160%; font-size: var(--basesize) !important; font-weight: var(--extralight) !important; } .pressArticle strong { color: var(--blacktext) !important; margin-left: 10px; font-weight: var(--regular) !important; } .pressArticle a { padding-bottom: 25px; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .pressArticle a:hover { opacity:1 !important; } .pressArticle a.toggle { opacity:0.5; } /** ------------------------------------------------------------------------- :::::::: CONTACTS ------------------------------------------------------------------------- **/ .contactpage #footer .footerwrapper .footertop { display: none; } .contactpage #footer .footerwrapper .lineseparator { display: none; } .contactpage #footer .footerwrapper .footercontent.topsmallpadding { padding-top: 0 !important; } /* .contactBlock { background-color: #fff; padding: 40px 2vw 40px 2vw; text-align: center; margin-bottom: 1px; } */ /** ------------------------------------------------------------------------- :::::::: IMAGE COMPARISON -- before and after ------------------------------------------------------------------------- **/ /** USING GSAP ***/ .comparisonSection { position: relative; padding-bottom: 56.25%; overflow: hidden !important; } .comparisonImage { width: 100%; height: 100%; } .afterImage { position: absolute; overflow: hidden; top: 0; transform: translate(100%, 0px); } .afterImage img { transform: translate(-100%, 0px); } .comparisonImage img { width: 100%; height: 100%; position: absolute; top: 0; object-fit: contain !important; } /**** USIGN JUXTAPOSE SCRIPT ****/ /* take out small arrows */ .juxtapose div.jx-arrow.jx-left, .juxtapose div.jx-arrow.jx-right { display: none; } /** design center circle **/ .juxtapose div.jx-handle { position: absolute; height: 100%; width: 50px; cursor: col-resize; z-index: 15; margin-left: -25px; } .juxtapose div.jx-arrow { margin: auto; top: 0; bottom: 0; transition: all .2s ease; background-color: #fff; width: 50px !important; height: 50px !important; position: absolute; display: block !important; border: 0 !important; border-radius: 50%; right: 0 !important; left: 0 !important; background-image: url('../../../images/graphics/swipe_arrows.svg'); background-size: 60%; background-position: center !important; background-repeat: no-repeat; } /** ------------------------------------------------------------------------- :::::::: INSTA GALLERY ------------------------------------------------------------------------- **/ .a4j-slick-slider .a4j-slick-prev { position: absolute !important; top: calc(50% - 25px) !important; line-height: 100% !important; font-size: 45px !important; width: 30px !important; height: 50px !important; margin-top: 0 !important; color: #000 !important; cursor: pointer !important; background: transparent !important; padding: 0 !important; z-index: 9 !important; display: flex !important; align-items: center !important; justify-content: center !important; left: -40px !important; transform: none !important; -webkit-transition: all .2s ease-out !important; -moz-transition: all .2s ease-out !important; -o-transition: all .2s ease-out !important; transition: all .2s ease-out !important; } .a4j-slick-slider .a4j-slick-next { position: absolute !important; top: calc(50% - 25px) !important; line-height: 100% !important; font-size: 45px !important; width: 30px !important; height: 50px !important; margin-top: 0 !important; color: #000 !important; cursor: pointer !important; background: transparent !important; padding: 0 !important; z-index: 9 !important; display: flex !important; align-items: center !important; justify-content: center !important; right: -40px !important; transform: none !important; -webkit-transition: all .2s ease-out !important; -moz-transition: all .2s ease-out !important; -o-transition: all .2s ease-out !important; transition: all .2s ease-out !important; } #ingallery-1 .ingallery-col, #ingallery-1 .ingallery-cell { padding: 10px !important; } .a4j-slick-next::after { font-family: "bootstrap-icons"; content: "\F285"; font-size: 30px; } .ing-icon-angle-right.ing-fw { display: none !important; } .a4j-slick-prev::after { font-family: "bootstrap-icons"; content: "\F284"; font-size: 30px; } .ing-icon-angle-left.ing-fw { display: none !important; } /** ------------------------------------------------------------------------- :::::::: PARTNERS ------------------------------------------------------------------------- **/ .partnerswrapper { display: flex; flex-wrap: wrap; margin-left: -1px; width: calc(100% + 2px); } .partner { display: inline-flex; align-content: center; justify-content: center; height: auto; margin-bottom: 0px; align-items: center; padding: 45px 40px; flex-basis: 20%; background-color: #f9f9f9; border: 1px solid #fff; } .partnerlogo { width: 140px; height: 65px; display: flex; align-items: center; justify-content: center; } .partnerlogo img { width: 100%; height: 100%; object-fit: contain; filter: saturate(0); mix-blend-mode: multiply; } /** ------------------------------------------------------------------------- :::::::: KEY FIGURES ------------------------------------------------------------------------- **/ .keyfigureswrapper { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .keyfigure { text-align: center; padding: 10px 30px; flex-basis: 100%; display: flex; justify-content: space-between; position: relative; align-items: center; } .keyfigure .line { height: 1px; flex: 1; box-shadow: 0 0.5px 0 #000; } .keyfigure p { font-size: var(--basesize); margin: 0 0 0 20px; } .keyfigure h3 { font-size: var(--basesize); font-weight: var(--medium) !important; line-height: 100% !important; margin: 0 20px 0px 0 !important; color: var(--blacktext) !important; } /** ------------------------------------------------------------------------- :::::::: TIMELINE ------------------------------------------------------------------------- **/ #timeline { margin-bottom: 12vh; } /*** different sizes ***/ /* #timeline .timelineblock { min-width: 25vw; padding: 0 30px 50px 30px !important; text-align: center; overflow: hidden; position: relative; } #timeline .timelineblock .image { padding: 0 0px 65px 0px; margin: 0 auto 10px; position: relative; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } #timeline .timelineblock .image img { border-radius: 0px; max-height: 400px !important; } */ #timeline .timelineblock { min-width: 23%; padding: 0 40px 50px 0px !important; text-align: center; overflow: hidden; position: relative; } #timeline .timelineblock .image { padding: 0 0px 65px 0px; width: 100% !important; margin: 0 auto 10px; position: relative; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } /* #timeline .timelineblock .image img { border-radius: 0px; height: 250px !important; object-fit: cover; width: 100%; } */ #timeline .timelineblock .image img, #timeline .timelineblock .image .text { border-radius: 0px; height: 320px !important; object-fit: cover; width: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--creambg); } #timeline .timelineblock .image a:hover img { filter: saturate(50%); } #timeline .timelineblock .image::after { content: ""; width: 1px; height: 60px; position: absolute !important; /*background-color: #000;*/ box-shadow: 0.5px 0px 0px #000; left: 0; right: 0; margin-left: auto; margin-right: auto; bottom: 0; } #timeline .timelineblock .year { font-family: var(--secondaryfont ) !important; font-size: var(--mediumsize); font-weight: var(--medium); color: var(--blacktext); margin-bottom: 12px; letter-spacing: 0 !important; } /* #timeline .timelineblock .description { font-size: var(--basesize) !important; line-height: 130%; } */ #timeline .timelineblock .description { font-size: var(--smallsize); line-height: 160%; } #timeline .timelineblock .description a { color: var(--creamtext) !important; text-decoration:none !important; } /*** ------------------------------------------------------------------------------------------ HERO SLIDER ------------------------------------------------------------------------------------------ ***/ /****LAYOUT *******/ #slides-main, #slides-main:after, #slides-main .slide-image, #slides-main .abs-mask, #slides-main .slide { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .mask { overflow: hidden; } #hero-slider { position: relative; /*height: 100vh;*/ height:100%; display: flex; background: #fff; } #hero-slider:not(.ready) { visibility: hidden; } #slideshow { position: relative; flex: 1 1 80%; display: flex; align-items: flex-end; padding: 0; } #slides-main:after { content: ''; background-color: rgba(0, 0, 0, 0); z-index: 100; } #slides-main .slide-image { z-index: -1; background-color: #000; } .slide-image img { object-fit: cover !important; height: 100% !important; width: 100% !important; object-position: center; opacity: 0.7; } /**** LEGENDAS ****/ #slides-aux { position: absolute; width: 100%; height: 100% !important; z-index: 300 !important; background-color: transparent; } #slides-aux .slide-title { position: absolute; z-index: 300 !important; font-size: var(--extrabigsize) !important; font-weight: var(--regular) !important; font-family: var(--secondaryfont) !important; bottom: 0; margin: 0 !important; width: 100vw !important; height: 100vh !important; display: flex; align-items: center; justify-content: center; left: 0 !important; text-transform: uppercase; letter-spacing: 0.3em; } #slides-aux .slide-title a { color: #fff !important; text-decoration: none !important; /*** not individual title per image ***/ display: none !important; } /**** NAV ****/ #slider-nav { position: absolute; bottom: 20px; display: flex; align-items: center; justify-content: right; z-index: 500; font-family: inherit !important; font-size: 15px; color: #fff !important; margin: 0 auto !important; width: 100%; padding-right: 3vw; } /*** #slider-nav .current { color: #fff; } #slider-nav .sep:before, #slider-nav .sep:after { content: ''; position: absolute; height: 100%; width: 50%; } #slider-nav .sep { position: relative; width: 40px; height: 2px; margin: 0 1rem; } #slider-nav .sep:before { background-color: #fff; left: 0; } #slider-nav .sep:after { background-color: currentColor; right: 0; } #slider-nav .total { color: #030303; } #slider-nav > span { font-size: 1.5rem; } ***/ /***** INITIAL ANIMATION *****/ #hero-slider .current, #hero-slider .sep:before { opacity: 0; transition: opacity .4s .1s; } #hero-slider.ready .current, #hero-slider.ready .sep:before { opacity: 1; } #hero-slider:not(.loaded) .slide:not(:first-child) { visibility: hidden; } /*** SLIDESHOW - START ***/ #slides-main { overflow: hidden; } #slides-main .abs-mask { overflow: hidden; } #slides-main .slide { overflow: hidden; will-change: transform; } #slides-main .slide .slide-image { will-change: transform; } #slides-main .slide.prev { z-index: 5; transform: translate3d(-100%, 0, 0); transition: 1.5s cubic-bezier(0.694, 0, 0.335, 1); } #slides-main .slide.prev .abs-mask { /* take out image self animation to become fixed ***/ /*transform: translateX(80%);*/ transform: translateX(100%); transition: 1.5s cubic-bezier(0.694, 0, 0.335, 1); } #slides-main .slide.active { z-index: 10; transform: translate3d(0, 0, 0); transition: transform 1.5s cubic-bezier(0.694, 0, 0.335, 1); } #slides-main .slide.active .abs-mask { transform: translate3d(0, 0, 0); transition: transform 1.5s cubic-bezier(0.694, 0, 0.335, 1); } #slides-main .slide:not(.prev):not(.active) { z-index: -1; transform: translate3d(100%, 0, 0); } #slides-main .slide:not(.prev):not(.active) .abs-mask { /* take out image self animation to become fixed ***/ /* transform: translateX(-50%);*/ transform: translateX(-100%); } #hero-slider.prev #slides-main .slide.prev { transform: translate3d(100%, 0, 0); } #hero-slider.prev #slides-main .slide.prev .abs-mask { /* take out image self animation to become fixed ***/ /*transform: translate3d(-80%, 0, 0);*/ transform: translate3d(-100%, 0, 0); } #hero-slider.prev #slides-main .slide:not(.prev):not(.active) { transform: translate3d(-100%, 0, 0); } #hero-slider.prev #slides-main .slide:not(.prev):not(.active) .abs-mask { /* take out image self animation to become fixed ***/ /* transform: translate3d(50%, 0, 0);*/ transform: translate3d(100%, 0, 0); } #slides-aux .slide:not(.active) { transform: translateX(-5%); opacity: 0; } #slides-aux .slide.prev { transition: transform .0s .2s, opacity .2s; } #slides-aux .slide.active { transition: opacity 0.6s 0.8s, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.8s; }