body { margin-top: 50px !important; } body .headerMargin { display: none; } .avisoTop { background-color: #353b8a; height: 50px; width: 100%; color: white; font-weight: bold; text-align: center; font-size: 1.3em; text-shadow: 0px 0px 10px black; position: absolute; top: 0; font-family: Arial, Helvetica, sans-serif; line-height: 1.9em; -webkit-box-shadow: 0px 10px 20px -14px black; -moz-box-shadow: 0px 10px 20px -14px black; box-shadow: 0px 10px 20px -14px black; -webkit-transition: all .2s ease; -moz-transition:    all .2s ease; -o-transition:      all .2s ease; transition:         all .2s ease; background: #ff9800; background: -moz-linear-gradient(left, #ff9800 0%, #ff5f00 100%); background: -webkit-linear-gradient(left, #ff9800 0%,#ff5f00 100%); background: linear-gradient(to left, #ff9800 0%,#ff5f00 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9800', endColorstr='#ff5f00',GradientType=0 ); -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } .avisoTop a { width: 100%; height: 100%; /* display: inline-block; */ display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; } .avisoTop p { margin: 0; height: 100%; text-shadow: none; color: white; display: inline-block; padding: 0 20px; font-weight: 300; line-height: 2.3em; font-weight: 400; letter-spacing: 0.03em; } section#teTraemos { margin-top: 60px !important; -webkit-transition: all .2s ease; -moz-transition:    all .2s ease; -o-transition:      all .2s ease; transition:         all .2s ease; } @media(max-width: 1200px) { body { margin-top: 50 !important; } .avisoTop { height: 50px; } .avisoTop p { line-height: 1.1em; font-size: .9em; height: auto; vertical-align: text-top; } } /* =================================================================================================== => MOBILE =================================================================================================== */ header.mobile { top: 0; } body.mobile .headerMargin { display: none; } body.mobile .avisoTop { background-color: #353b8a; height: 50px; width: 100%; top: 0; color: white; font-weight: bold; text-align: center; font-size: 1.3em; text-shadow: 0px 0px 10px black; position: absolute; top: 0; font-family: Arial, Helvetica, sans-serif; line-height: 1.9em; -webkit-box-shadow: 0px 10px 20px -14px black; -moz-box-shadow: 0px 10px 20px -14px black; box-shadow: 0px 10px 20px -14px black; -webkit-transition: all .2s ease; -moz-transition:    all .2s ease; -o-transition:      all .2s ease; transition:         all .2s ease; } body.mobile .avisoTop p { margin: 0; color: white; height: 100%; text-shadow: none; display: inline-block; padding: 0 20px; font-weight: 300; } section#bannerPrincipal.mobile section#teTraemos { display: inline; } @media(max-width: 1200px) { body.mobile .avisoTop { height: 60px; margin-top: 50px; } body.mobile .avisoTop p { line-height: 1.1em; font-size: .9em; height: auto; vertical-align: text-top; font-weight: 400; } } @media (max-width: 575px) { body.mobile { margin-top: 70px !important; } body.mobile .avisoTop { height: 69px; margin-top: 0; border-bottom: 1px solid black; } body.mobile .avisoTop p { font-size: .8em; } }