.hero-section-text { display: block; color: #0a0a0a; text-shadow: 1px 1px 2px #fefefe; background: rgba(255, 255, 255, 0.8); padding: 20px; border-radius: 5px; } .showcase-image img { display: block; margin-right: auto; margin-left: auto; max-height: 300px; /* width: 100%; */ padding: 10px 0; } .grid-container h1 { border-bottom: 1px solid #0a0a0a; } .hero-full-screen { padding-top: 100px; margin-bottom: 100px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } body { background: url("../images/background_smaller.jpg") center center no-repeat; background-size: cover; background-attachment: fixed; } .hero-full-screen .middle-content-section { /* text-align: center; */ color: #fefefe; } @media (max-width: 768px) { .hero-full-screen .middle-content-section { width: 100%; } .overview-image { display: none; } #main-content-section .grid-container { max-width: 100%; } } .top-content-section { width: 100%; } .hero-full-screen .bottom-content-section { padding: 1rem; } .hero-full-screen .bottom-content-section svg { height: 3.75rem; width: 3.75rem; fill: #fefefe; } .top-bar { background: rgba(0, 0, 0, 0.5); width: 100%; position: fixed; } .top-bar .menu { background: transparent; } .top-bar .menu-text { color: #fefefe; } .top-bar img { height: 2.5rem; width: 2.5rem; } .top-bar .menu li { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .top-bar .menu a { color: #fefefe; font-weight: bold; } #main-content-section .grid-container { margin: auto; background: rgba(255, 255, 255, 0.8); border-radius: 5px; padding: 20px; /* max-width: 50%; */ } #main-content-section .grid-container .grid-x { display: flex; align-items: center; }