.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: #6ac0d8 ; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 2px; } .pace .pace-activity { display: block; position: fixed; z-index: 2000; top: 1em; right: 2em; width: 20px; height: 20px; border: solid 2px transparent; border-top-color: #6ac0d8 ; border-left-color: #6ac0d8 ; border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; -ms-animation: pace-spinner 400ms linear infinite; -o-animation: pace-spinner 400ms linear infinite; animation: pace-spinner 400ms linear infinite; } @font-face { font-family: 'Brown Sugar'; src: url('BrownSugarRegular.woff2') format('woff2'), url('BrownSugarRegular.woff') format('woff'), url('BrownSugarRegular.ttf') format('truetype'), url('BrownSugarRegular.svg#BrownSugarRegular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap'); .courier-prime-regular { font-family: "Courier Prime", monospace; font-weight: 400; font-style: normal; } .section{opacity: 0; -webkit-transition: all 0.6s cubic-bezier(.19, 1, .22, 1) ; -moz-transition: all 0.6s cubic-bezier(.19, 1, .22, 1) ; transition: all 0.6s cubic-bezier(.19, 1, .22, 1) ;} .pace-done .section{opacity: 1} .pace-done .load{opacity: 0;visibility: hidden;z-index: -1} .load1, .load2,.load3,.load4{position: absolute; opacity: 1; width: 400px; text-align: center; top:48%; left:50%; margin-left: -200px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);} @media only screen and (max-width: 600px) { .load1, .load2,.load3,.load4{width: 200px; margin-left: -100px; } } .inside{ -webkit-animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);} @-webkit-keyframes lighthouse { 0% { -webkit-transform: translateY(5%,0%,0) rotateZ(7deg); -moz-transform: translate3d(5%,0%,0) rotateZ(7deg); transform: translate3d(5%,0%,0) rotateZ(7deg); } 100% { -webkit-transform: translate3d(-5%,0%,0) rotateZ(-8deg); -moz-transform: translate3d(-5%,0%,0) rotateZ(-8deg); transform: translate3d(-5%,0%,0) rotateZ(-8deg); } } @-moz-keyframes lighthouse { 0% { -webkit-transform: translate3d(5%,0%,0) rotateZ(7deg); -moz-transform: translate3d(5%,0%,0) rotateZ(7deg); transform: translate3d(5%,0%,0) rotateZ(7deg); } 100% { -webkit-transform: translate3d(-5%,0%,0) rotateZ(-8deg); -moz-transform: translate3d(-5%,0%,0) rotateZ(-8deg); transform: translate3d(-5%,0%,0) rotateZ(-8deg); } } @-ms-keyframes lighthouse { 0% { -webkit-transform: translate3d(5%,0%,0) rotateZ(7deg); -moz-transform: translate3d(5%,0%,0) rotateZ(7deg); transform: translate3d(5%,0%,0) rotateZ(7deg); } 100% { -webkit-transform: translate3d(-5%,0%,0) rotateZ(-8deg); -moz-transform: translate3d(-5%,0%,0) rotateZ(-8deg); transform: translate3d(-5%,0%,0) rotateZ(-8deg); } } @keyframes lighthouse { 0% { -webkit-transform: translate3d(5%,0%,0) rotateZ(7deg); -moz-transform: translate3d(5%,0%,0) rotateZ(7deg); transform: translate3d(5%,0%,0) rotateZ(7deg); } 100% { -webkit-transform: translate3d(-5%,0%,0) rotateZ(-8deg); -moz-transform: translate3d(-5%,0%,0) rotateZ(-8deg); transform: translate3d(-5%,0%,0) rotateZ(-8deg); } } .load1{z-index: 1}.load2{z-index: 2}.load3{z-index: 3}.load4{z-index: 4} .svgs{display:none; visibility:hidden;opacity:0;} .social { position:fixed; z-index:999; bottom:2em; right:2em; } .social li { display:inline-block; margin:0 0 0em 1em; -webkit-transition: all 0.6s cubic-bezier(.19, 1, .22, 1) ; -moz-transition: all 0.6s cubic-bezier(.19, 1, .22, 1) ; transition: all 0.6s cubic-bezier(.19, 1, .22, 1) ; color: #ffffff; } .social li a { color: #ffffff; font-size: 2.5em; } .icon i {fill:#fff;;text-align:center; -webkit-transition: all 0.6s cubic-bezier(.19, 1, .22, 1) ; -moz-transition: all 0.6s cubic-bezier(.19, 1, .22, 1); transition: all 0.6s cubic-bezier(.19, 1, .22, 1) ;height:22px; color: #ffffff; } .icon:hover{fill:#ccc} /* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { box-sizing: border-box; } html { font-size: 62.5%;height:100%; } body {height:100%;-webkit-backface-visibility:hidden; font-size: 1.6rem; font-family: 'Courier Prime'; background-color: #fff; } a { text-decoration: none; } img{width:100%} main{opacity:0;-webkit-transition: -webkit-transform 0.6s; -moz-transition: -moz-transform 0.6s; transition: transform 0.6s;} .pace-done main{opacity:1} /* -------------------------------- Main Components -------------------------------- */ .cd-header { height: 80px; width: 100%; margin: 0;position:fixed;z-index:99; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-header::after { clear: both; content: ""; display: table; } .cd-header.nav-is-visible { -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } @media only screen and (min-width: 768px) { .cd-header.nav-is-visible { -webkit-transform: translateY(170px); -moz-transform: translateY(170px); -ms-transform: translateY(170px); -o-transform: translateY(170px); transform: translateY(170px); } } .cd-3d-nav-trigger { position: fixed; cursor:pointer; right:2em; height: 45px; width: 45px; top: 1em; /* replace text with background image */ overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; } .cd-3d-nav-trigger span, .cd-3d-nav-trigger span::before, .cd-3d-nav-trigger span::after { /* hamburger icon in CSS */ position: absolute; width: 33px; height: 3px; background-color: #ffffff; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-3d-nav-trigger span { /* this is the central line */ top: 21px; left: 8px; -webkit-transition: background 0.2s 0.5s; -moz-transition: background 0.2s 0.5s; transition: background 0.2s 0.5s; } .cd-3d-nav-trigger span::before, .cd-3d-nav-trigger span:after { /* these are the upper and lower lines */ content: ''; left: 0; -webkit-transition: -webkit-transform 0.2s 0.5s; -moz-transition: -moz-transform 0.2s 0.5s; transition: transform 0.2s 0.5s; } .cd-3d-nav-trigger span::before { bottom: 8px; } .cd-3d-nav-trigger span::after { top: 8px; } .nav-is-visible .cd-3d-nav-trigger span { /* hide line in the center */ background-color: rgba(255, 255, 255, 0); } .nav-is-visible .cd-3d-nav-trigger span::before, .nav-is-visible .cd-3d-nav-trigger span::after { /* keep visible other 2 lines */ background-color: white; } .nav-is-visible .cd-3d-nav-trigger span::before { -webkit-transform: translateY(8px) rotate(-45deg); -moz-transform: translateY(8px) rotate(-45deg); -ms-transform: translateY(8px) rotate(-45deg); -o-transform: translateY(8px) rotate(-45deg); transform: translateY(8px) rotate(-45deg); } .nav-is-visible .cd-3d-nav-trigger span::after { -webkit-transform: translateY(-8px) rotate(45deg); -moz-transform: translateY(-8px) rotate(45deg); -ms-transform: translateY(-8px) rotate(45deg); -o-transform: translateY(-8px) rotate(45deg); transform: translateY(-8px) rotate(45deg); } .cd-3d-nav-container { /* this is the 3D navigation container */ position: fixed; top: 0; left: 0; height: 80px; width: 100%; background-color:#306382; visibility: hidden; /* enable a 3D-space for children elements */ -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s; -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s; transition: transform 0.5s 0s, visibility 0s 0.5s; } .cd-3d-nav-container.nav-is-visible { visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.5s 0s, visibility 0.5s 0s; -moz-transition: -moz-transform 0.5s 0s, visibility 0.5s 0s; transition: transform 0.5s 0s, visibility 0.5s 0s; } @media only screen and (min-width: 768px) { .cd-3d-nav-container { height: 170px; } } .cd-3d-nav { /* this is the 3D rotating navigation */ position: relative; height: 100%; background-color: #306382; /* Force Hardware Acceleration */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s;border-bottom: 3px solid #fff; } .cd-3d-nav::after { /* menu dark cover layer - to enhance perspective effect */ content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #306382; opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s 0s, visibility 0.5s 0s; -moz-transition: opacity 0.5s 0s, visibility 0.5s 0s; transition: opacity 0.5s 0s, visibility 0.5s 0s; } .cd-3d-nav li { height: 100%; width: 20%; font-family: 'Brown Sugar'; letter-spacing: 0.1em; font-stretch: semi-expanded; float: left; z-index:9999; } .cd-3d-nav li:first-of-type { background: url(../img/logo-branca.png) center; background-size:60% auto;-webkit-background-size:60% auto;background-repeat: no-repeat; } .cd-3d-nav li:nth-of-type(2) { background: url(../img/Belli-Belli-Gastrobar-Porto-da-Barra-logo.png) center; background-color: #f39446; background-size:contain;-webkit-background-size:contain;background-repeat: no-repeat; } .cd-3d-nav li:nth-of-type(3) { background: url(../img/Belli-Belli-Gastrobar-Arete-logo.png) center; background-color: #fbc946; background-size:contain;-webkit-background-size:contain;background-repeat: no-repeat; } .cd-3d-nav li:nth-of-type(4) { background: url(../img/Belli-Belli-Gastrobar-La-Foret-logo.png) center; background-color: #38bcd9; background-size:contain;-webkit-background-size:contain;background-repeat: no-repeat; } .cd-3d-nav li:nth-of-type(5) { background: url(../img/Belli-Forneria-logo.png) center; background-color: #d44633; background-size:contain;-webkit-background-size:contain;background-repeat: no-repeat; } .cd-3d-nav a { padding: 0.5em 0; color: #ffffff; font-size: 0.5em; text-align: center; position: relative; display: block; height: 100%; color: transparent; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .no-touch .cd-3d-nav a:hover { } .cd-3d-nav .cd-selected a { } .no-touch .cd-3d-nav .cd-selected a:hover { } .cd-3d-nav .cd-selected a::before { background-position: 0 -32px; } .nav-is-visible .cd-3d-nav { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .nav-is-visible .cd-3d-nav::after { /* menu cover layer - hide it when navigation is visible */ opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s 0s, visibility 0s 0.5s; -moz-transition: opacity 0.5s 0s, visibility 0s 0.5s; transition: opacity 0.5s 0s, visibility 0s 0.5s; } @media only screen and (min-width: 768px) { .cd-3d-nav a { padding: 3em 0; color: #ffffff; font-size: 2em; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* truncate text with ellipsis if too long */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cd-3d-nav a::before { top: 4.4em; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } } .cd-marker { /* line at the bottom of nav selected item */ position: absolute; bottom: 0; left: 0; height: 3px; width: 20%; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: translateZ(0) rotateX(90deg); -moz-transform: translateZ(0) rotateX(90deg); -ms-transform: translateZ(0) rotateX(90deg); -o-transform: translateZ(0) rotateX(90deg); transform: translateZ(0) rotateX(90deg); -webkit-transition: -webkit-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; -moz-transition: -moz-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; transition: transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; } .cd-marker::before { /* triangle at the bottom of nav selected item */ content: ''; position: absolute; bottom: 3px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); height: 0; width: 0; border: 10px solid transparent; border-bottom-color: inherit; } .nav-is-visible .cd-marker { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } /* these are the colors of the markers - line + arrow */ .color-1 { color: #fff; background-color: #fff; } .color-2 { color: #fff; background-color: #fff; } .color-3 { color: #fff; background-color: #fff; } .color-4 { color: #fff; background-color: #fff; } .color-5 { color: #fff; background-color: #fff; } main { -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .logo { width:380px; left:50%; margin-left:-190px; position: relative; top:20%; -moz-transform: translateY(-50%) scale(0); -webkit-transform: translateY(-50%) scale(0);; -ms-transform: translateY(-50%) scale(0);; transform: translateY(-50%) scale(0);; -webkit-transition: all .4s cubic-bezier(0.93, -0.01, 0, 1.02); -moz-transition: all .4s cubic-bezier(0.26, 0, 0.09, 0.99); -o-transition: all .4s cubic-bezier(0.26, 0, 0.09, 0.99); transition: all .4s cubic-bezier(0.26, 0, 0.09, 0.99); opacity:0; } @media (max-width:768px) { .logo { width:260px; left:50%; top:10%; margin-left:-140px; } } .pace-done .logo{opacity: 1;-moz-transform: translateY(-50%) scale(1);; -webkit-transform: translateY(-50%) scale(1);; -ms-transform: translateY(-50%) scale(1);; transform: translateY(-50%) scale(1);;} /*.pace-done .logo svg path, .pace-done .logo svg polygon { fill-opacity: 0; fill: #fff !important; stroke: #fff; stroke-width: 2; stroke-dasharray: 2250px; stroke-dashoffset: 2250px; animation-name: draw; animation-duration: 3s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-timing-function: linear; } @keyframes draw { 90% { stroke-dashoffset: 0; stroke-width: 2; fill-opacity: 0; } 100% { stroke-width: 0; fill-opacity: 1; } } */ .load-inst{position: absolute; width: 20px; left:50%; margin-left: -10px; top:22em; z-index: 0} @media (max-width:600px) {.logo{ width:220px; left:50%; margin-left:-110px; } .logo svg{width:220px;} } .title { justify-content: center; align-items: center; margin-left: auto; margin-right: auto; } .title h1 { font-family: 'Brown Sugar'; letter-spacing:3px; margin:0 0 0px; padding:0; font-size:6em; position:relative; text-align:center; font-weight:normal; color:#fff; } .title p { font-family: 'Courier Prime'; font-weight:normal; text-align:center; margin:0px auto 20px; color:#ffffff; font-size:1.2em; line-height:1.3em; width:320px; } @media (max-width:600px) { .title h1{ font-size:3.6em;} } .title ul {text-align:center; margin: 0.5em auto 1em;} .title ul li{display:inline-block; margin:0 0.5em 1em} .title ul li a{text-decoration:none; color:#fff} .basicBox{white-space:nowrap; font-family: 'Courier Prime'; width: 160px; height: 40px; color: #fff; font-size: 0.8em; line-height: 40px; text-transform: uppercase; text-align: center; position: relative; background:rgba(0,0,0,0.2); cursor: pointer;margin:0 auto 1em; -webkit-transition: all .3s cubic-bezier(0.93, -0.01, 0, 1.02); -moz-transition: all .3s cubic-bezier(0.26, 0, 0.09, 0.99); -o-transition: all .3s cubic-bezier(0.26, 0, 0.09, 0.99); transition: all .3s cubic-bezier(0.26, 0, 0.09, 0.99); border:1px solid #fff;outline: 0; overflow:hidden; cursor:pointer; } .title.revel .basicBox{ width: 220px;letter-spacing:2px; height: 60px; color: #fff; font-size: 1.1em; line-height: 60px;} .basicBox a{width:160px; height:40px;} .basicBox.fill{ background: #fff; } .basicBox a{color:#fff} .basicBox.fill a{color:#000} .basicBox:hover a{color:#000; } .basicBox.fill:hover{border:1px solid #000; letter-spacing:1px} .basicBox.long{color:#000; width: 220px;} .basicBox.long a{ width: 200px;height:40px} .basicBox span{ font-family: 'Courier Prime'; } .basicBox:hover, .title.revel .basicBox:hover{color:#000;background:rgba(0,0,0,0)} .basicBox:before { content: ""; position: absolute; background: #fff; bottom: 0; left: 0; right: 0; top: 100%; z-index: -1; -webkit-transition: top .2s cubic-bezier(0.93, -0.01, 0, 1.02); -moz-transition: top .2s cubic-bezier(0.26, 0, 0.09, 0.99); -o-transition: top .2s cubic-bezier(0.26, 0, 0.09, 0.99); transition: top .2s cubic-bezier(0.26, 0, 0.09, 0.99); } .basicBox:hover:before { top: 0; } .basicBox.long:before { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .basicBox.long:hover:before { top: inherit; } .basicBox.long:hover{background:#fff !important} .link{position:relative; text-align:center; margin:2em auto 2em; color:#000; font-size:1.6em; font-weight:normal;font-family: 'Courier Prime'; font-weight:200;letter-spacing:2px} .link a{text-decoration:none; text-align:center; color:#282828} link::after { content: ''; display: block; width: 150px; background: #f2f9fa;height:10px; margin: .2em auto 0; } .logo-small{position:absolute; width:80px; line-height:4em; left:50%; margin-left:-40px} .hash{ letter-spacing:4px; font-weight:normal; font-family: 'Courier Prime'; position:absolute; text-transform:uppercase; width:160px; text-align:center; left:50%;font-size:0.9em;margin-left:-80px;top:1em; color:#fff; } .hash a{color:#32c5f4; text-decoration:none; text-align:center} .hash:after { left: 50%; right: 50%; top: 100%; height: 2px; background-color: #32c5f4; content: ""; position: absolute; border-radius: 3px; transition: left .3s, right .3s; left: 40px; right: 40px; } .hash:hover:after { left: 40px; right: 40px; animation: bottomBounce .4s; } @keyframes bottomBounce { 0% { left: 40px; right: 40px; } 60% { left: 0; right: 0; } 100% { left: 40px; right: 40px; } } .about{ font-family: 'Courier Prime'; width:760px; left:50%; margin-left:-380px; position:absolute; top:50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,1) ; padding: 0 0 0em} .about h2{text-align: center; margin: 0.5em auto 0.6em;color: #fff; font-size: 5.4em; padding: 0} .about .mapa{text-align: center; color: #fff; font-size: 1.3em; text-transform: uppercase} .about .mapa a{text-align: center; color: #fff; text-transform: uppercase} .mapa span img{width: 16px; margin-right: 10px} .about h6{ text-align: center; margin: 1em 0em 0;color: #fff; font-size: 1.5em;line-height: 1em; padding: 0} .about p{text-align: center; line-height: 1.3em; font-size: 1.4em; color: #f2f2f2; padding: 0em 2em} .about .mail{color: #fff; text-decoration: none;text-align: center; margin: 0.5em auto 1em;position: relative; border-bottom: 1px solid #fff; padding-bottom: 0.1em;line-height: 2em;} .about ul{margin: 0 0 0; padding: 0em 0em 1em; text-align: center; } .about ul li{margin: 0; padding: 0; text-align: center; display: block; text-align: center; color: #fff; font-size: 1.1em; line-height: 1em} .about ul li span{font-weight: 900; text-transform: } .about .logo-bot{display: block; position:absolute; bottom:0;right: 0; width: 33.33333333%; background: #fff; padding: 1em 0 0} .reservar{border-bottom: 1px solid #fff; font-size: 1.1em;letter-spacing: 2px; text-align: center; padding: 1.5em 0; position: relative; text-transform: uppercase} .reservar a{color: #fff; text-decoration: none; border-bottom: none } .about .pad{padding-bottom: 2em; padding-top: 1em; } .about footer{text-align: center; padding: 2.5em 0 1em; color: #fff; font-size: 1em;} footer a{color: #fff; text-decoration: none; border-bottom: 1px solid #fff; } .trip{width: 100px; background: #fff; padding: 15px; border-radius: 50%; text-align: center; margin: 0 auto} .about a{color: #fff} .section.active#section4 > .fp-tableCell ul{opacity: 1; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none; } @media (max-width:900px) { .about{ width:86%; left:50%; margin-left:-43%; } .about h2{font-size: 3em; padding: 0} .about .logo-bot{display:none} .about .pad{padding-bottom: 0.5em} .about p{line-height: 1.4em; font-size: 1.3em;padding: 0 0.5em } .about footer{padding: 0.5em 0 1em; } } @media (max-width:600px) { .about h2{font-size: 2.3em} .about ul{display: none} .about h6{ display: none} .trip{width: 60px; margin-bottom: 0.5em; padding: 9px} .reservar{border-bottom: none;border-top: 1px solid #fff; padding: 0.5em 0; } .about{ width:76%; left:50%; margin-left:-38%; } .about p{line-height: 1.1em; font-size: 1.1em; } } /*! * fullPage 2.8.2 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo */ html.fp-enabled, .fp-enabled body { margin: 0; padding: 0; overflow:hidden; /*Avoid flicker on slides transitions for mobile phones #336 */ -webkit-tap-highlight-color: rgba(0,0,0,0); } #superContainer { height: 100%; position: relative; /* Touch detection for Windows 8 */ -ms-touch-action: none; /* IE 11 on Windows Phone 8.1*/ touch-action: none; } .fp-section { position: relative; -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */ -moz-box-sizing: border-box; /* <=28 */ box-sizing: border-box; } .fp-slide { float: left; } .fp-slide, .fp-slidesContainer { height: 100%; display: block; } .fp-slides { z-index:1; height: 100%; overflow: hidden; position: relative; -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */ transition: all 0.3s ease-out; } .fp-section.fp-table, .fp-slide.fp-table { display: table; table-layout:fixed; width: 100%; } .fp-tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; } .fp-slidesContainer { float: left; position: relative; } .fp-controlArrow { -webkit-user-select: none; /* webkit (safari, chrome) browsers */ -moz-user-select: none; /* mozilla browsers */ -khtml-user-select: none; /* webkit (konqueror) browsers */ -ms-user-select: none; /* IE10+ */ position: absolute; z-index: 4; top: 50%; cursor: pointer; width: 0; height: 0; border-style: solid; margin-top: -38px; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .fp-controlArrow.fp-prev { left: 15px; width: 0; border-width: 38.5px 34px 38.5px 0; border-color: transparent #fff transparent transparent; } .fp-controlArrow.fp-next { right: 15px; border-width: 38.5px 0 38.5px 34px; border-color: transparent transparent transparent #fff; } .fp-scrollable { overflow: hidden; position: relative; } .fp-scroller{ overflow: hidden; } .iScrollIndicator{ border: 0 !important; } .fp-notransition { -webkit-transition: none !important; transition: none !important; } #fp-nav { position: fixed; z-index: 100; margin-top: -32px; top: 50%; opacity: 1; -webkit-transform: translate3d(0,0,0); } #fp-nav.right { right: 1em; } #fp-nav ul, .fp-slidesNav ul { margin: 0; padding: 0; } #fp-nav ul li, .fp-slidesNav ul li { display: block; width: 18px; height: 18px; margin: 4px; position:relative; } .fp-slidesNav ul li { display: inline-block; } #fp-nav ul li a, .fp-slidesNav ul li a { display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; text-decoration: none; } #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{ height: 16px; width: 16px; margin: -8px 0 0 -8px; border-radius: 100%; } #fp-nav ul li a span, .fp-slidesNav ul li a span { border-radius: 50%; position: absolute; z-index: 1; height: 6px; width: 6px; border: 0; background: #fff; left: 50%; top: 50%; margin: -3px 0 0 -3px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{ width: 6px; height: 6px; margin: -3px 0px 0px -3px; } #fp-nav ul li .fp-tooltip { position: absolute; top: 1px; color: #fff; font-size: 1.1em; text-transform: uppercase; white-space: nowrap; max-width: 220px; overflow: hidden; display: block; opacity: 0; width: 0; cursor: pointer; } #fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active + .fp-tooltip { -webkit-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; width: auto; opacity: 1; } #fp-nav ul li .fp-tooltip.right { right: 20px; } #fp-nav ul li .fp-tooltip.left { left: 20px; } .fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell{ height: auto !important; } .fp-responsive .fp-auto-height-responsive.fp-section, .fp-responsive .fp-auto-height-responsive .fp-slide, .fp-responsive .fp-auto-height-responsive .fp-tableCell { height: auto !important; } #fullpage{margin:0;padding:0;} #section0{width:100%; background:url(../img/Belli-Belli-Gastrobar-home.jpg) center; background-size:cover; -webkit-background-size:cover; } #section1{width:100%; background:url(../img/Belli-Belli-Gastrobar-Porto-da-Barra-home.jpg) center; background-size:cover; -webkit-background-size:cover; } #section2{width:100%; background:url(../img/Belli-Belli-Gastrobar-Arete-home.jpg) center; background-size:cover; -webkit-background-size:cover; } #section3{width:100%; background:url(../img/Belli-Belli-Gastrobar-La-Foret-home.jpg) center; background-size:cover; -webkit-background-size:cover;} #section4{width:100%; background:url(../img/Belli-Forneria-home.jpg) center; background-size:cover; -webkit-background-size:cover;} .social1,.social2,.social3{z-index:1; width:33.33333333%; height:100%;position:absolute} .social1{top:0;left:0;background:url(../img/drinks/MARGARITA.jpg) top center; background-size:cover; -webkit-background-size:cover;} .social2{top:0;left:33.33333333%;background:url(../img/pratos/BelliBelli-4.jpg) bottom center; background-size:cover; -webkit-background-size:cover;} .social3{top:0;left:66.6666666666%;background:url(../img/pratos/BelliBelli-15.jpg) center left; background-size:cover; -webkit-background-size:cover;} .grad-top{z-index:2; width:100%; height:80px; position:absolute; top:0; left:0; background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9)); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9)); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9)); /* For Firefox 3.6 to 15 */ background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.9)); /* Standard syntax (must be last) */} .grad-top-long{width:100%; height:200px; position:absolute; top:0; left:0; background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9)); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9)); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9)); /* For Firefox 3.6 to 15 */ background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.9)); /* Standard syntax (must be last) */} .grad-bottom{z-index:2; width:100%; height:80px; position:absolute; bottom:0; left:0; background: -webkit-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.9)); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.9)); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.9)); /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.9)); /* Standard syntax (must be last) */} .padding{margin:0.5em} .container-fluid { margin-right: 0em; margin-left:0em;margin-bottom:0em; padding-left: 0;overflow:hidden; padding-right: 0;position:relative; } .container-fluid.top{margin-top:4em} .row { margin-left: 0em; margin-right: 0em; } .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-filter { position: relative; display:block; padding-right: 0em; padding-left: 0em; } .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-filter { float: left } .col-xs-filter{width:20%} .col-xs-12 { width: 100% } .col-xs-11 { width: 91.66666667% } .col-xs-10 { width: 83.33333333% } .col-xs-9 { width: 75% } .col-xs-8 { width: 66.66666667% } .col-xs-7 { width: 58.33333333% } .col-xs-6 { width: 50% } .col-xs-5 { width: 41.66666667% } .col-xs-4 { width: 33.33333333% } .col-xs-3 { width: 25% } .col-xs-2 { width: 16.66666667% } .col-xs-1 { width: 8.33333333% } .col-xs-offset-12 { margin-left: 100% } .col-xs-offset-11 { margin-left: 91.66666667% } .col-xs-offset-10 { margin-left: 83.33333333% } .col-xs-offset-9 { margin-left: 75% } .col-xs-offset-8 { margin-left: 66.66666667% } .col-xs-offset-7 { margin-left: 58.33333333% } .col-xs-offset-6 { margin-left: 50% } .col-xs-offset-5 { margin-left: 41.66666667% } .col-xs-offset-4 { margin-left: 33.33333333% } .col-xs-offset-3 { margin-left: 25% } .col-xs-offset-2 { margin-left: 16.66666667% } .col-xs-offset-1 { margin-left: 8.33333333% } .col-xs-offset-0 { margin-left: 0 } @media (min-width:600px) { .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { float: left } .col-sm-12 { width: 100% } .col-sm-11 { width: 91.66666667% } .col-sm-10 { width: 83.33333333% } .col-sm-9 { width: 75% } .col-sm-8 { width: 66.66666667% } .col-sm-7 { width: 58.33333333% } .col-sm-6 { width: 50% } .col-sm-5 { width: 41.66666667% } .col-sm-4 { width: 33.33333333% } .col-sm-3 { width: 25% } .col-sm-2 { width: 16.66666667% } .col-sm-1 { width: 8.33333333% } .col-sm-offset-12 { margin-left: 100% } .col-sm-offset-11 { margin-left: 91.66666667% } .col-sm-offset-10 { margin-left: 83.33333333% } .col-sm-offset-9 { margin-left: 75% } .col-sm-offset-8 { margin-left: 66.66666667% } .col-sm-offset-7 { margin-left: 58.33333333% } .col-sm-offset-6 { margin-left: 50% } .col-sm-offset-5 { margin-left: 41.66666667% } .col-sm-offset-4 { margin-left: 33.33333333% } .col-sm-offset-3 { margin-left: 25% } .col-sm-offset-2 { margin-left: 16.66666667% } .col-sm-offset-1 { margin-left: 8.33333333% } .col-sm-offset-0 { margin-left: 0 } } /* -------------------------------- Modal window -------------------------------- */ .cd-modal { position: fixed; top: 0; left: 0; z-index: 99999; height: 100%; width: 100%; overflow: hidden; background: #fff url(../img/drinks.jpg) no-repeat center; background-size: cover;-webkit-background-size:cover; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; transition: opacity 0.3s 0s, visibility 0s 0.3s; } .cardapio { background: url(../img/cardapio.jpg) no-repeat center; display: block; width: 100%; height: 100%; background-size: cover; background-attachment: fixed; overflow-y: scroll; } .cd-modal.cardapio { background-size: cover !important; -webkit-background-size: cover !important; position: fixed; top: 0; left: 0; z-index: 99999; height: 100%; width: 100%; overflow: hidden; background: #fff url(../img/cardapio.jpg) no-repeat center; opacity: 0; visibility: hidden; } .cd-modal.instafeed { background-size: cover;-webkit-background-size:cover; position: fixed; top: 0; left: 0; z-index: 99999; height: 100%; width: 100%; overflow: hidden; background: #fff ; opacity: 0; visibility: hidden; } .logo-modal{position:relative; text-align:center; margin:0.8em auto 0.5em; width:200px} .cd-modal .modal-content { height: 100%; overflow-y: auto; padding: 0em 0 4em; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cd-modal h1 {letter-spacing:2px; text-align: center; text-transform:uppercase; font-weight:normal; color:#000; font-size:1.2em; margin:1em 0 1em; font-family: 'Courier Prime'; } .cd-modal h1::after { content: ''; display: block; width: 150px; background: #f2f9fa;height:10px; margin: .2em auto 0; } .cd-modal ul{margin:0;padding:0 2em 3em;text-align:center; } .cd-modal ul li {text-align:center; line-height: 1.3;text-transform:uppercase; margin: 1.5em 0 0em; color:#333; font-size:1em; font-weight:normal;font-family: 'Courier Prime'; } .cd-modal ul li span{text-transform:none; font-family: 'Courier Prime';clear:both; display:block; font-weight:normal; color:#666} .cd-modal .modal-close { /* 'X' icon */ position: absolute; z-index: 1; top: 1em; right: 1em; height: 60px; width: 60px; border-radius: 50%; background:url(../img/cd-icon-close.svg) #f7e36d no-repeat center center; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; visibility: hidden; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s; transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s; } @media screen and (max-width: 768px) { .cd-modal .modal-close { top: 0.5em; right: 0.5em; height: 50px; width: 50px; }} .no-touch .cd-modal .modal-close:hover { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);} .cd-modal.visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.7s, visibility 0s; -moz-transition: opacity 0.7s, visibility 0s; transition: opacity 0.7s, visibility 0s; } .cd-modal.visible .modal-content { /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */ -webkit-overflow-scrolling: touch; } .cd-modal.visible .modal-close { visibility: visible; opacity: 1; -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s; transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* -------------------------------- Transition Layer -------------------------------- */ .cd-transition-layer { position: fixed; top: 0; left: 0; z-index: 2; height: 100%; width: 100%; opacity: 0; visibility: hidden; overflow: hidden; } .cd-transition-layer .bg-layer { position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-2%); -moz-transform: translateY(-50%) translateX(-2%); -ms-transform: translateY(-50%) translateX(-2%); -o-transform: translateY(-50%) translateX(-2%); transform: translateY(-50%) translateX(-2%); /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */ height: 100%; /* our sprite is composed of 25 frames */ width: 2500%; background: url(../img/ink.png) no-repeat 0 0; background-size: 100% 100%; } .cd-transition-layer.visible { opacity: 1; visibility: visible; } .cd-transition-layer.opening .bg-layer { -webkit-animation: cd-sequence 0.8s steps(24); -moz-animation: cd-sequence 0.8s steps(24); animation: cd-sequence 0.8s steps(24); -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .cd-transition-layer.closing .bg-layer { -webkit-animation: cd-sequence-reverse 0.8s steps(24); -moz-animation: cd-sequence-reverse 0.8s steps(24); animation: cd-sequence-reverse 0.8s steps(24); -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .no-cssanimations .cd-transition-layer { display: none; } @-webkit-keyframes cd-sequence { 0% { /* translateX(-2%) is used to horizontally center the first frame inside the viewport */ -webkit-transform: translateY(-50%) translateX(-2%); } 100% { /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */ -webkit-transform: translateY(-50%) translateX(-98%); } } @-moz-keyframes cd-sequence { 0% { /* translateX(-2%) is used to horizontally center the first frame inside the viewport */ -moz-transform: translateY(-50%) translateX(-2%); } 100% { /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */ -moz-transform: translateY(-50%) translateX(-98%); } } @keyframes cd-sequence { 0% { /* translateX(-2%) is used to horizontally center the first frame inside the viewport */ -webkit-transform: translateY(-50%) translateX(-2%); -moz-transform: translateY(-50%) translateX(-2%); -ms-transform: translateY(-50%) translateX(-2%); -o-transform: translateY(-50%) translateX(-2%); transform: translateY(-50%) translateX(-2%); } 100% { /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */ -webkit-transform: translateY(-50%) translateX(-98%); -moz-transform: translateY(-50%) translateX(-98%); -ms-transform: translateY(-50%) translateX(-98%); -o-transform: translateY(-50%) translateX(-98%); transform: translateY(-50%) translateX(-98%); } } @-webkit-keyframes cd-sequence-reverse { 0% { -webkit-transform: translateY(-50%) translateX(-98%); } 100% { -webkit-transform: translateY(-50%) translateX(-2%); } } @-moz-keyframes cd-sequence-reverse { 0% { -moz-transform: translateY(-50%) translateX(-98%); } 100% { -moz-transform: translateY(-50%) translateX(-2%); } } @keyframes cd-sequence-reverse { 0% { -webkit-transform: translateY(-50%) translateX(-98%); -moz-transform: translateY(-50%) translateX(-98%); -ms-transform: translateY(-50%) translateX(-98%); -o-transform: translateY(-50%) translateX(-98%); transform: translateY(-50%) translateX(-98%); } 100% { -webkit-transform: translateY(-50%) translateX(-2%); -moz-transform: translateY(-50%) translateX(-2%); -ms-transform: translateY(-50%) translateX(-2%); -o-transform: translateY(-50%) translateX(-2%); transform: translateY(-50%) translateX(-2%); } } /* ========== SECTION content animation ========== */ /* -------------------------------- Mask -------------------------------- */ .section > .fp-tableCell h1 { position: relative; opacity: 1; /*

text is not visible - it is used only as a container for the ::after element */ color: transparent; overflow: hidden; } .section > .fp-tableCell h1::after { /* this is the animated text */ content: attr(data-content); position: absolute; top: 0; left: 0; height: 100%; width: 100%; color: #ffffff; } .section.active > .fp-tableCell h1::after{ -webkit-animation-name: cd-reveal-up; -moz-animation-name: cd-reveal-up; animation-name: cd-reveal-up; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; animation-fill-mode: backwards;} .section > .fp-tableCell h1 span { position: relative; display: inline-block; opacity: 1; } .section > .fp-tableCell ul { opacity: 0; position: relative; margin: 1em 0 0; } .section > .fp-tableCell ul::after { clear: both; content: ""; display: table; } .section.active > .fp-tableCell ul{ -webkit-animation-name: cd-reveal-down; -moz-animation-name: cd-reveal-down; animation-name: cd-reveal-down; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 0.4s; -moz-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s;} .section > .fp-tableCell h1::after{ -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; } @-webkit-keyframes cd-reveal-up { 0% { opacity: 1; -webkit-transform: translateY(100%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes cd-reveal-up { 0% { opacity: 1; -moz-transform: translateY(100%); } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes cd-reveal-up { 0% { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes cd-reveal-down { 0% { opacity: 0; -webkit-transform: translateY(100px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes cd-reveal-down { 0% { opacity: 0; -moz-transform: translateY(100px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes cd-reveal-down { 0% { opacity: 0; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ /* Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) */ /* pswp = photoswipe */ .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ -webkit-backface-visibility: hidden; outline: none; } .pswp * { -webkit-box-sizing: border-box; box-sizing: border-box; } .pswp img { max-width: none; } /* style is added when JS option showHideOpacity is set to true */ .pswp--animate_opacity { /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ opacity: 0.001; will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { /* autoprefixer: off */ cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--zoomed-in .pswp__img { /* autoprefixer: off */ cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--dragging .pswp__img { /* autoprefixer: off */ cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* Background is added as a separate element. As animating opacity is much faster than animating rgba() background-color. */ .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; opacity: 0; transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; /* for open/close transition */ -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; } /* stretched thumbnail or div placeholder element (see below) style is added to avoid flickering in webkit/blink when layers overlap */ .pswp__img--placeholder { -webkit-backface-visibility: hidden; } /* div element that matches size of large image large image loads on top of it */ .pswp__img--placeholder--blank { background: #ccc; } .pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; } /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC; } .pswp__error-msg a { color: #CCC; text-decoration: underline; } /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ /* Contents: 1. Buttons 2. Share modal and links 3. Index indicator ("1 of X" counter) 4. Caption 5. Loading indicator 6. Additional styles (root element, top bar, idle state, hidden state, etc.) */ /* 1. Buttons */ /*