#header { -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-justify-content: space-between; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; background: black; color: rgba(255, 255, 255, 0.5); cursor: default; height: 3.25rem; left: 0; line-height: 3.25rem; position: fixed; top: 0; width: 100%; z-index: 10001; } #header > .logo { color: #ffffff; font-size: 1rem; font-weight: 600; height: inherit; line-height: inherit; padding: 0 1.25rem; text-decoration: none; } #header > nav > a { color: inherit; display: inline-block; padding: 0 0.75rem; text-decoration: none; } #header > nav > a:hover { color: #ffffff; } #header > nav > a[href="#menu"] { text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } #header > nav > a[href="#menu"]:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } #header > nav > a[href="#menu"]:before { content: '\f0c9'; margin: 0 0.5rem 0 0; } #header > nav > a + a[href="#menu"]:last-child { border-left: solid 1px rgba(255, 255, 255, 0.25); margin-left: 0.5rem; padding-left: 1.25rem; } #header > nav > a:last-child { padding-right: 1.25rem; } @media screen and (max-width: 736px) { #header > nav > a { padding: 0 0.5rem; } #header > nav > a + a[href="#menu"]:last-child { margin-left: 0.25rem; padding-left: 1rem; } #header > nav > a:last-child { padding-right: 1rem; } } @media screen and (max-width: 980px) { body { padding-top: 44px; } #header { height: 44px; line-height: 44px; } } @media screen and (max-width: 480px) { #header { min-width: 320px; } } #signature { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); height: 80%; width: 200px; margin-left: 10px; } #blog { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; flex: 1; top: 0; z-index: 3; transition: 1s; -webkit-transition: 1s; color: black; font-family: 'Dosis', sans-serif; } .blogCard { position: relative; display: flex; flex: 1; flex-direction: column; margin: 5em; padding: 1em; background-color: white; max-width: 900px; } hr { border: 0.5px solid #c2c4c6; width: 100%; } .blogCard > .title { font-size: 2.5em; font-weight: 700; } .fa { margin-right: .5em; } .blogCard > .info { display: flex; flex-direction: row; align-items: center; color: grey; font-size: 0.8em; margin: 0.5em 0 1em 0; } .info > p { margin: 0 2em 0 0; } .blogCard > .pic { flex: 1; height: 100%; width: 100%; margin: 2em 0 0 0; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); } .blogCard > .content { display: flex; justify-content: center; flex-direction: column; margin: 0.5em 0; color: #434344; font-size: 1.5em; } .content > .readMore { text-align: center; border: 1px solid #234da0; padding: .5em 2em; color: #234da0; margin: 0; transition: .5s; -webkit-transition: .5s; cursor: pointer; } .content > .readMore:hover { background-color: #234da0; color: white; } .blogImg { overflow: hidden; max-height: 400px; display: flex; justify-content: center; align-items: center; margin: 1em 0; } #goToBlogs { position: fixed; top: 3.25rem; right: 0; padding: .5em; color: red; font-size: 2em; cursor: pointer; z-index: 5; }