| .logo-catalog { |
| display: flex; |
| justify-content: flex-start; |
| flex-wrap: wrap; |
| } |
| .logo-catalog span { |
| margin: 5px; |
| } |
| .logo-catalog a { |
| color: #f7941e; |
| font-weight: 500; |
| margin: 5px 0; |
| word-wrap: none; |
| } |
| |
| .logo-catalog a:last-child { |
| border: none; |
| } |
| |
| .logo-group-title { |
| margin: 60px 0 30px 0; |
| } |
| |
| .logo-row { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: space-between; |
| } |
| |
| .logo-card { |
| width: 100%; |
| margin: 20px 20px 20px 0; |
| min-width: 200px; |
| position: relative; |
| background-color: #fff; |
| box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1); |
| padding: 20px 0 85px 0; |
| transition: 0.3s all ease-out; |
| } |
| |
| .logo-card:hover { |
| transform: translateY(-3px); |
| box-shadow: 10px 10px 16px rgba(0, 0, 0, 0.1); |
| transition: 0.3s all ease-out; |
| } |
| |
| .logo-title-container { |
| display: flex; |
| justify-content: flex-end; |
| } |
| |
| .logo-title { |
| padding: 5px 20px 5px 40px; |
| margin: 0; |
| background-color: #37474f; |
| color: #fff; |
| font-size: 12px; |
| line-height: 12px; |
| } |
| |
| .logo-card img { |
| width: calc(100% - 40px); |
| height: 100px; |
| margin: 30px 20px 20px 20px; |
| object-fit: contain; |
| } |
| |
| .logo-card .big-logo { |
| width: calc(100% - 80px); |
| margin: 30px 40px; |
| } |
| |
| .logo-card .square-logo { |
| width: calc(100% - 120px); |
| margin: 30px 60px; |
| } |
| |
| .logo-card .iot-logo { |
| width: calc(100% - 140px); |
| margin: 30px 70px; |
| } |
| |
| @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { |
| /* Need to use height auto for IE to make sure the logo will display in a proper ratio */ |
| .logo-card img { |
| height: auto; |
| } |
| .logo-card .adoptium-logo { |
| width: 400px; |
| max-width: 100%; |
| margin: 0; |
| height: 80px; |
| } |
| .logo-card .lts-logo { |
| width: calc(100% - 180px); |
| margin: 30px 90px; |
| } |
| } |
| |
| .branding-guidelines { |
| margin: 10px 0 0 20px; |
| font-weight: 700; |
| } |
| |
| .logo-types { |
| margin: 10px 20px 0 20px; |
| text-align: start; |
| } |
| |
| .logo-button-container { |
| position: absolute; |
| bottom: 25px; |
| } |
| |
| .logo-button-container a { |
| margin-top: 20px; |
| color: #f7941e; |
| font-weight: 500; |
| font-size: 18px; |
| background-color: #fff; |
| padding: 10px 0 10px 20px; |
| border: none; |
| border-top: 1px #f7941e solid; |
| transition: all 0.3s ease-in; |
| text-decoration: none; |
| } |
| |
| .logo-button-container a:hover { |
| background-color: #f7941e; |
| color: #fff; |
| padding: 10px 20px; |
| transition: all 0.3s ease-out; |
| } |
| |
| @media (min-width: 600px) { |
| .logo-card { |
| width: 46%; |
| } |
| } |
| |
| @media (min-width: 768px) { |
| .logo-card { |
| width: 30%; |
| } |
| } |