@charset "UTF-8"; /*#region URL: /content/styles/pagespecific/planos-saude.scss */ /*sf_variables.less*/ /*$fontColor: lighten($borderColor, 25%) !default; $hoverColor: lighten($borderColor, 50%) !default;*/ /*$styled-font: 'Droid Serif', serif;*/ /*$base-font: 'Open Sans', sans-serif;*/ /*$input-btn-padding-y: .8rem !default; $input-btn-padding-x: 1.75rem !default; $input-btn-line-height: $line-height-base !default;*/ /*$btn-padding-y: 0.8rem; //$input-btn-padding-y !default; // original boostrap $btn-padding-x: 1.75rem; // $input-btn-padding-x !default; // original boostrap*/ /*MEDIA QUERY FOR OUTDOOR*/ /*Classe base para o outdoor, ela não descreve nenhum conteudo, mas o tamanho e forma do outdoor, para conteudo, use as classes outdoor-texts ou outdoor-form */ #outdoor { display: flex; position: relative; background-position: 40% 30%; background-size: 350%; min-height: 550px; flex-direction: column; justify-content: center; /*line-height: 1.2;*/ } @media (min-width: 576px) { #outdoor { background-size: 100%; background-size: cover; background-position: center 35%; } } @media (min-width: 639px) and (orientation: portrait) { #outdoor { max-height: 200px; } } #outdoor.outdoor-forms-with-title { justify-content: space-evenly; } #outdoor.outdoor-forms-with-title .outdoor-title { display: block; text-align: center; font-size: 28px; flex-direction: column; align-self: stretch; } @media (min-width: 576px) { #outdoor.outdoor-forms-with-title .outdoor-title { top: 0.5rem; font-size: 40px; } } @media (min-width: 1440px) { #outdoor.outdoor-forms-with-title .outdoor-title { top: 2.5rem; font-size: 56px; } } #outdoor.outdoor-fullscreen { width: 100vw; overflow: hidden; position: relative; height: calc(100vh - 110px); min-height: 550px; position: relative; } @media (max-width: 575px) and (max-height: 550px) { #outdoor.outdoor-fullscreen { min-height: 210px; } } #outdoor .outdoor-texts { position: absolute; display: flex; flex-direction: row; top: 0; left: 0; right: 0; bottom: 0; justify-content: center; flex-wrap: wrap; flex-grow: 0; color: rgba(211, 111, 120, 0.98); font-weight: 700; /*justify-content: center;*/ } @media (min-width: 576px) { #outdoor .outdoor-texts { padding-right: 1rem; } } @media (min-width: 768px) { #outdoor .outdoor-texts { padding-top: 0; padding-left: 0; } } #outdoor .outdoor-texts .row-form { margin: 0; } #outdoor .outdoor-texts .row-form [class*="col"] { padding: 0.1666rem 0.3333rem; } #outdoor .outdoor-texts .text-div-center-box { padding: 1rem 2rem; background-color: rgba(200, 200, 200, 0.5); } #outdoor .outdoor-texts > div:nth-child(1) { width: 100%; align-self: flex-start; text-align: center; /*font-size: 5vw;*/ margin-top: 30px; padding: 10px; font-size: 31px; font-family: Lobster, Montserrat; font-weight: normal; } @media (min-width: 576px) { #outdoor .outdoor-texts > div:nth-child(1) { margin-top: 10px; text-align: center; font-size: 45px; } } @media (min-width: 1440px) { #outdoor .outdoor-texts > div:nth-child(1) { margin-top: 20px; font-size: 56px; } } #outdoor .outdoor-texts .textdiv-center { width: 100%; display: flex; flex-direction: column; align-self: flex-start; margin-top: -40px; color: white; } @media (orientation: landscape) { #outdoor .outdoor-texts .textdiv-center { color: rgba(211, 111, 120, 0.98); text-shadow: none; } } @media (min-width: 576px) { #outdoor .outdoor-texts .textdiv-center { text-align: center; } } @media (min-width: 768px) { #outdoor .outdoor-texts .textdiv-center { margin-top: 0; } } #outdoor .outdoor-form { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; flex-grow: 0; color: rgba(211, 111, 120, 0.98); margin-left: 5%; margin-right: 5%; } #outdoor .outdoor-form select { font-size: 20px; } #outdoor .outdoor-form .btn-outdoor { background-color: #4071be; color: white; } #outdoor .outdoor-form .btn-outdoor:hover { background-color: #335a98; color: white; } #outdoor .outdoor-form.form-on-left { justify-content: flex-start; } #outdoor .outdoor-form.form-on-left > div { margin-left: 0; } @media (min-width: 768px) { #outdoor .outdoor-form.form-on-left > div { margin-left: 0; } } #outdoor .outdoor-form.form-on-right { justify-content: flex-end; } #outdoor .outdoor-form.form-on-right > div { margin-right: 0; } @media (min-width: 768px) { #outdoor .outdoor-form.form-on-right > div { margin-right: 0; } } #outdoor .outdoor-form > div { color: white; display: block; border-radius: 10px; background-color: rgba(100, 150, 150, 0.85); height: auto; align-self: center; width: 50%; padding: 1.5rem 2.5rem; width: 670px; } #outdoor .outdoor-form > div .form-group { margin-bottom: 0.5rem; } #outdoor .outdoor-form > div [class*="col"] { padding: 0.1666rem 0.3333rem; } #outdoor .outdoor-form > div h1 { font-size: 2rem; margin-bottom: 0; line-height: 1.3; font-weight: 600; } @media (min-width: 768px) { #outdoor .outdoor-form > div h1 { font-size: 2.5rem; } } #outdoor .outdoor-form > div h2 { font-size: 1.1rem; font-weight: lighter; margin-bottom: 1rem; } #outdoor .outdoor-form > div h2.small { font-size: 0.9rem; } @media (min-width: 768px) { #outdoor .outdoor-form > div h2 { font-size: 1.5rem; } #outdoor .outdoor-form > div h2.small { font-size: 1.2rem; } } #outdoor .outdoor-form > div em { font-weight: normal; font-style: oblique; } #outdoor .outdoor-form > div .ligacao-row .ligacao { display: block; text-align: center; /*Retirada e utilziado os d-none e d-md-block do boostrap diretamente no elemento*/ /*.calcule-por-telefone { display: none; @media (min-width: 768px) { display: inline-block; } }*/ } @media (min-width: 768px) { #outdoor .outdoor-form > div .ligacao-row .ligacao { text-align: left; } } #outdoor .outdoor-form > div .ligacao-row .ligacao span { display: block; font-weight: 300; font-size: 1.1rem; } @media (min-width: 768px) { #outdoor .outdoor-form > div .ligacao-row .ligacao span { display: inline-block; } } #outdoor .outdoor-form > div .ligacao-row .ligacao strong { display: block; font-size: 2rem; font-style: italic; } @media (min-width: 768px) { #outdoor .outdoor-form > div .ligacao-row .ligacao strong { display: inline-block; } } #outdoor .outdoor-form > div .saibamais-row { /*Nivel utilizado para agrupar o texto e a seta para centralizar em mobile*/ } #outdoor .outdoor-form > div .saibamais-row .saibamais { display: block; text-align: center; } @media (min-width: 768px) { #outdoor .outdoor-form > div .saibamais-row .saibamais { text-align: left; } } @media (max-width: 767px) { #outdoor .outdoor-form.form-with-button-only { justify-content: center; } } @media (min-width: 768px) { #outdoor .outdoor-form.form-with-button-only { margin-right: 10%; } } #outdoor .outdoor-form.form-with-button-only .btn-primary { min-width: 70%; } #outdoor .outdoor-form.form-with-button-only .row { text-align: center; } #outdoor .outdoor-form.form-with-button-only > div { width: 100%; } @media (min-width: 768px) { #outdoor .outdoor-form.form-with-button-only > div { width: 500px; } } #outdoor .outdoor-form.form-with-button-only > div .ligacao-row .ligacao span, #outdoor .outdoor-form.form-with-button-only > div .ligacao-row .ligacao strong { text-align: center; display: block; } #outdoor .outdoor-form.form-with-button-only > div .saibamais-row .saibamais { text-align: center; } @media (min-width: 768px) { #outdoor .outdoor-form.form-with-button-only > div h2 { font-size: 1.4rem; } } #outdoor.outdoor-form-lightblue .outdoor-form > div { background-color: rgba(41, 130, 190, 0.85); } #outdoor.outdoor-form-lightbrown .outdoor-form > div { background-color: rgba(150, 134, 103, 0.85); } #outdoor.outdoor-form-bluegray .outdoor-form > div { background-color: rgba(31, 97, 143, 0.85); } #outdoor.outdoor-form-softGray .outdoor-form > div { background-color: rgba(159, 138, 160, 0.85); } #outdoor.outdoor-form-darkbrown .outdoor-form > div { background-color: rgba(30, 10, 4, 0.85); } #outdoor.outdoor-form-darkpurple .outdoor-title { color: #24213b; } #outdoor.outdoor-form-darkpurple .outdoor-form > div { background-color: rgba(36, 33, 59, 0.85); } #outdoor.outdoor-form-willow-grove .outdoor-form > div { background-color: rgba(107, 128, 95, 0.85); } #outdoor.outdoor-form-bright-blue .outdoor-form > div { background-color: rgba(49, 124, 172, 0.85); } #outdoor.button-purple .btn-primary { background-color: #aa5ddb; border-color: #a350d8; } .button-wrapper { display: inline-block; text-align: center; } /*Exemplo do outdook form-with-button-only*/ /* <div id="outdoor" class="outdoor-fullscreen outdoor-form-darkpurple"> <div class="outdoor-form form-with-button-only form-on-right"> <div> <div class="row"> <div class="col-12"> <h1>Seguro de Casa</h1> <h2>O lugar que guarda os seus bens mais preciosos merece ser bem protegido.</h2> </div> </div> <div class="row"> <div class="col-12"> <button class="btn btn-lg btn-primary btn-rounded" data-gotourl="#cmbOutdoorProdutos" data-gotourl-noselection="Selecione o tipo de seguro na caixa de seleção ao lado e tente novamente.">Calcule Online</button> </div> </div> <div class="row ligacao-row"> <div class="col ligacao"> <span>ou ligue</span> <strong>0800 024 4404 </strong> </div> </div> <div class="row saibamais-row but"> <div class="col-12 "> <div class="saibamais"> <small>Saiba mais sobre <em>Seguro de Casa</em> </small> <div class="d-inline-block animated-very-slow infinite bounce-light"> <a href="javascript: GoToFirstSection(); void(0)" class=""><i class="arrow-xs arrow-down arrow-white"></i></a> </div> </div> </div> </div> </div> </div> </div> */ /*MEDIA QUERY FOR OUTDOOR*/ #outdoor { /*background-image: url('/content/images/outdoor/moto-home-sfr5.jpg'); background-image: url('/content/images/outdoor/moto-homev3-sfr5.jpg');*/ background-image: url("/content/images/outdoor/plano-saude.jpg"); background-position: 30% 0; background-size: cover; /*Large devices (desktops, 992px and up)*/ /*.btn-primary { border-color: rgba(65, 121, 156, 0.85); background-color: rgba(16, 75, 113, 0.85); }*/ } @media (min-width: 576px) { #outdoor { background-position: 0 50%; } } @media (min-width: 992px) { #outdoor { background-position: 50% 80%; } } .card { box-shadow: 0px 7px 27px -17px rgba(0, 0, 0, 0.75); border-radius: 15px; transition: transform 0.3s ease; } .card:hover { transform: scale(1.05); transition: 0.3s ease-in; } .card-body em:hover { color: #4b8ab5; transition: 0.2s ease-in; } .outdoor-empresarial { background-image: url("/content/images/outdoor/plano-saude-empresarial.jpg") !important; } @media (min-width: 992px) { .outdoor-empresarial { background-position: 50% 10% !important; } } @media (max-width: 450px) { .outdoor-empresarial { background-position: 80% 0% !important; } } .outdoor-individual { background-image: url("/content/images/outdoor/plano-saude-individual.jpg") !important; } @media (min-width: 992px) { .outdoor-individual { background-position: 50% 10% !important; } } @media (max-width: 450px) { .outdoor-individual { background-position: 50% 0% !important; } } @media (min-width: 998px) { .outdoor-individual .outdoor-form { margin-right: 50px !important; } } .sticky-bottom { position: sticky; bottom: 0; width: 100%; } .operadoras-container a { max-width: 250px; min-height: 60px; text-wrap: wrap; display: flex; align-items: center; justify-content: center; } .btn-contrate-agora { color: #fff !important; font-size: 14px !important; } .btn-contrate-agora:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.15) 0 0) !important; } .page-3c .btn { font-size: 14px !important; } /*#endregion*/