@import url('https://fonts.googleapis.com/css2?family=Lato&family=Ubuntu&display=swap');

/* SECTION 0 */
/* declare space management for entire page elements */
* {
  box-sizing: border-box;
  /* border: 0.1em solid black;  temporary border for styling elements, to be removed after styling is done */
}
/* Style the body */
body {
  max-width: 100vw;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1em;
  margin: 0em;
  padding: 1em;
}


/* SECTION 1 */
/* Header style */
.flex-container-headerdiv {
  display: flex;
  background-color: rgb(65, 65, 65);
  align-items: center;
  justify-content: space-around;
  color: snow;
}
/* logo CONTAINER & style */
header .flex-container-headerdiv a {
  width: 12em;
  max-width: 15%;
  margin: 0.5em;
}
header .flex-container-headerdiv a img{
  width: 100%;
}
/* search item button */
form .shopsearch label {
  display: none;
}
form input#searchbox {
  padding: 0.25em 1em;
  font-family: 'Ubuntu';
}
form input#searchbutton {
  font-family: 'Ubuntu', sans-serif;
  background-color: lightgrey;
  border: 0.1em solid gray;
  padding: 0.25em 2em;
}
form input#searchbutton:hover {
  color: rgb(255, 75, 75);
  background-color: rgb(65, 65, 65);
  border: 0.1em dashed snow;
}
/* my account & basket */
.accountcart ul {
  list-style: none;
}
.accountcart ul li {
  display: inline;
}
.accountcart ul li a {
  font-size: 0.8em;
  color: snow;
  text-decoration: none;
  padding: 0.25em 1.5em;
  border: 0.1em solid grey;
}
.accountcart ul li a:hover {
  color: rgb(255, 75, 75);
  background-color: lightgrey;
  outline: 0.1em dashed snow;
}
/*icons*/
.iconused {
  font-size: 1.2em;
  color: snow;
  text-decoration: none;
}



/* SECTION 2 */
/*Menu bar on header */
/* Style the top navigation bar */
.flex-container-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(65, 65, 65);
  height: 2em;
}
/* style ul list container to start from x=0 position */
nav ul {
  list-style-type: none;
  margin: 0em;
  padding: 0em;
}
/* Style the navigation bar buttons */
nav ul li {
  display: inline-block;
  margin: 0.05em;
}
/* Style the navigation bar links */
.flex-container-menu li a {
  color: snow;
  border: 0.1em solid grey;
  padding: 0.25em 2em;
  text-decoration: none;
  text-align: center;
}
/* Change color on hover */
.flex-container-menu li a:hover {
  background-color: lightgrey;
  color: rgb(255, 75, 75);
  outline: 0.1em dashed snow;
}

/* SECTION 2.1 */
/*Menu bar inner elements */
/* The container <div> - needed to position the dropdown content */
nav ul li {
  position: relative;
  display: inline; /* VERY IMPORTANT - to keep dropdown centralized! */
}
/* Dropdown Content (Hidden by Default) */
.navmenusub {
  display: none;
  position: absolute;
  background-color: rgb(250, 250, 250);
  width: 62em;
  max-width: 90vw;
  max-height: 50em;
  box-shadow: 10px 100px 100px 100px rgba(125, 125, 125, 0.5);
  z-index: 1;
  padding: 1em 1.5em;
  margin-top: -1.5em;
}
/* Links inside the dropdown */
.navmenusub div a {
  font-size: 0.8em;
  color:  rgb(65, 65, 65);
  text-decoration: none;
  text-align: start;
  display: block;
  padding-bottom: 0.4em;
  border: none;
}
/* hover style of Links inside the dropdown */ 
.navmenusub div a:hover {
  color: rgb(255, 75, 75);
  cursor: pointer;
  border: none;
}
.menusubsub .submenuheading {
  text-decoration: underline;
}
/* position dropdown sublinks of menu items */
.navmenusub .menusubsub {
  text-align: start;
  display: block;
  float: left;
  margin-bottom: 1em;
}
/* Show the dropdown menu on hover */
nav ul li:hover .navmenusub {
  display: block;
  top: 3em;
}


/* SECTION 3 */
/* Main body of page */
/* main page flex container responsive styling */
.wrapper {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  margin-bottom: 1em;
}

/*header image container responsive style and default background if no image*/
section.header {
  flex: 100%;
  background: tomato;
  height: 30em;
}
/* main header image styling */
main.wrapper section.header {
  background: url("../images/thewomenshop.png") no-repeat center;
  background-size: cover;
  margin: 1em 0em;
  position: relative;
}
/* main header <h1> tag styling */
main.wrapper section.header h1 {
  font-size: 1.5em;
  font-weight: 400;
  text-shadow: 2px 2px 5px grey;
  position: absolute;
  bottom: 1.5em;
  left: 2.5em;
}
/* main header <p> tag styling */
main.wrapper section.header p {
  color: red;
  font-size: 1.5em;
  padding-top: 5em;
  margin-bottom: 0em;
}
/* main header <div> tag styling */
main.wrapper section.header div#advert {
  background-color: tomato;
  color: snow;
  font-size: 2em;
}
main.wrapper section.header div#advert span#hey {
  font-size: 0.75em;
  color: red;
}

/* SECTION 3.1 */
/* aside section flex container responsive styling */
.asidemenu {
  flex: 25%;
  background: whitesmoke
}
/* aside hamburger styling */
aside.asidemenu a.icon {
  text-decoration: none;
  font-size: 2.5em;
  font-weight: 600;
  color: pink;
  border: 0.01em solid grey;
}
/* aside submenu <div> tags styling */
.asidemenu div div.sidemenusub {
  padding: 2em 0em 2em 5em; 
}
/* aside menu links headings */
.asidemenu div div.sidemenusub a.sidesubmenuheading {
  padding-bottom: 0.5em;
}
/* aside menu links */
.asidemenu div div.sidemenusub a {
  color:  rgb(65, 65, 65);
  text-decoration: none;
  text-align: start;
  display: block;
  padding-bottom: 0.4em;
}
/* aside menu links:hover */
.asidemenu div div.sidemenusub a:hover {
  color: rgb(255, 75, 75);
  cursor: pointer;
  border: none;
}
/* aside menu <hr> tag styling */
.asshr {
  width: 70%;
  margin-left: 0em;
  margin-bottom: 1em;
}

/* SECTION 3.2 */
/* main page figures section styling */
/* images section flex container responsive styling */
.flex-container-figuresection {
  flex: 75%;
  display: flex;
  flex-flow: row wrap;
  background-color: lightgrey;
  justify-content: center;
  align-items: center;
}

/*  figures section images styling */
.flex-container-figuresection figure a img {
  max-width: 250px;
  height: auto;
}
/* figures section figurecaption styling */
.flex-container-figuresection figure figcaption {
  margin-top: 0.5em;
}
/* figures section figurecaption links styling */
.flex-container-figuresection figure figcaption a {
  font-size: 1em;
  color: rgb(65, 65, 65);
  border: 0.1em solid grey;
  padding: 0.25em 2em;
  text-decoration: none;
  text-align: center;
}
/* figures section figurecaption links:hover styling */
.flex-container-figuresection figure figcaption a:hover {
  color: rgb(255, 75, 75);
  background-color: rgb(65, 65, 65);
  border: 0.1em dashed snow;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  body {background: red;}


 
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  body {background: green;}

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  body {background: blue;}

} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
  body {background: orange;}

  .flex-container-menu ul li:not(:first-child) {
    display: none;
  }
  .navmenusub {
    width: 10em;
    max-width: 50vw;
  }


  .asidemenu {
    flex: 0%;
    display: flex;
    justify-content: flex-end;
    background-color: lightgrey;
  }
  .flex-container-figuresection {
    flex: 100%;
  }

  .asidemenubar /*#sidenav a:not(:first-child), .asshr*/ {
    display: none;
  }
  .asidemenu /*#sidenav*/ a.icon {
    color: tomato;
    text-decoration: none;
    font-size: 3em;
    display: inline;
  }
  .asidemenu  a.icon:hover {
    
   
  }



} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  body {background: pink;}

}

/*@media all and (min-width: 600px) {
    .aside {
        flex: 1 0 0;
    }
}

@media all and (min-width: 800px) {
    .main {
        flex: 3 0px;
    }

    .asidemenu {
        order: 1;
    }

    .main {
        order: 2;
    }

    .aside-2 {
        order: 3;
    }

    .footer {
        order: 4;
    }
}*/





/* SECTION 4 */
/* Footer styling */
footer {
  padding: 1em;
  text-align: center;
  color: snow;
  background-color: grey;
}
/* social medial links style */
.flex-container-socialmedia {
  display: flex;
  justify-content: center;
  align-items: center;
}
.socialmedialink {
  list-style-type: none;
}
.socialmedialink li {
  display: inline-block;
  margin: 0.25em;
}
/* icons */
.socialmedialink li a img {
  width: 60%;
}
  
/* SECTION 4.1 */
/* footer lists styles */
.flex-container-footerlist {
  display: flex;
  justify-content: space-around;
  align-content: space-around;
}
.footlist {
  display: inline-block;
}
.flex-container-footerlist ul{
  list-style-type: none;
  text-align: start;
  margin: 0em;
  padding: 0em;
}
.footlistheading {
  text-decoration: underline;
}
.flex-container-footerlist ul li a {
  text-decoration: none;
  font-size: 0.8em;
  color: snow;
  line-height: 2em;
  padding: 0.5em;
}
.flex-container-footerlist ul li a:hover {
  color: rgb(65, 65, 65);
}
/* <hr> styles */
#foo1{
  width: 15%;
  margin-top: 1em;
}
#foo2{
  width: 50%;
  margin-top: 0em;
  margin-bottom: 2em;
}
#foo3{
  width: 90%;
  margin-top: 2em;
}
/* footer p & address */
footer p, address{
  font-size: 0.8em;
  margin-top: 1em;
}
/*END*/