h3 { background: #00558B; color: #fff; font-size: 36px; line-height: 100px; margin: 10px; padding: 2%; position: relative; text-align: center; } .variable-width .slick-slide p { background: #00558B; height: 100px; color: #fff; margin: 5px; line-height: 100px; text-align: center; } .center .slick-center h3 { color: #e67e22; opacity: 1; transform: scale(1.08); } .center h3{ opacity: 0.8; transition: all 300ms ease; } .content { padding: 20px; margin: auto; } @media (min-width: 701px) { .content { width: 80%; } } @media (max-width: 700px) { .content { width: 70%; } } .slick-slide .image { padding: 10px; } .slick-slide img { border: 5px solid #FFF; display: block; margin: auto; max-width: 80%; } .slick-slide img.slick-loading { border: 0 } .slick-slider { margin: 30px auto 50px; } .slick-dots { margin-left: 0; } .slick-thumb { bottom: -45px; } .slick-thumb li { width: 60px; height: 45px; } .slick-thumb li img { width: 100%; height: 100%; filter: grayscale(100%); } .slick-thumb li.slick-active img{ filter: grayscale(0%); } @media (max-width: 768px) { h3 { font-size:24px; } .center { margin-left: -40px; margin-right: -40px; } .center .slick-center h3 { color: #e67e22; opacity: 1; transform: scale(1); } .center h3 { opacity: 0.8; transform: scale(0.95); transition: all 300ms ease; } } .slick-vertical .slick-slide { height: 180px; } .slick-arrow { background-color: grey; } .slick-arrow:hover { background-color: grey; } .slick-arrow:focus { background-color: grey; } .button { background-color: #00558B; padding: 10px 20px; margin: 0px 20px; border: none; color: white; font-size: 20px; border-radius: 5px; min-height: 45px }