@import url("https://fonts.googleapis.com/css?family=Bungee|Mukta+Malar:300,400,600|Slabo+27px"); html { font-family: "Mukta Malar"; height: 100%; max-width: 100%; overflow-x: hidden; } body { margin: 0; padding: 0; height: 100%; max-width: 100%; background-color: #edeae8; } div.container { text-align: center; } video { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height: 100%; z-index: -100; -o-object-fit: cover; object-fit: cover; } .errorFont { color: red; } .successFont { color: green; } .index-page { background-color: #edeae8; } .index-page .container-fluid { height: 100%; padding: 0; } .video-container-bg { height: 100%; } #zoomIn { display: none; z-index: 100; } .zoomIn { margin: 0; position: absolute; top: 35%; left: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } .zoomIn img { -webkit-animation-name: zoom_in; animation-name: zoom_in; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; display: block; padding: 10px; margin: auto; max-width: 100%; max-height: 100%; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.2); z-index: 999; } @-webkit-keyframes zoom_in { from { -webkit-transform: scale(0.1); transform: scale(0.1); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes zoom_in { from { -webkit-transform: scale(0.1); transform: scale(0.1); } to { -webkit-transform: scale(1); transform: scale(1); } } .shopping_body .container-fluid { min-height: 100%; padding: 0; } .footer { bottom: 0; width: 100%; margin-top: auto; padding: 1vh; background-color: grey; } .footer p { margin: auto; } .shopping-footer { background-color: grey; padding-left: 10%; margin-top: 2%; } .shopping-footer h1 { color: #fff; font-size: 35px; } .shopping-footer ul { list-style: none; text-align: left; padding-left: 0; } .shopping-footer ul li { color: #fff; font-size: 22px; line-height: 1.5; } @media (max-width: 974px) { .shopping-footer { padding: 0; } .shopping-footer h1 { text-align: center; } .shopping-footer ul { text-align: center; } } .my-btn { background-color: rgba(255, 255, 255, 0.3); color: black; border-color: rgba(255, 255, 255, 0.3); padding: 1em; border-radius: 30px; -webkit-box-shadow: 0 3px 0px rgba(0, 0, 0, 0.3), 1px 1px 1px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 3px 0px rgba(0, 0, 0, 0.3), 1px 1px 1px rgba(0, 0, 0, 0.1) inset; font-size: 1.2rem; margin: 20px; } .my-btn:hover { background-color: OliveDrab; color: white; } #btn-home-login:before { font-family: 'FontAwesome'; content: '\f2be'; } .my-floating-btn { display: none; } .my-floating-btn a { color: black; text-decoration: none; } .my-floating-btn.active { display: block; } #index-my-floating-btn { top: 90%; width: 100%; position: fixed; } #index-my-floating-btn button { float: right; border-radius: 50%; margin-right: 20px; } #shopping-my-floating-btn { top: 90%; width: 100%; position: fixed; } #shopping-my-floating-btn button { float: right; border-radius: 50%; margin-right: 20px; z-index: 999; } .back_button, .cart_button_1, .checkout_back_button, .productDetail_back_button { color: OliveDrab; border-color: OliveDrab; background-color: transparent; } .forward_button, .cart_button_2, .checkout_confirm_button, .productDetail_add_button { border-color: rgba(255, 255, 255, 0.3); background-color: OliveDrab; } .back_button:hover, .cart_button_1:hover, .checkout_back_button:hover, .productDetail_back_button:hover { border-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3); } .forward_button:hover, .cart_button_2:hover, .checkout_confirm_button:hover, .productDetail_add_button:hover { border-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3); } .back_button:hover, .cart_button_1:hover, .checkout_back_button:hover, .productDetail_back_button:hover { border-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3); } #logInModal .mb-3, #registerModal .mb-3 { width: 70%; margin: auto; } #logInModal .modal-body .myrecaptcha div, #registerModal .modal-body .myrecaptcha div { margin: auto; } #logInModal .modal-body h3, #registerModal .modal-body h3 { color: OliveDrab; text-align: center; } #logInModal .modal-footer div, #registerModal .modal-footer div { margin: auto; } #logInModal .modal-footer a, #registerModal .modal-footer a { text-decoration: none; } #checkoutModal h1 { text-align: center; } #checkoutModal .checkMarkIcon { text-align: center; color: green; font-size: 1200%; } #checkoutModal .checkMarkIcon:before { font-family: 'FontAwesome'; content: '\f058'; } @media (max-width: 483px) { #logInModal .mb-3, #registerModal .mb-3 { width: 90%; } #logInModal .modal-footer, #registerModal .modal-footer { text-align: center; } #logInModal .modal-footer div, #registerModal .modal-footer div { margin-bottom: 10px; } #logInModal .modal-footer button, #registerModal .modal-footer button { width: 100%; margin-left: 10%; margin-right: 10%; } } #offcanvasCart .offcanvas-header h5 { color: OliveDrab; } #offcanvasCart .offcanvas-body { margin-top: 5%; } #offcanvasCart .offcanvas-body .shopping_cartTitle h2 { color: OliveDrab; } #offcanvasCart .offcanvas-body .cartTable { margin: auto; } #offcanvasCart .offcanvas-body .cart_priceP { text-align: right; } #offcanvasCart .offcanvas-body .cart_deleteP { text-align: right; } #offcanvasCart .offcanvas-body .cart_deleteP a { color: black; font-size: 1.3rem; font-family: cursive; text-decoration: none; } #offcanvasCart .offcanvas-body .back_button, #offcanvasCart .offcanvas-body .forward_button { height: 100%; width: 90%; } #offcanvasCart .offcanvas-body .back-col, #offcanvasCart .offcanvas-body .forward-col { display: inline-block; text-align: center; } .video-container-bg { position: relative; height: 100%; } .navbar { background-color: rgba(255, 255, 255, 0); } .navbar .dropdownicon { color: DarkOliveGreen; } .navbar a { font-size: 1.7rem; border: 1px; color: DarkOliveGreen; text-align: left; text-shadow: 1px 1.2px 2px GhostWhite; font-weight: bold; } .navbar a:hover { color: white; } .navbar a:active { color: Beige; } .navbar-container { margin-top: 70px; border-bottom: 1px solid grey; width: 658px; } @media (max-width: 768px) { .navbar-container { width: 100%; } } .sectionMain { text-align: center; margin-top: 12%; position: relative; } .sectionMain h1 { font-family: "Ink Free"; font-size: 4rem; } .sectionMain h2 { font-family: "Slabo"; font-size: 1rem; } .sectionMain h3 { color: OliveDrab; font-size: 1.2rem; } .sectionMenu .row { padding-left: 20%; padding-right: 20%; } .sectionMenu .my-img-class { margin: 5%; padding: 1%; border: 1px solid grey; } .sectionMenu img { width: 100%; } .sectionMenu h1 { margin-top: 5%; text-align: center; color: DarkOliveGreen; text-shadow: 1px 1.2px 2px grey; } .sectionMenu h3 { text-align: center; color: OliveDrab; font-family: "URW Chancery L", cursive; } .sectionSource { text-align: center; } .sectionSource h1 { margin-top: 3%; color: DarkOliveGreen; text-shadow: 1px 1.2px 2px grey; } .sectionSource h4 { text-align: center; color: OliveDrab; font-family: "URW Chancery L", cursive; } .sectionDocumentation { margin-top: 3%; text-align: center; } .sectionDocumentation h1 { margin-top: 5%; color: DarkOliveGreen; text-shadow: 1px 1.2px 2px grey; } .sectionDocumentation img { margin: auto; padding: 10px; } .sectionShopping { background-color: #edeae8; } .sectionShopping .row { padding-left: 20%; padding-right: 20%; } .sectionShopping .my-img-class { margin: 5%; padding: 1%; border: 1px solid grey; } .sectionShopping .shopping_pageNav a { background-color: #edeae8; } .sectionShopping .shopping_pageNav a:hover { background-color: grey; } .sectionShopping img { width: 100%; -o-object-fit: cover; object-fit: cover; } .sectionShopping h1 { margin-top: 5%; text-align: center; color: DarkOliveGreen; text-shadow: 1px 1.2px 2px grey; } .sectionShopping h3 { text-align: center; color: OliveDrab; } .sectionShopping .shopping_productDetails div.row { padding: 0; } .sectionShopping .shopping_productDetails .productDetail-col div.row:first-of-type { margin-bottom: 15%; } .sectionShopping .shopping_productDetails .productDetail-col div.row:first-of-type h2 { color: OliveDrab; } .sectionShopping .shopping_productDetails .productDetail-col div.row:nth-child(2) { margin-bottom: 15%; } .sectionShopping .shopping_productDetails .productDetail-col div.row:last-of-type { margin-top: 2%; } .sectionShopping .shopping_productDetails .productDetail-col div.quantity { display: inline-block; text-align: right; } .sectionShopping .shopping_productDetails .productDetail-col div.quantity input { height: 100%; } .sectionShopping .shopping_productDetails .productDetail-col a.productDetail_back_button, .sectionShopping .shopping_productDetails .productDetail-col input.productDetail_add_button { width: 100%; } .sectionShopping .shopping_productPrice { color: OliveDrab; } .shopping_headerNav ul { background-color: rgba(255, 255, 255, 0); border: none; } .shopping_headerNav ul a { font-size: 1.5rem; color: black; background-color: rgba(255, 255, 255, 0.7); } .shopping_headerNav ul a:hover { background-color: rgba(128, 128, 128, 0.7); } .shopping_headerNav ul a:active { color: black; } .shopping_headerNav ul li:first-of-type a { border-top-left-radius: 6px; border-top-right-radius: 6px; } .shopping_headerNav ul li:last-of-type a { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .shopping_headerNav #headerImg { z-index: -100; height: 150px; background-color: rgba(255, 0, 0, 0.1); border-radius: 15px 50px 30px; } .shopping_headerNav #span-shopping-username { background-color: rgba(255, 255, 255, 0); border: none; position: absolute; font-size: 1.5rem; left: 1rem; top: 1rem; color: WhiteSmoke; } .shopping_headerNav #btn-shopping-logout { position: fixed; right: 1rem; top: 1rem; } #span-shopping-username:before { font-family: 'FontAwesome'; content: '\f2be'; } @media (max-width: 748px) { .shopping_headerNav div.row { padding: 0; } } footer.shopping-footer { background-color: DimGrey; } footer.shopping-footer h4 { color: WhiteSmoke; font-family: "Mukta Malar"; } footer.shopping-footer ul li { color: Silver; font-family: "Mukta Malar"; font-size: 0.9rem; } footer.shopping-footer ul li:hover { color: WhiteSmoke; } footer.shopping-footer ul.language { -webkit-column-width: 10px; -webkit-column-count: 3; } .sectionShopping #shopping_cartTitle, .sectionShopping .cartTable { width: 100%; height: 100%; text-align: justify; border-bottom: 1px solid grey; } .sectionShopping #shopping_cartTitle:after, .sectionShopping .cartTable:after { content: ""; display: inline-block; overflow: hidden; width: 100%; } .sectionShopping #shopping_cartTitle h1, .sectionShopping .cartTable span { display: inline-block; } .sectionShopping #shopping_cart { margin-top: 5%; } .sectionShopping #shopping_cart .cartTable { margin: auto; } .sectionShopping #shopping_cart .cart_priceP { text-align: right; } .sectionShopping #shopping_cart .cart_deleteP { text-align: right; } .sectionShopping #shopping_cart .cart_deleteP a { color: black; font-size: 1.3rem; font-family: cursive; text-decoration: none; } .sectionShopping div.checkoutProduct, .sectionShopping table.checkoutTable { width: 100%; height: 100%; text-align: justify; } .sectionShopping div.checkoutProduct:after, .sectionShopping table.checkoutTable:after { content: ""; display: inline-block; overflow: hidden; width: 100%; } .sectionShopping div.checkoutProduct table.checkoutTable .tr_title { font-family: "Slabo"; } .sectionShopping div.customerInformation { margin-top: 10px; text-align: left; } .sectionShopping div.customerInformation div.customer-col { border: 1px solid grey; margin: 20px 0px; } .sectionShopping div.checkoutComfirm div.customer-col { text-align: right; margin-bottom: 20px; } .sectionShopping div.checkoutSubtotal div.customer-col { text-align: right; margin-bottom: 20px; } .sectionShopping div.checkoutSubtotal div.customer-col span.checkout_subtotalPrice { font-size: 3.2rem; font-weight: bold; color: oliveDrab; } a.page-link { color: DarkOliveGreen; } a.page-link:hover { color: white; } /*# sourceMappingURL=style.css.map */