/* ========= Colors ============ Heading: #1C2D41 Paragraph: #3C4858 Iconography: #8392A5 Secondary: #C0CCDA Dirty Snow: #E5E9F2 Snow: #F9FAFC Emerald: #3BC265 Rose Red: #C12F5A Dark Liver: #46444D Sonic Silver:#6F6F6F Sonic Silver2: #5f5e66 Fuzzy Wuzzy: #BC645F Fuzzy Wuzzy Light: #d68b87 Magenta: #7551E9 Orange: #FF7D51 Pink: #ED63D2 Green: #2DCA73 Yellow: #FFC212 */ .projects-section .card .card-header { background-color: #BC645F; padding: 0.7rem; padding-bottom: 0rem; text-decoration: none; } .projects-section .card .card-img-xs { margin-right: 0.5rem; } .card .card-header .sub-title span:nth-child(1) { float: left; } .card .card-header .sub-title span:nth-child(2) { float: right; } .projects-section .card .card-body { padding: 0.7rem; } .projects-section .card .card-header .sub-title { color: #46444D; margin-top: 0.4rem; } .filtr-projects { padding: 1rem !important; } /* ============= Device specific fixes ======= */ /* Large screens such as TV */ @media only screen and (min-width: 1824px) { } /* Extra large devices (large desktops, 1200px and up) */ @media (max-width: 1400px) { } @media (max-width: 1200px) { } /* IPad Pro */ @media (max-width: 1024px) { .projects-section { padding-left: 0; padding-right: 0; width: 100%; } .projects-section .container { max-width: 100%; } .projects-section .filtr-projects { padding: 0; } .projects-section .filtr-item { padding-left: 0.2rem; padding-right: 0.2rem; } } /* Large devices (desktops, 992px and up) */ @media (max-width: 992px) { } /* Medium devices (tablets, 768px and up) */ @media only screen and (max-width: 768px) { .projects-section { padding-left: 0; padding-right: 0; width: 100%; } .projects-section .container { max-width: 100%; } .projects-section .filtr-projects { padding: 0; } .projects-section .filtr-item { padding-left: 0.2rem; padding-right: 0.2rem; flex: 50%; max-width: calc(100% / 2 - 0.2rem); } } /* Small devices (landscape phones, 576px and up) */ @media only screen and (max-width: 576px) { .projects-section .btn { margin-top: 0.3125rem; } .projects-section .filtr-item { flex: 100%; max-width: 100%; } } /* iPhoneX, iPhone 6,7,8 */ @media only screen and (max-width: 375px) { } /* Galaxy S5, Moto G4 */ @media only screen and (max-width: 360px) { } /* iPhone 5 or before */ @media only screen and (max-width: 320px) { }