/* Text Elements */

h1.title-project-page {   /*This is the h used on the top fixed image for the book pages*/
  width: 80vw;
  box-shadow: none;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 17px;
  font-weight: 900;
  font-size: 20px;
  font-family: 'Archivo', cursive;

  mix-blend-mode: normal;
}

h1 {
  margin-bottom: 1rem; 
  color: #0067ff;
  font-weight: 300;
  font-size: 22px;
  font-family: 'Montserrat', cursive;
  line-height: 1.2;
}

h1.heading-1-hero-section {
  color: #fff; 
  font-family: 'Archivo', cursive;
}

h2.title-project-page { /*adding this for a h2 on book pages. It was copied and modified from h1. title-project-page*/
  width: 80vw;
  box-shadow: none;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 10px;
  font-weight: 500;
  font-size: 15px;
  font-family: 'Archivo', cursive;

  mix-blend-mode: normal;
  }

h2 {
  margin-bottom: 1.5rem;
  margin-left: 0;
  color: #fff;
  font-weight: 500;
  font-size: 28px;
  font-family: 'Archivo', cursive;
  line-height: 1.1;
}

h2.centered {          /*This changed the colour of the 'About Pelagica Books Inc.' I changed it from peach to Pelagica black. */
  color: #1B1818;
  text-align: center;
}


h2.left {
  color: #fff;
  text-align: left;
  font-size: 15px;
}

h2.turquoise {    
  color: #50b1a9;
}

h2.centered.turquoise {   /*test this out- didn't work to change*/
  color: #50b1a9;
}

h2.hero-section-text {
  max-width: 0;
  color: #1B1818; /*this was #fff and this changed both the welcome and pelagica books to green*/
  text-transform: capitalize;
  font-size: 28px;
}

h2#heading-1 {
  max-width: 100%;
  font-size: 45px;
}

h2 font.heading-text-1 {  /*use this to change to colour of the main title in the Pelagica Books section*/
  color: #BCD2BB;
}

h2.heading-dark-section {
  margin-bottom: 40px;
  width: 100%;
  color: #fff;
}

h4 {
  color: #404040;
  font-weight: 300;
  font-size: 18px;
  font-family: 'Archivo', cursive;
  line-height: 1.25;
}

h4.light {
  color: #aecfea;
}

h6.project-title-box {
  color: #908FB5;      /*This is the colour for the feature boxes*/
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'Archivo', cursive;
}

h6 span.heading-text-2 {   /*text card text for Pelagica Books section - Adult Fiction*/
  color: #BCD2BB;
}

h6 span.heading-text-3 {   /*text card text for Pelagica Books section - Children's Fiction*/
  color: #BCD2BB;
}

h6 span.heading-text-4 {   /*text card text for Pelagica Books section - Food and Garden*/
  color: #BCD2BB;
}

h6 span.heading-text-5 {   /*text card text for Pelagica Books section - Nature*/
  color: #BCD2BB;
}

h6 {
  font-family: 'Montserrat', cursive;
}

p.paragraph {
  margin-right: auto;
  margin-bottom: 1rem;
  margin-left: auto;
  max-width: 800px;
  color: #e1e1e1;   
  text-align: center;
  font-weight: 300;
  font-size: 14px;
  font-family: 'Archivo', cursive;
  line-height: 1.7;
}

p.paragraph.centered {   /*This changes the text under 'About Pelagica Books', but only the main description.*/
  color: #383838;
  text-align: center;
}

p.paragraph span.uppercase-p {
  text-transform: uppercase;
  letter-spacing: .0625rem;
}

p.paragraph.light {
  color: #898989;
  text-align: left;
}

p.paragraph span.uppercase-p-1 {
  text-transform: uppercase;
  letter-spacing: .0625rem;
}

p.paragraph.centered.light {
  color: #898989;
  text-align: center;
}

p.paragraph.footer-copyright-text {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  color: #5d5d5d;
}

p.paragraph.text-card { 
  margin-bottom: 18px;
  width: 100%;
  text-align: left;
}

p.paragraph.text-card-readerquote {  /*use this to add quotes from the readers. Although it didn't impact the colour, so that was added directly into the html.*/
  margin-bottom: 18px;
  width: 100%;
  text-align: left;
}



p.paragraph.text-awards {
  margin-bottom: 0;
  color: #383838;
  text-align: center;
}

p.paragraph.paragraph-1 {
  color: #bebebe;
}

blockquote {
  border-left-width: 0;
  border-left-style: none;
  color: #404040;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

blockquote.contact-large-quote-text {
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  color: #404040;
  text-indent: -15px;
  text-transform: uppercase;
  font-size: 30px;
  font-family: 'Anton', cursive;
  line-height: 1;
}

blockquote.contact-large-quote-text.light {
  color: #fff;
  text-indent: -14px;
  text-transform: capitalize;
  font-family: 'Archivo', cursive;
  line-height: 1.2;
}

a.link-text {
  color: #e1e1e1;
  text-decoration: underline;
  font-size: 22px;
  font-family: 'Archivo', cursive;
}

a.link-text.footer-contact-info {
  color: #808080;
  font-size: 18px;
  line-height: 1.5;
  -webkit-transition-duration: .15s;
     -moz-transition-duration: .15s;
       -o-transition-duration: .15s;
          transition-duration: .15s;
  -webkit-transition-property: color;
     -moz-transition-property: color;
       -o-transition-property: color;
          transition-property: color;
}

a.link-text.nav-item {
  display: block;
  margin-right: 0;
  margin-left: 0;
  padding: 1.5rem .636364rem 1.3rem .6363636363636364rem;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-weight: 500;
  font-size: 18px;
  font-family: 'Archivo', cursive;
  -webkit-transition-delay: .05s;
     -moz-transition-delay: .05s;
       -o-transition-delay: .05s;
          transition-delay: .05s;
  -webkit-transition-timing-function: ease-in-out;
     -moz-transition-timing-function: ease-in-out;
       -o-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-transition-duration: .3s;
     -moz-transition-duration: .3s;
       -o-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-property: all;
     -moz-transition-property: all;
       -o-transition-property: all;
          transition-property: all;
}

a.link-text.link-previous-next-project {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  font-size: 20px;
}

a.link-text.footer-contact-info:hover {
  color: #ababab;
  -webkit-transition-duration: .15s;
     -moz-transition-duration: .15s;
       -o-transition-duration: .15s;
          transition-duration: .15s;
  -webkit-transition-property: color;
     -moz-transition-property: color;
       -o-transition-property: color;
          transition-property: color;
}

/* Interaction Elements */

a.link-button.button {
  margin-right: 10px;
  margin-bottom: 10px;
  padding-right: 1.7em;
  padding-left: 1.7em;
  border-color: rgba(60, 60, 60, .25);
  background-color: transparent;
  color: #3c3c3c;
  text-transform: uppercase;
  font-weight: 500;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

a.link-button {
  padding: 12px 20px;
  border-color: #0067ff;
  border-radius: 0;
  background-color: transparent;
  letter-spacing: 2px;
  font-size: 13px;
  font-family: 'Montserrat', cursive;
}

a.link-button.button.newsletter-bt {
  margin-right: 0;
  margin-bottom: 0;
}

a.link-button.button.scroller.smooth-scroll {  /*at the top of main page, the view our featured books. When you scroll over, this becomes the Pelagica Green*/
  border-width: 0;
  color: #1B1818;
  text-transform: capitalize;
  font-family: 'Archivo', cursive;
}

a.link-button span.button-link-text-1 {
  font-size: 1rem;
}

a.link-button span.button-link-text-2 {
  font-size: .9375rem;
}

a.link-button span.button-link-text-1.button-link-text-2 {
  font-weight: 100;
  font-size: 1.375rem;
}

a.link-button#button-link-1 {
  padding-right: 1.7em;
  padding-left: 0;
}

a.link-button.button.scroller.smooth-scroll:hover { /*changed to pelagica green. It was the peach colour*/
  color: #BCD2BB;
  -webkit-transition-delay: 0s, 0s, 0s;
     -moz-transition-delay: 0s, 0s, 0s;
       -o-transition-delay: 0s, 0s, 0s;
          transition-delay: 0s, 0s, 0s;
  -webkit-transition-timing-function: ease-out, ease-out, ease;
     -moz-transition-timing-function: ease-out, ease-out, ease;
       -o-transition-timing-function: ease-out, ease-out, ease;
          transition-timing-function: ease-out, ease-out, ease;
  -webkit-transition-duration: 0s, .3s, 1s;
     -moz-transition-duration: 0s, .3s, 1s;
       -o-transition-duration: 0s, .3s, 1s;
          transition-duration: 0s, .3s, 1s;
  -webkit-transition-property: background-color, color, all;
     -moz-transition-property: background-color, color, all;
       -o-transition-property: background-color, color, all;
          transition-property: background-color, color, all;
  -webkit-transform: translateY(5px) translateZ(-1px) perspective(0px);
     -moz-transform: translateY(5px) translateZ(-1px) perspective(0px);
          transform: translateY(5px) translateZ(-1px) perspective(0px);
}

input[type=text] {
  margin-bottom: 0;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  color: #3c3c3c;
  font-size: 14px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

select.select {
  color: #3c3c3c;
  font-size: 14px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

textarea {
  height: 10rem;
  color: #3c3c3c;
  font-size: 14px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

label.label {
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 0;
  background-color: transparent;
  color: #3c3c3c;
  font-size: 14px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

/* Layout Elements */

body.body-1 {
  display: block;
  background-color: #e1e1e1;
}

.container.one-thousand-centered-cont {
  margin-right: auto;
  margin-left: auto;
  max-width: 1000px;
}

.container.six-hundred-centered-cont { 
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-align: center;
  margin-right: auto;
  margin-left: auto;
  max-width: 600px;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}

.container.surrounding-padding-col {
  -ms-flex-pack: center;
  padding: 10vw 40px;
  background-color: #E2EDE1;  /*The section under 'About Pelagica Books' is not green on a narrow screen.
  If you change this, make sure to change the one below which controls for the wider screen.*/

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
}

.container.sample-11-content-cont {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  margin: 10vw 40px;
  max-width: none;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.container.sample-11-feature-cont {
  margin-right: 0;
  margin-bottom: 4%;
  width: 100%;
}

.container.sample-20-content-cont {   /* On J B Salix, margin-top changed from 4vw to 10 vw which put a bit 
more space btw the photo and text. */
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-align: center;
  margin-top: 10vw;
  margin-bottom: 0vw;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.container.sample-20-1of3-cont { /* reduced teh padding size from 30px to 15*/
  margin-bottom: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  max-width: none;
  width: 100%;
  box-shadow: #d2d2d2 0 1px 0 0;
}

.container.last.sample-20-1of3-cont {
  box-shadow: transparent 0 1px 0 0;
}

.container.twelve-hundred-centered-cont {  /*For the card. If you shrink it (let's say, change 1200 to 800px) the cards stay aligned but take up more/less space. 
It doesn't change the look on a narrow screen.*/
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
}

.container.one-thousand-centered-cont.sample-47-content-cont {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.container.surrounding-padding-col-low {
  -ms-flex-pack: center;
  padding: 7vw 40px;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
}

.container.heading-section {
  display: block;
  float: none;
  clear: none;
  margin: 10vw 20px;
  max-width: none;
}

.container.sample-11-left-col {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  width: 100%;
  -webkit-filter: invert(.58);
          filter: invert(.58);

  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}

.container.surrounding-padding-col-1 {    /*To change the container for the Pelagica Books section. This is what each individula 'card' sits in. 
In this case, it gives a black background, behind the cards. Seems to impact narrow screen, but not always wide screen.*/
  -ms-flex-pack: center;
  padding: 10vw 40px;
  background-color: #1B1818;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 20%);
  background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 20%);
  background-image:      -o-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 20%);
  background-image:         linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 20%);
  background-attachment: scroll;
  background-position: left top;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  background-repeat: no-repeat;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
  background-blend-mode: normal;
}


.container.surrounding-padding-col-1-Books {    /*To change the container for the Books section (includes Adult Fiction, Children's etc.) This is what each individula 'card' sits in. 
In this case, it gives a light-green background, behind the cards.*/
  -ms-flex-pack: center;
  padding: 10vw 40px;
  background-color: #D5DDD4;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 20%);
  background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 20%);
  background-image:      -o-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 20%);
  background-image:         linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 20%);
  background-attachment: scroll;
  background-position: left top;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  background-repeat: no-repeat;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
  background-blend-mode: normal;
}






.container.sample-60-buttons-cont.twelve-hundred-centered-cont { /*Chaging display: Flex to list-item makes them line up one under to other*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: justify;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
          justify-content: space-between;
}

.container.surrounding-padding-col.turquoise-breaker {  /*This is what controls the book description section. 
The sliding images in the original were a product of GIFs. The GIFs have been replaced with a custom image.*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-align: center;
  min-height: 40vh;
 /*The following was removed as it was interfering with the image: background-color: #15161a; */
  background-image: -webkit-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -webkit-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/DarkBookDescription_Salvia.jpg');
  background-image:    -moz-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -moz-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/DarkBookDescription_Salvia.jpg');
  background-image:      -o-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -o-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/DarkBookDescription_Salvia.jpg');
  background-image:         linear-gradient(-90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), linear-gradient(90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/DarkBookDescription_Salvia.jpg');
  background-attachment: scroll, scroll, scroll;
  background-position: left top, left top, center center;
  background-clip: border-box, border-box, border-box;
  background-origin: padding-box, padding-box, padding-box;
  background-size: auto auto, auto auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;

 /*The following was removed as it was interfering with the image:
  background-blend-mode: multiply, multiply, overlay; */
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}



.container.surrounding-padding-col.turquoise-breaker-NineVials {  /*This is what controls the book description section. 
The sliding images in the original were a product of GIFs. The GIFs have been replaced with a custom image.*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-align: center;
  min-height: 40vh;
 /*The following was removed as it was interfering with the image: background-color: #15161a; */
  background-image: -webkit-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -webkit-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/NineVials_BD.jpg');
  background-image:    -moz-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -moz-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/NineVials_BD.jpg');
  background-image:      -o-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -o-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/NineVials_BD.jpg');
  background-image:         linear-gradient(-90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), linear-gradient(90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/NineVials_BD.jpg');
  background-attachment: scroll, scroll, scroll;
  background-position: left top, left top, center center;
  background-clip: border-box, border-box, border-box;
  background-origin: padding-box, padding-box, padding-box;
  background-size: auto auto, auto auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;

 /*The following was removed as it was interfering with the image:
  background-blend-mode: multiply, multiply, overlay; */
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}


.container.surrounding-padding-col.turquoise-breaker-RosesLast {  /*This is what controls the book description section. 
The sliding images in the original were a product of GIFs. The GIFs have been replaced with a custom image.*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-align: center;
  min-height: 40vh;
 /*The following was removed as it was interfering with the image: background-color: #15161a; */
  background-image: -webkit-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -webkit-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/DarkRose_BD-RosesLast.jpg');
  background-image:    -moz-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -moz-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/DarkRose_BD-RosesLast.jpg');
  background-image:      -o-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -o-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/DarkRose_BD-RosesLast.jpg');
  background-image:         linear-gradient(-90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), linear-gradient(90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/DarkRose_BD-RosesLast.jpg');
  background-attachment: scroll, scroll, scroll;
  background-position: left top, left top, center center;
  background-clip: border-box, border-box, border-box;
  background-origin: padding-box, padding-box, padding-box;
  background-size: auto auto, auto auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;

 /*The following was removed as it was interfering with the image:
  background-blend-mode: multiply, multiply, overlay; */
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}




.container.surrounding-padding-col.turquoise-breaker-AdultFiction {  /*This is what controls the image for the Adult Fiction section. It's the same as the book description sections
but the images is changed. 
The sliding images in the original were a product of GIFs. The GIFs have been replaced with a custom image.*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-align: center;
  min-height: 40vh;
 /*The following was removed as it was interfering with the image: background-color: #15161a; */
  background-image: -webkit-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -webkit-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/whale_book_final.jpg');
  background-image:    -moz-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -moz-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/whale_book_final.jpg');
  background-image:      -o-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -o-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/whale_book_final.jpg');
  background-image:         linear-gradient(-90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), linear-gradient(90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/whale_book_final.jpg');
  background-attachment: scroll, scroll, scroll;
  background-position: left top, left top, center center;
  background-clip: border-box, border-box, border-box;
  background-origin: padding-box, padding-box, padding-box;
  background-size: auto auto, auto auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;

 /*The following was removed as it was interfering with the image:
  background-blend-mode: multiply, multiply, overlay; */
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}

.container.surrounding-padding-col.turquoise-breaker-ChildFiction {  /*This is what controls the image for the Children's Fiction section. It's the same as the book description sections
but the images is changed. 
The sliding images in the original were a product of GIFs. The GIFs have been replaced with a custom image.*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-align: center;
  min-height: 40vh;
 /*The following was removed as it was interfering with the image: background-color: #15161a; */
  background-image: -webkit-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -webkit-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/daisy-babyElephant_Final.jpg');
  background-image:    -moz-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -moz-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/daisy-babyElephant_Final.jpg');
  background-image:      -o-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -o-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/daisy-babyElephant_Final.jpg');
  background-image:         linear-gradient(-90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), linear-gradient(90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/daisy-babyElephant_Final.jpg');
  background-attachment: scroll, scroll, scroll;
  background-position: left top, left top, center center;
  background-clip: border-box, border-box, border-box;
  background-origin: padding-box, padding-box, padding-box;
  background-size: auto auto, auto auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;

 /*The following was removed as it was interfering with the image:
  background-blend-mode: multiply, multiply, overlay; */
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}


.container.surrounding-padding-col.turquoise-breaker-FoodGarden {  /*This is what controls the image for the Food and Garden section. It's the same as the book description sections
but the images is changed. 
The sliding images in the original were a product of GIFs. The GIFs have been replaced with a custom image.*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-align: center;
  min-height: 40vh;
 /*The following was removed as it was interfering with the image: background-color: #15161a; */
  background-image: -webkit-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -webkit-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/plant_in_book.jpg');
  background-image:    -moz-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -moz-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/plant_in_book.jpg');
  background-image:      -o-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -o-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/plant_in_book.jpg');
  background-image:         linear-gradient(-90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), linear-gradient(90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/plant_in_book.jpg');
  background-attachment: scroll, scroll, scroll;
  background-position: left top, left top, center center;
  background-clip: border-box, border-box, border-box;
  background-origin: padding-box, padding-box, padding-box;
  background-size: auto auto, auto auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;

 /*The following was removed as it was interfering with the image:
  background-blend-mode: multiply, multiply, overlay; */
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}


.container.surrounding-padding-col.turquoise-breaker-Nature {  /*This is what controls the image for the Nature section. It's the same as the book description sections
but the images is changed. 
The sliding images in the original were a product of GIFs. The GIFs have been replaced with a custom image.*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-align: center;
  min-height: 40vh;
 /*The following was removed as it was interfering with the image: background-color: #15161a; */
  background-image: -webkit-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -webkit-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/book-MamaAndBaby.jpg');
  background-image:    -moz-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -moz-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/book-MamaAndBaby.jpg');
  background-image:      -o-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -o-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/book-MamaAndBaby.jpg');
  background-image:         linear-gradient(-90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), linear-gradient(90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/book-MamaAndBaby.jpg');
  background-attachment: scroll, scroll, scroll;
  background-position: left top, left top, center center;
  background-clip: border-box, border-box, border-box;
  background-origin: padding-box, padding-box, padding-box;
  background-size: auto auto, auto auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;

 /*The following was removed as it was interfering with the image:
  background-blend-mode: multiply, multiply, overlay; */
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}




.container.surrounding-padding-col.turquoise-breakerquote {  /*This is what controls the book description section. 
The sliding images in the original were a product of GIFs. The GIFs have been replaced with a custom image.*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-align: center;
  min-height: 40vh;
 /*The following was removed as it was interfering with the image: background-color: #15161a; */
  background-image: -webkit-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -webkit-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/twilight-Blue Haze.jpg');
  background-image:    -moz-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -moz-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/twilight-Blue Haze.jpg');
  background-image:      -o-linear-gradient(right, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), -o-linear-gradient(left, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/twilight-Blue Haze.jpg');
  background-image:         linear-gradient(-90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), linear-gradient(90deg, rgba(21, 22, 26, .66) 0%, rgba(29, 30, 33, 0) 30%), url('../images/twilight-Blue Haze.jpg');
  background-attachment: scroll, scroll, scroll;
  background-position: left top, left top, center center;
  background-clip: border-box, border-box, border-box;
  background-origin: padding-box, padding-box, padding-box;
  background-size: auto auto, auto auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;

 /*The following was removed as it was interfering with the image:
  background-blend-mode: multiply, multiply, overlay; */
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}






.container.newsletter-form-content-cont.one-thousand-centered-cont {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
}

.container.surrounding-padding-col-low.turquoise-breaker {
  background-color: #e2a884;
}

.container.footer-copyright.surrounding-padding-col-low {
  background-color: #111;
}

.container.footer-contact-info.surrounding-padding-col {
  background-color: #1e1e1e;
}

.container.footer-contact-info-cont {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 20px;
  padding-right: 20px;
  width: 100%;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
}

.container.heading-left-cont {
  display: grid;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  width: 100%;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  grid-template-columns: none;
  grid-template-rows: none;
}

.container.contact-large-quote.surrounding-padding-col {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-align: center;
  min-height: 100vh;
  background-color: #15161a;
  background-image: url('../images/gif-2.gif');
  background-attachment: fixed;
  background-position: right center;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
  background-repeat: no-repeat;

  background-blend-mode: overlay;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}

.container.team-lets-talk-cont {
  margin-bottom: 20px;
  width: 100%;
}

.container.headquarters-cont.one-thousand-centered-cont {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
}

.container.headquarters-text-cont {
  width: 100%;
}

.container.headquarters-gallery-cont {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: justify;
  width: 100%;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
          justify-content: space-between;
}

.container.team-social-content-cont {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: end;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
     -moz-box-pack: end;
          justify-content: flex-end;
}

.container.contact-large-quote-cont.six-hundred-centered-cont {
  -ms-flex-align: start;
  margin-right: auto;
  margin-left: 0vw;

  -webkit-box-align: start;
  -webkit-align-items: flex-start;
     -moz-box-align: start;
          align-items: flex-start;
}

.container.mobile-menu-toggle {
  margin-bottom: 0;
  background-color: rgba(37, 37, 37, .7);
}

.container.menu-wrapper {
  position: fixed;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: none;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-align: center;
  padding-top: 40px;
  padding-bottom: 20px;
  background-color: rgba(21, 22, 26, .95);
  box-shadow: none;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}

.container.button.mobile-menu-toggle {
  display: block;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-align: start;
  padding: 1.2em 40px;
  max-width: 50%;
  background-color: #15161a;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
     -moz-box-align: start;
          align-items: flex-start;
}

.container.nav-container {   /*This is a colour behind the main border colour. It seems to be a blue.*/
  max-width: none;
  background-color: #15161a;
}

.container.header-container {  /*This container has the big image; field with stack of books and birds.*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 100vh;
  background-color: #BCD2BB;  /*This was a red in behind the main image, but was changed to the Pelagica green*/
  background-image: url('../images/PelagicaBooks3_intro.jpg');
  background-attachment: scroll;
  background-position: center bottom;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
  background-repeat: no-repeat;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
  background-blend-mode: normal;
}

.container.container-1 {
  display: block;
}

.container.columbus-bike.sample-11 {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  background-color: #15161a;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%), url('../images/jakob-owens-205635-unsplash.jpg');
  background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%), url('../images/jakob-owens-205635-unsplash.jpg');
  background-image:      -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%), url('../images/jakob-owens-205635-unsplash.jpg');
  background-image:         linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%), url('../images/jakob-owens-205635-unsplash.jpg');
  background-attachment: scroll, scroll;
  background-position: left top, center center;
  background-clip: border-box, border-box;
  background-origin: padding-box, padding-box;
  background-size: auto auto, auto auto;
  background-repeat: no-repeat, no-repeat;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  background-blend-mode: normal, color-dodge;
}

.container.container-2 {  /*This says 'Salvia. Book 1....' It is the image-purple blue with Salvia book cover- that is directly below the menu and is fixed. 
Currently used on the individual book pages*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  min-height: 50vh;   /*use to help position the image*/
  height: auto;
  background-image: url('../images/SALVIA_2nd Ed_FinalHeader_V4.jpg');
  background-attachment: fixed;
  background-position: center -125px; /*use to help position the image*/
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
  background-repeat: no-repeat;

  background-blend-mode: normal;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
          align-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}


.container.container-2-NineVials {  /*This says 'Nine Vials. Book 2....' It is the image-purple blue with Nine Vials book cover- that is directly below the menu and is fixed. 
Currently used on the individual book pages*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  min-height: 50vh;   /*use to help position the image*/
  height: auto;
  background-image: url('../images/NINE VIALS_2nd Ed_FinalHeader_V2.jpg');
  background-attachment: fixed;
  background-position: center -125px; /*use to help position the image*/
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
  background-repeat: no-repeat;

  background-blend-mode: normal;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
          align-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}



.container.container-2-RosesLast {  /*This says 'Roses Last. Book 3....' It is the image-purple blue with Roses Last book cover- that is directly below the menu and is fixed. 
Currently used on the individual book pages*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  min-height: 50vh;   /*use to help position the image*/
  height: auto;
  background-image: url('../images/ROSES LAST_2nd Ed_FinalHeader_V2.jpg');
  background-attachment: fixed;
  background-position: center -125px; /*use to help position the image*/
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
  background-repeat: no-repeat;

  background-blend-mode: normal;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
          align-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}




.container.featured.surrounding-padding-col-1 {
  background-color: #15161a;
}

.container.container-3 {   /*This is the parent container for all those little images on the Salvia Page*/
  display: grid;
  width: auto;
  height: auto;
  background-color: #2D2D5F; /*Has been changed to the dark Salvia colour. 
  But now it's been removed from the Salvia page.*/
}

.container.sd-two-cols {  /*This is a child container of 'container.container-3 and also parent of container.container-4
on the Salvia Page. It's been removed from the Salvia page, but was in the original.*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  padding: 3rem 0 6rem;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-content: space-between;
  -ms-flex-line-pack: justify;
          align-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
  grid-template-columns: repeat(3 , auto);
  grid-template-rows: auto;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
          align-self: center;
}

.container.container-4 { /*This is the grandchild of container.container-4 on the Salvia page. 
It is the parent of "responsive-picture photo-interior-project">
It's been removed from the Salvia page, but was in the original.*/
  display: block;
}

.container.hero-about {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  height: 60vh;
  background-image: url('../images/jakob-owens-168415-unsplash.jpg');
  background-attachment: fixed;
  background-position: center -250px;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
  background-repeat: no-repeat;

  background-blend-mode: normal;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
          align-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.container.container-5 {  /*For the 'get the book CAN' on the Salvia page*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  margin-bottom: .25rem;
  padding-bottom: 0;
  background-color: #B6ABE1;  /*This gives you a purpleish backdrop when it's moused over. on the Salvia page*/
  background-image: url('../images/sage-dark_left.jpg');
  background-attachment: scroll;
  background-position: center center;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
  background-repeat: repeat;

  background-blend-mode: normal;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
}

.container.container-6 { /*For the 'Get the book US' on the Salvia page*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  margin-top: .25rem;
  background-color: #B6ABE1; /*This gives you a purpleish backdrop when it's moused over*/
  background-image: url('../images/sage-dark_right.jpg');
  background-attachment: scroll;
  background-position: center center;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
  background-repeat: repeat;

  background-blend-mode: normal;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
}





.container.container-7 {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  padding-bottom: 4rem;
  min-height: 600px;

  background-color: #000000; /*This gives black, but just on the bottom of the Get the book CAN and Get the book US*/
  
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.container.sample-60-buttons-cont.twelve-hundred-centered-cont.outofview {
  position: relative;
}

.container.menu-wrapper.show-menu { /*what does this do?*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: start;

  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
     -moz-box-pack: start;
          justify-content: flex-start;
}

.container.container-6:hover {
  background-blend-mode: multiply;
}

.container.container-5:hover {
  background-blend-mode: multiply;
}

.link-container.sample-60-advanced-bt { /*Controls the colour of the individual cards, the originals are black*/
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: justify;
  margin-top: 20px;
  padding: 20px 20px 13px;
  width: 100%;
  background-color: #212229;
  -webkit-transition-timing-function: ease-out;
     -moz-transition-timing-function: ease-out;
       -o-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-duration: .25s;
     -moz-transition-duration: .25s;
       -o-transition-duration: .25s;
          transition-duration: .25s;
  -webkit-transition-property: -webkit-transform;
     -moz-transition-property:         transform, -moz-transform;
       -o-transition-property:      -o-transform;
          transition-property: -webkit-transform;
          transition-property:         transform;
          transition-property:         transform, -webkit-transform, -moz-transform, -o-transform;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
          justify-content: space-between;
}

.link-container.sample-60-advanced-bt:hover {   /*Tried removing this, didn't change anything obvious.*/
  -webkit-transition-timing-function: ease;
     -moz-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .25s;
     -moz-transition-duration: .25s;
       -o-transition-duration: .25s;
          transition-duration: .25s;
  -webkit-transition-property: -webkit-transform;
     -moz-transition-property:         transform, -moz-transform;
       -o-transition-property:      -o-transform;
          transition-property: -webkit-transform;
          transition-property:         transform;
          transition-property:         transform, -webkit-transform, -moz-transform, -o-transform;
  -webkit-transform: translateY(0px) scaleX(1.05) scaleY(1.05);
     -moz-transform: translateY(0px) scaleX(1.05) scaleY(1.05);
       -o-transform: translateY(0px) scaleX(1.05) scaleY(1.05);
          transform: translateY(0px) scaleX(1.05) scaleY(1.05);
}







div.responsive-picture.sample-12-img {   /*Does this control the About/J B Salix images? max-width was 90, didn't change the image size.*/
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: auto;
  max-width: 120px;
}

span.glyph {
  color: #3c3c3c;
}

div.responsive-picture.sample-60-img {
  margin-right: 20px;
  margin-bottom: 20px;
  max-width: none;
  background-color: #e2a884;
}

span.glyph.sample-60-arrow-icon { 
  width: 100%;
  color: #908FB5;
  text-align: right;
  font-size: 24px;
  line-height: 36px;
}

a.social-image.lets-talk-social-icon {
  margin-left: 10px;
  max-width: 48px;
  background-color: #e2a884;
}

div.responsive-picture.headquarters-gallery-img {
  display: block;
  margin-bottom: 4%;
  max-width: none;
  width: 100%;
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transition-timing-function: ease;
     -moz-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
  -webkit-transition-property: none;
     -moz-transition-property: none;
       -o-transition-property: none;
          transition-property: none;
}

button.button {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: .95em 1.7em .7em;
  border-color: rgba(60, 60, 60, .25);
  background-color: transparent;
  color: #3c3c3c;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

.rule.menu-line hr {
  border-top-width: 2px;
  border-top-color: #aecfea;
}

.rule.menu-line {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 3px;
  padding-bottom: 3px;
  max-width: 24px;
}

ul.list-container.menu {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: center;
  -ms-flex-align: stretch;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
     -moz-box-align: stretch;
          align-items: stretch;
}

li.list-item-container.nav-wrapper {
  position: relative;
  display: inline-block;
}

a.responsive-picture.nav-logo {
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: auto;
  max-width: 60px;
}

span.glyph.personal.sample-60-arrow-icon { /*Arrows in the Pelagica Books section*/
  color: #BCD2BB;
}

div.responsive-picture {
  padding-top: 0;
  max-width: none;
}

div.responsive-picture.photo-interior-project { /*This is the child of container 4 and controls the little images on the Salvia page*/
  margin-right: auto;
  margin-left: auto;
  padding-top: 1rem;
  padding-right: .5rem;
  padding-left: .5rem;
  max-width: 600px;
  width: auto;
}

button.button:hover {
  padding-bottom: .7em;
  border-color: rgba(60, 60, 60, .25);
  background-color: transparent;
  color: #3c3c3c;
}

div.responsive-picture.sample-60-img:hover {
  mix-blend-mode: normal;
}

div.responsive-picture.photo-interior-project:hover {
  -webkit-filter: grayscale(1) brightness(.64);
          filter: grayscale(1) brightness(.64);
}

a.social-image.lets-talk-social-icon:hover {
  background-color: #15161a;
}

@media screen and (min-width: 22.5rem) {
  /* Text Elements */

  h1.title-project-page {
    font-size: 26px;
  }

  /* Layout Elements */

  .container.header-container {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
  }
}

@media screen and (min-width: 40rem) {
  /* Text Elements */

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 32px;
  }

  h2#heading-1 {
    font-size: 50px;
  }

  h4 {
    font-size: 20px;
  }

  p.paragraph {
    text-align: left;
    font-size: 15px;
  }

  p.paragraph.footer-copyright-text {
    margin-top: 0;
    margin-bottom: 0;
    width: 48%;
    text-align: left;
  }

  blockquote.contact-large-quote-text {
    text-indent: -26px;
    font-size: 28px;
  }

  blockquote.contact-large-quote-text.light {    /*Testing with this*/
    font-size: 50px;
  }

  a.link-text.footer-contact-info {
    font-size: 24px;
  }

  a.link-text.nav-item {
    padding: 1.5rem 1rem 1.2rem;
    letter-spacing: 1px;
    font-size: .85rem;

    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }

  a.link-text.nav-item:hover {
    border-top-width: 0;
    border-top-style: solid;
    border-bottom-width: 0;
    color: #e2a884;
  }

  /* Interaction Elements */

  a.link-button {
    font-size: 18px;
  }

  select.select {
    font-size: 15px;
  }

  textarea {
    font-size: 15px;
  }

  label.label {
    font-size: 15px;
  }

  /* Layout Elements */

  .container.sample-11-content-cont {
    max-width: 600px;
  }

  .container.sample-11-feature-cont {
    margin-right: 8%;
    width: 42%;
  }

  .container.sample-20-content-cont {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-align: stretch;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
       -moz-box-align: stretch;
            align-items: stretch;
  }

  .container.sample-20-1of3-cont { 
    margin-bottom: 0;
    padding: 20px 40px;
    max-width: none;
    width: 33.33%;
    box-shadow: #d2d2d2 1px 0 0 0;
  }

  .container.surrounding-padding-col-low {
    padding-top: 4vw;
    padding-bottom: 4vw;
  }

  .container.sample-11-left-col {
    -ms-flex-align: end;
    min-height: 0;
    max-width: 1200px;
    width: 70%;

    -webkit-box-align: end;
    -webkit-align-items: flex-end;
       -moz-box-align: end;
            align-items: flex-end;
  }

  .container.footer-contact-info-cont {
    margin-bottom: 0;
    width: 48%;
  }

  .container.heading-left-cont {
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-align: end;
    margin-left: 4rem;
    min-height: 0;
    width: 50%;

    -webkit-box-align: end;
    -webkit-align-items: flex-end;
       -moz-box-align: end;
            align-items: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
  }

  .container.team-lets-talk-cont {
    margin-right: 3%;
    width: 60%;
  }

  .container.headquarters-cont.one-thousand-centered-cont {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-pack: justify;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
            justify-content: space-between;
  }

  .container.headquarters-text-cont {
    width: 48%;
  }

  .container.headquarters-gallery-cont {
    width: 48%;

    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
            align-content: flex-start;
  }

  .container.team-social-content-cont {
    -ms-flex-pack: justify;

    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
            justify-content: space-between;
  }

  .container.mobile-menu-toggle {
    display: none;
  }

  .container.menu-wrapper {   /*This controls the long background that the logo and the menu options sit in. 
  I changed the padding top and bottom to 10 (from zero) to make the logo more prominent.*/
    position: static;
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    padding-top: 10;
    padding-bottom: 10;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
  }

  .container.button.mobile-menu-toggle {
    display: none;
  }

  .container.header-container {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
  }

  .container.surrounding-padding-col-1 {
    min-height: 100vh;
    background-color: #15161a;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 20%);
    background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 20%);
    background-image:      -o-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 20%);
    background-image:         linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 20%);
  }

  .container.columbus-bike.sample-11 {
    background-position: center center;
  }

  .container.container-5 {
    margin-right: 0;
    margin-bottom: 0;
  }

  .container.container-6 {
    margin-top: 0;
  }

  .container.container-7 {
    min-height: 400px;
  }

  .container.books.surrounding-padding-col-1 {
    min-height: 100vh;
  }

  .link-container.sample-60-advanced-bt{
    margin-bottom: 0;
    padding-bottom: 10px;
    width: 32%;
    -webkit-transition-duration: .15s;
       -moz-transition-duration: .15s;
         -o-transition-duration: .15s;
            transition-duration: .15s;
    -webkit-transition-property: box-shadow;
       -moz-transition-property: box-shadow;
         -o-transition-property: box-shadow;
            transition-property: box-shadow;
  }
  
  
  
  
  ul.list-container.menu {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-pack: end;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
       -moz-box-pack: end;
            justify-content: flex-end;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }

  li.list-item-container.nav-wrapper {
    padding-right: 0;
    background-color: transparent;
  }

  a.responsive-picture.nav-logo {
    margin-right: 20px;
    margin-bottom: 0;
    margin-left: 20px;
    max-width: 120px; /*this was 30px*/
  }
}

@media screen and (min-width: 64rem) {
  /* Text Elements */

  h1.title-project-page {
    font-size: 46px;
  }

  h1 {
    font-size: 35px;
  }

  h2 {
    font-size: 36px;
  }

  h4 {
    font-size: 24px;
  }

  p.paragraph span.uppercase-p {
    text-transform: uppercase;
    letter-spacing: .0625rem;
  }

  p.paragraph span.uppercase-p-1 {
    text-transform: uppercase;
    letter-spacing: .0625rem;
  }

  p.paragraph {
    font-size: 16px;
  }

  blockquote.contact-large-quote-text {
    text-indent: -30px;
    font-size: 2.5vw;
  }

  blockquote.contact-large-quote-text.light {
    font-size: 60px;
  }

  a.link-text.footer-contact-info {
    font-size: 30px;
  }

  a.link-text.nav-item {
    padding-top: 1.2rem;
    padding-right: 2rem;
    padding-left: 2rem;
    border-top: .1875rem solid transparent;
    -webkit-transition-duration: .15s;
       -moz-transition-duration: .15s;
         -o-transition-duration: .15s;
            transition-duration: .15s;
  }

  a.link-text.nav-item:hover { 
    border-top-width: .1875rem;
    border-top-color: #BCD2BB; /*(puts a little green line at the top of the menu item*/
    color: #BCD2BB;
    -webkit-transition-duration: .15s;
       -moz-transition-duration: .15s;
         -o-transition-duration: .15s;
            transition-duration: .15s;
  }

  /* Interaction Elements */

  a.link-button {
    text-transform: uppercase;
    font-weight: 500;
    font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  }

  select.select {
    font-size: 16px;
  }

  textarea {
    font-size: 16px;
  }

  label.label {
    font-size: 16px;
  }

  /* Layout Elements */

  .container.surrounding-padding-col { /*This changed the background for About Pelagica Books Inc. to green. This was white #fff before. If you change this, 
  make sure to change the one above which controls the smaller screen colour.*/
    margin-top: 0vh;
    padding-top: 8vw;
    padding-bottom: 8vw;
    background-color: #E2EDE1;
  }

  .container.sample-20-1of3-cont {
    padding-right: 6vw;
    padding-left: 6vw;
    max-width: 1200px;
  }

  .container.sample-20.surrounding-padding-col {
    padding-top: 6vw;
    padding-bottom: 6vw;
  }

  .container.twelve-hundred-centered-cont {
    float: none;
  }

  .container.surrounding-padding-col-low {
    padding-top: 3vw;
    padding-bottom: 3vw;
  }

  .container.heading-section {
    margin-right: 2px;
    margin-left: 0;
    max-width: 600px;
  }

  .container.sample-11-left-col {
    width: 60%;
  }

  .container.surrounding-padding-col-1 {
    padding-top: 8vw;
    padding-bottom: 8vw;
    background-color: #15161a;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(29, 30, 33, 0) 20%);
    background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(29, 30, 33, 0) 20%);
    background-image:      -o-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(29, 30, 33, 0) 20%);
    background-image:         linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(29, 30, 33, 0) 20%);
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    background-repeat: no-repeat;

    background-blend-mode: normal;
  }

  .container.surrounding-padding-col.turquoise-breaker {
    padding-top: 4vw;
    padding-bottom: 4vw;
  }

  .container.footer-copyright.surrounding-padding-col-low {
    border-top: .0625rem dotted #272727;
  }

  .container.contact-large-quote-cont.six-hundred-centered-cont {
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;
    margin-left: 10vw;
    max-width: 50vw;
  }

  .container.sample-11-content-cont {
    max-width: 800px;
  }

  .container.footer-contact-info.surrounding-padding-col {
    background-color: #1e1e1e;
  }

  .container.columbus-bike.sample-11 {
    background-size: cover;
  }

  .link-container.sample-60-advanced-bt {
    width: 23.5%;
    -webkit-transition-duration: .25s;
       -moz-transition-duration: .25s;
         -o-transition-duration: .25s;
            transition-duration: .25s;
    -webkit-transition-property: -webkit-transform;
       -moz-transition-property:         transform, -moz-transform;
         -o-transition-property:      -o-transform;
            transition-property: -webkit-transform;
            transition-property:         transform;
            transition-property:         transform, -webkit-transform, -moz-transform, -o-transform;
  }

  .link-container.sample-60-advanced-bt:hover {
    -webkit-transform: translateY(0px) scaleX(1.03) scaleY(1.02);
       -moz-transform: translateY(0px) scaleX(1.03) scaleY(1.02);
         -o-transform: translateY(0px) scaleX(1.03) scaleY(1.02);
            transform: translateY(0px) scaleX(1.03) scaleY(1.02);
  }

  div.responsive-picture.sample-12-img {
    max-width: 90px;
  }

  li.list-item-container.nav-wrapper {
    -webkit-box-flex: 0;
    -webkit-flex: 0 20;
       -moz-box-flex: 0;
        -ms-flex: 0 20;
            flex: 0 20;
  }
}