ecommerce-boilerplate/public/css/app.css

html{
  box-sizing:border-box;
}

*,
:after,
:before{
  box-sizing:inherit;
}
*{
  margin:0;
  padding:0;
}

h1,
figure,
fieldset{
  margin:0;
}

fieldset{
  padding:0;
}
audio,
embed,
iframe,
img,
input,
object,
video,
table{
  max-width:100%;
}
.browserupgrade{
  padding:15px;

  text-align:center;

  color:white;
  background:#333333;
}

.browserupgrade a{
  text-decoration:none;

  color:dodgerblue;

  font-weight:bold;
}

.browserupgrade a:hover{
  text-decoration:underline;
}
html{
  font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height:1.666;
}

h1,
h2,
h3,
h4,
h5,
h6{
  line-height:1.1;
}

h1{
  font-size:2.25rem;
}

h2{
  font-size:2rem;
}

h3{
  font-size:1.75rem;
}

h4{
  font-size:1.5rem;
}

h5{
  font-size:1.25rem;
}

h6{
  font-size:1rem;
}
table{
  width:100%;
}

html{
  font-size:16px;
}
body{
  line-height:1.45;
}
p{
  margin-bottom:1.3rem;
}
h1,
h2,
h3,
h4{
  margin:1.414rem 0 0.5rem;
  font-weight:inherit;
  line-height:1.2;
}
h1{
  margin-top:0;
  font-size:3.157rem;
}
h2{
  font-size:2.369rem;
}
h3{
  font-size:1.777rem;
}
h4{
  font-size:1.333rem;
}
small,
.font_small{
  font-size:0.75rem;
}
html{
  font-family:'Open Sans', sans-serif;
}
@keyframes from-left{
  0%{
    transform:translateX(-40%);
  }
  100%{
    transform:translateX(0%);
  }
}
@keyframes from-right{
  0%{
    transform:translateX(40%);
  }
  100%{
    transform:translateX(0%);
  }
}
.flex-columns,
.columns{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
}
.flex-columns.flex-wrap,
.columns.flex-wrap,
.flex-columns.wrap,
.columns.wrap{
  flex-wrap:wrap;
}
.flex-columns.flex-wrap > *,
.columns.flex-wrap > *,
.flex-columns.wrap > *,
.columns.wrap > *{
  flex:initial;
}
.flex-columns.flex-initial > *,
.columns.flex-initial > *{
  flex:initial;
}
.flex-columns > *,
.columns > *{
  flex:1;
}
.flex-rows,
.rows{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
}
.flex-rows.flex-wrap,
.rows.flex-wrap,
.flex-rows.wrap,
.rows.wrap{
  flex-wrap:wrap;
}
.flex-rows.flex-wrap > *,
.rows.flex-wrap > *,
.flex-rows.wrap > *,
.rows.wrap > *{
  flex:initial;
}
.flex-rows.flex-initial > *,
.rows.flex-initial > *{
  flex:initial;
}
.flex-rows > *,
.rows > *{
  flex:1;
}
.flex-no-wrap{
  flex-wrap:nowrap;
}
.flex-wrap{
  flex-wrap:wrap;
}
.flex1.flex1.flex1{
  flex:1;
}
.flex2.flex2.flex2{
  flex:2;
}
.flex3.flex3.flex3{
  flex:3;
}
.flex4.flex4.flex4{
  flex:4;
}
.flex5.flex5.flex5{
  flex:5;
}
.flex6.flex6.flex6{
  flex:6;
}
.justify-flex-start.justify-flex-start.justify-flex-start{
  justify-content:flex-start;
}
.justify-flex-center.justify-flex-center.justify-flex-center{
  justify-content:center;
}
.justify-flex-end.justify-flex-end.justify-flex-end{
  justify-content:flex-end;
}
.align-flex-start.align-flex-start.align-flex-start{
  align-items:flex-start;
}
.align-flex-center.align-flex-center.align-flex-center{
  align-items:center;
}
.align-flex-end.align-flex-end.align-flex-end{
  align-items:flex-end;
}
header,
footer,
main > *{
  width:100vw;
}
main > *{
  position:relative;
  display:block;
}
main{
  display:table;
  width:100vw;
  overflow:hidden;
}
header{
  height:50px;
  margin-top:10px;
  font-size:1.125rem;
  color:#fff;
  position:fixed;
  z-index:1000;
  background-color:transparent;
  transition:background-color 400ms ease-in-out, margin-top 400ms ease-in-out;
}
header:before{
  content:'';
  display:block;
  position:absolute;
  left:0;
  width:100%;
  height:10px;
  top:-10px;
  background-color:transparent;
  transition:background-color 400ms ease-in-out;
}
header.undocked{
  background-color:rgba(0,0,0,0.8);
  margin-top:0;
}
header.undocked:before{
  background-color:rgba(0,0,0,0.8);
}
header *{
  vertical-align:middle;
  color:#fff;
}
header nav,
header .nav{
  height:50px;
  position:relative;
  display:block;
}
header nav > *,
header .nav > *{
  height:100%;
}
header nav .left,
header .nav .left{
  position:absolute;
  left:0;
  top:0;
}
header nav .logos .logo-link,
header .nav .logos .logo-link{
  text-decoration:none;
}
header nav .logos .logo-image,
header .nav .logos .logo-image{
  height:100%;
  padding:0.5rem;
}
header nav .primary > *,
header .nav .primary > *,
header nav .secondary > *,
header .nav .secondary > *{
  display:inline-block;
  height:50px;
  line-height:50px;
  padding:0 0.75rem;
}
hero,
.hero{
  height:105vh;
  min-height:600px;
  padding-top:20vh;
  padding-bottom:15vh;
}
.full{
  height:105vh;
  min-height:600px;
}
footer{
  background-color:#fafafa;
  display:table;
  width:100%;
  padding-top:1rem;
}
footer .footer-small-print{
  height:50px;
  margin-top:1rem;
  position:relative;
}
footer .footer-small-print > *{
  display:inline-block;
}
footer .footer-small-print .logos{
  height:100%;
}
footer .footer-small-print .logos *{
  vertical-align:middle;
}
footer .footer-small-print .logos .logo-link{
  color:#fff;
  text-decoration:none;
}
footer .footer-small-print .logos .logo-image{
  height:100%;
  padding:0.5rem;
}
footer .footer-small-print .copyright{
  float:right;
  line-height:50px;
  padding-right:0.5rem;
  color:#fff;
}
button,
.button{
  box-shadow:1px 2px 1px 0.5px rgba(0,0,0,0.5);
  display:inline-block;
  outline:none;
  border:0;
  border-radius:2px;
  height:2.5rem;
  line-height:2.5rem;
  font-size:1rem;
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
  position:relative;
  top:0;
  cursor:pointer;
  color:#fff;
  background-color:#263238;
  padding:0 1.5rem;
  transition:all 200ms linear;
}
button:not(:disabled):not(.disabled):hover,
.button:not(:disabled):not(.disabled):hover,
button:not(:disabled):not(.disabled):focus,
.button:not(:disabled):not(.disabled):focus{
  box-shadow:2px 4px 2px 0.5px rgba(0,0,0,0.4);
  -webkit-filter:brightness($mHoverBrightness);
          filter:brightness($mHoverBrightness);
  top:-2px;
}
button:disabled,
.button:disabled,
button .disabled,
.button .disabled{
  opacity:0.5;
}
button.important.important.important,
.button.important.important.important{
  background-color:#2196f3;
}
header .simple-menus a{
  text-decoration:none;
  color:#fff;
}
header .simple-menus .menu{
  cursor:default;
  position:relative;
  text-align:left;
}
header .simple-menus .menu .menu-body{
  opacity:0;
  position:absolute;
  left:50%;
  top:100%;
  pointer-events:none;
  transition:all 200ms ease-in-out;
  color:#212121;
  transform:translateX(-50%);
  width:360px;
  max-width:100vw;
  z-index:1000;
}
header .simple-menus .menu .menu-body:before{
  content:'';
  width:1rem;
  height:1rem;
  position:absolute;
  bottom:100%;
  background-color:#fafafa;
  left:50%;
  transform:translate(-50%, 50%) rotate(45deg);
}
header .simple-menus .menu .menu-body .menu-content{
  padding:0.5rem 1rem;
  transform-origin:top center;
  transform:scale(0.9);
  background-color:#fafafa;
  transition:opacity 400ms ease-in-out;
  box-shadow:2px 4px 2px 0.5px rgba(0,0,0,0.15);
  max-height:calc(100vh - 50px - 1rem);
  overflow:auto;
}
header .simple-menus .menu:hover .menu-body,
header .simple-menus .menu:focus .menu-body,
header .simple-menus .menu .menu-body:hover{
  opacity:1;
  pointer-events:auto;
}
header .simple-menus .menu:hover .menu-body .menu-content,
header .simple-menus .menu:focus .menu-body .menu-content,
header .simple-menus .menu .menu-body:hover .menu-content{
  transform:none;
}
header .complex-menus a{
  text-decoration:none;
  color:#fff;
}
header .complex-menus .menu{
  cursor:default;
  position:relative;
  text-align:left;
}
header .complex-menus .menu-wrapper{
  position:absolute;
  background-color:#fafafa;
  transition:all 400ms ease-in-out;
  box-shadow:2px 4px 2px 0.5px rgba(0,0,0,0.15);
  pointer-events:none;
  transform-origin:top center;
  margin-top:1rem;
  opacity:0;
  z-index:1000;
}
header .complex-menus .menu-wrapper.active{
  pointer-events:auto;
  transition:all 300ms ease-in-out, opacity 400ms ease-in-out;
  margin-top:0;
  opacity:1;
}
header .complex-menus .menu-wrapper:before{
  content:'';
  width:1rem;
  height:1rem;
  position:absolute;
  bottom:100%;
  background-color:#fafafa;
  left:50%;
  transform:translate(-50%, 50%) rotate(45deg);
}
header .complex-menus .menu-wrapper .menu-bodies{
  vertical-align:top;
  position:absolute;
  left:0;
  height:100%;
  width:100%;
  pointer-events:none;
}
header .complex-menus .menu-wrapper .menu-bodies .menu-body{
  color:#212121;
  height:100%;
  max-width:100vw;
  width:400px;
  position:absolute;
  left:0;
  overflow:hidden;
  opacity:0;
  transition:opacity 200ms ease-in-out;
  pointer-events:none;
}
header .complex-menus .menu-wrapper .menu-bodies .menu-body .menu-content{
  display:table;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  padding:0.5rem 1rem;
  background-color:#fafafa;
  max-height:calc(100vh - 50px - 1rem);
  overflow:auto;
}
header .complex-menus .menu-wrapper .menu-bodies .menu-body .menu-content .menu-link a{
  color:#212121;
}
header .complex-menus .menu-wrapper .menu-bodies .menu-body.active{
  opacity:1;
  transition:opacity 400ms ease-in-out;
  pointer-events:auto;
}
header .complex-menus .menu-wrapper .menu-bodies .menu-body.active.from-left .menu-content{
  animation:from-left 300ms ease-in-out;
}
header .complex-menus .menu-wrapper .menu-bodies .menu-body.active.from-right .menu-content{
  animation:from-right 300ms ease-in-out;
}
header .mobile-menus .show-mobile-icon{
  position:absolute;
  top:0;
  line-height:45px;
  font-size:1.5rem;
  right:0.5rem;
  margin-right:1rem;
  display:block;
  cursor:default;
}
header .mobile-menus .close-mobile-icon{
  font-size:2rem;
  position:absolute;
  top:0.5rem;
  left:0.5rem;
  line-height:2rem;
  z-index:1;
}
header .mobile-menus .mobile-menu-content{
  position:absolute;
  top:-10px;
  left:-360px;
  display:block;
  width:360px;
  height:100vh;
  background:#424242;
  transition:left 400ms ease-in-out;
  box-shadow:2px 4px 2px 0.5px rgba(0,0,0,0.15);
}
header .mobile-menus .mobile-menu-content:before{
  content:'';
  display:block;
  position:absolute;
  top:-10px;
  width:100%;
  height:10px;
  background:#424242;
  box-shadow:2px 4px 2px 0.5px rgba(0,0,0,0.15);
  z-index:-1;
}
header .mobile-menus .mobile-menu-content .mobile-menu-wrapper{
  height:100vh;
  width:100%;
  overflow:auto;
  padding:1.5rem 0;
}
header .mobile-menus .mobile-menu-content .menu-collection .menu input[type=checkbox]{
  display:none;
}
header .mobile-menus .mobile-menu-content .menu-collection .menu .menu-body{
  max-height:0;
  transition:max-height 600ms ease-in-out;
  overflow:hidden;
  background-color:#fafafa;
}
header .mobile-menus .mobile-menu-content .menu-collection .menu .menu-body .menu-content{
  padding:0.25rem 0.5rem;
}
header .mobile-menus .mobile-menu-content .menu-collection .menu .menu-title:hover ~ .menu-body,
header .mobile-menus .mobile-menu-content .menu-collection .menu input:checked ~ .menu-body{
  max-height:100vh;
}
header .mobile-menus .mobile-menu-content .menu-collection .menu .menu-body:hover{
  max-height:100vh;
}
header .mobile-menus .mobile-menu-content .menu-collection .menu-title,
header .mobile-menus .mobile-menu-content .menu-collection > a{
  color:#fff;
  text-decoration:none;
  display:block;
  width:100%;
  background-color:#424242;
  text-align:center;
  padding:0.25rem;
}
header .menu-link{
  width:100%;
  display:table;
  padding:0.5rem 0;
}
header .menu-link:hover .menu-link-icon{
  -webkit-filter:saturate(40%) brightness(105%);
          filter:saturate(40%) brightness(105%);
}
header .menu-link:hover .menu-link-text{
  -webkit-filter:brightness(300%);
          filter:brightness(300%);
}
header .menu-link a{
  color:#212121;
  display:table;
  width:100%;
  font-size:0;
}
header .menu-link a > *{
  font-size:1rem;
}
header .menu-link .menu-link-icon,
header .menu-link .menu-link-text{
  display:inline-block;
}
header .menu-link .menu-link-icon{
  margin-right:1rem;
  width:50px;
}
header .menu-link .menu-link-text:first-child{
  width:100%;
}
header .menu-link .menu-link-text:not(:first-child){
  width:calc(100% - 50px - 1rem);
}
header .menu-link .menu-link-text:not(:first-child) > *{
  display:block;
}
header .menu-link .menu-link-text:not(:first-child) .menu-link-name:not(:last-child){
  line-height:2rem;
}
header .menu-link .menu-link-text:not(:first-child) .menu-link-description{
  line-height:1.5rem;
  font-size:0.875rem;
}
.simple-menus button,
.complex-menus button,
.simple-menus .button,
.complex-menus .button{
  margin-top:5px;
}
#show-mobile-menu{
  display:none;
}
#show-mobile-menu:checked ~ header .mobile-menus .mobile-menu-content{
  left:0;
}
footer .footer-menu{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:flex-start;
}
footer .footer-menu > *{
  margin:1rem;
  margin-top:0;
  margin-right:auto;
}
footer .footer-menu > * a{
  text-decoration:none;
  color:#212121;
  display:inline-block;
  width:100%;
}
.card{
  box-shadow:1.5px 3px 1.5px 0.5px rgba(0,0,0,0.2);
  margin:1rem 0;
  width:100%;
  padding:1.5rem;
  border-radius:2px;
}
.card:first-child{
  margin-top:0;
}
.card:last-child{
  margin-bottom:0;
}
privacy-popup .content{
  display:block;
  position:fixed;
  width:100vw;
  bottom:-1000px;
  opacity:0;
  transition:all 200ms ease-in-out;
  padding:1rem 2rem;
  background-color:#fafafa;
}
privacy-popup .content .cookies-content{
  display:flex;
  flex-direction:row;
  align-items:center;
  max-width:1000px;
  margin:0 auto;
}
privacy-popup .content .cookies-content .cookies-message{
  margin-right:2rem;
}
privacy-popup .content .cookies-content .cookies-message .cookies-title{
  margin-bottom:1rem;
}
privacy-popup .content .cookies-content .cookies-message .cookies-description{
  font-weight:100;
}
privacy-popup .content.unaccepted{
  bottom:0px;
  opacity:1;
}
.fade-on-hover{
  opacity:1;
  transition:opacity 100ms ease-in-out;
}
.fade-on-hover:hover{
  opacity:0.6;
}
[tabindex]{
  outline:none;
}
header{
  background-color:#212121;
}
header:before{
  background-color:#212121;
}
header .nav *{
  color:#fff;
}
header .menu-bodies *{
  color:#000;
}
footer{
  background-color:#424242;
}
footer *{
  color:#fff;
}
@media only screen and (max-width: 650px){
  .flex-columns,
  .columns{
    flex-direction:column;
  }
  header nav .center,
  header .nav .center,
  header nav .right,
  header .nav .right{
    display:none;
  }
  hero,
  .hero{
    min-height:auto;
    padding-top:10vh;
    padding-bottom:10vh;
  }
  .full{
    min-height:auto;
  }
  footer .footer-menu{
    flex-wrap:wrap;
  }
  footer .footer-menu > *{
    flex:initial;
  }
}
@media only screen and (min-width: 1001px){
  header,
  footer,
  main > *{
    padding-left:calc((100% - 1000px) / 2);
    padding-right:calc((100% - 1000px) / 2);
  }
}
@media only screen and (max-width: 1000px){
  header,
  footer,
  main > *{
    padding-left:2rem;
    padding-right:2rem;
  }
}
@media only screen and (min-width: 801px){
  header nav .center,
  header .nav .center{
    width:100%;
    text-align:center;
  }
  header nav .right,
  header .nav .right{
    position:absolute;
    right:0;
    top:0;
  }
}
@media only screen and (min-width: 651px) and (max-width: 800px){
  header nav .center,
  header .nav .center,
  header nav .right,
  header .nav .right{
    float:right;
  }
}
@media only screen and (max-width: 800px){
  hero,
  .hero{
    height:auto;
  }
  .full{
    height:auto;
  }
  privacy-popup .content .cookies-content{
    flex-direction:column;
  }
  privacy-popup .content .cookies-content .cookies-message{
    margin-right:0;
    margin-bottom:1rem;
  }
}
@media only screen and (min-width: 651px){
  header .mobile-menus{
    display:none;
  }
}
@media only screen and (min-width: 650px){
  footer .footer-menu > *{
    flex:1;
    color:#212121;
  }
}/*# sourceMappingURL=app.css.map */