@charset "utf-8"; /* CSS Document */ /* ---------------- RESET ---------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h4, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: initial; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0;} a, a:link, a:visited, a:hover, a:active{text-decoration:none} table { border-collapse: separate;border-spacing: 0;} th, td {text-align: left; font-weight: normal;} img, iframe {border: none; text-decoration:none;} ol, ul {list-style: none;} input, textarea, select, button {font-size: 100%;font-family: inherit; margin:0; padding:0;} select {margin: inherit;} hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px} body{ font-family: 'Raleway', sans-serif; font-size:62.5%; font-weight:400; letter-spacing: 1.2px; background:#FFF; height: auto; } b { font-weight:900 } a:hover { text-decoration:;} section {width:100%; position: relative; } /* EFEITO SMOTH */ .smoth { transition: all 300ms ease-in-out; } /* ROW */ .row { position: relative; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 1260px; } /* responsive image */ img { max-width: 100%; height: auto; } @media \0screen { img { width: auto; /* for ie 8 */ } } .active { background: #FFF; cursor: default; } /* box-sizing */ *, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .desactiveScroll { overflow: hidden; } /* ---------------- SPRITES ---------------- */ .sprites { background: url(../img/viop-sprite.png); } .sprites.logo-header { background-position: -36px -30px; } .sprites.logo-headerLandings { background-position: -36px -461px; } .sprites.logo-header-footer { background-position: -40px -202px; } .sprites.icon { float: left; width: 30px; height: 29px; background-color:; } .sprites.icon.phone { background-position: -347px -45px; } .sprites.icon.phone-white { background-position: -812px -46px; } .sprites.icon.busca { background-position: -399px -45px; } .sprites.icon.acessibilidade { background-position: -448px -45px; } .sprites.icon.localidade { background-position: -499px -45px; } .sprites.icon.avatar { background-position: -555px -45px; } .sprites.icon.avatar-white { background-position: -865px -45px; width: } .sprites.select { background-position: -612px -56px; float: left; width: 11px; height: 8px; margin: 12px 7px 0 } .sprites.select-white { background-position: -682px -206px; float: left; width: 12px; height: 8px; margin: 12px 6px 0 } .calender { background-image: url(../img/calender.png); background-repeat: no-repeat; background-position: 90% center; } /* ---------------- RESET END ---------------- */ /* ============================== ========== HEADER ========== ============================== */ /* ---------------- HEADER ---------------- */ header { float: left; width: 100%; height: auto; padding: 0 0; position: relative; z-index: 9 } header#desktop { display:; } header#mobile { display:none !important; } /* ---------------- HEADER DESKTOP ---------------- */ header#desktop .top { background: #f1f1f1; float: left; width: 100% } header#desktop .top .left { float: left; } header#desktop .top .left a { float: left; text-transform: uppercase; font-size: 1.1em; color: #717171 } header#desktop .top .left a:hover { background: #f7f7f7;} header#desktop .top .left { float: left; margin: 0 0 0; background: url(../img/bg-links.png) no-repeat; background-position: 100px 0; } header#desktop .top .left .links { float: left; background:; margin: 0 } header#desktop .top .left .menir { float: left; padding:16px 19px 15px; font-size: 1.1em; color: #717171 text-transform: uppercase; position: relative; } header#desktop .top .left .menir:hover { background: #f7f7f7 } header#desktop .top .left .menir p { float: left; } header#desktop .top .left .menir:hover > .sub-menu { display: block; } header#desktop .top .left .menir .sub-menu { display: none; box-shadow: 0 0 80px rgba(0, 0, 0, 0.19); margin-top: 43px; color: #666; width: auto; height: auto; position: absolute; top: 0; left: 0; z-index: 999 } header#desktop .top .left .menir .sub-menu .top { width: auto; margin-top: -44px; height: 44px; cursor: default; float: left; background: #fff; font-size:; font-weight: 700; background:; color: #179fc0; padding: 1.5em 0; text-transform: uppercase; position: relative; } header#desktop .top .left .menir .sub-menu .top p { padding: 0 1.65em; text-decoration: none; } header#desktop .top .left .menir .sub-menu .content { float: left; width: 100%; background: #f9f9f9; height: auto; position: relative; } header#desktop .top .left .menir .sub-menu .left-content { float: left; width: 270px; height: auto; background: #f1f1f1 } header#desktop .top .left .menir .sub-menu .left-content .meriar { font-weight: 400; text-transform: none; font-size: 1.1em; float: left; width: 270px; height: auto; background: #FFF; margin-bottom: 1px; color: #179fc0 } header#desktop .top .left .menir .sub-menu .left-content .meriar a.first { text-transform: none; color: #179fc0; padding: 0; text-decoration: none; padding: 1.1em 0 1.0em 30px; float: left; width: 100% } header#desktop .top .left .menir .sub-menu .left-content .meriar:first-child { margin-top: 1px } header#desktop .top .left .menir .sub-menu .left-content .meriar a.first:hover {font-weight: 700; } header#desktop .top .left .menir .sub-menu .left-content .meriar:hover > .right-content { display: none; } header#desktop .top .left .menir .sub-menu .left-content .meriar .right-content { display: none; margin-left: 270px; width: 560px; height: 100%; position: absolute; top: 0; left: 0; background: #f7f7f7; padding: 40px 70px } header#desktop .top .left .menir .sub-menu .left-content .meriar .right-content h2 { float: left; font-size: 1.8em; color: #666; text-transform: uppercase; font-weight: 300 } header#desktop .top .left .menir .sub-menu .left-content .meriar .right-content .video { width: 100%; height: 165px; float: left; background:; position: relative; } header#desktop .top .left .menir .sub-menu .left-content .meriar .right-content .video img { width: 100%; height: 100%; float: left; background:; } header#desktop .top .left .menir .sub-menu .left-content .meriar .right-content .video .btn { position: absolute; top:0; left: 50%; margin: 62px 0 0 -85px } header#desktop .top .left .menir .sub-menu .left-content .meriar .right-content .video p { float: left; color: #666; font-size: 0.9em; margin: 1em 0 } /* ==== BUSCA ==== */ #busca-box { position: fixed; top: 0; left: 0; z-index: 999999999 } #busca-box form { width: 100%; float: left; position: relative; z-index: 2; } #busca-box form label { width: 100%; margin: 15% 0; float: left; position: relative;} #busca-box form label i { color: #4391c8; font-size: 6em; position: absolute; top: 0; left: 0; padding: 25px; z-index: 3 } #busca-box form label input { width: 100%; padding-left:100px; border: 0; height: 116px; border-bottom: 3px solid #DADADA; font-size: 3em; font-style: italic; font-weight: 300; position: relative; z-index: 2 } #busca-box form label input:focus { box-shadow: 5px 5px 80px #999; border-bottom: 7px solid #DADADA; } #busca-box form label button { border: 0; cursor: pointer; font-size: 2em; position: absolute; top: 0; right: 0; margin: 26px; z-index: 3; padding: 19px 2em; background:#4391c8; color: #FFF; text-transform: uppercase; } #busca-box form label button:hover { background:#65a6d4; ; } #busca-box .close { color: #FFF; font-size: 6em; position: absolute; top: 5%; right: 50%; margin: 0 -39px 0 0; padding: 0 15px; z-index: 3; cursor: pointer; } #busca-box .close:hover { opacity: 0.8 } #busca-box .black { width: 100%; height: 100%; margin: 0; position: fixed; z-index: 1; top: 0; left: 0; background: #000000; opacity: 0.8; cursor: } #busca-box.busca-on { display: block; } #busca-box.busca-off { display: none; } header#desktop .top .right { float: right } header#desktop .top .right a { float: left; padding: 7px 13px 8px; cursor: pointer;} header#desktop .top .right a:hover { background: #f7f7f7 } header#desktop .top .right a.active:hover { background: #fbfbfb } header#desktop .top .right a p { float: left; color: #717171; text-transform: uppercase; font-size: 1.2em; padding: 8px 7px 0 } header#desktop .midle { background: #FFF; float: left; width: 100%; height: 120px; position: relative; z-index: 2 } header#desktop .midle h1 { float: left; } header#desktop .midle h1 a { float: left; width: 261px; height: 61px; margin: 30px 0 } header#desktop .midle h1 p { float: left; display: none; } header#desktop .midle .right { float: right; margin: 39px 0 0 } header#desktop .midle .right .box { width: 242px; float: left; padding: 7px 13px; border: 1px solid transparent; height: 42px; display: block; overflow: hidden; } header#desktop .midle .right .box.login { width: 259px } header#desktop .midle .right .box:hover { border: 1px solid #f5f5f5; height: auto; background: #FFF; box-shadow: 0 0 30px rgba(0, 0, 0, 0.10) } header#desktop .midle .right .box p { cursor: default; float: left; color: #717171; font-size: 1.1em; padding: 8px 7px 0 } header#desktop .midle .right .box .top { float: left; width: 100%; background: #FFF; } header#desktop .midle .right .box .hover { float: left; width: 100%; background:; margin: 10px 0 0; font-size: .9em } header#desktop .midle .right .box .hover { float: left; width: 100%; background:; margin: 10px 0 0 } header#desktop .midle .right .box .hover .title { float: left; width: 100%; padding: 10px 0 10px 10px; margin: 0 0 5px 0; background: #ffd504; text-transform: uppercase; font-weight: 900; color: #FFF; font-size: 1.2em; } header#desktop .midle .right .box .hover a { float: left; width: 100%; padding: 5px 0 5px 10px; cursor: pointer; } header#desktop .midle .right .box .hover a:hover p { text-decoration: underline; } header#desktop .bottom { float: left; background: #f7f7f7; width: 100%; padding: 25px 0 35px; position: relative; z-index: 1 } header#desktop .bottom ul { float: left; padding: 0 30px 0 0 } header#desktop .bottom ul:last-child { padding: 0; } header#desktop .bottom ul:last-child { padding: 0; } header ul li label { text-transform: uppercase; color: #4390c8; font-size: 1.3em; font-weight: 500; } header ul li label p { padding: 0 0 8px 0; } header ul li input { width: 100%; float: left; height: 50px; border: 0; border-bottom: 2px solid #e8e8e8 } header ul li input.down { border-top: 2px solid #e8e8e8; border-bottom: 0; margin: -2px 0 0 0 } header ul li button { width: 100%; height: 50px; background: #ffd400; text-transform: uppercase; font-weight: 900; font-size: 1.2em; color: #FFF; border:0; cursor: pointer; } header ul li button:hover { background: rgba(255, 212, 0, 0.62) } header ul.big { width: 30%; } header ul.big li input { padding-left: 5%; } header ul.small { width: 15% } header ul.small li input { padding-left: 10%; } header ul.smaller { width: 10% } header ul.smaller li button { margin: 22px 0 0 0 } /* ---------------- HEADER MOBILE ---------------- */ header#mobile { position: relative; z-index: 999999; border-bottom: 1px solid #f7f7f7; background: #FFF; padding: 0; } header#mobile .sup { float: left; width: 100%; border-bottom: 1px solid #f7f7f7; } header#mobile .top { float: left; width: 100%; } header#mobile .top .left { float: left; } header#mobile .top .left a { float: left; padding:15px 20px; font-size: 1.1em; color: #717171 } header#mobile .top .left a:hover { background: #DDD } header#mobile .top .right { float: right } header#mobile .top .right a { float: left; padding: 17px 14px 16px; cursor: pointer; display: block; overflow: hidden; } header#mobile .top .right a:hover { background: #F7F7F7 } header#mobile .top .right a p { display: none; float: left; color: #717171; font-size: 1.1em; padding: 8px 7px 0 } header#mobile .top .right a:hover p { display: block; } header#mobile .top .right a.border { border-right:1px solid #f7f7f7; padding: 17px 9px 16px 14px; } header#mobile .bottom { float: left; width: 100%; padding: 30px 0 25px; position: relative; z-index: 1 } header#mobile .bottom h1 { float: left; width: 17%; margin: 0 3% 0 0; } header#mobile .bottom h1 a { float: left; width: 100%; height: auto; } header#mobile .bottom h1 p { float: left; display: none; } header#mobile .bottom form { float: left; width: 80% } header#mobile .bottom ul { float: left; padding: 0 15px 0 0 } header#mobile .bottom ul:last-child { padding: 0; } header#mobile .bottom ul:last-child { padding: 0; } header#mobile ul.smaller li button { font-size: 1.1em; margin: 0 0 0 0 } header#mobile ul li input { text-transform: uppercase; font-size: 1.1em; border-bottom: 2px solid #e8e8e8; background-color: #F7F7F7 } header#mobile ul li input.down { border-top: 2px solid #e8e8e8; border-bottom: 0; margin: 0 0 0 0 } header#mobile ul li input::-webkit-input-placeholder { color: #4390c8; } header#mobile ul li input:-moz-placeholder { color: #4390c8; } header#mobile ul li input::-moz-placeholder { color: #4390c8; } header#mobile ul li input:-ms-input-placeholder { color: #4390c8; } /* ==== MENU MOBILE ==== */ header#mobile .header-fixo {position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; display: none } header#mobile #menu { } header#mobile .black { width: 105%; height: 100%; margin: 0 0 0 -5%; position: fixed; z-index: 1; background: #124975; } header#mobile .menu_phone { display:block; position: absolute; z-index: 999999; width: 75px; height: auto; cursor:pointer; padding:31px 20px; } header#mobile .on-swift { background: #FFF; border-right:1px solid #f7f7f7 } header#mobile .on-swift:hover { background: #F7F7F7 } header#mobile .off-swift { background: #124975; } header#mobile .header-fixo #menu { margin: 0; font-size: 2.0em; float: left; width: 350px; height: auto; background:; position: relative; z-index: 3; } header#mobile .header-fixo #menu .big { margin: 80px 0; float: left; position: relative; z-index: 3; height: 100%; } header#mobile .header-fixo #menu .big a { width: 100%; text-align: left; position: relative; z-index: 998; float: left; color: #FFF; margin: 0 0 0 0;padding: 5% 15%; cursor: pointer; border-left: 10px solid transparent; font-weight: 300; } header#mobile .header-fixo #menu .big a:hover { border-left: 10px solid #FFD504; font-weight: 900 } header#mobile .header-fixo #menu .big .modales { width: 100%; text-align: left; position: relative; z-index: 998; float: left; color: #FFF; margin: 0 0 0 0;padding: 1em 2em; cursor: pointer; border-left: 10px solid transparent; font-weight: 300; transition: all 200ms ease-in-out; } header#mobile .header-fixo #menu .big .modales:hover { border-left: 10px solid #FFF; font-weight: 900; background: #0f4067; } header#mobile .header-fixo #menu .big .modales div a { clear: both; font-size: 50%; width: auto; opacity: 0.75; padding: 2em 8% 0 0; display: none; } header#mobile .header-fixo #menu .big .modales div a:hover { border-left: 10px solid transparent; text-decoration: underline; opacity: 1; } header#mobile .header-fixo #menu .big .modales:hover > div a {display: block; } /* === ICON MENU HAMBURGUER ANIMATED === */ header#mobile #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; height: 2px; width: 35px; background: #999999; position: absolute; display: block;content: ''; } header#mobile #nav-toggle span:before { top: -12px; } header#mobile #nav-toggle span:after { bottom: -12px; } header#mobile #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } header#mobile #nav-toggle.active span { background-color: transparent; } header#mobile #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } header#mobile #nav-toggle.active span:before { transform: rotate(45deg); background: #FFF } header#mobile #nav-toggle.active span:after { transform: rotate(-45deg); background: #FFF } #estados { width: 100%; height:0; padding: 0; display: block; background: url(../img/map/map2.png) no-repeat #4290c8; #FFF; float: left; background-position: 0 5% !important; transition: all 200ms ease-in-out; } #estados .box { width:45%; height:; background:; float: left; } #estados .box h3 { width:; height:; float: left; font-size: 3.5em; color: #ffd400; font-weight: 700; padding: 55px 0 0 0; } #estados .box p { width:; height:; float: left; font-size: 1.7em; color: #FFF; padding: 0 0 0 0 } #estados ul { width:55%; height:; float: right; margin: 22px 0} #estados ul li { width:; height:auto; margin: 0 15px 15px 0; border: 1px solid #f4f4f4; text-align: center; float: left; text-transform: uppercase; } #estados ul li a { color: #FFF; float: left; padding: 20px; } #estados ul li:hover { background: white } #estados ul li:hover a { color: #4290c8 } #estados.activeted { height: 245px; padding: 2.5% 0;} .on-regiao { background:#4290c8; } .on-regiao:hover { background: #5699ca !important; } .on-regiao p { color: #FFF !important } .on-regiao .sprites.icon.localidade { background-position: -499px -195px;} .on-regiao .sprites.select { background-position: -612px -206px; width: 12px } /* ---------------- HEADER MOBILE ---------------- */ #header-fixed { position: fixed; width: 100%; z-index: 9999; background: #FFF; display: none } .fix-header { display: block !important; } #header-fixed .bottom { float: left; width: 100%; padding: 20px 0 18px; border-bottom: 2px solid #f7f7f7; position: relative; z-index: 1 } #header-fixed .bottom h1 { float: left; width: 17%; margin: 0 3% 0 0; } #header-fixed .bottom h1 a { float: left; width: 100%; height: auto; } #header-fixed .bottom h1 p { float: left; display: none; } #header-fixed ul li input { width: 100%; float: left; height: 50px; border: 0; border-bottom: 2px solid #e8e8e8 } #header-fixed ul li input.down { border-top: 2px solid #e8e8e8; border-bottom: 0; margin: -2px 0 0 0 } #header-fixed ul li button { width: 100%; height: 50px; background: #ffd400; text-transform: uppercase; font-weight: 900; font-size: 1.2em; color: #FFF; border:0; cursor: pointer; } #header-fixed ul li button:hover { background: rgba(255, 212, 0, 0.62) } #header-fixed ul.big { width: 30%; } #header-fixed ul.big li input { padding-left: 5%; } #header-fixed ul.small { width: 15% } #header-fixed ul.small li input { padding-left: 10%; } #header-fixed ul.smaller { width: 10% } #header-fixed ul.smaller li button { margin: 22px 0 0 0 } #header-fixed .bottom form { float: left; width: 80% } #header-fixed .bottom ul { float: left; padding: 0 15px 0 0 } #header-fixed .bottom ul:last-child { padding: 0; } #header-fixed .bottom ul:last-child { padding: 0; } #header-fixed ul.smaller li button { font-size: 1.1em; margin: 0 0 0 0 } #header-fixed ul li input { text-transform: uppercase; font-size: 1.1em; border-bottom: 2px solid #e8e8e8; background-color: #F7F7F7 } #header-fixed ul li input.down { border-top: 2px solid #e8e8e8; border-bottom: 0; margin: 0 0 0 0 } #header-fixed ul li input::-webkit-input-placeholder { color: #4390c8; } #header-fixed ul li input:-moz-placeholder { color: #4390c8; } #header-fixed ul li input::-moz-placeholder { color: #4390c8; } #header-fixed ul li input:-ms-input-placeholder { color: #4390c8; } #exception header#desktop { display:none !important; } #exception header#mobile { display:block !important; } /* ============================== ========== HOME =========== ============================== */ /* ---------------- SETOR ---------------- */ #setor1 { width: 100%; height: auto; position: relative; background:#F7F7F7; float: left; z-index: 1} #setor1 .banner-top { position: relative; z-index: 1 } #setor1 ul.banner-bottom { width: 100%; float: left; margin: -37px 0 0 0; position: relative; z-index: 2 } #setor1 ul.banner-bottom li { width: 100%; height: 188px; background-position: 55% 0 !important; } /* ---------------- SETOR ---------------- */ #setor2 { width: 100%; height: auto; padding: 0 0 5% 0; position: relative; background:#f7f7f7; float: left; z-index: 1} #setor2 .top { float: left; width: 100%; padding: 5% 0; } #setor2 .top h2 { float: left; font-size: 2.4em; padding: 7px 0 0 0; font-weight: 300; color: #666; text-transform: uppercase; } #setor2 .top .right { float: right; font-size: 1.3em; font-weight: 500; color: #666; text-transform: uppercase; } #setor2 .top .right i { float: left; margin: 7px 0 0 0 } #setor2 .top .right p { float: left; padding: 14px 1em 0 1em; } #setor2 .top .right select { float: left; padding: 1em 2em 1em 1em; border:0; color: #717171; text-transform: uppercase; font-weight: 700 } #setor2 .content { float: left; width: 100%; } #setor2 .content a.box { float: left; width: 25%; height: 250px; background-size: cover !important; background-position: center !important; } #setor2 .content a.box li { float: left; width: 100%; height: 100%; color: #FFF; font-weight: 700; background:rgba(0, 0, 0, 0.35); } #setor2 .content a.box li:hover { background:rgba(0, 0, 0, 0.75); } #setor2 .content a.box li h3 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-size: 1.6em; padding: 6.3em 0 0; } #setor2 .content a.box li p { float: left; width: 100%; text-transform: uppercase; text-align: center; font-size: 2.6em; } #setor2 .content:last-child p { float: left; font-style: italic; font-size: 1.4em; margin: 5% 0 0 } #setor2 .content:last-child a { float: right; font-size: 1.4em; margin: 5% 0 0; text-decoration: underline; color: #4390c8; } #setor2 .content:last-child a:hover { text-decoration: none} /* ---------------- SETOR ---------------- */ #setor3 { width: 100%; height: auto; padding: 0 0 0 0; position: relative; background:#f7f7f7; float: left; z-index: 1} #setor3 #video { float: left; width: 100%; padding: 0 0; } #setor3 #video .box { float: left; width:; background: rgba(0, 96, 163, 0.7); width: 100%; height: 100%; color: #FFF; text-align: center; text-transform: uppercase; font-weight: 100; padding: 16.6em 0 10.3em 0; } #setor3 #video .box i { font-size: 7em; line-height: 0; } #setor3 #video .box h3 { font-size: 4.5em; line-height: 3; } #setor3 #video .box a { font-size: 1.9em; line-height: 3; border: 1px solid #FFF; padding: 1em 2em; color: #FFF; font-weight: 400 } #setor3 #video .box a:hover { color: rgba(0, 96, 163, 1); background: #FFF } #setor3 .last { float: left; position: absolute; bottom: 7.5%; right: 3%; color: #FFF; font-size: 1.05em } #setor3 a.last p { float: left; text-decoration: underline; margin: 6px 1em 0 0 } #setor3 a.last i { float: left; font-size: 2.4em; } #setor3 a.last:hover p { text-decoration: none; } /* ---------------- SETOR ---------------- */ #setor4 { width: 100%; height: auto; padding: 7.5% 0 5% 0; position: relative; background:#f7f7f7; float: left; z-index: 1} #setor4 .left { width: 50%; height: 404px; background: url(../img/img3.jpg); position: relative; background-position: -380% center; float: left } #setor4 .left .box { width: 50%; padding: 5%; height: 100%; background: #ffd400; position: absolute; top: 0; left: 0; } #setor4 .left .box h2 { float: left; color: #666; font-size: 2.6em; text-transform: uppercase; font-weight: 300 } #setor4 .left .box p { float: left; color: #666; font-size: 1.2em; line-height: 1.7; margin: 1em 0 0; font-weight: 400 } #setor4 .left .box p a { color: #666; text-decoration: underline; } #setor4 .left .box p a:hover { text-decoration: none; } #setor4 .right { width: 50%; height: 100%; position: relative; background:#115CA0; float: left } #setor4 .right img { height: 50%; float: left; position: relative; } #setor4 .right img.banner-linhas { width: 100% } #setor4 .right img.banner-pague-menos { width: 50% } #setor4 .right img.banner-kids { width: 50% } /* ---------------- SETOR ---------------- */ #noticias-lista { width: 100%; height: auto; padding: 0 0 5% 0; position: relative; background:#f7f7f7; float: left; z-index: 1} #noticias-lista .top { float: left; width: 100%; padding: 5% 0; } #noticias-lista .top h2 { float: left; font-size: 2.4em; padding: 7px 0 0 0; font-weight: 300; color: #666; text-transform: uppercase; } #noticias-lista .top .right { float: left; font-size: 1.3em; font-weight: 500; color: #666; } #noticias-lista .top .right a { float: left; padding: 16px 1em 0 3em; color: #666; text-decoration: underline; } #noticias-lista .top .right a:hover { text-decoration: none; } #noticias-lista .content { float: left; width: 100%; } #noticias-lista .content li { float: left; width: 31.3%; margin: 0 3% 0 0; background:; padding: 2% 4%; color: #666; font-size: 1.4em; font-style: italic; border-bottom: 2px solid #e8e8e8 } #noticias-lista .content li:last-child { margin: 0 } #noticias-lista .content li:hover { background: #FFF } #noticias-lista .content li p { float: left; } #noticias-lista .content li h3 { float: left; font-weight: 700; padding: 2% 0 } #noticias-lista .content li a { float: left; color: #666; text-decoration: underline; } #noticias-lista .content li a:hover { text-decoration: none; } /* ---------------- SETOR ---------------- */ #setor5 { width: 100%; height: auto; padding: 3% 0 5% 0; position: relative; background:#f7f7f7; float: left; z-index: 1} #setor5 .left { float: left; width: 46.5% } #setor5 .right { float: right; width: 46.5% } #setor5 .box { float: left; width: 100%; height: 490px; padding:7.5%; position: relative; background: #FFF; border-bottom: 2px solid #e8e8e8; } #setor5 .box h2 { float: left; font-size: 2.6em; text-transform: uppercase; font-weight: 300 } #setor5 .box p { clear: both; float: left; margin: 1em 0 0 0; font-size: 1.4em; font-style: italic; font-weight: 400 } #setor5 .box input { width: 100%; height: 50px; margin: 2em 0 0 0; padding: 0 3.5%; float: left; clear: both; border: 0; font-size: 1.6em; font-style: italic; border-top: 2px solid #e8e8e8; border-bottom: 0; background: #F7F7F7 } #setor5 .box input::-webkit-input-placeholder { color: #666; } #setor5 .box input:-moz-placeholder { color: #666; } #setor5 .box input::-moz-placeholder { color: #666; } #setor5 .box input:-ms-input-placeholder { color: #666; } #setor5 .box select { width: 100%; height: 50px; margin: 2em 0 0 0; padding: 0 3.5%; float: left; clear: both; border: 0; font-size: 1.6em; font-style: italic; border-top: 2px solid #e8e8e8; border-bottom: 0; background: #F7F7F7; color: #666; } #setor5 .box button { width: auto; clear: both; float: left; margin: 2em 0 0 0; padding: 0 4em; height: 50px; background: #4391c8; text-transform: uppercase; font-weight: 300; font-size: 2em; color: #FFF; border:0; cursor: pointer; } #setor5 .box button:hover { background: rgba(67, 145, 200, 0.66) } #setor5 .right .box button { margin-top: 265px; float: right; } #setor5 .right .box { background: url(../img/viop-footer-entrega.jpg) no-repeat #FFF; background-position: bottom right } /* ======================================= ========== INTERNA PADRAO ========== ======================================= */ /* ---------------- BREADCAMPS ---------------- */ #BreadCamps { display:; width: 100%; height:auto; padding: 30px 0 26px; color: #999; font-size: 1.3em; background:#FFF; float: left; z-index: 999;font-weight: 400 } #BreadCamps i { float: left; width: 15px; height: 15px; background-position: -483px -112px; margin: 1px 15px 0 0 } #BreadCamps a { float: left; color: #28a6ff; text-decoration: underline; } #BreadCamps a:hover { text-decoration: none; font-size: inherit;} #BreadCamps p { float: left; font-style: italic; } #BreadCamps span { float: left; margin: -3px 13px 0;font-size: 1.4em; opacity: .3 } /* ---------------- SETOR ---------------- */ #InternaSetor1 { width: 100%; height: auto; padding: 0 0 5% 0; position: relative; background:#f7f7f7; float: left; z-index: 1} #InternaSetor1 .top { float: left; width: 100%; padding: 5% 0; } #InternaSetor1 .top .left { float: left; } #InternaSetor1 .top .left h2 { float: left; font-size: 2.4em; padding: 7px 0 0 0; font-weight: 300; color: #666; text-transform: uppercase; } #InternaSetor1 .top .left p { float: left; clear: both; font-size: 1.6em; padding: 7px 0 0 0; font-weight: 300; color: #666; } #InternaSetor1 .top .right { float: right; font-size: 1.3em; font-weight: 500; color: #666; text-transform: uppercase; } #InternaSetor1 .top .right i { float: left; margin: 7px 0 0 0 } #InternaSetor1 .top .right p { float: left; padding: 14px 1em 0 1em; } #InternaSetor1 .top .right select { float: left; padding: 1em 2em 1em 1em; border:0; color: #717171; text-transform: uppercase; font-weight: 700 } #InternaSetor1 .content { float: left; width: 100%; padding:; } #InternaSetor1 .content .all { width: 100%; padding-bottom: 5%; float: left; height:; background:; } #InternaSetor1 .content .left { width: 65%; padding-bottom: 10%; float: left; height:; background:; } #InternaSetor1 .content .right { width: 25%; padding-bottom: 10%; float: right; height:; background:; } #InternaSetor1 .content article h3 { float: left; clear: both; font-size: 2.3em; padding: 0 0 0.7em 0; font-weight: 700; color: #666; } #InternaSetor1 .content article h4 { float: left; clear: both; font-size: 1.6em; padding: 0 0 0.7em 0; font-weight: 700; color: #666; } #InternaSetor1 .content article p { float: left; clear: both; font-size: 1.6em; padding: 0 0 1.7em 0; font-weight: 400; color: #666; line-height: 1.7 } #InternaSetor1 .content article p small { font-size: 0.85em; } #InternaSetor1 .content article p a { color: #179fc0; font-weight: 700; text-decoration: underline; } #InternaSetor1 .content article p a:hover { text-decoration: none; } #InternaSetor1 .content article img { width: 100%; float: left; margin: 30px 0 0 } #InternaSetor1 .content .right p small { font-style: italic; } #InternaSetor1 .content .menu { width: 100%; float: left; padding-top: 10px } #InternaSetor1 .content .menu li { width: 90%; float: left; padding: 20px 0 20px 5%; color: #666; font-size: 1.3em; background: transparent; border-bottom: 2px solid #e8e8e8; font-weight: 400; text-transform: uppercase; position: relative; } #InternaSetor1 .content .menu li:hover { border-top: 2px solid #f4f4f4; background: #f4f4f4 } #InternaSetor1 .content .menu li.active { background: #FFF; margin: -2px 0 0 0 } #InternaSetor1 .content .menu li.active:hover { border-top: 0 } #InternaSetor1 .content .menu li i { display: none; width: 10px; height: 62px; background-position: -540px -101px; position: absolute; top: -3px; left: -10px; } #InternaSetor1 .content .menu li:hover i { display: block; background-position: -530px -101px; top: -5px; } #InternaSetor1 .content .menu li.active i { display: block } #InternaSetor1 .content .menu li.active:hover i { background-position: -540px -101px; top: -3px; } #InternaSetor1 .content .menu li .subs { width: 90%; float: left; padding: 20px 0 20px 5%; font-size: 0.9em; background: transparent; font-weight: 400; position: relative; } #InternaSetor1 .content .menu li .subs a { float: left; width: 100%; color: #666; text-transform: none; margin: 0 0 0.5em 0 } #InternaSetor1 .content .menu li .subs a.active { font-weight: 700; background: transparent !important; } #InternaSetor1 .content .menu li .subs a.active:hover { text-decoration: none; background: transparent !important; } #InternaSetor1 .content .menu li .subs a:hover { text-decoration: underline; } #InternaSetor1 form.menuMobile { display: none; width: auto; float: left; margin: 5% 0 0; transition: all 200ms ease-in-out; } #InternaSetor1 form.menuMobile select { float: left; padding: 1em 2em 1em 1em; border:0; color: #717171; font-size: 1.3em; font-weight: 500; text-transform: uppercase; font-weight: 700 } #InternaSetor1.contato .boxContato { } #InternaSetor1.contato .boxContato a { width: 22%; margin: 0 4% 0 0; float: left; height: 330px; background: #4391c8; cursor: pointer; } #InternaSetor1.contato .boxContato a:hover { opacity: 0.8; } #InternaSetor1.contato .boxContato a:last-child { margin: 0 } #InternaSetor1.contato .boxContato a i { width: 131px; height: 115px; float: left; position: relative; top: 0; left: 50%; margin: 50px 0 0 -64px; } #InternaSetor1.contato .boxContato a.formulario i { background-position: -43px -298px; } #InternaSetor1.contato .boxContato a.achados { background: #ffd400 } #InternaSetor1.contato .boxContato a.achados i { background-position: -212px -298px; margin-top: 33px; margin-bottom: 18px; } #InternaSetor1.contato .boxContato a.achados p { color: #000 } #InternaSetor1.contato .boxContato a.trabalhe i { background-position: -383px -298px; margin-top: 50px } #InternaSetor1.contato .boxContato a.solicitacao { background: #ffd400 } #InternaSetor1.contato .boxContato a.solicitacao i { background-position: -554px -298px; margin-top: 63px; margin-bottom: -12px; } #InternaSetor1.contato .boxContato a.solicitacao p { color: #000 } #InternaSetor1.contato .boxContato a h3 { width: 80%; margin: 5% 10%; color: #FFF; font-size: 1.6em; float: left; font-weight: 700 } #InternaSetor1.contato .boxContato a p { width: 80%; margin: 0 10% 10%; color: #FFF; font-size: 1.3em; float: left; opacity: 0.5; line-height: 1.6 } #InternaSetor1.contato .btn { width: auto; clear: both; float: right; margin: 1em 0 0 0; padding: 1em 2em; height: 50px; background: #4391c8; text-transform: uppercase; font-weight: 300; font-size: 1.2em; color: #FFF; border:0; cursor: pointer; } #InternaSetor1.contato .btn:hover { background: rgba(67, 145, 200, 0.66) } #InternaSetor1.contato .mapaBrasil { float: left; } #InternaSetor1.contato .mapaBrasil h3 { font-size: 1.4em; font-weight: 700 } #InternaSetor1.contato .mapaBrasil p { font-size: 1.1em; } #InternaSetor1.contato .BoxWhite { float: left; background: white; padding: 5em; margin: 6% 0 0 6% } #InternaSetor1.contato .BoxWhite form { clear: both; float: left; } #InternaSetor1.contato .BoxWhite form label { clear: both; float: left; margin: 0 0 7.5% 0 } #InternaSetor1.contato .BoxWhite form label p { clear: both; float: left; font-size: 1.2em; font-weight: 700 } #InternaSetor1.contato .BoxWhite form label select { width: 250px; clear: both; height: 50px; color: #666; padding: 0 0 0 5%; background: #f7f7f7; border: 0; border-bottom: 2px solid #e8e8e8; float: left; font-size: 1.2em; font-weight: 700; margin: 4.5% 0 0 0 } #InternaSetor1.contato .BoxWhite form .resultado { width: 250px; clear: both; float: left; } #InternaSetor1.contato .BoxWhite form .resultado p { clear: both; float: left; font-size: 1.3em; line-height: 1.6 } #InternaSetor1.contato .BoxWhite form .resultado a { clear: both; float: left; height: auto; margin: 2em 0 0 0 } /* ======= MAPA ======= */ #map_canvas { width: 100%; height: 400px; float: right; margin: 0; position: relative; z-index: 1 } /* -- INFO MAP -- */ .gm-style-iw { top: 0 !important; left: 0 !important; width: 300px !important; height: 110px !important; padding: 0 0 -50px 0 !important; bottom: 0 !important; background: ; position: relative !important; } #conteudo-mapa {width:300px; height:100% !important; color:#ccc; font-sise:0.5em; background: ; padding: 0; margin: 0 } #conteudo-mapa .left {width:20%; height:100% !important; float: left; } #conteudo-mapa .left i {font-size: 2em; color: #000; margin: 49%; } #conteudo-mapa .right {width:80%; height:100% !important; float: left; } #conteudo-mapa .right p {font-size: 1.0em; color: #000; margin: 12% 0 0 2%; line-height: 1.5} #conteudo-mapa .right a {color: #000; text-decoration: none; } #conteudo-mapa .right a.lk {font-size: 0.8em; color: #000; padding: 0; text-decoration: underline; } #conteudo-mapa .right a.lk:hover { text-decoration: none; } /* ---------------- LANDINGS ---------------- */ .ExceptionLandings #estados { display: none !important } .ExceptionLandings #desktop { display: none !important } .ExceptionLandings #busca-box { display: none !important } .ExceptionLandings #mobile { display: none !important } #desktopLandings { display: none !important } .ExceptionLandings #desktopLandings { display: block !important } .ExceptionLandings footer { padding: 0; margin-top: 100px; } .ExceptionLandings footer .marcas { display: none !important } .ExceptionLandings footer .list-links { display: none !important } .ExceptionLandings footer .links { padding: 0 } .ExceptionLandings footer .links .last-links { margin: 0 } .clickTop { cursor: pointer } .click1 { cursor: pointer } .click2 { cursor: pointer } .click3 { cursor: pointer } .click4 { cursor: pointer } header#desktopLandings { float: left; width: 100%; height: auto; padding: 0 0 0; position: absolute; top: 0; left: 0; z-index: 9 } header#desktopLandings .midle { float: left; width: 100%; height: 120px; position: relative; z-index: 2 } header#desktopLandings .midle h1 { float: left; } header#desktopLandings .midle h1 a { float: left; width: 261px; height: 61px; margin: 30px 0 } header#desktopLandings .midle h1 p { float: left; display: none; } header#desktopLandings .midle .right { float: right; margin: 30px 0 0 } section .midle .right { margin:0; } header#desktopLandings .midle .right .box, section .midle .right .box{width:270px; float: left; padding: 7px 13px; border: 1px solid transparent; height: 42px; display: block; overflow: hidden; } header#desktopLandings .midle .right .box.login, section .midle .right .box.login { width: 259px } header#desktopLandings .midle .right .box:hover, section .midle .right .box:hover { border: 1px solid #FFF; height: auto; background:; box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);background: #fff; } header#desktopLandings .midle .right .box:hover p, section .midle .right .box:hover p { color:#000; } header#desktopLandings .midle .right .box:hover .sprites.icon.phone-white, section .midle .right .box:hover .sprites.icon.phone-white{ background-position:-347px -45px; } header#desktopLandings .midle .right .box:hover .sprites.icon.avatar-white, section .midle .right .box:hover .sprites.icon.avatar-white { background-position: -555px -45px; } header#desktopLandings .midle .right .box p{ cursor: default; float: left; color: #FFF; font-size: 12px; padding: 8px 7px 0 } section .midle .right .box p { cursor: default; float: left; color: #000; font-size: 12px; padding: 8px 7px 0 } header#desktopLandings .midle .right .btn { width: auto; float: left; padding: 10px 13px 8px; margin: 6px 0 0 15px; background: #ffd400; color: #3587da; font-size: 1.1em; text-transform: uppercase; font-weight: 900; } header#desktopLandings .midle .right .btn:hover { opacity: 0.8 } header#desktopLandings .midle .right .box .top, section .midle .right .box .top { float: left; width: 100%; cursor:pointer;} header#desktopLandings .midle .right .box .hover, section .midle .right .box .hover { float: left; width: 100%; background:; margin: 10px 0 0; font-size: .9em } header#desktopLandings .midle .right .box .hover, section .midle .right .box .hover{ float: left; width: 100%; background:; margin: 10px 0 0 } header#desktopLandings .midle .right .box .hover .title, section .midle .right .box .hover .title{ text-align:left;float: left; width: 100%; padding: 10px 0 10px 10px; margin: 0 0 5px 0; background: #4290c8; text-transform: uppercase; font-weight: 900; color: #FFF; font-size: 1.2em; } header#desktopLandings .midle .right .box .hover a, section .midle .right .box .hover a{ float: left; width: 100%; padding: 0 0 5px; cursor: pointer; } x 10px; margin: 0 0 5px 0; background: #ffd504; text-transform: uppercase; font-weight: 900; color: #FFF; font-size: 1.2em; } header#desktopLandings .midle .right .box .hover a { float: left; width: 100%; padding: 0 0 5px; cursor: pointer; } header#desktopLandings .midle .right .box .hover a:hover p { text-decoration: underline;font-size: 12px;cursor:pointer; } header#desktopLandings .midle .right .box .hover a:hover { text-decoration: underline;font-size: 12px;cursor:pointer; } /*----------------------------- BOTAO COMPRE SUA PASSAGEM -----------------------------*/ header#mobile .midle .row{ display: flex; align-items: center; height: 100%; } header#mobile .midle .row h1 { width:20%; } header#mobile .midle .row .right { display: flex; align-items: center; margin: 6px 0; margin-left: 5.4%; } header#mobile .midle .row .right .divContato { position: relative; display: inline-block; clear: both; width: 260px; height: 50px; } header#mobile .midle .row .right .divContato .box { margin-top: 0; position: absolute; } header#mobile .midle .row .right .boxHeaderComprarPassagem { padding: 10px 10px; margin: 0; background-color: #014886; width: 42%; margin-left: 5%; } header#mobile .midle .row .right .boxHeaderComprarPassagem .imgComprarPassagem { width: 50px; vertical-align: middle; display: inline-block; } header#mobile .midle .row .right .boxHeaderComprarPassagem h2 { color: #FFD301; display: inline-block; vertical-align: middle; margin-left: 5px;font-size: 18px; } section#header-fixed .midle .row{ display: flex; align-items: center; } section#header-fixed .midle .row h1 { width:20%; } section#header-fixed .midle .row .right { display: flex; align-items: center; margin-left: 5.4%;} section#header-fixed .midle .row .right .divContato { position: relative; display: inline-block; clear: both; width: 260px; height: 50px; } section#header-fixed .midle .row .right .divContato .box { margin-top: 0; position: absolute; } section#header-fixed .midle .row .right .boxHeaderComprarPassagem { padding: 10px 10px; margin: 0; background-color: #014886; width: 42%; margin-left: 15%; } section#header-fixed .midle .row .right .boxHeaderComprarPassagem .imgComprarPassagem { width: 50px; vertical-align: middle; display: inline-block; } section#header-fixed .midle .row .right .boxHeaderComprarPassagem h2 { color: #FFD301; display: inline-block; vertical-align: middle; margin-left: 5px;font-size: 18px; } header#desktop .midle.btnCompraPassagem .row h1 { width:20%; } header#desktop .midle.btnCompraPassagem .row .right { float: right; margin-top: 0; margin-left: 7.4%; width: 88%; } header#desktop .midle.btnCompraPassagem .row .right .divContato { position: relative; display: inline-block; clear: both; width: 260px; height: 50px; } header#desktop .midle.btnCompraPassagem .row .right .divContato .box { margin-top: 0; position: absolute; } header#desktop .midle.btnCompraPassagem .row .right .boxHeaderComprarPassagem { padding:8px 10px; margin: 0; background-color: #014886; width: 40%; margin-left: 2%; } header#desktop .midle.btnCompraPassagem .row .right .boxHeaderComprarPassagem .imgComprarPassagem { width: 50px; vertical-align: middle; display: inline-block; } header#desktop .btnCompraPassagem .row .right .boxHeaderComprarPassagem h2 { color: #FFD301; display: inline-block; vertical-align: middle; margin-left: 5px;font-size: 18px; } div.btnCompraPassagem { background-image: url(../../../images/bg_cabecalho.png) !important; clear: both; background-color: #f6f6f6; background-repeat: no-repeat !important; background-size: contain !important; background-position: 22% !important; padding: 17px 0; } header#desktop div.btnCompraPassagem { background-color: #f6f6f6; z-index: 1; height: auto; } #header-fixed div.btnCompraPassagem { height: auto; padding: 15px 0; } section#header-fixed .midle.btnCompraPassagem .row .right { display: initial; align-items: initial; width: 95%; margin: 0; text-align: center;} #header-fixed .btnCompraPassagem .row .right div.divFormasPgto img { margin-left: 24px; } #header-fixed div.divFormasPgto p { margin-left: 25px; } section#header-fixed .midle.btnCompraPassagem .row .right div.divFormasPgto { margin-right: 0; } #header-fixed div.btnCompraPassagem { background-size: contain !important; background-color: #fff; background-image: none !important; background-position: 50% !important; } div.divFormasPgto { margin: 0 1%; float: right; margin-right: 1%; width: 39%; text-align: left; margin-top: 5px; } div.divFormasPgto p { display: block; font-size: 14px; font-weight: bold; margin-left: 10px; text-align: left; } div.divFormasPgto img { margin-left: 10px;margin-top: 12px; } header#mobile .midle .row .right.compraPassagem { width: 100%; display: initial; align-items: initial; text-align: center; } header#mobile .midle .row .right.compraPassagem div.divFormasPgto { width: 38%; } header#mobile .midle.btnCompraPassagem { background-color: #fff !important; background-position: 57% !important; padding: 10px 0; } header#desktop div.divFormasPgto { width: 45%; } @media (max-width:1170px) { .midle .row .right .boxHeaderComprarPassagem img { width: 28px !important; } .midle .row .right .boxHeaderComprarPassagem { padding: 17px 5px !important; } header#mobile .midle .row .right .boxHeaderComprarPassagem h2 { font-size: 14px; } section#header-fixed .midle .row .right .boxHeaderComprarPassagem h2 { font-size: 14px; } header#desktop .midle .row .right .boxHeaderComprarPassagem h2 { font-size: 14px; } section#header-fixed .midle .row .right .boxHeaderComprarPassagem { margin-left: 8%; } } @media (max-width:1060px) { section#header-fixed .midle .row .right .boxHeaderComprarPassagem { width: 50%/**/; padding: 8px 8px; } section#header-fixed .midle .row .right .boxHeaderComprarPassagem h2 { font-size: 14px; } } @media (max-width:980px) { section#header-fixed .midle .row .right .divContato { display: none; } section#header-fixed .midle .row .right .boxHeaderComprarPassagem { width: 52%/**/ !important; padding: 10px 10px; } section#header-fixed .midle .row .right .boxHeaderComprarPassagem h2 { font-size: 14px; } section#header-fixed .midle .row h1 { width: 30% !important; } header#mobile .midle .row .right .divContato { display: none; } header#mobile .midle .row .right .boxHeaderComprarPassagem { width: 52%/**/ !important; padding: 17px 10px; } header#mobile .midle .row .right .boxHeaderComprarPassagem h2 { font-size: 14px; } header .midle .row .right .boxHeaderComprarPassagem img { width: 25px !important; } .midle .row .right .boxHeaderComprarPassagem img { width: 28px !important; } header#mobile .midle .row h1 { width: 30% !important; } div.divFormasPgto p { font-size: 13px; } header#desktop .midle .row .right .divContato { display: none; } header#desktop .midle .row .right .boxHeaderComprarPassagem { width: 45%/**/ !important; padding: 10px 10px; } header#desktop .midle .row .right .boxHeaderComprarPassagem h2 { font-size: 14px; } header#desktop .midle .row h1 { width: 30% !important; } } @media (max-width:560px) { section#header-fixed .midle .row .right .divContato { display: none; } section#header-fixed .midle .row .right .boxHeaderComprarPassagem { width: 52%/**/ !important; padding: 10px 10px; } section#header-fixed .midle .row .right .boxHeaderComprarPassagem h2 { font-size: 14px; } section#header-fixed .midle .row h1 { width: 30% !important; } header#mobile .midle .row .right .divContato { display: none; } header#mobile .midle .row .right .boxHeaderComprarPassagem { width: 52%/**/ !important; padding: 10px 5px !important; } header#mobile .midle .row .right .boxHeaderComprarPassagem h2 { font-size: 12px; } header#mobile .midle .row h1 { width: 30% !important; } header#desktop .midle .row .right .divContato { display: none; } header#desktop .midle .row .right .boxHeaderComprarPassagem { width: 52% !important; padding: 10px 10px; } header#desktop .midle .row .right .boxHeaderComprarPassagem h2 { font-size: 14px; } header#desktop .midle .row h1 { width: 30% !important; } } /**/ #LandingsViop .menu-landins-center { width: 100%; float:left; position: relative; background: #3587da; display: block; overflow: hidden; } #LandingsViop .menu-landins-center ul { top:0; left: 50%; margin: 0 0 0 -327px } #LandingsViop .menu-landins-center ul li a{ cursor: pointer; width:; padding: 0 20px; margin: 0 0 50px 0; border-right: 2px solid #FFF; color: #FFF; font-size: 1.4em; text-transform: uppercase; font-weight: 700; float:left; } #LandingsViop .menu-landins-center ul li a:hover { text-decoration: underline; } #LandingsViop .menu-landins-center ul li:last-child a{ border: 0 } #LandingsViop .second { width: 100%; float:left; position: relative; background: #ffdf3e; color: #666666; text-align: center; } #LandingsViop .container .second{display: flex; align-items: center;} #LandingsViop .second h2 { width: 100%; height:; float:left; font-size: 3.8em; text-transform: uppercase; font-weight: 200 } #LandingsViop .second h2 b { color: #3587da } #LandingsViop .second p { width: 100%; height:; float:left; font-size: 1.6em; line-height: 1.8; padding: 20px 0 0 } #LandingsViop .content { width: 100%; float:left; position: relative; background: #f7f7f7; color: #666666; } #LandingsViop .content h3 { width: 100%; height:; padding: 0 0 0 0; float:left; font-size: 2.6em; text-transform: uppercase; font-weight: 900 } #LandingsViop .content ul { width: 100%; float:left; } #LandingsViop .content ul li { width: 20%; padding: 15px 10px 10px 10px; float:left; text-align: center; border: 1px solid transparent; transition: .3s; border-radius: 5px; box-shadow: 0px 3px 5px #00000000;} #LandingsViop .content ul li:hover { border-color: #CCC; transform: translateY(-3px); box-shadow: 0px 3px 5px #0000004a;} .layout-5-icones{display: flex; flex-wrap: wrap; margin-bottom: 5px; justify-content: center;} .layout-5-icones li{height: auto !important; flex: 1; cursor: pointer;} #LandingsViop .content ul li i { width: 138px; height:138px; position: relative; top:0; left: 50%; margin: 0 0 0 -69px; float: left;border-radius: 80px; } #LandingsViop .content p { width: 100%; height:; float:left; font-size: 1.6em; line-height: 1.8; padding: 20px 0 0 } #LandingsViop .content ul li i.one { background-position: -358px -451px } #LandingsViop .content ul li i.two { background-position: -508px -451px } #LandingsViop .content ul li i.tre { background-position: -658px -451px } #LandingsViop .content ul li i.fou { background-position: -808px -451px } #LandingsViop .content .left { float: left; width: 46.5% } #LandingsViop .content .right { float: right; width: 46.5% } #LandingsViop .content .box { float: left; width: 100%; height: 520px; margin: 0 0 0; padding:4% 7.5%; position: relative; background: #FFF; border-bottom: 2px solid #e8e8e8; } #LandingsViop .content .box h4 { float: left; font-size: 2.6em; text-transform: uppercase; font-weight: 300 } #LandingsViop .content .box p { width: 70%; clear: both; float: left; margin: 0; padding: 8px 0 0 0; line-height: 1.5; font-size: 1.4em !important; font-style: italic; font-weight: 400;text-align: left;color: #9d9d9d; } #LandingsViop .content .box a { color: #9d9d9d; clear: both; float: left; margin: 1em 0 0 0; font-size: 1.4em; text-decoration: underline; font-weight: 400 } #LandingsViop .content .box input { width: 100%; height: 50px; margin: 2em 0 0 0; padding: 0 3.5%; float: left; clear: both; border: 0; font-size: 2.0em; font-style: italic; border-top: 2px solid #e8e8e8; border-bottom: 0; background: #F7F7F7;font-weight: 200; } #LandingsViop .content .box input::-webkit-input-placeholder { color: #666; } #LandingsViop .content .box input:-moz-placeholder { color: #666; } #LandingsViop .content .box input::-moz-placeholder { color: #666; } #LandingsViop .content .box input:-ms-input-placeholder { color: #666; } #LandingsViop .content .box button { width: auto; clear: both; float: left; margin: 2em 0 0 0; padding: 0 4em; height: 50px; background: #4391c8; text-transform: uppercase; font-weight: 300; font-size: 2em; color: #FFF; border:0; cursor: pointer; } #LandingsViop .content .box button:hover { background: rgba(67, 145, 200, 0.66) } #LandingsViop .content .box.fundo { background: url(../img/viop-footer-landing.png) no-repeat #FFF; background-position: bottom right } #LandingsViop .content .right .box input { width: 60% } #LandingsViop { width: 100%; height: auto; position: relative; background:#F7F7F7; float: left; z-index: 1} #LandingsViop .banner-top { position: relative; z-index: 1 } #LandingsViop .carousel { background: #3587da; } #LandingsViop .carousel-cell { height: 38vw; max-height: 665px; background-position: center center !important; background-size: 2560px 665px !important; background-repeat: no-repeat !important; } @media (max-width:1170px) { } .btnLandingValeOnline { display: none } .btnLandingEstudantes { display: none } .btnLandingFretamento { display: none } .LandingValeOnline .btnLandingValeOnline { display: block !important; } .LandingEstudantes .btnLandingEstudantes { display: block !important; } .LandingFretamento .btnLandingFretamento { display: block !important; } .LandingValeOnlineInterna header#desktopLandings { background: #3587da; position: relative; } .LandingValeOnlineInterna #InternaSetor1 { padding: 0; } #InternaSetor1 .content .left { padding: 0 } .LandingValeOnlineInterna #LandingsViop .content .left { float: left; width: 65% } .LandingValeOnlineInterna #LandingsViop .content .right { float: right; width: 25%; } .LandingValeOnlineInterna #LandingsViop .content .right p { font-size: 1em } .LandingValeOnlineInterna #LandingsViop .content { padding:0; } .LandingValeOnlineInterna #LandingsViop .content ul li i { margin: 0 !important; } .LandingValeOnlineInterna #LandingsViop .content ul li { text-align: left } /* --- LANDING ESTUDANTES --- */ .LandingEstudantes #LandingsViop .carousel { background: #ffdf3e !important; } .LandingEstudantes #LandingsViop .menu-landins-center { background: #ffdf3e } .LandingEstudantes #LandingsViop .menu-landins-center a { color: #0a93de; border-right: 2px solid #0a93de; } .LandingEstudantes #LandingsViop .second { background: #3587da; } .LandingEstudantes #LandingsViop .second h2 b { color: #ffdf3e; } .LandingEstudantes .sprites.logo-headerLandings { background-position: -36px -30px; } .LandingEstudantes #LandingsViop .second p { color: #FFF } .LandingEstudantes #LandingsViop .content ul li { background: #FFF; width: 30.3%; margin: 3% 1.5% 0; padding: 4% 2.5% 4%; height: 290px; } .LandingEstudantes #LandingsViop .content ul li.double { height: 617px; } .LandingEstudantes #LandingsViop .content ul li i { width: 54px; height: 54px; border-radius: 50%; position: relative; top: 0; left: 50%; margin: 0 0 5px -27px; float: left; background: #ffdf3e; color: #FFF; font-size: 3.1em; font-weight: 700; font-style: normal; padding: 6px 0 0; text-align: center; } .LandingEstudantes #LandingsViop .content p { font-size: 1.3em } .LandingEstudantes #LandingsViop .content .all { width: 50%; padding:0 7.5% 0 0; float: left } .LandingEstudantes #LandingsViop .second.two { margin: 5% 0 0 } .LandingEstudantes #LandingsViop .second.two h2 { font-size: 2.8em } .LandingEstudantes #LandingsViop .second.two a { color: #ffdf3e; text-decoration: underline; } .LandingEstudantes #LandingsViop .second.two a:hover { text-decoration: none; } .LandingEstudantes #LandingsViop .second p { width: 80%; margin: 0 0 0 10% } /* --- LANDING FRETAMENTO --- */ .LandingFretamento #LandingsViop .carousel-cell { background-size: cover !important; } .LandingFretamento #LandingsViop .carousel-cell h2 { width: 100%; text-align: center; position: absolute; top: 40%; left: 0; z-index: 999; font-size: 6em; text-transform: uppercase; font-weight: 200; color: #FFF } .LandingFretamento #LandingsViop .menu-landins-center { margin-top: -66px; background: transparent; } .LandingFretamento #LandingsViop .menu-landins-center ul { margin: 0; display: flex; justify-content: center; } .LandingFretamento #LandingsViop .menu-landins-center a { color: #FFF;} .LandingFretamento #LandingsViop .second { background: #3587da; color: #f9de40; } .LandingFretamento #LandingsViop .second.half { width: 50%; height: 370px; } .LandingFretamento #LandingsViop .video { background: url(../img/landings/video.jpg); background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; transition: all 300ms ease-in-out; } .LandingFretamento #LandingsViop .video:hover { opacity: 0.8; } .LandingFretamento #LandingsViop .second h2 b { color: #f9de40; } .LandingFretamento .sprites.logo-headerLandings { background-position: -36px -202px; } .LandingFretamento #LandingsViop .second p { color: #FFF } .LandingFretamento #LandingsViop .content ul li b { font-size: 1.2em; font-weight: 700 } .LandingFretamento #LandingsViop .content ul li.box-white { background: #FFF; width: 47%; margin: 3% 1.5% 0; padding: 1% 2.5% 1%; min-height: 250px; text-align: left; } .LandingFretamento #LandingsViop .content ul li i.one { background-position: -358px -601px } .LandingFretamento #LandingsViop .content ul li i.two { background-position: -508px -601px } .LandingFretamento #LandingsViop .content ul li i.tre { background-position: -658px -601px } .LandingFretamento #LandingsViop .content ul li i.fou { background-position: -808px -601px } .LandingFretamento #LandingsViop .content p { font-size: 1.3em } .LandingFretamento #LandingsViop .content .all { width: 50%; padding:0 7.5% 0 0; float: left } .LandingFretamento #LandingsViop .second.two { margin: 0 0 0; padding: 2.5%; } .LandingFretamento #LandingsViop .second.two h2 { font-size: 2.8em } .LandingFretamento #LandingsViop .second.two a { color: #f9de40; text-decoration: underline; } .LandingFretamento #LandingsViop .second.two a:hover { text-decoration: none; } .LandingFretamento #LandingsViop .second p { font-size: 1rem !important; font-size: 14px;line-height: 30px; padding-top: 8px;} .LandingFretamento #LandingsViop .second p b{ font-weight: 700 } .LandingFretamento header#desktopLandings .midle .right .btn { color: #5a5c5e } .LandingFretamento #LandingsViop .content ul li.frota { width: 30.3%; margin: 3% 1.5% 0; padding: 4% 2.5% 0%; height:; position: relative; background:; } .LandingFretamento #LandingsViop .content ul li.frota img { width: 80%; margin:0 10% } .LandingFretamento #LandingsViop .content ul li.frota .spots { width: auto; height:; background: #f8c95a; color: #666666; position: absolute; top: 30px; right: 10%; border-radius: 25px } .LandingFretamento #LandingsViop .content ul li.frota .spots i { float: left; width: 15px; height: 15px; background-position: -483px -112px; margin: 1px 10px 0 0; margin: 10px; left: 0; } .LandingFretamento #LandingsViop .content ul li.frota .spots p { float: left; font-size: 1.2em; margin:0; width: auto; padding: 4px 11px 0 0; font-weight: 500; } .LandingFretamento #LandingsViop .banner { width: 100%; float: left; margin:0 0 0; text-align: center; } .LandingFretamento #LandingsViop .banner img { } /* --- LANDING KIDS --- */ .LandingKids #LandingsViop .carousel-cell { background-size: cover !important; } .LandingKids #LandingsViop .menu-landins-center { background: url(../img/landings/viopkids-grama.png) repeat-x; margin-top: -63px } .LandingKids #LandingsViop .menu-landins-center .box { margin-top: 62px; padding: 18px 0 0; width: 100%; float: left; background: white; } .LandingKids #LandingsViop .menu-landins-center a { color: #0a93de; border-right: 2px solid #0a93de; margin: 0 0 30px 0; } .LandingKids #LandingsViop .menu-landins-center ul { margin: 0 0 0 -272px } .LandingKids #LandingsViop .second { background: #3587da; } .LandingKids #LandingsViop .second h2 b { color: #f9de40; } .LandingKids .sprites.logo-headerLandings { background-position: -36px -30px; } .LandingKids #LandingsViop .second p { color: #FFF } .LandingKids #LandingsViop .content ul li b { font-size: 1.2em; font-weight: 700 } .LandingKids #LandingsViop .content ul li { background: #FFF; width: 30.3%; margin: 0 1.5% 0; padding: 0; height: auto; } .LandingKids #LandingsViop .content ul li figure { width: 100%; height: 180px; float: left; padding: 0; margin: 0; background-size: cover !important; background-position: center !important } .LandingKids #LandingsViop .content ul li.double { height: 617px; } .LandingKids #LandingsViop .content ul li i { width: 54px; height: 54px; border-radius: 50%; position: relative; top: 0; left: 50%; margin: 0 0 5px -27px; float: left; background: #f9de40; color: #FFF; font-size: 3.1em; font-weight: 700; font-style: normal; padding: 6px 0 0; text-align: center; } .LandingKids #LandingsViop .content p { font-size: 1.3em; padding: 10%; } .LandingKids #LandingsViop .content p .btn { color: #FFF; background:#ffd400; padding: 8px 12px 7px; text-transform: uppercase; font-weight: 700 } .LandingKids #LandingsViop .content p .btn:hover { opacity: 0.8 } .LandingKids #LandingsViop .content .all { width: 50%; padding:0 7.5% 0 0; float: left } .LandingKids #LandingsViop .second.two { margin: 5% 0 0 } .LandingKids #LandingsViop .second.two h2 { font-size: 2.8em } .LandingKids #LandingsViop .second.two a { color: #f9de40; text-decoration: underline; } .LandingKids #LandingsViop .second.two a:hover { text-decoration: none; } .LandingKids #LandingsViop .second p { width: 80%; margin: 0 0 0 10% } /* ---------------- OWL CARROSSEUL ---------------- */ .carroseul { width: 100%; float: left; margin: 5% 0 0 0; } .carroseul .top { width: 100%; float: left; margin: 4% 0 } .carroseul .top h2 { float: left; font-size: 2.6em; font-weight: 200 } .carroseul .top a { float: right; color: #000; text-decoration: underline; font-weight: 400; font-size: 1.1em; margin: 14px 0 0 0 } .carroseul .top a:hover { text-decoration: none; } .carroseul .bottom { width: 100%; float: left; position: relative; } .carroseul .owl-carousel .item{ background: #FFF; border: 1px solid #eeeeed; padding: 3%; margin: 0 6%; color: #000; font-size: 1.05em; text-align: justify; float: left; transition: all 500ms ease-out; letter-spacing: normal; cursor: pointer } .carroseul .owl-carousel .item:hover { border: 1px solid #000; } .carroseul .owl-carousel .item span { display: none } .carroseul .owl-carousel .item img { float: left; width: 100% !important; height: 130px } .carroseul .owl-carousel .item div { float: left; font-size: 1.15em; font-weight: 900; text-transform: uppercase; width: 100%; margin: 5% 0 3% } .carroseul .owl-carousel .item div h4 { float: left; width: 70%; height: 35px; text-align: left; display: block; overflow: hidden; } .carroseul .owl-carousel .item div p { float: right; width: 30%; text-align: right } .carroseul .owl-carousel .item p { float: left; } .carroseul .owl-carousel .oferta { border: 1px solid #000; } .carroseul .owl-carousel .oferta span {display: block; content: "OFERTA "; font-size: 0.85em; float: left; background: #000; padding: 0.5em 0.7em; color: #FFF; border: 1px solid #000; position: absolute; top: 0; left: 6%; } .carroseul .owl-carousel .item .price-ofer { display: none } .carroseul .owl-carousel .oferta .price-ofer { display: block; color: #BBB; text-decoration: line-through; font-weight: 400 } .carroseul .customNavigation{ text-align: center; } .carroseul .customNavigation a{ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .carroseul .owl-pagination { display: none } .carroseul .customNavigation a { width: 18px; height: 37px; background: url(../img/contornos-setas.png); text-indent: -10000px; cursor: pointer; opacity: .3; position: absolute; z-index: 9999 } .carroseul .customNavigation a:hover { opacity: 1 } .carroseul .customNavigation .prev { background-position: 0 0; float: left; left: -20px; top: 50%; margin-top: -21px; } .carroseul .customNavigation .next { background-position: -20px 0; float: right; right: -20px; top: 50%; margin-top: -21px; } .carroseul .customNavigation .play { display: none } .carroseul .customNavigation .stop { display: none } .carroseul .customNavigation .prev2 { background-position: 0 0; float: left; left: -20px; top: 50%; margin-top: -21px; } .carroseul .customNavigation .next2 { background-position: -20px 0; float: right; right: -20px; top: 50%; margin-top: -21px; } /* ---------------- FOOTER ---------------- */ footer { width: 100%; height: auto; padding: 3% 0 0 0; background:#f7f7f7; float: left; z-index: 1} footer .marcas { width: 100%; height: auto; padding: 3% 0 3% 0; background:#FFF; float: left; } footer .marcas li { width: 16.666%; float: left; text-align: center; } footer .midle { width: 100%; height: auto; padding: 3% 0 3% 0; background:#035ba2; float: left; } footer .midle.footer-ajuste { padding: 0; } footer .midle.footer-ajuste li.right .box { margin: 0; } footer .midle.footer-ajuste p{text-align: center;} footer .midle.footer-ajuste li.right p { margin: 0; } .midle.footer-ajuste .row{display: flex; justify-content: center; align-items: center;} footer .midle li.logo { width: 300px !important; } footer .midle li.logo a { float: left; width: 261px; height: 61px; margin: 30px 0 } footer .midle li.logo p { float: left; display: none; } footer .midle li.right p b{ font-weight: 700 } footer .midle li.right p { float: left; color: #FFF; font-size: 1.1em; width: 100%; line-height: 2.2 } footer .midle li.right .box { margin: 1em 5em 0 0; font-size: 1.3em; width: 100%; } footer .links { width: 100%; height: auto; padding: 3% 0 0 0; background:#0c6dbc; float: left; } footer .links .list-links { width: 100%; float: left; } footer .links .list-links li { float: left; width: 20% } footer .links .list-links li h5 { float: left; width: 100%; color: #FFF; font-weight: 700; font-size: 1.3em; text-transform: uppercase; } footer .links .list-links li p { float: left; width: 100%; padding: 0 5em 1.2em 0; color: #d1ecff; font-size: 1.1em; font-style: italic; line-height: 1.4 } footer .links .list-links li p:hover { text-decoration: underline; } footer .links .last-links { float: left; width:100%; background: #ffd400; color:#0c6dbc; padding: 0.5em 0 0.5em 0; margin: 4em 0 0 } footer .links .last-links .left { float: left; text-transform: uppercase; margin: 5px 0 0; } footer .links .last-links .left a { float: left; font-size: 1.1em; color:#0c6dbc; margin: 1.5em 1.5em; } footer .links .last-links .left a:first-child { margin: 1.5em 0; } footer .links .last-links .left a:hover { text-decoration: underline; } footer .links .last-links .left a p{ font-weight: 500; } footer .links .last-links .right { float: right; } footer .links .last-links .right p { float: left; font-weight: 700; font-size: 1.4em; margin-top: 20px; } footer .links .last-links .right figure { float: left; width: 100px; height: 70px; background-position: -350px -115px; padding: 0; margin: -15px 0 0 10px; } footer .links .last-links .right a { float: left; } footer .links .last-links .right a:hover { opacity: .7 } footer .links .last-links .right a i { float: left; color:#0c6dbc; font-size: 2.8em; margin: 13px; } footer .links .bottom { float: left; width:100%; color: #FFF; opacity: .5; font-size: 1.1em; font-style: italic; padding: 2em 0 } footer .links .bottom .left { float: left; } footer .links .bottom .right { float: right; } /* ---------------- MAPA DO PONTO DE VENDAS ---------------- */ ul#map {display: block; margin: 0; padding: 0; width: 570px; height: 585px; background-image: url('../img/map/map.png'); float: left } ul#map li {display: block; padding: 0; position: absolute;} li#crs {margin-top: 485px; margin-left: 237px; } li#csc {margin-top: 467px; margin-left: 292px;} li#cpr {margin-top: 416px; margin-left: 281px;} li#csp {margin-top: 375px; margin-left: 303px; z-index:9999; } li#cms {margin-top: 336px; margin-left: 229px;} li#crj {margin-top: 390px; margin-left: 422px; z-index:9999; } li#ces {margin-top: 347px; margin-left: 467px; z-index:9999; } li#cmg {margin-top: 292px; margin-left: 333px; z-index:9998; } li#cgo {margin-top: 264px; margin-left: 301px; z-index:9999; } li#cdf {margin-top: 311px; margin-left: 373px; z-index:9999; } li#cba {margin-top: 207px; margin-left: 397px;} li#cmt {margin-top: 189px; margin-left: 180px;} li#cro {margin-top: 199px; margin-left: 104px; z-index:9998; } li#cac {margin-top: 185px; margin-left: 0px;} li#cam {margin-top: 46px; margin-left: 3px;} li#crr {margin-top: 0; margin-left: 133px;} li#cpa {margin-top: 40px; margin-left: 219px;} li#cap {margin-top: 13px; margin-left: 278px;} li#cma {margin-top: 94px; margin-left: 366px; z-index:9999;} li#cto {margin-top: 156px; margin-left: 338px;} li#cse {margin-top: 221px; margin-left: 519px; z-index:9998;} li#cal {margin-top: 211px; margin-left: 518px; z-index:9999;} li#cpe {margin-top: 188px; margin-left: 473px;} li#cpb {margin-top: 169px; margin-left: 511px; z-index:9999;} li#crn {margin-top: 151px; margin-left: 514px;} li#cce {margin-top: 121px; margin-left: 473px;} li#cpi {margin-top: 120px; margin-left: 406px; z-index:9997;} ul#map li a {display: block; text-decoration: none; position: absolute;} a#rs {width: 116px; height: 101px; } a#sc {width: 81px; height: 53px; } a#pr {width: 97px; height: 64px; } a#sp {width: 131px; height: 84px; } a#ms {width: 106px; height: 104px; } a#rj {width: 58px; height: 40px; } a#es {width: 33px; height: 51px; } a#mg {width: 163px; height: 131px; } a#go {width: 108px; height: 108px; } a#df {width: 16px; height: 9px; } a#ba {width: 136px; height: 148px; } a#mt {width: 166px; height: 161px; } a#ro {width: 104px; height: 87px; } a#ac {width: 108px; height: 62px; } a#am {width: 258px; height: 181px;} a#rr {width: 87px; height: 103px; } a#pa {width: 188px; height: 187px; } a#ap {width: 73px; height: 85px; } a#ma {width: 102px; height: 139px; } a#to {width: 74px; height: 125px; } a#se {width: 28px; height: 32px; } a#al {width: 46px; height: 27px; } a#pe {width: 97px; height: 34px; } a#pb {width: 59px; height: 35px; } a#rn {width: 53px; height: 33px; } a#ce {width: 61px; height: 76px; } a#pi {width: 83px; height: 124px; } /* Código pronto via http://css.spritegen.com (com alterações nos seletores) */ a#pa:hover, a#pa:active, a#am:hover, a#am:active, a#mt:hover, a#mt:active, a#ba:hover, a#ba:active, a#ma:hover, a#ma:active, a#mg:hover, a#mg:active, a#to:hover, a#to:active, a#pi:hover, a#pi:active, a#go:hover, a#go:active, a#ms:hover, a#ms:active, a#rr:hover, a#rr:active, a#rs:hover, a#rs:active, a#ro:hover, a#ro:active, a#ap:hover, a#ap:active, a#sp:hover, a#sp:active, a#ce:hover, a#ce:active, a#pr:hover, a#pr:active, a#ac:hover, a#ac:active, a#sc:hover, a#sc:active, a#es:hover, a#es:active, a#rj:hover, a#rj:active, a#pb:hover, a#pb:active, a#pe:hover, a#pe:active, a#rn:hover, a#rn:active, a#se:hover, a#se:active, a#al:hover, a#al:active, a#df:hover, a#df:active { display: block; background: url('../img/map/sprite.png') no-repeat; } a#pa:hover, a#pa:active { background-position: -10px -0px; width: 188px; height: 187px; } a#am:hover, a#am:active { background-position: -10px -197px; width: 258px; height: 181px; } a#mt:hover, a#mt:active { background-position: -10px -388px; width: 166px; height: 161px; } a#ba:hover, a#ba:active { background-position: -10px -559px; width: 136px; height: 148px; } a#ma:hover, a#ma:active { background-position: -156px -559px; width: 102px; height: 139px; } a#mg:hover, a#mg:active { background-position: -10px -717px; width: 163px; height: 131px; } a#to:hover, a#to:active { background-position: -183px -717px; width: 74px; height: 125px; } a#pi:hover, a#pi:active { background-position: -10px -858px; width: 83px; height: 124px; } a#go:hover, a#go:active { background-position: -103px -858px; width: 108px; height: 108px; } a#ms:hover, a#ms:active { background-position: -103px -976px; width: 106px; height: 104px; } a#rr:hover, a#rr:active { background-position: -10px -992px; width: 87px; height: 103px; } a#rs:hover, a#rs:active { background-position: -107px -1090px; width: 116px; height: 101px; } a#ro:hover, a#ro:active { background-position: -10px -1201px; width: 104px; height: 87px; } a#ap:hover, a#ap:active { background-position: -10px -1105px; width: 73px; height: 85px; } a#sp:hover, a#sp:active { background-position: -124px -1201px; width: 131px; height: 84px; } a#ce:hover, a#ce:active { background-position: -186px -388px; width: 61px; height: 76px; } a#pr:hover, a#pr:active { background-position: -124px -1295px; width: 97px; height: 64px; } a#ac:hover, a#ac:active { background-position: -10px -1298px; width: 108px; height: 62px; } a#sc:hover, a#sc:active { background-position: -128px -1369px; width: 81px; height: 53px; } a#es:hover, a#es:active { background-position: -208px -0px; width: 33px; height: 51px; } a#rj:hover, a#rj:active { background-position: -186px -474px; width: 58px; height: 40px; } a#pb:hover, a#pb:active { background-position: -10px -1370px; width: 59px; height: 35px; } a#pe:hover, a#pe:active { background-position: -10px -1415px; width: 97px; height: 34px; } a#rn:hover, a#rn:active { background-position: -186px -524px; width: 53px; height: 33px; } a#se:hover, a#se:active { background-position: -208px -61px; width: 28px; height: 32px; } a#al:hover, a#al:active { background-position: -208px -103px; width: 46px; height: 27px; } a#df:hover, a#df:active { background-position: -208px -140px; width: 16px; height: 9px; } /* Fim sprite */ ul#map li a img {border: 0; width: inherit; height: inherit;} #youtube-iframe {width: 100%;height: 100%;position: absolute;top: 0;left: 0;} .conteinerSecao{ float: left;width: 100%; } .titulo_secao{ width: 100%; padding: 0 0 0 0; font-size: 3.6em; text-transform: uppercase; font-weight: 900; max-width: 1260px; margin: 0 auto; } #LandingsViop h3.titulo_secao{ text-align: center; padding: 0 25px; } #LandingsViop .content .box input.input_padrao { width: 42%; clear: inherit; float:left; } #LandingsViop .content .box input.left { margin-right: 50px; } .scrollTop{ display:none;background:none;cursor: pointer;border: none; background-repeat: no-repeat; width: 40px; height: auto; position: fixed;right: 25px; bottom: 8.5%; z-index: 20;} .active-nav-icon{display:block !important;} .spacingIcons{ padding-bottom: 5px; } .boxHeader { margin:0 20px; display: inline-block; text-align: center;} .boxHeader-Intermunicipal { background: #4391c8; color: #fff; padding: 12px 40px; margin-left: 90px; cursor: pointer;} .boxHeader-h2 { font-size: 15px;color: #fff;font-weight: bold; } .boxHeader-Interestadual{ background: #ffd400; color:#001862; padding: 12px 40px; cursor: pointer;} .boxHeader-h2-Estadual{ color:#001862; font-size: 15px; font-weight: bold; } .fixed-boxHeader { margin:0 20px; display: inline-block; text-align: center; width: 30%;} .arrowBig-boxHeader { width: 40px; height: 48px; background-position: -694px -209px; display:inline-block; } .botao-site-ouro-e-prata{ text-decoration: none; color: white; position: absolute; top: 70px; left: 50px; padding: 5px; z-index: 100; } .botao-site-ouro-e-prata:hover{ color: rgb(199, 215, 248); } .botao-site-ouro-e-prata { height: auto !important; width: auto !important; transform: translateY(5px); } .smoth.btn.click4.btnLandingFretamento.botao-mobile{ display: none !important; width: auto; float: left; padding: 10px 13px 8px; margin: 6px 0 0 15px; background: #ffd400; font-size: 1.1em; text-transform: uppercase; float: right; position: absolute; right: 0; top: 28px; } .dados-contatos{ display: grid; grid-template-columns: 1fr 1fr 1fr; } .dados-contatos a{ color: #FFF !important; text-decoration: none !important;} .dados-contatos a:hover{ text-decoration: none !important; font-size: .9rem !important; } .fixed-br{ display: block !important; } #contatos { transform: translateY(95px); } .relative{position: relative;} .aviso-fretamento{ position: absolute; left: 50%; transform: translateX(-50%); width: fit-content; padding: 4px 20px; background-color: #df1616; color: #FFF; bottom: 33%; z-index: 9; font-size: .95rem; border-radius: 5px; white-space: nowrap; } .video-layout{ background-color: #3587da; } .video-layout > .container{ display: flex; gap: 25px; } .container{ max-width: 1260px; width: 90%; margin: 0 auto; } .layout-mt{margin: 65px 0 0 0;} .layout-texto h1, .layout-texto h2, .layout-texto h3{ width: 100% !important; color: #717171; margin-bottom: 40px; } .layout-texto h1 b, .layout-texto h2 b, .layout-texto h3 b{font-weight: 700;} .layout-texto h1{font-size: 3.8em;} .layout-texto h2{font-size: 3.2em;} .layout-texto h3{font-size: 2.6em;} .layout-texto b{ font-weight: 700; color: #717171; } .layout-texto figure{max-width: 50%;} .layout-texto img{ border: none; border-radius: 5px; margin: 0; width: 100% !important; } .layout-texto p.texto, .layout-texto div.texto{ font-size: 1rem !important; padding: 0 !important; line-height: 120%; } .layout-texto div.texto, .layout-texto div.texto span, .layout-texto div.texto p{ line-height: 100% !important; width: 100% !important; } .text-flex{ display: flex; align-items: center; gap: 25px; } .text-flex > div{ width: 50%; } .text-flex > div p{width: 100% !important;} .absolute-video > a, .absolute-video > iframe{ position: absolute !important; left: 0; width: calc(50vw - 20px) !important; } .force-100{width: 100% !important;} .telefones > p.title.first{margin-top: 10px !important;} .telefones > p.title{ background-color: #3587da; padding: 5px !important; color: #FFF !important; width: 100%; } .telefones > p a:hover{ font-size: 12px !important; color: #000000 !important; font-weight: normal; text-decoration: underline; } .ouroeprata{ text-align: center; margin: 0 0 0 5px !important; } .booking-form { position: relative; width: 100%; margin: auto; background: #182e71; display: flex; gap: 15px; align-items: center; height: 44px; } .booking-form>form { display: flex; gap: 15px; align-items: center; max-width: 1260px; justify-content: center; gap: 57px; margin: 0 auto; position: relative; } .booking-form>form>div:first-child { display: flex; align-items: center; gap: 15px; } .booking-form>form:first-child>div>span { display: flex; flex-direction: column; align-items: center; gap: 2px; } .booking-form>form:first-child>div>span>img {width: 24px;} .booking-form .form-header { text-align: center; position: relative; display: flex; flex-direction: column; text-align: left; } .booking-form .form-header h1 { margin: 0; color: #fff; font-size: 1rem; } .form-group.between { display: flex; gap: 10px; align-items: center; } .booking-form .form-group { position: relative; } .form-group.between div { width: 100%; position: relative; cursor: pointer; } .booking-form input.form-control { padding-top: 16px; text-align: center; } .booking-form .form-control { background-color: #fff; height: 31px; padding: 0 25px; border: none; border-radius: 7px; -webkit-box-shadow: 0 0 0 2px transparent; box-shadow: 0 0 0 2px transparent; -webkit-transition: .2s; transition: .2s; font-size: 15px; z-index: 99999; color: #808080f0; width: 178px; font: 14px 'Open Sans', Helvetica, Arial, sans-serif; } .booking-form .form-label { position: absolute; left: 25px; color: #404040; font: 12px 'Open Sans', Helvetica, Arial, sans-serif; letter-spacing: 1.3px; height: 15px; line-height: 15px; -webkit-transition: .2s all; transition: .2s all; opacity: 1; cursor: pointer; top: 9px; } .form-control:focus~label, .form-control:not([value=""])~label { top: 2px; font-size: 10px; color: gray; } .submit-btn { font-weight: 700 !important; font-size: 14px !important; text-shadow: none !important; border: none !important; box-shadow: none !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; border-image: none !important; height: 32px !important; background: gold; border: 1px solid #182e71 !important; color: #061b65; width: 100%; border-radius: 7px; cursor: pointer; padding-inline: 33px; text-transform: uppercase; } .form-group.between div>a>i:first-child { font-size: .9rem; cursor: pointer; right: 4px; top: 5px; position: absolute; right: 4px; color: #808080f0; top: 5px; } .fa-solid, .fas { font-family: "Font Awesome 6 Free"; font-weight: 900; } .fa-circle-question:before, .fa-question-circle:before { content: "\f059"; } *, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box; } .form-group.between div>a>i:first-child { font-size: .9rem; cursor: pointer; right: 4px; top: 5px; position: absolute; right: 4px; color: #808080f0; top: 5px; } @media (max-width: 853px) { .booking-form { height: unset !important; padding: 20px 7px !important; } .booking-form form { gap: 10px !important; margin-right: 25px; align-items: flex-end; } } @media (max-width: 650px) { .booking-form form, .form-group.between { flex-direction: column; margin: auto; } .booking-form { padding-bottom: 38px !important; } } @media (max-width: 850px) { .LandingFretamento header#desktopLandings { position: unset !important; background: #001862 !important; } } @media (max-width: 1060px) { header#desktopLandings .midle .right .box { display: none; } }