::selection { background-color: #0e2d6d; /* WebKit/Blink Browsers */ } ::-moz-selection { background-color: #0e2d6d; /* Gecko Browsers */ } .master-header-wrapper, .navigation-wrapper, .ui-dialog-titlebar, .scroll-back-button, .language-list a:hover, .ui-autocomplete a.ui-state-focus, .footer-upper, .newsletter-email .newsletter-subscribe-button, .social-sharing a, .product-viewmode a.selected, .item-type-2 .bestsellers .product-box-add-to-cart-button:after, .item-type-1 .product-grid .product-box-add-to-cart-button:before, .item-type-2 .product-grid .item-box .product-box-add-to-cart-button:hover, .pager li:before, .pager li.current-page:before, .ui-state-highlight, .overview .add-to-cart-button, .variant-overview .add-to-cart-button, .ui-tabs .ui-tabs-nav li:before, .block-account-navigation .list li a:after, .product-list .item-box .product-box-add-to-cart-button, input[type=radio]:checked + label:before, #Newsletter:checked + input + label:after, .inputs.reversed input:checked + input + label:after, .selector input:checked + input + label:after, input[type=checkbox]:checked + label:after, .field-validation-valid, .username-available-status, .poll .buttons input, .qq-uploader .qq-upload-list li.qq-upload-success, .attributes .option-list.radio-list li:hover label, .attributes .option-list.radio-list input[type=radio]:checked + label, .enter-password-form input[type="submit"], .address-list-page .add-button input, .checkout-page .address-item input, .shipping-method .method-list li label:after, .payment-method .method-list li label:after, .totals .actions input, .totals button, .buttons .button-1, .buttons .button-2, .notify-me-button, .search-box .search-box-button, .blog-search-box .search-box-button, .eu-cookie-bar-notification button, .vendor-item .picture .hover, .manufacturer-item .picture .hover, .productAddedToCartWindowSummary div, .product-review-box .rating div, .write-review .rating-options:hover label:hover, .write-review .rating-options:hover label:hover ~ label, .write-review .rating-options input:checked ~ label, .item-box .rating div, .miniProductDetailsView .add-to-cart .add-btn-hover span, .address-list .buttons .button-2:hover, .order-list .buttons .button-2:hover, .k-editor-dialog .k-edit-buttons.k-state-default button.k-dialog-insert.k-button, .ticketing-page form > .buttons .k-button, .my-tickets-page .clear-filters, .manage-tickets-page .clear-filters, .k-pager-numbers li, .k-widget.confirmation-wrapper button, #submit-reply .buttons .k-button { background-color: #0e2d6d; } /* dark */ .store-search-box { background-color: #081a40; } /* text color */ .cart .product-name:hover, .cart .subtotal span, .header-links a:hover, .footer-middle li.address:before, .footer-middle li.phone:before, .social-sharing a:hover:after, .block .list > li > a:hover, .block .sublist > li > a:hover, .block .sublist > li.active > a, .block .view-all a, .block .view-all a:hover:after, .category-grid .item-box .sub-categories-list li a:hover, .item-box .actual-price, .item-box .buttons-wrapper button, .bestsellers.product-grid .item-box .product-box-add-to-cart-button, .item-box .buttons-wrapper button:hover:after, .item-type-1 .product-grid .buttons-wrapper .product-box-add-to-cart-button:after, .vendor-item:hover .title a, .manufacturer-item:hover .title a, .product-no-reviews a, .product-review-links a:hover, .product-review-links span + a, .overview .value a, .variant-overview .value a, .overview .back-in-stock-subscription .subscribe-button, .variant-overview .back-in-stock-subscription .subscribe-button, .free-shipping:after, .download-sample-button, .qq-uploader .qq-upload-button, .overview .product-price, .variant-overview .product-price, .qty-wrapper span:hover:after, .overview .compare-products:hover:after, .overview .email-a-friend:hover:after, .overview .compare-products:hover input, .overview .email-a-friend:hover input, .overview .add-to-cart-button:hover span, .variant-overview .add-to-cart-button:hover span, .overview .add-to-cart-button:hover span:before, .variant-overview .add-to-cart-button:hover span:before, .overview .add-to-cart-button:hover, .variant-overview .add-to-cart-button:hover, .product-reviews-page h1 a, .product-review-item .review-info a, .wishlist-content button.button-2, .compare-products-page .clear-list, .accept-privacy-policy .read, .check-username-availability-button, .forgot-password, .customer-pages-body .data-table td.points-balance, .address-list .buttons .button-2:after, .order-list .buttons .button-2:after, .request-item a, .return-request-page .data-table td.unit-price, .file-upload label, .order-progress li.active-step.last a:before, .cart-options .common-buttons button, .terms-of-service a, .complete-button:hover span, .complete-button:hover span:before, #checkout:hover span, #checkout:hover span:before, .shipping-method .method-list li label:hover, .payment-method .method-list li label:hover, .opc .step-title span, .order-details-page .btns-wrapper > a, .products .product-subtotal, .order-details-page .actions input + input, .order-total strong, .cart-total .order-total td.cart-total-right, .return-request-page .qq-upload-button, .sitemap-page li, .blog-posts .read-more, .news-items .read-more, .news-list-homepage .view-all, .blog-details a:hover, .new-comment .result, .comment-info .username, .news-list-homepage .news-title:hover, .forum-search-box .advanced a, .forum-search-box .advanced a:hover:after, .forums-table-section-title > a, .forums-table-section-title strong, .forums-table-section .view-all, .topic-title:hover, .forums-table-section .forum-title:hover, .forums-table-section .latest-post .author a, .forums-table-section .latest-post .origin a, .forum-actions .actions a, .topic-actions .actions a, .topic-post .post-actions .edit-post-button, .topic-post .post-actions .delete-post-button, .topic-post .post-actions .quote-post a, .private-messages-page .buttons input + input, .private-message-send-page .buttons input + input, .forum-edit-page .buttons input + input, .move-topic-page .buttons input + input, .topic-post .username, .topic-post .pm-button, .profile-info-box .pm-button, .topic-post .post-vote > div, .forum-edit-page strong, .private-message-send-page a, .private-messages-page .unread td a, .private-message-view-page .buttons .delete-pm-button, .private-message-view-page .buttons input:last-child, .product-price td + td, .wishlist-page .share-info a, .eu-cookie-bar-notification button:hover, .giftcard-summary label + span, .cart-collaterals .current-code span, .footer-powered-by a:hover, .footer-designed-by a:hover, .email-a-friend-page .title h2, .post-navigation a, .post-title:hover, .news-title:hover, .miniProductDetailsView .add-to-cart .add-btn-hover span:hover input, .cart-collaterals .coupon-code input[type="submit"]:hover, .cart-collaterals .buttons .estimate-shipping-button:hover, .edit-item, .filter-options > div:before, .k-editor-dialog .k-edit-buttons.k-state-default button.k-dialog-close.k-button, .inputs.upload .k-button.k-upload-button span, a.view-ticket.k-button:after, a.k-button.k-grid-edit:after, a.k-button.k-grid-update:after, .k-grid .k-hierarchy-cell .k-icon::after, .ticket-buttons .tb-right .k-button:before, .ticket-comments .comment-header .left a, .ticket-comments .comment-header .edit-comment:before, .view-ticket-notes-page .ticket-buttons .k-button:before, .apply-vendor-page .terms-of-service span { color: #0e2d6d; } /* border color */ .ajax-loading-block-window, .product-list .item-box .buttons-wrapper .buttons button, .product-grid .item-box .buttons-wrapper, .bestsellers.product-grid .item-box .buttons-wrapper, .attributes div .qq-uploader, .inputs.upload .k-button.k-upload-button span, .k-loading-image:after { border-bottom-color: #0e2d6d; } .poll-options li label:hover, .poll-options li input:checked + label { border-left-color: #0e2d6d; } .order-progress li.active-step.last a { border-top-color: #0e2d6d; } .item-type-2 .product-grid .item-box:hover .buttons { border-color: #0e2d6d; } /*mobile*/ @media screen and (max-width: 1024px) { .navigation-wrapper { background-color: #0e2d6d; } /*instant search*/ .store-search-box .search-box-select { border-right-color: #0e2d6d; } .store-search-box .search-box-select { background-color: #081a40; } .header-menu > ul li > a:hover, .header-menu > ul li > span:hover { color: #0e2d6d; } } /*1024*/ @media screen and (min-width: 1025px) { .filter-options > div:before, .compare-section.price li { color: #0e2d6d; } .flyout-cart .buttons button, .flyout-cart .buttons button + button:hover:before, .header-menu .sublist li:hover > a { background-color: #0e2d6d; } .flyout-cart .item .price span, .flyout-cart .totals strong, .flyout-cart .buttons button:hover span:before, .flyout-cart .buttons button:hover, .flyout-cart .buttons button + button, .footer-block .list > li:hover, .downloadable-products-page .download a:hover { color: #0e2d6d; } .header-menu > ul > li:hover > a, .header-menu > ul > li:hover > span, .header-menu .sublist-wrap { background-color: #081a40; } } /*ajaxCart*/ .ajax-cart-button-wrapper input[type="button"], .productAddedToCartWindowDescription .price { color: #0e2d6d; } .productAddedToCartWindowSummary div:hover .button-1 { color: #0e2d6d; } .nopAjaxCartPanelAjaxBusy::after { border-bottom-color: #0e2d6d; } /*ajaxFilters*/ .selected-options-list > li span, .priceRangeCurrentPricesPanel span { color: #0e2d6d; } .ui-slider-range { background-color: #081a40; } .ui-slider-handle, .ajaxFilters .k-window-titlebar { background-color: #0e2d6d; } .productPanelAjaxBusy::after { border-bottom-color: #0e2d6d; } /**sliders */ .nivo-controlNav a.active { background-color: #0e2d6d; } /*cloud zoom*/ .cloudzoom-ajax-loader:after { border-bottom-color: #0e2d6d; } /*instant search*/ .instant-search-item .detail .price { color: #0e2d6d; } /*jCarousel*/ .nop-jcarousel.category-grid .item-box .title:hover a { color: #0e2d6d; } .full-width-carousel .home-page-product-grid, .nop-jcarousel .slick-prev:hover, .nop-jcarousel .slick-next:hover, .nop-jcarousel .slick-dots .slick-active button, .nop-jcarousel .slick-dots button:hover, .carousel-cover, .nop-jcarousel.vendor-grid .item-box .title a:before, .nop-jcarousel.manufacturer-grid .item-box .title a:before { background-color: #0e2d6d; } .full-width-carousel .home-page-product-grid .slick-prev:hover, .full-width-carousel .home-page-product-grid .slick-next:hover, .full-width-carousel .home-page-product-grid .slick-prev, .full-width-carousel .home-page-product-grid .slick-next { background: #081a40; } /*mega menu*/ .mega-menu .title:hover, .mega-menu .box li a:hover { color: #0e2d6d; } /*quickView*/ .product-list .quick-view-button, .quickView .k-loading-image { border-bottom-color: #0e2d6d; } .quick-view-button a, .item-box .buttons-wrapper a:hover:after, .quickView .links-panel a, .quickView .variant-info, .overview .add-to-wishlist:hover input, .quickView .overview .add-to-wishlist:hover:after { color: #0e2d6d; } /*ropc*/ .ropc .ship-to-same-address, .estimate-shipping button, .complete-button button { background-color: #0e2d6d; } .ropc .ship-to-same-address input[type=checkbox]:checked + label::after { color: #0e2d6d; } /*rich blog*/ .rich-blog-homepage .post-title { border-top-color: #0e2d6d; } .rich-blog-homepage .view-all, .blog-instant-search .k-item, .search-term-highlighter { color: #0e2d6d; } /*spc*/ .spc-header li:before, .spc-categories .category-title { background-color: #0e2d6d; } .spc-body .loading-overlay span, .spc-categories > .loading-overlay span { border-bottom-color: #0e2d6d; } .product-ribbon { border-top-color: #0e2d6d !important; } /*fundos inteiros - laranja atex*/ .fundo_atex { position: relative; background-size: cover; background: #F95006; margin-right: auto; margin-left: auto; margin-bottom: -30px; padding-bottom: 0; width: 100%; } .fundo_atex:before, .fundo_atex:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #F95006; text-indent: -9999px; font-size: 0; } .fundo_atex:before{ right: 100%; } .fundo_atex:after{ left: 100%; } /**********4 colunas*************************/ .column4 { float: left; padding: 10px; width: 25%; } /* Clear floats after the columns */ .row4:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .column4 { width: 100%; } } /************************************/ .gototop{ visibility: hidden; } h1 { text-align: left; font-size: 30pt; color: #000; text-transform: uppercase; text-shadow: 2px 2px 4px rgb(0 0 0 / 30%); padding-bottom: 5px; } /*************contadores******************/ /*https://codeconvey.com/pure-css-number-counter-animation/*/ /*define font-family, font size, and line-height*/ .numbers { font-family: 'Arial', sans-serif; font-size: 90px; letter-spacing: -30px; color: #49c7ed; line-height: 1em; text-align: center; margin: 0 auto; overflow: hidden; } /* is the container element for each number*/ .numbers__window { display: inline-block; overflow: hidden; /*width: 0.8em;*/ width: 0.7em; height: 1em; } .numbers__window__digit { font: inherit; word-break: break-all; display: block; width: 0; padding: 0 0.52em 0 0; margin: 10px auto; overflow: inherit; animation: counting 0.4s steps(10) forwards infinite; } .numbers__window__digit::before { content: attr(data-fake); display: inline-block; width: 100%; height: auto; } @keyframes counting { 100% { transform: translate3d(0, -10em, 0); } } .numbers__window__digit--1 { animation-iteration-count: 3; } .numbers__window__digit--2 { animation-iteration-count: 6; } .numbers__window__digit--3 { animation-iteration-count: 9; } .numbers__window__digit--4 { animation-iteration-count: 12; } .numbers__window__digit--5 { animation-iteration-count: 15; } /***********https://codeconvey.com/pure-css-number-counter-animation************************/ /*contador 1-verde*/ /*https://codingartistweb.com/2021/10/how-to-create-responsive-count-up-animation-with-javascript/* .wrapper { position: absolute; width: 80vw; transform: translate(-50%, -50%); top: 50%; left: 50%; display: flex; justify-content: space-around; gap: 10px; } .container_c { width: 28vmin; height: 28vmin; display: flex; flex-direction: column; justify-content: space-around; padding: 1em 0; position: relative; font-size: 16px; border-radius: 0.5em; background-color: #21242b; border-bottom: 10px solid #18f98f; } i { color: #18f98f; font-size: 2.5em; text-align: center; } span.num { color: #ffffff; display: grid; place-items: center; font-weight: 600; font-size: 3em; } span.text { color: #e0e0e0; font-size: 1em; text-align: center; pad: 0.7em 0; font-weight: 400; line-height: 0; } @media screen and (max-width: 1024px) { .wrapper { width: 85vw; } .container_c { height: 26vmin; width: 26vmin; font-size: 12px; } } @media screen and (max-width: 768px) { .wrapper { width: 90vw; flex-wrap: wrap; gap: 30px; } .container_c { width: calc(50% - 40px); height: 30vmin; font-size: 14px; } } @media screen and (max-width: 480px) { .wrapper { gap: 15px; } .container_c{ width: 100%; height: 25vmin; font-size: 8px; } } /*****notícias técnicas obo***********/ .barra-obo { margin: 0 0 15px 0; padding-bottom: 5px; border-bottom: 2px solid #f39b00; } /*****notícias técnicas pg***********/ .barra-pg { margin: 0 0 15px 0; padding-bottom: 5px; border-bottom: 2px solid #ff6600; } /************4 colunas iguais*/ .c4 { float: left; width: 25%; padding: 10px; } /* Clear floats after the columns */ .rowc4:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .c4 { text-align: center; width: 100%; } } /*txt das div congresso - em web fica à direita, em telemovel fica à esquerda*/ .txtcong { text-align: right; } @media all and (max-width:800px) { .txtcong { text-align: left; font-size: 12 pt; }} /*zoom na foto do congresso*/ .image-box01 { position: relative; margin: auto; overflow: hidden; width: 600px; } .image-box01 img { max-width: 100%; transition: all 0.3s; display: block; width: 100%; height: auto; transform: scale(1); } .image-box01:hover img { transform: scale(1.1); } .image-box01:hover img { zoom: 150%; } @media all and (max-width:800px) { .image-box01{ width: 100%; height: auto; }} /*dislay 3 colunas*/ .feg22{ display: grid; grid-template-columns: 20% 40% 40%; padding: 30px; color: #ffffff; line-height: 1.2; border: 1px solid #66749e; border-radius: 8px;} @media all and (max-width:800px) { .feg22 { grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); grid-row-gap: 1rem; font:size:14px; text-justify: auto; }} /*dislay 4 colunas*/ .feg44{ display: grid; grid-template-columns: 25% 25% 25% 25%; padding: 10px; color: #00000; line-height: 1.2; } @media all and (max-width:800px) { .feg44 { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); grid-row-gap: 1rem; font:size:12px; text-justify: auto; }} /*títulos nas páginas das marcas*/ .manufacturer-description h1 { text-align: left; font-size: 30pt; color: #000; text-transform: uppercase; text-shadow: 2px 2px 4px rgb(0 0 0 / 30%); padding-bottom: 5px; } /*tabela de botões topo*/ .tabelabt { width: 100%; height: 50px; background-color: #0e2d6d; color: #fff; border-radius: 10px; border-right: 1px solid #ffff; border-collapse: collapse;} a.tabelabt : link {color: #fff;!important} /*linha vertical*/ .vl{ border-left: 1px solid grey; height: 500px; position: absolute; left: 50%; margin-left: -3px; top: 0; } /* para sliders a meio da página*/ /*colocar no theme do slider: nivo-main-image01*/ @media (min-width: 1025px) { .theme-nivo-main-image01{ position: relative; overflow-x: visible; display: block; background-size: cover; background-position: center center; margin-inline: -680px; margin-bottom:-40px; overflow: hidden;} } /*mapa a 100%*/ @media (min-width: 1025px) { .anywhere-page-map .map-wrapper { margin: 0 0 10px 0; overflow-x: visible; display: block; background-size: cover; background-position: center center; margin-inline: -700px; overflow: hidden; }} @media (min-width: 1025px) { .anywhere-page-map .map-controls { margin-top: -180px; text-align: center; z-index: -10; }} /************ rectangulo semi transparente AZUL FINDER*/ .semi_f{ position: absolute; top: 45%; left: 200px; right: 350px; transform: translate(50%, -45%); background: rgba(0, 174, 239, 0.7); height: 200px; width:32%; text-align: left; padding: 12px 23px 50px 23px; line-height:1; color:#fff; } @media (min-width: 769px){ .blogpost-page .post-footer { float: none; padding: 10px 20px 20px; width: 100%; max-width: 100%; background: #fff; border-top: 1px solid #49c7ed; }} @media (min-width: 1281px){ .page-body > div.full-width-carousel { width: 100%; } } /*CARROCEL FABRICANTES E VENDORS - BORDER*/ .nop-jcarousel.vendor-grid .slick-slide .picture, .nop-jcarousel.manufacturer-grid .slick-slide .picture { border: 0 solid #ddd; border-left: 0; max-width: 100%; } /**********************SCROLL BAR GENÉRICO**************************/ /* width */ ::-webkit-scrollbar { width: 8px; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 2px grey; border-radius: 5px; } /* Handle */ ::-webkit-scrollbar-thumb { background: #09245b;/*azul escuro*/ border-radius: 5px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #49c7ed; } /* SCROLL BAR NAS CAIXA DAS MARCA*/ .block:last-of-type .listbox{ padding-top:5px; height: 350px; overflow: auto; } /*CLASSES WALLBOX-SS*/ .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*fundos inteiros - cinza wallbox*/ .fundo_w { position: relative; background-size: cover; background: #eceff1; margin-right: auto; margin-left: auto; margin-bottom: -30px; padding-bottom: 0; width: 100%; } .fundo_w:before, .fundo_w:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #eceff1; text-indent: -9999px; font-size: 0; } .fundo_w:before{ right: 100%; } .fundo_w:after{ left: 100%; } /************pag iot - grade automática***/ /***
4
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_grid-auto-flow ******/ .grid-container { display: grid; grid-template-columns: 50% 49%; grid-template-rows: auto auto; grid-gap:10px; padding: 10px; } .grid-container > div { text-align: center; padding: 20px 0; } /************************** domovea hager **************************/ /*** Top right text *****/ .top-righttxth { position: absolute; top: 45%; right: 62%; text-align: justify; transform: translate(50%, -45%); line-height:1.3; font-size: 18px; color: #fff; } @media all and (max-width:800px) { .top-righttxth{ all:unset;}} /************************** Clipping-USADO NO SMART**************************/ /********botão legrand*****/ /*border cinza*/ .link_leg_gr { text-transform: uppercase; line-height: 1.25rem; font-size: 1rem; font-weight: 700; display: inline-block; color: #3C3535; background-color:rgba(255, 255, 255, 0.3); margin: 6px; padding: .875rem 1.5rem; border: 1px solid #3C3535; transition: opacity 400ms ease-in-out 600ms,transform 400ms ease-in-out 600ms,box-shadow 100ms ease-in-out 0ms,-webkit-transform 400ms ease-in-out 600ms;} .clfotolarge{ clip-path: inset(550px 0px 450px 0px); margin-top: -550px; margin-bottom: -550px; } .containersmart { width: 100%; padding-right:240px; padding-left: 240px; margin-right: auto; margin-left: auto; text-align: justify; font-size: 14px; color: #000000; } .picsmart { float: left; padding: 0 1rem 1rem 0;} .picsmartr { float: right; padding: 0 0 1rem 1rem;} /*Texto centro*/ .top-cttxts { position: absolute; top: 15%; left: 350px; right: 450px; text-align: center; line-height:1.3; font-size: 18px; color: #fff; } .top-cttxtsmart {padding: 0px; text-align: center; margin-top: 250px;} @media all and (max-width:800px) { .containersmart { all:unset; padding-top:10px; height:100%; color: #000000; display: block; float:none; width: 100%; text-align: left; margin:3px !important; }} @media all and (max-width:800px) { .top-cttxts{ all:unset; padding-top:-150px; height:100%; color: #000000; display: block; float:none; width: 100%; text-align: center !important; margin:3px !important; } } @media all and (max-width:800px) { .top-cttxtsmart{ all:unset;}} /*****fundos inteiros -pink***/ .fundo_pink { position: relative; background-size: cover; background: #ff375f; margin-right: auto; margin-left: auto; margin-bottom: 0; padding-bottom: 0; width: 100%; } .fundo_pink:before, .fundo_pink:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #ff375f; text-indent: -9999px; font-size: 0; } .fundo_pink:before{ right: 100%; } .fundo_pink:after{ left: 100%; } /********************fundos inteiros - cinza**************************/ .fundo2 { position: relative; background-size: cover; background: #010206; margin-top: 0; padding-top: 0; margin-right: auto; margin-left: auto; margin-bottom: 0; padding-bottom: 0; width: 100%; } .fundo2:before, .fundo2:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #f010206; text-indent: -9999px; font-size: 0; } .fundo2:before{ right: 100%; } .fundo2:after{ left: 100%; } /****************TÍTULOS PAGINAS MARCAS************/ .title_brand{ text-align: left; color: #000000; font-size: 30pt; text-shadow: 2px 2px 4px rgb(0 0 0 / 30%); } /*********************************containers-wallbox***********************************************/ /***** SLIDER em PC *****/ @media (min-width: 1025px) { .containerimg-moveis { display: none; } .containerimg { display: block; } }} /***** SLIDER em DISP. MÓVEIS *****/ @media (max-width: 650px) { .containerimg-moveis { display: block; } .containerimg { display: none; } }} /*************************LIVING NOW - LAYERS SOBREPOSTOS***************/ /* Container holding the image and the text -pc*/ @media (min-width: 1025px) { .containerimg { position: relative; overflow-x: visible; display: block; background-size: cover; background-position: center center; margin-inline: -740px; margin-bottom:-40px; overflow: hidden; }} /********botão legrand*****/ /*border cinza*/ .link_leg { text-transform: uppercase; line-height: 1.25rem; font-size: 1rem; font-weight: 700; display: inline-block; color: #3C3535; margin: 6px; padding: .875rem 1.5rem; border: 1px solid #3C3535; transition: opacity 400ms ease-in-out 600ms,transform 400ms ease-in-out 600ms,box-shadow 100ms ease-in-out 0ms,-webkit-transform 400ms ease-in-out 600ms;} /*border branca*/ .link_leg_b { text-transform: uppercase; line-height: 1.25rem; font-size: 1rem; font-weight: 700; display: inline-block; color: #fff; margin: 6px; padding: .875rem 1.5rem; border: 1px solid #fff; transition: opacity 400ms ease-in-out 600ms,transform 400ms ease-in-out 600ms,box-shadow 100ms ease-in-out 0ms,-webkit-transform 400ms ease-in-out 600ms;} /****TEXTOS****/ /* Top left text */ .top-lefttxt { position: absolute; top: 45%; left: 68%; text-align: justify; text-justify: inter-word; transform: translate(-50%, -45%); line-height:1.3; font-size: 18px; color: #fff; } /*** Top right text *****/ .top-righttxt { position: absolute; top: 45%; right: 68%; text-align: justify; transform: translate(50%, -45%); line-height:1.3; font-size: 18px; color: #fff; } /*Texto centro*/ .top-cttxt { position: absolute; top: 15%; left: 350px; right: 450px; text-align: center; line-height:1.3; font-size: 18px; color: #fff; } /* Container holding the image and the text -pc*/ @media (min-width: 1025px) { .containerimg { position: relative; overflow-x: visible; display: block; background-size: cover; background-position: center center; margin-inline: -740px; margin-bottom:-40px; overflow: hidden; }} .containerimg::after{ content: none;} .containerimg::before{ content: none;} /* Container holding the imagepng em cima da imagem de topo -pc */ @media (min-width: 1025px) { .containerimgpng { position: relative; width: 100vw; overflow-x: visible; text-align: right; display: block; margin-left: -440px; /*margin-left: -160px;*/ margin-top:-100px; overflow: hidden; }} /* Container holding the image and the text -pc*/ @media (min-width: 1025px) { .containerimgpng1 { position: relative; overflow-x: visible; display: block; background-size: cover; background-position: center center; margin-inline: -340px; margin-bottom:-40px; margin-top:-100px; overflow: hidden; }} .containerimg::after{ content: none;} .containerimg::before{ content: none;} @media all and (max-width:800px) /*800px for tablets and phones.*/ { .top-cttxt , .top-lefttxt , .top-righttxt { all:unset; padding-top:10px; height:100%; color: #000000; display: block; float:none; width: 100%; text-align: center !important; margin:3px !important; } } @media all and (max-width:800px) { .link_leg_b span{ all:unset; color: #bdbdbd !important; margin: 6px; padding: .875rem 1.5rem; border: 1px solid #3C3535;} } /**** CARROSSEL FABRICANTES ****/ .nop-jcarousel.manufacturer-grid { margin: 0 0 0 0; /* margin por defeito é 50 */ padding: 0 0 0 0; /* padding por defeito é 50 */ background-color: #fff; /* none; */ width: 100%; } /*********************************SLIDERS***********************************************/ /***** SLIDER em PC *****/ @media (min-width: 1025px) { .theme-slider-pt-moveis { display: none; } .theme-slider-pt-pc { display: block; } } /***** SLIDER em DISP. MÓVEIS *****/ @media (max-width: 1024px) { .theme-slider-pt-moveis { display: block; } .theme-slider-pt-pc { display: none; } } /******************* 2 COLUNAS DESIGUAIS QUE FLUTUAM LADO A LADO ***************/ .column2a { float: left; padding: 5px; } .left2a { width:60%; } .right2a { width: 30%; } .row2a:after { content: ""; display: table; clear: both; } @media screen and (max-width: 650px) { .column2a{ text-align: center; width: 100%; }} /******************* 2 COLUNAS DESIGUAIS QUE FLUTUAM LADO A LADO 70 e 30 ***************/ .containeraa{ display:flex; } .column-1 { flex-shrink: 0; /* shrinks to 0 to apply 70% width*/ flex-basis: 70%; /* sets initial width to 70% */ } .boxaa { background-color: rgb(221, 225, 225); padding: 20px; border-radius: 2px; border: none; margin: 10px; } @media only screen and (max-width: 900px) { .containeraa { /* it place the items in vertical direction */ flex-direction: column; } .boxaa { margin: 0 0 1rem; } } /******************* 2 COLUNAS DESIGUAIS QUE FLUTUAM LADO A LADO 30 e 70 ***************/ .containeraab{ display:flex; } .column-3 { flex-shrink: 0; /* shrinks to 0 to apply 70% width*/ flex-basis: 30%; /* sets initial width to 70% */ } .boxaab { background-color: rgb(245, 215, 160); padding: 10px; border-radius: 12px; border: 2px solid rgb(116, 113, 113); margin: 1rem; box-shadow: 1px 1px 1px #000; } @media only screen and (max-width: 900px) { .containeraab { /* it place the items in vertical direction */ flex-direction: column; } .boxaab { margin: 0 0 1rem; } } /*******************efeito zoom-tilt***************************************/ .zoom-tilt { -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .zoom-tilt:hover { -webkit-transform:rotate(15deg) scale(1.3); -moz-transform:rotate(15deg) scale(1.3); -ms-transform:rotate(15deg) scale(1.3); -o-transform:rotate(15deg) scale(1.3); transform:rotate(15deg) scale(1.3); } /************3 colunas iguais*/ .columna { float: left; width: 33.33%; } /* Clear floats after the columns */ .rowa:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .columna { text-align: left; width: 100%; } } /************6 colunas iguais*/ .c6 { float: left; width: 16%; padding: 3px; } /* Clear floats after the columns */ .rowc6:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .rowc6 { text-align: left; width: 100%; } } /*******************efeito float***************************************/ .float { -webkit-transition:all .4s ease-out; -moz-transition:all .4s ease-out; -ms-transition:all .4s ease-out; -o-transition:all .4s ease-out; transition:all .4s ease-out; } .float:hover { -webkit-transform:translate(0px,-10px); -moz-transform:translate(0px,-10px); -ms-transform:translate(0px,-10px); -o-transform:translate(0px,-10px); transform:translate(0px,-10px); } /****pôr imagem atrás de texto**********/ .imgback{ position: absolute; left: 0px; top: 30px; z-index: -1; } /****fundo 100% imagem***********/ .fundo100img{ width: 100vw; overflow-x: visible; display: block; margin-left: -80px; z-index:-1; margin-bottom:-60px; } /****fundo 100% imagem***********/ .fundoimg{ margin: 0; max-height: 75vh; width: 100%; } /* fundo cor colunas gewiss*/ .jgw{ background-color: #2f2d2e; margin:0; padding:10px 10px 14px 10px; line-height:1.3; } /* 2 colunas lado a lado sem padding-ficam sem espaço entre elas e mesma altura*/ . column-toolsg-container { display: table-cell; width: 100%; position: relative; } .column-toolsg{ float: left; width: 50%; padding:0; } /* Clear floats after the columns */ .row-toolsg:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column-toolsg { width: 100%; } } /************5 colunas iguais*/ .c5 { float: left; width: 19%; padding:2px; } /* Clear floats after the columns */ .rowc5:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .c5 { text-align: center; width: 100%; } } .zoom_01 { padding: 0; transition: transform .5s; /* Animation */ width: 73%; margin: 0 auto; } .zoom_01:hover { transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ } /***************************************************/ .master-wrapper-content { position: relative; margin: 0 auto; z-index: 0; } /************ rectangulo semi transparente*/ .semi{ background: rgba(73, 199, 237, 0.3); height: 55px; width: 60%; text-align: left; padding: 15px; line-height:1; } /*CABEÇALHO COVID */ .covid{ background-image: url('https://www.fegime.pt/images/uploaded/cc191.png'); height:300px; background-color: #030c29; height:350px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; line-height:1.2; padding-left:80px; /*background-size: 100% 100%; display: block; line-height:1.1; padding:0; margin:0;*/ } .fundocovid{ position: relative; background-size: cover; background-color: #b0b0b0; margin: 0 0 0 0; width: 100%; } /*****************************CABEÇALHO COVID *******************************************/ .protegcov{ background-image: url('https://www.fegime.pt/images/uploaded/COVID19/PROTCOVID.png'); height:500px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; line-height:1.5; /*background-size: 100% 100%; display: block; /*line-height:1.3;*/ padding: 10px; margin-bottom: -20px; } .fundocv{ position: relative; background-size: cover; background: #acacac; margin: 0; padding-bottom: 0; width: 100%; } .fundocv:before { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #b0b0b0; text-indent: -9999px; font-size: 0; } .fundocv:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 50%; background: #b6b6b6; text-indent: -9999px; font-size: 0; } .fundocv:before{ right: 100%; } .fundocv:after{ left: 100%; } /*****************************CABEÇALHO Eficiencia elétrica *******************************************/ .efec{ background-image: url('https://www.fegime.pt/images/uploaded/energ/efec.png'); height:500px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; line-height:1.5; /*background-size: 100% 100%; display: block; line-height:1.3; padding: 0; margin:0;*/ } /*FUNDO SIGNIFY*/ .fundosig{ position: relative; background-size: cover; background-color: #171b24; margin: 0 0 0 0; width: 100%; } .fundosig:before, .fundosig:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 50%; background-color: #171b24; text-indent: -9999px; font-size: 0; } .fundosig:before{ right: 100%; } .fundosig:after{ left: 100%; } /*fundo com imagem*/ .sigim{ background-image: url('https://www.fegime.pt/images/uploaded/signify_p/p.png'); height:500px; line-height:1.5; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .sigtxt{ text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } /*fundos inteiros - padrao*/ .fundo2{ position: relative; background-size: cover; background: #010206; margin: 0; padding-bottom: 0; width: 100%; } .fundo2:before, .fundo2:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; /*width: 100%;*/ background: #010206; text-indent: -9999px; font-size: 0; } .fundo2:before{ right: 100%; } .fundo2:after{ left: 100%; } /***fundo da cor que se pretender - colocar style= "background-color: #xxxxxxx;" ***/ .fundo-color{ position: relative; background-size: cover; margin: 0; padding-bottom: 0; width: 100%; } .fundo-color:before, .fundo-color:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 50%; text-indent: -9999px; font-size: 0; } .fundo-color:before{ right: 100%; } .fundo-color:after{ left: 100%; } /************************************CABEÇALHO E PÁGINA ELECTRO-TOOLS*************************************/ .elec{ background-image: url('https://www.fegime.pt/images/uploaded/electrotools/electrotools-azul.jpg'); height:600px; background-size: cover; } /**** texto da primeira imagem*****/ .centeredtools { position: absolute; top: 63%; left: 45%; line-height: 1.2; transform: translate(-50%, -50%); } @media (max-width: 1024px) { .centeredtools { position: absolute; top: 55%; left: 40; line-height: 1.2; transform: translate(-50%, -50%); }} /*fundos inteiros - solum-claro*/ .fundo_sl_lg { position: relative; background-size: cover; background: #f0f0d7; margin-right: auto; margin-left: auto; margin-bottom: 0; padding-bottom: 0; width: 100%; } .fundo_sl_lg:before, .fundo_sl_lg:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #f0f0d7; text-indent: -9999px; font-size: 0; } .fundo_sl_lg:before{ right: 100%; } .fundo_sl_lg:after{ left: 100%; } /*fundo solum verde**/ .fundo_sl { position: relative; background-size: cover; background: #1bcfc9; margin-right: auto; margin-left: auto; margin-bottom: 0; padding-bottom: 0; width: 100%; } .fundo_sl:before, .fundo_sl:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #1bcfc9; text-indent: -9999px; font-size: 0; } .fundo_sl:before{ right: 100%; } .fundo_sl:after{ left: 100%; } /*fundos inteiros - cinza wallbox*/ .fundo_w { position: relative; background-size: cover; background: #eceff1; margin-right: auto; margin-left: auto; margin-bottom: -30px; padding-bottom: 0; width: 100%; } .fundo_w:before, .fundo_w:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #eceff1; text-indent: -9999px; font-size: 0; } .fundo_w:before{ right: 100%; } .fundo_w:after{ left: 100%; } /*fundos inteiros - preto*/ .fundo_bl { position: relative; background-size: cover; background: #000000; margin-right: auto; margin-left: auto; margin-bottom: 0; padding-bottom: 0; width: 100%; } .fundo_bl:before, .fundo_bl:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #000000; text-indent: -9999px; font-size: 0; } .fundo_bl:before{ right: 100%; } .fundo_bl:after{ left: 100%; } /*fundos inteiros - azul escuro fegime*/ .fundofeg { position: relative; background-size: cover; background: #1a2b68; margin-right: auto; margin-left: auto; margin-bottom: 0; padding-bottom: 0; width: 100%; } .fundofeg:before, .fundofeg:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 50%; background: #1a2b68; text-indent: -9999px; font-size: 0; } .fundofeg:before{ right: 100%; } .fundofeg:after{ left: 100%; } /*fundos inteiros - azul escuro*/ .fundo { position: relative; background-size: cover; background: #00144b; margin-right: auto; margin-left: auto; margin-bottom: 0; padding-bottom: 0; width: 100%; } .fundo:before, .fundo:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 50%; background: #00144b; text-indent: -9999px; font-size: 0; } .fundo:before, .fundo:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #00144b; text-indent: -9999px; font-size: 0; } .fundo:before{ right: 100%; } .fundo:after{ left: 100%; } /********************fundos inteiros - azul escuro**************************/ .fundo_a { position: relative; background-size: cover; background: #1a2b68; bottom: -30px; margin-top: 0; padding-top: 0; margin-right: auto; margin-left: auto; margin-bottom: auto; padding-bottom: 0; width: 100%; } .fundo_a:before, .fundo_a:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #1a2b68; text-indent: -9999px; font-size: 0; } .fundo_a:before{ right: 100%; } .fundo_a:after{ left: 100%; } /********************fundos inteiros - cinza**************************/ .fundo1 { position: relative; background-size: cover; background: #f5f5f5; bottom: -30px; margin-top: 0; padding-top: 0; margin-right: auto; margin-left: auto; margin-bottom: auto; padding-bottom: 0; width: 100%; } .fundo1:before, .fundo1:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #f5f5f5; text-indent: -9999px; font-size: 0; } .fundo1:before{ right: 100%; } .fundo1:after{ left: 100%; } /* Create two equal columns that floats next to each other */ .column-tools { float: left; width: 50%; padding: 10px; } /* Clear floats after the columns */ .row-tools:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column-tools { width: 100%; } } /******************** para energia - parágrafo com cor de fundo que se queira e padding***********************/ .pad10{ width: 100%; padding: 15px; } /* Create three unequal columns that floats next to each other */ .column-3 { float: left; padding: 10px; } .left, .right { width: 25%; } .middle { width: 50%; } /* Clear floats after the columns */ .row-3:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .column-3 { width: 100%; } } /* Create three equal columns that floats next to each other */ .column-3a { float: left; text-align: left; padding: 1px; } .left, .right { text-align: left; width: 33%; } .middle { text-align: left; width: 33%; } /* Clear floats after the columns */ .row-3a:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .column-3a { text-align: left; width: 100%; } } /* 4 COLUNAS IGUAIS QUE FLUTUAM LADO A LADO */ .column-4 { float: left; padding: 2px; margin: 2px; } .left-4 { width: 24.5%; } .right-4 { margin-right: 0; width: 24.5%; } .middle-4{ width: 24.5%; } /* Clear floats after the columns */ .row-4:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .column-4 { width: 100%; } } /************3 colunas iguais*/ .columna { float: left; width: 33.33%; } /* Clear floats after the columns */ .rowa:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .columna { text-align: left; width: 100%; } } /********************* BOTÃO PAG EFICIêNCIA ENERGÉTICA *******************/ /*button.button-aa { border-radius: 8px; background-color: #0e2d6d; border: none; color: #fff; text-align: center; font-size: 14px; padding: 13px; width: 160px; transition: all 0.5s; cursor: pointer; margin: 12px; box-shadow: 0 8px 15px -6px rgba(0, 0, 0,.7); } button.button-aa{ cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } button.button-aa:after { content: '»'; position: absolute; opacity: 0; top: 11px; right: 20px; transition: 0.5s; } button.button-aa:hover{ padding-right: 24px; padding-left:8px; } button.button-aa:hover:after { opacity: 1; right: 10px; } button.button-aa a:link { color: #fff; font-weight: normal; } button.button-aa a:visited{ color: #fff; font-weight: normal; } button.button-aa a:hover{ color: #fff; font-weight: normal; } button.button-aa a:active{ color: #fff; font-weight: normal; }*/ /********************************************************/ .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 30px 5px 5px 5px; text-align: center; background-color: #49c7ed; color: white; height: 150px; vertical-align: middle; line-height:1.8; } /******************* CAMPANHA PHILIPS 2020 - COLUNAS & BOTÕES***************/ /***** imagem em PC *****/ @media (min-width: 1025px) { .imagem-moveis { display: none; } .imagem-pc { display: block; }} /***** imagem em DISP. MÓVEIS *****/ @media (max-width: 1024px) { .imagem-moveis { display: block; } .imagem-pc { display: none; }} /*****************texto**************/ .container2020 { position: relative; text-align: center; color: white; } .centered2020 { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); } .centered2020p { position: absolute; top: 63%; left: 50%; transform: translate(-50%, -50%); } @media (max-width: 1024px) { .centered2020p { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); }} .centered2020texto { position: absolute; top: 50%; left: 40%; width: fit-content; transform: translate(-50%, -50%); } /***2 colunas****/ .column2p { float: left; width: 100%; padding: 5px; } .left2p { width: 80%; padding: 5px; } .right2p { width: 20%; padding: 5px; } /* Clear floats after the columns */ .row2p:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .column2p { text-align: left; width: 100%; } } /****************** CAMPANHA PHILIPS 2019 ******************************************/ /* duas colunas fundo branco*/ .column-toolsph1 { float: left; line-height: 1.3; width: 50%; } /* Clear floats after the columns */ .row-toolsph1:after { content: ""; display: table; clear: both; } /* Responsive layout */ @media screen and (max-width: 600px) { .column-toolsph1 { width: 100%; } } /*fundos inteiros - azul CLARO philips*/ .phfundo { position: relative; background-size: cover; background: #B3C8E6; margin-top: 0; padding-top: 0; margin-right: auto; margin-left: auto; margin-bottom: auto; padding-bottom: -5px; width: 100%; } .phfundo:before, .phfundo:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #B3C8E6; text-indent: -9999px; font-size: 0; } .phfundo:before{ right: 100%; } .phfundo:after{ left: 100%; } /*NOTIFICAÇÃO DE SUCESSO*/ .bar-notification.success { background: #49c7ed; } /*PERMITE CENTRAR A UL ERA: padding: 0 10px;*/ .topic-block-body { padding: 0 0px; line-height: 20px; font-size: 14px; color: #888; } /************EFEITO CAIXINHA LOGOS**************/ div.gallery { margin: 5px; border: 1px solid #ccc; display: inline; flex-direction: row; width: 150px; } div.gallery:hover { border: 1px solid #49c7ed; box-shadow: inset 0 0 0 1px #f7f7f7; } div.gallery img { width: 100%; height: auto; } @media screen and (max-width: 600px){ .gallery { align: inline; width: 70%; } } .clearfix:after { content: ""; display: table; clear: both;} /*SOCIAL FEED*/ .social-feed, .feeds-page .page-body { position: relative; margin-top: 3px; padding: 60px 0; background: #b3b9bf; } .social-feed .title { padding-bottom: 22px; border-bottom: 1px solid #eee; text-transform: uppercase; text-align: center; font-size: 24px; color: #0E2D6D; } .feeds-page .post-description, .social-feed .post-description { margin: 15px 0; color: #666; font-size: 14px; line-height: 20px; text-align: left; } .social-feed .post-text a, .social-feed .post-description a { color: #49c7ed; } .social-feed .post-text a:hover { color: #0e2d6d; } .social-feed .post-description a:hover { text-decoration: underline; } .social-feed .sub-title-link { padding: 10px 12px; border-radius: 3px; background: #49c7ed; color: #fff; } .social-feed .sub-title-link a:link { padding: 10px 12px; border-radius: 3px; background: #49c7ed; color: #fff; } .social-feed .sub-title-link a:hover { padding: 10px 12px; border-radius: 3px; background: #0E2D6D; color: #fff; } .feeds-page .feeds-post-item, .social-feed .post-item { position: relative; margin: 0 0 30px; padding: 15px 10px; background: #fff; border-bottom: 3px solid #49c7ed; } /********* link passarinho *******************/ .feeds-page .post-link-btn:after, .social-feed .post-link-btn::after { display: block; font-family: prisma; font-size: 20px; color: #49c7ed; } .social-feed .post-link-btn:hover { opacity: .7; } @media (min-width: 1025px){ .feeds-page .feeds-nav-item.active:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #49c7ed; }} /*********BOTAO RADIUS******************/ /*botão extra-efeito hover radius*/ .button-td, .button-a { transition: all 100ms ease-in; } .button-td:hover, .button-a:hover { background: #49c7ed !important; border-color: #49c7ed !important; } /*********BOTAO UNEX*****************/ /*botão extra-efeito hover radius*/ .button-tdun, .button-un { transition: all 100ms ease-in; } .button-tdun:hover, .button-aun:hover { background: #575756 !important; border-color: #575756 !important; } /***************************** efeito border imagens *****************************/ .border-image{ border: 1px solid #9a9a9a;} /************************** efeito border imagens com zoom *****************************/ /* efeito border imagens*/ .mg-image1 img { -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; max-width: 100%; border: 1px solid #9a9a9a; } .mg-image1:hover img { -webkit-transform:scale(1.10); -moz-transform:scale(1.10); -ms-transform:scale(1.10); -o-transform:scale(1.10); transform:scale(1.10); } .mg-image1 { overflow: hidden; max-width: 100%; } /************************************efeito sombra***************************************/ div.sombra { width: 150px; height: auto; border: 1px solid #ccc; -webkit-box-shadow: 9px 9px 30px -18px rgba(0,0,0,0.64); -moz-box-shadow: 9px 9px 30px -18px rgba(0,0,0,0.64); box-shadow: 9px 9px 30px -18px rgba(0,0,0,0.64); } /*div.gallery { border: 1px solid #ccc; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } box-sizing: border-box;{ } .responsive { padding: 0 6px; float: left; width: 24.99999%; } @media only screen and (max-width: 700px) { .responsive { width: 49.99999%; margin: 6px 0; } } @media only screen and (max-width: 500px) { .responsive { width: 100%; } } .clearfix:after { content: ""; display: table;grid clear: both;} */ /*******************EFEITO ZOOM******/ .zoom { transition: transform .4s; /* Animation */ -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); width: 250px; height: 250px; padding: 3px; margin: 10px; } @media screen and (max-width: 31.5em){ .zoom { padding: 10px 10px 0 10px; } } .zoom1 { transition: transform .4s; /* Animation */ -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); width: 250px; height: 250px; padding: 3px; margin: 10px; } .zoom2 { transition: transform .4s; /* Animation */ -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); width: 250px; height: 250px; padding: 3px; margin: 10px; } .zoom3 { transition: transform .4s; /* Animation */ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); width: 500px; height: 500px; } .zoom4 { transition: transform .4s; /* Animation */ -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); width: 250px; height: 250px; padding: 3px; margin: 10px; } .zoom:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); position: relative; margin: 10px; padding: 3px; z-index: 1000; } .zoom1:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); position: relative; margin: 10px; padding: 3px; z-index: 1000; } .zoom2:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); position: relative; margin: 10px; padding: 3px; z-index: 1000; } .zoom3:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); position: relative; margin: 10px; padding: 3px; z-index: 1000; } .zoom4:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); position: relative; margin: 10px; padding: 3px; z-index: 1000; } /**************** REMOVER VISIBILIDADE DAS TAGS ****************** */ /*remover tags store locator*/ .shops-item .tags-label, .shop-page .tags-label { display: none;} .shops-item .tag-item, .shop-page .tag-item { display: none;} /* fim tags*/ /**************** COR DO ENVELOPE NA COLUNA DE CONTACTOS****************** */ .footer-middle li.email:before { color: #0e2d6d; } /*Cor do texto após se ter enviado um email*/ .contact-page .result, .email-a-friend-page .result { font-size: 14px; color: #0e2d6d; } /* /*************BOTÃO DO LINKEDIN***************** */ .social-sharing .vimeo:after { content: '\6c'; }/* /******************LOGOS NO FOOTER*****************/ .fegime-foot { padding-bottom: 5px;} @media (max-width: 1024px) { .fegime-foot { text-align:center; padding-left:0; padding-bottom: 5px; } } /********************************************************************************/ /**************************************** LOGOTIPO*****************************/ /********************************************************************************/ /*MARGEM DO LOGO NO TOPO*/ .header-logo { text-align: left; margin-left: -20px; } /* Margem logo em dispositivos móveis*/ @media all and (max-width: 1024px) { .header-logo { text-align: left; margin-left: 7px } } /******************************************** IMAGEM BACKGROUNG DO HEADER *****************************/ .master-header-wrapper { width: 100%; background: url(../../Content/img/0000207.jpg); background-repeat: no-repeat; background-size: contain; } /************************************** ESPAÇO ENTRE HEADER E MENUS *********************************/ @media (min-width: 1025px){ .home-page-body .page-body > div { margin-right: auto; margin-left: auto; margin-bottom: 0; padding-bottom: 0; }} /*********************************** RETIRAR ICONES DA LOJA DO HEADER **********************************/ .ico-wishlist{ visibility: hidden; } .shopping-cart-link{ visibility: hidden; } .responsive-nav-wrapper > div:hover > span, .responsive-nav-wrapper > div:hover > a { background: rgba(255,255,255,0); } /*********************************** FIXES ************************************/ /*Espaço entre header e menus*/ .home-page-body .master-header-wrapper { background-color: #FFF; } @media (min-width: 1920px) { .master-header-wrapper { background-size: cover !important; } } /*********************************** PONTO 5 Retirar barra de pesquisa ************************************/ .header .search-box { display:none!important; } .master-header-wrapper { margin: 0; } .home-page-body .master-header-wrapper { margin-bottom: 0; } @media (min-width: 1025px) { .header .search-box { display:none; } } @media (max-width: 1024px) { .store-search-box { display: none; } } /*********************************** PONTO 9 Alinhamento de Margens e topos em dispositivos móveis ************************************/ .header-wrapper { padding: 10px; } .page-body { padding: 10px; /* estava 10px*/ } /*margem sob slider*/ .master-wrapper-content { margin: 5px auto; } /***************************************************************************************************************/ /* PONTO 14 - Alargar hover */ /***************************************************************************************************************/ @media (max-width: 1024px) { .header-menu > ul li.has-sublist > a { width: 270px; } .header-menu > ul li > a { width: 320px; } } /*********************************** PONTO 13 Alargar a área de hover a todos os botões do submenu nos dispositivos móveis a toda a largura do botão ************************************/ @media (max-width: 1024px) { .header-menu > ul li.has-sublist > a { width: 255px; } .header-menu > ul li > a { width: 320px; } } /***********************************************************************************/ /*********************************************** UL *********************************************/ /********************************************************************************/ /*UL CENTRAR*/ .topic-page ul, .post-body ul, .custom-tab ul { margin: 0 0 10px 0; padding: 0 0 0 0; list-style: disc; } @media screen and (max-width: 31.5em){ .grid { padding: 10px 10px 0 10px; } } .grid { padding: 20px 20px 0 20px; max-width: 1300px; margin: 0 auto; list-style: none; text-align: center; } .grid li { display: inline-block; max-width: 33%; margin: 0; padding: 10px 10px 0 10px; text-align: left; position: relative; margin-bottom: 9px; } @media (min-width: 1025px){ .header-wrapper { margin: 0 auto; padding: 15px 0 25px 0; width: 1000px; -webkit-transition: all .3s; transition: all .3s;} } /*UL CENTRAR - para usar com imagens maiores*/ .topic-page ul, .post-body ul, .custom-tab ul { margin: 0 0 10px 0; padding: 0 0 0 0; list-style: disc; } @media screen and (max-width: 31.5em){ .grid2 { padding: 10px 10px 0 10px; } } .grid2 { padding: 20px 20px 0 20px; max-width: 1300px; margin: 0 auto; list-style: none; text-align: center; } .grid2 li { display: inline-block; max-width: 50%; margin: 0; padding: 10px 10px 0 10px; text-align: left; position: relative; margin-bottom: 9px; } /*********************************** PONTO 20 Ajustes aos carrosseis da home page que em ambiente móvel (tablet) ou landscape, não aparece as letras ************************************/ .nop-jcarousel.category-grid .item-box { position: relative; } .nop-jcarousel.category-grid .item-box .title { padding: 10px 5px; position: absolute; left: 0; right: 0; bottom: 0; } /***************************************************************************************************************/ /*********************************************** MEGA MENU ***************************************************/ /************************************************************************************************************/ /*CORES DO MENU*/ .header-menu { background-color: #ffffff; } .header-menu > ul > li:hover > a, .header-menu > ul > li:hover > span, .header-menu .sublist-wrap { background-color: #EFEFEF; } /*FUNDO DO SUBMENU*/ .header-menu .sublist-wrap { background: #EFEFEF; } .header-menu .sublist li a { display: block; padding: 11px 20px 10px; font-size: 13px; color: #0E2D6D; /* COR DA FONT DO SUBMENU*/ -webkit-transition: background .3s; transition: background .3s; } /*COR DAS FONTS DO MENU DE TOPO */ .header-menu > ul > li > a, .header-menu > ul > li > span { display: block; padding: 15px; text-transform: uppercase; font-size: 14px; color: #0E2D6D; cursor: pointer; -webkit-transition: all .3s; transition: all .3s; } /*COR DO BACKGROUND DO HOVER NO MENU*/ /*COR DA FONT NO HOVER DO MENU DE TOPO*/ .header-menu > ul > li:hover > a, .header-menu > ul > li:hover > span { background: #EFEFEF; color: #0E2D6D; /*COR DA FONT NO HOVER DO MENU DE TOPO*/ } /*COR DO BACKGROUND DO HOVER NO SUBMENU*/ /*COR DA FONT DO HOVER NO SUBMENU*/ .header-menu .sublist li:hover > a { background-color: #cccccc; color:#0e2d6d;} /**********************************************************************/ /********************** CARROCEIS***************************************/ /***************************************************************/ /*CARROCEL FABRICANTES E VENDORS - BORDER*/ .nop-jcarousel.vendor-grid .slick-slide .picture, .nop-jcarousel.manufacturer-grid .slick-slide .picture { border: 0 solid #eee; border-left: 0; max-width: 100%; } /*CARROCEL FABRICANTES E VENDORS - espaço para títulos, VALOR POR DEFEITO DA FONT É 24*/ .nop-jcarousel .carousel-title { position: relative; margin: 0 0 0; text-transform: uppercase; text-align: center; font-size: 2px; color: #444; } /*CARROCEL FABRICANTES E VENDORS - PADDING, POR DEFEITO É 20*/ @media (min-width: 1025px){ .manufacturer-grid, .vendor-grid, .recently-added-products-page .product-grid { padding: 15px; }} /*CARROCEL FABRICANTES E VENDORS - MARGIN, POR DEFEITO É 50------------------------------------*/ .nop-jcarousel.vendor-grid, .nop-jcarousel.manufacturer-grid { margin: 0 0 10px 0; background: none; } /*CARROCEL FABRICANTES E VENDORS - padding, POR DEFEITO É 50*/ .nop-jcarousel.vendor-grid, .nop-jcarousel.manufacturer-grid { margin: 0; padding: 0 0 0 0; background: none; } /******************************************************************************************/ /******************************** BOTÕES ************************************************/ /***************************************************************************************/ /*COR BOTÃO FORMULÁRIO*/ .buttons .button-1{ background-color: #0E2D6D; } .button-1 .button-1 { transition: all 100ms ease-in; } .button-1:hover { background: #49C7ED; !important; } /*alterar botão do formulário de contacto*/ .contact-page.button-1{ background-color: #49C7ED; } /***********************************************************************************************/ /*************************************** TÍTULOS ******************************************/ /*************************************************************************************/ /*TÍTULO DA PÁGINA*/ .page-title { text-transform: uppercase; margin: 20px; padding: 20px; text-align: center; font-size: 12px; font-weight: normal; color: #656666; } /*TÍTULO DA PÁGINA*/ .page { min-height: 80px; text-align: center; } .page-title { margin: 5px 0 5px; padding: 8px 15px; } .page-title h1 { text-transform: uppercase; text-align: left; font-size: 12px; font-weight: bold; color: #0E2D6D; } /* TÍTULO DA HOMEPAGETEXT----/--margin: 0 auto 20px--/-- padding: 30px 0--------*/ /* HOME PAGE */ .home-page .topic-block { margin: 0 auto 0; padding: 0 0 0 0; text-align: center; } /* TÍTULO BLOCO H2 ***********************/ .topic-block-title { margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; text-transform: uppercase; } .topic-block-title h2 { font-size: 24px; } .home-page .topic-block-title h2 { font-weight: normal; font-size: 24px; color: #0E2D6D; margin-top: 25px; } /************************************************************************************************/ /******************************************** HOME PAGE ********************************************/ /**************************************************************************************************/ /*margem dA HOME PAGE POR DEFEITO É MARGIN: 0 0 10PX*/ .home-page .topic-block { margin: 0 0 0 0; padding: 0 0; } /* LINKS NA HOMEPAGE*/ .topic-block-body a:link { color: #0E2D6D; font-weight:bold; text-decoration:none; } .topic-block-body a:visited { color: #0E2D6D;} .topic-block-body a:hover { color: #49C7ED;} .topic-block-body a:active { color: #0E2D6D;} /********************************************************************************************/ /****************************************PÁGINAS DE TÓPICOS***********************************/ /*********************************************************************************************/ /* MARGENS FUNDO PÁGINAS TÓPICOS */ @media (min-width: 1025px){ .center-1 { margin-bottom: 30px; } } .center-1 { margin: 0 0 20px 0; } /* LINKS NAS PÁGINAS DE TÓPICOS */ .topic-page a:link { color: #0E2D6D; font-weight:bold; text-decoration:none; } .topic-page a:visited { color: #0E2D6D;} .topic-page a:hover { color: #49C7ED;} .topic-page a:active { color: #0E2D6D;} /*******************************************************************************************/ /******************************** PÁGINAS DE FABRICANTES *********************************/ /********************************************************************************************/ /*FUNDO DAS PÁGINAS VENDOR E MANUFACTURER*/ .vendor-description .manufacturer-description { margin-bottom: 20px; padding: 20px; background: #ffffff; } .vendor-item .picture, .manufacturer-item .picture { position: relative; border: 1px solid #ddd; } .vendor-item .title, .manufacturer-item .title { height: 0; /*era auto*/ text-align: center; } .vendor-description { margin-bottom: 20px; padding: 20px; background: #ffffff; } /* MARGENS FUNDO PÁGINAS MANUFACTERES*/ @media (min-width: 1025px){ .center-2 { margin-bottom: 10px; } } .center-2 { margin: 0 0 5px 0; } /*LINKS NAS PÁGS DE FABRICANTES*/ .manufacturer-description a:link{ color: #0E2D6D; font-weight:bold; text-decoration:none; } .manufacturer-page a:visited { color: #0E2D6D;} .manufacturer-page a:hover { color: #49C7ED;} .manufacturer-page a:active { color: #0E2D6D;} /*FUNDO DA PAG DE FABRICANTES-MARGEM*/ .manufacturer-grid, .vendor-grid, .recently-added-products-page .product-grid { padding: 10px; background: #ffffff;/*#b3b9bf*/ } .manufacturer-page .product-grid, .vendor-page .produt-ct-grid { margin:0 0 0 0; padding: 5px; background: #b3b9bf; } /*COR DE BACKGROUND NA PÁG FABRICANTES*/ .manufacturer-description { margin-bottom: 20px; padding: 20px; background: #fff; } /* COR SOBRE LISTA DE FORNECEDORES*/ .manufacturer-item .picture .hover { background-color: #d0dfe3;/*#EFEFEF*/ } /* font botão lista de fornecedores*/ .manufacturer-item .picture .hover span { font-size: 18px; color: #0E2D6D; } /* seta ver todos link lista de fornecedores*/ .block .view-all a:after { content: '\e925'; display: inline-block; margin-left: 10px; font-family: prisma; font-size: 10px; color: #0e2d6d; vertical-align: middle; -webkit-transition: all .3s; transition: all .3s; } .block .view-all a:hover:after { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); color: #49c7ed; } /*SETA DE TODOS NO FUNDO DA PÁG FABRICANTES*/ .block .view-all a:after { color: #0E2D6D; } block .view-all:hover::after { color: #49C7ED; } /*LINKS NAS PÁGS DE FABRICANTES*/ .manufacturer-description a:link{ color: #0E2D6D; font-weight:bold; text-decoration:none; } .manufacturer-page a:visited { color: #0E2D6D;} .manufacturer-page a:hover { color: #49C7ED;} .manufacturer-page a:active { color: #0E2D6D;} /*************************************************************************************************/ /***************************************** PÁGINAS DE VENDORS****************************************/ /*****************************************************************************************************/ /* LINKS NAS PÁGINAS DE TÓPICOS VENDORS */ .vendor-description a:link { color: #0E2D6D; font-weight:bold; text-decoration:none; } .vendor-description a:visited { color: #0E2D6D;} .vendor-description a:hover { color: #49C7ED;} .vendor-description a:active { color: #0E2D6D;} /******************************************************************************************************/ /******************************************** STORE LOCATOR ****************************************/ /*****************************************************************************************************/ /* COR DA FONT DO TEXTO SOB O MAPA NA HOME PAGE*/ .anywhere-page-map .map-controls span { color: #0E2D6D; } /* LINKS DO STORE LOCATOR*/ .shop-name a:link { color: #0E2D6D; text-decoration:none; } .shop-name a:visited { color: #0E2D6D;} .shop-name a:hover { color: #49C7ED;} .shop-name a:active { color: #0E2D6D;} /* LINKS DOS DETALHES DO STORE LOCATOR*/ .shop-info a:link { color: #0E2D6D; font-weight:normal; text-decoration:none; } .shop-info a:visited { color: #0E2D6D;} .shop-info a:hover { color: #49C7ED;} .shop-info a:active { color: #0E2D6D;} /*BOTÃO DE PESQUISA DO GOOGLE NO STORE LOCATOR */ button#searchForFilteredShops { background: #49C7ED; font-size: 14px; line-height: 15px; text-transform: uppercase; color: #fff; border: 0; padding: 10px 21px; } /*TÍTULO STORE LOCATOR*/ .anywhere-page-map .map-title { margin: 15px 0 30px; border-bottom: 1px solid #ddd; padding: 0 0 15px; font-size: 24px; color: #0E2D6D;; text-align: center; } /* STORE LOCATOR -QUADRADO DO "MAIS"*/ .shops-item .read-more { display: inline-block; background: #49C7ED; text-transform: uppercase; color: #fff; line-height: 1; padding: 11px 13px;} /*alinhamento das fotos*/ .shops-item .info-wrap { padding: 0 0 0; } /***************************************************************/ /************************** BLOG *******************************/ /****************************************************************/ /*fundo das pag do blog*/ .blog-page .post-relations { float: left; padding: 0;} .blogpost-page .category-list, .blogpost-page .related-posts-list { margin: 0 20px 20px 0; } @media (min-width: 1025px) { .blogpost-page .post-date, .blogpost-page .post-body, .blogpost-page .tags, .rich-blog-image { background-color: #fff; color: #000; } } @media (max-width: 1024px) { .blogpost-page .post-date, .blogpost-page .post-body, .blogpost-page .tags, .rich-blog-image { background-color: #fff; color: #000; } } /*FORMATAR TEXTO DE APRESENTAÇÃO RESUMO DO BLOG*/ .rich-blog-homepage .post-details { margin: 0 auto; max-width: 90%; text-align: justify; } /*home page fundo*/ .rich-blog-homepage:before { background-color: #bec4c1; } .rich-blog-homepage:after { background-color: #bec4c1; } .rich-blog-homepage { position: relative; margin: 0 0 30px; background-color: #fff; } .rich-blog-homepage .post-details { margin: 0 auto; max-width: 90%; text-align: justify; } /* Substituição lupa blog*/ .blog-search-box .search-box-button { background: #0e2d6d url(../../Content/img/lupa38_45.png) no-repeat center; } /*TÍTULO DO PLUGIN DE BLOG*/ .rich-blog-homepage .title { margin: 0 0 60px; padding: 12px 0 13px; border-bottom: 1px solid #eee; text-transform: uppercase; text-align: center; font-size: 24px; color: #0E2D6D; } /*LINKS BLOG+DETALHES seta*/ /*seta do blog aqui*/ .blog-posts .read-more:after, .news-list-homepage .view-all:after { color: #0E2D6D; } /*aqui palavra de mais */ .blog-posts .read-more:hover, .read-more:hover::after { color:#49C7ED; } .view-all:hover::after { color:#49C7ED; } /*SINAL ANTES DO VIEW_ALL DO BLOG*/ .rich-blog-homepage .view-all:before { content: '\e908'; display: inline-block; margin-right: 5px; font-family: prisma; font-size: 12px; color: #49C7ED; } /*LINKS DAS PÁGINAS DO BLOG*/ .blogpost-page .post-body a:link{ color: #0E2D6D; } .blogpost-page .post-body a:visited{ color: #0E2D6D; } .blogpost-page .post-body a:hover{ color: #49C7ED; } .blogpost-page .post-body a:active{ color: #0E2D6D; } /*LINKS DAS ETIQUETAS DO BLOG*/ .blog-page .tags a:link, .blogpost-page .tags a:link { color: #0E2D6D; } .blog-page .tags a:visited, .blogpost-page .tags a:visited { color: #0E2D6D; } .blog-page .tags a:hover, .blogpost-page .tags a:hover { color: #49C7ED; } .blog-page .tags a:active, .blogpost-page .tags a:active { color: #0E2D6D; } /**************BARRA DE FUNDO NA PÁGINA, ERA CINZA ************************/ @media (max-width: 450px){ .blogpost-page .post-footer { float: none; padding: 10px 20px 20px; width: 100%; max-width: 100%; background: #ffffff; }} @media (min-width: 769px) .blogpost-page .post-footer { float: none; padding: 10px 20px 20px; width: 100%; max-width: 100%; background: #ffffff; } /****************************************************************************************************/ /******************************************* COLUNA LATERAL ******************************************/ /**********************************************************************************************************/ /*FUNDO DA COLUNA LATERAL ESQUERDA DE CATEGORIAS E FORNECEDORES*/ .side-2 { background: #efefef; } /*TÍTULOS DA LATERAL ESQUERDA DE CATEGORIAS E FORNECEDORES*/ .block .title а, .block .title strong { position: relative; display: block; padding: 15px 20px; text-transform: uppercase; font-size: 14px; color: #0E2D6D; cursor: pointer; } /*RISCA SOB TITULOS NA COLUNA*/ .block .title { border-bottom: 1px solid #0E2D6D; } /*SETA ANTES DO ITEM DA COLUNA LATERAL ESQUERDA*/ .block .listbox li a:before { content: '\e925'; display: inline-block; margin-right: 10px; font-family: prisma; font-size: 10px; color: #0E2D6D; transition: all .3s; } /*SETA DE TOPO DA COLUNA LATERAL ESQUERDA*/ .block .title а:after, .block .title strong:after { content: '\e923'; position: absolute; top: 50%; right: 15px; width: 28px; height: 28px; background: #EFEFEF; text-align: center; line-height: 28px; font-family: prisma; font-size: 10px; color: #0E2D6D; -webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } /*RISCA NO FUNDO DA COLUNA*/ .block .listbox { display: block; border-bottom: 1px solid #0E2D6D; } /********************************************************************************************************************* ************************************* BLOCO DE NOVO REGISTO NO SITE********************************************** ***********************************************************************************************************************/ /*PARA RETIRAR O BLOCO DE NOVO REGISTO*/ .new-wrapper.register-block{ display:none; } /*PARA TER O BLOCO DE REGISTO CENTRADO -original sem a linha' margin-left*/ @media (min-width: 1025px){ .login-page .customer-blocks > div { margin-left: 25%; float: left; padding-bottom: 60px; margin-bottom: 0; width: 49.2%; align-content: space-evenly; } } /*******************************************************************************************/ /********************************************* CATEGORIAS ********************************/ /*********************************************************************************************/ /* COR DE BACKGROUND NA PÁGINA DE CATEGORIAS*/ .category-page-body .page-body { background: #ffffff; } /* FUNDO DAS CATEGORIAS NO MEGA MENU .mega-menu .row {background: #0E2D6D; }*/ /*************************************************************************************************/ /****************************** PÁGINA DE PRODUTOS *********************************************/ /***********************************************************************************/ /* ALTERAR a cor de FUNDO DA PÁGINA DO PRODUTO} .product-content-wrappper { padding: 10px 0; background: #ffffff;} */ .listbox {background-color: white;} /**************************************************** ??????????????? ******************************************/ .category-description ul, .manufacturer-description ul, .full-description ul, .topic-html-content ul, .topic-page ul, .post-body ul, .custom-tab ul { margin: 3px 0 3px; padding: 0 0 0 10px; list-style: disc; } /*START WD */ /*********************************** Ponto 7: ************************************/ .menu-search2{ color: red; cursor: pointer; background: #576b98 url(../../Content/img/search.png) no-repeat center; } /* background: #576b98 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAYAAAA6GuKaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkVEOUE0MDQ1OUUxQTExRTc4RTU4ODhGMDBCRTZFRTRFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVEOUE0MDQ2OUUxQTExRTc4RTU4ODhGMDBCRTZFRTRFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RUQ5QTQwNDM5RTFBMTFFNzhFNTg4OEYwMEJFNkVFNEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RUQ5QTQwNDQ5RTFBMTFFNzhFNTg4OEYwMEJFNkVFNEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Z3X6UAAABq0lEQVR42uyYz0rDQBCHu1oriKRoX6C3HOOxgifFFxHqzUsO4jH6GD6DBx/Aux4Vn8KDivbU9E/8BWZhWELabWJ2AzPwkW1nQ75sdzeTqgzRaVlsdVoYIi3SIi3SIi3SrZHOS4Nb0AeK6NN31cuGrP6I83JmBeMqF6hbOmRiuXzKcqlxQ6EP0lqoB+ZGTpHkB+V67MasQ9VUmmZsfczBtpFXrH0PLkCXPi+NfGML8Y6OcYGwvqlHal+CT5AY564ddY10vjP8ghTslPR7AucgBO+gBwLw40JasRFdp68ypoWVQ9fBsyErme+NzumAjjOLc3TfQ1fSMR1vLM7Rfa9cLcRVW54ZCx+2vPyiY2rvklSZ8B77hZT9EFWLUzCh9tCoL7x8jEdMYEDHIRVDXhZMUYHIgOWXIAEB5RTlE8pVik0W4hF4o8U2BSfghXITsP/fG72tNBee0SLiO8cIPPv05nJsjLAW1rVG1ISwjfQZmwJTEtfCCxJ+9e0d8YG1r10K287p74I6oXFh2zl9AL5cC2/yGNfiI1fCdRZM8g+TSIu0SIu0SLdb+k+AAQAyFFpb3YI1yAAAAABJRU5ErkJggg==) no-repeat center */ .search2-backdrop{ position: fixed; top: 75px; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 20; } .search2-bar{ position: absolute; top: 75px; width: 100%; height: 60px; background-color: #576b98; z-index: 100; left: 0; text-align: center; } .search2-input{ display: inline-block; width: 50%; height: 46px; margin: 9px 5px; border: none!important; background-color: rgba(0,0,0,.2); padding: 0 12px; vertical-align: middle; color: #EEE!important; font-size: .9rem; } .search2-input::placeholder { color: #DDD; opacity: 1; } /* Internet Explorer 10-11 */ .search2-input:-ms-input-placeholder { color: #DDD; } /* Microsoft Edge */ .search2-input::-ms-input-placeholder { color: #DDD; } .search2-submit-btn{ display: inline-block; height: 47px; width: 47px; border: none; background: #576b98 url(../../Content/img/search.png) no-repeat center; vertical-align: middle; font-size: 0; outline: 1px solid transparent; transition: all .2s ease; margin-left: 5px; } /* Ponto 11 - Centrar logo @media all and (max-width: 1024px) { .header-wrapper { display: flex; flex-direction: column; border-bottom: 1px solid #ddd; } .header { float: none; width: 100%; text-align: center; order: 1; padding: 20px 0 20px 0; } .header-logo { text-align: center; } .header-logo a img { margin-bottom: 0!important; } .header-wrapper { padding: 0; } .responsive-nav-wrapper { margin: 0; } .responsive-nav-wrapper-parent { float: none; box-shadow: 0 3px 5px rgba(0,0,0,.1); border-top: 2px solid #04112c; position: relative; } .header-links-wrapper{ top: 45px; } } @media (min-width: 481px) { .responsive-nav-wrapper { margin: 5px 0; } } /* A minha conta full width @media all and (max-width: 1024px) { .responsive-nav-wrapper { position: relative; } .personal-button { position: unset; } .header-links-wrapper { width: 100%; } .header-links li { text-align: center; padding: 5px; border-bottom: 1px solid #dedede; } .header-links li:last-child{ border: 0; } } /* .social-sharing .linkedin:after { content: url(../../Content/img/linkedin3_transp.png); } */ /***********************************************************************************/ /************************************** NOTÍCIAS **********************************/ /**********************************************************************************/ @media (min-width: 1025px) .home-page-body .page-body > div { margin-right: auto; margin-left: auto; margin-bottom: 0; padding-bottom: 10px; } /*COR DO FUNDO DA PÁGINA NO BLOCO DE NOTÍCIAS .news-list-homepage:before, .news-list-homepage:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 50%; background: #0e76b2; text-indent: -9999px; font-size: 0; }*/ /*COR DO BLOCO DE NOTÍCIAS*/ /*.news-list-homepage { position: relative; bottom: 10px; padding: 50px 10px 15px ; background: #f6f6f6; }*/ /*.news-list-homepage .news-item { padding: 25px 0 20px 0; border: 1px solid #eee; background: #fff; text-align: center; }*/ /*.news-list-homepage .post-body, .news-list-homepage .news-body { overflow: hidden; line-height: 24px; font-size: 14px; text-align: justify; }*/ /* TÍTULO DAS NOTÍCIAS*/ .news-list-homepage .title { margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; text-transform: uppercase; text-align: center; font-size: 24px; color: #0E2D6D;} /*IMAGENS DAS NOTÍCIAS CENTRADAS*/ .news-list-homepage .news-item { text-align: center; } /*Imagens noticias centradas*/ @media (max-width: 1024px) { .news-list-homepage .news-item { text-align: center; } } /*Justificar o texto à esquerda na página de todas as notícias*/ .post-body, .news-body { clear: both; margin: 0 0 20px; line-height: 20px; font-size: 13px; color: #888; text-align: left; } /*LINKS NAS NOTÍCIAS*/ .news-items .read-more:after, .news-list-homepage .view-all:after { color: #0E2D6D; } .read-more:hover::after { color:#49C7ED; } .view-all:hover::after { color:#49C7ED; } .view-all a:link { color: #0E2D6D; font-weight:bold; text-decoration:none; } .view-all a:visited { color: #0E2D6D;} .view-all a:hover { color: #49C7ED;} .view-all a:active { color: #0E2D6D;} /*LINKS NAS NOTÍCIAS-BOTÕES*/ .buttons a:link { color: #0E2D6D; font-weight:bold; } .buttons a:visited { color: #0E2D6D;} .buttons a:hover { color: #49C7ED;} .buttons a:active { color: #0E2D6D;} /***********suno**************/ /* SITE-INNER*/ .main-content.background-gray {background:#F2F2F2; } .main-content.background-gray { position: relative; background-size: cover; background: #F2F2F2; margin-right: auto; margin-left: auto; margin-bottom: -30px; padding-bottom: 0; width: 100%; } .main-content.background-gray:before, .main-content.background-gray:after { content: '.'; position: absolute; right: 100%; top: 0; bottom: 0; width: 100%; background: #F2F2F2; text-indent: -9999px; font-size: 0; } .main-content.background-gray:before{ right: 100%; } .main-content.background-gray:after{ left: 100%; } .main-content.first-block { margin-top: 16px;} .main-content .content-wrapper {max-width: 1380px; padding: 0 20px; box-sizing: border-box; margin: 0 auto; font-family: "arial";color:#000;} .main-content .content-wrapper img {max-width:100%; display: inline-block;} .main-header .content-wrapper {font-size:0; margin-bottom: 20px;} .main-header .content-title {display:inline-block; vertical-align:middle; width:38%; font-size: 30px; line-height: 35px;color:#000} .main-header .content-title img {max-width:301px; margin-bottom: 10px;} .main-header .content-title p{padding-left: 59px; margin:0;} .main-header .links {display:inline-block; vertical-align:middle; width:62%;} .main-header .links .link{display:inline-block; vertical-align:middle; width:50%; padding-left:22px; box-sizing:border-box;} .main-header .links .link a:hover{text-decoration:none;} .main-header .links .link .label{font-size: 16px; line-height: 19px; text-decoration: underline; margin: 4px 0 0; display: block; font-family: "arial";color:#000} .main-info {padding-top:16px; position:relative;} /*.main-info:before {content:""; height:100%; width:6px; background:#D92A3E; position:absolute; top:0; left:18%;}*/ .main-info .content-wrapper {font-size:0; padding: 100px 0; position:relative;} .main-info .main-content.background-gray .content-wrapper {padding: 43px 0;} .main-info .main-content.design .content-wrapper {padding: 140px 0;} .main-info .content-wrapper:before {content:""; height:100%; width:6px; background:#D92A3E; position:absolute; top:0; left:82px;} .main-info .main-content.first-block .content-wrapper:before { height: calc(100% + 25px); top:-25px; } .main-info .content-wrapper .left {width: 53%; padding-right: 0px; box-sizing: border-box; display:inline-block; vertical-align:middle; z-index: 9; position: relative;} .main-info .content-wrapper .right {width: 47%; padding-left: 20px; box-sizing: border-box; display:inline-block; vertical-align:middle; z-index: 9; position: relative;} .main-info .content-wrapper .info {font-size:20px; padding-left:30px; box-sizing: border-box;} .main-info .content-wrapper .info.left {padding-left: 130px; width: 61%} .main-info .content-wrapper .image.right { width: 39%; text-align: center;} .main-info .content-wrapper .image.right img { margin:0 auto;} .main-info .content-wrapper .info .title {font-size:38px; font-family: "arial"; text-transform:uppercase; position:relative; margin: 0 0 20px;color:#000;} .main-info .content-wrapper .info .title:after {content:""; height:14px; width:14px; background:#D92A3E; position:absolute; bottom:6px; left:-18px;} .main-info .content-wrapper .info .content {margin-bottom:0;} .main-info .content-wrapper .info .content h3 {margin: 15px 0 25px; text-transform: uppercase; font-family: "arial"; font-size: 20px; display: block; line-height: 25px;color:#000;} .main-info .content-wrapper .info .content h3 b{font-family: "arial";color:#000;} .main-info .content-wrapper .info .content p {margin: 0 0 20px;} .main-info .content-wrapper .image .app-links {display:inline-block; padding-left: 40px;} .main-info .content-wrapper .image .app-links a{display:block; margin-top: 5px;} .main-info .content-wrapper.moderna .image.right {position: absolute; top: -35px;} .main-info .content-wrapper .info .content ul {list-style:none; margin-top: 40px; max-width: 580px;} .main-info .content-wrapper .info .content ul li {position:relative; margin-bottom: 40px; line-height: 38px;} .main-info .content-wrapper .info .content ul li::before { content:""; background-image: url(../images/conteudo/check.png); width: 25px; height: 19px; display: inline-block; position: absolute; top: 10px; left: -38px;} .main-info .content-wrapper .info .content ul li:last-child { margin-bottom: 0; } .main-footer .main-content.background-gray {margin-top: 0; } .main-footer ul {padding: 35px 0; list-style:none; font-size:0; text-align: center;} .main-footer ul li {display:inline-block; vertical-align:top; width:calc(25% - 38px); margin-right:50px; font-size:18px; text-align: left;} .main-footer ul li:last-child { margin-right:0;} .main-footer ul li .title {margin-top:20px;} .main-footer ul li .title img {display: inline-block; vertical-align: bottom; max-width: 23px; margin-right: 4px;} .main-footer ul li .title h2 {font-family: "arial"; font-size: 16px; margin: 0; display: inline-block; line-height: 18px; vertical-align: bottom; color:#000;} .main-footer ul li .title a:hover {text-decoration:none; color:#D92A3E;} .main-footer ul li:hover .title h2 {color:#D92A3E;} .main-footer ul li .info {line-height: 24px; padding-left: 32px; margin-top: 5px; font-family: arial"; color:#000;} @media only screen and (max-width: 1200px) { .container {padding: 0 !important;} footer .t3-copyright .container .row {margin:0;} } @media only screen and (max-width: 1000px) { .main-header .content-title { width: 100%; margin-bottom: 50px;} .main-header .links { width: 100%;} .main-header .links .link {padding: 0 10px;} .main-info .content-wrapper {padding-left:20px !important; padding-right:20px !important; box-sizing:border-box;} .main-info .content-wrapper::before {left: 30px;} .main-info .content-wrapper .info.left { padding-left: 70px; width:100%;} .main-info .content-wrapper .image.right { width: 100%; margin-top: 30px;} .main-info .content-wrapper.moderna .image.right { position: relative; top: unset; margin-top: 30px;} .main-info .content-wrapper .image .app-links { margin-top: 20px;} .main-info .content-wrapper .info .content ul { max-width: 100%;} .main-info .main-content.design .content-wrapper { padding: 100px 0;} .main-footer ul li { width: 50%; margin-right: 0; padding: 10px 20px; box-sizing: border-box;} } @media only screen and (max-width: 768px) { .site-logo { margin: 0 0 0 auto;} .main-header .content-title img { max-width: 250px;} .main-header .content-title { font-size: 30px; line-height: 40px;} .main-header .content-title { margin-bottom: 40px;} .main-header .links .link { vertical-align: top;} .main-info .content-wrapper::before { left: 25px;} .main-info .content-wrapper .info { font-size: 16px; padding-left: 40px;} .main-info .content-wrapper .info.left { padding-left: 40px;} .main-info .content-wrapper .info .title { font-size: 30px;} .main-info .content-wrapper .info .content h3 { margin: 10px 0 18px; font-size: 20px; line-height: 28px;} .main-info .content-wrapper .info .content ul { padding-left: 18px; margin-top: 22px;} .main-info .content-wrapper .info .content ul li {margin-bottom: 20px; line-height: 25px;} .main-info .content-wrapper .info .content ul li::before { width: 14px; height: 11px; top: 10px; left: -20px; background-size: cover;} .main-info .content-wrapper .left { width: 100%; padding-right: 1px; margin-bottom: 30px; } .main-info .content-wrapper .right { width: 100%;} .main-info .content-wrapper { padding: 60px 0 40px;} .main-info .main-content.design .content-wrapper { padding: 60px 0 40px;} .main-info .content-wrapper .image.right { margin-top: 0;} .main-info .content-wrapper.moderna .image.right { margin-top: 0;} .main-footer .main-content .content-wrapper { padding: 0 10px;} .main-footer ul li { padding: 10px 10px;} .main-footer ul li .title h2 { font-size: 14px;} .main-footer ul li .title img { max-width: 20px; margin-right: 0px;} .main-footer ul li { font-size: 13px;} .main-footer ul li .info { line-height: 18px;} } @media only screen and (max-width: 450px) { .main-header .content-title { font-size: 20px; line-height: 30px;} .main-header .content-title { margin-bottom: 28px;} .main-header .links .link { margin-bottom: 20px; width:100%;} .main-footer ul li { width: 100%; font-size: 15px;} .main-footer ul li .title { margin-top: 6px;} .main-footer ul li .title img { max-width: 23px;} .main-footer ul li .title h2 { font-size: 16px;} .main-footer ul li .info { line-height: 22px;} } /* END OF SITE-INNER*/