/********************************************** /*GRID **************************************** **********************************************/ .grid_index{display: grid; position: absolute; top: 0; left: 0; width: 100%; height: 100%; grid-template-columns: 100%; grid-template-rows: 60px auto auto auto auto auto auto auto; grid-gap: 0; grid-template-areas: "box_header" "box_slide" "box_content" "box_partners" "box_address" "box_stamps" "box_offers" "box_footer";} /********************************************** /*COOKIES ************************************* **********************************************/ .msg_cookie{position: fixed; z-index: 200; top: 50%; background-color: rgba(10,10,10,0.95); width: 100%; color: #fff; padding: 15px; text-align: center} .msg_cookie h1{margin-bottom: 10px} /********************************************** /*HEADERS ************************************* **********************************************/ .header_page{grid-area: box_header; box-shadow: 0 0 50px #333; z-index: 97} .header_navigator{display: flex; height: 75px; width: 100%; background-color: rgba(240,240,240,1); white-space: nowrap; flex-direction: row; flex-wrap: nowrap; padding: 10px;} .header_navigator .category_item{display: none; font-size: 0.9em} .header_navigator .cart_button{align-self: flex-start; color: #333; font-size: 1.2em; margin-right: 0} .header_navigator .countCartItems{background-color: #ff5549; border-radius: 5px; width: fit-content; width: -moz-fit-content; height: fit-content; height: -moz-fit-content; padding: 5px; color: #fff; margin-right: 15px} .header_navigator .magnify_button{align-self: flex-start; color: #333; font-size: 1.2em} .header_navigator .logomarca{display: inline-block; min-width: 75px; max-width: 200px; flex-grow: 1; margin: auto; padding: 5px; border-radius: 5px; } .header_navigator .logomarca:hover{background-color: rgba(125,125,125,0.4);} .header_navigator .menu_button{align-self: center; color: #333; font-size: 1.2em} .header_navigator .perfil{display: none;} .header_navigator .cart_button:hover, .header_navigator .menu_button:hover, .header_navigator .magnify_button:hover{background-color: dodgerblue} /********************************************** /*SLIDE *************************************** **********************************************/ .box_slide{grid-area: box_slide; position: relative; background-color: #333; } .slide{position: relative} .slide_control{position: absolute; top: 10%; width: 100%; z-index: 2} .slide_nav{position: absolute; padding: 5px 10px; font-size: 2em; background-color: rgba(255,255,255, 0.6); cursor: pointer; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;} .slide_nav.back{left: 0; margin: 15px;} .slide_nav.go{right: 0; margin: 15px;} .slide_nav.back:hover, .slide_nav.go:hover{filter: opacity(0.5)} .slide_item{display: none; } .slide_item img{margin-bottom: 10px; filter: brightness(0.9); z-index: 1} .slide_item.slide_first{display: block;} .slide_item_desc{padding: 15px; color: #fff; z-index: 3} .slide_item_desc h3{margin: 10px 0;} .slide_item_desc a:hover{ text-decoration: underline;} .slide_item_desc .tagline{font-weight: 300} /********************************************** /*CONTEÚDO ************************************ **********************************************/ /*Formulários*/ .form fieldset{border-radius: 5px; border: none; padding: 15px; width: 96%; max-width: 1500px; margin: 0 auto 30px auto; background-color: rgba(0,0,0,0.9); box-shadow: 0 0 10px 2px #333} .form legend{font-weight: bold; text-transform: uppercase; color: #fff; text-align: center; font-size: 1em; padding-top: 90px;} .form label{margin: 30px auto; font-weight: bold; color: #fff; } .form input[type="submit"], .client_create input[type="reset"]{margin: 30px 10px} .form .form_buttons{text-align:center} .form_buttons a{color: #ff5549; font-weight: bold; transition: 0.5s all} .form_buttons a:hover{color: #ff0000; text-decoration: underline} .form hr{border: 8px outset #ae4c00; max-width: 1000px; margin: 0 auto} .form .message_terms_use{text-align: center; color: #333} .form .terms_use_link{color: crimson; cursor: pointer;} .form .terms_use_link:hover{text-decoration: underline;} .form_icon{display: block; text-align: center !important; font-size: 4em; color: #fff} /*Index*/ .content{grid-area: box_content; border-top: 5px outset #ff5549; background:url('../img/background/bezel_upper_repeat.png') left top repeat-x, url('../img/background/ink_spot_red.png') left bottom no-repeat, url('../img/background/ink_spot_blue.png') right center no-repeat, url('../img/background/ink_spot_blue.png') left top no-repeat, linear-gradient(to right, rgba(150,180,255,0.5), rgba(255,255,35,0.5), rgba(35,96,35,0.5), rgba(255,96,35,0.5))} .main_products{overflow-x: auto; margin: 2%; background-color: rgba(255,255,255,0.9); padding: 5px; border-radius: 5px; } .main_products.border_red{border-top: 20px solid #ff5549} .main_products.border_blue{border-top: 20px solid #4267B2} .main_products.border_golden{border-top: 20px solid goldenrod} .main_products.border_gray{border-top: 20px solid slategrey} .main_products.border_green{border-top: 20px solid darkseagreen} .main_products.border_lightcoral{border-top: 20px solid lightcoral} .main_products.border_peru{border-top: 20px solid peru} .main_products .btCartAdd{width: fit-content; width: -moz-fit-content} .main_products .btCartOutOfStock{width: fit-content; width: -moz-fit-content; margin: 20px auto 10px auto} .main_products h2{padding: 5px; margin: 5px; font-weight: normal} .highlights, .new_products, .most_wanted, .most_selled, .related_products, .line_same_products{white-space: nowrap; overflow-y: hidden; height: 430px} .product_list, .product_search_list{min-height: 430px;} .highlights .product_item, .new_products .product_item, .most_wanted .product_item, .most_selled .product_item, .product_list .product_item, .product_search_list .product_item{display: inline-block; white-space: normal; background-color: rgba(0,0,0,0.15); width: 90%; max-width: 90%; height: 250px; margin: 30px 5% 90px 5%; border-radius: 5px; padding-top: 10px; transition: 0.5s all} .highlights .product_item:hover, .new_products .product_item:hover, .most_wanted .product_item:hover, .most_selled .product_item:hover, .product_list .product_item:hover, .product_search_list .product_item:hover{transform: scale(1.1);} .product_item img{height: 180px; object-fit: scale-down; float: none;} .product_item .product_name{text-align: center; font-size: 1em; font-weight: bold; padding: 5px; height: 50px; color: #fff; background-color: #333} .product_item .product_old_price{display: inline-block; width: 45%; text-decoration: line-through; font-weight: 100; margin: 10px;} .product_item .product_old_price_null{display: inline-block; width: 45%; font-weight: 100; margin: 10px;} .product_item .product_price_item{display: inline-block; width: 45%; font-size: 1.5em; margin: 10px; } .product_item .content_buy_button{display: inline-block; width: calc(55% - 30px); text-align: right; font-size: 0.9em} .highlights .product_item > .bar_buy_item{background-color: #ff5549; color: #fff;} .new_products .product_item > .bar_buy_item{background-color: #4267B2; color: #fff} .most_wanted .product_item > .bar_buy_item{background-color: goldenrod; color: #fff} .most_selled .product_item > .bar_buy_item{background-color: slategrey; color: #fff} /*Produtos*/ .product_filter{display: inline-block; white-space: normal; background-color: rgba(255,255,255,0.9); width: 96%; max-width: 96%; margin: 15px 2% 15px 2%; border-radius: 5px; padding: 30px; text-align: center; } .product_filter h2{margin-bottom: 15px;} .product_filter label{margin-top: 20px} .product_filter .price_filter_area{max-width: 90%; margin: 30px auto} .product_filter .price_filter_area small{width: 100px} .product_filter .price_filter_area input[type=range]{width: calc(100% - 200px)} .product_list .product_item, .product_search_list .product_item{display: inline-block; white-space: normal; background-color: rgba(0,0,0,0.15); width: 90%; max-width: 90%; min-height: 250px; margin: 30px 5% 90px 5%; border-radius: 5px; } .product_list .product_item > .bar_buy_item{background-color: firebrick; color: #fff} .product_search_list .product_item > .bar_buy_item{background-color: lightcoral; color: #fff} .product_control, .product_terms, .product_cart{display: inline-block; white-space: normal; background-color: rgba(255,255,255,0.9); width: 96%; max-width: 96%; border-radius: 5px; padding: 30px;text-align: center; } .product_control.upper{border-top: 20px solid firebrick; margin: 30px 2% 0 2%;} .product_control.lower{border-bottom: 20px solid firebrick; margin: 0 2% 30px 2%;} .product_terms.upper{border-top: 20px solid lightcoral; margin: 30px 2% 0 2%;} .product_cart.upper{border-top: 20px solid darkslategrey; margin: 30px 2% 0 2%;} .product_cart.lower{border-bottom: 20px solid darkslategrey; margin: 0 2% 30px 2%;} .product_cart.lower > label{padding: 15px 0;} .product_paginator{width: 100%; } .info_delivery, .info_payment{display: none;} .info_delivery .info_delivery_msg{color: red; font-weight: bold} .info_payment .info_payment_msg{color: red; font-weight: bold} .main_products .product_data{padding: 0 0 30px 0} #btBudget, #btTalkWhasapp{max-width: 300px; font-size: 1em} #btTalkWhasapp .mdi{margin-right: 10px}; /*Pagseguro*/ .group_cart_buy_button{margin: 30px;} #paymentMethod{padding: 15px; background-color: burlywood; border-radius: 5px} #paymentMethod .group_payment_methods{display: none; padding: 0 15px;} #paymentMethod .credit_card, #paymentMethod .bank_slip, #paymentMethod .online_debit{background-color: gainsboro; border-radius: 5px; border: none; width: calc(100% - 5px); margin: 50px auto} .group_payment_methods .credit_card, .group_payment_methods .bank_slip, .group_payment_methods .online_debit{display: block; margin: 5px auto;} .credit_card legend, .bank_slip legend, .online_debit legend{text-align: left; margin-left: 5px; position: relative; top: -15px; font-size: 0.9em} .card_list, .bank_slip_list, .online_debit_list{display: inline-block; padding: 5px;} .card_item, .bank_slip_item, .online_debit_item{border-radius: 5px} .card_list .img_flag, .bank_slip_list .img_flag, .online_debit_list .img_flag{max-width: 100px; padding: 2px; display: inline-block} .paymentMethodCreditcard, .paymentMethodOnlineDebit{background-color: lightgray; border-radius: 5px; padding: 30px; margin-bottom: 15px; display: none} .paymentMethodCreditcard label{margin: 10px 0} .paymentMethodCreditcard #creditCardNumber{width: calc(100% - 55px)} .paymentMethodCreditcard .creditcard_flag{display: inline-block; width: 50px; border-radius: 5px} .paymentMethodCreditcard .creditcard_installments_field{display: none} form[name=form_finish_buy] .coupon_discount_field{margin: 15px 0; text-align: left} .coupon_discount_field input[name=couponDiscount]{width: 100%;} .coupon_discount_field button{width: fit-content;} select[name=creditCardAddressOwnerCard]{width: calc(100% - 200px);} #btAddCreditCardAddress{width: 180px} #btAddCreditCardAddress:disabled{opacity: 0.5} .paginator{width:fit-content; font-size: 0.8em; margin: 0 auto; background-color: firebrick; border-radius: 5px; color: rgba(255,255,255,0.9)} .paginator li{display: inline-block; margin: 15px; font-size: 1.2em; transition: 1s all;} .paginator li:hover{opacity: 0.5} .paginator li.active{font-size: 1.4em; font-weight: bolder; border-bottom: 5px solid rgba(255,255,255,0.9); color: rgba(255,255,255,0.9)} /*Produto-info*/ .product_info{background-color: rgba(255,255,255,0.9); width: 96%; max-width: 96%; margin: 30px 2% 30px 2%; border-radius: 5px; border-top: 20px solid #4267B2} .product_info .product_info_subname{margin: 30px 45px; font-weight: bold; font-size: 1.4em; text-transform: uppercase} .product_info .product_rating{margin: 30px 45px; font-size: 1.4em; color: darkgoldenrod} .product_info .product_product_area{width: 100%} .product_gallery .other_image_gallery{display: none; position: absolute; width: 100%; background-color: rgba(0,0,0,0.5); border-top-left-radius: 5px; border-top-right-radius: 5px;} .product_gallery .other_image_gallery img{display: inline-block; max-width: 50px; max-height: 50px; object-fit: scale-down; border-right: 2px solid #ccc;} .product_gallery .other_image_gallery img:hover{opacity: 0.5; transition: 0.5s all; background-color: #fff; cursor: pointer} .product_gallery .other_image_gallery img:last-of-type{border-right: none} .product_info .product_gallery{position: relative; background-color: rgba(0,0,0,0.15); width: 90%; max-width: 90%; height: 300px; padding: 100px auto 50px auto; margin: 30px auto 0 auto; border-top-left-radius: 5px; border-top-right-radius: 5px} .product_gallery .main_image_gallery img{max-width: 100%; max-height: 300px; object-fit: scale-down; padding-bottom: 20px} .product_info .product_detail{position: relative; left: 10px; width: calc(90% - 20px); margin: 0 auto; color: #fff;} .product_info .product_detail_first_layer{position: relative; background-color: #4267B2; z-index: 3; margin: 0 auto 30px auto} .product_info .product_detail_second_layer{position: relative; background-color: darkcyan; z-index: 1; top: -10px; left: -10px} .product_info .product_detail_third_layer{padding: 10px; position: relative; background-color: dodgerblue; z-index: 2; top: -10px; left: -10px;} .product_info .product_title, .product_info .product_feature{font-size: 1.1em; font-weight: bold;} .product_info .product_feature{padding-left: 15px; margin-top: 15px} .product_info .product_feature_description{padding: 0 15px 15px 15px; display: inline-block;} .product_info .separator_product_feature{width: 95%; margin: 0 auto; border: 0.5px inset #eee} .product_info .separator_product_feature:last-of-type{display:none} .product_info .product_atribute{padding-left: 15px; margin-top: 15px; font-weight: bold;} .product_info .product_atribute_content{max-height: 350px; overflow-y: auto} .product_info .product_atribute_content.color{display: block; padding: 15px;} .product_atribute_content.color svg{margin: 2px; font-size: 0.7em; text-align: center} .product_atribute_content.color svg:hover{cursor: pointer; opacity: 0.5} .product_atribute_content.size input[type=radio]{border: 1px solid #fff; background-color: rgba(0,0,0,0)} .product_atribute_content.size input[type=radio]:checked{border: 1px solid #fff; background-color: #fff} .product_atribute_content.workmanship{text-align: center;} .product_atribute_content.workmanship select{width: 96%; margin-bottom: 20px } .product_info .product_buy_control{background-color: crimson; border-radius: 5px; width: 90%; margin: 30px auto; padding-bottom: 15px; color: #fff; text-align: center; vertical-align: top;} .product_buy_control .qtd_item{background-color: firebrick; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 5px; margin-bottom: 5px;} .product_buy_control .qtd_label{font-weight: bold;} .product_buy_control .qtd_item > .qtd_num{margin: 20px;} .product_buy_control .price{background-color: #333; font-weight: bolder; font-size: 1.8em; border-radius: 5px; width: fit-content; padding: 10px; margin: 15px auto; } .product_buy_control .price_value{font-weight: bold} .product_buy_control .product_price_in_offer{padding: 20px 0 5px 0 ; background-color: #eee; border-radius: 5px; width: 75%; margin: 5px auto} .product_buy_control .product_price_in_offer .product_old_price{color: #fff; background-color: crimson; text-decoration: line-through} .product_buy_control button{margin: 15px; font-size: 1.3em} .product_buy_control #btAddWishList.active{background-color: orange; color: #fff} .product_buy_control .wish_msg{display: block} .product_buy_control .msg_stock_end, .product_buy_control .msg_stock_off{display: none; margin-top: 10px} .product_create_ink{width: 90%; margin: 30px auto; border-radius: 5px; background-color: #555555; padding: 5px; text-align: center; color: #fff} .product_create_ink p{font-weight: bold; font-size: 1.1em} .product_create_ink small{display: block; margin-bottom: 20px;} .product_social_share{width: 90%; margin: 30px auto; padding: 5px; background-color: #ccc; border-radius: 5px; right: 0} #btProductShareFacebook.icon_facebook{color: #fff; background-color: #4267B2;} #btProductShareInstagram.icon_instagram{color: #fff; background-color: #CD2E96;} #btProductShareTwitter.icon_twitter{color: #fff; background-color: #1EAAFF;} #btProductShareWhatsapp.icon_whatsapp{color: #fff; background-color: #00ff70} #btProductShareTelegram.icon_telegram{color: #fff; background-color: #33ABE0;} #btProductShareLinkedin.icon_linkedin{color: #fff; background-color: #0076B9;} #btProductSharePinterest.icon_pinterest{color: #fff; background-color: #E20014;} #btProductShareMail.icon_mail{color: #fff; background-color: #ff5549;} #btProductShareFacebook:hover, #btProductShareInstagram:hover, #btProductShareWhatsapp:hover, #btProductShareTwitter:hover, #btProductShareTelegram:hover, #btProductShareLinkedin:hover, #btProductSharePinterest:hover, #btProductShareMail:hover{background-color: #333; transition: 0.5s all} .product_info .product_comments{width: 90%; margin: 30px auto; background-color: #333; padding: 5px; border-radius: 5px; color: #fff; } .product_comments .product_comments_item{background-color: #eee; border-radius: 5px; margin: 5px} .product_comments .product_comments_item.me{padding: 5px; background-color: #ff5549; border-radius: 5px} .product_comments .product_comments_item.other{padding: 5px; background-color: #eee; color: #333; border-radius: 5px} .product_comments_item .comment_user_avatar{margin: 10px;} .product_comments_item .comment_user_avatar img{object-fit: cover; object-position: center; height: 70px; width: 70px;} .product_comments_item .comment{margin: 15px 5px 0 5px;} .product_comments_item .comment_publish{display: block; margin: 15px 5px;} .product_comments_item .separator_product_comment{border: 0.5px outset #ccc; margin: 15px auto;} .product_comments_item .separator_product_comment:last-of-type{border: none;} .product_comments .rating_star{cursor: pointer; margin-left: 5px} .product_comments .rating_star.active{color: gold} .product_comments .rating_star.selected{color: #333;} .loader-container{max-width: 50px; margin: 0 auto; text-align: center} .related_products .product_item, .line_same_products .product_item{display: inline-block; white-space: normal; background-color: rgba(0,0,0,0.15); width: 90%; max-width: 90%; height: 250px; margin: 30px 5% 90px 5%; border-radius: 5px; transition: 0.5s all} .related_products .product_item > .bar_buy_item{background-color: darkseagreen; color: #fff} .line_same_products .product_item > .bar_buy_item{background-color: peru; color: #fff} .related_products .product_item:hover, .line_same_products .product_item:hover{transform: scale(1.1);} /*Carrinho de compras*/ .product_cart .paginator {background-color: darkslategrey} .cart_item, .wish_item{padding: 15px; border-bottom: 0.5px inset #ddd; text-align: center; border-radius: 5px;} .cart_item hr, .wish_item hr{border: 0.5px inset #aaa} .cart_item:hover, .wish_item:hover{background-color: #ddd; cursor: pointer} .cart_item:last-of-type, .wish_item:last-of-type{border-bottom: none} .cart_item .cart_item_photo, wish_item, .wish_item_photo{width: 100px; height: 100px; object-fit: contain; float: none} .cart_item .cart_item_product_name, .wish_item .wish_item_product_name{font-weight: bold; margin: 0 8px;} .cart_item .cart_item_product_brand, .wish_item .wish_item_product_brand{margin: 0 8px;} .cart_item .cart_item_product_atribute, .wish_item .wish_item_product_atribute, .cart_item_product_weight{margin: 0 8px; font-style: italic; font-size: 0.9em;} .cart_item .btCartItemLink, .wish_item .btWishItemLink{color: #fff} .cart_item .cart_item_product_price, .wish_item .wish_item_product_price{font-size: 1.2em;} .cart_item_product_price_unit .product_old_price, .wish_item_product_price_unit .product_old_price{text-decoration: line-through; font-size: 0.6em} .cart_item_product_subtotal_view, .wish_item_product_subtotal_view{font-weight: bold; line-height:50px;} .cart_item .cart_item_product_buttons, .wish_item .wish_item_product_buttons{margin-right: 30px;} .cart_item .cart_item_product_quantity{margin-bottom: 5px; padding: 5px;background-color: darkseagreen; border-radius: 5px; color: #fff} .cart_item .cart_item_product_control{margin: 10px;} .product_sum .cart_item_product_sum, .cart_item_price_sum{padding: 5px; font-weight: bolder; text-transform: uppercase} .product_sum .value{color: red; font-weight: bold;} .cart_item_delivery_price, .cart_item_discount_price, .cart_item_total_sum{font-weight: bolder; text-transform: uppercase; } .cart_item_delivery_price_currency, .cart_item_discount_price_percent, .cart_item_discount_price_currency, .cart_item_total_sum_currency{font-weight: bolder; text-transform: uppercase; color: red} .cart_item_delivery_price_value, .cart_item_discount_price_value, .cart_item_total_sum_value{font-weight: bolder; text-transform: uppercase; color: red} .address_delivery_selected, .address_creditcard_selected{display: none} .deliver_address_new a{color: blue;} .deliver_address_new a:hover{text-decoration: underline;} /*Compra*/ .page_purchase{grid_area: box_content; position: relative; width: 100%; text-align: center; margin: 60px auto 0 auto; background: url('../img/background/ink_spot_red.png') left top no-repeat, url('../img/background/ink_spot_blue.png') right top no-repeat;} .page_purchase .purchase_icon{min-width: 100px; max-width: 300px; display: block; margin: 0 auto} .page_purchase .purchase_info{margin: 30px; padding: 15px; background-color: rgba(200, 200, 200,0.95); border-radius: 5px;} .purchase_info .purchase_client{font-weight: bold; color: crimson; font-size: 1.3em; } .purchase_info .purchase_status{padding: 10px; border-radius: 5px; width: fit-content; width: -moz-fit-content; margin: 10px auto} .purchase_status.awaiting_payment{background-color: #fffa90; color: #333} .purchase_status.in_analysis{background-color: #dad55e; color: #333} .purchase_status.pay{background-color: darkgreen; color: #fff} .purchase_status.available{background-color: coral; color: #fff} .purchase_status.in_dispute{background-color: crimson; color: #fff} .purchase_status.returned{background-color: darkorchid; color: #fff} .purchase_status.canceled{background-color: cornflowerblue; color: #fff} .purchase_status.debited{background-color: grey; color: #fff} .purchase_status.temporary_retention{background-color: darkred; color: #fff} .purchase_status.processing_chargeback{background-color: darksalmon; color: #fff} .purchase_status.pre_authorized{background-color: gold; color: #333} .purchase_status.blocked{background-color: red; color: #fff} .purchase_status.no_state_defined{background-color: lavender; color: #333} .purchase_info .purchase_method{background-color: #555; color: #fff; border-radius: 5px; margin: 5px 0; padding: 10px;} .purchase_method .purchase_method_title{font-size: 1.3em; font-weight: bold; padding: 15px;} .purchase_info .purchase_products{background-color: #ff5549; color: #fff; border-radius: 5px; margin: 5px 0; padding: 10px;} .purchase_products .purchase_produts_title{font-size: 1.3em; color: #fff; font-weight: bold; padding: 15px} .purchase_info .purchase_info_checkout{width: 100%; border-collapse: separate; border-radius: 5px; background-color: darkred;} .purchase_info .purchase_info_checkout th{background-color: #333; padding: 5px; font-weight: bold; border-bottom: 0.5px solid #333;} .purchase_info .purchase_info_checkout tbody td{padding: 5px; border-bottom: 0.5px solid #333;} .purchase_info .purchase_info_checkout tfoot td{background-color: crimson; color: #fff; padding: 5px; border-bottom: 0.5px solid #333;} .purchase_info .purchase_delivery{background-color: #448AFF; color: #fff; border-radius: 5px; margin: 5px 0; padding: 10px} .purchase_delivery .purchase_delivery_title{font-size: 1.3em; font-weight: bold; padding: 15px;} .purchase_info .purchase_footer{padding: 15px;} .purchase_info .purchase_history{background-color: #777620; color: #fff; border-radius: 5px; margin: 5px 0; padding: 10px;} .purchase_history .purchase_history_title{font-size: 1.3em; color: #fff; font-weight: bold; padding: 15px;} .purchase_history_tab{background-color: #aaaaaa; border-radius: 5px; width: 100%; border: 1px solid #333;} .purchase_history_tab th{background-color: #333; color: #fff; font-weight: bold; padding: 5px} .purchase_history_tab td{background-color: #fffa90; color: #333; padding: 5px} /*404*/ .page_404{grid-area: box_content; position: relative; width: 100%; text-align: center; margin: 60px auto 0 auto; background: url('../img/background/ink_spot_red.png') left top no-repeat, url('../img/background/ink_spot_blue.png') right top no-repeat;} .page_404 .text_404{background-color: rgba(255,255,255,0.9); border-radius: 5px; padding: 30px; margin: 2% !important} .page_404 .face_404{display: block; width: 100%; max-width: 250px; margin: 0 auto; } .page_404 .title_404{font-weight: bold; font-size: 1.5em} .page_404 .desc_404{font-size: 1.1em} /*manutenão*/ .page_maintenance{grid-area: box_content; position: relative; width: 100%; text-align: center; margin: 0 auto; background: url('../img/background/ink_spot_red.png') left top no-repeat, url('../img/background/ink_spot_blue.png') right top no-repeat; } .page_maintenance .img_maintenance{display: block; width: 100%; max-width: 250px; margin: 0 auto; } .page_maintenance .text_maintenance{background-color: rgba(255,255,255,0.9); border-radius: 5px; padding: 30px; margin: 2% !important} .page_maintenance .title_maintenance{font-weight: bold; font-size: 1.5em} .page_maintenance .desc_maintenance{font-size: 1.1em} .page_maintenance .time_maintenance{margin-top: 30px; color: green; font-weight: bolder} .page_maintenance .maintenance_date_begin, .page_maintenance .maintenance_date_end{background-color: #ff5549; padding: 5px; font-weight: bold; color: #fff; border-radius: 5px} /********************************************** /*CLIENTES ************************************ **********************************************/ /*Novo cliente*/ .new_user_art{display: block !important; position: relative; width: 100%; margin: 30px auto; } .new_user_art > img{width: 80%; max-width: 500px; padding: 0 10%; margin: 0 10% 30px 10%} .new_user_p{display: block; color: #fff; font-size: 1.1em; text-align: center; margin: 60px } .client_enter, .client_recover, .client_recover_access, .client_delete, .client_create, .client_new, .client_alter{grid-area: box_content; width: 100%; margin: 15px auto 0 auto; padding: 45px 0} .client_enter, .client_recover, .client_recover_access, .client_delete{background:url('../img/background/ink_spot_blue.png') left top no-repeat, linear-gradient(to right, rgba(150,180,255,0.5), rgba(255,255,35,0.5), rgba(35,96,35,0.5), rgba(255,96,35,0.5))} .client_create, .client_new, .client_alter{background: url('../img/background/ink_spot_red.png') right bottom no-repeat, url('../img/background/ink_spot_blue.png') left top no-repeat, linear-gradient(to right, rgba(150,180,255,0.5), rgba(255,255,35,0.5), rgba(35,96,35,0.5), rgba(255,96,35,0.5))} .form form[name=clientCreatePJ]{display: none;} .client_create .btShowHidePass, .client_alter .btShowHidePass{text-align: center;} .client_enter fieldset, .client_recover fieldset, .client_recover_access fieldset, .client_delete fieldset, .client_create fieldset, .client_new fieldset, .client_alter fieldset{background-color: rgba(255,255,255,0.9);} .client_enter .form_icon, .client_enter label, .client_recover .form_icon, .client_recover label, .client_recover_access .form_icon, .client_access label, .client_delete .form_icon, .client_delete label, .client_create .form_icon, .client_create label, .client_new legend, .client_new p, .client_alter .form_icon, .client_alter label{color: #333} .client_enter fieldset{border-top: 20px solid firebrick} .client_create fieldset{border-top: 20px solid forestgreen} .client_recover fieldset{border-top: 20px solid darkmagenta} .client_alter fieldset{border-top: 20px solid midnightblue} .client_delete fieldset{border-top: 20px solid chocolate} .client_recover_access fieldset{border-top: 20px solid gold} .client_alter .tab{display: block; width: 100%; text-align: center; font-size: 1.1em; color: #333; text-transform: uppercase; margin: 30px 0} .client_alter .tab_item{display: inline-block; width: calc(25% - 15px); padding: 15px; border-radius: 5px; transition: 0.5s; background-color: #eee; font-size: 0.8em} .client_alter .tab_item:hover{border-right: 5px solid #333; border-left: 5px solid #333; border-radius: 5px; cursor: pointer} .client_alter .tab_selected{background-color: dodgerblue; border-color: dodgerblue; color: #fff} .client_alter .tab2{text-align: right; margin-right: 10px;} .basic_avatar{display: block; margin: 0 calc(50% - 75px);} .basic_avatar input[name='photoUpload']{display:none;} .client_alter .avatar:hover{border-color: dodgerblue; filter: opacity(0.7); cursor: pointer} .center_cropped_square {object-fit: cover; object-position: center; height: 150px; width: 150px;} .client_alter .list_address{text-align: left; color: #333; border-radius: 5px;} .list_address li{padding: 25px; transition: 0.5s; border-radius: 5px; border-bottom: 1px solid #ddd} .list_address li:last-of-type{border-bottom: none} .list_address li:hover{background-color: lightgray; cursor: pointer; color: #333;} .client_alter .address_name{display: block; width: 70%; font-weight: bold; font-size: 1.1em; } .client_alter .address_content{display: inline-block; width: 70%;} .client_alter .address_complement{display: inline-block; font-weight: lighter; width: 70%;} .client_alter .purchase_item_list{padding: 15px; color: #333; border-bottom: 1px solid #ddd; border-radius: 5px; list-style-type: none; text-align: center} .client_alter .purchase_item_list:last-of-type{border-bottom: none} .client_alter .purchase_item_list:hover{background-color: lightgray; color: #333; cursor: pointer; transition: 0.5s all} .purchase_item_list .purchase_id{text-align: left} .purchase_item_list .purchase_date{text-align: left; display: block; font-size: 0.8em} .purchase_item_list .purchase_method_name{border-radius: 5px; padding: 10px; margin: 15px 5px; border: 1px solid #007fff; color: #007fff; font-size: 0.9em} .purchase_item_list .purchase_status{border-radius: 5px; padding: 10px; margin: 15px 5px} .purchase_item_list .purchase_value{padding: 10px; background-color: crimson; color: #fff; border-radius: 5px; margin: 15px 5px} .purchase_item_list a{color: #fff} .purchase_item_list hr{border: 0.5px dashed #999 } /********************************************** /*PERSONALIZADO TINTAS************************* **********************************************/ .ink_custom{grid-area: box_content; position: relative; width: 100%; text-align: center; margin: 0 auto; background: url('../img/background/ink_spot_red.png') left top no-repeat, url('../img/background/ink_spot_blue.png') right top no-repeat; } .ink_custom .ink_residence{margin: 60px 30px 30px 30px; padding: 30px; background-color: rgba(255,255,255,0.9); color: #333; border-radius: 5px; border-top: 20px solid #283E4B} .ink_custom label{text-align: left; margin: 15px auto;} .ink_custom .ambient_img{max-width: 500px; margin: 15px auto} .ambient_img img{background-color:#fff; border-radius: 5px; box-shadow: 0 0 50px #333} .ink_custom .color_select{padding: 0 15px; margin: 15px 0; height: 300px; overflow-y: auto; background-color: rgba(150,150,150, 0.9); color:#fff; border-radius: 5px} .ink_custom .color_list li{display: inline-block; margin: 5px; font-size: 0.7em} .ink_custom .color_list li:hover{cursor: pointer; filter: opacity(0.5);} .ink_custom .color_list li.active{outline: 5px solid red; filter: opacity(0.2)} .ink_custom .workmanship_select{padding-top: 15px} .ink_custom .budget_contact{margin: 60px 30px 30px 30px; padding: 30px; background-color: rgba(0,0,0,0.9); color: #fff; border-radius: 5px; border-top: 20px solid #4267B2} .ink_custom .budgetList{pading: 30px; border-radius: 5px; background-color: #fff; margin-top: 30px; max-height: 300px; overflow-y: auto} .ink_custom .budgetList li{pading: 50px; border-radius: 5px; padding: 15px; color: #333; text-align: left; border-bottom: 1px solid #ccc; transation: 0.5s all} .ink_custom .budgetList li:hover{cursor: pointer; border-radius: 5px; background-color: lightgray} .ink_residence .ink_residence_desc{font-size: 0.9em; display: block; margin-bottom: 50px;} .ink_preview{margin-top: 50px} /********************************************** /*PARCEIROS *********************************** **********************************************/ .partners{grid-area: box_partners; border-top: 5px outset #CD2E96; background: url('../img/background/ink_spot_green.png') right bottom no-repeat; background-size: contain; background-color: lavender } .partners h1{text-transform: capitalize; margin: 15px; font-weight: bold} .partners > .partners_container{width: 90%; margin: 0 50px; } .partners article{display: inline-block; width: 25%; max-width: 150px; padding: 5px; margin: 15px} /********************************************** /*ENDEREÇO ************************************ **********************************************/ .address{grid-area: box_address; border-top: 5px outset #ae4c00; background: url('../img/background/ink_spot_red.png') right bottom no-repeat, url('../img/background/ink_spot_blue.png') left top no-repeat, linear-gradient(to bottom, #ae4c00, #0d9911); } .address .formContact{margin: 0 auto 15px auto; max-width: 100%;} .formContact h2{text-align: center; padding: 15px 0; color: #fff; font-weight: bold} .formContact fieldset{border-top: 20px solid darkcyan} .address .contact_submit{text-align: center;} .address .contact{background-color: rgba(0,0,0,0.9); border-radius: 5px; width: 96%; max-width: 2000px; margin: 0 auto; padding: 15px; color: #fff; border-top: 20px solid #4267B2} .address article{margin: 0px;} .address span{display: block; } .address .email:hover{color: darkcyan} .address #map{width: 100%; margin: 15px auto 0 auto} .address iframe{width: 100%; height: 400px} /********************************************** /*EMAIL OFERTAS ******************************* **********************************************/ .lead_offers{grid-area: box_offers; border-top: 5px outset #0d9911; background-color: rgba(0,0,0,0.1); background: url('../img/background/bezel_down_repeat_invert.png') left bottom repeat-x;} .lead_offers h1{margin: 15px; font-weight: bold} .lead_offers form[name=form_lead_offers]{width: 90%; max-width: 1000px; margin: 15px auto 0 auto; padding: 10px; text-align: center;} .lead_offers label{margin: 0 5%; max-width: 1000px} .lead_offers .icon_mail{font-size: 2em;} .lead_offers input[name=lead_mail], .lead_offers input[name=lead_name]{font-size: 1.5em !important} .lead_offers .lead_remove_msg{font-weight: bold; background-color: rgba(200,200,200, 0.8); padding: 10px; border-radius: 5px} /********************************************** /*STAMPS ************************************** **********************************************/ .stamps{grid-area: box_stamps; width: 100%; border-top: 5px solid #E20014; padding: 30px; background: url('../img/background/ink_spot_red.png') left bottom no-repeat, url('../img/background/ink_spot_blue.png') right bottom no-repeat; background-size: 300px; background-color: lightslategray;} .stamps h1{margin-bottom: 15px; font-weight: bold; color: #fff} .stamps .stamp_items{margin: 0 auto; text-align: center} .stamps article{display: inline-block; width: 250px; height: 310px; box-shadow: 0 0 5px #333; background-color: #fff; border-radius: 5px; padding: 15px; text-align: center; margin: 0 10px 10px 0} .stamps article:hover{background-color: #333; color: #fff; cursor: pointer; transition: 0.5s all} .stamps .stamp_img{width: fit-content; width: -moz-fit-content; max-height: 100px; display: block; margin: 0 auto; padding: 5px;} .stamps h3{margin: 10px 5px 5px 5px;} .stamps p{font-style: italic; text-align: justify} /********************************************** /*FOOTER ************************************** **********************************************/ .footer_page{grid-area: box_footer; background: url('../img/background/filter-black.png'), url('../img/background/footer-background.jpeg') no-repeat right top; background-size: cover; border-top: 5px outset #007fff} .back_top{text-align: center; margin-top: 30px;} .back_top #js_back_top{font-size: 2em; color: #fff; border: 2px solid #fff; border-radius: 50%; padding: 5px 10px 10px 10px; transition: background-color 0.5s, border 0.5s} .back_top #js_back_top:hover{background-color: rgba(255,255,255,0.5); color: #333; border: none; cursor: pointer} .footer_page .institutional{display: inline-block; width: 75%; font-size: 0.8em} .institutional li{color: #fff; text-transform: uppercase; margin: 30px 0 30px 5%; font-weight: bold;} .institutional li:hover{text-decoration: underline; cursor: pointer} .footer_page .social_media{display: inline-block; text-align: center; width: 20%; border-left: 2px solid #fff;} .social_media li{color: #fff; font-size: 2.1em; margin-bottom: 30px; } .social_media li span{border-radius: 50%; padding: 17px 20px; transition: background-color 0.5s} .social_media li .icon_facebook:hover{color: #fff; background-color: #4267B2; } .social_media li .icon_instagram:hover{color: #fff; background-color: #CD2E96;} .social_media li .icon_whatsapp:hover{color: #fff; background-color: #00ff70} .social_media li .icon_twitter:hover{color: #fff; background-color: #1EAAFF;} .social_media li .icon_linkedin:hover{color: #fff; background-color: #283E4B;} .footer_page .footer_logo{display: block; width: 120px; margin: 15px auto;} .footer_page .footer_logo:hover{filter: opacity(0.5);} .copyright .developer{font-size: 0.8em;} .copyright .developer:hover{opacity: 0.5;} .footer_page .copyright{display: block; color: #fff; text-align: center; margin: 15px;} /********************************************** /*MODAL *************************************** **********************************************/ /*Barra de titulos*/ .modal_bar{display:none; width: 100%; height: 45px; color: #fff; font-size: 1.2em; position: absolute; top: 0px; left: 0px; padding: 10px 5px; z-index: 100; background-color: #448AFF; border-top-left-radius: 5px; border-top-right-radius: 5px} .modal_bar_title{font-weight: normal; color: #fff !important; text-align: left !important;} .modal_bg{display:none; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 98; position: fixed; top: 0; left: 0;} .modal_bg2{display:none; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 100; position: fixed; top: 0; left: 0;} /*Botão fechar de modais*/ .bt_close{width: 30px; height: 30px; font-size: 1.8em; position: absolute; top: 0px; left: calc(100% - 45px);} .bt_close:hover{cursor: pointer; filter: opacity(0.5);} /*Modal Drawer*/ .modal_drawer{display: none; position: fixed; top: 0; left: 0; min-width: 300px; height: 100%; background-color: rgba(255,255,255,0.9); padding-left: 15px; padding-right: 15px; padding-top: 14px; overflow: auto; z-index: 99;} .modal_drawer .drawer_menu_area_back_button{background-color: darkcyan; border-radius: 5px; height: 40px } .modal_drawer summary:after{content: '▼'; color: #fff; float: right } .modal_drawer span{color: #fff;} .modal_drawer #item_menu_back_drawer{margin-left: 5px} .modal_drawer #item_menu_back_drawer:hover{filter:opacity(0.5); cursor: pointer; display: inline-block; } .modal_drawer .js_logomarca, .js_logomarca_drawer{width: 100px; position:absolute; top: 20px; left: 100px; padding: 5px; background-color: #283E4B; border-radius: 5px} .modal_drawer .drawer_categories{background-color: #4267B2; border-radius: 5px; padding: 15px;} .drawer_categories > details, .drawer_perfil > details{color: #fff; background-color: rgba(0,0,0,0) !important} .drawer_categories > details[open], .drawer_perfil > details[open]{outline: none !important;} .drawer_name{font-weight: bold;} .drawer_perfil .avatar{width: 50px; margin-right: 25px; } .drawer_cropped_square {object-fit: cover; object-position: center; width: 50px ; height: 50px; } .drawer_perfil{background-color: #ff5549; padding: 15px; border-radius: 5px; color: #fff} .drawer_perfil label{color: #fff; font-size: 1.1em; font-weight: 500; margin-bottom: 20px;} .drawer_perfil, .drawer_categories{margin: 20px 0; } .drawer_perfil ul, .drawer_categories ul{list-style: disc; color: #fff; font-size: 0.9em; text-transform: lowercase;} .drawer_perfil li, .drawer_categories li{margin: 15px 0 10px 15px; text-transform: capitalize; padding: 5px;} .drawer_perfil li:hover, .drawer_categories li:hover{background-color: #555; border-radius: 5px; color: #fff; cursor: pointer; padding: 15px} .drawer_perfil li a, .drawer_categories a{width: 100%; display: inline-block;} .drawer_perfil details ul{margin-top: 30px;} .drawer_perfil summary, .drawer_library summary{font-size: 1em; margin-bottom: 20px; transition: 0.5s all} .drawer_perfil summary:hover, .drawer_categories summary:hover{font-weight: bold;} .drawer_group{font-size: 0.9em; font-weight: 300; text-transform: capitalize; } /*Modal authorization*/ .modal_authorization{display: none; position: fixed; left: 5%; top: 5%; width: 90%; background-color: #eee; z-index: 101; overflow: hidden; border-radius: 5px;} .modal_authorization > .modal_bar{display: block;} .modal_authorization .modal_bar_title{margin-left: 15px} .modal_authorization p{margin-top: 80px; text-align: center; font-weight: bold; font-size: 1.1em} .modal_authorization input[type=password], .modal_authorization input[type=text]{display: block; margin: 50px 2% 0 2%; width: 100%; width: 96%;} .modal_authorization input[type=button]{display:block; margin: 0 auto 30px auto;} /*Modal institutional*/ .modal_bar_title.terms_use, .modal_bar_title.privacy_policy, .modal_bar_title.payment_methods, .modal_bar_title.delivery_policies, .modal_bar_title.about_us{display: none; margin-left: 20px; border-radius: 5px;} .modal_institutional{display: none; position: fixed; left: 5%; top: 5%; width: 90vw; height: 90vh; background-color: #eee; border-radius: 5px; z-index: 99; margin: 0 auto; color: #333;} .modal_institutional > .modal_bar{display: block;} .content_institutional{display: none; margin: 45px 0; height: calc(100% - 45px); overflow-y: auto;} .content_institutional h3{margin: 15px 0 25px 0;} .content_institutional h4{margin: 15px 0} .content_institutional p{margin: 10px 0;} .content_institutional span{margin: 15px 0 60px 0;} .modal_institutional article{padding: 15px 30px;} /*Modal Search*/ .modal_search{display: none; position: fixed; left: 5%; top: 5%; width: 90%; max-height: 90%; background-color: #eee; z-index: 99; overflow: hidden; border-radius: 5px;} .modal_search > .modal_bar{display: block;} .modal_search .modal_bar_title{margin-left: 15px;} .modal_search form{margin: 45px 0 30px 0; overflow-y: auto; max-height: calc(100% - 45px)} .modal_search details[open] summary:after{content: 'Esconder filtros'; font-size: 0.7em; color: #333; } summary:after{content: 'Mostrar filtros'; margin-left: 0; float: none; font-size: 0.7em; color: #333; } .modal_search details[open]{outline: none} .modal_search #searchResult{position: relative; height: calc(100% - 283px); overflow-y: auto} .modal_search .field_search{width: 96%; max-width: 96%; color: #333; text-align: center; margin: 0 auto; background-color: #ddd; border-radius: 5px; padding: 30px;} .modal_search input[type=search]{display: inline-block; margin: 0 0 30px 0; width: calc(100% - 100px);} .modal_search input[type=submit]{display:block; margin: 15px auto;} .modal_search table{width: calc(100% - 60px); color: #333; border-collapse: collapse; margin: 15px auto; } .modal_search tr{min-height:1px; max-height: 50px; border-collapse: collapse; } .modal_search tbody{border-bottom: 1px solid #333;} .modal_search tbody:last-of-type{border-bottom: none} /*.modal_search tbody:hover{background-color: var(--ascentColor); color: var(--fontColor); cursor: pointer;}*/ .modal_search td{padding: 0 15px; font-size: 0.9em; font-weight: 300; padding: 5px 10px} .modal_search .asset{width: 50px;} .modal_search .item_name{width: calc(85% - 50px); font-weight: bold} .modal_search .table_name{width: 15%; text-align: right; font-weight: bold} .modal_search .thumb_search{width: 30px} .modal_search .search_result_link{text-align: center; text-transform: uppercase; font-weight: bold;} /*.modal_search tbody:hover > .search_result_link{background-color: var(--primaryColor)}*/ .modal_search .search_result_link:hover{text-decoration: underline;} /*Modal finalização da compra*/ .modal_finish_buy_resume{display: none; position: fixed; left: 5%; top: 5%; width: 90%; height: 90%; background-color: #eee; z-index: 99; overflow: hidden; border-radius: 5px;} .modal_finish_buy_resume > .modal_bar{display: block;} .modal_finish_buy_resume .modal_bar_title{margin-left: 15px} .modal_finish_buy_resume .title_info{margin-top: 60px; text-align: center; font-weight: bold; font-size: 1.2em} .modal_finish_buy_resume .resume_info{margin-top: 15px; height: calc(100% - 95px); overflow-y: auto; padding: 30px; text-align: center} .modal_finish_buy_resume .small{display: block; text-align: left; margin-left: 50px;} .modal_finish_buy_resume .info_payment{color: red; font-weight: bold} .modal_finish_buy_resume .pass_group{min-width: 200px; max-width: 500px; text-align: center; margin: 25px auto; background-color: gainsboro; border-radius: 5px; padding: 15px;} .resume_info_checkout{width: 100%; border-radius: 5px; background-color: #ddd} .resume_info_checkout th{background-color: #aaa; padding: 5px; font-weight: bold; border-bottom: 0.5px solid #333;} .resume_info_checkout tbody td{padding: 5px; border-bottom: 0.5px solid #333;} .resume_info_checkout tfoot td{background-color: #555; color: #fff; padding: 5px; border-bottom: 0.5px solid #333;} .group_finish_buy_resume_button{margin-top: 30px;} /*Modal Usuário Endereço*/ .modal_user_address_add, .modal_user_address_edit, .modal_user_address_creditcard{display: none; position: fixed; left: 5%; top: 5%; width: 90%; height: 90%; background-color: #eee; z-index: 99; overflow: hidden; border-radius: 5px;} .modal_user_address_add > .modal_bar, .modal_user_address_edit > .modal_bar, .modal_user_address_creditcard > .modal_bar{display: block;} .modal_user_address_add .modal_bar_title, .modal_user_address_edit .modal_bar_title, .modal_user_address_creditcard .modal_bar_title{margin-left: 15px} .modal_user_address_add .form_address, .modal_user_address_edit .form_address, .modal_user_address_creditcard .form_address, .modal_user_address_creditcard .form_address_creditcard{margin-top: 45px; height: calc(100% - 45px); overflow-y: auto; padding: 30px} .modal_user_address_add .small, .modal_user_address_edit .small, .modal_user_address_creditcard .small{display: block; text-align: left; margin-left: 50px;} /********************************************** /*RESOLUÇÃO LARGURA 768px ******************** **********************************************/ @media screen and (min-width: 768px){ /********************************************** /*SLIDE *************************************** **********************************************/ .slide_control{width: 92%; margin: 0 4%; top: 15%;} .slide_item img{margin: 0; } .slide_item_desc{position: absolute; width: 100%; bottom: 0; background-color: rgba(0,0,0,0.5)} .slide_item_desc h3{font-size: 1.8em; text-shadow: 2px 2px 4px #000; color: #fff} .slide_item_desc .tagline{font-size: 1em; text-shadow: 2px 2px 4px #000; color: #fff} /********************************************** /*CONTEÚDO ************************************ **********************************************/ /*Index*/ .highlights .product_item, .new_products .product_item, .most_wanted .product_item, .most_selled .product_item{width: 45%; height: 250px; margin: 30px 2.5% 90px 2.5%;} /*Novo cliente*/ .new_user_art > img{width: 50%; padding: 0 10%; margin: auto} /*Produtos*/ .related_products .product_item, .line_same_products .product_item{width: 45%; height: 250px; margin: 0 2.5% 90px 2.5%;} /*Produtos*/ .product_filter .type_filter_area, .product_filter .brand_filter_area{width: calc(50% - 30px); margin: 10px; display: inline-block} /*Carrinho de compras / Lista de desejos*/ .cart_item, .wish_item{text-align: start} .cart_item .cart_item_product_detail, .wish_item .wish_item_product_detail{float: left !important} .cart_item .cart_item_photo{width: 150px; height: 150px; float: left} .wish_item .wish_item_photo{width: 100px; height: 100px; float: left} .cart_item .cart_item_product_price, .wish_item .wish_item_product_price{text-align: right} .cart_item .cart_item_product_buttons, .wish_item .wish_item_product_buttons{text-align: left;} .cart_item .cart_item_product_control, .wish_item .wish_item_product_control{float: right} /*Tintas personalizadas*/ .ink_custom .package_select, .ink_custom .workmanship_select, .ink_custom .quantity_select{width: 32%; display: inline-block; padding-top: 15px} } /********************************************** /*RESOLUÇÃO LARGURA 900px ******************** **********************************************/ @media screen and (min-width: 900px){ /********************************************** /*CONTEÚDO ************************************ **********************************************/ /*Index*/ .highlights .product_item, .new_products .product_item, .most_wanted .product_item{width: 30%; height: 250px; margin: 30px 1.666666666666667% 90px 1.666666666666667%;} /*Produtos*/ .related_products .product_item, .line_same_products .product_item{width: 30%; height: 250px; margin: 30px 1.666666666666667% 90px 1.666666666666667%;} /*404*/ .most_selled .product_item, .product_list .product_item, .product_search_list .product_item{width: 30%; height: 250px; margin: 30px 1.666666666666667% 90px 1.666666666666667%;} } /********************************************** /*RESOLUÇÃO LARGURA 1280px ******************* **********************************************/ @media screen and (min-width: 1280px){ /********************************************** /*HEADERS ************************************* **********************************************/ .header_navigator .logomarca{display: inline-block; min-width: 125px; max-width: 150px; flex-grow: 1; margin: 12px } .header_navigator .perfil{display: inline-block; width: 550px; margin: 5px 100px 15px 25px;} .header_navigator .avatar{width: 45px; height: 45px; margin-right: 20px; border: 1px solid #333} .header_navigator .perfil li{display: inline-block; padding: 7px; margin-right: 10px} .header_navigator .perfil_option{color: #333; font-size: 0.9em} .header_navigator .perfil_option:hover{filter:opacity(0.5); cursor: pointer;} .header_navigator .category_title{font-size: 0.9em; padding: 0 15px} .header_navigator .category_item:last-of-type{font-size: 0.9em; padding: 10px 30px 10px 15px} .header_navigator .menu_button{display: none; } .header_navigator .category_list{display: flex; flex-direction: row; align-self: flex-start; z-index: 98; width: 100%; text-align: left; overflow-x: hidden; margin-right: 5px; transition: 0.5s all} .header_navigator .category_item{display: inline-block; padding: 10px; margin: 5px; border-radius: 5px; text-transform: uppercase; color: #333; transition: 0.5s all} .header_navigator .category_item:hover{background-color: dodgerblue; color: #fff; text-decoration: underline; cursor: pointer;} .header_navigator .subcategory_list{display:none; position: relative; text-align: left; text-transform: capitalize; background-color: dodgerblue; color: #fff; border-radius: 5px; margin: 10px 0 0 -10px; font-size: 0.8em; transition: 0.5s all} .subcategory_list li{margin: 5px; padding: 5px; } .subcategory_list li:hover{background-color: crimson; border-radius: 5px; } .subcategory_list li a{width: 100%; display: inline-block;} .category_item:hover > .subcategory_list{display: block;} /********************************************** /*SLIDE *************************************** **********************************************/ .slide_control{width: 92%; margin: 0 4%; top: 25%;} .slide_item img{margin: 0; } .slide_item_desc{position: absolute; width: 100%; padding: 50px 4%; bottom: 0; background-color: rgba(0,0,0,0.5)} .slide_item_desc h3{font-size: 1.8em; text-shadow: 2px 2px 4px #000; color: #fff} .slide_item_desc .tagline{font-size: 1em; text-shadow: 2px 2px 4px #000; color: #fff} /********************************************** /*CONTEÚDO ************************************ **********************************************/ /*Index*/ .highlights .product_item, .new_products .product_item, .most_wanted .product_item{width: 22.5%; height: 250px; margin: 30px 1.25% 90px 1.25%;} /********************************************** /*CLIENTES ************************************ **********************************************/ /*Clientes - Criar*/ .form label{font-weight: bold; max-width: 1000px;} .form legend{font-size: 1.2em} .client_alter .wish_item_list, .client_alter .list_address, .client_alter .purchase_item{width: 90%; padding: 30px; margin: 0 auto;} /********************************************** /*PERSONALIZADO TINTAS************************* **********************************************/ .ink_color{width: 48%; float: left} .ink_preview{width: 48%; float: right; margin-top: 15px} /*Produtos*/ .related_products .product_item, .line_same_products .product_item{width: 22.5%; height: 250px; margin: 30px 1.25% 90px 1.25%;} /*Produtos info*/ .product_info .product_product_area{width: 60%; display: inline-block; float: left} .product_create_ink{width: calc(40% - 35px); max-width: 500px; display: inline-block; } .product_info .product_buy_control{width: calc(40% - 35px); max-width: 500px; display: inline-block; margin: 145px auto 30px auto;} .product_info .product_social_share{width: calc(40% - 35px); max-width: 500px; display: inline-block; } .product_info .product_comments{width: calc(40% - 35px); max-width: 500px; display: inline-block;} /*404*/ .most_selled .product_item, .product_list .product_item, .product_search_list .product_item{width: 22.5%; height: 250px; margin: 30px 1.25% 90px 1.25%;} /********************************************** /*FOOTER ************************************** **********************************************/ .footer_page .institutional{display: block; width: 100%; margin: 60px; text-align: center; margin-left: 0;} .institutional li{display: inline-block; margin-right: 30px} .footer_page .social_media{display: inline-block; width: 100%; border-left: none;} .social_media li{display: inline-block; margin: 60px 15px;} /********************************************** /*MODAL *************************************** **********************************************/ /*Modal Drawer*/ .modal_drawer{display: none;} }