@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;
  min-height: 100vh;
  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;
  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;
}

/* SECTION 3.1 */
/* aside section flex container responsive styling */
.asidemenu {
  flex: 25%;
  background: whitesmoke
}
/* 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 */
/* Login page main section styling */
/* form section flex container responsive styling */
.flex-container-formsection {
  flex: 100%;
  display: flex;
  flex-flow: row wrap;
  background-color: lightgrey;
  justify-content: center;
  align-items: center;
}

/* account login form section styling */
.flex-container-formsection div.loginforms {
  width: 30%;
  min-height: 65vh;
  padding: 2.5em 5em;
  margin: 4em 2em;
  background-color: whitesmoke;
  box-sizing: border-box;
  position: relative;
}
.flex-container-formsection #excustdiv  {
  text-align: end;
}
.flex-container-formsection #newcustdiv  {
  text-align: start;
}
.flex-container-formsection label {
  color: rgb(65, 65, 65);
  font-size: 0.9em;
}
div#newcustdiv span#newpageinfo {
  position: absolute;
  top: 90%;
  left: 5%;
  right: 5%;
  text-align: center;
  font-size: 0.75em;
}         
.flex-container-formsection div.loginforms input[type=text], div.loginforms input[type=password] {
  width: 100%;
  padding: 0.5em 1em;
  background-color: rgb(250, 250, 250);
  border: 0.1em solid teal;
}
.flex-container-formsection a#forgpwd {
  color: teal;
  text-decoration: none;
  font-size: 0.9em;
}

.flex-container-formsection .gbuttons {
  width: 100%;
  padding: 1em 2em;
  background-color: teal;
  color: snow;
  font-size: 1em;
  text-align: center;
}

/*new customer registration form*/
.flex-container-formsection #newcustomerreg h1, #newcustomerreg h4, #newcustomerreg p {
  text-align: center;
}
#newcustomerreg p {
  margin-top: -1em;
  font-size: 0.8em;
  color: rgb(65 65 65);
}
.flex-container-formsection #newcustomerreg select, #newcustomerreg input[type=text], #newcustomerreg input[type=radio],
#newcustomerreg input[type=password], #newcustomerreg input[type=email],
#newcustomerreg input[type=date], #newcustomerreg input[type=tel]  {
  width: 100%;
  padding: 0.5em 1em;
  background-color: rgb(250, 250, 250);
  border: 0.1em solid teal;
}
.flex-container-formsection #newcustomerreg  {
  width: 75%;
  margin: 2em;
  padding: 2.5em 1em;
  background-color: snow;
}
#newcustomerreg label, #newcustomerreg select,
#newcustomerreg input[type=text], #newcustomerreg input[type=password], 
#newcustomerreg input[type=email], #newcustomerreg input[type=date], #newcustomerreg input[type=tel] {
  width: inherit;
  margin: 0% 2% 2% 10%;
}

.flex-container-formsection #newcustomerreg select {
  width: 20%;
}

div#formtandcs {
  text-align: center;
  padding: 1em 5em;
}
div#formtandcs p#hearus {
  text-align: justify;
}

div#notsubscribe label {
  padding: 0%;
  margin: 2%;
}
div#notsubscribe label input[type=checkbox] {
  width: 1em;
  height: 1em;
  border: 0.1em solid teal;
  border-radius: 0%;
}
#regmyacct /*#newcustomerreg hr*/ {
  display: block;
  margin: auto;
  max-width: 80%;
  text-align: center;
}




/* 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*/



/*
main * {
  border: 0.1em solid grey;
}
main {
  width: 100vw;
  border: 1em solid indianred;
  text-align: center;
}
section #vouchercode {
  color: tomato;
  font-weight: 600;
  margin-top: -1em;
  margin-bottom: 0em;
  padding-top: 0em;
  padding-bottom: 1.2em;
}
main section p {
  background-color: rgb(255, 225, 151);
  padding-top: 1.2em;
  margin-top: 0em;
  font-size: 1.2em;
}
section.maintopsection h1 {
  float: left;
  clear: both;
  font-weight: 200;
  padding: 2em;
  margin-top: 0em;
  margin-bottom: 0em;
  background-color: rgb(197, 252, 246);
}
section.maintopsection  {
  width: 100vw;
  height: 60%;
  margin-top: 0em;
  margin-bottom: 2em;
  background-image: url("../images/dress-1781928_1920.jpg");
}
.maintopsection div {
  display: inline-block;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 800;
  padding-top: 5em;
  padding-bottom: 5em;
  color: snow;
  line-height: 1em;
  font-size: 2em;
  z-index: 2;
}

main section.flex-container-figuresection {
  margin-top: 2em;
}

section.flex-container-figuresection, aside.flex-container-sidebar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
  align-items: flex-start;
}
/*section.flex-container-figuresection aside.flex-container-sidebar {
  /*display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /*align-self: flex-start;
}

aside.flex-container-sidebar a, a.sidesubmenuheading {
  text-decoration: underline;
  list-style: none;
  display: block;
  text-decoration: none;
  color: slategrey;
 line-height: 1.2em;

}
section.flex-container-figuresection div.flex-container-sidebar aside ul.sidebarlist li div div {
  margin-bottom: 1em;
  padding: 0.5em;
}

aside.flex-container-sidebar div.asidemenubar div.sidemenusub a {
  list-style: none;
  display: block;
  text-decoration: none;
  color: slategrey;
 line-height: 1.2em;
}
 aside.flex-container-sidebar a div.asidemenubar div.sidemenusub a.sidesubmenuheading {
  text-decoration: underline;

} 


.flex-container-figuresection figure, aside {
  display: inline;
}

section figure img {
  width: auto;
  
}

figcaption a {
  font-family: 'Lato', sans-serif;
  font-size: 1em;
  color: rgb(65, 65, 65);
  text-decoration: none;
  padding: 0em 4em;

}*/