body{ font-family: 'Raleway'; margin: 0; padding: 0; background-color: transparent; } * { margin: 0; padding: 0; } @-webkit-keyframes colorChangeBlue { 0% { background-image: url('images/backgroundcor/azul.png'); background-size: cover; background-repeat: no-repeat, repeat; background-attachment: fixed; } 50% { background-image: url('images/backgroundcor/azul2.png'); background-size: cover; background-repeat: no-repeat, repeat; background-attachment: fixed; } 100% { background-image: url('images/backgroundcor/azul.png'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } } @-webkit-keyframes colorChangePurple { 0% { background-image: url('images/backgroundcor/roxo.png'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } 50% { background-image: url('images/backgroundcor/roxo2.png'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } 100% { background-image: url('images/backgroundcor/roxo.png'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } } @-webkit-keyframes colorChangeGreen { 0% { background-image: url('images/backgroundcor/levecor.png'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } 50% { background-image: url('images/backgroundcor/levecor2.png'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } 100% { background-image: url('images/backgroundcor/levecor.png'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } } @-webkit-keyframes colorChangePurpleConecte { 0% { background-image: url('images/backgroundcor/roxo_conecte.png'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } 50% { background-image: url('images/backgroundcor/roxo_conecte2.png'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } 100% { background-image: url('images/backgroundcor/roxo_conecte.png'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } } #body-index{ font-family: 'Raleway', sans-serif; /* background-color: #614be0; */ color: white; background-attachment: fixed; /* transition: background-color #5c5c5e 2s; */ /* height: 100px; */ -webkit-animation-name: colorChangeGreen; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 5s ; -webkit-animation-transition: 5s ease-out; -webkit-transition: background-image 5s ease-out; -moz-transition: background-image 5s ease-out; -o-transition: background-image 5s ease-out; transition: background-image 5s ease-out; } #body-o-que-a-leve-ja-fez{ background-image: url('images/backgroundcor/branco.png'); background-size: cover; background-repeat: no-repeat, repeat; background-attachment: fixed; } #body-o-que-a-leve-ja-fez a { color: #666666 !important; } #body-o-que-a-leve-ja-fez nav a:hover { color: #614be0 !important; } #body-o-que-a-leve-ja-fez #menuToggle span{ color: #666666 !important; } #body-se-conecte{ font-family: 'Raleway', sans-serif; font-weight: 100; /* background-color: #614be0; */ color: white; /* transition: background-color #5c5c5e 2s; */ /* height: 100px; */ -webkit-animation-name: colorChangeBlue; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 5s ; -webkit-animation-transition: 5s ease-out; -webkit-transition: background-image 5s ease-out; -moz-transition: background-image 5s ease-out; -o-transition: background-image 5s ease-out; transition: background-image 5s ease-out; } #body-a-palestra-do-ze{ font-family: 'Raleway', sans-serif; font-weight: 100; /* background-color: #614be0; */ color: white; background-attachment: fixed; /* transition: background-color #5c5c5e 2s; */ /* height: 100px; */ -webkit-animation-name: colorChangePurple; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 5s ; -webkit-animation-transition: 5s ease-out; -webkit-transition: background-image 5s ease-out; -moz-transition: background-image 5s ease-out; -o-transition: background-image 5s ease-out; transition: background-image 5s ease-out; } #body-essa-eh-a-leve{ font-family: 'Raleway', sans-serif; font-weight: 100; /* background-color: #614be0; */ color: white; /* transition: background-color #5c5c5e 2s; */ /* height: 100px; */ -webkit-animation-name: colorChangeGreen; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 5s ; -webkit-animation-transition: 5s ease-out; -webkit-transition: background-image 5s ease-out; -moz-transition: background-image 5s ease-out; -o-transition: background-image 5s ease-out; transition: background-image 5s ease-out; font-family: 'Raleway', sans-serif; background-color: #614be0; font-weight: 100; color: white; } #body-conheca-o-ze{ /* font-family: 'Raleway', sans-serif; */ background-color: black; color: white; } #open{ /* background-color: rgb( 251,252, 252); */ background-color: white; width: 100%; height: 100%; z-index: 10000; position: absolute; transition: opacity 1s ease; } #intro-leve{ background-color: rgb( 252,252, 252); /* background-color: white; */ width: 100%; height: 100%; z-index: 10000; position: absolute; transition: opacity 1s ease; } #open-logo{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 1000; margin: 100px auto; width: 500px; } .fade-Out { animation: fadeOut ease 8s; -webkit-animation: fadeOut ease 8s; -moz-animation: fadeOut ease 8s; -o-animation: fadeOut ease 8s; -ms-animation: fadeOut ease 8s; } @keyframes fadeOut { 80% { opacity:1; } 100% { opacity:0; } } @-moz-keyframes fadeOut { 80% { opacity:1; } 100% { opacity:0; } } @-webkit-keyframes fadeOut { 80% { opacity:1; } 100% { opacity:0; } } @-o-keyframes fadeOut { 80% { opacity:1; } 100% { opacity:0; } } @-ms-keyframes fadeOut { 80% { opacity:1; } 100% { opacity:0; } } #main { margin-left: 15%; margin-right: 15%; } #main-o-que-a-leve-ja-fez { margin-left: 10%; margin-right: 5%; } /* NAVIGATION BAR */ #nav-Div{ position: fixed; z-index: 10; } /* ////////END CASCADE ANIMATION */ #menuToggle { display: block; position: fixed; top: 50px; left: 50px; -webkit-user-select: none; user-select: none; } #menuToggle a { text-decoration: none; color: white; transition: color 0.3s ease; font-weight: 800; } #menuToggle a:hover{ color: #614be0 } #body-se-conecte a:hover{ color: #4bfcb9 } #body-a-palestra-do-ze a:hover{ color: #4bfcb9 } #body-conheca-o-ze a:hover{ color: #4bfcb9 } .menu-verde{ width: 100%; height: 100vh; background-image: url('images/backgroundcor/levecor.png'); background-size: cover; } #menuToggle input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none; } /* * Just a quick hamburger */ #menuToggle span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; /* background: #666666; */ background: #cdcdcd; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; } #menuToggle span:first-child { transform-origin: 0% 0%; } #menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; } /* * Transform all the slices of hamburger * into a crossmark. */ #menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); /* background: #232323; */ } /* * But let's hide the middle one. */ #menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } /* * Ohyeah and the last one should go the other direction */ #menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } /* * Make this absolute positioned * at the top left of the screen */ #menu { /* display: inline; */ width: 0px; /* margin: -120px 0px -200px -50; */ margin: -120px -20px -280px -160px; /* margin: -120px -100px -200px -400px; */ /* top, right, bottom, left */ /* padding-left: 50px; */ list-style-type: none; -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */ transform-origin: 0%, 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); overflow-x: scroll; } #menu li { padding: 10px 0; font-size: 15px; font-weight: 600; transform:scale(0.3,1); -webkit-transform:scale(0.8,1); } /* * And let's slide it in from the left */ #menuToggle input:checked ~ ul { transform: none; width: 200px; padding-left: 60px; padding-right: 60px; padding-top: 125px; padding-bottom: 200px; overflow-x: scroll; height: 1000px; margin: -120px -20px -280px -80px; /* position:relative; */ } @media (max-height: 600px){ #menuToggle input:checked ~ ul{ overflow-x: scroll; max-height: 250px; } } /* display: none; */ /* //////////////////////////////////////////SUB MENU */ #hide{ height: 0; transition: all 0s ease 5s; /*delay 1s*/ visibility: hidden; margin-top: 0; } #display-mobile{ display: none; } .activate-menu:hover + #hide { transition-delay: 0s; visibility: visible; height: 100%; margin-top: 10px; } .sub-menu { display: flex; flex-direction: column; justify-content: center; margin-top: 20px; } .sub-menu-Mobile{ margin-top: 40px; display: flex; flex-direction: column; justify-content: center; margin-left: 0px; margin-bottom: -20px; } #sub-nav-link{ color: gray; font-weight: 600 !important; font-size: 16px; font-style: italic; margin-top: 8px; } .hr-essa{ width: 100%; border: 2px solid; opacity: 100; margin-top: 30px; } .hr{ width: 100%; border: 2px solid; opacity: 100; } .hrZericardo{ border: 2px solid; opacity: 100; margin-top: 30px; width: 75%; margin-right: 50px; } h1 { font-family: 'Raleway', sans-serif; font-weight: 200 !important; font-size: 100px; text-transform: uppercase; transform:scale(0.3,1); -webkit-transform:scale(0.8,1); display:inline-block; z-index: 1; } h4{ font-family: 'Raleway'; line-height: 33px; font-size: 25px; font-weight: 400 !important; } h6 { font-family: 'Raleway'; font-stretch: 75%; font-weight: 100; font-size: 18px; text-align: center; text-align: justify; text-justify: left; text-transform: none; letter-spacing: 1px; line-height: 32px; font-weight: 300 !important; } h7{ line-height: 40px; font-size: 14px; font-weight: 400; } b { font-family: 'Raleway'; font-weight: 400; } h7 b { font-family: 'Raleway'; font-weight: 600; } p { color: black; font-stretch: semi-condensed; } #h1B{ font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 100px; } .socialbar{ background-color: white; width: 100%; height: 60px; color:#614be0; position: fixed; z-index: 100; left: 0; bottom: 0; } .icon{ width: 35px; } .social-logo{ width: 100px; margin-top: -4px; margin-left: 30px; } .languages{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; align-content: flex-start; margin-top: -45px; margin-left: 170px; color: #666666 !important; } .languages a { font-weight: 300; text-decoration: none; font-size: 11px; color: #666666; font-weight: 600 !important; } .social-icons{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; align-content: flex-end; margin-right: 30px; margin-top: -30px; } @keyframes flickerAnimation { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-o-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } #animate-flicker { -webkit-animation: flickerAnimation ease 3s infinite; -moz-animation: flickerAnimation ease 3s infinite; -o-animation: flickerAnimation ease 3s infinite; animation: flickerAnimation ease 3s infinite; } /* ///////////////////CONHECA O ZE RICARDO */ .ze-ricardo{ display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; z-index: 2; margin: auto; } .titulo-conheca-o-ze{ margin-top: 50px; margin-right: -40px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-end; align-content: flex-end; z-index: 1; text-align: right; right: 10%; left: 10%; } .ze-ricardo-text { width: 50%; text-align: right; display:flex; flex-direction: column; justify-content: flex-end; right: 10%; left: 10%; margin-bottom: 200px; } .ig-ze-ricardo{ width: 30px; margin-top: 20px; margin-bottom: -10px; margin-left: -4px; } #conhecaVideo { /* position: static; */ position: fixed; right: 0; bottom: 0; width: 100%; height: auto; z-index: -1; } @media (min-aspect-ratio: 16/9) { #conhecaVideo{ width:100%; height: auto; } } @media (max-aspect-ratio: 16/9) { #conhecaVideo{ width:auto; height: 100%; } } /* ///////////////////////////////////// SE CONCECTE */ .se-conecte-Div{ display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; z-index: 1; margin: auto; } .titulo-se-conecte{ margin-top: 100px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-end; align-content: flex-end; text-align: right; right: 10%; left: 10%; } .se-conecte-container{ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; margin-top: 50px; margin-bottom: 100px; } .se-conecte-frase{ margin-top: 5px; margin-bottom: 5px; display: flex; flex-direction: row; margin-left: -5px; } .se-conecte-frase:first-of-type{ margin-top: 35px; } .icon-conecte{ width: 30px; height: 30px; margin-top: 1.5px; margin-right: 4px; } .fabiane{ font-weight: 600 !important; } .solucoes{ margin-top: -450px; margin-bottom: 220px; text-align: center; margin-left: auto; margin-right: 100px; position: static !important; z-index: -10; } .solucoes h2{ font-size: 50px !important; font-style: italic !important; font-weight: 600 !important; } /* /////////// */ .fade-in-out { animation: fadeInOut ease 15s; /* -webkit-animation: fadeInOut ease 15s; -moz-animation: fadeInOut ease 15s; -o-animation: fadeInOut ease 15s; -ms-animation: fadeInOut ease 15s; */ } @keyframes fadeInOut { 0% { opacity:0; } 50% { opacity:0; } 75% { opacity:1; } 99%{ opacity:0; } 100% { opacity:0; } } @-moz-keyframes fadeInOut { 0% { opacity:0; } 50% { opacity:0; } 75% { opacity:1; } 99%{ opacity:0; } 100% { opacity:0; } } @-webkit-keyframes fadeInOut { 0% { opacity:0; } 50% { opacity:0; } 75% { opacity:1; } 99%{ opacity:0; } 100% { opacity:0; } } @-o-keyframes fadeInOut { 0% { opacity:0; } 50% { opacity:0; } 75% { opacity:1; } 99%{ opacity:0; } 100% { opacity:0; } } @-ms-keyframes fadeInOut { 0% { opacity:0; } 50% { opacity:0; } 75% { opacity:1; } 99%{ opacity:0; } 100% { opacity:0; } } /* /////////////////////ESSA E A LEVE DIV */ #entre{ background-color: rgb( 252,252, 252); /* background-color: white; */ width: 100%; height: 100%; z-index: 10000; position: absolute; transition: opacity 1s ease; } .entre-v{ width: 300px; margin: auto; margin-top: 10%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: stretch; } #entre h6{ width: 300px; margin: auto; margin-left: auto; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: stretch; color: #5c5c5c; } #seta-index{ position: fixed; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; align-content: stretch; margin-left: 93.5%; top: 50vh; } .arrow-image{ width: 60px; } #indexVideo{ position: static; right: 0; bottom: 0; width: 100%; height: 100%; } #index-open-Video{ position:relative; left: 0; top: 0; background-color: black !important; width: 100%; height: 93vh; } #index-open-Video-EN{ position:relative; left: 0; top: 0; background-color: black !important; width: 100%; height: 93vh; } .intro-gif{ object-fit: cover; width: 100vw; height: 100vh; -webkit-animation-name: effect-intro-gif; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 25s ; -webkit-animation-direction: normal; background-size: cover; background-repeat: no-repeat, repeat; /* background-attachment: fixed; */ z-index: 100; } @-webkit-keyframes effect-intro-gif { 0% { background-image: url('images/fotohome/4.jpg'); } 8% { background-image: url('images/fotohome/4.jpg'); } 11% { background-image: url('images/fotohome/2.jpg'); } 19% { background-image: url('images/fotohome/2.jpg'); } 22% { background-image: url('images/fotohome/3.jpg'); } 30% { background-image: url('images/fotohome/3.jpg'); } 33% { background-image: url('images/fotohome/1.jpg'); } 41% { background-image: url('images/fotohome/1.jpg'); } 44% { background-image: url('images/fotohome/5.jpg'); } 52% { background-image: url('images/fotohome/5.jpg'); } 55% { background-image: url('images/fotohome/7.jpg'); } 63% { background-image: url('images/fotohome/7.jpg'); } 66% { background-image: url('images/fotohome/8.jpg'); } 74% { background-image: url('images/fotohome/8.jpg'); } 77% { background-image: url('images/fotohome/9.jpg'); } 85% { background-image: url('images/fotohome/9.jpg'); } 88% { background-image: url('images/fotohome/10.jpg'); } 98% { background-image: url('images/fotohome/10.jpg'); } 99% { background-image: url('images/fotohome/4.jpg'); } 100% { background-image: url('images/fotohome/4.jpg'); } } #sound-icon{ width: 40px; opacity: 0.7; } #sound{ position: fixed; margin-left: 94%; margin-top: 40px; z-index: 1000; } #play-img{ /* opacity: 0.2; */ position: absolute; margin-left: 45vw; margin-top: 40vh; z-index: 10; } .faderPlay{ opacity: 0; } .faderStart{ opacity: 100 !important; } .faderPlay:hover{ opacity: 100; } #play-icon{ width: 15%; } #play-img-holder{ position: absolute; margin-left: 45vw; margin-top: 40vh; z-index: 20; /* width: 100% */ } .play-holder{ width: 15%; } .essa-e-a-leve-Div{ display: flex; flex-direction: column; flex-wrap: wrap; z-index: 2; } #topo{ display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; align-content: stretch; margin-left: 84px; margin-top: 180px; margin-bottom: 100px; padding-top: 20px; } .topo h4{ font-size: 21px; margin-left: -20px; } .logo_branco{ width: 200px; } .essa-e-a-leve-container{ margin-right: -60px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; align-content: center; z-index: 1; text-align: right; } .essa-e-a-leve-container h2{ position: fixed; font-size: 30px !important; font-style: italic !important; font-weight: 600 !important; margin-right: 50px; } .essa-e-a-leve-container a { color : #0efce9; text-decoration: none; } .essa-e-a-leve-container h6{ font-size: 25px; font-weight: 400 !important; text-align: justify; text-align-last: left; line-height: 40px; } .essa-e-a-leve-container h3{ font-size: 30px !important; font-style: italic !important; font-weight: 600 !important; line-height: 50px !important; margin-right: 50px; text-align: left; text-align: justify; } .essa-eh-a-leve-text.fim { margin-bottom: 150px; } .titulo-essa{ padding-top: 20px; margin-left: 60px; margin-top: 50px; margin-bottom: 50px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; align-content: flex-start; z-index: 1; text-align: left; } .titulo-right-inspiracao{ margin-bottom: 100px; margin-top: -50px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-end; align-content: flex-end; z-index: 1; text-align: right; } .titulo-left-essa{ /* margin-top: 150px; */ margin-left: -30px; margin-bottom: 100px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; align-content: flex-start; z-index: 1; text-align: left; right: 10%; left: 10%; } .essa-eh-a-leve-text{ font-size: 21px; width: 800px; margin-right: 50px; } .essa-eh-a-leve-quote{ margin-top: 100px; margin-bottom: 100px; } .essa-eh-a-leve-quote h3{ text-align: center !important; font-size: 35px !important; line-height: 50px !important; font-style: italic !important; } .essa-eh-a-leve-quote.pergunta{ margin-left: 250px; } .essa-eh-a-leve-quote.pergunta2{ margin-left: 290px; } /* //////////////// ////////////////////////////////////////////////////*/ #button { background: none!important; border: none; padding: 0!important; /*optional*/ color : #0efce9; text-decoration: none; font-size: 25px; cursor: pointer; font-family: 'Raleway'; line-height: 32px; letter-spacing: 2px; font-weight: 300 !important; text-align: justify; } input:focus { outline: none; } /* Popup box BEGIN */ .hover_johny_hooker{ background:rgba(0,0,0,.4); cursor:pointer; display:none; /* height:; */ position:fixed; text-align:center; top:0; width:100%; height: 100%; z-index:10000; } .hover_johny_hooker .helper{ display:inline-block; vertical-align:middle; } .hover_johny_hooker > div { display: inline-block; height: auto; min-height: 100px; vertical-align: middle; margin: 100px auto; position: relative; padding: 15px 5%; } .popupCloseButton { cursor: pointer; display: inline-block; position: absolute; top: -20px; right: -20px; font-size: 40px; line-height: 30px; width: 30px; height: 30px; text-align: center; } .trigger_johny_hooker { cursor: pointer; } .pop-up-image{ width: 800px; } /* Popup box JOHNY HOOKER */ /* Popup box IZA */ .hover_iza{ background:rgba(0,0,0,.4); cursor:pointer; display:none; position:fixed; text-align:center; top:0; width:100%; height: 100%; z-index:10000; } .hover_iza .helper{ display:inline-block; /* height:100%; */ vertical-align:middle; } .hover_iza > div { display: inline-block; height: auto; min-height: 100px; vertical-align: middle; margin: 100px auto; position: relative; padding: 15px 5%; } .popupCloseButton { cursor: pointer; display: inline-block; position: absolute; top: -20px; right: -20px; font-size: 40px; line-height: 30px; width: 30px; height: 30px; text-align: center; } .trigger_iza { cursor: pointer; } .pop-up-image{ width: 800px; } /* END POP UP IZA */ /* Popup box LEVE */ .hover_leve{ background:rgba(0,0,0,.4); cursor:pointer; display:none; position:fixed; text-align:center; top:0; width:100%; height: 100%; z-index:10000; } .hover_leve .helper{ display:inline-block; vertical-align:middle; } .hover_leve > div { display: inline-block; height: auto; min-height: 100px; vertical-align: middle; margin: 100px auto; position: relative; padding: 15px 5%; } .popupCloseButton { cursor: pointer; display: inline-block; position: absolute; top: -20px; right: -20px; font-size: 40px; line-height: 30px; width: 30px; height: 30px; text-align: center; } .trigger_leve { cursor: pointer; } .pop-up-image{ width: 800px; } /* >>>>//////////// O QUE A LEVE JA FEZ 2 */ #main-o-que-a-leve-ja-fez h1{ font-size: 70px !important; } #main-o-que-a-leve-ja-fez a{ text-decoration: none; color: black !important; } .titulo-master-card{ z-index: 1; text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .logo-mastercard{ width: 150px; margin-right: 20px; } .master-card-container{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; align-content: flex-start; margin-left: -70px; margin-right: auto; margin-top: 50px; margin-bottom: 200px; } .mastercard-gil{ width: 150px; margin-right: 50px; } .mastercard-milton{ width: 150px; margin-left: 100px; } /* ////////// GIF MASTERCARD */ .gif-mastercard{ width: 400px; height: 550px; color: black; -webkit-animation-name: effect-mastercard; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 8s ; -webkit-animation-direction: normal; background-size: cover; /* background-size: 100% 100%; */ background-repeat: no-repeat, repeat; /* background-attachment: fixed; */ z-index: 1; } @-webkit-keyframes effect-mastercard { 0% { background-image: url('images/mastercard-gif/lives_mastercard1.png'); } 13% { background-image: url('images/mastercard-gif/lives_mastercard1.png'); } 14% { background-image: url('images/mastercard-gif/lives_mastercard2.png'); } 27% { background-image: url('images/mastercard-gif/lives_mastercard2.png'); } 28% { background-image: url('images/mastercard-gif/lives_mastercard7.png'); } 41% { background-image: url('images/mastercard-gif/lives_mastercard7.png'); } 42% { background-image: url('images/mastercard-gif/lives_mastercard4.png'); } 55% { background-image: url('images/mastercard-gif/lives_mastercard4.png'); } 56% { background-image: url('images/mastercard-gif/lives_mastercard5.png'); } 69% { background-image: url('images/mastercard-gif/lives_mastercard5.png'); } 70% { background-image: url('images/mastercard-gif/lives_mastercard6.png'); } 83% { background-image: url('images/mastercard-gif/lives_mastercard6.png'); } 84% { background-image: url('images/mastercard-gif/lives_mastercard3.png'); } 99% { background-image: url('images/mastercard-gif/lives_mastercard3.png'); } 100% { background-image: url('images/mastercard-gif/lives_mastercard1.png'); } } /* /////// ford */ .titulo-right-ford{ margin-top: 50px; margin-right: -250px; margin-bottom: 100px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; align-content: center; z-index: 1; text-align: right; } .live-ford-container{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; align-content: flex-start; margin-top: 200px; margin-right: 150px; margin-bottom: 200px; } .titulo-live-ford{ z-index: 1; text-align: left; margin-right: -50px; margin-top: -10px; margin-left: 0px; display: flex; flex-direction: column; } .logo-ford{ width: 130px; margin-left: 35px; margin-top: -20px; } .logo-ford-2{ width: 130px; margin-right: 100px; } .gif-ford{ width: 550px; height: 350px; color: black; margin-left: -100px; -webkit-animation-name: effect-ford; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 8s ; -webkit-animation-direction: normal; background-size: cover; /* background-size: 100% 100%; */ background-repeat: no-repeat, repeat; /* background-attachment: fixed; */ z-index: 1; } @-webkit-keyframes effect-ford { 0% { background-image: url('images/ford-gif/ford1.png'); } 24% { background-image: url('images/ford-gif/ford1.png'); } 25% { background-image: url('images/ford-gif/ford2.png'); } 49% { background-image: url('images/ford-gif/ford2.png'); } 50% { background-image: url('images/ford-gif/ford3.png'); } 74% { background-image: url('images/ford-gif/ford3.png'); } 75% { background-image: url('images/ford-gif/ford4.png'); } 99% { background-image: url('images/ford-gif/ford4.png'); } 100% { background-image: url('images/ford-gif/ford1.png'); } } /* //////////////// convenção da tim */ .titulo-convencao-da-tim{ z-index: 1; text-align: left; display: flex; flex-direction: column; align-items: flex-end; /* margin-right: 20px; */ } .convencao-da-tim-container{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; align-content: flex-start; margin-right: 105px; margin-bottom: 50px; } .logo-tim{ width: 300px; margin-right: 130px; margin-top: 20px; } .logo-tim-en-2{ width: 300px; margin-right: 150px; margin-top: 20px; } .gif-convencao-tim{ width: 550px; height: 350px; color: black; -webkit-animation-name: effect-convencao-tim; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 8s ; -webkit-animation-direction: normal; background-size: cover; /* background-size: 100% 100%; */ background-repeat: no-repeat, repeat; /* background-attachment: fixed; */ z-index: 1; } @-webkit-keyframes effect-convencao-tim { 0% { background-image: url('images/convencaotim-gif/timconvencao1.png'); } 15% { background-image: url('images/convencaotim-gif/timconvencao1.png'); } 16% { background-image: url('images/convencaotim-gif/timconvencao2.png'); } 31% { background-image: url('images/convencaotim-gif/timconvencao2.png'); } 32% { background-image: url('images/convencaotim-gif/timconvencao3.png'); } 47% { background-image: url('images/convencaotim-gif/timconvencao3.png'); } 48% { background-image: url('images/convencaotim-gif/timconvencao4.png'); } 63% { background-image: url('images/convencaotim-gif/timconvencao4.png'); } 64% { background-image: url('images/convencaotim-gif/timconvencao5.png'); } 79% { background-image: url('images/convencaotim-gif/timconvencao5.png'); } 80% { background-image: url('images/convencaotim-gif/timconvencao6.png'); } 99% { background-image: url('images/convencaotim-gif/timconvencao6.png'); } 100% { background-image: url('images/convencaotim-gif/timconvencao1.png'); } } /* //////////cristooo////// */ .titulo-cristo{ z-index: 1; text-align: right; margin-right: 10px; margin-top: -10px; display: flex; flex-direction: column; } .cristo-container{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; align-content: flex-start; margin-bottom: 50px; margin-left: 40px; } .estacio-logo{ width: 300px; margin-left: 60px; margin-top: 10px; } .estacio-logo-en{ width: 300px; margin-left: 100px; margin-top: 10px; } .gif-cristo{ width: 450px; height: 550px; color: black; -webkit-animation-name: effect-cristo; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 8s ; -webkit-animation-direction: normal; background-size: cover; /* background-size: 100% 100%; */ background-repeat: no-repeat, repeat; /* background-attachment: fixed; */ z-index: 1; } @-webkit-keyframes effect-cristo { 0% { background-image: url('images/cristo-gif/cristo1.png'); } 24% { background-image: url('images/cristo-gif/cristo1.png'); } 25% { background-image: url('images/cristo-gif/cristo2.png'); } 49% { background-image: url('images/cristo-gif/cristo2.png'); } 50% { background-image: url('images/cristo-gif/cristo3.png'); } 74% { background-image: url('images/cristo-gif/cristo3.png'); } 75% { background-image: url('images/cristo-gif/cristo4.png'); } 99% { background-image: url('images/cristo-gif/cristo4.png'); } 100% { background-image: url('images/cristo-gif/cristo1.png'); } } .cristo-logos{ margin-left: 60px; margin-top: 30px; width: 300px } /* verao tim //////////////////////// verao tim */ .verao-tim-container{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; align-content: flex-start; margin-bottom: 200px; margin-left: 170px; } .verao-tim-container.en{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; align-content: flex-start; margin-bottom: 200px; margin-left: 105px; } .titulo-verao-tim{ z-index: 1; text-align: right; display: flex; flex-direction: column; margin-right: 0px; } .logo-tim-2{ width: 300px; margin-left: 40px; margin-top: 20px; } .logo-tim-2.en{ width: 300px; margin-left: 100px; margin-top: 20px; } .logo-tim-3{ width: 300px; margin-top: 20px; margin-right: 50px; } .logo-tim-4{ width: 300px; margin-top: 20px; margin-right: 70px; } .logo-tim-en{ width: 300px; margin-top: 20px; margin-left: 100px; } .gif-verao-tim{ width: 550px; height: 350px; /* width: 507px; height: 320px; */ color: black; -webkit-animation-name: effect-verao-tim; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 8s ; -webkit-animation-direction: normal; background-size: cover; /* background-size: 100% 100%; */ background-repeat: no-repeat, repeat; /* background-attachment: fixed; */ z-index: 1; } @-webkit-keyframes effect-verao-tim { 0% { background-image: url('images/veraotim-gif/VERAO1.png'); } 19% { background-image: url('images/veraotim-gif/VERAO1.png'); } 20% { background-image: url('images/veraotim-gif/verao2.png'); } 39% { background-image: url('images/veraotim-gif/verao2.png'); } 40% { background-image: url('images/veraotim-gif/verao3.png'); } 59% { background-image: url('images/veraotim-gif/verao3.png'); } 60% { background-image: url('images/veraotim-gif/verao4.png'); } 79% { background-image: url('images/veraotim-gif/verao4.png'); } 80% { background-image: url('images/veraotim-gif/verao5.png'); } 99% { background-image: url('images/veraotim-gif/verao5.png'); } 100% { background-image: url('images/veraotim-gif/VERAO1.png'); } } /* //////////rio 2c//////////////// */ .rio-2c-container{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; align-content: flex-start; margin-right: 80px; margin-bottom: 50px; margin-left: -160px; } .titulo-rio-2c{ z-index: 1; text-align: left; margin-top: -10px; /* margin-right: 20px; */ margin-left: 20px; display: flex; flex-direction: column; } .titulo-right-rio2c{ display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; align-content: flex-end; z-index: 1; text-align: right; margin-top: 100px; margin-bottom: 50px; margin-right: -20px; } .titulo-rio-2c-en{ z-index: 1; text-align: left; margin-top: -10px; /* margin-right: 20px; */ margin-left: 20px; display: flex; flex-direction: column; } .logo-rio-2c{ width: 200px; margin-left: 10px; margin-top: 20px; } .logo-rio-2c-2{ width: 200px; margin-top: 20px; margin-right: 10px; } .gif-rio-2c{ width: 507px; height: 320px; color: black; margin-left: -30px; -webkit-animation-name: effect-rio-2c; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 8s ; -webkit-animation-direction: normal; background-size: cover; /* background-size: 100% 100%; */ background-repeat: no-repeat, repeat; /* background-attachment: fixed; */ z-index: 1; } @-webkit-keyframes effect-rio-2c { 0% { background-image: url('images/rio2c-gif/2c1.png'); } 19% { background-image: url('images/rio2c-gif/2c1.png'); } 20% { background-image: url('images/rio2c-gif/2c2.png'); } 39% { background-image: url('images/rio2c-gif/2c2.png'); } 40% { background-image: url('images/rio2c-gif/2c3.png'); } 59% { background-image: url('images/rio2c-gif/2c3.png'); } 60% { background-image: url('images/rio2c-gif/2c4.png'); } 79% { background-image: url('images/rio2c-gif/2c4.png'); } 80% { background-image: url('images/rio2c-gif/2c5.png'); } 99% { background-image: url('images/rio2c-gif/2c5.png'); } 100% { background-image: url('images/rio2c-gif/2c1.png'); } } /* /////////////////////maratona/////////////// */ .maratona-rio-main-container{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; align-content: flex-start; margin-left: -145px; margin-bottom: 200px; } .titulo-maratona-rio{ z-index: 1; text-align: right; margin-right: -10px; margin-top: -10px; display: flex; flex-direction: column; } .dreamfact-logo{ width: 250px; margin-left: 230px; } .dreamfact-logo-main{ width: 250px; margin-left: 80px; } .dreamfact-logo-main-en{ width: 250px; margin-left: 100px; } /* ////////// GIF MARATONA */ .gif-maratona{ width: 400px; height: 550px; color: black; margin-right: -20px; -webkit-animation-name: effect-maratona; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 8s ; -webkit-animation-direction: normal; background-size: cover; /* background-size: 100% 100%; */ background-repeat: no-repeat, repeat; /* background-attachment: fixed; */ z-index: 1; } @-webkit-keyframes effect-maratona { 0% { background-image: url('images/maratona-gif/MARATONA.png'); } 24% { background-image: url('images/maratona-gif/MARATONA.png'); } 25% { background-image: url('images/maratona-gif/MARATONA1.png'); } 49% { background-image: url('images/maratona-gif/MARATONA1.png'); } 50% { background-image: url('images/maratona-gif/MARATONA2.png'); } 74% { background-image: url('images/maratona-gif/MARATONA2.png'); } 75% { background-image: url('images/maratona-gif/MARATONA3.png'); } 99% { background-image: url('images/maratona-gif/MARATONA3.png'); } 100% { background-image: url('images/maratona-gif/MARATONA.png'); } } /* /////////////premio ucb///////////// */ .titulo-premio-ubc{ z-index: 1; text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .title-premio-ubc{ z-index: 1; display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; } .ubc-logo-en{ width: 250px; margin-right: 160px; margin-left: 20px; } .premio-ubc-container{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; align-content: flex-start; margin-right: 80px; margin-bottom: 200px; } .ubc-logo{ width: 200px; margin-top: 10px; margin-right: 190px; } .ubc-logo-2{ width: 200px; margin-top: 10px; margin-right: 80px; } .gif-premio-ucb{ width: 507px; height: 320px; color: black; -webkit-animation-name: effect-premio-ucb; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 8s ; -webkit-animation-direction: normal; background-size: cover; /* background-size: 100% 100%; */ background-repeat: no-repeat, repeat; /* background-attachment: fixed; */ z-index: 1; } @-webkit-keyframes effect-premio-ucb { 0% { background-image: url('images/ubc-gif/ubc1.png'); } 24% { background-image: url('images/ubc-gif/ubc1.png'); } 25% { background-image: url('images/ubc-gif/ubc2.png'); } 49% { background-image: url('images/ubc-gif/ubc2.png'); } 50% { background-image: url('images/ubc-gif/ubc3.png'); } 74% { background-image: url('images/ubc-gif/ubc3.png'); } 75% { background-image: url('images/ubc-gif/ubc4.png'); } 99% { background-image: url('images/ubc-gif/ubc4.png'); } 100% { background-image: url('images/ubc-gif/ubc1.png'); } } /* RIGHT gil ////////////////////////////GILBERTO */ .right-Div{ display: flex; flex-direction: column; flex-wrap: wrap; z-index: 2; margin: auto; margin-bottom: 150px; } .right-Div-gil{ display: flex; flex-direction: column; flex-wrap: wrap; z-index: 2; margin: auto; margin-bottom: 150px; overflow-x:auto; } .titulo-right{ margin-top: 50px; margin-right: -60px; margin-bottom: 100px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-end; align-content: flex-end; z-index: 1; text-align: right; } .right-text{ font-size: 21px; width: 400px; margin: auto; } .right-text-gil{ /* font-size: 21px; margin-left: 33px; */ font-size: 21px; width: 400px; margin-top: -100px; margin: auto; } .right-Img{ width: 400px; height: 500px; } .right-container{ display: flex; flex-direction: row; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; margin-bottom: 100px; } .right-container-gil{ display: flex; flex-direction: row; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; margin-bottom: 100px; } .right-ficha{ margin-top: 200px; width: 400px; margin-left: 50px; margin-bottom: 200px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-end; align-content: flex-end; } .youtube-video{ margin: auto; margin-bottom: 20px; } .slick-show{ width: 100%; margin: auto; margin-top: 50px; margin-bottom: 50px; } .slick-prev:before { color: #7b7b7b !important; background-color: transparent; } .slick-next:before { color: #7b7b7b!important; background-color:transparent; } .slick-video-vertical{ width: 39vh; height: 70vh; margin: 0; } .slick-video-horizontal{ height: 70vh; margin: 0; } .slideshow-img{ height: 70vh; } .slideshow-img-horizontal{ width: 100%; height: 70vh; } .video-tim{ width: 100%; height: 80vh; } video:focus { outline: none; } .video-erasmo{ width: 100%; height: 50vh; } .video-gil{ width: 51vh; height: 90vh; } /* ///////////////////LEFT */ .left-Div{ display: flex; flex-direction: column; flex-wrap: wrap; z-index: 2; margin: auto; margin-bottom: 150px; } .titulo-left{ margin-top: 40px; margin-left: -30px; margin-bottom: 100px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; align-content: flex-start; z-index: 1; text-align: left; right: 10%; left: 10%; } .titulo-left-maratona{ margin-top: 40px; margin-left: -30px; margin-bottom: 100px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; align-content: flex-start; z-index: 1; text-align: left; right: 10%; left: 10%; } .titulo-left-maratona.en{ margin-top: 40px; margin-left: -50px; margin-bottom: 100px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; align-content: flex-start; z-index: 1; text-align: left; right: 10%; left: 10%; } .titulo-left-milton{ margin-top: 40px; margin-left: -30px; margin-bottom: 100px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; align-content: flex-start; z-index: 1; text-align: left; right: 10%; left: 10%; } .left-container{ display: flex; flex-direction: row; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; margin-left: 50px; margin-bottom: 100px; } .left-text{ font-size: 21px; width: 400px; margin-top: -200px; margin: auto; } .left-Img{ width: 400px; height: 500px; margin-right: auto; margin-left: -20px; } .left-ficha{ margin-top: 200px; width: 400px; margin-left: 0px; margin-bottom: 200px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-end; align-content: flex-end; } /* /////////////////HORIZONTAL */ .rio-2c-Img{ width: 100%; height: 70vh; } .horizontal-Img{ width: 100%; height: 100%; } .horizontal-container{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; margin-bottom: 100px; } .horizontal-text{ font-size: 21px; width: 400px; margin-left: 100px; margin-top: 100px } /* /////////////A PALESTRA DO ZE */ .palestra-do-ze-Div{ display: flex; flex-direction: column; flex-wrap: wrap; z-index: 2; margin: auto; } .palestra-do-ze-Div h4{ font-family: 'Raleway'; line-height: 33px; font-size: 25px; font-weight: 400 !important; font-style: italic !important; letter-spacing: 1px !important; text-align: justify; text-align-last: left; line-height: 1.6; } .titulo-palestra-do-ze{ margin-top: 30px; margin-right: -60px; margin-bottom: 100px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-end; align-content: flex-end; z-index: 1; text-align: right; } .palestra-do-ze-text{ font-size: 21px; width: 400px; margin-left: auto; } .palestra-do-ze-quote{ font-size: 21px; width: 400px; } .palestra-do-ze-container-1{ display: flex; flex-direction: row; display: flex; flex-wrap: nowrap; justify-content: flex-end; align-content: flex-end; margin-bottom: 50px; } .palestra-do-ze-video{ width: 100%; height: 80vh; transition-duration: 1s; border: none; } .palestra-do-ze-container-2{ display: flex; flex-direction: row; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-end; margin-bottom: 50px; } .ze-contato-container{ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; margin-top: 50px; margin-bottom: 200px; } .ze-contato-container b{ font-weight: 600; } .hr-palestra{ width: 270px; margin-right: 20px; } /* //////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ///////////////////////// //////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ///////////////////////// //////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ///////////////////////// //////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /////////////////////////*/ /* ////////// MEDIA QUERiESSSSSS///////// */ /* //////MAIN QUEEERIESSS///////// */ @media (max-width: 400px) { #main-mobile{ overflow-x: auto } } @media (max-width: 767px) { #main{ margin-left: 0px; margin-right: 0px; } #main-mobile { margin-left: 0px; margin-right: 0px; } .addBackgroundMenu { transition: margin .5s; width: 100%; background: red; } .menu-verde{ width: 400px; height: 100vh; background-image: url('images/backgroundcor/levecor.png'); background-size: cover; } .menu-roxo{ width: 400px; height: 100vh; background-image: url('images/backgroundcor/roxo.png'); background-size: cover; } .menu-branco{ width: 400px; height: 100vh; background-image: url('images/backgroundcor/branco.png'); background-size: cover; } .menu-conheca-o-ze{ width: 100px; height: 800px; background-image: url('images/cinza_fundo.png'); background-size: cover; } .menu-se-conecte{ width: 100px; height: 800px; background-image: url('images/backgroundcor/azul.png'); background-size: cover; z-index: 1000; } .mobile-menu-o-que-a-leve{ margin-top: -20px; color: white !important; font-weight: 800 !important; } .mobile-menu-o-que-a-leve-cinza{ margin-top: -20px; color: #666666 !important; font-weight: 800 !important; } #nav-Div{ position: top; } } /* SUB MENU */ @media (max-width: 767px) { .linkDisabled{ pointer-events: none } } /* /////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */ @media only screen and (min-width:320px) { .titulo { width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-content: center; z-index: -1; font-size: 60px; } } @media (max-width: 767px) { h1 { font-family: 'Raleway', sans-serif; font-weight: 200 !important; font-size: 50px; text-transform: uppercase; transform:scale(0.3,1); -webkit-transform:scale(0.8,1); display:inline-block; z-index: 1; } .hrZericardo{ width: 80%; margin-right: 20px; } } /* ///////////////////////////////////////\\\\\\\\\\\\\\\\\ /////INDEX - ESSA E A LEVE - MEDIA QUREIES//////// ///////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */ /* ///querie for horizontal phone */ @media (max-width: 900px) { .pop-up-image{ width: 500px; } } @media (max-width: 767px) { #menuToggle input:checked ~ ul { width: 400px; transform: none; padding-left: 60px; padding-right: 60px; padding-top: 125px; padding-bottom: 100px; /* display: none; */ } #menuToggle{ position: fixed } .activate-menu{ display: none; } #display-mobile{ display: block; } #hideMobile{ display: none; height: 100%; margin-top: 10px; margin-bottom: 10px; } .languages{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; align-content: flex-start; margin-top: -45px; margin-left: 130px; color: #666666 !important; } .languages a { font-weight: 300; text-decoration: none; font-size: 11px; color: #666666; font-weight: 600 !important; } #intro-leve{ background-color: rgb( 252,252, 252); /* background-color: white; */ z-index: 1000; position: absolute; transition: opacity 1s ease; width: 100%; height: 100%; } #open-logo{ margin: 100px auto; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; z-index: 1000; } .arrow-image{ width: 0px; display:none; } #sound-icon{ width: 40px; } #sound{ /* display:none; */ position: fixed; margin-left: 87%; margin-top: 40px; z-index: 100 ; } #play-img{ display:none; position: absolute; margin-left: 45vw; margin-top: 12vh; z-index: 100; } #play-icon{ width: 15%; } #index-open-Video{ position:relative; left: 0; top: 0; background-color: black !important; width: 100%; height: 100%; } #index-open-Video-EN{ position:relative; left: 0; top: 0; background-color: black !important; width: 100%; height: 100%; } .essa-e-a-leve-Div{ display: flex; flex-direction: column; flex-wrap: wrap; z-index: 2; margin: 0; } #topo{ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; align-content: stretch; margin-left: 0px; margin-top: 50px; margin-bottom: 50px; } #topo h4{ font-size: 20px; } .logo_branco{ width: 100px; } .essa-e-a-leve-container{ margin-right: 0px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; align-content: center; z-index: 1; text-align: right; } .essa-e-a-leve-container h2{ font-size: 30px !important; font-style: italic !important; font-weight: 600 !important; } .essa-e-a-leve-container a { color : #0efce9; text-decoration: none; } .essa-e-a-leve-container h6{ font-size: 18px; font-weight: 400 !important; text-align: justify; text-align-last: left; line-height: 40px; } .essa-e-a-leve-container h3{ font-size: 20px !important; font-style: italic !important; font-weight: 600 !important; line-height: 50px !important; text-align: center; text-align: justify; margin-left: auto; } .essa-eh-a-leve-quote h3{ text-align: center !important; font-size: 20px !important; line-height: 50px !important; font-style: italic !important; } .essa-eh-a-leve-text.fim { margin-bottom: 150px; } .titulo-essa{ padding-top: 20px; margin-left: -120px; margin-top: 0px; margin-bottom: 50px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; align-content: center; z-index: 1; text-align: left; } .titulo-right-inspiracao{ margin-bottom: 100px; margin-top: -50px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; align-content: flex-end; z-index: 1; text-align: right; } .titulo-left-essa{ margin-bottom: 100px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; align-content: flex-start; z-index: 1; text-align: left; right: 10%; left: 10%; } .essa-eh-a-leve-text{ font-size: 21px; width: 300px; margin: 0px; } .essa-eh-a-leve-quote{ margin-top: 100px; margin-bottom: 100px; margin-left: 20%; margin-right: 20%; width: 100%; } .essa-eh-a-leve-quote.pergunta{ margin-left: 20%; margin-right: 20%; width: 100%; } .essa-eh-a-leve-quote.pergunta2{ margin-left: 25%; margin-right: 20%; width: 100%; } .essa-eh-a-leve-quote.frase{ margin-left: 30%; width: 100%; } .essa-eh-a-leve-quote.pergunta:nth-of-type(2){ margin-left: 20%; } .pop-up-image{ width: 250px; } /* end media queries index */ #button{ font-size: 18px; } #body-index{ background-size: cover; background-repeat: no-repeat, repeat; background-attachment: fixed; } #body-essa-eh-a-leve{ background-size: cover; background-repeat: no-repeat, repeat; background-attachment: fixed; } } /* ///////////////////////////////////////\\\\\\\\\\\\\\\\\ /////CONHECA O ZE RICARDO - MEDIA QUREIES//////// ///////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */ @media (max-width: 767px) { #conhecaVideo { display: none; } #body-conheca-o-ze { height: 100vh; background-image: url('images/FOTOTRATADA.jpg'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } .titulo-conheca-o-ze{ margin-top: 50px; margin-right: -100px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-end; align-content: flex-end; z-index: 1; text-align: right; right: 10%; left: 10%; } .ze-ricardo{ display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; align-content: center; z-index: 2; margin: 10px; } .ze-ricardo-text { width: 300px; text-align: center; flex-direction: column; justify-content: center; right: 10%; left: 10%; margin-bottom: 200px; } } /* /////////////////////////////////////// ////////// SE CONECTE MEDIA QUREIES//////// ///////////////////\\\\\\\\\\\\\\\\\\\\\\\\ */ @media (max-width: 767px) { .se-conecte-Div{ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; } .titulo-se-conecte{ display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; z-index: 1; margin-top: 100px; text-align: right; margin-left: 10px; } .se-conecte-container{ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: center; margin-top: 50px; margin-bottom: 100px; margin-left: 20px; } } /* /////////////////////////////////////// //////////PALESTRA DO ZE MEDIA QUERIES//////// ///////////////////\\\\\\\\\\\\\\\\\\\\\\\\ */ @media (max-width: 767px) { .palestra-do-ze-Div{ display: flex; flex-direction: column; flex-wrap: wrap; z-index: 2; margin: auto; } .titulo-palestra-do-ze{ margin-top: 100px; margin-right: 0px; margin-bottom: 100px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: center; align-content: flex-end; z-index: 1; text-align: right; } .palestra-do-ze-video{ width: 100%; height: 100%; transition-duration: 1s; border: none; } .palestra-do-ze-text{ font-size: 21px; width: 300px; margin: auto; } .palestra-do-ze-quote{ font-size: 18px; width: 300px; margin-bottom: 50px; } .palestra-do-ze-Div h4{ font-family: 'Raleway'; line-height: 33px; font-size: 20px; font-weight: 400 !important; font-style: italic !important; letter-spacing: 1px !important; text-align: justify; text-align-last: center; line-height: 1.6; } .palestra-do-ze-container-2{ display: flex; flex-direction: row; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; margin-bottom: 50px; } .ze-contato-container{ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; margin-top: 50px; margin: auto; margin-bottom: 200px; } } /* ///////////////////////////////////////\\\\\\\\\\\\\\\\\ /////O QUE A LEVE JA FEZ - MEDIA QUREIES//////// ///////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */ @media (max-width: 767px) { #main{ overflow-x:auto; } #main-o-que-a-leve-ja-fez h1{ font-size: 50px !important; } #main-o-que-a-leve-ja-fez a{ text-decoration: none; color: black !important; } .titulo-master-card{ z-index: 1; text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .titulo-master-card.en{ z-index: 1; text-align: right; display: flex; flex-direction: column; align-items: flex-end; margin-top: 50px; } .logo-mastercard{ width: 100px; margin-right: 50px; } .master-card-container{ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; margin-left: 0; margin-right: 0; margin-top: 50px; margin-bottom: 50px; } .gif-mastercard{ max-width: 300px; background-size: stretch; background-position: center; margin-bottom: 50px; } /* //////ford */ .titulo-right-ford{ margin-top: 100px; margin-right: 0px; margin-bottom: 100px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; align-content: center; z-index: 1; text-align: right; } .live-ford-container{ display: flex; flex-direction: column-reverse; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; margin-right: 0px; margin-left: 0px; margin-top:0px; margin-bottom: 50px; } .titulo-live-ford{ z-index: 1; text-align: right; display: flex; flex-direction: column; align-items: flex-end; margin-left: 20px; } .logo-ford{ width: 130px; margin-right: 20px; margin-top: -20px; } .logo-ford-2{ width: 130px; margin-right: 50px; } .gif-ford{ width: 300px; background-position: center; margin-left: 0px; margin-bottom: 50px; } /* //////verao tim */ .verao-tim-container{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; margin-top:0px; margin-bottom: 50px; margin-left: 0px; } .verao-tim-container.en{ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; margin-bottom: 200px; margin-left: 0px; } .titulo-verao-tim{ z-index: 1; text-align: right; display: flex; flex-direction: column; margin-right: -50px; margin-bottom: 30px; align-items: flex-end; } .titulo-verao-tim.en{ z-index: 1; text-align: right; display: flex; flex-direction: column; margin-right: -50px; } .logo-tim-2{ width: 200px; margin-left: 0px; margin-right: 20px; margin-top: 20px; } .logo-tim-4{ width: 200px; margin-top: 20px; margin-right: 20px; } .logo-tim-en{ width: 300px; margin-top: 20px; margin-left: 100px; } .logo-tim-2.en{ width: 300px; margin-top: 20px; margin-left: 0px; } .gif-verao-tim{ width: 300px; background-position: center; margin-bottom: 50px; } /* /////rio 2c */ .rio-2c-container{ display: flex; flex-direction: column-reverse; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; margin-right: 0px; margin-bottom:0px; margin-left: 0px; } .titulo-rio-2c{ z-index: 1; text-align: left; margin-top: 0px; margin-left: 70px; display: flex; flex-direction: column; align-items: flex-end; } .titulo-rio-2c-en{ z-index: 1; text-align: left; margin-top: -100px; margin-left: 70px; display: flex; flex-direction: column; align-items: flex-end; } .titulo-right-rio2c{ display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-content: flex-end; z-index: 1; text-align: right; margin-top: 100px; margin-bottom: 50px; margin-right: 20px; } .logo-rio-2c{ width: 200px; margin-left: 10px; margin-top: 10px; margin-bottom: 20px; } .logo-rio-2c-2{ width: 200px; margin-top: 20px; margin-right: 10px; } .gif-rio-2c{ width: 300px; background-position: center; margin-left: 0px; } /* ///////crito queries */ .titulo-cristo{ z-index: 1; text-align: right; display: flex; flex-direction: column; margin-right: -30px; } .cristo-container{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; margin-bottom: 0px; margin-left: 0px; } .estacio-logo{ width: 200px; margin-left: 60px; margin-top: 10px; } .estacio-logo-en{ width: 200px; margin-left: 80px; margin-top: 15px; } .gif-cristo{ margin-top:50px; width: 300px; height: 400px; background-position: center; background-size: 300px 400px; } /* convencao da tim queries */ .titulo-convencao-da-tim{ z-index: 1; text-align: right; display: flex; flex-direction: column; align-items: flex-end; /* margin-right: 20px; */ } .convencao-da-tim-container{ display: flex; flex-direction: column-reverse; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; margin-right: 0px; margin-bottom: 50px; margin-top:0px; } .logo-tim{ width: 200px; margin-right: 20px; margin-top: 20px; margin-bottom: 30px; } .logo-tim-en-2{ width: 200px; margin-right: 20px; margin-top: 20px; margin-bottom: 20px; } .gif-convencao-tim{ width: 300px; background-position: center; } /* /// maratona queries */ .maratona-rio-main-container{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; margin-left: 0px; margin-bottom: 200px; } .titulo-maratona-rio{ z-index: 1; text-align: right; margin-right: -10px; margin-top: -40px; display: flex; flex-direction: column; } .dreamfact-logo{ width: 150px; margin-left: 140px; margin-bottom: 20px; } .dreamfact-logo-main{ width: 200px; margin-right: 30px; } .dreamfact-logo-main-en{ width: 200px; margin-right: 30px; } /* ////////// GIF MARATONA */ .gif-maratona{ width: 300px; background-position: center; } /* ////premio ubc queries */ .titulo-premio-ubc{ z-index: 1; text-align: right; display: flex; flex-direction: column; align-items: flex-end; margin-top: -50px; margin-left: 20px; margin-bottom: 20px; } .title-premio-ubc{ z-index: 1; display: flex; flex-direction: column; align-items: flex-end; flex-wrap: wrap; margin-right: -50px; margin-top: -50px; } .title-premio-ubc img{ margin-right: 30px; } .premio-ubc-container{ display: flex; flex-direction: column-reverse; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; margin-right: 0px; margin-bottom: 200px; } .ubc-logo{ width: 150px; margin-top: 10px; margin-right: 20px; } .ubc-logo-en{ width: 150px; margin-top: 10px; margin-left: 100px; } .ubc-logo-2{ width: 200px; margin-top: 10px; margin-right: 20px; } .gif-premio-ucb{ width: 300px; } iframe{ width: 300px; height: 100%; } } /* ///////////////////////////////////////\\\\\\\\\\\\\\\\\ /////LIVES MASTERCARD - MEDIA QUREIES//////// ///////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */ @media (max-width: 767px){ /* RIGHT\\\\\\\\\\\\\\\\ */ .right-container-gil{ display: flex; flex-direction: column-reverse; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; margin-bottom: 100px; margin-top: -50px; margin-left: 5%; } .right-Div-gil{ display: flex; flex-direction: column; flex-wrap: wrap; z-index: 2; margin: 0; margin-bottom: 150px; } .titulo-right{ display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; align-content: center; z-index: 1; text-align: right; margin-top: 100px; margin-left:0; margin-right: -70px; margin-bottom: 50px; } .titulo-right.mobile{ margin-top: 0px !important; } .right-text{ font-size: 21px; width: 300px; margin: auto; } .right-text-gil{ font-size: 21px; width: 300px; margin-left: 33px; } .mastercard-gil{ width: 80px; margin-right: 30px; } .mastercard-milton{ width: 80px; margin-right: 30px; } .video-gil{ width: 80%; height: 80%; margin: 10% 10%; align-self: center; } .slick-show{ width: 85%; margin: auto; margin-top: 20px; margin-bottom: 20px; z-index: 10; } .slideshow-img{ height: 35vh; } .slideshow-img-horizontal{ width: 100%; height: 35vh; } .slick-video-vertical{ width: 20vh; height: 35vh; margin: 0; } .slick-video-horizontal{ height: 35vh; margin: 0; } /* LEFT////////////// */ .left-Div{ display: flex; flex-direction: column; flex-wrap: wrap; z-index: 2; margin: 0; margin-bottom: 150px; } .titulo-left{ margin-top: 100px; margin-bottom: 100px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-end; align-content: flex-end; z-index: 1; text-align: right; } .titulo-left-maratona{ margin-top: 100px; margin-bottom: -50px; margin-right: 0px; margin-left: 30px; size: 280px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; align-content: flex-end; z-index: 1; text-align: right; } .titulo-left-maratona.en{ margin-top: 100px; margin-bottom: -50px; display: flex; size: 280px; margin-left: 0px; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-end; align-content: flex-end; z-index: 1; text-align: right; } .titulo-left-milton{ margin-top: 0px; margin-bottom: 0px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-end; align-content: flex-end; z-index: 1; text-align: right; } .left-container{ display: flex; flex-direction: row; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; margin: 0; margin-bottom: 100px; } .left-text{ font-size: 21px; width: 300px; margin-top: -100px; margin: auto; } .left-Img{ width: 300px; height: 100%; margin: auto; margin-bottom: 50px; } .cristo-logos{ margin-right: 30px; margin-top: 30px; width: 200px; margin-bottom: -50px; } /* Queries HORIZONTAL////////////// */ .horizontal-Img{ margin-left: 20px; margin-right: 0; margin-bottom: 50px; width: 90%; height: 90%; } .horizontal-container{ display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-content: center; margin-bottom: 100px; margin: 0; } .horizontal-text{ font-size: 21px; width: 300px; margin-top: 100px; margin:auto; } .rio-2c-Img{ margin-left: 20px; margin-right: 0; margin-bottom: 50px; width: 90%; height: 90%; } #seta-index{ display: none!important; } /* ////verao Tim queries */ .video-tim{ width: 90%; height: 100%; margin-left:20px; margin-bottom: 40px; } .logo-tim-3{ width: 200px; margin-top: 20px; margin-right: 20px; } }