#logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 30px 0; }
#logo h3 { margin-top: 30px; letter-spacing: 3px; color: #666666; font-size: 30px; font-weight: 100; }

.app-title { background-color: #f5f5f5; padding: 10px 15px; font-size: 20px; font-weight: 100; position: relative; margin: 30px 0; }
.app-title::before { position: absolute; content: ''; left: 0; top: 5px; bottom: 5px; border-radius: 10000px; width: 5px; background-color: #FF5500; }

.app-products { display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(2, 1fr); gap: 30px; }
@media (min-width: 768px) { .app-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .app-products { grid-template-columns: repeat(5, 1fr); } }
.app-products > div { border: 1px solid #e7e7e7; -webkit-transition: all 0.2s; transition: all 0.2s; border-radius: 5px; overflow: hidden; }
.app-products > div:hover { border-color: #FF5500; }
.app-products > div img { max-width: 100%; }
.app-products > div p { margin-bottom: 0; padding: 5px 10px 10px; font-size: 14px; }

.app-footer { margin-top: 80px; padding: 50px 0; background-color: #33302b; font-size: 14px; line-height: 2; text-align: center; }
.app-footer, .app-footer a { color: rgba(255, 255, 255, 0.8); }