html { scroll-behavior: unset !important; overflow-x:hidden; } /** use for text color in css **/ :root { /** text ***/ --blacktext: #1D1D1B !important; /** body **/ --greytext: #8a8a8a !important; --whitetext: #fff !important; /** bg **/ --blackbg: #1D1D1B !important; --greybg: #D9D9D9 !important; --lightgreybg: #f7f7f7 !important; /*--lightgreybg: #f7f6f3 !important;*/ --whitebg: #FFFFFF !important; --creambg: #eae7e2 !important; } /** ------------------------------------------------------------------------- :::::::: BODY & MAIN STUFF ------------------------------------------------------------------------- **/ body { color: var(--blacktext) !important; /*font-family: 'Montserrat', sans-serif !important;*/ font-family: 'Kumbh Sans', sans-serif !important; font-size: 16px !important; font-weight: 200 !important; line-height: 1.6em !important; letter-spacing: 0.02em; /** for fadein/out effect ** -- check in index.php -- **/ opacity: 0; transition: opacity .5s ease-out; } /***** BGS ******/ .blackbg { background-color: var(--blackbg) !important; } .greybg { background-color: var(--greybg) !important; } .lightgreybg { background-color: var(--lightgreybg) !important; } .whitebg { background-color: var(--whitebg) !important; } .creambg { background-color: var(--creambg) !important; } /** geral ***/ .img-responsive { max-width: 100%; max-height: 100%; position: relative; width: auto; height: auto; } p.nomargin { margin-top: 0; margin-bottom: 0px !important; } b, strong { font-weight: 500 !important; } .row { padding: 0; margin: 0 !important; } .centered { margin-left: auto !important; margin-right: auto !important; } .greyborder { border:10px solid var(--lightgreybg); } .creamborder { border:10px solid var(--creambg); } .whiteborder { border:10px solid #fff; } .blackborder { border:10px solid var(--blackbg); } /*** LINKS ****/ ::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; border-bottom: 1px solid; padding-bottom: 1px; /* font-weight: 300;*/ } a:hover { opacity:0.5; } /** for phone links ***/ a.phonelink { border: 0 !important; } /** bot ***/ .botwrapper { display: inline-flex; width: auto !important; margin-top: 20px; height: auto !important; margin-bottom: 20px; } .bot { border: 2px solid var(--blackbg); border-radius: 30px; padding: 8px 30px; font-weight: 500; font-size: 14px; letter-spacing: 0.03em; color: var(--blacktext) !important; background-color: transparent !important; display: block; } .bot:hover { border: 2px solid var(--blackbg); background-color: var(--blackbg) !important; color: #fff !important; opacity: 1 !important; } .bot::after { content: ""; background-image: url('../../../images/graphics/long_arrow.svg'); background-repeat: no-repeat; background-size: contain; width: 20px !important; display: inline-block; height: 6px; margin-left: 10px; margin-bottom: 1px; } .bot.down::after { transform: rotate(90deg); margin: 0 0 0 5px !important; padding: 0 !important; } .bot:hover:after { filter: invert(); } .bot.black { border: 2px solid var(--blackbg); color: #fff !important; background-color: var(--blackbg) !important; } .bot.black:hover { border: 2px solid var(--blackbg); background-color: transparent !important; color: var(--blacktext) !important; opacity: 1 !important; } .bot.black:after { filter: invert(); } .bot.black:hover:after { filter: none; } .bot.white { border: 2px solid #fff !important; color: var(--blacktext) !important; background-color: #fff !important; } .bot.white:hover { border: 2px solid #fff !important; background-color: transparent !important; color: #fff !important; opacity: 1 !important; } .bot.white:after { filter: none; } .bot.white:hover:after { filter: invert(); } /************* LANG SWITCH **************/ .langswitch { display: flex; justify-content: end; margin-top: 15px; } .langswitch li a { display: inline-block; border: 0px solid #111 !important; width: 30px; height: 30px; border-radius: 50%; font-size: 9px; display: flex; align-items: center; justify-content: center; font-weight: 400; margin-bottom: 5px; letter-spacing: 0.05em; /* color: #fff !important; background-color: var(--blackbg) !important; */ background-color: #fff !important; color: var(--blacktext) !important; } .langswitch li.lang-active a { background-color: #fff !important; color: var(--blacktext) !important; font-weight: 600; } /********* partners logos ********/ .partnerlogoswrapper { display: flex; justify-content: center; flex-wrap: wrap; } .partnerlogo { display: flex; align-items: center; justify-content: center; padding: 15px 25px; mix-blend-mode: multiply; filter: saturate(0%); flex-basis: 20%; } .partnerlogo img { max-width: 150px; max-height: 50px; } /****** invest icons ****/ .investicon .rightarrow { position: absolute; top: calc(5vh + 25px); right: -15px; } .investicon { position: relative; } /** when banners have links ***/ .bannerlink { background-color: transparent; width: 100%; height: 100%; position: absolute; left: 0; z-index: 9; border: 0 !important; filter:brightness(100%); -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .bannerlink:hover ~ .bannerimage img { transform: scale(1.05); /*filter:brightness(80%);*/ } /******* ICONES ****/ .roundicon { width: 80px; height: 80px; border: 1px solid var(--blackbg); border-radius: 50%; padding: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; } .roundicon.small { width: 50px; height: 50px; padding: 10px; } .roundicon.black { background-color: var(--blackbg); } .roundicon.black img { filter: invert(); } a.roundicon.black:hover { border: 1px solid var(--blackbg); background-color: #fff !important; opacity: 1 !important; } a.roundicon.black:hover img { filter: none; } /** ------------------------------------------------------------------------- :::::::: IGNITE GALLERY ------------------------------------------------------------------------- **/ /*************** FOR FULL HEIGHT ****************/ .fullheightgallery { height: 100%; min-height: 400px; } .fullheightgallery .igui-scope { height: 100% !important; } .fullheightgallery .ig-slideshow div { height: 100% !important; background-color: #000; } .fullheightgallery .ig-gallery-wrapper { height: 100% !important; } .fullheightgallery .ig-slideshow ul { height: 100% !important; } .fullheightgallery .igui-scope img, .igui-scope video { object-fit: cover !important; width: 100%; height: 100% !important; filter: saturate(70%); object-position: bottom; } /** ------------------------------------------------------------------------- :::::::: NAVIGATION ------------------------------------------------------------------------- **/ #nav .burguerline { background-color: var(--blackbg); width: 33px !important; height: 2px; margin-bottom: 7px; display: block; } #nav .burgerWrapper { float: right; display: flex; } #nav .burgerWrapper .menutitle { font-size: 9px; text-transform: uppercase; font-weight: 400; margin-right: 16px; margin-top: -3px; letter-spacing: 0.1em !important; } #nav .burgerWrapper a { border: 0 !important; cursor: pointer; } #nav .offcanvas-backdrop { background-color: #fff !important; } #nav .offcanvas-backdrop.show { opacity: 0; } /** side ***/ /* .mainmenu.offcanvas-end { top: 0; right: 0; width: max(50vw,300px); border-left: 0 !important; transform: translateX(100%); background-color: var(--lightgreybg); } */ .mainmenu.offcanvas-top { top: 0; right: 0; left: 0; height: 100vh; max-height: 100%; border-bottom: 0 !important; transform: translateY(-100%); } .mainmenu .offcanvas-header { width: 25px; position: absolute; padding: 0 !important; top: 35px; right: 45px; cursor: pointer; } .closeMenu img { width: 25px; } .closeMenu { border: 0; } .mainmenu .offcanvas-body { flex-grow: 1; padding: 5vh 12vw; overflow-y: auto; text-align: center !important; display: flex; justify-content: center; align-items: center; } .mainmenu .nav { display: flex; flex-direction: column; } .mainmenu li { margin-bottom: 20px; } .offcanvas-body a { border: 0 !important; text-transform: uppercase; letter-spacing: 0.05em; font-size: 30px; font-weight: 100 !important; } /** ------------------------------------------------------------------------- :::::::: FORM ------------------------------------------------------------------------- **/ .grecaptcha-badge { bottom: 100px !important; display:none; } .myform { background-color: transparent !important; } .myform .cf-form-wrap { padding: 0 !important; } .myform .cf-input { border-bottom: 1px solid #aaa !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; background-color: transparent !important; color: var(--blacktext) !important; padding-left: 3px !important; } .myform .cf-select select { padding-left: 0 !important; } .myform ::placeholder { color: var(--blacktext) !important; opacity: 0.5 !important; } .myform .cf-btn { width: auto; letter-spacing: 0.03em; font-size: 14px !important; font-weight: 500; background-color: var(--blackbg) !important; padding: 12px 30px !important; border-radius: 30px !important; border: 2px solid var(--blackbg) !important; } .myform .cf-btn::after { content: ""; background-image: url('../../../images/graphics/long_arrow.svg'); background-repeat: no-repeat; background-size: contain; width: 20px !important; display: inline-block; height: 6px; margin-left: 10px; margin-bottom: 1px; filter: invert(); } .myform .cf-btn:hover { border: 2px solid var(--blackbg) !important; color: var(--blacktext) !important; background-color: transparent !important; } .myform .cf-btn:hover:after { filter: none !important; } .convertforms.cf-success .cf-response { background-color: #7da47d; display: block; padding: 30px 50px; } /** ------------------------------------------------------------------------- :::::::: ESTRUTURA ------------------------------------------------------------------------- **/ #wrap_all { background-color: #fff; position: relative; width: 100%; float:left; } #wrap_body { /*background-color: #fff;*/ background-color: var(--lightgreybg); position: relative; width: 100%; float: left; z-index: 2; } #stage { float: left; position: relative; width: 100%; } #head { padding: 15px 15px; float: left; position: fixed; top: 0; z-index: 9; width: 100%; height: 70px !important; display: none; } #logo { position: fixed; top: 0; left: 0; padding:0; margin-left: 0px; margin-top: 0px; z-index: 100; width: 12vw; min-width: 120px; } #logo .logowrapper { /* with box **/ /* background-color: var(--blackbg);*/ /* padding: 1.8vw 1.8vw 0.9vw 1.8vw;*/ /** no box **/ background-color: rgba(255,255,255,0); padding: 1.8vw 2.8vw 1.2vw 2.8vw; width: 100%; } #logo .logowrapper a { border: 0 !important; } #nav { position: fixed; top: 0; right: 0; padding: 1.8vw 2.2vw; z-index: 9; width: 12vw; min-width: 120px; display: flex; justify-content: flex-end; flex-direction: column; } #top { float: left; width: 100%; position: relative; z-index: 2; background-color: #fff; } #bottom { float: left; width: 100%; position: relative; z-index: 3; background-color: #fff; } #footer { float: left; width: 100% !important; position:relative; /* margin-top: 100px;*/ /*margin-bottom: 100px;*/ } #footerInfo a { border: 0; } #footerInfo p { margin-bottom: 5px !important; } #copyright { padding-top: 30px; padding-bottom: 20px; font-size: 11px; letter-spacing: 0.02em; text-align: center; position: relative; } /** ------------------------------------------------------------------------- :::::::: ACCORDION ------------------------------------------------------------------------- **/ .simpleaccordion { list-style: none !important; padding: 0; } .simpleaccordion .inner { overflow: hidden; display: none; padding: 20px 0 20px; } .simpleaccordion div a.toggle { width: 100%; display: block; background: transparent !important; padding: 0 !important; border-radius: 0 !important; transition: all 0.3s ease; font-size: 1.2em; padding: 20px 0 !important; color: var(--blacktext) !important; cursor:pointer; line-height: 140%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ddd !important; color: var(--blacktext) !important; font-weight:400 !important; } /* .simpleaccordion div a.toggle::after { content: ""; margin-right: 10px; font-size: 20px; font-weight: 400; width: 20px; background-color: #fff; color: var(--blacktext) !important; border-radius: 50%; height: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid #000; padding-bottom: 3px; } */ .simpleaccordion .show { display: inherit !important; } /** TITLES ***/ /** over **/ .simpleaccordion div a.toggle:hover { background: transparent !important; text-decoration: none !important; opacity: 1 !important; } /** title closed ***/ .simpleaccordion a.toggle[aria-expanded="false"] { color: var(--blacktext) !important; font-weight: 400 !important; } .simpleaccordion a.toggle[aria-expanded="false"]::after{ color: var(--blacktext) !important; background-color:#fff !important; content: "+" !important; font-size: 1.2em !important; } /** title opne **/ .simpleaccordion a.toggle[aria-expanded="true"] { color: #149399 !important; opacity: 1 !important; } .simpleaccordion a.toggle[aria-expanded="true"]::after{ content: "-" !important; color: #149399 !important; background-color:#fff !important; font-size: 1.2em !important; } /******** end accordion ********/ /** ------------------------------------------------------------------------- :::::::: BANNERS & IMAGES ------------------------------------------------------------------------- **/ /**** BANNERS SCROLL DOWN INFO ******************/ .scrolldown { position: absolute; z-index: 9; bottom: 0 !important; color: #fff !important; text-align: center !important; width: 100%; font-size: 9px !important; letter-spacing: 3px; font-weight: 300 !important; opacity: 0.5; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; text-transform: uppercase; } .scrolldown.hide { opacity:0; } .scrolldown::after { content: ""; width: 1px; height: 30px; background-color: #fff; display: block; margin: 0 auto !important; } /*** BANNER WITH TEXT ON TOP OF IMAGE *******/ .bannerwrapper { position: relative; max-width: 100%; overflow: hidden; } .bannerover { position: absolute !important; z-index: 2; width: 100%; height: auto !important; min-height: 100% !important; left: 0; } .bannerimage { z-index: 0; position: relative; width: 100%; height: 100%; overflow: hidden; } .bannerimage img { object-fit: cover !important; width: 100% !important; height: 100%; transition: transform .2s; } /** FILTER ***/ .blackfilter { position: absolute; width: 100%; height: 100%; background-color: #000; opacity: 0.4; z-index: 1; } /****** single image banner full width and height ****/ .imagebanner img { object-fit: cover !important; width: 100% !important; height: 100% !important; } /** when using .insideparallax on image ***/ .imagebanner .simpleParallax { height: 100%; } .imagebanner { position: relative; height: 100%; } .bannerimage .simpleParallax { height: 100%; } /* .imagebanner.halfheight, .imagebanner.twothirdsheight, .imagebanner.fullheight { height: 100% !important; }*/ /** ------------------------------------------------------------------------- :::::::: LAYOUT ------------------------------------------------------------------------- **/ .safepadding{ padding-left: max(12vw, 120px) !important; /*padding-right: max(7vw, 120px) !important;*/ padding-right: max(12vw, 120px) !important; } /** for boxes with content inside ***/ .contentbox { padding: 5vh 2vw 5vh !important; } /******* PADDINGS **********/ .leftsmallpadding { padding-left:3vw !important; } .leftpadding { padding-left: 6vw !important; } .leftextrapadding { padding-left:12vw !important; } .rightsmallpadding { padding-right:3vw !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: 150px; } .sticky.middle{ top:50vh; } /****** 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; } /***** HEIGHT ********/ .fullwidth { width:100%; } .fullheight { height:100vh !important; /*min-height: 850px;*/ min-height: 100%; } .fullheight90 { height:90vh !important; min-height: 100%; } .twothirdsheight { height:75vh !important; /*min-height: 750px;*/ } .halfheight { height:50vh !important; /*min-height: 500px;*/ } .onethirdheight { height:37.5vh !important; min-height: 300px; } .quarterheight { height:25vh; /* min-height: 250px;*/ } /** ------------------------------------------------------------------------- :::::::: HTML5 VIDEO ------------------------------------------------------------------------- **/ /**** background videos ********/ /** take padding from wrapper ***/ .videoWrapper.fullheight, .videoWrapper.halfheight, .videoWrapper.twothirdsheight { padding-bottom:0 !important; } /** the video inside the wrapper **/ .videoWrapper.fullheight video { min-height: 100vh !important; object-fit: cover; } .videoWrapper.fullheight90 video { min-height: 90vh !important; object-fit: cover; } .videoWrapper.halfheight video { min-height: 50vh !important; object-fit: cover; } .videoWrapper.twothirdsheight video { min-height: 75vh !important; object-fit: cover; } .videoWrapper { height: 0; padding-bottom: 56.5% !important; padding-top: 0; position: relative; width: 100%; overflow: hidden !important; } .videoWrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .videoWrapper video.centered { position: absolute; top: 0; left: -50%; width: 100%; height: 100%; right: 50%; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /***** ZED ****/ .zed { position: absolute; bottom: 30px; right: 45px; padding: 0; } .zed a { border: 0 !important; font-weight: 800 !important; letter-spacing: -1px; color: #111 !important; font-size: 12px; text-transform: uppercase; }