/*************** Global Styles *********************************/
/*

* {
    outline: 1px solid #f00 !important;
  }
*/



main img { width:90%; height:auto; display:block; margin:auto;} /*make all images in main responsive */

.slideshow-container img { width:100%; height:auto;}


body { margin:0; } /* stop page stretching on super large */

button { border:none; }

h1 { text-align: center; font-family: 'Poppins', sans-serif; margin:3vw 3vw 3vw 3vw;}

h2 { font-family: 'Poppins', sans-serif; font-size:20px; margin:0;}

p { font-size:18px; font-family: 'Poppins', sans-serif;  margin:0; line-height: 1.8;}

a { font-family: 'Poppins', sans-serif; font-weight: bold; }

.desktop-only { display:none; }

@media only screen and (min-width: 1059px) {p { font-size:18px; line-height: 2;}}

/*************** Home Page Styles ******************************/

.home-page-background{ background: linear-gradient(0deg, #9CCE7E 0%, rgba(255,255,255,1) 35%);}

.section-1-shop { display: flex; flex-direction: column; align-items:center; margin: 0 7vw; gap: 5vw; max-width:1200px;}

.section-1-shop a {font-size:20px;  color:#0000EE; filter:brightness(67%); margin: 3vw 0 1vw 0;}

.section-1-shop > div { display:flex; flex-direction: column; align-content: space-around ;}

.section-1-shop img { max-width: 600px; }

.section-2-contact { display:flex; flex-direction:column ; gap:4vw; align-items: center; background-color: #9CCE7E;  padding: 7vw; margin: 7vw 0 7vw 0vw;}

.section-2-contact p { font-size: 26px; max-width: 600px; }

.section-2-contact a { text-align:center; max-width:212px; max-height: 70px; color:white; text-decoration: none; font-size:22px; padding: 12px 80px;background-color:#40850F; border-radius: 35px; }

.section-3-plants a, .section-4-records a {font-size:20px;  color:#0000EE; filter:brightness(67%);}

.section-3-plants, .section-4-records { display: flex; flex-direction: column;  margin: 3vw 10vw 3vw 8vw; gap: 3vw;}

.plants-section-wrapper, .records-section-wrapper {  padding-bottom:7vw; }

.plants-section-wrapper img, .records-section-wrapper img {  max-width: 800px; margin:0; }

.gmap-container {
    
    
    width: 90%;
   
    height:80vw;
    max-height: 400px;
    max-width: 600px;
    margin:auto;
  }
  
  /* Then style the iframe to fit in the container div with full height and width */
  .responsive-iframe {
    border:none;
    width: 100%;
    height:100%;;
  }
  @media only screen and (min-width: 1150px) {.gmap-container { height:100%;  width:100%;} }

@media only screen and (min-width: 700px) { .section-2-contact { padding:4vw; }} 
 
@media only screen and (min-width: 1100px) { 
    
    .section-2-contact { flex-direction: row; margin: 3vw 0; padding: 2vw; justify-content: center;}

    .section-2-contact p { font-size: 32px; }

    .plants-section-wrapper, .records-section-wrapper{ display:flex; padding-bottom:3vw;}

    .records-section-wrapper { flex-direction: row-reverse; margin-left:7vw;align-items: center;}

    .plants-section-wrapper { margin-right:7vw; align-items: center;}

    .plants-section-wrapper img, .records-section-wrapper img { width:auto; max-width: 600px; min-width:35%;  } /*stops image getting too big / small inside flexbox */

    .section-3-plants { margin-left: 7vw; margin-right:0; }

    .section-4-records { margin-right: 7vw; margin-left:0;}

  

}

@media only screen and (min-width: 1150px) { /* Creates grid layout for desktop */
            
    .section-1-shop { margin: 0 7vw 0 7vw; display:grid; grid-template-columns: 40% minmax(20%,100%); grid-column-gap:10vw; grid-row-gap:5vw; align-items: center; }

    .section-1-shop img {width:100%;}

    .re-order { order:1;} /*reorder the images for desktop layout this uses some inline css too*/

    

    }

@media only screen and (min-width: 1500px) { 
            
    .section-1-shop, .plants-section-wrapper, .records-section-wrapper { margin: auto; max-width:1400px; }

    }

/******************* Visit Us Styles ***********************************/

h2 { font-size: 24px; }

.listening-posts img, .cafe img  { border-radius: 100%; max-width:360px;}

.imaginarium img { max-width: 400px; }


.section-1-tour-the-shop, .listening-posts, .cafe, .imaginarium { display:flex; flex-direction: column; gap:7vw; margin: 0 7vw 0 7vw;}

.section-2-explore-the-shop { display:flex; flex-direction: column;   gap:25px; padding: 5vw 7vw 5vw 7vw; margin-top:50px;}

.section-2-explore-the-shop a { color:#0000EE; filter:brightness(67%); }

.section-2-explore-the-shop { background: linear-gradient(0deg, #9CCE7E 0%, white 50%, #9CCE7E 100%);}

.cafe div, .imaginarium div, .listening-posts div { display: flex; flex-direction:column; gap:25px; max-width:900px;}

.cafe, .imaginarium, .listening-posts { max-width:1200px;margin:auto;}

@media only screen and (min-width: 1000px) { /* Changes layout of both sections*/

    .visit-us-re-order { order:1;}

    .section-1-tour-the-shop { display:grid; grid-template-columns: 1fr 1fr; grid-template-rows:  1fr 1fr;  align-items:center; max-width: 1200px; }

    .section-1-tour-the-shop img { width:100%; }
    
    .listening-posts { flex-direction: row-reverse; align-items: center;}

    .cafe, .imaginarium  { flex-direction: row; align-items: center; margin-top:50px;}
}

@media only screen and (min-width: 1300px) { 
    
    .section-1-tour-the-shop{margin:auto;} 

    .section-1-tour-the-shop p { font-size:20px; }
}

/********************Records Page Styles - there is no section 2 **************************/

.section-1-music, .section-1-music div,  .section-3-discogs { display:flex; flex-direction:column; gap:5vw; }

.section-1-music { margin: 5vw 7vw; }

.section-3-discogs { margin: 0 7vw; }

.section-3-discogs > div { display:flex; flex-direction: column; gap:5vw; max-width:900px;} 

.section-3-discogs a { text-align:center; max-width:140px; max-height: 70px; color:white; text-decoration: none; font-size:18px; padding: 12px 80px;background-color:#F41717; border-radius: 35px; margin:auto;}

.records-page-background { background: linear-gradient( #9CCE7E  0%, white 50%, #9CCE7E 100%); padding: 5vw 0 5vw 0;}



.section-3-discogs img { border-radius: 100%; max-width:360px; }

.section-1-music img { width:100%; }



@media only screen and (min-width: 1100px) { 

    .records-page-re-order { order:1;}

    .section-3-discogs { flex-direction: row; max-width:1200px; }

    .section-3-discogs img{ max-width:240px;}

    .section-3-discogs a { margin:0;}

    .desktop-only { display:block; }

    .mobile-only { display:none;}

    .section-1-music { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows:  1fr 1fr;  align-items:center; max-width: 1200px; }

}

@media only screen and (min-width: 1300px) {

     .section-3-discogs img{ max-width:300px;}

}

@media only screen and (min-width: 1400px) {

    .section-1-music { margin: 5vw auto 5vw auto; }

    .section-3-discogs { margin:auto;}

}

@media only screen and (min-width: 1500px) {

     .section-3-discogs img{ max-width:360px;}

}

/***************** Plants Page Styles ********************************************/



.section-1-plants, .section-1-plants div { display:flex; flex-direction:column; gap:5vw; }

.plants-page-background { background: linear-gradient(  white, #9CCE7E); padding: 5vw 0 7vw 0;}

.section-1-plants { margin: 0vw 7vw; }

.section-1-plants div { max-width:900px; }

@media only screen and (min-width: 1100px) { 

    .section-1-plants { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows:  1fr 1fr;  align-items:center; max-width: 1200px;  }

    .plants-re-order { order:1; }

    .section-1-plants img {  width:100%;}
}

@media only screen and (min-width: 1400px) { .section-1-plants {margin:auto;}} 

/***************************Blog Page Styles ***************************************/

.blog-page-background { background: linear-gradient(  white 90%, #9CCE7E 100%);padding-bottom:12vw;}



.blog-card {display:flex; flex-direction: column; gap:2.5vw; margin: 5vw 7vw; max-width:640px;}

.blog-card img {border-radius: 20% 20% 0 0; width:100%; object-fit: cover; max-height: 400px;}

@media only screen and (max-width: 479px) { .blog-card img {max-height:200px;} } 


.plants-blog { border-bottom: 7px solid #9CCE7E;}

.records-blog { border-bottom: 7px solid black;}

.blog-card-wrapper { display:flex; flex-wrap:wrap; justify-content: center;}


/************************* Article Styles *************************/

.article-page-background { background: linear-gradient(  white 90%, #9CCE7E 100%);padding-bottom:12vw;}

.article p {font-family: 'Roboto', sans-serif; max-width:800px;margin: 3vw 7vw;}

.article-h1 { text-align: left; margin-left:7vw;}

.article h2 { margin: 0vw 7vw;}

.article-info  { display:flex; gap:1vw;  align-items: center; flex-wrap: wrap; gap:20px;}

.article-header img { width:auto; max-width:70px; margin:0; }

.article-header p { padding: 0 4px;}

.article img { max-width: 400px; margin-top:3vw;}



.author-info { display: flex; flex-direction: column; }

.article-header {display: flex; max-width: 800px; justify-content: space-between; align-items:center; margin: 0 7vw; padding-bottom:10px;}

@media only screen and (min-width: 600px) { .article-header img {  max-width:100px; }} 

@media only screen and (min-width: 950px) { .article-wrapper{ width:900px; margin:auto;}} 


/******************** Contact Styles *******************/

.contact-page-wrapper { max-width:1200px; margin:auto;}

.message-submitted { margin: 120px 7vw 0 7vw; text-align: center;}

.home-link { display:block; text-align:center; color:#0000EE; filter:brightness(67%); padding-top:2vw;}

.contact-page-background { background: linear-gradient(  white 90%, #9CCE7E 100%);padding-bottom:12vw;}

.contact-message { max-width:700px; margin: 0 7vw;}

.privacy-message{ max-width:700px; margin: 7vw 7vw;}

.contact-info {  max-width: 700px;  margin: 0 7vw;}

.contact-info p {padding-top:2vw;text-align: center;}

form { padding-top:5vw;}

.social-media-links img { max-width:80px;}

.social-media-links { display:flex; gap:12vw; justify-content: center; margin: 0 7vw;}

@media only screen and (min-width: 950px)  {

.contact-wrapper { display:flex; margin: auto; max-width:900px; }

.social-media-links { flex-direction: column; margin: 5vw 7vw; justify-content: flex-start; gap:50px;}

.privacy-message{ margin: 0vw 7vw;}

}

form { /*border-style:dashed; border-color:grey; border-width:1px;*/ width:80%;  max-width: 500px;padding-bottom: 4em; margin:auto;  }
input, textarea { border-color:black; border-width:1px;  width:100%; display:block; margin:auto; padding:10px 0px 10px 0px;  font-size:16px;font-family: sans-serif, Helvetica, arial;border-radius:4px;}

form input[type="text"] {
box-sizing: border-box;
padding-left: 10px;
}

form textarea[type="text"] {
box-sizing: border-box;
padding-left: 10px;
}


textarea {   resize:none;  padding-bottom: 8em;}

.Contact-Button { background-color:#40850F; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
border-radius: 4px;
float:right;
font-weight: bold;


font-size: 16px;}

.Contact-Button:hover {
background-color: skyblue; /* Green */
color: white;
}

#Message-Submitted { color:red; display:none;}


/****************** Footer Styles ************************/

footer { padding: 4vw; background-color:white; }

footer img { display:block; margin:auto; max-width:90%; height:auto;}

footer  p {text-align: center; color:black; }

.footer-tag-line { font-size: 22px; }

@media only screen and (max-width: 300px) {footer  p {font-size:15px;}}

@media only screen and (min-width: 400px) {.footer-tag-line { font-size: 24px; }}

@media only screen and (min-width: 600px) {.footer-tag-line { font-size: 26px; }}

@media only screen and (min-width: 900px) {.footer-tag-line { font-size: 28px; }}

@media only screen and (min-width: 1100px) {footer {display:flex; justify-content: space-between; align-items:center; margin:auto;  max-width:1400px;}

.footer-re-order { order:-1;}
}