@import"https://pro.fontawesome.com/releases/v5.11.2/css/all.css";#FooterId{margin-top:2%;min-height:30vh;width:100%;background:#fff}footer{position:relative;background:#023e8a;width:100%;bottom:0;left:0}footer:before{content:"";position:absolute;left:0;top:100px;height:1px;width:100%;background:#fff}footer .footer-content{max-width:1250px;margin:auto;padding:30px 40px 40px}footer .footer-content .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:50px}#Footer-logo{width:4rem}.logo-details{display:flex;gap:8px;align-items:center;justify-content:center}.footer-content .top .logo-details{color:#fff;font-size:30px}.footer-content .top .media-icons{display:flex}.footer-content .top .media-icons a{height:40px;width:40px;margin:0 8px;border-radius:50%;text-align:center;line-height:40px;color:#fff;font-size:17px;text-decoration:none;transition:all .4s ease}.top .media-icons a:nth-child(1){background:#4267B2}.top .media-icons a:nth-child(1):hover{color:#4267b2;background:#fff}.top .media-icons a:nth-child(2){background:#1DA1F2}.top .media-icons a:nth-child(2):hover{color:#1da1f2;background:#fff}.top .media-icons a:nth-child(2){background:#E1306C}.top .media-icons a:nth-child(2):hover{color:#e1306c;background:#fff}.top .media-icons a:nth-child(3){background:#0077B5}.top .media-icons a:nth-child(3):hover{color:#0077b5;background:#fff}.top .media-icons a:nth-child(4){background:#FF0000}.top .media-icons a:nth-child(4):hover{color:red;background:#fff}footer .footer-content .link-boxes{width:100%;display:flex;justify-content:space-between}footer .footer-content .link-boxes .box{width:calc(20% - 10px)}.footer-content .link-boxes .box .link_name{color:#fff;font-size:1.5rem;font-weight:400;margin-bottom:10px;position:relative}.link-boxes .box .link_name:before{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:35px;background:#fff}.footer-content .link-boxes .box li{margin:6px 0;list-style:none}.footer-content .link-boxes .box li a{color:#fff;font-size:1rem;font-weight:400;text-decoration:none;opacity:.8;transition:all .4s ease}.footer-content .link-boxes .box li a:hover{opacity:1;text-decoration:underline}.footer-content .link-boxes .input-box{margin-right:55px}.link-boxes .input-box input{height:40px;width:calc(100% + 55px);outline:none;border:2px solid #fff;background:#2ec4b6;border-radius:4px;padding:0 15px;font-size:15px;color:#fff;margin-top:5px}.link-boxes .input-box input::placeholder{color:#fff;font-size:16px}.link-boxes .input-box input[type=button]{background:#fff;color:#023e8a;border:none;font-size:18px;font-weight:500;margin:4px 0;opacity:1;cursor:pointer;transition:all .4s ease}.input-box input[type=button]:hover{border:2px solid #fff;background:#2ec4b6;color:#fff}footer .bottom-details{width:100%;background:#2ec4b6}footer .bottom-details .bottom_text{max-width:1250px;margin:auto;padding:20px;display:flex;justify-content:center}.bottom-details .bottom_text span,.bottom-details .bottom_text a{font-size:1rem;font-weight:300;color:#fff;opacity:.8;text-decoration:none}.bottom-details .bottom_text a:hover{opacity:1;font-weight:500;text-decoration:underline;transform:scale(1.2)}.bottom-details .bottom_text a{margin-right:10px}@media (max-width: 900px){footer .footer-content .link-boxes{flex-wrap:wrap}footer .footer-content .link-boxes .input-box{width:40%;margin-top:10px}}@media (max-width: 700px){footer{position:relative}.footer-content .top .logo-details{font-size:26px}.footer-content .top .media-icons a{height:35px;width:35px;font-size:14px;line-height:35px}footer .footer-content .link-boxes .box{width:calc(100% / 3 - 10px)}footer .footer-content .link-boxes .input-box{width:60%}.bottom-details .bottom_text span,.bottom-details .bottom_text a{font-size:12px}}@media (max-width: 520px){footer:before{top:145px}footer .footer-content .top{flex-direction:column}.footer-content .top .media-icons{margin-top:16px}footer .footer-content .link-boxes .box{width:calc(50% - 10px)}footer .footer-content .link-boxes .input-box{width:100%}}#FilteringAndSorting-container{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;border:2px solid blue;margin:8px;padding:8px}.CustomButton{box-shadow:0 4px 8px #0003;text-decoration:none;display:inline-block;padding:.75rem 1.25rem;border-radius:10rem;color:#fff;text-transform:uppercase;font-size:1rem;letter-spacing:.15rem;transition:all .3s;position:relative;overflow:hidden;z-index:1}.CustomButton:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:#023e8a;border-radius:10rem;z-index:-2}.CustomButton:before{content:"";position:absolute;bottom:0;left:0;width:0%;height:100%;background-color:#2ec4b6;transition:all .3s;border-radius:10rem;z-index:-1}.CustomButton:hover{color:#fff}.CustomButton:hover:before{width:100%}#ProductsList-container{max-width:100%;display:grid;grid-template-columns:1fr 1fr;border:2px solid green;margin:8px;padding:8px;text-align:center}#ProductsList-item{text-align:center;border:2px solid pink;margin:8px;padding:8px}#ProductsList-item img{width:30vw;height:30vh}@media only screen and (min-width: 768px){#ProductsList-container{grid-template-columns:1fr 1fr 1fr 1fr}#ProductsList-item img{width:20vw;height:50vh}}@media only screen and (min-width: 768px){#LandingPage-container{display:grid;grid-template-columns:1fr 6fr;grid-template-areas:"Header Header" "SideBar TopBanner" "SideBar FilteringAndSorting" "ProductsList ProductsList" "Footer Footer"}#Header-container{grid-area:Header}#SideBar-container{grid-area:SideBar}#TopBanner-container{grid-area:TopBanner}#FilteringAndSorting-container{grid-area:FilteringAndSorting}#ProductsList-container{grid-area:ProductsList}#Footer-container{grid-area:Footer}}#Header-container{display:flex;align-items:center;justify-content:space-between;border:2px solid grey;margin:1rem}#Header-logo{min-width:25px;width:5vh;max-height:100px}#Header-quote{display:none}#Header-search{width:20vw;box-sizing:border-box;border:2px solid #ccc;border-radius:4px;font-size:16px;background-color:#fff;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQxJREFUOI2l0j0ohVEYB/Bf18e9hEnKasDM5mNQEmWU7mRlVQaTshgNdqFk0ZVsRoPB4A4mBmVSLpGvlHAN5y1y3yNdz/o8z++c875/vqoRczjCNS6xh3F/qA6c4hbLmMIMCnjHJupiy004wyFaU/qDuMNKDJjHTbI8FJmZwBu6fzYyyGMVtRiLAAVcJFAF0IlictXdCFBOZrrSgFdk8YTmCAANyWwFUMQwDjAZWc6hD8dpzXwi96A9AiziXvpfkhHefoWRH70sFoQsTKM+coAc1vGBE2xgGyU8CqHaF5LZEkOgF0vYEdI3izbUYAvPwsce/Q2JVVZIZBkv1SIDePgv0v8NKVUDEDJxjrVPpW483UOSqJQAAAAASUVORK5CYII=);background-position:10px 10px;background-repeat:no-repeat;padding:12px 20px 12px 40px;transition:width .4s ease-in-out}#Header-search:focus{width:30vw}@media only screen and (min-width: 768px){#Header-logo{width:5rem}#Header-quote{font-size:1.5rem;font-family:cursive;text-align:center;display:block}}#SideBar-container{display:none}#SideBar-image{width:12vw;height:auto}@media only screen and (min-width: 768px){#SideBar-container{display:block}}#TopBanner-container{display:flex;justify-content:center}#TopBanner-img{width:85vw;height:auto}*{box-sizing:border-box;margin:0;padding:0}.product_name{margin:2%;font-size:2rem;font-weight:700}.price{margin:2%;font-size:1.3rem;font-weight:700}.old_price{color:gray;margin:2%;font-size:1.5rem;text-decoration:line-through}.description_title{margin:2%;font-size:1.25rem;font-weight:700}.simple_description{margin:4%;font-size:1rem}.full_description{margin:2% 2% 1%;font-size:1rem}.detailed_description{margin-left:2%;font-size:1rem}.quantity{margin:2%;font-size:1.2rem;font-weight:700}.product-conatiner{display:grid;grid-template-columns:7fr 5fr;grid-template-areas:"images images" "infos infos" "details details" "enbas enbas "}@media only screen and (min-width: 768px){.product-conatiner{display:grid;grid-template-columns:7fr 5fr;grid-template-areas:"images infos" "details details" "enbas enbas "}}.product-image-slider-conatiner{grid-area:images;display:grid;grid-template-columns:10fr 2fr;grid-template-areas:"main_image image_item"}.product-infos-conatiner{grid-area:infos}.product-details-container{grid-area:details}.product-footer-container{grid-area:enbas}.product-image-slider-main-image{grid-area:main_image}.product-image-slider-image-item{grid-area:image_item}.input-margin{margin:1rem}.input{position:relative}.input__label{position:absolute;left:0;top:0;padding:.375rem .25rem;margin:calc(.375rem + 3px) .25rem;background:pink;white-space:nowrap;transform:translate(0);transform-origin:0 0;background:white;transition:transform .12s ease-in;line-height:1.2}.input__field{box-sizing:border-box;display:block;width:100%;border:3px solid #808080;padding:.75rem .5rem;color:#000;background:transparent;border-radius:4px}.input__field:not(:-moz-placeholder-shown)+.input__label{transform:translate(.25rem,-65%) scale(.8);color:gray}.input__field:not(:-ms-input-placeholder)+.input__label{transform:translate(.25rem,-65%) scale(.8);color:gray}.input__field:focus+.input__label,.input__field:not(:placeholder-shown)+.input__label{transform:translate(.25rem,-65%) scale(.8);color:gray}.quantity-plus-btn{background-color:green;border:none;color:#fff;padding:12px 16px;font-size:16px;cursor:pointer}.quantity-minus-btn{background-color:red;border:none;color:#fff;padding:12px 16px;font-size:16px;cursor:pointer}.review-container{padding:1rem;display:inline-block;min-width:300px;box-shadow:1px 2px 5px 2px #0003;border-radius:10px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}
