/* 
COLOR PALETTE 
footer, Very light grey, #E3E3E3, 227,227,227
copyright, footer, Grey, #ACACAC, 172,172,172
buttons, Sapphire 78, #183399 78%, 24,51,153 78%
font and main bg, White #FCFCFC, 252,252,252 
body text, Black, #000000, 0,0,0

TEXT STYLE CATALOG 
h1, Title Text CormorantGaramond, Medium 500, 150px Center 
h2, Heading Text (news article, this week.., new trend) CormorantGaramond, Semibold, 49px Center 
h3, Titles - CormorantGaramond CormorantGaramond, Semibold 600, 35px
Button text, CormorantGaramond, Semibold, 18px Center, Line height: 29px
Body text Roboto, Light 300, 20px Line height: 29px 
*/

/* setup - normalize */
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

article,
aside,
footer,
header,
nav,
section {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

figcaption,
figure,
main {
  display: block
}

figure {
  margin: 1em 40px
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: inherit
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

dfn {
  font-style: italic
}

mark {
  background-color: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

audio,
video {
  display: inline-block
}

audio:not([controls]) {
  display: none;
  height: 0
}

img {
  border-style: none
}

svg:not(:root) {
  overflow: hidden
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .35em .75em .625em
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  display: inline-block;
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details,
menu {
  display: block
}

summary {
  display: list-item
}

canvas {
  display: inline-block
}

template {
  display: none
}

[hidden] {
  display: none
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* Global Styles */

/* set font-size on the root element. Sets the default font-size to 20px */
html {
  font-size: 125%;
}

/* images will only take up available space within their parent */
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* body text based on styleGuide*/
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 29px;
  color:  rgb(0, 0, 0);
  font-size: 20px;
}

/* remove default styling from lists */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* remove underline from anchor tags */
a {
  text-decoration: none;
  text-transform: uppercase;
}

/* Title Text styles */
h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 150px;
  text-align: center;
  color: rgb(252, 252, 252);
  margin: 25vh auto;
  line-height: 100px;
}

h1 span {
  font-style: italic;
  font-weight: bolder;
}

/* Heading Text - styleGuide */
h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 49px;
  text-align: center;
  line-height: 35px;
}

/* Titles - styleGuide */
h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 35px;
}

/* wrapper styles */
.wrapper {
  max-width: 1280px;
  width: 90%;
  margin: 0 auto;
}

/* header styles */
header {
  height: 750px;
  background-image: url(./images/image-1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 10px;
}

/* main nav styles */

nav .flexContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  margin: 0 0 0 .45em;
}

.navigation {
  display: flex;
}

.navigation a {
  display: block;
  padding: 1em;
  color: rgb(252, 252, 252);
}

.logo a {
  color: rgb(252, 252, 252);
  font-style: italic;
}

.navigation a:hover {
  background: rgb(172, 172, 172);
}

nav .icon {
  color: rgb(252, 252, 252);
  display: none;
}



/* social media styles */
.social {
  position: absolute;
  top: 600px;
  right: 40px;
}

.social a {
  color: rgb(252, 252, 252);
}



/* MAIN styles */

main {
  background-color: rgb(252, 252, 252);
}

.news {
  margin: 1.5em;
}

.gallery .flexContainer {
  display: flex;
  flex-wrap: nowrap;
}

.gallery li {
  display: inline;
  width: 480px;
  padding: 0 1em .25em 0;
  margin: 0 auto;
}

.gallery .wrapper,
.highlight .wrapper {
  width: 60%;
}


/* button styles */
button {
  background-color: rgba(24, 51, 153, .78);
  color: rgb(252, 252, 252);
  padding: .5em;
  margin-top: .5em;
  border: none;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  line-height: 29px;
  text-transform: uppercase;
}


/* section styles */


.text {
  overflow: hidden;
}

.highlight {
  margin: 5% auto;
  padding-bottom: 2em;
}

.highlight img {
  float: left;
  width: 30%;
  padding: 2em 1.5em 0 0;
}

.highlight .text {
  text-align: left;
}

.highlight h2 {
  text-align: left;
}

/* article blog styles */

.blog {
    overflow: hidden;
}

.trends .wrapper,
.fashionWeek .wrapper {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}

.trends img {
  float: right;
  max-width: 50%;
}

.trends .text,
.fashionWeek .text {
  text-align: left;
  width: 50vw;
}

.trends .text {
  padding: 0 5% 5% 20%;
}

.trends .text h2 {
  text-align: left;
}

.fashionWeek img {
  float: left;
  width: 50%;
}

.fashionWeek .text {
  padding: 2% 10% 5% 5%;
}

.fashionWeek .text h2 {
  text-align: left;
}



.engage {
  background-image: url(./images/image-1.jpg);
  text-align: center;
}

.engage a {
  color: rgb(252, 252, 252);
  line-height: 0px;
}

.engage .flexContainer {
  display: flex;
  justify-content: space-around;
}

.engage li {
  display: flex;
  justify-content: center;
  width: 30em;
  padding: 4em;
  margin: 0 auto;
  white-space: nowrap;
}



/* FOOTER styles */

footer {
  background-color: rgb(227, 227, 227);
  padding-top: 1em;
}

footer .flexContainer {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  padding-bottom: 3em;
}

.subscribe {
  flex-grow: .5;
}

fieldset {
  padding: 0;
  border: none;
}

fieldset .email {
  width: 75%;
  padding: .6em;
  color: rgb(227, 227, 227);
  border: none;
}

fieldset .button {
  background-color: rgb(0, 0, 0);
  color: rgb(227, 227, 227);
  padding: .5em;
  margin-top: .5em;
  border: none;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  line-height: 29px;
  text-transform: uppercase;
}

.footerNav {
  text-align: right;
}

.footerNav a {
  color: rgb(0, 0, 0);
}


.copyright {
  background-color: rgb(172, 172, 172);
  text-align: center;
  width: 100vw;
  position: absolute;
  left: 0;
}


/* *********** media queries *********** */


/* Portrait tablet and small desktops */
@media (max-width: 940px) {

  .engage .flexContainer {
    flex-direction: column-reverse;
    justify-content: center;
  }

  .engage li {
    width: 100%;
    padding: 1.5em;
  }

  h1 {
    font-size: 16vw;
    line-height: 11vw;
  }

  h2 {
    font-size: 33px;
  }
/* } */

/* OPTIONAL: Landscape phone to portrait tablet */
/* @media (max-width: 768px) { */
  
  .navigation,
  .logo {
    display: none;
  }

  nav .flexContainer {
    justify-content: flex-end;
  }

  nav a.icon {
    display: block;
    margin-top: 5%;
  }

  .social {
    display: none;
  }

  .gallery li:last-child {
    display: none;
  }

  .gallery .wrapper,
  .highlight .wrapper {
    width: 85%;
  }

  .highlight img {
    float: none;
    display: block;
    margin: 0 auto;
    width: 100%;
  }

  .highlight .text,
  .highlight h2 {
    display: block;
    text-align: center;
  }

  .highlight p {
    text-align: left;
  }

  .trends img {
    float: none;
    display: block;
    margin: 0 auto;
    max-width: 90%;
  }

  .trends .text,
  .fashionWeek .text,
  .trends .text h2,
  .fashionWeek .text h2 {
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    width: 90%;
  }

  .trends .text,
  .fashionWeek .text {
    padding: 4vh 0;
  }

  .fashionWeek img {
    float: none;
    display: block;
    margin: 0 auto;
    width: 90%;
  }

  footer .flexContainer {
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
  }

  .subscribe {
    margin: 0 25vw 1vh 0;
    text-align: center;
  }

  fieldset .email {
    width: 90vw;
    text-align: center;
  }

  fieldset .button {
    width: 90vw;
  }

}

/* Landscape phones and smaller */
@media (max-width: 480px) {

  .contact p,
  .footerNav li,
  .copyright p {
    font-size: 80%;
  }

  header {
    max-height: 75vh;
  }

}