html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

figcaption,
figure,
main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-weight: inherit;
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details,
menu {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: "";
  clear: both;
  height: 0;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wrapper {
  max-width: 1260px;
  width: 90%;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

/* site fonts */
/* base font size, 20px - 125% - 1rem */
/* site colours */
html {
  font-size: 125%;
}

body {
  font-family: "Cabin", sans-serif;
  font-size: 1rem;
  color: #171717;
  letter-spacing: 0px;
  line-height: 32px;
}

h1,
h2,
h3 {
  font-family: "Oswald", sans-serif;
  letter-spacing: 1px;
  color: #171717;
}

h1 {
  margin: 0;
  font-size: 7rem;
}

a {
  text-decoration: none;
}

.pageNav {
  font-weight: bold;
  font-family: "Oswald", sans-serif;
  line-height: 29px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pageNav a {
  font-size: 1rem;
}
.pageNav .navLogo {
  font-size: 2rem;
}
.pageNav .navLogo p {
  margin: 0;
}

.footerText {
  color: #f6f6f6;
  margin: 0;
  padding: 15px 0;
}

h2 {
  font-family: "Oswald", sans-serif;
  font-size: 2.1rem;
  color: #171717;
  letter-spacing: 1px;
  margin: 0;
}

.smallCopy {
  margin: 30px 0 50px;
  font-family: "Cabin", sans-serif;
  color: #171717;
  line-height: 32px;
  letter-spacing: 0px;
}

.smallButton {
  font-family: "Oswald", sans-serif;
  font-size: 1rem;
  line-height: 32px;
  text-align: center;
  letter-spacing: 1px;
  color: #171717;
  background-color: #f38d8d;
  padding: 15px 50px;
  opacity: 1;
  -webkit-transition: opacity 0.5s, color 0.25s, -webkit-box-shadow 0.25s;
  transition: opacity 0.5s, color 0.25s, -webkit-box-shadow 0.25s;
  transition: opacity 0.5s, box-shadow 0.25s, color 0.25s;
  transition: opacity 0.5s, box-shadow 0.25s, color 0.25s, -webkit-box-shadow 0.25s;
}
.smallButton:hover, .smallButton:focus, .smallButton:active {
  opacity: 0.75;
  color: #f6f6f6;
  -webkit-box-shadow: 0px 0px 5px 2px #f38d8d;
          box-shadow: 0px 0px 5px 2px #f38d8d;
  -webkit-transition: opacity 0.5s, color 0.25s, -webkit-box-shadow 0.25s;
  transition: opacity 0.5s, color 0.25s, -webkit-box-shadow 0.25s;
  transition: opacity 0.5s, box-shadow 0.25s, color 0.25s;
  transition: opacity 0.5s, box-shadow 0.25s, color 0.25s, -webkit-box-shadow 0.25s;
}

h3 {
  font-family: "Oswald", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 1px;
  color: #171717;
  margin: 0;
  padding-top: 7px;
}

.linksSection a {
  text-decoration: none;
  color: #171717;
}
.linksSection a:hover, .linksSection a:focus, .linksSection a:active {
  text-decoration: underline;
  -webkit-text-decoration-color: #171717;
          text-decoration-color: #171717;
  text-decoration-thickness: 3px;
  -webkit-filter: drop-shadow(1px 1px 1px #68b0c1);
          filter: drop-shadow(1px 1px 1px #68b0c1);
}

.harpersJourney .smallButton {
  width: 300px;
}

.blogPreviewSection a {
  width: 210px;
  margin-bottom: 40px;
}

.socialsBar {
  font-size: 1.3rem;
}

.addressAndSocialsAside p {
  margin: 0;
}
.addressAndSocialsAside .emailAddress {
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-family: "Oswald", sans-serif;
  font-size: 1rem;
  line-height: 29px;
  letter-spacing: 1px;
}
.addressAndSocialsAside .emailAddress p {
  padding: 12px 0;
}

form legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.formContainer button {
  background: #f38d8d;
  font-family: "Oswald", sans-serif;
  font-size: 1rem;
  line-height: 32px;
  letter-spacing: 1px;
  padding: 20px 50px;
  border: transparent;
}

h4 {
  font-family: "Oswald", sans-serif;
  font-size: 1rem;
  color: #171717;
  letter-spacing: 1px;
}

header {
  background-color: #b9dde7;
}

.flexContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 28rem;
}
.flexContainer .homeImgContainer {
  width: 35%;
  margin-top: 40px;
}
.flexContainer .homeImgContainer img {
  width: 100%;
  -webkit-box-shadow: 20px 20px #ffffff;
          box-shadow: 20px 20px #ffffff;
}
.flexContainer .homeLogoContainer h1 {
  margin: 280px 0px 0px 150px;
  position: relative;
}
.flexContainer .homeLogoContainer h1::after {
  content: url(../assets/circle-text.png);
  position: absolute;
  top: -118px;
  right: -55px;
}

.headerImage {
  background-color: #f6f6f6;
}
.headerImage img {
  width: 100%;
}

.contactHeaderImage::after {
  content: "CONTACT ME";
  color: #171717;
  font-family: "Oswald", sans-serif;
  line-height: 92px;
  letter-spacing: 1px;
  font-size: 4rem;
  position: relative;
  top: -63px;
  left: 40px;
}

.blogHeaderImage::after {
  content: "BLOG";
  color: #171717;
  font-family: "Oswald", sans-serif;
  line-height: 92px;
  letter-spacing: 1px;
  font-size: 4rem;
  position: relative;
  top: -60px;
  left: 100px;
}

.pageNav {
  background-color: #b9dde7;
  padding: 30px 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 10;
}
.pageNav li {
  padding: 0px 25px;
}
.pageNav li a {
  color: #171717;
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
}
.pageNav li a:focus, .pageNav li a:hover, .pageNav li a:active {
  color: #f6f6f6;
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
  -webkit-filter: drop-shadow(1px 1px 1px #171717);
          filter: drop-shadow(1px 1px 1px #171717);
}

.mobileNav {
  display: none;
  position: fixed;
  top: 50px;
  right: 50px;
  z-index: 30;
}
.mobileNav li {
  position: relative;
}
.mobileNav .iconItem {
  padding: 7px 14px;
  border-radius: 50%;
  -webkit-transform: scale(200%);
          transform: scale(200%);
  background-color: rgba(34, 114, 132, 0.75);
  -webkit-filter: drop-shadow(1px 1px 1px #171717);
          filter: drop-shadow(1px 1px 1px #171717);
}
.mobileNav .subMenu {
  background: rgba(23, 23, 23, 0.5);
  border-radius: 5%;
  position: absolute;
  height: 0;
  overflow: hidden;
}
.mobileNav .subMenu li {
  padding: 5px 0px;
}
.mobileNav .subMenu li a {
  color: #f6f6f6;
  font-style: "Oswald", sans-serif;
}
.mobileNav .subMenu li a:hover {
  text-decoration: underline;
}
.mobileNav .iconContainer {
  -webkit-transition: height 0.5s ease-in-out;
  transition: height 0.5s ease-in-out;
  color: #f6f6f6;
}
.mobileNav .iconContainer li:hover,
.mobileNav .iconContainer li:focus-within,
.mobileNav .iconContainer li:active .subMenu {
  cursor: pointer;
  color: #b9dde7;
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
}
.mobileNav .iconContainer li:hover .subMenu,
.mobileNav .iconContainer li:focus-within .subMenu,
.mobileNav .iconContainer li:active .subMenu {
  padding: 20px;
  height: auto;
  -webkit-transition: height 0.5s ease-in-out;
  transition: height 0.5s ease-in-out;
  right: 0px;
}

.aboutSection {
  background-color: #f6f6f6;
  padding: 125px 0px;
}
.aboutSection .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.aboutSection .wrapper .aboutTextContainer {
  width: 55%;
  margin: 0;
}
.aboutSection .harperImageContainer {
  display: none;
}

.fullBleedImage {
  -o-object-fit: cover;
     object-fit: cover;
  line-height: 0px;
}
.fullBleedImage img {
  width: 100%;
}

.linksSection {
  background-color: #f6f6f6;
  padding: 100px 0;
}
.linksSection .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.linksSection .wrapper .itemCard {
  padding: 0px 25px;
  width: calc(50% - 50px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.linksSection .itemCardContent {
  padding: 0px 0px 50px 25px;
}
.linksSection .itemCardShadow {
  width: 50px;
  height: 50px;
  background-color: #b9dde7;
  border-radius: 50%;
  position: relative;
}
.linksSection .itemCardShadow i {
  position: absolute;
  top: 15px;
  right: 15px;
}
.linksSection .itemCardShadow .fa-tv {
  top: 17px;
  right: 13px;
}
.linksSection .itemCardShadow .fa-user {
  right: 16px;
}

.blogPreviewSection .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.blogPreviewSection .wrapper img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.blogPreviewSection .blogPreviewTextContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: calc(50% - 50px);
}
.blogPreviewSection .blogPreviewImgContainer {
  width: 50%;
}
.blogPreviewSection .firstBlogPostWrapper .blogPreviewTextContainer {
  margin-left: 50px;
}
.blogPreviewSection .firstBlogPostWrapper a {
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-left: 50px;
}
.blogPreviewSection .firstBlogPostWrapper p {
  margin-left: 50px;
}
.blogPreviewSection .firstBlogPostWrapper h3 {
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-left: 50px;
}
.blogPreviewSection .firstBlogPostWrapper .blogPreviewImgContainer {
  position: relative;
  top: -40px;
  -webkit-box-shadow: -300px 11px #68b0c1;
          box-shadow: -300px 11px #68b0c1;
}
.blogPreviewSection .firstBlogPostWrapper .blogPreviewImgContainer img {
  max-width: 100%;
  -webkit-box-shadow: 20px 20px #68b0c1, 0px 15px #68b0c1;
          box-shadow: 20px 20px #68b0c1, 0px 15px #68b0c1;
  -o-object-fit: cover;
     object-fit: cover;
}
.blogPreviewSection .secondBlogPostWrapper a {
  -ms-flex-item-align: end;
      align-self: flex-end;
  margin-right: 50px;
}
.blogPreviewSection .secondBlogPostWrapper h3 {
  -ms-flex-item-align: end;
      align-self: flex-end;
  margin-right: 50px;
}
.blogPreviewSection .secondBlogPostWrapper p {
  margin-right: 50px;
}
.blogPreviewSection .secondBlogPostWrapper .blogPreviewImgContainer {
  position: relative;
  top: 60px;
  -webkit-box-shadow: 300px 11px #b9dde7;
          box-shadow: 300px 11px #b9dde7;
}
.blogPreviewSection .secondBlogPostWrapper .blogPreviewImgContainer img {
  max-width: 100%;
  -webkit-box-shadow: 20px 20px #b9dde7;
          box-shadow: 20px 20px #b9dde7;
  -o-object-fit: cover;
     object-fit: cover;
}

.harpersJourney {
  background-color: #f6f6f6;
  padding: 200px 0px 100px;
}
.harpersJourney .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.harpersJourney .wrapper .harpersJourneyImgContainer {
  width: calc(35% - 100px);
  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-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.harpersJourney .wrapper .harpersJourneyImgContainer img {
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-box-shadow: 10px 10px 0px 2px #227284;
          box-shadow: 10px 10px 0px 2px #227284;
}
.harpersJourney .wrapper .harpersJourneyTextContainer {
  width: 65%;
  margin-left: 100px;
  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-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-align: left;
}
.harpersJourney .wrapper .harpersJourneyTextContainer h2 {
  padding-bottom: 15px;
}
.harpersJourney .wrapper .harpersJourneyTextContainer p {
  padding-bottom: 10px;
}

/* contact page styling */
.contact {
  background-color: #f6f6f6;
  /* Modal Styling */
}
.contact .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.contact .contactHeaderImg {
  height: 25vh;
}
.contact .popUpModal {
  display: none;
  position: fixed;
  z-index: 10;
  background-color: rgba(23, 23, 23, 0.8);
  padding-top: 200px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.contact .modalContent {
  background-color: #f6f6f6;
  margin: auto;
  padding: 30px;
  border: 5px solid #b9dde7;
  width: 50%;
  text-align: center;
  -webkit-animation: modalFadeIn 0.75s;
          animation: modalFadeIn 0.75s;
}
.contact .modalContent .modalCopy {
  padding: 10px 0px 10px;
  margin: 0;
}
.contact .modalContent .modalHeading {
  padding: 20px 0px 20px;
  font-size: 1.8rem;
  color: #68b0c1;
}
.contact .modalContent .icon {
  padding: 0px 0px 10px;
  color: #68b0c1;
}
.contact .modalContent .closeButton {
  color: #171717;
  float: right;
  font-size: 20px;
  font-weight: bold;
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
}
.contact .modalContent .closeButton:hover, .contact .modalContent .closeButton:focus {
  color: #f38d8d;
  text-decoration: none;
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
  cursor: pointer;
}

.socialsBar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding-top: 30px;
}
.socialsBar a {
  padding-right: 30px;
  opacity: 1;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  color: #227284;
}
.socialsBar a:hover, .socialsBar a:focus, .socialsBar a:active {
  color: #f38d8d;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  -webkit-filter: drop-shadow(1px 1px 1px #f38d8d);
          filter: drop-shadow(1px 1px 1px #f38d8d);
}

.addressAndSocialsAside {
  padding: 30px;
  background-color: #ffffff;
  width: calc(30% - 30px);
  height: 100%;
}
.addressAndSocialsAside .telephoneNumber {
  color: #171717;
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
}
.addressAndSocialsAside .telephoneNumber:hover, .addressAndSocialsAside .telephoneNumber:focus, .addressAndSocialsAside .telephoneNumber:active {
  color: #f38d8d;
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
}
.addressAndSocialsAside .emailAddress {
  color: #171717;
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
}
.addressAndSocialsAside .emailAddress:hover, .addressAndSocialsAside .emailAddress:focus, .addressAndSocialsAside .emailAddress:active {
  color: #f38d8d;
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
}

.formContainer {
  width: calc(70% - 20px);
  margin-left: 20px;
}
.formContainer form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: inline-block;
}
.formContainer form .formTextInput {
  width: calc(50% - 15px);
  padding: 15px;
  height: 60px;
  margin-bottom: 20px;
  border: transparent;
}
.formContainer form input[type=email] {
  margin-left: 20px;
}
.formContainer form textarea {
  width: 100%;
  height: 300px;
  padding: 15px;
  resize: none;
  border: transparent;
  margin-bottom: 25px;
  padding-top: 30px;
}
.formContainer form button {
  margin-bottom: 100px;
  opacity: 1;
  -webkit-transition: opacity 0.25s, color 0.25s, -webkit-box-shadow 0.25s;
  transition: opacity 0.25s, color 0.25s, -webkit-box-shadow 0.25s;
  transition: opacity 0.25s, box-shadow 0.25s, color 0.25s;
  transition: opacity 0.25s, box-shadow 0.25s, color 0.25s, -webkit-box-shadow 0.25s;
  width: 100%;
}
.formContainer form button:hover, .formContainer form button:focus, .formContainer form button:active {
  opacity: 0.9;
  -webkit-box-shadow: 0px 0px 5px 2px #f38d8d;
          box-shadow: 0px 0px 5px 2px #f38d8d;
  color: #f6f6f6;
  -webkit-transition: opacity 0.25s, color 0.25s, -webkit-box-shadow 0.25s;
  transition: opacity 0.25s, color 0.25s, -webkit-box-shadow 0.25s;
  transition: opacity 0.25s, box-shadow 0.25s, color 0.25s;
  transition: opacity 0.25s, box-shadow 0.25s, color 0.25s, -webkit-box-shadow 0.25s;
  cursor: pointer;
}

/* Blog page styling goes here */
.blog {
  background-color: #f6f6f6;
}
.blog .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.blogAside {
  width: calc(35% - 60px);
  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;
  margin-right: 60px;
}
.blogAside .asideImgContainer {
  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-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.blogAside .asideImgContainer img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.blogAside .firstAsideSection,
.blogAside .secondAsideSection {
  background-color: #ffffff;
  padding: 25px;
  width: 100%;
}
.blogAside .firstAsideSection h3 {
  padding-top: 30px;
}
.blogAside .firstAsideSection p {
  margin-bottom: 0;
}
.blogAside .firstAsideSection a {
  color: black;
  -webkit-transition: color 0.15s;
  transition: color 0.15s;
}
.blogAside .firstAsideSection a:hover, .blogAside .firstAsideSection a:focus, .blogAside .firstAsideSection a:active {
  color: #227284;
  -webkit-transition: color 0.15s;
  transition: color 0.15s;
  text-decoration: underline;
}
.blogAside .secondAsideSection {
  margin-top: 20px;
}
.blogAside .secondAsideSection ul {
  padding-left: 20px;
  list-style: inside;
}
.blogAside .secondAsideSection a {
  color: black;
  -webkit-transition: color 0.15s;
  transition: color 0.15s;
}
.blogAside .secondAsideSection a:hover, .blogAside .secondAsideSection a:focus, .blogAside .secondAsideSection a:active {
  color: #227284;
  -webkit-transition: color 0.15s;
  transition: color 0.15s;
  text-decoration: underline;
}
.blogAside .secondAsideSection h4 {
  margin-top: 10px;
}

.blogContent {
  width: 65%;
}
.blogContent .blogPost {
  background-color: #ffffff;
  padding: 30px;
  padding-bottom: 60px;
  border-bottom: 5px solid #227284;
}
.blogContent .blogPost h2 {
  margin: 20px 0px 30px;
}
.blogContent .blogComment {
  padding: 20px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  background-color: #ffffff;
  margin-top: 20px;
}
.blogContent .blogComment .blogCommentImgContainer {
  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-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.blogContent .blogComment p {
  margin: 0px;
}
.blogContent .blogComment .dateText {
  padding-top: 15px;
}
.blogContent .blogComment .commentText {
  padding-bottom: 20px;
}
.blogContent .blogCommentTextContainer {
  padding: 0px 20px 0px 20px;
}
.blogContent .commentSection {
  border-bottom: 5px solid #227284;
  margin: 50px 0px 50px;
}

.commentsForm {
  width: 100%;
  margin-left: 0;
}
.commentsForm input[type=email] {
  margin-left: 15px;
}

.backToTop,
.backToTop:visited {
  display: none;
  position: fixed;
  bottom: 50px;
  left: 50px;
  color: #f38d8d;
  opacity: 100%;
  -webkit-transform: scale(400%);
          transform: scale(400%);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.backToTop:hover,
.backToTop:visited:hover {
  opacity: 50%;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 60px 0px 60px;
}
.gallery .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.gallery .carouselContainer {
  position: relative;
  background: #f6f6f6;
  border-radius: 2%;
  -webkit-box-shadow: 2px 2px 10px #171717;
          box-shadow: 2px 2px 10px #171717;
  width: 400px;
}
.gallery ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
}
.gallery .carouselNext {
  right: -30px;
}
.gallery .carouselPrevious {
  left: -30px;
}
.gallery li {
  display: none;
  padding: 15px;
}
.gallery li img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.gallery .currentlyActive {
  display: block;
}
.gallery a {
  position: absolute;
  top: 50%;
  z-index: 10;
  -webkit-transform: scale(300%);
          transform: scale(300%);
  color: #f38d8d;
  -webkit-transition: opacity 0.5s, color 0.5s, -webkit-filter 0.25s;
  transition: opacity 0.5s, color 0.5s, -webkit-filter 0.25s;
  transition: opacity 0.5s, color 0.5s, filter 0.25s;
  transition: opacity 0.5s, color 0.5s, filter 0.25s, -webkit-filter 0.25s;
}
.gallery a:hover,
.gallery a:focus {
  opacity: 70%;
  cursor: pointer;
  color: #f38d8d;
  -webkit-filter: drop-shadow(2px 2px 1px black);
          filter: drop-shadow(2px 2px 1px black);
  -webkit-transition: opacity 0.5s, color 0.5s, -webkit-filter 0.25s;
  transition: opacity 0.5s, color 0.5s, -webkit-filter 0.25s;
  transition: opacity 0.5s, color 0.5s, filter 0.25s;
  transition: opacity 0.5s, color 0.5s, filter 0.25s, -webkit-filter 0.25s;
}
.gallery .fade {
  -webkit-animation: fade;
          animation: fade;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
}

@-webkit-keyframes fade {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes modalFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes modalFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
footer {
  background-color: #171717;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 5px 0;
}

/* CONTACT PAGE STYLING */
@media (max-width: 1440px) {
  .formContainer form input[type=text],
.formContainer form input[type=email] {
    width: 100%;
  }

  .formContainer form input[type=email] {
    margin-left: 0px;
  }
}
/* STYLING FOR HOME PAGE */
@media (max-width: 1200px) {
  .home .flexContainer .homeImgContainer {
    width: 40%;
  }
  .home .flexContainer .homeLogoContainer h1 {
    font-size: 5rem;
    margin-left: 5rem;
  }
  .home .flexContainer .homeLogoContainer h1::after {
    -webkit-transform: scale(70%);
            transform: scale(70%);
    top: -101px;
    right: -59px;
  }

  .blogPreviewSection .firstBlogPostWrapper .blogPreviewImgContainer {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .blogPreviewSection .firstBlogPostWrapper .blogPreviewImgContainer img {
    -webkit-box-shadow: 20px 20px #68b0c1;
            box-shadow: 20px 20px #68b0c1;
  }
  .blogPreviewSection .secondBlogPostWrapper .blogPreviewImgContainer {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .blogPreviewSection .secondBlogPostWrapper .blogPreviewImgContainer img {
    -webkit-box-shadow: 20px 20px #b9dde7;
            box-shadow: 20px 20px #b9dde7;
  }
}
/* home header changes */
@media (max-width: 1000px) {
  .contact .wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .contact .wrapper .addressAndSocialsAside {
    width: 100%;
    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;
    margin-bottom: 30px;
    border-bottom: 3px solid #68b0c1;
    border-radius: 10px;
    text-align: center;
  }
  .contact .wrapper .formContainer {
    width: 100%;
    margin-left: 0px;
  }
  .contact .wrapper .socialsBar {
    font-size: 2rem;
    padding-bottom: 20px;
  }
  .contact .wrapper .submitButton {
    margin-bottom: 30px;
  }

  .contact .modalContent {
    width: 100%;
  }
  .contact .modalContent .closeButton {
    font-size: 40px;
  }

  .contactHeaderImage::after {
    font-size: 3rem;
    line-height: 60px;
    top: -40px;
  }

  .formContainer form input[type=text],
.formContainer form input[type=email],
textarea {
    border-radius: 10px;
  }

  /* BLOG SECTION VERTICAL VIEW */
  .blog .wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .blog .wrapper .blogAside {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .blog .wrapper .blogAside {
    width: 100%;
    margin-bottom: 50px;
  }
  .blog .wrapper .firstAsideSection,
.blog .wrapper .secondAsideSection {
    border-radius: 10px;
    border: 3px solid #b9dde7;
  }
  .blog .wrapper .asideImgContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .blog .wrapper .asideImgContainer img {
    width: 30%;
    -webkit-box-shadow: 5px 5px 15px 1px #171717;
            box-shadow: 5px 5px 15px 1px #171717;
  }
  .blog .wrapper .asideTextContainer,
.blog .wrapper .secondAsideSection {
    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;
  }
  .blog .wrapper .asideTextContainer h4,
.blog .wrapper .secondAsideSection h4 {
    margin: 25px 0px 25px;
    font-size: 1.8rem;
  }
  .blog .wrapper .asideTextContainer p,
.blog .wrapper .secondAsideSection p {
    margin: 0;
    text-align: center;
  }
  .blog .wrapper .asideTextContainer a,
.blog .wrapper .secondAsideSection a {
    text-decoration: underline;
  }
  .blog .wrapper .secondAsideSection {
    margin-bottom: 30px;
    text-align: center;
  }
  .blog .wrapper .secondAsideSection ul {
    list-style: none;
  }
  .blog .wrapper .blogContent {
    border-top: 3px solid #68b0c1;
    width: 100%;
  }
  .blog .wrapper .blogContent button {
    margin-bottom: 60px;
  }
  .blog .wrapper .blogComment {
    border-radius: 10px;
  }
  .blog .wrapper .dateText {
    font-weight: bold;
    padding-bottom: 2px;
    border-bottom: 2px solid #f6f6f6;
  }

  .home .flexContainer {
    -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;
    height: 30rem;
  }
  .home .flexContainer .homeLogoContainer {
    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;
  }
  .home .flexContainer .homeLogoContainer .pageHeading {
    margin: 15rem 0 0;
  }

  .homeImgContainer {
    display: none;
  }

  .aboutSection {
    padding: 70px 0;
  }
  .aboutSection .wrapper {
    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;
  }
  .aboutSection .wrapper .aboutTextContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .aboutSection .wrapper .harperImageContainer {
    width: 50%;
    display: inline-block;
    margin-bottom: 60px;
  }
  .aboutSection .wrapper .harperImageContainer img {
    width: 100%;
    -webkit-box-shadow: 5px 5px 15px 1px #171717;
            box-shadow: 5px 5px 15px 1px #171717;
  }
  .aboutSection .wrapper h2 {
    font-size: 2rem;
  }
  .aboutSection .wrapper .smallCopy {
    margin: 30px 0 35px;
    text-align: center;
  }

  .linksSection .wrapper .itemCard {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .linksSection .wrapper .itemCard .itemCardIcon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 10px;
  }
  .linksSection .wrapper .itemCard .itemCardContent {
    padding: 0px 0px 50px 0px;
    text-align: center;
  }

  .blogPreviewSection {
    padding: 70px 0;
  }
  .blogPreviewSection .firstBlogPostWrapper,
.blogPreviewSection .secondBlogPostWrapper {
    -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;
  }
  .blogPreviewSection .firstBlogPostWrapper .blogPreviewImgContainer,
.blogPreviewSection .secondBlogPostWrapper .blogPreviewImgContainer {
    width: 60%;
    top: 0px;
    margin: 50px 0 50px;
  }
  .blogPreviewSection .firstBlogPostWrapper .blogPreviewTextContainer,
.blogPreviewSection .secondBlogPostWrapper .blogPreviewTextContainer {
    width: 100%;
    text-align: center;
    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;
    margin: 0;
  }
  .blogPreviewSection .firstBlogPostWrapper .blogPreviewTextContainer h3,
.blogPreviewSection .firstBlogPostWrapper .blogPreviewTextContainer p,
.blogPreviewSection .firstBlogPostWrapper .blogPreviewTextContainer a,
.blogPreviewSection .secondBlogPostWrapper .blogPreviewTextContainer h3,
.blogPreviewSection .secondBlogPostWrapper .blogPreviewTextContainer p,
.blogPreviewSection .secondBlogPostWrapper .blogPreviewTextContainer a {
    -ms-flex-item-align: center;
        align-self: center;
    margin-left: 0;
    margin-right: 0;
  }
  .blogPreviewSection .secondBlogPostWrapper .blogPreviewImgContainer {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }

  .harpersJourney {
    padding: 60px 0;
  }
  .harpersJourney .wrapper {
    -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;
  }
  .harpersJourney .wrapper .harpersJourneyImgContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 50%;
    margin-bottom: 30px;
  }
  .harpersJourney .wrapper .harpersJourneyImgContainer img {
    -webkit-box-shadow: 10px 10px 0px 1px #f38d8d;
            box-shadow: 10px 10px 0px 1px #f38d8d;
  }
  .harpersJourney .wrapper .harpersJourneyTextContainer {
    margin-left: 0;
    width: 100%;
  }
  .harpersJourney .wrapper .harpersJourneyTextContainer h2,
.harpersJourney .wrapper .harpersJourneyTextContainer p,
.harpersJourney .wrapper .harpersJourneyTextContainer a {
    text-align: center;
  }
  .harpersJourney .wrapper .harpersJourneyTextContainer a {
    width: 100%;
  }
  .harpersJourney .wrapper .harpersJourneyTextContainer h2 {
    line-height: 42px;
  }

  .blogHeaderImage::after {
    content: "HARPER'S BLOG";
    left: 5%;
  }
}
/* Universal styling across all pages - show navbar when viewport width is small enough */
@media (max-width: 820px) {
  .pageNav {
    display: none;
  }

  .mobileNav {
    display: block;
  }

  .gallery .carouselContainer {
    width: 300px;
  }
}
@media (max-width: 440px) {
  .home .flexContainer .homeLogoContainer h1 {
    font-size: 3rem;
  }
  .home .flexContainer .homeLogoContainer h1::after {
    -webkit-transform: scale(40%);
            transform: scale(40%);
    top: -86px;
    right: -73px;
  }

  .contactHeaderImage::after {
    font-size: 1.4rem;
    left: 15px;
  }

  .blogHeaderImage::after {
    content: "HARPER'S BLOG";
    font-size: 1.3rem;
    left: 10%;
  }

  .blogCommentImgContainer img {
    display: none;
  }

  .asideTextContainer h4 {
    text-align: center;
  }

  .backToTop,
.backToTop:visited {
    bottom: 30px;
    left: 30px;
    -webkit-transform: scale(300%);
            transform: scale(300%);
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }

  .gallery .carouselContainer {
    width: 200px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}