:root{--font-body:Arial,Helvetica,sans-serif;--font-headline:Haettenschweiler,"Arial Narrow Bold",sans-serif;--primary-color:#f0a868;--secondary-color:#525b0f;--tertiary-color:#a4b8c4;--light-grey:#d0d0d0;--dark-grey:#303030;--font-base:18px;--small-font:.8em;--large-font:1.2em}*{box-sizing:border-box}body{margin:0;font-family:var(--font-body);font-size:var(--font-base);color:var(--dark-grey)}img{max-width:100%}header{display:flex;justify-content:space-between;padding:0 10px}.logo{line-height:60px;width:245px;overflow:hidden;display:flex;font-size:30px;text-align:right;font-family:var(--font-headline)}.logo img{width:60px;height:60px}.logo a{text-decoration:none;color:var(--font-body)}.hero{position:relative}.hero .logo{position:absolute;left:calc(50% - 60px);bottom:-10px;background-color:#fff}.logo--square{font-size:var(--small-font);width:110px;height:80px;flex-direction:column;align-items:flex-end;box-shadow:1px 1px 4px var(--light-grey);justify-content:center;align-items:center;line-height:1}.logo--square img{width:90px;height:90px;margin-top:-1.3em}.logo--square>div{margin-top:-1.7em}.highlight{color:var(--tertiary-color)}button{padding:.5em 2em;background-color:var(--secondary-color);color:#fff;margin:auto;display:block;border:0;font-size:var(--large-font)}.divider{border-bottom:2px solid var(--primary-color)}.hide{display:none!important}.cart{padding-top:1em;position:relative;text-align:center}.cart svg{width:25px}.cart:hover svg{fill:gray}.product-grid{list-style-type:none;display:flex;flex-wrap:wrap;justify-content:center;text-align:center;color:var(--dark-grey);padding-left:0}.product-grid>li{width:150px;padding:.5em;margin:1em}.product-grid h2{margin:0;font-size:1.2em}.product-grid a{text-decoration:none}.product-grid a:link,.product-grid a:visited{color:var(--dark-grey)}.product-grid a:hover{text-decoration:underline}.mission{padding:0 .5em;line-height:1.3;max-width:600px;margin:auto}.products{padding:.5em}.title{text-transform:capitalize}.product-list{display:flex;flex-flow:row wrap;justify-content:space-between;list-style-type:none;padding:0}.product-list a{text-decoration:none;color:var(--dark-grey)}.list-total{text-align:right}.list-footer{display:flex;justify-content:space-between;align-items:center;padding:0 .5em}.list-footer>a{padding:.3em .5em;background-color:var(--primary-color);text-decoration:none;border-radius:5px}.list-footer a:link,.list-footer a:visited{color:var(--dark-grey)}.product-card{flex:1 1 45%;margin:.25em;padding:.5em;border:1px solid var(--light-grey);max-width:250px;text-align:center}.product-card h2,.product-card h3,.product-card p{margin:.5em 0;text-align:left}.card__brand{font-size:var(--small-font)}.card__name{font-size:1em}.product-detail{padding:1em;max-width:500px;margin:auto}.product-detail img{width:100%}.cart-card{display:grid;grid-template-columns:25% auto 15%;font-size:var(--small-font);align-items:center}.cart-card__remove{grid-row:1;grid-column:1}.cart-card__image{grid-row:1/3;grid-column:1}.cart-card p{margin-top:0}.cart-card .card__name{grid-row:1;grid-column:2}.cart-card__color{grid-row:2;grid-column:2}.cart-card__quantity{grid-row:1;grid-column:3}.cart-card__price{grid-row:2;grid-column:3}@media screen and (min-width: 500px){body{max-width:1080px;margin:auto}.mission{font-size:1.2em}.cart-card{font-size:inherit;grid-template-columns:150px auto 15%}}footer{font-size:var(--small-font);padding:1em}.checkout-form{padding:.5em}.checkout-form label{display:block}.checkout-form input{width:100%;font-size:1.2em}.checkout-summary>ul{padding-left:0;list-style-type:none}.checkout-summary li{display:flex;justify-content:space-between;align-items:center}.checkout-summary input{width:25%;font-size:1em}.alert{display:flex;align-items:center;justify-content:space-between;padding:.5em;background-color:var(--primary-color);border:1px solid darkorange}.alert>p{margin:0}.icon-bagpack{margin-left:-40px;--btn-size:2rem;height:var(--btn-size);width:var(--btn-size);position:absolute}.icon-bagpack-icon-top,.icon-bagpack-icon-bottom{max-width:100%;max-height:100%;position:absolute;top:0;left:0;transform:scale(.9);z-index:1}.button-add .icon-bagpack-icon-top{animation:trash-top 3.1s forwards}@keyframes trash-top{25%,35%{transform:translateY(-10px) scale(.6)}70%,80%{transform:translateY(-10px) scale(.6)}}.button-add .icon-bagpack-icon-bottom{animation:trash-bottom 2.1s forwards}@keyframes trash-bottom{25%,80%{transform:translateY(10px) scale(.8)}}.button-add .button-text-plus{animation:text-plus 2.1s forwards}@keyframes text-plus{25%,35%{transform:translateY(-10px) scale(.7)}70%,80%{transform:translateX(-10px) scale(2);opacity:1}85%,95%{transform:translateY(10px) scale(5);opacity:1}}.items-on-bagpack{transform:scale(.01);margin-top:-5px}.button-add2{color:#fff;border:1px solid #ffff;text-align:center;width:20px;transform:scale(1);margin-left:-14px;margin-top:-5px;background:#ff0000;border-radius:50%}.button-text-plus{transform:scale(.3);font-size:2%;max-width:100%;z-index:0;position:absolute;background:lightgreen;border-radius:50%;border:black solid 2px}.cart-link:link,.cart-link:visited,.cart-link:hover,.cart-link:active{color:#240046;text-decoration:none}path{transform:scale(.3);width:20%;height:20%}.login-register{height:250px;width:100%;text-align:center;background-image:url("../src/images/store.jpg")}.login-register h2{text-align:center}.login-register input{width:70%;height:40px}.login-register input:hover{background:#f0a868;color:#000}*{box-sizing:border-box}body{font-family:Verdana,sans-serif}.mySlides{display:none}img{vertical-align:middle}.slideshow-container{max-width:1000px;position:relative;margin:auto}.prev,.next{cursor:pointer;position:absolute;top:50%;width:auto;padding:16px;margin-top:-22px;color:#fff;font-weight:bold;font-size:18px;transition:.6s ease;border-radius:0 3px 3px 0;user-select:none}.next{right:0;border-radius:3px 0 0 3px}.prev:hover,.next:hover{background-color:rgba(0,0,0,0.8)}.text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center}.numbertext{color:#f2f2f2;font-size:12px;padding:8px 12px;position:absolute;top:0}.dot{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color .6s ease}.active,.dot:hover{background-color:#717171}.fade{animation-name:fade;animation-duration:1.5s}@keyframes fade{0%{opacity:.4}to{opacity:1}}@media only screen and (max-width: 300px){.prev,.next,.text{font-size:11px}}