.mitas_title { width: fit-content; background: linear-gradient(90deg, rgba(1, 15, 56, 1) 8%, rgba(17, 56, 111, 1) 100%); font-weight: bolder; color: #fff; font-style: italic; padding: 10px 20px; margin: 20px 0px; border-radius: 0 0 15px 0; border-bottom: 5px solid #DC0D11; } .img-round { border-radius: 20px; box-shadow: 5px 5px 15px #000a; } .mitas_card_holder { position: relative; /* overflow: hidden; */ background: linear-gradient(0deg, rgba(1, 15, 56, 1) 8%, rgba(0, 53, 110, 1) 100%); /* height: 300px; */ border-radius: 20px; box-shadow: inset 5px 5px 15px #000a; } .mitas_card_img { position: relative; /* display: inline-block; */ flex-wrap: nowrap; transition: .2s linear; transform: scale(0.5); padding: 20px; } .mitas_card_img:hover { transform: scale(0.6); background-color: #fff4; border-radius: 20px; } .slider-controls { display: flex; justify-content: center; margin-top: 20px; } .slider-control { border: none; background: none; font-size: 24px; cursor: pointer; outline: none; } .slider-control:disabled { opacity: 0.5; cursor: default; } .slider-container { position: relative; overflow: hidden; top: -10%; } .slider-content { /* width: 100%; */ position: relative; top: 50%; left: 0%; overflow: hidden; /* background-color: #000; */ transition: transform 0.5s ease; } .slider-item { flex: 0 0 33.33%; /* max-width: 33.33%; */ transition: .2s linear; } .slider { height: 80%; } /* .img-card { } */ .next { display: none; } .prev { display: none; } .slider { position: relative; border-radius: 20px; box-shadow: inset 5px 5px 15px #000a; } .agro { background-image: url(/img/manufacturerpages/mitas/agro_bg.png); background-position: center; background-size: cover; } .industrial { background-image: url(/img/manufacturerpages/mitas/industrial_bg.png); background-position: center; background-size: cover; } button { background-color: transparent; box-shadow: none; border: none; color: #fff; font-size: 28px; outline: none; } .mitas-bg { background-image: url(/img/manufacturerpages/mitas/3435246.png); background-size: cover; background-position: center; color: #fff; } button:focus { outline: none; } @media (max-width:786px) { .slider-content { width: 300%; transform: translateX(); } .next { display: flex; position: relative; left: -100%; top: 40%; } .prev { display: flex; position: relative; left: 10%; top: 40%; } } @media (max-width:530px) { .next { display: flex; position: relative; left: -100%; top: 40%; } .prev { display: flex; position: relative; left: 10%; top: 40%; } .next-btn { position: relative; left: -7%; } } @media (max-width:428px) { .next-btn { position: relative; left: -13%; } }