/home/crealab/carweb.brainware.com.co/src/css/estyleisdiasdoaiweoei2.css
.banner_home img {
width: 100%;
z-index: 0;
object-fit: cover;
}
.banner_home {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
background-size: cover;
background-position: right top;
background-repeat: no-repeat;
padding-bottom: 0;
position: relative;
overflow: hidden;
}
/** Solo Safari en iOS **/
.banner_home.ios {
height: calc(100vh - 114px);
}
.banner_home.android {
height: calc(100vh - 56px);
}
@media screen and ( max-width:375px) {
/** iPhone X/XS Chrome en Android **/
.banner_home.chrome {
height: calc(100vh - 100px);
}
}
.banner_home .old-site {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin-top: 16px;
}
.banner_home .old-site .str-chevron-right {
vertical-align: middle !important;
}
.banner_home .cont {
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.banner_home.overlay:before {
top: auto;
height: 100%;
bottom: 0;
background: rgba(0, 0, 0, .2);
}
.banner_home .cont:before {
content: "";
bottom: 0;
top: 0;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
height: 25%;
display: block;
width: 100%;
position: absolute;
top: 0;
}
.banner_home.overlay:after {
content: "";
display: block;
width: 100%;
height: 45%;
position: absolute;
left: 0;
bottom: 0;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .9) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .9) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .9) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
}
.banner_home .productos-list a {
color: #fff;
}
.banner_home .productos-list.desktop {
position: absolute;
width: 100%;
left: 0;
bottom: 90px;
}
.banner_home .productos-list.desktop ul li {
text-align: center;
}
.banner_home .productos-list.desktop ul li a {
display: block;
color: #fff;
transition: all .3s ease;
}
.banner_home .productos-list.desktop ul li a:hover {
transform: scale(1.05);
}
.banner_home .productos-list.desktop ul li span {
font-size: 50px;
}
.banner_home .productos-list.desktop ul li h3 {
color: #fff;
margin-top: 8px;
line-height: 1.3em;
font-size: 14px;
}
.banner_home .productos-list.mobile {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
padding: 12px 0;
background: rgba(0, 0, 0, .6)
}
.banner_home .productos-list.mobile>div {
overflow-y: none;
overflow-x: scroll;
width: 100%;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
scrollbar-width: none;
height: 95px;
}
.banner_home .productos-list.mobile>div::-webkit-scrollbar {
width: 0 !important
}
.banner_home .productos-list.mobile ul li {
text-align: center;
display: inline-block;
}
.banner_home .productos-list.mobile ul li h3 {
color: #fff;
font-size: 14px;
margin-top: 8px;
line-height: 1.3em;
}
.banner_home .productos-list.mobile ul li a span {
font-size: 40px;
color: #fff;
}
.banner_home .title-content {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.banner_home .title-content .container {
height: 100%;
}
.banner_home .title-content .container .content {
width: 100%;
margin-top: -98px;
}
.banner_home .title-content .container .content .btn-huella {
padding: 8px 16px;
background: rgba(0, 0, 0, .4);
border-radius: 30px;
color: #fff;
font-size: 14px;
transition: all .3s ease;
}
.banner_home .title-content .container .content .btn-huella:hover {
background: rgba(0, 0, 0, .7);
}
.banner_home .title-content .container h1 {
font-size: 65px;
color: #fff;
line-height: 1.1em;
cursor: pointer;
transition: all .3s ease;
font-family: 'SantanderHeadlineW05-Regular' !important;
text-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
display: inline-block;
}
.banner_home .title-content .container h1:focus {
outline: 0;
opacity: .6
}
.banner_home .title-content .container h1:hover {
opacity: .6
}
.banner_home .title-content .container h1 .icon {
display: inline-block;
vertical-align: middle;
font-size: 50px;
-moz-animation: tada 1s infinite;
-webkit-animation: tada 1s infinite;
animation: tada 1s infinite;
}
.banner_home .move-down {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
width: 100%;
position: absolute;
bottom: 16px;
text-align: center;
}
.banner_home .move-down a {
font-size: 40px;
color: #fff;
}
.contrast .banner_home.overlay:before {
height: 100%;
}
@media screen and (max-width:991px) {
.banner_home .title-content .container h1 {
margin-top: 0;
}
.banner_home .title-content .container h1 br:first-of-type,
.banner_home .title-content .container h1 br:nth-child(3) {
display: none;
}
}
@media screen and (max-width:768px) {
.banner_home {
background-position: center;
}
.banner_home:before {
height: 100% !important;
background: rgba(0, 0, 0, .4) !important;
}
}
@media screen and (max-width:640px) {
.banner_home .title-content {
height: 77%;
top: auto;
}
.banner_home.ios .title-content {
height: calc(100% - 170px)
}
.banner_home .title-content .container .content {
margin-top: 0;
}
.banner_home .title-content .container h1 br {
display: none;
}
.banner_home .title-content .container h1 {
max-width: 80%;
font-size: 52px;
line-height: 58px;
}
}
@media screen and (max-width:380px) {
.banner_home .title-content .container h1 {
max-width: 70%;
font-size: 40px;
line-height: 50px;
}
}
@media screen and (max-width:320px) {
.banner_home .title-content {
height: 65%;
}
.banner_home .title-content .container h1 {
max-width: 70%;
font-size: 40px;
line-height: 50px;
}
}
@media screen and (max-width: 725px) and (orientation: landscape) {
.banner_home .title-content .container h1 {
max-width: 70%;
font-size: 54px;
line-height: 58px;
}
.banner_home {
height: 500px !important;
}
}