html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: auto;
  /* font-size: 18px; */
  font-family: "Noto Sans";
  overflow-y: scroll;
}

#red-text {
  color: #5a5a5a;
}

#title-color-text {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff   
}

#title-text-separator {
  width: 5%;
  margin-top: 1%;
  border: solid 1px #5a5a5a;
}

.responsive-menu-link {
  color: white;
}


/* ----- General Header CSS ------ */

#header {
  position: fixed;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
  font-size: 19px;
  min-height: 80px;
  transition: all 0.5s;
}





/* Normal Header */

.active-header {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  transition: all 0.3s;
}

.menu-link {
  color: white;
}

.active-menu-links {
  color: white;
}

#normal-header {
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: auto;
  font-size: 19px;
  min-height: 100px;
}

#header-img {
  width: 250px;
  margin-left: 15%;
}

#nav-bar ul {
  list-style: none;
  display: flex;
  flex-flow: row;
}

#nav-bar li {
  padding: 10px;
  margin: 12px;
}

#nav-bar ul, a {
  text-decoration: none;
  vertical-align: middle;
}






/* Responsive Header */

#responsive-header {
  display: none;
}

#image-button-black {
  display: none;
  border: none;
}

#image-button-black:hover {
  cursor: pointer;
}

#image-button-black:focus {
  outline: 0;
}





/* ----- Hero Header CSS -----

Tags included:

1. hero-header - main container of the Hero

2. hero-content - the container of the title and description within the hero Section

3. hero-title - the title within the hero section

4. hero-text - the text within the hero section

5. hero-button - the button within the hero section

*/

#hero-header {
  width: 100vw;
  height: 50vh;
  box-shadow: 3px 3px 2px #bebebe;

  /* hero-header flexbox */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Texy style */
  text-align: center;
  color: white;

  /* Background image */
 
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url("home_semLogo.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#hero-title {
  font-size: 3.5em;
  margin-top: 50px;
}

#hero-text {
  font-size: 1.3em;
  margin-top: 2%;
  display: none;
}

#hero-button {
  border: solid 2px white;
  background-color: inherit;
  color: white;
  margin-top: 6%;
  width: 25%;
  height: 55px;
  font-size: 15px;
  border-radius: 10px;
  display: none;
}

#hero-button:hover {
  cursor: pointer;
}








/* ----- Main Content CSS -----

Tags included:

1. features-container - the main container wrapping the "features" elements

2. features-description - container wrapping the title and the description

3. features-title - the main title of the Features

4. features-separator - the line that separates the title from the Description

5. features-text - the main describing the features and services

6. service-features - container wrapping all 4 services

7. feature - the common id applied to the container of all the 4 services

8. feature img - the styling of each image belonging to each feature

9. feature-title - the common id applied to the title of each feature

10. feature p - the styling of each paragraph belonging to each feature

11. feature-button - the common id applied to the button of each feature

12. feature-button:hover - the ":hover" styling of each button

*/

#features-container {
  box-shadow: 2px 2px 15px #bebebe;
  margin-top: 5%;
  padding: 2%;
  overflow-y: scroll;
}

#service-features {
  display: flex;
  flex-direction: row;
  /* Change flow-direction to "column" in the responsive design for the features to stack
  one on top of another. */
  justify-content: space-around;
  margin-top: 2%;
  padding-bottom: 3%;
}

#features-description {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: auto;
  margin-top: 2%;
  padding: 1%;
  display: flex;
  width: 60%;
}

#features-description h1 {
  font-size: 45px;
}

#features-description p {
  padding: 1%;
  margin-top: 1%;
}

#feature {
  width: 29%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: solid 1px #bebebe;
  box-shadow: 1px 2px 15px #bebebe;
  padding-bottom: 20px;
}

#feature img {
  max-width: 30%;
  max-height: 30%;
  padding-top: 5%;
}

#feature-title {
  margin-top: 5%;
}

#feature p {
  width: 70%;
  margin-top: 5%;
  font-size: 16px;
}

#feature-button {
  display: none;
  border: none;
  margin-top: 30%;
  width: 15vh;
  height: 5vh;
  border-radius: 10px;
  background-color: #5a5a5a;
  color: white;
  font-size: 16px;
  margin-bottom: 20%;
  padding-bottom: 20px;
}

#feature-button:hover {
  background-color: #ff7b8b;
  cursor: pointer;
}





/* ----- Product Presentation CSS -----

CSS for the section of the website that features each "product" available.

Tags included:

1. #presentation-container - the general container where everything is

2. #presentation-title-description - the container in which the title and the description are

3. #presentation-title - the main title of the section

4. #presentation-separator - the CSS for the separator between the main title and the description

5. #presentation-description - the main description of the section

6. #section-buttons - the div containing the main product buttons

7. .product-buttons - the general class used to style the buttons

8. .product-button:hover - the CSS that changes the style of a button when hoevered

9. .product-button:focus - the CSS that removes the outlife of the buttons when clicked

10. .product-button-active - the CSS for the class that is added with jQuery to buttons when sections appear/disappear

11. #section-content-container - the main container containing all the subsections

12. .product-content - a general class applying some CSS to each subsection container

13. #content-image - general id used to apply CSS to each image in the subsections

14. #content-image-container - general id used to apply CSS to each div containing the main image of each subsection

15. #content-title-text - general ID used to style the div containing each subsection's title and description

16. #content-title-text p - selector used to add a little distance between the paragraph and the title

17. .product-features-list - a general class used to style the feature list of each subsection

18. #first-feature-list - a unique ID used to stylize only the first container with that ID.

19. #product-feature-image - genral ID used to style the container of each product image1

20. #correct-icon - general id of all the images used to replace UL bulletpoints in the "list" with features of each product

21. #inside-features-title-text - general ID of the features of the products within each subsection

22. #content-button - general ID of each button inside each product subsection

23. #content-button:hover - general ID of the hover styling of each button inside the products subsection


*/

#presentation-container {
  display: flex;
  flex-flow: column;
}

#presentation-title-description {
  display: flex;
  flex-flow: column;
  align-items: center;
  margin: auto;
  text-align: center;
  margin-top: 5%;
  width: 60%;
}

#presentation-title-description h1 {
  font-size: 45px;
}

#presentation-title-description p {
  margin-top: 1%;
  font-size: 24px;
}

#section-buttons {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.product-button {
  border: none;
  border-radius: 10px;
  background-color: inherit;
  box-shadow: 1px 2px 15px #bebebe;
  padding: 15px;
  width: 10%;
  margin: 2%;
  font-size: 15px;
}

.product-button:hover {
  cursor: pointer;
}

.product-button:focus {
  outline: 0;
}

.product-button-active {
  background-color: #5a5a5a;
  color: white;
}




/* -- SUBSECTION CSS: Section Content CSS -- */

#section-content-container {
  margin: auto;
  width: 75%;
}

.product-content {
  display: flex;
  flex-flow: row;
  justify-content: center;
  padding: 2%;
}

#content-image {
  width: 100%;
  height: 100%;
  height: auto;
}

#content-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

#content-title-text {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  width: 50%;
  padding: 1%;
}

#content-title-text p {
  margin-top: 2%;
}

.product-features-list {
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  margin-top: 5%;
}

#first-feature-list {
  margin-top: 0;
}

#product-feature-image {
  justify-content: flex-start;
  align-items: flex-start;
  width: 10%;
}

#correct-icon {
  width: 100%;
  height: 100%;
}

#inside-features-title-text {
  display: flex;
  flex-flow: column;
  margin-left: 2%;
}

#content-button {
  border: none;
  border-radius: 10px;
  background-color: #5a5a5a;
  box-shadow: 1px 2px 15px #bebebe;
  padding: 15px;
  width: 25%;
  margin-top: 6%;
  font-size: 16px;
  color: white;
}

#content-button:hover {
  cursor: pointer;
  background-color: #ff7b8b;
}






/* Media - Video Section CSS

Tags included:

1. #main-location-container - main container where all the elements in the section architecto

2. #media-title-description - id of the container with the title and description

3. #media-separator - separator between title and description

4. #media-title-description p - styling applied only to the main description

5. #media-video-text-container - general container keeping the title, description and video

6. #media-text - id of the container with the title and description at the left of the Video

7. #media-text h2 - styling of the h2 within the media-text container

8. #media-text p - styling of the p within the media-text container

9. #text-video-separator - separator between the text and the Video

10. #media-button - the button bellow the text at the left of the video

11. #media-button:hover - styling of the hover state of the button

12. media-video -container with the video

13. iframe-video - the iframe tag containing the YouTube video

*/

#main-location-container {
  box-shadow: 2px 2px 15px #bebebe;
  display: flex;
  flex-flow: column;
  align-items: center;
}

#media-title-description {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 4%;
  width: 90%;
}

#media-title-description h1 {
  font-size: 45px;
}

#media-title-description p {
  margin-top: 1%;
}

#media-video-text-container {
  display: flex;
  flex-wrap: wrap;
  flex-flow: row;
  justify-content: space-around;
  align-items: center;
  width: 75%;
  padding: 3% 2% 3% 2%;
  /* background-color: #f5f5f5; */
  border-radius: 10px;
}

#media-text {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  width: 40%;
  height: auto;
}

#media-text h2 {
  font-size: 30px;
}

#media-text p {
  margin-top: 3%;
  font-size: 21px
}

#text-video-sperator {
  height: 20vh;
  border: solid 0.5px #e1e1e1;
  display: none;
}

#media-button {
  border: solid 1px #c1c1c1;
  border-radius: 10px;
  background-color: inherit;
  box-shadow: 1px 2px 2px #bebebe;
  padding: 15px;
  width: 25%;
  margin-top: 5%;
  font-size: 15px;
  color: black;
}

#media-button:hover {
  cursor: pointer;
  background-color: white;
  background-color: #5a5a5a;
  color: white;
}

#media-video {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

#video {
  width: 60vh;
  height: 35vh;
}




/* Prices Section CSS

Tags Included:

1. #prices-section-container - main container of the price section

2. #prices-title-description - container where the title and description are

3. #prices-title-description h1 - main title of the "Prices" section

4. #prices-separator - Separator between title and description

5. #prices-title-description p - main description of the "Prices" section

6. #all-prices-container - container where all the divs with prices are

7. .price-container - common class used to style the containers of each price

8. .price-container h1 - title of each price (starter/premium/professional)

9. .price-container h2 - subtitle of each price ($55/$85/$120)

10. .price-container p - monthly payment text style

11. .price-container hr - prices separator style

12. .price-container ul - the list with features of each price

13. .price-container li - each individual item on the list with features for each price

14. .price-container button - style of each button of each price section

15. .price-container button:hover - the hover state of each button of each price

16. #price-container-two - the price container in the middle, placed a little higher than the others

*/

#prices-section-container {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  margin: auto;
  margin-top: 3%;
}

#prices-title-description {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 60%;
}

#prices-title-description h1 {
  font-size: 45px;
}

#prices-separator {
  width: 5%;
  margin-top: 2%;
  border: solid 1px #ff5a63;
}

#prices-title-description p {
  margin-top: 1%;
}

#all-prices-container {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  align-items: center;
  width: 90%;
}

.price-container {
  box-shadow: 2px 2px 15px #bebebe;
  text-align: center;
  margin-top: 7%;
  width: 27%;
}

.price-container h1 {
  color: #ff5a63;
  font-size: 45px;
  margin-top: 6%;
}

.price-container h2 {
  color: #323a45;
  font-size: 40px;
  margin-top: 4%;
}

.price-container p {
  margin-top: 4%;
  font-size: 17px;
}

.price-container hr{
  margin: auto;
  margin-top: 4%;
  margin-bottom: 4%;
  width: 70%;
  border: solid 0.5px #c1c1c1;
}

.price-container ul {
  list-style: none;
}

.price-container li {
  padding: 3%;
}

.price-container button {
  border: none;
  border-radius: 10px;
  background-color: #5a5a5a;
  box-shadow: 1px 2px 15px #bebebe;
  padding: 15px;
  width: 30%;
  margin-top: 6%;
  font-size: 16px;
  color: white;
  margin-bottom: 6%;
}

.price-container button:hover {
  cursor: pointer;
  background-color: #ff7b8b;
}

.social {

  font-size: 26px;

}

#price-container-two {
  margin-top: 4%;
}




/* Newsletter Section CSS

Tags included:

1. #newsletter-container - main newsletter section container

2. #newsletter-title-description - container with the main title and description

3. #newsletter-title-description h1 - styling for the main title

4. #newsletter-input-container - container with the form and input elements

5. #email-form - the id given to the <form> tag

6. #email-form label - styling of the label before the <input> tag

7. #email-input - id of the <input> tag where the email will be written

8. #email-form button - styling of the "submit" button after the <input> tag

9. #email-form button:hover - styling for the hover state of the button

*/

#newsletter-container {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-top: 3%;
}

#newsletter-title-description {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 60%;
}

#newsletter-title-description h1 {
  font-size: 45px;
}

#email-input-container {
  margin-top: 1%
}

#email-form {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

#email-form label {
  font-size: 40px;
}

#email {
  font-size: 18px;
  margin-top: 4%;
  padding: 3%;
  width: 100%;
}

#text {
  font-size: 18px;
  margin-top: 4%;
  padding: 3%;
  width: 150%;
}

#submit {
  border: none;
  border-radius: 10px;
  background-color: #5a5a5a;
  box-shadow: 1px 2px 15px #bebebe;
  font-size: 16px;
  color: white;
  margin-top: 5%;
  padding: 15px;
  width: 40%;
}

#submit:hover {
  cursor: pointer;
  background-color: #ff7b8b;
}



/* Footer Section */

footer {
  box-shadow: 1px 2px 15px #bebebe;
  margin-top: 4%;
  color: #858585;
  text-align: center;
}

footer p {
  padding: 0.5%;
}










/* @Media min-width: 480px */
@media only screen and (min-width : 200px) and (max-width : 860px) {

  /* General Elements */

  .social {

    font-size: 40px;
  
  }


  #title-text-separator {
    width: 15%;
    margin-top: 3%;
    margin-bottom: 3%;
    border: solid 1px #5a5a5a;
  }


  /* Navigation CSS */
  #header {
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 80px;
    margin: auto;
  }


  #normal-header {
    display: none;
  }

  #responsive-header {
    display: flex;
    flex-flow: column;
    width: 100%;
    margin: auto;
  }

  #responsive-logo-button {
    display: flex;
    justify-content: space-between;
    padding: 1% 0 1% 0;
  }

  #responsive-nav-bar {
    display: flex;
    flex-flow: column;
    align-items: center;
    height: 100vh;
  }

  #responsive-nav-bar ul {
    list-style: none;
  }

  #responsive-nav-bar li {
    text-align: center;
    font-size: 23px;
    margin-top: 40%;
  }

  #responsive-first-item {
    margin-top: 0;
    padding: 0;
  }

  #header-img-black {
    margin-left: 5%;
    margin-top: 3%;
    width: 50%;
    height: auto;
  }

  #dropdown-button-black {
    display: block;
    width: 55%;
    height: auto;
    margin: 0;
    padding: 0;
  }


  #image-button-black {
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: inherit;
    padding: 2%;
  }




  /* Hero CSS */

  #hero-header {
    width: auto;
    height: 100vh;

    /* hero-header flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    /* Texy style */
    text-align: center;
    color: white;

    /* Background image */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url("home_semLogo.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  #hero-title {
    font-size: 3.5em;
  }

  #hero-text {
    font-size: 1.3em;
    margin-top: 2%;
  }

  #hero-button {
    border: solid 2px white;
    background-color: inherit;
    color: white;
    margin-top: 6%;
    width: 25%;
    height: 55px;
    font-size: 15px;
    border-radius: 10px;
  }

  #hero-button:hover {
    cursor: pointer;
  }



  /* Service Features CSS */

  #service-features {
    display: flex;
    flex-direction: column;
    /* Change flow-direction to "column" in the responsive design for the features to stack
    one on top of another. */
    justify-content: space-around;
    align-items: center;
  }

  #features-description {
    width: 90%;
  }

  #feature {
    width: 80%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid 1px #bebebe;
    box-shadow: 1px 2px 15px #bebebe;
    margin-top: 10%;
  }

  #feature-button {
    border: none;
    margin-top: 30%;
    width: 15vh;
    height: 5vh;
    border-radius: 15px;
    background-color: #5a5a5a;
    color: white;
    font-size: 16px;
    margin-bottom: 20%;
  }




  /* Presentation Section CSS */

  #presentation-container {
    margin-top: 5%;
  }

  #presentation-title-description {
    width: 90%;
  }

  #section-buttons {
    margin-top: 5%;
  }

  #section-content-container {
    margin: auto;
    width: 90%;
  }

  #section-content-container {
    margin-top: 7%;
  }

  #presentation-title-description p {
    margin-top: 1%;
    font-size: 24px;
    padding: 0;
  }


  .product-button {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 40%;
    padding: 15px;
  }

  .product-content {
    display: flex;
    flex-flow: column;
    padding: 2%;
  }

  #content-image {
    width: 100%;
    height: 100%;
  }

  #content-image-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  #content-title-text {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: auto;
    margin-top: 5%;
  }

  #content-title-text h1 {
    margin: auto;
  }

  #centered-product-description {
    text-align: center;
  }

  #content-title-text p {
    margin-top: 5%;
  }

  #product-feature-image {
    justify-content: center;
    align-items: center;
    width: 20%;
  }

  .product-features-list {
    margin-top: 15%;
  }

  #first-feature-list {
    margin-top: 10%;
  }

  #content-button {
    margin: auto;
    margin-top: 10%;
    width: 35%;
  }




  /* -- Media Section CSS -- */

  #main-location-container {
    margin-top: 5%;
  }

  #media-title-description {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 90%;
    margin-top: 8%;
  }

  #media-video-text-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    padding: 2% 1% 2% 1%;
    text-align: center;
  }

  #media-text {
    width: 100%;
  }

  #media-text h2 {
    margin: auto;
  }

  #media-text p {
    margin-top: 6%;
  }

  #text-video-sperator {
    height: 1%;
    width: 80%;
    margin-top: 10%;
    margin-bottom: 9%;
  }

  #media-button {
    width: 30%;
    margin: auto;
    margin-top: 7%;
  }

  #media-video {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    align-content: center;
  }

  #iframe-video {
    width: 50vh;
    height: 30vh;
    margin-bottom: 8%;
  }


  /* -- Prices Section CSS -- */

  #prices-section-container {
    margin-top: 15%;
  }

  #prices-title-description {
    width: 100%;
  }

  #all-prices-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .price-container {
    width: 90%;
    margin-top: 15%;
  }

  #price-container-two {
    margin-top: 15%;
  }

  .price-container button {
    width: 35%;
  }



  /* Email Section CSS */

  #newsletter-container {
    margin-top: 10%;
  }

  #newsletter-title-description {
    width: 90%;
  }

  #email-form label {
    width: 90%;
    text-align: center;
  }

  #email {
    width: 80%;
  }


  /* Footer Section */

  footer {
    margin-top: 10%;
  }

}


















@media only screen and (min-width : 860px) and (max-width : 1280px) {


    /* Navigation CSS */
    #header {
      position: fixed;
      display: flex;
      flex-wrap: wrap;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      min-height: 80px;
      margin: auto;
      z-index: 999;
      
    }


    #normal-header {
      display: none;
    }

    #responsive-header {
      display: flex;
      flex-flow: column;
      width: 100%;
      margin: auto;
      background-color: rgba(0, 0, 0, 0.5);
    }

    #responsive-logo-button {
      display: flex;
      justify-content: space-between;
      padding: 1% 0 1% 0;
    }

    #responsive-nav-bar {
      display: flex;
      flex-flow: column;
      align-items: center;
    }

    #responsive-nav-bar ul {
      list-style: none;
    }

    #responsive-nav-bar li {
      text-align: center;
      font-size: 23px;
      margin-top: 40%;
    }

    #responsive-first-item {
      margin-top: 0;
      padding: 0;
    }

    #header-img-black {
      margin-left: 5%;
      margin-top: 3%;
      width: 50%;
      height: auto;
    }

    #dropdown-button-black {
      display: block;
      width: 55%;
      height: auto;
      margin: 0;
      padding: 0;
    }


    #image-button-black {
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: inherit;
      padding: 2%;
    }


  /* Hero CSS */

  #hero-header {
    width: auto;
    height: 100vh;

    /* hero-header flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    /* Texy style */
    text-align: center;
    color: white;

    /* Background image */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url("home_semLogo.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  #hero-title {
    font-size: 3.5em;
  }

  #hero-text {
    font-size: 1.3em;
    margin-top: 2%;
  }

  #hero-button {
    border: solid 2px white;
    background-color: inherit;
    color: white;
    margin-top: 6%;
    width: 25%;
    height: 55px;
    font-size: 15px;
    border-radius: 10px;
  }

  #hero-button:hover {
    cursor: pointer;
  }



  /* Service Features CSS */

  #service-features {
    display: flex;
    flex-flow: row;
    /* Change flow-direction to "column" in the responsive design for the features to stack
    one on top of another. */
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2%;
  }

  #features-description {
    width: 90%;
  }

  #feature {
    width: 80%;
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    border: solid 1px #bebebe;
    box-shadow: 1px 2px 15px #bebebe;
    margin-top: 10%;
  }

  #feature-button {
    border: none;
    margin-top: 30%;
    width: 15vh;
    height: 5vh;
    border-radius: 15px;
    background-color: #5a5a5a;
    color: white;
    font-size: 16px;
    margin-bottom: 20%;
  }




  /* Presentation Section CSS */

  #presentation-container {
    margin-top: 5%;
    width: 80%;
    margin: auto;
  }

  #presentation-title-description {
    width: 90%;
  }

  #section-buttons {
    margin-top: 5%;
  }

  #section-content-container {
    margin: auto;
    width: 90%;
  }

  #section-content-container {
    margin-top: 7%;
  }

  .product-button {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 40%;
    padding: 15px;
  }

  .product-content {
    display: flex;
    flex-flow: column;
    padding: 2%;
  }

  #content-image {
    width: 100%;
    height: 100%;
  }

  #content-image-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  #content-title-text {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: auto;
    margin-top: 5%;
  }

  #content-title-text h1 {
    margin: auto;
  }

  #centered-product-description {
    text-align: center;
  }

  #content-title-text p {
    margin-top: 5%;
  }

  #product-feature-image {
    justify-content: center;
    align-items: center;
    width: 8%;
  }

  .product-features-list {
    margin-top: 15%;
  }

  #first-feature-list {
    margin-top: 10%;
  }

  #content-button {
    margin: auto;
    margin-top: 10%;
    width: 35%;
  }




  /* -- Media Section CSS -- */

  #main-location-container {
    margin-top: 5%;
  }

  #media-title-description {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 90%;
    margin-top: 8%;
  }

  #media-video-text-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    padding: 2% 1% 2% 1%;
    text-align: center;
  }

  #media-text {
    width: 100%;
  }

  #media-text h2 {
    margin: auto;
  }

  #text-video-sperator {
    height: 1%;
    width: 80%;
    margin-top: 10%;
    margin-bottom: 9%;
  }

  #media-button {
    width: 35%;
    margin: auto;
    margin-top: 7%;
  }

  #media-video {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    align-content: center;
  }

  #iframe-video {
    width: 80vh;
    height: 50vh;
    margin-bottom: 9%;
  }


  /* -- Prices Section CSS -- */

  #prices-section-container {
    margin-top: 15%;
  }

  #prices-title-description {
    width: 90%;
  }

  #all-prices-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .price-container {
    width: 50%;
    margin-top: 15%;
  }

  #price-container-two {
    margin-top: 15%;
  }

  .price-container button {
    width: 35%;
  }



  /* Email Section CSS */

  #newsletter-container {
    margin-top: 10%;
  }

  #newsletter-title-description {
    width: 90%;
  }

  #email-form label {
    width: 90%;
    text-align: center;
  }

  #email {
    width: 75vw;
  }

}

.errorlist p {margin: 5px 0;}

label {font-size: 11px;}

p.fieldwrap {
  margin: 10px 0;
}

div.form-wrapper {
width: 480px;
margin: 20px auto;
}

.disp {display:none;}

input[type=text], textarea {
  width: 468px;
  min-height: 50px;
  border: 0;
  background: #f0f0f0;
  outline: 1px solid #c8c8c8;
  padding-left: 12px;
}

input[type=text]:focus, textarea:focus {
  border: 0;
}

textarea {
  width: 646px;
  height: 130px;
  padding: 12px; 
}

select {
  -moz-appearance:normal;
  -webkit-appearance:button;
  width: 480px;
  height: 50px;
  border: 0;
  outline: 1px solid #c8c8c8;
  background: #f0f0f0;
  cursor: pointer;
  cursor: hand;
  color: #999999;
  border-radius: 0;
  padding-left: 12px;
}

input[type=submit] {
  -moz-appearance:button;
  -webkit-appearance:button;
  width: 480px;
  height: 50px;
  border: 0;
  outline: 1px solid #2e76ff;
  background: #3f81ff;
  cursor: pointer;
  cursor: hand;
  color: #fff;
  border-radius: 0;
}

input[type=submit]:hover {
  background: #2e76ff;
  outline:1px solid #1d6bff;
}

div.notification {
  width: 468px;
  height: 50px;
  padding-left: 12px;
  color: white;
  margin: 0 0 10px 0;
}

div.notification p {line-height: 50px;}

div.notification.success {
  background: url('https://www.donedigital.com.au/contact-legendary-suitjamas/iconography-sprite.png') #27a30c;
  background-position: 0 3px;
  outline: 1px solid #23930b;
}

div.notification.error {
  background: url('https://www.donedigital.com.au/contact-legendary-suitjamas/iconography-sprite.png') #e2432d;
  outline: 1px solid #df361f;
  background-position: 0 203px;
}

input#fm_name, input#fm_email, select#fm_subject {
  background-image: url('https://www.donedigital.com.au/contact-legendary-suitjamas/iconography-sprite.png');
}

input#fm_name {background-position: 0 153px;}
input#fm_email {background-position: 0 353px;}
select#fm_subject {background-position: 0 301px;}

::-webkit-input-placeholder {
    color:    #999;
}
:-moz-placeholder {
    color:    #999;
}
::-moz-placeholder {
    color:    #999;
}
:-ms-input-placeholder {
    color:    #999;
}

@-moz-document url-prefix() {
  select {
    padding: 16px 0 0 0;
    text-indent: 15px;
    outline: 0;
    margin-left: -20px;
    width: 500px;
    background-position: 21px 301px !important;
  }
  
  .ff-only {
    outline: 1px solid #c8c8c8;
    overflow: hidden;
    width: 480px;
  }

  p {margin:0;}
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
  input[type="text"] {
    width: 270px;
  }
  select, input[type="submit"] {
    width: 289px !important;
  }

  textarea {width: 77vw;}

  div.errorlist p {font-size: 10px;}

  div.notification {width: 277px;}
  div.errorlist {width:265px !important;}

  input#fm_name {background-position: -190px 153px;}
  input#fm_email {background-position: -190px 353px;}
  select#fm_subject {background-position: -190px 301px;
}
}

div.errorlist {
  width: 456px;
  min-height: 50px;
  border: 0;
  background: #F0F0F0;
  outline: 1px solid #C8C8C8;
  padding: 12px;
  margin-top: -8px;
  color: #999;
}
  
div.faq {
  background: #fff48a;
  outline: 1px solid #fff279;
  color: #222;
  padding: 12px 0 12px 12px;
  height: auto;
}

div.faq p {line-height: 25px;}




.IcoWhats{

  width: 4%;
  vertical-align: middle

}

.IcoEmail{

  width: 4%;
  vertical-align: middle

}

/* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  opacity: 0.7;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 40px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

img#iso-image {
  width: 20%;
}